/* ============================================================================
   Portal do Prestador — SEMUS Vilhena
   Identidade visual alinhada com https://semusvilhena.com
   Refresh visual 2026-05-13 — tipografia Inter, elevation moderna, espaçamento 8pt
   Acessibilidade: eMAG (Modelo de Acessibilidade em Governo Eletrônico)
   - 3 temas: claro, escuro, alto contraste
   - 3 níveis de fonte: A− (87%), A (100%), A+ (115%)
   - Skip link amarelo, focus amarelo, prefers-reduced-motion, ARIA-friendly
   ============================================================================ */

/* ---------- Tokens canônicos (tema claro) ---------- */
:root {
  /* Paleta institucional — canônica (mesma de semusvilhena.com) */
  --azul-semus: #003a70;
  --azul-claro: #1565c0;
  --azul-suave: #e8f0f8;
  --azul-profundo: #00264a;
  --azul-vibrante: #1976d2;
  --amarelo: #fbc02d;
  --amarelo-suave: #fff8e1;
  --amarelo-vivo: #ffd54f;
  --verde: #2e7d32;
  --vermelho: #c62828;
  --vermelho-escuro: #a32020;

  /* Gradientes derivados */
  --grad-azul: linear-gradient(135deg, var(--azul-semus) 0%, var(--azul-vibrante) 100%);
  --grad-amarelo: linear-gradient(135deg, var(--amarelo) 0%, var(--amarelo-vivo) 100%);

  /* Tokens semânticos (light) */
  --bg: #f4f6fa;
  --bg-elev: #ffffff;
  --bg-section: #ffffff;
  --bg-section-2: #eef2f7;
  --texto: #0f1a2b;
  --texto-suave: #5a6577;
  --texto-fraco: #8a95a5;
  --borda: #e3e8ef;
  --borda-forte: #c8d1de;

  /* Elevação multi-camada (sombras "soft") */
  --shadow-1: 0 1px 2px rgba(0, 58, 112, 0.06), 0 1px 1px rgba(0, 58, 112, 0.04);
  --shadow-sm: var(--shadow-1);
  --shadow-2: 0 4px 14px rgba(0, 58, 112, 0.08), 0 1px 3px rgba(0, 58, 112, 0.05);
  --shadow: var(--shadow-2);
  --shadow-3: 0 12px 28px rgba(0, 58, 112, 0.14), 0 4px 8px rgba(0, 58, 112, 0.06);
  --shadow-hover: var(--shadow-3);
  --shadow-4: 0 24px 48px rgba(0, 58, 112, 0.18), 0 8px 16px rgba(0, 58, 112, 0.08);

  /* Estado (alerts) */
  --success-bg: #e6f4ea;        --success-fg: #1b5e20;       --success-border: #a5d6a7;
  --error-bg: #fdecea;          --error-fg: #8a1c10;         --error-border: #ef9a9a;
  --info-bg: #e3f0fb;           --info-fg: #0d3e6a;          --info-border: #90caf9;
  --warn-bg: #fff8e1;           --warn-fg: #5a4202;          --warn-border: #ffe082;

  /* Badges (status) */
  --badge-rascunho-bg: #eceff3;          --badge-rascunho-fg: #383d41;          --badge-rascunho-dot: #6b7280;
  --badge-aguardando_email-bg: #fde7c2;  --badge-aguardando_email-fg: #6b3f00;  --badge-aguardando_email-dot: #f59e0b;
  --badge-pendente-bg: #fff3cd;          --badge-pendente-fg: #664d03;          --badge-pendente-dot: #eab308;
  --badge-submetida-bg: #dbeafe;         --badge-submetida-fg: #084298;         --badge-submetida-dot: #2563eb;
  --badge-em_analise-bg: #fff3cd;        --badge-em_analise-fg: #664d03;        --badge-em_analise-dot: #ca8a04;
  --badge-aprovada-bg: #d1e7dd;          --badge-aprovada-fg: #0f5132;          --badge-aprovada-dot: #16a34a;
  --badge-finalizada-bg: #d2f4ea;        --badge-finalizada-fg: #0c5d4f;        --badge-finalizada-dot: #14b8a6;
  --badge-ativo-bg: #d1e7dd;             --badge-ativo-fg: #0f5132;             --badge-ativo-dot: #16a34a;
  --badge-devolvida-bg: #f8d7da;         --badge-devolvida-fg: #842029;         --badge-devolvida-dot: #dc2626;
  --badge-suspenso-bg: #f8d7da;          --badge-suspenso-fg: #842029;          --badge-suspenso-dot: #dc2626;

  /* Espaçamento (escala 8pt) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Layout / radius */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Tipografia */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --font-scale: 1;
  font-size: calc(16px * var(--font-scale));

  /* Aliases legados (compat com index.html e classes existentes) */
  --semus-primary: var(--azul-semus);
  --semus-primary-hover: var(--azul-claro);
  --semus-primary-fg: #ffffff;
  --semus-accent: var(--azul-claro);
  --semus-secondary: var(--verde);
  --surface: var(--bg-elev);
  --surface-2: var(--bg-section-2);
  --border: var(--borda);
  --border-strong: var(--borda-forte);
  --text: var(--texto);
  --text-muted: var(--texto-suave);
  --text-on-primary: #ffffff;
}

/* ---------- Tema escuro ---------- */
[data-theme="dark"] {
  --azul-semus: #4d96f0;
  --azul-claro: #6fb0ff;
  --azul-suave: #1b2c45;
  --azul-profundo: #03152b;
  --azul-vibrante: #3b82f6;
  --amarelo: #fbc02d;
  --amarelo-suave: #4a3a0e;
  --amarelo-vivo: #ffd54f;
  --verde: #4caf50;
  --vermelho: #ef5350;
  --vermelho-escuro: #c62828;

  --grad-azul: linear-gradient(135deg, #1a3a6b 0%, #2e5c9e 100%);
  --grad-amarelo: linear-gradient(135deg, var(--amarelo) 0%, var(--amarelo-vivo) 100%);

  --bg: #0a1320;
  --bg-elev: #15202d;
  --bg-section: #1c2835;
  --bg-section-2: #1e3450;
  --texto: #e7edf3;
  --texto-suave: #9aa4b1;
  --texto-fraco: #6b7785;
  --borda: #2a3744;
  --borda-forte: #3e6791;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: var(--shadow-1);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow: var(--shadow-2);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-hover: var(--shadow-3);
  --shadow-4: 0 24px 56px rgba(0, 0, 0, 0.65), 0 8px 16px rgba(0, 0, 0, 0.45);

  --success-bg: #1c3b27;        --success-fg: #8fd4a4;        --success-border: #2e5c39;
  --error-bg: #432025;          --error-fg: #f5a8b0;          --error-border: #6b3137;
  --info-bg: #142b40;            --info-fg: #99c5e8;           --info-border: #1e4060;
  --warn-bg: #3e3211;            --warn-fg: #ffd863;           --warn-border: #5a4a1c;

  --badge-rascunho-bg: #2a3038;          --badge-rascunho-fg: #c1c8d1;          --badge-rascunho-dot: #9ca3af;
  --badge-aguardando_email-bg: #4a3415;  --badge-aguardando_email-fg: #f4c98b;  --badge-aguardando_email-dot: #fbbf24;
  --badge-pendente-bg: #4a3815;          --badge-pendente-fg: #ffd863;          --badge-pendente-dot: #facc15;
  --badge-submetida-bg: #1c3759;         --badge-submetida-fg: #9ec4ff;         --badge-submetida-dot: #60a5fa;
  --badge-em_analise-bg: #4a3815;        --badge-em_analise-fg: #ffd863;        --badge-em_analise-dot: #facc15;
  --badge-aprovada-bg: #1a3d28;          --badge-aprovada-fg: #95d4ad;          --badge-aprovada-dot: #4ade80;
  --badge-finalizada-bg: #0f3a33;        --badge-finalizada-fg: #7fe0cd;        --badge-finalizada-dot: #2dd4bf;
  --badge-ativo-bg: #1a3d28;             --badge-ativo-fg: #95d4ad;             --badge-ativo-dot: #4ade80;
  --badge-devolvida-bg: #432025;         --badge-devolvida-fg: #f5a8b0;         --badge-devolvida-dot: #f87171;
  --badge-suspenso-bg: #432025;          --badge-suspenso-fg: #f5a8b0;          --badge-suspenso-dot: #f87171;

  --semus-primary-fg: #06182d;
  --text-on-primary: #06182d;
}

/* ---------- Alto contraste (WCAG AAA — padrão canônico) ----------
   Fundo preto, texto branco, acento amarelo brilhante.
   Bordas amarelas reforçadas em containers principais.
   ============================================================ */
[data-contrast="high"] {
  --bg: #000000;
  --bg-elev: #000000;
  --bg-section: #000000;
  --bg-section-2: #1a1a1a;
  --texto: #ffffff;
  --texto-suave: #ffffff;
  --texto-fraco: #cccccc;
  --borda: #ffffff;
  --borda-forte: #ffffff;
  --azul-semus: #ffeb3b;
  --azul-claro: #ffeb3b;
  --azul-suave: #000000;
  --azul-vibrante: #ffeb3b;
  --amarelo: #ffeb3b;
  --verde: #69f0ae;
  --vermelho: #ff8a80;
  --vermelho-escuro: #ff5252;
  --grad-azul: none;
  --grad-amarelo: none;
  --shadow-1: none;
  --shadow-sm: none;
  --shadow-2: none;
  --shadow: none;
  --shadow-3: none;
  --shadow-hover: none;
  --shadow-4: none;

  --semus-primary-fg: #000000;
  --text-on-primary: #000000;
}

[data-contrast="high"] .site-header,
[data-contrast="high"] .site-footer,
[data-contrast="high"] .info-card,
[data-contrast="high"] .form,
[data-contrast="high"] .tbl,
[data-contrast="high"] .det-meta,
[data-contrast="high"] .upload-box,
[data-contrast="high"] .atesto-form {
  border: 2px solid #ffeb3b !important;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--font-base);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--texto);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background 0.25s, color 0.25s;
}
main { flex: 1 0 auto; padding: var(--space-6) 0 var(--space-8); }
.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-5); }

a { color: var(--azul-claro); text-decoration: none; transition: color 0.15s; }
a:hover, a:focus-visible { text-decoration: underline; }

h1 {
  color: var(--azul-semus);
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.022em;
}
h2 {
  color: var(--azul-semus);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
h3 {
  font-size: 1rem;
  color: var(--texto);
  font-weight: 700;
  margin: var(--space-2) 0;
  letter-spacing: -0.005em;
}
p { margin: 0.6em 0; }

/* ---------- Skip link (a11y eMAG — padrão canônico) ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--amarelo);
  color: var(--azul-semus);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: 1000;
}
.skip-link:focus { left: 0; text-decoration: none; outline: 2px solid var(--azul-semus); outline-offset: -4px; }

/* ---------- Focus visível universal (a11y — amarelo canônico) ---------- */
*:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
  border-radius: var(--radius);
}
a, button { -webkit-tap-highlight-color: transparent; }

/* ---------- Header institucional (sticky branco com glass blur — canônico) ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.85);
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
[data-theme="dark"] .site-header {
  background: rgba(15, 26, 43, 0.85);
}
[data-contrast="high"] .site-header {
  background: #000000;
  backdrop-filter: none;
}
.header-row {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.65rem 1.25rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  font-weight: 700;
}
.brand:hover, .brand:focus-visible { text-decoration: none; }
.brand .logo {
  width: 40px; height: 40px;
  background: var(--grad-azul);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.9rem;
  border-radius: var(--radius-md);
  letter-spacing: -0.02em;
  box-shadow: 0 4px 10px rgba(0, 58, 112, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-weight: 700; font-size: 1rem; color: var(--texto); letter-spacing: -0.01em; }
.brand-text small { font-size: 0.78rem; color: var(--texto-suave); letter-spacing: 0.2px; }

/* ---------- Controles de acessibilidade ---------- */
.a11y-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.a11y-bar button {
  background: transparent;
  color: var(--texto-suave);
  border: 1.5px solid var(--borda);
  padding: 0.42rem 0.8rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s;
}
.a11y-bar button:hover {
  border-color: var(--azul-claro);
  color: var(--azul-claro);
}
.a11y-bar button:active { transform: translateY(1px); }
.a11y-bar button[aria-pressed="true"] {
  background: var(--azul-semus);
  border-color: var(--azul-semus);
  color: #ffffff;
}
.a11y-bar .sep {
  width: 1px;
  height: 24px;
  background: var(--borda);
  margin: 0 0.3rem;
}
.font-controls { display: inline-flex; gap: 0.2rem; }
.font-controls button { min-width: 38px; }

/* ---------- Userbox (logado) ---------- */
.userbox {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--texto);
}
.userbox .user-link {
  color: var(--texto);
  text-decoration: none;
  border-bottom: 1px dotted var(--borda-forte);
  font-weight: 600;
  transition: color 0.15s, border-color 0.15s;
}
.userbox .user-link:hover { border-bottom-color: var(--azul-claro); color: var(--azul-claro); }
.userbox .papel {
  background: var(--azul-suave);
  color: var(--azul-semus);
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.userbox button {
  background: transparent;
  color: var(--texto-suave);
  border: 1.5px solid var(--borda);
  padding: 0.38rem 0.9rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.15s;
}
.userbox button:hover { border-color: var(--vermelho); color: var(--vermelho); }

/* Nav links extras (atesto / usuários — admin SEMUS) */
.brand + a, .a11y-bar > a {
  color: var(--texto-suave);
  text-decoration: none;
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1.5px solid transparent;
  transition: all 0.15s;
}
.brand + a:hover, .a11y-bar > a:hover {
  background: var(--azul-suave);
  color: var(--azul-semus);
  text-decoration: none;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 10px 20px;
  background: var(--bg-elev);
  color: var(--azul-semus);
  text-decoration: none;
  border: 1.5px solid var(--azul-semus);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
}
.btn:hover, .btn:focus-visible {
  background: var(--azul-suave);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.btn:active { transform: translateY(0); box-shadow: none; }
/* CTA padrão do portal: pill amarelo institucional.
   Variante azul/outline continua disponível via .btn (sem .primary). */
.btn.primary {
  background: var(--amarelo);
  color: var(--azul-profundo);
  border-color: var(--amarelo);
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(251, 192, 45, 0.38);
}
.btn.primary:hover, .btn.primary:focus-visible {
  background: var(--amarelo-vivo);
  border-color: var(--amarelo-vivo);
  color: var(--azul-profundo);
  box-shadow: 0 8px 22px rgba(251, 192, 45, 0.48);
  transform: translateY(-2px);
}
.btn.warn {
  background: var(--vermelho);
  color: #ffffff;
  border-color: var(--vermelho);
  box-shadow: 0 4px 12px rgba(198, 40, 40, 0.18);
}
.btn.warn:hover {
  background: var(--vermelho-escuro);
  border-color: var(--vermelho-escuro);
  box-shadow: 0 6px 18px rgba(198, 40, 40, 0.32);
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
/* Variante compacta — ações inline em linhas de tabela (D3 inativar/reativar) */
.btn.btn-sm { padding: 5px 12px; font-size: 0.82rem; }

[data-theme="dark"] .btn:hover { color: var(--semus-primary-fg); }
/* .btn.primary já tem cor própria (azul-profundo) em qualquer tema —
   contraste verificado contra o amarelo institucional. */

/* ---------- Forms ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 540px;
  background: var(--bg-elev);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  border: 1px solid var(--borda);
}
.form label {
  display: flex;
  flex-direction: column;
  font-size: 0.86rem;
  color: var(--texto-suave);
  gap: 6px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* `display:flex` acima venceria o atributo `hidden` da UA — guarda explícita
   pra campos condicionais (ex.: seletor de empresa só p/ usuário SEMUS). */
.form label[hidden] { display: none; }
.form input, .form select, .form textarea {
  padding: 11px 14px;
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--radius);
  font-size: 0.96rem;
  font-family: inherit;
  background: var(--bg-elev);
  color: var(--texto);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.form input:hover:not(:focus):not(:disabled),
.form select:hover:not(:focus):not(:disabled),
.form textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--azul-claro);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 4px rgba(21, 101, 192, 0.16);
}
.form input:disabled { background: var(--bg-section-2); color: var(--texto-suave); cursor: not-allowed; }
.form a { color: var(--azul-claro); font-size: 0.9rem; font-weight: 600; }

/* Inputs checkbox/radio inline em labels */
.form label > input[type="checkbox"],
.form label > input[type="radio"] {
  width: auto;
  margin-right: 0.4em;
  accent-color: var(--azul-semus);
}

/* Fieldset de opções (ex.: tipo de produção) + labels em linha */
.form .form-fieldset {
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--radius);
  padding: 10px 14px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form .form-fieldset > legend {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--texto-suave);
  padding: 0 6px;
}
.form label.radio-inline,
.form label.check-inline {
  flex-direction: row;
  align-items: flex-start;
  font-weight: 500;
  color: var(--texto);
  gap: 0;
}
.form label.radio-inline > input,
.form label.check-inline > input {
  margin-top: 2px;
}

/* ---------- Tabelas ---------- */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: var(--space-3);
  background: var(--bg-elev);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--borda);
}
.tbl th, .tbl td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  font-size: 0.93rem;
}
.tbl thead th {
  background: var(--bg-section-2);
  font-weight: 700;
  color: var(--texto-suave);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1.5px solid var(--borda-forte);
}
.tbl tbody tr { transition: background 0.12s; }
.tbl tbody tr:hover { background: var(--azul-suave); }
.tbl tbody tr:last-child td { border-bottom: none; }

/* Cabeçalhos clicáveis — ordenar a tabela pela coluna (setupSortableTables) */
.tbl thead th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tbl thead th.sortable:hover { color: var(--azul-semus); }
.tbl thead th.sortable:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: -3px;
}
.tbl thead th.sortable::after {
  content: "↕";
  margin-left: 6px;
  opacity: 0.35;
  font-size: 0.9em;
}
.tbl thead th.sortable[aria-sort="ascending"]::after { content: "↑"; opacity: 1; }
.tbl thead th.sortable[aria-sort="descending"]::after { content: "↓"; opacity: 1; }

/* Ação na tabela (ex.: "editar") como botão compacto — não estoura a célula */
.acao-tabela {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--azul-semus);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}
.acao-tabela:hover { background: var(--azul-profundo); color: #fff; }
.acao-tabela:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.tbl td:last-child { white-space: nowrap; }

/* Scroll horizontal em tabelas SEM card-shell (telas estreitas).
   Tabelas dentro de .card-shell viram cards empilhados (bloco abaixo). */
@media (max-width: 720px) {
  .tbl:not(.card-shell .tbl) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ---------- Lista de submissões ---------- */
.lista-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ---------- Alerts ---------- */
.alert {
  padding: 14px 20px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border: 1px solid;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: var(--shadow-1);
}
.alert.success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.alert.error   { background: var(--error-bg);   color: var(--error-fg);   border-color: var(--error-border); }
.alert.info    { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-border); }
.alert.warn    { background: var(--warn-bg);    color: var(--warn-fg);    border-color: var(--warn-border); }

/* CTA destacado — usado quando o envio do código falhou e queremos guiar o
   usuário até o link "Reenviar" (finding Hermes #4). */
.cta-destaque {
  display: inline-block;
  font-weight: 700 !important;
  color: var(--warn-fg) !important;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 12px;
  margin-top: 4px;
  text-decoration: none;
}

/* ---------- Badges com dot colorido ---------- */
/* `display:inline-flex` venceria o [hidden] da UA — guarda explícita. */
.badge[hidden] { display: none; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 4px 11px 4px 9px;
  background: var(--bg-section-2);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  color: var(--texto-suave);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.85;
}
.badge.rascunho         { background: var(--badge-rascunho-bg);         color: var(--badge-rascunho-fg); }
.badge.rascunho::before         { background: var(--badge-rascunho-dot); }
.badge.aguardando_email { background: var(--badge-aguardando_email-bg); color: var(--badge-aguardando_email-fg); }
.badge.aguardando_email::before { background: var(--badge-aguardando_email-dot); }
.badge.pendente         { background: var(--badge-pendente-bg);         color: var(--badge-pendente-fg); }
.badge.pendente::before         { background: var(--badge-pendente-dot); }
.badge.submetida        { background: var(--badge-submetida-bg);        color: var(--badge-submetida-fg); }
.badge.submetida::before        { background: var(--badge-submetida-dot); }
.badge.em_analise       { background: var(--badge-em_analise-bg);       color: var(--badge-em_analise-fg); }
.badge.em_analise::before       { background: var(--badge-em_analise-dot); }
.badge.aprovada         { background: var(--badge-aprovada-bg);         color: var(--badge-aprovada-fg); }
.badge.aprovada::before         { background: var(--badge-aprovada-dot); }
.badge.finalizada       { background: var(--badge-finalizada-bg);       color: var(--badge-finalizada-fg); }
.badge.finalizada::before       { background: var(--badge-finalizada-dot); }
.badge.ativo            { background: var(--badge-ativo-bg);            color: var(--badge-ativo-fg); }
.badge.ativo::before            { background: var(--badge-ativo-dot); }
.badge.devolvida        { background: var(--badge-devolvida-bg);        color: var(--badge-devolvida-fg); }
.badge.devolvida::before        { background: var(--badge-devolvida-dot); }
.badge.suspenso         { background: var(--badge-suspenso-bg);         color: var(--badge-suspenso-fg); }
.badge.suspenso::before         { background: var(--badge-suspenso-dot); }

/* ---------- Surfaces (cards genéricos: det-meta, upload-box, atesto-form) ---------- */
.det-meta,
.upload-box,
.atesto-form {
  background: var(--bg-elev);
  padding: var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--borda);
  box-shadow: var(--shadow-1);
  margin-top: var(--space-4);
  transition: box-shadow 0.2s, transform 0.2s;
}
.det-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  margin-top: 0;
}
.det-meta > div { font-size: 0.96rem; }
.det-meta strong { color: var(--texto); font-weight: 600; }

/* ---------- Bloco de download de modelos ---------- */
.modelos-download h3 { margin: 0 0 var(--space-2); color: var(--azul-semus); font-size: 1rem; }
.modelos-download .muted { margin: 0 0 var(--space-3); font-size: 0.9rem; line-height: 1.5; }
.modelos-download code {
  font-family: "Courier New", monospace;
  font-size: 0.88em;
  background: var(--bg-section-2);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--texto);
}
.modelos-links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}
.modelo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.modelo-btn:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}
.modelo-xlsx {
  background: var(--azul-semus);
  color: #ffffff;
  border: 1.5px solid var(--azul-semus);
}
.modelo-xlsx:hover {
  background: var(--azul-vibrante);
  border-color: var(--azul-vibrante);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.modelo-docx {
  background: transparent;
  color: var(--azul-semus);
  border: 1.5px solid var(--azul-semus);
}
.modelo-docx:hover {
  background: var(--azul-suave);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
/* Alto contraste */
[data-contrast="high"] .modelo-xlsx { background: #000; color: #fff; border-color: #fff; }
[data-contrast="high"] .modelo-docx { background: #000; color: #fff; border-color: #fff; }

.upload-box form { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.upload-box input[type="file"] {
  font-size: 0.92rem;
  padding: 8px;
  border: 1.5px dashed var(--borda-forte);
  border-radius: var(--radius);
  background: var(--bg-section-2);
  color: var(--texto);
  cursor: pointer;
  flex: 1;
  min-width: 240px;
  transition: border-color 0.15s, background 0.15s;
}
.upload-box input[type="file"]:hover { border-color: var(--azul-claro); background: var(--azul-suave); }
.upload-box input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  background: var(--azul-semus);
  color: #ffffff;
  border: 0;
  border-radius: var(--radius);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.15s;
}
.upload-box input[type="file"]::file-selector-button:hover { background: var(--azul-vibrante); }

.atesto-form form { display: flex; flex-direction: column; gap: var(--space-3); }
.atesto-form textarea,
.atesto-form input[type="text"] {
  max-width: 720px;
  width: 100%;
  resize: vertical;
}
.atesto-form textarea {
  min-height: 80px;
}
/* Status PERSISTIDO dos encaminhamentos internos (ADR-022) */
.enc-status { margin: 8px 0 4px; }
.enc-status-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.enc-status-list li { font-size: 0.9rem; }
.enc-status-list .enc-ok { color: var(--success-fg); }
.enc-status-list .enc-falha { color: var(--error-fg); }
.enc-status-list .enc-nunca { color: var(--texto-suave); }
.atesto-form > summary {
  cursor: pointer;
  color: var(--azul-semus);
  font-weight: 700;
  list-style: none;
  font-size: 1rem;
  padding: 4px 0;
  user-select: none;
}
.atesto-form > summary::-webkit-details-marker { display: none; }
.atesto-form > summary::before {
  content: '+';
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  background: var(--azul-suave);
  color: var(--azul-claro);
  border-radius: 50%;
  font-weight: 700;
  margin-right: 0.5em;
  transition: transform 0.2s, background 0.2s;
  vertical-align: -3px;
}
.atesto-form[open] > summary::before {
  content: '−';
  background: var(--azul-semus);
  color: #ffffff;
}

/* ---------- Timeline ---------- */
.timeline {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
  border-left: 3px solid var(--azul-semus);
  padding-left: var(--space-4);
  position: relative;
}
.timeline li {
  margin-bottom: var(--space-3);
  position: relative;
  padding-left: var(--space-2);
}
.timeline li::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-4) - 5px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 2.5px solid var(--azul-semus);
  box-shadow: 0 0 0 2px var(--bg);
}
.timeline .tipo { font-weight: 700; color: var(--azul-semus); font-size: 0.92rem; letter-spacing: -0.005em; }
.timeline .dt { color: var(--texto-suave); font-size: 0.82rem; margin-left: 0.5em; }
.timeline .msg { color: var(--texto); font-size: 0.92rem; margin-top: 4px; line-height: 1.5; }

/* ---------- Diversos ---------- */
.muted { color: var(--texto-suave); font-size: 0.9rem; }
.filtros {
  display: flex;
  gap: var(--space-4);
  margin: var(--space-3) 0 var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-section-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--borda);
}
.filtros label {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  color: var(--texto-suave);
  gap: 4px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.filtros select {
  padding: 7px 11px;
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--bg-elev);
  color: var(--texto);
  cursor: pointer;
  transition: border-color 0.15s;
}
.filtros select:hover { border-color: var(--azul-claro); }
.filtros select:focus { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16); }

.acao-row { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; }
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--bg-section-2);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  margin: 4px 0;
  color: var(--texto);
  font-family: var(--font-mono);
  border: 1px solid var(--borda);
}
code {
  background: var(--bg-section-2);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.88rem;
  color: var(--texto);
  font-family: var(--font-mono);
  border: 1px solid var(--borda);
}
.captcha-slot { min-height: 0; }
.captcha-slot:empty { display: none; }
.captcha-slot .cf-turnstile { margin: 4px 0; }

/* Section CTA on home view */
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

/* Empty state placeholder em tabelas vazias (best-effort, JS pode injetar) */
.tbl tbody:empty::after {
  content: 'Nenhum registro encontrado';
  display: block;
  padding: var(--space-5);
  text-align: center;
  color: var(--texto-fraco);
  font-size: 0.92rem;
  font-style: italic;
}

/* ---------- Footer institucional ---------- */
.site-footer {
  flex-shrink: 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--borda);
  margin-top: var(--space-7);
  padding: var(--space-6) 0 var(--space-4);
  color: var(--texto-suave);
  font-size: 0.9rem;
}
.site-footer .container { max-width: 1280px; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.footer-grid h4 {
  color: var(--azul-semus);
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.footer-grid p, .footer-grid a {
  color: var(--texto-suave);
  font-size: 0.9rem;
  line-height: 1.7;
  text-decoration: none;
  display: block;
  margin: 0;
}
.footer-grid a {
  transition: color 0.15s, transform 0.15s;
}
.footer-grid a:hover, .footer-grid a:focus-visible {
  color: var(--azul-claro);
  text-decoration: underline;
  transform: translateX(2px);
}
.footer-bottom {
  border-top: 1px solid var(--borda);
  padding-top: var(--space-4);
  text-align: center;
  color: var(--texto-fraco);
  font-size: 0.82rem;
}

/* ---------- Spinner (loading state) ---------- */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

/* Spinner grande (box de carregando do termo) */
.spinner-lg {
  width: 34px;
  height: 34px;
  border-width: 3px;
  margin: 0 0 4px;
  vertical-align: middle;
  color: var(--primaria, #003a70);
}

/* Box flutuante de "Enviando…" — cobre o modal do termo durante o POST,
   deixando explícito que está processando e travando o fechamento. */
.modal-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: blur(2px);
  border-radius: inherit;
}
.modal-loading[hidden] { display: none; }
.modal-loading strong { font-size: 1.05rem; color: var(--texto); }
.modal-loading span { color: var(--texto-suave); }

/* ---------- Autocomplete SIGTAP (F-1/F-4) ---------- */
.autocomplete-wrap { position: relative; }

.autocomplete-lista {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--bg-elev);
  border: 1px solid var(--borda-forte);
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: var(--shadow-3);
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.autocomplete-lista li {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--borda);
  transition: background 0.1s;
}

.autocomplete-lista li:last-child { border-bottom: none; }

.autocomplete-lista li:hover,
.autocomplete-lista li[aria-selected="true"] {
  background: var(--azul-suave);
  outline: none;
}

.autocomplete-lista li:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: -2px;
}

/* ---------- VLibras (widget gov.br) ---------- */
[vw] { z-index: 90 !important; }

/* ---------- Modal Termo de Veracidade (ADR-009) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: var(--space-4);
  /* Garante que backdrop de cor não interfere no contraste (alto-contraste usa própria cor de fundo) */
}
/* O atributo `hidden` precisa vencer o `display: flex` acima. Sem esta regra,
   `.modal-overlay` (especificidade igual a `[hidden]`) ganha no cascade do autor
   e o overlay (#modal-termo / #modal-msg) fica visível mesmo fechado. */
.modal-overlay[hidden] { display: none; }
[data-contrast="high"] .modal-overlay { background: rgba(0, 0, 0, 0.85); }

.modal-box {
  background: var(--bg-elev);
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative; /* ancora a box de carregando (.modal-loading) */
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--borda);
  gap: var(--space-3);
  flex-shrink: 0;
}
.modal-header h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--azul-semus);
  font-weight: 700;
  flex: 1;
}
.modal-close {
  background: transparent;
  border: 1.5px solid var(--borda);
  border-radius: var(--radius);
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--texto-suave);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.modal-close:hover, .modal-close:focus-visible {
  border-color: var(--azul-claro);
  color: var(--azul-semus);
  outline: none;
}
.modal-close:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}

.modal-corpo {
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--texto);
  white-space: pre-wrap;
}

.modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
  background: var(--bg-section-2);
}
.modal-footer .termo-aceite-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texto);
  cursor: pointer;
  line-height: 1.4;
}
.modal-footer .termo-aceite-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 1px;
  accent-color: var(--azul-semus);
  cursor: pointer;
}
.modal-footer .termo-aceite-label input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}
.modal-footer .modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .modal-box { max-height: 95vh; border-radius: var(--radius-md); }
  .modal-header, .modal-corpo, .modal-footer { padding: var(--space-3) var(--space-4); }
}

/* ---------- Modal de Mensagem Central (#modal-msg) ---------- */
/*
 * Reutiliza .modal-overlay / .modal-box / .modal-close do modal-termo.
 * Adiciona variantes por tipo (success / error / info / warn) via data-tipo.
 * z-index: 600 — fica acima do #modal-termo (500) quando ambos precisarem coexistir.
 */
.modal-msg-overlay {
  z-index: 600;
}

/* Caixa menor e sem scroll longo (mensagem é curta) */
.modal-msg-box {
  max-width: 480px;
  max-height: 80vh;
}

/* Header colorido por tipo */
.modal-msg-header {
  gap: var(--space-3);
  align-items: center;
}

/* Ícone do tipo — grande, à esquerda do título */
.modal-msg-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius);
}

/* Título da mensagem */
.modal-msg-titulo {
  font-size: 1rem;
  font-weight: 700;
  flex: 1;
}

/* Corpo da mensagem — texto livre, pode ter lista de campos */
.modal-msg-corpo {
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-y: auto;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  /* Sem scroll excessivo: caixa é compacta */
  max-height: 40vh;
}
.modal-msg-corpo ul {
  margin: var(--space-2) 0 0 var(--space-5);
  padding: 0;
  list-style: disc;
}
.modal-msg-corpo li {
  margin-bottom: var(--space-1);
}

/* Footer alinhado à direita, fundo neutro */
.modal-msg-footer {
  background: var(--bg-section-2);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.modal-msg-footer .modal-actions {
  justify-content: flex-end;
}

/* ---- Variantes por tipo via [data-tipo] no .modal-msg-overlay ---- */

/* success */
.modal-msg-overlay[data-tipo="success"] .modal-msg-header {
  background: var(--success-bg);
  border-bottom-color: var(--success-border);
}
.modal-msg-overlay[data-tipo="success"] .modal-msg-titulo {
  color: var(--success-fg);
}
.modal-msg-overlay[data-tipo="success"] .modal-msg-icon {
  background: var(--success-border);
  color: var(--success-fg);
}

/* error */
.modal-msg-overlay[data-tipo="error"] .modal-msg-header {
  background: var(--error-bg);
  border-bottom-color: var(--error-border);
}
.modal-msg-overlay[data-tipo="error"] .modal-msg-titulo {
  color: var(--error-fg);
}
.modal-msg-overlay[data-tipo="error"] .modal-msg-icon {
  background: var(--error-border);
  color: var(--error-fg);
}

/* info */
.modal-msg-overlay[data-tipo="info"] .modal-msg-header {
  background: var(--info-bg);
  border-bottom-color: var(--info-border);
}
.modal-msg-overlay[data-tipo="info"] .modal-msg-titulo {
  color: var(--info-fg);
}
.modal-msg-overlay[data-tipo="info"] .modal-msg-icon {
  background: var(--info-border);
  color: var(--info-fg);
}

/* warn */
.modal-msg-overlay[data-tipo="warn"] .modal-msg-header {
  background: var(--warn-bg);
  border-bottom-color: var(--warn-border);
}
.modal-msg-overlay[data-tipo="warn"] .modal-msg-titulo {
  color: var(--warn-fg);
}
.modal-msg-overlay[data-tipo="warn"] .modal-msg-icon {
  background: var(--warn-border);
  color: var(--warn-fg);
}

/* Alto contraste — garante legibilidade nas variantes de cor */
[data-contrast="high"] .modal-msg-overlay .modal-msg-header {
  background: #000;
  border-bottom-color: #fff;
}
[data-contrast="high"] .modal-msg-overlay .modal-msg-titulo,
[data-contrast="high"] .modal-msg-overlay .modal-msg-icon {
  color: #fff;
  background: #000;
}

/* Dark mode — suaviza fundo das variantes */
[data-theme="dark"] .modal-msg-overlay[data-tipo="success"] .modal-msg-header { background: #0f3a12; }
[data-theme="dark"] .modal-msg-overlay[data-tipo="error"]   .modal-msg-header { background: #3a1010; }
[data-theme="dark"] .modal-msg-overlay[data-tipo="info"]    .modal-msg-header { background: #0d2a44; }
[data-theme="dark"] .modal-msg-overlay[data-tipo="warn"]    .modal-msg-header { background: #3a2c00; }

/* Responsivo: caixa ocupa mais largura em telas pequenas */
@media (max-width: 480px) {
  .modal-msg-box { max-width: 100%; border-radius: var(--radius-md); }
}

/* ---------- Toast lateral (success / info) ---------- */
/*
 * Aparece no canto inferior-esquerdo, SEM backdrop, NÃO rouba foco.
 * Vários toasts empilham verticalmente (gap de 8px).
 * z-index 700 — acima do modal-msg (600) e modal-termo (500).
 */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  left: var(--space-5);
  z-index: 700;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  pointer-events: none;   /* container não captura mouse */
  /* largura máxima do stack */
  max-width: min(360px, calc(100vw - 2 * var(--space-5)));
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1.5px solid;
  box-shadow: var(--shadow-3);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  max-width: 100%;
  /* Entrada: desliza da esquerda */
  animation: toast-in 0.22s ease-out both;
}

/* Saída (classe adicionada via JS antes de remover o nó) */
.toast.toast-saindo {
  animation: toast-out 0.2s ease-in forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-28px); }
}

/* Variantes por tipo */
.toast.success {
  background: var(--success-bg);
  color: var(--success-fg);
  border-color: var(--success-border);
}
.toast.info {
  background: var(--info-bg);
  color: var(--info-fg);
  border-color: var(--info-border);
}

/* Ícone à esquerda */
.toast-icone {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1.45;
}

/* Texto ocupa o espaço disponível */
.toast-corpo {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

/* Botão de fechar (✕) */
.toast-fechar {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.55;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 var(--space-2);
  transition: opacity 0.15s;
  align-self: flex-start;
}
.toast-fechar:hover,
.toast-fechar:focus-visible {
  opacity: 1;
  outline: 2px solid var(--amarelo);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Dark mode — levemente mais escuro para contraste */
[data-theme="dark"] .toast.success { background: #1c3b27; border-color: #2e5c39; }
[data-theme="dark"] .toast.info    { background: #142b40; border-color: #1e4060; }

/* Alto contraste — bordas reforçadas */
[data-contrast="high"] .toast {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #ffeb3b !important;
  box-shadow: none !important;
}
[data-contrast="high"] .toast-fechar { color: #fff; opacity: 1; }

/* Responsivo: em telas estreitas ocupa mais largura */
@media (max-width: 480px) {
  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    max-width: none;
  }
  .toast { width: 100%; }
}

/* Respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.toast-saindo {
    animation: none !important;
  }
}

/* ---------- Responsivo ---------- */
@media (max-width: 720px) {
  .header-row { flex-direction: column; align-items: stretch; gap: 0.7rem; padding: 0.6rem 1rem; }
  .a11y-bar { margin-left: 0; justify-content: center; gap: 0.3rem; }
  .a11y-bar button { padding: 0.35rem 0.55rem; font-size: 0.8rem; }
  .brand-text small { display: none; }
  .lista-header { flex-direction: column; align-items: stretch; }
  main { padding: var(--space-5) 0 var(--space-6); }
  h1 { font-size: 1.4rem; }
  .form { padding: var(--space-5) var(--space-4); }
  .det-meta, .upload-box, .atesto-form { padding: var(--space-4); }
}

/* ============================================================
   Landing-style — heros e card-shell globais
   Aplica em qualquer view via .page-hero / .card-shell.
   Variantes:
     .page-hero.compact  hero menor (forms, edits)
   Referência estética: landing pública /
   ============================================================ */

.page-hero {
  background: var(--grad-azul);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 4vw, var(--space-7)) clamp(var(--space-4), 4vw, var(--space-6));
  margin: 0 0 var(--space-5);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-hero.compact {
  padding: clamp(var(--space-4), 2.5vw, var(--space-5)) clamp(var(--space-4), 3vw, var(--space-5));
  margin-bottom: var(--space-4);
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -38%;
  right: -8%;
  width: clamp(220px, 38vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(251, 192, 45, 0.22) 0%,
    rgba(251, 192, 45, 0.08) 45%,
    transparent 72%);
  pointer-events: none;
  z-index: -1;
}
.page-hero.compact::before {
  width: clamp(160px, 28vw, 280px);
  top: -30%;
  right: -4%;
}
.hero-badge {
  display: inline-block;
  background: var(--amarelo);
  color: var(--azul-profundo);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-hero h1 {
  font-size: clamp(1.55rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: var(--space-4) 0 var(--space-3);
  color: #ffffff;
}
.page-hero.compact h1 {
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem);
  margin: var(--space-3) 0 var(--space-2);
}
.hero-accent {
  color: var(--amarelo);
}
.hero-sub {
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.08rem);
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 var(--space-5);
  max-width: 56ch;
  line-height: 1.55;
}
.page-hero.compact .hero-sub {
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  margin-bottom: var(--space-3);
}
.hero-cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Botões pill (aliases pra compatibilidade — .btn.primary já é pill amarelo) */
.btn.pill {
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.btn.pill.pill-amarelo {
  background: var(--amarelo);
  color: var(--azul-profundo);
  border-color: var(--amarelo);
  box-shadow: 0 4px 14px rgba(251, 192, 45, 0.38);
}
.btn.pill.pill-amarelo:hover,
.btn.pill.pill-amarelo:focus-visible {
  background: var(--amarelo-vivo);
  border-color: var(--amarelo-vivo);
  color: var(--azul-profundo);
  box-shadow: 0 8px 22px rgba(251, 192, 45, 0.48);
  transform: translateY(-2px);
}
.btn.outlined-light,
.btn.pill.outlined-light {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: none;
}
.btn.outlined-light:hover,
.btn.outlined-light:focus-visible,
.btn.pill.outlined-light:hover,
.btn.pill.outlined-light:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: none;
}

/* Card shell — envolve tabelas/blocos em um cartão branco com sombra */
.card-shell {
  background: var(--bg-elev);
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  /* Rola na horizontal quando a tabela é mais larga que o container (ex.: gestão
     de usuários, 9 colunas) — antes `overflow:hidden` cortava a última coluna
     ("editar") pra fora da tabela. Mantém os cantos arredondados. */
  overflow-x: auto;
  overflow-y: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.card-shell:hover {
  box-shadow: var(--shadow-3);
}
.card-shell > .tbl {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Hover amarelo nas linhas das tabelas dentro de card-shell
   (vence o azul-suave default em .tbl tbody tr:hover) */
.card-shell .tbl tbody tr {
  transition: background 0.16s, box-shadow 0.16s;
}
.card-shell .tbl tbody tr:hover {
  background: rgba(251, 192, 45, 0.10);
  box-shadow: inset 4px 0 0 var(--amarelo);
}

/* Empty state mais convidativo */
.card-shell .tbl tbody:empty::after {
  color: var(--texto-suave);
  font-size: 0.96rem;
}

/* Dark mode — hero mantém gradient mais profundo */
[data-theme="dark"] .page-hero {
  background: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul-semus) 100%);
}
[data-theme="dark"] .card-shell {
  background: var(--bg-elev);
}
[data-theme="dark"] .card-shell .tbl tbody tr:hover {
  background: rgba(251, 192, 45, 0.14);
}

/* Alto contraste — hero vira sólido sem decoração */
[data-contrast="high"] .page-hero {
  background: #000000;
  border: 2px solid var(--amarelo);
}
[data-contrast="high"] .page-hero::before { display: none; }
[data-contrast="high"] .hero-badge {
  background: var(--amarelo);
  color: #000000;
}

/* Reduzir motion */
@media (prefers-reduced-motion: reduce) {
  .card-shell,
  .card-shell .tbl tbody tr,
  .btn.pill,
  .btn.primary { transition: none; }
  .btn.pill.pill-amarelo:hover,
  .btn.primary:hover { transform: none; }
}

/* Tablet (≤960px) */
@media (max-width: 960px) {
  .page-hero { border-radius: var(--radius-md); }
  .hero-cta .btn.pill,
  .hero-cta .btn.primary { padding: 12px 22px; }
}

/* Mobile (≤720px) */
@media (max-width: 720px) {
  .page-hero {
    margin-bottom: var(--space-4);
    text-align: left;
  }
  .page-hero::before {
    width: 70%;
    top: -28%;
    right: -22%;
  }
  .hero-cta .btn.pill,
  .hero-cta .btn.primary {
    width: 100%;
    justify-content: center;
  }
  .card-shell { border-radius: var(--radius-md); }

  /* Tabela dentro de card-shell vira cards empilhados.
     Cada <tr> = um card; cada <td> = linha "rótulo · valor".
     O rótulo vem do data-label injetado em JS (setupResponsiveTables). */
  .card-shell {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
  }
  .card-shell .tbl,
  .card-shell .tbl tbody {
    display: block;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .card-shell .tbl thead {
    /* esconde o cabeçalho — o data-label substitui no card */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  .card-shell .tbl tr {
    display: block;
    background: var(--bg-elev);
    border: 1px solid var(--borda);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-1);
  }
  .card-shell .tbl tr:last-child { margin-bottom: 0; }
  /* `display:block` (card mobile) venceria o [hidden] da UA — guarda explícita
     pra linhas escondidas por filtro/busca (ex.: #tbl-pendfat). */
  .card-shell .tbl tr[hidden] { display: none; }
  .card-shell .tbl tbody tr:hover {
    background: var(--amarelo-suave);
    box-shadow: var(--shadow-1), inset 4px 0 0 var(--amarelo);
  }
  .card-shell .tbl td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 6px 0;
    border: none;
    text-align: right;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
  }
  .card-shell .tbl td:last-child {
    padding-top: var(--space-2);
    margin-top: var(--space-2);
    border-top: 1px dashed var(--borda);
  }
  .card-shell .tbl td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    flex-shrink: 0;
    max-width: 45%;
  }
  /* Linhas sem data-label (empty-state, "carregando…") ocupam linha inteira */
  .card-shell .tbl td:not([data-label]) {
    justify-content: center;
    text-align: center;
    color: var(--texto-suave);
  }
  .card-shell .tbl td:not([data-label])::before { content: none; }
}

/* Mobile estreito (≤480px) — iPhone na vertical */
@media (max-width: 480px) {
  .page-hero { padding: var(--space-4) var(--space-4) var(--space-5); }
  .hero-badge { font-size: 0.68rem; padding: 4px 11px; }
  /* Recupera largura útil: 24px de cada lado deixavam o conteúdo apertado
     num iPhone de ~375px. 12px libera ~24px de conteúdo. */
  .container { padding: 0 var(--space-3); }
  /* Formulários e filtros ocupam a largura toda e empilham. */
  .form, .atesto-form { max-width: 100%; }
  .filtros { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .filtros label, .filtros select, .filtros input { width: 100%; }
  /* Ações inline de tabela com alvo de toque maior (≥40px de altura efetiva). */
  .acao-tabela { display: inline-block; padding: 6px 4px; }
  /* Painel de correções sugeridas: botão ocupa a linha toda (toque fácil). */
  #ad-correcoes-lista .btn { width: 100%; }
}

/* ============================================================================
   Painel de inconsistências NUAC — C1/C2/C3 (Grupo C, 2026-05-25)
   ============================================================================ */

/* C3 — Seções colapsáveis por severidade */
.conf-grupo {
  margin-bottom: var(--space-4);
}

.conf-grupo-hdr {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-section-2);
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
  text-align: left;
}
/* Esconde o body colapsado — regra de autor prevalece sobre [hidden] da UA */
.conf-grupo-body--collapsed[hidden] { display: none; }

.conf-grupo-hdr:hover,
.conf-grupo-hdr:focus-visible {
  background: var(--azul-suave);
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}

.conf-grupo-hdr-critico { border-left: 4px solid var(--vermelho); }
.conf-grupo-hdr-erro    { border-left: 4px solid var(--badge-devolvida-fg); }
.conf-grupo-hdr-aviso   { border-left: 4px solid var(--amarelo); }
.conf-grupo-hdr-info    { border-left: 4px solid var(--verde); }

.conf-grupo-label { flex: 1; }
.conf-grupo-count { color: var(--texto-suave); font-size: 0.9rem; font-weight: 400; }
.conf-grupo-chevron { font-size: 0.75rem; color: var(--texto-suave); }

.conf-grupo-body {
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-top: -1px; /* une visualmente ao cabeçalho */
  overflow-x: auto;
}

/* C2 — Expand de linha */
.conf-expand-btn {
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--texto-suave);
  line-height: 1;
}
.conf-expand-btn:hover,
.conf-expand-btn:focus-visible {
  background: var(--azul-suave);
  color: var(--azul-semus);
  outline: 3px solid var(--amarelo);
  outline-offset: 1px;
}

/* Esconde det row colapsada — regra de autor prevalece sobre [hidden] */
.conf-det-row--hidden[hidden] { display: none; }

/* ---------- Atesto: inputs de filtro, linha por coluna, headers ordenáveis ---------- */
/* Padroniza os inputs de busca dentro de .filtros com o visual dos selects */
.filtros input[type="search"] {
  padding: 7px 11px;
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--bg-elev);
  color: var(--texto);
  min-width: 11rem;
  transition: border-color 0.15s;
}
.filtros input[type="search"]:hover { border-color: var(--azul-claro); }
.filtros input[type="search"]:focus {
  outline: none;
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.16);
}
/* Linha de filtros por coluna: itens menores, alinhados ao fim (botão Limpar) */
.filtros-col { margin-top: calc(-1 * var(--space-3)); align-items: flex-end; }
.filtros-col input[type="search"] { min-width: 8.5rem; }
.filtros-col[hidden] { display: none; }

/* Botão secundário (Limpar filtros) */
.btn-sec {
  align-self: flex-end;
  padding: 7px 14px;
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--texto);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-sec:hover { background: var(--azul-suave); border-color: var(--azul-claro); }
.btn-sec:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }

/* Headers ordenáveis da tabela de conferências */
.tbl-conf thead th.conf-th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tbl-conf thead th.conf-th-sort:hover { background: var(--azul-suave); color: var(--azul-semus); }
.tbl-conf thead th.conf-th-sort:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: -3px;
}
.tbl-conf thead th.conf-th-ativo { color: var(--azul-semus); }
.conf-th-seta { font-size: 0.72rem; }

/* Quadro de avisos/alertas por tipo (resumo) */
.conf-resumo { display: flex; flex-direction: column; gap: var(--space-2); }
.conf-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.conf-quadro-titulo {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
  margin-top: var(--space-1);
}
.conf-quadro-titulo .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.conf-quadro-status { display: flex; flex-wrap: wrap; gap: 6px; }
.conf-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1.5px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--texto);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.conf-status-chip strong { color: var(--azul-semus); }
.conf-status-chip:hover { background: var(--azul-suave); border-color: var(--azul-claro); }
.conf-status-chip:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.conf-status-chip.ativo {
  background: var(--azul-semus);
  border-color: var(--azul-semus);
  color: #fff;
}
.conf-status-chip.ativo strong { color: var(--amarelo-vivo); }

.conf-det-cell {
  padding: var(--space-3) var(--space-5) !important;
  background: var(--bg-section-2);
}

.conf-det {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 720px) {
  .conf-det { grid-template-columns: 1fr; }
}

.conf-det-resumo,
.conf-det-regras,
.conf-det-override { font-size: 0.9rem; }

.conf-det-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px var(--space-3);
  margin: var(--space-2) 0 0;
}
.conf-det-dl dt {
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.conf-det-dl dd { margin: 0; }

.conf-det-override {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.conf-det-regras-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.conf-det-regra {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid var(--borda);
}

.conf-det-regra-msg { font-size: 0.9rem; }

.conf-det-detalhe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: 2px;
}
.conf-det-detalhe-item {
  font-size: 0.8rem;
  color: var(--texto-suave);
  background: var(--bg-section-2);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

/* C1 — Badge de override manual */
.conf-override-badge {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px solid var(--warn-border);
  font-size: 0.68rem;
  /* Empilha abaixo da badge de severidade e quebra em 2 linhas quando preciso —
     antes (inline + nowrap) estourava pra dentro da coluna Status. Alinhada à
     esquerda, no mesmo eixo da badge de severidade (sem tabulação/centralização). */
  display: block;
  white-space: normal;
  line-height: 1.15;
  text-align: left;
  margin: 2px 0 0;
}

/* Painel "Correções sugeridas" (auto-correção SEMUS) — card próprio (não usa
   .card-shell, que no mobile zera borda/fundo). Paleta institucional. */
.correcoes-box {
  background: var(--bg-elev);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--amarelo);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
  overflow-wrap: anywhere;
}
.correcoes-box[hidden] { display: none; }
.correcoes-titulo { margin: 0 0 4px; font-size: 1rem; color: var(--azul-semus); }
.correcoes-sub { margin: 0 0 10px; font-size: 0.85rem; }
.corr-item { padding: 10px 0; border-bottom: 1px solid var(--borda); }
.corr-item:last-child { border-bottom: none; padding-bottom: 0; }
.corr-item-head { font-size: 0.92rem; }
.corr-item-tipo { color: var(--texto-suave); }
.corr-item-tipo::before { content: "— "; }
.corr-item-change { font-size: 0.85rem; color: var(--texto-suave); margin-top: 3px; }
.corr-item-change code {
  background: var(--bg-section-2);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}
.corr-item-seta { color: var(--azul-semus); font-weight: 700; }
.corr-item-fonte { font-size: 0.78rem; color: var(--texto-suave); font-style: italic; margin-top: 2px; }
.corr-item-acao { margin-top: 8px; }
.corr-item-nota { font-size: 0.82rem; }

/* C1 — Célula de ações. Coluna estreita: o texto do botão (ex. "Aprovar
   produção") quebra em 2 linhas em vez de forçar a coluna a alargar. */
.conf-acoes-cell {
  white-space: normal;
}
.conf-acoes-cell .btn.btn-xs {
  white-space: normal;
  /* Quebra só no espaço ("Aprovar produção" → 2 linhas), não dentro da palavra
     (a td tem overflow-wrap:anywhere, que partia "produção" em 3 linhas). */
  overflow-wrap: normal;
  word-break: keep-all;
  line-height: 1.15;
  text-align: center;
}

/* Botão pequeno (btn-xs) para ações inline de tabela */
.btn.btn-xs {
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}
.btn.btn-xs:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 2px;
}

/* ===================================================================
   Tabela de conferência — apresentação ÚNICA (sem rolagem lateral por item)
   Desktop: table-layout fixed → colunas com largura proporcional, conteúdo
   quebra linha e a tabela cabe em 100% do container (laptops 1280/1024 ok).
   Antes, table-layout:auto deixava a tabela ~1024px e cada grupo precisava
   rolar para o lado. Mobile (≤720px): empilha cada linha como card (data-label).
   =================================================================== */
.tbl-conf {
  table-layout: fixed;
  width: 100%;
}
.tbl-conf th,
.tbl-conf td {
  overflow-wrap: anywhere;
  white-space: normal;
  vertical-align: top;
}
/* Detalhe (expand): a td única (colspan) é :last-child e herdava
   white-space:nowrap de `.tbl td:last-child` (especificidade 0,2,1, vencia o
   `.tbl-conf td`). Isso deixava as "regras aplicadas" numa linha só, cortando o
   texto (desktop e mobile). Força a quebra no detalhe e em todo o seu conteúdo. */
.tbl-conf td.conf-det-cell,
.tbl-conf td.conf-det-cell * {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Flags (severidade/override) compactas e inteiras — não quebram no meio do
   texto na coluna estreita; empilham como blocos. */
.tbl-conf .badge {
  font-size: 0.68rem;
  white-space: nowrap;
  padding: 2px 8px;
  margin: 1px 0;
}
/* A badge de override empilha/quebra — vence o nowrap genérico de .tbl-conf .badge. */
.tbl-conf .badge.conf-override-badge { white-space: normal; overflow-wrap: normal; word-break: keep-all; }
.tbl-conf td:nth-child(2) { line-height: 1.7; }   /* respiro entre badges empilhadas */
/* Severidade + override empilham como blocos do tamanho do conteúdo, alinhados
   à esquerda no mesmo eixo (sem a tabulação que a override centralizada deixava). */
.tbl-conf td:nth-child(2) .badge {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

/* Texto da tabela ligeiramente menor pra aproveitar melhor o espaço. */
.tbl-conf td { font-size: 0.86rem; }

/* Status como rótulo legível (não token cru em <code>), fonte menor. */
.conf-status {
  display: inline-block;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 600;
}
.conf-status--aprovada { color: var(--success-fg); }
.conf-status--glosada { color: var(--error-fg); }
.conf-status--nao_realizado { color: var(--error-fg); }

.tbl-conf th:nth-child(1), .tbl-conf td:nth-child(1) { width: 4%; }   /* expandir */
.tbl-conf th:nth-child(2), .tbl-conf td:nth-child(2) { width: 12%; }  /* severidade */
.tbl-conf th:nth-child(3), .tbl-conf td:nth-child(3) { width: 12%; }  /* status */
.tbl-conf th:nth-child(4), .tbl-conf td:nth-child(4) { width: 15%; }  /* procedimento */
.tbl-conf th:nth-child(5), .tbl-conf td:nth-child(5) { width: 12%; }  /* paciente */
.tbl-conf th:nth-child(6), .tbl-conf td:nth-child(6) { width: 8%; }   /* data */
.tbl-conf th:nth-child(7), .tbl-conf td:nth-child(7) { width: 25%; }  /* mensagem */
.tbl-conf th:nth-child(8), .tbl-conf td:nth-child(8) { width: 12%; }  /* ações */

/* Mobile: cada linha vira um card com rótulo (data-label) — sem rolagem lateral.
   Usa #ad-conf-grupos pra vencer a especificidade da regra genérica de tabela. */
@media (max-width: 720px) {
  #ad-conf-grupos .conf-grupo-body { overflow-x: visible; }
  #ad-conf-grupos .tbl-conf,
  #ad-conf-grupos .tbl-conf tbody { display: block; table-layout: auto; }
  #ad-conf-grupos .tbl-conf thead {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
  }
  #ad-conf-grupos .tbl-conf tr {
    display: block;
    border: 1px solid var(--borda);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elev);
  }
  /* O detalhe (expand) fica OCULTO até clicar: o display:block do card acima
     vencia o [hidden] da UA, fazendo o detalhe aparecer sozinho no celular
     (parecia "2 cards" do mesmo paciente). Reafirma o ocultamento. */
  #ad-conf-grupos .tbl-conf tr[hidden],
  #ad-conf-grupos .tbl-conf tr.conf-det-row--hidden { display: none; }
  #ad-conf-grupos .tbl-conf td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    text-align: right;
    border: none;
    padding: 4px 0;
    width: auto !important;   /* anula os nth-child % do desktop */
  }
  #ad-conf-grupos .tbl-conf td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    flex-shrink: 0;
    max-width: 45%;
  }
  /* Linha de detalhe (colspan) ocupa o card inteiro, sem rótulo */
  #ad-conf-grupos .tbl-conf td.conf-det-cell { display: block; text-align: left; }
  #ad-conf-grupos .tbl-conf td.conf-det-cell::before { content: none; }
  /* Conteúdo do detalhe (quando expandido) quebra linha — antes mensagens longas
     e códigos seguiam numa linha só, estourando a largura no iPhone. O
     white-space:normal vence o nowrap herdado de `.tbl td:last-child` (o detalhe
     é uma td única com colspan). */
  #ad-conf-grupos .tbl-conf td.conf-det-cell,
  #ad-conf-grupos .conf-det,
  #ad-conf-grupos .conf-det * {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
  /* Pares rótulo/valor empilham (evita a coluna max-content forçar largura). */
  #ad-conf-grupos .conf-det-dl { grid-template-columns: 1fr; gap: 0 0; }
  #ad-conf-grupos .conf-det-dl dt { margin-top: 6px; }
  #ad-conf-grupos .conf-det-detalhe { flex-direction: column; align-items: flex-start; }
}

/* ===================================================================
   Navegação lateral SEMUS (#nav-semus) — rail colapsável (desktop) /
   off-canvas (mobile). Itens injetados por JS conforme o papel.
   Cores institucionais via tokens; foco amarelo; eMAG/WCAG.
   `--header-h` é medido em JS (fallback 64px).
   =================================================================== */
.btn-menu-semus {
  display: none;               /* visível só no mobile (media query) */
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--azul-semus);
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}
.btn-menu-semus:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }

.sidebar {
  position: fixed;
  top: var(--header-h, 64px);
  left: 0;
  bottom: 0;
  width: 232px;
  background: var(--bg-elev);
  border-right: 1px solid var(--borda);
  box-shadow: var(--shadow-1);
  z-index: 40;
  display: flex;
  flex-direction: column;
  transition: width 0.18s ease, transform 0.18s ease;
  overflow-x: hidden;
  overflow-y: auto;
}
.sidebar[data-collapsed="true"] { width: 60px; }

.sidebar-toggle {
  align-self: flex-end;
  background: transparent;
  border: none;
  color: var(--texto-suave);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 10px 14px;
}
.sidebar-toggle:hover { color: var(--azul-semus); }
.sidebar-toggle:focus-visible { outline: 3px solid var(--amarelo); outline-offset: -3px; }
.sidebar[data-collapsed="true"] .sidebar-toggle { align-self: center; }
.sidebar[data-collapsed="true"] .sidebar-toggle-ico { display: inline-block; transform: rotate(180deg); }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 16px; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--texto);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.sidebar-nav a:hover { background: var(--azul-suave); color: var(--azul-semus); }
.sidebar-nav a:focus-visible { outline: 3px solid var(--amarelo); outline-offset: -3px; }
.sidebar-nav a[aria-current="page"] {
  background: var(--azul-suave);
  color: var(--azul-semus);
  box-shadow: inset 3px 0 0 var(--amarelo);   /* acento institucional amarelo */
}
.sidebar-nav .sidebar-ico {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-nav .sidebar-ico svg { width: 20px; height: 20px; }
.sidebar[data-collapsed="true"] .sidebar-lbl { display: none; }
.sidebar[data-collapsed="true"] .sidebar-nav a { justify-content: center; padding: 10px 0; }

/* main empurrado pra direita quando a sidebar está visível (desktop) */
body.has-sidebar #main { margin-left: 232px; transition: margin-left 0.18s ease; }
body.has-sidebar.sidebar-collapsed #main { margin-left: 60px; }

.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 35;
}
.sidebar-backdrop[hidden] { display: none; }   /* guarda: vence display do autor */

/* Mobile: off-canvas (desliza por cima), sem empurrar o main */
@media (max-width: 720px) {
  .btn-menu-semus { display: inline-block; }
  /* width:100% + min-width:0 corrige o overflow do flex-item: o <body> é
     flex-column e, sem isso, o #main dimensionava pela LARGURA DO CONTEÚDO
     (tabela de conferência ~1086px) em vez da viewport, deixando a tela de
     atesto ~3× mais larga que o iPhone. Só no mobile (aqui margin-left=0); no
     desktop o main mantém margin-left:232 + largura automática do flex. */
  body.has-sidebar #main,
  body.has-sidebar.sidebar-collapsed #main { margin-left: 0; width: 100%; min-width: 0; }
  /* Conferência: fonte um pouco menor no celular (densidade) — o conteúdo
     quebra linha e cabe na viewport (sem rolagem horizontal). */
  #ad-conf-grupos .tbl-conf { font-size: 0.82rem; }
  .sidebar {
    width: 240px;
    transform: translateX(-100%);
    box-shadow: var(--shadow-3);
  }
  .sidebar[data-collapsed="true"] { width: 240px; }   /* no mobile abre sempre expandida */
  .sidebar[data-collapsed="true"] .sidebar-lbl { display: inline; }
  .sidebar[data-collapsed="true"] .sidebar-nav a { justify-content: flex-start; padding: 10px 12px; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-toggle { display: none; }   /* no mobile fecha pelo backdrop / link */
}

[data-contrast="high"] .sidebar { border-right: 2px solid var(--amarelo); }
[data-contrast="high"] .sidebar-nav a[aria-current="page"] { outline: 2px solid var(--amarelo); }
@media (prefers-reduced-motion: reduce) {
  .sidebar, body.has-sidebar #main { transition: none; }
}

/* ---------- Fila de atesto — multi-seleção e barra em lote (A/B) ---------- */
.col-check { width: 2rem; text-align: center; padding: 4px 6px; }
#tbl-fila .col-check input[type=checkbox] { cursor: pointer; }

.fila-lote-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--azul-10, rgba(0,58,112,.08));
  border: 1px solid var(--azul-30, rgba(0,58,112,.25));
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 10px;
  font-size: 0.88rem;
}
.fila-lote-bar[hidden] { display: none; }
.fila-lote-count { font-weight: 600; color: var(--azul, #003a70); margin-right: 4px; }
.fila-lote-sihd { display: flex; align-items: center; gap: 6px; cursor: pointer; margin-left: auto; }

/* ==========================================================================
   Quadro-resumo de pendências por regra (AVISOS e CRÍTICOS)
   Renderizado acima da listagem item-a-item em #view-atesto-detalhe.
   ========================================================================== */

.quadro-resumo {
  background: var(--bg-elev);
  border: 1px solid var(--borda);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-3) 0;
}
.quadro-resumo[hidden] { display: none; }

/* Cabeçalho: "X críticos · Y avisos" */
.quadro-resumo-hdr {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.quadro-resumo-titulo {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--azul-semus);
  margin: 0;
  flex: 1 0 auto;
}
.quadro-resumo-ok {
  font-size: 0.9rem;
  color: var(--success-fg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Grade de grupos de regra */
.quadro-resumo-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Um bloco por regra (status) */
.quadro-regra {
  border-left: 4px solid var(--borda-forte);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-section-2);
  padding: var(--space-2) var(--space-3);
  overflow-wrap: anywhere;
}
.quadro-regra--critico { border-left-color: var(--vermelho); }
.quadro-regra--erro    { border-left-color: var(--vermelho); }
.quadro-regra--aviso   { border-left-color: var(--amarelo); }

/* Linha de cabeçalho da regra */
.quadro-regra-hdr {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.quadro-regra-rotulo {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto);
}
.quadro-regra-count {
  font-size: 0.78rem;
  color: var(--texto-suave);
}
.quadro-regra-sev {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}
.quadro-regra-sev--critico,
.quadro-regra-sev--erro {
  background: var(--error-bg);
  color: var(--error-fg);
  border: 1px solid var(--error-border);
}
.quadro-regra-sev--aviso {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border: 1px solid var(--warn-border);
}

/* Lista de pacientes dentro de cada regra */
.quadro-pacientes {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Botão-atalho: clica → scroll + highlight na linha da tabela */
.quadro-pac-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 3px var(--space-2);
  text-align: left;
  width: 100%;
  cursor: pointer;
  color: var(--azul-claro);
  transition: background 0.12s;
}
.quadro-pac-link:hover,
.quadro-pac-link:focus-visible {
  background: var(--azul-suave);
  outline: none;
}
.quadro-pac-link:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 1px; }
.quadro-pac-nome { font-weight: 500; color: var(--texto); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quadro-pac-sigtap { font-family: monospace; font-size: 0.78rem; color: var(--texto-suave); white-space: nowrap; }
.quadro-pac-aih    { font-family: monospace; font-size: 0.78rem; color: var(--texto-suave); white-space: nowrap; }

/* Highlight piscante ao ser chamado pelo atalho do quadro-resumo */
@keyframes conf-row-highlight-anim {
  0%   { background: var(--warn-bg); box-shadow: 0 0 0 2px var(--amarelo); }
  70%  { background: var(--warn-bg); box-shadow: 0 0 0 2px var(--amarelo); }
  100% { background: transparent;   box-shadow: none; }
}
.conf-row-highlight > td {
  animation: conf-row-highlight-anim 1.6s ease-out forwards;
  border-radius: 0;
}

/* Mobile: label de severidade empilha */
@media (max-width: 600px) {
  .quadro-pac-link { flex-wrap: wrap; }
  .quadro-pac-nome { min-width: 100%; }
}

/* ============================================================
   Painel Médico Executante (feat/atesto-medico-atestador)
   ============================================================ */

/* summary expansível */
details#ad-medico-painel { margin: 1rem 0; border: 1px solid var(--border); border-radius: 6px; }
details#ad-medico-painel[hidden] { display: none; }
.medico-painel-summary {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1rem; cursor: pointer; font-weight: 600;
  list-style: none; user-select: none;
  color: var(--azul);
}
.medico-painel-summary::-webkit-details-marker { display: none; }
.medico-painel-summary::before { content: '▶'; font-size: 0.7rem; transition: transform 0.15s; }
details#ad-medico-painel[open] .medico-painel-summary::before { transform: rotate(90deg); }
.medico-painel-summary:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.medico-badge-contagem { margin-left: auto; }

.medico-painel-corpo { padding: 0 1rem 1rem; }
.medico-painel-desc  { margin: 0.25rem 0 0.75rem; font-size: 0.875rem; }

/* Barra de operação em lote */
.medico-lote-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: var(--bg-muted); border-radius: 5px; }
.medico-lote-barra[hidden] { display: none; }
.medico-lote-check-all { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.medico-lote-campo-wrap { display: flex; gap: 0.4rem; flex: 1; min-width: 200px; }
.medico-lote-input { flex: 1; padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--texto); font-size: 0.875rem; }
.medico-lote-input:focus { outline: 3px solid var(--amarelo); outline-offset: 1px; border-color: var(--azul); }
.medico-lote-sel-count { font-size: 0.8rem; white-space: nowrap; }

/* Aviso pós-save */
.medico-aviso-regenerar { margin: 0.25rem 0 0.75rem; padding: 0.5rem 0.75rem; border-left: 3px solid var(--amarelo); background: var(--warn-bg); font-size: 0.875rem; border-radius: 0 4px 4px 0; }
.medico-aviso-regenerar[hidden] { display: none; }

/* Wrapper com scroll horizontal em telas pequenas */
.medico-tbl-wrap { overflow-x: auto; }
.medico-tbl { width: 100%; }
.medico-col-check { width: 2rem; }
.medico-col-check[hidden] { display: none; }
.medico-loading { text-align: center; color: var(--texto-suave); padding: 1rem; }

/* Campo inline de médico por linha */
.medico-input-linha {
  width: 100%; max-width: 220px; padding: 0.25rem 0.4rem;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--texto); font-size: 0.825rem;
}
.medico-input-linha:focus { outline: 3px solid var(--amarelo); outline-offset: 1px; border-color: var(--azul); }
.medico-input-linha[readonly] { background: var(--bg-muted); color: var(--texto-suave); cursor: not-allowed; }

/* Fonte badge */
.medico-fonte-badge { display: inline-block; font-size: 0.7rem; padding: 0.1rem 0.35rem; border-radius: 3px; margin-top: 2px; }
.medico-fonte-arquivo   { background: var(--bg-muted); color: var(--texto-suave); }
.medico-fonte-atestador { background: #e8f5e9; color: #2e7d32; }
[data-tema="escuro"] .medico-fonte-atestador { background: #1b3a1e; color: #81c784; }
.medico-fonte-sisreg    { background: #e3f2fd; color: #1565c0; }
[data-tema="escuro"] .medico-fonte-sisreg    { background: #0d2744; color: #64b5f6; }

/* Botão salvar linha */
.medico-btn-salvar { padding: 0.2rem 0.55rem; font-size: 0.78rem; }
.medico-btn-salvar:focus-visible { outline: 3px solid var(--amarelo); }

/* Sugestões clicáveis */
.medico-sugestoes { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.medico-sug-btn {
  font-size: 0.72rem; padding: 0.1rem 0.4rem; border-radius: 3px;
  background: var(--bg-muted); border: 1px solid var(--border);
  color: var(--texto-suave); cursor: pointer; white-space: nowrap;
}
.medico-sug-btn:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.medico-sug-btn:focus-visible { outline: 3px solid var(--amarelo); }

/* Linha editada (dirty) antes de salvar */
.medico-row-dirty .medico-input-linha { border-color: var(--amarelo); }

@media (max-width: 600px) {
  .medico-lote-barra  { flex-direction: column; align-items: flex-start; }
  .medico-input-linha { max-width: 100%; }
}