/* =============================================================================
   Design System — DeRE (Plataforma de Gestão Tributária Especial)
   Tokens + componentes. CSS puro por variável: portável (funciona sem build) e
   reutilizável em qualquer mockup via <link>. O Tailwind (CDN) entra por cima só
   para utilitários de layout, lendo estes mesmos tokens (ver ds-tailwind.js).

   Re-tema: troque os tokens de MARCA em :root (--color-primary-*). Nada de cor/px
   cru fora daqui — sempre var(--...).
   ============================================================================= */

/* Tipografia do projeto: Source Sans (Pro/3), carregada via @import (portável). */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---- Primitivas: escalas ---- */
  /* Azul institucional gov.br/RFB: 700=#1351b4 (marca), 800=#0c326f, 900=#071d41 (navy do rodapé) */
  --blue-50:#eef4fc;  --blue-100:#d7e4f6; --blue-200:#aecbee; --blue-300:#7ba7e0;
  --blue-400:#4a82d2; --blue-500:#2b66c6; --blue-600:#1a56bb; --blue-700:#1351b4;
  --blue-800:#0c326f; --blue-900:#071d41;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a; --slate-950:#020617;
  --green-50:#f0fdf4; --green-100:#dcfce7; --green-200:#bbf7d0; --green-500:#22c55e; --green-600:#16a34a; --green-700:#15803d; --green-800:#166534;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-200:#fde68a; --amber-500:#f59e0b; --amber-600:#d97706; --amber-700:#b45309; --amber-800:#92400e;
  --red-50:#fef2f2;   --red-100:#fee2e2;   --red-200:#fecaca;   --red-500:#ef4444;   --red-600:#dc2626;   --red-700:#b91c1c;   --red-800:#991b1b;
  --sky-50:#f0f9ff;   --sky-100:#e0f2fe;   --sky-200:#bae6fd;   --sky-500:#0ea5e9;   --sky-600:#0284c7;   --sky-700:#0369a1;   --sky-800:#075985;
  --violet-50:#f5f3ff; --violet-100:#ede9fe; --violet-200:#ddd6fe; --violet-500:#8b5cf6; --violet-600:#7c3aed; --violet-700:#6d28d9; --violet-800:#5b21b6;
  --teal-50:#f0fdfa;  --teal-100:#ccfbf1; --teal-200:#99f6e4; --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#0f766e; --teal-800:#115e59;

  /* ---- Semânticos: MARCA (troque aqui pra re-tematizar) ---- */
  --color-primary:        var(--blue-700);   /* #1351b4 · azul institucional gov.br/RFB */
  --color-primary-hover:  var(--blue-800);   /* #0c326f */
  --color-primary-active:  var(--blue-900);  /* #071d41 */
  --color-primary-subtle: var(--blue-50);
  --color-primary-contrast:#ffffff;
  --color-primary-darker: var(--blue-900);   /* #071d41 · navy p/ rodapé, sidebar e faixas escuras (gov.br) */
  /* Secundária semântica: teal (realces, gráficos, ênfase que NÃO é status) */
  --color-secondary:        var(--teal-600);  /* #0d9488 */
  --color-secondary-hover:  var(--teal-700);
  --color-secondary-subtle: var(--teal-50);
  --color-secondary-contrast:#ffffff;
  /* Secundária DECORATIVA (rosa Axians) — só ornamento (detalhe, gradiente, realce visual).
     Nunca carrega informação sozinha nem vira cor de status. */
  --color-accent-2:#e6007e;
  --color-accent-2-subtle:color-mix(in srgb, #e6007e 9%, var(--color-surface));
  /* Chrome de autenticação (painel navy do login / onboarding / link-invalido).
     O painel é sempre escuro (não inverte no dark), então estes tokens são fixos. */
  --color-on-navy:#ffffff;                                                  /* texto/realce sempre branco sobre o painel navy */
  --gradient-auth:linear-gradient(rgba(17,62,140,.93), rgba(10,40,96,.96)); /* véu navy sobre a foto de fundo do painel de autenticação */

  /* ---- Semânticos: superfície / texto / borda ---- */
  --color-bg:          #ffffff;            /* branco, como gov.br; blocos usam --color-surface-2 (cinza azulado) */
  --color-surface:     #ffffff;
  --color-surface-2:   var(--slate-50);
  --color-border:      var(--slate-200);
  --color-border-strong:var(--slate-300);
  --color-scrim: color-mix(in srgb, var(--slate-900) 50%, transparent);
  --color-field-border: var(--slate-400);   /* borda default dos campos/dropdowns: slate-400 (~2.56:1), na escala; escolha consciente, um pouco abaixo do 3:1 do 1.4.11 (mitigado por rótulo, valor, chevron, hover e foco); o hover escurece (--color-text-muted) */
  --color-divider:     var(--color-border); /* tracinhos/divisores sobre branco — SEMPRE esta cor */
  --color-text:        var(--slate-800);
  --color-heading:     var(--slate-900);
  --color-text-muted:  var(--slate-500);
  --color-text-onmuted:var(--slate-600);

  /* ---- Status (sempre cor + rótulo/ícone, nunca só cor) ---- */
  --color-success:var(--green-600); --color-success-bg:var(--green-100); --color-success-fg:var(--green-700);
  --color-warning:var(--amber-600); --color-warning-bg:var(--amber-100); --color-warning-fg:var(--amber-700);
  --color-danger: var(--red-700);   --color-danger-bg: var(--red-100);   --color-danger-fg: var(--red-700);   --color-danger-contrast:#fff;   --color-danger-hover:var(--red-800);
  --color-info:   var(--sky-600);   --color-info-bg:   var(--sky-100);   --color-info-fg:   var(--sky-700);
  --color-processing: var(--color-info-fg); /* etapa "em processamento": um azul só no fluxo (segue o info-fg no dark) */
  --color-azul: var(--blue-700); --color-azul-bg: var(--blue-100); --color-azul-fg: var(--blue-800);
  /* rascunho (trabalho iniciado e não enviado): lilás, pra não se confundir com o neutro (não iniciada) nem com o azul (em revisão) */
  --color-draft:  var(--violet-600); --color-draft-bg:  var(--violet-100); --color-draft-fg:  var(--violet-700);

  /* ---- Escala de espaçamento (4/8/12/16/24/32/40/48/56) ---- */
  --space-1:.25rem; --space-1-5:.375rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-14:3.5rem;
  /* Tipografia — escala (base do body = 16px) */
  /* rem p/ responder ao tamanho de fonte do usuário (WCAG 1.4.4); px no comentário p/ clareza. Raiz = 16px. */
  /* Escala TABELADA (px): 9 · 12 · 14 · 16 · 18 · 20 · 24 · 28 · 32.
     Base 14 (corpo = UI). Sem 13/15/22 — só os degraus da tabela. */
  --text-2xs:.5625rem; /* 9px  · micro (marca d'água, rótulo mínimo) */
  --text-xs:var(--space-3);    /* 12px · legenda, caption, meta, badge, overline */
  --text-sm:.875rem;   /* 14px · UI/chrome: botão, campo, menu, célula, label, breadcrumb */
  --text-base:1rem;    /* 16px · BASE: corpo/leitura (maior que a UI, p/ conforto de leitura) */
  --text-lg:1rem;      /* 16px · lead, subtítulo, h4 */
  --text-xl:1.125rem;  /* 18px · h3 */
  --text-2xl:1.25rem;  /* 20px · h2 */
  --text-3xl:1.5rem;   /* 24px · h1 (título de página) */
  --text-4xl:1.75rem;  /* 28px · display */
  --text-5xl:2rem;     /* 32px · hero, número grande de KPI */
  --text-6xl:2.25rem;  /* 36px · display maior */
  --text-7xl:2.5rem;   /* 40px · display maior */
  --text-8xl:3rem;     /* 48px · display maior */
  /* Pesos (Source Sans 3): 400 Regular · 500 Medium · 600 SemiBold · 700 Bold */
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-tight:1.25; --leading-snug:1.4; --leading-normal:1.6;

  /* ---- Raio / sombra / foco / tipografia ---- */
  /* Raio crisp/institucional (base gov.br): 4px em controles e cards; overlays um pouco mais macios */
  --radius-sm:4px; --radius-base:4px; --radius-lg:4px; --radius-xl:6px; --radius-2xl:12px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-md:0 1px 2px rgba(15,23,42,.04), 0 12px 32px -12px rgba(15,23,42,.16);
  --shadow-lg:0 1px 2px rgba(15,23,42,.04), 0 24px 48px -20px rgba(15,23,42,.20);
  --shadow-up:0 -2px 10px rgba(15,23,42,.05);   /* sombra pra cima: barras fixas no rodapé */
  /* Foco: anel opaco na cor da marca, separado por um anel de superfície. Passa AA (≥3:1) e fica elegante. */
  --ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
  /* Check do Lucide (path M20 6 9 17l-5-5) como máscara — usado no checkbox custom (.check e .selectcard) */
  --ds-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --font-sans:"Source Sans 3","Source Sans Pro","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --control-h:40px; --control-h-sm:32px; --control-h-lg:44px;
}

/* ---- Dark mode: só re-mapeia semânticos (as primitivas ficam) ----
   Vale para o toggle por classe (.dark, usado nos mockups) e por atributo
   (data-theme, usado no catálogo hospedado). ---- */
.dark, :root[data-theme="dark"] {
  --color-bg:          #08090c;   /* canvas: preto quase neutro (menos azul que o slate-950, mais fundo) */
  --color-surface:     #14161b;   /* cards/menu: cinza-escuro com leve tom cool (menos azul que o slate-900) */
  --color-surface-2:   #1f222a;   /* superfície elevada */
  --color-border:      var(--slate-700);
  --color-border-strong:var(--slate-600);
  --color-text:        var(--slate-100);
  --color-heading:     #ffffff;
  --color-text-muted:  var(--slate-400);
  --color-text-onmuted:var(--slate-300);
  --color-primary:      #5b8def;
  --color-primary-hover:#77a4f5;
  --color-primary-active:#4f81e6;
  --color-primary-contrast:var(--slate-900);
  --color-primary-subtle: color-mix(in srgb, var(--blue-500) 12%, var(--slate-900));
  --color-success-bg: color-mix(in srgb, var(--green-600) 22%, var(--slate-900));
  --color-warning-bg: color-mix(in srgb, var(--amber-600) 22%, var(--slate-900));
  --color-danger-bg:  color-mix(in srgb, var(--red-600) 22%, var(--slate-900));
  --color-info-bg:    color-mix(in srgb, var(--sky-600) 22%, var(--slate-900)); --color-azul-bg: color-mix(in srgb, var(--blue-500) 26%, var(--slate-900)); --color-azul-fg: var(--blue-200);
  --color-primary-darker: var(--blue-200); /* cabeçalho de tabela e títulos navy legíveis no escuro (auditoria a11y 02/set) */
  --color-draft-bg:   color-mix(in srgb, var(--violet-600) 22%, var(--slate-900)); --color-draft-fg:var(--violet-200);
  --color-success-fg:var(--green-200); --color-warning-fg:var(--amber-200); --color-danger-fg:var(--red-200); --color-danger-hover:var(--red-500); --color-info-fg:var(--sky-200); --color-field-border:var(--slate-400);
  --shadow-md:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -12px rgba(0,0,0,.6);--shadow-lg:0 1px 2px rgba(0,0,0,.4), 0 26px 50px -20px rgba(0,0,0,.72);--shadow-up:0 -2px 10px rgba(0,0,0,.5);
}

/* ---- Base ---- */
*{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{color:var(--color-heading);margin:0 0 var(--space-2);font-weight:600 !important;line-height:var(--leading-tight);letter-spacing:-.011em;text-wrap:balance}
h1{font-size:var(--text-3xl) !important;letter-spacing:-.021em}
h2{font-size:var(--text-2xl) !important;letter-spacing:-.015em}
h3{font-size:var(--text-xl) !important;line-height:var(--leading-snug)}
h4{font-size:var(--text-lg) !important;line-height:var(--leading-snug)}
h5{font-size:var(--text-base) !important;line-height:var(--leading-snug)}
h6{font-size:var(--text-sm) !important;line-height:var(--leading-snug);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted)}
/* Título de card: papel de componente (18px), abaixo do h2 de conteúdo (24px). O !important existe só p/ vencer o !important dos headings acima. */
.card__title{font-size:var(--text-lg) !important}
.text-display{font-size:var(--text-4xl);font-weight:700;line-height:var(--leading-tight);color:var(--color-heading)}
/* Subtítulo / descrição de página: texto de leitura (16), muted — distinto da UI densa (14) */
.subtitle{font-size:var(--text-base);color:var(--color-text-muted);line-height:var(--leading-normal)}
a{color:var(--color-primary);text-decoration:none}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}

/* ---- Acessibilidade: utilitários de leitor de tela ---- */
/* Conteúdo visível só para tecnologia assistiva (sai da tela, permanece na árvore) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
/* "Pular para o conteúdo": fora da tela até receber foco por teclado, então aparece no topo */
.skip-link{position:fixed;top:var(--space-3);left:var(--space-3);z-index:100;
  display:inline-flex;align-items:center;height:var(--control-h);padding:0 var(--space-4);
  border-radius:var(--radius-base);background:var(--color-primary);color:var(--color-primary-contrast);
  font:600 14px/1 var(--font-sans);box-shadow:var(--shadow-md);
  transform:translateY(calc(-100% - var(--space-6)));transition:transform .15s}
.skip-link:focus{transform:translateY(0);outline:none;box-shadow:var(--ring),var(--shadow-md)}
/* Alvo do "pular para o conteúdo": recebe foco sem anel visível (o conteúdo é que importa) */
.skip-target:focus{outline:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none}}

/* =========================== COMPONENTES =========================== */

/* Botão */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control-h);padding:0 var(--space-4);border-radius:var(--radius-base);
  font:600 var(--text-sm)/1 var(--font-sans);border:1px solid transparent;cursor:pointer;
  transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s;white-space:nowrap}
.btn:focus-visible{box-shadow:var(--ring)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
/* Hierarquia: primário > secundário > terciário > ghost (+ danger, link).
   Estados em todos: hover, active, foco (:focus-visible global) e disabled. */
.btn--primary{background:var(--color-primary);color:var(--color-primary-contrast)}
.btn--primary:hover:not(:disabled){background:var(--color-primary-hover)}
.btn--primary:active:not(:disabled){background:var(--color-primary-active)}
/* Secundário: contorno com TEXTO NA COR DA MARCA (fundo branco) */
.btn--secondary{background:var(--color-surface);color:var(--color-primary);border-color:var(--color-border-strong)}
.btn--secondary:hover:not(:disabled){background:var(--color-primary-subtle);border-color:var(--color-primary)}
.btn--secondary:active:not(:disabled){background:color-mix(in srgb,var(--color-primary) 14%,var(--color-surface))}
/* Terciário: contorno neutro, texto neutro, fundo branco */
.btn--tertiary{background:var(--color-surface);color:var(--color-heading);border-color:var(--color-border-strong)}
.btn--tertiary:hover:not(:disabled){background:var(--color-surface-2)}
.btn--tertiary:active:not(:disabled){background:var(--color-border)}
/* Ghost: sem fundo nem borda */
.btn--ghost{background:transparent;color:var(--color-text)}
.btn--ghost:hover:not(:disabled){background:var(--color-border)}
.btn--ghost:active:not(:disabled){background:var(--color-border-strong)}
/* Danger */
.btn--danger{background:var(--color-danger);color:var(--color-danger-contrast)}
.btn--danger-outline{background:var(--color-surface);color:var(--color-danger-fg);border-color:var(--color-danger)}
.btn--danger-outline:hover{background:var(--color-danger-bg);color:var(--color-danger-fg)}
.btn--danger:hover:not(:disabled){background:var(--color-danger-hover)}
.btn--danger:active:not(:disabled){background:var(--red-800)}
/* Success (confirmações positivas) */
.btn--success{background:var(--green-700);color:#fff}
.btn--success:hover:not(:disabled){background:var(--green-800)}
.btn--success:active:not(:disabled){background:var(--green-800)}
/* Outline: mesmo estilo do secundário (mantido por compatibilidade) */
.btn--outline{background:var(--color-surface);color:var(--color-primary);border-color:var(--color-border-strong)}
.btn--dashed{background:var(--color-surface-2);color:var(--color-primary);border:1px dashed var(--color-primary)}
.btn--dashed:hover:not(:disabled){background:color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));border-color:var(--color-primary-hover);color:var(--color-primary-hover)}
.btn--block{width:100%}
.btn--outline:hover:not(:disabled){background:var(--color-primary-subtle);border-color:var(--color-primary)}
/* Link */
.btn--link{background:transparent;border-color:transparent;color:var(--color-primary);padding:0 var(--space-1);gap:var(--space-2)}
.btn--link:hover:not(:disabled){background:transparent;text-decoration:underline}
/* Tamanhos: sm / md (padrão .btn) / lg */
.btn--sm{height:var(--control-h-sm);padding:0 var(--space-3);font-size:var(--text-sm)}
.btn--lg{height:var(--control-h-lg);padding:0 var(--space-6);font-size:var(--text-base)}
/* Tamanho do ícone dentro de botão de texto (padrão do DS): sm/md=16, lg=18 */
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn--lg svg{width:18px;height:18px}
/* loading: mantém a cor + spinner (nunca vira só cinza) */
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:ds-spin .6s linear infinite;color:var(--color-primary-contrast)}
@keyframes ds-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-loading::after{animation:none}}

/* Botão de ícone (só ícone) — regra do DS: SEMPRE com aria-label + tooltip */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:var(--control-h);height:var(--control-h);padding:0;border:1px solid transparent;
  border-radius:var(--radius-base);background:transparent;color:var(--color-text-muted);cursor:pointer;
  transition:background-color .12s,color .12s,box-shadow .12s}
.icon-btn:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 14%,var(--color-surface));color:var(--color-primary)}
.icon-btn:active:not(:disabled){background:color-mix(in srgb,var(--color-primary) 22%,var(--color-surface));color:var(--color-primary)}
.icon-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.icon-btn:disabled{opacity:.5;cursor:not-allowed}
/* Tamanho do ícone é definido pela classe (como os botões): sm/base/lg */
.icon-btn svg{width:20px;height:20px}
.icon-btn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.icon-btn--sm svg{width:16px;height:16px}
.icon-btn--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
.icon-btn--lg svg{width:22px;height:22px}
.icon-btn--danger{color:var(--color-danger)}
.icon-btn--danger:hover:not(:disabled){background:var(--color-danger-bg);color:var(--color-danger)}
.icon-btn--primary{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}
.icon-btn--primary:hover:not(:disabled){background:var(--color-primary-hover);color:var(--color-primary-contrast)}
.icon-btn--primary:active:not(:disabled){background:var(--color-primary-darker)}
.icon-btn[data-tooltip]{position:relative}
.icon-btn[data-tooltip]::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--color-heading);color:var(--color-surface);font-size:var(--text-xs);font-weight:500;line-height:1.2;padding:4px 8px;border-radius:var(--radius-sm);opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none;z-index:20}
.icon-btn[data-tooltip]:hover::after,.icon-btn[data-tooltip]:focus-visible::after{opacity:1;visibility:visible}

/* Link de ação: texto clicável no tom primário (âncora ou button), sem virar botão cheio.
   Use quando a ação é secundária e cabe como link no meio do conteúdo (ex.: "Ver o evento", "Desfazer"). */
.linkact{background:none;border:0;padding:0;font-family:inherit;font-size:var(--text-sm);font-weight:600;color:var(--color-primary);cursor:pointer;text-decoration:none}
.linkact:hover{text-decoration:underline}
.linkact:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
.linkact--rm{color:var(--color-danger)}
/* Com ícone (seta externa, etc.): inline-flex mantém texto e ícone na MESMA linha
   (o preflight do Tailwind força svg{display:block}, que sozinho quebraria o ícone pra baixo). */
.linkact--icon{display:inline-flex;align-items:center;gap:var(--space-1)}
.linkact--icon svg{width:14px;height:14px;flex:0 0 auto}
.linkact--ia{display:inline-flex;align-items:center;gap:var(--space-1)}
.linkact--ia svg{width:13px;height:13px;flex:0 0 auto}

/* Campo (label + controle + ajuda/erro) */
.field{display:flex;flex-direction:column;gap:var(--space-1-5)}
.field__label{font-size:var(--text-sm);font-weight:600;color:var(--color-heading)}
.field__req{color:var(--color-danger)}
.input,.select,textarea.input{width:100%;height:var(--control-h);padding:0 var(--space-3);
  background:var(--color-surface);color:var(--color-heading);
  border:1px solid var(--color-field-border);border-radius:var(--radius-base);
  font-family:var(--font-sans);font-size:var(--text-sm);transition:border-color .12s,box-shadow .12s}   /* campo = 14px (--text-sm), conforme a doc dos tokens; o --lg fixa 16px abaixo */
textarea.input{height:auto;padding:var(--space-2) var(--space-3);min-height:84px;line-height:1.5;resize:vertical}
textarea.input--compact{min-height:64px}   /* editores inline (linha de conta, tabela); o padrão 84px é p/ formulários */
.input--lg,.select--lg{height:var(--control-h-lg);font-size:var(--text-base)}
.input::placeholder{color:var(--color-text-muted)}
.input:hover:not(:disabled):not(:focus),.select:hover:not(:disabled):not(:focus),textarea.input:hover:not(:disabled):not(:focus){border-color:var(--color-text-muted)}
.input:focus,.select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent)}
.input:disabled,.select:disabled{background:var(--color-surface-2);color:var(--color-text-muted);
  border-color:var(--color-border);cursor:not-allowed}
/* Dark: input desabilitado mais perceptível (bg um pouco mais claro, texto mais apagado) */
.dark .input:disabled,.dark .select:disabled,:root[data-theme="dark"] .input:disabled,:root[data-theme="dark"] .select:disabled{
  background:color-mix(in srgb, var(--slate-700) 45%, var(--slate-800));color:var(--slate-500)}
.field.is-invalid .input,.field.is-invalid .select{border-color:var(--color-danger)}
.field.is-invalid .input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 30%,transparent)}
.field__msg[hidden]{display:none}
.field__msg{display:flex;align-items:center;gap:var(--space-1);margin:0;font-size:var(--text-xs);color:var(--color-text-muted)}
.field__msg svg{width:16px;height:16px;flex:0 0 auto}
.field__label .req{color:var(--color-danger);margin-left:2px}   /* asterisco de campo obrigatório */
.field__msg--error{color:var(--color-danger)}
@keyframes ds-field-msg-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.field__msg--error:not([hidden]){animation:ds-field-msg-in .18s ease}
@media(prefers-reduced-motion:reduce){.field__msg--error:not([hidden]){animation:none}}
.field__msg--ok{color:var(--color-success-fg)}
/* Campo somente leitura: dado confirmado (ex.: vindo da Receita), exibição sem cara de campo editável */
.readonly-field{display:flex;flex-direction:column;gap:var(--space-1)}
.readonly-field__label{font-size:var(--text-sm);font-weight:600;color:var(--color-heading)}
.readonly-field__value{font-size:var(--text-base);color:var(--color-heading)}
.readonly-field--boxed{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-4)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:2rem}

/* Check / radio / switch */
.check{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--text-sm)}
.check:has(input:disabled){cursor:not-allowed;color:var(--color-text-muted)}
.check input{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer}
/* Radio custom (igual ao checkbox): círculo com ponto, sem o realce quadrado nativo no hover */
.check input[type=radio]{appearance:none;-webkit-appearance:none;border:1px solid var(--color-field-border);border-radius:50%;background:var(--color-surface);display:inline-grid;place-content:center;transition:background .12s,border-color .12s}
.check input[type=radio]::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--color-primary);transform:scale(0);transition:transform .12s}
.check input[type=radio]:checked{border-color:var(--color-primary)}
.check input[type=radio]:checked::before{transform:scale(1)}
.check input[type=radio]:hover:not(:checked):not(:disabled){border-color:var(--color-text-muted)}
.check input[type=radio]:focus-visible{outline:none;box-shadow:var(--ring)}
@media (prefers-reduced-motion:reduce){.check input[type=radio]::before{transition:none}}
/* Checkbox: caixa mais arredondada + check do Lucide (menor) no lugar do desenho nativo do browser */
.check input[type=checkbox]{appearance:none;-webkit-appearance:none;border:1px solid var(--color-field-border);border-radius:var(--radius-base);background:var(--color-surface);display:inline-grid;place-content:center;transition:background .12s,border-color .12s}
.check input[type=checkbox]::before{content:"";width:12px;height:12px;background:var(--color-primary-contrast);transform:scale(0);transition:transform .12s;-webkit-mask:var(--ds-check) center/contain no-repeat;mask:var(--ds-check) center/contain no-repeat}
.check input[type=checkbox]:checked{background:var(--color-primary);border-color:var(--color-primary)}
.check input[type=checkbox]:checked::before{transform:scale(1)}
.check input[type=checkbox]:indeterminate{background:var(--color-primary);border-color:var(--color-primary)}
.check input[type=checkbox]:indeterminate::before{transform:scale(1);-webkit-mask:none;mask:none;width:10px;height:2px;border-radius:1px}
@media (prefers-reduced-motion:reduce){.check input[type=checkbox]::before{transition:none}}
.check input:hover:not(:disabled){box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent)}
.check input:focus-visible{outline:none;box-shadow:var(--ring)}
.check input:disabled{cursor:not-allowed}
.check input[type=checkbox]:disabled{background:var(--color-surface-2);border-color:var(--color-border)}
.check input[type=checkbox]:disabled:checked{background:var(--color-text-muted);border-color:var(--color-text-muted)}
.switch{position:relative;width:38px;height:22px;flex:0 0 auto}
.switch input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch__track{position:absolute;inset:0;background:var(--color-border-strong);border-radius:var(--radius-pill);transition:background .15s}
.switch__track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--slate-50);border-radius:50%;transition:transform .15s;box-shadow:var(--shadow-sm)}
.switch input:checked + .switch__track{background:var(--color-primary)}
.switch input:checked + .switch__track::after{transform:translateX(16px)}
.switch input:focus-visible + .switch__track{box-shadow:var(--ring)}
.switch input:hover:not(:disabled) + .switch__track{box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 10%, transparent)}
.switch input:disabled{cursor:not-allowed}
.switch input:disabled + .switch__track{opacity:.5}
.switch input:disabled + .switch__track::after{box-shadow:none}

/* Choice card: opção selecionável rica (radio/checkbox + título + descrição + tag opcional).
   Uso: <label class="choice"><input type="radio/checkbox">...<span class="choice__body">...</span></label>
   Input real dentro do label → acessível; estado visual via :has(input:checked). */
.choice{display:flex;align-items:center;gap:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-4);cursor:pointer;background:var(--color-surface);transition:border-color .15s,background .15s,box-shadow .15s}
.choice:hover{border-color:var(--color-border-strong)}
.choice:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-subtle)}
.choice:has(input:focus-visible){box-shadow:var(--ring)}
.choice > input{flex:0 0 auto;order:2;margin:0;width:20px;height:20px;accent-color:var(--color-primary);cursor:pointer}
.choice__ic{flex:0 0 auto;width:40px;height:40px;border-radius:var(--radius-base);display:grid;place-items:center;background:var(--color-primary-subtle);color:var(--color-primary)}
.choice:has(input:checked) .choice__ic{background:var(--color-primary);color:var(--color-primary-contrast)}
.choice__body{min-width:0;flex:1;display:flex;flex-direction:column;gap:var(--space-1)}
.choice__title{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font-size:var(--text-base);font-weight:600;color:var(--color-heading)}
.choice__desc{font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-snug)}
.choice:has(input:checked) .choice__desc{color:var(--color-text-onmuted)}
.choice__tag{font-size:var(--text-xs);font-weight:700;letter-spacing:.02em;color:var(--color-text-muted);background:var(--color-surface-2);border-radius:var(--radius-sm);padding:2px 8px}
.choice:has(input:checked) .choice__tag{color:var(--color-primary);background:var(--color-surface)}
.choice-grid{display:grid;gap:var(--space-3)}
.choice-grid--2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* Selectcard — cartão selecionável (radio/checkbox) rico: número OU ícone à esquerda,
   título + descrição + selo opcional (ex.: sugestão de IA da Axians) + indicador à direita.
   Forma listas de escolha densas — ex.: enquadramento de regime no D-1001.
   Uso: <label class="selectcard"><span class="selectcard__lead">1</span>
          <span class="selectcard__body"><span class="selectcard__title">…</span>
            <span class="selectcard__desc">…</span>
            <span class="selectcard__seal"><svg…/>Sugerido por IA com base no CNAE</span></span>
        <input class="selectcard__input" type="radio" name="…"></label>
   Input real DENTRO do label → acessível; estado visual via :has(input:checked).
   Variantes: type="radio" (1 escolha) · type="checkbox" (várias). */
.selectcard{display:flex;align-items:flex-start;gap:var(--space-6);padding:var(--space-4);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);
  cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.selectcard:hover:not(:has(.selectcard__input:disabled)){border-color:var(--color-primary)}
.selectcard:has(.selectcard__input:checked){border-color:var(--color-primary);background:var(--color-primary-subtle)}
.selectcard:has(.selectcard__input:focus-visible){box-shadow:var(--ring)}
.selectcard:has(.selectcard__input:disabled){opacity:.55;cursor:not-allowed}
/* Marcador (número tabular OU ícone), alinhado ao título */
.selectcard__lead{flex:0 0 auto;width:24px;min-height:24px;margin-top:1px;display:grid;place-items:center;
  font-size:var(--text-base);font-weight:700;font-variant-numeric:tabular-nums;line-height:var(--leading-snug);color:var(--color-text-muted)}
.selectcard__lead svg{width:20px;height:20px}
.selectcard:has(.selectcard__input:checked) .selectcard__lead{color:var(--color-primary)}
.selectcard__body{min-width:0;flex:1;display:flex;flex-direction:column;gap:var(--space-1)}
.selectcard__title{font-size:var(--text-base);font-weight:600;color:var(--color-heading);line-height:var(--leading-snug)}
.selectcard__desc{font-size:var(--text-xs);color:var(--color-text-muted);line-height:var(--leading-snug)}
.selectcard:has(.selectcard__input:checked) .selectcard__desc{color:var(--color-text-onmuted)}
/* Selo opcional (ex.: sugestão de IA da Axians) */
.selectcard__seal{display:inline-flex;align-items:center;align-self:flex-start;gap:var(--space-1-5);margin-top:var(--space-1);
  padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;
  color:var(--color-primary);background:var(--color-primary-subtle);border:1px solid color-mix(in srgb, var(--color-primary) 22%, transparent)}
.selectcard__seal svg{flex:0 0 auto;width:14px;height:14px}
/* Indicador real (radio/checkbox) à direita — o anel de foco vai no cartão (:has) */
.selectcard__input{flex:0 0 auto;order:3;margin:0;width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer}
.selectcard__input[type=checkbox]{appearance:none;-webkit-appearance:none;border:1px solid var(--color-field-border);border-radius:var(--radius-base);background:var(--color-surface);display:inline-grid;place-content:center;transition:background .12s,border-color .12s}
.selectcard__input[type=checkbox]::before{content:"";width:12px;height:12px;background:var(--color-primary-contrast);transform:scale(0);transition:transform .12s;-webkit-mask:var(--ds-check) center/contain no-repeat;mask:var(--ds-check) center/contain no-repeat}
.selectcard__input[type=checkbox]:checked{background:var(--color-primary);border-color:var(--color-primary)}
.selectcard__input[type=checkbox]:checked::before{transform:scale(1)}
.selectcard__input:focus-visible{box-shadow:none}
.selectcard__input:disabled{cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.selectcard__input[type=checkbox]::before{transition:none}}
/* Lista de cartões empilhados */
.selectcard-list{display:flex;flex-direction:column;gap:var(--space-4)}

/* Card */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-sm)}
/* Corpo com respiro para cards de conteúdo/formulário (o .card puro é sem padding de propósito) */
.card__body{padding:var(--space-6)}
.card__body + .card__body{border-top:1px solid var(--color-border)}
.card__body{padding:var(--space-6)}

/* Status (cor + dot + rótulo) */
.status{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);white-space:nowrap;
  font-size:var(--text-sm);font-weight:600;background:var(--color-surface-2);color:var(--color-text-onmuted);border:1px solid color-mix(in srgb, currentColor 25%, transparent)}
.status__dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.status--success{background:var(--color-success-bg);color:var(--color-success-fg)}
.status--warning{background:var(--color-warning-bg);color:var(--color-warning-fg)}
.status--danger{background:var(--color-danger-bg);color:var(--color-danger-fg)}
.status--info{background:var(--color-info-bg);color:var(--color-info-fg)}
.status--neutral{background:var(--color-surface-2);color:var(--color-text-onmuted)}
/* foco visível também no Modo de Alto Contraste do Windows (box-shadow não renderiza em forced-colors) */
@media (forced-colors: active){ :focus-visible{ outline:2px solid CanvasText; outline-offset:2px } }
.status--azul{background:var(--color-azul-bg);color:var(--color-azul-fg)} /* ok com ressalva (advertências) */
.status--draft{background:var(--color-draft-bg);color:var(--color-draft-fg)} /* rascunho */
/* Tamanhos do badge: pequeno / médio (padrão) / grande */
.status--sm{padding:1px var(--space-2);font-size:var(--text-xs);gap:var(--space-1)}
.status--sm .status__dot{width:6px;height:6px}
.status--micro{padding:2px var(--space-2);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;gap:var(--space-1)}   /* etiqueta compacta (badge de confiança, motivo, etc.) */
/* micro em 9px caixa-alta: escurece o fg 1 passo p/ folga de contraste AA (o -fg/700 ficava no limite 4.5:1) */
.status--micro.status--success{color:var(--green-800)}
.status--micro.status--warning{color:var(--amber-800)}
.status--micro.status--info{color:var(--sky-800)}
/* forced-colors (Windows alto contraste): pílulas dependem de background → contorno pra não sumir */
@media (forced-colors: active){ .status{border:1px solid currentColor} }
.status--micro .status__dot{width:5px;height:5px}
.status--lg{padding:var(--space-1-5) var(--space-3);font-size:var(--text-base)}
.status--lg .status__dot{width:8px;height:8px}
/* optag: etiqueta da operação da versão (Nova versão / Alteração da vigente / Exclusão da vigente); acompanha o status, mesma bolinha */
.optag{display:inline-flex;align-items:center;gap:var(--space-1-5);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3)}
.optag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-text-onmuted);flex:0 0 auto}
.optag--alteracao{color:var(--color-warning-fg);border-color:color-mix(in srgb, var(--color-warning) 45%, transparent)}
.optag--alteracao::before{background:var(--color-warning)}
.optag--exclusao{color:var(--color-danger-fg);border-color:color-mix(in srgb, var(--color-danger) 45%, transparent)}
.optag--exclusao::before{background:var(--color-danger)}

/* Tabela — fundo branco, header sóbrio, zebra bem sutil */
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm);background:var(--color-surface)}
/* larguras de coluna definidas por <colgroup> valem literalmente e não dependem do conteúdo (mesma tabela = mesma largura em qualquer cenário) */
.table--fixed{table-layout:fixed}
.table th{text-align:left;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-primary-darker);
  padding:var(--space-3) var(--space-4);border-bottom:1.5px solid var(--color-border-strong);background:var(--color-surface)}
.table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);color:var(--color-text)}
.table tbody tr{transition:background-color .12s ease}
.table tbody tr:nth-child(even){background:color-mix(in srgb, var(--color-surface-2) 55%, var(--color-surface))}
.table tbody tr:hover{background:color-mix(in srgb, var(--color-primary) 6%, var(--color-surface))}
/* Linha selecionada: fundo na marca (destaca quando o checkbox está marcado) */
.table tbody tr:has(.col--check input:checked){background:var(--color-primary-subtle)}
.table tbody tr:has(.col--check input:checked):hover{background:color-mix(in srgb, var(--color-primary) 14%, var(--color-surface))}
.table .col--num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Coluna de ações fixa à direita — a tabela larga rola no wrapper (overflow-x:auto),
   mas a última coluna (ações) nunca sai de vista. A linha ganha fundo opaco e a célula
   fixa HERDA o fundo da linha (zebra, hover, seleção ou tinta própria da tela: sempre igual).
   Células de linha expandida (colspan) ficam de fora. */
.table--stickyactions tbody tr{background:var(--color-surface)}
.table--stickyactions th:last-child:not([colspan]),
.table--stickyactions td:last-child:not([colspan]){position:sticky;right:0;z-index:1}
.table--stickyactions td:last-child:not([colspan]){background:inherit;box-shadow:inset 1px 0 0 var(--color-border)}
.table--stickyactions th:last-child:not([colspan]){background:var(--color-surface);box-shadow:inset 1px 0 0 var(--color-border)}
/* Wrapper de tabela: em tela menor a tabela NÃO encolhe nem corta o conteúdo (status, botão);
   ela rola na horizontal dentro do wrapper. Combine com .table--stickyactions p/ a ação ficar à vista. */
.table-wrap{overflow-x:auto;scrollbar-width:thin}
/* Rolagem discreta (padrão): aplique .scroll-thin em qualquer contêiner com overflow (barra fina, trilho transparente) */
.scroll-thin{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--color-border-strong) 55%,transparent) transparent}
.scroll-thin::-webkit-scrollbar{width:8px;height:8px}
.scroll-thin::-webkit-scrollbar-track{background:transparent}
.scroll-thin::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--color-border-strong) 55%,transparent);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.scroll-thin::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong);background-clip:padding-box}
/* Linha de tabela clicável (padrão): a linha inteira abre o detalhe/drawer; combine com um chevron à direita */
.table tbody tr[data-href],.table tbody tr[data-open]{cursor:pointer}
.table tbody tr[data-href]:hover,.table tbody tr[data-open]:hover{background:color-mix(in srgb,var(--color-primary) 14%,var(--color-surface))}
.table tbody tr[data-open]:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary)}

/* Barra de ações em massa: aparece ao selecionar linhas; gruda no topo ao rolar */
.bulkbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);margin-bottom:var(--space-3);
  background:var(--color-primary-subtle);border:1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius:var(--radius-base);position:sticky;top:var(--space-3);z-index:5}
.bulkbar[hidden]{display:none}
.bulkbar__count{font-weight:700;font-size:var(--text-sm);color:var(--color-primary)}
.bulkbar__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-left:auto}
/* Cabeçalho ordenável: MESMA cor navy de todo header (consistência total).
   A ordenabilidade é sinalizada só pelo ícone: leve quando inativo,
   cheio na coluna ativa (is-sorted). Sem troca de cor de texto. */
.table th.sortable{cursor:pointer;user-select:none}
.table th.sortable:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
.th-sort{display:inline-flex;vertical-align:middle;margin-left:var(--space-1);opacity:.5;transition:opacity .12s ease}
@media (prefers-reduced-motion:reduce){.th-sort{transition:none}}
.table th.sortable:hover .th-sort{opacity:.8}
.table th.sortable.is-sorted .th-sort{opacity:1}
/* botão de ordenar dentro do <th> (rótulo clicável + seta), acessível por teclado */
.th-btn{background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-1-5);white-space:nowrap}
.th-btn:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
/* Coluna de seleção (checkbox) e de ações (direita) */
.table .col--check{width:1%;white-space:nowrap}
.table .col--check input{width:18px;height:18px;accent-color:var(--color-primary);cursor:pointer;vertical-align:middle}
.table .col--actions{text-align:right;white-space:nowrap;width:1%}
.table .col--actions .tooltip + .tooltip{margin-left:var(--space-1)}
/* Célula com mídia: ícone/avatar + texto */
.cell-media{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0}
.cell-media__ic{flex:0 0 auto;display:grid;place-items:center;color:var(--color-text-muted)}
/* Célula de progresso: barra + valor */
.cell-progress{display:flex;align-items:center;gap:var(--space-2);min-width:130px}
.cell-progress .progress{flex:1}
.cell-progress__v{font-size:var(--text-xs);color:var(--color-text-onmuted);font-variant-numeric:tabular-nums;min-width:34px;text-align:right;font-weight:600}

/* Estado vazio */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-8) var(--space-6);color:var(--color-text-muted)}
.empty__icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--color-border);color:var(--color-text-onmuted)}
.empty__title{font-size:var(--text-base);font-weight:600;color:var(--color-heading)}
.empty__text{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:1.5;max-width:46ch}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,var(--color-surface-2) 25%,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-border)) 37%,var(--color-surface-2) 63%);
  background-size:400% 100%;animation:ds-shimmer 1.3s ease infinite;border-radius:var(--radius-sm)}
@keyframes ds-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}

/* Toast */
.toast{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-base);
  background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-md);border-left:4px solid var(--color-primary);animation:ds-toast-in .24s cubic-bezier(.2,.7,.2,1) both}
@keyframes ds-toast-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.toast--success{border-left-color:var(--color-success)}
.toast--danger{border-left-color:var(--color-danger)}
.toast__icon{flex:0 0 auto;color:var(--color-text-muted);display:grid;place-items:center}
.toast--success .toast__icon{color:var(--color-success)}
.toast--danger .toast__icon{color:var(--color-danger)}
.toast__title{font-size:var(--text-sm);font-weight:600;color:var(--color-heading);margin:0}
.toast__text{font-size:var(--text-xs);color:var(--color-text-muted);margin:0}
/* Pilha de toasts: fixa, centralizada embaixo; os toasts empilham de cima pra baixo */
.toast-wrap{position:fixed;bottom:var(--space-6);left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:var(--space-2);align-items:center;pointer-events:none}
.toast-wrap .toast{pointer-events:auto}

/* Avatar (com fallback de iniciais) */
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;overflow:hidden;line-height:1;
  background:color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));color:var(--color-primary);font-weight:700;font-size:var(--text-sm);flex:0 0 auto}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--sm{width:var(--space-6);height:var(--space-6);font-size:var(--text-xs)}
.avatar--sys{background:var(--color-surface-2);color:var(--color-text-muted);border:1px solid var(--color-border)}
.avatar--sys svg{width:14px;height:14px}
/* Avatar como botão (ex.: menu do usuário) */
button.avatar{border:0;padding:0;cursor:pointer;font-family:inherit;transition:box-shadow .12s}
button.avatar:hover,button.avatar[aria-expanded="true"]{box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-text-muted)}
button.avatar:focus-visible{outline:none;box-shadow:var(--ring)}

/* Navegação lateral (expansível / colapsável) */
.sidenav{width:260px;flex:0 0 auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-2);display:flex;flex-direction:column;gap:2px;transition:width .22s ease}
/* Respeita quem pede menos movimento: sidenav (largura/drawer), knob do switch e slide do toast */
@media (prefers-reduced-motion:reduce){.sidenav,.switch__track::after,.toast{transition:none}.toast{animation:none}}
.sidenav.is-collapsed{width:72px}
.sidenav__item{display:flex;align-items:center;line-height:1;gap:var(--space-3);height:var(--control-h);padding:0 var(--space-4);position:relative;
  border-radius:var(--radius-base);color:var(--color-text);text-decoration:none;font-size:var(--text-sm);font-weight:500;
  white-space:nowrap;overflow:hidden;border:0;background:transparent;cursor:pointer;width:100%;text-align:left}
.sidenav__item:hover{background:var(--color-primary-subtle)}
/* Colapsado: rail estreito → hover um pouco mais forte pra ficar visível */
.sidenav.is-collapsed .sidenav__item:hover{background:color-mix(in srgb, var(--color-primary) 14%, var(--color-surface))}
.sidenav__item.is-active{background:var(--color-primary-subtle);color:var(--color-primary);font-weight:600}
.sidenav__item.is-active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:58%;border-radius:0 var(--radius-pill) var(--radius-pill) 0;background:var(--color-primary)}
.sidenav__item:focus-visible{outline:none;box-shadow:var(--ring)}
.sidenav__item svg{flex:0 0 auto;color:var(--color-primary)}
.sidenav__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1}
.sidenav__badge{margin-left:auto}
.sidenav__toggle{color:var(--color-text)}
.sidenav__foot{flex:0 0 auto;padding:var(--space-3);border-top:1px solid var(--color-divider)}
.sidenav__toggle svg{color:var(--color-text-muted)}
.sidenav__label{transition:opacity .14s ease}
.sidenav.is-collapsed .sidenav__badge{display:none}
.sidenav.is-collapsed .sidenav__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sidenav.is-collapsed .sidenav__item{gap:0}
.sidenav.is-collapsed .sidenav__toggle{gap:0}
.sidenav.is-collapsed > div:first-child{padding-left:0 !important;padding-right:0 !important;justify-content:center;gap:0}
.sidenav.is-collapsed > div{overflow:visible !important}
.sidenav.is-collapsed .sidenav__item{overflow:visible}
/* Colapsado: tooltip lateral (rótulo à direita) do DS em CADA item (e no toggle), no hover/foco.
   Ao colapsar, o container da lista vira overflow:visible, então o ::after não corta.
   Texto vem de data-tip (não title, p/ não disparar o tooltip nativo do navegador); cor fixa
   slate-900/branco p/ não herdar os tokens claros da navy (senão o balão some). */
.sidenav.is-collapsed .sidenav__item:hover::after,.sidenav.is-collapsed .sidenav__item:focus-visible::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--slate-900);color:#fff;font-size:var(--text-xs);font-weight:500;padding:var(--space-1-5) var(--space-2);border-radius:var(--radius-sm);white-space:nowrap;z-index:60;box-shadow:var(--shadow-md);pointer-events:none}
.sidenav.is-collapsed .sidenav__toggle svg{transform:rotate(180deg)}
/* Título de seção do menu */
.sidenav__group{font-size:var(--text-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);padding:var(--space-6) var(--space-3) var(--space-2);margin:0;white-space:nowrap;overflow:hidden}
.sidenav__group:first-child{padding-top:var(--space-2)}
.sidenav.is-collapsed .sidenav__group{height:var(--space-4);padding:0;margin:0;color:transparent;overflow:hidden;pointer-events:none}
/* DARK: o app-shell usa a superfície dark NEUTRA (não o navy da versão light). Canvas do conteúdo
   escuro (não o slate-100 primitivo). :root[data-theme="dark"] vence por especificidade. */
:root[data-theme="dark"] .content{background:var(--color-bg)}
:root[data-theme="dark"] .sidenav--navy{
  --color-text:var(--slate-100); --color-text-muted:var(--slate-400); --color-heading:#fff;
  --color-primary:var(--color-primary-darker); --color-primary-subtle:color-mix(in srgb, var(--color-on-navy) 9%, transparent);
  --color-border:var(--slate-700); --color-divider:var(--slate-800);
  color:var(--slate-100); background:var(--color-surface); border:1px solid var(--color-border);
}
/* DARK: elementos que ficam SOBRE um card (mesma cor no dark) sobem para a superfície elevada, senão somem */
:root[data-theme="dark"] .btn--secondary{background:var(--color-surface-2)}
:root[data-theme="dark"] .stat{background:var(--color-surface-2)}
:root[data-theme="dark"] .input,:root[data-theme="dark"] .select,:root[data-theme="dark"] textarea.input{background:var(--color-surface-2)}

/* Variante ESCURA institucional: navy gov.br (#071d41) com gradiente + pontinhos sutis.
   Redefine tokens no escopo → todas as regras .sidenav__* já renderizam sobre o navy. */
.sidenav--navy{
  --color-text:#e6eefb; --color-text-muted:#aec4e6; --color-heading:#f2f6fd;
  --color-primary:#9dc0f0; --color-primary-subtle:rgba(255,255,255,.10);
  --color-border:rgba(255,255,255,.12); --color-divider:rgba(255,255,255,.14);
  color:#dbe4f5; border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 8% 6%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 23% 13%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 39% 5%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 14% 26%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 47% 18%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 9%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 33%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 24%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 37%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 15%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 12% 47%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 43% 51%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 67% 43%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 34%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 26% 60%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 51% 66%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 57%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 75%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 61% 83%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 70%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 86%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 91%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 79%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 88%, rgba(255,255,255,.04) 0 1px, transparent 2px),
    linear-gradient(160deg, var(--blue-900) 0%, #061a34 52%, #041129 100%);
}
/* navy: hover e ativo calibrados p/ o fundo escuro (branco translúcido; ativo bem > hover).
   Sem isto o hover herda --color-primary-subtle (.10, colado no ativo) e, colapsado,
   o color-mix com --color-surface (branco) vira um chip quase branco fora do tema. */
.sidenav--navy .sidenav__item:hover{background:rgba(255,255,255,.08)}
.sidenav--navy .sidenav__item.is-active{background:rgba(255,255,255,.08)}
.sidenav--navy.is-collapsed .sidenav__item:hover{background:rgba(255,255,255,.13)}
.sidenav--navy .orgswitch:hover,.sidenav--navy.is-collapsed .orgswitch:hover{background:rgba(255,255,255,.10)}
.sidenav--navy .badge--muted{background:rgba(255,255,255,.16);color:#eaf1fb}
/* O popover (menu do seletor de contribuinte) nasce DENTRO da navy, mas é uma superfície
   CLARA do tema. A navy redefine --color-text etc. p/ quase-branco; sem resetar, o texto
   do dropdown herda branco e some no fundo branco. Reseta p/ os tokens do tema (por primitivas). */
.sidenav--navy .menu__panel{
  --color-text:var(--slate-800); --color-text-muted:var(--slate-500); --color-heading:var(--slate-900);
  --color-border:var(--slate-200); --color-divider:var(--slate-200);
  --color-surface-2:var(--slate-50); --color-primary:var(--blue-700);
}
.dark .sidenav--navy .menu__panel, :root[data-theme="dark"] .sidenav--navy .menu__panel{
  --color-text:var(--slate-100); --color-text-muted:var(--slate-400); --color-heading:#fff;
  --color-border:var(--slate-700); --color-divider:var(--slate-700);
  --color-surface-2:var(--slate-800); --color-primary:#5b8def;
}

/* Drawer (casca lateral) */
.drawer-backdrop{position:fixed;inset:0;background:var(--color-scrim);backdrop-filter:blur(1px);animation:ds-fade-in .2s ease;z-index:50}
.drawer-backdrop[hidden]{display:none}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(var(--drawer-w,560px),100%);background:var(--color-surface);
  box-shadow:var(--shadow-md);display:flex;flex-direction:column;z-index:51;
  animation:ds-drawer-in .24s cubic-bezier(.4,0,.2,1)}
@keyframes ds-drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes ds-fade-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.drawer,.drawer-backdrop{animation:none}}
.drawer__header{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--space-4) var(--space-8);border-bottom:1px solid var(--color-border)}
/* título de drawer e de modal: MESMO tamanho (20px) e peso (700) — o !important vence o heading genérico h1–h6 */
.drawer__header h2,.drawer__title{font-size:var(--text-2xl) !important;font-weight:700 !important;margin:0;color:var(--color-heading)}
.drawer__body{padding:var(--space-8);overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--color-border-strong) 70%, transparent) transparent}
.drawer__body::-webkit-scrollbar{width:8px}
.drawer__body::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--color-border-strong) 70%, transparent);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.drawer__body::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong);background-clip:padding-box}
.drawer__body::-webkit-scrollbar-track{background:transparent}
.drawer__footer{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-8);border-top:1px solid var(--color-border)}
.drawer__footer > .btn:first-child:not(:last-child){margin-right:auto}
.drawer__footer .btn{height:var(--control-h-lg);font-size:var(--text-base);padding:0 var(--space-6)}
/* tamanhos do drawer: pequeno · médio (padrão) · grande */
.drawer--sm{--drawer-w:440px}
.drawer--md{--drawer-w:560px}
.drawer--lg{--drawer-w:760px}

/* Campo com ícone (busca / afixo) — ícone dentro do controle, sem quebrar o layout */
.field-icon{position:relative;display:flex;align-items:center}
.field-icon .input{padding-left:var(--space-8)}
.field-icon__i{position:absolute;left:var(--space-3);color:var(--color-text-muted);pointer-events:none;display:grid;place-items:center}
/* Ícone à direita (ex.: calendário, relógio) */
.field-icon--right .input{padding-left:var(--space-3);padding-right:var(--space-8)}
.field-icon--right .field-icon__i{left:auto;right:var(--space-3)}

/* Campo com botão de LIMPAR (X) — aparece só quando há texto (via :placeholder-shown) */
.field-clear{position:relative}
.field-clear .input{padding-right:var(--space-10)}
.field-clear__x{position:absolute;right:var(--space-2);top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:var(--space-6);height:var(--space-6);padding:0;
  border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-text-muted);cursor:pointer}
.field-clear__x:hover{background:var(--color-border);color:var(--color-heading)}
.field-clear__x:focus-visible{outline:none;box-shadow:var(--ring)}

/* Campo de senha — input com botão mostrar/ocultar embutido à direita.
   Combina com .field-icon (ícone à esquerda) no mesmo wrapper quando quiser os dois.
   Estrutura: <div class="field-password"><input class="input" type="password">
     <button class="field-password__toggle" type="button" aria-label="Mostrar senha">
       <svg class="ic-eye">…</svg><svg class="ic-eyeoff">…</svg></button></div>
   JS: alterna input.type, a classe .is-showing no botão (troca o ícone) e o aria-label. */
.field-password{position:relative;display:flex;align-items:center}
.field-password .input{padding-right:var(--space-10)}
.field-password__toggle{position:absolute;right:var(--space-2);top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:var(--control-h-sm);height:var(--control-h-sm);padding:0;
  border:0;border-radius:var(--radius-base);background:transparent;color:var(--color-text-muted);
  cursor:pointer;transition:color .12s,background .12s}
.field-password__toggle:hover{color:var(--color-text);background:var(--color-border)}
.field-password__toggle:focus-visible{outline:none;box-shadow:var(--ring)}
.field-password__toggle svg{width:18px;height:18px}
.field-password__toggle .ic-eyeoff{display:none}
.field-password__toggle.is-showing .ic-eye{display:none}
.field-password__toggle.is-showing .ic-eyeoff{display:block}
.field-clear .input:placeholder-shown ~ .field-clear__x{display:none}

/* Afixo de texto: prefixo (R$) / sufixo (% ou unidade) dentro do controle */
.field-affix{position:relative;display:flex;align-items:center}
.field-affix__pre,.field-affix__suf{position:absolute;color:var(--color-text-muted);font-size:var(--text-sm);pointer-events:none;font-variant-numeric:tabular-nums}
.field-affix__pre{left:var(--space-3)}
.field-affix__suf{right:var(--space-3)}
.field-affix--pre .input{padding-left:var(--space-10)}
.field-affix--suf .input{padding-right:var(--space-10)}

/* Input numérico: valores alinhados à direita, tabular */
.input--num{text-align:right;font-variant-numeric:tabular-nums}

/* Combo (input + dropdown de itens) — autocomplete/picker com itens ricos */
.combo{position:relative}
.combo__control{position:relative;display:flex;align-items:center}
.combo__control .input{padding-right:var(--space-8)}
.combo__icon{position:absolute;right:var(--space-3);color:var(--color-text-muted);pointer-events:none;display:grid;place-items:center;transition:transform .18s}
.combo[aria-expanded="true"] .combo__icon,.combo__control[aria-expanded="true"] .combo__icon{transform:rotate(180deg)}
.combo__panel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  padding:6px;max-height:288px;overflow:auto}
.combo__opt{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;padding:var(--space-2) var(--space-2);
  border-radius:var(--radius-base);border:0;background:transparent;cursor:pointer;color:var(--color-text);font:inherit}
.combo__opt:hover,.combo__opt.is-active{background:var(--color-surface-2)}
.combo__opt.is-selected{background:var(--color-primary-subtle)}
.combo__opt:focus-visible{outline:none;box-shadow:var(--ring)}
.combo__media{flex:0 0 auto;display:grid;place-items:center}
.combo__main{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.combo__label{font-size:var(--text-sm);font-weight:400;color:var(--color-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo__opt.is-selected .combo__label{color:var(--color-primary);font-weight:600}
.combo__sub{font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo__check{margin-left:auto;flex:0 0 auto;color:var(--color-primary);opacity:0;display:grid;place-items:center}
.combo__opt.is-selected .combo__check{opacity:1}
.combo__tag{flex:0 0 auto;font-size:var(--text-xs);font-weight:700;font-variant-numeric:tabular-nums;
  padding:var(--space-1) var(--space-1-5);border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text-onmuted)}
.combo__group{font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);padding:var(--space-2) var(--space-2) var(--space-1)}
.combo__empty{padding:var(--space-4) var(--space-2);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}
/* Select custom: gatilho estilizado + dropdown com opções formatadas (o <select> nativo não estiliza <option>) */
.cselect{position:relative}
.cselect__trigger{width:100%;height:var(--control-h);display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-3);background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-field-border);border-radius:var(--radius-base);font-family:var(--font-sans);font-size:var(--text-base);cursor:pointer;text-align:left;transition:border-color .12s,box-shadow .12s}
.cselect__trigger:hover:not(:disabled){border-color:var(--color-text-muted)}
.cselect__trigger:focus-visible,.cselect__trigger[aria-expanded="true"]{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent)}
.cselect__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-heading)}
.cselect__value.is-placeholder{color:var(--color-text-muted)}
.cselect__chev{flex:0 0 auto;display:grid;place-items:center;line-height:0;color:var(--color-text-muted);transition:transform .18s}
.cselect__trigger[aria-expanded="true"] .cselect__chev{transform:rotate(180deg)}
.cselect__trigger:disabled{background:var(--color-surface-2);border-color:var(--color-border);cursor:not-allowed}
.cselect__trigger:disabled .cselect__value{color:var(--color-text-muted)}
.cselect__trigger:disabled .cselect__chev{color:var(--color-border-strong)}
.cselect .combo__media{color:var(--color-text-muted)}
.cselect__panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-lg);padding:var(--space-1);max-height:280px;overflow:auto}
.cselect__panel[hidden]{display:none}
.cselect__panel [role=option]{display:block;width:100%;text-align:left;padding:var(--space-2) var(--space-3);border:0;background:none;font-family:inherit;font-size:var(--text-base);color:var(--color-text);cursor:pointer;border-radius:var(--radius-sm)}
.cselect__panel [role=option]:hover{background:var(--color-surface-2)}
.cselect__panel [role=option].is-selected{background:var(--color-primary-subtle);color:var(--color-primary);font-weight:600}
/* item de menu indisponível (ex.: área ainda em construção) */
.sidenav__item.is-disabled{opacity:.5;pointer-events:none;cursor:default}

/* Multiselect (busca + chips + opções com checkbox) — ex.: escolher vários codTrib */
.ms{position:relative;max-width:460px}
.ms__control{display:flex;align-items:center;gap:var(--space-1);height:var(--control-h);
  padding:0 var(--space-2) 0 var(--space-3);background:var(--color-surface);border:1px solid var(--color-field-border);
  border-radius:var(--radius-base);cursor:text}
.ms__control:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent)}
.ms__chips{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.ms__chips:not(:empty){margin-top:var(--space-2)}
.ms__input{flex:1;min-width:90px;border:0;outline:none;background:transparent;font:inherit;font-size:var(--text-sm);color:var(--color-text);height:28px}
.ms__input::placeholder{color:var(--color-text-muted)}
.ms__chevron{margin-left:auto;color:var(--color-text-muted);display:grid;place-items:center;transition:transform .18s}
.ms__control[aria-expanded="true"] .ms__chevron{transform:rotate(180deg)}
.ms__panel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  padding:var(--space-1);max-height:280px;overflow:auto}
.ms__opt{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2);border-radius:var(--radius-base);
  border:0;background:transparent;cursor:pointer;text-align:left;font:inherit;font-size:var(--text-sm);color:var(--color-text)}
.ms__opt:hover,.ms__opt.is-active{background:var(--color-surface-2)}
.ms__opt:focus-visible{outline:none;box-shadow:var(--ring)}
.ms__opt input{width:18px;height:18px;accent-color:var(--color-primary);pointer-events:none;flex:0 0 auto}
.ms__empty{padding:var(--space-4);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}

/* Alert / callout na página (info/success/warning/danger) */
.alert{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4) var(--space-4);border-radius:var(--radius-base);
  border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text)}
.alert__icon{flex:0 0 auto;margin-top:1px;color:var(--color-text-muted);display:grid;place-items:center}
.alert__icon svg{width:20px;height:20px}
.alert__body{min-width:0}
.alert__title{font-weight:600;color:var(--color-heading);margin:0 0 var(--space-1);font-size:var(--text-base)}
.alert__text{font-size:var(--text-sm);color:var(--color-text-onmuted);margin:0}
.alert--info{background:var(--color-info-bg);border-color:color-mix(in srgb, var(--color-info) 30%, transparent)}
.alert--info .alert__icon{color:var(--color-info)}
.alert--success{background:var(--color-success-bg);border-color:color-mix(in srgb, var(--color-success) 30%, transparent)}
.alert--success .alert__icon{color:var(--color-success)}
.alert--warning{background:var(--color-warning-bg);border-color:color-mix(in srgb, var(--color-warning) 30%, transparent)}
.alert--warning .alert__icon{color:var(--color-warning)}
.alert--danger{background:var(--color-danger-bg);border-color:color-mix(in srgb, var(--color-danger) 30%, transparent)}
.alert--danger .alert__icon{color:var(--color-danger)}
/* Banner na página: fundo branco + borda lateral colorida (aviso destacado) */
.dalert{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--color-warning);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-4) var(--space-6);margin-bottom:var(--space-6)}
.dalert--danger{border-left-color:var(--color-danger)}
.dalert--info{border-left-color:var(--color-info)}
.dalert--success{border-left-color:var(--color-success-fg)}
.dalert__ic{flex:0 0 auto;margin-top:1px;color:var(--color-warning)}
.dalert__ic svg{width:20px;height:20px}
.dalert--danger .dalert__ic{color:var(--color-danger)}
.dalert--info .dalert__ic{color:var(--color-info)}
.dalert--success .dalert__ic{color:var(--color-success-fg)}
.dalert__title{font-weight:700;color:var(--color-heading);margin:0;font-size:var(--text-base)}
.dalert__text{font-size:var(--text-sm);color:var(--color-text);margin:var(--space-1) 0 0;line-height:1.55}
.dalert__body{flex:1;min-width:0}
.dalert__act{flex:0 0 auto;align-self:center;white-space:nowrap}
/* Barra de filtro ativo (padrão reutilizável): fica logo acima de uma tabela/lista, com um ícone de funil,
   o rótulo "Filtrando por" e um chip removível (× limpa o recorte). Use sempre que um KPI/atalho recortar a lista abaixo. */
.filterbar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted)}
.filterbar[hidden]{display:none}
.filterbar__ic{display:inline-flex;align-items:center;color:var(--color-text-muted)}
.filterbar__ic svg{width:15px;height:15px}
.filterbar__lbl{color:var(--color-text-muted)}
.filterbar__chip{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-3);background:var(--color-primary-subtle);color:var(--color-primary-darker);border:1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);border-radius:999px;font-weight:600;line-height:1.25}
.filterbar__x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;opacity:.72;transition:opacity .12s ease,background-color .12s ease}
.filterbar__x svg{width:13px;height:13px}
.filterbar__x:hover{opacity:1;background:color-mix(in srgb, var(--color-primary) 16%, transparent)}
.filterbar__x:focus-visible{outline:none;box-shadow:var(--ring);opacity:1}
/* Statusbar: hero de estado da submissão (ícone-chip + título + descrição + comentário citado + ações).
   Reutilizado no detalhe do D-1001 (canônico) e do D-1011. Variantes info/warning/success/danger. */
.statusbar{display:flex;gap:var(--space-4);align-items:flex-start;background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--color-border-strong);border-radius:var(--radius-2xl);box-shadow:var(--shadow-sm);padding:var(--space-6);margin-bottom:var(--space-6)}
.statusbar--info{border-left-color:var(--color-info-fg)}
.statusbar--warning{border-left-color:var(--color-warning)}
.statusbar--success{border-left-color:var(--color-success-fg)}
.statusbar--danger{border-left-color:var(--color-danger)}
.statusbar__ic{width:40px;height:40px;border-radius:var(--radius-lg);display:grid;place-items:center;flex:0 0 auto;background:var(--color-surface-2);color:var(--color-text-onmuted)}
.statusbar--info .statusbar__ic{background:var(--color-info-bg);color:var(--color-info-fg)}
.statusbar--warning .statusbar__ic{background:var(--color-warning-bg);color:var(--color-warning-fg)}
.statusbar--success .statusbar__ic{background:var(--color-success-bg);color:var(--color-success-fg)}
.statusbar--danger .statusbar__ic{background:var(--color-danger-bg);color:var(--color-danger-fg)}
.statusbar__ic svg{width:20px;height:20px}
.statusbar__b{flex:1;min-width:0}
.statusbar__title{font-size:var(--text-lg)!important;font-weight:700!important;color:var(--color-heading);margin:0;line-height:1.25}
.statusbar__desc{font-size:var(--text-base);color:var(--color-text-onmuted);margin:var(--space-2) 0 0;line-height:1.5}
.statusbar__comment{display:flex;gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-4);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-base);color:var(--color-text);line-height:1.5}
.statusbar__comment svg{width:18px;height:18px;flex:0 0 auto;color:var(--color-text-muted);margin-top:1px}
.statusbar__actions{display:flex;gap:var(--space-2);flex:0 0 auto;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.statusbar__actions .btn{white-space:nowrap}
@media(max-width:820px){.statusbar{flex-wrap:wrap}.statusbar__actions{width:100%}}
/* comentário citado dentro do banner (ex.: pedido de ajuste do aprovador, motivo da rejeição) */
.dalert__comment{display:flex;gap:var(--space-3);margin-top:var(--space-3);padding:var(--space-4);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--color-text);line-height:1.55}
.dalert__comment svg{width:18px;height:18px;flex:0 0 auto;color:var(--color-text-muted);margin-top:1px}
/* entrada sutil do banner de estado (o .dalert é recriado a cada troca de cenário; anima o nó novo). Evita "pulo" ao mudar de mensagem. */
@keyframes ds-dalert-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dalert{animation:ds-dalert-in .2s cubic-bezier(.2,.7,.2,1) both}
/* utilitário de troca de conteúdo (fade curto ao substituir innerHTML de uma região) */
@keyframes ds-swap-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.ds-swap-in{animation:ds-swap-in .16s ease both}
/* saída do toast (entrada já é ds-toast-in); simétrico, sem sumir no corte */
@keyframes ds-toast-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px)}}
.toast.is-leaving{animation:ds-toast-out .18s ease forwards}
@media (prefers-reduced-motion:reduce){.dalert,.ds-swap-in,.toast.is-leaving{animation:none}}

/* Accordion */
.accordion{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface)}
.accordion__item + .accordion__item{border-top:1px solid var(--color-border)}
.accordion__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:var(--space-4) var(--space-4);
  background:transparent;border:0;cursor:pointer;text-align:left;font:600 var(--text-sm)/1.4 var(--font-sans);color:var(--color-heading);transition:background-color .12s ease}
.accordion__head:hover{background:var(--color-surface-2)}
.accordion__head:focus-visible{outline:none;box-shadow:var(--ring)}
.accordion__chev{flex:0 0 auto;display:grid;place-items:center;line-height:0;transform-origin:center;color:var(--color-text-muted);transition:transform .18s}
.accordion__item.is-open .accordion__chev{transform:rotate(180deg)}
.accordion__panel{padding:var(--space-2) var(--space-4) var(--space-4);color:var(--color-text-onmuted);font-size:var(--text-sm);line-height:var(--leading-normal)}
.accordion__item:not(.is-open) .accordion__panel{display:none}
/* Cabeçalho do acordeão com ícone opcional (à esquerda do título) */
.accordion__label{display:flex;align-items:center;gap:var(--space-3);min-width:0;font-size:var(--text-xl)}
.accordion__icon{width:30px;height:30px;border-radius:var(--radius-lg);background:var(--color-primary-subtle);color:var(--color-primary);display:grid;place-items:center;flex:0 0 auto}
.accordion__icon svg{width:17px;height:17px}
@media (prefers-reduced-motion:reduce){.accordion__chev{transition:none}}

/* Modal (dialog centralizado) + confirmação */
.modal-backdrop{position:fixed;inset:0;background:var(--color-scrim);backdrop-filter:blur(2px);
  display:grid;place-items:center;padding:var(--space-4);z-index:50}
.modal-backdrop[hidden]{display:none}
.modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);width:min(500px,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;position:relative}
/* modais com muito conteúdo (ex.: comprovante .receipt) não podem ficar altos demais: capa a altura e o corpo rola */
.modal:has(.receipt){max-height:min(88vh,34rem)}
/* X de fechar: canto sup. direito (para modais sem header, ex.: confirmação/excluir) */
.modal .modal__close{position:absolute;top:var(--space-3);right:var(--space-3);z-index:1}
/* Barra superior do modal: só o "X" (fechar), à direita — layout em blocos (estilo OutSystems) */
.modal__topbar{display:flex;justify-content:flex-end;padding:var(--space-3) var(--space-3) 0}
.modal__topbar + .confirm{padding-top:var(--space-2)}
.modal--md{width:min(560px,100%)}
.modal--lg{width:min(720px,100%)}
/* Entrada/saída do card do modal. O backdrop (scrim) é instantâneo de propósito: assim,
   ao encadear dois modais (ex.: aprovar -> comprovante), o fundo escuro permanece contínuo e só os cards trocam. */
.modal{animation:ds-modal-in .26s cubic-bezier(.2,.7,.2,1)}
.modal.is-leaving{animation:ds-modal-out .2s ease forwards;pointer-events:none}
@keyframes ds-modal-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ds-modal-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(4px) scale(.98)}}
@media(prefers-reduced-motion:reduce){.modal,.modal.is-leaving{animation:none}}
.modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:var(--space-8) var(--space-8) var(--space-4)}

.modal__title{font-size:var(--text-2xl) !important;font-weight:700 !important;color:var(--color-heading);margin:0}
.modal__body{padding:0 var(--space-8);overflow:auto;min-height:0;color:var(--color-text-onmuted);font-size:var(--text-sm);scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--color-text-muted) 30%,transparent) transparent;overscroll-behavior:contain}
/* texto-descrição do modal (parágrafo direto do corpo) em 16px p/ conforto de leitura; não pega <p> aninhados (bloco de assinatura, .dalert__text) */
.modal__body > p{font-size:var(--text-base);line-height:1.55}
.modal__body::-webkit-scrollbar{width:10px}
.modal__body::-webkit-scrollbar-track{background:transparent}
.modal__body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--color-text-muted) 28%,transparent);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
.modal__body::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--color-text-muted) 44%,transparent);background-clip:padding-box}
.modal__footer{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-6) var(--space-8) var(--space-8)}
/* Cancelar/dismiss (1º botão) vai pro lado oposto; as ações ficam agrupadas à direita */
.modal__footer > .btn:first-child:not(:last-child){margin-right:auto}
.modal__footer .btn{height:var(--control-h-lg);font-size:var(--text-base);padding:0 var(--space-6)}
/* .cinfo — bloco de informação (responsável/assinatura) dentro do corpo do modal. Usado no envio/transmissão (D-1001 e D-1011). */
.cinfo{display:flex;flex-direction:column;gap:var(--space-4);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4)}
.cinfo__row{display:flex;flex-direction:column;gap:2px}
.cinfo__k{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:600}
.cinfo__v{font-size:var(--text-base);color:var(--color-heading);line-height:1.5}
.cinfo__v .avatar{display:inline-grid;vertical-align:middle;margin-right:var(--space-1-5)}
/* .vmode — escolha da consequência ao mudar a data de início (nova vigência × corrigir data). Compartilhado D-1001/D-1011. */
.vmode{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2)}
.vmode__opt{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-base);cursor:pointer}
.vmode__opt:hover{border-color:var(--color-warning)}
.vmode__opt:has(input:checked){border-color:var(--color-warning);background:color-mix(in srgb,var(--color-warning) 8%,var(--color-surface))}
.vmode__opt:focus-within{outline:none;box-shadow:var(--ring)}
.vmode__opt input{margin-top:3px;flex:0 0 auto}
.vmode__b{display:flex;flex-direction:column;gap:2px;font-size:var(--text-sm)}
.vmode__hint{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.45}
/* .decisionbar — barra sticky de decisão do aprovador no rodapé do detalhe (Iniciar revisão / Aprovar / Solicitar ajustes). Compartilhado D-1001/D-1011. */
.decisionbar{position:sticky;bottom:0;z-index:30;background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:var(--shadow-up)}
.decisionbar[hidden]{display:none}
.decisionbar__inner{max-width:1600px;margin:0 auto;padding:var(--space-4) var(--space-10);display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);box-sizing:border-box}
.decisionbar__inner .decisionbar__back{margin-right:auto}
body.has-decisionbar .content{scroll-padding-bottom:96px}
@keyframes ds-decisionbar-in{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
.decisionbar:not([hidden]){animation:ds-decisionbar-in .24s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){.decisionbar:not([hidden]){animation:none}}
/* .signrow — bloco "assinado com" (certificado ICP-Brasil) no modal de aprovação. Compartilhado D-1001/D-1011. */
.signrow{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);margin-top:var(--space-6)}
.signrow__ic{flex:0 0 auto;width:36px;height:36px;border-radius:var(--radius-lg);display:grid;place-items:center;background:var(--color-primary-subtle);color:var(--color-primary)}
.signrow__ic svg{width:19px;height:19px}
.signrow__k{margin:0;font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}
.signrow__v{margin:var(--space-1) 0 0;font-size:var(--text-base);font-weight:600;color:var(--color-heading);line-height:1.35}
.signrow__rel{margin:2px 0 0;font-size:var(--text-sm);color:var(--color-text-onmuted)}
.signrow__note{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}
.confirm{display:flex;gap:1rem;padding:var(--space-6);align-items:flex-start}
/* Cabeçalho de modal com ícone à esquerda do título (confirmações). O ícone é danger por padrão; use as variantes. */
.modal__header--icon{align-items:center;gap:var(--space-3)}
.modal__header--icon .modal__title{flex:1;min-width:0}
.modal__ic{flex:0 0 auto;width:36px;height:36px;border-radius:var(--radius-lg);display:grid;place-items:center;background:var(--color-danger-bg);color:var(--color-danger-fg)}
.modal__ic svg{width:19px;height:19px}
.modal__ic--warning{background:var(--color-warning-bg);color:var(--color-warning)}
.modal__ic--primary{background:var(--color-primary-subtle);color:var(--color-primary)}
.modal__ic--success{background:var(--color-success-bg);color:var(--color-success-fg)}
.modal__header--icon + .modal__body{padding-top:var(--space-2)}
.modal__header + .confirm{padding-top:var(--space-2)}
.confirm__icon{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--color-danger-bg);color:var(--color-danger)}
.confirm__icon--warning{background:var(--color-warning-bg);color:var(--color-warning)}
/* Overlay do modal usado pelas telas do app (z ACIMA da barra de demo e do app-shell) */
.scrim{position:fixed;inset:0;background:var(--color-scrim);display:flex;align-items:center;justify-content:center;padding:var(--space-6);z-index:300}
.scrim[hidden]{display:none}
/* "Lead" do modal: ícone-chip + texto (confirmações). Chip danger por padrão; use as variantes. */
.modal__lead{display:flex;gap:var(--space-3);align-items:flex-start;margin:0 0 var(--space-6)}
.modal__lead p{margin:0;line-height:1.5;font-size:var(--text-base)}
.modal__lead-ic{flex:0 0 auto;width:36px;height:36px;border-radius:var(--radius-lg);display:grid;place-items:center;background:var(--color-danger-bg);color:var(--color-danger-fg)}
.modal__lead-ic svg{width:19px;height:19px}
.modal__lead-ic--primary{background:var(--color-primary-subtle);color:var(--color-primary)}
.modal__lead-ic--info{background:var(--color-info-bg);color:var(--color-info-fg)}
.modal__lead-ic--warning{background:var(--color-warning-bg);color:var(--color-warning)}
.confirm__icon--info{background:var(--color-info-bg);color:var(--color-info)}
.confirm__title{font-size:var(--text-base);font-weight:600;color:var(--color-heading);margin:0 0 var(--space-1)}
.confirm__text{font-size:var(--text-sm);color:var(--color-text-onmuted);margin:0}

/* ===== Comprovante / recibo (reutilizável: D-1001, eventos mensais, "Recibos e envios") =====
   Bloco de estado no topo (transmitido/aceito/rejeitado) + linhas rótulo/valor + ocorrências. */
.receipt{display:flex;flex-direction:column;gap:var(--space-6)}
.receipt__state{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-surface-2)}
.receipt__state-ic{flex:0 0 auto;width:40px;height:40px;border-radius:var(--radius-lg);display:grid;place-items:center;background:var(--color-border);color:var(--color-text-muted)}
.receipt__state-ic svg{width:22px;height:22px}
.receipt__state-tt{margin:0;font-size:var(--text-base);font-weight:700;color:var(--color-heading);line-height:1.3}
.receipt__state-tx{margin:var(--space-1) 0 0;font-size:var(--text-sm);color:var(--color-text-onmuted);line-height:1.5}
.receipt__state--info .receipt__state-ic{background:var(--color-info-bg);color:var(--color-info-fg)}
.receipt__state--success .receipt__state-ic{background:var(--color-success-bg);color:var(--color-success-fg)}
.receipt__state--warning .receipt__state-ic{background:var(--color-warning-bg);color:var(--color-warning)}
.receipt__state--danger .receipt__state-ic{background:var(--color-danger-bg);color:var(--color-danger-fg)}
.receipt__rows{display:flex;flex-direction:column}
.receipt__row{display:flex;justify-content:space-between;gap:var(--space-6);align-items:baseline;padding:var(--space-3) 0;border-top:1px solid var(--color-divider)}
.receipt__row:first-child{border-top:0;padding-top:0}
.receipt__k{flex:0 0 auto;font-size:var(--text-sm);color:var(--color-text-muted);font-weight:600}
.receipt__v{min-width:0;text-align:right;font-size:var(--text-base);color:var(--color-heading);font-weight:500;word-break:break-word;line-height:1.4}
.receipt__v--mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.receipt__v--strong{font-weight:700}
.receipt__v--wait{color:var(--color-text-muted);font-weight:500}

/* ===== Date picker (popover de calendário, 100% tokens do DS) ===== */
.dp{position:absolute;z-index:70;top:calc(100% + var(--space-1));left:0;width:17.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-3)}
.dp[hidden]{display:none}
.dp__head{display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-2)}
.dp__title{flex:1 1 auto;text-align:center;font-family:inherit;font-size:var(--text-sm);font-weight:600;color:var(--color-heading);background:none;border:0;border-radius:var(--radius-base);padding:var(--space-1) var(--space-2);cursor:pointer}
.dp__title:hover{background:var(--color-surface-2)}
.dp__nav{flex:0 0 auto;width:var(--space-8);height:var(--space-8);display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:var(--radius-base);background:none;color:var(--color-text-onmuted);cursor:pointer}
.dp__nav:hover{background:var(--color-surface-2);color:var(--color-heading)}
.dp__nav:focus-visible,.dp__title:focus-visible,.dp__day:focus-visible{outline:none;box-shadow:var(--ring)}
.dp__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-1)}
.dp__wd{text-align:center;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;padding:var(--space-1) 0}
.dp__day{aspect-ratio:1/1;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:var(--text-sm);font-weight:500;color:var(--color-text);background:none;border:1px solid transparent;border-radius:var(--radius-base);cursor:pointer}
.dp__day:hover{background:var(--color-primary-subtle);color:var(--color-primary)}
.dp__day--out{color:var(--color-text-muted);opacity:.5}
.dp__day--today{border-color:var(--color-border-strong)}
.dp__day--sel,.dp__day--sel:hover{background:var(--color-primary);color:var(--color-primary-contrast);font-weight:600}

/* Padrão de formulário: seção + grade de campos + barra de ações */
.form-section + .form-section{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--color-border)}
.form-section__title{font-size:var(--text-base);font-weight:600;color:var(--color-heading);margin:0 0 var(--space-1)}
.form-section__desc{font-size:var(--text-sm);color:var(--color-text-muted);margin:0 0 var(--space-4)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4) var(--space-6)}
.form-grid .col-full{grid-column:1 / -1}
.form-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-border)}
.form-actions--split{justify-content:space-between}

/* Wizard / stepper (etapas) */
.stepper{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.step{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto}
.step__dot{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:var(--text-sm);font-weight:700;
  background:var(--color-surface-2);color:var(--color-text-muted);border:1px solid var(--color-border-strong)}
.step__dot svg{width:15px;height:15px} /* etapa concluída mostra check no lugar do número; limita o tamanho do ícone dentro do dot */
.step__label{font-size:var(--text-sm);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step__bar{flex:1 1 auto;height:2px;background:var(--color-border);margin:0 var(--space-3);min-width:24px}
.step.is-active .step__dot{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-subtle)}
.step.is-active .step__label{color:var(--color-heading);font-weight:600}
.step.is-done .step__dot{background:var(--color-primary-subtle);color:var(--color-primary);border-color:color-mix(in srgb, var(--color-primary) 40%, transparent)}
.step.is-done + .step__bar,.step__bar.is-done{background:var(--color-primary)}

/* Timeline */
.timeline{list-style:none;margin:0;padding:0}
.timeline__item{position:relative;padding:0 0 var(--space-6) var(--space-8)}
.timeline__item::before{content:"";position:absolute;left:9px;top:6px;bottom:-2px;width:2px;background:var(--color-border)}
.timeline__item:last-child::before{display:none}
.timeline__dot{position:absolute;left:2px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--color-surface);border:3px solid var(--color-primary)}
.timeline__dot--muted{border-color:var(--color-border-strong)}
.timeline__dot--success{border-color:var(--color-success)}
.timeline__dot--danger{border-color:var(--color-danger)}
.timeline__time{font-size:var(--text-sm);color:var(--color-text-muted);white-space:nowrap;flex:0 0 auto;font-variant-numeric:tabular-nums}
.timeline__title{font-size:var(--text-base);font-weight:600;color:var(--color-heading);margin:0;line-height:1.3}
.timeline__text{font-size:var(--text-sm);color:var(--color-text-onmuted);margin:0}
.timeline__head + .timeline__text{margin-top:var(--space-1)}
/* Item detalhado (histórico de versões): título + hora na mesma linha; descrição; campos rotulados; ator */
.timeline__body{min-width:0}
.timeline__head{display:flex;align-items:baseline;gap:var(--space-6)}
.timeline__desc{font-size:var(--text-sm);color:var(--color-text-onmuted);margin:var(--space-2) 0 0;line-height:1.5}
.timeline__fields{margin-top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-4)}
.timeline__field{display:flex;gap:var(--space-3);align-items:baseline}
.timeline__field dt{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:600;flex:0 0 auto;min-width:104px}
.timeline__field dd{margin:0;font-size:var(--text-sm);color:var(--color-heading);min-width:0;line-height:1.5}
.timeline__who{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted)}
.timeline__who strong{color:var(--color-heading);font-weight:600}
.timeline__dot--info{border-color:var(--color-info)}
.timeline__dot--warning{border-color:var(--color-warning)}
.timeline--muted .timeline__dot{border-color:var(--color-border-strong)}
.timeline--muted .timeline__item{padding-bottom:var(--space-10)}
.timeline--muted .timeline__item:last-child{padding-bottom:0}
.timeline--muted .timeline__item:last-child::before{display:block;bottom:0}

/* Counters / stat cards (KPIs) */
.stat{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-6);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-sm);position:relative}
.stat__ic{position:absolute;top:var(--space-6);right:var(--space-6);width:var(--space-8);height:var(--space-8);
  border-radius:var(--radius-base);display:grid;place-items:center;background:var(--color-primary-subtle);color:var(--color-primary)}
.stat__ic--danger{background:var(--color-danger-bg);color:var(--color-danger)}
.stat__ic--success{background:var(--color-success-bg);color:var(--color-success)}
.stat__label{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:600;padding-right:calc(var(--space-8) + var(--space-6) + var(--space-2))}   /* reserva a coluna do .stat__ic (absoluto, top-right) para o rótulo não passar por baixo do ícone */
.stat__value{font-size:var(--text-3xl);font-weight:700;color:var(--color-heading);font-variant-numeric:tabular-nums;line-height:1.1}
.stat__delta{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);font-weight:600}
.stat__delta--up{color:var(--color-success-fg)}
.stat__delta--down{color:var(--color-danger-fg)}
.stat__foot{font-size:var(--text-xs);color:var(--color-text-muted)}
.stat__value--date{font-size:var(--text-xl);letter-spacing:-.01em}
.stat__ic--warning{background:var(--color-warning-bg);color:var(--color-warning)}
.stat__ic--info{background:var(--color-info-bg);color:var(--color-info)}
/* KPI clicável = filtro (o .stat vira <button>). Usado no painel de monitoramento e na tabela do plano de contas. */
.statbtn{cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.statbtn:hover{border-color:var(--color-border-strong)}
.statbtn:focus-visible{outline:none;box-shadow:var(--ring)}
.statbtn.is-active{border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}

/* Fila de tarefas priorizada — "o que falta + porquê + ação", uma empresa por linha.
   Ordene por urgência; o modificador de severidade tinge o "porquê" (texto + bolinha). */
.tasklist{display:flex;flex-direction:column}
.taskrow{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border)}
.taskrow:first-child{border-top:0}
.taskrow__mono{width:var(--space-10);height:var(--space-10);border-radius:var(--radius-lg);background:var(--color-primary-subtle);color:var(--color-primary);display:grid;place-items:center;font-weight:700;font-size:var(--text-sm);flex:0 0 auto}
.taskrow__b{flex:1;min-width:0}
.taskrow__t{font-size:var(--text-sm);font-weight:600;color:var(--color-heading);margin:0}
.taskrow__why{display:inline-flex;align-items:center;gap:var(--space-1-5);font-size:var(--text-xs);color:var(--color-text-muted);margin:var(--space-1) 0 0}
.taskrow__why::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.taskrow--danger .taskrow__why{color:var(--color-danger)}
.taskrow--warning .taskrow__why{color:var(--color-warning-fg)}
.taskrow__side{flex:0 0 auto;display:flex;align-items:center;gap:var(--space-3)}
@media(max-width:640px){.taskrow{flex-wrap:wrap}.taskrow__side{width:100%;justify-content:flex-end}}

/* Indicador de etapa em tabela de prontidão (concluída / pendente). Ícone + rótulo acessível. */
.stepstat{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted)}
.stepstat svg{width:20px;height:20px;flex:0 0 auto;color:var(--color-border-strong)}
.stepstat--done{color:var(--color-success-fg)}
.stepstat--done svg{color:var(--color-success-fg)}

/* "Ver código" por componente (documentação viva na vitrine; migra pro Storybook quando houver stack) */
.code-toggle{margin-left:var(--space-3);font:600 var(--text-xs)/1 var(--font-sans);color:var(--color-primary);background:var(--color-primary-subtle);border:1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);border-radius:var(--radius-base);padding:var(--space-1) var(--space-2);cursor:pointer;vertical-align:middle;white-space:nowrap}
.code-toggle:hover{background:color-mix(in srgb, var(--color-primary) 14%, var(--color-surface))}
.code-toggle:focus-visible{outline:none;box-shadow:var(--ring)}
.codeblock{position:relative;margin:var(--space-3) 0 0;background:#0f172a;color:#e2e8f0;border:1px solid #1e293b;border-radius:var(--radius-base);padding:var(--space-8) var(--space-4) var(--space-4);overflow:auto;max-height:360px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--text-xs);line-height:1.55;white-space:pre;tab-size:2}
.codeblock[hidden]{display:none}
.codeblock code{font:inherit;color:inherit;background:none;padding:0}
.code-copy{position:absolute;top:var(--space-2);right:var(--space-2);font:600 var(--text-xs)/1 var(--font-sans);color:#fff;background:rgba(255,255,255,.16);border:0;border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);cursor:pointer}
.code-copy:hover{background:rgba(255,255,255,.28)}

/* Tabs / abas */
.tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--color-border)}
.tab{appearance:none;display:inline-flex;align-items:center;gap:var(--space-2);background:transparent;border:0;padding:var(--space-2) var(--space-4) var(--space-4);font:600 var(--text-base)/1 var(--font-sans);
  color:var(--color-text);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s ease,border-color .15s ease}   /* aba inativa em --color-text (não muted): garante contraste AA 4.5:1 */
.tab:hover{color:var(--color-heading)}
/* Estado selecionado: a fonte da verdade é aria-selected (APG); .is-active mantém compat */
.tab.is-active,.tab[aria-selected="true"]{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.tab:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
/* números tabulares para recibos, protocolos e códigos alinharem coluna a coluna */
.mono{font-variant-numeric:tabular-nums}
/* Painel da aba (role=tabpanel). tabindex=0 o torna alcançável por teclado. */
.tabs__panel{padding-top:var(--space-4);font-size:var(--text-sm);color:var(--color-text-onmuted)}
.tabs__panel:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
.tabs__panel[hidden]{display:none}
.tabs__panel:not([hidden]){animation:ds-fade-in .16s ease}
@media (prefers-reduced-motion:reduce){.tabs__panel:not([hidden]){animation:none}}

/* Segmented control */
.segmented{display:inline-flex;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:3px;gap:2px}
.segmented__btn{appearance:none;border:0;background:transparent;padding:var(--space-1-5) var(--space-3);border-radius:var(--radius-pill);
  font:600 var(--text-sm)/1 var(--font-sans);color:var(--color-text-muted);cursor:pointer}
.segmented__btn.is-active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm),0 0 0 1px var(--color-border);font-weight:700}
.segmented__btn:focus-visible{outline:none;box-shadow:var(--ring)}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:var(--space-1-5);font-size:var(--text-sm);color:var(--color-text-muted);flex-wrap:wrap;min-width:0}
.breadcrumb a{color:var(--color-primary);text-decoration:none;border-radius:var(--radius-sm)}
.breadcrumb a:hover{color:var(--color-primary-hover);text-decoration:underline;text-underline-offset:2px}
.breadcrumb a:focus-visible{outline:none;box-shadow:var(--ring)}
.breadcrumb__sep{color:var(--color-text-muted)}
.breadcrumb__current{color:var(--color-text-muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============ Cabeçalho de página (faixa branca sob o topbar) ============
   Estrutura: .page-h > (container) > .page-h__row [.page-h__title (+ tag/badge) | .page-h__act] + .page-h__desc
   Altura ESTÁVEL entre estados: a linha do título tem min-height fixo e a descrição fica sempre full-width
   abaixo, então trocar/remover as ações não muda a altura do cabeçalho.
   Variações: tag de código (.page-h__code), badge de status (.status na .page-h__title), slot de ação (.page-h__act). */
.page-h{background:var(--color-surface);border-bottom:1px solid var(--color-border)}
.page-h .wrap{padding-block:var(--space-8)}   /* respiro vertical do cabeçalho (o .wrap dá o horizontal) */
/* linha: coluna de conteúdo (título + descrição) à esquerda, ação à direita.
   a descrição vive DENTRO da coluna → quebra antes do botão e pega a linha toda quando não há ação. */
.page-h__row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6)}
.page-h__main{flex:1 1 auto;min-width:0}
.page-h__title{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.page-h__title h1{margin:0;font-size:var(--text-4xl)!important;font-weight:700!important;letter-spacing:-.015em;line-height:1.15}   /* !important vence o reset global de heading (h1{font-weight:600!important}) */
.page-h__title .status{font-size:var(--text-sm)}
.page-h__code{font-size:var(--text-sm)}
.page-h__act{flex:0 0 auto;display:flex;align-items:center;gap:var(--space-3)}
.page-h__desc{color:var(--color-text-onmuted);font-size:var(--text-base);line-height:1.5;margin:var(--space-2) 0 0}
@media (max-width:640px){ .page-h__row{flex-wrap:wrap} }

/* Aviso inline "vigência perto do fim": ícone de alerta âmbar + tooltip, junto a um título/valor.
   Estrutura: <span class="tooltip tooltip--top vigwarn"><span class="vigwarn__ic" tabindex="0" role="img" aria-label="…">svg</span><span class="tooltip__bubble tooltip__bubble--stack">…</span></span>
   (o banner de página maior é .dalert--warning; isto é só o marcador inline.) */
.vigwarn{vertical-align:middle;margin-left:var(--space-1)}
.vigwarn__ic{display:inline-flex;color:var(--color-warning);padding:var(--space-1);cursor:default}
.vigwarn__ic svg{width:16px;height:16px}
.vigwarn__ic:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-pill)}
.vigwarn .tooltip__bubble{max-width:300px;text-align:left}

/* ============ Seletor de empresa (multi-CNPJ) — topo da sidebar ============ */
.orgswitch{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2);border:0;border-radius:var(--radius-base);background:transparent;cursor:pointer;text-align:left;transition:background .12s}
.orgswitch:hover{background:var(--color-border)}
.orgswitch:focus-visible{outline:none;box-shadow:var(--ring)}
.orgswitch__logo{flex:0 0 auto;width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;background:color-mix(in srgb, var(--slate-200) 72%, var(--blue-200));color:var(--color-text-muted);font-weight:700;font-size:var(--text-sm)}
.dark .orgswitch__logo,:root[data-theme="dark"] .orgswitch__logo{background:color-mix(in srgb, var(--slate-500) 30%, var(--slate-800));color:var(--slate-300)}
.orgswitch__logo svg{width:20px;height:20px}
.orgswitch__info{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.4;letter-spacing:normal}
.orgswitch__name{font-size:var(--text-sm);font-weight:600;color:var(--color-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:normal}
.orgswitch__cnpj{font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;letter-spacing:normal}
.orgswitch__chev{flex:0 0 auto;color:var(--color-text-muted)}
.sidenav.is-collapsed .orgswitch{justify-content:center;padding:var(--space-1);border-color:transparent;background:transparent}
.sidenav.is-collapsed .orgswitch:hover{background:var(--color-border)}
.sidenav.is-collapsed .orgswitch__info,.sidenav.is-collapsed .orgswitch__chev{display:none}
/* Colapsado: dropdown da empresa abre para a DIREITA (senão sai da tela) */
.sidenav.is-collapsed .menu__panel{left:100%;right:auto;top:0;margin-left:var(--space-2)}
.sidenav.is-collapsed .menu{padding-left:0;padding-right:0}

/* ============ Responsivo: hambúrguer + drawer (mobile) ============ */
.hamburger{display:none}
.sidenav-backdrop{display:none;position:fixed;inset:0;background:var(--color-scrim);z-index:40}
@media (max-width:767px){
  .hamburger{display:inline-flex}
  .sidenav{position:fixed;top:0;left:0;bottom:0;z-index:50;transform:translateX(-100%);transition:transform .2s ease}
  .sidenav.is-open{transform:none;box-shadow:var(--shadow-md)}
  /* Fechada no mobile: fora da tela E não-focável por teclado (a11y 2.4.3/2.1.2) */
  .sidenav:not(.is-open){visibility:hidden}
  .sidenav-backdrop.is-open{display:block}
  /* Header mobile: sem breadcrumb (cabe no drawer) e busca não-expansível (não estoura a tela) */
  .breadcrumb{display:none}
  .searchx:hover .searchx__input,.searchx:focus-within .searchx__input{width:var(--control-h);padding:0;border-color:transparent;background:transparent}
  .searchx__input,.searchx__input::placeholder{color:transparent}
}

/* ============ Busca que expande no hover/foco (lupa → campo) ============ */
.searchx{position:relative;display:flex;align-items:center;justify-content:flex-end}
.searchx__ic{position:absolute;right:0;width:var(--control-h);height:var(--control-h);display:grid;place-items:center;color:var(--color-text-muted);pointer-events:none}
.searchx__input{width:var(--control-h);padding:0;border-color:transparent;background:transparent;cursor:pointer;transition:width .2s ease,padding .2s ease,border-color .12s,background .12s}
.searchx:hover .searchx__input,.searchx:focus-within .searchx__input{width:18rem;padding:0 var(--control-h) 0 var(--space-3);border-color:transparent;background:var(--color-surface-2);cursor:text}
.searchx:hover .searchx__ic,.searchx:focus-within .searchx__ic{color:var(--color-text)}
.searchx:not(:hover):not(:focus-within) .searchx__input::placeholder{color:transparent}
.searchx__clear{position:absolute;right:0;width:var(--control-h);height:var(--control-h);display:none;place-items:center;border:0;background:transparent;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm)}
.searchx__clear:hover{color:var(--color-heading)}
.searchx__clear:focus-visible{outline:none;box-shadow:var(--ring)}
.searchx__input:not(:placeholder-shown) ~ .searchx__clear{display:grid}
.searchx__input:not(:placeholder-shown) ~ .searchx__ic{display:none}
@media (prefers-reduced-motion:reduce){.searchx__input{transition:none}}

/* Pagination */
.pagination{display:inline-flex;align-items:center;gap:var(--space-1)}
.page-btn{min-width:34px;height:34px;padding:0 var(--space-2);display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-base);
  font-size:var(--text-sm);font-weight:600;cursor:pointer}
.page-btn:hover:not(:disabled){background:var(--color-surface-2)}
.page-btn.is-active{background:var(--color-primary);color:var(--color-primary-contrast);border-color:var(--color-primary)}
.page-btn:disabled{opacity:.5;cursor:not-allowed}
.page-btn:focus-visible{outline:none;box-shadow:var(--ring)}
/* Rodapé de tabela: contagem (esquerda) + paginador (direita), borda superior. Reutilizável em toda listagem paginada. */
.tablefoot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);font-size:var(--text-sm);color:var(--color-text-muted)}
.tablefoot[hidden]{display:none}
.tablefoot__count{font-size:var(--text-sm);color:var(--color-text-muted)}
.tablefoot__count strong,.tablefoot b{color:var(--color-heading);font-variant-numeric:tabular-nums}
.tablefoot__gap{padding:0 var(--space-1);color:var(--color-text-muted)}
.tpager{display:inline-flex;align-items:center;gap:var(--space-2)}   /* paginador compacto (prev/próximo com .icon-btn) */
.tpager button:disabled{opacity:.4;cursor:default}

/* Tag / chip (filtros) */
.tag{display:inline-flex;align-items:center;line-height:1;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:600;background:var(--color-surface-2);color:var(--color-text-onmuted);border:1px solid var(--color-border)}
.tag--primary{background:var(--color-primary-subtle);color:var(--color-primary);border-color:color-mix(in srgb, var(--color-primary) 25%, transparent)}
.tag__x{cursor:pointer;color:var(--color-text-muted);display:grid;place-items:center;border:0;background:transparent;padding:0;line-height:1;
  width:24px;height:24px;border-radius:50%;margin:0 calc(var(--space-1) * -1);transition:background .12s,color .12s}
.tag:hover .tag__x,.tag__x:hover{color:var(--color-heading);background:color-mix(in srgb, var(--color-text) 14%, transparent)}
.tag__x:focus-visible{outline:none;box-shadow:var(--ring)}

/* Badge / counter (número, ex.: no menu) */
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);
  background:var(--color-primary);color:var(--color-primary-contrast);font-size:var(--text-xs);font-weight:700;line-height:1}
.badge--muted{background:var(--color-border-strong);color:var(--color-text)}
.badge--danger{background:var(--color-danger);color:var(--color-danger-contrast)}
/* Foco à prova de Alto Contraste do Windows: forced-colors não pinta box-shadow, então força outline */
@media (forced-colors:active){:focus-visible{outline:2px solid Highlight !important;outline-offset:2px}}

/* Tooltip */
.tooltip{position:relative;display:inline-flex}
.tooltip__bubble{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--color-heading);color:var(--color-surface);font-size:var(--text-xs);font-weight:500;line-height:1;padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;box-shadow:var(--shadow-md);z-index:40}
.tooltip:hover .tooltip__bubble,.tooltip:has(:focus-visible) .tooltip__bubble{opacity:1}
/* Se o gatilho abre um menu/popover (aria-expanded=true), o tooltip some */
.tooltip:has([aria-expanded="true"]) .tooltip__bubble{opacity:0}
@media (prefers-reduced-motion:reduce){.tooltip__bubble{transition:none}}
/* Tooltip aparece ABAIXO por padrão; use .tooltip--top para aparecer acima */
.tooltip--top .tooltip__bubble{top:auto;bottom:calc(100% + 8px)}
/* Alinha o balão à direita do gatilho (evita estourar a borda direita da tela) */
.tooltip--end .tooltip__bubble{left:auto;right:0;transform:none}
/* Balão em 2 linhas: nome (negrito) em cima, detalhe embaixo */
.tooltip__bubble--stack{white-space:normal;width:max-content;max-width:230px;line-height:1.35}
.tooltip__bubble--stack strong{display:block;font-weight:600}
/* Convenção de tooltip de ajuda em campo (.lbltip):
   1) O ícone (i) fica ao lado do RÓTULO (label), nunca do valor — ele explica o campo/conceito.
   2) Conteúdo no formato "Nome completo do campo: descrição." — útil quando o rótulo está abreviado.
      Nunca expor código cru (ex.: freqEncerr, planoCtaRef) na tela; ele fica só na doc/leiaute. */

/* Dropdown menu (ações) */
.menu{position:relative;display:inline-flex}
.menu__panel{position:absolute;z-index:30;top:calc(100% + 6px);right:0;min-width:200px;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:6px}
.menu__panel:not([hidden]){animation:ds-menu-in .14s cubic-bezier(.2,.7,.2,1);transform-origin:top right}
@keyframes ds-menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.menu__panel:not([hidden]){animation:none}}
/* Painel de notificações (sino da topbar): estende o .menu__panel com lista de itens acionáveis. Componente único p/ todas as telas. */
.notifpanel{min-width:340px;max-width:min(380px,92vw);padding:0;overflow:hidden}
.notifpanel__head{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);font-weight:700;color:var(--color-heading);font-size:var(--text-sm)}
.notifpanel__list{max-height:60vh;overflow:auto}
.notifpanel__empty{padding:var(--space-6) var(--space-4);margin:0;color:var(--color-text-muted);font-size:var(--text-sm);text-align:center}
.notifitem{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);text-decoration:none;color:var(--color-text);border-bottom:1px solid var(--color-border)}
.notifitem:last-child{border-bottom:0}
.notifitem:hover{background:var(--color-surface-2)}
.notifitem:focus-visible{outline:none;box-shadow:var(--ring)}
/* não-lida: marcador NÃO-cromático (dot + título em negrito), não só o fundo */
.notifitem--unread{background:color-mix(in srgb,var(--color-primary) 5%,var(--color-surface))}
.notifitem--unread .notifitem__title{font-weight:700}
.notifitem--unread .notifitem__title::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--color-primary);margin-right:var(--space-2);vertical-align:middle}
.notifitem__ic{flex:0 0 auto;width:32px;height:32px;border-radius:var(--radius-lg);display:grid;place-items:center}
.notifitem__ic svg{width:17px;height:17px}
.notifitem__ic--info{background:var(--color-info-bg);color:var(--color-info-fg)}
.notifitem__ic--success{background:var(--color-success-bg);color:var(--color-success-fg)}
.notifitem__ic--danger{background:var(--color-danger-bg);color:var(--color-danger-fg)}
.notifitem__body{min-width:0;display:flex;flex-direction:column;gap:2px}
.notifitem__title{font-weight:600;color:var(--color-heading);font-size:var(--text-sm)}
.notifitem__text{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.45}
/* badge no canto do icon-btn (sino): utilitário p/ não repetir inline em cada tela */
.icon-btn__badge{position:absolute;top:3px;right:3px}
/* separador vertical de barra de ferramentas (entre grupos da topbar/toolbar) — evita o inline repetido */
.vsep{width:1px;height:22px;background:var(--color-divider);flex:0 0 auto}
.menu__item{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);border:0;background:transparent;
  border-radius:var(--radius-base);cursor:pointer;color:var(--color-text);font:inherit;font-size:var(--text-sm);font-weight:500;text-align:left;transition:background-color .12s}
.menu__item svg{width:18px;height:18px;flex:0 0 auto}
.menu__item:hover{background:var(--color-surface-2)}
.menu__item:focus-visible{outline:none;box-shadow:var(--ring)}
.menu__item--danger{color:var(--color-danger)}
.menu__sep{height:1px;background:var(--color-divider);margin:var(--space-1-5) var(--space-1)}
.menu__head{padding:var(--space-2) var(--space-3)}
.menu__head-name{margin:0;font-size:var(--text-base);font-weight:600;color:var(--color-heading)}
.menu__head-mail{margin:0;font-size:var(--text-xs);color:var(--color-text-muted);display:flex;align-items:center;gap:5px}
.menu__head-roles{margin:3px 0 0;font-size:var(--text-xs);color:var(--color-text-muted);font-style:italic;display:flex;align-items:center;gap:5px}
.menu__head-mail svg,.menu__head-roles svg{width:14px;height:14px;flex:0 0 auto;stroke-width:2}

/* Progress */
.progress{height:8px;border-radius:var(--radius-pill);background:var(--color-border);overflow:hidden}
.progress__bar{height:100%;background:var(--color-primary);border-radius:inherit;transition:width .3s}
@media (prefers-reduced-motion:reduce){.progress__bar{transition:none}}

/* Dropzone (upload de documentos) */
.dropzone{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-8) var(--space-6);
  border:1.5px dashed var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-surface-2);color:var(--color-text-muted);cursor:pointer;transition:border-color .12s,background .12s}
.dropzone:hover,.dropzone.is-drag{border-color:var(--color-primary);background:var(--color-primary-subtle)}
.dropzone__icon{color:var(--color-primary)}
.dropzone__title{font-weight:600;color:var(--color-heading)}
.dropzone__hint{font-size:var(--text-xs)}

/* Filecard — arquivo já selecionado/importado (o par do .dropzone). Ícone + nome + meta + ações.
   Estrutura: <div class="filecard"><span class="filecard__icon"><svg…/></span>
     <div class="filecard__body"><div class="filecard__name">arquivo.pfx</div>
       <div class="filecard__meta">PFX · 12 KB</div></div>
     <div class="filecard__actions"><button class="filecard__link">Substituir</button>
       <button class="filecard__link filecard__link--danger">Remover</button></div></div> */
.filecard{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-border);border-radius:var(--radius-base);background:var(--color-surface)}
.filecard__icon{flex:0 0 auto;width:40px;height:40px;border-radius:var(--radius-base);
  background:var(--color-primary-subtle);color:var(--color-primary);display:grid;place-items:center}
.filecard__icon svg{width:20px;height:20px}
.filecard__body{flex:1;min-width:0}
.filecard__name{font-size:var(--text-sm);font-weight:600;color:var(--color-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.filecard__meta{font-size:var(--text-xs);color:var(--color-text-onmuted);font-variant-numeric:tabular-nums}
.filecard__actions{display:flex;align-items:center;gap:var(--space-4);flex:0 0 auto}
.filecard__link{background:none;border:0;font-family:inherit;font-size:var(--text-sm);font-weight:600;color:var(--color-primary);cursor:pointer;padding:0}
.filecard__link:hover{text-decoration:underline}
.filecard__link:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}
.filecard__link--danger{color:var(--color-danger)}

/* =============================================================================
   Context switcher (dropdown) — troca entre Escritório e Contribuintes.
   Reusa o .orgswitch como gatilho; adiciona chevron + painel .ctxmenu.
   ============================================================================= */
.ctxsw{position:relative}
.ctxsw__chev{flex:0 0 auto;width:16px;height:16px;color:var(--color-text-muted);transition:transform .15s ease}
.ctxsw > .orgswitch[aria-expanded="true"] .ctxsw__chev{transform:rotate(180deg)}
.ctxmenu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-base);box-shadow:var(--shadow-md);padding:var(--space-2);max-height:min(70vh,440px);overflow:auto}
.ctxmenu__group{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin:var(--space-3) var(--space-2) var(--space-1)}
.ctxmenu__group:first-child{margin-top:var(--space-1)}
.ctxmenu__item,.ctxmenu__current,.ctxmenu__add{display:flex;align-items:center;gap:var(--space-2);width:100%;text-align:left;padding:var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-text);text-decoration:none;border:0;background:none;cursor:pointer;font:inherit}
.ctxmenu__item:hover,.ctxmenu__add:hover{background:var(--color-surface-2)}
.ctxmenu__item:focus-visible,.ctxmenu__add:focus-visible{outline:none;box-shadow:var(--ring)}
.ctxmenu__current{gap:var(--space-2);color:var(--color-heading);font-weight:600}
.ctxmenu__current svg{width:16px;height:16px;color:var(--color-primary);flex:0 0 auto}
.ctxmenu__ic{flex:0 0 auto;width:30px;height:30px;border-radius:var(--radius-sm);display:grid;place-items:center;background:color-mix(in srgb, var(--slate-200) 72%, var(--blue-200));color:var(--color-text-muted)}
.ctxmenu__ic svg{width:16px;height:16px}
.ctxmenu__t{min-width:0;display:flex;flex-direction:column;line-height:1.35}
.ctxmenu__t b{font-weight:600;color:var(--color-heading);font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctxmenu__t span{font-size:var(--text-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.ctxmenu__sep{height:1px;background:var(--color-border);margin:var(--space-2) calc(-1 * var(--space-2))}
.ctxmenu__add{color:var(--color-primary);font-weight:600}
.ctxmenu__add svg{width:16px;height:16px;flex:0 0 auto}
/* context switcher: comportamento na sidebar colapsada (alinha ao orgswitch do DS) */
.sidenav.is-collapsed .ctxsw__chev{display:none}
.sidenav.is-collapsed .ctxsw{position:static}
.sidenav.is-collapsed .ctxmenu{left:100%;right:auto;top:0;width:260px;margin-left:var(--space-2)}
/* context switcher — dropdown flutua sobre fundo claro: usar cores do tema claro
   (o .sidenav--navy remapeia --color-heading/text/muted, então usamos primitivos). */
.ctxmenu{color:var(--slate-700)}
.ctxmenu__item{color:var(--slate-700)}
.ctxmenu__current,.ctxmenu__t b{color:var(--slate-900)}
.ctxmenu__t span,.ctxmenu__group{color:var(--slate-500)}
.ctxmenu__ic{color:var(--slate-500);background:var(--slate-100)}
.ctxmenu__add,.ctxmenu__current svg{color:var(--blue-600)}
.ctxmenu__item:hover,.ctxmenu__add:hover{background:var(--slate-100)}
/* logo do switcher: ícone com contraste (primário sobre fundo bem claro) */
.ctxsw .orgswitch__logo{background:color-mix(in srgb, var(--blue-500) 15%, #fff);color:var(--blue-600)}
/* switcher: largura simétrica. O .menu é inline-flex e fazia o .orgswitch (width:100%)
   vazar à direita (chevron colado na borda). Trava a largura e alinha o conteúdo aos
   itens de menu (recuo do fundo = 12px; ícone/logo = 28px, igual aos itens). */
.sidenav .menu:has(> .ctxsw){display:block}
.ctxsw{width:100%}
.ctxsw > .orgswitch{padding-left:var(--space-4);padding-right:var(--space-4)}