:root{
  /* Base neutra — referência Kronos: fundo branco/cinza muito claro, texto quase-preto,
     texto secundário cinza médio (ver spec-design-kronos.md). */
  --bg:#f8f9fa;
  --surface:#ffffff;
  --surface-2:#f1f3f5;
  --text:#1f2937;
  --text-muted:#6b7280;
  /* --accent continua laranja — é a cor da marca GERAR (logo), não um status; usada em
     botões primários e estados ativos de navegação. Um degrau mais escuro que o laranja
     "cru" do logo (mesma família de matiz) pra texto branco em cima dele — do jeito que
     era antes (#c96a1a) — não fechava 4.5:1 de contraste com branco (WCAG AA), e é
     exatamente esse o par mais usado no sistema (todo botão primário). */
  --accent:#a8530f;
  --accent-ink:#7a3f0e;
  /* Paleta semântica por status (Kronos): verde=concluído, azul=programado/em fluxo,
     âmbar=atenção/reprogramar, cinza=inativo, vermelho=bloqueado/problema. Badge = fundo
     suave (sufixo 18 ≈ 10% opacidade) + texto forte da mesma família — nunca cor chapada.
     --ok/--warn/--bad um degrau mais escuros que a versão anterior: os badges/pills usam
     essas cores como texto em fonte pequena (.72–.8rem), onde o tom anterior não fechava
     4.5:1 de contraste (ex.: --warn antigo tinha só 3.19:1 no branco). --warn também
     migrou de âmbar-alaranjado pra um tom mais amarelo-dourado, criando separação clara
     de matiz com --accent (antes os dois eram variações de laranja quase idênticas, dava
     pra confundir "ativo/marca" com "atenção" numa olhada rápida). */
  --accent-2:#2563eb;
  --accent-2-bg:#2563eb18;
  --border:#e5e7eb;
  --ok:#15803d;
  --ok-bg:#15803d18;
  --warn:#a16207;
  --warn-bg:#a1620718;
  --bad:#b91c1c;
  --bad-bg:#b91c1c18;
  --neutral-bg:#6b728018;
  --radius:4px;
  --sans:"Inter","Segoe UI Semibold","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#13161b; --surface:#1a1e25; --surface-2:#20252d; --text:#e9e7df;
    --text-muted:#9aa2ad; --accent:#e2933f; --accent-ink:#ffd9ac;
    --accent-2:#60a5fa; --accent-2-bg:#60a5fa22;
    --border:#2a303a; --ok:#4ade80; --ok-bg:#4ade8022;
    /* --warn também deslocado pro amarelo no escuro, mesma razão do claro: separar de
       --accent (que no escuro já tinha uma folga um pouco maior, mas ainda vale igualar
       a família de matiz entre os dois temas). */
    --warn:#facc15; --warn-bg:#facc1522;
    --bad:#f87171; --bad-bg:#f8717122; --neutral-bg:#9aa2ad22;
  }
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:15px;
  line-height:1.5;
}
a{color:var(--accent-2);text-decoration:none;}
a:hover{text-decoration:underline;}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 24px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10;
}
.brand{
  display:flex;align-items:center;
  /* fundo branco fixo: a logo tem texto azul-marinho pensado pra ficar sobre branco —
     sem isso, some no modo escuro (--surface fica quase preto). */
  background:#ffffff;
  padding:6px 10px;
  border-radius:var(--radius);
}
.brand img{height:28px;width:auto;display:block;}
nav.mainnav{display:flex;gap:4px;flex-wrap:wrap;}
nav.mainnav a{
  font-family:var(--sans);
  font-size:.82rem;
  padding:6px 12px;
  border-radius:var(--radius);
  color:var(--text-muted);
}
nav.mainnav a.active, nav.mainnav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none;}

.navdrop{position:relative;}
.navdrop-toggle{
  font-family:var(--sans);
  font-size:.82rem;
  padding:6px 12px;
  border-radius:var(--radius);
  color:var(--text-muted);
  background:none;
  border:none;
  cursor:pointer;
}
.navdrop-toggle:hover, .navdrop-toggle.active{background:var(--surface-2);color:var(--text);}
.navdrop-menu{
  display:none;
  position:absolute;
  top:100%;left:0;
  margin-top:4px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  min-width:170px;
  padding:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  z-index:30;
}
.navdrop.aberto .navdrop-menu{display:block;}
.navdrop-menu a{
  display:block;
  font-family:var(--sans);
  font-size:.82rem;
  padding:8px 10px;
  border-radius:calc(var(--radius) - 2px);
  color:var(--text);
}
.navdrop-menu a:hover, .navdrop-menu a.active{background:var(--surface-2);text-decoration:none;}
.userbox{font-size:.78rem;color:var(--text-muted);display:flex;align-items:center;gap:10px;}
.userbox b{color:var(--text);}
.userbox a{color:var(--text-muted);}

.wrap{max-width:none;margin:0;padding:24px 24px 60px;}
.wrap.narrow{max-width:860px;margin:0 auto;}

h1{font-family:var(--sans);font-size:1.4rem;margin:0 0 4px;}
h2{font-family:var(--sans);font-size:1.05rem;margin:0 0 12px;color:var(--accent-ink);}
p.sub{color:var(--text-muted);margin:0 0 20px;font-size:.92rem;}

.flash{padding:10px 16px;border-radius:var(--radius);margin-bottom:16px;font-size:.88rem;}
.flash.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok);}
.flash.erro{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad);}
.flash.aviso{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn);}

.icone-prazo{cursor:default;font-size:1.05rem;margin-left:4px;}

.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 22px;
  margin-bottom:20px;
}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:16px;}
.filters-form{margin-bottom:16px;}
.filters-form .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-bottom:0;}
.filters-form .filters .field{flex:0 0 auto;}
.filters-form .filters .field input, .filters-form .filters .field select{width:118px;}
.filters-form .filters .field.busca input{width:180px;}
@media (max-width:900px){
  .filters-form .filters{flex-wrap:wrap;overflow-x:visible;}
}
.field{display:flex;flex-direction:column;gap:4px;}
/* Botões de ação (Filtrar/Limpar) como mais um "campo" dentro da própria barra de
   filtros — ficam na mesma linha dos campos (alinhados pelo align-items:end do
   .filters), em vez de formar uma segunda linha separada e desconectada visualmente. */
.filters-botoes{flex-direction:row;gap:8px;}
.field label{font-family:var(--sans);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);}

/* Toggle switch — opções binárias no lugar de checkbox cru (ex.: "Só com estoque"). O
   <input type=checkbox> real fica visualmente escondido mas continua funcional (teclado,
   name/value no submit) — só o :checked que muda a aparência da trilha/bolinha. */
.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.85rem;}
.toggle input{position:absolute;opacity:0;width:1px;height:1px;}
.toggle-trilho{
  position:relative;width:36px;height:20px;border-radius:999px;background:var(--neutral-bg);
  border:1px solid var(--border);transition:background .15s;flex-shrink:0;
}
.toggle-trilho::after{
  content:"";position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s;
}
.toggle input:checked + .toggle-trilho{background:var(--ok);border-color:var(--ok);}
.toggle input:checked + .toggle-trilho::after{transform:translateX(16px);}
.toggle input:focus-visible + .toggle-trilho{outline:2px solid var(--accent-2);outline-offset:2px;}

/* Filtro com chip — cada valor selecionado num <select multiple> vira uma pílula
   removível; o <select> original é escondido mas continua sendo a fonte da verdade
   (JS em cada tela liga um no outro), então o form submete normal. */
.chipfield{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:34px;
  padding:5px 8px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);}
.chipfield.vazio{color:var(--text-muted);font-size:.82rem;}
.chip{
  display:inline-flex;align-items:center;gap:5px;background:var(--accent-2-bg);color:var(--accent-2);
  font-family:var(--sans);font-size:.78rem;font-weight:600;padding:3px 6px 3px 10px;border-radius:999px;
  white-space:nowrap;
}
.chip button{
  all:unset;cursor:pointer;line-height:1;font-size:.9rem;padding:0 3px;border-radius:50%;color:inherit;
}
.chip button:hover{background:var(--accent-2);color:#fff;}
input,select,textarea{
  font-family:var(--body);
  font-size:.9rem;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text);
}
textarea{resize:vertical;min-height:60px;}
button, .btn{
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:600;
  padding:8px 16px;
  border-radius:var(--radius);
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}
button:hover, .btn:hover{opacity:.9;text-decoration:none;}
button.secondary, .btn.secondary{background:transparent;color:var(--text);border-color:var(--border);}
button.small{padding:4px 10px;font-size:.78rem;}

.formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.formgrid .full{grid-column:1/-1;}
@media (max-width:800px){.formgrid{grid-template-columns:1fr;}}

.scroll-espelho{overflow-x:auto;overflow-y:hidden;height:16px;margin-bottom:6px;display:none;}
.scroll-espelho > div{height:1px;}

.twrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);}
table{border-collapse:collapse;width:100%;font-size:.86rem;table-layout:auto;}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;white-space:normal;word-break:break-word;}
th{font-family:var(--sans);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-2);white-space:nowrap;}
tbody tr:hover{background:var(--surface-2);}
td.wrap-cell, th.wrap-cell{white-space:normal;min-width:140px;}
td.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
td.nowrap-cell{white-space:nowrap;}
td.trunc-cell{white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis;}

/* Indicador lateral de status — barra colada na borda esquerda da linha, mesma família
   de cor do badge daquele status. Vai no primeiro <td> (não no <tr>) porque border-left
   em <tr> não é confiável com border-collapse:collapse entre navegadores. */
tr.linha-status td:first-child{border-left:3px solid transparent;}
tr.linha-status-Novo td:first-child, tr.linha-status-Em-separação td:first-child,
tr.linha-status-Aguardando-Retirada td:first-child, tr.linha-status-Verba-Alocada td:first-child{
  border-left-color:var(--accent-2);
}
tr.linha-status-Atendido td:first-child, tr.linha-status-Recebido td:first-child,
tr.linha-status-Concluído td:first-child, tr.linha-status-Material-Suprido td:first-child{border-left-color:var(--ok);}
tr.linha-status-Pendente-de-verba td:first-child, tr.linha-status-Estornado td:first-child,
tr.linha-status-Atendido-Parcial td:first-child{border-left-color:var(--warn);}
tr.linha-status-Cancelado td:first-child, tr.linha-status-Migrado td:first-child{border-left-color:var(--text-muted);}
tr.linha-status-Material-em-falta td:first-child, tr.linha-status-Corrigir-código td:first-child,
tr.linha-status-Aguardando-Aprovação td:first-child{
  border-left-color:var(--bad);
}
.linha-material{cursor:pointer;}
.linha-detalhe-material td{background:var(--surface-2);}
.detalhe-projetos{padding:6px 4px;}
.tabela-detalhe-projetos{font-size:.8rem;background:var(--surface);}
.tabela-detalhe-projetos th,.tabela-detalhe-projetos td{padding:5px 8px;}

.pill{
  display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:600;
  padding:2px 9px;border-radius:999px;white-space:nowrap;
}
/* Mapeamento semântico por "temperatura" do status (referência Kronos):
   azul = em fluxo normal, verde = concluído, âmbar = precisa atenção/foi revertido,
   cinza = inativo/arquivado, vermelho = bloqueado/problema. */
.pill-Novo, .pill-Em-separação, .pill-Aguardando-Retirada, .pill-Verba-Alocada{
  background:var(--accent-2-bg);color:var(--accent-2);
}
.pill-Atendido, .pill-Recebido, .pill-Concluído, .pill-Material-Suprido{background:var(--ok-bg);color:var(--ok);}
.pill-Pendente-de-verba, .pill-Estornado, .pill-Atendido-Parcial{background:var(--warn-bg);color:var(--warn);}
.pill-Cancelado, .pill-Migrado{background:var(--neutral-bg);color:var(--text-muted);}
.pill-Material-em-falta, .pill-Corrigir-código, .pill-Aguardando-Aprovação, .pill-Avariado{
  background:var(--bad-bg);color:var(--bad);
}
.pill-Devolução{background:var(--accent-2-bg);color:var(--accent-2);}
.pill-Conferência{background:var(--warn-bg);color:var(--warn);}
.pill-Devolvido{background:var(--ok-bg);color:var(--ok);}

/* "C" ao lado do projeto na Fila/Pendências: a obra já consta como CONCLUÍDO na
   carteira Neoex, mas ainda tem solicitação em aberto citando ela — sinal de atenção,
   não bloqueio (por isso --warn, não --bad). */
.badge-projeto-concluido{
  display:inline-block;font-family:var(--mono);font-size:.68rem;font-weight:700;
  color:var(--warn);border:1px solid var(--warn);border-radius:3px;padding:0 4px;
  margin-left:4px;line-height:1.4;vertical-align:middle;
}
.criterio-suf{color:var(--ok);font-size:.8rem;}
.criterio-insuf{color:var(--bad);font-size:.8rem;}
.criterio-inexist{color:var(--warn);font-size:.8rem;}
.criterio-zerado{color:var(--bad);font-weight:700;font-size:.8rem;}

.cards{display:flex;flex-wrap:nowrap;gap:12px;margin-bottom:20px;overflow-x:auto;}
.cards .stat{flex:1 1 0;min-width:110px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;}
.stat .n{font-family:var(--mono);font-size:1.9rem;font-weight:700;line-height:1.15;}
.stat .label{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}
a.stat{display:block;text-decoration:none;color:inherit;transition:box-shadow .15s;}
a.stat:hover{box-shadow:0 2px 10px rgba(0,0,0,.1);text-decoration:none;}

/* Barra de progresso fina (reutilizável) — opt-in por card, só onde há um percentual
   real (ex.: cobertura de estoque). Trilho cinza claro, preenchimento sólido. */
.stat-progress{margin-top:8px;height:4px;border-radius:999px;background:var(--neutral-bg);overflow:hidden;}
.stat-progress-fill{height:100%;background:var(--ok);border-radius:999px;}

.wrap.login{padding:0;margin:0;max-width:none;}

/* Colunas lado a lado (não uma sobre a outra) — garante por construção que o formulário
   nunca fica em cima da foto, não depende de cálculo de corte de imagem. */
.loginhero{display:flex;min-height:560px;}
.loginhero-formside{
  flex:0 0 380px;
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;
  background:var(--surface-2);
  border-left:1px solid var(--border);
}
.loginhero-card{width:100%;max-width:320px;}
.loginhero-imgside{flex:1 1 auto;position:relative;overflow:hidden;min-width:0;background:#101826;}
.loginhero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;}

@media (max-width:760px){
  .loginhero{display:block;min-height:0;}
  .loginhero-imgside{height:180px;}
  .loginhero-formside{flex-basis:auto;border-left:none;padding:24px 20px;}
  .loginhero-card{max-width:none;}
}

footer.appfoot{text-align:center;color:var(--text-muted);font-size:.72rem;padding:30px 0;font-family:var(--mono);}

.tabs{display:flex;gap:8px;margin-bottom:16px;}

.massa-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding:12px 16px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
}
.massa-bar #massa-contagem{font-family:var(--sans);font-size:.78rem;color:var(--text-muted);white-space:nowrap;}
.massa-bar input, .massa-bar select{font-size:.85rem;}
.massa-bar button:disabled{opacity:.45;cursor:not-allowed;}

.paginacao{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:.82rem;}
.paginacao-nav{display:flex;gap:8px;}

.detail-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;}
@media (max-width:900px){.detail-grid{grid-template-columns:1fr;}}

/* Dashboard de Prazos do almoxarifado — grid de painéis com gráfico, 2 colunas em telas
   largas, 1 em estreitas. Canvas do Chart.js precisa de altura fixa no pai (senão cresce
   sem parar), por isso .chart-box em vez de deixar o canvas livre. */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;}
@media (max-width:900px){.dash-grid{grid-template-columns:1fr;}}
.chart-box{position:relative;height:260px;}
.chart-box.chart-tall{height:340px;}
.kpi-pct{font-family:var(--mono);font-size:2.1rem;font-weight:700;line-height:1.1;}
.kpi-sub{font-family:var(--sans);font-size:.72rem;color:var(--text-muted);margin-top:2px;}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.88rem;margin:0;}
dl.kv dt{color:var(--text-muted);}
dl.kv dd{margin:0;}

.sino-estoque{display:inline-flex;align-items:center;gap:4px;cursor:default;}
a.sino-estoque{cursor:pointer;text-decoration:none;}
.sino-verde{color:var(--ok);}
.sino-amarelo{color:var(--warn);}
.sino-vermelho{color:var(--bad);}
.badge-contagem{font-family:var(--sans);font-size:.72rem;font-weight:700;}
.spinner-inline{display:inline-block;width:12px;height:12px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;
  vertical-align:-2px;margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg);}}
/* Vibra rapidinho a cada 4s, em vez de continuamente pra sempre — mais leve pro
   navegador (menos tempo de compositor ocupado) e menos cansativo visualmente.
   will-change avisa o navegador com antecedência pra compositar numa camada própria. */
.sino-vibra{animation:sino-shake 4s ease-in-out infinite;transform-origin:top center;will-change:transform;}
@keyframes sino-shake{
  0%, 16%, 100%{transform:rotate(0deg);}
  2%{transform:rotate(14deg);}
  4%{transform:rotate(-12deg);}
  6%{transform:rotate(10deg);}
  8%{transform:rotate(-8deg);}
  10%{transform:rotate(6deg);}
  12%{transform:rotate(-4deg);}
  14%{transform:rotate(2deg);}
}

/* Alerta bloqueante de pendências antigas (>3 dias sem tratativa) — ver
   pendencias_alerta.js e app.py:pendencias_antigas_alerta(). */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;}
.modal-overlay[hidden]{display:none;}
.modal-card{max-width:440px;width:100%;}
.modal-card h2{margin-top:0;color:var(--bad);}
.modal-acoes{display:flex;gap:10px;margin-top:18px;justify-content:flex-end;}
/* Novidades é aviso, não alerta — título na cor normal de heading (--accent-ink), não
   vermelho, e um pouco mais larga pra caber a lista sem quebrar demais. */
.novidades-card{max-width:520px;}
.novidades-card h2{color:var(--accent-ink);}
.novidades-lista{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;}
.novidades-lista li{line-height:1.45;}