/* =====================================================================
   GABINETE DO COELHO — core.css v1
   ---------------------------------------------------------------------
   Design system da plataforma. Identidade: verde-musgo escurecido +
   algodão egípcio + amadeirado (jacarandá/imbuia). Dois temas.
   Tipografia: Outfit (interface) + Spline Sans Mono (números).

   REGRA QUE GOVERNA ESTE ARQUIVO
     Cor de SUPERFÍCIE e cor de TEXTO são tokens diferentes, e nenhuma
     superfície pode ter o mesmo valor da superfície que está atrás dela.
     Ao acrescentar token novo, conferir o par claro E o escuro — o modo
     escuro do Valora quebrou exatamente por isso, e o do Gabinete quase
     repetiu (o cartão de destaque sumia dentro do fundo).

   CONTRASTES CONFERIDOS (WCAG, 18/08/2026)
     --text sobre --surface .............. 14,1:1
     --muted sobre --surface .............  5,1:1
     --marca-texto sobre --surface .......  5,4:1
     --text escuro sobre --surface escuro  13,1:1
     --marca escura sobre --surface esc. .  6,2:1
     `--marca` (#A2703C) dá 4,03:1: serve para PREENCHER, não para
     escrever. É por isso que existe `--marca-texto` separado.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

/* ---------------- TOKENS · TEMA CLARO (padrão) ---------------- */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* superfícies — cada camada um degrau acima da anterior */
  --bg:#EFEAE0;              /* algodão egípcio */
  --surface:#FBF8F2;         /* cards */
  --surface-2:#F4F0E6;       /* inputs, zebra */
  --border:#DDD5C4;

  /* verde-musgo — comanda */
  --tinta:#1E2A1B;           /* musgo escurecido: header, tabela, botão */
  --profundo:#35472F;
  --vivo:#5E7F51;
  --accent-text:#1E2A1B;     /* cor de TEXTO de destaque, não de superfície */

  /* amadeirado — destaca */
  --marca:#A2703C;           /* imbuia: preenchimento, barra, ícone */
  --marca-hover:#B58248;
  --marca-texto:#8A5C2E;     /* imbuia escuro: texto (5,43:1) */
  --madeira:#4A2F26;         /* jacarandá: segundo plano de madeira */

  /* texto */
  --text:#1E2A1B;
  --muted:#6E6A5E;
  --muted-2:#8A8578;
  --placeholder:#B3AD9E;

  /* estado — só funcional, nunca decorativo */
  --success:#2A7F5E;
  --danger:#A8443C;
  --info:#5E7F51;

  /* pares fundo/texto de selo e alerta */
  --sucesso-bg:#E2EFE7;  --sucesso-fg:#1F6B4E;
  --alerta-bg:#F6EDDD;   --alerta-fg:#6B4423;
  --perigo-bg:#F6E4E2;   --perigo-fg:#8C332C;
  --destaque-bg:#F6EDDD; --destaque-borda:#C9A579; --destaque-fg:#6B4423;

  /* rampa sequencial — magnitude nos gráficos, clara → escura.
     Conferida como monotônica. Uma cor só: contagem é quantidade,
     não identidade. */
  --r1:#DDE5D6; --r2:#B4C6A9; --r3:#89A57A; --r4:#5E7F51; --r5:#35472F;

  /* sobreposição (toast, tooltip). No claro coincide com --tinta; no
     escuro NÃO pode coincidir, senão a sobreposição fica mais escura que
     a página e desaparece. */
  --overlay:#1E2A1B;

  /* forma */
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 4px 20px rgba(30,42,27,.06);
  --shadow-hover:0 8px 28px rgba(30,42,27,.11);

  /* tipografia */
  --font-display:'Outfit',system-ui,sans-serif;
  --font-body:'Outfit',system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',monospace;
}

/* ---------------- TOKENS · TEMA ESCURO ---------------- */
/* Escolhido, não invertido: cada degrau foi escolhido contra o fundo
   escuro, e a rampa dos gráficos tem passos próprios. */
body.dark{
  --bg:#121A11;              /* musgo bem escuro, dessaturado */
  --surface:#1C2619;         /* o card sobe com clareza sobre o fundo */
  --surface-2:#253020;       /* input, zebra — mais um degrau */
  --border:#33402C;

  --tinta:#0C120B;
  --profundo:#35472F;
  --vivo:#7FA06F;
  --accent-text:#93B183;     /* no escuro, texto de destaque clareia */

  --marca:#C89A5E;
  --marca-hover:#D6AA70;
  --marca-texto:#C89A5E;
  --madeira:#8A5A43;

  --text:#EFEAE0;            /* algodão egípcio vira o texto */
  --muted:#A7A497;
  --muted-2:#847F72;
  --placeholder:#6B675C;

  --success:#4FBF95;
  --danger:#E08585;
  --info:#93B183;

  --sucesso-bg:rgba(79,191,149,.12);  --sucesso-fg:#8AD9BD;
  --alerta-bg:rgba(200,154,94,.12);   --alerta-fg:#D9B584;
  --perigo-bg:rgba(224,133,133,.12);  --perigo-fg:#EAA8A8;
  --destaque-bg:rgba(200,154,94,.12); --destaque-borda:rgba(200,154,94,.42); --destaque-fg:#D9B584;

  --r1:#2A3A24; --r2:#3C5234; --r3:#537047; --r4:#6E8E5D; --r5:#93B183;

  --overlay:#253020;         /* NÃO é --tinta: precisa subir sobre a página */

  --shadow:0 4px 20px rgba(0,0,0,.32);
  --shadow-hover:0 8px 28px rgba(0,0,0,.42);
}

/* ---------------- BASE ---------------- */
body{
  font-family:var(--font-body);background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}
a{color:inherit}
.mono{font-family:var(--font-mono)}
.pos{color:var(--success)} .neg{color:var(--danger)}
.t-sub{font-size:11.5px;color:var(--muted-2)}
.t-forte{font-weight:500}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

input,select,textarea{
  font-family:var(--font-body);font-size:13.5px;padding:9px 11px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--text);width:100%;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--marca);box-shadow:0 0 0 3px rgba(162,112,60,.16);
}
body.dark input:focus,body.dark select:focus,body.dark textarea:focus{
  box-shadow:0 0 0 3px rgba(200,154,94,.2);
}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input[readonly]{background:rgba(0,0,0,.04);cursor:default}
body.dark input[readonly]{background:rgba(0,0,0,.18)}
textarea{min-height:84px;resize:vertical}
label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted-2);font-weight:500;margin-bottom:5px}

/* foco visível para teclado — nunca remover sem substituir */
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}

/* ---------------- CABEÇALHO ---------------- */
.app-header{
  background:var(--tinta);padding:0 1.6rem;height:60px;position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(239,234,224,.08);
}
body.dark .app-header{border-bottom-color:var(--border)}
.app-logo{
  font-family:var(--font-display);color:#F2EFE6;font-size:1.22rem;font-weight:500;
  letter-spacing:.01em;text-decoration:none;display:flex;align-items:center;gap:.6rem;
}
.app-logo span{color:var(--marca)}
.app-header-right{display:flex;align-items:center;gap:.85rem}
.app-header-user{font-size:12px;color:rgba(239,234,224,.55);font-weight:500}
.btn-header{
  background:transparent;border:1px solid rgba(239,234,224,.22);
  color:rgba(239,234,224,.68);padding:5px 13px;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:12px;cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;gap:5px;text-decoration:none;
}
.btn-header:hover{border-color:var(--marca);color:var(--marca)}

/* ---------------- NAVEGAÇÃO ---------------- */
.app-nav{
  background:var(--surface);border-bottom:1px solid var(--border);padding:0 1.6rem;
  display:flex;gap:2px;overflow-x:auto;position:sticky;top:60px;z-index:90;
}
.nav-item{
  background:none;border:none;border-bottom:2px solid transparent;padding:12px 15px;
  font-family:var(--font-body);font-size:13.5px;color:var(--muted);cursor:pointer;
  white-space:nowrap;text-decoration:none;display:flex;align-items:center;gap:7px;
  transition:color .15s;
}
.nav-item:hover{color:var(--text)}
.nav-item.on{color:var(--accent-text);border-bottom-color:var(--marca);font-weight:500}
/* Módulo ainda não construído: visível e inerte. Sumir daria a impressão
   de que o sistema é menor do que vai ser; linkar levaria a um 404. */
.nav-item.nav-breve{color:var(--muted-2);opacity:.55;cursor:default}
.nav-item.nav-breve:hover{color:var(--muted-2)}

main.app-main{max-width:1240px;margin:0 auto;padding:1.9rem 1.6rem 4rem}
@media(max-width:640px){
  main.app-main{padding:1.2rem}
  .app-header,.app-nav{padding:0 1rem}
}

/* ---------------- CABEÇALHO DE PÁGINA ---------------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  margin-bottom:1.5rem;flex-wrap:wrap}
.page-title{font-family:var(--font-display);font-size:1.65rem;font-weight:300;
  letter-spacing:-.01em;color:var(--accent-text)}
.page-sub{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ---------------- CARD ---------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.5rem 1.6rem;box-shadow:var(--shadow);margin-bottom:1.2rem}
.card-title{font-family:var(--font-display);font-size:.95rem;font-weight:500;
  color:var(--profundo);margin-bottom:1.15rem;display:flex;align-items:center;gap:.6rem}
body.dark .card-title{color:var(--accent-text)}
.card-title::before{content:'';width:3px;height:1.05em;background:var(--marca);
  border-radius:2px;display:inline-block;flex-shrink:0}
.card-title .ct-extra{margin-left:auto;font-size:11.5px;color:var(--muted-2);font-weight:400}

/* ---------------- MÉTRICAS ---------------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1rem;
  margin-bottom:1.2rem}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.1rem 1.3rem;box-shadow:var(--shadow)}
.metric-label{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted-2);margin-bottom:7px}
.metric-value{font-family:var(--font-mono);font-size:1.5rem;font-weight:400;
  letter-spacing:-.01em;color:var(--text)}
.metric-foot{font-size:11.5px;color:var(--muted);margin-top:5px}
.metric.destaque{background:var(--tinta);border-color:var(--tinta)}
/* No escuro `--tinta` quase coincide com `--bg` e o cartão vira um buraco.
   Sobe para `--profundo`. Ver a regra no topo do arquivo. */
body.dark .metric.destaque{background:var(--profundo);border-color:var(--profundo)}
.metric.destaque .metric-label{color:var(--marca)}
.metric.destaque .metric-value,.metric.destaque .metric-foot{color:#F2EFE6}
.metric.madeira{background:var(--destaque-bg);border-color:var(--destaque-borda)}
.metric.madeira .metric-label{color:var(--destaque-fg);opacity:.85}
.metric.madeira .metric-value{color:var(--destaque-fg)}
.metric.madeira .metric-foot{color:var(--destaque-fg);opacity:.75}

/* ---------------- SELOS ---------------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 10px;border-radius:20px;letter-spacing:.03em;white-space:nowrap}
/* O ponto colorido acompanha o texto: identidade nunca é só cor. */
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.badge-ok{background:var(--sucesso-bg);color:var(--sucesso-fg)}
.badge-warn{background:var(--alerta-bg);color:var(--alerta-fg)}
.badge-danger{background:var(--perigo-bg);color:var(--perigo-fg)}
.badge-info{background:rgba(94,127,81,.14);color:var(--profundo)}
body.dark .badge-info{background:rgba(127,160,111,.16);color:var(--accent-text)}
.badge-neutro{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}

/* ---------------- BOTÕES ---------------- */
.btn{font-family:var(--font-body);font-size:13.5px;font-weight:500;padding:9px 18px;
  border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  text-decoration:none;transition:transform .15s,background .15s,box-shadow .2s,border-color .15s}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}
.btn-primary{background:var(--tinta);color:#F2EFE6}
.btn-primary:hover:not(:disabled){background:var(--profundo);transform:translateY(-1px)}
body.dark .btn-primary{background:var(--vivo);color:#0F1712}
body.dark .btn-primary:hover:not(:disabled){background:#93B183}
.btn-marca{background:var(--marca);color:#1E2A1B;font-weight:600}
.btn-marca:hover:not(:disabled){background:var(--marca-hover);transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(162,112,60,.28)}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--border)}
.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--text);border-color:var(--muted-2)}
.btn-danger{background:transparent;color:var(--danger);border-color:rgba(168,68,60,.4)}
.btn-danger:hover:not(:disabled){background:rgba(168,68,60,.08)}
.btn-sm{padding:6px 12px;font-size:12.5px}
.btn-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.2rem}

/* ---------------- FILTROS ---------------- */
.filtros{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:1.1rem}
.filtros input,.filtros select{width:auto;min-width:150px}
.filtros .busca{flex:1;min-width:220px}
.pill-group{display:flex;gap:6px;flex-wrap:wrap}
.pill{background:var(--surface);border:1px solid var(--border);color:var(--muted);
  border-radius:20px;padding:5px 13px;font-size:12.5px;font-family:var(--font-body);
  cursor:pointer;transition:all .15s}
.pill:hover{border-color:var(--muted-2);color:var(--text)}
.pill.on{background:var(--tinta);border-color:var(--tinta);color:#F2EFE6;font-weight:500}
body.dark .pill.on{background:var(--vivo);border-color:var(--vivo);color:#0F1712}

/* ---------------- TABELA ---------------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:var(--tinta);color:rgba(242,239,230,.82);font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;padding:11px 13px;text-align:left;white-space:nowrap}
tbody td{padding:11px 13px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
td.num,th.num{text-align:right;font-family:var(--font-mono);white-space:nowrap}

/* ---------------- GRADE DE PEÇAS ---------------- */
.grid-pecas{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:1.1rem}
.peca{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .2s,border-color .18s}
.peca:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--marca)}
.peca-foto{aspect-ratio:4/3;background:var(--surface-2);display:flex;align-items:center;
  justify-content:center;position:relative;border-bottom:1px solid var(--border);overflow:hidden}
.peca-foto img{width:100%;height:100%;object-fit:cover}
.peca-foto .ico-vazio{opacity:.2;color:var(--profundo)}
.peca-cod{position:absolute;top:9px;left:9px;font-family:var(--font-mono);font-size:10.5px;
  background:var(--overlay);color:#F2EFE6;padding:2px 8px;border-radius:20px;letter-spacing:.04em}
.peca-st{position:absolute;top:9px;right:9px}
.peca-body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.peca-nome{font-size:13.5px;font-weight:500;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.peca-meta{font-size:11.5px;color:var(--muted-2);display:flex;gap:6px;flex-wrap:wrap}
.peca-preco{margin-top:auto;padding-top:.6rem;border-top:1px dashed var(--border);
  display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.peca-preco b{font-family:var(--font-mono);font-size:1.05rem;font-weight:500;color:var(--marca-texto)}
.peca-preco .pp-custo{font-family:var(--font-mono);font-size:11px;color:var(--muted-2)}

/* ---------------- LISTA DE DEFINIÇÕES (ficha) ---------------- */
.dl{display:grid;grid-template-columns:136px 1fr;gap:.55rem .9rem;font-size:13px}
.dl dt{color:var(--muted-2);font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.dl dd{color:var(--text)}
@media(max-width:520px){.dl{grid-template-columns:1fr;gap:.15rem}.dl dd{margin-bottom:.55rem}}

/* ---------------- LINHAS DE CÁLCULO ---------------- */
.calc-linha{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:8px 0;border-bottom:1px dashed var(--border);font-size:13px}
.calc-linha:last-of-type{border-bottom:none}
.calc-linha .cl-lab{color:var(--muted)}
.calc-linha .cl-val{font-family:var(--font-mono);font-weight:500}
.calc-linha.total{border-top:2px solid var(--border);border-bottom:none;margin-top:6px;
  padding-top:11px;font-size:14.5px}
.calc-linha.total .cl-lab{color:var(--text);font-weight:500}
.calc-linha.total .cl-val{font-size:1.15rem;color:var(--marca-texto)}

/* ---------------- ALERTAS ---------------- */
.alert{border-radius:var(--radius-sm);padding:11px 15px;font-size:13px;margin:.85rem 0;
  border:1px solid transparent;display:flex;gap:9px;align-items:flex-start}
.alert svg{flex-shrink:0;margin-top:1px}
.alert-info{background:rgba(94,127,81,.10);border-color:rgba(94,127,81,.3);color:var(--profundo)}
body.dark .alert-info{background:rgba(127,160,111,.12);border-color:rgba(127,160,111,.35);color:var(--accent-text)}
.alert-warning{background:var(--alerta-bg);border-color:var(--destaque-borda);color:var(--alerta-fg)}
.alert-danger{background:var(--perigo-bg);border-color:rgba(168,68,60,.3);color:var(--perigo-fg)}
.alert-success{background:var(--sucesso-bg);border-color:rgba(42,127,94,.3);color:var(--sucesso-fg)}

/* ---------------- ESTADOS ---------------- */
.vazio{text-align:center;padding:2.6rem 1rem;color:var(--muted-2);font-size:13px}
.vazio svg{opacity:.3;margin-bottom:.8rem}

/* Esqueleto de carregamento. Existe para a tela não "pular": um spinner
   centralizado troca de layout quando os dados chegam; o esqueleto ocupa
   desde o início o espaço que o conteúdo vai ocupar. */
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:skel 1.4s ease-in-out infinite;border-radius:6px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-linha{height:12px;margin-bottom:8px}
.skel-peca{height:280px;border-radius:var(--radius)}

/* ---------------- TOAST ---------------- */
#toasts{position:fixed;bottom:20px;right:20px;z-index:500;display:flex;
  flex-direction:column;gap:9px;align-items:flex-end;pointer-events:none}
.toast{background:var(--overlay);color:#F2EFE6;padding:12px 19px;border-radius:var(--radius);
  font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.28);opacity:0;transform:translateY(12px);
  transition:all .25s ease;max-width:340px}
body.dark .toast{border:1px solid var(--border)}
.toast.show{opacity:1;transform:translateY(0)}
.toast-success{border-left:4px solid var(--success)}
.toast-error{border-left:4px solid var(--danger)}
.toast-info{border-left:4px solid var(--marca)}

/* ---------------- AUTENTICAÇÃO ---------------- */
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:2rem 1.2rem;position:relative;overflow:hidden}
/* Malha de pontos + brilho: a assinatura visual da marca na entrada.
   Fica atrás de tudo e não recebe evento de ponteiro. */
.auth-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(53,71,47,.11) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 42%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 55% at 50% 42%,#000,transparent 78%)}
body.dark .auth-bg{background-image:radial-gradient(rgba(147,177,131,.14) 1px,transparent 1px)}
.auth-glow{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);
  width:min(620px,88vw);height:min(620px,88vw);z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(53,71,47,.07),transparent 66%)}
body.dark .auth-glow{background:radial-gradient(circle,rgba(127,160,111,.14),transparent 66%)}

.auth-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:2.3rem 2.1rem;width:100%;max-width:396px;box-shadow:var(--shadow-hover);
  position:relative;z-index:2}
.auth-logo{font-family:var(--font-display);font-size:1.75rem;font-weight:300;text-align:center;
  color:var(--accent-text);letter-spacing:-.01em}
body.dark .auth-logo{color:#EFEAE0}
.auth-logo span{color:var(--marca);font-weight:400}
.auth-sub{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-2);
  letter-spacing:.2em;text-transform:uppercase;text-align:center;margin-top:.6rem}
.auth-div{width:40px;height:2px;background:var(--marca);margin:1.4rem auto 1.6rem}
.auth-field{margin-bottom:.95rem}
.auth-btn{width:100%;padding:12px;background:var(--tinta);color:#F2EFE6;border:none;
  border-radius:var(--radius-sm);font-family:var(--font-body);font-size:14px;font-weight:500;
  cursor:pointer;margin-top:.5rem;transition:all .18s}
.auth-btn:hover:not(:disabled){background:var(--profundo);transform:translateY(-1px)}
.auth-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
body.dark .auth-btn{background:var(--vivo);color:#0F1712}
.auth-erro{color:var(--danger);font-size:12.5px;text-align:center;margin-top:.8rem;min-height:1.2em}
.auth-alt{text-align:center;font-size:12.5px;color:var(--muted);margin-top:1.1rem}
.auth-alt a{color:var(--marca-texto);text-decoration:none;font-weight:500;cursor:pointer}
.auth-alt a:hover{text-decoration:underline}
.auth-foot{text-align:center;font-size:11px;color:var(--muted-2);margin-top:1.6rem;letter-spacing:.03em}

/* ---------------- HUB ---------------- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1.1rem}
.hub-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.4rem 1.5rem;box-shadow:var(--shadow);cursor:pointer;text-decoration:none;color:inherit;
  display:block;transition:transform .18s,box-shadow .2s,border-color .18s}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--marca)}
.hub-card.indisponivel{opacity:.55;cursor:default;pointer-events:none}
.hub-ico{color:var(--marca);margin-bottom:.85rem}
.hub-nome{font-family:var(--font-display);font-size:1.05rem;font-weight:500;
  color:var(--accent-text);margin-bottom:.4rem}
.hub-desc{font-size:12.5px;color:var(--muted);line-height:1.55}

/* ---------------- GRÁFICOS ---------------- */
.barras{display:flex;flex-direction:column;gap:.7rem}
.barra-lin{display:grid;grid-template-columns:104px 1fr 46px;align-items:center;gap:.7rem;font-size:12.5px}
.barra-trk{height:9px;background:var(--surface-2);border-radius:20px;overflow:hidden;
  border:1px solid var(--border)}
.barra-fil{height:100%;background:var(--profundo);border-radius:20px}
body.dark .barra-fil{background:var(--vivo)}
.barra-val{font-family:var(--font-mono);font-size:12px;text-align:right;color:var(--muted)}
.aging{display:flex;gap:.45rem;align-items:stretch;height:150px;padding-top:.4rem}
.aging-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.aging-bar{width:100%;border-radius:4px 4px 0 0;flex:0 0 auto;min-height:4px}
.aging-lab{font-size:10.5px;color:var(--muted-2);text-align:center;line-height:1.25}

/* ---------------- AVISO DE CONEXÃO ---------------- */
.aviso-conexao{display:none;align-items:flex-start;gap:9px;margin:0 0 1rem;padding:12px 14px;
  border:1px solid rgba(168,68,60,.4);border-radius:var(--radius-sm);
  background:rgba(168,68,60,.08);color:var(--perigo-fg);font-size:12.5px;line-height:1.5}
.aviso-conexao.show{display:flex}