/* =====================================================================
   Portal EPI — Design system (mobile-first, corporativo, verde sóbrio)
   Sem dependências externas. Placeholder de marca (sem IP real).
   ===================================================================== */

:root {
  --g-900:#123b23; --g-800:#164a2c; --g-700:#1f6b3b; --g-600:#2a8150;
  --g-500:#33a06a; --g-400:#5cb78a; --g-100:#e8f5ee; --g-50:#f3faf6;
  --ink:#16211c; --muted:#647268; --line:#e2e8e4; --line-2:#eef2ef;
  --bg:#f5f7f5; --card:#ffffff;
  --warn:#b7791f; --warn-bg:#fdf6e7; --danger:#c0392b; --danger-bg:#fdeceb; --danger-border:#f0cfcb;
  --info:#2563a8; --info-bg:#eaf1fb;
  --laranja:#c15f1f; --laranja-bg:#fbede1;
  --roxo:#6b46c1; --roxo-bg:#f1ecfb;
  --radius:14px; --radius-sm:10px;
  /* Sombras discretas (visual minimalista) */
  --sh-1:0 1px 2px rgba(18,59,35,.05);
  --sh-2:0 4px 16px rgba(18,59,35,.08);
  --tap:48px;
  --maxw:1100px;
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  color-scheme: light;
}

/* ===================== Tema escuro (modo noturno) =====================
   Escala de verde ajustada para TEXTO/ícones (tons claros legíveis sobre
   o fundo escuro). Componentes que usam verde como PREENCHIMENTO com texto
   branco (botão primário, CTA, toast, badges) recebem override próprio
   abaixo, pois precisam de um verde escuro o suficiente p/ contraste. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --g-900:#e7f2ea; --g-800:#c8e2d4; --g-700:#63c294; --g-600:#4fb587;
  --g-500:#3fa877; --g-400:#2f8f63; --g-100:#172b1f; --g-50:#141f18;
  --ink:#e6ede8; --muted:#93a69b; --line:#27342c; --line-2:#1f2a24;
  --bg:#0e1310; --card:#161f1a;
  --warn:#e0b153; --warn-bg:#2a2314; --danger:#e77468; --danger-bg:#2c1a18; --danger-border:#4a2b28;
  --info:#6fa8e0; --info-bg:#152230;
  --laranja:#e0a458; --laranja-bg:#2c2013;
  --roxo:#c3aef2; --roxo-bg:#241a33;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 22px rgba(0,0,0,.5);
  /* Verdes sólidos p/ preenchimento (fundo verde + texto branco) */
  --g-fill:#2a8150; --g-fill-h:#236b43; --g-deep:#0c130f;
}
:root[data-theme="dark"] body { -webkit-font-smoothing:auto; }
:root[data-theme="dark"] .btn--ms { background:#3a3a3a; }
:root[data-theme="dark"] .btn--ms:hover { background:#4a4a4a; }
/* Preenchimentos verdes (texto branco por cima) */
:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .foto-badge { background:var(--g-fill); }
:root[data-theme="dark"] .btn--primary:hover:not(:disabled) { background:var(--g-fill-h); }
:root[data-theme="dark"] .cta { background:linear-gradient(120deg,#1c5c39,#123f27); }
:root[data-theme="dark"] .navitem.is-active { background:linear-gradient(120deg,var(--g-fill),var(--g-fill-h)); }
:root[data-theme="dark"] .stepper__i.is-done .stepper__dot { background:var(--g-fill); border-color:var(--g-fill); }
:root[data-theme="dark"] .progress__bar { background:linear-gradient(90deg,var(--g-fill),var(--g-600)); }
/* Selos: tons discretos no escuro */
:root[data-theme="dark"] .st-alterada { background:#241a33; color:#c3aef2; }
:root[data-theme="dark"] .st-cancelada { background:#232a27; color:#aab4ae; }
:root[data-theme="dark"] .st-excluido { background:#232a27; color:#aab4ae; }
:root[data-theme="dark"] .st-inativo { background:var(--warn-bg); color:var(--warn); }
:root[data-theme="dark"] .st-bloqueado { background:var(--danger-bg); color:var(--danger); }
:root[data-theme="dark"] .st-ativo,
:root[data-theme="dark"] .st-entregue,
:root[data-theme="dark"] .ev--ok,
:root[data-theme="dark"] .sap--ok,
:root[data-theme="dark"] .kpi--ok .kpi-ico,
:root[data-theme="dark"] .big-ico--ok { background:#16301f; color:var(--g-700); }
:root[data-theme="dark"] .ev--off { background:#232a27; color:var(--muted); }
:root[data-theme="dark"] .sap--off { background:#1a221d; }
:root[data-theme="dark"] .tag--epi { background:#152230; color:var(--info); }
:root[data-theme="dark"] .tag--acessorio { background:#241a33; color:#c3aef2; }
:root[data-theme="dark"] .tag--uniforme { background:#26240f; color:#d8c766; }
:root[data-theme="dark"] .st-pendente { background:var(--warn-bg); color:var(--warn); }

/* =====================================================================
   Temas visuais alternativos (TI - Configuração › Aparência, campo
   temaVisual — ver EPI.ui.aplicarTema em src/ui.js). Aplicados via
   [data-tema] no <html>, cada um com sua própria variante clara/escura —
   o alternador de claro/escuro pessoal ([data-theme]) continua funcionando
   normalmente dentro de qualquer tema. Reaproveita os MESMOS tokens do
   tema padrão (--g-*, --ink, --bg, --card, --radius, --sans, --sh-*), só
   com valores diferentes, então todo o resto do CSS (que já lê essas
   variáveis) se adapta sozinho — só os botões/inputs/modal têm um
   border-radius próprio abaixo, pois usam valor fixo em vez de var(--radius).
   ===================================================================== */

/* ---- Windows 11 (Fluent Design): cantos discretos (8px), azul Fluent,
   cinza Mica, Segoe UI Variable. ---- */
:root[data-tema="windows"] {
  --g-900:#062c54; --g-800:#0a3d70; --g-700:#0067c0; --g-600:#0078d4;
  --g-500:#2899f5; --g-400:#67b1f5; --g-100:#e5f1fb; --g-50:#f3f9fe;
  --ink:#1b1b1b; --muted:#5d5d5d; --line:#e1e1e1; --line-2:#ececec;
  --bg:#f3f3f3; --card:#ffffff;
  --radius:8px; --radius-sm:6px;
  --sh-1:0 1px 2px rgba(0,0,0,.06); --sh-2:0 4px 12px rgba(0,0,0,.10);
  /* Mesma fonte do tema Padrão (não a Segoe UI Variable do Fluent real) —
     pedido explícito para manter o esquema de fonte igual entre os dois. */
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
:root[data-tema="windows"] .btn, :root[data-tema="windows"] .input { border-radius:6px; }
:root[data-tema="windows"] .modal-card { border-radius:8px 8px 0 0; }
:root[data-tema="windows"][data-theme="dark"] {
  --g-900:#e5f4ff; --g-800:#bfe5ff; --g-700:#60cdff; --g-600:#4cc2ff;
  --g-500:#379ce6; --g-400:#2f7dc4; --g-100:#173248; --g-50:#132535;
  --ink:#ffffff; --muted:#a3a3a3; --line:#3a3a3a; --line-2:#333333;
  --bg:#202020; --card:#2c2c2c;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 6px 22px rgba(0,0,0,.5);
  --g-fill:#0078d4; --g-fill-h:#005a9e; --g-deep:#0a1c2c;
}
:root[data-tema="windows"][data-theme="dark"] .btn--primary,
:root[data-tema="windows"][data-theme="dark"] .foto-badge { background:var(--g-fill); }
:root[data-tema="windows"][data-theme="dark"] .btn--primary:hover:not(:disabled) { background:var(--g-fill-h); }
:root[data-tema="windows"][data-theme="dark"] .navitem.is-active { background:linear-gradient(120deg,var(--g-fill),var(--g-fill-h)); }

/* ---- iOS 26: cantos bem arredondados (20px), SF Pro, azul systemBlue,
   fundo agrupado (cinza claro / preto puro no escuro). ---- */
:root[data-tema="ios"] {
  --g-900:#02397a; --g-800:#04509e; --g-700:#007aff; --g-600:#0a84ff;
  --g-500:#409cff; --g-400:#7ab6ff; --g-100:#e6f2ff; --g-50:#f2f8ff;
  --ink:#1c1c1e; --muted:#8e8e93; --line:#d1d1d6; --line-2:#e5e5ea;
  --bg:#f2f2f7; --card:#ffffff;
  --radius:20px; --radius-sm:14px;
  --sh-1:0 1px 3px rgba(0,0,0,.06); --sh-2:0 8px 24px rgba(0,0,0,.10);
  --sans:-apple-system,'SF Pro Text',system-ui,sans-serif;
}
:root[data-tema="ios"] .btn, :root[data-tema="ios"] .input { border-radius:14px; }
:root[data-tema="ios"] .modal-card { border-radius:20px 20px 0 0; }
:root[data-tema="ios"][data-theme="dark"] {
  --g-900:#e5f2ff; --g-800:#bfe0ff; --g-700:#409cff; --g-600:#0a84ff;
  --g-500:#409cff; --g-400:#0a84ff; --g-100:#0a2540; --g-50:#081b30;
  --ink:#ffffff; --muted:#8e8e93; --line:#38383a; --line-2:#2c2c2e;
  --bg:#000000; --card:#1c1c1e;
  --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 8px 26px rgba(0,0,0,.55);
  --g-fill:#0a84ff; --g-fill-h:#0060c0; --g-deep:#001225;
}
:root[data-tema="ios"][data-theme="dark"] .btn--primary,
:root[data-tema="ios"][data-theme="dark"] .foto-badge { background:var(--g-fill); }
:root[data-tema="ios"][data-theme="dark"] .btn--primary:hover:not(:disabled) { background:var(--g-fill-h); }
:root[data-tema="ios"][data-theme="dark"] .navitem.is-active { background:linear-gradient(120deg,var(--g-fill),var(--g-fill-h)); }

/* ---- CRM (roxo/azul escuro): cantos 16px, roxo-azul vibrante, painel
   navy-arroxeado — inspirado em dashboards de CRM/atendimento. ---- */
:root[data-tema="crm"] {
  --g-900:#2c1065; --g-800:#4c1d95; --g-700:#7c3aed; --g-600:#8b5cf6;
  --g-500:#a78bfa; --g-400:#c4b5fd; --g-100:#ede9fe; --g-50:#f5f3ff;
  --ink:#211f3d; --muted:#6b6690; --line:#e2ddf5; --line-2:#ece8fa;
  --bg:#f5f3fb; --card:#ffffff;
  --radius:16px; --radius-sm:12px;
  --sh-1:0 1px 2px rgba(76,29,149,.08); --sh-2:0 8px 26px rgba(124,58,237,.14);
  --sans:'Segoe UI',system-ui,-apple-system,sans-serif;
}
:root[data-tema="crm"] .btn, :root[data-tema="crm"] .input { border-radius:12px; }
:root[data-tema="crm"] .modal-card { border-radius:16px 16px 0 0; }
:root[data-tema="crm"][data-theme="dark"] {
  --g-900:#ede9fe; --g-800:#ddd4fb; --g-700:#a855f7; --g-600:#8b5cf6;
  --g-500:#7c6cf6; --g-400:#6d8bf7; --g-100:#211f3d; --g-50:#1a1830;
  --ink:#f2f0fa; --muted:#9d97c4; --line:#2c2a48; --line-2:#252340;
  --bg:#12111f; --card:#1a1930;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 10px 30px rgba(124,108,246,.25);
  --g-fill:#7c3aed; --g-fill-h:#6d28d9; --g-deep:#0b0a17;
}
:root[data-tema="crm"][data-theme="dark"] .btn--primary,
:root[data-tema="crm"][data-theme="dark"] .foto-badge { background:var(--g-fill); }
:root[data-tema="crm"][data-theme="dark"] .btn--primary:hover:not(:disabled) { background:var(--g-fill-h); }
:root[data-tema="crm"][data-theme="dark"] .navitem.is-active { background:linear-gradient(120deg,var(--g-fill),var(--g-fill-h)); }

/* ---- Admin verde-água: cantos 14px, verde-esmeralda/ciano vibrante,
   painel slate escuro — inspirado em templates de admin/BI. ---- */
:root[data-tema="admin"] {
  --g-900:#003d33; --g-800:#00584a; --g-700:#0e9b7d; --g-600:#12c9a0;
  --g-500:#3ddbb8; --g-400:#8be9d3; --g-100:#dcf7f0; --g-50:#eefcf9;
  --ink:#0f1720; --muted:#5c7a73; --line:#dbeae6; --line-2:#e9f4f1;
  --bg:#eef7f4; --card:#ffffff;
  --radius:14px; --radius-sm:10px;
  --sh-1:0 1px 2px rgba(15,23,32,.06); --sh-2:0 8px 24px rgba(14,155,125,.14);
  --sans:'Segoe UI',system-ui,-apple-system,sans-serif;
}
:root[data-tema="admin"] .btn, :root[data-tema="admin"] .input { border-radius:10px; }
:root[data-tema="admin"] .modal-card { border-radius:14px 14px 0 0; }
:root[data-tema="admin"][data-theme="dark"] {
  --g-900:#e7f6f2; --g-800:#c3ece0; --g-700:#14e0b4; --g-600:#12c9a0;
  --g-500:#0fb28d; --g-400:#0e9b7d; --g-100:#0c2620; --g-50:#0a1e1a;
  --ink:#e7f6f2; --muted:#7fa39a; --line:#22323a; --line-2:#1c2830;
  --bg:#0f1720; --card:#16212b;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 8px 26px rgba(0,0,0,.4);
  --g-fill:#0e9b7d; --g-fill-h:#0c8369; --g-deep:#081310;
}
:root[data-tema="admin"][data-theme="dark"] .btn--primary,
:root[data-tema="admin"][data-theme="dark"] .foto-badge { background:var(--g-fill); }
:root[data-tema="admin"][data-theme="dark"] .btn--primary:hover:not(:disabled) { background:var(--g-fill-h); }
:root[data-tema="admin"][data-theme="dark"] .navitem.is-active { background:linear-gradient(120deg,var(--g-fill),var(--g-fill-h)); }

/* ---- Fiscal (azul-marinho + verde-lima): cantos 12px, inspirado em
   comunicados oficiais/fiscais (cabeçalho azul-marinho sólido, destaque em
   verde-lima vibrante) — a rampa vai do azul-marinho escuro (900-600, usado
   em cabeçalhos/topbar/botões) até o verde-lima vibrante (500-50, usado em
   destaques/ícones/progress bar), as DUAS cores dominantes da referência. ---- */
:root[data-tema="fiscal"] {
  --g-900:#0a1226; --g-800:#0f1836; --g-700:#14204a; --g-600:#1c3a63;
  --g-500:#4e9b4a; --g-400:#7cb342; --g-100:#eef6e2; --g-50:#f6faee;
  --ink:#101826; --muted:#5c6b7a; --line:#dde4ea; --line-2:#eef1f4;
  --bg:#f0f4f0; --card:#ffffff;
  --laranja:#c1651f; --laranja-bg:#fbeee1;
  --roxo:#6b46c1; --roxo-bg:#f1ecfb;
  --radius:12px; --radius-sm:9px;
  --sh-1:0 1px 2px rgba(10,20,40,.08); --sh-2:0 8px 24px rgba(10,20,40,.14);
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
:root[data-tema="fiscal"] .btn, :root[data-tema="fiscal"] .input { border-radius:9px; }
:root[data-tema="fiscal"] .modal-card { border-radius:12px 12px 0 0; }
:root[data-tema="fiscal"][data-theme="dark"] {
  --g-900:#eaf6df; --g-800:#cdebb0; --g-700:#8ecb4e; --g-600:#7cb342;
  --g-500:#5c9a3a; --g-400:#3f7a4e; --g-100:#16233f; --g-50:#101a30;
  --ink:#eef3ea; --muted:#93a0ad; --line:#263349; --line-2:#1e2942;
  --bg:#0a0f1c; --card:#121a2c;
  --warn:#e0b153; --warn-bg:#2a2314; --danger:#e77468; --danger-bg:#2c1a18; --danger-border:#4a2b28;
  --info:#6fa8e0; --info-bg:#152230;
  --laranja:#e0a458; --laranja-bg:#2c2013;
  --roxo:#c3aef2; --roxo-bg:#241a33;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 8px 26px rgba(0,0,0,.5);
  --g-fill:#4e9b4a; --g-fill-h:#3f7a3c; --g-deep:#060a14;
}
:root[data-tema="fiscal"][data-theme="dark"] .btn--primary,
:root[data-tema="fiscal"][data-theme="dark"] .foto-badge { background:var(--g-fill); }
:root[data-tema="fiscal"][data-theme="dark"] .btn--primary:hover:not(:disabled) { background:var(--g-fill-h); }
:root[data-tema="fiscal"][data-theme="dark"] .navitem.is-active { background:linear-gradient(120deg,var(--g-fill),var(--g-fill-h)); }

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
/* Trava global: nenhuma tela pode gerar rolagem horizontal, mesmo se algum
   componente pontual extrapolar a largura (o container que precisar de
   scroll próprio, como tabelas/gráficos, já usa overflow-x:auto local). */
/* html/body nunca rolam — a topbar e o menu lateral ficam fixos em
   qualquer tela (mobile ou desktop); só a área de conteúdo (.content, ver
   ".shell"/"shell-body" abaixo) rola verticalmente. */
html { overflow:hidden; width:100%; height:100%; }
body {
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.45;
  overflow:hidden; max-width:100vw; height:100%;
}
img, svg { max-width:100%; }
h1,h2,h3 { margin:0; line-height:1.2; }
h1 { font-size:1.35rem; } h2 { font-size:1.15rem; } h3 { font-size:1rem; }
p { margin:.4rem 0; }
.muted { color:var(--muted); }
.small { font-size:.82rem; }
.right { text-align:right; }
.center { text-align:center; }
.grow { flex:1; }
button { font-family:inherit; }
.ico { display:inline-block; vertical-align:-3px; }

/* ---------------- Shell / layout ---------------- */
/* "shell" ocupa exatamente a viewport e nunca rola — é um contêiner fixo
   (topbar + shell-body). Quem rola é só ".content" (a subtela ativa), lá
   dentro de "shell-body". */
.shell { display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }
.topbar {
  /* "auto 1fr auto" (em vez de "1fr auto 1fr"): logo e ícones/idioma à
     direita sempre ficam com sua largura natural — é o título (coluna
     flexível do meio) que encolhe/trunca quando falta espaço. Com "1fr auto
     1fr", o lado direito (que cresceu: idioma + tema + atualizar + sino +
     usuário) podia precisar de mais espaço que seu 1fr e transbordar por
     cima do logo, já que grid não recorta conteúdo que ultrapassa a track.
     flex:none (em vez de sticky): a topbar não faz mais parte de nada que
     role — ela é uma linha fixa do próprio "shell", que preenche 100vh. */
  flex:none; z-index:40; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:12px; padding:10px 14px;
  background:var(--card); border-bottom:1px solid var(--line);
  box-shadow:var(--sh-1);
}
.topbar__right { display:flex; align-items:center; gap:10px; justify-self:end; flex:none; }
.topbar__title { justify-self:center; text-align:center; font-size:1.3rem; font-weight:800;
  color:var(--g-800); white-space:nowrap; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.brand { display:flex; align-items:center; gap:10px; min-width:0; flex:none; }
.brand-logo { height:30px; width:auto; display:block; }
:root[data-theme="dark"] .brand-logo { filter:brightness(1.12); }
.brand-word { font-weight:900; font-size:1.05rem; letter-spacing:.5px; color:var(--g-700); white-space:nowrap; }
.brand-word--lg { font-size:1.9rem; letter-spacing:1px; }
.brand-txt { display:flex; flex-direction:column; line-height:1.1; }
.brand-txt strong { font-size:1.02rem; color:var(--g-800); letter-spacing:.2px; }
.brand-txt span { font-size:.72rem; color:var(--muted); }

/* Alternador de tema (sol/lua) */
.theme-toggle { color:var(--muted); }
.theme-toggle:hover { color:var(--g-700); background:var(--g-50); }

/* Versão do app (topbar, ao lado do tema — ver versaoAppLabel em layout.js).
   Visível em desktop e mobile. Clicável: abre o histórico de novidades
   (ver abrirHistoricoVersoes em layout.js). */
.app-version { color:var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.02em;
  padding:2px 6px; border:1px solid var(--line); border-radius:999px; flex:none;
  background:none; cursor:pointer; font-family:inherit; }
.app-version:hover { color:var(--ink); border-color:var(--g-700); }

/* Modal "Novidades do Portal EPI" (histórico de versões, changelog em
   linguagem simples, vindo do banco — ver abrirHistoricoVersoes em
   layout.js e api/src/functions/changelog.js). Tamanho FIXO (75% da tela
   nas duas dimensões, não cresce/encolhe com a quantidade de itens) — só a
   lista de itens rola por dentro; busca/seletor de versão ficam fixos no
   topo. Em telas estreitas volta ao comportamento padrão de modal (evita
   ficar espremido no mobile). */
.modal-card.modal-card--changelog {
  width:75vw; max-width:75vw; height:75vh; max-height:75vh;
  display:flex; flex-direction:column; overflow:hidden; font-size:.86rem;
}
@media (max-width:680px) {
  .modal-card.modal-card--changelog { width:100%; max-width:100%; height:85vh; max-height:85vh; }
}
.modal-card--changelog .modal-head { flex:none; }
.modal-card--changelog .modal-body { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.changelog-fixo { flex:none; }
.changelog-select { width:100%; margin-bottom:14px; }
.changelog-data { color:var(--muted); font-size:.82em; margin:-6px 0 14px; }
/* Único quadro contendo todos os itens da versão — cada item é uma linha
   com ícone (por tipo: novo/correção/ajuste) separada por um filete, não
   um card individual. É o único trecho que rola dentro do modal. */
.changelog-scroll { flex:1; min-height:0; overflow-y:auto; }
.changelog-lista { list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--bg); overflow:hidden; }
.changelog-lista li { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; line-height:1.5; }
.changelog-lista li + li { border-top:1px solid var(--line); }
.changelog-item__ico { flex:none; margin-top:1px; }
.changelog-item__ico--novo { color:var(--g-700); }
.changelog-item__ico--correcao { color:var(--warn); }
.changelog-item__ico--ajuste { color:var(--muted); }
.changelog-lista--busca li.changelog-resultado { cursor:pointer; flex-direction:column; align-items:stretch; gap:2px; }
.changelog-lista--busca li.changelog-resultado:hover { background:var(--card); }
.changelog-lista--busca li.changelog-resultado span { display:block; }

/* Configurações › Integrações (documentação dos endpoints SAP — ver
   src/screens/configuracoesIntegracoes.js). */
.integracoes-lista { display:flex; flex-direction:column; gap:12px; }
.integracoes-item { border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; background:var(--bg); }
.integracoes-item__topo { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.integracoes-metodo { font-size:.68rem; font-weight:800; letter-spacing:.03em; padding:2px 8px; border-radius:999px; }
.integracoes-metodo--get { color:var(--info); background:var(--info-bg); }
.integracoes-metodo--post { color:var(--g-700); background:var(--g-100); }
.integracoes-caminho { font-family:ui-monospace, Consolas, monospace; font-size:.82rem; color:var(--ink); background:var(--card); padding:2px 8px; border-radius:6px; border:1px solid var(--line); }
/* Duas linhas de endpoint por serviço — JSON (REST) e WSDL/XML (SOAP) —
   toda integração aceita os dois formatos no mesmo contrato de negócio. */
.integracoes-item__endpoint { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.integracoes-item__endpoint code { font-family:ui-monospace, Consolas, monospace; font-size:.78rem; color:var(--ink); background:var(--card); padding:2px 8px; border-radius:6px; border:1px solid var(--line); overflow-wrap:break-word; word-break:break-all; }
.integracoes-endpoint-tag { flex:none; font-size:.62rem; font-weight:800; letter-spacing:.03em; padding:2px 7px; border-radius:999px; color:var(--g-700); background:var(--g-100); width:52px; text-align:center; }
.integracoes-endpoint-tag--xml { color:var(--laranja); background:var(--laranja-bg); width:auto; }
.integracoes-item__nome { display:block; margin-top:8px; margin-bottom:4px; }
.integracoes-item__acoes { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.integracoes-exemplo { font-family:ui-monospace, Consolas, monospace; font-size:.8rem; white-space:pre; overflow:auto; max-height:60vh; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin:0; }

/* Seletor de idioma (PT/EN/ES): botão mostra só o idioma atual; ao clicar,
   abre um painel com as opções (ver EPI.comp.seletorIdioma em layout.js). */
.lang-switch { position:relative; }
.lang-switch__btn { display:flex; align-items:center; gap:4px; border:1px solid var(--line); background:var(--card);
  cursor:pointer; padding:5px 10px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color:var(--muted); line-height:1.2; }
.lang-switch__btn:hover { background:var(--g-50); color:var(--g-700); }
.lang-switch__menu { display:none; position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
  z-index:30; flex-direction:column; gap:2px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--sh-2); padding:6px; min-width:64px; }
.lang-switch.is-open .lang-switch__menu { display:flex; }
.lang-switch__item { border:0; background:none; cursor:pointer; padding:7px 10px; border-radius:8px;
  font-size:.75rem; font-weight:700; letter-spacing:.02em; color:var(--g-800); text-align:left; }
.lang-switch__item:hover { background:var(--g-50); }
.lang-switch__item.is-on { background:var(--g-100); color:var(--g-700); }

/* min-height:0 é o que permite ".content" (flex:1 lá dentro) rolar sozinho
   em vez de estourar a altura do "shell" pai (comportamento padrão de flex
   item é não encolher abaixo do conteúdo). */
.shell-body { display:flex; flex:1; min-height:0; width:100%; max-width:var(--maxw); margin:0 auto; }
.sidenav { display:none; }
.content { flex:1; min-width:0; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:18px 14px 96px;
  /* Reserva sempre o espaço da barra de rolagem vertical — evita que o
     conteúdo (listagens, filtros, tabelas) mude de largura/pule quando a
     página passa a ter mais itens que cabem na tela (barra aparece) ou
     menos (barra some). Navegadores sem suporte ignoram a propriedade e
     caem de volta no comportamento anterior, sem quebra. */
  scrollbar-gutter: stable; }

/* Bottom nav (mobile) */
.bottomnav {
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex;
  background:var(--card); border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(18,59,35,.06);
}
.bottomnav__item {
  flex:1; border:0; background:none; color:var(--muted); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 2px; min-height:var(--tap); font-size:.68rem; border-radius:10px;
}
.bottomnav__item.is-active { color:var(--g-700); font-weight:600; }
.bottomnav__item.is-active .ico { transform:translateY(-1px); }

/* Submenu (flyout) dos grupos do bottomnav em telas reduzidas — entrada com
   esmaecimento (fade) + efeito elástico (overshoot) bem perceptível, no
   mesmo espírito da animação do menu lateral desktop. */
@keyframes bottomnavOverlayFade { from { opacity:0; } to { opacity:1; } }
@keyframes bottomnavFlyoutEntrada {
  0%   { opacity:0; transform:translateY(46px) scale(.94); }
  55%  { opacity:1; transform:translateY(-10px) scale(1.015); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
.bottomnav-overlay {
  position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end;
  background:rgba(15,21,18,.35);
  animation:bottomnavOverlayFade .45s ease;
}
.bottomnav-flyout {
  width:100%; background:var(--card); border-radius:0;
  padding:0 0 10px;
  box-shadow:0 -4px 20px rgba(18,59,35,.18);
  max-height:60vh; overflow-y:auto;
  animation:bottomnavFlyoutEntrada .8s cubic-bezier(.34,1.56,.64,1);
}
.bottomnav-flyout__title {
  background:var(--g-700); color:#fff;
  font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  text-align:center; padding:14px 12px; margin-bottom:6px;
}
.bottomnav-flyout__item {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; border:0; background:none;
  color:var(--text); cursor:pointer; text-align:center; font-size:.92rem;
  padding:12px; min-height:var(--tap); border-radius:0;
}
.bottomnav-flyout__item:hover { background:var(--g-50); }
.bottomnav-flyout__item.is-active { color:var(--g-700); font-weight:600; background:var(--g-50); }

.user-chip { display:flex; align-items:center; gap:8px; }
.user-chip__txt { display:none; line-height:1.05; }
.user-chip__txt strong { font-size:.82rem; }

/* Avatares */
.avatar { width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--g-100); color:var(--g-800); font-weight:700; font-size:.9rem; text-transform:uppercase; flex:none; }
.avatar--sm { width:34px; height:34px; font-size:.75rem; }
.avatar--lg { width:56px; height:56px; font-size:1.1rem; }

.icon-btn { border:0; background:none; cursor:pointer; color:var(--muted); padding:0;
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; }
.icon-btn:hover { background:var(--g-50); color:var(--g-700); }
.icon-btn--danger:hover { background:var(--danger-bg); color:var(--danger); }
/* Excluir item (Criar Entrega/Devolução, Alterar Ficha, Solicitar EPI —
   comp.itensTableEdit): vermelho já no estado normal, não só no hover. */
.icon-btn--danger-native { color:var(--danger); }
.icon-btn--danger-native:hover { background:var(--danger-bg); color:var(--danger); }

/* ---------------- Botões ---------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:12px; padding:11px 16px; min-height:var(--tap);
  font-size:.92rem; font-weight:600; cursor:pointer; transition:.15s; white-space:nowrap; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
/* Botão só com ícone (sem rótulo de texto) — mesma altura de toque padrão,
   largura quadrada, usado quando o rótulo já é óbvio pelo contexto (ex.:
   ações de imagem/salvar num card compacto). */
.btn--icone { padding:11px; min-width:var(--tap); flex:none; }
.btn--primary { background:var(--g-700); color:#fff; box-shadow:var(--sh-1); }
.btn--primary:hover:not(:disabled) { background:var(--g-800); }
.btn--ghost { background:var(--card); color:var(--g-800); border-color:var(--line); }
.btn--ghost:hover { background:var(--g-50); }
.btn--danger { background:var(--danger); color:#fff; }
.btn--danger-ghost { background:var(--card); color:var(--danger); border-color:var(--danger-border); }
.btn--danger-ghost:hover { background:var(--danger-bg); }
.btn--ms { background:#2f2f2f; color:#fff; }
.btn--ms:hover { background:#000; }
.btn--lg { padding:14px 22px; font-size:1rem; min-height:54px; }
.btn--sm { padding:7px 12px; min-height:38px; font-size:.82rem; }
.btn--block { width:100%; }
/* Ações que só fazem sentido em telas largas (ex.: "Criar em Massa" em
   Criar Entrega — criarFicha.js): escondido no mobile, aparece a partir do
   mesmo breakpoint ("DESKTOP ≥900px") usado no resto do app. */
.btn--somente-desktop { display:none; }
@media (min-width:900px) {
  .btn--somente-desktop { display:inline-flex; }
}
/* Rótulo de texto dos botões Salvar/Cancelar (e afins): ícone sempre
   visível, texto some no mobile — deixa o botão compacto/só-ícone em
   telas estreitas, com ícone + texto no desktop. Aplicado num <span> ao
   redor do texto (não dá pra esconder só o texto sem quebrar o ícone
   junto, já que ambos são filhos diretos do <button>). */
@media (max-width:680px) {
  .btn__label { display:none; }
}
.link { border:0; background:none; color:var(--g-700); font-weight:600; cursor:pointer; font-size:.85rem; }
.link:hover { text-decoration:underline; }
.link-ghost { color:var(--g-700); font-weight:600; font-size:.82rem; display:inline-flex; align-items:center; gap:4px; }
.link-ghost .ico { transform:rotate(180deg); }

/* ---------------- Página / cabeçalho ---------------- */
.page { animation:fade .25s ease; }
@keyframes fade { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:none;} }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.page-head__l { display:flex; align-items:flex-start; gap:8px; }
.page-head__l h1 { color:var(--g-900); }
.page-head__l p { margin:2px 0 0; font-size:.85rem; }
.page-head__r { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.sec-title { margin:22px 0 10px; color:var(--g-800); font-size:1.02rem; }

/* ---------------- Cards ---------------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; margin-bottom:14px; box-shadow:var(--sh-1); }
.card--ok { border-color:var(--g-400); background:linear-gradient(0deg,var(--g-50),var(--card)); }
.card--danger { border-color:var(--danger-border); background:linear-gradient(0deg,var(--danger-bg),var(--card)); }
.card--center { text-align:center; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.card-head h3 { color:var(--g-800); }
.card-head--mt { margin-top:22px; }

/* Grade de opções de backup (Configurações › TI): as 3 opções lado a lado
   no desktop, empilhadas no mobile. */
/* 2 linhas (título / botão-ícone) compartilhadas pelos 3 cards via
   subgrid: a linha do título fica com a MESMA altura nos 3 cards (a maior
   entre eles), garantindo que o botão sempre comece na mesma altura nos
   três — alinhados entre si — mesmo que o subtítulo de um card seja maior
   que o dos outros. Navegadores sem suporte a subgrid (fallback abaixo)
   ainda ficam com título-topo/botão-rodapé, só sem a sincronia entre os 3. */
.backup-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:auto 1fr; gap:14px; align-items:stretch; }
.backup-grid .card { margin-bottom:0; display:flex; flex-direction:column; grid-row:span 2; }
.backup-grid .card .btn { margin-top:auto; }
@supports (grid-template-rows: subgrid) {
  .backup-grid .card { display:grid; grid-template-rows:subgrid; }
  .backup-grid .card .btn { margin-top:0; align-self:end; }
}
@media (max-width:760px) {
  .backup-grid { grid-template-columns:1fr; }
}

/* Fundo da tela de login (Configurações › Aparência): imagem de desktop e
   de mobile lado a lado, empilhadas em telas estreitas. */
.fundo-login-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; }
.fundo-login-card { margin-bottom:0; }
@media (max-width:760px) {
  .fundo-login-grid { grid-template-columns:1fr; }
}
/* Miniatura + botões (Escolher imagem/Restaurar padrão), só ícone,
   centralizados no espaço à direita da imagem. */
.fundo-login-preview-acoes { display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; margin-top:12px; }
.fundo-login-acoes-espaco { flex:1; min-width:120px; display:flex; align-items:center; justify-content:center; }

/* Seletor de tema visual (Configurações › Aparência) — listbox no mesmo
   padrão dos demais da aplicação (ver .filtro-pop/.filtro-pop__painel):
   botão .input--sel mostra o tema atual, e o painel (overlay, por cima do
   conteúdo, sem empurrar o layout) lista os outros temas — cada linha com
   check + nome + amostra de cores. */
.tema-swatch { display:flex; gap:4px; }
.tema-swatch span { width:20px; height:20px; border-radius:6px; border:1px solid rgba(0,0,0,.08); flex:none; }
.tema-opcao-gatilho { display:flex; align-items:center; }
.tema-opcao { display:flex; flex-direction:row; align-items:center; gap:10px; width:100%;
  text-align:left; padding:8px 10px; border-radius:var(--radius-sm); border:none;
  background:transparent; cursor:pointer; color:var(--ink); min-height:var(--tap); }
.tema-opcao:hover { background:var(--g-50, rgba(0,0,0,.05)); }
.tema-opcao.is-on { background:rgba(51,160,106,.1); }
.tema-opcao strong { flex:1 1 auto; }
.tema-opcao__check { width:16px; flex:none; color:var(--g-600); display:flex; }

/* Logos configuráveis (Configurações › Aparência): logo do login, da barra
   superior e do PDF lado a lado em 1 linha/3 colunas, empilhados em telas
   estreitas. */
/* minmax(320px,...): Login/Topo agora têm 2 sub-slots (claro/escuro) cada
   — precisam de mais espaço mínimo que antes, então nem sempre cabem 3 na
   mesma linha; auto-fit deixa encolher pra 2 ou empilhar em 1 conforme a
   largura disponível, em vez de espremer sempre em 3 colunas fixas. */
.logos-config-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; margin-bottom:14px; }
.logos-config-grid > .card { margin-bottom:0; }
@media (max-width:640px) {
  .logos-config-grid { grid-template-columns:1fr; }
}

/* Nome do aplicativo + Limite de linhas (Configurações › Aparência): mesma
   linha em telas largas, empilhados em telas estreitas, sempre com a mesma
   altura entre si (grid estica os itens da linha por padrão). */
.nome-limite-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.nome-limite-grid > .card { margin-bottom:0; }
@media (max-width:760px) {
  .nome-limite-grid { grid-template-columns:1fr; }
}
/* Empurra a linha de ação (campos + botão, ou o flag + botões de imagem) pra
   base do card — cards da mesma linha (grid) ficam com a mesma altura e as
   ações alinhadas entre si, mesmo com textos de tamanhos diferentes acima.
   Nos cards de logo o "Logo habilitado" é o primeiro elemento do grupo
   empurrado (fica logo acima dos botões); nos demais é o próprio .add-item. */
.card--altura-pareada { display:flex; flex-direction:column; }
.card--altura-pareada .add-item,
.card--altura-pareada .check-row--centro { margin-top:auto; margin-bottom:0; }
.card--altura-pareada .action-bar { margin-bottom:0; }
.check-row--centro { display:flex; justify-content:center; }
.action-bar--centro { justify-content:center; }
/* Campos + botão (Nome do aplicativo, Limite de linhas) preenchendo toda a
   largura do card, sem quebrar linha — o botão agora é só ícone, então cabe
   folgado mesmo em cards estreitos. */
.add-item--preenche { flex-wrap:nowrap; }
.add-item--preenche .add-item__f { flex:1 1 0; min-width:0; }

/* ---------------- KPIs ---------------- */
.kpi-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:14px; }
.kpi-grid--sec { grid-template-columns:repeat(3,1fr); }
@media (max-width:560px) {
  .kpi-grid--sec { grid-template-columns:1fr; }
}
/* Cards de status (Pendente/Em Aberto/Enviado) da listagem de Documentos
   (Área SHE, src/screens/fichas.js): sempre 3 na mesma linha, inclusive no
   mobile — diferente de .kpi-grid--sec "puro" (usado no painel do
   Supervisor com 6 cards, que empilha em telas estreitas). */
/* Cards mais baixos (ex.: Conciliação de estoque — src/screens/reconciliacao.js),
   em qualquer largura de tela, não só no mobile. */
.kpi-grid--compacta .kpi { padding:10px 12px; gap:10px; }
.kpi-grid--compacta .kpi-ico { width:34px; height:34px; }
.kpi-grid--compacta .kpi-ico .ico { width:18px; height:18px; }
.kpi-grid--compacta .kpi-num { font-size:1.3rem; }
.kpi-grid--compacta .kpi-lbl { font-size:.74rem; }
.kpi-grid--compacta .kpi-sub { font-size:.66rem; }
.kpi-grid--sec-inline { grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:560px) {
  .kpi-grid--sec-inline { grid-template-columns:repeat(3,1fr); }
  .kpi-grid--sec-inline .kpi { padding:8px; gap:6px; }
  .kpi-grid--sec-inline .kpi-ico { width:32px; height:32px; }
  .kpi-grid--sec-inline .kpi-ico .ico { width:16px; height:16px; }
  .kpi-grid--sec-inline .kpi-num { font-size:1.35rem; }
  .kpi-grid--sec-inline .kpi-lbl { font-size:.78rem; }
}
.kpi-grid--2 { grid-template-columns:repeat(2,1fr); }
/* Utilitário genérico: esconde um elemento só no mobile — usado hoje pelo
   botão "Exportar Excel" de toda listagem (Documentos, Auditoria,
   Conciliação, Colaboradores, Relatórios etc.), que fica só no desktop.
   display:none tira o item do fluxo flex por completo, então os demais
   botões/filtros da mesma linha (pageHead.acoes ou .filters__extras)
   redistribuem o espaço sozinhos, sem precisar de nenhum ajuste extra por
   tela. */
@media (max-width:680px) {
  .hide-mobile { display:none; }
}
/* Cards de status de Documentos (src/screens/fichas.js): sempre 1 linha x
   7 colunas (Todos + Criado + Pendente + Em Aberto + Enviado + Concluído +
   Rejeitado — ver STATUS em fichas.js), desktop e mobile — ícone à
   esquerda, número + descrição à direita (empilhados, alinhados à
   esquerda), para caber numa faixa tão estreita quanto 1/7 da tela do
   celular. */
.kpi-grid--7col { grid-template-columns:repeat(7,1fr); gap:6px; }
.kpi-grid--7col .kpi { flex-direction:row; align-items:center; text-align:left; padding:8px 6px; gap:6px; }
.kpi-grid--7col .kpi-body { flex-direction:column; align-items:flex-start; min-width:0; }
.kpi-grid--7col .kpi-ico { width:26px; height:26px; flex:none; }
.kpi-grid--7col .kpi-ico .ico { width:14px; height:14px; }
.kpi-grid--7col .kpi-num { font-size:1.05rem; }
.kpi-grid--7col .kpi-lbl { font-size:.6rem; line-height:1.15; overflow-wrap:break-word; word-break:break-word; }
@media (max-width:480px) {
  .kpi-grid--7col { gap:4px; }
  .kpi-grid--7col .kpi { padding:6px 3px; }
  .kpi-grid--7col .kpi-num { font-size:.9rem; }
  .kpi-grid--7col .kpi-lbl { font-size:.52rem; }
}
/* Mobile: ícone + número na parte de cima do card, descrição embaixo (em
   vez de ícone à esquerda / texto à direita, layout do desktop). kpi-body
   vira "display:contents" para que kpi-num e kpi-lbl participem direto do
   grid do próprio .kpi (2 colunas x 2 linhas: ícone e número na linha 1,
   descrição ocupando as 2 colunas na linha 2). */
@media (max-width:680px) {
  .kpi-grid--7col .kpi { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; }
  .kpi-grid--7col .kpi-body { display:contents; }
  .kpi-grid--7col .kpi-ico { grid-row:1; grid-column:1; }
  .kpi-grid--7col .kpi-num { grid-row:1; grid-column:2; text-align:left; }
  .kpi-grid--7col .kpi-lbl { grid-row:2; grid-column:1 / 3; margin-top:2px; text-align:center; }
}
/* Cards do Painel (Área SHE, Gestor e Usuário): 1 coluna, 1 card por
   linha (4x1) — desktop e mobile. Card horizontal (ícone à esquerda,
   texto à direita) e largura cheia, então mesmo os rótulos mais longos
   ("Documentos Pendente Confirmação Recebimento (Correios)") têm espaço
   de sobra sem precisar quebrar em várias linhas nem encolher a fonte. */
.dash-status-grid { display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:14px; }
.dash-status-grid .kpi { min-width:0; padding:16px 20px; flex-direction:row; justify-content:flex-start; text-align:left; gap:16px; align-items:center; }
/* Ícone sempre alinhado horizontalmente com o número (mesma linha); só a
   descrição pode quebrar em mais de uma linha — por isso kpi-body NÃO
   quebra (nowrap): kpi-num fica fixo no início da linha e kpi-lbl (flex
   elástico) quebra o texto dentro do próprio espaço, sem empurrar o
   número para outra linha nem descentralizar o ícone. */
.dash-status-grid .kpi-body { display:flex; flex-direction:row; align-items:baseline; gap:10px; min-width:0; flex-wrap:nowrap; }
.dash-status-grid .kpi-ico { width:48px; height:48px; border-radius:14px; flex:none; }
.dash-status-grid .kpi-ico .ico { width:24px; height:24px; }
.dash-status-grid .kpi-num { font-size:1.8rem; flex:none; }
.dash-status-grid .kpi-lbl { font-size:.9rem; flex:1 1 auto; min-width:0; overflow-wrap:break-word; word-break:break-word; }
/* Bordas nas mesmas cores dos bullets de status da listagem de documentos
   (src/screens/fichas.js / src/components/badges.js: Em Aberto = info,
   Enviado = laranja). "Requisições Pendentes" usa o tom "ok" (verde), igual
   ao status Concluída/Entregue na mesma listagem. */
.dash-status-grid .kpi--info { border-color:var(--info); }
.dash-status-grid .kpi--laranja { border-color:var(--laranja); }
.dash-status-grid .kpi--ok { border-color:var(--g-400); }

/* Fundo "futurista": brilho radial na cor do status + trama de linhas
   diagonais bem sutil (efeito de circuito/tech) — tudo em CSS puro (sem
   imagem externa, mantém o app 100% offline). O conteúdo (ícone/texto)
   fica em z-index acima via .kpi-ico/.kpi-body. */
.dash-status-grid .kpi { position:relative; overflow:hidden; isolation:isolate; }
.dash-status-grid .kpi::before,
.dash-status-grid .kpi::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; }
.dash-status-grid .kpi::before {
  background:radial-gradient(circle at 100% 0%, var(--tom-glow, var(--g-400)) 0%, transparent 62%);
  opacity:.22;
}
.dash-status-grid .kpi::after {
  background-image:repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 14px);
  color:var(--tom-glow, var(--g-400));
  opacity:.07;
}
.dash-status-grid .kpi-ico, .dash-status-grid .kpi-body { position:relative; z-index:1; }
.dash-status-grid .kpi--warn { --tom-glow:var(--warn); }
.dash-status-grid .kpi--info { --tom-glow:var(--info); }
.dash-status-grid .kpi--laranja { --tom-glow:var(--laranja); }
.dash-status-grid .kpi--ok { --tom-glow:var(--g-400); }
/* Card "Requisições Pendentes Aprovação" (só Área SHE — ver dashboard.js):
   verde opaco sólido com texto branco, mesma cor do banner de aviso que
   existia antes nessa tela (removido — ver commits anteriores). */
.dash-status-grid .kpi--aprovacao { background:linear-gradient(120deg,var(--g-700),var(--g-800)); border-color:var(--g-800); }
.dash-status-grid .kpi--aprovacao .kpi-ico { background:rgba(255,255,255,.16); color:#fff; }
.dash-status-grid .kpi--aprovacao .kpi-num, .dash-status-grid .kpi--aprovacao .kpi-lbl { color:#fff; }
:root[data-theme="dark"] .dash-status-grid .kpi--aprovacao { background:linear-gradient(120deg,#1c5c39,#123f27); }
/* Cards "Documentos com Definição Pendente" (amarelo), "Documentos Pendente
   Entrega" (azul) e "Documentos Pendente Confirmação Recebimento" (laranja)
   — mesmo estilo opaco/sólido do card de aprovação acima, cada um na sua cor. */
.dash-status-grid .kpi--amareloescuro { background:linear-gradient(120deg,#9c7a17,#6e5710); border-color:#6e5710; }
.dash-status-grid .kpi--amareloescuro .kpi-ico { background:rgba(255,255,255,.16); color:#fff; }
.dash-status-grid .kpi--amareloescuro .kpi-num, .dash-status-grid .kpi--amareloescuro .kpi-lbl { color:#fff; }
:root[data-theme="dark"] .dash-status-grid .kpi--amareloescuro { background:linear-gradient(120deg,#5c4710,#3e300a); }

.dash-status-grid .kpi--azulescuro { background:linear-gradient(120deg,#1d5a94,#123f68); border-color:#123f68; }
.dash-status-grid .kpi--azulescuro .kpi-ico { background:rgba(255,255,255,.16); color:#fff; }
.dash-status-grid .kpi--azulescuro .kpi-num, .dash-status-grid .kpi--azulescuro .kpi-lbl { color:#fff; }
:root[data-theme="dark"] .dash-status-grid .kpi--azulescuro { background:linear-gradient(120deg,#153a5c,#0e2740); }

.dash-status-grid .kpi--laranjaescuro { background:linear-gradient(120deg,#a1501a,#7a3b12); border-color:#7a3b12; }
.dash-status-grid .kpi--laranjaescuro .kpi-ico { background:rgba(255,255,255,.16); color:#fff; }
.dash-status-grid .kpi--laranjaescuro .kpi-num, .dash-status-grid .kpi--laranjaescuro .kpi-lbl { color:#fff; }
:root[data-theme="dark"] .dash-status-grid .kpi--laranjaescuro { background:linear-gradient(120deg,#6b330f,#4a220a); }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; display:flex; gap:12px; align-items:center; box-shadow:var(--sh-1); transition:.15s; }
.kpi:hover { box-shadow:var(--sh-2); transform:translateY(-1px); }
.kpi-ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:var(--g-100); color:var(--g-700); }
.kpi-num { font-size:1.7rem; font-weight:800; color:var(--g-900); line-height:1; }
.kpi-lbl { font-size:.78rem; color:var(--muted); margin-top:2px; }
.kpi-sub { font-size:.7rem; color:var(--g-600); margin-top:2px; }
.kpi--ok .kpi-ico { background:var(--g-100); color:var(--g-700); }
.kpi--warn .kpi-ico { background:var(--warn-bg); color:var(--warn); }
.kpi--info .kpi-ico { background:var(--info-bg); color:var(--info); }
.kpi--danger .kpi-ico { background:var(--danger-bg); color:var(--danger); }
.kpi--laranja .kpi-ico { background:var(--laranja-bg); color:var(--laranja); }
.kpi--roxo .kpi-ico { background:var(--roxo-bg); color:var(--roxo); }
.kpi--warn { background:var(--warn-bg); border-color:var(--warn); }
.kpi--warn .kpi-num { color:var(--warn); }
.kpi--danger { background:var(--danger-bg); border-color:var(--danger); }
.kpi--danger .kpi-num { color:var(--danger); }
/* minmax(0,1fr) em vez de um mínimo fixo: as colunas sempre preenchem a
   linha inteira (encolhendo se preciso) em vez de quebrar linha e deixar
   espaço vazio quando não cabem 3 no mesmo minmax(200px,...). */
.kpi-grid--responsiva { grid-template-columns:repeat(auto-fit,minmax(0,1fr)); }
@media (max-width:560px) {
  .kpi-grid--responsiva { grid-template-columns:1fr; }
}

/* Progress */
.progress { height:12px; border-radius:999px; background:var(--g-100); overflow:hidden; }
.progress__bar { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--g-500),var(--g-700)); transition:width .5s; }
.progress__lbl { margin-top:8px; font-size:.8rem; }

/* ---------------- Pills / tags ---------------- */
.pill { display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700;
  padding:4px 10px; border-radius:999px; line-height:1; white-space:nowrap; }
.st-criada { background:var(--info-bg); color:var(--info); }
.st-pendente { background:var(--warn-bg); color:var(--warn); }
.st-alterada { background:#f1ecfb; color:#6b46c1; }
.st-cancelada { background:#eef1f0; color:#556; }
.st-entregue { background:#dff3e7; color:var(--g-700); }
.st-rejeitada { background:var(--danger-bg); color:var(--danger); }
.st-ativo { background:#dff3e7; color:var(--g-700); }
.st-inativo { background:var(--warn-bg); color:var(--warn); }
.st-bloqueado { background:var(--danger-bg); color:var(--danger); }
.st-excluido { background:#eef1f0; color:#556; }
.st-dev-pend { background:var(--laranja-bg); color:var(--laranja); }
.st-criado { background:var(--roxo-bg); color:var(--roxo); }
.tag { display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:600;
  padding:3px 9px; border-radius:8px; background:var(--g-50); color:var(--g-700); border:1px solid var(--line-2); }
.tag--remota { background:var(--info-bg); color:var(--info); border-color:#d5e3f7; }
.tag--presencial { background:var(--g-50); color:var(--g-700); }
.tag--epi { background:#eaf1fb; color:var(--info); }
.tag--acessorio { background:#f3eefb; color:#6b46c1; }
.tag--uniforme { background:#fbf6e3; color:#8a6d1d; }
.tag--entrega { background:var(--info-bg); color:var(--info); border-color:#d5e3f7; }
.tag--devolucao { background:var(--warn-bg); color:var(--warn); border-color:#f3e2b8; }
.tags-line { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }

/* Popup de aviso (Cadastros · Avisos, sino de atualização) — mesmo layout
   do alerta nativo de sistema: ícone + título numa linha, mensagem
   centralizada abaixo, sem barra de título colorida (ver
   .modal-card--aviso .modal-head { display:none } mais abaixo). */
.aviso-popup { text-align:center; padding:8px 4px 4px; }
.aviso-popup__cabecalho { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; }
.aviso-popup__ico { display:flex; flex:none; }
.aviso-popup__titulo { margin:0; color:var(--ink); font-size:1.05rem; }
.aviso-popup__msg { margin:0; white-space:pre-wrap; color:var(--ink); line-height:1.55; }

/* Bullets (Status/Tipo de documento/Modalidade nas listagens — mesmo
   estilo visual de badge/botão para as 3 informações, só cor de
   texto/fundo muda conforme o valor). */
.bullet { display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700;
  padding:4px 10px; border-radius:999px; line-height:1; white-space:nowrap; }
/* Marcação para fichas "Pendente envio" (ainda sem colaborador atribuído) —
   listagem de Documentos (src/components/fichaCard.js). */
.bullet--sem-colaborador { background:var(--warn-bg); color:var(--warn); margin-top:4px; }
/* Bullet só com ícone (colunas Tipo/Modalidade da listagem de Documentos) —
   círculo compacto em vez de pílula com texto; title/aria-label mantêm o
   valor acessível (hover/leitor de tela). Mesmo estilo em qualquer tamanho
   de tela — ver EPI.comp.bulletIcone em src/components/badges.js. */
.bullet--icone { padding:6px; gap:0; }
.bullet--icone .ico { flex:none; }

/* Integração SAP no rodapé do documento — discreta e resumida. */
.sap-rodape { display:flex; align-items:center; gap:6px; padding:2px 2px 0; }

/* SAP badges */
.sap-row, .ev-row { display:flex; flex-wrap:wrap; gap:6px; }
.sap { display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:600;
  padding:5px 9px; border-radius:8px; border:1px dashed var(--line); }
.sap--ok { background:#dff3e7; color:var(--g-700); border-color:var(--g-400); border-style:solid; }
.sap--off { background:#fbfbfa; color:var(--muted); }
.ev { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600;
  padding:5px 9px; border-radius:999px; }
.ev--ok { background:#dff3e7; color:var(--g-700); }
.ev--off { background:#eef1f0; color:var(--muted); }

/* ---------------- Ficha cards / listas ---------------- */
.ficha-list { display:grid; grid-template-columns:1fr; gap:12px; }
.paginacao { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; }
.paginacao__info { font-size:.85rem; color:var(--muted); font-weight:600; }

/* Caixa de listagem de tamanho fixo — ver EPI.comp.listagemBox em
   src/components/layout.js. Tamanho da CAIXA não muda com a quantidade de
   linhas (nem com poucos, nem com muitos registros) — mas .listagem-corpo
   não é esticado a força pra preencher a caixa: ele fica do tamanho do
   próprio conteúdo (flex-grow:0), então a paginação sempre gruda logo
   abaixo da grade, em vez de ficar lá embaixo da caixa com um vão vazio
   no meio quando há poucas linhas. Só quando o conteúdo é alto demais pra
   caber (flex-shrink:1 entra em ação) é que .listagem-corpo ganha rolagem
   interna — nesse caso a paginação continua colada, agora no fim do
   espaço disponível da caixa. */
.listagem-box { display:flex; flex-direction:column; height:640px; }
.listagem-box > .paginacao { flex:none; margin:10px 0 0; }
.listagem-box > .listagem-corpo { flex:0 1 auto; min-height:0; overflow-y:auto; overflow-x:auto; }
@media (max-width:680px) { .listagem-box { height:66vh; } }
.icon-btn:disabled { opacity:.35; cursor:not-allowed; }
.icon-btn:disabled:hover { background:none; color:var(--muted); }
.ficha-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; box-shadow:var(--sh-1); cursor:pointer; transition:.15s; display:flex; flex-direction:column; gap:10px; }
.ficha-card:hover { box-shadow:var(--sh-2); transform:translateY(-1px); border-color:var(--g-400); }
.ficha-card__top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ficha-card__top-left { display:flex; align-items:center; gap:8px; }
.ficha-card__top-center { flex:1; display:flex; justify-content:center; }
.ficha-card__top-right { display:flex; justify-content:flex-end; }
.ficha-num { font-weight:800; color:var(--g-900); margin-right:8px; }
.ficha-card__col { display:flex; align-items:center; gap:10px; }
.ficha-nome { font-weight:700; }
.ficha-sub { font-size:.78rem; }
.ficha-card__sap { border-top:1px solid var(--line-2); padding-top:10px; }
.ficha-card__foot { display:flex; align-items:center; gap:6px; font-size:.76rem; }

/* Info card (detalhe) */
.info-card { display:flex; flex-direction:column; gap:14px; }
.info-col { display:flex; align-items:center; gap:14px; }
.info-nome { font-size:1.1rem; font-weight:800; color:var(--g-900); }
.info-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; border-top:1px solid var(--line-2); padding-top:14px; }
.meta-linha { display:flex; flex-direction:column; gap:1px; }
.meta-linha .muted { font-size:.72rem; }
.meta-linha strong { font-size:.9rem; }

/* Gráficos de relatórios (SVG puro) */
.chart-wrap { width:100%; overflow-x:auto; }
.chart-wrap svg { display:block; }
.chart-axis-label { font-size:.68rem; fill:var(--muted); }
.chart-value-label { font-size:.74rem; font-weight:700; }
.legend-row { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:10px; }
.legend-item { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted); }
.legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.resumo-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.resumo-list li { display:flex; justify-content:space-between; gap:10px; font-size:.85rem; padding:4px 0; border-bottom:1px solid var(--line-2); }
.resumo-list li:last-child { border-bottom:0; }

/* Tabelas */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line-2); border-radius:var(--radius-sm); }
/* Lista de Centros do cadastro de material (src/screens/materialForm.js):
   pode ter dezenas de linhas (todos os centros da Empresa) — altura travada
   com rolagem vertical PRÓPRIA, em vez de esticar a página inteira. Cabeçalho
   fixo (sticky) continua visível durante a rolagem. */
.table-wrap--centros-material { max-height:420px; overflow-y:auto; }
.table-wrap--centros-material thead th { position:sticky; top:0; z-index:1; }
.tbl { width:100%; border-collapse:collapse; min-width:460px; }
/* Cabeçalho de toda listagem: mesmo verde do item selecionado no menu
   (.navitem.is-active), texto branco — dá identidade visual única ao
   título de cada coluna em vez do cinza neutro anterior. */
.tbl th { text-align:center; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px;
  color:#fff; padding:10px 12px 10px 20px; background:var(--g-700); border-bottom:1px solid var(--line); }
.tbl th .muted { color:rgba(255,255,255,.75); }
:root[data-theme="dark"] .tbl th { background:var(--g-fill); }
.tbl td { padding:11px 12px 11px 20px; border-bottom:1px solid var(--line-2); font-size:.88rem; vertical-align:top; }
.tbl tr:last-child td { border-bottom:0; }
.tbl--click tr { cursor:pointer; }
.tbl--click tbody tr:hover { background:var(--g-50); }
/* Tabela de itens (ficha de entrega/devolução — Item/Tamanho/Qtd/Vencimento):
   nunca gera rolagem horizontal — Tamanho/Qtd/Vencimento ficam no menor
   tamanho possível (largura fixa em px), e a coluna Item (sem width
   definido) absorve todo o espaço restante automaticamente, já que a
   tabela é table-layout:fixed. Descrição do item trunca em 1 linha com
   reticências (título completo no hover) em vez de quebrar em várias linhas. */
.tbl--itens { min-width:0; table-layout:fixed; }
.tbl--itens th:nth-child(2), .tbl--itens td:nth-child(2) { width:90px; white-space:nowrap; }
.tbl--itens th:nth-child(3), .tbl--itens td:nth-child(3) { width:76px; white-space:nowrap; padding-right:16px; }
.tbl--itens th:nth-child(4), .tbl--itens td:nth-child(4) { width:96px; white-space:nowrap; }
.tbl--itens td:first-child strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Materiais (Cadastros · Materiais — src/screens/cadastroMateriais.js):
   Descrição ocupa o espaço restante e quebra linha; Tipo/Tam/Status têm
   largura fixa — enxuta o bastante no desktop, mais estreita ainda no mobile
   (Status/Tipo abreviados via JS só na versão mobile) para nunca precisar
   de rolagem horizontal. Sem coluna de ação — só o status é editável (inline). */
.tbl--materiais { min-width:0; table-layout:fixed; }
.tbl--materiais th:nth-child(2), .tbl--materiais td:nth-child(2) { width:110px; }
.tbl--materiais th:last-child, .tbl--materiais td:last-child { width:100px; text-align:center; }
.tbl--materiais th:last-child .th-sort > span { justify-content:center; }
/* Linha limitada a 2 linhas (descrição + código): a descrição, quando
   ultrapassa uma linha, é abreviada com reticências em vez de quebrar em
   uma 3ª linha — o código (2ª linha) fica sempre visível por inteiro. */
.tbl--materiais td:first-child div:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tbl--materiais td:first-child div.muted.small { word-break:break-word; }
@media (max-width:900px) {
  .tbl--materiais th:nth-child(2), .tbl--materiais td:nth-child(2) { width:56px; }
  .tbl--materiais th:last-child, .tbl--materiais td:last-child { width:52px; }
  .tbl--materiais td:first-child div { font-size:.82rem; }
  .tbl--materiais td:first-child div.muted.small { font-size:.74rem; }
  .tbl--materiais .tag { padding:3px 6px; font-size:.68rem; }
  .tbl--materiais th { padding:8px 4px; }
}

/* Estoque (Material/Tam/Qtd — src/screens/estoque.js) */
/* Qtd (última coluna, alinhada à direita): padding extra pra não ficar
   colada na borda da tabela — mais espaço "respirando" à direita. */
.tbl--estoque th:last-child, .tbl--estoque td:last-child { width:60px; padding-right:20px; }
.tbl--estoque th:nth-child(2), .tbl--estoque td:nth-child(2) { width:56px; }
/* Linha limitada a 2 linhas (descrição + código): a descrição, quando
   ultrapassa uma linha, é abreviada com reticências em vez de quebrar
   (sobrescreve o word-break de .tbl--itens só aqui, não nas demais telas
   que reaproveitam essa classe). */
.tbl--estoque td:first-child strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; word-break:normal; }
/* EPIs vs Validade (src/screens/relatorioValidade.js): descrição do
   material em 1 linha só, abrevia com "…" quando não cabe (título completo
   no hover) — tamanho/código ficam numa 2ª linha abaixo. */
.tbl--validade__material { max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
/* Destaque de posição: vermelho quando zerada, amarelo quando abaixo do
   mínimo cadastrado no material (ver src/screens/estoque.js: linha()). */
.tbl--estoque tr.tr-estoque--zerado td { background:var(--danger-bg); }
.tbl--estoque tr.tr-estoque--zerado td:last-child { color:var(--danger); font-weight:700; }
.tbl--estoque tr.tr-estoque--abaixo-minimo td { background:var(--warn-bg); }
.tbl--estoque tr.tr-estoque--abaixo-minimo td:last-child { color:var(--warn); font-weight:700; }
@media (max-width:400px) {
  .tbl--estoque th, .tbl--estoque td { padding:8px 6px; font-size:.82rem; }
}

/* EPI vs Entregas (src/screens/relatorioEntregas.js): table-layout:fixed +
   larguras em % garantem que a tabela nunca precise de rolagem horizontal
   — Documento/Colaborador dividem o espaço, Entregue em/Envio do PDF têm
   largura fixa/enxuta, e-mail trunca com reticências em vez de estourar. */
/* Conciliação de estoque (Pendentes de baixa): Documento (com colaborador
   embutido)/Status/Modalidade/Quantidade — 4 colunas só.
   Desktop: table-layout:auto (padrão do navegador) — Status/Modalidade/
   Quantidade (nowrap) ficam exatamente do tamanho do próprio conteúdo, sem
   quebrar linha; o espaço restante vai inteiro pro Documento (que pode
   quebrar linha no nome do colaborador). Isso evita ter que "adivinhar"
   uma largura em px pra cada rótulo — table-layout:fixed com valores fixos
   OU sobrava espaço/cortava o texto OU (com flex-wrap habilitado só pra
   segurança) disparava um bug do Chromium de largura mínima superestimada
   em pill/tag inline-flex, gerando rolagem horizontal falsa mesmo sem
   nada realmente quebrando. */
.tbl--conciliacao { min-width:0; }
.tbl--conciliacao td:first-child { overflow-wrap:break-word; word-break:break-word; }
.tbl--conciliacao td:first-child strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tbl--conciliacao td:first-child .muted.small { overflow-wrap:break-word; word-break:break-word; }
/* Desktop: table-layout:fixed com largura em % pra cada coluna (soma
   100%) — garante que a tabela NUNCA precise de rolagem horizontal,
   diferente do table-layout:auto anterior (que deixava o Documento
   "roubar" espaço e estourava a largura do quadro ao somar 5 colunas,
   depois que Gestor foi adicionado). Documento 40% mais estreito que
   antes (era ~410px fixos, virou 28% ~= 240px numa tela de 850px). */
@media (min-width:681px) {
  .tbl--conciliacao { table-layout:fixed; }
  .tbl--conciliacao th:nth-child(1), .tbl--conciliacao td:nth-child(1) { width:28%; }
  .tbl--conciliacao th:nth-child(2), .tbl--conciliacao td:nth-child(2) { width:20%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tbl--conciliacao th:nth-child(3), .tbl--conciliacao td:nth-child(3) { width:18%; text-align:center; white-space:nowrap; }
  .tbl--conciliacao th:nth-child(4), .tbl--conciliacao td:nth-child(4) { width:20%; text-align:center; white-space:nowrap; }
  /* Quantidade: cabeçalho sempre abreviado ("Quant.") — o texto completo
     ("Quantidade") é bem mais largo que qualquer conteúdo (1-2 dígitos).
     Título e conteúdo centralizados. */
  .tbl--conciliacao th:nth-child(5), .tbl--conciliacao td:nth-child(5) { width:14%; text-align:center !important; white-space:nowrap; }
}
.tbl--conciliacao .pill, .tbl--conciliacao .tag { white-space:nowrap; }
/* Mobile: aqui SIM table-layout:fixed com larguras em px — precisa de um
   orçamento total garantido (soma = largura da tela) pra nunca precisar de
   rolagem horizontal, o que table-layout:auto não garante. Fonte compacta
   (.pill/.tag) permite Status/Modalidade caberem numa linha só nesse
   orçamento apertado; Quantidade fica bem enxuta (só o número) mas com
   respiro da borda direita; o espaço economizado vai pro Documento.
   Padding simétrico (8px/8px) no cabeçalho do Documento — o padrão
   (.tbl th, 20px/12px) descentralizava o título. */
@media (max-width:680px) {
  .tbl--conciliacao { table-layout:fixed; }
  .tbl--conciliacao th:nth-child(1), .tbl--conciliacao td:nth-child(1) { width:124px; padding-left:8px; padding-right:8px; }
  .tbl--conciliacao th:nth-child(2), .tbl--conciliacao td:nth-child(2) { width:84px; padding-left:3px; padding-right:3px; }
  .tbl--conciliacao th:nth-child(3), .tbl--conciliacao td:nth-child(3) { width:72px; padding-left:3px; padding-right:3px; }
  .tbl--conciliacao th:nth-child(2), .tbl--conciliacao th:nth-child(3) { overflow:hidden; text-overflow:ellipsis; }
  .tbl--conciliacao th:nth-child(4), .tbl--conciliacao td:nth-child(4) { width:46px; padding-left:2px; padding-right:2px; text-align:center !important; }
  .tbl--conciliacao .pill, .tbl--conciliacao .tag { font-size:.64rem; padding:4px 6px; gap:3px; white-space:normal; flex-wrap:wrap; max-width:100%; width:fit-content; justify-content:center; overflow-wrap:break-word; word-break:break-word; }
  .tbl--conciliacao .pill .ico, .tbl--conciliacao .tag .ico { flex:none; }
}

.tbl--entregas { min-width:0; table-layout:fixed; }
.tbl--entregas th:nth-child(1), .tbl--entregas td:nth-child(1) { width:18%; }
.tbl--entregas th:nth-child(2), .tbl--entregas td:nth-child(2) { width:18%; }
.tbl--entregas th:nth-child(3), .tbl--entregas td:nth-child(3) { width:15%; }
.tbl--entregas th:nth-child(4), .tbl--entregas td:nth-child(4) { width:22%; }
.tbl--entregas th:nth-child(5), .tbl--entregas td:nth-child(5) { width:18%; }
.tbl--entregas th:nth-child(6), .tbl--entregas td:nth-child(6) { width:92px; }
/* O botão-flex fica num <div> interno (.tbl--entregas__acoes), não na
   própria <td> — colocar display:flex direto na <td> tira ela do layout
   de tabela (deixa de ser table-cell), e a borda inferior da linha para
   de acompanhar a altura das outras colunas. */
.tbl--entregas__acoes { display:flex; gap:4px; justify-content:flex-end; }
/* Altura da linha limitada a no máx. 3 linhas de texto — nenhuma célula
   (nem a descrição, nem o motivo de erro do e-mail) deve fazer a linha
   crescer além disso. */
.tbl--entregas td { overflow-wrap:break-word; word-break:break-word; max-height:calc(3 * 1.4em); overflow:hidden; }
.tbl--entregas td:nth-child(4) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Motivo do PDF não enviado: resumido numa linha só, com reticências —
   o texto completo (mensagem de erro crua do servidor de e-mail) aparece
   ao passar o mouse (title). 2pt menor que o .muted.small padrão
   (.82rem), por ser um texto secundário de diagnóstico. */
.tbl--entregas__motivo { font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%; cursor:help; }
@media (max-width:680px) {
  .tbl--entregas th, .tbl--entregas td { padding:8px 6px; font-size:.8rem; }
}

/* Itens do documento (editável, com botão remover — Criar Entrega/Devolução,
   Alterar Ficha, Solicitar EPI: comp.itensTableEdit em criarFicha.js): cabe
   em telas estreitas sem rolagem horizontal — colunas Tipo/Tamanho/Qtd/Ação
   têm largura fixa e a coluna Item ocupa o resto, quebrando texto se preciso. */
/* Todas as colunas em % (nunca px fixo misturado com %): table-layout:fixed
   + .tbl width:100% garante que a soma das colunas nunca ultrapasse a
   largura do container, então a tabela nunca força rolagem horizontal —
   px fixo (tentativa anterior) podia somar mais que o espaço disponível em
   telas estreitas e "empurrar" a tabela para fora do container. */
.tbl--itens-edit { min-width:0; table-layout:fixed; }
.tbl--itens-edit th:nth-child(1), .tbl--itens-edit td:nth-child(1) { width:32%; }
.tbl--itens-edit th:nth-child(2), .tbl--itens-edit td:nth-child(2) { width:28%; }
.tbl--itens-edit th:nth-child(3), .tbl--itens-edit td:nth-child(3) { width:14%; }
.tbl--itens-edit th:nth-child(4), .tbl--itens-edit td:nth-child(4) { width:12%; }
.tbl--itens-edit th:last-child, .tbl--itens-edit td:last-child { width:14%; white-space:nowrap; padding-left:0; }
.tbl--itens-edit td:first-child strong, .tbl--itens-edit td:first-child .muted { word-break:break-word; }
.tbl--itens-edit td:nth-child(2) { text-align:center; }
.tbl--itens-edit .tag { white-space:normal; text-align:center; overflow-wrap:break-word; word-break:break-word; max-width:100%; }
/* Botão remover: reduzido dentro desta tabela para não sobrar mais largura
   que a coluna (a versão padrão do .icon-btn é 40x40, maior que os 14% da
   coluna em telas estreitas). */
.tbl--itens-edit .icon-btn { width:32px; height:32px; }
/* Descrição do material com fonte um pouco menor que o padrão da tabela
   (.tbl td é .88rem) — tamanho ajustado em rem (não transform:scale, que
   borraria o texto), mantendo a nitidez. */
.tbl--itens-edit .item-edit__desc { font-size:.82rem; font-weight:700; }
/* Cabeçalho (Tipo/Tamanho/Qtd) não quebra linha em palavra única — sem
   overflow:hidden, o texto (maiúsculo via .tbl th) extrapola a coluna
   estreita e "sobrepõe" visualmente a coluna vizinha. Coluna Tamanho usa
   sempre a forma abreviada "TAM" (t('col_tamanho_abrev')), desktop e
   mobile — a coluna é estreita de propósito (Item ocupa o espaço restante),
   então a palavra cheia nunca caberia sem cortar. */
.tbl--itens-edit th { white-space:nowrap; overflow:hidden; text-overflow:clip; padding-left:6px; padding-right:6px; }

/* Listagem de Documentos (Área SHE/Gestor/Usuário — src/components/fichaCard.js):
   no mobile, encolhe padding/fonte e libera o white-space dos badges de
   Status/Tipo/Modalidade para não precisar de barra de rolagem horizontal
   (a coluna Colaborador já foi mesclada com Documento no JS). */
/* Rótulo de coluna com versão abreviada só no mobile (ex.: cabeçalho
   Modalidade -> MOD na tela inicial do Usuário — ver
   src/components/fichaCard.js: rotuloAbreviavel). */
.lbl-abrev { display:none; }
@media (max-width:680px) {
  .lbl-full { display:none; }
  .lbl-abrev { display:inline; }
}
@media (max-width:680px) {
  /* table-layout:fixed (não só min-width:0) é o que realmente garante sem
     rolagem horizontal: sem largura de coluna travada, o layout automático
     do <table> ainda podia expandir cada coluna até o conteúdo "de uma
     palavra só" (ex.: "Presencial", "Correios") não quebrar, estourando a
     tela mesmo com white-space:normal nos badges. Cada coluna tem sua
     própria largura fixa (ver bloco "Documento/Status/Tipo/Modalidade"
     abaixo) — nenhuma fica com largura "automática". */
  .tbl--fichas { min-width:0; table-layout:fixed; }
  .tbl--fichas th, .tbl--fichas td { padding:7px 4px 7px 6px; font-size:.82rem; overflow-wrap:break-word; word-break:break-word; }
  .tbl--fichas th { font-size:.68rem; }
  /* Número do documento ("F-2026-0120") sem isso nunca truncava — como é
     nowrap, ele forçava a TABELA INTEIRA a estourar a largura da tela por
     baixo dos panos, não importa a largura atribuída à coluna (table-
     layout:fixed limita a largura da coluna, mas não corta sozinho o
     conteúdo sem overflow:hidden + ellipsis explícitos). */
  .tbl--fichas td:first-child strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Nome do gestor (2ª linha da 1ª coluna): a coluna Documento ficou bem
     estreita pra dar espaço a Status/Tipo/Modalidade (ver abaixo) — sem
     isso, a regra genérica overflow-wrap/word-break:break-word (linha
     acima) quebrava nomes NO MEIO da palavra (“Marc”/“os”). Aqui só quebra
     entre palavras (nome/sobrenome), nunca dentro de uma. */
  .tbl--fichas td:first-child .muted.small { overflow-wrap:normal; word-break:normal; }
  .tbl--fichas th:not(:first-child), .tbl--fichas td:not(:first-child) { width:19%; }
  /* Todas as colunas têm largura fixa em "ch" (largura do "0" no tamanho de
     fonte da própria coluna). Documento 11,5ch (~92px) por pedido
     explícito — mesmo com os prefixos configuráveis (ENT-/DEV-/REQ-, ver
     Configurações) deixando o número mais longo ("ENT-2026-0140", 13
     caracteres), a coluna NÃO cresce; o número trunca com "…" (ver
     td:first-child strong abaixo). Data não pode cortar (nowrap, 8).
     Tipo/Modalidade ficam propositalmente pequenas (6 cada) e PODEM
     quebrar no meio da palavra (ex.: "Conclu"+"ído") — não cabe espaço pra
     mais nos ~311px úteis do mobile. */
  .tbl--fichas th:first-child, .tbl--fichas td:first-child { width:11.5ch; }
  .tbl--fichas th:nth-child(4), .tbl--fichas td:nth-child(4) { width:7ch; }
  .tbl--fichas th:nth-child(5), .tbl--fichas td:nth-child(5) { width:6ch; }
  .tbl--fichas th:nth-child(6), .tbl--fichas td:nth-child(6) { width:6ch; }
  .tbl--fichas th:nth-child(7), .tbl--fichas td:nth-child(7) { width:8ch; white-space:nowrap; }
  .tbl--fichas td:nth-child(5), .tbl--fichas td:nth-child(7) { text-align:center; }
  .tbl--fichas .bullet { font-size:.6rem; padding:2px 3px; white-space:normal; text-align:center; overflow-wrap:break-word; word-break:break-word; max-width:100%; }
  .tbl--fichas td:first-child { font-size:.88rem; }
  .tbl--fichas td:first-child .muted.small { font-size:.76rem; }
  /* Documentos (Área SHE, src/screens/fichas.js): Gestor/Centro somem no
     mobile — já cramado o bastante com Status/Tipo/Modalidade/Data. */
  .tbl--fichas .col-gestor, .tbl--fichas .col-centro { display:none; }
  /* Requisições (src/screens/solicitacoes.js): coluna Motivo some no
     mobile — o essencial (status/itens/data) já cabe sem ela. Com ela
     oculta, sobram só 3 colunas (Requisição/Status/Criada em) — a regra
     genérica de 19% acima deixava as duas últimas espremidas (rótulo do
     cabeçalho quebrando em 3 linhas) e a 1ª desproporcionalmente larga;
     aqui a distribuição é própria pra essas 3. */
  .tbl--solicitacoes .col-motivo { display:none; }
  .tbl--solicitacoes th:first-child, .tbl--solicitacoes td:first-child { width:40%; }
  .tbl--solicitacoes th:not(:first-child), .tbl--solicitacoes td:not(:first-child) { width:30%; }
}

/* Documentos (Área SHE/Gestor, src/screens/fichas.js) — só na versão
   desktop (mobile é tratado à parte, ver bloco @media (max-width:680px)
   acima — sem mexer nele): coluna Documento travada em 160px (pedido
   explícito). table-layout:auto (padrão do .tbl) NÃO respeita width numa
   coluna quando o conteúdo (código do documento sem quebra, nome do
   colaborador) precisa de mais espaço — o algoritmo calcula a largura
   pelo conteúdo (min-content), ignorando overflow:hidden/ellipsis dos
   filhos (isso só corta visualmente DEPOIS do layout já ter decidido usar
   mais espaço). Por isso table-layout:fixed aqui também (mesma solução já
   usada no bloco mobile acima) — com fixed, a largura do CSS manda de
   verdade e o truncamento com "…" (ver td:first-child strong/.muted.small
   abaixo) passa a funcionar. Larguras das demais colunas reduzidas na
   mesma proporção pra manter a soma igual à largura natural da tabela
   (~1280px) — sem isso, o navegador reencolhe TODAS as colunas
   (Documento incluído) pra caber, e ela nunca ficaria realmente em
   160px. Centro/Status/Tipo/Modalidade/Criada em com título e conteúdo
   centralizados. */
@media (min-width:681px) {
  .tbl--fichas { table-layout:fixed; }
  .tbl--fichas th.col-doc, .tbl--fichas td.col-doc { width:160px; }
  .tbl--fichas th.col-gestor, .tbl--fichas td.col-gestor { width:107px; }
  .tbl--fichas th.col-centro, .tbl--fichas td.col-centro { width:88px; }
  .tbl--fichas th.col-status, .tbl--fichas td.col-status { width:91px; }
  .tbl--fichas th.col-tipo, .tbl--fichas td.col-tipo { width:70px; }
  .tbl--fichas th.col-modalidade, .tbl--fichas td.col-modalidade { width:118px; }
  .tbl--fichas th.col-criada-em, .tbl--fichas td.col-criada-em { width:99px; }
  /* Coluna de checkbox (seleção em lote — só Documentos, ver
     opcoes.selecionavel em fichaCard.js): largura tirada proporcionalmente
     das demais (exceto Documento, que fica travada em 160px por pedido
     explícito anterior), pra manter a soma igual à largura natural da
     tabela — mesma técnica já usada nas outras colunas acima. */
  .tbl--fichas th.col-check, .tbl--fichas td.col-check { width:40px; text-align:center; }
  .tbl--fichas td.col-doc strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tbl--fichas td.col-doc .muted.small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tbl--fichas th.col-centro, .tbl--fichas th.col-status, .tbl--fichas th.col-tipo,
  .tbl--fichas th.col-modalidade, .tbl--fichas th.col-criada-em { text-align:center; }
  .tbl--fichas td.col-centro, .tbl--fichas td.col-status, .tbl--fichas td.col-tipo,
  .tbl--fichas td.col-modalidade, .tbl--fichas td.col-criada-em { text-align:center; padding-left:12px; padding-right:12px; }
}

/* ---------------- Inputs / filtros ---------------- */
.input { width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  font-size:.95rem; background:var(--card); color:var(--ink); min-height:var(--tap); }
.input:focus { outline:none; border-color:var(--g-500); box-shadow:0 0 0 3px rgba(51,160,106,.15); }
.input--sel { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23647268'%3E%3Cpath d='M5 8l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:38px; }
.field-lbl { display:block; font-size:.78rem; font-weight:600; color:var(--g-800); margin:0 0 6px; }
.input-ico { position:relative; flex:1; }
.input-ico .ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); }
.input-ico .input { padding-left:38px; }

.filters { margin-bottom:16px; }
.filters__row { display:flex; gap:10px; margin-bottom:10px; }
.filters__row .input--sel { max-width:180px; }
.filters__row--wrap { flex-wrap:wrap; align-items:flex-end; }
.filters__row--wrap .input-ico { flex:2 1 200px; }
.filters__row--wrap .input--sel { flex:1 1 160px; max-width:220px; }

/* Filtros compactos (fichas): ícones/toggles no lugar de listbox, pensados
   para caber em no máximo 2 linhas nas larguras usuais de desktop. */
.filters__row--compact { flex-wrap:wrap; align-items:center; gap:8px; row-gap:8px; }
.filters__row--compact .input-ico { flex:1 1 220px; max-width:320px; }
.filters__row--compact .input--sel { flex:0 1 auto; }

/* Busca + Centro + Tipo (Estoque): sempre 1 linha só, desktop e mobile —
   nunca quebra e nunca gera rolagem horizontal. flex-wrap:nowrap força os 3
   a dividir a largura disponível (min-width:0 permite encolher abaixo da
   largura "natural" do <select>/<input>, truncando o texto em vez de
   estourar a linha). */
.filters__row--nowrap { flex-wrap:nowrap; gap:6px; }
.filters__row--nowrap .input-ico,
.filters__row--nowrap > select { min-width:0; flex:1 1 0; max-width:none; }
.filters__row--nowrap .filters__item--busca { flex:2 1 0; }
/* .filters__extras (ícones de filtro/ação) não precisa "crescer" — seu
   conteúdo é só botões de tamanho fixo (44px cada); a reserva de 260px do
   flex-basis padrão (ver regra geral de .filters__extras mais abaixo)
   sobrava e "roubava" espaço da busca, que deveria preencher o resto da
   linha. Aqui ele só ocupa o que o conteúdo pede. */
.filters__row--nowrap .filters__extras { flex:0 1 auto; }
/* .filters__row .input--sel (max-width:180px) tem 2 classes — mesma
   especificidade de ".filters__row--nowrap > select" acima, então em
   telas largas o cap de 180px vencia e os listbox paravam de crescer
   bem antes do fim da linha, deixando espaço vazio à direita do botão de
   filtro. Seletor mais específico (2 classes + tipo) pra garantir que o
   listbox realmente preencha o espaço disponível. */
.filters__row--nowrap select.input--sel { max-width:none; flex:1 1 0; min-width:0; }
/* Botão-ícone de filtro (.filtro-pop) na mesma altura dos listbox ao
   lado — sem isso, o icon-btn (40px fixo) fica visivelmente mais baixo
   que um <select> (que cresce com o padding do .input). */
.filters__row--nowrap { align-items:stretch; }
.filters__row--nowrap .filtro-pop { display:flex; flex:0 0 auto; }
.filters__row--nowrap .filtro-pop > .icon-btn { height:auto; width:44px; }
/* Botões "soltos" (sem popover — ex.: Exportar Excel em fichas.js, Abaixo do
   mínimo/Zerado em estoque.js) na mesma largura dos botões de popover ao
   lado — sem isso ficam com os 40px fixos do .icon-btn base, mais estreitos
   que os 44px dos demais. Só a partir de 901px: abaixo disso (ver
   @media max-width:900px mais abaixo) a largura de TODOS os ícones —
   soltos ou em popover — já é compartilhada igualmente via flex:1 1 0,
   e um width fixo aqui quebraria essa divisão igual no mobile/tablet. */
@media (min-width:901px) {
  .filters__row--nowrap .filters__extras > .icon-btn { width:44px; }
}
@media (max-width:560px) {
  .filters__row--nowrap { gap:4px; }
  /* Com 7 ícones na barra (Documentos, src/screens/fichas.js, ver botão
     "Entrega Gestor") o piso de 34px por ícone (ver .filters__extras
     .filtro-pop/.icon-btn abaixo) já consome quase toda a largura de um
     celular estreito — sem um teto aqui, o peso flex:2 (regra geral,
     linha acima) fazia a busca tentar crescer além do que sobra e
     encolher até sumir. Um pouco menor (flex:1, mín. 50px) deixa espaço
     de sobra pros ícones sem quebrar linha, mantendo a busca visível
     (ícone + alguns caracteres) mesmo nas telas mais estreitas. */
  .filters__row--nowrap .filters__item--busca { flex:1 1 50px; min-width:50px; }
  .filters__row--nowrap .input { padding-left:30px; padding-right:8px; font-size:.82rem; }
  .filters__row--nowrap .input-ico .ico { left:8px; }
  .filters__row--nowrap > select.input--sel { padding:10px 22px 10px 8px; background-position:right 4px center; font-size:.8rem; }
}
/* Em telas largas os ícones de filtro ficam na mesma linha da busca,
   distribuídos ao longo do espaço restante (não amontoados à esquerda).
   align-items:stretch (não "center"): sem isso, cada botão-ícone
   (.filtro-pop) ficava com a altura "natural" do ícone (~22px), bem menor
   que o campo de busca/listbox ao lado (~48px) — mesmo o wrapper
   .filters__extras já esticando para a altura da linha toda. */
.filters__extras { display:flex; flex:1 1 260px; gap:8px; align-items:stretch; justify-content:space-between; }
.filters__extras .filtro-pop { display:flex; }
.filters__extras .filtro-pop > .icon-btn { height:auto; }
/* Botões de filtro "soltos" (sem popover — ex.: Abaixo do mínimo/Zerado em
   src/screens/estoque.js) ficavam com a altura fixa de 40px do .icon-btn
   base, menor que os botões de popover ao lado (esticados pela regra
   acima) — mesma altura pra todos os ícones dessa barra. */
.filters__extras > .icon-btn { height:auto; }

/* Telas estreitas: busca ocupa a linha inteira sozinha; os demais filtros
   descem juntos para a linha seguinte, também ocupando a linha inteira. */
@media (max-width:900px) {
  .filters__row--compact .input-ico { flex:1 1 100%; max-width:none; }
  .filters__row--compact .filters__extras { flex:1 1 100%; }
  /* Sem prefixo de variante de linha (compact/nowrap): todo botão-ícone de
     filtro (ex.: Estoque — centro/tipo/abaixo do mínimo/zerado) fica com o
     mesmo tamanho no mobile, em vez de encolher conforme o ícone. min-width
     34px (não 0): abaixo disso o ícone (16-18px) ultrapassa a borda do
     botão — é o campo de busca ao lado (min-width:0) que cede espaço
     primeiro quando a linha aperta, nunca os botões de filtro. */
  .filters__extras .filtro-pop { flex:1 1 0; min-width:34px; }
  /* Só o ícone-gatilho do filtro (filho direto de .filtro-pop) — não o
     botão "Limpar período" dentro do painel aberto (.filtro-pop__campo),
     que precisa continuar centralizado, não esticado a 100%. */
  .filters__extras .filtro-pop > .icon-btn { width:100%; }
  .filters__extras > .icon-btn { flex:1 1 0; min-width:34px; }
}

/* Filtro-ícone com painel (status, modalidade, tipo, período): fica oculto
   até o clique no ícone, evitando poluir a barra de filtros com listbox/datas. */
.filtro-pop { position:relative; flex:0 0 auto; }
/* Moldura igual à do campo de busca, para os botões-ícone da barra de filtros
   (exceto ordenação, que já tem cor própria) — box-shadow inset em vez de
   border: mesmo efeito visual, mas não entra na caixa de layout (nos botões
   "soltos", que são eles mesmos o item flex — diferente dos de popover, cujo
   item flex é o wrapper .filtro-pop sem borda — uma border real de 2px
   tirava esses 2px da divisão igual de largura no mobile/tablet). */
.filtro-pop > .icon-btn,
.filters__extras > .icon-btn {
  box-shadow:inset 0 0 0 1px var(--line); border-radius:10px; background:var(--card);
}
/* right:0 (não left:0): os ícones de filtro normalmente ficam agrupados na
   ponta direita da barra (ver filters__extras) — abrindo pela esquerda do
   ícone, o painel (min-width 240px) ficava perto da borda direita da tela
   e estourava pra fora da viewport, principalmente no mobile. Alinhando
   pela direita do ícone, o painel sempre abre "pra dentro" da tela. */
.filtro-pop__painel { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:30;
  background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-2);
  padding:14px; min-width:240px; max-width:calc(100vw - 28px); }
.filtro-pop.is-open .filtro-pop__painel { display:block; }
.filtro-pop__campo .input { margin-bottom:10px; }
.filtro-pop__campo .field-lbl:not(:first-child) { margin-top:2px; }
/* Filtro de período de criação (Documentos/Requisições): rótulo "De"/"Até"
   na frente do campo de data, em vez de em cima (empilhado). */
.filtro-linha-data { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.filtro-linha-data .field-lbl--inline { display:inline; margin:0; flex:none; min-width:32px; }
.filtro-linha-data .input { margin-bottom:0; }
/* Botão "Limpar período" (dentro do popover de Período de criação) —
   centralizado na largura do painel, em vez de colado à esquerda. */
.filtro-pop__campo > .icon-btn { display:flex; margin:2px auto 0; }
.filtro-pop__painel select.input--sel { width:100%; }
.icon-btn.is-ativo { color:var(--g-700); background:var(--g-100); border-radius:999px; }

/* Sino de nova versão disponível (topbar) */
.sino-ativo { position:relative; color:var(--warn); opacity:1 !important; cursor:pointer !important; animation:sino-balanco 1.6s ease-in-out infinite; }
.sino-ativo:hover { background:var(--warn-bg); color:var(--warn); }
.sino-ativo::after { content:''; position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--danger); box-shadow:0 0 0 2px var(--card); }
@keyframes sino-balanco {
  0%, 100% { transform:rotate(0deg); }
  10% { transform:rotate(-12deg); }
  20% { transform:rotate(10deg); }
  30% { transform:rotate(-8deg); }
  40% { transform:rotate(6deg); }
  50% { transform:rotate(0deg); }
}

/* Menu de opções dentro do filtro-ícone (status, modalidade, tipo) */
.filtro-pop__menu { display:flex; flex-direction:column; gap:2px; min-width:200px; padding:0; }
.filtro-pop__item { display:flex; align-items:center; gap:10px; border:0; background:none; cursor:pointer;
  padding:9px 10px; border-radius:8px; font-size:.88rem; font-weight:600; color:var(--g-800); text-align:left; }
.filtro-pop__item:hover { background:var(--g-50); }
.filtro-pop__item.is-on { background:var(--g-100); color:var(--g-700); }
.filtro-pop__item .ico { color:var(--muted); }
.filtro-pop__item.is-on .ico { color:var(--g-700); }

/* Grupo de botões-ícone (ex.: ordenação) */
/* Ordenação: cor própria (azul info) para se diferenciar dos demais ícones de filtro */
.seg-icon { display:inline-flex; border:1px solid var(--info); border-radius:10px; overflow:hidden; flex:0 0 auto; background:var(--info-bg); }
.seg-icon .icon-btn { border-radius:0; width:38px; height:38px; color:var(--info); }
.seg-icon .icon-btn:hover { background:var(--info-bg); color:var(--info); }
.seg-icon .icon-btn + .icon-btn { border-left:1px solid var(--info); }
.seg-icon .icon-btn.is-on { background:var(--info); color:#fff; }
.seg-icon .icon-btn.is-on:hover { background:var(--info); color:#fff; }

.check-row { display:flex; align-items:center; gap:10px; padding:10px 0; cursor:pointer; }
.check-row input { width:20px; height:20px; accent-color:var(--g-700); }
.check-grid { display:flex; flex-wrap:wrap; gap:4px 20px; }
.check-grid .check-row { padding:6px 0; }

/* Segmented / add item */
.seg { display:grid; gap:10px; }
/* Modalidade de entrega (Presencial/Correios — criarFicha.js/criarDevolucao.js):
   sempre lado a lado, desktop e mobile — não empilha em telas estreitas. */
.seg--linha { grid-template-columns:repeat(2,1fr); }
@media (max-width:560px) {
  .info-meta { grid-template-columns:1fr; }
}
.seg__opt { display:flex; align-items:center; gap:12px; text-align:left; padding:14px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--card); cursor:pointer; color:var(--ink); min-height:var(--tap); min-width:0; }
.seg__opt.is-on { border-color:var(--g-500); background:var(--g-50); box-shadow:0 0 0 3px rgba(51,160,106,.12); }
.seg__opt .ico { color:var(--g-700); flex:none; }
.seg__opt strong { display:block; }
@media (max-width:400px) {
  .seg--linha { gap:6px; }
  .seg--linha .seg__opt { padding:10px 8px; gap:8px; }
  .seg--linha .seg__opt strong { font-size:.86rem; }
  .seg--linha .seg__opt span { font-size:.74rem; }
}

.add-item { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:12px; }
.add-item__f { flex:1; min-width:130px; }
.add-item__btn { flex:none; }
.itens-edit { margin-top:6px; }

/* Aviso informativo (não bloqueante) de falta de estoque */
.aviso-estoque { display:flex; align-items:center; gap:8px; color:var(--warn); background:var(--warn-bg);
  border-radius:10px; padding:8px 12px; font-size:.82rem; margin-bottom:10px; }
.aviso-estoque .ico { color:var(--warn); flex:none; }

/* ---------------- Ações / barras ---------------- */
.action-bar { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.action-bar .btn--lg { flex:1; min-width:200px; }
/* Telas de criação/alteração de documento (Entrega, Devolução, Requisição
   — criarFicha.js/alterarFicha.js/criarDevolucao.js/solicitarEpi.js):
   Salvar (btn--lg, herdava flex:1 acima) e Cancelar (mesma classe agora)
   NÃO devem esticar até preencher a largura da tela no desktop — tamanho
   dinâmico (só o necessário pro ícone+texto) e alinhados à esquerda (já é
   o padrão de .action-bar, display:flex sem justify-content). No mobile
   mantém o comportamento anterior (botões largos, mais fáceis de tocar). */
@media (min-width:681px) {
  .action-bar .btn--lg { flex:0 0 auto; min-width:140px; }
}

/* ---------------- Estados ---------------- */
.state { text-align:center; padding:40px 20px; color:var(--muted); }
.state--loading { display:flex; flex-direction:column; align-items:center; gap:12px; }
.spinner { width:34px; height:34px; border-radius:50%; border:3px solid var(--g-100); border-top-color:var(--g-600); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg);} }
.state-ico { width:76px; height:76px; border-radius:50%; background:var(--g-50); color:var(--g-500);
  display:grid; place-items:center; margin:0 auto 12px; }
.state--empty h3 { color:var(--g-800); }
.state--compacto { padding:14px 20px; display:flex; align-items:center; justify-content:center; gap:10px; text-align:left; }
.state--compacto .state-ico { width:36px; height:36px; margin:0; flex:none; }
.state--compacto h3 { font-size:14px; margin:0; }
.state--compacto p { display:none; }

/* ---------------- Toast ----------------
   Posicionado logo abaixo da barra superior (não mais no rodapé) — fica
   perto de onde o usuário olha ao interagir com ações da topbar. Cores:
   usa os tokens de tema (--g-900/--g-700/--danger/--info) que já invertem
   sozinhos claro<->escuro (ver :root[data-theme="dark"] no topo do
   arquivo) + texto em --card — resultado é sempre um toast ESCURO no tema
   claro e CLARO no tema escuro, sem precisar de overrides por tema aqui. */
#toast-host { position:fixed; left:50%; top:calc(64px + env(safe-area-inset-top)); transform:translateX(-50%);
  z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:min(92%,420px); }
.toast { display:flex; align-items:center; gap:10px; background:var(--g-900); color:var(--card); padding:12px 16px;
  border-radius:12px; box-shadow:var(--sh-2); font-size:.88rem; font-weight:600; animation:toastin .25s ease; width:100%; }
.toast--ok { background:var(--g-700); }
.toast--erro { background:var(--danger); color:var(--card); }
.toast--info { background:var(--info); }
.toast--out { animation:toastout .4s ease forwards; }
@keyframes toastin { from { opacity:0; transform:translateY(10px);} }
@keyframes toastout { to { opacity:0; transform:translateY(10px);} }

/* ---------------- Modal ---------------- */
#modal-host { position:fixed; inset:0; z-index:70; display:none; }
#modal-host.open { display:block; }
.modal-overlay { position:absolute; inset:0; background:rgba(18,40,28,.5); display:flex; align-items:flex-end; justify-content:center; padding:0; }
.modal-card { background:var(--card); border-radius:18px 18px 0 0; width:100%; max-width:520px; max-height:88vh; overflow:auto;
  box-shadow:var(--sh-2); animation:sheet .25s ease; }
/* Modal largo (prévias de importação em massa) — todas as colunas da
   planilha visíveis de uma vez, sem precisar rolar a tabela na horizontal. */
.modal-card--lg { max-width:min(96vw, 1320px); }
/* Borda discreta só no modal de detalhe da requisição
   (src/screens/solicitacoes.js) — os demais modais do app continuam sem
   borda, só com a sombra padrão. */
.modal-card--solicitacao { border:1px solid var(--line); }
@keyframes sheet { from { transform:translateY(30px); opacity:.6;} }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 8px; }
.modal-head h3 { color:var(--g-900); }
.modal-body { padding:4px 18px 12px; }
.modal-foot { display:flex; gap:10px; justify-content:flex-end; padding:12px 18px 20px; flex-wrap:wrap; }
/* Destaca o número no título do modal (ex.: detalhe de requisição em
   src/screens/solicitacoes.js) sem alterar o .modal-head h3 padrão usado
   pelos demais modais do app. */
.modal-titulo-destaque { color:var(--g-700); font-weight:900; font-size:1.08em; }
/* Janelas de aviso/alerta (variante:'aviso' — sino de atualização, avisos
   cadastrados em Cadastros · Avisos): aparecem coladas na barra superior,
   não no sheet inferior padrão, com cores invertidas por tema (mesmo
   princípio do toast) para se destacarem como notificação. */
/* Janela de aviso no estilo alerta iOS/iPhone: barra de título colada no
   topo, numa cor sólida (mesmo verde do cabeçalho das listagens), e o
   corpo (mensagem + botões) num tom claro que contrasta com ela — em vez
   do cartão inteiro numa cor só. overflow:hidden é o que faz o fundo da
   barra de título respeitar o border-radius arredondado do card. */
/* Centralizado na tela, retrato ou paisagem (align-items/justify-content
   centralizam em qualquer proporção de tela, sem precisar de media query
   por orientação) — tanto o aviso do sino de atualização quanto os avisos
   cadastrados em Cadastros · Avisos usam esta mesma variante. */
.modal-overlay.modal-overlay--aviso { align-items:center; justify-content:center; padding:16px; }
.modal-card.modal-card--aviso { border-radius:16px !important; width:100%; max-width:340px; background:var(--card); color:var(--ink);
  animation:toastin .25s ease; overflow:hidden; box-shadow:var(--sh-2); text-align:center; }
/* Sem barra de título colorida nem botão de fechar (X) — só o ícone +
   título dentro do corpo (ver .aviso-popup__cabecalho) e o botão OK no
   rodapé, igual ao alerta nativo de sistema (Android/iOS). */
.modal-card--aviso .modal-head { display:none; }
.modal-card--aviso .modal-body { padding:22px 20px 18px; }
.modal-card--aviso .modal-body,
.modal-card--aviso .modal-body p { color:var(--ink); }
.modal-card--aviso .aviso-popup { align-items:center; text-align:center; }
/* Botões no rodapé separados por um traço fino (padrão de alerta iOS),
   sempre centralizados e ocupando a largura toda. */
.modal-card--aviso .modal-foot { justify-content:center; padding:0; gap:0; border-top:1px solid var(--line); margin-top:4px; }
.modal-card--aviso .modal-foot .btn {
  flex:1 1 0; border-radius:0; border:0; background:none !important; color:var(--g-700);
  font-weight:700; padding:14px 10px; box-shadow:none; }
:root[data-theme="dark"] .modal-card--aviso .modal-foot .btn { color:var(--g-fill); }
.modal-card--aviso .modal-foot .btn:not(:last-child) { border-right:1px solid var(--line); }
.modal-card--aviso .modal-foot .btn--danger { color:var(--danger); }
.modal-card--aviso .modal-foot .btn:hover { background:var(--g-50); }
/* Bloco levemente separado (documento gerado + aprovações) dentro do modal
   de detalhe da requisição — mesma linguagem visual dos cards do app. */
.detalhe-bloco { background:var(--g-50); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 12px; margin-top:10px; }
.detalhe-bloco > * + * { margin-top:6px; }

/* ---------------- Login ---------------- */
/* Fundo (opcional) definido pelo time de TI em Configurações › Aparência —
   uma imagem para desktop e outra para mobile (ver blocoFundoLogin em
   configuracoes.js). login.js grava cada uma numa custom property
   (--login-bg-desktop / --login-bg-mobile); o media query abaixo escolhe
   qual usar por largura de tela — puro CSS, então reage sozinho ao
   redimensionar a janela, sem listener em JS. Sem nenhuma configurada, cai
   no gradiente padrão. background-size:cover mantém o comportamento
   responsivo (a imagem sempre preenche a tela, recentralizada) nas duas
   versões. */
.login { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:28px 18px;
  --login-bg-padrao: linear-gradient(160deg, #1f6b3b 0%, #143c25 55%, #0c130f 100%);
  background-image: linear-gradient(180deg, rgba(14,19,16,.55), rgba(14,19,16,.55)), var(--login-bg-mobile, var(--login-bg-padrao));
  background-repeat:no-repeat; background-position:center center; background-size:cover; }
@media (min-width:900px) {
  .login { background-image: linear-gradient(180deg, rgba(14,19,16,.55), rgba(14,19,16,.55)), var(--login-bg-desktop, var(--login-bg-padrao)); }
}
.login__top { width:min(100%,420px); display:flex; align-items:center; justify-content:center; gap:8px; }
.login__top .icon-btn { color:rgba(255,255,255,.85); }
.login__top .icon-btn:hover { background:rgba(255,255,255,.14); color:#fff; }
.login__top .lang-switch__btn { border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); }
.login__top .lang-switch__btn:hover { background:rgba(255,255,255,.14); color:#fff; }
.login__brand { text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
/* Sem fundo/padding/sombra atrás do logo — aplicado direto sobre o fundo
   da tela de login, sem nenhuma base própria. Por isso agora há uma
   variante clara e outra escura configuráveis (TI - Configuração ›
   Aparência), pra cada uma continuar legível no fundo em que aparece. */
.login__logo { height:56px; width:auto; display:block; margin-bottom:4px; }
.login__brand h1 { color:#fff; font-size:1.5rem; font-weight:700; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.login__brand p { color:rgba(255,255,255,.85); max-width:320px; }
.login__card { background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--sh-2);
  padding:24px; width:min(100%,420px); }
.login__card h2 { color:var(--g-900); }
.login__card > .btn { margin:16px 0 8px; }
.login__facts { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.login__facts li { display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--g-800); }
.login__facts .ico { color:var(--g-600); flex:none; }
.login__demo-hint { display:flex; gap:8px; align-items:flex-start; margin-top:16px; padding:10px 12px;
  background:var(--warn-bg); border-radius:12px; font-size:.78rem; color:var(--warn); }
.login__demo-hint .ico { flex:none; }
.login__foot { text-align:center; font-size:.74rem; max-width:420px; }

/* Perfil grid (modal login) */
.perfil-grid { display:grid; gap:10px; }
.perfil-card { display:flex; align-items:center; gap:14px; text-align:left; padding:14px; border-radius:14px;
  border:1.5px solid var(--line); background:var(--card); cursor:pointer; min-height:var(--tap); }
.perfil-card:hover { border-color:var(--g-500); background:var(--g-50); }
.perfil-card__ico { width:48px; height:48px; border-radius:12px; background:var(--g-100); color:var(--g-700);
  display:grid; place-items:center; flex:none; }
.perfil-card strong { display:block; color:var(--g-900); }
.perfil-card span { font-size:.78rem; }
.perfil-card > .ico { margin-left:auto; color:var(--muted); transform:rotate(180deg); }

/* ---------------- CTA (usuário) ---------------- */
.cta { display:flex; align-items:center; gap:14px; padding:16px; border-radius:var(--radius);
  background:linear-gradient(120deg,var(--g-700),var(--g-800)); color:#fff; box-shadow:var(--sh-2); margin-bottom:18px; flex-wrap:wrap; }
.cta__ico { width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.15); display:grid; place-items:center; flex:none; }
.cta__txt { flex:1; min-width:160px; line-height:1.25; }
.cta__txt strong { display:block; font-size:1rem; } .cta__txt span { font-size:.82rem; opacity:.9; }
.cta__actions { display:flex; gap:8px; flex-wrap:wrap; }
.cta .btn--primary { background:#fff; color:#164a2c; }
.cta .btn--primary:hover:not(:disabled) { background:#f0f5f2; }
.cta__reject { background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.cta__reject:hover { background:rgba(255,255,255,.14); }

/* ---------------- Envio remoto / QR ---------------- */
.ship { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.qr { background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px; display:grid; place-items:center; flex:none; }
.ship-foto { display:block; width:100%; max-width:300px; border-radius:12px; border:1px solid var(--line); margin-top:4px; }
.filters__row .input[type="date"] { max-width:190px; }
.qr-art { display:block; border-radius:6px; }

/* ---------------- Comprovação (detalhe + sucesso) ---------------- */
.comprov-grid { display:grid; grid-template-columns:1fr; gap:14px; margin-top:12px; }
.foto-ph { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:var(--g-50); border:1.5px dashed var(--line); border-radius:12px; color:var(--muted);
  min-height:120px; text-align:center; font-size:.8rem; }
.foto-ph--lg { min-height:200px; }
.foto-img { width:100%; border-radius:12px; display:block; border:1px solid var(--line); }
/* Galeria de fotos (uma por item da ficha — ver passoFoto em
   src/screens/recebimento.js): miniaturas lado a lado em vez de uma única
   foto grande, tanto na conclusão do recebimento quanto no comprovante. */
.foto-galeria { display:flex; flex-wrap:wrap; gap:8px; }
.foto-img--sm { width:calc(50% - 4px); border-radius:10px; }
.aparencia-preview { margin-top:10px; }
.aparencia-preview img { width:100%; max-width:480px; border-radius:12px; border:1px solid var(--line); display:block; }
/* Logo tela de login / barra superior: 2 slots (tema claro/escuro) lado a
   lado dentro do mesmo card — ver slotImagem em configuracoes.js. */
.logo-slots { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:4px; }
@media (max-width:480px) {
  .logo-slots { grid-template-columns:1fr; }
}
.logo-slot__rotulo { margin:0; font-size:.76rem; font-weight:700; color:var(--g-700); text-align:center; }
.aparencia-preview--fundo { width:160px; height:160px; overflow:hidden; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--g-50); }
.aparencia-preview--fundo img { width:160px; height:160px; max-width:160px; object-fit:contain; }
.comprov-sign { margin-top:10px; border:1px solid var(--line); border-radius:12px; padding:8px 12px; background:#fff; }
.sign-img { display:block; width:100%; max-height:120px; object-fit:contain; }
.sign-art { width:100%; height:60px; color:var(--g-900); display:block; }

.termo { font-size:.9rem; color:var(--g-800); background:var(--g-50); border-left:3px solid var(--g-500);
  padding:12px 14px; border-radius:8px; }

/* ---------------- Wizard ---------------- */
.page--wizard { max-width:760px; margin:0 auto; }
.wizard-banner { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px;
  font-size:.85rem; margin-bottom:16px; }
.wb--usr { background:var(--g-50); color:var(--g-800); border:1px solid var(--line); }
.wb--sup { background:var(--info-bg); color:var(--info); border:1px solid #d5e3f7; }
.wizard-banner .ico { flex:none; }

.stepper { display:flex; gap:4px; overflow-x:auto; padding:4px 0 14px; }
.stepper__i { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; min-width:64px; position:relative; }
.stepper__i::before { content:""; position:absolute; top:15px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0; }
.stepper__i:first-child::before { display:none; }
.stepper__i.is-done::before, .stepper__i.is-now::before { background:var(--g-500); }
.stepper__dot { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; z-index:1;
  background:var(--card); border:2px solid var(--line); color:var(--muted); }
.stepper__i.is-done .stepper__dot { background:var(--g-600); border-color:var(--g-600); color:#fff; }
.stepper__i.is-now .stepper__dot { border-color:var(--g-600); color:var(--g-700); box-shadow:0 0 0 4px rgba(51,160,106,.15); }
.stepper__i span { font-size:.66rem; color:var(--muted); text-align:center; }
.stepper__i.is-now span { color:var(--g-800); font-weight:700; }

.wizard-step { animation:fade .2s ease; }
.wizard-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px; }
.wizard-nav__r { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.nav-aviso { display:flex; align-items:center; gap:5px; font-size:.78rem; }

.big-ico { width:84px; height:84px; border-radius:50%; margin:6px auto 10px; display:grid; place-items:center;
  background:var(--g-100); color:var(--g-700); }
.big-ico--ok { background:#dff3e7; }
.id-chip { display:flex; align-items:center; gap:14px; text-align:left; background:var(--g-50);
  border:1px solid var(--line); border-radius:14px; padding:14px; margin:14px auto; max-width:420px; }

.foto-box { position:relative; margin-bottom:12px; }
.foto-badge { position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:4px;
  background:var(--g-700); color:#fff; font-size:.72rem; font-weight:700; padding:5px 10px; border-radius:999px; }
.foto-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

.sign-wrap { position:relative; border:1.5px solid var(--line); border-radius:12px; background:#fff; touch-action:none; overflow:hidden; }
.sign-canvas { display:block; width:100%; height:220px; touch-action:none; cursor:crosshair; }
.sign-line { position:absolute; left:20px; right:20px; bottom:38px; border-bottom:1.5px dashed var(--line); pointer-events:none; }
.sign-info { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:10px; }
.sign-info__geo { display:inline-flex; align-items:center; gap:4px; }
.conf-reject { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:4px; }
/* Histórico / log da ficha */
.log-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.log-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-2); }
.log-item:last-child { border-bottom:0; }
.log-dot { width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--g-100); color:var(--g-700); }
.log-acao { font-size:.9rem; font-weight:600; color:var(--ink); }
.otp { text-align:center; letter-spacing:.5em; font-size:1.6rem; font-weight:700; max-width:260px; margin:8px auto; padding-left:.5em; }

/* Sucesso */
.success { text-align:center; max-width:560px; margin:0 auto; animation:fade .3s ease; }
.success__badge { width:92px; height:92px; border-radius:50%; margin:8px auto 12px; display:grid; place-items:center;
  background:#dff3e7; color:var(--g-700); animation:pop .4s ease; }
@keyframes pop { 0% { transform:scale(.5); opacity:0;} 60% { transform:scale(1.1);} 100% { transform:scale(1);} }
.success h1 { color:var(--g-900); }
.comprovante { text-align:left; margin-top:16px; }
.comprovante__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
  border-bottom:1px dashed var(--line); padding-bottom:10px; }

.is-switching { opacity:.5; pointer-events:none; }

/* =====================================================================
   DESKTOP  (≥ 900px)
   ===================================================================== */
@media (min-width:900px) {
  body { font-size:15.5px; }
  .content { padding:26px 28px 40px; }
  /* Sem position:sticky: o pai (.shell-body) não rola mais, então o menu
     já fica fixo naturalmente — só ele mesmo ganha scroll próprio
     (overflow-y:auto) para o caso de ter mais itens do que cabem na tela. */
  .sidenav { display:flex; flex-direction:column; gap:4px; width:220px; flex:none;
    padding:22px 14px; border-right:1px solid var(--line);
    height:100%; overflow-y:auto; }
  .navitem { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
    border:0; background:none; cursor:pointer; color:var(--g-800); font-size:.92rem; font-weight:600; text-align:left; }
  .navitem:hover { background:var(--g-50); }
  .navitem.is-active { background:linear-gradient(120deg,var(--g-600),var(--g-700)); color:#fff; box-shadow:var(--sh-1); }
  .navitem.is-active .ico { color:#fff; }
  .navitem .ico { color:var(--g-700); }
  .bottomnav { display:none; }
  .content { padding-bottom:40px; }
  .user-chip__txt { display:block; }

  /* :not(...) evita que essa regra (mesma especificidade, declarada depois
     no arquivo) sobrescreva o número de colunas de .kpi-grid--sec/--responsiva
     quando ambas as classes estão no mesmo elemento — sem isso, 3 cards
     (ex.: Pendente/Em Aberto/Enviado em src/screens/fichas.js) viravam um
     grid de 4 colunas no desktop, deixando uma coluna vazia em vez de
     preencher a linha inteira. .kpi-grid--2 (ex.: Conciliação de estoque,
     2 cards) tinha o mesmo problema — 2 colunas vazias sobrando à direita. */
  .kpi-grid:not(.kpi-grid--sec):not(.kpi-grid--responsiva):not(.kpi-grid--7col):not(.kpi-grid--2) { grid-template-columns:repeat(4,1fr); }
  .comprov-grid { grid-template-columns:1fr 1fr; align-items:start; }
  .info-card { flex-direction:row; align-items:center; justify-content:space-between; }
  .info-meta { grid-template-columns:repeat(2,auto); border-top:0; border-left:1px solid var(--line-2); padding:0 0 0 24px; }
  .modal-overlay { align-items:center; padding:20px; }
  .modal-card { border-radius:18px; }
}

/* Menu agrupado: rótulo de seção estático (sempre expandido) + subitens */
.navgroup { display:flex; flex-direction:column; gap:2px; margin-top:14px; }
.navgroup:first-child { margin-top:0; }
.navgroup__head { display:flex; align-items:center; gap:8px; padding:6px 14px; width:100%;
  border:0; background:none; cursor:pointer;
  color:var(--muted); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.navgroup__head .ico { color:var(--muted); width:15px; height:15px; }
.navgroup__head.is-active { color:var(--g-700); }
.navgroup__head.is-active .ico { color:var(--g-700); }
.navgroup__chev { margin-left:auto; display:flex; }
.navgroup__chev .ico { transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.navgroup:not(.is-open) .navgroup__chev .ico { transform:rotate(-90deg); }
/* Retrátil: grid-template-rows 0fr/1fr anima a altura sem precisar medir o
   conteúdo em JS (truque de acordeão em CSS puro). cubic-bezier(.34,1.56,.64,1)
   ("easeOutBack") dá o efeito elástico — a altura passa levemente do ponto
   final e volta, em vez de parar seca. Opacidade + deslocamento nos itens
   internos reforçam a sensação de "mola" ao abrir. */
.navgroup__body { display:grid; grid-template-rows:1fr; transition:grid-template-rows .4s cubic-bezier(.34,1.56,.64,1); }
.navgroup:not(.is-open) .navgroup__body { grid-template-rows:0fr; }
.navgroup__body-inner { display:flex; flex-direction:column; gap:2px; overflow:hidden; min-height:0;
  opacity:1; transform:translateY(0); transition:opacity .32s ease .06s, transform .32s cubic-bezier(.34,1.56,.64,1) .06s; }
.navgroup:not(.is-open) .navgroup__body-inner { opacity:0; transform:translateY(-14px); transition:opacity .16s ease, transform .16s ease; }
.navgroup__body .navitem { font-size:.88rem; padding:10px 14px 10px 28px; }

/* Topo compacto em telas estreitas (app / celular) */
@media (max-width:600px) {
  .topbar { padding:8px 10px; gap:8px; }
  .topbar__right { gap:6px; }
  .brand { gap:8px; }
  .brand-logo { height:24px; max-width:120px; object-fit:contain; }
  .topbar__title { display:none; }
  .brand-word { font-size:.95rem; }
  .theme-toggle { width:36px; height:36px; }
  .user-chip { gap:2px; }
  .topbar .user-chip .avatar { width:34px; height:34px; font-size:.75rem; }
  .user-chip .icon-btn { width:36px; height:36px; }
}

/* Anexo de foto na rejeição */
.rej-foto { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:2px 0 4px; }
.rej-foto__img { width:100%; max-width:260px; border-radius:12px; border:1px solid var(--line); display:block; }
.field-erro { color:var(--danger); font-size:.8rem; margin:6px 0 0; }

/* Lista de e-mails em cópia (TI - Configuração › Cópia de E-mails) —
   altura fixa de 5 linhas (5 x 38px), com rolagem vertical própria quando
   há mais e-mails que isso, em vez de esticar o card. */
/* overflow-y:scroll (não auto): a barra de rolagem vertical fica sempre
   visível, mesmo com poucos ou nenhum e-mail cadastrado — não só quando o
   conteúdo excede as 5 linhas. */
.email-lista { height:190px; overflow-y:scroll; border:1px solid var(--line); border-radius:10px; margin-top:8px; }
.email-lista__row { display:flex; align-items:center; justify-content:space-between; gap:8px;
  height:38px; padding:0 6px 0 12px; border-bottom:1px solid var(--line-2); font-size:.88rem; }
.email-lista__row:last-child { border-bottom:0; }
.email-lista__row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.email-lista__row .icon-btn { width:30px; height:30px; flex:none; }

/* Acessibilidade: respeitar preferências de movimento */
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------------- Área SHE-EPI: painel (ver .dash-status-grid acima) ---------------- */