/* Casca das telas — barra lateral escura, conteúdo claro, acento em ouro.
   Linguagem visual espelhada do padrão do Gestão Jurídica: monograma no topo
   da lateral, grupos rotulados em versalete, cartões brancos de borda fina e
   filete colorido nos indicadores. */

:root{
  /* Superfícies */
  --fundo:#f8f7f4;
  --cartao:#ffffff;
  --cartao-2:#faf9f6;
  --linha:#e7e4dd;
  --linha-forte:#d5d0c6;

  /* Texto */
  --tinta:#1c1b19;
  --tinta-2:#57544e;
  --fraco:#8d8880;
  --fraco-2:#a8a29a;

  /* Lateral */
  --lateral:#1c1b1a;
  --lateral-2:#282624;
  --lateral-txt:#cbc7bf;
  --lateral-fraco:#7a7568;
  --lateral-linha:rgba(255,255,255,.08);

  /* Acento */
  --ouro:#a8873a;
  --ouro-forte:#8f7130;
  --ouro-nav:#bd9d4e;
  --ouro-fraco:#f3ecdb;

  /* Séries dos gráficos — validadas sobre #ffffff: dentro da banda de
     luminosidade, ΔE 20.7 em protanopia. Não trocar sem revalidar. */
  --serie-a:#a8873a;
  --serie-b:#3a6ea5;

  /* Estado. Cor sempre com rótulo junto — nunca cor sozinha. */
  --vermelho:#b0362a;  --vermelho-bg:#fbeae7;  --vermelho-borda:#f0d2cc;
  --ambar:#9a6d18;     --ambar-bg:#fdf4e2;     --ambar-borda:#eddfbd;
  --verde:#2a6f4f;     --verde-bg:#e9f3ee;     --verde-borda:#cde3d8;
  --azul:#35618f;      --azul-bg:#eaf0f7;      --azul-borda:#cddcea;
  --neutro:#6d685e;    --neutro-bg:#f1efea;    --neutro-borda:#e2ded5;

  --r:6px;
}

*{box-sizing:border-box}
html,body{height:100%}

/* O `hidden` do HTML vem da folha do navegador e perde para qualquer display
   declarado — inclusive inline. Sem isto, esconder por JS não esconde nada. */
[hidden]{display:none!important}

body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font-family:Jost,'Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
:focus-visible{outline:2px solid var(--ouro);outline-offset:2px;border-radius:3px}

.pular{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ouro);color:#fff;padding:12px 18px;font-weight:600}
.pular:focus{left:0}
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.num{font-variant-numeric:tabular-nums}

/* ── Estrutura ──────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:206px minmax(0,1fr);min-height:100dvh}
@media(max-width:820px){.app{grid-template-columns:1fr}}

.lateral{
  background:var(--lateral);color:var(--lateral-txt);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100dvh;
}
@media(max-width:820px){.lateral{position:static;height:auto}}

.corpo-app{min-width:0;display:flex;flex-direction:column}

/* ── Marca ──────────────────────────────────────────────────────────────── */
.marca{display:flex;gap:11px;align-items:center;padding:17px 16px;border-bottom:1px solid var(--lateral-linha)}
.monograma{
  width:34px;height:34px;border-radius:5px;flex:none;
  background:var(--ouro);color:#1c1b1a;
  display:grid;place-items:center;font-size:18px;font-weight:600;line-height:1;
}
.marca .nome{font-size:13.5px;font-weight:600;color:#fff;line-height:1.15}
.marca .org{font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--lateral-fraco);margin-top:3px;font-weight:500}

/* ── Navegação ──────────────────────────────────────────────────────────── */
.nav{padding:10px 10px 16px;flex:1;overflow-y:auto}
.nav .grupo{
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--lateral-fraco);font-weight:600;padding:16px 10px 6px;
}
.nav .grupo:first-child{padding-top:8px}
.nav a{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:5px;margin-bottom:1px;
  color:var(--lateral-txt);text-decoration:none;font-size:13.5px;font-weight:500;
}
.nav a:hover{background:var(--lateral-2);color:#fff}
.nav a[aria-current="page"]{background:var(--ouro-nav);color:#211d15;font-weight:600}
.nav .conta{margin-left:auto;font-size:11px;color:var(--lateral-fraco);font-variant-numeric:tabular-nums}
.nav a[aria-current="page"] .conta{color:#4d4231}
.nav .conta.aviso{
  background:var(--vermelho);color:#fff;border-radius:20px;
  min-width:17px;height:17px;display:grid;place-items:center;font-size:10px;font-weight:700;
}

.rodape-lateral{padding:14px 16px;border-top:1px solid var(--lateral-linha)}
.rodape-lateral .sair{
  background:none;border:0;padding:0;min-height:0;
  color:var(--lateral-txt);font:inherit;font-size:12px;font-weight:600;cursor:pointer;
}
.rodape-lateral .sair:hover{color:#fff;text-decoration:underline}
.rodape-lateral .quem{display:block;font-size:11px;color:var(--lateral-fraco);margin-top:6px;line-height:1.4}
.rodape-lateral .sem-login{
  display:inline-block;background:var(--ambar);color:#231a08;
  border-radius:3px;padding:2px 8px;
  font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}

/* ── Cabeçalho da página ────────────────────────────────────────────────── */
.topo{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px 26px;background:var(--cartao);border-bottom:1px solid var(--linha);
}
.topo h1{font-size:20px;font-weight:600;margin:0;letter-spacing:-.01em}
.topo .sub{font-size:12.5px;color:var(--fraco);margin:1px 0 0}
.topo .acoes{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Faixa de aviso — o canal desligado precisa estar sempre à vista. Mensagem
   que não sai e não avisa é o jeito mais rápido de perder a confiança. */
.faixa{
  display:flex;align-items:center;gap:10px;flex:none;
  background:#fdf8ec;border-bottom:1px solid #eddfbd;
  padding:10px 26px;color:#6f5a24;font-size:12.5px;
}
.faixa .pino{
  background:var(--ambar);color:#fff;border-radius:3px;padding:2px 7px;
  font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
}
.erro-global{
  background:var(--vermelho-bg);border-bottom:1px solid var(--vermelho-borda);color:var(--vermelho);
  padding:10px 26px;font-size:13px;font-weight:500;
}

main{padding:18px 26px 30px;display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}

/* ── Cartões ────────────────────────────────────────────────────────────── */
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--r)}
.cartao > h2{
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-2);font-weight:600;margin:0;
  padding:13px 18px;border-bottom:1px solid var(--linha);
  display:flex;align-items:center;gap:12px;
}
.cartao > h2 .direita{margin-left:auto}
.cartao > .corpo{padding:16px 18px}

/* ── Indicadores ────────────────────────────────────────────────────────── */
/* Cartões separados, não um painel único com divisores por `gap`: com o truque
   do gap, a última linha incompleta expõe a cor do fundo como um bloco cinza
   morto ao lado do último indicador. */
.placas{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:10px;align-items:stretch}
.placa{
  background:var(--cartao);padding:14px 16px 15px;
  border:1px solid var(--linha);border-left:3px solid var(--ouro);border-radius:var(--r);
}
.placa .valor{font-size:29px;font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--ouro)}
.placa .rotulo{
  font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fraco);font-weight:600;margin-top:7px;
}
.placa .apoio{font-size:11.5px;color:var(--fraco-2);margin-top:3px;line-height:1.35}
.placa.vermelho{border-left-color:var(--vermelho)} .placa.vermelho .valor{color:var(--vermelho)}
.placa.ambar{border-left-color:var(--ambar)}       .placa.ambar .valor{color:var(--ambar)}
.placa.verde{border-left-color:var(--verde)}       .placa.verde .valor{color:var(--verde)}
.placa.azul{border-left-color:var(--azul)}         .placa.azul .valor{color:var(--azul)}

/* ── Linhas de lista ────────────────────────────────────────────────────── */
.linhas{display:flex;flex-direction:column}
.linhas .linha{
  display:flex;align-items:center;gap:12px;
  padding:11px 18px;border-bottom:1px solid var(--linha);
  border-left:3px solid transparent;
}
.linhas .linha:last-child{border-bottom:none}
.linhas .linha.marcada{border-left-color:var(--ouro)}
.linhas .linha .principal{font-size:13.5px;font-weight:600;min-width:0}
.linhas .linha .apoio{font-size:12.5px;color:var(--fraco)}
.linhas .linha .fim{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}

/* ── Botões e campos ────────────────────────────────────────────────────── */
button,.botao{
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  background:var(--cartao);color:var(--tinta);
  border:1px solid var(--linha-forte);border-radius:5px;padding:8px 14px;min-height:34px;
}
button:hover:not(:disabled){background:var(--cartao-2);border-color:var(--fraco-2)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primario{background:var(--ouro);border-color:var(--ouro);color:#fff}
button.primario:hover:not(:disabled){background:var(--ouro-forte);border-color:var(--ouro-forte)}
button.discreto{background:transparent;border-color:var(--linha)}

input,select,textarea{
  font:inherit;font-size:13px;background:var(--cartao);color:var(--tinta);
  border:1px solid var(--linha-forte);border-radius:5px;padding:8px 11px;min-height:34px;width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--ouro);outline:none;box-shadow:0 0 0 3px rgba(168,135,58,.13)}
input::placeholder,textarea::placeholder{color:var(--fraco-2)}
textarea{resize:vertical;line-height:1.5}
label{display:block;font-size:11.5px;font-weight:600;color:var(--tinta-2);margin-bottom:5px}
.campo{margin-bottom:12px}
.campo-erro{color:var(--vermelho);font-size:12px;margin-top:5px}

/* ── Etiquetas ──────────────────────────────────────────────────────────── */
.etiqueta{
  display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:4px;white-space:nowrap;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid transparent;
}
.etiqueta.erro{background:var(--vermelho-bg);color:var(--vermelho);border-color:var(--vermelho-borda)}
.etiqueta.alerta{background:var(--ambar-bg);color:var(--ambar);border-color:var(--ambar-borda)}
.etiqueta.ok{background:var(--verde-bg);color:var(--verde);border-color:var(--verde-borda)}
.etiqueta.neutro{background:var(--neutro-bg);color:var(--neutro);border-color:var(--neutro-borda)}

/* ── Vazios ─────────────────────────────────────────────────────────────── */
.vazio{
  color:var(--fraco);font-size:13px;text-align:center;
  padding:26px 16px;border:1px dashed var(--linha-forte);border-radius:var(--r);background:var(--cartao-2);
}
.vazio b{display:block;color:var(--tinta-2);font-size:14px;font-weight:600;margin-bottom:3px}

/* ── Diálogo ────────────────────────────────────────────────────────────── */
dialog{
  background:var(--cartao);color:var(--tinta);border:1px solid var(--linha-forte);
  border-radius:var(--r);padding:22px;width:min(440px,92vw);
  box-shadow:0 20px 50px rgba(28,27,25,.22);
}
dialog::backdrop{background:rgba(28,27,25,.42)}
dialog h2{margin:0 0 16px;font-size:16px;font-weight:600}
dialog .rodape{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}