/* ============================================================================
   portal.css — design system do Portal de BI.

   PROCEDÊNCIA DE CADA DECISÃO (os três arquivos que o pedido mandou mesclar):

   · "Financial - Coelho e Tachy" é a BASE, como pedido. Dele vêm a paleta
     navy/floresta/granada, as três famílias tipográficas com papéis rígidos
     (serifa só em título, mono só em número, sans no resto), o rail em
     gradiente com a barra brass no item ativo, o KPI que levanta 2px no hover,
     a régua que preenche a linha do título de seção e a densidade de padding.

   · "Painel Rocha Leite" entra com o que ele faz melhor: o TEMA ESCURO
     completo — inclusive a paleta de séries dos gráficos, que o Coelho e Tachy
     não tem —, a barra de período em chips, a célula editável em dourado
     (calculado × lançado) e a coluna congelada da DRE.

   · Do index.html atual ficam a estrutura de shell já conhecida da equipe e o
     alternador de tema.

   REGRA QUE SUSTENTA O CONJUNTO: cor é semáforo, não decoração. Verde, granada
   e âmbar aparecem em valor, chip, borda-esquerda ou ponto — nunca como fundo
   de card. Quem quebra isso transforma o painel num arco-íris em que nada mais
   chama atenção.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- marca ----- */
  --ink:          #0A1628;
  --navy:         #132F4F;
  --navy-deep:    #0B1F38;
  --navy-700:     #1B3A5E;
  --azure:        #1F5F9E;
  --brass:        #B08D57;

  /* ---------------------------------------------------------- semáforo -- */
  /* Nomes por SIGNIFICADO, não por cor: o dia em que o âmbar virar laranja,
     muda-se aqui e nada mais. `--pos`/`--neg`/`--aten` são os nomes que o
     motor de gráficos (js/portal/charts.js) espera encontrar. */
  --pos:          #1D6B4C;
  --pos-soft:     #EAF3EE;
  --pos-linha:    #CBE3D6;
  --neg:          #9E2B2B;
  --neg-soft:     #FAEDED;
  --neg-linha:    #EFD2D2;
  --aten:         #8A6410;
  --aten-soft:    #FBF3E3;
  --aten-linha:   #EEDFC0;
  --info:         #1F5F9E;
  --info-soft:    #EDF3FA;
  --info-linha:   #D3E3F3;

  /* ---------------------------------------------------------- superfície */
  --paper:        #F5F6F8;
  --surface:      #FFFFFF;
  --surface-2:    #FAFBFC;
  --surface-3:    #F1F4F8;
  --line:         #E4E8EE;
  --line-strong:  #CFD6E0;
  --line-soft:    #EFF2F6;

  --text:         #0E1B2C;
  --text-2:       #43536B;
  --text-3:       #7A879B;

  /* ---------------------------------------------------------- séries ---- */
  /* Dez cores para os gráficos, na ordem de uso. As quatro primeiras carregam
     o significado (institucional, resultado, análise, destaque); as demais são
     variações dessas mesmas famílias, para uma série de dez fatias não virar
     um catálogo de tintas. */
  --serie-1:  #132F4F;
  --serie-2:  #1D6B4C;
  --serie-3:  #1F5F9E;
  --serie-4:  #B08D57;
  --serie-5:  #7E93AC;
  --serie-6:  #9E2B2B;
  --serie-7:  #5C8A73;
  --serie-8:  #8A6410;
  --serie-9:  #3E5F86;
  --serie-10: #A6B5C6;

  /* Cor de destaque do cliente. O PHP valida o hex antes de gravar; o front a
     injeta aqui. Vem com o navy como padrão para o portal nunca ficar sem. */
  --marca:        var(--navy);

  /* ---------------------------------------------------------- forma ----- */
  --r-sm: 6px;  --r: 10px;  --r-lg: 16px;  --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(11,31,56,.06), 0 1px 3px rgba(11,31,56,.04);
  --sh-2: 0 2px 6px rgba(11,31,56,.06), 0 8px 24px rgba(11,31,56,.07);
  --sh-3: 0 18px 60px rgba(11,31,56,.18);

  --rail:   266px;
  --rail-min: 68px;
  --topbar:  66px;

  /* ---------------------------------------------------------- tipografia */
  /* Três famílias, três papéis. É a mistura que dá o ar institucional; usar
     uma só transforma o painel num relatório de sistema interno. */
  --f-display: 'Iowan Old Style','Palatino Linotype','Book Antiqua','URW Palladio L',Palatino,Georgia,'Times New Roman',serif;
  --f-ui:      -apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI','Inter','Roboto','Helvetica Neue',Arial,sans-serif;
  --f-num:     ui-monospace,'SF Mono','JetBrains Mono','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- ESCURO */
/* Sobrescreve TODOS os tokens, inclusive as dez séries. O motor de gráficos
   emite `fill="var(--serie-3)"` dentro do SVG, então o gráfico inteiro
   re-tematiza sozinho na troca de tema, sem uma linha de JavaScript e sem
   redesenhar nada. Foi a melhor ideia do painel Rocha Leite e é o motivo de a
   paleta ser token e não constante no JS. */
[data-theme="dark"] {
  --ink:          #E8EDF4;
  --navy:         #1B3A5E;
  --navy-deep:    #060D16;
  --navy-700:     #24507E;
  --azure:        #5E9FCF;
  --brass:        #D2AE86;

  --pos:          #3FB489;
  --pos-soft:     #0E2A22;
  --pos-linha:    #1C4438;
  --neg:          #E4576F;
  --neg-soft:     #2E1218;
  --neg-linha:    #4A2029;
  --aten:         #DCA94A;
  --aten-soft:    #2E2412;
  --aten-linha:   #4A3B1C;
  --info:         #5E9FCF;
  --info-soft:    #10243A;
  --info-linha:   #1E3B5A;

  --paper:        #080F19;
  --surface:      #0F1926;
  --surface-2:    #131F2E;
  --surface-3:    #18273A;
  --line:         #1F2E42;
  --line-strong:  #2A3B52;
  --line-soft:    #182534;

  --text:         #E8EDF4;
  --text-2:       #9BAABD;
  --text-3:       #66788E;

  --serie-1:  #8FB3D4;
  --serie-2:  #5FBF95;
  --serie-3:  #5E9FCF;
  --serie-4:  #D2AE86;
  --serie-5:  #8FA5BC;
  --serie-6:  #E4576F;
  --serie-7:  #7FB79B;
  --serie-8:  #DCA94A;
  --serie-9:  #7594AF;
  --serie-10: #9AAABC;

  /* Sombra colorida não funciona no escuro: sobre fundo quase preto, o navy
     translúcido some. Preto puro com opacidade maior é o que dá relevo. */
  --sh-1: 0 1px 2px rgba(0,0,0,.40);
  --sh-2: 0 2px 4px rgba(0,0,0,.30), 0 8px 20px -8px rgba(0,0,0,.50);
  --sh-3: 0 4px 8px rgba(0,0,0,.35), 0 24px 48px -16px rgba(0,0,0,.60);
}

/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--paper);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }

button {
  font: inherit; color: inherit; cursor: pointer;
  background: none; border: none; padding: 0;
}

a { color: var(--azure); text-decoration: none; }
a:hover { text-decoration: underline; }

input, select, textarea { font: inherit; color: inherit; }

img { max-width: 100%; display: block; }

::selection { background: rgba(31,95,158,.16); }

/* Foco visível é acessibilidade, não enfeite. `:focus-visible` mostra só para
   quem navega por teclado, sem o anel aparecer a cada clique de mouse. */
:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Barra fina com respiro: o truque é a borda transparente com
   background-clip, que "afina" o polegar sem reduzir a área de arraste. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text-3); background-clip: content-box; }

/* Todo número usa a mono com tabular-nums: sem isso, a coluna de valores
   "dança" a cada atualização porque o 1 é mais estreito que o 8. */
.num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.mut  { color: var(--text-3); }
.tiny { font-size: 11.5px; color: var(--text-3); }
.pos  { color: var(--pos); }
.neg  { color: var(--neg); }
.aten { color: var(--aten); }

.esconde { display: none !important; }

/* ==========================================================================
   3. SHELL — rail + topbar + canvas
   ========================================================================== */

#shell {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  min-height: 100vh;
  transition: grid-template-columns .22s var(--ease);
}
#shell.rail-min { grid-template-columns: var(--rail-min) 1fr; }

/* ------------------------------------------------------------------ rail */

#rail {
  background: linear-gradient(180deg, #102944 0%, var(--navy-deep) 58%, #081729 100%);
  color: #C9D6E4;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.06);
  z-index: 40;
  overflow: hidden;
}

.rail-head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; gap: 12px;
}
/* Logo colorido sobre fundo escuro: em vez de manter duas versões do PNG,
   branqueia-se o que houver. Serve para o logo de qualquer cliente. */
.rail-head img { width: 150px; filter: brightness(0) invert(1); opacity: .95; }
.rail-head .sub {
  margin-top: 11px; font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: #7E96B2;
}

/* Marca em quadrado com as iniciais — usada quando o cliente não tem logo, e
   no rail colapsado. Ideia do painel Rocha Leite. */
.rail-mark {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
  background: linear-gradient(140deg, var(--brass), #8E6E42);
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 15px; font-weight: 700; color: #12283F;
}

.rail-nav { flex: 1; overflow-y: auto; padding: 12px 12px 8px; }

.nav-label {
  font-size: 9.5px; letter-spacing: .19em; text-transform: uppercase;
  color: #5E7793; padding: 14px 12px 7px; font-weight: 600;
}

.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 8px 12px; border-radius: 8px;
  color: #BACADA; font-size: 13.2px; text-align: left;
  transition: background .16s, color .16s;
  position: relative;
}
.nav-item svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: .72; }
.nav-item:hover { background: rgba(255,255,255,.055); color: #EAF1F8; }
.nav-item.on { background: rgba(255,255,255,.10); color: #fff; }
.nav-item.on svg { opacity: 1; }
/* Barra brass colada na borda do rail (o -12px compensa o padding do nav).
   É a marca visual do item ativo — e não desloca o texto, ao contrário de uma
   border-left. */
.nav-item.on::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px;
  width: 2.5px; background: var(--brass); border-radius: 0 3px 3px 0;
}
.nav-item .badge {
  margin-left: auto; background: var(--neg); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 20px; font-family: var(--f-num);
}

.rail-foot {
  padding: 14px 20px 18px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: 10.5px; color: #6E88A5; line-height: 1.6;
}
.rail-foot img { width: 100px; filter: brightness(0) invert(1); opacity: .62; margin-bottom: 9px; }

/* Colapso: some o texto por CSS, sem JS de medição. */
#shell.rail-min .rail-head .sub,
#shell.rail-min .rail-head img,
#shell.rail-min .nav-label,
#shell.rail-min .nav-item span,
#shell.rail-min .rail-foot { display: none; }
#shell.rail-min .nav-item { justify-content: center; padding: 10px; }
#shell.rail-min .rail-head { justify-content: center; padding: 20px 10px 16px; }

#railScrim {
  position: fixed; inset: 0; background: rgba(10,22,40,.34);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 39;
}
#railScrim.on { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------- topbar */

#main { min-width: 0; display: flex; flex-direction: column; }

#topbar {
  height: var(--topbar);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 35;
  display: flex; align-items: center; gap: 14px; padding: 0 26px;
}
/* color-mix é recente; sem ele o topo fica sem fundo e o conteúdo passa por
   baixo ao rolar. O fallback abre mão da transparência, não da legibilidade. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  #topbar { background: var(--surface); }
}

.crumbs { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); min-width: 0; }
.crumbs b {
  color: var(--text); font-weight: 600; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumbs .sep { opacity: .5; }

.top-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.busca-trigger {
  display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--text-3); font-size: 12.5px;
  min-width: 212px; transition: border-color .16s, box-shadow .16s;
}
.busca-trigger:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); }
.busca-trigger kbd {
  margin-left: auto; font-family: var(--f-num); font-size: 10.5px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; color: var(--text-3);
}

/* ---------------------------------------------------------------- canvas */

#canvas { flex: 1; padding: 26px 26px 72px; max-width: 1560px; width: 100%; margin: 0 auto; }

.page { animation: pageIn .34s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   4. TÍTULOS
   ========================================================================== */

.page-head { margin: 2px 0 22px; display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.page-head h1 {
  font-family: var(--f-display); font-weight: 400; font-size: 29px;
  letter-spacing: -.01em; color: var(--text);
}
.page-head p { margin-top: 7px; color: var(--text-2); font-size: 13.2px; max-width: 74ch; }
.page-head .ph-side { margin-left: auto; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

.eyebrow {
  font-size: 10px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--text-3); font-weight: 650;
}

/* A régua que preenche o resto da linha ao lado do título serifado é uma das
   assinaturas do layout do Coelho e Tachy. Custa três linhas e é o que separa
   "seção" de "mais um h2". */
.sec { margin: 32px 0 14px; display: flex; align-items: center; gap: 12px; }
.sec h2 {
  font-family: var(--f-display); font-weight: 400; font-size: 19px;
  color: var(--text); white-space: nowrap;
}
.sec .rule { flex: 1; height: 1px; background: var(--line); }
.sec .side { display: flex; gap: 8px; align-items: center; }

/* ==========================================================================
   5. GRID
   ========================================================================== */

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.span2 { grid-column: span 2; }

/* ==========================================================================
   6. CARD E KPI
   ========================================================================== */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.card-h {
  padding: 16px 20px 13px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 11px;
}
.card-h h3 { font-size: 13.5px; font-weight: 650; letter-spacing: -.005em; }
.card-h .side { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.card-b { padding: 18px 20px; }
.card-b.flush { padding: 0; }

.kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 17px 15px;
  position: relative; overflow: hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s;
}
.kpi.clicavel { cursor: pointer; }
.kpi.clicavel:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--line-strong); }
/* Semáforo discreto: a barra colorida à esquerda só aparece no hover. Marcada
   permanentemente, quatro KPIs coloridos lado a lado viram um semáforo
   quebrado em que nenhum dos quatro chama atenção. */
.kpi::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2.5px; background: var(--line-strong); opacity: 0; transition: opacity .2s;
}
.kpi.clicavel:hover::after { opacity: 1; }
.kpi.k-pos::after  { background: var(--pos); }
.kpi.k-neg::after  { background: var(--neg); }
.kpi.k-aten::after { background: var(--aten); }

.kpi .kl {
  font-size: 11px; letter-spacing: .055em; text-transform: uppercase;
  color: var(--text-3); font-weight: 650;
  display: flex; align-items: center; gap: 6px;
}
.kpi .kv {
  font-family: var(--f-num); font-size: 23px; font-weight: 600;
  margin-top: 9px; letter-spacing: -.02em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi .kv.sm { font-size: 19px; }
.kpi .kd {
  margin-top: 7px; font-size: 11.5px; color: var(--text-2);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

.help-dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--text-3);
  font-size: 9.5px; font-weight: 700;
  display: inline-grid; place-items: center; flex: 0 0 15px;
  transition: background .15s, color .15s, border-color .15s;
}
.help-dot:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--f-num); font-size: 11.5px; font-weight: 600; }
.delta.sobe  { color: var(--pos); }
.delta.desce { color: var(--neg); }
.delta.igual { color: var(--text-3); }

/* ==========================================================================
   7. BOTÕES E CAMPOS
   ========================================================================== */

/* Altura 34px é universal em controle de barra (botão, ícone, seletor); campo
   de formulário é 36px. Misturar as duas é o que faz uma barra parecer
   desalinhada sem que se ache o motivo. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 12.8px; font-weight: 600; color: var(--text);
  transition: background .16s, border-color .16s, box-shadow .16s, transform .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); box-shadow: var(--sh-1); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; flex: 0 0 15px; }

.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-700); border-color: var(--navy-700); }
.btn.brass { background: var(--brass); border-color: var(--brass); color: #12283F; }
.btn.brass:hover { filter: brightness(1.06); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--line); }
.btn.danger { color: var(--neg); border-color: var(--neg-linha); background: var(--neg-soft); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.btn.bloco { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.icon-btn {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; color: var(--text-2);
  border: 1px solid transparent;
  transition: background .16s, border-color .16s, color .16s;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn.on { color: var(--brass); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label, label.f {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); font-weight: 650;
}
.inp {
  height: 36px; border: 1px solid var(--line); border-radius: 9px;
  padding: 0 11px; background: var(--surface); font-size: 13px; width: 100%;
  transition: border-color .16s, box-shadow .16s;
}
.inp:focus { outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px rgba(31,95,158,.11); }
.inp:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
textarea.inp { height: auto; padding: 9px 11px; resize: vertical; min-height: 74px; line-height: 1.5; }
.inp.num { text-align: right; font-family: var(--f-num); }

/* A seta do select é um data-URI porque a CSP proíbe recurso externo e porque
   `appearance:none` sem seta deixa o campo indistinguível de um input. */
select.inp {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A879B' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 30px;
}

/* Célula ajustada à mão sobre um valor calculado. Do painel Rocha Leite: o
   `placeholder` mostra o calculado, o `value` só existe quando alguém lançou
   diferente, e o dourado deixa claro o tempo todo o que é máquina e o que é
   humano. */
.inp.ajustada { border-color: var(--brass); background: var(--aten-soft); font-weight: 600; color: var(--text); }

.hint { font-size: 11.5px; color: var(--text-3); margin-top: 5px; line-height: 1.45; }

/* Interruptor. Usado no admin para ligar/desligar aba e cliente. */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .trilho {
  width: 38px; height: 22px; border-radius: 20px;
  background: var(--line-strong); position: relative;
  transition: background .18s var(--ease); flex: 0 0 38px;
}
.switch .trilho::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--sh-1);
  transition: transform .18s var(--ease);
}
.switch input:checked + .trilho { background: var(--pos); }
.switch input:checked + .trilho::after { transform: translateX(16px); }
.switch input:focus-visible + .trilho { outline: 2px solid var(--azure); outline-offset: 2px; }

/* ==========================================================================
   8. CHIPS, TAGS E ABAS
   ========================================================================== */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid transparent;
}
.chip.ok      { background: var(--pos-soft);  color: var(--pos);  border-color: var(--pos-linha); }
.chip.atencao { background: var(--aten-soft); color: var(--aten); border-color: var(--aten-linha); }
.chip.critico { background: var(--neg-soft);  color: var(--neg);  border-color: var(--neg-linha); }
.chip.info    { background: var(--info-soft); color: var(--info); border-color: var(--info-linha); }
.chip.neutro  { background: var(--surface-2); color: var(--text-2); border-color: var(--line); }

/* Segmented control. Uma escolha entre poucas alternativas exclusivas. */
.tabs {
  display: flex; gap: 3px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 10px; padding: 3px; flex-wrap: wrap;
}
.tab {
  padding: 6px 13px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); transition: background .16s, color .16s;
}
.tab:hover { color: var(--text); }
.tab.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }

/* Barra de período — do painel Rocha Leite, e a melhor ideia dele em usabilidade:
   UM controle global de período governa TODAS as telas, em vez de cada card ter
   o próprio filtro. */
.periodo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 16px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.periodo .pipe { width: 1px; height: 22px; background: var(--line-strong); }
.periodo .rot {
  margin-left: auto; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  padding: 5px 11px; border-radius: 20px; border: 1px solid var(--line-strong);
  font-size: 12px; background: var(--surface); color: var(--text-2);
  transition: border-color .18s, background .18s, color .18s;
}
.chip-btn:hover { border-color: var(--brass); color: var(--text); }
.chip-btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ==========================================================================
   9. TABELAS
   ========================================================================== */

table { border-collapse: collapse; width: 100%; }
table.tbl { font-size: 13px; }

table.tbl th {
  text-align: left; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); font-weight: 650; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
table.tbl th.r, table.tbl td.r { text-align: right; }
table.tbl th.c, table.tbl td.c { text-align: center; }
table.tbl td { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.tbl tbody tr { transition: background .12s; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr:last-child td { border-bottom: none; }

table.tbl th.ordenavel { cursor: pointer; user-select: none; }
table.tbl th.ordenavel:hover { color: var(--text-2); }

.tbl-wrap { overflow: auto; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.tbl-wrap.scroll { max-height: 520px; }

/* Valor rastreável: qualquer número clicável ganha um sublinhado pontilhado
   que só aparece no hover. É o convite discreto para o drill-down. */
.tv {
  cursor: pointer; border-bottom: 1px dotted transparent;
  transition: border-color .15s, color .15s;
}
.tv:hover { border-bottom-color: var(--azure); color: var(--azure); }

/* ------------------------------------------------------------------ DRE */

/* Hierarquia por recuo, sem árvore visual: linha de demonstração contábil já
   tem estrutura demais para ganhar mais um traço. */
.dre-n1 > td:first-child { padding-left: 14px; font-weight: 650; }
.dre-n2 > td:first-child { padding-left: 34px; }
.dre-n3 > td:first-child { padding-left: 54px; }
.dre-n4 > td:first-child { padding-left: 74px; }

.dre-total { background: var(--surface-2); font-weight: 700; }
.dre-total td { border-top: 1.5px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.dre-soma { background: var(--surface-3); }
.dre-soma td { font-weight: 650; }
/* Total "forte" invertido em navy sólido — do painel Rocha Leite. O olho acha
   o resultado do exercício sem procurar. */
.dre-forte td { background: var(--navy); color: #fff; font-weight: 700; }

/* Primeira coluna congelada. O z-index escalonado (1 no corpo, 3 no cabeçalho)
   é o que impede a célula do canto de passar por baixo do thead ao rolar. */
.dre td:first-child, .dre th:first-child {
  position: sticky; left: 0; background: var(--surface); z-index: 1;
  min-width: 290px; box-shadow: 1px 0 0 var(--line-soft);
}
.dre thead th:first-child { background: var(--surface-2); z-index: 3; }
.dre .sig { display: inline-block; width: 22px; color: var(--text-3); font-family: var(--f-num); font-size: 11px; }
.dre .pc  { font-family: var(--f-num); font-size: 11px; color: var(--text-3); }
/* Linha inteiramente zerada continua visível, só apagada. Ocultá-la quebraria
   a comparação entre períodos e faria a demonstração mudar de forma a cada mês. */
.dre tr.zero td { opacity: .42; }

.twist {
  width: 16px; height: 16px; display: inline-grid; place-items: center;
  margin-right: 6px; color: var(--text-3); flex: 0 0 16px;
  transition: transform .18s var(--ease);
}
.twist.aberto { transform: rotate(90deg); }

/* ==========================================================================
   10. GRÁFICOS  (classes emitidas por js/portal/charts.js)
   ========================================================================== */

.chart { width: 100%; display: block; overflow: visible; }
.chart .gridline { stroke: var(--line); stroke-width: 1; }
.chart .axis     { stroke: var(--line-strong); stroke-width: 1; }
.chart text      { font-family: var(--f-num); font-size: 10px; fill: var(--text-3); }
.chart text.lbl  { font-family: var(--f-ui); font-size: 10.5px; }
.chart .bar      { transition: opacity .18s; }
.chart .bar:hover { opacity: .78; }
.chart .dot      { cursor: pointer; }

.chart-vazio {
  padding: 30px 20px; text-align: center;
  color: var(--text-3); font-size: 12.5px;
}

.chart-tip {
  position: fixed; background: var(--ink); color: var(--paper);
  padding: 8px 11px; border-radius: 8px; font-size: 11.8px;
  pointer-events: none; z-index: 88; box-shadow: var(--sh-2);
  opacity: 0; transition: opacity .13s; white-space: nowrap; line-height: 1.5;
}
.chart-tip.on { opacity: 1; }
/* No escuro, --ink já é claro; a tooltip precisa inverter junto para não virar
   texto claro sobre fundo claro. */
[data-theme="dark"] .chart-tip { color: #0B1420; }

.legend { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--text-2); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 6px; }

/* Ranking horizontal — divs, não SVG: o texto fica selecionável e o ellipsis
   de rótulo longo funciona sem cálculo de largura. */
.bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.bar-row .lb { flex: 0 0 200px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .tr { flex: 1; height: 9px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.bar-row .fl { height: 100%; border-radius: 5px; transition: width .5s var(--ease); }
.bar-row .vl { flex: 0 0 122px; text-align: right; font-family: var(--f-num); font-size: 12px; }

/* ==========================================================================
   11. NOTA, VAZIO, ALERTA
   ========================================================================== */

/* Texto explicativo é parte do design, não enfeite: um painel que se explica
   sozinho gera menos ligação para o suporte que um painel bonito e mudo. */
.note {
  border: 1px solid var(--line); border-left: 2.5px solid var(--azure);
  background: var(--info-soft); border-radius: var(--r);
  padding: 12px 15px; font-size: 12.5px; color: var(--text-2); line-height: 1.6;
}
.note.atencao { border-left-color: var(--aten); background: var(--aten-soft); }
.note.critico { border-left-color: var(--neg);  background: var(--neg-soft); }
.note.ok      { border-left-color: var(--pos);  background: var(--pos-soft); }

.vazio { padding: 48px 24px; text-align: center; color: var(--text-3); }
.vazio svg { width: 34px; height: 34px; opacity: .4; margin: 0 auto 12px; }
.vazio h4 { margin-bottom: 6px; font-size: 14.5px; color: var(--text-2); font-weight: 600; font-family: var(--f-display); }
.vazio p { margin: 0 auto; max-width: 46ch; font-size: 12.5px; line-height: 1.6; }
.vazio .acoes { margin-top: 18px; display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

.alert-row {
  display: flex; gap: 13px; padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft); transition: background .14s;
}
.alert-row:last-child { border-bottom: none; }
.alert-row:hover { background: var(--surface-2); }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 8px; }
.alert-row h4 { margin-bottom: 3px; font-size: 13.2px; font-weight: 650; }
.alert-row p  { font-size: 12.2px; color: var(--text-2); line-height: 1.55; }

/* ==========================================================================
   12. MODAL, GAVETA, TOAST, DROPZONE
   ========================================================================== */

.modal-scrim {
  position: fixed; inset: 0; background: rgba(10,22,40,.42);
  backdrop-filter: blur(3px); z-index: 80;
  display: grid; place-items: start center; padding: 8vh 18px 18px;
  opacity: 0; visibility: hidden; transition: opacity .24s, visibility .24s;
  overflow-y: auto;
}
.modal-scrim.on { opacity: 1; visibility: visible; }
.modal {
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-3);
  width: min(720px, 100%); overflow: hidden;
  transform: translateY(12px) scale(.985); transition: transform .28s var(--ease);
}
.modal-scrim.on .modal { transform: none; }
.modal.larga { width: min(1040px, 100%); }
.modal-h { padding: 20px 24px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 14px; align-items: flex-start; }
.modal-h h3 { font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.25; }
.modal-h p { margin-top: 5px; font-size: 12.5px; color: var(--text-2); }
.modal-b { padding: 22px 24px; max-height: min(62vh, 660px); overflow-y: auto; }
.modal-f {
  padding: 14px 24px; border-top: 1px solid var(--line);
  display: flex; gap: 9px; justify-content: flex-end; background: var(--surface-2);
}

/* Gaveta de rastreabilidade: de onde veio este número. */
#gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
  background: var(--surface); box-shadow: var(--sh-3); z-index: 70;
  transform: translateX(100%); transition: transform .38s var(--ease);
  display: flex; flex-direction: column; border-left: 1px solid var(--line);
}
#gaveta.on { transform: none; }
#gavetaScrim {
  position: fixed; inset: 0; background: rgba(10,22,40,.34);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 69;
}
#gavetaScrim.on { opacity: 1; visibility: visible; }
.gaveta-h { padding: 18px 22px 15px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.gaveta-h h3 { font-family: var(--f-display); font-weight: 400; font-size: 20px; line-height: 1.25; }
.gaveta-b { flex: 1; overflow-y: auto; padding: 20px 22px 40px; }

/* Linha do tempo da composição do número. */
.chain { position: relative; padding-left: 26px; }
.chain::before { content: ""; position: absolute; left: 6.5px; top: 8px; bottom: 10px; width: 1px; background: var(--line-strong); }
.chain-node { position: relative; margin-bottom: 20px; }
.chain-node::before {
  content: ""; position: absolute; left: -26px; top: 5px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-strong);
}
.chain-node.destaque::before { border-color: var(--azure); background: var(--azure); box-shadow: 0 0 0 3px rgba(31,95,158,.15); }
.chain-node .cn-l { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); font-weight: 650; }
.chain-node .cn-v { margin-top: 4px; font-size: 13.4px; line-height: 1.5; word-break: break-word; }

/* Bloco de fórmula: tema escuro isolado, sempre — inclusive no tema claro.
   Fórmula é código, e código lê-se melhor em fundo escuro. */
.formula {
  background: #0B1F38; color: #DCE7F2; border-radius: var(--r);
  padding: 12px 14px; font-family: var(--f-num); font-size: 12.2px;
  line-height: 1.75; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.formula .op  { color: #8FB6DC; }
.formula .val { color: #A6DCC0; }

#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.toast {
  background: #0A1628; color: #EAF0F7; padding: 11px 16px; border-radius: 11px;
  font-size: 12.8px; box-shadow: var(--sh-3);
  display: flex; align-items: center; gap: 9px; max-width: 380px;
  animation: toastIn .3s var(--ease) both;
}
.toast.ok  { background: #12523A; }
.toast.erro { background: #7E2323; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.drop {
  border: 2px dashed var(--line-strong); border-radius: var(--r-lg);
  padding: 36px 20px; text-align: center; background: var(--surface-2);
  transition: border-color .2s, background .2s;
  cursor: pointer;
}
.drop:hover { border-color: var(--brass); }
.drop.quente { border-color: var(--brass); background: var(--aten-soft); }
.drop svg { width: 30px; height: 30px; opacity: .45; margin: 0 auto 12px; }
.drop h4 { font-size: 14px; font-weight: 650; margin-bottom: 5px; }
.drop p { font-size: 12.5px; color: var(--text-3); }

/* ==========================================================================
   13. LOGIN
   ========================================================================== */

/* Duas colunas: a esquerda vende, a direita trabalha. Abaixo de 900px a
   esquerda some inteira — num celular, o formulário é a única coisa que
   importa e uma vitrine empurrando-o para baixo da dobra é hostil. */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }

.login-vitrine {
  background: linear-gradient(155deg, #143352 0%, var(--navy-deep) 55%, #071528 100%);
  color: #C9D6E4; padding: 56px 60px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
/* Brilho de fundo. `pointer-events:none` porque um pseudo-elemento em cima do
   conteúdo engole clique — inclusive o do link de suporte no rodapé. */
.login-vitrine::before {
  content: ""; position: absolute; inset: -30% -10% auto auto;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(176,141,87,.16) 0%, transparent 62%);
  pointer-events: none;
}
.login-vitrine img.logo { width: 168px; filter: brightness(0) invert(1); opacity: .95; }
.login-vitrine .kicker { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #7E96B2; margin-bottom: 18px; }
.login-vitrine h1 { font-family: var(--f-display); font-weight: 400; font-size: 40px; line-height: 1.18; color: #fff; letter-spacing: -.01em; }
.login-vitrine .rule { width: 74px; height: 1px; background: var(--brass); margin: 26px 0 22px; }
.login-vitrine p { font-size: 14px; line-height: 1.65; max-width: 46ch; color: #A9BDD1; }
.login-vitrine .pontos { margin-top: 30px; display: flex; flex-direction: column; gap: 13px; }
.login-vitrine .ponto { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: #BACADA; }
.login-vitrine .ponto svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--brass); margin-top: 1px; }
.login-vitrine .rodape { font-size: 11px; color: #6E88A5; line-height: 1.6; }

.login-painel { display: grid; place-items: center; padding: 40px 32px; background: var(--paper); }
.login-caixa { width: 100%; max-width: 392px; }
.login-caixa .marca-mob { display: none; margin-bottom: 28px; }
.login-caixa h2 { font-family: var(--f-display); font-weight: 400; font-size: 27px; letter-spacing: -.01em; }
.login-caixa .sub { margin-top: 8px; font-size: 13.2px; color: var(--text-2); }
.login-form { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.login-form .inp { height: 42px; border-radius: 10px; font-size: 14px; }
.login-form .btn { height: 44px; font-size: 13.5px; border-radius: 10px; }

/* Reserva de espaço para o erro. Sem `min-height`, a caixa "pula" quando a
   mensagem aparece e o botão foge do cursor no instante do segundo clique. */
.login-erro {
  min-height: 20px; font-size: 12.5px; color: var(--neg);
  display: flex; align-items: center; gap: 7px;
}
.login-erro:empty { min-height: 0; }
.login-erro svg { width: 15px; height: 15px; flex: 0 0 15px; }

.login-rodape { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); line-height: 1.6; }

/* Spinner do botão enquanto a requisição corre. */
.spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ==========================================================================
   14. ADMINISTRAÇÃO
   ========================================================================== */

/* Cartão de cliente na lista. */
.cli-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start;
  cursor: pointer; box-shadow: var(--sh-1);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s;
}
.cli-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--line-strong); }
.cli-card.inativo { opacity: .55; }
.cli-mark {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
  font-family: var(--f-display); font-size: 16px; font-weight: 700;
}
.cli-card .nm { font-size: 14px; font-weight: 650; }
.cli-card .meta { margin-top: 3px; font-size: 11.5px; color: var(--text-3); }
.cli-card .tags { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; }

/* Escolha de abas. Grid de cartões marcáveis — a alternativa (lista de
   checkboxes) esconde a descrição, e sem ela ninguém lembra o que a aba
   "Consistência" mostra. */
.aba-grupo { margin-bottom: 22px; }
.aba-grupo > .gl {
  font-size: 10px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--text-3); font-weight: 650; margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.aba-grupo > .gl .rule { flex: 1; height: 1px; background: var(--line); }
.aba-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.aba-pick {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); cursor: pointer;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.aba-pick:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); }
.aba-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.aba-pick .caixa {
  width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px;
  border: 1.5px solid var(--line-strong); border-radius: 5px;
  display: grid; place-items: center;
  transition: background .16s, border-color .16s;
}
.aba-pick .caixa svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .16s; }
.aba-pick input:checked + .caixa { background: var(--pos); border-color: var(--pos); }
.aba-pick input:checked + .caixa svg { opacity: 1; }
.aba-pick input:focus-visible + .caixa { outline: 2px solid var(--azure); outline-offset: 2px; }
.aba-pick.marcada { border-color: var(--pos-linha); background: var(--pos-soft); }
.aba-pick .txt b { display: block; font-size: 13px; font-weight: 650; }
.aba-pick .txt small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-3); line-height: 1.45; }

/* Passos da publicação de base: arquivo → conferência → publicar. Mostrar a
   conferência ANTES de gravar é o que evita descobrir o erro pelo cliente. */
.passos { display: flex; gap: 0; margin-bottom: 22px; }
.passo {
  flex: 1; padding: 11px 14px; border: 1px solid var(--line);
  border-right: none; background: var(--surface-2);
  font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 9px;
}
.passo:first-child { border-radius: var(--r) 0 0 var(--r); }
.passo:last-child  { border-right: 1px solid var(--line); border-radius: 0 var(--r) var(--r) 0; }
.passo .n {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  background: var(--line); color: var(--text-3);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; font-family: var(--f-num);
}
.passo.on { background: var(--surface); color: var(--text); font-weight: 600; }
.passo.on .n { background: var(--navy); color: #fff; }
.passo.feito .n { background: var(--pos); color: #fff; }

/* ==========================================================================
   15. RESPONSIVO
   ========================================================================== */

@media (max-width: 1180px) {
  .g5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 980px) {
  #shell, #shell.rail-min { grid-template-columns: 1fr; }
  #rail {
    position: fixed; left: 0; top: 0; width: 280px;
    transform: translateX(-100%); transition: transform .3s var(--ease);
  }
  #rail.aberto { transform: none; }
  #menuBtn { display: grid; }
  #canvas { padding: 18px 15px 66px; }
  .g3, .g2 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .page-head h1 { font-size: 24px; }
  #topbar { padding: 0 14px; gap: 9px; }
  /* O gatilho de busca vira só o ícone: 212px de largura num topo de 360px
     empurra o resto para fora da tela. */
  .busca-trigger { min-width: 0; width: 34px; padding: 0; justify-content: center; }
  .busca-trigger span, .busca-trigger kbd { display: none; }

  .login-wrap { grid-template-columns: 1fr; }
  .login-vitrine { display: none; }
  .login-caixa .marca-mob { display: block; }
}

@media (max-width: 640px) {
  .g5, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpi .kv { font-size: 19px; }
  .modal-b { max-height: 70vh; }
  #gaveta { width: 100vw; }
  table.tbl th, table.tbl td { padding: 8px 10px; font-size: 12.2px; }
  .card-b { padding: 14px; }
  .bar-row .lb { flex: 0 0 120px; }
  .bar-row .vl { flex: 0 0 96px; }
  .passos { flex-direction: column; }
  .passo, .passo:first-child, .passo:last-child { border-radius: 0; border-right: 1px solid var(--line); border-bottom: none; }
  .passo:first-child { border-radius: var(--r) var(--r) 0 0; }
  .passo:last-child { border-bottom: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); }
}

/* ==========================================================================
   16. IMPRESSÃO
   ========================================================================== */

/* Impressão tratada de verdade: o relatório em PDF é entregável do produto, e
   um painel que imprime com o menu no meio da página não é entregável. */
@media print {
  #rail, #topbar, #gaveta, #gavetaScrim, #railScrim, #toasts, .no-print { display: none !important; }
  #shell { grid-template-columns: 1fr; }
  #canvas { padding: 0; max-width: none; }
  body { background: #fff; }
  .card, .kpi { box-shadow: none; break-inside: avoid; }
  .page { animation: none; }
  .tbl-wrap.scroll { max-height: none; overflow: visible; }
  @page { margin: 14mm; }
}

/* ==========================================================================
   17. MOVIMENTO REDUZIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   18. ACRÉSCIMOS DO PAINEL DE ADMINISTRAÇÃO  (admin.html)

   Só o que faltava para as telas do admin existirem sem um `style=` inline —
   a CSP proíbe atributo de estilo com conteúdo dinâmico e, mesmo onde ele
   passaria, regra solta no HTML é regra que ninguém acha depois. Nada aqui
   redefine token nem toca no que a seção 14 já entrega.
   ========================================================================== */

/* A seção 15 LIGA o #menuBtn abaixo de 980px, mas nunca declarou o estado
   padrão: sem esta linha ele herda o `display:grid` de `.icon-btn` e aparece
   também no desktop, onde o rail já está permanentemente visível. */
#menuBtn { display: none; }

/* Marca textual do rail quando não há logo do cliente (é o caso do admin: o
   painel é da casa, não de um escritório). */
.rail-head .marca-txt { min-width: 0; }
.rail-head .marca-txt b { display: block; color: #EAF1F8; font-size: 13.4px; font-weight: 650; }
.rail-head .marca-txt .sub { margin-top: 3px; }

/* `.inp` é 100% por natureza; solto no flex do cabeçalho de página, colapsaria
   para a largura do placeholder. */
.ph-side .inp { width: 232px; }

.tabs.topo { margin-bottom: 18px; }

/* Barra de gravação da escolha de abas. Acompanha a rolagem: com dezenove abas
   em seis grupos, um botão Salvar no fim da página é um botão que o admin não
   encontra — e sair sem salvar a escolha de telas é o erro caro desta tela. */
.barra-acao {
  position: sticky; bottom: 12px; z-index: 20;
  margin-top: 18px; padding: 11px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--sh-2);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .barra-acao { background: var(--surface); }
}
.barra-acao .cont { font-size: 12.5px; color: var(--text-2); }
.barra-acao .fim { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

/* Linha de controles — rodapé de passo, ações de tabela, pares de botão. */
.linha { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.linha.fim  { justify-content: flex-end; }
.linha.topo { margin-top: 16px; }

/* Sem o min-width:0 o nome comprido do cliente empurra a marca para fora do
   cartão em vez de reticenciar. */
.cli-card .corpo { flex: 1; min-width: 0; }
.cli-card .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }