:root{
  /* paleta original preservada (nomes usados centenas de vezes no app.js) —
     só os VALORES foram modernizados, pra atualizar botões/links em todo o
     sistema de uma vez, sem precisar tocar em cada tela individualmente */
  --azul-esc:#101828;
  --azul:#4f46e5;
  --azul-cl:#6366f1;
  --azul-bg:#eef2ff;
  --verde:#1e8a5f;
  --verde-bg:#e6f6ef;
  --vermelho:#c0392b;
  --vermelho-bg:#fbeaea;
  --amarelo:#b8860b;
  --amarelo-bg:#fdf3dc;
  --cinza-bg:#f5f6fa;
  --cinza-borda:#e5e7eb;
  --texto:#1a1f2e;
  --texto-suave:#6b7280;
  /* tokens novos do design system (sidebar, sombra, raio de borda) */
  --sidebar-bg:#0d1424;
  --sidebar-texto:#a8b3cf;
  --sidebar-texto-ativo:#ffffff;
  --sombra-card:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --sombra-elevada:0 4px 14px rgba(16,24,40,.10);
  --raio:14px;
  --raio-sm:10px;
  --superficie:#ffffff;
}
body.tema-escuro{
  --azul-esc:#e5e7eb;
  --azul-bg:#1e2340;
  --verde-bg:#0f2e22;
  --vermelho-bg:#3a1a17;
  --amarelo-bg:#3a2e0f;
  --cinza-bg:#0b1120;
  --cinza-borda:#2a3348;
  --texto:#e5e7eb;
  --texto-suave:#98a2b8;
  --superficie:#161d2e;
  --sombra-card:0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.25);
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Inter","Segoe UI", Arial, Helvetica, sans-serif;
  background:var(--cinza-bg);
  color:var(--texto);
}

/* ---------- Shell: sidebar + topbar ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:236px; flex-shrink:0; background:var(--sidebar-bg); color:var(--sidebar-texto);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden;
  transition:width .18s ease, transform .18s ease; z-index:100;
  scrollbar-width:thin; scrollbar-color:#3a4664 transparent;
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-track{ background:transparent; }
.sidebar::-webkit-scrollbar-thumb{ background:#3a4664; border-radius:999px; }
.sidebar::-webkit-scrollbar-thumb:hover{ background:#4a5578; }
.sidebar.recolhida{ width:76px; }
.sidebar-logo{
  display:flex; align-items:center; gap:10px; padding:20px 18px; font-weight:700; color:#fff;
  font-size:14.5px; letter-spacing:.02em; white-space:nowrap; overflow:hidden;
}
.sidebar-logo svg{ flex-shrink:0; }
.sidebar.recolhida .sidebar-logo span, .sidebar.recolhida .sidebar-link span,
.sidebar.recolhida .sidebar-user-info, .sidebar.recolhida .sidebar-secao{ display:none; }

.sidebar-nav{ flex:1; padding:6px 12px; display:flex; flex-direction:column; gap:2px; }
.sidebar-secao{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:#5b6788; padding:14px 12px 6px; white-space:nowrap; overflow:hidden; }
.sidebar-link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--raio-sm);
  color:var(--sidebar-texto); text-decoration:none; font-size:13.5px; white-space:nowrap; overflow:hidden;
  transition:background-color .12s ease, color .12s ease;
}
.sidebar-link svg{ flex-shrink:0; width:18px; height:18px; }
.sidebar-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-link.active{ background:linear-gradient(135deg,#4f46e5,#6366f1); color:#fff; font-weight:600; box-shadow:0 2px 8px rgba(79,70,229,.35); }
.sidebar-link.somente-admin{ display:flex; }

.sidebar-user{
  padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px;
}
.sidebar.recolhida .sidebar-user{ flex-direction:column; gap:8px; padding:14px 8px; }
.sidebar-user-avatar{
  width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#4f46e5,#6366f1);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;
}
.sidebar-user-info{ flex:1; min-width:0; overflow:hidden; }
.sidebar-user-info .nome{ font-size:12.5px; color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-info .cargo{ font-size:11px; color:#8b96b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-info .link-minha-conta{ font-size:11px; color:#9fb0ff; text-decoration:none; }
.sidebar-user-info .link-minha-conta:hover{ text-decoration:underline; }
#btn-toggle-sidebar{
  background:transparent; border:1px solid rgba(255,255,255,.15); color:#a8b3cf; width:24px; height:24px;
  border-radius:6px; cursor:pointer; flex-shrink:0; font-size:12px; display:flex; align-items:center; justify-content:center;
}
#btn-toggle-sidebar:hover{ background:rgba(255,255,255,.08); color:#fff; }

.main-area{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  background:var(--superficie); border-bottom:1px solid var(--cinza-borda); padding:14px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; position:sticky; top:0; z-index:90;
}
.topbar-greeting h1{ margin:0; font-size:19px; font-weight:700; color:var(--texto); }
.topbar-greeting p{ margin:2px 0 0; font-size:12.5px; color:var(--texto-suave); }
.topbar-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.topbar-search{
  display:flex; align-items:center; gap:8px; background:var(--cinza-bg); border:1px solid var(--cinza-borda);
  border-radius:999px; padding:8px 16px; font-size:13px; color:var(--texto-suave); min-width:200px;
}
.topbar-search input{ border:none; background:transparent; outline:none; font-size:13px; font-family:inherit; width:100%; color:var(--texto); }
.topbar-search input:disabled{ color:var(--texto-suave); cursor:not-allowed; }
.topbar-icon-btn{
  position:relative; width:38px; height:38px; border-radius:50%; border:1px solid var(--cinza-borda); background:var(--superficie);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--texto-suave); flex-shrink:0;
  transition:background-color .12s ease, transform .1s ease;
}
.topbar-icon-btn:active{ transform:scale(.93); }
.topbar-icon-btn:hover{ background:var(--cinza-bg); }
.topbar-icon-btn .contagem{
  position:absolute; top:-4px; right:-4px; background:var(--vermelho); color:#fff; font-size:10px; font-weight:700;
  border-radius:999px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.btn-primario-topbar{
  background:linear-gradient(135deg,#4f46e5,#6366f1); color:#fff; border:none; border-radius:999px; padding:10px 20px;
  font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 2px 8px rgba(79,70,229,.3); text-decoration:none; white-space:nowrap;
}
.btn-primario-topbar:hover{ filter:brightness(1.08); }
.badge-alerta{ background:var(--vermelho) !important; border-color:var(--vermelho) !important; color:#fff; font-weight:700; }
.somente-admin{ display:none; }

@media (max-width:900px){
  .sidebar{ position:fixed; left:0; transform:translateX(-100%); box-shadow:var(--sombra-elevada); }
  .sidebar.aberta-mobile{ transform:translateX(0); }
  .topbar-greeting p{ display:none; }
  .topbar-search{ display:none; }
  #btn-abrir-menu-mobile{ display:flex !important; }
}
.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(15,20,35,.45); z-index:99; }
.sidebar-overlay.visivel{ display:block; }


main{ padding:22px 26px 40px; max-width:1300px; margin:0 auto; width:100%; }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:22px; }
.card{ background:var(--superficie); border:1px solid var(--cinza-borda); border-radius:var(--raio); padding:18px 20px; box-shadow:var(--sombra-card); transition:box-shadow .15s ease, transform .15s ease; min-width:0; }
.card .value{ overflow-wrap:break-word; }
.card:hover{ box-shadow:var(--sombra-elevada); transform:translateY(-1px); }
.card-com-icone{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card-com-icone > div:first-child{ min-width:0; }
.card-icone{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.card-icone svg{ width:20px; height:20px; }
.card .label{ font-size:11.5px; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.card .value{ font-size:25px; font-weight:700; color:var(--texto); margin-top:6px; }
.card .sub{ font-size:12px; color:var(--texto-suave); margin-top:3px; }

h2.section-title{ font-size:16.5px; color:var(--texto); font-weight:700; margin:26px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--cinza-borda); }
.panel{ background:var(--superficie); border:1px solid var(--cinza-borda); border-radius:var(--raio); padding:20px; margin-bottom:18px; box-shadow:var(--sombra-card); }

.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.toolbar input[type=text], .toolbar select, select, input[type=text], input[type=number], input[type=date], input[type=password], textarea{
  border:1px solid var(--cinza-borda); border-radius:6px; padding:8px 10px; font-size:13.5px; font-family:inherit;
  background:var(--superficie); color:var(--texto);
}
.toolbar select, select{ min-width:210px; max-width:100%; }
label{ font-size:12.5px; color:var(--texto-suave); display:block; margin-bottom:4px; font-weight:600; }
.field{ margin-bottom:12px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.grid-2 > *, .grid-3 > *{ min-width:0; }
@media (max-width:720px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

table{ width:100%; border-collapse:collapse; font-size:13px; display:block; overflow-x:auto; }
table th{ background:var(--azul-bg); color:var(--azul-esc); text-align:left; padding:9px 10px; border-bottom:2px solid var(--cinza-borda); white-space:nowrap; }
table td{ padding:8px 10px; border-bottom:1px solid var(--cinza-borda); vertical-align:top; }
table tr:hover td{ background:var(--cinza-bg); }
.seta-ordem{ font-size:9px; color:var(--azul); }
@media print{ [data-pagina-oculta="1"]{ display:table-row !important; } }
.abas-detalhe{ display:flex; gap:4px; margin:18px 0 -1px; border-bottom:2px solid var(--cinza-borda); flex-wrap:wrap; }
.aba-btn{ background:transparent; border:none; padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--texto-suave); cursor:pointer; font-family:inherit; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .12s ease, border-color .12s ease; }
.aba-btn:hover{ color:var(--azul); }
.aba-btn.ativa{ color:var(--azul); border-bottom-color:var(--azul); }
.aba-conteudo{ padding-top:6px; }
@media print{ .aba-conteudo{ display:block !important; } .abas-detalhe{ display:none !important; } }
.num{ text-align:right; font-variant-numeric:tabular-nums; }
.center{ text-align:center; }

.btn{ background:var(--azul); color:#fff; border:none; border-radius:var(--raio-sm); padding:9px 16px; font-size:13.5px; cursor:pointer; font-weight:600; font-family:inherit; text-decoration:none; display:inline-block; transition:background-color .12s ease, transform .1s ease, box-shadow .12s ease; }
.btn:active{ transform:scale(.97); }
.btn:hover{ background:var(--azul-cl); }
.btn.secondary{ background:var(--superficie); color:var(--azul); border:1px solid var(--cinza-borda); }
.btn.secondary:hover{ background:var(--azul-bg); border-color:var(--azul); }
.btn.danger{ background:var(--superficie); color:var(--vermelho); border:1px solid var(--vermelho); padding:5px 10px; font-size:12px; }
.btn.danger:hover{ background:var(--vermelho-bg); }
.btn.small{ padding:5px 10px; font-size:12px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.badge-cota{ font-size:10.5px; padding:2px 7px; border-radius:10px; font-weight:600; }
.badge-principal{ background:var(--azul-bg); color:var(--azul); }
.badge-reservada{ background:var(--amarelo-bg); color:var(--amarelo); }
.badge-unica{ background:var(--verde-bg); color:var(--verde); }

.saldo-ok{ color:var(--verde); font-weight:700; }
.saldo-baixo{ color:var(--amarelo); font-weight:700; }
.saldo-zero{ color:var(--vermelho); font-weight:700; }

.status-pill{ font-size:11px; padding:3px 9px; border-radius:12px; font-weight:700; display:inline-block; }
.status-emitida{ background:var(--verde-bg); color:var(--verde); }
.status-pendente{ background:var(--amarelo-bg); color:var(--amarelo); }
.status-parcial{ background:#e0eefc; color:#1a6fc4; }
.status-atrasada{ background:var(--vermelho-bg); color:var(--vermelho); }
.status-estornada{ background:var(--cinza-bg); color:var(--texto-suave); }
tr.linha-atrasada td{ background:var(--vermelho-bg); }
tr.linha-parcial td{ background:#e0eefc22; }

.alerta-atraso{ background:var(--vermelho-bg); border:1px solid #f1c7c2; border-radius:10px; padding:14px 18px; margin-bottom:18px; color:var(--vermelho); font-size:13.5px; }
.alerta-atraso b{ font-size:15px; }

.dropzone{ border:2px dashed var(--cinza-borda); border-radius:10px; padding:32px; text-align:center; color:var(--texto-suave); cursor:pointer; }
.dropzone.arrastando{ border-color:var(--azul); background:var(--azul-bg); }
.resumo-importacao{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:16px 0; }
.resumo-importacao .card{ text-align:center; }

.msg{ padding:10px 14px; border-radius:6px; font-size:13.5px; margin-bottom:14px; }
.msg.ok{ background:var(--verde-bg); color:var(--verde); border:1px solid #bfe6d4; }
.msg.err{ background:var(--vermelho-bg); color:var(--vermelho); border:1px solid #f1c7c2; }
.msg.warn{ background:var(--amarelo-bg); color:var(--amarelo); border:1px solid #f0dca0; }

.desc-box{ font-size:12.5px; color:var(--texto-suave); background:var(--cinza-bg); border-radius:6px; padding:10px 12px; max-height:160px; overflow:auto; line-height:1.5; }

.checklist-item{ display:flex; align-items:center; gap:10px; padding:8px 6px; border-bottom:1px solid var(--cinza-borda); }
.checklist-item:last-child{ border-bottom:none; }
.checklist-item .qty-input{ width:90px; }
.spinner-carregando{
  width:34px; height:34px; border:3px solid var(--cinza-borda); border-top-color:var(--azul);
  border-radius:50%; margin:0 auto 14px; animation:girar .7s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }
.tela-carregando{ text-align:center; padding:80px 20px; color:var(--texto-suave); font-size:13px; }
.footer-note{ text-align:center; color:var(--texto-suave); font-size:11.5px; margin-top:34px; padding:14px 26px; border-top:1px solid var(--cinza-borda); }

/* ---------- IMPRESSÃO / PDF da Ordem de Fornecimento ---------- */
.only-print{ display:none; }
@media print{
  .sidebar, .topbar, .no-print{ display:none !important; }
  .app-shell{ display:block; }
  main{ padding:0; max-width:none; }
  body{ background:#fff; }
  .only-print{ display:block !important; }
  table{ font-size:11px; }
}
.of-doc{ font-size:12.5px; line-height:1.5; font-family:Arial, sans-serif; color:#000; background:#fff; padding:0 14mm 14mm; max-width:900px; margin:0 auto; }
.of-timbrado-header{ display:block; width:100%; height:auto; margin:0 0 14px; }
.of-timbrado-footer{ display:block; width:100%; height:auto; margin:22px 0 0; }
.of-doc h3{ text-align:center; font-size:14px; margin:4px 0 14px; }
.of-doc .of-num{ text-align:right; font-weight:700; margin-bottom:6px; }
/* display:table (em vez do display:block herdado da regra genérica "table" acima, pensada
   pras grades de tela com rolagem horizontal) — necessário pro navegador paginar a tabela
   corretamente na impressão e mostrar o TOTAL (tfoot) uma única vez, no final, em vez de
   duplicado/deslocado no meio do documento quando a tabela quebra de página. Corrigido em
   16/09/2026. */
.of-doc table{ display:table; overflow:visible; margin:10px 0; }
.of-doc table th, .of-doc table td{ border:1px solid #999; padding:6px 7px; font-size:11.5px; }
.of-doc .box{ border:1px solid #999; padding:8px 10px; margin-bottom:10px; }
.of-doc .sec-title{ background:#e9edf1; font-weight:700; padding:5px 8px; margin:14px 0 6px; }
.of-doc .assinatura{ margin-top:46px; text-align:center; }
.of-doc .assinatura .linha{ width:280px; margin:0 auto; border-top:1px solid #000; padding-top:4px; }

/* ---------- Acessibilidade: foco de teclado visível e consistente ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2.5px solid var(--azul-cl);
  outline-offset: 2px;
  border-radius: 4px;
}
.sidebar :focus-visible{
  outline: 2.5px solid #fff;
  outline-offset: 1px;
}

/* ---------- Formulários: campo obrigatório + validação inline ---------- */
.campo-obrigatorio-marca{ color:var(--vermelho); margin-left:2px; }
.field input.campo-invalido, .field select.campo-invalido{
  border-color: var(--vermelho) !important;
  background: var(--vermelho-bg);
}
.campo-erro-msg{ color:var(--vermelho); font-size:11px; margin:4px 0 0; display:flex; align-items:center; gap:4px; }

/* ---------- Animações discretas (troca de tela) ---------- */
@keyframes entrada-suave{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
#app.entrando{ animation: entrada-suave .18s ease; }

/* ---------- Card flutuante de erro/bloqueio (visível mesmo com scroll embaixo) ---------- */
#toasts-flutuantes{
  position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:9999;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  max-width:min(560px, 92vw); pointer-events:none;
}
.toast-flutuante{
  pointer-events:auto; background:var(--vermelho-bg); color:var(--vermelho);
  border:1px solid #f1c7c2; border-radius:10px; padding:12px 40px 12px 16px;
  font-size:13.5px; line-height:1.5; box-shadow:0 8px 24px rgba(0,0,0,.15);
  position:relative; animation: toast-entra .2s ease;
  max-height:400px; overflow-y:auto;
}
.toast-flutuante .toast-fechar{
  position:absolute; top:8px; right:10px; background:none; border:none; cursor:pointer;
  color:var(--vermelho); font-size:16px; line-height:1; padding:2px; opacity:.6;
}
.toast-flutuante .toast-fechar:hover{ opacity:1; }
@keyframes toast-entra{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:translateY(0); } }
@media print{ #toasts-flutuantes{ display:none !important; } }