/* AlliahBalcão — Design System Alliah, com tema claro e escuro.
 *
 * Regra que vale para todo componente daqui para baixo: use SÓ token semântico
 * (--cor-fundo, --cor-texto, --cor-borda…). Token de paleta crua (--cinza-100) não
 * vira quando o tema troca — foi assim que o AI Readiness ganhou caixa branca no
 * tema escuro. Os crus existem só para as duas paletas montarem os semânticos.
 */

:root {
  /* ─── TIPOGRAFIA ─── */
  --fonte-titulo: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --fonte-corpo: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --fonte-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --t-2xs: .6875rem; --t-xs: .75rem; --t-sm: .8125rem; --t-md: .875rem;
  --t-base: 1rem;    --t-lg: 1.125rem; --t-xl: 1.375rem; --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;
  --p-normal: 400; --p-medio: 500; --p-semi: 600; --p-forte: 700;

  /* ─── ESPAÇO, RAIO, TEMPO ─── */
  --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.25rem;
  --e6: 1.5rem; --e8: 2rem; --e10: 2.5rem; --e12: 3rem; --e16: 4rem;
  --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-cheio: 9999px;
  --rapido: 120ms; --normal: 200ms;

  --largura-lateral: 246px;
  --largura-lateral-fechada: 68px;
  --altura-topo: 58px;

  /* ─── PALETA CRUA (não usar direto em componente) ─── */
  --indigo-50: #EEF2FF;  --indigo-100: #E0E7FF; --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC; --indigo-400: #818CF8; --indigo-500: #6366F1;
  --indigo-600: #4F46E5; --indigo-700: #4338CA; --indigo-800: #3730A3;
  --indigo-900: #312E81; --indigo-950: #1E1B4B;
  --cinza-0: #FFFFFF;   --cinza-50: #F8FAFC;  --cinza-100: #F1F5F9;
  --cinza-200: #E2E8F0; --cinza-300: #CBD5E1; --cinza-400: #94A3B8;
  --cinza-500: #64748B; --cinza-600: #475569; --cinza-700: #334155;
  --cinza-800: #1E293B; --cinza-900: #0F172A; --cinza-950: #080C16;

  /* ─── SEMÂNTICOS — TEMA CLARO (padrão) ─── */
  --cor-marca: #4338CA;              /* indigo-700: branco em cima passa AA (5,9:1) */
  --cor-marca-forte: #3730A3;
  --cor-marca-suave: #EEF2FF;
  --cor-marca-texto: #4338CA;        /* marca usada como TEXTO sobre fundo claro */
  --cor-marca-contraste: #FFFFFF;

  --cor-fundo: #F6F8FB;
  --cor-fundo-cartao: #FFFFFF;
  --cor-fundo-alto: #FFFFFF;         /* modal, popover: acima do cartão */
  --cor-fundo-suave: #F1F5F9;        /* cabeçalho de tabela, listras */
  --cor-fundo-passa: #F1F5F9;        /* hover */
  --cor-fundo-ativo: #EEF2FF;

  --cor-texto: #0F172A;
  --cor-texto-2: #475569;
  --cor-texto-3: #64748B;            /* apoio: 5,7:1 no fundo claro */
  --cor-inverso: #FFFFFF;

  --cor-borda: #E2E8F0;
  --cor-borda-forte: #CBD5E1;
  --cor-divisor: #EEF2F7;
  --cor-foco: #4F46E5;

  --cor-ok: #047857;      --cor-ok-suave: #ECFDF5;   --cor-ok-borda: #A7F3D0;
  --cor-atencao: #B45309; --cor-atencao-suave: #FFFBEB; --cor-atencao-borda: #FDE68A;
  /* #DC2626 dava só 4,42:1 sobre o fundo suave — reprova AA por pouco, e vermelho é
   * justamente o que ninguém pode ler errado. #C81E1E dá 5,25:1. */
  --cor-erro: #C81E1E;    --cor-erro-suave: #FEF2F2;  --cor-erro-borda: #FECACA;
  --cor-info: #0369A1;    --cor-info-suave: #F0F9FF;  --cor-info-borda: #BAE6FD;
  --cor-roxo: #6D28D9;    --cor-roxo-suave: #F5F3FF;

  /* Lateral: escura nos dois temas — é a âncora da marca */
  --lateral-fundo: #1E1B4B;
  --lateral-fundo-2: #171442;
  --lateral-texto: rgba(255,255,255,.74);
  --lateral-texto-forte: #FFFFFF;
  --lateral-passa: rgba(165,180,252,.13);
  --lateral-ativo: rgba(99,102,241,.28);
  --lateral-borda: rgba(255,255,255,.09);
  --lateral-acento: #A5B4FC;
  --lateral-avatar-de: #6366F1;
  --lateral-avatar-para: #4338CA;

  /* Recado e caixa de código são escuros de propósito nos dois temas. */
  --recado-fundo: #0F172A;
  --recado-texto: #FFFFFF;
  --recado-borda: #94A3B8;
  --codigo-fundo: #0F172A;
  --codigo-texto: #E2E8F0;

  --sombra-xs: 0 1px 2px rgba(15,23,42,.05);
  --sombra-sm: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --sombra-md: 0 4px 10px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.04);
  --sombra-lg: 0 12px 24px rgba(15,23,42,.09), 0 4px 8px rgba(15,23,42,.04);
  --sombra-xl: 0 24px 48px rgba(15,23,42,.16), 0 8px 16px rgba(15,23,42,.06);

  --grafico-1: #6366F1; --grafico-2: #0EA5E9; --grafico-3: #10B981;
  --grafico-4: #F59E0B; --grafico-5: #EC4899; --grafico-6: #8B5CF6;
  color-scheme: light;
}

/* ─── SEMÂNTICOS — TEMA ESCURO ───
 * A classe entra pelo JS: no modo "automático" ele lê prefers-color-scheme e liga/desliga
 * a classe. Assim a paleta escura existe UMA vez, em vez de repetida numa media query.
 */
:root.escuro {
  --cor-marca: #5850EC;
  --cor-marca-forte: #4F46E5;
  --cor-marca-suave: rgba(99,102,241,.16);
  --cor-marca-texto: #A5B4FC;        /* texto pequeno na marca precisa clarear no escuro */
  --cor-marca-contraste: #FFFFFF;

  --cor-fundo: #0B1120;
  --cor-fundo-cartao: #131C2E;
  --cor-fundo-alto: #18233A;
  --cor-fundo-suave: #1B2537;
  --cor-fundo-passa: #1E293B;
  --cor-fundo-ativo: rgba(99,102,241,.16);

  --cor-texto: #F1F5F9;
  --cor-texto-2: #CBD5E1;
  --cor-texto-3: #94A3B8;
  --cor-inverso: #0B1120;

  --cor-borda: #27334A;
  --cor-borda-forte: #3A4762;
  --cor-divisor: #1E293B;
  --cor-foco: #818CF8;

  --cor-ok: #34D399;      --cor-ok-suave: rgba(16,185,129,.14);  --cor-ok-borda: rgba(16,185,129,.32);
  --cor-atencao: #FBBF24; --cor-atencao-suave: rgba(245,158,11,.14); --cor-atencao-borda: rgba(245,158,11,.32);
  --cor-erro: #F87171;    --cor-erro-suave: rgba(239,68,68,.14);  --cor-erro-borda: rgba(239,68,68,.34);
  --cor-info: #38BDF8;    --cor-info-suave: rgba(14,165,233,.14); --cor-info-borda: rgba(14,165,233,.32);
  --cor-roxo: #C4B5FD;    --cor-roxo-suave: rgba(139,92,246,.16);

  --lateral-fundo: #0E1526;
  --lateral-fundo-2: #0A1020;
  --lateral-borda: rgba(255,255,255,.07);

  --sombra-xs: 0 1px 2px rgba(0,0,0,.4);
  --sombra-sm: 0 1px 3px rgba(0,0,0,.45);
  --sombra-md: 0 4px 12px rgba(0,0,0,.5);
  --sombra-lg: 0 14px 28px rgba(0,0,0,.55);
  --sombra-xl: 0 26px 52px rgba(0,0,0,.66);

  --grafico-1: #818CF8; --grafico-2: #38BDF8; --grafico-3: #34D399;
  --grafico-4: #FBBF24; --grafico-5: #F472B6; --grafico-6: #A78BFA;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  font-family: var(--fonte-corpo);
  font-size: 14px; line-height: 1.5;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}
body { transition: background var(--normal) ease, color var(--normal) ease; }

h1, h2, h3, h4 { font-family: var(--fonte-titulo); margin: 0 0 var(--e2);
                 font-weight: var(--p-forte); letter-spacing: -.01em; color: var(--cor-texto); }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-base); }
p  { margin: 0 0 var(--e3); color: var(--cor-texto-2); }
a  { color: var(--cor-marca-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--fonte-mono); font-size: var(--t-xs); }
small { font-size: var(--t-xs); }
hr { border: 0; border-top: 1px solid var(--cor-divisor); margin: var(--e5) 0; }

/* Foco visível é a rota de quem navega por teclado. Nada de `outline: none` solto:
 * no AI Readiness a cascata apagou o anel e a tela ficou inacessível. */
:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--cor-marca-suave); color: var(--cor-marca-texto); }

/* Barra de rolagem discreta */
* { scrollbar-width: thin; scrollbar-color: var(--cor-borda-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--cor-borda-forte); border-radius: var(--r-cheio);
                             border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ═════════════════════════════ Login ═════════════════════════════ */

#tela-login {
  display: none; align-items: center; justify-content: center;
  min-height: 100vh; padding: var(--e4);
  background:
    radial-gradient(1100px 520px at 12% -12%, var(--cor-marca-suave), transparent 62%),
    radial-gradient(820px 420px at 112% 112%, var(--cor-roxo-suave), transparent 62%),
    var(--cor-fundo);
}
#tela-login.visivel { display: flex; }

.cartao-login {
  width: 100%; max-width: 404px; background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda); border-radius: var(--r-xl);
  box-shadow: var(--sombra-lg); padding: var(--e8);
}
.marca-login { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e6); }
.marca-login .logo { flex: 0 0 auto; }
.marca-login h1 { margin: 0; font-size: var(--t-lg); }
.marca-login span { font-size: var(--t-xs); color: var(--cor-texto-3); }
.rodape-login { margin-top: var(--e5); font-size: var(--t-xs); color: var(--cor-texto-3); text-align: center; }

/* ═════════════════════════════ Estrutura ═════════════════════════════ */

#app { display: none; min-height: 100vh; }
#app.visivel { display: grid; grid-template-columns: var(--largura-lateral) minmax(0, 1fr); }
#app.fechada { --largura-lateral: var(--largura-lateral-fechada); }

.barra-lateral {
  background: linear-gradient(180deg, var(--lateral-fundo), var(--lateral-fundo-2));
  color: var(--lateral-texto-forte);
  display: flex; flex-direction: column; padding: var(--e4) var(--e3) var(--e4);
  position: sticky; top: 0; height: 100vh; overflow: hidden auto;
  border-right: 1px solid var(--lateral-borda);
}

.marca {
  display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e2) var(--e5); min-width: 0;
}
.marca .logo { flex: 0 0 auto; }
.marca .texto { min-width: 0; }
.marca strong { font-family: var(--fonte-titulo); font-size: var(--t-md);
                display: block; line-height: 1.25; white-space: nowrap; }
.marca small { color: rgba(255,255,255,.55); font-size: var(--t-2xs);
               display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app.fechada .marca .texto { display: none; }

.grupo-menu {
  font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.38); font-weight: var(--p-semi);
  padding: var(--e4) var(--e3) var(--e2);
}
#app.fechada .grupo-menu { text-align: center; font-size: 9px; letter-spacing: 0; }

.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; flex: 1; }
.menu button {
  width: 100%; display: flex; align-items: center; gap: var(--e3);
  padding: 9px var(--e3); border: 0; background: transparent; cursor: pointer;
  color: var(--lateral-texto); font-family: var(--fonte-corpo); font-size: var(--t-md);
  text-align: left; border-radius: var(--r-md); position: relative;
  transition: background var(--rapido) ease, color var(--rapido) ease;
}
.menu button:hover { background: var(--lateral-passa); color: var(--lateral-texto-forte); }
.menu button.ativo { background: var(--lateral-ativo); color: #FFF; font-weight: var(--p-semi); }
.menu button.ativo::before {
  content: ''; position: absolute; left: -3px; top: 7px; bottom: 7px; width: 3px;
  background: var(--lateral-acento); border-radius: var(--r-cheio);
}
.menu button svg { flex: 0 0 18px; opacity: .92; }
.menu .rotulo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .selo {
  background: var(--cor-erro); color: #FFF; font-size: 10px; font-weight: var(--p-forte);
  padding: 1px 6px; border-radius: var(--r-cheio); min-width: 18px; text-align: center;
}
#app.fechada .menu button { justify-content: center; padding: 10px var(--e2); }
#app.fechada .menu .rotulo { display: none; }
#app.fechada .menu .selo {
  position: absolute; top: 3px; right: 3px; padding: 0 4px; font-size: 9px; min-width: 15px;
}

.rodape-lateral { border-top: 1px solid var(--lateral-borda); padding-top: var(--e3);
                  margin-top: var(--e3); font-size: var(--t-xs); }
.rodape-lateral .usuario { display: flex; align-items: center; gap: var(--e2);
                           padding: 0 var(--e2) var(--e3); min-width: 0; }
.rodape-lateral .avatar {
  width: 30px; height: 30px; border-radius: var(--r-cheio);
  background: linear-gradient(135deg, var(--lateral-avatar-de), var(--lateral-avatar-para));
  display: grid; place-items: center; font-weight: var(--p-forte); font-size: var(--t-xs);
  flex: 0 0 auto; color: #FFF;
}
.rodape-lateral .quem { min-width: 0; }
.rodape-lateral .nome { color: #FFF; font-weight: var(--p-semi); white-space: nowrap;
                        overflow: hidden; text-overflow: ellipsis; }
.rodape-lateral .papel { color: rgba(255,255,255,.5); }
#app.fechada .rodape-lateral .quem, #app.fechada .rodape-lateral .texto-sair { display: none; }
#app.fechada .rodape-lateral .usuario { justify-content: center; padding: 0 0 var(--e3); }

/* ─── Barra de cima ─── */

.barra-topo {
  position: sticky; top: 0; z-index: 40;
  height: var(--altura-topo); display: flex; align-items: center; gap: var(--e3);
  padding: 0 var(--e6); background: color-mix(in srgb, var(--cor-fundo) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cor-borda);
}
.botao-icone {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-md); border: 1px solid transparent; background: transparent;
  color: var(--cor-texto-2); cursor: pointer; flex: 0 0 auto;
  transition: background var(--rapido) ease, color var(--rapido) ease;
}
.botao-icone:hover { background: var(--cor-fundo-passa); color: var(--cor-texto); }
.botao-icone.tem-aviso::after {
  content: ''; position: absolute; margin: -10px 0 0 12px; width: 7px; height: 7px;
  border-radius: var(--r-cheio); background: var(--cor-erro);
  box-shadow: 0 0 0 2px var(--cor-fundo);
}

.migalhas { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-md);
            color: var(--cor-texto-3); min-width: 0; }
.migalhas strong { color: var(--cor-texto); font-weight: var(--p-semi); }
.migalhas .sep { opacity: .5; }

.busca-topo {
  margin-left: auto; display: flex; align-items: center; gap: var(--e2);
  height: 34px; padding: 0 var(--e3); min-width: 218px;
  background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda);
  border-radius: var(--r-md); color: var(--cor-texto-3); cursor: pointer;
  font-size: var(--t-sm); font-family: var(--fonte-corpo);
  transition: border-color var(--rapido) ease, box-shadow var(--rapido) ease;
}
.busca-topo:hover { border-color: var(--cor-borda-forte); }
.busca-topo .atalho {
  margin-left: auto; display: flex; gap: 3px;
}
kbd {
  font-family: var(--fonte-mono); font-size: 10px; padding: 2px 5px; line-height: 1.2;
  background: var(--cor-fundo-suave); border: 1px solid var(--cor-borda);
  border-bottom-width: 2px; border-radius: var(--r-sm); color: var(--cor-texto-3);
}

.seletor-tema { display: flex; gap: 1px; padding: 2px; background: var(--cor-fundo-suave);
                border: 1px solid var(--cor-borda); border-radius: var(--r-md); }
.seletor-tema button {
  display: grid; place-items: center; width: 28px; height: 26px; border: 0;
  background: transparent; border-radius: var(--r-sm); cursor: pointer; color: var(--cor-texto-3);
}
.seletor-tema button:hover { color: var(--cor-texto); }
.seletor-tema button.ativo { background: var(--cor-fundo-cartao); color: var(--cor-marca-texto);
                             box-shadow: var(--sombra-xs); }

.conteudo { padding: var(--e6) var(--e6) var(--e12); min-width: 0; }

.cabecalho-pagina {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e4); margin-bottom: var(--e5); flex-wrap: wrap;
}
.cabecalho-pagina h1 { font-size: var(--t-2xl); margin-bottom: var(--e1); }
.cabecalho-pagina p { margin: 0; font-size: var(--t-md); max-width: 76ch; }
/* `flex: 0 0 auto` impedia o bloco de encolher, e um item flex que não encolhe nunca
 * chega à largura em que o `flex-wrap` age: no celular a fileira de botões empurrava a
 * página inteira para o lado. Com `0 1 auto` + `min-width: 0` ele estreita, os botões
 * quebram em duas linhas e a página para de rolar na horizontal. Valia para toda tela
 * com mais de dois botões no cabeçalho — Expedição e Devoluções só foram as primeiras. */
.acoes-pagina { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center;
                flex: 0 1 auto; min-width: 0; }

/* ═════════════════════════════ Cartões e grades ═════════════════════════════ */

.cartao {
  background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda);
  border-radius: var(--r-lg); box-shadow: var(--sombra-xs);
  padding: var(--e5); margin-bottom: var(--e4);
  /* Item de grade nasce com `min-width: auto`, que vale o min-content do que há dentro.
     Num cartão com tabela larga — a Curva ABC tem 953px de colunas — isso faz o cartão se
     RECUSAR a encolher: ele ficou com 394px dentro de uma coluna de 294px e empurrou a
     página inteira para a rolagem horizontal no celular. O `0` devolve ao cartão a
     permissão de encolher; quem rola é a tabela, dentro do `.rolagem-tabela`, que é onde
     a rolagem faz sentido. */
  min-width: 0;
}
.cartao-limpo { padding: 0; overflow: hidden; }
.cartao > h2:first-child, .cartao > h3:first-child { margin-top: 0; }
.cartao-titulo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); margin-bottom: var(--e4); flex-wrap: wrap;
}
.cartao-titulo h2, .cartao-titulo h3 { margin: 0; }
.cartao-titulo .apoio { font-size: var(--t-xs); color: var(--cor-texto-3); }
.cartao-limpo .cartao-titulo { margin: 0; padding: var(--e4) var(--e5);
                               border-bottom: 1px solid var(--cor-borda); }

.grade { display: grid; gap: var(--e4); margin-bottom: var(--e4); }
/* O `min(Xpx, 100%)` no lugar do `Xpx` seco é o que impede a coluna de estourar a tela.
   Um `minmax(330px, 1fr)` cria uma faixa que NUNCA encolhe abaixo de 330px: quando o
   container é mais estreito — celular, ou um cartão dentro de outro cartão — a grade
   transborda e a página inteira passa a rolar na horizontal. O passeio de navegador
   pegou isto em Expedição (412px num viewport de 390) e em Reposição (476px). */
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(min(212px, 100%), 1fr)); }
/* Para par de indicadores DENTRO de cartão: com o mínimo de 330px do grade-2 eles
 * empilhavam num cartão de 560px, virando duas linhas onde caberiam duas colunas. */
.grade-mini { grid-template-columns: repeat(auto-fit, minmax(min(178px, 100%), 1fr)); }
.grade-larga-estreita { grid-template-columns: minmax(0, 2fr) minmax(min(300px, 100%), 1fr); }
@media (max-width: 1080px) { .grade-larga-estreita { grid-template-columns: minmax(0, 1fr); } }
.grade:last-child { margin-bottom: 0; }

/* ─── Indicador (KPI) ─── */

.indicador {
  background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda);
  border-radius: var(--r-lg); box-shadow: var(--sombra-xs); padding: var(--e4) var(--e5);
  display: flex; flex-direction: column; gap: var(--e1); min-width: 0;
}
.indicador.clicavel { cursor: pointer; transition: border-color var(--rapido) ease,
                      transform var(--rapido) ease, box-shadow var(--rapido) ease; }
.indicador.clicavel:hover { border-color: var(--cor-marca); box-shadow: var(--sombra-sm);
                            transform: translateY(-1px); }
.indicador .rotulo {
  font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--cor-texto-3); font-weight: var(--p-semi);
  display: flex; align-items: center; gap: var(--e2);
}
.indicador .valor { font-family: var(--fonte-titulo); font-size: var(--t-2xl);
                    font-weight: var(--p-forte); line-height: 1.15;
                    font-variant-numeric: tabular-nums; }
.indicador .valor.menor { font-size: var(--t-xl); }
.indicador .apoio { font-size: var(--t-xs); color: var(--cor-texto-3); }
.indicador.destaque { border-color: var(--cor-marca); }
.indicador.destaque .valor { color: var(--cor-marca-texto); }
.indicador.alerta { border-left: 3px solid var(--cor-atencao); }
.indicador.ruim { border-left: 3px solid var(--cor-erro); }
.indicador.bom  { border-left: 3px solid var(--cor-ok); }

.variacao { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-2xs);
            font-weight: var(--p-semi); padding: 1px 6px; border-radius: var(--r-cheio); }
.variacao-sobe { background: var(--cor-ok-suave); color: var(--cor-ok); }
.variacao-desce { background: var(--cor-erro-suave); color: var(--cor-erro); }
.variacao-igual { background: var(--cor-fundo-suave); color: var(--cor-texto-3); }

/* ═════════════════════════════ Formulários ═════════════════════════════ */

label { display: block; font-size: var(--t-xs); font-weight: var(--p-semi);
        color: var(--cor-texto-2); margin-bottom: var(--e2); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=date], input[type=month], input[type=tel], select, textarea {
  width: 100%; padding: 8px var(--e3); font-family: var(--fonte-corpo); font-size: var(--t-md);
  color: var(--cor-texto); background: var(--cor-fundo-cartao);
  border: 1px solid var(--cor-borda); border-radius: var(--r-md);
  transition: border-color var(--rapido) ease, box-shadow var(--rapido) ease;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--cor-borda-forte);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cor-foco);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-foco) 22%, transparent);
}
textarea { resize: vertical; min-height: 88px; }
textarea.mono { font-family: var(--fonte-mono); font-size: var(--t-xs); line-height: 1.65; }
input:disabled, textarea:disabled, select:disabled {
  background: var(--cor-fundo-suave); color: var(--cor-texto-3); cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--cor-texto-3); opacity: .8; }
select { appearance: none; padding-right: var(--e8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e3) center; }

.campo { margin-bottom: var(--e4); }
.campo:last-child { margin-bottom: 0; }
.campo .ajuda { font-size: var(--t-xs); color: var(--cor-texto-3); margin-top: var(--e1);
                font-weight: var(--p-normal); line-height: 1.45; }
.campo .erro-campo { font-size: var(--t-xs); color: var(--cor-erro); margin-top: var(--e1); }
.linha-campos { display: grid; gap: var(--e4); margin-bottom: var(--e4);
                grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.linha-campos:last-child { margin-bottom: 0; }
.linha-campos .campo { margin-bottom: 0; }

.campo-com-prefixo { position: relative; }
.campo-com-prefixo .prefixo {
  position: absolute; left: var(--e3); top: 50%; transform: translateY(-50%);
  color: var(--cor-texto-3); font-size: var(--t-sm); pointer-events: none;
}
.campo-com-prefixo input { padding-left: 34px; }

.campo-senha { position: relative; }
.campo-senha input { padding-right: 76px; }
.campo-senha button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--cor-marca-texto);
  font-size: var(--t-xs); font-weight: var(--p-semi); cursor: pointer; padding: 4px 6px;
}

.interruptor { display: flex; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e3); }
.interruptor:last-child { margin-bottom: 0; }
.interruptor input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cor-marca);
                     cursor: pointer; flex: 0 0 auto; }
.interruptor label { margin: 0; cursor: pointer; font-size: var(--t-md); color: var(--cor-texto);
                     font-weight: var(--p-normal); }
.interruptor .ajuda { font-size: var(--t-xs); color: var(--cor-texto-3); display: block; }

/* ═════════════════════════════ Botões ═════════════════════════════ */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: 8px var(--e4); border-radius: var(--r-md); border: 1px solid transparent;
  font-family: var(--fonte-corpo); font-size: var(--t-md); font-weight: var(--p-semi);
  cursor: pointer; white-space: nowrap; line-height: 1.4;
  transition: background var(--rapido) ease, border-color var(--rapido) ease,
              color var(--rapido) ease, transform var(--rapido) ease;
}
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao svg { flex: 0 0 auto; }
.botao-primario { background: var(--cor-marca); color: var(--cor-marca-contraste); }
.botao-primario:not(:disabled):hover { background: var(--cor-marca-forte); }
.botao-secundario { background: var(--cor-fundo-cartao); color: var(--cor-texto-2);
                    border-color: var(--cor-borda); }
.botao-secundario:not(:disabled):hover { background: var(--cor-fundo-passa); color: var(--cor-texto);
                                         border-color: var(--cor-borda-forte); }
.botao-perigo { background: var(--cor-erro); color: #FFF; }
.botao-perigo:not(:disabled):hover { filter: brightness(.9); }
.botao-sucesso { background: var(--cor-ok); color: #FFF; }
.botao-sucesso:not(:disabled):hover { filter: brightness(.92); }
.botao-fantasma { background: transparent; color: var(--cor-texto-2); border-color: var(--cor-borda); }
.botao-fantasma:hover { background: var(--cor-fundo-passa); }
.botao-pequeno { padding: 4px var(--e3); font-size: var(--t-xs); }
.botao-texto { background: transparent; border: 0; color: var(--cor-marca-texto); padding: 4px 6px; }
.botao-texto:hover { text-decoration: underline; }
.botao-bloco { width: 100%; }

.segmentado { display: inline-flex; padding: 2px; gap: 1px; background: var(--cor-fundo-suave);
              border: 1px solid var(--cor-borda); border-radius: var(--r-md); flex-wrap: wrap; }
.segmentado button {
  border: 0; background: transparent; padding: 5px var(--e3); border-radius: var(--r-sm);
  font-family: var(--fonte-corpo); font-size: var(--t-xs); font-weight: var(--p-semi);
  color: var(--cor-texto-3); cursor: pointer; white-space: nowrap;
}
.segmentado button:hover { color: var(--cor-texto); }
/* O ativo NÃO pode depender de ser mais claro que a trilha: dentro da janela o fundo já é
 * branco e a opção marcada ficava invisível. Marca + borda funcionam em qualquer superfície
 * e nos dois temas. */
.segmentado button.ativo { background: var(--cor-marca-suave); color: var(--cor-marca-texto);
                           box-shadow: inset 0 0 0 1px var(--cor-marca); font-weight: var(--p-forte); }

/* ═════════════════════════════ Tabela ═════════════════════════════ */

.rolagem-tabela { overflow-x: auto; }
/* A tabela larga rola DENTRO desta caixa, e não arrasta a página com ela. O `max-width`
   é o que impede a caixa de crescer junto com a tabela que ela deveria conter. */
.rolagem-tabela { max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
thead th {
  background: var(--cor-fundo-suave); color: var(--cor-texto-3);
  font-weight: var(--p-semi); font-size: var(--t-2xs);
  text-transform: uppercase; letter-spacing: .04em;
  text-align: left; padding: var(--e3); border-bottom: 1px solid var(--cor-borda);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
tbody td { padding: var(--e3); border-bottom: 1px solid var(--cor-divisor); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--cor-fundo-passa); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
td.acoes, th.acoes { text-align: right; white-space: nowrap; }
td .sub { display: block; font-size: var(--t-2xs); color: var(--cor-texto-3); margin-top: 1px; }
.selecionavel { cursor: pointer; }

/* Tabela de dados: ordena, pagina e exporta */
.tabela-dados { border: 1px solid var(--cor-borda); border-radius: var(--r-lg);
                background: var(--cor-fundo-cartao); overflow: hidden; margin-bottom: var(--e4);
                box-shadow: var(--sombra-xs); }
.tabela-barra { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4);
                border-bottom: 1px solid var(--cor-borda); flex-wrap: wrap; }
.tabela-barra .titulo { font-family: var(--fonte-titulo); font-weight: var(--p-forte);
                        font-size: var(--t-base); }
.tabela-barra .conta { font-size: var(--t-xs); color: var(--cor-texto-3); }
.tabela-barra .direita { margin-left: auto; display: flex; gap: var(--e2); align-items: center;
                         flex-wrap: wrap; }
.tabela-barra input[type=search] { min-width: 180px; max-width: 280px; }
/* `sticky` no thead só cola se o antepassado que rola for este container — `overflow-x:auto`
 * num pai cria outro contexto e o cabeçalho descola. Foi o que quebrou no AlliahBench. */
.tabela-corpo { max-height: 62vh; overflow: auto; }
.tabela-dados th.ordenavel { cursor: pointer; user-select: none; }
.tabela-dados th.ordenavel:hover { color: var(--cor-texto); }
.tabela-dados th .seta { display: inline-block; width: 10px; opacity: .35; margin-left: 3px; }
.tabela-dados th.ordenada { color: var(--cor-marca-texto); }
.tabela-dados th.ordenada .seta { opacity: 1; }
.tabela-rodape { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4);
                 border-top: 1px solid var(--cor-borda); font-size: var(--t-xs);
                 color: var(--cor-texto-3); flex-wrap: wrap; }
.tabela-rodape .paginas { margin-left: auto; display: flex; gap: var(--e1); align-items: center; }
.tabela-rodape .paginas button {
  min-width: 28px; height: 26px; padding: 0 var(--e2); border: 1px solid var(--cor-borda);
  background: var(--cor-fundo-cartao); border-radius: var(--r-sm); cursor: pointer;
  color: var(--cor-texto-2); font-family: var(--fonte-corpo); font-size: var(--t-xs);
}
.tabela-rodape .paginas button:hover:not(:disabled) { background: var(--cor-fundo-passa); }
.tabela-rodape .paginas button.ativa { background: var(--cor-marca); color: var(--cor-marca-contraste);
                                       border-color: var(--cor-marca); }
.tabela-rodape .paginas button:disabled { opacity: .4; cursor: not-allowed; }

/* ═════════════════════════════ Etiquetas e pontos ═════════════════════════════ */

.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-cheio);
  font-size: var(--t-2xs); font-weight: var(--p-semi); white-space: nowrap;
  border: 1px solid transparent;
}
.etiqueta-neutra   { background: var(--cor-fundo-suave); color: var(--cor-texto-2);
                     border-color: var(--cor-borda); }
.etiqueta-sucesso  { background: var(--cor-ok-suave); color: var(--cor-ok);
                     border-color: var(--cor-ok-borda); }
.etiqueta-alerta   { background: var(--cor-atencao-suave); color: var(--cor-atencao);
                     border-color: var(--cor-atencao-borda); }
.etiqueta-erro     { background: var(--cor-erro-suave); color: var(--cor-erro);
                     border-color: var(--cor-erro-borda); }
.etiqueta-info     { background: var(--cor-info-suave); color: var(--cor-info);
                     border-color: var(--cor-info-borda); }
.etiqueta-primaria { background: var(--cor-marca-suave); color: var(--cor-marca-texto);
                     border-color: color-mix(in srgb, var(--cor-marca) 30%, transparent); }
.etiqueta-roxa     { background: var(--cor-roxo-suave); color: var(--cor-roxo); }

.ponto { width: 8px; height: 8px; border-radius: var(--r-cheio); display: inline-block; flex: 0 0 auto; }
.ponto-verde { background: var(--cor-ok); box-shadow: 0 0 0 3px var(--cor-ok-suave); }
.ponto-cinza { background: var(--cor-texto-3); box-shadow: 0 0 0 3px var(--cor-fundo-suave); }
.ponto-vermelho { background: var(--cor-erro); box-shadow: 0 0 0 3px var(--cor-erro-suave); }
.ponto-amarelo { background: var(--cor-atencao); box-shadow: 0 0 0 3px var(--cor-atencao-suave); }
.pulsa { animation: pulsar 2s ease-in-out infinite; }
@keyframes pulsar { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.chip-linha { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

/* ═════════════════════════════ Avisos e vazios ═════════════════════════════ */

.aviso {
  display: flex; gap: var(--e3); padding: var(--e4);
  border-radius: var(--r-md); font-size: var(--t-md); margin-bottom: var(--e4);
  border: 1px solid transparent; line-height: 1.55;
}
.aviso:last-child { margin-bottom: 0; }
.aviso strong { display: block; margin-bottom: var(--e1); }
.aviso .icone { flex: 0 0 auto; margin-top: 1px; }
.aviso .acao { margin-left: auto; flex: 0 0 auto; align-self: center; }
.aviso-info    { background: var(--cor-info-suave); border-color: var(--cor-info-borda); color: var(--cor-info); }
.aviso-alerta  { background: var(--cor-atencao-suave); border-color: var(--cor-atencao-borda); color: var(--cor-atencao); }
.aviso-erro    { background: var(--cor-erro-suave); border-color: var(--cor-erro-borda); color: var(--cor-erro); }
.aviso-sucesso { background: var(--cor-ok-suave); border-color: var(--cor-ok-borda); color: var(--cor-ok); }
.aviso a { color: inherit; text-decoration: underline; }

.vazio { text-align: center; padding: var(--e10) var(--e4); color: var(--cor-texto-3); }
.vazio .icone-vazio { width: 44px; height: 44px; margin: 0 auto var(--e3); opacity: .35; }
.vazio h3 { color: var(--cor-texto-2); margin-bottom: var(--e1); }
.vazio p { font-size: var(--t-md); max-width: 46ch; margin: 0 auto var(--e4); }
.vazio .botao { margin: 0 auto; }

/* ═════════════════════════════ Carregando ═════════════════════════════ */

.carregando { display: inline-block; width: 15px; height: 15px;
  border: 2px solid color-mix(in srgb, var(--cor-texto-3) 35%, transparent);
  border-top-color: var(--cor-marca); border-radius: var(--r-cheio);
  animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Esqueleto: a tela nasce com a FORMA do conteúdo, não com um spinner no meio do vazio. */
.osso { background: linear-gradient(90deg, var(--cor-fundo-suave) 25%,
        color-mix(in srgb, var(--cor-fundo-suave) 55%, var(--cor-borda)) 37%,
        var(--cor-fundo-suave) 63%);
  background-size: 400% 100%; animation: brilhar 1.4s ease infinite;
  border-radius: var(--r-sm); height: 12px; }
@keyframes brilhar { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.osso-titulo { height: 26px; width: 220px; margin-bottom: var(--e2); }
.osso-linha { height: 13px; margin-bottom: var(--e2); }
.osso-cartao { border: 1px solid var(--cor-borda); border-radius: var(--r-lg);
               padding: var(--e5); background: var(--cor-fundo-cartao); }

/* ═════════════════════════════ Modal e gaveta ═════════════════════════════ */

.fundo-modal {
  position: fixed; inset: 0; background: rgba(8,12,22,.6); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--e4); z-index: 100;
  animation: aparecer var(--rapido) ease;
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--cor-fundo-alto); border: 1px solid var(--cor-borda);
  border-radius: var(--r-xl); box-shadow: var(--sombra-xl);
  width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column;
  animation: subir var(--normal) cubic-bezier(.2,.8,.2,1);
}
@keyframes subir { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-largo { max-width: 880px; }
.modal-cabecalho { display: flex; justify-content: space-between; align-items: flex-start;
                   gap: var(--e3); padding: var(--e5) var(--e6) var(--e4); }
.modal-cabecalho h2 { margin: 0; }
.modal-cabecalho .sub { font-size: var(--t-xs); color: var(--cor-texto-3); margin-top: 2px; }
#corpo-modal { padding: 0 var(--e6) var(--e6); overflow-y: auto; flex: 1; }
.modal-rodape { display: flex; justify-content: flex-end; gap: var(--e2); flex-wrap: wrap;
                padding: var(--e4) var(--e6); border-top: 1px solid var(--cor-borda);
                background: var(--cor-fundo-suave);
                border-radius: 0 0 var(--r-xl) var(--r-xl); }
.modal-rodape .esquerda { margin-right: auto; }
.fechar-modal { background: transparent; border: 0; font-size: 24px; line-height: 1; cursor: pointer;
                color: var(--cor-texto-3); padding: 0 4px; }
.fechar-modal:hover { color: var(--cor-texto); }

/* ═════════════════════════════ Recados ═════════════════════════════ */

#recados { position: fixed; right: var(--e5); bottom: var(--e5); z-index: 200;
           display: flex; flex-direction: column; gap: var(--e2); pointer-events: none; }
.recado {
  display: flex; align-items: flex-start; gap: var(--e3);
  background: var(--recado-fundo); color: var(--recado-texto); padding: var(--e3) var(--e4);
  border-radius: var(--r-md); box-shadow: var(--sombra-lg); font-size: var(--t-md);
  max-width: 400px; animation: surgir var(--normal) cubic-bezier(.2,.8,.2,1);
  pointer-events: auto; border-left: 3px solid var(--recado-borda);
}
.recado-erro { border-left-color: #F87171; }
.recado-sucesso { border-left-color: #34D399; }
@keyframes surgir { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ═════════════════════════════ Paleta de comandos ═════════════════════════════ */

.fundo-paleta { position: fixed; inset: 0; background: rgba(8,12,22,.55); backdrop-filter: blur(3px);
                z-index: 300; display: flex; justify-content: center; padding-top: 12vh;
                animation: aparecer var(--rapido) ease; }
.paleta {
  width: 100%; max-width: 620px; max-height: 66vh; display: flex; flex-direction: column;
  background: var(--cor-fundo-alto); border: 1px solid var(--cor-borda);
  border-radius: var(--r-xl); box-shadow: var(--sombra-xl); overflow: hidden;
  animation: subir var(--normal) cubic-bezier(.2,.8,.2,1);
}
.paleta-busca { display: flex; align-items: center; gap: var(--e3); padding: var(--e4) var(--e5);
                border-bottom: 1px solid var(--cor-borda); }
.paleta-busca svg { flex: 0 0 auto; color: var(--cor-texto-3); }
.paleta-busca input { border: 0; padding: 0; font-size: var(--t-base); background: transparent; }
.paleta-busca input:focus { box-shadow: none; }
.paleta-lista { overflow-y: auto; padding: var(--e2); }
.paleta-grupo { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .07em;
                color: var(--cor-texto-3); font-weight: var(--p-semi);
                padding: var(--e3) var(--e3) var(--e1); }
.paleta-item {
  display: flex; align-items: center; gap: var(--e3); width: 100%; text-align: left;
  padding: var(--e2) var(--e3); border: 0; background: transparent; border-radius: var(--r-md);
  cursor: pointer; color: var(--cor-texto); font-family: var(--fonte-corpo); font-size: var(--t-md);
}
.paleta-item .icone { flex: 0 0 auto; color: var(--cor-texto-3); display: grid; place-items: center;
                      width: 26px; height: 26px; border-radius: var(--r-sm);
                      background: var(--cor-fundo-suave); }
.paleta-item .texto { flex: 1; min-width: 0; }
.paleta-item .titulo { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paleta-item .sub { display: block; font-size: var(--t-2xs); color: var(--cor-texto-3);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paleta-item.marcado { background: var(--cor-marca-suave); }
.paleta-item.marcado .icone { background: var(--cor-marca); color: #FFF; }
.paleta-rodape { display: flex; gap: var(--e4); padding: var(--e2) var(--e5);
                 border-top: 1px solid var(--cor-borda); background: var(--cor-fundo-suave);
                 font-size: var(--t-2xs); color: var(--cor-texto-3); flex-wrap: wrap; }
.paleta-rodape span { display: flex; align-items: center; gap: var(--e1); }

/* ═════════════════════════════ Gráficos ═════════════════════════════ */

.grafico-caixa { position: relative; }
.grafico-caixa svg { display: block; width: 100%; height: auto; overflow: visible; }
 /* O SVG tem viewBox de 720 de largura e encolhe para caber no cartão: num cartão de
  * 380px o texto de 10 unidades vira 5px na tela e ninguém lê. 13 aguenta o encolhimento. */
.eixo-texto { font-family: var(--fonte-corpo); font-size: 13px; fill: var(--cor-texto-3); }
.linha-grade { stroke: var(--cor-divisor); stroke-width: 1; }
.dica-grafico {
  position: absolute; pointer-events: none; z-index: 10; transform: translate(-50%, -120%);
  background: var(--recado-fundo); color: var(--recado-texto); font-size: var(--t-2xs); line-height: 1.5;
  padding: 5px 9px; border-radius: var(--r-sm); white-space: nowrap; box-shadow: var(--sombra-md);
  opacity: 0; transition: opacity var(--rapido) ease;
}
.dica-grafico.visivel { opacity: 1; }
.dica-grafico strong { display: block; font-size: var(--t-xs); }

.legenda { display: flex; gap: var(--e4); flex-wrap: wrap; margin-top: var(--e3);
           font-size: var(--t-xs); color: var(--cor-texto-2); }
.legenda span { display: flex; align-items: center; gap: var(--e2); }
.legenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.barra { height: 7px; background: var(--cor-fundo-suave); border-radius: var(--r-cheio);
         overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--cor-marca);
                border-radius: var(--r-cheio); transition: width var(--normal) ease; }
.barra-ok > span { background: var(--cor-ok); }
.barra-alerta > span { background: var(--cor-atencao); }
.barra-erro > span { background: var(--cor-erro); }

.barras-h { display: flex; flex-direction: column; gap: var(--e3); }
.barras-h .item { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto;
                  gap: var(--e3); align-items: center; font-size: var(--t-sm); }
.barras-h .nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                  color: var(--cor-texto-2); }
.barras-h .valor { font-variant-numeric: tabular-nums; font-weight: var(--p-semi);
                   white-space: nowrap; }

/* ═════════════════════════════ Telas específicas ═════════════════════════════ */

/* Fila de pedidos por estado */
.quadro { display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
          margin-bottom: var(--e4); }
.coluna-estado {
  background: var(--cor-fundo-cartao); border: 1px solid var(--cor-borda);
  border-radius: var(--r-lg); padding: var(--e3) var(--e4); cursor: pointer;
  text-align: left; transition: border-color var(--rapido) ease, box-shadow var(--rapido) ease;
  border-top: 3px solid var(--cor-borda);
}
.coluna-estado:hover { border-color: var(--cor-borda-forte); box-shadow: var(--sombra-sm); }
.coluna-estado.ativa { border-color: var(--cor-marca); border-top-color: var(--cor-marca);
                       background: var(--cor-fundo-ativo); }
.coluna-estado .n { font-family: var(--fonte-titulo); font-size: var(--t-xl);
                    font-weight: var(--p-forte); font-variant-numeric: tabular-nums; }
.coluna-estado .r { font-size: var(--t-2xs); color: var(--cor-texto-3); margin-top: 1px;
                    text-transform: uppercase; letter-spacing: .04em; font-weight: var(--p-semi); }
.coluna-estado .v { font-size: var(--t-xs); color: var(--cor-texto-2); margin-top: 2px; }

/* Passo a passo da importação */
.trilha { display: flex; gap: var(--e2); margin-bottom: var(--e5); flex-wrap: wrap; }
.trilha .passo {
  display: flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e4);
  border-radius: var(--r-cheio); background: var(--cor-fundo-suave);
  color: var(--cor-texto-3); font-size: var(--t-xs); font-weight: var(--p-semi);
  border: 1px solid var(--cor-borda);
}
.trilha .passo .bola { width: 20px; height: 20px; border-radius: var(--r-cheio);
                       background: var(--cor-borda-forte); color: #FFF; display: grid;
                       place-items: center; font-size: 11px; }
.trilha .passo.atual { background: var(--cor-marca-suave); color: var(--cor-marca-texto);
                       border-color: var(--cor-marca); }
.trilha .passo.atual .bola { background: var(--cor-marca); }
.trilha .passo.feito { background: var(--cor-ok-suave); color: var(--cor-ok);
                       border-color: var(--cor-ok-borda); }
.trilha .passo.feito .bola { background: var(--cor-ok); }

.area-arquivo {
  border: 2px dashed var(--cor-borda-forte); border-radius: var(--r-lg);
  padding: var(--e10) var(--e6); text-align: center; cursor: pointer;
  transition: border-color var(--rapido) ease, background var(--rapido) ease;
}
.area-arquivo:hover, .area-arquivo.arrastando { border-color: var(--cor-marca);
                                                background: var(--cor-marca-suave); }
.area-arquivo h3 { margin-bottom: var(--e2); }

.mapa-colunas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mapa-colunas .campo { margin: 0; }
.mapa-colunas .obrigatorio::after { content: ' *'; color: var(--cor-erro); }

.linha-anomalia { background: var(--cor-atencao-suave); }
.linha-erro { background: var(--cor-erro-suave); }

/* Conversas */
.painel-conversas { display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: var(--e4);
                    align-items: start; }
@media (max-width: 1100px) { .painel-conversas { grid-template-columns: 1fr; } }

.lista-conversas { max-height: 66vh; overflow-y: auto; }
.item-conversa {
  width: 100%; text-align: left; background: transparent; border: 0;
  border-bottom: 1px solid var(--cor-divisor); padding: var(--e3) var(--e4); cursor: pointer;
  display: block; border-left: 3px solid transparent;
}
.item-conversa:hover { background: var(--cor-fundo-passa); }
.item-conversa.ativo { background: var(--cor-fundo-ativo); border-left-color: var(--cor-marca); }
.item-conversa .topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); }
.item-conversa .nome { font-weight: var(--p-semi); color: var(--cor-texto); font-size: var(--t-md);
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-conversa .previa { color: var(--cor-texto-3); font-size: var(--t-xs); margin-top: 2px;
                         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.conversa { display: flex; flex-direction: column; height: 66vh; }
.conversa-cabecalho { display: flex; align-items: center; justify-content: space-between;
                      gap: var(--e3); padding-bottom: var(--e4);
                      border-bottom: 1px solid var(--cor-borda); flex-wrap: wrap; }
.mensagens { flex: 1; overflow-y: auto; padding: var(--e4) var(--e2);
             display: flex; flex-direction: column; gap: var(--e3); }
.balao { max-width: 76%; padding: var(--e3) var(--e4); border-radius: var(--r-lg);
         font-size: var(--t-md); line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.balao-entrada { align-self: flex-start; background: var(--cor-fundo-suave);
                 border: 1px solid var(--cor-borda); border-bottom-left-radius: var(--r-sm); }
.balao-saida { align-self: flex-end; background: var(--cor-marca); color: var(--cor-marca-contraste);
               border-bottom-right-radius: var(--r-sm); }
.balao-erro { align-self: center; background: var(--cor-erro-suave); color: var(--cor-erro);
              border: 1px solid var(--cor-erro-borda); font-size: var(--t-xs); max-width: 92%; }
.balao .rodape { font-size: 10px; opacity: .7; margin-top: var(--e2); display: flex; gap: var(--e2);
                 flex-wrap: wrap; }
.balao-saida .rodape { color: rgba(255,255,255,.88); }
.escrever { display: flex; gap: var(--e2); padding-top: var(--e4);
            border-top: 1px solid var(--cor-borda); }
.escrever textarea { min-height: 42px; max-height: 140px; }

.caixa-codigo {
  background: var(--codigo-fundo); color: var(--codigo-texto); padding: var(--e4);
  border-radius: var(--r-md); font-family: var(--fonte-mono); font-size: var(--t-xs);
  overflow-x: auto; white-space: pre-wrap; word-break: break-word; line-height: 1.65;
}

/* Rótulo pequeno de bloco de dado dentro de janela */
.rotulo-mini { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .05em;
               color: var(--cor-texto-3); font-weight: var(--p-semi); margin-bottom: 2px; }

/* Painel de crédito do cliente */
.medidor { display: flex; flex-direction: column; gap: var(--e2); }
.medidor .topo { display: flex; justify-content: space-between; font-size: var(--t-xs);
                 color: var(--cor-texto-3); }

/* Abas */
.abas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--cor-borda);
        margin-bottom: var(--e5); overflow-x: auto; }
.abas button {
  border: 0; background: transparent; padding: var(--e3) var(--e4); cursor: pointer;
  font-family: var(--fonte-corpo); font-size: var(--t-md); font-weight: var(--p-semi);
  color: var(--cor-texto-3); border-bottom: 2px solid transparent; white-space: nowrap;
  display: flex; align-items: center; gap: var(--e2);
}
.abas button:hover { color: var(--cor-texto); }
.abas button.ativa { color: var(--cor-marca-texto); border-bottom-color: var(--cor-marca); }

/* Linha do tempo (andamento do pedido, auditoria) */
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 var(--e5); position: relative; }
.linha-tempo::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
                       width: 2px; background: var(--cor-divisor); }
.linha-tempo li { position: relative; padding-bottom: var(--e4); font-size: var(--t-md); }
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li::before {
  content: ''; position: absolute; left: calc(-1 * var(--e5) + 1px); top: 5px;
  width: 10px; height: 10px; border-radius: var(--r-cheio);
  background: var(--cor-fundo-cartao); border: 2px solid var(--cor-borda-forte);
}
.linha-tempo li.marco::before { background: var(--cor-marca); border-color: var(--cor-marca); }
.linha-tempo .quando { font-size: var(--t-2xs); color: var(--cor-texto-3); }

/* ═════════════════════════════ Responsivo ═════════════════════════════ */

@media (max-width: 900px) {
  #app.visivel { grid-template-columns: 1fr; }
  .barra-lateral {
    position: fixed; z-index: 90; left: 0; top: 0; width: var(--largura-lateral-fechada);
    padding: var(--e3) var(--e2);
  }
  .barra-lateral .marca .texto, .barra-lateral .grupo-menu,
  .barra-lateral .menu .rotulo, .barra-lateral .rodape-lateral .quem,
  .barra-lateral .rodape-lateral .texto-sair { display: none; }
  .barra-lateral .menu button { justify-content: center; }
  .conteudo, .barra-topo { margin-left: var(--largura-lateral-fechada); }
  .conteudo { padding: var(--e5) var(--e4) var(--e10); }
  .barra-topo { padding: 0 var(--e4); }
  .busca-topo { min-width: 44px; }
  .busca-topo .texto-busca, .busca-topo .atalho { display: none; }
  .cabecalho-pagina h1 { font-size: var(--t-xl); }
}

@media print {
  .barra-lateral, .barra-topo, .acoes-pagina, .cabecalho-pagina p,
  .tabela-barra .direita, .tabela-rodape, .nao-imprime { display: none !important; }
  /* Nada de controle interativo no papel. O bloco acima escondia as ações do TOPO, e a
     folha continuava saindo com um botão "Ver" em cada linha e uma seta de ordenação em
     cada cabeçalho — coisas que não fazem nada impressas e ainda comem a largura que o
     conteúdo precisa. A coluna de ações sai inteira, cabeçalho junto. */
  .botao, .seta, td.acoes, th.acoes, .paginacao { display: none !important; }
  #app.visivel { grid-template-columns: 1fr; }
  .conteudo { padding: 0; margin: 0; }
  .cartao, .tabela-dados, .indicador { box-shadow: none; border: 1px solid #94A3B8;
                                       break-inside: avoid; }
  .tabela-corpo { max-height: none; overflow: visible; }
  body { background: #FFF; color: #000; }
}

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

/* Troca entre os módulos da plataforma Madeireira (Atendimento / Gestão) — mesmo login (SSO) */
.troca-modulo { display: flex; gap: 4px; margin: 4px 0 14px; padding: 4px;
  background: rgba(255, 255, 255, .09); border-radius: 12px; }
.troca-item { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; border-radius: 9px; font-size: 13px; font-weight: 600; line-height: 1;
  color: inherit; opacity: .72; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, opacity .15s ease; }
.troca-item:hover { opacity: 1; background: rgba(255, 255, 255, .07); }
.troca-item.ativo { opacity: 1; background: rgba(255, 255, 255, .18); }
.troca-item .ti-ico { font-size: 14px; }

/* ═════════════════════ Limites do bot ═════════════════════
   A tela da coleira usa widgets que não existem em nenhuma outra: etiquetas que se
   removem, uma grade semanal de expediente e campos com unidade colada. Ficam aqui
   embaixo, juntos, porque só essa tela usa — e quem for mexer nela acha tudo de uma vez. */

.corpo-cartao { padding: var(--e5); }
.titulo-secao { margin: var(--e6) 0 var(--e2); }

/* Dois números lado a lado no desktop, um embaixo do outro no celular. O `min(300px,100%)`
   é o mesmo cuidado das outras grades: sem ele a coluna não encolhe e a página rola. */
.grade-limites {
  display: grid; gap: var(--e5);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* "R$" e "%" colados no campo. Sem isso o dono digita 15000 sem saber se são reais ou
   milhares, e 15 sem saber se é por cento ou reais. */
.campo-com-unidade { display: flex; align-items: stretch; }
.campo-com-unidade input { flex: 1; min-width: 0; }
.campo-com-unidade .unidade {
  display: flex; align-items: center; padding: 0 var(--e3);
  background: var(--cor-fundo-suave); border: 1px solid var(--cor-borda);
  color: var(--cor-texto-2); font-size: var(--t-sm); font-weight: var(--p-semi);
}
.campo-com-unidade .unidade:first-child {
  border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md);
}
.campo-com-unidade .unidade:last-child {
  border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0;
}
.campo-com-unidade .unidade:first-child + input { border-radius: 0 var(--r-md) var(--r-md) 0; }
.campo-com-unidade input:has(+ .unidade) { border-radius: var(--r-md) 0 0 var(--r-md); }

.etiquetas-editaveis { display: flex; flex-wrap: wrap; gap: var(--e2); }
.etiquetas-editaveis .etiqueta { padding-right: 4px; }
.etiqueta-x {
  border: 0; background: none; cursor: pointer; line-height: 1;
  padding: 0 3px; border-radius: var(--r-cheio);
  color: var(--cor-texto-3); font-size: var(--t-sm);
}
.etiqueta-x:hover { background: var(--cor-erro-suave); color: var(--cor-erro); }

.linha-de-adicionar { display: flex; gap: var(--e2); margin-top: var(--e3); flex-wrap: wrap; }
.linha-de-adicionar input { flex: 1; min-width: min(220px, 100%); }

.grade-expediente {
  display: flex; flex-direction: column;
  border: 1px solid var(--cor-borda); border-radius: var(--r-md); overflow: hidden;
}
.linha-expediente {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--cor-divisor);
}
.linha-expediente:last-child { border-bottom: 0; }
.linha-expediente .interruptor { min-width: 128px; margin: 0; }
.linha-expediente input[type="time"] { width: auto; min-width: 110px; }
/* O dia fechado continua legível — apagar o horário some com a referência de quem está
   comparando os dias. Ele só recua para o segundo plano. */
.linha-expediente.fechado { background: var(--cor-fundo-suave); }
.linha-expediente.fechado input[type="time"] { opacity: .45; }
.linha-expediente .estado-do-dia { margin-left: auto; font-style: italic; }
@media (max-width: 560px) {
  .linha-expediente .ate { display: none; }
  .linha-expediente .estado-do-dia { margin-left: 0; }
}

/* ═════════════════════ Desempenho do bot ═════════════════════ */

/* Escolha de período. Botão e não <select>: são três opções fixas e o operador vê as
   três de uma vez, em vez de abrir uma lista para descobrir o que existe. */
.grupo-botoes { display: inline-flex; gap: var(--e1); flex-wrap: wrap; }

/* O funil desenhado como barras que encolhem. A etapa vazia CONTINUA na tela: "nenhum
   orçamento virou pedido" é o achado, e esconder a linha esconderia o problema. */
.funil { display: flex; flex-direction: column; gap: var(--e4); }
.etapa-funil .etapa-cabeca {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
}
.etapa-funil .etapa-rotulo { font-size: var(--t-sm); color: var(--cor-texto-2); }
.etapa-funil .etapa-valor { font-family: var(--fonte-titulo); font-size: var(--t-xl); }
.etapa-funil .etapa-barra {
  display: block; height: 10px; margin-top: var(--e2);
  background: var(--cor-fundo-suave); border-radius: var(--r-cheio); overflow: hidden;
}
.etapa-funil .etapa-barra > span {
  display: block; height: 100%; border-radius: var(--r-cheio);
  transition: width .35s ease;
}
.etapa-funil .sub { margin-top: var(--e1); }

/* Rótulo de campo com uma ação do lado — "Versões anteriores" ao lado do texto que
   define o atendimento. Fica no rótulo e não embaixo do campo porque é ali que o olho
   está quando a pergunta aparece: "o que eu apaguei mesmo?". */
.rotulo-com-acao {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); flex-wrap: wrap;
}
.rotulo-com-acao label { margin: 0; }

/* Bloco da saúde da plataforma na tela Hoje. Uma faixa por checagem empurrava a tela
   inteira para baixo da dobra: numa instalação recém-entregue são três de uma vez, e o
   dono abria o sistema num paredão amarelo sem enxergar um pedido sequer. */
.bloco-saude { border-left: 3px solid var(--cor-borda-forte); }
.bloco-saude.tom-erro   { border-left-color: var(--cor-erro); }
.bloco-saude.tom-alerta { border-left-color: var(--cor-atencao); }
.bloco-saude.tom-info   { border-left-color: var(--cor-info); }
.bloco-saude .cartao-titulo h2 { display: flex; align-items: center; gap: var(--e2); }
.linha-saude {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--e5); border-bottom: 1px solid var(--cor-divisor);
}
.linha-saude:last-child { border-bottom: 0; }
.linha-saude > div { flex: 1; min-width: 0; }
.linha-saude .sub { display: block; }
.ponto { width: 8px; height: 8px; border-radius: var(--r-cheio); flex: 0 0 auto;
         background: var(--cor-borda-forte); }
.ponto-erro   { background: var(--cor-erro); }
.ponto-alerta { background: var(--cor-atencao); }
.ponto-info   { background: var(--cor-info); }