/* ═══════════════════════════════════════════════════════════════
   MINERVA — Dejur Local · Grupo Firma
   Brand Identity v1 · abril/2026 · paleta oficial Minerva Duo
   (Ink #1E3A8A → Royal #2E4FB0, Forest #0F4D3A → Jade #10B981,
    Moss #047857, Bordô #8B1E3F, Warning #F59E0B)
   Fonte única de verdade: memory/project_brand_identity_minerva.md
   Proibido: #818CF8, #34D399, #FBBF24, #EF4444 (paleta antiga banida)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Firma Brand — cores oficiais */
  /* ═══ Minerva Blue Duo — identidade primária do sistema ════════
     Migração Abril/2026: do cyan Firma (#006DBE) para o Minerva Duo
     (gradient Ink→Royal). O Firma Blue fica como herança da holding
     em peças institucionais externas (logomarca, papelaria).         */
  --minerva-blue-ink:        #1E3A8A;   /* base sóbria — texto, ícone, borda */
  --minerva-blue-ink-dark:   #142B6F;   /* hover do Ink */
  --minerva-blue-royal:      #2E4FB0;   /* highlight — brilho, halo, hover */
  --minerva-blue-royal-dark: #264296;   /* hover do Royal */
  /* Gradients agora referenciam os tokens acima — override no dark atualiza automaticamente */
  --minerva-gradient:        linear-gradient(135deg, var(--minerva-blue-ink) 0%, var(--minerva-blue-royal) 100%);
  --minerva-gradient-hover:  linear-gradient(135deg, var(--minerva-blue-royal-dark) 0%, var(--minerva-blue-royal) 100%);
  --minerva-blue-bg:         #E8ECF8;   /* sólido claríssimo do Ink — fundos suaves */

  /* ═══ Minerva Green Duo — identidade de sucesso e validação ════
     Evolução do verde lime Firma (#31D03F) para um verde mais sóbrio
     e legível em tabelas longas. O Firma Green fica como herança.    */
  --minerva-green-forest:       #0F4D3A;   /* base sóbria — verde profundo */
  --minerva-green-forest-dark:  #0A3829;   /* hover do Forest */
  --minerva-green-jade:         #10B981;   /* highlight — verde jade brilhante */
  --minerva-green-jade-dark:    #059669;   /* hover do Jade */
  /* Gradients via var() — override no dark cascateia automaticamente */
  --minerva-green-gradient:       linear-gradient(135deg, var(--minerva-green-forest) 0%, var(--minerva-green-jade) 100%);
  --minerva-green-gradient-hover: linear-gradient(135deg, var(--minerva-green-forest-dark) 0%, var(--minerva-green-jade-dark) 100%);
  --minerva-green-bg:             #E8F7F0;   /* sólido claríssimo do Jade — fundos suaves */

  /* ═══ Camada UI Aplicada — cores mais sóbrias pra interface diária ═══
     Royal e Jade são "cores de marca" (aparecem SEMPRE em gradients, NUNCA solo).
     Steel é o "primary solid blue" — usar sempre que precisar de azul sólido
     (botões que não usam gradient, halos, focus, borders de destaque).
     Moss é o sucesso sóbrio de UI (badges, checks, alertas verdes).         */
  --minerva-blue-steel:       #2B4A8B;   /* primary solid blue — halos, hover, focus */
  --minerva-blue-steel-dark:  #1F3866;   /* hover mais profundo */
  --minerva-green-moss:       #047857;   /* alerta de sucesso, badge concluído, check */
  --minerva-green-moss-dark:  #03604A;   /* hover */
  --minerva-green-moss-bg:    #E6F3EE;   /* fundo sólido claro do Moss */
  --minerva-amber:            var(--warning);   /* alias retrocompat — Warning oficial é #F59E0B (Brand Identity v1) */
  --minerva-bordeaux:         #8B1E3F;   /* destrutivo institucional — substitui vermelho coral */
  --minerva-bordeaux-dark:    #6F1832;   /* hover do Bordeaux */

  /* ═══ Famílias tipográficas do Minerva ═══════════════════════════
     Inter é base (UI/corpo). Playfair aparece APENAS em peças de marca
     (wordmark "MINERVA", tagline, citações institucionais, drop caps).
     JetBrains Mono aparece APENAS em dados técnicos (hex, tokens, atalhos
     de teclado ⌘K). Nunca usar Playfair em UI comum nem Mono em corpo.     */
  --font-serif:  'Playfair Display', 'Libre Caslon Text', Georgia, serif;
  --font-mono-code: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ─ Aliases retrocompatíveis ─ o app inteiro usa --firma-blue há meses;
     em vez de caçar cada uso, o alias aponta pro Ink. Migração transparente. */
  --firma-blue:       #1E3A8A;            /* era #006DBE — agora Minerva Ink */
  --firma-blue-dark:  #142B6F;            /* era #005aa0 */
  --firma-blue-deep:  #0F1F52;            /* era #004880 */
  --firma-blue-light: #3A5BC4;            /* era #2288d4 — caminha pro Royal */
  --firma-blue-bg:    var(--minerva-blue-bg);  /* alias retrocompatível pro novo token */
  --firma-blue-rgb:   30, 58, 138;        /* RGB do Ink */
  --firma-green:      #10B981;            /* alias retrocompat: agora Minerva Jade (era #31D03F) */
  --firma-dark:       #1a2335;

  /* Backgrounds */
  --bg-primary:    #f4f6fb;
  --bg-secondary:  #ffffff;
  --bg-tertiary:   #f8f9fd;
  --bg-card:       #ffffff;
  --bg-card-hover: #f8f9ff;
  --bg-sidebar:    #0D1015;                /* Brand v1: sidebar sempre escura, mesmo no light */

  /* Borders */
  --border-color: rgba(64, 84, 178, 0.12);
  --border-glow:  rgba(64, 84, 178, 0.35);

  /* Accent */
  /* Accent — aliases que apontam pros novos tokens Minerva (migração abril/2026) */
  --accent-primary:     #1E3A8A;              /* = --minerva-blue-ink */
  --accent-primary-rgb: 30, 58, 138;          /* RGB do Ink */
  --accent-hover:       #142B6F;              /* = --minerva-blue-ink-dark */
  --accent-secondary:   #2E4FB0;              /* = --minerva-blue-royal */
  --accent-glow:        rgba(30, 58, 138, 0.18);

  /* Foreground — escala Minerva v1 (Brand Identity). Quatro níveis de neutro.
     Dim é pra foot notes, disabled states, captions ultra-discretas.
     Aliases --text-* mantidos pra retrocompat durante migração. */
  --fg-primary:   #0F1729;
  --fg-secondary: #4B5370;
  --fg-muted:     #5C6480;            /* era #8189A3 — escurecido para WCAG AA em texto pequeno (Carteira por Escritório, kpi-subtext, chip-val, etc.) */
  --fg-dim:       #B1B8CE;
  --fg-heading:   #111827;
  /* Aliases retrocompat — seguem os --fg-* automaticamente */
  --text-primary:   var(--fg-primary);
  --text-secondary: var(--fg-secondary);
  --text-muted:     var(--fg-muted);
  --text-dim:       var(--fg-dim);
  --text-heading:   var(--fg-heading);

  /* Backgrounds adicionais — bg-inset pra recuos profundos (inputs, code, blockquote inset) */
  --bg-inset:       #F1F4FA;                    /* NOVO */

  /* Semantic — success agora aponta pro Minerva Moss (verde sóbrio de UI,
     em vez do Jade vivo que fica na marca/gradient) */
  --success:    #047857;                        /* = --minerva-green-moss */
  --success-bg: rgba(4, 120, 87, 0.10);
  --warning:    #F59E0B;                        /* Brand Identity v1 — oficial */
  --warning-bg: color-mix(in srgb, var(--warning) 10%, transparent);
  --danger:      #8B1E3F;                  /* Bordô institucional — era #ef4444 (vermelho coral vibrante) */
  --danger-bg:   color-mix(in srgb, var(--danger) 10%, transparent);
  --danger-dark: #6D1830;                   /* Hover de botões destrutivos */
  --info:       var(--minerva-blue-ink);    /* Brand v1 — info usa Ink (era #3b82f6 Tailwind, fora do canon) */
  --info-bg:    color-mix(in srgb, var(--info) 10%, transparent);

  /* Status feedback v2 — pares fg/bg pra estados semânticos em badges, chips, toasts.
     Isolados dos --success/--warning/--danger (cores "de marca" do sistema).
     Valores conforme Dashboard: fg otimizado pra contraste, bg translúcido tint. */
  --status-success-fg: var(--minerva-green-moss);
  --status-success-bg: color-mix(in srgb, var(--minerva-green-jade) 10%, transparent);
  --status-warn-fg:    var(--warning);
  --status-warn-bg:    color-mix(in srgb, var(--warning) 12%, transparent);
  --status-danger-fg:  var(--minerva-bordeaux);
  --status-danger-bg:  color-mix(in srgb, var(--minerva-bordeaux) 10%, transparent);
  --status-info-fg:    var(--minerva-blue-ink);
  /* Neutral — usado pelo status LIDO ("já processado, sem urgência").
     Cinza médio do sistema, baixo destaque proposital — chama menos atenção
     que warn/danger/info pra deixar prioridades visíveis no card. */
  --status-neutral-fg: var(--text-muted);
  --status-neutral-bg: color-mix(in srgb, var(--text-muted) 10%, transparent);

  /* ═══ Tokens de botão · LIGHT (decisão Ivna 2026-04-30) ═════════
     Direção 02 escolhida (Notion editorial discreto).
     Light: primário em quase-preto sobre branco — alto contraste, clean. */
  --btn-primary-bg:        #0F1729;
  --btn-primary-bg-hover:  #000000;
  --btn-primary-fg:        #FFFFFF;
  --btn-primary-border:    transparent;
  --btn-secondary-hover-bg: rgba(15, 23, 41, 0.06);
  --btn-danger-hover-bg:    rgba(139, 30, 63, 0.10);
  --status-info-bg:    color-mix(in srgb, var(--minerva-blue-steel) 8%, transparent);

  /* Layout */
  --sidebar-width:    290px;
  --topbar-height:    60px;
  --radius:           12px;
  --radius-sm:        8px;
  --radius-lg:        16px;

  /* Shadows */
  --shadow-sm:   0 1px 4px rgba(26, 31, 54, 0.08);
  --shadow-md:   0 4px 12px rgba(26, 31, 54, 0.1);
  --shadow-lg:   0 8px 32px rgba(26, 31, 54, 0.14);
  --shadow-glow: 0 4px 20px rgba(64, 84, 178, 0.15);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ═══ Tipografia — Minerva Design System v1 ═══════════════════
     Base: html { font-size: var(--text-lg) }  →  1rem = 18px
     (decisão consciente: legibilidade para leitura longa de processos)
  */

  /* Famílias */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ═══ Escala tipográfica · v2 (decisão Ivna 2026-04-30) ═════════════
     PARAMETRIZAÇÃO REAL: valores em px direto, alinhados com a aplicação.
     Antes os tokens eram em rem com base 18px, sem ninguém usar.
     Agora: cada nome semântico aponta pro tamanho usado de fato no sistema. */

  /* Tamanhos de texto */
  --text-3xs:    9.5px;  /* KPI labels mono uppercase, badge IA */
  --text-2xs:   10.5px;  /* topbar-crumb, micro mono */
  --text-xs:     11px;   /* nav-section-label, badge sidebar */
  --text-sm:     12px;   /* btn-sm, chip pequeno, badge padrão */
  --text-md:     13.5px; /* btn padrão, body em tabela compacta */
  --text-base:   14px;   /* body padrão, célula de tabela */
  --text-lg:     16px;   /* h3 card-header, body grande */
  --text-xl:     20px;   /* KPI value padrão */
  --text-2xl:    24px;   /* h2 topbar */
  --text-3xl:    32px;   /* h1 page hero */
  --text-4xl:    54px;   /* big numbers (motor-big) */

  /* Pesos */
  --weight-regular:  400;
  --weight-medium:   500;  /* btn padrão, body */
  --weight-semibold: 600;  /* labels Mono, chip */
  --weight-bold:     700;  /* h2-h6, badge IA, nav-section-label */
  --weight-heavy:    800;  /* KPI value, h1, motor-big */
  --weight-black:    900;  /* wordmark MINERVA, h1 page hero */

  /* Line-heights */
  --lh-tight:   1.1;       /* KPI values, headlines */
  --lh-snug:    1.35;      /* títulos, subtítulos */
  --lh-normal:  1.5;       /* body */
  --lh-relaxed: 1.65;      /* parágrafos longos */

  /* Letter-spacing — usar 'em' pra escalar com font-size */
  --tracking-tight:    -0.01em;   /* h1, h2 — aperta nos grandes */
  --tracking-normal:    0;
  --tracking-mono:      0.02em;   /* JetBrains Mono em contexto regular (CNJ, datas) */
  --tracking-wider:     0.08em;   /* Mono uppercase padrão (nav-section-label) */
  --tracking-widest:    0.18em;   /* Mono uppercase com peso (KPI labels, eyebrows) */

  /* Letter-spacing legacy (em px, mantido pra retrocompat) */
  --ls-wide:    0.4px;
  --ls-wider:   0.8px;
  --ls-widest:  1.2px;
}

/* ─── Dark Theme Overrides (grafite, não azul-naval) ─── */
[data-theme="dark"] {
  --bg-primary:    #12151c;
  --bg-secondary:  #1a1e27;
  --bg-tertiary:   #0D1015;                     /* era #15181f — unificado com --bg-sidebar pra hierarquia consistente */
  --bg-card:       #181C25;                     /* era #1a1e27 — card agora DIFERENCIADO do bg-secondary, cria profundidade */
  --bg-card-hover: #22262f;
  --bg-sidebar:    #0d1015;
  --bg-inset:      #0F1219;                     /* NOVO — recuo profundo (inputs, code, blockquote inset) */

  --border-color: rgba(255, 255, 255, 0.07);
  --border-glow:  rgba(30, 58, 138, 0.45);   /* Ink */

  /* Foreground dark — tons frios azulados alinhados ao vocabulário Minerva.
     Aliases --text-* seguem automaticamente via :root. */
  --fg-primary:   #E8ECF4;
  --fg-secondary: #9AA3B8;
  --fg-muted:     #8E97AE;            /* era #6B748C — clareado para WCAG AA em texto pequeno no dark */
  --fg-dim:       #4A5168;
  --fg-heading:   #f3f4f6;

  /* Usado em 11 lugares como fundo de destaque — no dark vira translúcido, não chapado */
  --firma-blue-bg: rgba(30, 58, 138, 0.14);   /* Ink */

  /* ═══ Tokens Minerva clareados moderadamente no dark ═════════════
     Regra: cores sóbrias do light (Ink, Forest, Moss, Bordô) perdem
     presença no fundo preto. Cada uma ganha uma versão luminosa que
     MANTÉM identidade (mesmo hue/família) só com luminosidade adaptada. */

  /* Azul Duo — Ink e Royal clareiam ~12%, gradient recalcula sozinho via var() */
  --minerva-blue-ink:        #2B4AA5;             /* era #1E3A8A */
  --minerva-blue-ink-dark:   #1E3A8A;             /* o antigo Ink vira o dark */
  --minerva-blue-royal:      #3A5EC7;             /* era #2E4FB0 */
  --minerva-blue-royal-dark: #2E4FB0;
  --minerva-blue-steel:      #3558A5;             /* halos mais visíveis */

  /* Verde Duo — Forest e Jade ganham luminosidade moderada */
  --minerva-green-forest:    #155A45;             /* era #0F4D3A */
  --minerva-green-jade:      #14C892;             /* era #10B981 */
  --minerva-green-moss:      #0E9668;             /* era #047857 */

  /* Aliases semânticos acompanham */
  --success:      #0E9668;                        /* = Moss dark */
  --success-bg:   rgba(14, 150, 104, 0.16);

  /* Danger — bordô ganha luminosidade (já existia, mantido) */
  --danger:       #BE3355;                        /* era #8B1E3F */
  --danger-bg:    rgba(190, 51, 85, 0.18);
  --danger-dark:  #D04668;                        /* hover no dark inverte pra mais claro */

  /* Alias firma-blue segue os tokens Minerva novos */
  --firma-blue:       #2B4AA5;
  --firma-blue-dark:  #1E3A8A;
  --firma-blue-rgb:   43, 74, 165;

  --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.6);

  /* ═══ Tokens de botão · DARK (decisão Ivna 2026-04-30) ═════════
     Direção 02 escolhida (Notion editorial discreto).
     Dark: primário em Charcoal — quase invisível, com leve borda translúcida. */
  --btn-primary-bg:        #1A1F2E;
  --btn-primary-bg-hover:  #0F1320;
  --btn-primary-fg:        #FFFFFF;
  --btn-primary-border:    rgba(255, 255, 255, 0.08);
  --btn-secondary-hover-bg: rgba(255, 255, 255, 0.06);
  --btn-danger-hover-bg:    rgba(139, 30, 63, 0.14);
  --shadow-glow: 0 4px 20px rgba(30, 58, 138, 0.35);   /* Ink */

  /* Status feedback v2 — variantes clareadas pra contraste em fundo preto */
  /* Status tokens dark — derivados dos tokens oficiais Minerva (jade/warning/danger/steel
     já são clareados no override dark, então var() puxa o tom adequado pra fundo preto) */
  --status-success-fg: var(--minerva-green-jade);
  --status-success-bg: color-mix(in srgb, var(--minerva-green-jade) 12%, transparent);
  --status-warn-fg:    color-mix(in srgb, var(--warning) 75%, white);
  --status-warn-bg:    color-mix(in srgb, var(--warning) 14%, transparent);
  --status-danger-fg:  var(--danger);
  --status-danger-bg:  color-mix(in srgb, var(--danger) 18%, transparent);
  --status-info-fg:    var(--minerva-blue-steel);
  --status-info-bg:    color-mix(in srgb, var(--minerva-blue-steel) 14%, transparent);
}

/* ─── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: var(--text-lg); scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  height: 100vh; /* Fixa a altura na janela */
  display: flex;
  overflow: hidden; /* O corpo não rola mais, apenas os containers internos */
  -webkit-font-smoothing: antialiased;
}

/* Form controls e elementos interativos NÃO herdam font-family por default em
   vários browsers (caem em sans-serif genérico = Arial/Helvetica). Forçar herança
   pra que tudo use Inter Minerva conforme body. */
button, input, select, textarea, summary, optgroup {
  font-family: inherit;
}

/* Defesa global das classes Material Icons — força font-family correta
   sobre QUALQUER reset que pais possam impor (ex: .nav-item com font shorthand
   resetando font-family). Garantia de renderização do glifo. */
.material-icons-round {
  font-family: 'Material Icons Round' !important;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}
.material-icons-outlined {
  /* Decisão Ivna 2026-04-27: sistema usa SOMENTE Material Icons Round.
     Se algum HTML antigo (cache) ainda referenciar .material-icons-outlined,
     a regra força Round — garante que o ícone aparece igual ao resto. */
  font-family: 'Material Icons Round' !important;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}

/* Hierarquia tipográfica Minerva v1 — todos os títulos em Playfair Display.
   Antes herdavam Inter do body, gerando mistura inconsistente entre páginas. */
/* Editorial · Playfair · h1+h2+h3 (page hero, topbar de módulo, card-title) */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--text-heading);
}
/* Funcional · Inter · h4+h5+h6 (sub-seções, steps de wizard, conteúdo de card) */
h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  color: var(--text-heading);
}
h1 { font-size: var(--text-3xl); }   /* 32px — page heros, big numbers */
h2 { font-size: var(--text-2xl); }   /* 24px — page titles (topbar-title) */
h3 { font-size: var(--text-lg);  }   /* 16px — card titles */
h4 { font-size: var(--text-base); }  /* 14px — sub-section titles */
h5, h6 { font-size: var(--text-md); }

a { color: var(--accent-primary); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* ─── Z-INDEX CANÔNICO (decisão Ivna 2026-04-28) ─────────────────
   Convenção: TUDO que sai da topbar (dropdowns, popovers, menus)
   tem prioridade visual sobre o conteúdo da página. Vale pra todos
   os módulos — cada um tem seu próprio <header class="topbar"> e
   pode adicionar dropdowns que herdam essa regra automaticamente. */
.topbar [role="menu"],
.topbar .topbar-overlay,
.topbar-export-menu {
  z-index: 9000 !important;
}

/* Custom Scrollbar — track transparente, thumb quase invisível,
   aparece sutilmente no hover (decisão Ivna 2026-04-28). */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(30, 58, 138, 0.12) transparent;  /* Firefox: thumb Ink 12% / track transparent */
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--minerva-blue-ink) 10%, transparent);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--minerva-blue-ink) 32%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  z-index: 100;
  box-shadow: 4px 0 24px rgba(26, 31, 54, 0.18);
  transition: width var(--transition), transform var(--transition);
}

/* ─── Sidebar colapsada ─────────────────────────────────────────────
   Ativada via body.sidebar-collapsed (toggle salvo em localStorage).
   Reduz largura a 68px, esconde labels/textos e mantém só os ícones. */
body.sidebar-collapsed { --sidebar-width: 68px; }
body.sidebar-collapsed .sidebar-app-name,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .sidebar-user,
body.sidebar-collapsed .nav-section-label,
body.sidebar-collapsed .search-status .status-text { display: none; }
body.sidebar-collapsed .nav-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
/* Recolhido: badges viram pontinhos (sem número/sem texto).
   Bordeaux pra alerta, Jade pra IA (Judith). Position absolute pra não
   empurrar o ícone — sem isso o número descia no flex e desalinhava tudo. */
body.sidebar-collapsed .sidebar-nav .badge {
  position: absolute;
  top: 4px;
  right: 8px;
  margin: 0;
  width: 8px;
  height: 8px;
  min-width: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  border-radius: 50%;
  background: var(--minerva-bordeaux, #8B1E3F);
  border: 2px solid var(--bg-sidebar);
  box-sizing: content-box;
  letter-spacing: 0;
}
body.sidebar-collapsed .sidebar-nav .badge.badge-ai {
  background: var(--minerva-green-jade, #10B981);
}
body.sidebar-collapsed .sidebar-foot .sidebar-quick {
  flex-direction: column; gap: 6px; align-items: center;
}
body.sidebar-collapsed .theme-menu { left: 60px; bottom: 0; }

/* Botão de colapso: chevron inverte conforme o estado */
#sidebar-collapse-btn .icon-expand { display: none; }
body.sidebar-collapsed #sidebar-collapse-btn .icon-collapse { display: none; }
body.sidebar-collapsed #sidebar-collapse-btn .icon-expand { display: inline-block; }

/* ─── Sidebar Brand ─── */
.sidebar-brand {
  padding: 18px 18px 16px;
  color: #D6DCEA;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  position: relative;
}
.sidebar-brand::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(43, 74, 139, 0.55) 50%, transparent 100%);
}

.minerva-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.minerva-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-logo-img {
  height: 36px;
  width: 36px;
  display: block;
}

.minerva-wordmark {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  color: rgba(255,255,255,0.95);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.05;
}

.minerva-sub {
  font-family: var(--font-mono-code);
  font-size: var(--text-3xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 3px 0 0;
}

.firma-host {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}

.host-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  flex-shrink: 0;
}

.firma-mini { display: flex; align-items: center; flex-shrink: 0; }
.sidebar-host-logo {
  width: 18px;
  height: 18px;
}

.firma-mini-wm {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: rgba(255,255,255,0.82);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.firma-mini-wm .thin { font-weight: var(--weight-regular); color: rgba(255,255,255,0.55); }

/* Colapsado */
body.sidebar-collapsed .sidebar-brand { padding: 14px 10px; text-align: center; }
body.sidebar-collapsed .minerva-row > div:last-child { display: none; }
body.sidebar-collapsed .firma-host { display: none; }
body.sidebar-collapsed .minerva-row { justify-content: center; margin-bottom: 0; }

/* Nav Items */
.sidebar-nav {
  flex: 1;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.sidebar-nav::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 7px;
  color: #C6CCDE;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  position: relative;
  text-decoration: none;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
}

.nav-item:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.06);
}

.nav-item.active {
  background: #2B4A8B38;
  color: #FFFFFF;
  font-weight: var(--weight-semibold);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, #2E4FB0 0%, #1E3A8A 100%);
}
.sidebar-foot {
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: auto;
}

/* ─── Nav Section Labels ─── */
.nav-section-label {
  color: var(--text-muted);
  font-family: var(--font-mono-code);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 14px 12px 6px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  /* Sem nowrap/ellipsis — labels curtos como "Inteligência" e "Sistema"
     cabem na sidebar; deixar quebrar em vez de cortar. */
}

/* Judith — monocromático, alinhado com os outros nav-items
   (decisão Ivna 2026-04-27: sem moldura colorida, sem fonte serif). */
#nav-judith .ico {
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
#nav-judith .ico .material-icons-round {
  /* Herda a cor neutra do .nav-item (#C6CCDE) — sem azul/verde forçado */
  font-size: var(--text-xl);
}
#nav-judith .judith-label {
  /* Sem override — herda Inter 500 13.5px do .nav-item */
}

.sidebar-nav .badge {
  font-family: var(--font-mono-code);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xs);
  background: var(--minerva-bordeaux);
  color: #FFE4EB;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: auto;
}

.sidebar-nav .badge-ai,
.nav-item .badge.badge-ai {
  /* Gradient verde Forest→Jade (Judith Green) — sugerido pelo Claude Design.
     Distingue Judith como entidade IA com a cor da própria Judith.
     Especificidade aumentada (0,2,0) pra vencer .sidebar-nav .badge genérico. */
  font-family: var(--font-mono-code);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xs);
  background: var(--minerva-green-gradient);
  color: #ECFDF5;
  padding: 2px 6px;
  border-radius: 10px;
  letter-spacing: var(--tracking-wider);
  margin-left: auto;
}

/* ─── Sidebar Quick Actions ─── */
.sidebar-quick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sidebar-quick button {
  background: none;
  border: none;
  color: #9AA3B8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  justify-content: center;
}
.sidebar-quick button.online {
  background: #10B98129;
  padding: 1px 6px;
  width: 32px;
  height: 32px;
  position: relative;
}
.sidebar-quick button.online::after {
  content: "";
  position: absolute;
  inset: 4.8px; /* Ajustando para dar ~22.4px em um botão 32x32 */
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

#sidebarThemeBtn,
#sidebar-collapse-btn {
  background: #E8ECF40A;
  width: 32px;
  height: 32px;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  background: #E8ECF408;
  padding: 9px 10px;
  color: #D6DCEA;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
}
.sidebar-user .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2E4FB0 0%, #1E3A8A 100%);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  flex-shrink: 0;
}
.who {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.who .name {
  font-size: var(--text-md);
  /* Sidebar é always-dark (--bg-sidebar fixo #0D1015 mesmo no light theme),
     então a cor precisa ser SEMPRE clara — não pode usar var(--text-primary)
     que vira #0F1729 no light e fica invisível sobre o fundo escuro. */
  color: #E8ECF4;
  font-family: var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.who .role {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  font-family: var(--font-sans);
}
.logout {
  color: #6B748C;
  cursor: pointer;
  font-size: var(--text-lg);
  padding: 4px;
}

/* Ajustes colapsado */
body.sidebar-collapsed .sidebar-user .who,
body.sidebar-collapsed .sidebar-user .logout { display: none; }
body.sidebar-collapsed .sidebar-user { padding: 6px; justify-content: center; }
body.sidebar-collapsed .sidebar-foot .sidebar-quick {
  flex-direction: column; gap: 6px; align-items: center;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin { animation: spin 1s linear infinite; }

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════════ */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column; /* Organiza topo e conteúdo verticalmente */
  position: relative;
  overflow: hidden;
}

/* Top Bar */
.topbar {
  position: relative; /* Changed from sticky to relative to respect flex flow */
  z-index: 50;
  /* Altura/padding unificados com o Dashboard (decisão Ivna 2026-04-27).
     Era height fixo + padding 0 40px; agora min-height + padding 18px 40px
     pra todas as topbars terem o mesmo "peso institucional" do hero. */
  min-height: calc(var(--topbar-height) + 24px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 18px 40px;
  gap: 20px;
  background: var(--bg-secondary);
  /* Gradient hero — unificar topbar de todos os módulos com a estética do Dashboard.
     Light e dark com intensidade equivalente (Ivna 2026-04-27). */
  background-image:
    radial-gradient(ellipse 900px 500px at 10% 0%, color-mix(in srgb, var(--minerva-blue-ink) 18%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 700px 400px at 95% 100%, color-mix(in srgb, var(--minerva-blue-royal) 14%, transparent) 0%, transparent 60%);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  /* overflow:hidden REMOVIDO (decisão Ivna 2026-05-01) — cortava dropdowns
     do botão "+" da topbar (PDF/PNG/PPT). Background-gradient é só image,
     não precisa de clip pra renderizar dentro. */
  overflow: visible;
}

[data-theme="dark"] .topbar {
  background-image:
    radial-gradient(ellipse 900px 500px at 10% 0%, color-mix(in srgb, var(--minerva-blue-ink) 28%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 700px 400px at 95% 100%, color-mix(in srgb, var(--minerva-blue-royal) 22%, transparent) 0%, transparent 60%);
}

.topbar-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 8px;
  /* Alterna chevrons conforme estado da sidebar (toggle via :has) */
}
/* default: sidebar fechada → mostra chevron_right (indica "abrir") */
.topbar-menu-btn .menu-icon-open { display: none; }
.topbar-menu-btn .menu-icon-closed { display: inline-block; }
/* sidebar aberta → mostra chevron_left (indica "fechar") */
body:has(.sidebar.open) .topbar-menu-btn .menu-icon-closed { display: none; }
body:has(.sidebar.open) .topbar-menu-btn .menu-icon-open { display: inline-block; }
.topbar-menu-btn {
  border-radius: var(--radius-sm);
}

.topbar-menu-btn:hover { background: var(--firma-blue-bg); color: var(--firma-blue); }

.topbar-title { flex: 1; }

.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

.topbar-action {
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
}
.topbar-action .material-icons-round {
  font-size: var(--text-xl);
  color: #4B5370;
}
.topbar-action .dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  background: var(--danger);
  border-radius: 50%;
}

.topbar-title h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  color: var(--text-heading);
  letter-spacing: -0.02em;
}

/* ═══ Topbar HERO institucional (Dashboard, páginas de destaque) ═══
   Variante com wordmark em Playfair + kicker acima. Aparece em telas
   onde o título tem peso institucional (Dashboard é o caso principal). */
.topbar-hero {
  /* Altura/padding/gradient agora herdam do .topbar global (idênticos).
     Esta classe só sinaliza variantes do dashboard com .topbar-title-hero,
     .page-title-serif e .topbar-crumb (h2 + DEJUR · Visão Geral). */
  position: relative;
}
.topbar-title-hero {
  display: flex;
  flex-direction: row;
  /* flex-end encosta o crumb no bottom do container (que tem altura do h2).
     A descida fina pra alinhar com a base visual do título serif é calibrada
     no .topbar-crumb via translateY (Ivna 2026-05-08). */
  align-items: flex-end;
  gap: 12px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.topbar-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono-code);
  font-size: var(--text-2xs);
  color: #8189A3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Desce o crumb pra alinhar com a base visual do título serif (Ivna
     2026-05-08). translateY positivo empurra o texto pra baixo sem mexer
     no layout do container. */
  transform: translateY(4px);
}
.topbar-crumb .sep {
  width: 3px;
  height: 3px;
  background: #8189A3;
  border-radius: 50%;
  opacity: 0.5;
}
.page-title-serif {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: #0F1729;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
}
/* Override dark do .topbar-hero removido — agora herda do [data-theme="dark"] .topbar global */

.topbar-title p {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Botões do topbar — herdam o padrão .btn (36px, font 13.5px, padding 0 16px).
   Override antigo removido pra unificar com o novo padrão Direção 02. */

/* Pages */
.page {
  display: none;
  flex: 1;
  flex-direction: column;
  overflow: hidden; /* Mantém o scroll interno */
  position: relative;
}
.page.active { display: flex; }

/* Container para páginas que rolam verticalmente (ex: Dashboard) */
.page-body-scrollable {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 32px;
  scroll-behavior: smooth;
}

/* Scrollbar do scroll vertical principal — agora transparente como o resto
   (decisão Ivna 2026-04-28). Herda a regra global; só mantém width customizada. */
.page-body-scrollable::-webkit-scrollbar { width: 8px; }
.page-body-scrollable::-webkit-scrollbar-track { background: transparent; }
.page-body-scrollable::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--minerva-blue-ink) 10%, transparent);
  border-radius: 4px;
  border: none;
}
.page-body-scrollable::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--minerva-blue-ink) 32%, transparent);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  transition: border-color var(--transition), box-shadow var(--transition);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.card:hover {
  border-color: rgba(64, 84, 178, 0.22);
  box-shadow: var(--shadow-glow);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  min-height: 44px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}

/* Títulos de card — tipografia Minerva v1 (Playfair Display, igual ao header do dashboard).
   Antes herdava Inter do body, gerando mistura feia entre cards. Padronizado em todo o sistema. */
.card-header h3 {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-header h3 .material-icons-round {
  font-size: var(--text-lg);
  color: var(--minerva-blue-steel);
}

.header-hint { font-size: var(--text-md); color: var(--text-muted); }
.card-header .form-input,
.card-header .form-select { font-size: var(--text-md); padding: 4px 22px 4px 10px; height: 28px; }

.card-body { 
  padding: 20px 24px; 
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 24px;
  border-top: 1px solid var(--border-color);
  font-size: var(--text-base);
  color: var(--text-muted);
  background: var(--bg-tertiary);
}

/* ═══════════════════════════════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════════════════════════════ */
/* Status Strip Minerva (V2 do mockup — decisão Ivna 2026-04-27):
   - kpi-grid = CONTAINER único (linha contínua) com border externa
   - kpi-card = CÉLULA sem border individual, separada por border-right
   - Cell ganha tinge translúcido da --kpi-color (divisão de cor sutil por KPI)
   - Ícone tinted mais forte (color-mix 14%)
   - Material Icons Outlined (regra brand book — traços geométricos)
   - Label em JetBrains Mono uppercase 9.5px (técnica)
   - Value em Inter 800 (NUNCA Playfair) */
.kpi-grid {
  display: grid;
  /* grid-auto-flow column: distribui TODOS os KPIs visíveis em UMA linha,
     com cells de mesma largura — independente da quantidade.
     Cards com display:none (KPIs condicionais) não ocupam coluna. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Em telas estreitas (laptop pequeno com sidebar aberta), volta pra auto-fit
   permitindo quebra controlada de KPIs em múltiplas linhas. */
@media (max-width: 1100px) {
  .kpi-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* ═══ Princípio Minerva refinado: alinhamento > altura natural ═════
   Cards da MESMA FAMÍLIA (KPIs, charts lado a lado) mantêm altura
   uniforme (stretch padrão do CSS Grid). Isso é mais importante que
   "encolher no menor conteúdo" — visual desalinhado parece erro. */

.kpi-card {
  /* Fundo transparente (decisão Ivna 2026-05-08): tinge translúcido por
     --kpi-color foi removido pra ficar igual ao dashboard. Diferenciação
     semântica continua via cor do ícone e do label.
     --kpi-bg ainda permite override explícito quando um card precisa de
     fundo específico (ex: gradient passa-bastão entre KPIs vizinhos). */
  background: var(--kpi-bg, transparent);
  border: 0;
  border-radius: 0;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background var(--transition);
  cursor: default;
  box-shadow: none;
  position: relative;
  overflow: visible;
}

.kpi-card:hover {
  /* Hover neutro — destaque sutil, sem tinge da cor do KPI */
  background: color-mix(in srgb, var(--text-muted) 6%, transparent);
  transform: none;
  box-shadow: none;
}

.kpi-icon {
  /* Sem fundo, mas com min-width/height pra GARANTIR espaço reservado pro
     ícone — se a fonte Outlined ainda estiver carregando ou falhar, a célula
     não fica visualmente quebrada.
     (decisão Ivna 2026-04-27: sem quadradinho colorido atrás dos ícones). */
  min-width: 22px;
  min-height: 22px;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.kpi-card:hover .kpi-icon {
  transform: translateY(-1px);
}

.kpi-icon .material-icons-round,
.kpi-icon .material-icons-outlined { font-size: var(--text-2xl); color: var(--kpi-color); }

.kpi-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.kpi-label {
  font-family: var(--font-mono-code);
  font-size: var(--text-3xs);
  color: var(--text-muted);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  display: block;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-value {
  font-family: var(--font-sans); /* Inter — número NUNCA em Playfair */
  font-size: var(--text-xl);
  font-weight: var(--weight-heavy);
  color: var(--text-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Suporte a value narrativo: <strong>12</strong> agendadas
   Quando KPI tiver texto descritivo, número fica em strong + descrição ao lado */
.kpi-value strong,
.kpi-value b {
  font-weight: var(--weight-heavy);
  font-size: inherit;
  color: var(--text-heading);
}

.kpi-sublabel {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
}

.kpi-legend-tag {
  font-size: var(--text-base);
  padding: 1px 6px;
  background: rgba(var(--firma-blue-rgb), 0.1);
  color: var(--firma-blue);
  border-radius: 4px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.kpi-legend-tag.danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.cost-legend-item {
  display: flex;
  flex-direction: column;
}

.kpi-subtext {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════
   CHARTS
   ═══════════════════════════════════════════════════════════════ */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); /* Prevent squashing */
  gap: 24px;
  margin-bottom: 24px;
}

.charts-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

/* Grid de 3 colunas — mais respiro que o de 4 (minmax maior) */
.charts-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

/* Split 50/50 — linha de Próximas Audiências + Processos por Tribunal */
.charts-grid-2-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
  align-items: stretch;
}

/* Cards na linha split precisam esticar pra mesma altura (grid já faz stretch,
   mas .card não é flex-column por padrão — então força aqui) */
.charts-grid-2-split > .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
}

.charts-grid-2-split > .card > .card-body {
  flex: 1;
}

/* Empty state centralizado verticalmente no card esticado */
.charts-grid-2-split .empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

/* Dupla Alertas Recentes + Últimas Buscas — listas compactas com scroll interno.
   Sobrescreve o min-height de .empty-state dentro dessa área específica. */
.dash-listas > .card {
  max-height: 340px;
}
.dash-listas .scroll-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 12px 16px;
  /* Scrollbar herda do global: track transparente, thumb Ink 10% (32% no hover) */
}
/* Empty state dentro das listas compactas — sem min-height absurdo */
.dash-listas .empty-state {
  min-height: 0;
  padding: 24px 16px;
}

/* ═══════════════════════════════════════════════════════════════
   RITMO PROCESSUAL — KPIs compactos + sparkline + lista de varas
   Vocabulário: valor grande, label pequena, delta com seta, sparkline
   sutil. Adaptado do estilo light-teal da referência pro nosso dark
   mode com glow calibrado via color-mix.
   ═══════════════════════════════════════════════════════════════ */
.ritmo-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.ritmo-kpi {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
  --ritmo-color: var(--minerva-blue-steel);
}
.ritmo-kpi:hover {
  border-color: color-mix(in srgb, var(--ritmo-color) 45%, transparent);
  transform: translateY(-1px);
}
.ritmo-kpi::after {
  /* glow sutil por dentro, seguindo vocabulário dos KPI cards */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ritmo-color) 18%, transparent);
  pointer-events: none;
}

.ritmo-kpi-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.ritmo-kpi-value {
  font-size: 2.2rem;
  font-weight: var(--weight-heavy);
  color: var(--text-heading);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.ritmo-kpi-unit {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.ritmo-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
}
.ritmo-kpi-delta .material-icons-round { font-size: var(--text-base); }
.ritmo-kpi-delta.up   { color: var(--success); }     /* Moss — melhora */
.ritmo-kpi-delta.down { color: var(--danger); }      /* Bordô — piora */
.ritmo-kpi-delta.neutral { color: var(--text-muted); }

.ritmo-kpi-spark {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 72px;
  height: 28px;
  opacity: 0.75;
}
.ritmo-kpi-spark path.fill {
  fill: color-mix(in srgb, var(--ritmo-color) 22%, transparent);
}
.ritmo-kpi-spark path.line {
  fill: none;
  stroke: var(--ritmo-color);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ritmo-color) 40%, transparent));
}

/* Gráfico principal do ritmo (area chart mensal) */
.ritmo-chart-wrapper {
  position: relative;
  padding: 16px 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-card);
  margin-bottom: 20px;
}
.ritmo-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 8px;
  font-size: var(--text-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-bold);
}
.ritmo-chart-legend {
  display: flex;
  gap: 12px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
}
.ritmo-chart-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 8px currentColor;
}
.ritmo-chart-box {
  height: 200px;
  padding: 0 8px;
}

/* Lista de varas — barras horizontais com glow calibrado (mesmo idioma
   que já aplicamos em .chart-list-fill/.chart-list-dot) */
.ritmo-varas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 10px;
  font-size: var(--text-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-bold);
}
.ritmo-vara-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
  margin-bottom: 8px;
  transition: border-color var(--transition), transform var(--transition);
  --vara-color: var(--minerva-blue-ink);
}
.ritmo-vara-row:hover {
  border-color: color-mix(in srgb, var(--vara-color) 40%, transparent);
  transform: translateX(2px);
}
.ritmo-vara-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ritmo-vara-name {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ritmo-vara-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  overflow: hidden;
}
.ritmo-vara-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--vara-color) 90%, transparent),
    var(--vara-color)
  );
  box-shadow:
    0 0 10px color-mix(in srgb, var(--vara-color) 45%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 28%, transparent);
}
.ritmo-vara-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.ritmo-vara-meta .num {
  font-size: var(--text-base);
  font-weight: var(--weight-heavy);
  color: var(--text-heading);
}
.ritmo-vara-meta .unit {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ritmo-vara-meta .chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--vara-color) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--vara-color) 22%, transparent);
  min-width: 66px;
}
.ritmo-vara-expand {
  margin-top: 8px;
  padding: 10px 12px 6px;
  border-top: 1px dashed var(--border-color);
  display: none;
}
.ritmo-vara-row.expanded .ritmo-vara-expand { display: block; }
.ritmo-vara-expand table { width: 100%; font-size: var(--text-xs); }
.ritmo-vara-expand th {
  text-align: left;
  color: var(--text-muted);
  font-family: var(--font-mono-code);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-2xs);
  padding: 4px 6px;
  font-weight: var(--weight-bold);
}
.ritmo-vara-expand td {
  padding: 6px;
  color: var(--text-secondary);
  border-top: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}
.ritmo-vara-expand td.num {
  font-family: var(--font-mono-code);
  color: var(--text-primary);
  font-weight: var(--weight-bold);
}

/* Linha de vara "não identificada" — visual apagado + dashed border */
.ritmo-vara-row.nao-identificada {
  border-style: dashed;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
}
.ritmo-vara-row.nao-identificada .ritmo-vara-name {
  color: var(--text-muted);
  font-style: italic;
}
.ritmo-vara-row.nao-identificada .ritmo-vara-bar-fill {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--text-muted) 35%, transparent) 0 6px,
    transparent 6px 12px
  );
  box-shadow: none;
}

/* Botão de ícone pequeno — reaproveitado na tabela de processos */
.btn-icon-sm {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.btn-icon-sm:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

/* Dropdown do tribunal no header do card de ritmo */
.ritmo-card .card-header select {
  background: var(--bg-card);
  color: var(--text-heading);
  border: 1px solid var(--border-color);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--text-md);
}
.ritmo-card .card-header select:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

.notif-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  height: 100%;
}

.notif-stat-item {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: var(--firma-blue-bg);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(30, 58, 138, 0.1);   /* Ink */
  transition: transform 0.2s, background 0.2s;
}

.notif-stat-item:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--firma-blue) 8%, transparent);
}

.notif-stat-item .stat-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.notif-stat-item .stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-heavy);
  color: var(--text-heading);
  margin-top: 4px;
}

.chart-card { min-height: 280px; height: 100%; }

.chart-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center horizontally/vertically if needed */
  width: 100%;
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* Bar Chart General */
.chart-bars {
  display: flex;
  align-items: stretch;
  gap: 12px;
  height: 220px; /* Default */
  padding: 10px 8px;
  width: 100%;
}

/* SURGICAL OVERRIDE: Publicações por Tribunal ONLY */
#chart-tribunais .chart-bars {
  height: 400px;
  padding: 20px 8px;
}

.chart-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 80px;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to top, var(--firma-blue-dark), var(--firma-blue-light));
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  cursor: pointer;
}

.chart-bar:hover { filter: brightness(1.1); }

.chart-bar-value {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--accent-primary);
  white-space: nowrap;
}

.chart-bar-label {
  font-size: var(--text-base);
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

/* Pie/Donut-like list General */
.chart-list { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  padding: 5px 0;
}

/* SURGICAL OVERRIDES: Empresa */
#chart-empresas .chart-list {
  gap: 32px;
  padding: 10px 0;
}

/* SURGICAL OVERRIDES: Filial */
#chart-processos-filial .chart-list {
  gap: 48px;
  padding: 15px 0;
}

/* SURGICAL OVERRIDES: Processos por Tribunal ONLY (Aumento mínimo) */
#chart-processos-tribunal .chart-list {
  gap: 12px;
  padding: 5px 0;
}

.chart-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  /* --chart-color é setado inline pelo JS; fallback para accent */
  --chart-color: var(--firma-blue);
}

.chart-list-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--chart-color);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chart-color) 25%, transparent),
    0 0 8px 0 color-mix(in srgb, var(--chart-color) 45%, transparent);
}

.chart-list-name {
  flex: 0 0 140px; /* Base width for names to prevent truncation */
  font-size: var(--text-base);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-list-bar {
  flex: 1; /* Occupy remaining space */
  height: 8px; /* Default compact */
  background: var(--firma-blue-bg);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

/* SURGICAL OVERRIDE: Empresa e Filial ONLY */
#chart-empresas .chart-list-bar,
#chart-processos-filial .chart-list-bar {
  height: 12px;
  border-radius: 6px;
}

#chart-empresas .chart-list-dot,
#chart-processos-filial .chart-list-dot {
  width: 14px;
  height: 14px;
}

.chart-list-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--chart-color);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.15),
    0 0 10px -1px color-mix(in srgb, var(--chart-color) 55%, transparent);
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark: glow mais visível contra o fundo escuro */
[data-theme="dark"] .chart-list-fill {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.25),
    0 0 14px -1px color-mix(in srgb, var(--chart-color) 70%, transparent);
}

[data-theme="dark"] .chart-list-dot {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--chart-color) 35%, transparent),
    0 0 10px 0 color-mix(in srgb, var(--chart-color) 65%, transparent);
}

/* Track da barra com leve tint pra casar com o glow do fill */
[data-theme="dark"] .chart-list-bar {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.chart-list-count {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  min-width: 30px;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */
.table-container { overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; }

.data-table thead th {
  text-align: left;
  padding: 14px 16px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
  background: var(--bg-tertiary);
  user-select: none;
}

.data-table thead th.sortable,
.processos-table thead th.sortable,
.contratos-table thead th.sortable {
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.data-table thead th.sortable:hover,
.processos-table thead th.sortable:hover,
.contratos-table thead th.sortable:hover {
  background: var(--firma-blue-bg);
  color: var(--firma-blue);
}

.data-table thead th.sortable .sort-icon,
.processos-table thead th.sortable .sort-icon,
.contratos-table thead th.sortable .sort-icon {
  font-size: var(--text-lg);
  vertical-align: middle;
  margin-left: 4px;
  color: var(--text-muted);
  opacity: 0.5;
  transition: all var(--transition-fast);
}

.data-table thead th.sortable:hover .sort-icon,
.processos-table thead th.sortable:hover .sort-icon,
.contratos-table thead th.sortable:hover .sort-icon {
  opacity: 1;
  color: var(--firma-blue);
}

/* Coluna ativa: só enfatiza via peso da fonte e opacidade do ícone,
   sem alterar cor do texto nem fundo — mantém discrição na tabela. */
.data-table thead th.sortable.active,
.processos-table thead th.sortable.active,
.contratos-table thead th.sortable.active {
  background: transparent;
  font-weight: var(--weight-heavy);
}

.data-table thead th.sortable.active .sort-icon,
.processos-table thead th.sortable.active .sort-icon,
.contratos-table thead th.sortable.active .sort-icon {
  opacity: 0.85;
  color: var(--text-muted);
}

.data-table tbody td {
  padding: 12px 16px;
  font-size: var(--text-base);
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(64, 84, 178, 0.06);
  vertical-align: middle;
}

.data-table tbody tr { transition: background var(--transition-fast); }

.data-table tbody tr:hover { background: rgba(64, 84, 178, 0.04); }

.data-table .empty-row td { border: none; }

/* Status badges — bloco consolidado em BADGES & CHIPS abaixo */

/* ── Termos de busca múltiplos ──────────────────────────────────── */

/* Célula da coluna Termo — largura contida, texto truncado */
.termo-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 160px;
}

.termo-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  transition: color 0.15s;
}

/* Wrapper do ícone — posição relativa para o tooltip */
.termos-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Pílula ⓘ +N — auto-dimensionada pelo conteúdo, cresce no hover */
.badge-termos-extra {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px 3px 6px;
  background: rgba(var(--firma-blue-rgb), 0.10);
  color: var(--firma-blue);
  border: 1px solid rgba(var(--firma-blue-rgb), 0.25);
  border-radius: 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: default;
  user-select: none;
  white-space: nowrap;
  transition: background 0.18s, transform 0.2s, box-shadow 0.2s;
  transform-origin: left center;
}
.badge-termos-extra .material-icons-round {
  font-size: var(--text-base);
  line-height: 1;
}
.termos-tooltip-wrap:hover .badge-termos-extra {
  background: rgba(var(--firma-blue-rgb), 0.20);
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(var(--firma-blue-rgb), 0.13);
}

/* Tooltip — aparece ao hover, mostra todos os termos */
.termos-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  top: calc(100% + 10px);
  z-index: 1000;
  background: var(--bg-sidebar);
  color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 200px;
  max-width: 320px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  white-space: normal;
}
/* Setinha apontando para o ícone */
.termos-tooltip::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 7px 7px;
  border-style: solid;
  border-color: transparent transparent var(--bg-sidebar);
}
.termos-tooltip-wrap:hover .termos-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Cabeçalho do tooltip */
.termos-tooltip-header {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}

/* Lista de termos no tooltip */
.termos-tooltip ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.termos-tooltip li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--text-base);
  color: rgba(255,255,255,0.92);
  line-height: 1.4;
}
.termos-tooltip li::before {
  content: '●';
  font-size: 7px;
  color: var(--firma-blue);
  flex-shrink: 0;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────
   BADGES & CHIPS
   ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.badge-success { background: var(--success-bg); color: var(--success); border: 1px solid rgba(16, 185, 129, 0.2); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(245, 158, 11, 0.2); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(239, 68, 68, 0.2); }
.badge-info    { background: var(--info-bg);    color: var(--info);    border: 1px solid rgba(59, 130, 246, 0.2); }
.badge-primary { background: var(--firma-blue-bg); color: var(--firma-blue); border: 1px solid rgba(var(--firma-blue-rgb), 0.2); }
.badge-neutral  { background: rgba(136, 150, 164, 0.12); color: var(--text-muted); border: 1px solid rgba(136, 150, 164, 0.2); }
.badge-tribunal { background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.25); font-family: var(--font-mono-code); font-weight: var(--weight-semibold); font-size: var(--text-base); letter-spacing: 0.03em; }
/* Badge do sistema de publicação (DJe) */
.badge-dje      { background: rgba(var(--firma-blue-rgb), 0.08); color: var(--firma-blue); border: 1px solid rgba(var(--firma-blue-rgb), 0.2); font-size: var(--text-base); font-weight: var(--weight-bold); letter-spacing: 0.04em; }
/* Badge do tipo de ato (Despacho, Decisão, Acórdão…) */
.badge-tipo-pub { background: color-mix(in srgb, var(--minerva-blue-ink) 8%, transparent); color: var(--minerva-blue-ink); border: 1px solid color-mix(in srgb, var(--minerva-blue-ink) 22%, transparent); font-size: var(--text-base); font-weight: var(--weight-semibold); }

/* ═══════════════════════════════════════════════════════════════
   DADOS TÉCNICOS — JetBrains Mono (decisão Ivna 2026-04-27)
   Padronização tipográfica em TODOS os "dados técnicos" do sistema:
   CNJ · tribunais · varas · códigos de filial/empresa · datas.
   Brand book: Mono = "valores hex, tokens, dados técnicos".
   ═══════════════════════════════════════════════════════════════ */

/* Tags HTML semanticamente "mono" — herdam JetBrains Mono Minerva */
code, kbd, samp, pre {
  font-family: var(--font-mono-code, 'JetBrains Mono', monospace);
  letter-spacing: 0.02em;
}

/* ═══ Badges canônicos dos 3 tipos de parte (Notificações · Brand Identity Minerva v1) ═══
   Globais (não scoped em #page-notificacoes) pra funcionarem dentro do modal wizard.
   Família azul Minerva — 3 tons distintos:
   • CEDENTE = Royal (#2E4FB0) — azul vibrante
   • SACADO = Ink (#1E3A8A) — azul escuro sóbrio
   • DEVEDOR SOLIDÁRIO = Steel (#2B4A8B) — azul aço médio
   Cores em tom semelhante = identidade unificada. Diferenças de tom diferenciam tipos
   sem competir com warnings âmbar / successes verde Moss. */
.tipo-parte-cedente,
.tipo-parte-sacado,
.tipo-parte-solidario {
  display: inline-block;
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
  line-height: 1.4;
}
.tipo-parte-cedente {
  background: color-mix(in srgb, var(--minerva-blue-royal) 8%, transparent);
  color: var(--minerva-blue-royal);
  border: 1px solid color-mix(in srgb, var(--minerva-blue-royal) 22%, transparent);
}
.tipo-parte-sacado {
  background: color-mix(in srgb, var(--minerva-blue-ink) 8%, transparent);
  color: var(--minerva-blue-ink);
  border: 1px solid color-mix(in srgb, var(--minerva-blue-ink) 22%, transparent);
}
.tipo-parte-solidario {
  background: color-mix(in srgb, var(--minerva-blue-steel) 8%, transparent);
  color: var(--minerva-blue-steel);
  border: 1px solid color-mix(in srgb, var(--minerva-blue-steel) 22%, transparent);
}

/* ═══ Tooltip/popover via <details> · Minerva-clean ═══
   Padrão: <details><summary>chip</summary><div>conteúdo posicionado</div></details>
   Esconde triângulo nativo, summary vira chip clicável, conteúdo flutua absoluto */
details.dica-nomenclatura {
  position: relative;
}
details.dica-nomenclatura summary {
  list-style: none;
}
details.dica-nomenclatura summary::-webkit-details-marker { display: none; }
details.dica-nomenclatura summary::marker { content: ''; }
details.dica-nomenclatura summary:hover {
  border-color: var(--minerva-blue-ink) !important;
  color: var(--minerva-blue-ink) !important;
}
details.dica-nomenclatura[open] summary {
  border-color: var(--minerva-blue-ink) !important;
  color: var(--minerva-blue-ink) !important;
  background: var(--minerva-blue-bg) !important;
}

/* Classes utilitárias — aplique em qualquer elemento com dado técnico */
.font-mono,
.cnj, .cnj-num, .num-processo,
.tribunal-name, .vara-name,
.filial-code, .empresa-code,
.date-mono, .data-mono {
  font-family: var(--font-mono-code, 'JetBrains Mono', monospace);
  letter-spacing: 0.02em;
}

/* Classes existentes que JÁ renderizam dados técnicos */
.badge-info,            /* CNJ em badge na tabela de processos */
.badge-tribunal,        /* sigla tribunal */
.badge-dje,             /* DJe */
.tribunal-sigla,        /* sigla tribunal em accordion */
.tribunal-group-title,  /* título grupo tribunal */
.chip-data-dj,          /* chip data DJ na tabela */
.ritmo-vara-meta .chip, /* chip de vara no ritmo */
.kanban-card-filial,    /* badge filial em kanban */
.judith-tbl td.num,     /* número CNJ na tabela judith */
.processos-table .filial-cell, /* célula filial na tabela processos */
time {
  font-family: var(--font-mono-code, 'JetBrains Mono', monospace);
}

.badge-termo-modal {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  background: rgba(var(--firma-blue-rgb), 0.10);
  color: var(--firma-blue);
  border: 1px solid rgba(var(--firma-blue-rgb), 0.25);
  border-radius: 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* ── Chips de tipo — Agenda ───────────────────────────────────────
   REGRAS LOCAIS DELETADAS em 2026-04-24 (BLOCO B do brand alignment).
   Cores oficiais Minerva agora vivem em views/pages/agenda/section.ejs
   (regra mais específica + carrega depois → vence sem precisar !important). */
.chip.concluido { opacity: 0.45; text-decoration: line-through; filter: grayscale(40%); }

/* ── Chip de data do DJ na tabela ───────────────────────────────── */
.chip-data-dj {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 6px;
  background: rgba(var(--firma-blue-rgb), 0.07);
  color: var(--firma-blue);
  border: 1px solid rgba(var(--firma-blue-rgb), 0.18);
  border-radius: 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.chip-data-dj .material-icons-round {
  font-size: var(--text-base);
  opacity: 0.75;
}
.chip-data-desconhecida {
  background: rgba(136, 150, 164, 0.08);
  color: var(--text-muted);
  border-color: rgba(136, 150, 164, 0.2);
  font-style: italic;
  cursor: help;
}

.content-preview {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.content-preview:hover { color: var(--accent-primary); }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — Direção 02 (Notion editorial discreto)
   Decisão Ivna 2026-04-30 · adaptive E (dark) + F (light)
   - Cantos 6px (não pílula extrema)
   - Altura 36px (era 40-42, ficou grande demais)
   - Sem sombra, sem lift no hover
   - Primário: Charcoal #1A1F2E no dark, quase-preto #0F1729 no light
   - Secundário: transparente, hover sutil
   - Danger: transparente, Bordeaux discreto no hover
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  box-shadow: none;
  box-sizing: border-box;
}
.btn .material-icons-round { font-size: var(--text-lg); }

/* Toolbar — garantir alinhamento exato e gap consistente em qualquer agrupamento */
.topbar-actions,
.btn-group,
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* ═══ Princípio Minerva: elementos em linha = mesma altura exata ═══
   Inputs, selects, botões de filtro — todos com altura padronizada
   pra alinhamento vertical perfeito em toolbars e barras de filtro.
   Exceções: textarea (tem rows), botões full-size (usam .btn base).      */
.busca-input,
.form-input:not(textarea),
.form-select,
.filter-group input[type="text"],
.filter-group input[type="search"],
.filter-group select,
.filter-item input[type="text"],
.filter-item input[type="search"],
.filter-item select {
  height: 38px;
  box-sizing: border-box;
  line-height: 1.2;
}

/* Container de filtros — sempre align-items: end pra labels acima alinharem
   com a base dos campos (não pelo topo, que gera desalinhamento quando há
   labels com quebras de linha) */
.filters-bar,
.toolbar-filters,
.filter-group-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
}

/* Labels de filtro — sempre em cima do campo, com altura e espaçamento
   consistentes pra garantir alinhamento vertical entre grupos */
.filter-item > label,
.filter-group > label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.2;
  min-height: 14px;
}

/* PRIMÁRIO · adaptive E (dark Charcoal) / F (light quase-preto) */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  box-shadow: inset 0 0 0 1px var(--btn-primary-border);
}
.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
}
.btn-primary:active { background: var(--btn-primary-bg-hover); }

/* .btn-glow — DEPRECATED (sem efeito). Mantida pra compat de classe.
   Direção 02 não tem glow/lift/sombra — botões são planos e discretos. */
.btn-glow { animation: none; }
@keyframes glow-pulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: none; } }

/* SECUNDÁRIO · transparente, hover sutil
   .btn-ghost mantido como ALIAS de .btn-secondary (compat com EJSs antigos) */
.btn-secondary,
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: none;
}
.btn-secondary:hover,
.btn-ghost:hover {
  background: var(--btn-secondary-hover-bg);
  color: var(--text-primary);
}

/* DANGER · transparente, Bordeaux discreto */
.btn-danger {
  background: transparent;
  color: var(--minerva-bordeaux);
  border: none;
}
.btn-danger:hover {
  background: var(--btn-danger-hover-bg);
}

/* Tamanho menor pra tabelas e contextos compactos */
.btn-sm {
  height: 30px;
  padding: 0 12px;
  font-size: var(--text-sm);
  gap: 6px;
}
.btn-sm .material-icons-round { font-size: var(--text-base); }

/* ÍCONE-ONLY · quadrado com cantos suaves, hover sutil */
.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  display: inline-flex; /* inline-flex pra ficarem lado a lado quando há múltiplos no mesmo container */
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  box-sizing: border-box;
  vertical-align: middle;
}
.btn-icon:hover {
  color: var(--text-primary);
  background: var(--btn-secondary-hover-bg);
}
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-icon-danger:hover {
  color: var(--minerva-bordeaux);
  background: var(--btn-danger-hover-bg);
}

/* ═══════════════════════════════════════════════════════════════
   CLASSES QUE FALTAVAM (decisão Ivna 2026-04-30):
   .nav-btn, .view-btn, .btn-status-toggle, .btn-danger-outline
   Eram referenciadas em EJSs mas NÃO existiam no CSS — botões
   ficavam sem estilo. Criadas seguindo padrão Direção 02 clean.
   ═══════════════════════════════════════════════════════════════ */

/* .nav-btn · botão de navegação prev/next (Agenda · chevron de data)
   Quadrado pequeno com cantos suaves, hover sutil */
.nav-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}
.nav-btn:hover {
  background: var(--btn-secondary-hover-bg);
  color: var(--text-primary);
}
.nav-btn .material-icons-round { font-size: var(--text-lg); }

/* TOGGLE GROUP · usado por .view-btn (Agenda Semana/Mês/Lista)
   e .btn-status-toggle (Contratos Ativo/Rescindido).
   Container com pílula de fundo + botões internos sem borda. */
.toggle-group,
.view-toggle {
  display: inline-flex;
  background: var(--bg-tertiary);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  gap: 0;
}
.view-btn,
.btn-status-toggle,
.toggle-group .toggle-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 0 14px;
  height: 30px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.view-btn:hover,
.btn-status-toggle:hover,
.toggle-group .toggle-btn:hover {
  color: var(--text-primary);
}
.view-btn.active,
.view-btn.ativa,
.btn-status-toggle.active,
.btn-status-toggle.ativa,
.toggle-group .toggle-btn.active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  box-shadow: inset 0 0 0 1px var(--btn-primary-border);
}
.view-btn .material-icons-round,
.btn-status-toggle .material-icons-round,
.toggle-group .toggle-btn .material-icons-round { font-size: var(--text-base); }

/* .btn-danger-outline · destrutivo com borda discreta (Custos)
   Variação outline do .btn-danger pra ações destrutivas com peso médio */
.btn-danger-outline {
  background: transparent;
  color: var(--minerva-bordeaux);
  box-shadow: inset 0 0 0 1px var(--minerva-bordeaux);
}
.btn-danger-outline:hover {
  background: var(--btn-danger-hover-bg);
}

/* Número CNJ — dado técnico em JetBrains Mono (regra brand book) */
.numero-processo {
  font-family: var(--font-mono-code);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
  letter-spacing: var(--tracking-mono);
}

.numero-processo-vazio {
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 16px; }

/* ─── Form Row & Utilitários de formulário ─── */
.form-row {
  display: flex;
  gap: 12px;
}
.form-row .form-group-flex { flex: 1; min-width: 0; }

.form-group-hint { margin-top: -8px; margin-bottom: 16px; }
.form-hint {
  color: var(--text-muted);
  font-size: var(--text-md); /* legível: ~13px com root 18px — substitui o 10px hardcoded */
  line-height: 1.4;
  display: block;
}

.form-textarea { min-height: 80px; resize: vertical; }

/* ─── Prazo Fatal (opt-in visual) ─── */
/* Estado padrão: igual aos outros campos. O vermelho só ativa quando preenchido. */
.form-group-fatal.is-fatal label {
  color: var(--danger);
  font-weight: var(--weight-bold);
}
.form-group-fatal.is-fatal .form-input {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 5%, var(--bg-card));
}

/* ─── Lista de participantes (modal agenda) ─── */
.participantes-list {
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: var(--text-base); /* ~15px, substitui 12px hardcoded */
  max-height: 120px;
  overflow: auto;
  line-height: 1.5;
}

/* ─── Modal footer com botão destrutivo à esquerda ─── */
.modal-footer-split .footer-btn-left { margin-right: auto; }

.form-group label, .form-label {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-input, .form-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-lg);
  transition: all var(--transition-fast);
  outline: none;
}

.form-input:focus, .form-select:focus {
  border-color: var(--firma-blue);
  box-shadow: 0 0 0 3px rgba(64, 84, 178, 0.12);
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238896a4' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Toggle Switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #e2e8f0;
  border: 1px solid #d1d5db;
  border-radius: 26px;
  transition: var(--transition);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  top: 2px;
  background: #9ca3af;
  border-radius: 50%;
  transition: var(--transition);
}

.toggle input:checked + .toggle-slider {
  background: var(--firma-blue);
  border-color: var(--firma-blue-dark);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(22px);
  background: white;
}

/* ═══════════════════════════════════════════════════════════════
   FILTERS
   ═══════════════════════════════════════════════════════════════ */
.modal {
  background: var(--bg-card);
  width: 90%;
  max-width: 500px;
  max-height: 90vh; /* Mantém dentro da tela */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden; /* Corta o conteúdo que sair, o body cuida do scroll */
  display: flex;
  flex-direction: column;
  animation: modalIn var(--transition-slow);
}

.modal-wide { max-width: 850px; }

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-body {
  padding: 20px 24px;
  overflow-y: auto; /* Permite scroll se o conteúdo for longo */
  flex: 1;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
.card-body { padding: 14px 24px; }

.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 140px;
}

.filter-group label {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filter-actions { display: flex; gap: 8px; flex-direction: row; min-width: auto; flex: 0; }

.results-count { font-size: var(--text-lg); color: var(--text-muted); font-weight: var(--weight-medium); }

/* ═══════════════════════════════════════════════════════════════
   CONFIG PAGE
   ═══════════════════════════════════════════════════════════════ */
.config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(64, 84, 178, 0.07);
}

.config-row:last-child { border-bottom: none; }

.config-info strong {
  display: block;
  font-size: var(--text-base);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.config-info span { font-size: var(--text-base); color: var(--text-muted); }

.config-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* Tribunal list */
.tribunal-group { margin-bottom: 24px; }

.tribunal-group-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}

.tribunal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.tribunal-item:hover { background: var(--firma-blue-bg); }

.tribunal-info { display: flex; align-items: center; gap: 12px; }

.tribunal-sigla {
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--firma-blue);
  min-width: 60px;
}

.tribunal-nome { font-size: var(--text-lg); color: var(--text-secondary); }

.tribunal-tags { display: flex; gap: 6px; align-items: center; }

.tag { font-size: var(--text-base); padding: 2px 8px; border-radius: 10px; font-weight: var(--weight-semibold); }

.tag-available   { background: var(--success-bg); color: var(--success); }
.tag-unavailable { background: rgba(136, 150, 164, 0.1); color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 31, 54, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  animation: fadeIn 0.2s ease;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 500px;
  box-shadow: var(--shadow-lg);
  animation: modalSlide 0.25s ease;
}

.modal-wide { max-width: 800px; }

@keyframes modalSlide {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-header h3, .modal-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-header h3 .material-icons-round, .modal-title .material-icons-round {
  color: var(--firma-blue);
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  transition: all var(--transition-fast);
}

.modal-close:hover { color: var(--danger); background: var(--danger-bg); }

/* .modal-body padding agora é 20px 24px global (linha 2465) — regra duplicada removida */

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.pub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.pub-meta span { font-size: var(--text-lg); color: var(--text-muted); }
.pub-meta strong { color: var(--text-primary); }

.pub-content {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--text-secondary);
  max-height: 500px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS & EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.empty-state .material-icons-round {
  font-size: 48px;
  color: var(--text-muted);
  opacity: 0.35;
  margin-bottom: 12px;
}

.empty-state p { font-size: var(--text-lg); color: var(--text-muted); font-weight: var(--weight-medium); }
.empty-hint { font-size: var(--text-base); color: var(--text-muted); opacity: 0.6; margin-top: 4px; }

/* Alert items */
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.alert-item:hover {
  background: var(--firma-blue-bg);
  border-color: rgba(64, 84, 178, 0.15);
}

.alert-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--firma-blue);
  flex-shrink: 0;
  margin-top: 5px;
  animation: pulse-badge 2s infinite;
}

.alert-dot.read { background: var(--text-muted); opacity: 0.3; animation: none; }

.alert-content { flex: 1; min-width: 0; }

.alert-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.alert-detail {
  font-size: var(--text-base);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-time {
  font-size: var(--text-base);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Busca items */
.busca-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(64, 84, 178, 0.06);
}

.busca-item:last-child { border-bottom: none; }

.busca-icon { font-size: var(--text-base); }
.busca-icon.concluido { color: var(--success); }
.busca-icon.erro      { color: var(--danger); }
.busca-icon.executando { color: var(--warning); }

.busca-info { flex: 1; min-width: 0; }
/* Sigla de tribunal e data — dados técnicos em JetBrains Mono (regra brand book) */
.busca-tribunal { font-family: var(--font-mono-code); font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--text-primary); letter-spacing: var(--tracking-mono); }
.busca-detalhe  { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-data     { font-family: var(--font-mono-code); font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-mono); }

/* ═══════════════════════════════════════════════════════════════
   PROGRESS TOAST
   ═══════════════════════════════════════════════════════════════ */
.progress-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-width: 320px;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.progress-toast-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.progress-toast-header .material-icons-round { color: var(--firma-blue); font-size: var(--text-xl); }

.progress-bar-container {
  height: 6px;
  background: var(--firma-blue-bg);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--firma-blue-dark), var(--firma-blue-light));
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════
   TOASTS (notifications)
   ═══════════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 400;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 280px;
  max-width: 420px;
  animation: slideIn 0.3s ease, fadeOut 0.3s ease forwards;
  animation-delay: 0s, 4.7s;
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.info    { border-left: 3px solid var(--firma-blue); }
.toast.warning { border-left: 3px solid var(--warning); }

.toast .material-icons-round { font-size: var(--text-xl); }
.toast.success .material-icons-round { color: var(--success); }
.toast.error   .material-icons-round { color: var(--danger); }
.toast.info    .material-icons-round { color: var(--firma-blue); }
.toast.warning .material-icons-round { color: var(--warning); }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(100px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOut {
  to { opacity: 0; transform: translateX(100px); }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1300px) {
  /* Sidebar drawer só dispara em mobile real (≤600px).
     Em laptops 1280-1300px e tela dividida (~700-1100px) a sidebar
     continua visível — ver bloco "auto-collapse" abaixo. */
  .charts-grid { grid-template-columns: 1fr; }
}

/* ─── Auto-collapse · 601-1100px ────────────────────────────────────
   Tela dividida (Win+Seta), monitor pequeno ou janela apertada:
   força a sidebar pra modo collapsed (68px só ícones) sem virar drawer.
   O user mantém o estado salvo no localStorage; quando volta pra tela
   cheia, a sidebar reabre se tava expandida.
   Decisão Ivna 2026-05-01: antes em ≤768px ela virava drawer escondido
   com botão topbar-menu-btn — comportamento errado pra split screen. */
@media (min-width: 601px) and (max-width: 1100px) {
  body { --sidebar-width: 68px; }
  .sidebar-app-name,
  .nav-label,
  .sidebar-user,
  .nav-section-label,
  .search-status .status-text { display: none !important; }
  .nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  /* Badges viram pontinhos (replicado de body.sidebar-collapsed) */
  .sidebar-nav .badge {
    position: absolute;
    top: 4px;
    right: 8px;
    margin: 0;
    width: 8px;
    height: 8px;
    min-width: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    border-radius: 50%;
    background: var(--minerva-bordeaux, #8B1E3F);
    border: 2px solid var(--bg-sidebar);
    box-sizing: content-box;
    letter-spacing: 0;
  }
  .sidebar-nav .badge.badge-ai {
    background: var(--minerva-green-jade, #10B981);
  }
  .sidebar-foot .sidebar-quick {
    flex-direction: column; gap: 6px; align-items: center;
  }
  .sidebar-brand { padding: 14px 10px; text-align: center; }
  .minerva-row > div:last-child { display: none; }
  .firma-host { display: none; }
  .minerva-row { justify-content: center; margin-bottom: 0; }
  /* Esconde o botão de toggle manual — auto-collapsed não toggla */
  #sidebar-collapse-btn { display: none; }

  /* ─── Topbar buttons compactos em tela dividida ───────────────────
     Decisão Ivna 2026-05-01: TODOS os botões da topbar (incluindo CTA
     primário "Novo X") viram só ícone 32×32 — texto via atributo title.
     Iteração: começou mantendo texto no btn-primary, mas o "+ Novo
     Processo" ainda pesava demais em ~700-900px. */
  .topbar-actions { gap: 6px; }
  .topbar-actions .btn {
    height: 32px;
    width: 32px;
    padding: 0;
    justify-content: center;
    font-size: var(--text-sm);
    gap: 0;
  }
  .topbar-actions .btn .material-icons-round { font-size: var(--text-md); }
  .topbar-actions .btn span:not(.material-icons-round) {
    display: none;
  }
}

/* ─── Mobile real · ≤600px ─────────────────────────────────────────
   Smartphone: sidebar vira drawer overlay com botão topbar-menu-btn. */
@media (max-width: 600px) {
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
    box-shadow: var(--shadow-lg);
  }

  .sidebar.open { transform: translateX(0); }

  .main-content { margin-left: 0; }

  .topbar-menu-btn { display: flex; }

  .page { padding: 20px 16px; }

  .filters-row { flex-direction: column; }
  .filter-group { min-width: 100%; }

  .topbar { padding: 0 16px; }
  .topbar-title h2 { font-size: var(--text-lg); }

  .btn span:not(.material-icons-round) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   TELA DIVIDIDA — mantém tabelas legíveis com rolagem horizontal.
   Só ativa abaixo de 1300px (sidebar já vira drawer aqui).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1300px) {
  /* Todas as tabelas principais ganham largura mínima para não achatarem
     colunas (ex.: SACADO virando "9-S-A-N-T-A-F-E"). A rolagem horizontal
     do .table-flex-scroll devolve o acesso às colunas extras. */
  .table-flex-scroll .data-table,
  .table-flex-scroll .processos-table,
  .table-flex-scroll .contratos-table,
  .table-flex-scroll .notif-table-header,
  .processes-scroll-wrapper .data-table,
  .processes-scroll-wrapper .processos-table,
  .contracts-scroll-wrapper .contratos-table {
    min-width: 1100px;
  }

  /* Células jamais quebram caractere-a-caractere; quando não couber,
     reticencia ou scrolla o container pai. */
  .data-table td, .data-table th,
  .processos-table td, .processos-table th,
  .contratos-table td, .contratos-table th,
  .notif-table-header td, .notif-table-header th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Dica visual: a barra horizontal aparece mais evidente em tela dividida */
  .table-flex-scroll::-webkit-scrollbar-horizontal,
  .table-flex-scroll::-webkit-scrollbar:horizontal {
    height: 10px;
  }
  .table-flex-scroll::-webkit-scrollbar-thumb:horizontal {
    background: rgba(var(--firma-blue-rgb), 0.45);
    border-radius: 6px;
  }

  /* Filtros dos módulos (Processos, Contratos, Custos...) deixam de
     ocupar uma linha cada (cada select virava 100% de largura por herdar
     do .form-select global). Agora eles viram caixa compacta 2~3 por
     linha — sobra espaço vertical pra tabela. */
  .toolbar-processos .toolbar-filters > .form-select,
  .toolbar-contratos .toolbar-filters > .form-select,
  .toolbar-filters > .form-select {
    width: auto;
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 220px;
    padding: 8px 30px 8px 12px;
    font-size: var(--text-md);
  }
  /* Barra de busca também compacta um pouco */
  .toolbar-processos .toolbar-search,
  .toolbar-contratos .toolbar-search {
    min-width: 260px;
  }
  /* Toolbar geral com padding menor em tela dividida */
  .toolbar-processos.card,
  .toolbar-contratos.card {
    padding: 10px 14px;
  }
}

/* Fix for Fixed Scrollbars · Página inteira scrolla como um bloco único
   (decisão Ivna 2026-05-03): topbar fica fixa, conteúdo abaixo (KPIs +
   filtros + tabela/kanban) sobe junto ao rolar. Antes era overflow:hidden
   com altura fixa — KPIs/filtros fixos no topo e só o conteúdo interno
   rolava, gerando experiência de scroll fragmentada.
   IMPORTANTE: filhos com flex-shrink: 0 pra não serem comprimidos quando
   o conteúdo total > altura do container (KPIs ficavam achatados). */
.page-body-fixed { height: calc(100vh - var(--topbar-height, 74px)); display: flex; flex-direction: column; padding: 24px 32px; overflow: auto; }
.page-body-fixed > * { flex-shrink: 0; }
/* Container de tabela — cresce com conteúdo (sem flex:1 forçando ocupar
   espaço restante e sem overflow-y interno). O scroll vertical agora é da
   .page-body-fixed (página inteira). Mantém overflow-x: auto pra tabelas
   largas (scroll horizontal local quando colunas excedem largura). Sticky
   header (thead) continua funcionando relativo ao .page-body-fixed. */
.table-flex-scroll { position: relative; overflow-x: auto; overflow-y: visible; background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border-color); }

/* Botão "voltar ao topo" — flutuante, arrastável, transparente. Aparece
   quando scroll > 300px na página ativa. Posição inicial: canto inferior
   direito; usuário pode arrastar e a posição é salva em localStorage. */
.scroll-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg-card) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
  color: var(--text-secondary);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  z-index: 9500;
  user-select: none;
  touch-action: none;
}
.scroll-to-top.visible {
  opacity: 0.7;
  visibility: visible;
  transform: translateY(0);
}
.scroll-to-top:hover {
  opacity: 1;
  background: var(--bg-card);
  color: var(--minerva-blue-ink);
  border-color: color-mix(in srgb, var(--minerva-blue-ink) 30%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.scroll-to-top.dragging {
  cursor: grabbing;
  opacity: 1;
  transition: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.scroll-to-top .material-icons-round { font-size: 20px; }
.table-flex-scroll table { width: 100%; border-collapse: collapse; }
.table-flex-scroll thead th { position: sticky; top: 0; z-index: 10; background: var(--bg-card); box-shadow: 0 1px 0 var(--border-color); margin-top: 0; padding-top: 14px; padding-bottom: 14px; }
.table-flex-scroll tbody tr:last-child td { border-bottom: none; }
.w-flex-1 { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ═══════════════════════════════════════════════════════════════
   TOOLBAR (Busca + Filtros) — Contratos & Processos
   ═══════════════════════════════════════════════════════════════ */
.toolbar-contratos,
.toolbar-processos {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  flex-wrap: wrap;
}

.toolbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 6px 14px;
  transition: border-color var(--transition);
}
.toolbar-search:focus-within {
  border-color: var(--firma-blue);
  box-shadow: 0 0 0 3px rgba(64, 84, 178, 0.12);
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR KPI BADGES (Fixed visibility)
   ═══════════════════════════════════════════════════════════════ */
.topbar-kpis {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 20px;
}

.topbar-kpi-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  cursor: default;
}

.topbar-kpi-badge .material-icons-round {
  font-size: var(--text-base);
  color: var(--kpi-color);
}

.topbar-kpi-badge b {
  color: var(--text-heading);
  font-size: var(--text-base);
}

.topbar-kpi-badge:hover {
  background: var(--bg-card);
  border-color: var(--kpi-color);
  transform: translateY(-1px);
}

@media (max-width: 1024px) {
  .topbar-kpis { display: none; }
}

/* Micro-animations */
.kpi-card {
  animation: slideIn 0.4s ease backwards;
}
.kpi-card:nth-child(1) { animation-delay: 0.1s; }
.kpi-card:nth-child(2) { animation-delay: 0.15s; }
.kpi-card:nth-child(3) { animation-delay: 0.2s; }
.kpi-card:nth-child(4) { animation-delay: 0.25s; }

@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.toolbar-search .busca-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-base);
  color: var(--text-primary);
  width: 100%;
  font-family: inherit;
}
.toolbar-search .busca-input::placeholder {
  color: var(--text-muted);
}

.toolbar-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   ABAS (Tabs)
   ═══════════════════════════════════════════════════════════════ */
.tabs-container {
  margin-bottom: 0;
}

.abas-bar {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}

.aba-btn {
  padding: 10px 24px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  border-bottom: 2px solid transparent;
}
.aba-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}
.aba-btn.ativa {
  color: var(--firma-blue);
  border-bottom-color: var(--firma-blue);
  background: var(--bg-tertiary);
  font-weight: var(--weight-semibold);
}

/* ═══════════════════════════════════════════════════════════════
   EDIÇÃO INLINE (td-edit)
   ═══════════════════════════════════════════════════════════════ */
.td-edit {
  cursor: pointer;
  transition: background var(--transition);
  border-radius: 4px;
}
.td-edit:hover {
  background: rgba(64, 84, 178, 0.06);
}

.inline-input,
.inline-select,
.inline-textarea {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--firma-blue);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-family: inherit;
  outline: none;
  box-shadow: 0 0 0 3px rgba(64, 84, 178, 0.15);
}
.inline-textarea {
  resize: vertical;
  min-height: 60px;
}

/* ═══════════════════════════════════════════════════════════════
   TABELAS — Contratos & Processos
   Regras dimensionais (font-size, padding, weight) ficam em CADA
   EJS do módulo (contratos/index.ejs, processos/index.ejs,
   processos/section.ejs). Aqui só layout / restrições estruturais.
   Decisão Ivna 2026-05-01: bloco anterior tinha !important que
   forçava 16px+800 weight em TD e 14px+900 weight em TH, ignorando
   o que cada EJS definia. REMOVIDO.
   ═══════════════════════════════════════════════════════════════ */

/* Restrições de largura de colunas específicas em Processos
   (preservadas do bloco antigo — não são tipografia) */
.processos-table th:nth-child(2),
.processos-table td:nth-child(2) {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.processos-table th:nth-child(6),
.processos-table td:nth-child(6) {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contratos-table tbody tr:hover,
.processos-table tbody tr:hover {
  background: rgba(64, 84, 178, 0.03);
}

/* Botão de ação dentro da tabela */
.td-actions {
  white-space: nowrap;
}
.td-actions .btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 4px;
  transition: all var(--transition);
}
.td-actions .btn-icon:hover {
  color: var(--firma-blue);
  background: rgba(64, 84, 178, 0.08);
}

/* Status row coloring */
.contratos-table tr.s-vencido td:first-child { border-left: 3px solid var(--text-muted); }
.contratos-table tr.s-critico td:first-child { border-left: 3px solid var(--danger); }
.contratos-table tr.s-urgente td:first-child { border-left: 3px solid var(--warning); }
.contratos-table tr.s-atencao td:first-child { border-left: 3px solid var(--warning); }
.contratos-table tr.s-ok td:first-child { border-left: 3px solid var(--success); }

/* Text helpers */
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════
   UNIFIED ALERTS
   ═══════════════════════════════════════════════════════════════ */
.alert-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  padding-right: 38px; /* espaço reservado pro botão dispensar */
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: all var(--transition);
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
}

.alert-item:hover {
  background: var(--bg-hover);
  border-color: var(--border-color);
}

/* Botão × dispensar — sempre visível, ganha realce no hover do alerta */
.alert-dismiss {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast), background var(--transition-fast),
              color var(--transition-fast), border-color var(--transition-fast);
  padding: 0;
  line-height: 1;
}
.alert-dismiss .material-icons-round { font-size: var(--text-lg); }
.alert-item:hover .alert-dismiss { opacity: 1; }
.alert-dismiss:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}

.alert-icon-wrapper {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-body);
}

.alert-icon-wrapper .material-icons-round {
  font-size: var(--text-lg);
}

.alert-item.contract .alert-icon-wrapper { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.alert-item.publication .alert-icon-wrapper { color: var(--firma-blue); background: color-mix(in srgb, var(--firma-blue) 10%, transparent); }
.alert-item.process .alert-icon-wrapper { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }

.alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--firma-blue);
  flex-shrink: 0;
  margin-top: 6px;
}

.alert-dot.read { opacity: 0.2; }

.alert-content { flex: 1; min-width: 0; }
.alert-title { font-weight: var(--weight-bold); color: var(--text-heading); font-size: var(--text-md); margin-bottom: 2px; }
.alert-detail { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert-time { font-size: var(--text-2xs); color: var(--text-muted); opacity: 0.8; font-weight: var(--weight-semibold); }

/* ---------------------------------------------------------------
   PREMIUM LIST LAYOUT � Tribunais
   --------------------------------------------------------------- */
.tribunais-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 15px !important;
}

.tribunal-group {
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.tribunal-group-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.tribunal-group-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: var(--text-lg) !important;
  font-weight: var(--weight-heavy) !important;
  color: var(--firma-blue) !important;
}

.ativos-counter {
  font-size: var(--text-sm);
  background: var(--firma-blue);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: var(--weight-bold);
  margin-left: 8px;
}

.tribunal-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.tribunal-item:hover {
  border-color: var(--firma-blue) !important;
  background: var(--bg-card-hover) !important;
  transform: translateX(4px);
}

.tribunal-sigla {
  font-size: var(--text-lg) !important;
  font-weight: var(--weight-black) !important;
  color: var(--text-main) !important;
  min-width: 80px;
}

.btn-group-action {
  border: none;
  padding: 8px 18px;
  border-radius: 999px; /* Formato Oval */
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}

.btn-group-on {
  background: var(--success);
  color: #fff;
  margin-bottom: 8px;
  box-shadow:
    0 2px 8px rgba(39, 174, 96, 0.35),
    0 0 0 1px rgba(39, 174, 96, 0.4) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.15) inset;
}
.btn-group-on:hover {
  background: var(--minerva-green-jade);
  box-shadow:
    0 4px 16px rgba(39, 174, 96, 0.55),
    0 0 0 1px rgba(39, 174, 96, 0.55) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.15) inset,
    0 0 22px -4px rgba(39, 174, 96, 0.6);
  transform: translateY(-1px);
}

.btn-group-off {
  background: var(--text-muted);
  color: #fff;
  box-shadow:
    0 2px 8px rgba(100, 116, 139, 0.32),
    0 0 0 1px rgba(148, 163, 184, 0.35) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.15) inset;
}
.btn-group-off:hover {
  background: #475569;
  box-shadow:
    0 4px 16px rgba(100, 116, 139, 0.5),
    0 0 0 1px rgba(148, 163, 184, 0.5) inset,
    0 -1px 0 0 rgba(0, 0, 0, 0.15) inset,
    0 0 22px -4px rgba(148, 163, 184, 0.55);
  transform: translateY(-1px);
}

/* ── Tribunal Accordion ───────────────────────────────────────── */
.tribunal-group { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; margin-bottom: 20px; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.tribunal-group.expanded { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); transform: translateY(-2px); }
.tribunal-group-header { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); transition: background 0.2s; cursor: pointer; }
.tribunal-group-header:hover { background: var(--bg-hover); }
.tribunal-group-title { display: flex; align-items: center; gap: 16px; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-heading); }
.tribunal-group-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.tribunal-group.expanded .tribunal-group-content { max-height: 4000px; padding: 0 24px 24px; }
.expand-icon { transition: transform 0.3s; color: var(--text-muted); }
.tribunal-group.expanded .expand-icon { transform: rotate(180deg); }

/* ── Audit Logs: Premium Layout ───────────────────────────────── */
.audit-list { display: flex; flex-direction: column; gap: 12px; }
.audit-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 20px; display: grid; grid-template-columns: 100px 1fr 120px 120px; align-items: center; gap: 20px; transition: transform 0.2s, box-shadow 0.2s; }
.audit-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.audit-time { display: flex; flex-direction: column; font-size: var(--text-base); color: var(--text-muted); }
.audit-user { font-weight: var(--weight-bold); color: var(--text-heading); display: flex; align-items: center; gap: 8px; font-size: var(--text-lg); }
.op-badge { padding: 4px 12px; border-radius: 99px; font-size: var(--text-sm); font-weight: var(--weight-heavy); text-align: center; text-transform: uppercase; }
.op-insert { background: #dcfce7; color: #166534; }
.op-update { background: #dbeafe; color: #1e40af; }
.op-delete { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════
   GLOW EFFECTS (quebra o "azul chapado")
   ═══════════════════════════════════════════════════════════════ */

/* Topbar com borda inferior de accent discreto */
.topbar {
  box-shadow:
    var(--shadow-sm),
    0 1px 0 0 var(--accent-glow);
}

/* Card: sombra limpa; accent só no hover */
.card {
  box-shadow: var(--shadow-sm);
}

.card:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.22);
  box-shadow:
    var(--shadow-md),
    0 0 0 1px rgba(var(--accent-primary-rgb), 0.06);
}



.nav-item.active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Glow individual do .btn-primary REMOVIDO (decisão Ivna 2026-04-30 — Direção 02
   Notion editorial discreto não usa sombra/glow). Botão fica plano. */

/* KPI cards: glow individual REMOVIDO (Status Strip Minerva — agora cell sem
   sombra própria; tinge translúcido da kpi-color cumpre o papel de divisor
   de cor sem competir com a estrutura de strip) */

/* Sidebar: borda direita sutil, sem glow interno colorido */
.sidebar {
  box-shadow:
    4px 0 18px rgba(26, 31, 54, 0.14),
    inset -1px 0 0 0 rgba(var(--firma-blue-rgb), 0.10);
}

/* Theme toggle: ring discreto no hover */
.theme-toggle-btn:hover {
  box-shadow: 0 0 0 2px rgba(var(--firma-blue-rgb), 0.18);
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — correções de elementos "fubango"
   ═══════════════════════════════════════════════════════════════ */

/* Card dark: profundidade discreta, sem halo azul */
[data-theme="dark"] .card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(var(--accent-primary-rgb), 0.04);
}

[data-theme="dark"] .card:hover {
  border-color: rgba(var(--accent-primary-rgb), 0.32);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(var(--accent-primary-rgb), 0.10),
    0 6px 18px -10px rgba(var(--accent-primary-rgb), 0.22);
}

[data-theme="dark"] .topbar {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.35),
    0 1px 0 0 rgba(var(--accent-primary-rgb), 0.18);
}

/* Override de glow do .btn-primary no dark REMOVIDO — Direção 02 não usa glow */

/* Inputs/selects — cor de fundo e texto */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: rgba(var(--firma-blue-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--firma-blue-rgb), 0.15);
}

/* Callouts inline-styled nos EJS (warning amarelo / success verde / info azul)
   — sobrescreve o fundo claro pastel por versões escuras com glow */
[data-theme="dark"] [style*="#fffbeb"],
[data-theme="dark"] [style*="#fff8ed"],
[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background: #fef3c7"] {
  background: rgba(245, 158, 11, 0.10) !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
}
[data-theme="dark"] [style*="#fffbeb"] *,
[data-theme="dark"] [style*="#fff8ed"] * {
  color: #fcd34d !important;
}
[data-theme="dark"] [style*="#92400e"],
[data-theme="dark"] [style*="#78350f"],
[data-theme="dark"] [style*="#b45309"] {
  color: #fcd34d !important;
}

[data-theme="dark"] [style*="#f0fdf4"],
[data-theme="dark"] [style*="#dcfce7"] {
  background: rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
}
[data-theme="dark"] [style*="#166534"],
[data-theme="dark"] [style*="#15803d"] {
  color: #6ee7b7 !important;
}

[data-theme="dark"] [style*="#eef2ff"],
[data-theme="dark"] [style*="#dbeafe"],
[data-theme="dark"] [style*="#e0f2fe"],
[data-theme="dark"] [style*="#bae6fd"],
[data-theme="dark"] [style*="#f0f9ff"] {
  background: rgba(var(--firma-blue-rgb), 0.15) !important;
  border-color: rgba(var(--firma-blue-rgb), 0.4) !important;
}
[data-theme="dark"] [style*="#1e40af"],
[data-theme="dark"] [style*="#4338ca"],
[data-theme="dark"] [style*="#0369a1"],
[data-theme="dark"] [style*="#0c4a6e"],
[data-theme="dark"] [style*="#0ea5e9"],
[data-theme="dark"] [style*="#2563eb"] {
  color: #93c5fd !important;
}

/* Neutros pálidos (slate/cinza claro) usados como container/label em cards
   inline (ex.: cedente-section/garantidores, fichas de cobrança) */
[data-theme="dark"] [style*="#f8fafc"],
[data-theme="dark"] [style*="#f1f5f9"] {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] [style*="#e2e8f0"] {
  border-color: var(--border-color) !important;
}
[data-theme="dark"] [style*="#94a3b8"],
[data-theme="dark"] [style*="#64748b"],
[data-theme="dark"] [style*="#475569"],
[data-theme="dark"] [style*="#334155"] {
  color: var(--text-muted) !important;
}

/* Roxo (Garantidores/Solidários) */
[data-theme="dark"] [style*="#faf5ff"],
[data-theme="dark"] [style*="#f5f3ff"],
[data-theme="dark"] [style*="#ede9fe"] {
  background: rgba(139, 92, 246, 0.14) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
}
[data-theme="dark"] [style*="#e9d5ff"],
[data-theme="dark"] [style*="#ddd6fe"] {
  border-color: rgba(139, 92, 246, 0.4) !important;
}
[data-theme="dark"] [style*="#7c3aed"],
[data-theme="dark"] [style*="#6b21a8"],
[data-theme="dark"] [style*="#a855f7"],
[data-theme="dark"] [style*="#9333ea"],
[data-theme="dark"] [style*="#5b21b6"] {
  color: #c4b5fd !important;
}

/* Verde (Endereços / OK / sucesso) — complementa #f0fdf4/#dcfce7 já mapeados */
[data-theme="dark"] [style*="#ecfdf5"],
[data-theme="dark"] [style*="#d1fae5"],
[data-theme="dark"] [style*="#bbf7d0"],
[data-theme="dark"] [style*="#86efac"] {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}
[data-theme="dark"] [style*="#22c55e"],
[data-theme="dark"] [style*="#16a34a"],
[data-theme="dark"] [style*="#059669"],
[data-theme="dark"] [style*="#10b981"] {
  color: #6ee7b7 !important;
}
/* Código dentro dos callouts azuis (Dica de Ouro etc.) */
[data-theme="dark"] [style*="#e0f2fe"] code,
[data-theme="dark"] [style*="#bae6fd"] code {
  background: rgba(var(--firma-blue-rgb), 0.22) !important;
  color: #dbeafe !important;
  border: 1px solid rgba(var(--firma-blue-rgb), 0.35) !important;
}

[data-theme="dark"] [style*="#fee2e2"],
[data-theme="dark"] [style*="#fef2f2"] {
  background: color-mix(in srgb, var(--danger) 14%, transparent) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}
[data-theme="dark"] [style*="#991b1b"],
[data-theme="dark"] [style*="#b91c1c"] {
  color: #fca5a5 !important;
}

/* Inline-styled backgrounds claros genéricos */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"] {
  background: var(--bg-card) !important;
}

/* Scrollbar no dark — branco transparente, segue lógica do light */
[data-theme="dark"] {
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* Badges "neutras" ficam legíveis */
[data-theme="dark"] .badge-neutral {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Tabelas: header escuro */
[data-theme="dark"] .data-table thead,
[data-theme="dark"] .data-table th {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

[data-theme="dark"] .data-table tbody tr:hover {
  background: rgba(var(--firma-blue-rgb), 0.08);
}

/* Code inline */
[data-theme="dark"] code {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
}

/* Theme menu no dark: contorno accent sutil, sem halo */
[data-theme="dark"] .theme-menu {
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(var(--firma-blue-rgb), 0.18);
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — overrides de botões REMOVIDOS (decisão Ivna 2026-04-30)
   Conflitavam com a Direção 02 (Charcoal adaptive). Os tokens
   --btn-primary-bg etc. já fazem o adaptive light/dark sozinho.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   DARK THEME — correções de claros que sobraram
   ═══════════════════════════════════════════════════════════════ */

/* Header de tabela sortable no hover */
[data-theme="dark"] .data-table thead th.sortable:hover,
[data-theme="dark"] .processos-table thead th.sortable:hover,
[data-theme="dark"] .contratos-table thead th.sortable:hover {
  background: rgba(var(--firma-blue-rgb), 0.1);
  color: #93c5fd;
}

/* Coluna ativa (dark): só peso da fonte, sem cor/fundo destacados */
[data-theme="dark"] .data-table thead th.sortable.active,
[data-theme="dark"] .processos-table thead th.sortable.active,
[data-theme="dark"] .contratos-table thead th.sortable.active {
  background: transparent;
  font-weight: var(--weight-heavy);
}

[data-theme="dark"] .data-table thead th.sortable.active .sort-icon,
[data-theme="dark"] .processos-table thead th.sortable.active .sort-icon,
[data-theme="dark"] .contratos-table thead th.sortable.active .sort-icon {
  color: var(--text-muted);
  opacity: 0.85;
}

/* Calendário: today-col e header com tom cinza-azulado, não azul chapado */
[data-theme="dark"] .grid-header-cell.today {
  background: rgba(var(--firma-blue-rgb), 0.08);
  border-bottom-color: rgba(var(--firma-blue-rgb), 0.6);
}

[data-theme="dark"] .grid-header-cell.today .day-num,
[data-theme="dark"] .grid-header-cell.today .day-name {
  color: #93c5fd;
}

[data-theme="dark"] .day-cell.today-col {
  background: rgba(var(--firma-blue-rgb), 0.06);
}

[data-theme="dark"] .day-cell:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* topbar-menu-btn hover */
[data-theme="dark"] .topbar-menu-btn:hover {
  background: rgba(var(--firma-blue-rgb), 0.12);
  color: #93c5fd;
}

/* Badge primário: sem fundo azul clarão */
[data-theme="dark"] .badge-primary {
  background: rgba(var(--firma-blue-rgb), 0.15);
  color: #93c5fd;
  border-color: rgba(var(--firma-blue-rgb), 0.35);
}

/* Tribunal item hover */
[data-theme="dark"] .tribunal-item:hover {
  background: rgba(var(--firma-blue-rgb), 0.1) !important;
}

/* Member cell (agenda) e outros tertiary-bg viram grafite, não azul */
[data-theme="dark"] .member-cell {
  background: var(--bg-tertiary);
}

/* ═══════════════════════════════════════════════════════════════
   PRÓXIMAS AUDIÊNCIAS (Dashboard)
   Card compacto com coluna de data + bloco principal + responsável
   ═══════════════════════════════════════════════════════════════ */
.audiencia-row {
  display: grid;
  grid-template-columns: 110px 1fr 220px;
  gap: 20px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s;
  position: relative;
}

.audiencia-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--urgency-color, var(--firma-blue));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px 0 color-mix(in srgb, var(--urgency-color, var(--firma-blue)) 45%, transparent);
}

.audiencia-row:last-child { border-bottom: none; }

.audiencia-row:hover {
  background: rgba(var(--firma-blue-rgb), 0.03);
}

[data-theme="dark"] .audiencia-row:hover {
  background: rgba(var(--firma-blue-rgb), 0.07);
}

/* Coluna de data */
.audiencia-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.1;
}

.audiencia-weekday {
  font-size: var(--text-2xs);
  font-weight: var(--weight-heavy);
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.audiencia-day {
  font-size: 28px;
  font-weight: var(--weight-black);
  color: var(--urgency-color, var(--text-primary));
  line-height: 1;
}

.audiencia-month {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  letter-spacing: 1px;
}

.audiencia-hora {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
}

.audiencia-hora .material-icons-round {
  font-size: var(--text-base);
}

.audiencia-urgency {
  margin-top: 4px;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-black);
  letter-spacing: 0.5px;
  background: color-mix(in srgb, var(--urgency-color) 15%, transparent);
  color: var(--urgency-color);
  border: 1px solid color-mix(in srgb, var(--urgency-color) 30%, transparent);
}

/* Bloco principal: título + chips */
.audiencia-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.audiencia-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-heading, var(--text-primary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audiencia-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.meta-chip .material-icons-round {
  font-size: var(--text-md);
  opacity: 0.8;
}

.meta-chip-accent {
  background: color-mix(in srgb, var(--firma-blue) 10%, transparent);
  color: var(--firma-blue);
  border-color: color-mix(in srgb, var(--firma-blue) 28%, transparent);
}

[data-theme="dark"] .meta-chip-accent {
  background: color-mix(in srgb, var(--firma-blue) 18%, transparent);
  color: #93c5fd;
  border-color: color-mix(in srgb, var(--firma-blue) 40%, transparent);
}

/* Coluna de responsável */
.audiencia-resp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  border-left: 1px solid var(--border-color);
}

.resp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--chart-color, var(--firma-blue));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--chart-color, var(--firma-blue)) 20%, transparent),
    0 0 8px 0 color-mix(in srgb, var(--chart-color, var(--firma-blue)) 45%, transparent);
}

.resp-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.resp-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.resp-name {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resp-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--firma-blue) 12%, transparent);
  color: var(--firma-blue);
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}

.resp-link:hover {
  background: color-mix(in srgb, var(--firma-blue) 22%, transparent);
  transform: scale(1.08);
}

.resp-link .material-icons-round {
  font-size: var(--text-lg);
}

/* Responsive: em telas pequenas o bloco de responsável vai abaixo */
@media (max-width: 900px) {
  .audiencia-row {
    grid-template-columns: 90px 1fr;
    gap: 14px;
  }
  .audiencia-resp {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
  }
}