/* ==========================================================================
   Sovereign Interface — Material You-inspired Design System
   - Tokens (cor, elevação, raio, ritmo)
   - Dark mode via [data-theme="dark"] / [data-theme="auto"] (prefers-color-scheme)
   ========================================================================== */

:root, [data-theme="light"] {
  color-scheme: light;

  /* Brand */
  --primary: #34146c;
  --primary-container: #4b2e83;
  --primary-hover: #431a8a;
  --on-primary: #ffffff;
  --primary-tint: rgba(52, 20, 108, 0.08);
  --primary-tint-strong: rgba(52, 20, 108, 0.16);

  /* Surfaces (tonal hierarchy, no borders) */
  --surface: #f8f9fd;
  --surface-lowest: #ffffff;
  --surface-low: #f2f4f7;
  --surface-container: #eef0f5;
  --surface-high: #e7eaf1;
  --surface-highest: #dde0eb;
  /* Fundo do sistema: o mesmo #f8f9fd, agora com três véus tirados do logo —
     o azul #021240 entrando pelo alto à esquerda, o roxo #451365 pelo alto à
     direita e o cinza #99A1AE subindo do rodapé.

     Os alfas ficam entre 4% e 10% porque o papel tem de continuar branco: o que
     separa um card do fundo aqui é só a distância entre este tom e o
     --surface-lowest, e um véu mais forte comeria essa distância. Os centros
     estão de propósito fora da tela (-12%, 108%) — assim só a aba do degradê
     entra no quadro, e não o miolo, que é onde a cor pesa. */
  --surface-gradient:
    radial-gradient(1100px 700px at 6% -12%, rgba(2, 18, 64, 0.055), transparent 62%),
    radial-gradient(900px 620px at 97% 2%, rgba(69, 19, 101, 0.045), transparent 58%),
    radial-gradient(1000px 560px at 50% 108%, rgba(153, 161, 174, 0.10), transparent 60%),
    var(--surface);
  --sidebar-surface: #ffffff;
  /* Véu que cobre a tela enquanto a próxima carrega. É o --surface com alfa, e
     não o preto dos modais: modal escurece porque quer que você olhe para a
     caixa de cima; aqui não há caixa, o assunto é a própria página chegando —
     escurecer leria como erro. Fica em 86% para a tela antiga continuar
     visível por trás, sem competir com o que gira na frente. */
  --scrim: rgba(248, 249, 253, 0.86);
  /* Ícone do menu: um passo mais discreto que o rótulo (--on-surface-muted) */
  --sidebar-icon: #8e8a99;

  /* Topbar na tinta da marca (#021240, único tom do logo ACTAR Peers Group) —
     escura nos dois temas. Texto e overlays puxados para o mesmo azul, para
     a faixa não misturar cinza neutro com azul saturado. */
  --topbar-h: 64px;
  --topbar-surface: #021240;
  --topbar-border: rgba(255, 255, 255, 0.10);
  --on-topbar: #e8ecf7;
  --on-topbar-muted: #9aa6c4;
  --topbar-hover: rgba(255, 255, 255, 0.10);
  --topbar-active: rgba(255, 255, 255, 0.18);
  /* Avatar: mesma família de matiz do logo, porém claro — um azul escuro
     sobre a faixa escura sumiria. */
  --topbar-avatar: linear-gradient(135deg, #1b3d8f 0%, #2f5fc0 100%);

  /* Text */
  --on-surface: #191c1f;
  --on-surface-variant: #494551;
  --on-surface-muted: #6b6873;

  /* Accents */
  --outline-variant: rgba(73, 69, 81, 0.15);
  --success: #1f7a4e;
  --success-bg: #e4f5ec;
  --danger: #b32236;
  --danger-bg: #fce8ea;
  --warning: #a96300;
  --warning-bg: #fff3dd;
  --info: #1f5ba8;
  --info-bg: #e3efff;

  /* Material You-inspired elevations (5 níveis) */
  --shadow-card:    0 1px 2px rgba(15, 17, 30, 0.05), 0 1px 3px rgba(15, 17, 30, 0.03);
  --shadow-ambient: 0 4px 12px rgba(15, 17, 30, 0.06), 0 2px 6px rgba(15, 17, 30, 0.04);
  --shadow-float:   0 12px 28px rgba(15, 17, 30, 0.12), 0 4px 12px rgba(15, 17, 30, 0.06);
  --shadow-modal:   0 24px 48px rgba(15, 17, 30, 0.20), 0 8px 16px rgba(15, 17, 30, 0.10);

  /* State layers (overlays para hover/active em Material 3) */
  --state-hover: rgba(25, 28, 31, 0.04);
  --state-pressed: rgba(25, 28, 31, 0.10);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);

  /* ── Cores de gráficos (Material You + adapta light/dark) ───────────────── */
  --chart-billable:        #7B2FBE;  /* Faturável (primária saturada) */
  --chart-billable-fg:     #ffffff;
  --chart-non-billable:    #C9A7EB;  /* Não faturável (primária clara) */
  --chart-non-billable-fg: #2a0a50;
  --chart-bar-purple:      var(--primary);
  --chart-bar-purple-light: rgba(75, 46, 131, 0.52);
  --chart-bar-yellow:      rgba(245, 158, 11, 0.92);
  --chart-bar-yellow-fg:   #5a3a00;
  --chart-bar-teal:        rgba(8, 145, 178, 0.85);
  --chart-bar-teal-fg:     #ffffff;

  /* Heatmap cells (background tints + foreground) */
  --chart-cell-under-bg: rgba(31, 122, 78, 0.18);
  --chart-cell-under-fg: var(--success);
  --chart-cell-ok-bg:    rgba(169, 99, 0, 0.22);
  --chart-cell-ok-fg:    var(--warning);
  --chart-cell-over-bg:  rgba(179, 34, 54, 0.22);
  --chart-cell-over-fg:  var(--danger);

  /* Legend swatches (densidades médias) */
  --chart-sw-under: rgba(31, 122, 78, 0.55);
  --chart-sw-ok:    rgba(169, 99, 0, 0.6);
  --chart-sw-over:  rgba(179, 34, 54, 0.6);

  /* Linhas de referência (chargeability) */
  --chart-refline-100: rgba(0, 0, 0, 0.2);
  --chart-refline-85:  rgba(22, 163, 74, 0.45);
  --chart-refline-70:  rgba(245, 158, 11, 0.5);

  /* Bars (chargeability) — saturação amigável para light */
  --chart-bar-ok:   rgba(22, 163, 74, 0.78);
  --chart-bar-warn: rgba(245, 158, 11, 0.85);
  --chart-bar-low:  rgba(239, 68, 68, 0.78);
  --chart-bar-none: var(--surface-high);

  /* Texto colorido em células de tabela (chargeability) */
  --chart-text-warn: #b45309;

  /* Gestão Operacional 2 — séries financeiras */
  --chart-bar-blue:       #2563eb;   /* Horas disponíveis */
  --chart-bar-indigo:     #6366f1;   /* Custo operacional */
  --chart-bar-green:      #16a34a;   /* Receita contratada / garantida */
  --chart-line-cobertura: #7c3aed;   /* Linha % cobertura / margem */

  /* Riscos do projeto — 4 níveis (bg + texto + ponto). Escala própria porque
     "alto" e "médio" precisam de dois hues entre o vermelho e o verde. */
  --risco-critico:    #b32236;  --risco-critico-bg: #fce8ea;  --risco-critico-fg: #7a1424;
  --risco-alto:       #c2410c;  --risco-alto-bg:    #fff1e6;  --risco-alto-fg:    #8a2e08;
  --risco-medio:      #a96300;  --risco-medio-bg:   #fff3dd;  --risco-medio-fg:   #6e4100;
  --risco-baixo:      #1f7a4e;  --risco-baixo-bg:   #e4f5ec;  --risco-baixo-fg:   #145236;

  /* Paleta categórica (avatares da equipe do projeto): 8 hues distinguíveis,
     texto branco por cima nos dois temas. */
  --palette-0: #4f46e5; --palette-1: #0e7490; --palette-2: #15803d; --palette-3: #b45309;
  --palette-4: #b91c1c; --palette-5: #6d28d9; --palette-6: #0f766e; --palette-7: #be185d;
  --palette-8: #1d4ed8; --palette-9: #0369a1; --palette-10: #4d7c0f; --palette-11: #6b7280;

  /* Eventos — Tabela de Plantão (calendário e matriz).
     Par cor + -fg: o -fg é o texto que fica POR CIMA da cor. Os hues são os
     históricos da tela, escurecidos o bastante para o branco passar em contraste. */
  --evento-plantao:      #c62828;
  --evento-plantao-fg:   #ffffff;
  --evento-bdh:          #1f6fd0;
  --evento-bdh-fg:       #ffffff;
  --evento-ferias:       #1f8a3b;
  --evento-ferias-fg:    #ffffff;
  --evento-licenca:      #7b3fa0;
  --evento-licenca-fg:   #ffffff;
  --evento-feriado-bg:   rgba(169, 99, 0, 0.12);
  --evento-feriado-fg:   #a96300;

  /* Radius — escala comprimida: quinas mais retas, hierarquia preservada.
     O botão continua pill; só a escada de superfícies encolheu. */
  --radius-xs: 0.1875rem;  /*  3px */
  --radius-sm: 0.3125rem;  /*  5px — input, dropdown */
  --radius-md: 0.5rem;     /*  8px — fieldset, toggle */
  --radius-lg: 0.625rem;   /* 10px — card, modal, filterbar, tabela */
  --radius-xl: 1rem;       /* 16px */
  --radius-pill: 999px;

  /* Spacing rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;

  /* Motion */
  --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-emphasized: 300ms cubic-bezier(0.2, 0, 0, 1);

  /* Semantic aliases */
  --border: var(--outline-variant);
  --sucesso: var(--success);
  --erro: var(--danger);
  --error: var(--danger);
  --aviso: var(--warning);
  --accent: var(--primary);
  /* Nomes que templates legados usam; apontam para os tokens canônicos. */
  --text-secondary: var(--on-surface-variant);
  --text-muted: var(--on-surface-muted);
  --shadow-lg: var(--shadow-modal);

  /* Legacy aliases */
  --cor-primaria: var(--primary);
  --cor-primaria-hover: var(--primary-hover);
  --cor-primaria-light: var(--primary-container);
  --cor-primaria-bg: var(--surface-low);
  --cor-primaria-bg-strong: var(--surface-high);
  --cor-secundaria: var(--primary-container);
  --cor-texto: var(--on-surface);
  --cor-texto-suave: var(--on-surface-variant);
  --cor-borda: var(--outline-variant);
  --cor-fundo: var(--surface);
  --cor-branco: var(--surface-lowest);
  --cor-sucesso: var(--success);
  --cor-sucesso-bg: var(--success-bg);
  --cor-erro: var(--danger);
  --cor-erro-bg: var(--danger-bg);
  --cor-aviso: var(--warning);
  --cor-aviso-bg: var(--warning-bg);
  --radius: var(--radius-md);
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-ambient);
}

/* ── Dark theme (Material You "neutralVariant" + tonal palette) ─────────── */
[data-theme="dark"] {
  color-scheme: dark;

  /* Brand — mantemos a família violeta, ajustada para alto contraste no dark */
  --primary: #b59bff;
  --primary-container: #5a3ea8;
  --primary-hover: #c5b2ff;
  --on-primary: #2a1466;
  --primary-tint: rgba(181, 155, 255, 0.10);
  --primary-tint-strong: rgba(181, 155, 255, 0.18);

  /* Surfaces — Material 3 dark tonal escala */
  --surface: #121316;
  --surface-lowest: #1a1c20;
  --surface-low: #1f2126;
  --surface-container: #25272c;
  --surface-high: #2c2e34;
  --surface-highest: #34373d;
  /* Os mesmos véus, com duas trocas que a medição obrigou.

     A primeira: aqui entra a tinta CRUA do logo, não a lavada que o escuro usa
     no texto e nos ícones. O véu lavado clareia o fundo — e o fundo escuro só
     tem 1,09:1 de distância para o card, que é pouco de sobra. Clarear come essa
     distância inteira (chegou a 1,03:1 no teste, o card sumindo no fundo). O azul
     #021240 e o roxo #451365 são mais escuros que o #121316: passam a cor sem
     mexer no brilho, e a separação fica em 1,07–1,09:1, igual à de antes.

     A segunda: o rodapé, que no claro é o cinza #99A1AE, aqui é azul de novo.
     O cinza é mais claro que este fundo e cairia no mesmo problema. */
  --surface-gradient:
    radial-gradient(1100px 700px at 6% -12%, rgba(2, 18, 64, 0.13), transparent 62%),
    radial-gradient(900px 620px at 97% 2%, rgba(69, 19, 101, 0.10), transparent 58%),
    radial-gradient(1000px 560px at 50% 108%, rgba(2, 18, 64, 0.06), transparent 60%),
    var(--surface);
  --sidebar-surface: #16181c;
  --scrim: rgba(18, 19, 22, 0.88);
  /* Ícone do menu: um passo mais discreto que o rótulo (--on-surface-muted) */
  --sidebar-icon: #75717f;

  /* Mesma tinta da marca, um degrau mais funda — no tema escuro o #021240
     cheio brilharia ao lado das superfícies quase pretas. */
  --topbar-h: 64px;
  --topbar-surface: #010b28;
  --topbar-border: rgba(255, 255, 255, 0.08);
  --on-topbar: #dfe5f4;
  --on-topbar-muted: #8592b3;
  --topbar-hover: rgba(255, 255, 255, 0.08);
  --topbar-active: rgba(255, 255, 255, 0.15);
  --topbar-avatar: linear-gradient(135deg, #16336f 0%, #2a539f 100%);

  /* Text */
  --on-surface: #e6e3ee;
  --on-surface-variant: #c1bdcc;
  --on-surface-muted: #8e8a99;

  /* Accents — desaturados/lighter para passar no contraste WCAG no dark */
  --outline-variant: rgba(193, 189, 204, 0.18);
  --success: #6cd28b;
  --success-bg: rgba(108, 210, 139, 0.14);
  --danger: #f49aa6;
  --danger-bg: rgba(244, 154, 166, 0.14);
  --warning: #ffc480;
  --warning-bg: rgba(255, 196, 128, 0.14);
  --info: #93c3ff;
  --info-bg: rgba(147, 195, 255, 0.14);

  /* Elevações dark: mais sutis, pretas semitransparentes */
  --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.20);
  --shadow-ambient: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-float:   0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-modal:   0 24px 48px rgba(0, 0, 0, 0.70), 0 8px 16px rgba(0, 0, 0, 0.40);

  --state-hover: rgba(230, 227, 238, 0.06);
  --state-pressed: rgba(230, 227, 238, 0.12);

  --gradient-primary: linear-gradient(135deg, #6a3ec0 0%, #8c5fdb 100%);

  /* Gráficos no dark — saturação maior e textos contrastantes */
  --chart-billable:        #a875e8;
  --chart-billable-fg:     #1a0540;
  --chart-non-billable:    #6a3ec0;
  --chart-non-billable-fg: #ede4ff;
  --chart-bar-purple:      #b59bff;
  --chart-bar-purple-light: rgba(181, 155, 255, 0.45);
  --chart-bar-yellow:      rgba(255, 196, 128, 0.95);
  --chart-bar-yellow-fg:   #2a1a00;
  --chart-bar-teal:        rgba(125, 211, 232, 0.92);
  --chart-bar-teal-fg:     #082a35;

  /* Heatmap cells — alpha bem maior pra aparecer no escuro */
  --chart-cell-under-bg: rgba(108, 210, 139, 0.30);
  --chart-cell-under-fg: var(--success);
  --chart-cell-ok-bg:    rgba(255, 196, 128, 0.30);
  --chart-cell-ok-fg:    var(--warning);
  --chart-cell-over-bg:  rgba(244, 154, 166, 0.32);
  --chart-cell-over-fg:  var(--danger);

  --chart-sw-under: rgba(108, 210, 139, 0.70);
  --chart-sw-ok:    rgba(255, 196, 128, 0.75);
  --chart-sw-over:  rgba(244, 154, 166, 0.75);

  --chart-refline-100: rgba(230, 227, 238, 0.30);
  --chart-refline-85:  rgba(108, 210, 139, 0.60);
  --chart-refline-70:  rgba(255, 196, 128, 0.65);

  --chart-bar-ok:   rgba(108, 210, 139, 0.92);
  --chart-bar-warn: rgba(255, 196, 128, 0.95);
  --chart-bar-low:  rgba(244, 154, 166, 0.92);
  --chart-bar-none: var(--surface-high);

  --chart-text-warn: #ffc480;

  /* Gestão Operacional 2 — dark */
  --chart-bar-blue:       #60a5fa;
  --chart-bar-indigo:     #818cf8;
  --chart-bar-green:      #4ade80;
  --chart-line-cobertura: #c084fc;

  /* Riscos — dark: fundo escuro tingido, texto claro */
  --risco-critico:    #f49aa6;  --risco-critico-bg: rgba(244, 154, 166, 0.16);  --risco-critico-fg: #fca5a5;
  --risco-alto:       #fdba74;  --risco-alto-bg:    rgba(253, 186, 116, 0.16);  --risco-alto-fg:    #fdba74;
  --risco-medio:      #ffc480;  --risco-medio-bg:   rgba(255, 196, 128, 0.16);  --risco-medio-fg:   #fde047;
  --risco-baixo:      #6cd28b;  --risco-baixo-bg:   rgba(108, 210, 139, 0.16);  --risco-baixo-fg:   #86efac;

  /* Paleta categórica — dark: um degrau mais claro para não sumir no fundo */
  --palette-0: #6366f1; --palette-1: #0891b2; --palette-2: #16a34a; --palette-3: #d97706;
  --palette-4: #dc2626; --palette-5: #7c3aed; --palette-6: #0d9488; --palette-7: #db2777;
  --palette-8: #3b82f6; --palette-9: #0ea5e9; --palette-10: #65a30d; --palette-11: #9ca3af;

  /* Eventos — dark: cor clara/dessaturada com texto escuro por cima */
  --evento-plantao:      #f08a92;
  --evento-plantao-fg:   #3a0a10;
  --evento-bdh:          #7fb2f5;
  --evento-bdh-fg:       #06203f;
  --evento-ferias:       #6cd28b;
  --evento-ferias-fg:    #06331a;
  --evento-licenca:      #c39cf0;
  --evento-licenca-fg:   #2a0a50;
  --evento-feriado-bg:   rgba(255, 196, 128, 0.18);
  --evento-feriado-fg:   #ffc480;
}

/* "Auto" segue prefer-color-scheme do SO quando o usuário escolhe Sistema */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --primary: #b59bff;
    --primary-container: #5a3ea8;
    --primary-hover: #c5b2ff;
    --on-primary: #2a1466;
    --primary-tint: rgba(181, 155, 255, 0.10);
    --primary-tint-strong: rgba(181, 155, 255, 0.18);
    --surface: #121316;
    --surface-lowest: #1a1c20;
    --surface-low: #1f2126;
    --surface-container: #25272c;
    --surface-high: #2c2e34;
    --surface-highest: #34373d;
    --surface-gradient:
      radial-gradient(1100px 700px at 6% -12%, rgba(2, 18, 64, 0.13), transparent 62%),
      radial-gradient(900px 620px at 97% 2%, rgba(69, 19, 101, 0.10), transparent 58%),
      radial-gradient(1000px 560px at 50% 108%, rgba(2, 18, 64, 0.06), transparent 60%),
      var(--surface);
    --sidebar-surface: #16181c;
    --scrim: rgba(18, 19, 22, 0.88);
    --sidebar-icon: #75717f;
    --topbar-h: 64px;
    --topbar-surface: #010b28;
    --topbar-border: rgba(255, 255, 255, 0.08);
    --on-topbar: #dfe5f4;
    --on-topbar-muted: #8592b3;
    --topbar-hover: rgba(255, 255, 255, 0.08);
    --topbar-active: rgba(255, 255, 255, 0.15);
    --topbar-avatar: linear-gradient(135deg, #16336f 0%, #2a539f 100%);
    --on-surface: #e6e3ee;
    --on-surface-variant: #c1bdcc;
    --on-surface-muted: #8e8a99;
    --outline-variant: rgba(193, 189, 204, 0.18);
    --success: #6cd28b;
    --success-bg: rgba(108, 210, 139, 0.14);
    --danger: #f49aa6;
    --danger-bg: rgba(244, 154, 166, 0.14);
    --warning: #ffc480;
    --warning-bg: rgba(255, 196, 128, 0.14);
    --info: #93c3ff;
    --info-bg: rgba(147, 195, 255, 0.14);
    --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.20);
    --shadow-ambient: 0 4px 12px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-float:   0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.30);
    --shadow-modal:   0 24px 48px rgba(0, 0, 0, 0.70), 0 8px 16px rgba(0, 0, 0, 0.40);
    --state-hover: rgba(230, 227, 238, 0.06);
    --state-pressed: rgba(230, 227, 238, 0.12);
    --gradient-primary: linear-gradient(135deg, #6a3ec0 0%, #8c5fdb 100%);
    --chart-billable: #a875e8;
    --chart-billable-fg: #1a0540;
    --chart-non-billable: #6a3ec0;
    --chart-non-billable-fg: #ede4ff;
    --chart-bar-purple: #b59bff;
    --chart-bar-purple-light: rgba(181, 155, 255, 0.45);
    --chart-bar-yellow: rgba(255, 196, 128, 0.95);
    --chart-bar-yellow-fg: #2a1a00;
    --chart-bar-teal: rgba(125, 211, 232, 0.92);
    --chart-bar-teal-fg: #082a35;
    --chart-cell-under-bg: rgba(108, 210, 139, 0.30);
    --chart-cell-ok-bg:    rgba(255, 196, 128, 0.30);
    --chart-cell-over-bg:  rgba(244, 154, 166, 0.32);
    --chart-sw-under: rgba(108, 210, 139, 0.70);
    --chart-sw-ok:    rgba(255, 196, 128, 0.75);
    --chart-sw-over:  rgba(244, 154, 166, 0.75);
    --chart-refline-100: rgba(230, 227, 238, 0.30);
    --chart-refline-85:  rgba(108, 210, 139, 0.60);
    --chart-refline-70:  rgba(255, 196, 128, 0.65);
    --chart-bar-ok:   rgba(108, 210, 139, 0.92);
    --chart-bar-warn: rgba(255, 196, 128, 0.95);
    --chart-bar-low:  rgba(244, 154, 166, 0.92);
    --chart-text-warn: #ffc480;
    --chart-bar-blue:       #60a5fa;
    --chart-bar-indigo:     #818cf8;
    --chart-bar-green:      #4ade80;
    --chart-line-cobertura: #c084fc;

    /* Riscos — dark: fundo escuro tingido, texto claro */
    --risco-critico:    #f49aa6;  --risco-critico-bg: rgba(244, 154, 166, 0.16);  --risco-critico-fg: #fca5a5;
    --risco-alto:       #fdba74;  --risco-alto-bg:    rgba(253, 186, 116, 0.16);  --risco-alto-fg:    #fdba74;
    --risco-medio:      #ffc480;  --risco-medio-bg:   rgba(255, 196, 128, 0.16);  --risco-medio-fg:   #fde047;
    --risco-baixo:      #6cd28b;  --risco-baixo-bg:   rgba(108, 210, 139, 0.16);  --risco-baixo-fg:   #86efac;

    /* Paleta categórica — dark: um degrau mais claro para não sumir no fundo */
    --palette-0: #6366f1; --palette-1: #0891b2; --palette-2: #16a34a; --palette-3: #d97706;
    --palette-4: #dc2626; --palette-5: #7c3aed; --palette-6: #0d9488; --palette-7: #db2777;
    --palette-8: #3b82f6; --palette-9: #0ea5e9; --palette-10: #65a30d; --palette-11: #9ca3af;
    --evento-plantao:      #f08a92;
    --evento-plantao-fg:   #3a0a10;
    --evento-bdh:          #7fb2f5;
    --evento-bdh-fg:       #06203f;
    --evento-ferias:       #6cd28b;
    --evento-ferias-fg:    #06331a;
    --evento-licenca:      #c39cf0;
    --evento-licenca-fg:   #2a0a50;
    --evento-feriado-bg:   rgba(255, 196, 128, 0.18);
    --evento-feriado-fg:   #ffc480;
  }
}

/* A Open Sans é carregada por <link> no base.html e no login.html. Aqui havia
   um @import — mas @import só vale antes de qualquer regra, e este vinha
   depois dos blocos de tokens, então o navegador o descartava e o sistema
   inteiro caía no fallback. */

* { box-sizing: border-box; }
/* `hidden` é o jeito canônico de esconder (B-04). Vence classes que fixam
   display (.form-row, .form-actions, .flex…), senão o atributo perde. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Arial, sans-serif;
  /* Fonte-raiz de todo o sistema. Os ~300 font-size e também os tokens de
     espaço e raio estão em rem, então este número escala texto E densidade
     juntos. A Open Sans desenha mais larga que a Segoe UI do fallback, por
     isso os 15px antigos passaram a parecer grandes quando ela entrou. */
  font-size: 14px;
  color: var(--on-surface);
  /* Camada mais atrás de tudo. Presa à viewport de propósito: sem o `fixed`, o
     degradê se estica na altura do documento, e numa tela de tabela longa o véu
     de cima viraria uma faixa horizontal no meio do caminho em vez de um canto
     iluminado. Preso, o fundo é sempre o mesmo, role-se quanto for.
     (No iOS o `fixed` cai para `scroll` — degrada para o véu esticado, que é
     mais suave ainda, não para um erro.) */
  background: var(--surface-gradient);
  background-attachment: fixed;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--motion-base), color var(--motion-base);
}

/* Editorial typography */
h1, h2, h3, h4, h5 {
  color: var(--on-surface);
  margin: 0 0 var(--space-3) 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.95rem; }

p { margin: 0 0 var(--space-3) 0; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color 150ms ease;
}
a:hover { color: var(--primary-container); text-decoration: none; }

/* Buttons — Material You com state layer.
   <button> sem classe é NEUTRO (outline discreto): Filtrar, Aplicar, ações de linha.
   .btn é o botão principal da tela (gradiente roxo) — idealmente um por tela.
   .btn-secundario / .btn-ghost / .btn-perigo continuam como variantes. */
button, .btn, input[type="submit"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  color: var(--on-surface);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow var(--motion-base), transform var(--motion-base), opacity var(--motion-base);
}

/* State layer Material 3 — overlay no hover/active */
button::after, .btn::after, input[type="submit"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  transition: background var(--motion-fast);
  z-index: -1;
}
button:hover::after, .btn:hover::after, input[type="submit"]:hover::after {
  background: var(--state-hover);
}
button:active::after, .btn:active::after, input[type="submit"]:active::after {
  background: var(--state-pressed, var(--state-hover));
}

button:hover, .btn:hover, input[type="submit"]:hover {
  box-shadow: var(--shadow-ambient);
  text-decoration: none;
  transform: translateY(-1px);
}

button:active, .btn:active, input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: var(--shadow-card);
}

button:disabled, .btn:disabled {
  background: var(--surface-high);
  color: var(--on-surface-muted);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Primary — filled (gradiente) */
.btn {
  background: var(--gradient-primary);
  color: var(--on-primary);
  border-color: transparent;
}
.btn:hover { color: var(--on-primary); }
.btn:hover::after { background: rgba(255, 255, 255, 0.08); }
.btn:active::after { background: rgba(255, 255, 255, 0.16); }

/* Secondary — outline minimal com state layer */
.btn-secundario, .btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--outline-variant);
}
.btn-secundario::after, .btn-secondary::after {
  background: transparent;
}
.btn-secundario:hover, .btn-secondary:hover {
  background: var(--primary-tint);
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: none;
  transform: translateY(-1px);
}
.btn-secundario:hover::after, .btn-secondary:hover::after { background: transparent; }
.btn-secundario:active::after, .btn-secondary:active::after { background: var(--primary-tint-strong); }

/* Ghost — apenas texto */
.btn-ghost {
  background: transparent;
  color: var(--on-surface-variant);
  border: 0;
  font-weight: 500;
}
.btn-ghost::after { background: transparent; }
.btn-ghost:hover {
  background: var(--state-hover);
  color: var(--on-surface);
  box-shadow: none;
  transform: none;
}

/* Danger */
.btn-perigo, .btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: transparent;
}
.btn-perigo::after, .btn-danger::after { background: transparent; }
.btn-perigo:hover, .btn-danger:hover {
  background: var(--danger);
  color: #fff;
  box-shadow: var(--shadow-ambient);
}
.btn-perigo:hover::after, .btn-danger:hover::after { background: rgba(255, 255, 255, 0.08); }

.btn-small { padding: 0.375rem 0.875rem; font-size: 0.8rem; }

/* Inputs — Material You filled style */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--on-surface);
  background: var(--surface-container);
  transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast);
}

input:hover:not(:disabled):not([readonly]),
select:hover:not(:disabled),
textarea:hover:not(:disabled):not([readonly]) {
  background: var(--surface-high);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--surface-lowest);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint-strong);
}

input:disabled, input[readonly],
select:disabled,
textarea:disabled, textarea[readonly] {
  background: var(--surface-low);
  color: var(--on-surface-muted);
  cursor: not-allowed;
}

::placeholder { color: var(--on-surface-muted); opacity: 0.7; }

label {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-2);
  color: var(--on-surface-variant);
  text-transform: none;
}

.form-group { margin-bottom: var(--space-4); }
/* Rotulo de grupo sem controle unico (titulo de checkbox/radio) — mesmo visual do label */
.form-group > .field-label {
  display: block; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.03em;
  margin-bottom: var(--space-2); color: var(--on-surface-variant);
}
/* Checkbox com texto ao lado dentro de um form */
.form-check {
  display: inline-flex; align-items: center; gap: 0.45rem; margin: 0;
  font-weight: 400; font-size: 0.9rem; letter-spacing: 0; color: var(--on-surface); cursor: pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--primary); flex: 0 0 auto; }
/* Vários .form-check empilhados (ex.: flags de participação) */
.form-checks { display: flex; flex-direction: column; gap: 0.6rem; }
/* Texto auxiliar abaixo de um controle */
.form-hint { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: var(--on-surface-variant); }
.form-hint a { color: var(--primary); }
/* Complemento dentro do próprio <label> ("— usuários da vertical X") */
.label-hint { font-weight: 400; font-size: 0.78rem; text-transform: none; letter-spacing: 0; color: var(--on-surface-variant); }

/* Seção de formulário: título pequeno + linha, agrupa campos afins num form longo */
.form-section { border: 0; padding: 0; margin: 0 0 var(--space-5); min-width: 0; }
.form-section + .form-section { padding-top: var(--space-5); border-top: 1px solid var(--outline-variant); }
.form-section > legend, .form-section-title {
  display: block; width: 100%; padding: 0; margin: 0 0 var(--space-4);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-surface-muted);
}
.form-section > legend i, .form-section-title i { margin-right: 0.3rem; color: var(--primary); }
.form-section-desc { margin: calc(-1 * var(--space-3)) 0 var(--space-4); font-size: 0.8rem; color: var(--on-surface-variant); }

/* Checkboxes em "chips" (skills, opções múltiplas curtas) */
.check-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.check-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; margin: 0;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  border: 1px solid var(--outline-variant); background: var(--surface-lowest);
  font-size: 0.85rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--on-surface); cursor: pointer; user-select: none;
  transition: background 120ms, border-color 120ms;
}
.check-chip:hover { border-color: var(--primary); }
.check-chip input { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: var(--primary); }
.check-chip:has(input:checked) { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); font-weight: 600; }

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}
.form-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .form-row-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
}

.form-actions {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* Faixa de operacoes secundarias abaixo do Salvar (ex.: Desmembrar, Gerar apontamento);
   a destrutiva vai com .form-actions-fim, isolada a direita. */
.form-actions-sec {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--outline-variant);
  align-items: center;
}
.form-actions-sec-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-muted);
  margin-right: var(--space-2);
}
.form-actions .form-actions-fim { margin-left: auto; }
.form-actions-nota { font-size: 0.78rem; color: var(--on-surface-muted); }
.form-actions-meta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; color: var(--on-surface-variant);
}

/* Etapas de formulario (ol.steps): 1 -> 2 -> 3; .is-done ja preenchida, .is-active atual. */
.steps {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}
.step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--on-surface-muted);
}
.step + .step::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--outline-variant);
  margin-right: var(--space-1);
}
.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1.5px solid var(--outline-variant);
  color: var(--on-surface-muted);
  background: var(--surface-lowest);
}
.step.is-active { color: var(--on-surface); }
.step.is-active .step-num { border-color: var(--primary); background: var(--primary); color: #fff; }
.step.is-done { color: var(--on-surface-variant); }
.step.is-done .step-num {                     /* numero vira check */
  border-color: var(--success); background: var(--success-bg); color: var(--success); font-size: 0;
}
.step.is-done .step-num::before { content: "¹3"; font-size: 0.72rem; }
@media (max-width: 640px) {
  .step-label { display: none; }
  .step.is-active .step-label { display: inline; }
}

/* Resumo descritivo (dl.resumo-lista): dados de leitura dentro de um form,
   no lugar de inputs readonly. */
.resumo {
  background: var(--surface-low);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.resumo-lista {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}
.resumo-item { min-width: 0; }
.resumo-item-largo { grid-column: 1 / -1; }
.resumo-item dt {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-muted);
  margin-bottom: 0.15rem;
}
.resumo-item dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--on-surface);
  overflow-wrap: anywhere;
}
.resumo-item dd:empty::before { content: "4"; color: var(--on-surface-muted); }
.resumo-nota { margin: var(--space-2) 0 0; font-size: 0.8rem; color: var(--on-surface-variant); }
@media (max-width: 640px) {
  .resumo-lista { grid-template-columns: 1fr; }
}

/* Cards — Material You filled surface, hover sutil */
.card {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--motion-base), background var(--motion-base);
  border: 1px solid var(--outline-variant);
}

.card-flat {
  background: var(--surface-low);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: none;
}

/* Em dark, cards ganham elevação por tonalidade ao invés de sombra (Material 3) */
[data-theme="dark"] .card { border-color: transparent; background: var(--surface-lowest); }
[data-theme="dark"] .card-flat { background: var(--surface-low); }

/* Alerts — tonal, no harsh borders */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.alert-sucesso, .alert-success {
  background: var(--success-bg);
  border-left-color: var(--success);
  color: var(--success);
}
.alert-erro, .alert-error {
  background: var(--danger-bg);
  border-left-color: var(--danger);
  color: var(--danger);
}
.alert-aviso, .alert-warning {
  background: var(--warning-bg);
  border-left-color: var(--warning);
  color: var(--warning);
}
.alert-info {
  background: var(--info-bg);
  border-left-color: var(--info);
  color: var(--info);
}
/* Alerta com conteúdo estruturado (título, lista, parágrafos) e/ou ícone. */
.alert > :first-child { margin-top: 0; }
.alert > :last-child { margin-bottom: 0; }
.alert h3 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; }
.alert p { margin: 0 0 0.5rem; }
.alert ul { margin: 0 0 0.75rem 1.25rem; }
.alert small, .alert .alert-sub { font-size: 0.85em; opacity: 0.8; }
.alert-com-icone { display: flex; align-items: center; gap: 0.6rem; }
.alert-com-icone > i { font-size: 1.3rem; flex: 0 0 auto; }
.alert-com-icone .text-muted { display: block; font-size: 0.82rem; color: inherit; opacity: 0.85; }

/* Utility */
.text-muted { color: var(--on-surface-variant); font-size: 0.85rem; }
.text-subtle { color: var(--on-surface-muted); font-size: 0.8rem; letter-spacing: 0.04em; }
.text-right { text-align: right; }
.text-center { text-align: center; }
/* Só para leitores de tela (cabeçalho de coluna de ícone, rótulo de botão). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }

/* Estado vazio / carregando de áreas preenchidas por JS (auditoria UX, M-08).
   Um único lugar para o padding e a cor; o texto diz o que fazer, não só que
   não há nada. `.is-loading` acrescenta o spinner à esquerda do texto. */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; padding: 30px 16px; text-align: center;
  color: var(--on-surface-variant); font-size: 0.85rem;
}
.empty-state i { font-size: 1.6rem; color: var(--on-surface-muted); }
.empty-state.is-loading::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--outline-variant); border-top-color: var(--primary);
  animation: empty-state-spin 0.8s linear infinite;
}
@keyframes empty-state-spin { to { transform: rotate(360deg); } }
.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-4); }
.mt-3 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-4); }
.mb-3 { margin-bottom: var(--space-5); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.m-0 { margin: 0; }
.ml-auto { margin-left: auto; }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.78rem; }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }
.fw-600 { font-weight: 600; }

/* Cabeçalho de seção dentro de uma tela/aba: título à esquerda, ação à
   direita (B-04 — substitui os `display:flex; justify-content:space-between`
   inline com <h3 style="margin:0">). */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem;
}
.section-header h2, .section-header h3 { margin: 0; font-size: 0.95rem; font-weight: 600; }
.section-header .text-muted { font-size: 0.85rem; }

/* Card só com tabela dentro (padding menor / nenhum). */
.card.card-tight { padding: 0.5rem; }
.card.card-flush { padding: 0; }

/* Grupo de campos destacado (ex.: escopo da edição de série). */
.form-box { background: var(--surface-low); padding: 0.75rem 1rem; border-radius: var(--radius-md); }
/* Lista rolável de checkboxes (ex.: equipe do projeto). */
.check-list {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--outline-variant); border-radius: var(--radius-md);
  max-height: 140px; overflow-y: auto;
}
/* Erro de validação de um form/modal (JS mostra tirando `hidden`). */
.form-error { color: var(--danger); font-size: 0.85rem; margin-top: 0.5rem; }

/* Badges / Pills */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.625rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--surface-high);
  color: var(--primary);
}

.badge-primary {
  background: var(--surface-high);
  color: var(--primary);
}
.badge-sistema, .badge-muted {
  background: var(--surface-container);
  color: var(--on-surface-variant);
}
.badge-success {
  background: var(--success-bg);
  color: var(--success);
}
.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.badge-info {
  background: var(--info-bg);
  color: var(--info);
}

/* Badges de status de projeto */
.badge-projeto-ativo     { background: var(--success-bg); color: var(--success); }
.badge-projeto-previsto  { background: var(--surface-high); color: var(--primary); }
.badge-projeto-encerrado { background: var(--surface-container); color: var(--on-surface-variant); }
.badge-projeto-cancelado { background: var(--danger-bg); color: var(--danger); }
.badge-projeto-rascunho  { background: var(--surface-container); color: var(--on-surface-variant); }

/* ── Semáforo de KPI (ícone + meta abaixo do valor) ─────────────────────────
   Gerado por VizCore.faixas.aplicarSemaforo(el, nivel, meta). O valor recebe
   sem-ok / sem-warn / sem-bad (cada dashboard colore o seu .xx-kpi-value.sem-*);
   a tag fica logo abaixo. Limiares: viz-core.js → DOMAIN.md "Faixas de cor". */
.kpi-semaforo {
  display: inline-flex; align-items: center; gap: 0.25rem;
  margin-top: 0.2rem; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--on-surface-muted); white-space: nowrap;
}
.kpi-semaforo i { font-size: 0.85rem; line-height: 1; }
.kpi-semaforo.is-ok   { color: var(--success); }
.kpi-semaforo.is-warn { color: var(--warning); }
.kpi-semaforo.is-bad  { color: var(--danger); }

/* Status dot pattern */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--on-surface-variant);
}
.status-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--on-surface-muted);
}
.status-dot.active::before { background: var(--success); box-shadow: 0 0 0 3px rgba(31, 122, 78, 0.18); }
.status-dot.inactive::before { background: var(--on-surface-muted); }

/* Scrollbar (subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-high); border-radius: 999px; border: 2px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: var(--on-surface-muted); }

/* ── Popup modal de notificação ──────────────────────────────────────────── */
.notif-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: notif-fade-in 0.2s ease;
}
.notif-overlay.notif-hide {
  animation: notif-fade-out 0.25s ease forwards;
}
.notif-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 420px;
  margin: 1rem;
  overflow: hidden;
  animation: notif-slide-in 0.25s ease;
  border: 1px solid var(--outline-variant);
}
.notif-overlay.notif-hide .notif-card {
  animation: notif-slide-out 0.25s ease forwards;
}
.notif-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--border);
}
.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.notif-sucesso .notif-icon { background: rgba(22,163,74,.15);  color: var(--success, #16a34a); }
.notif-erro    .notif-icon { background: rgba(220,38,38,.12);  color: var(--danger,  #dc2626); }
.notif-aviso   .notif-icon { background: rgba(217,119,6,.12);  color: var(--warning, #d97706); }
.notif-popup   .notif-icon { background: rgba(37,99,235,.12);  color: var(--primary, #2563eb); }

.notif-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--on-surface);
  flex: 1;
}
.notif-sucesso .notif-title { color: var(--success, #16a34a); }
.notif-erro    .notif-title { color: var(--danger,  #dc2626); }
.notif-aviso   .notif-title { color: var(--warning, #d97706); }
.notif-popup   .notif-title { color: var(--primary, #2563eb); }

.notif-body {
  padding: 1rem 1.25rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--on-surface);
}
.notif-footer {
  padding: 0 1.25rem 1.1rem;
  display: flex;
  justify-content: flex-end;
}
.notif-btn {
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  transition: opacity 0.15s;
}
.notif-btn:hover { opacity: 0.85; }
.notif-sucesso .notif-btn { background: var(--success, #16a34a); color: #fff; }
.notif-erro    .notif-btn { background: var(--danger,  #dc2626); color: #fff; }
.notif-aviso   .notif-btn { background: var(--warning, #d97706); color: #fff; }
.notif-popup   .notif-btn { background: var(--primary, #2563eb); color: #fff; }

@keyframes notif-fade-in  { from { opacity:0; } to { opacity:1; } }
@keyframes notif-fade-out { from { opacity:1; } to { opacity:0; } }
@keyframes notif-slide-in  { from { opacity:0; transform: scale(.93) translateY(-12px); } to { opacity:1; transform: scale(1) translateY(0); } }
@keyframes notif-slide-out { from { opacity:1; transform: scale(1) translateY(0); } to { opacity:0; transform: scale(.93) translateY(-12px); } }

/* Modal de confirmação (Notify.confirm): dois botões, o seguro à esquerda. */
.notif-confirm .notif-footer { gap: 0.5rem; }
.notif-confirm .notif-footer .btn-secundario { height: auto; padding: 0.5rem 1.1rem; font-size: 0.875rem; }
.notif-icon > i { font-size: 1.25rem; line-height: 1; }

/* ── Modal de conteúdo (formulários, detalhes) ───────────────────────────── */
/* Base única para todo modal com conteúdo próprio (auditoria UX, A-09). O
   Notify (mensagem/confirmação) continua no .notif-overlay acima; este é o
   irmão para HTML da página. Abre/fecha por window.Modal (app.js), que cuida
   de Esc, clique fora, foco inicial, Tab preso e devolução do foco.
   Estrutura:
     <div id="x" class="modal-backdrop" aria-hidden="true">
       <div class="modal [modal-sm|modal-lg|modal-xl]" role="dialog" aria-modal="true" aria-labelledby="x-titulo">
         <div class="modal-header"><h2 id="x-titulo">…</h2>
           <button type="button" class="modal-close" data-modal-fechar aria-label="Fechar"><i class="ri-close-line"></i></button></div>
         <div class="modal-body">…</div>
         <div class="modal-footer">…</div>
       </div>
     </div>
   Atributos no backdrop: data-sem-esc (Esc não fecha), data-sem-fechar-fora. */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9990;            /* abaixo do Notify (9997/9998): um confirm pode abrir por cima */
  background: rgba(0,0,0,.45);
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: notif-fade-in 0.2s ease;
}
.modal-backdrop.aberto { display: flex; }
.modal {
  background: var(--surface-lowest);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  animation: notif-slide-in 0.25s ease;
}
.modal-sm { max-width: 420px; }
.modal-lg { max-width: 760px; }
.modal-xl { max-width: 980px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1rem 1.25rem 0.85rem;
  border-bottom: 1px solid var(--outline-variant);
}
.modal-header h2, .modal-header h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--on-surface); }
.modal-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--on-surface-variant); font-size: 1.2rem; line-height: 1; cursor: pointer;
  box-shadow: none; transform: none;
}
.modal-close:hover { background: var(--surface-low); color: var(--on-surface); box-shadow: none; transform: none; }
.modal-body { padding: 1.25rem; overflow-y: auto; min-height: 0; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.85rem 1.25rem 1.1rem;
  border-top: 1px solid var(--outline-variant);
}
/* Um <form> que embrulha body + footer não quebra a coluna flex do .modal. */
.modal > form { display: contents; }
/* Sem rolagem por trás enquanto um modal está aberto. */
body.modal-aberto { overflow: hidden; }

/* ── Acessibilidade: foco por teclado e skip link ──────────────────────────
   Inputs já têm o anel (box-shadow em input:focus, acima). Aqui entra o que
   faltava: links, botões, .icon-btn, .ms-btn, itens do menu, cards clicáveis.
   Só em :focus-visible — clique de mouse não mostra o anel. :where() dá
   especificidade zero, então qualquer regra local (ex.: .tab, offset -2px)
   continua mandando. tabindex="-1" fica de fora: é foco programático
   (modal, alvo do skip link), não navegação por Tab. */
:where(a, button, [role="button"], summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Sobre o fundo escuro da topbar o roxo some; usa a cor do texto dela. */
.topbar :where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: var(--on-topbar);
}
/* Sidebar corta o que passa da largura (overflow-x hidden): anel por dentro. */
.sidebar :where(a, button):focus-visible { outline-offset: -2px; }
/* Alvo do skip link (main#conteudo): recebe foco, mas sem anel na página inteira.
   scroll-margin-top: ao focar, o navegador rola o main até o topo da janela e a
   topbar (sticky) cobriria o cabeçalho da página. */
#conteudo:focus { outline: none; }
#conteudo { scroll-margin-top: calc(var(--topbar-h) + 0.5rem); }

/* Skip link: primeiro item do <body>. Invisível até receber foco por Tab;
   aí desce por cima da topbar (acima de toasts e do véu, 10000). */
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 10001;
  padding: 0.55rem 1rem;
  background: var(--primary); color: var(--on-primary);
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
  transform: translateY(-120%);
  transition: transform 120ms;
}
.skip-link:focus, .skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--on-primary); outline-offset: -4px;
}
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ── Abas (.tabs / .tab / .tab-pane) ───────────────────────────────────────
   Barra `.tabs` com botões `.tab[data-tab]`; painéis `.tab-pane[data-tab-id]`
   (mostrados com .is-active). Clique, setas e ARIA: window.Tabs (app.js). */
.tabs {
  display: flex; gap: 0.25rem; margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--outline-variant);
  overflow-x: auto; flex-wrap: nowrap;
}
.tab, .tab:hover, .tab:active {
  /* desliga o visual de botão principal (gradiente/pill/sombra) */
  background: none; border: 0; border-radius: 0; box-shadow: none; transform: none;
  overflow: visible; isolation: auto;
}
.tab {
  padding: 0.55rem 0.9rem; margin-bottom: -1px;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--on-surface-variant); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color 120ms;
}
.tab::after { display: none; }
.tab:hover { color: var(--on-surface); }
.tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.tab[disabled], .tab.tab-disabled {
  background: none; color: var(--on-surface-variant);
  opacity: 0.35; cursor: not-allowed; pointer-events: none;
}
.tab i { font-size: 0.85em; }
/* Aba indisponível embrulhada num span com title: o span recebe o hover
   (button[disabled] não mostra tooltip em todo navegador). */
.tab-bloqueada { display: inline-flex; cursor: not-allowed; }
.tab-pane { display: none; }
.tab-pane.is-active { display: block; }

/* ── Toast (feedback não bloqueante) ──────────────────────────────────────── */
/* Fica no canto superior direito, abaixo da topbar. Empilha; cada um some
   sozinho (sucesso/aviso) ou fica até o usuário fechar (erro). */
.toast-stack {
  position: fixed;
  top: calc(var(--topbar-h, 64px) + 0.75rem);
  right: 1rem;
  z-index: 9997;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(400px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.75rem 0.75rem 0.9rem;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-ambient);
  color: var(--on-surface);
  animation: toast-in 0.22s ease;
}
.toast.toast-hide { animation: toast-out 0.22s ease forwards; }
.toast-icon { font-size: 1.2rem; line-height: 1.2; flex-shrink: 0; }
.toast-text { flex: 1; min-width: 0; }
.toast-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.15rem;
}
.toast .notif-body { padding: 0; font-size: 0.875rem; line-height: 1.45; }
.toast-close, .toast-close:hover, .toast-close:active {
  background: transparent;
  border: none;
  padding: 0.15rem;
  margin: -0.15rem -0.15rem 0 0;
  border-radius: var(--radius-sm);
  color: var(--on-surface-muted);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  box-shadow: none;
  min-width: 0;
  height: auto;
}
.toast-close:hover { background: var(--state-hover); color: var(--on-surface); }
.toast-close::after { display: none; }
.toast.notif-sucesso { border-left-color: var(--success); }
.toast.notif-sucesso .toast-icon, .toast.notif-sucesso .toast-title { color: var(--success); }
.toast.notif-erro    { border-left-color: var(--danger); }
.toast.notif-erro .toast-icon, .toast.notif-erro .toast-title { color: var(--danger); }
.toast.notif-aviso   { border-left-color: var(--warning); }
.toast.notif-aviso .toast-icon, .toast.notif-aviso .toast-title { color: var(--warning); }
.toast.notif-popup   { border-left-color: var(--info); }
.toast.notif-popup .toast-icon, .toast.notif-popup .toast-title { color: var(--info); }

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

/* ── Estados de formulário (app.js) ─────────────────────────────────────── */
/* Anti-duplo-envio: botão desabilitado pelo envio em curso. */
form.is-submitting [data-once-disabled] { opacity: .6; cursor: progress; }
/* Guarda de alterações não salvas: marca discreta no form. */
form[data-dirty-guard].is-dirty .dirty-indicator,
.dirty-indicator.is-on { display: inline-flex; }  /* .is-on: páginas com estado em JS (DirtyGuard.registrar) */
.dirty-indicator { display: none; align-items: center; gap: .25rem; font-size: .75rem; color: var(--warning); }

@media (max-width: 640px) {
  .toast-stack { right: 0.5rem; left: 0.5rem; width: auto; }
}

/* Selection */
::selection { background: var(--primary); color: #fff; }