/* Versões alternativas da interface. O visual padrão ("claro") está em app.css.
   A versão ativa é definida em <html data-tema="..."> por js/tema.js.
   Depois de escolher uma, as outras (e o seletor) podem ser removidas. */

/* ---------- seletor de visual (não aparece em produção) ---------- */
.tema-switch {
  position: fixed; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; align-items: center; gap: 4px; padding: 4px;
  background: #fff; border: 1px solid #C9C2B2; border-radius: 999px; box-shadow: 0 4px 16px rgba(13, 23, 51, .25);
  font: 700 .75rem/1 'Roboto Condensed', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .05em;
}
.tema-switch span { padding: 0 2px 0 12px; color: #5A6178; }
.tema-switch select {
  width: auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; text-transform: inherit; letter-spacing: inherit; background: #0D1733; color: #DFB94E;
}
.com-seletor .container { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } /* espaço para o seletor */

/* ==================================================================
   NOITE — fundo azul da marca, dourado em destaque (como a capa do manual)
   ================================================================== */
[data-cor="noite"] {
  --bg: #0A1228; --surface: #111D40; --text: #F4EFE3; --muted: #A9B0C6; --line: #26366A;
  color-scheme: dark;
}
[data-cor="noite"] .topbar { background: transparent; border-bottom: 1px solid var(--line); }
[data-cor="noite"] .statusbar { background: #0D1733; }
[data-cor="noite"] .statusbar-warn { background: #2A2412; border-bottom-color: #6B5621; }
[data-cor="noite"] .statusbar-warn .status-text { color: var(--gold-light); }
[data-cor="noite"] h1 { color: var(--gold-light); }
[data-cor="noite"] input { background: #0A1228; border-color: #3A4C85; color: #fff; }
[data-cor="noite"] input::placeholder { color: #7C86A6; }
[data-cor="noite"] input:focus { border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(223, 185, 78, .3); }
[data-cor="noite"] .back { color: var(--gold-light); }
[data-cor="noite"] .btn:focus-visible { outline-color: var(--gold-light); }
[data-cor="noite"] .btn-outline { color: var(--gold-light); border-color: var(--gold); }
[data-cor="noite"] .btn-add { background: var(--grad-gold); color: var(--navy); }
[data-cor="noite"] .btn-remove, [data-cor="noite"] .btn-ghost-dark { color: var(--cream); border-color: #3A4C85; }
[data-cor="noite"] .badge { background: var(--gold-light); color: var(--navy); }
[data-cor="noite"] .chip-on { background: #153A29; color: #8FE0A8; }
[data-cor="noite"] .chip-off { background: var(--cream); color: var(--navy); }
[data-cor="noite"] .toast { background: var(--cream); color: var(--navy); }

/* ==================================================================
   EDITORIAL — branco, sem caixas, tipografia grande, campos sublinhados
   ================================================================== */
[data-tema="editorial"] { --bg: #FFFFFF; --line: #E9E4D8; }
[data-tema="editorial"] .topbar { background: #fff; color: var(--navy); border-bottom: 3px solid var(--gold); }
[data-tema="editorial"] .brand-name { color: var(--muted); }
[data-tema="editorial"] .btn-ghost { color: var(--navy); border-color: var(--navy); }
[data-tema="editorial"] .statusbar { border-bottom: 0; }
[data-tema="editorial"] .container { padding-top: 24px; }
[data-tema="editorial"] .card { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 0 28px; margin-bottom: 24px; }
[data-tema="editorial"] .card:last-child { border-bottom: 0; }
[data-tema="editorial"] .card-login { border-top: 0; }
[data-tema="editorial"] h1 { font-size: 2.3rem; }
[data-tema="editorial"] h1::after { content: ''; display: block; width: 56px; height: 4px; margin: 10px 0 12px; background: var(--grad-gold); }
[data-tema="editorial"] .card-login h1::after { margin-inline: auto; }
[data-tema="editorial"] h2 { font-size: 1.4rem; }
[data-tema="editorial"] .form { gap: 22px; }
[data-tema="editorial"] input {
  background: transparent; border: 0; border-bottom: 2px solid var(--navy); border-radius: 0;
  padding: 8px 0; font-size: 1.3rem;
}
[data-tema="editorial"] input:focus { border-bottom-color: var(--gold); box-shadow: 0 2px 0 var(--gold); }
[data-tema="editorial"] input.invalid { border-bottom-color: #B3261E; }
[data-tema="editorial"] .btn { border-radius: 999px; }
[data-tema="editorial"] .btn-primary { background: var(--navy); color: var(--gold-light); }
[data-tema="editorial"] .btn-add { background: var(--grad-gold); color: var(--navy); }
[data-tema="editorial"] .item { padding: 18px 0; }
[data-tema="editorial"] .item-title { font-size: 1.25rem; }

/* ==================================================================
   PAINEL — duas colunas em telas largas (formulário fixo + lista),
   cartões com sombra, status flutuante, iniciais na lista
   ================================================================== */
[data-base="painel"] { --bg: #EEF0F6; --line: #E4E6EE; }
[data-base="painel"] .topbar-inner,
[data-base="painel"] .statusbar-inner,
[data-base="painel"] .container { max-width: 1120px; }
[data-base="painel"] .topbar {
  padding-bottom: 46px;
  background:
    linear-gradient(90deg, var(--navy) 40%, transparent 85%),
    repeating-radial-gradient(circle at 90% 50%, transparent 0 26px, rgba(223, 185, 78, .3) 26px 28px),
    var(--grad-navy);
}
[data-base="painel"] .statusbar { background: transparent; border: 0; margin-top: -30px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); top: 8px; }
[data-base="painel"] .statusbar-inner { background: #fff; border-radius: 999px; padding: 8px 8px 8px 14px; box-shadow: 0 4px 18px rgba(13, 23, 51, .16); }
[data-base="painel"] .statusbar-warn .statusbar-inner { background: #FBF3E2; }
[data-base="painel"] .btn-sm { border-radius: 999px; }
[data-base="painel"] .card { border: 0; border-radius: 18px; box-shadow: 0 2px 14px rgba(13, 23, 51, .08); }
[data-base="painel"] .container > .card:first-of-type { border-top: 4px solid var(--gold); }
[data-base="painel"] .card-login { max-width: 480px; margin-inline: auto; }
[data-base="painel"] input { background: #F7F8FB; border-color: #D5D9E6; }
[data-base="painel"] input:focus { background: #fff; }
[data-base="painel"] .avatar {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--grad-navy); color: var(--gold-light); font-weight: 700; letter-spacing: .04em;
}
[data-base="painel"] .item-link { margin: 0 -10px; padding: 14px 10px; border-radius: 12px; }
[data-base="painel"] .item-link:hover { background: #F4F5FA; }

@media (min-width: 900px) {
  [data-base="painel"] .container { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; gap: 20px; align-items: start; align-content: start; padding-top: 24px; }
  [data-base="painel"] .back,
  [data-base="painel"] .card-login { grid-column: 1 / -1; }
  [data-base="painel"] .back { padding-bottom: 0; }
  [data-base="painel"] .container > .card:first-of-type:not(.card-login) { position: sticky; top: 76px; }
  [data-base="painel"] .form-row { flex-direction: column; align-items: stretch; }
  [data-base="painel"] .field-date { flex: none; }
}

/* ==================================================================
   Variações construídas sobre o PAINEL (data-base="painel")
   ================================================================== */

/* ---------- PAINEL NOITE — mesmo layout, cores escuras ---------- */
[data-tema="painel-noite"] { --bg: #0A1228; --line: #26366A; }
[data-tema="painel-noite"] .topbar { border-bottom: 0; }
[data-tema="painel-noite"] .statusbar-inner { background: #16234D; border: 1px solid var(--line); box-shadow: 0 4px 18px rgba(0, 0, 0, .4); }
[data-tema="painel-noite"] .statusbar-warn .statusbar-inner { background: #2A2412; border-color: #6B5621; }
[data-tema="painel-noite"] .card { box-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
[data-tema="painel-noite"] input, [data-tema="painel-noite"] input:focus { background: #0A1228; border-color: #3A4C85; }
[data-tema="painel-noite"] input:focus { border-color: var(--gold-light); }
[data-tema="painel-noite"] .avatar { background: var(--grad-gold); color: var(--navy); }
[data-tema="painel-noite"] .item-link:hover { background: #17265A; }

/* ---------- DOURADO — cabeçalho dourado, fundo creme, botões azuis ---------- */
[data-tema="dourado"] { --bg: #F7F1E5; --line: #EADFC8; }
[data-tema="dourado"] .topbar {
  color: var(--navy);
  background:
    linear-gradient(90deg, var(--gold) 40%, transparent 85%),
    repeating-radial-gradient(circle at 90% 50%, transparent 0 26px, rgba(13, 23, 51, .2) 26px 28px),
    var(--grad-gold);
}
[data-tema="dourado"] .brand-name { color: var(--navy); }
[data-tema="dourado"] .btn-ghost { color: var(--navy); border-color: rgba(13, 23, 51, .5); }
[data-tema="dourado"] .btn-primary { background: var(--grad-navy); color: var(--gold-light); }
[data-tema="dourado"] .container > .card:first-of-type { border-top-color: var(--navy); }
[data-tema="dourado"] .avatar { background: var(--grad-gold); color: var(--navy); }
[data-tema="dourado"] input { background: #FCFAF5; border-color: #DDD3BD; }
[data-tema="dourado"] .item-link:hover { background: #FAF5EA; }

/* ---------- ACOLHEDOR — tons quentes da paleta secundária, cantos bem arredondados ---------- */
[data-tema="acolhedor"] { --bg: #FBF6EC; --line: #F0E6D2; }
[data-tema="acolhedor"] .topbar { background: var(--cream); color: var(--navy); border-radius: 0 0 28px 28px; }
[data-tema="acolhedor"] .brand-name { color: var(--brown); }
[data-tema="acolhedor"] .btn-ghost { color: var(--navy); border-color: rgba(13, 23, 51, .4); }
[data-tema="acolhedor"] .card { border-radius: 26px; box-shadow: 0 6px 24px rgba(141, 70, 35, .1); }
[data-tema="acolhedor"] .container > .card:first-of-type { border-top: 0; }
[data-tema="acolhedor"] h1 { color: var(--brown); }
[data-tema="acolhedor"] .back { color: var(--brown); }
[data-tema="acolhedor"] input { min-height: 58px; border-radius: 16px; background: #FFFDF8; border-color: #E6D9BF; }
[data-tema="acolhedor"] .btn { border-radius: 16px; }
[data-tema="acolhedor"] .btn-sm { border-radius: 999px; }
[data-tema="acolhedor"] .btn-primary { background: linear-gradient(45deg, var(--brown), var(--copper)); color: #fff; }
[data-tema="acolhedor"] .btn-add { background: var(--cream); color: var(--brown); }
[data-tema="acolhedor"] .avatar { background: var(--cream); color: var(--brown); }
[data-tema="acolhedor"] .item-link:hover { background: #FBF4E6; }

/* ---------- LATERAL — em telas largas o cabeçalho vira uma barra lateral fixa ---------- */
@media (min-width: 1000px) {
  [data-tema="lateral"] body { display: grid; grid-template-columns: 270px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  [data-tema="lateral"] .topbar {
    grid-column: 1; grid-row: 1 / -1; position: sticky; top: 0; height: 100dvh; padding: 30px 24px;
    background:
      linear-gradient(180deg, var(--navy) 45%, transparent 90%),
      repeating-radial-gradient(circle at 50% 100%, transparent 0 26px, rgba(223, 185, 78, .3) 26px 28px),
      var(--grad-navy);
  }
  [data-tema="lateral"] .topbar-inner { flex-direction: column; align-items: stretch; height: 100%; }
  [data-tema="lateral"] .brand-app { font-size: 1.7rem; }
  [data-tema="lateral"] .side-nav {
    display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto;
    margin: 22px -10px 16px; padding: 0 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent;
  }
  [data-tema="lateral"] .side-nav a { color: #fff; text-decoration: none; border-radius: 10px; }
  [data-tema="lateral"] .side-nav a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; }
  [data-tema="lateral"] .side-new {
    padding: 11px 12px; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem;
    border: 1.5px solid var(--gold); color: var(--gold-light) !important;
  }
  [data-tema="lateral"] .side-new[aria-current="page"] { background: var(--grad-gold); color: var(--navy) !important; }
  [data-tema="lateral"] .side-title { margin: 18px 10px 6px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-light); }
  [data-tema="lateral"] .side-link { display: flex; flex-direction: column; gap: 1px; padding: 9px 10px; border-left: 3px solid transparent; }
  [data-tema="lateral"] .side-link:hover { background: rgba(255, 255, 255, .08); }
  [data-tema="lateral"] .side-link[aria-current="page"] { background: rgba(13, 23, 51, .85); border-left-color: var(--gold-light); box-shadow: inset 0 0 0 1px rgba(223, 185, 78, .35); }
  [data-tema="lateral"] .side-link-title { font-weight: 700; overflow-wrap: anywhere; }
  [data-tema="lateral"] .side-link-sub, [data-tema="lateral"] .side-empty { font-size: .85rem; color: #B9C0D6; }
  [data-tema="lateral"] .side-empty { padding: 0 10px; }
  [data-tema="lateral"] .topbar-right { flex-direction: column; align-items: stretch; gap: 12px; }
  [data-tema="lateral"] .user-name { max-width: none; }
  [data-tema="lateral"] .statusbar { grid-column: 2; margin-top: 18px; top: 12px; padding: 0 24px; }
  [data-tema="lateral"] .container { grid-column: 2; width: 100%; padding-left: 24px; padding-right: 24px; }
  [data-tema="lateral"] .container > .card:first-of-type:not(.card-login) { top: 84px; }
}