/* ==========================================================================
   SagenCorp — Design System
   --------------------------------------------------------------------------
   Base de UI INSPIRADA no SagenGov, não idêntica a ele (épico E97 / SAG-3179):

     · estrutura, geometria e ritmo  -> herdados do upstream
       (`tokens.sagengov.css`, vendorizado — não editar à mão)
     · cor (paleta, primária, feedback, foco) -> soberania do SagenCorp,
       declarada NESTE arquivo. Ver ADR-0005.

   Upstream: /Users/marcel/dev/sagengov/sagengov/frontend
             (tokens.css, tailwind.config.js, ui/kit/*, Header.tsx, AppSidebar.tsx)

   Shell soft (#EFEFEF), barra superior 36px na cor da marca, sidebar rail
   clara, cartões brancos com sombras suaves.
   Identidade SagenCorp: esmeralda #0F5C3F (ADR-0008). Raleway nomeia a marca,
   Lato opera — títulos incluídos (ADR-0010, Manual §9).
   ========================================================================== */

@import url("tokens.sagengov.66aae70c69a5.css");

:root {
    /* Marca SagenCorp — esmeralda (Manual da Marca v2.2 · ADR-0008).
       O rubi #A31621 é a cor da EMPRESA, vestida pelo SagenGov: não pertence a
       este sistema. O antigo --sagen-deep não sai do produto — vira --navy, o
       "chrome de aplicação" que o manual define como comum aos quatro sistemas. */
    --brand-50:  #E5FAF2;
    --brand-100: #C6F1E0;
    --brand-400: #30A679;       /* reservado ao modo escuro */
    --brand-500: #137650;
    --brand-600: #0F5C3F;       /* identidade e AÇÃO PRIMÁRIA */
    --brand-700: #0C4A33;       /* hover da primária */
    --brand-900: #072C1E;       /* pressed / texto sobre wash */
    --brand: var(--brand-600);
    --brand-soft: var(--brand-50);

    --navy: #1A3B6E;            /* chrome da aplicação — NÃO é ação */

    /* Os aliases --sagen-deep / --sagen-cyan / --sagen-green saíram: a varredura
       mostrou que NENHUM template os referencia — só o próprio sagen.css usava
       --sagen-deep, e os outros dois estavam declarados e mortos, guardando cores
       (#00A9A5, #76BC21) que o ADR-0008 aposentou. Alias de compatibilidade sem
       consumidor não é compatibilidade: é a paleta antiga sobrevivendo por
       inércia, pronta para ser recolhida por quem procurar "um token que exista".
       Quem quer o chrome escuro usa --navy. */

    /* Superfícies Soft UI (tokens.css) */
    --app-bg: #EFEFEF;          /* --color-soft-bg */
    --surface: #FFFFFF;         /* --color-card-bg */
    --surface-2: #F9FAFB;       /* neutral-50 */
    --surface-3: #FCFCFD;       /* coluna de packs do launcher */
    --pill-active: #EAEAEA;     /* item ativo da sidebar (DESIGN_SYSTEM §3) */
    --fg: #1A1C1E;              /* --color-foreground */
    --fg-inverse: #FFFFFF;      /* texto/ícone SOBRE preenchimento de cor */
    --muted-bg: #E9ECEF;        /* --color-muted-bg */
    --muted-fg: var(--gray-600); /* 6,6:1 sobre --app-bg; era #6C757D (4,1:1, reprovava AA) */

    /* Neutros (neutral-*) */
    /* Escala completa. 400/600/800 faltavam e eram usados assim mesmo: em
       `.assist-hint`, `.assist-why` e `.assist-msg` a declaração não tinha
       fallback, então `color` era inválido e o texto herdava a cor do pai —
       bug silencioso na superfície de assistência. */
    --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
    --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280;
    --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937;
    --gray-900: #111827;
    --line: var(--gray-200);
    --line-soft: var(--gray-100);

    /* Feedback (tokens.css) */
    --primary-50: #eff6ff; --primary-100: #dbeafe; --primary-500: #3b82f6;
    --primary-600: #2563eb; --primary-700: #1d4ed8;
    --success-50: #f0fdf4; --success-100: #dcfce7; --success-500: #10b981;
    --success-600: #059669; --success-700: #15803d; --success-800: #166534;
    --success-900: #14532d;     /* degrau que faltava — usado no :active do .btn-success */
    --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-500: #f59e0b;
    --warning-600: #d97706; --warning-700: #b45309;
    --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-500: #ef4444;
    --danger-600: #dc2626; --danger-700: #b91c1c; --danger-800: #991b1b;
    --info: #3b82f6;
    --primary-200: #bfdbfe; --primary-800: #1e40af;
    --success-200: #bbf7d0;
    --warning-200: #fde68a; --warning-800: #92400e; --warning-900: #78350f;
    --danger-200: #fecaca; --danger-900: #7f1d1d;
    /* 900 de warning/danger: texto de badge soft a 7:1 sobre o wash 100 (Manual
       §13). O 800 dava 6,4 e 6,8 — abaixo do piso. Mesma escala Tailwind das
       famílias, como o --success-900 que já existia. */

    /* Interativo */
    --primary: var(--brand-600);
    --primary-hover: var(--brand-700);
    --link: var(--primary-600);
    --link-hover: var(--primary-700);
    --focus-ring: #2563EB;      /* manual v2.2: não acompanha a marca */
    /* --ring (anel alfa por box-shadow) saiu: o anel é sempre outline sólido —
       box-shadow some no alto contraste do Windows, outline fica (IA-11). */

    /* Semânticas usadas nos templates financeiros */
    --success: var(--success-600);
    --danger: var(--danger-600);
    --warning: var(--warning-600);

    /* Sombras e raios: ESTRUTURAIS — vêm de tokens.sagengov.css.
       Aqui ficam só os aliases legados usados por templates antigos. */
    --shadow-1: var(--shadow-soft-sm);
    --shadow-2: var(--shadow-soft-md);

    /* Métricas de layout (Header.tsx: barra 36px) */
    --topbar-h: 36px;
    --sidebar-w: 264px;

    /* Movimento — três durações, ritmo herdado do upstream (ADR-0005) */
    --duration-fast: .12s;
    --duration-base: .18s;
    --duration-slow: .25s;
    /* Tipografia — Manual v2.2 §9 / ADR-0010: "se o texto nomeia a marca ou
       fala por ela, é Raleway; se serve à operação do sistema, é Lato".
       Raleway fica SÓ no wordmark e no nome do sistema (.navbar-brand,
       .brand-word); título de página, seção, card-header e th são Lato. */
    --font-brand: 'Raleway', 'Trebuchet MS', system-ui, -apple-system, sans-serif;
    --font-ui: 'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Escala de interface do Manual §9, em rem (raiz 16px; WCAG 1.4.4). É a
       ÚNICA escala: font-size fora destes cinco tokens é violação. */
    --fs-label:   .75rem;    /* 12px · 700 · caixa alta, letter-spacing .06em */
    --fs-aux:     .8125rem;  /* 13px · 400 · legenda, metadado */
    --fs-body:    .9375rem;  /* 15px · 400 · corpo, campo, célula */
    --fs-section: 1rem;      /* 16px · 800 · seção, card-header */
    --fs-page:    1.1875rem; /* 19px · 800 · título de página */

    /* Data-viz — Manual v2.2 Anexo B (ADR-0009): cor nova entra no manual primeiro */
    /* séries genéricas */
    --data-1: #3B82F6; --data-2: #10B981; --data-3: #F59E0B;
    --data-4: #EF4444; --data-5: #8B5CF6;
    /* sequencial — rampa da marca, sem o passo 400 ("somente modo escuro", §10) */
    --data-seq-1: var(--brand-50);  --data-seq-2: var(--brand-100);
    --data-seq-3: var(--brand-500); --data-seq-4: var(--brand-600);
    --data-seq-5: var(--brand-700); --data-seq-6: var(--brand-900);
    /* divergente — âmbar / neutro frio / azul de dado; nunca a safira do SagenAud */
    --data-div-neg: var(--warning-700); --data-div-mid: var(--gray-100);
    --data-div-pos: var(--data-1);
    /* nível de risco */
    --risk-critico: #DC2626; --risk-alto: #F97316;
    --risk-medio: #EAB308;   --risk-baixo: #22C55E;
    /* status de item — casa com a tabela do {% badge %} */
    --status-rascunho: #94A3B8;  --status-andamento: #3B82F6;
    --status-concluido: #22C55E; --status-cancelado: #EF4444;
    --status-atrasado: #F59E0B;  --status-pausado: #A855F7;

    /* Compat: nomes antigos usados por templates legados */
    --ink-900: #1A1C1E; --ink-700: #374151; --ink-500: #6b7280;
    --ink-400: #6C757D; --ink-300: #9ca3af;
    --primary-color: var(--primary);
    --secondary-color: var(--success-600);
    --danger-color: var(--danger-600);
    --warning-color: var(--warning-600);
    --info-color: var(--info);
    --dark-bg: #0B1120;
    --sidebar-bg: transparent;
    --text-light: #1A1C1E;
    --text-muted: var(--muted-fg);
    --border-color: var(--gray-200);
    --hover-bg: var(--gray-100);
    --card-bg: #FFFFFF;
    --shadow-sm: var(--shadow-soft-sm);

    /* ----------------------------------------------------------------------
       Bootstrap ancorado na grade de 8px (E97-1.1)
       Os spacers do Bootstrap coincidem com a grade em 1/2/3/4/5 — declaramos
       o vínculo explicitamente para que a origem seja o token, não a coincidência.
       Equivalência com o Tailwind do upstream (para quem for comparar):
         g-2 (8px)  == gap-2   ·  g-3 (16px) == gap-4   ·  g-4 (24px) == gap-6
       Cuidado: `g-3` do Bootstrap NÃO equivale a `gap-3` do Tailwind (12px).
       ---------------------------------------------------------------------- */
    --bs-spacer: var(--spacing-md);            /* 16px — base do Bootstrap */
    --bs-spacer-1: var(--spacing-xs);          /* 4px  */
    --bs-spacer-2: var(--spacing-sm);          /* 8px  */
    --bs-spacer-3: var(--spacing-md);          /* 16px */
    --bs-spacer-4: var(--spacing-lg);          /* 24px */
    --bs-spacer-5: var(--spacing-2xl);         /* 48px */
    /* 32px (--spacing-xl) não tem spacer equivalente no Bootstrap. */

    /* ----------------------------------------------------------------------
       A cor "primary" do Bootstrap (E97 / ADR-0008)

       Redefinir `.btn-primary` via --bs-btn-* não alcança as UTILITÁRIAS: no
       Bootstrap 5.3 `.text-primary`, `.bg-primary` e `.border-primary` derivam
       de --bs-primary-rgb, que continuava valendo o azul de fábrica #0d6efd.
       O acervo tem 446 `text-primary`, 50 `bg-primary` e 17 `border-primary` —
       todos fora da marca, em azul que não é nem esmeralda nem o navy do chrome.

       O defeito é anterior ao rebranding e ficou invisível porque a primária
       ERA azul-marinho: azul de fábrica ao lado de azul de marca passa por
       inatenção. Com a primária esmeralda, os 513 pontos viraram discrepância
       visível. Trocar a base sem trocar o que dela deriva é o padrão de erro
       que esta MR inteira corrige.
       ---------------------------------------------------------------------- */
    --bs-primary: var(--brand-600);
    --bs-primary-rgb: 15, 92, 63;              /* precisa ser literal: entra em rgba() */
    --bs-primary-text-emphasis: var(--brand-900);
    --bs-primary-bg-subtle: var(--brand-50);
    --bs-primary-border-subtle: var(--brand-100);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { overflow-y: scroll; scrollbar-gutter: stable; }

body {
    font-family: var(--font-ui);
    background-color: var(--app-bg);
    color: var(--fg);
    font-size: var(--fs-body);
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
}

/* Títulos em Lato na escala do manual (ADR-0010): página 19/800, seção 16/800.
   h4–h6 não têm degrau próprio; ficam na seção com peso 700. */
h1, h2, h3, h4, h5, h6 { color: var(--fg); font-weight: 700; letter-spacing: -0.005em; }
h1 { font-size: var(--fs-page); font-weight: 800; }
h2, h3 { font-size: var(--fs-section); font-weight: 800; }
h4, h5, h6 { font-size: var(--fs-section); }
small, .small { font-size: var(--fs-aux); }

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

/* Acessibilidade — focus visível global (WCAG 2.4.7).
   Geometria vem do vendorizado; a COR (--focus-ring) é decisão do ERP (E97-3.6). */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { border-radius: var(--radius-sm); }

/* Números financeiros alinham em coluna */
.text-end, .val, td[class*="text-end"], .tabular { font-variant-numeric: tabular-nums; }

::selection { background: var(--primary-100); color: var(--gray-900); }

/* --------------------------------------------------------------------------
   Barra superior — 36px na cor da marca (--brand), símbolo + wordmark ao centro
   -------------------------------------------------------------------------- */
.navbar-custom {
    background: var(--brand);
    min-height: var(--topbar-h);
    padding: 0 0.75rem 0 10px;
    box-shadow: none;
    border: 0;
    z-index: 1045;
}
.navbar-custom .container-fluid { min-height: var(--topbar-h); padding: 0; }

.navbar-brand {
    color: var(--fg-inverse) !important;
    font-family: var(--font-brand);
    font-weight: 400;
    font-size: var(--fs-body);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    line-height: 1;
}
/* Marca — usada na navbar e nas páginas standalone (login, e-sign público).
   Wordmark em dois pesos (manual v2.2): `Sagen` 700 + `Corp` 400, mesmo tamanho e
   mesma cor. O contraste de peso é o que mantém a marca em primeiro plano e o
   sistema subordinado a ela — nunca compor o nome inteiro no mesmo peso. */
.brand-glyph { width: auto; display: block; flex: none; }
.brand-word { font-family: var(--font-brand); font-weight: 400; letter-spacing: .01em; white-space: nowrap; }
.brand-word b { font-weight: 700; }
.navbar-brand .brand-glyph { height: 18px; }

.navbar-custom .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    font-size: var(--fs-aux);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-md);
    transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}
.navbar-custom .navbar-nav .nav-link:hover {
    color: var(--fg-inverse);
    background: rgba(255, 255, 255, 0.15);
}
.navbar-custom .navbar-nav .nav-link.active { color: var(--fg-inverse); background: rgba(255, 255, 255, 0.15); }

.navbar-custom .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
    padding: 0.15rem 0.4rem;
}
.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Busca global — compacta sobre a barra escura (HeaderSearch compact onDark).
   A logo fica centralizada em position:absolute; a busca precisa de folga para
   não encostar nela. Damos um respiro à direita e capamos a largura por faixa. */
.navbar-search { max-width: 340px; width: 100%; margin-right: 0.75rem; }
@media (min-width: 992px) and (max-width: 1499px) {
    .navbar-search { max-width: 240px; }   /* não colide com a logo central */
}
@media (min-width: 1500px) and (max-width: 1799px) {
    .navbar-search { max-width: 300px; }
}
.navbar-search .input-group {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    overflow: hidden;
    transition: background-color var(--duration-base) ease, border-color var(--duration-base) ease;
}
.navbar-search .input-group:focus-within {
    background: var(--surface);
    border-color: var(--fg-inverse);
}
.navbar-search .input-group-text {
    color: rgba(255, 255, 255, 0.75) !important;
    background: transparent; border: 0; padding: 0.2rem 0.35rem 0.2rem 0.75rem;
}
.navbar-search .input-group:focus-within .input-group-text { color: var(--gray-500) !important; }
.navbar-search .form-control {
    background: transparent; border: 0; box-shadow: none;
    color: var(--fg-inverse); font-size: var(--fs-aux); padding: 0.28rem 0.75rem 0.28rem 0.15rem;
}
.navbar-search .form-control::placeholder { color: rgba(255, 255, 255, 0.65); }
.navbar-search .input-group:focus-within .form-control { color: var(--gray-900); }
.navbar-search .input-group:focus-within .form-control::placeholder { color: var(--gray-500); }

/* Skip-link (IA-12): o Bootstrap devolve o .visually-hidden-focusable ao fluxo
   em :focus com position:static — e ele nasce ATRÁS da barra fixa de 36px
   (z-index 1045). Um atalho de teclado que aparece escondido é pior que não
   existir: o leitor anuncia, o olho não acha. Fixo no canto, acima de tudo. */
.visually-hidden-focusable:focus, .visually-hidden-focusable:focus-within {
    position: fixed; top: var(--spacing-sm); left: var(--spacing-sm); z-index: 1100;
    background: var(--surface); color: var(--brand-700);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-standard); box-shadow: var(--shadow-soft-md);
    outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset);
}

/* --------------------------------------------------------------------------
   Sidebar — rail claro (AppSidebar.tsx: círculos, ativo cinza-escuro,
   hover no acento da marca; pill #EAEAEA para o item ativo)
   -------------------------------------------------------------------------- */
.sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: transparent;
    border-right: 0;
    overflow-y: auto;
    padding: 1rem 10px 1.25rem;
    z-index: 1030;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; border: 0; }

.sidebar-section { margin-bottom: 2px; }

.sidebar-title {
    font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted-fg);
    padding: 0.5rem 0.75rem 0.25rem;
}

.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li { margin: 0; }

/* Itens: linha com "pill"; ativo = cápsula #EAEAEA com shadow-inner
   (pillActiveCls do Header.tsx) */
.sidebar-menu a {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.44rem 0.75rem;
    margin: 1px 0;
    border-radius: 999px;
    color: var(--gray-500);
    font-size: var(--fs-body);
    font-weight: 400;
    transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}
.sidebar-menu a:hover { background: var(--gray-100); color: var(--brand); }
.sidebar-menu a.active {
    background: var(--pill-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    color: var(--gray-900);
    font-weight: 700;
}
.sidebar-menu a i { font-size: var(--fs-body); width: 18px; text-align: center; color: var(--gray-500); }
.sidebar-menu a:hover i { color: var(--brand); }
.sidebar-menu a.active i { color: var(--gray-700); }

.sidebar-top-block { margin-bottom: 0.75rem; }

/* Busca do menu — cápsula branca (pill container do submenu) */
.sidebar-search {
    display: flex; align-items: center; gap: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    box-shadow: var(--shadow-soft-sm);
    padding: 0.4rem 0.85rem;
    margin: 0 0 0.6rem;
}
.sidebar-search i { color: var(--muted-fg); font-size: var(--fs-aux); }
.sidebar-search:focus-within { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.sidebar-search input {
    background: transparent; border: 0; width: 100%;
    /* a11y-lint: F1 foco-no-container (.sidebar-search:focus-within desenha o anel) */
    outline: 0;
    font-size: var(--fs-aux); color: var(--fg);
}
.sidebar-search input::placeholder { color: var(--muted-fg); }

/* Grupos: ícone em círculo (rail) + label; hover = círculo cinza + label maroon;
   grupo com item ativo = círculo escuro com ícone branco (AppSidebar) */
.sidebar-group {
    display: flex; align-items: center; gap: 0.65rem;
    width: 100%;
    background: transparent; border: 0; text-align: left;
    padding: 0.3rem 0.35rem;
    border-radius: 999px;
    color: var(--gray-500);
    font-size: var(--fs-body); font-weight: 400;
    cursor: pointer;
    transition: color var(--duration-base) ease;
}
.sidebar-group .group-icon {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    font-size: var(--fs-body);
    color: var(--gray-500);
    background: transparent;
    transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
    text-align: center;
}
.sidebar-group:hover { color: var(--brand); background: transparent; }
.sidebar-group:hover .group-icon { background: var(--gray-100); color: var(--gray-700); }
.sidebar-group .group-label { flex: 1; }
.sidebar-group .chevron { font-size: var(--fs-label); color: var(--gray-300); transition: transform var(--duration-base) ease; margin-right: 0.4rem; }
.sidebar-group:not(.collapsed) { color: var(--gray-900); font-weight: 700; background: transparent; }
.sidebar-group:not(.collapsed) .chevron { transform: rotate(90deg); color: var(--gray-500); }
.sidebar-group:not(.collapsed) .group-icon { background: var(--gray-100); color: var(--gray-700); }
.sidebar-group.has-active { border-left: 0; }
.sidebar-group.has-active .group-icon { background: var(--gray-700); color: var(--fg-inverse); box-shadow: var(--shadow-soft-sm); }

.sidebar-menu.collapse, .sidebar-menu.collapsing { padding-left: 0; background: transparent; }
.sidebar-section .sidebar-menu.collapse a,
.sidebar-section .sidebar-menu.collapsing a { padding-left: 2.9rem; font-size: var(--fs-aux); }
.sidebar-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Sidebar recolhível (E70-3 do SagenGov: rail de ícones + toggle explícito)
   -------------------------------------------------------------------------- */
.sidebar { display: flex; flex-direction: column; padding: 0; }
.sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: 1rem 10px 0.5rem; }
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; }

.sidebar-footer {
    flex-shrink: 0;
    padding: 0.5rem 10px 0.9rem;
    border-top: 1px solid rgba(229, 231, 235, 0.7);
}
.sidebar-footer .rail-item {
    display: flex; align-items: center; gap: 0.65rem;
    width: 100%; background: transparent; border: 0; text-align: left;
    padding: 0.3rem 0.35rem; border-radius: 999px;
    color: var(--gray-500); font-size: var(--fs-body); font-weight: 400; cursor: pointer;
    transition: color var(--duration-base) ease;
}
.sidebar-footer .rail-item:hover { color: var(--brand); }
.sidebar-footer .rail-item .rail-ic {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: var(--fs-body); color: var(--gray-500);
    transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}
.sidebar-footer .rail-item:hover .rail-ic { background: var(--gray-100); color: var(--gray-700); }

/* Bloco do usuário (AppSidebar: avatar cinza-claro com inicial escura) */
.sidebar-user .avatar {
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 999px;
    background: var(--gray-200); color: var(--gray-700);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-label); font-weight: 700; text-transform: uppercase;
}
.sidebar-user .u-name { color: var(--gray-900); font-weight: 700; font-size: var(--fs-aux); line-height: 1.15; }
.sidebar-user .u-role { color: var(--muted-fg); font-size: var(--fs-label); line-height: 1.15; }
.sidebar-user .dropdown-menu { min-width: 13rem; }

/* Estado recolhido: rail estreita (56px) só com os círculos, como no Sagen */
body.sidebar-collapsed { --sidebar-w: 56px; }
body.sidebar-collapsed .sidebar-search,
body.sidebar-collapsed .sidebar-group .group-label,
body.sidebar-collapsed .sidebar-group .chevron,
body.sidebar-collapsed .sidebar-footer .rail-label,
body.sidebar-collapsed .sidebar-user .u-meta,
body.sidebar-collapsed .sidebar-menu a span { display: none; }
body.sidebar-collapsed .sidebar-menu.collapse,
body.sidebar-collapsed .sidebar-menu.collapsing { display: none !important; }
body.sidebar-collapsed .sidebar-scroll { overflow: visible; padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .sidebar-footer { padding-left: 0; padding-right: 0; }
body.sidebar-collapsed .sidebar-top-block .sidebar-menu a {
    justify-content: center; padding: 0; width: 34px; height: 34px;
    margin: 1px auto;
}
body.sidebar-collapsed .sidebar-group,
body.sidebar-collapsed .sidebar-footer .rail-item { justify-content: center; padding: 0.25rem 0; }
.main-content, footer, .sidebar, .submenu-pills { transition: margin-left var(--duration-slow) ease, width var(--duration-slow) ease, left var(--duration-slow) ease; }

/* Tooltip escuro no modo recolhido (Tooltip do AppSidebar: bg-gray-900,
   texto branco xs, rounded-md, à direita do ícone) */
body.sidebar-collapsed .sidebar [data-tip] { position: relative; }
body.sidebar-collapsed .sidebar [data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 10px); top: 50%;
    transform: translateY(-50%);
    background: var(--gray-900); color: var(--fg-inverse);
    font-size: var(--fs-label); font-weight: 400; line-height: 1;
    padding: 7px 10px; border-radius: var(--radius-md);
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity var(--duration-base) ease;
    z-index: 1060;
}
body.sidebar-collapsed .sidebar [data-tip]:hover::after { opacity: 1; }

/* Ícone de painel (lucide PanelLeft*) — traço fino, delicado */
.rail-panel-icon { width: 18px; height: 18px; display: block; }

/* --------------------------------------------------------------------------
   Launcher — Aplicativos e Pacotes (padrão SagenGov)
   -------------------------------------------------------------------------- */
.launcher-backdrop { position: fixed; inset: 0; z-index: 1049; display: none; }
.launcher-backdrop.open { display: block; }

.launcher-panel {
    position: fixed; top: calc(var(--topbar-h) + 8px); left: 8px; z-index: 1050;
    display: none; align-items: stretch;
    background: var(--surface);
    border: 1px solid rgba(26, 59, 110, 0.14);
    border-radius: var(--radius-standard);
    box-shadow: var(--shadow-soft-xl), 0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    max-width: min(720px, calc(100vw - 16px));
    max-height: calc(100vh - var(--topbar-h) - 24px);
}
.launcher-panel.open { display: flex; }

.launcher-col { padding: 1.1rem 1.2rem 1.25rem; overflow-y: auto; }
.launcher-col.apps { width: 440px; max-width: 62vw; }
.launcher-col.packs { width: 220px; border-left: 1px solid var(--gray-100); background: var(--surface-3); }

.launcher-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--fs-body); font-weight: 700; color: var(--fg); margin-bottom: 0.8rem;
}
.launcher-head .btn-close { font-size: var(--fs-label); }

.launcher-search {
    display: flex; align-items: center; gap: 0.5rem;
    background: var(--gray-100); border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg); padding: 0.45rem 0.8rem; margin-bottom: 1rem;
}
.launcher-search i { color: var(--muted-fg); font-size: var(--fs-aux); }
.launcher-search:focus-within { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.launcher-search input {
    background: transparent; border: 0; width: 100%; font-size: var(--fs-aux); color: var(--fg);
    /* a11y-lint: F1 foco-no-container (.launcher-search:focus-within desenha o anel) */
    outline: 0;
}
.launcher-search input::placeholder { color: var(--muted-fg); }

.launcher-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem 0.4rem; }
/* Monocromático (IA-04 / D7, Manual §11): cada app tinha um `--c` próprio — uma
   paleta arco-íris de 53 hexas no base.html, com o ciano aposentado no meio.
   Cor por app é decoração, e "nenhuma família funcional como decoração". Agora
   é wash da marca (50 em repouso, 100 no hover/foco) com ícone e texto no 900
   — 7:1 sobre os dois washes (§13, test_contraste). Sem `--c`, sem glow, e o
   foco é o anel global. */
.launcher-app {
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    text-align: center; color: var(--brand-900); font-size: var(--fs-label); font-weight: 700;
    background: var(--brand-50);
    border-radius: var(--radius-standard); padding: 0.4rem 0.2rem;
    transition: background-color var(--duration-base) ease;
}
.launcher-app:hover, .launcher-app:focus-visible { background: var(--brand-100); color: var(--brand-900); }
.launcher-app .app-ic {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--brand-900); font-size: var(--fs-section);
}
.launcher-app span:last-child { line-height: 1.2; }

.launcher-pack {
    display: flex; align-items: center; gap: 0.6rem;
    border-radius: var(--radius-standard); padding: 0.8rem 0.9rem; margin-bottom: 0.6rem;
    color: var(--brand-900); font-size: var(--fs-aux); font-weight: 700; line-height: 1.2;
    background: var(--brand-50);
    transition: background-color var(--duration-base) ease;
}
.launcher-pack:hover, .launcher-pack:focus-visible { color: var(--brand-900); background: var(--brand-100); }
.launcher-pack i { font-size: var(--fs-section); }
.launcher-hidden { display: none !important; }

/* --------------------------------------------------------------------------
   Submenu pills — cápsula branca central abaixo da barra (Header.tsx)
   -------------------------------------------------------------------------- */
.submenu-pills {
    position: fixed; top: calc(var(--topbar-h) + 12px); left: var(--sidebar-w); right: 0;
    z-index: 1020; display: flex; align-items: center; justify-content: center;
    height: 40px; pointer-events: none;
    transition: left var(--duration-slow) ease;
}
.pills-capsule {
    pointer-events: auto; position: relative;
    display: flex; align-items: center;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    box-shadow: var(--shadow-soft-sm);
    padding: 4px;
    max-width: calc(100% - 2rem);
}
/* Trilha rolável das pills (uma linha; scrollbar oculta; rola por wheel/arrasto) */
.pills-track {
    display: flex; align-items: center; gap: 4px;
    overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none;
}
.pills-track::-webkit-scrollbar { display: none; }
/* Máscara de fade nas bordas quando há conteúdo além da vista (JS liga as classes) */
.pills-capsule.can-left .pills-track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px); mask-image: linear-gradient(90deg, transparent 0, #000 26px); }
.pills-capsule.can-right .pills-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%); }
.pills-capsule.can-left.can-right .pills-track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); }
.pills-track a {
    white-space: nowrap;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    font-size: var(--fs-aux); font-weight: 700;
    color: var(--gray-500);
    transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}
.pills-track a:hover { color: var(--gray-700); background: var(--gray-50); }
.pills-track a.active {
    background: var(--pill-active);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    color: var(--gray-900); font-weight: 700;
}
/* Setas de rolagem — só aparecem quando há overflow naquele lado */
.pills-arrow {
    flex: none; display: none; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 999px; border: 0;
    background: var(--surface); color: var(--navy); cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12); font-size: var(--fs-label); z-index: 2;
}
.pills-arrow:hover { background: var(--gray-100); }
.pills-capsule.can-left .pills-arrow-l { display: flex; }
.pills-capsule.can-right .pills-arrow-r { display: flex; }
body.has-pills .main-content { padding-top: calc(var(--topbar-h) + 64px); }

/* --------------------------------------------------------------------------
   Botão flutuante do assistente (FAB azul, como o SARA do SagenGov)
   -------------------------------------------------------------------------- */
.ai-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 1040;
    width: 52px; height: 52px; border-radius: 999px;
    background: var(--primary-500);
    color: var(--fg-inverse) !important; font-size: var(--fs-page);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-soft-md);
    transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease, background-color var(--duration-base) ease;
}
.ai-fab:hover {
    background: var(--primary-600);
    box-shadow: var(--shadow-soft-xl);
}
/* Ajuda contextual — FAB "?" empilhado acima do assistente (Fase 1.8) */
.help-fab {
    position: fixed; right: 22px; bottom: 84px; z-index: 1040;
    width: 44px; height: 44px; border-radius: 999px; padding: 0; cursor: pointer;
    background: var(--surface); color: var(--navy) !important; font-size: var(--fs-section);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-soft-md);
    transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.help-panel-body :is(h1, h2, h3) { font-size: var(--fs-section); margin-top: .75rem; }
.help-panel-body ul { padding-left: 1.1rem; }
.help-fab:hover {
    box-shadow: var(--shadow-soft-xl);
}

/* Botão do launcher na barra (grid 3×3, branco sobre maroon) */
.launcher-btn {
    width: 28px; height: 28px; border: 0; border-radius: var(--radius-md);
    background: transparent; color: var(--fg-inverse);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color var(--duration-base) ease;
}
.launcher-btn:hover { background: rgba(255, 255, 255, 0.15); }
.navbar-module-label { color: var(--fg-inverse); font-weight: 700; font-size: var(--fs-aux); white-space: nowrap; }

@media (max-width: 767px) {
    .launcher-panel { flex-direction: column; }
    .launcher-col.apps { width: 100%; max-width: none; }
    .launcher-col.packs { width: 100%; border-left: 0; border-top: 1px solid var(--gray-100); }
    .launcher-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Conteúdo
   -------------------------------------------------------------------------- */
.main-content {
    margin-left: var(--sidebar-w);
    padding: calc(var(--topbar-h) + 26px) 2rem 2rem;
    min-height: 100vh;
}
.content-wrapper { max-width: 1400px; }

/* Após o codemod de tipografia (IA-09, 07/09/2026) restam 2 templates com
   `display-5`/`display-4` em número de KPI (hr/survey_detail, sped/auditoria_painel);
   a categoria `tipografia` do ds_lint os conta. Enquanto migram para `_kpi.html`
   (onda 4), seguem o degrau --fs-page/800. O `!important` vence o `.fw-bold` (700)
   escrito no HTML. */
.main-content .display-5 { font-size: var(--fs-page); font-weight: 800 !important; letter-spacing: -0.01em; }
.main-content .display-5 i { font-size: var(--fs-section); vertical-align: 2px; }
.main-content .display-4 { font-size: var(--fs-page); font-weight: 800 !important; letter-spacing: -0.01em; }

.page-header { margin-bottom: 1.5rem; padding-bottom: 0; border-bottom: 0; }
.page-header h1 {
    font-size: var(--fs-page); font-weight: 800; letter-spacing: -0.01em;
    color: var(--fg); margin-bottom: 0.15rem;
}
.page-header h1 i { color: var(--primary); }
.page-header p { font-size: var(--fs-body); color: var(--muted-fg); }

.page-header .breadcrumb { background: transparent; padding: 0; margin: 0 0 0.35rem; font-size: var(--fs-label); }
.breadcrumb-item a { color: var(--muted-fg); }
.breadcrumb-item a:hover { color: var(--gray-700); }
.breadcrumb-item.active { color: var(--gray-500); }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--gray-300); }

/* --------------------------------------------------------------------------
   Cartões — Soft UI (branco, raio 12, SEM sombra em repouso; hover soft-sm)
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-standard);
    transition: box-shadow var(--duration-slow) ease;
}
.card:hover { box-shadow: var(--shadow-soft-sm); }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--line-soft);
    font-weight: 800;
    font-size: var(--fs-section);
    color: var(--fg);
    padding: 0.85rem 1.15rem;
    border-radius: var(--radius-standard) var(--radius-standard) 0 0 !important;
}
.card-header i { color: var(--primary); margin-right: 0.15rem; }

.card-header.bg-primary { background: var(--primary) !important; color: var(--fg-inverse); }
.card-header.bg-primary i { color: rgba(255, 255, 255, 0.8); }

.card.bg-light { background: var(--surface-2) !important; }

/* --------------------------------------------------------------------------
   Botões — ui/kit/Button.tsx (primary=deep, secondary(accent)=cyan,
   success=green, danger=red; raio 12, bold, sem sombra colorida)
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-standard);
    font-weight: 700;
    font-size: var(--fs-aux);
    padding: 0.48rem 1.05rem;
    transition: all var(--duration-base) ease;
}
.btn-sm { font-size: var(--fs-label); padding: 0.32rem 0.75rem; border-radius: var(--radius-lg); }
.btn-lg { font-size: var(--fs-body); padding: 0.7rem 1.4rem; }

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--brand-900);
    --bs-btn-active-border-color: var(--brand-900);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    /* Sem halo: sombra na cor do botão é o "glow" que o kit não tem (E97-3.7).
       O :active usa --brand-900, o degrau "pressed" do DESIGN_SYSTEM.md. */
}
.btn-primary:hover { transform: none; }

.btn-outline-primary {
    --bs-btn-color: var(--gray-700);
    --bs-btn-border-color: var(--gray-200);
    --bs-btn-hover-bg: var(--surface);
    --bs-btn-hover-color: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--surface);
    --bs-btn-active-color: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    border-width: 2px;
}

.btn-secondary, .btn-outline-secondary {
    --bs-btn-color: var(--gray-700);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--gray-200);
    --bs-btn-hover-color: var(--primary);
    --bs-btn-hover-bg: var(--surface);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-color: var(--primary);
    --bs-btn-active-bg: var(--surface);
    --bs-btn-active-border-color: var(--primary);
    border-width: 2px;
}

.btn-success {
    --bs-btn-bg: var(--success-700);
    --bs-btn-border-color: var(--success-700);
    /* Hover/active escurecem o próprio verde de sucesso. Eram #68A81C / #5C9518,
       derivados do limão #76BC21 que o ADR-0008 aposentou: o botão saía de
       verde-escuro e SALTAVA para limão ao passar o mouse. */
    --bs-btn-hover-bg: var(--success-800);
    --bs-btn-hover-border-color: var(--success-800);
    --bs-btn-active-bg: var(--success-900);
    --bs-btn-active-border-color: var(--success-900);
}
.btn-danger {
    --bs-btn-bg: var(--danger-500);
    --bs-btn-border-color: var(--danger-500);
    --bs-btn-hover-bg: var(--danger-600);
    --bs-btn-hover-border-color: var(--danger-600);
    --bs-btn-active-bg: var(--danger-700);
    --bs-btn-active-border-color: var(--danger-700);
}
.btn-warning {
    --bs-btn-bg: var(--warning-500);
    --bs-btn-border-color: var(--warning-500);
    --bs-btn-color: var(--fg-inverse);
    --bs-btn-hover-bg: var(--warning-600);
    --bs-btn-hover-border-color: var(--warning-600);
    --bs-btn-hover-color: var(--fg-inverse);
    --bs-btn-active-bg: var(--warning-700);
    --bs-btn-active-border-color: var(--warning-700);
    --bs-btn-active-color: var(--fg-inverse);
}
.btn-info {
    --bs-btn-bg: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-color: var(--fg-inverse);
    /* A base é --info (azul #3b82f6) e os estados eram ciano #009490/#00807D,
       herdados do --sagen-cyan aposentado: o botão MUDAVA DE MATIZ no hover. */
    --bs-btn-hover-bg: var(--primary-600);
    --bs-btn-hover-border-color: var(--primary-600);
    --bs-btn-hover-color: var(--fg-inverse);
    --bs-btn-active-bg: var(--primary-700);
    --bs-btn-active-border-color: var(--primary-700);
    --bs-btn-active-color: var(--fg-inverse);
}

.btn-outline-success { --bs-btn-color: var(--success-700); --bs-btn-border-color: var(--success-100); --bs-btn-hover-bg: var(--success-50); --bs-btn-hover-color: var(--success-800); --bs-btn-hover-border-color: var(--success-200); --bs-btn-active-bg: var(--success-50); --bs-btn-active-color: var(--success-800); --bs-btn-active-border-color: var(--success-200); border-width: 2px; }
.btn-outline-danger { --bs-btn-color: var(--danger-600); --bs-btn-border-color: var(--danger-100); --bs-btn-hover-bg: var(--danger-50); --bs-btn-hover-color: var(--danger-700); --bs-btn-hover-border-color: var(--danger-200); --bs-btn-active-bg: var(--danger-50); --bs-btn-active-color: var(--danger-700); --bs-btn-active-border-color: var(--danger-200); border-width: 2px; }
.btn-outline-warning { --bs-btn-color: var(--warning-700); --bs-btn-border-color: var(--warning-100); --bs-btn-hover-bg: var(--warning-50); --bs-btn-hover-color: var(--warning-800); --bs-btn-hover-border-color: var(--warning-200); --bs-btn-active-bg: var(--warning-50); --bs-btn-active-color: var(--warning-800); --bs-btn-active-border-color: var(--warning-200); border-width: 2px; }
/* Estava inteiro em ciano (#0B7975 sobre rgba(0,169,165,…)) enquanto o
   `.btn-info` sólido é azul: as duas variantes do MESMO papel divergiam. */
.btn-outline-info { --bs-btn-color: var(--primary-700); --bs-btn-border-color: var(--primary-100); --bs-btn-hover-bg: var(--primary-50); --bs-btn-hover-color: var(--primary-800); --bs-btn-hover-border-color: var(--primary-200); --bs-btn-active-bg: var(--primary-50); --bs-btn-active-color: var(--primary-800); --bs-btn-active-border-color: var(--primary-200); border-width: 2px; }

/* --------------------------------------------------------------------------
   Tabelas
   -------------------------------------------------------------------------- */
.table { --bs-table-hover-bg: var(--gray-50); border-radius: 0; overflow: visible; margin-bottom: 0; color: var(--fg); }

.table thead th {
    background: var(--gray-50);
    color: var(--gray-500);
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--gray-200);
    padding: 0.6rem 0.75rem;
}
.table thead.table-dark th, .table .table-dark th,
.table thead.table-light th, .table .table-light th {
    background: var(--gray-50);
    color: var(--gray-500);
    border-color: var(--gray-200);
}
.table tbody td {
    padding: 0.62rem 0.75rem;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
}
.table tbody tr { transition: background-color var(--duration-fast) ease; }

.table-warning { --bs-table-bg: var(--warning-50); --bs-table-color: var(--gray-700); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: var(--gray-50); }

.card .table-responsive { border-radius: 0 0 var(--radius-standard) var(--radius-standard); overflow-x: auto; }

/* --------------------------------------------------------------------------
   Badges — soft: fundo 100 + texto no degrau que dá 7:1 sobre o wash (Manual §13)
   Medido: primary-800 7,2 · gray-700 9,4 · success-900 8,3 · danger-900 8,2 ·
   warning-900 8,2 · light gray-700 9,9. O 700 ficava entre 4,4 e 5,5.
   -------------------------------------------------------------------------- */
.badge { padding: 0.34em 0.62em; font-weight: 700; font-size: var(--fs-label); letter-spacing: 0.01em; border-radius: 999px; }
.badge.bg-primary { background: var(--primary-100) !important; color: var(--primary-800) !important; }
.badge.bg-secondary { background: var(--gray-100) !important; color: var(--gray-700) !important; }
.badge.bg-success { background: var(--success-100) !important; color: var(--success-900) !important; }
.badge.bg-danger { background: var(--danger-100) !important; color: var(--danger-900) !important; }
.badge.bg-warning { background: var(--warning-100) !important; color: var(--warning-900) !important; }
.badge.bg-info { background: var(--primary-100) !important; color: var(--primary-800) !important; }
/* `.badge.bg-dark` saiu do kit (IA-17a): badge é só status e risco, sempre soft;
   um badge sólido escuro era "tipo" ou "contagem" — isso é texto. */
.badge.bg-light { background: var(--surface-2) !important; color: var(--gray-700) !important; border: 1px solid var(--gray-200); }

/* --------------------------------------------------------------------------
   Formulários — foco por outline sólido no --focus-ring (nunca só box-shadow:
   o alto contraste do Windows apaga box-shadow e preserva outline)
   -------------------------------------------------------------------------- */
.form-label { font-weight: 700; color: var(--gray-700); font-size: var(--fs-aux); margin-bottom: 0.35rem; }
.form-text { font-size: var(--fs-label); color: var(--muted-fg); }

.form-control, .form-select {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-size: var(--fs-body);
    color: var(--fg);
    padding: 0.48rem 0.8rem;
    background: var(--surface);
    transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.form-control::placeholder { color: var(--gray-300); }
.form-control:focus, .form-select:focus {
    border-color: var(--focus-ring);
    box-shadow: none;   /* apaga o halo azul de fábrica do Bootstrap */
    outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset);
}
.form-control-lg { font-size: var(--fs-section); padding: 0.65rem 0.95rem; }

.form-check-input { border-color: var(--gray-300); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--focus-ring); box-shadow: none; outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }

.input-group .btn { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.input-group .form-control { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }

/* --------------------------------------------------------------------------
   Alertas — feedback-50 + borda esquerda 500
   -------------------------------------------------------------------------- */
.alert {
    border-radius: var(--radius-standard);
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: var(--fs-body);
    padding: 0.8rem 1rem;
}
.alert i { margin-right: 0.25rem; }
.alert-success { background: var(--success-50); border-color: var(--success-100); border-left-color: var(--success-500); color: var(--success-800); }
.alert-danger, .alert-error { background: var(--danger-50); border-color: var(--danger-100); border-left-color: var(--danger-500); color: var(--danger-800); }
.alert-warning { background: var(--warning-50); border-color: var(--warning-100); border-left-color: var(--warning-500); color: var(--warning-800); }
.alert-info { background: var(--primary-50); border-color: var(--primary-100); border-left-color: var(--info); color: var(--primary-800); }
.alert-light { background: var(--surface-2); border-color: var(--gray-200); border-left-color: var(--gray-300); color: var(--gray-500); }

/* --------------------------------------------------------------------------
   Dropdowns, modais, paginação, progresso
   -------------------------------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-standard);
    box-shadow: var(--shadow-soft-xl);
    padding: 0.4rem;
    font-size: var(--fs-body);
}
.dropdown-item { border-radius: var(--radius-lg); padding: 0.45rem 0.7rem; color: var(--gray-700); }
.dropdown-item:hover { background: var(--gray-100); color: var(--gray-900); }
.dropdown-item.active { background: var(--gray-100); color: var(--gray-900); }
.dropdown-item i { width: 18px; color: var(--muted-fg); }
.dropdown-divider { border-color: var(--line-soft); }

.modal-content { border: 1px solid var(--gray-100); border-radius: var(--radius-standard); box-shadow: var(--shadow-soft-xl); }

.pagination { --bs-pagination-border-radius: var(--radius-lg); --bs-pagination-color: var(--gray-700); --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary); --bs-pagination-hover-color: var(--gray-900); --bs-pagination-focus-color: var(--gray-900); font-size: var(--fs-body); }

/* Último componente do Bootstrap com a primária de fábrica embutida: ao
   contrário de `.pagination` e `.progress-bar`, o `--bs-nav-pills-link-active-bg`
   vem com `#0d6efd` literal no CSS compilado, então sobrescrever --bs-primary
   não o alcança. */
.nav-pills { --bs-nav-pills-link-active-bg: var(--primary); }

.progress { background: var(--gray-100); border-radius: 999px; }
.progress-bar { font-size: var(--fs-label); font-weight: 700; background-color: var(--primary); }
.progress-bar.bg-success { background-color: var(--success-500) !important; }
.progress-bar.bg-info { background-color: var(--info) !important; }

/* Blocos de estatística (.stat-card/.stat-icon) saíram em 07/09/2026: o KPI
   de painel é a tag {% kpi %} do kit (base/_kpi.html) — IA-23. */

/* Bloco interno de card (IA-15). O guia veta card dentro de card; o que antes
   era `.card` aninhado (KPI por categoria, entidade do report builder, item de
   kanban) vira este bloco: borda e raio do kit, sem sombra, sem filete. Como
   ancora, herda a cor e so escurece a borda no hover. */
.card-inset {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-standard);
    padding: 1rem;
    color: inherit;
}
a.card-inset { transition: border-color var(--duration-base) ease; }
a.card-inset:hover { border-color: var(--gray-400); color: inherit; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
footer {
    margin-left: var(--sidebar-w);
    padding: 1rem 2rem 1.5rem;
    background: transparent;
    border-top: 1px solid rgba(229, 231, 235, 0.6);
    color: var(--muted-fg);
    font-size: var(--fs-label);
}

/* --------------------------------------------------------------------------
   Utilidades e responsivo
   -------------------------------------------------------------------------- */
.spinner-wrapper { display: flex; justify-content: center; align-items: center; min-height: 200px; }

.list-group-item { border-color: var(--line-soft); font-size: var(--fs-body); }

/* Movimento reduzido (index.css do SagenGov) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 991px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--duration-slow) ease;
        background: var(--app-bg);
        box-shadow: var(--shadow-soft-xl);
    }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; padding: calc(var(--topbar-h) + 18px) 1rem 2rem; }
    footer { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Página inicial (painel) — templates/base/index.html
   --------------------------------------------------------------------------
   Veio do <style> do template (IA-05), traduzido para o kit: mesma anatomia do
   .card (sem sombra em repouso, soft-sm no hover, sem translateY — IA-10),
   escala do manual (o valor do KPI era 1.7rem, fora dela) e ícone do KPI sem
   disco (IA-16, Manual §11). O cartão de IA era gradiente navy→#0A2E50 com um
   halo radial no ciano aposentado — virou navy chapado. `.dash` é o prefixo
   da tela: nada aqui vale fora dela.
   -------------------------------------------------------------------------- */
.dash .kpi, .dash .mini, .dash .panel {
    background: var(--surface); border: 1px solid var(--gray-100);
    border-radius: var(--radius-standard);
    transition: box-shadow var(--duration-slow) ease;
}
.dash .kpi, .dash .mini { height: 100%; }
.dash .kpi { padding: 1.25rem 1.35rem; }
.dash .mini { padding: .85rem 1rem; }
.dash .kpi:hover, .dash .panel:hover { box-shadow: var(--shadow-soft-sm); }
.dash .lbl {
    font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted-fg);
}
.dash .val { font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.dash .kpi .val { font-size: var(--fs-page); line-height: 1.1; margin-top: .35rem; }
.dash .mini .val { font-size: var(--fs-section); }
.dash .kpi .sub { font-size: var(--fs-aux); color: var(--muted-fg); margin-top: .15rem; }
.dash .kpi .ic { display: inline-flex; align-items: center; color: inherit; }
.dash .kpi .ic .sg-icon { width: 24px; height: 24px; }
.dash .panel .phead {
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--line-soft);
    font-weight: 800; font-size: var(--fs-section); color: var(--fg);
}
.dash .panel .pbody { padding: 1.1rem 1.25rem; }
.dash .ai { border-radius: var(--radius-standard); background: var(--navy); color: var(--fg-inverse); }
.dash .ai .btn-ai {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
    color: var(--fg-inverse); font-size: var(--fs-aux); font-weight: 700;
    transition: background-color var(--duration-base) ease;
}
.dash .ai .btn-ai:hover { background: rgba(255, 255, 255, .16); color: var(--fg-inverse); }
.dash .qa { display: flex; flex-wrap: wrap; gap: .5rem; }
.dash .qa a {
    border: 1px solid var(--gray-200); background: var(--surface); border-radius: 999px;
    padding: .48rem .95rem; color: var(--fg); font-size: var(--fs-aux); font-weight: 700;
    transition: border-color var(--duration-base) ease, color var(--duration-base) ease;
}
.dash .qa a:hover { border-color: var(--primary); color: var(--primary); }
.dash .duerow {
    display: flex; justify-content: space-between; align-items: center;
    padding: .6rem 0; border-bottom: 1px solid var(--line-soft);
}
.dash .duerow:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Utilitários de layout (cauda IA-07)
   Cada classe substitui um style= que os lotes do IA-07 deixaram por falta de
   classe no kit. Medida fixa é geometria (herdada, ADR-0005); cor nunca entra
   aqui — cor de dado vai por custom property (seção seguinte) ou por token.
   -------------------------------------------------------------------------- */
/* Degraus da escala (ADR-0010) fora de título — número de KPI, meta de header,
   legenda — para que template nunca precise de font-size literal nem de fs-*/display-*. */
.fs-page { font-size: var(--fs-page); }
.fs-section { font-size: var(--fs-section); }
.fs-aux { font-size: var(--fs-aux); }
.fs-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.chart-box { position: relative; height: 280px; }
.chart-box-lg { height: 320px; }
.progress-xs { --bs-progress-height: 6px; }
.progress-sm { --bs-progress-height: 8px; }
.pre-scroll { max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.scroll-y { max-height: 70vh; overflow: auto; }
.scroll-y-sm { max-height: 360px; overflow-y: auto; }
.prose-ia { max-width: 72ch; line-height: 1.7; }
.flex-fixed-70 { flex: 0 0 70px; }
.form-control-xs { width: 70px; }
.th-vertical { width: 80px; writing-mode: vertical-rl; transform: rotate(180deg); }
.agenda-hora { width: 3rem; flex: none; }
.avatar { width: 40px; height: 40px; flex: 0 0 40px; }
details > summary { cursor: pointer; }

/* --------------------------------------------------------------------------
   Valor dinâmico por custom property (IA-06)
   O template passa só o NÚMERO (style="--pct:65"); a propriedade que o consome
   vive aqui. O ds_lint deixa de contar style= que só declara custom property.
   -------------------------------------------------------------------------- */
.w-pct { width: calc(var(--pct, 0) * 1%); }
.pl-nivel { padding-left: calc(var(--nivel, 0) * 1rem); }
.bg-var { background: var(--c); }
/* Marca de cor do item da agenda: a cor vem do cadastro (evento/tarefa), o
   traço é do kit. */
.agenda-cor { width: 4px; height: 1.4rem; flex: none; border-radius: 999px; background: var(--c); }

/* ===========================================================================
   Tela Inicial + navegação por módulo (refinamento de organização, jul/2026)
   - `/` acolhe (boas-vindas + busca + módulos), padrão SagenGov;
   - dentro de um módulo, a sidebar mostra só o menu daquele módulo
     (body.module-mode) — menos ruído, menus mais visíveis;
   - sem pílulas superiores duplicando o menu lateral.
   ======================================================================== */

/* --- Tela Inicial: página plena, sem sidebar --- */
body.home-screen .sidebar { display: none; }
body.home-screen .main-content,
body.home-screen footer { margin-left: 0; }
body.home-screen .content-wrapper { max-width: 1080px; margin: 0 auto; }

.home-hero { text-align: center; padding-top: 3vh; }

/* Toggle Modo Busca / Modo Chat (ativo na cor da marca, inativo branco) */
.home-mode-toggle { display: flex; justify-content: center; gap: .5rem; margin-bottom: 2.2rem; }
.mode-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid var(--gray-300); background: var(--surface);
    color: var(--gray-900); font-weight: 700; font-size: var(--fs-body);
    border-radius: var(--radius-lg); padding: .55rem 1.15rem; cursor: pointer;
    box-shadow: var(--shadow-soft-sm);
    transition: background var(--duration-base) ease, color var(--duration-base) ease;
}
.mode-btn.active { background: var(--brand); border-color: var(--brand); color: var(--fg-inverse); }
/* Foco: só o :focus-visible global (ADR-0005 R2 — mecanismo e geometria do
   foco são herdados e NÃO sobrescrevíveis). Sem realce extra por box-shadow. */

.home-welcome {
    /* 800, não 900: o <link> do base.html carrega Raleway até 800. Pedir 900
       de uma família que não tem esse peso faz o navegador sintetizar
       faux-bold — engorda por interpolação, sem o desenho real. Era 900 quando
       o título usava Lato, que É carregado com 900. */
    font-size: var(--fs-page); font-weight: 800; letter-spacing: -0.02em;
    color: var(--gray-900);
}
.home-welcome span { color: var(--brand); }
.home-sub { color: var(--gray-600); margin-top: .25rem; }

.home-search {
    position: relative; max-width: 640px; margin: 1.5rem auto 2.25rem;
}
.home-search i {
    position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
    color: var(--gray-500);
}
.home-search input {
    width: 100%; border: 1px solid var(--gray-300);
    border-radius: 999px; padding: .85rem 1.25rem .85rem 2.7rem;
    font-size: var(--fs-section); background: var(--surface);
    box-shadow: 0 6px 18px rgba(26, 59, 110, .06);
}
.home-search input:focus {
    border-color: var(--focus-ring);
    outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset);
}

/* Dropdown da busca inteligente (Tela Inicial + barra superior) */
.smart-suggest {
    background: var(--surface); border: 1px solid var(--gray-200);
    border-radius: var(--radius-standard); box-shadow: 0 16px 40px -12px rgba(26, 59, 110, .28);
    text-align: left; overflow: hidden; overflow-y: auto; max-height: 62vh;
}
.smart-suggest .hs-group { padding: .35rem 0; border-top: 1px solid var(--gray-100); }
.smart-suggest .hs-group:first-child { border-top: 0; }
.smart-suggest .hs-title {
    font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--gray-500); padding: .4rem 1rem .2rem;
}
.smart-suggest .hs-item {
    display: flex; align-items: baseline; gap: .6rem; padding: .5rem 1rem;
    color: inherit; text-decoration: none;
}
.smart-suggest .hs-item:hover { background: var(--gray-100); }
.smart-suggest .hs-ic { color: var(--navy); width: 1rem; flex: none; }
.smart-suggest .hs-main { font-weight: 700; font-size: var(--fs-body); }
.smart-suggest .hs-ctx { margin-left: auto; color: var(--gray-500); font-size: var(--fs-label); }
.smart-suggest .hs-empty { padding: 1rem; color: var(--gray-600); font-size: var(--fs-body); }

/* ---------------------------------------------------------------------------
   Barra de comando ⌘K (Fase 10.9.1)
   Sobreposição centrada e alta na tela: a barra é para agir rápido, então ela
   chega onde o olho já está, e não num canto que precisa ser procurado.
   --------------------------------------------------------------------------- */
.cmdk-hint {
    background: transparent; border-left: 0; color: var(--gray-500);
    padding: 0 .5rem; cursor: pointer;
}
.cmdk-hint kbd {
    background: var(--gray-100); color: var(--gray-600);
    border-radius: var(--radius-sm); font-size: var(--fs-label); padding: .1rem .28rem;
    margin-left: .15rem;
}
.cmdk-hint:hover kbd { background: var(--gray-200); }

.cmdk {
    position: fixed; inset: 0; z-index: 1080;
    /* Véu tingido de sagen-deep, não preto neutro: a barra cobre a tela inteira
       e um cinza puro aqui destoaria do resto do kit. */
    background: rgba(26, 59, 110, .34);
    display: flex; justify-content: center; align-items: flex-start;
    padding: 10vh var(--spacing-md) var(--spacing-md);
}
.cmdk[hidden] { display: none; }
.cmdk-box {
    width: min(680px, 100%); background: var(--surface);
    border: 1px solid var(--gray-100); border-radius: var(--radius-standard);
    box-shadow: var(--shadow-soft-xl), 0 18px 44px rgba(26, 59, 110, .22);
    overflow: hidden; display: flex; flex-direction: column; max-height: 76vh;
}
.cmdk-field {
    display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem;
    border-bottom: 1px solid var(--gray-100);
}
.cmdk-field i { color: var(--navy); }
.cmdk-box:focus-within { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.cmdk-field input {
    flex: 1; border: 0; font-size: var(--fs-section); color: var(--gray-800);
    background: transparent;
    /* a11y-lint: F1 foco-no-container (.cmdk-box:focus-within desenha o anel) */
    outline: 0;
}
.cmdk-field input::placeholder { color: var(--gray-500); }
.cmdk-field kbd {
    background: var(--gray-100); color: var(--gray-500);
    border-radius: var(--radius-sm); font-size: var(--fs-label); padding: .12rem .35rem;
}
.cmdk-results { overflow-y: auto; padding: .25rem 0; }
.cmdk-group { padding: .3rem 0; border-top: 1px solid var(--gray-100); }
.cmdk-group:first-child { border-top: 0; }
.cmdk-title {
    font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--gray-500); padding: .4rem 1rem .2rem;
}
.cmdk-item {
    display: flex; align-items: baseline; gap: .6rem; padding: .5rem 1rem;
    cursor: pointer;
}
.cmdk-item.ativo, .cmdk-item:hover { background: var(--gray-100); }
.cmdk-item.ativo { box-shadow: inset 3px 0 0 var(--navy); }
/* Ação sem parâmetro suficiente: visível, mas sem parecer acionável. */
.cmdk-item.incompleto { opacity: .62; }
.cmdk-ic { color: var(--navy); width: 1rem; flex: none; }
.cmdk-main { font-weight: 700; font-size: var(--fs-body); }
.cmdk-ctx { margin-left: auto; color: var(--gray-500); font-size: var(--fs-label); }
.cmdk-empty { padding: 1.1rem 1rem; color: var(--gray-600); font-size: var(--fs-body); }
.cmdk-foot {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    padding: .5rem 1rem; border-top: 1px solid var(--gray-100);
    background: var(--gray-50); color: var(--gray-500);
    font-size: var(--fs-label);
}
.cmdk-foot kbd {
    background: var(--surface); border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm); color: var(--gray-600);
    font-size: var(--fs-label); padding: .1rem .3rem; margin-right: .15rem;
}
.cmdk-foot-note { margin-left: auto; }
@media (max-width: 575.98px) {
    .cmdk { padding-top: 6vh; }
    .cmdk-foot-note { display: none; }
}

/* ---------------------------------------------------------------------------
   Assistência de campo (Fase 10.9.3)
   O cartão dá mais espaço ao PORQUÊ que ao valor: um número sozinho convida a
   aceitar sem ler, e é exatamente isso que a assistência existe para evitar.
   --------------------------------------------------------------------------- */
.assist {
    border: 1px dashed var(--gray-200); border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md); background: var(--gray-50);
}
.assist-hint { color: var(--gray-600); font-size: var(--fs-aux); margin-left: .5rem; }
.assist-out { margin-top: var(--spacing-sm); display: grid; gap: var(--spacing-sm); }
.assist-card {
    background: var(--surface); border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg); padding: var(--spacing-sm) var(--spacing-md);
}
.assist-head { display: flex; align-items: center; gap: .5rem; }
.assist-head code { font-size: var(--fs-section); font-weight: 700; color: var(--primary); }
.assist-campo {
    font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em;
    color: var(--gray-500);
}
.assist-head .assist-usar { margin-left: auto; }
.assist-why { font-size: var(--fs-body); color: var(--gray-800); margin-top: .3rem; }
.assist-norma, .assist-evid {
    font-size: var(--fs-label); color: var(--gray-600); margin-top: .25rem;
}
.assist-msg { font-size: var(--fs-aux); color: var(--gray-600); }

/* Posicionamento na Tela Inicial (abaixo da barra central) */
.home-suggest {
    position: relative; max-width: 640px; margin: -1.75rem auto 2.25rem; z-index: 1030;
}
/* Posicionamento na barra superior (flutua sob o campo, alinhado à direita) */
.navbar-suggest {
    position: absolute; top: calc(100% + .35rem); right: 0;
    width: min(460px, 92vw); z-index: 1050; max-height: 70vh;
}

.home-modules-label {
    text-align: left; font-size: var(--fs-label); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--gray-600); margin: 0 0 .75rem .25rem;
}
.home-modules {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem; text-align: left; padding-bottom: 2rem;
}
@media (max-width: 767.98px) { .home-modules { grid-template-columns: 1fr; } }

.home-module-card {
    display: flex; align-items: center; gap: 1rem;
    background: var(--surface); border: 1px solid var(--gray-200);
    border-radius: var(--radius-standard); padding: 1.1rem 1.25rem;
    text-decoration: none; color: inherit;
    transition: box-shadow var(--duration-base) ease;
}
/* Sem translateY: o guia veta "levitar" no hover (IA-15). Mesmo regime do .card:
   nada em repouso, soft-sm no hover. */
.home-module-card:hover {
    box-shadow: var(--shadow-soft-sm);
    color: inherit;
}
.home-module-card .hm-icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--radius-standard);
    display: grid; place-items: center; font-size: var(--fs-page);
    /* Monocromático como o launcher (D7): a cor por app saiu de base/nav.py. */
    color: var(--brand-900); background: var(--brand-50); border: 1px solid var(--brand-100);
}
.home-module-card .hm-name { display: block; font-weight: 700; }
.home-module-card .hm-desc {
    display: block; font-size: var(--fs-aux); color: var(--gray-600);
}
.home-module-card .hm-go { margin-left: auto; color: var(--gray-400); font-size: var(--fs-aux); }

/* --- Modo Chat (modelo Sagen: cartão branco, balões, entrada embaixo) --- */
.home-chat-card {
    max-width: 900px; margin: 0 auto; text-align: left;
    background: var(--surface); border: 1px solid var(--gray-200);
    border-radius: var(--radius-standard); padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(26, 59, 110, .07);
    min-height: 46vh; display: flex; flex-direction: column; gap: 1rem;
}
.chat-msg { display: flex; align-items: flex-start; gap: .7rem; }
.chat-avatar {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    background: var(--primary); color: var(--fg-inverse);
    display: grid; place-items: center; font-size: var(--fs-body);
}
.chat-bubble {
    background: var(--gray-100); border: 1px solid var(--gray-200);
    border-radius: var(--radius-standard); padding: .8rem 1rem; line-height: 1.5;
}
.chat-input {
    margin-top: auto; display: flex; gap: .5rem; align-items: center;
}
.chat-input input {
    flex: 1; border: 1px solid var(--gray-300); border-radius: 999px;
    padding: .7rem 1.15rem; font-size: var(--fs-section);
}
.chat-input input:focus {
    border-color: var(--focus-ring);
    outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset);
}
.chat-send {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    border: 0; background: var(--primary); color: var(--fg-inverse); cursor: pointer;
}
.chat-send:hover { filter: brightness(1.1); }

/* --- Navegação em dois níveis conciliados ---
   Sidebar = seções do módulo ativo · Pílulas superiores = telas da seção.
   Título do módulo na sidebar (não clicável, dá o contexto). */
.sidebar-module-title {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem .75rem .35rem;
    font-size: var(--fs-label); font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--gray-600);
}
.sidebar-module-title .group-icon { width: 1.1rem; text-align: center; }
body.sidebar-collapsed .sidebar-module-title .group-label { display: none; }
#navSearchResults .sidebar-menu a span { white-space: normal; line-height: 1.25; }

/* "Por que esse número?" — marcador discreto e painel da trilha (Fase 10.2) */
.explicar-num { white-space: nowrap; }
.explicar-btn {
    border: 0; background: transparent; padding: 0 0 0 .25rem; cursor: pointer;
    color: var(--gray-400); font-size: var(--fs-label); line-height: 1;
    vertical-align: super; transition: color var(--duration-base) ease;
}
.explicar-btn:hover { color: var(--navy); }
.explicar-formula {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--gray-100); border-radius: var(--radius-md);
    padding: .2rem .45rem; display: inline-block; margin-top: .1rem;
}
.explicar-passos li { border-left: 2px solid var(--gray-200); padding-left: .6rem; }


/* --------------------------------------------------------------------------
   Páginas standalone (login, erro, assinatura pública)
   --------------------------------------------------------------------------
   Antes cada uma redeclarava o :root inteiro num bloco <style> — o login tinha
   21 hexas e uma cópia dos tokens que ninguém mantinha em dia. Agora consomem
   este arquivo, e a identidade muda num lugar só.
   -------------------------------------------------------------------------- */
.standalone {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: var(--spacing-md);
    background:
        radial-gradient(1200px 600px at 100% 0%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 60%),
        radial-gradient(1000px 500px at 0% 100%, color-mix(in srgb, var(--navy) 8%, transparent), transparent 55%),
        var(--app-bg);
}
.standalone-card {
    width: 100%; max-width: 400px; background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-mega);
    box-shadow: var(--shadow-soft-xl);
    padding: 2.5rem 2.25rem 2.25rem;
}
.standalone-card.is-wide { max-width: 620px; }
.standalone-brand { text-align: center; margin-bottom: 1.9rem; }
.standalone-brand .brand-mark {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--brand); margin-bottom: .9rem;
}
.standalone-brand .brand-glyph { height: 30px; }
.standalone-brand .brand-word { font-size: var(--fs-page); letter-spacing: -0.01em; color: var(--fg); }
.standalone-brand p { color: var(--muted-fg); font-size: var(--fs-aux); margin-top: 0.3rem; }
.standalone-foot { text-align: center; color: var(--muted-fg); font-size: var(--fs-label); margin-top: 1.4rem; }
.standalone .btn-block { width: 100%; }
.esign-ok { font-size: var(--fs-page); line-height: 1; color: var(--success-700); }
.standalone-card .error-code {
    font-size: var(--fs-page); font-weight: 800; letter-spacing: -.02em;
    color: var(--primary); line-height: 1;
}

/* ==========================================================================
   Sagen Icons — base do sprite  (tag {% icon %} · static/icons/sagen-icons.svg)
   O <use> instancia o símbolo no contexto DESTE svg: os atributos de traço do
   sprite não são herdados, precisam estar aqui. O único fill sólido do pacote
   (o ponto) traz fill="currentColor" no próprio elemento e vence a herança.
   ========================================================================== */
.sg-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: inline-block;
    vertical-align: -0.125em;
    flex: none;
}

/* --------------------------------------------------------------------------
   Equivalências para os seletores que estilizavam o <i> do Font Awesome.
   A cor atravessa sozinha (currentColor); o TAMANHO não — `font-size` não
   dimensiona SVG. Cada regra abaixo espelha a de cima dela, convertendo o
   corpo de fonte em px (1rem = 16px) e fixando altura junto com largura, para
   o ícone não achatar quando a regra antiga só declarava `width`.
   -------------------------------------------------------------------------- */
.sidebar-menu a .sg-icon { width: 18px; height: 18px; color: var(--gray-500); }
.sidebar-menu a:hover .sg-icon { color: var(--brand); }
.sidebar-menu a.active .sg-icon { color: var(--gray-700); }

.sidebar-search .sg-icon,
.launcher-search .sg-icon { width: 14px; height: 14px; color: var(--muted-fg); }

.launcher-app .app-ic .sg-icon { width: 18px; height: 18px; }
.launcher-pack .sg-icon { width: 16px; height: 16px; }

.main-content .display-5 .sg-icon { width: 18px; height: 18px; vertical-align: 2px; }
.page-header h1 .sg-icon { color: var(--primary); }

.card-header .sg-icon { color: var(--primary); margin-right: 0.15rem; }
.card-header.bg-primary .sg-icon { color: rgba(255, 255, 255, 0.8); }

.alert .sg-icon { margin-right: 0.25rem; }
.dropdown-item .sg-icon { width: 18px; height: 18px; color: var(--muted-fg); }

.home-search .sg-icon {
    position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--gray-500);
}
.cmdk-field .sg-icon { width: 18px; height: 18px; color: var(--muted-fg); }

/* Substitui a animacao de giro do Font Awesome. Respeita quem pediu menos
   movimento no sistema. */
.sg-spin { animation: sg-girar 1.6s linear infinite; transform-origin: 50% 50%; }
@keyframes sg-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .sg-spin { animation: none; }
}

/* Marca de terceiro: silhueta sólida, o oposto do nosso contorno. Herda a cor
   do contexto (hoje `text-success` no WhatsApp) mas nunca o traço. */
.sg-icon-externo {
    fill: currentColor;
    stroke: none;
    display: inline-block;
    vertical-align: -0.125em;
    flex: none;
}

/* Ponto de status (8px). Era um circulo do Font Awesome encolhido por estilo
   inline —
   um ícone de contorno nesse tamanho vira anel, não ponto. Herda a cor do
   contexto (`text-primary`, `text-success`) e some do leitor de tela. */
.sg-ponto {
    display: inline-block;
    width: 0.5rem; height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.05em;
}

/* ==========================================================================
   Alto contraste — Manual v2.2 §13 (D8): "o modo não é opcional".
   Hexa literal SÓ dentro deste :root: é declaração de token, não consumo.
   Todo o resto do bloco consome os tokens redefinidos.
   ========================================================================== */
@media (prefers-contrast: more) {
    :root {
        --brand-600: #FFD700;
        --brand: #FFD700;
        --primary: #FFD700;
        --surface: #000;
        --app-bg: #000;
        --fg: #FFF;
        /* Não está na lista do §13, mas decorre dela: o texto SOBRE o amarelo
           (.btn-primary, .badge, avatar) era --fg-inverse branco — 1,4:1. Preto
           sobre #FFD700 dá 14,6:1. */
        --fg-inverse: #000;
        --focus-ring: #00FFFF;
        --focus-ring-width: 3px;
        --hc-link: #FFD700;
        --hc-link-visited: #E0B000;
        --hc-outline: #FFF;
    }
    a { color: var(--hc-link); }
    a:visited { color: var(--hc-link-visited); }
    .btn { outline: 1px solid var(--hc-outline); }
    .card, .modal-content, .dropdown-menu { box-shadow: none; outline: 1px solid var(--hc-outline); }
    * { backdrop-filter: none !important; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Kit de componentes (base/templatetags/ui_tags.py, onda 4). Só geometria:
   cor entra por token ou pela utilitária que o parcial escolhe.
   -------------------------------------------------------------------------- */
.page-header .page-meta { display: block; margin-top: 0.1rem; }
/* Botão só de ícone: caixa 36×36 com ícone 24 (Manual §11, grade 24). */
.btn-icon {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
/* Campo de busca com icone dentro (invoice_list, lead_list): o icone era um
   bloco solto acima do input. */
.search-box { position: relative; }
.search-box > svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted-fg); pointer-events: none; }
.search-box > .form-control { padding-left: 2.25rem; }
.table-actions { width: 1%; }
.table-actions .btn-icon + .btn-icon { margin-left: 0.25rem; }
.kpi { margin: 0; }
.kpi dd { margin-bottom: 0; }
.kpi-value { line-height: 1.1; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }