/*
 * GovAdvisor — folha de estilo local do painel (Story 4.3 / SEC-002 hardening).
 *
 * Substitui o runtime ``cdn.tailwindcss.com`` (explicitamente "não para produção")
 * por CSS pré-construído e servido localmente (same-origin → sem risco de
 * supply-chain de CDN, sem SRI necessário). Implementa EXATAMENTE as utilidades
 * Tailwind usadas pelos templates do painel (inclui os valores arbitrários
 * ``bg-[#...]``/``w-[320px]`` que o JIT gerava) e as classes de badge derivadas no
 * presenter (``_FLAG_CLASSES``).
 *
 * Dívida técnica registrada (SEC-001): no go-live, migrar para um build Tailwind
 * real (PostCSS/CLI) gerado a partir dos templates, para cobrir automaticamente
 * novas classes. Este arquivo é mantido à mão enquanto não há toolchain Node.
 */

/* =========================================================================
 * DESIGN SYSTEM — BROADSHEET (newsprint digital)  ·  FONTE ÚNICA DE VERDADE
 * -------------------------------------------------------------------------
 * Contrato de UI: docs/design-system/PLAYBOOK.md (§2 Tokens).
 * Estes tokens derivam 100% do PLAYBOOK. A camada "Liquid Glass" (Epic 8)
 * abaixo foi DEPRECADA pelo stakeholder; a camada de override no FIM deste
 * arquivo reveste os componentes `gv-*` com esta estética Broadsheet SEM
 * quebrar as classes de que o HTMX depende (aditivo, cascata vence por ordem).
 *
 * Regra de ouro (PLAYBOOK §2): nunca hard-code hex/fonte/px que um token carrega.
 *
 * DÍVIDA TÉCNICA (fonte): Source Serif 4 deveria ser self-hosted (woff2 em
 * /static). Não há arquivo de fonte no repo e é PROIBIDO CDN/Google Fonts
 * (SEC-002). Fallback pragmático: stack serif do sistema (Georgia). Ao
 * disponibilizar o woff2, adicionar @font-face aqui — nenhum outro token muda.
 * ========================================================================= */
:root {
  /* --- Cores base (PLAYBOOK §2) ----------------------------------------- */
  --color-bg: #f3f2f2;          /* fundo / papel */
  --color-text: #201e1d;        /* tinta / texto */
  --color-accent: #0088b0;      /* ciano = interativo */
  --color-accent-2: #d6006c;    /* magenta = alerta / segunda voz (raro) */

  /* --- Rampa neutra (papel de jornal, cinza quente) --------------------- */
  --color-neutral-100: #faf9f8; /* superfície do card (papel claro) */
  --color-neutral-200: #eeecea;
  --color-neutral-300: #dcd9d6; /* réguas / bordas */
  --color-neutral-400: #b8b4b0;
  --color-neutral-500: #8a8683; /* score médio */
  --color-neutral-600: #625f5c; /* metadados, contagens */
  --color-neutral-700: #46433f;
  --color-neutral-800: #2f2d2b;
  --color-neutral-900: #201e1d; /* = --color-text */

  /* --- Rampa do acento (ciano) ----------------------------------------- */
  --color-accent-100: #d4eef5;
  --color-accent-200: #a6dcec;
  --color-accent-300: #6ec6de;
  --color-accent-400: #2ba7c9;
  --color-accent-500: #0088b0;  /* = --color-accent */
  --color-accent-600: #00789c;  /* pressionado */
  --color-accent-700: #00647f;  /* texto corrido em acento (regra de contraste §2) */
  --color-accent-800: #004f65;
  --color-accent-900: #003a4b;

  /* --- Rampa do acento 2 (magenta) ------------------------------------- */
  --color-accent-2-100: #f8d1e4;
  --color-accent-2-200: #f0a2c8;
  --color-accent-2-300: #e56aa5;
  --color-accent-2-400: #de3986;
  --color-accent-2-500: #d6006c; /* = --color-accent-2 */
  --color-accent-2-600: #bd005f;
  --color-accent-2-700: #9e0050; /* texto corrido em alerta */
  --color-accent-2-800: #7a003e;
  --color-accent-2-900: #57002c;

  /* --- Tipografia (PLAYBOOK §2/§3) — Serifa é o chrome ------------------ */
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* --- Escala tipográfica aplicada (PLAYBOOK §3) ----------------------- */
  --fs-h1: 44px;      /* título de tela */
  --fs-metric: 40px;  /* métrica de topo */
  --fs-panel: 28px;   /* título de painel lateral */
  --fs-card: 17px;    /* título de card */
  --fs-section: 15px; /* seção / coluna kanban (uppercase) */
  --fs-value: 19px;   /* valor estimado no card */
  --fs-body: 15px;    /* corpo / orientação */
  --fs-meta: 13px;    /* órgão · município */
  --fs-label: 12px;   /* rótulo / kicker uppercase */

  /* --- Espaço (densidade 1.25×, base 4px) — PLAYBOOK §2/§4 -------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;   /* padding lateral da página (§4) */

  /* --- Raio (2px base) — PLAYBOOK §2 ----------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* --- Elevação — PLAYBOOK §2 (sombra é rara; só card hover e drawer) --- */
  --shadow-sm: 0 1px 2px rgba(32, 30, 29, 0.08);
  --shadow-md: 0 2px 8px rgba(32, 30, 29, 0.10);
  --shadow-lg: 0 8px 30px rgba(32, 30, 29, 0.16);

  /* --- Réguas canônicas (furniture de primeira página) — PLAYBOOK §4 --- */
  --rule-header: 3px solid var(--color-text);
  --rule-hair: 1px solid var(--color-neutral-300);
}

/* --- Reset mínimo (subconjunto do preflight Tailwind) --------------------- */
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  line-height: 1.5;
}
h1,
h2,
h3,
p {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
}
input {
  font: inherit;
}

/* --- Display / layout ----------------------------------------------------- */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.hidden { display: none; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.self-center { align-self: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }

/* --- Posição -------------------------------------------------------------- */
.sticky { position: sticky; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-4 { bottom: 1rem; }
.right-4 { right: 1rem; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* --- Dimensões ------------------------------------------------------------ */
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.w-80 { width: 20rem; }
.w-\[320px\] { width: 320px; }
.min-w-\[120px\] { min-width: 120px; }
.min-w-\[44px\] { min-width: 44px; }
.min-h-\[44px\] { min-height: 44px; }
.max-h-\[calc\(100vh-160px\)\] { max-height: calc(100vh - 160px); }

/* --- Overflow ------------------------------------------------------------- */
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* --- Padding -------------------------------------------------------------- */
.p-3 { padding: 0.75rem; }
.p-6 { padding: 1.5rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }

/* --- Margin --------------------------------------------------------------- */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mr-1 { margin-right: 0.25rem; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* --- Bordas / raio / sombra ----------------------------------------------- */
.border { border-width: 1px; border-style: solid; border-color: #e2e5ea; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e2e5ea; }
.border-t { border-top-width: 1px; border-top-style: solid; border-top-color: #e2e5ea; }
.border-\[\#E2E5EA\] { border-color: #e2e5ea; }
.border-amber-300 { border-color: #fcd34d; }
.border-purple-300 { border-color: #d8b4fe; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* --- Cores de fundo ------------------------------------------------------- */
.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-400 { background-color: #9ca3af; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-purple-50 { background-color: #faf5ff; }
.bg-red-700 { background-color: #b91c1c; }
.bg-green-700 { background-color: #15803d; }
.bg-purple-700 { background-color: #7e22ce; }
.bg-orange-600 { background-color: #ea580c; }
.bg-\[\#1F4E79\] { background-color: #1f4e79; }

/* --- Cores de texto ------------------------------------------------------- */
.text-white { color: #ffffff; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-red-700 { color: #b91c1c; }
.text-amber-800 { color: #92400e; }
.text-amber-900 { color: #78350f; }
.text-purple-800 { color: #6b21a8; }
.text-\[\#1A1F29\] { color: #1a1f29; }
.text-\[\#1F4E79\] { color: #1f4e79; }

/* --- Tipografia ----------------------------------------------------------- */
.text-\[11px\] { font-size: 11px; line-height: 1rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.italic { font-style: italic; }
.line-through { text-decoration-line: line-through; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }
.text-center { text-align: center; }

/* --- Truncamento de N linhas (line-clamp) --------------------------------- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* P2 · título/objeto do card em 3 linhas (títulos médios inteiros; longos com
   reticências nativas — nunca corte "seco"). Utilitária espelhando `.line-clamp-2`. */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Interação ------------------------------------------------------------ */
.cursor-pointer { cursor: pointer; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:underline:hover { text-decoration-line: underline; }

/* --- Responsivo (lg ≥ 1024px) --------------------------------------------- */
@media (min-width: 1024px) {
  .lg\:w-\[420px\] { width: 420px; }
}

/* --- Indicador de carregamento HTMX --------------------------------------- */
.htmx-indicator {
  opacity: 0;
  transition: opacity 0.2s ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* =========================================================================
 * EPIC 8 · Liquid Glass Design System — Story 8.1 (Fundação Visual)
 * -------------------------------------------------------------------------
 * Camada ADITIVA: introduz o token layer (:root), a aurora de fundo e a
 * receita de vidro. NÃO substitui as utilidades Tailwind acima — as telas do
 * MVP (login/radar/detalhe) continuam funcionando; as stories 8.2–8.6
 * migram os componentes para consumir estes tokens.
 *
 * Fonte de verdade dos valores: docs/design-system/design-tokens.yaml
 * (3 camadas: core → semantic → component). Onde o protótipo divergir do
 * YAML, o YAML vence (é o contrato). Implementação de referência 1:1:
 * prototype/app.css (:root + .aurora + receita de vidro, aprovada 2026-07-14).
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * CAMADA 1 — CORE (primitivos; nunca usados direto em componente)
 * ------------------------------------------------------------------------- */
:root {
  /* Marinho / fundo */
  --gv-navy-950: #060b16;   /* fundo base (por trás do vidro) */
  --gv-navy-900: #0a1120;   /* nav/drawer sólido translúcido */
  --gv-navy-800: #0f1d2c;
  /* Marca */
  --gv-brand-700: #1f4e79;  /* azul GovAdvisor (âncora de continuidade) */
  --gv-brand-500: #2e7cc4;  /* brand mais claro (gradiente/hover) */
  /* Céu / acento interativo */
  --gv-sky-300: #7dd3fc;
  --gv-sky-400: #38bdf8;    /* acento primário (links, foco, KPI destaque) */
  /* Terceira cor */
  --gv-teal-500: #14b8a6;
  --gv-indigo-500: #6366f1; /* aurora (apoio) */
  /* Texto */
  --gv-slate-50: #f1f5f9;   /* texto principal */
  --gv-slate-300: #b6c2d4;  /* texto secundário */
  --gv-slate-400: #98a6ba;  /* texto terciário / captions — valor acessível (AA sobre vidro), ver a11y-check */
  /* Semânticas (verticais de estado) */
  --gv-green-500: #10b981;
  --gv-red-500: #f43f5e;
  --gv-amber-500: #f59e0b;
  --gv-purple-500: #a855f7;
  --gv-orange-400: #fb923c;

  /* Superfícies de vidro (opacidade branca sobre a aurora) */
  --gv-glass-alpha-06: rgba(255, 255, 255, 0.06);  /* vidro base (cards, painéis) */
  --gv-glass-alpha-10: rgba(255, 255, 255, 0.1);   /* vidro hover */
  --gv-glass-alpha-16: rgba(255, 255, 255, 0.16);  /* vidro ativo (aba selecionada) */
  --gv-glass-stroke: rgba(255, 255, 255, 0.12);    /* borda de vidro */
  --gv-glass-stroke-strong: rgba(255, 255, 255, 0.22);

  /* Espaçamento (base 4px) */
  --gv-space-xs: 4px;
  --gv-space-sm: 8px;
  --gv-space-md: 12px;
  --gv-space-lg: 16px;
  --gv-space-xl: 18px;
  --gv-space-2xl: 24px;

  /* Raio */
  --gv-radius-sm: 10px;
  --gv-radius-md: 16px;
  --gv-radius-lg: 22px;
  --gv-radius-pill: 999px;

  /* Blur */
  --gv-blur-card: 26px;
  --gv-blur-nav: 30px;
  --gv-blur-drawer: 40px;

  /* Tipografia */
  --gv-font-base: -apple-system, "SF Pro Display", "SF Pro Text",
    "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, sans-serif;
  --gv-fs-2xl: 28px;   /* valor no drawer */
  --gv-fs-xl: 22px;    /* h1 login */
  --gv-fs-lg: 17px;    /* valor no card */
  --gv-fs-md: 15px;    /* input, botão */
  --gv-fs-base: 13px;  /* corpo / objeto */
  --gv-fs-sm: 12px;    /* local, subtítulos */
  --gv-fs-xs: 11px;    /* badges, labels */
  --gv-fs-2xs: 10px;   /* micro-labels uppercase */
  --gv-fw-regular: 400;
  --gv-fw-medium: 500;
  --gv-fw-semibold: 600;
  --gv-fw-bold: 700;
  --gv-ls-label: 0.1em;   /* labels uppercase */
  --gv-ls-tight: -0.02em; /* números grandes / display */

  /* Elevação */
  --gv-elevation-glass: inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 34px rgba(2, 8, 20, 0.45);
  --gv-elevation-brand-glow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 24px rgba(31, 78, 121, 0.55);

  /* Motion */
  --gv-ease-spring: cubic-bezier(0.32, 0.72, 0.28, 1);  /* drawer estilo iOS */
  --gv-ease-standard: ease;
  --gv-duration-fast: 150ms;
  --gv-duration-base: 220ms;
  --gv-duration-drawer: 280ms;
  --gv-aurora-cycle: 26s;

  /* -----------------------------------------------------------------------
   * CAMADA 2 — SEMANTIC (aliases com significado; o que os componentes usam)
   * --------------------------------------------------------------------- */
  --gv-background: var(--gv-navy-950);
  --gv-surface: var(--gv-glass-alpha-06);
  --gv-surface-hover: var(--gv-glass-alpha-10);
  --gv-surface-active: var(--gv-glass-alpha-16);
  --gv-border: var(--gv-glass-stroke);
  --gv-border-strong: var(--gv-glass-stroke-strong);
  --gv-text: var(--gv-slate-50);
  --gv-text-muted: var(--gv-slate-300);
  --gv-text-subtle: var(--gv-slate-400);
  --gv-accent: var(--gv-sky-400);
  --gv-accent-soft: var(--gv-sky-300);
  --gv-brand: var(--gv-brand-700);
  --gv-focus-ring: var(--gv-sky-400);

  /* Estados de veredito (Motor de Aptidão — Epic 6) */
  --gv-verdict-apto: var(--gv-green-500);
  --gv-verdict-inapto: var(--gv-red-500);
  --gv-verdict-pendente: var(--gv-amber-500);
  --gv-verdict-revisar: var(--gv-purple-500);   /* cidadão de 1ª classe */
  --gv-verdict-sem-analise: var(--gv-slate-400);

  /* Estados de sinalização (flags do MVP) */
  --gv-flag-sigiloso: var(--gv-red-500);
  --gv-flag-revisao-humana: var(--gv-purple-500);
  --gv-flag-visita: var(--gv-orange-400);
  --gv-flag-ok: var(--gv-green-500);

  /* Estados de validade documental (Dossiê) */
  --gv-validity-valid: var(--gv-green-500);
  --gv-validity-expiring: var(--gv-amber-500);
  --gv-validity-expired: var(--gv-red-500);
  --gv-validity-none: var(--gv-slate-400);

  /* -----------------------------------------------------------------------
   * CAMADA 3 — COMPONENT (mapeamentos por componente atômico)
   * --------------------------------------------------------------------- */
  --gv-badge-radius: var(--gv-radius-pill);
  --gv-badge-padding: 3px 9px;
  --gv-badge-font-size: var(--gv-fs-xs);
  --gv-badge-font-weight: var(--gv-fw-bold);
  --gv-badge-glow-alpha: 0.22;

  --gv-card-surface: var(--gv-surface);
  --gv-card-surface-hover: var(--gv-surface-hover);
  --gv-card-radius: var(--gv-radius-md);
  --gv-card-hover-lift: translateY(-2px);
  --gv-card-border: var(--gv-border);

  --gv-kpi-surface: var(--gv-surface);
  --gv-kpi-radius: var(--gv-radius-lg);
  --gv-kpi-value-size: 26px;
  --gv-kpi-value-accent: var(--gv-accent);

  --gv-segmented-track: var(--gv-glass-alpha-06);
  --gv-segmented-thumb-active: var(--gv-surface-active);
  --gv-segmented-radius: var(--gv-radius-pill);

  --gv-drawer-surface: rgba(9, 15, 28, 0.72);
  --gv-drawer-blur: var(--gv-blur-drawer);
  --gv-drawer-radius: var(--gv-radius-lg);
  --gv-drawer-motion: var(--gv-ease-spring);
  --gv-drawer-duration: var(--gv-duration-drawer);

  --gv-button-primary-bg: linear-gradient(
    135deg,
    var(--gv-brand-500),
    var(--gv-brand-700)
  );
  --gv-button-primary-text: #ffffff;
  --gv-button-primary-radius: 14px;
  --gv-button-primary-shadow: var(--gv-elevation-brand-glow);
}


/* -------------------------------------------------------------------------
 * Preferências de mídia (AC5) — acessibilidade.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --gv-glass-stroke: rgba(255, 255, 255, 0.28);
    --gv-glass-stroke-strong: rgba(255, 255, 255, 0.4);
    --gv-text-muted: #d3dce8;
    --gv-text-subtle: #b3bfd0;
  }
}

/* =========================================================================
 * EPIC 8 · Liquid Glass Design System — Story 8.2 (Átomos e Moléculas)
 * -------------------------------------------------------------------------
 * Camada ADITIVA sobre a fundação da 8.1. Reskin de badges, card, chips,
 * input e botões para pílulas/superfícies de vidro com glow semântico.
 *
 * PRINCÍPIO CENTRAL (CON-7 / AC1): o presenter (presenters.py) NÃO muda — ele
 * continua emitindo as MESMAS classes utilitárias (`bg-green-700 text-white`,
 * `bg-red-700 text-white`, …). Esta story só REDEFINE o que essas classes
 * desenham QUANDO estão dentro de um badge (escopo `.gv-badge`). O marcador
 * `.gv-badge` é adicionado nos parciais de badge (`_flag_badge.html` e o badge
 * agregado de `_aptidao_section.html`) — aditivo, sem tocar `{{ badge.classes }}`
 * nem os atributos HTMX. Assim o mesmo `bg-green-700 text-white` do toast de
 * "mover" (`_move_response.html`) permanece intacto (não é badge).
 *
 * Fonte de verdade dos valores: docs/design-system/design-tokens.yaml.
 * Referência 1:1 aprovada: prototype/app.css (.badge/.b-*, .card, .chip,
 * .move-btn, login input/button). Onde o protótipo divergir dos tokens
 * `--gv-*`, os tokens vencem.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * AC1 — Badges como pílulas de vidro com glow semântico.
 * A base `.gv-badge` reseta o retângulo sólido Tailwind (bg-*/text-white) para
 * uma pílula translúcida; cada par `.gv-badge.bg-<cor>` aplica a cor semântica
 * + glow (mapeado de prototype/app.css .b-*). Cor NUNCA sozinha: o rótulo
 * textual do presenter permanece (a11y / daltonismo — AC3/AC5).
 * ------------------------------------------------------------------------- */
.gv-badge {
  display: inline-block;
  border-radius: var(--gv-badge-radius);
  padding: var(--gv-badge-padding);
  font-size: var(--gv-badge-font-size);
  font-weight: var(--gv-badge-font-weight);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.35;
  border: 1px solid var(--gv-border-strong);
  /* Sobrescreve o fundo/borda sólidos do utilitário Tailwind por vidro. */
  background: var(--gv-surface-hover);
  color: var(--gv-text);
}

/* APTO / OK / visita facultativa → verde (bg-green-700). */
.gv-badge.bg-green-700 {
  background: rgba(16, 185, 129, 0.28);
  border-color: rgba(16, 185, 129, 0.55);
  color: #6ee7b7;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.22);
}
/* INAPTO / SIGILOSO / visita urgente → vermelho (bg-red-700). */
.gv-badge.bg-red-700 {
  background: rgba(244, 63, 94, 0.26);
  border-color: rgba(244, 63, 94, 0.55);
  color: #fda4af;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.2);
}
/* REVISAR / REVISÃO HUMANA → roxo (bg-purple-700) — cidadão de 1ª classe. */
.gv-badge.bg-purple-700 {
  background: rgba(168, 85, 247, 0.26);
  border-color: rgba(168, 85, 247, 0.55);
  color: #d8b4fe;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.22);
}
/* VISITA OBRIGATÓRIA (próxima / até data) → laranja (bg-orange-600). */
.gv-badge.bg-orange-600 {
  background: rgba(251, 146, 60, 0.26);
  border-color: rgba(251, 146, 60, 0.55);
  color: #fdba74;
  box-shadow: 0 0 14px rgba(251, 146, 60, 0.2);
}
/* PENDENTE → âmbar (bg-amber-500). */
.gv-badge.bg-amber-500 {
  background: rgba(245, 158, 11, 0.26);
  border-color: rgba(245, 158, 11, 0.55);
  color: #fcd34d;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.2);
}
/* VISITA vencida (prazo encerrado) → cinza neutro riscado (bg-gray-400). */
.gv-badge.bg-gray-400 {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gv-border);
  color: var(--gv-text-subtle);
}
/* "Sem análise" → cinza neutro (bg-gray-300) — degradação graciosa. */
.gv-badge.bg-gray-300 {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gv-border);
  color: var(--gv-text-subtle);
}
/* O utilitário `line-through` do presenter (visita vencida) segue valendo. */

/* -------------------------------------------------------------------------

/* vchips de validade documental (Dossiê — 8.6). Definidos aqui para reuso;
 * o estado é sempre cor + rótulo textual (a11y). */
.gv-vchip {
  display: inline-block;
  flex-shrink: 0;
  font-size: var(--gv-fs-2xs);
  font-weight: var(--gv-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: var(--gv-radius-pill);
  white-space: nowrap;
  border: 1px solid var(--gv-border);
}
.gv-vchip-ok {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.45);
  color: #6ee7b7;
}
.gv-vchip-warn {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
  color: #fcd34d;
}
.gv-vchip-bad {
  background: rgba(244, 63, 94, 0.14);
  border-color: rgba(244, 63, 94, 0.45);
  color: #fda4af;
}
.gv-vchip-none {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--gv-border);
  color: var(--gv-text-subtle);
}





/* =========================================================================
 * EPIC 8 · Liquid Glass Design System — Story 8.5 (Drawer de Detalhe em Vidro)
 * -------------------------------------------------------------------------
 * Camada ADITIVA sobre 8.1/8.2/8.3. Transforma o drawer de detalhe (#detail /
 * card_detail.html, injetado via hx-get) numa LÂMINA de vidro flutuante que
 * entra com a curva de mola do iOS (--gv-ease-spring), com overlay translúcido
 * atrás. Blur mais PROFUNDO que os cards (--gv-blur-drawer=40px vs 26px, AC1).
 *
 * DIFERENÇA-CHAVE do protótipo (que alterna .open/.on em elementos persistentes):
 * o app real INJETA o HTML no #detail via hx-get e LIMPA o innerHTML no fechar.
 * Portanto a entrada é feita por @keyframes que dispara sozinho na montagem
 * (sem toggle de classe, sem JS na abertura) — o contrato HTMX fica intocado.
 * A saída é orquestrada por closeDetail() em base.html (aparência/transição, não
 * transporte): adiciona .gv-drawer-closing, aguarda a animação, então limpa.
 * O overlay é renderizado DENTRO de card_detail.html (entra/sai junto via
 * innerHTML); seu onclick chama closeDetail() (evento nativo, não é atributo hx-*).
 *
 * Referência 1:1 aprovada: prototype/app.css (.drawer/.overlay + cubic-bezier).
 * Onde o protótipo usa suas vars, aqui consumimos os tokens --gv-* (o token
 * layer vence — CON-7). Sem hex cru.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * AC1/AC5 — A lâmina de vidro. Escopo `.gv-drawer`, adicionado ao <div
 * role="dialog"> de card_detail.html (aditivo; substitui bg-white/shadow-xl do
 * MVP por vidro profundo). Mobile: largura total; desktop: ~440px (lâmina).
 * ------------------------------------------------------------------------- */
.gv-drawer {
  position: fixed;
  right: 12px;
  top: 12px;
  bottom: 12px;
  width: calc(100% - 24px);
  max-width: 440px;
  border-radius: var(--gv-drawer-radius);
  background: var(--gv-drawer-surface);
  -webkit-backdrop-filter: blur(var(--gv-drawer-blur)) saturate(180%);
  backdrop-filter: blur(var(--gv-drawer-blur)) saturate(180%);
  border: 1px solid var(--gv-border);
  box-shadow: var(--gv-elevation-glass);
  color: var(--gv-text);
  z-index: 50;
  overflow-y: auto;
  /* Achado #3: impede scroll chaining — ao chegar no fim da lâmina o gesto não
     encadeia para o board/página atrás (crítico no full-screen mobile). Sem JS;
     não trava o body (fora de escopo), mas elimina o bleed. */
  overscroll-behavior: contain;
  /* Entrada de mola (iOS) na montagem — sem JS/toggle (contrato HTMX intacto). */
  animation: gv-drawer-in var(--gv-drawer-duration) var(--gv-drawer-motion) both;
}
.gv-drawer::-webkit-scrollbar {
  width: 6px;
}
.gv-drawer::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--gv-radius-pill);
}

/* Saída: closeDetail() adiciona esta classe, toca a animação e então limpa. */
.gv-drawer.gv-drawer-closing {
  animation: gv-drawer-out var(--gv-drawer-duration) var(--gv-drawer-motion) both;
}

@keyframes gv-drawer-in {
  from {
    transform: translateX(calc(100% + 24px));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes gv-drawer-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100% + 24px));
  }
}

/* Overlay translúcido atrás da lâmina (renderizado dentro de card_detail.html,
 * entra/sai junto). Escopo `.gv-drawer-overlay`. onclick=closeDetail() no HTML. */
.gv-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 15, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 40;
  animation: gv-overlay-in var(--gv-duration-base) var(--gv-ease-standard) both;
}
.gv-drawer-overlay.gv-drawer-closing {
  animation: gv-overlay-out var(--gv-duration-base) var(--gv-ease-standard) both;
}
@keyframes gv-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gv-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Cabeçalho sticky da lâmina: separador de vidro (não o cinza sólido do MVP). */
.gv-drawer .border-b,
.gv-drawer .border-t {
  border-color: var(--gv-border);
}
/* Título e micro-labels uppercase sobre vidro → tokens semânticos (AC5). */
.gv-drawer h2,
.gv-drawer h3 {
  color: var(--gv-text-muted);
}
.gv-drawer .text-gray-500,
.gv-drawer .text-gray-400,
.gv-drawer .text-gray-600 {
  color: var(--gv-text-subtle);
}
/* Superfícies internas cinza-sólido do MVP (Resumo da IA / itens) → vidro. */
.gv-drawer .bg-gray-50 {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--gv-border);
}
/* Links de anexo herdam o acento de céu (mantêm o rótulo textual). */
.gv-drawer .text-\[\#1F4E79\] {
  color: var(--gv-accent-soft);
}
/* AC3 — Botão de fechar: alvo ≥ 44px + foco visível de marca. */
.gv-drawer button:focus-visible,
.gv-drawer a:focus-visible {
  outline: 2px solid var(--gv-focus-ring);
  outline-offset: 2px;
}
/* Botões "Mover para" em vidro-ghost (mesma linguagem do .gv-btn da 8.2),
 * preservando 100% dos atributos hx-patch/hx-vals/hx-on (AC6). */
.gv-drawer .rounded.border:hover {
  background: rgba(125, 211, 252, 0.16);
  border-color: rgba(125, 211, 252, 0.4);
  color: var(--gv-accent-soft);
}

/* AC2 — Seção de aptidão (Story 6.9) reestilizada SEM tocar a estrutura do
 * template (_aptidao_section.html permanece intocado, autoescape/NFR17 preservado).
 * As cores semânticas do MVP (vermelho/âmbar) ficam com contraste ruim sobre
 * marinho, então mapeamos para os tons de vidro legíveis (mesma paleta das badges
 * da 8.2). O badge agregado do veredito já usa `.gv-badge` (herdado da 8.2). */
.gv-drawer .text-red-700 {
  color: #fda4af; /* motivos da inaptidão — vermelho claro legível sobre vidro */
}
.gv-drawer .text-amber-700 {
  color: #fcd34d; /* pendências com prazo — âmbar claro legível */
}
.gv-drawer .text-purple-800 {
  color: #d8b4fe; /* resumo em revisão humana — roxo claro */
}
.gv-drawer .bg-purple-50 {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.35);
}
/* Pílula de veredito por item (rastreabilidade): cinza-sólido → vidro neutro. */
.gv-drawer .bg-gray-100 {
  background: rgba(255, 255, 255, 0.08);
  color: var(--gv-text-muted);
}

/* AC4 — prefers-reduced-motion: sem deslize. A lâmina e o overlay apenas
 * aparecem (a regra global `* { transition: none }` da 8.1 não cobre @keyframes,
 * então desligamos as animations explicitamente aqui). Funcionalidade intacta:
 * closeDetail() detecta a preferência e limpa o #detail imediatamente. */
@media (prefers-reduced-motion: reduce) {
  .gv-drawer,
  .gv-drawer.gv-drawer-closing,
  .gv-drawer-overlay,
  .gv-drawer-overlay.gv-drawer-closing {
    animation: none;
  }
}

/* Degradação graciosa (sem backdrop-filter): a lâmina cai para marinho sólido
 * legível (consistente com 8.1/8.2/AC4). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gv-drawer {
    background: var(--gv-navy-900);
  }
  .gv-drawer-overlay {
    background: rgba(3, 7, 15, 0.7);
  }
}

/* Mobile (≤ 560px): lâmina cola nas bordas (largura total), sem overflow (AC5). */
@media (max-width: 560px) {
  .gv-drawer {
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
  }
  @keyframes gv-drawer-in {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  @keyframes gv-drawer-out {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100%);
    }
  }
  /* Blur mais barato em GPUs móveis (consistente com o protótipo). */
  .gv-drawer {
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
  }
}



/* =========================================================================
 * P1 · Alinhamento 4:4 (faixa de KPIs ↔ board Kanban) no desktop
 * -------------------------------------------------------------------------
 * CSS-alvo (CON-7): no desktop (>860px) o board vira um grid de 4 trilhas iguais,
 * espelhando o `.gv-kpis` (mesmo `grid-template-columns`, mesmo `gap`, mesma inset —
 * ambos são filhos diretos de `.gv-main`), fechando o alinhamento 1:1 com os 4 tiles.
 * O `#board` (id, especificidade 1,0,0) vence as utilitárias Tailwind `flex`/
 * `overflow-x-auto` do template sem `!important`; `#board > section` (1,0,1) neutraliza
 * o `w-[320px]` fixo das colunas para a trilha `1fr` controlar a largura.
 *
 * Responsividade preservada: ABAIXO de 861px este bloco não se aplica → o board
 * retoma o layout Tailwind original (`flex` + `overflow-x:auto`, scroll horizontal),
 * e a faixa de KPIs segue 4→2 (≤560) →1 (≤380) pelas media queries da 8.4. Sem
 * `overflow-x` no body em telas pequenas.
 * ========================================================================= */
@media (min-width: 861px) {
  #board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gv-space-md);
    overflow-x: visible;
  }
  #board > section {
    width: auto;
    min-width: 0;
  }
}

/* =========================================================================
 * P4 · Indicador de captura de editais no PNCP (read-only)
 * -------------------------------------------------------------------------
 * Barra de status em vidro (mesma receita da fundação 8.1), com "dot" pulsante
 * quando há captura registrada. Consome os tokens `--gv-*`; sem hex cru de marca.
 * ========================================================================= */
.gv-captura-bar {
  margin: 0 2px var(--gv-space-md);
}
.gv-captura {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gv-captura-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--gv-fs-sm);
  color: var(--gv-text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gv-surface);
  border: 1px solid var(--gv-border);
  -webkit-backdrop-filter: blur(var(--gv-blur-card)) saturate(160%);
  backdrop-filter: blur(var(--gv-blur-card)) saturate(160%);
}
.gv-captura-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
  animation: gv-captura-pulse 2.4s ease-in-out infinite;
}
/* Sem captura ainda: pontinho neutro, sem pulsar (sinalização honesta). */
.gv-captura-dot-off {
  background: var(--gv-text-subtle);
  box-shadow: none;
  animation: none;
}
/* Captura em curso (pós-disparo): âmbar pulsante, distinto do verde "ok". */
.gv-captura-dot-run {
  background: var(--gv-accent, #f59e0b);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
}
/* Botão do gatilho manual "Capturar agora" (P4). Mesma linguagem de vidro. */
.gv-captura-btn {
  font-size: var(--gv-fs-sm);
  color: var(--gv-text);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--gv-surface);
  border: 1px solid var(--gv-border);
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--gv-blur-card)) saturate(160%);
  backdrop-filter: blur(var(--gv-blur-card)) saturate(160%);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.gv-captura-btn:hover {
  border-color: var(--gv-border-strong, var(--gv-border));
}
.gv-captura-btn:disabled {
  opacity: 0.55;
  cursor: progress;
}
@keyframes gv-captura-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gv-captura-dot {
    animation: none;
  }
}


/* =========================================================================
 * BROADSHEET — CAMADA DE OVERRIDE (reveste os componentes gv-* do Radar)
 * -------------------------------------------------------------------------
 * Contrato: docs/design-system/PLAYBOOK.md. Esta camada é a ÚLTIMA do arquivo,
 * então vence a estética "Liquid Glass" (Epic 8) por ordem de fonte, com a mesma
 * especificidade — sem !important, sem remover nenhuma classe que o HTMX usa.
 *
 * Princípios aplicados (PLAYBOOK §1): folha aberta (sem caixas/sombras/blur como
 * estrutura); hierarquia por tipografia + espaço; cor = tinta spot (ciano=ação,
 * magenta=alerta, raro); serifa é o chrome; um único acento por componente pequeno.
 * ========================================================================= */

/* --- Fundação: papel + tinta + serifa (PLAYBOOK §1.1/§1.5) --------------- */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
}


/* Links (PLAYBOOK §6): ciano; hover vira magenta. */
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-2); }

/* Foco de teclado canônico (PLAYBOOK §6) — nunca o anel azul padrão. */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }



/* --- Barra de captura PNCP: pílula de papel, sem vidro ------------------ */
.gv-captura-bar { margin: 0 0 var(--space-4); }
.gv-captura-status,
.gv-captura-btn {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300);
  color: var(--color-neutral-700);
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- 5.5 Kanban: colunas sem caixa; título com régua de 2px na cor ------ */
#board { gap: var(--space-6); }
[id^="col-"] {
  background: transparent;
  border-radius: 0;
}
[id^="col-"] > header {
  background: var(--color-bg);
  padding: 0 0 var(--space-2);
}
[id^="col-"] > header > span:first-child {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-section);       /* 15px (§3) */
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-text);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-neutral-400);
}
[id^="col-"] > header > span:last-child { color: var(--color-neutral-500); }
/* Cor por coluna (§5.5): Novo=ciano, Em análise=magenta, Participando=preto,
   Descartado=neutro. */
#col-novo         > header > span:first-child { border-bottom-color: var(--color-accent); }
#col-em_analise   > header > span:first-child { border-bottom-color: var(--color-accent-2); }
#col-participando > header > span:first-child { border-bottom-color: var(--color-text); }
#col-descartado   > header > span:first-child { border-bottom-color: var(--color-neutral-400); }


/* --- Badges (aptidão / flags): tinta spot chapada, um acento por badge --- */
.gv-badge {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
  letter-spacing: 0.08em;
  box-shadow: none;
}
.gv-badge.bg-green-700 { background: var(--color-accent-100); border-color: var(--color-accent-300); color: var(--color-accent-700); box-shadow: none; }
.gv-badge.bg-red-700,
.gv-badge.bg-amber-500 { background: var(--color-accent-2-100); border-color: var(--color-accent-2-300); color: var(--color-accent-2-700); box-shadow: none; }
.gv-badge.bg-purple-700 { background: transparent; border-color: var(--color-accent-2-300); color: var(--color-accent-2-700); box-shadow: none; }
.gv-badge.bg-orange-600 { background: var(--color-neutral-100); border-color: var(--color-neutral-400); color: var(--color-neutral-800); box-shadow: none; }
.gv-badge.bg-gray-400,
.gv-badge.bg-gray-300 { background: var(--color-neutral-100); border-color: var(--color-neutral-300); color: var(--color-neutral-600); box-shadow: none; }

/* --- 5.6 Painel de detalhe (drawer): 520px, borda esquerda 3px preta ---- */
.gv-drawer {
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 520px;
  border: 0;
  border-left: 3px solid var(--color-text);
  border-radius: 0;
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@keyframes gv-drawer-in  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes gv-drawer-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
.gv-drawer-overlay {
  background: rgba(32, 30, 29, 0.28);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.gv-drawer .border-b,
.gv-drawer .border-t { border-color: var(--color-neutral-300); }
.gv-drawer h2 { font-family: var(--font-heading); font-size: var(--fs-panel); font-weight: 600; color: var(--color-text); letter-spacing: -0.01em; }
.gv-drawer h3 { font-family: var(--font-heading); color: var(--color-neutral-600); }
.gv-drawer .text-gray-500,
.gv-drawer .text-gray-400,
.gv-drawer .text-gray-600 { color: var(--color-neutral-600); }
.gv-drawer .text-2xl { font-family: var(--font-heading); font-size: var(--fs-panel); }
.gv-drawer .bg-gray-50 { background: var(--color-neutral-100); border-color: var(--color-neutral-300); }
.gv-drawer .text-\[\#1F4E79\] { color: var(--color-accent-700); }
/* Leitura do edital / itens de veredito: tinta spot (magenta = risco). */
.gv-drawer .text-red-700    { color: var(--color-accent-2-700); }
.gv-drawer .text-amber-700  { color: var(--color-accent-2-700); }
.gv-drawer .text-purple-800 { color: var(--color-accent-2-700); }
.gv-drawer .bg-purple-50    { background: var(--color-accent-2-100); border-color: var(--color-accent-2-300); }
.gv-drawer .bg-gray-100     { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.gv-drawer .rounded.border:hover { background: transparent; border-color: var(--color-accent); color: var(--color-accent-700); }
.gv-drawer::-webkit-scrollbar-thumb { background: var(--color-neutral-400); }

/* =========================================================================
 * DESIGN v3 — SaaS moderno com Sidebar (aprovado pelo stakeholder)
 * -------------------------------------------------------------------------
 * Fundacao global (sidebar + tokens) + Radar 100% convertido (kanban + tabela).
 * Portado do prototipo radar-v3-preview.html. Prefixo la- (LicitAdvisor) NAO
 * colide com a camada legada gv-* (Liquid Glass Epic 8 + Broadsheet), mantida
 * apenas para as telas ainda nao convertidas (dossie, cofre, custos, usuarios,
 * login, etc. — herdam este shell e serao convertidas por dentro numa rodada
 * posterior). Same-origin, escrito a mao, sem toolchain Node (SEC-002).
 * ========================================================================= */
:root {
  --la-bg: #eef1f8;
  --la-sidebar: #ffffff;
  --la-surface: #ffffff;
  --la-surface-2: #f7f9fc;
  --la-border: #e6e9f2;
  --la-border-strong: #d4d9e8;
  --la-hair: #eef1f7;
  --la-text: #131722;
  --la-text-muted: #5a6478;
  --la-text-subtle: #8a93a7;

  --la-accent: #2b53e6;
  --la-accent-hover: #1f40c4;
  --la-accent-soft: #e7ecfd;
  --la-accent-border: #c6d2fb;

  --la-good: #0f9d58; --la-good-bg: #e6f6ee; --la-good-bd: #bfe6ce;
  --la-warn: #e08a00; --la-warn-bg: #fdf2dd; --la-warn-bd: #f2d9a6;
  --la-bad:  #e5484d; --la-bad-bg:  #fdeaeb; --la-bad-bd:  #f6cccd;
  --la-info: #7c4dff; --la-info-bg: #efeafe; --la-info-bd: #dcccfb;
  --la-urgent: #e5484d;

  --la-r-sm: 8px; --la-r: 12px; --la-r-lg: 16px; --la-r-xl: 20px;
  --la-sh-xs: 0 1px 2px rgba(19,23,34,.05);
  --la-sh-sm: 0 1px 3px rgba(19,23,34,.06), 0 4px 12px rgba(19,23,34,.05);
  --la-sh-md: 0 12px 32px rgba(19,23,34,.12);
  --la-sh-lg: 0 24px 64px rgba(19,23,34,.2);
  --la-sh-tile: 0 6px 18px rgba(19,23,34,.10);

  --la-font: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --la-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* Shell base (aplicado ao body class="la-body" em base.html). */
.la-body {
  margin: 0;
  min-height: 100vh;
  background: var(--la-bg);
  color: var(--la-text);
  font-family: var(--la-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.la-mono { font-family: var(--la-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.la-kbd { font-family: var(--la-mono); font-size: 10.5px; padding: 2px 5px; border: 1px solid var(--la-border-strong); border-bottom-width: 2px; border-radius: 5px; color: var(--la-text-subtle); }
.la-hidden { display: none !important; }
.la-body :focus-visible { outline: 2px solid var(--la-accent); outline-offset: 2px; border-radius: 6px; }

.la-app { display: flex; min-height: 100vh; }

/* ---------------- Sidebar ---------------- */
.la-sidebar { width: 232px; flex-shrink: 0; background: var(--la-sidebar); border-right: 1px solid var(--la-border); display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; }
.la-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 22px; text-decoration: none; }
.la-brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--la-accent); color: #fff; display:flex; align-items:center; justify-content:center; box-shadow: 0 4px 12px rgba(43,83,230,.4), inset 0 1px 0 rgba(255,255,255,.35); flex-shrink: 0; }
.la-brand-name { font-size: 16px; font-weight: 720; letter-spacing: -.02em; color: var(--la-text); }
.la-brand-name b { color: var(--la-accent); font-weight: 720; }
.la-nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--la-text-subtle); font-weight: 650; padding: 6px 10px; }
.la-nav { display: flex; flex-direction: column; gap: 3px; list-style: none; margin: 0; padding: 0; }
.la-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: var(--la-r); font-size: 13.5px; font-weight: 550; color: var(--la-text-muted); transition: .12s; text-decoration: none; }
.la-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.la-nav a:hover { background: var(--la-surface-2); color: var(--la-text); }
.la-nav a.la-active { background: var(--la-accent-soft); color: var(--la-accent); font-weight: 620; }
.la-side-card { margin-top: auto; background: linear-gradient(160deg, #2b53e6, #6a3ff0); color: #fff; border-radius: var(--la-r-lg); padding: 16px; box-shadow: var(--la-sh-tile); }
.la-side-card h4 { font-size: 13.5px; font-weight: 680; margin: 0; }
.la-side-card p { font-size: 12px; opacity: .88; margin: 4px 0 0; line-height: 1.4; }

/* ---------------- Main ---------------- */
.la-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.la-topbar { display: flex; align-items: center; gap: 16px; padding: 16px 26px; }
.la-search { display: flex; align-items: center; gap: 8px; width: 300px; padding: 9px 10px 9px 13px; background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r); color: var(--la-text-subtle); font-size: 13px; box-shadow: var(--la-sh-xs); }
.la-search:focus-within { border-color: var(--la-accent); box-shadow: 0 0 0 3px var(--la-accent-soft); }
.la-search input { border: 0; outline: 0; background: transparent; flex: 1; font: inherit; color: var(--la-text); min-width: 0; }
/* Busca do topbar (Radar divida #4) — dropdown de resultados via HTMX. O wrap da
   posicao relativa para o painel absoluto de resultados. Vazio (:empty) fica oculto:
   o dropdown so aparece quando ha fragmento (resultados ou estado "nada encontrado"). */
.la-search-wrap { position: relative; width: 300px; }
.la-search-wrap .la-search { width: 100%; }
.la-busca-resultados:empty { display: none; }
.la-busca-resultados { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 45; background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r); box-shadow: var(--la-sh-md); max-height: 62vh; overflow-y: auto; }
.la-busca-empty { padding: 16px 14px; font-size: 13px; color: var(--la-text-subtle); text-align: center; }
.la-busca-item { display: flex; flex-direction: column; gap: 5px; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--la-hair); cursor: pointer; text-align: left; width: 100%; background: none; }
.la-busca-item:last-child { border-bottom: 0; }
.la-busca-item:hover { background: var(--la-surface-2); }
.la-busca-item-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.la-busca-item-num { font-family: var(--la-mono); font-size: 11px; color: var(--la-text-subtle); flex-shrink: 0; }
.la-busca-item-obj { font-size: 13px; font-weight: 580; color: var(--la-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* SENT-001 (dropdown de busca): reusa os MESMOS card views, logo o mesmo tratamento neutro. */
.la-busca-item-obj.la-muted { color: var(--la-text-subtle); font-style: italic; font-weight: 500; }
.la-busca-item-sub { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--la-text-muted); min-width: 0; }
.la-busca-item-org { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.la-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.la-who { font-size: 12px; color: var(--la-text-subtle); }
.la-avatar { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(140deg,#3355e8,#7b3fd6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:650; }
.la-logout-btn { padding: 8px 13px; border-radius: var(--la-r); background: var(--la-surface); border: 1px solid var(--la-border); color: var(--la-text-muted); font-size: 12.5px; font-weight: 560; cursor: pointer; box-shadow: var(--la-sh-xs); }
.la-logout-btn:hover { color: var(--la-text); background: var(--la-surface-2); }

/* Seletor de empresa ativa (Story 9.4) — reestilizado no topbar v3. Contrato
   preservado: details/summary + form action="/empresas/{id}/ativar" + csrf. */
.la-empresa { position: relative; }
.la-empresa-active,
.la-empresa-summary { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r); font-size: 12.5px; font-weight: 560; color: var(--la-text); box-shadow: var(--la-sh-xs); cursor: pointer; list-style: none; }
.la-empresa-summary::-webkit-details-marker { display: none; }
.la-empresa-summary:hover { background: var(--la-surface-2); }
.la-empresa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--la-good); flex-shrink: 0; }
.la-empresa-caret { color: var(--la-text-subtle); font-size: 10px; }
.la-empresa-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 260px; background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r); box-shadow: var(--la-sh-md); padding: 6px; list-style: none; margin: 0; }
.la-empresa-menu li { list-style: none; }
.la-empresa-menu form { margin: 0; }
.la-empresa-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 9px 10px; border-radius: var(--la-r-sm); background: none; border: 0; cursor: pointer; position: relative; }
.la-empresa-opt:hover { background: var(--la-surface-2); }
.la-empresa-opt-active { background: var(--la-accent-soft); }
.la-empresa-opt-nm { font-size: 13px; font-weight: 580; color: var(--la-text); }
.la-empresa-opt-cnpj { font-family: var(--la-mono); font-size: 11px; color: var(--la-text-subtle); }
.la-empresa-opt-check { position: absolute; right: 10px; top: 10px; color: var(--la-accent); font-weight: 700; }

.la-content { padding: 6px 26px 40px; }

/* ---------------- Radar: cabecalho da pagina ---------------- */
.la-eyebrow { font-family: var(--la-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--la-accent); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.la-eyebrow .la-live { display: inline-flex; align-items: center; gap: 6px; color: var(--la-good); }
.la-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--la-good); animation: la-pulse 2.4s infinite; }
@keyframes la-pulse { 0%{box-shadow:0 0 0 0 rgba(15,157,88,.45);} 70%{box-shadow:0 0 0 7px rgba(15,157,88,0);} 100%{box-shadow:0 0 0 0 rgba(15,157,88,0);} }
.la-page-title { font-size: 25px; font-weight: 730; letter-spacing: -.03em; margin: 8px 0 4px; }
.la-page-sub { font-size: 13.5px; color: var(--la-text-muted); max-width: 62ch; margin: 0 0 22px; }

/* ---------------- KPI tiles ---------------- */
.la-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; margin-bottom: 16px; }
.la-tile { background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r-lg); padding: 16px 18px; box-shadow: var(--la-sh-sm); display: flex; gap: 13px; align-items: center; }
.la-tile-ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.la-tile-ic svg { width: 21px; height: 21px; }
.la-tile-body { min-width: 0; }
.la-tile-value { font-size: 23px; font-weight: 730; letter-spacing: -.02em; }
.la-tile-label { font-size: 12px; color: var(--la-text-muted); margin-top: 1px; }
.la-ic-accent { background: var(--la-accent-soft); color: var(--la-accent); }
.la-ic-good { background: var(--la-good-bg); color: var(--la-good); }
.la-ic-warn { background: var(--la-warn-bg); color: var(--la-warn); }
.la-ic-neutral { background: #eef0f5; color: var(--la-text-subtle); }
.la-val-good { color: var(--la-good); }
.la-val-warn { color: var(--la-warn); }

/* ---------------- Linha: painel + tiles de acao ---------------- */
.la-row2 { display: grid; grid-template-columns: 1.7fr 1fr; gap: 15px; margin-bottom: 22px; }
.la-card-panel { background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r-lg); padding: 18px; box-shadow: var(--la-sh-sm); margin: 0; }
.la-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.la-panel-title { font-size: 14px; font-weight: 680; }
.la-panel-hint { font-family: var(--la-mono); font-size: 11px; color: var(--la-text-subtle); }
/* Estado vazio honesto do grafico (Article IV): sem historico real de captura, nao
   inventa barras. Divida registrada para @data-engineer expor a serie 7 dias. */
.la-chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 128px; color: var(--la-text-subtle); text-align: center; }
.la-chart-empty svg { width: 26px; height: 26px; opacity: .6; }
.la-chart-empty span { font-size: 12.5px; }
/* Grafico de barras "capturas por dia" (Radar divida #3). Portado do prototipo
   (.chart/.bar*). Serie UNICA, cor accent, sem eixo duplo (regra de dataviz). So e
   desenhado quando ha >=1 dia com captura; base sem historico cai no .la-chart-empty
   acima (estado vazio honesto — Article IV, nunca barras fabricadas). */
.la-chart { display: flex; align-items: flex-end; gap: 10px; height: 128px; padding-top: 18px; }
.la-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.la-bar-wrap { position: relative; width: 100%; max-width: 34px; height: 100%; display: flex; align-items: flex-end; }
.la-bar { width: 100%; background: var(--la-accent); border-radius: 5px 5px 0 0; transition: background .12s; }
.la-bar-col:hover .la-bar { background: var(--la-accent-hover); }
.la-bar-col.la-peak .la-bar { background: var(--la-accent); }
.la-bar-val { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-family: var(--la-mono); font-size: 11px; font-weight: 650; color: var(--la-text); opacity: 0; transition: opacity .12s; }
.la-bar-col:hover .la-bar-val, .la-bar-col.la-peak .la-bar-val { opacity: 1; }
.la-bar-x { font-size: 11px; color: var(--la-text-subtle); }
.la-chart-base { height: 1px; background: var(--la-border); margin-top: -1px; }

.la-actions { display: flex; flex-direction: column; gap: 12px; }
.la-action { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: var(--la-r-lg); color: #fff; box-shadow: var(--la-sh-tile); cursor: pointer; transition: transform .12s; border: 0; width: 100%; text-align: left; }
.la-action:hover { transform: translateY(-2px); }
.la-action-ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.la-action-ic svg { width: 20px; height: 20px; }
.la-action-n { font-size: 22px; font-weight: 760; letter-spacing: -.02em; line-height: 1; }
.la-action-l { font-size: 12.5px; opacity: .92; margin-top: 3px; }
.la-action-go { margin-left: auto; font-size: 18px; opacity: .8; }
.la-a-green{ background: linear-gradient(140deg,#18b268,#0f9350); }
.la-a-amber{ background: linear-gradient(140deg,#f5a623,#e0850a); }
.la-a-red  { background: linear-gradient(140deg,#f2545b,#d6363d); }

/* ---------------- Radar: cabecalho da secao + toggle ---------------- */
.la-radar-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.la-radar-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.la-toggle { display: inline-flex; background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r); padding: 3px; box-shadow: var(--la-sh-xs); }
.la-toggle button { padding: 6px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 580; color: var(--la-text-muted); display: flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; }
.la-toggle button svg { width: 15px; height: 15px; }
.la-toggle button.la-on { background: var(--la-accent-soft); color: var(--la-accent); }
.la-radar-head .la-count { margin-left: auto; font-family: var(--la-mono); font-size: 12px; color: var(--la-text-subtle); }

/* ---------------- Kanban ---------------- */
.la-board { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; align-items: start; }
.la-col { min-width: 0; }
.la-col-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 12px; }
.la-col-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.la-col-name { font-size: 12px; font-weight: 680; text-transform: uppercase; letter-spacing: .04em; }
.la-col-count { font-family: var(--la-mono); font-size: 11px; color: var(--la-text-subtle); background: var(--la-surface); border: 1px solid var(--la-border); border-radius: 999px; padding: 1px 8px; }
.la-cd-novo{background:var(--la-accent);} .la-cd-em_analise{background:var(--la-warn);} .la-cd-participando{background:var(--la-good);} .la-cd-descartado{background:var(--la-text-subtle);}
.la-stack { display: flex; flex-direction: column; gap: 12px; }
.la-col-empty { font-size: 12.5px; color: var(--la-text-subtle); padding: 14px; border: 1px dashed var(--la-border-strong); border-radius: 12px; text-align: center; }

/* ---------------- Card ---------------- */
.la-card { position: relative; background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r-lg); padding: 15px; box-shadow: var(--la-sh-sm); transition: transform .14s, box-shadow .14s; }
.la-card-open { cursor: pointer; }
.la-card-open:hover { transform: translateY(-3px); box-shadow: var(--la-sh-md); }
.la-card-kick { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.la-verd { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 640; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; }
.la-v-good{color:var(--la-good);background:var(--la-good-bg);border-color:var(--la-good-bd);}
.la-v-warn{color:var(--la-warn);background:var(--la-warn-bg);border-color:var(--la-warn-bd);}
.la-v-bad{color:var(--la-bad);background:var(--la-bad-bg);border-color:var(--la-bad-bd);}
.la-v-info{color:var(--la-info);background:var(--la-info-bg);border-color:var(--la-info-bd);}
.la-v-muted{color:var(--la-text-subtle);background:var(--la-surface-2);border-color:var(--la-border);}
.la-card-prazo { margin-left: auto; font-family: var(--la-mono); font-size: 11.5px; font-weight: 620; color: var(--la-text-muted); }
.la-card-prazo.la-urgent { color: var(--la-urgent); }
.la-card-title { font-size: 14.5px; font-weight: 650; line-height: 1.34; letter-spacing: -.01em; margin: 0; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.la-card-meta { margin: 6px 0 0; font-size: 12.5px; color: var(--la-text-muted); }
/* SENT-001: objeto/local sentinela (sigiloso/ausente/revisao) — texto neutro e italico,
   mesmo idioma visual de `.la-card-valor.la-muted`: sinalizacao, nao dado do edital. */
.la-card-title.la-muted, .la-card-meta.la-muted { color: var(--la-text-subtle); font-style: italic; font-weight: 500; }
.la-card-flags { display: flex; gap: 5px; margin-top: 9px; flex-wrap: wrap; }
.la-flag { font-family: var(--la-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--la-text-subtle); border: 1px solid var(--la-border); border-radius: 6px; padding: 2px 7px; }
.la-flag-warn { color: var(--la-warn); border-color: var(--la-warn-bd); background: var(--la-warn-bg); }
.la-card-foot { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--la-hair); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.la-card-valor { font-family: var(--la-mono); font-size: 14.5px; font-weight: 650; letter-spacing: -.02em; }
.la-card-valor.la-muted { color: var(--la-text-subtle); font-size: 12px; font-weight: 500; font-style: italic; }
/* "Mover para" — zona separada, nao abre o drawer (contrato preservado). */
.la-mover { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--la-hair); }
.la-mover-label { font-size: 11px; color: var(--la-text-subtle); margin-right: 2px; }
.la-mover button { font-size: 11.5px; font-weight: 540; color: var(--la-text-muted); padding: 5px 10px; border-radius: var(--la-r-sm); border: 1px solid var(--la-border); background: var(--la-surface); cursor: pointer; }
.la-mover button:hover { background: var(--la-surface-2); color: var(--la-text); border-color: var(--la-border-strong); }
/* Numero do edital como eyebrow do card (Radar divida #2). Omitido quando None. */
.la-card-edital { font-family: var(--la-mono); font-size: 11px; color: var(--la-text-subtle); }

/* ---------------- Barra de aderencia (Radar divida #1) ----------------
   Score documental 0-100 do veredito. Cor por faixa: >=75 hi (good), 55-74 mid
   (warn), <55 lo (bad). Portado do prototipo (.adere/.a-hi/.a-mid/.a-lo). Score
   None NAO renderiza barra (Article IV) — o template omite; nao ha faixa "vazia". */
.la-adere { width: 96px; }
.la-adere-top { display: flex; justify-content: space-between; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--la-text-subtle); margin-bottom: 4px; }
.la-adere-pct { font-family: var(--la-mono); font-weight: 650; }
.la-adere-bar { position: relative; height: 6px; background: var(--la-bg); border-radius: 999px; overflow: hidden; }
.la-adere-bar > i { display: block; height: 100%; border-radius: 999px; }
.la-a-hi > i { background: var(--la-good); } .la-a-hi .la-adere-pct { color: var(--la-good); }
.la-a-mid > i { background: var(--la-warn); } .la-a-mid .la-adere-pct { color: var(--la-warn); }
.la-a-lo > i { background: var(--la-bad); } .la-a-lo .la-adere-pct { color: var(--la-bad); }

/* ---------------- Tabela ---------------- */
.la-table-wrap { background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r-lg); box-shadow: var(--la-sh-sm); overflow: hidden; }
.la-table { width: 100%; border-collapse: collapse; }
.la-table thead th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--la-text-subtle); font-weight: 650; padding: 13px 16px; border-bottom: 1px solid var(--la-border); background: var(--la-surface-2); }
.la-table th.la-right, .la-table td.la-right { text-align: right; }
.la-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--la-hair); font-size: 13px; vertical-align: middle; }
.la-table tbody tr:last-child td { border-bottom: 0; }
.la-table tbody tr.la-row-open { cursor: pointer; transition: background .1s; }
.la-table tbody tr.la-row-open:hover { background: var(--la-surface-2); }
.la-t-edital { font-family: var(--la-mono); font-size: 12px; color: var(--la-text-subtle); }
.la-t-obj { font-weight: 580; letter-spacing: -.01em; max-width: 340px; }
.la-t-org { color: var(--la-text-muted); font-size: 12px; margin-top: 2px; }
/* SENT-001 (visao tabela): mesmo tratamento neutro do card para objeto/local sentinela. */
.la-t-obj.la-muted, .la-t-org .la-muted { color: var(--la-text-subtle); font-style: italic; font-weight: 500; }
.la-t-dash { color: var(--la-text-subtle); }
.la-table-empty { padding: 28px 16px; text-align: center; color: var(--la-text-subtle); font-size: 13px; }
/* Celula de aderencia da tabela (Radar divida #1): barra estreita + %. */
.la-t-adere { display: flex; align-items: center; gap: 8px; }
.la-t-adere .la-adere-bar { width: 60px; }

/* ---------------- Navegação mobile (hambúrguer + gaveta) ----------------
   Acessibilidade (apontado pela Uma): em telas estreitas a sidebar virava
   display:none e a navegação ficava inacessível. Agora ela vira uma GAVETA da
   esquerda sobre overlay, aberta por um hambúrguer no topbar. Desktop (>820px)
   permanece IDÊNTICO (hambúrguer + overlay ocultos; sidebar sticky). É a MESMA
   sidebar — só o comportamento responsivo muda (conteúdo/lógica preservados). */
.la-hamburger { display: none; width: 38px; height: 38px; border-radius: var(--la-r); background: var(--la-surface); border: 1px solid var(--la-border); color: var(--la-text-muted); align-items: center; justify-content: center; box-shadow: var(--la-sh-xs); cursor: pointer; flex-shrink: 0; }
.la-hamburger:hover { color: var(--la-text); background: var(--la-surface-2); }
.la-hamburger svg { width: 20px; height: 20px; }
.la-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15,19,30,.46); z-index: 59; }

@media (max-width: 1180px){ .la-kpis{grid-template-columns:repeat(2,1fr);} .la-row2{grid-template-columns:1fr;} .la-board{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 820px){
  .la-board,.la-kpis{grid-template-columns:1fr;}
  .la-search,.la-search-wrap{width:auto;flex:1;}
  .la-hamburger{display:inline-flex;}
  /* Sidebar como gaveta off-canvas (substitui o antigo display:none). */
  .la-sidebar{ position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; z-index: 60; transform: translateX(-100%); transition: transform .26s cubic-bezier(.4,0,.2,1); box-shadow: var(--la-sh-lg); }
  .la-nav-open .la-sidebar{ transform: translateX(0); }
  .la-nav-open .la-sidebar-overlay{ display: block; }
}
@media (prefers-reduced-motion: reduce){ .la-live-dot{animation:none;} .la-card,.la-action{transition:none;} .la-sidebar{transition:none;} }

/* ---------------- Overrides v3 de superficies legadas reutilizadas ---------------- */
/* Drawer de detalhe (card_detail.html mantem .gv-drawer p/ o contrato closeDetail):
   apenas afina para o branco/azul do v3 sobre a base clara ja existente (Broadsheet). */
.gv-drawer { background: var(--la-surface); }
.gv-drawer .text-\[\#1F4E79\] { color: var(--la-accent); }
.gv-drawer .rounded.border:hover { border-color: var(--la-accent); color: var(--la-accent-hover); }
/* Barra de status da captura PNCP (fragmento HTMX _captura_status.html): tema claro v3. */
.gv-captura-bar { margin-bottom: 22px; }
.gv-captura { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r); padding: 11px 15px; box-shadow: var(--la-sh-xs); }
.gv-captura-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--la-text-muted); }
.gv-captura-txt { color: var(--la-text-muted); }
.gv-captura-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--la-good); }
.gv-captura-dot-off { background: var(--la-text-subtle); }
.gv-captura-dot-run { background: var(--la-warn); }
.gv-captura-btn { margin-left: auto; padding: 7px 13px; border-radius: var(--la-r-sm); background: var(--la-accent-soft); color: var(--la-accent); border: 1px solid var(--la-accent-border); font-size: 12.5px; font-weight: 580; cursor: pointer; }
.gv-captura-btn:hover { background: var(--la-accent); color: #fff; }
.gv-captura-btn:disabled { opacity: .6; cursor: default; }

/* =========================================================================
 * AUTH (v3) — telas standalone de autenticacao (login, reset, troca de senha)
 * -------------------------------------------------------------------------
 * HOTFIX de producao: essas telas herdavam o Liquid Glass (Epic 8, fundo
 * ESCURO) — vidro translucido + texto claro. Com a aurora escondida no reskin
 * v3 (fundo CLARO), campos e rotulos ficavam INVISIVEIS. Aqui: tema CLARO puro
 * derivado dos tokens --la-*, com campos de borda e texto ESCUROS visiveis.
 * Prefixo la-auth-. Standalone (sem sidebar/shell). Same-origin, sem CDN, sem
 * toolchain Node (SEC-002).
 * ========================================================================= */
body.la-auth-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--la-bg);
  color: var(--la-text);
  font-family: var(--la-font);
}
.la-auth-card {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  background: var(--la-surface);
  border: 1px solid var(--la-border);
  border-radius: var(--la-r-lg);
  box-shadow: var(--la-sh-sm);
  padding: 28px 26px;
}
.la-auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.la-auth-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--la-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 730;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(43, 83, 230, .4), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.la-auth-brand-name { font-size: 17px; font-weight: 720; letter-spacing: -.02em; color: var(--la-text); }
.la-auth-brand-name b { color: var(--la-accent); font-weight: 720; }
.la-auth-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--la-text); text-align: center; }
.la-auth-sub { margin: 4px 0 20px; font-size: 12.5px; color: var(--la-text-muted); text-align: center; }
.la-auth-field { display: block; margin-bottom: 14px; }
.la-auth-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 560; color: var(--la-text-muted); }
.la-auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--la-text);
  background: var(--la-surface);
  border: 1px solid var(--la-border-strong);
  border-radius: var(--la-r-sm);
  transition: border-color .12s, box-shadow .12s;
}
.la-auth-input::placeholder { color: var(--la-text-subtle); }
.la-auth-input:focus,
.la-auth-input:focus-visible {
  outline: none;
  border-color: var(--la-accent);
  box-shadow: 0 0 0 3px var(--la-accent-soft);
}
.la-auth-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 620;
  color: #fff;
  background: var(--la-accent);
  border: 1px solid var(--la-accent);
  border-radius: var(--la-r-sm);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
.la-auth-btn:hover { background: var(--la-accent-hover); border-color: var(--la-accent-hover); color: #fff; }
.la-auth-alert {
  margin-top: 14px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--la-bad);
  background: var(--la-bad-bg);
  border: 1px solid var(--la-bad-bd);
  border-radius: var(--la-r-sm);
}
.la-auth-note { margin: 12px 0 0; font-size: 13px; color: var(--la-text-muted); text-align: center; }
.la-auth-foot { margin: 18px 0 0; font-size: 11px; color: var(--la-text-subtle); text-align: center; }

/* =========================================================================
 * CONTEUDO INTERNO (v3) — camada de componentes das TELAS internas do painel
 * -------------------------------------------------------------------------
 * Rollout do design system v3 (SaaS/Sidebar) para o CONTEUDO das telas
 * internas (cofre, empresas, usuarios, dossie, onboarding, auditoria, custos,
 * health, llm-config, drawer). Antes esse conteudo herdava o Liquid Glass
 * (Epic 8, fundo ESCURO): campos de vidro + texto claro que, sob o shell CLARO
 * da v3, ficavam INVISIVEIS (mesmo bug do login). Aqui: tema CLARO puro
 * derivado dos tokens --la-*, com inputs de borda e texto ESCUROS, paineis
 * brancos com contraste e chips legiveis. Prefixo la-. Same-origin, escrito a
 * mao, sem toolchain Node (SEC-002).
 * ========================================================================= */

/* ---------------- Utilitarios ---------------- */
.la-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.la-content code { font-family: var(--la-mono); font-size: .92em; background: var(--la-surface-2); border: 1px solid var(--la-border); border-radius: 5px; padding: 1px 5px; color: var(--la-text); }
.la-mono-inline { font-family: var(--la-mono); font-variant-numeric: tabular-nums; }

/* ---------------- Cabecalho de pagina (titulo + acao) ---------------- */
.la-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.la-page-head .la-page-title { margin: 0; }
.la-page-lead { font-size: 13.5px; color: var(--la-text-muted); max-width: 70ch; margin: 6px 0 18px; }

/* ---------------- Painel / card de superficie ---------------- */
.la-panel { background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r-lg); box-shadow: var(--la-sh-sm); padding: 20px; }
.la-panel + .la-panel { margin-top: 15px; }
.la-panel-narrow { max-width: 560px; }

/* ---------------- Formularios ---------------- */
.la-form { margin: 0; }
.la-form-title { margin: 0 0 4px; font-size: 20px; font-weight: 720; letter-spacing: -.02em; color: var(--la-text); }
.la-form-sub { margin: 0 0 18px; font-size: 13px; color: var(--la-text-muted); line-height: 1.5; }
.la-field { display: block; margin-bottom: 14px; }
.la-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.la-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 560; color: var(--la-text-muted); }
.la-req { color: var(--la-bad); font-weight: 700; }
.la-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--la-text);
  background: var(--la-surface);
  border: 1px solid var(--la-border-strong);
  border-radius: var(--la-r-sm);
  transition: border-color .12s, box-shadow .12s;
}
.la-input::placeholder { color: var(--la-text-subtle); }
.la-input:focus,
.la-input:focus-visible {
  outline: none;
  border-color: var(--la-accent);
  box-shadow: 0 0 0 3px var(--la-accent-soft);
}
select.la-input { appearance: none; -webkit-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='%238a93a7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }
.la-textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.la-input[type="file"] { padding: 8px 12px; }
.la-input[type="file"]::file-selector-button { font: inherit; font-size: 12.5px; font-weight: 560; margin-right: 10px; padding: 6px 11px; border: 1px solid var(--la-border-strong); border-radius: var(--la-r-sm); background: var(--la-surface-2); color: var(--la-text-muted); cursor: pointer; }
.la-field-hint { margin: 6px 0 0; font-size: 12px; color: var(--la-text-subtle); }
.la-field-err { margin: 6px 0 0; font-size: 12.5px; color: var(--la-bad); }
.la-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ---------------- Botoes ---------------- */
.la-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 15px;
  font: inherit; font-size: 13.5px; font-weight: 580;
  border-radius: var(--la-r-sm);
  border: 1px solid var(--la-border-strong);
  background: var(--la-surface);
  color: var(--la-text);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.la-btn:hover { background: var(--la-surface-2); border-color: var(--la-border-strong); color: var(--la-text); }
.la-btn-primary { background: var(--la-accent); border-color: var(--la-accent); color: #fff; }
.la-btn-primary:hover { background: var(--la-accent-hover); border-color: var(--la-accent-hover); color: #fff; }
.la-btn-secondary { background: var(--la-surface); border-color: var(--la-border-strong); color: var(--la-text); }
.la-btn-sm { padding: 7px 12px; font-size: 12.5px; }

/* ---------------- Alertas / banners ---------------- */
.la-alert { margin: 0 0 16px; padding: 11px 14px; font-size: 13px; line-height: 1.5; border-radius: var(--la-r-sm); border: 1px solid var(--la-border); background: var(--la-surface-2); color: var(--la-text); }
.la-alert strong { font-weight: 650; }
.la-alert-good { background: var(--la-good-bg); border-color: var(--la-good-bd); color: #0b7a44; }
.la-alert-warn { background: var(--la-warn-bg); border-color: var(--la-warn-bd); color: #9a6400; }
.la-alert-bad  { background: var(--la-bad-bg);  border-color: var(--la-bad-bd);  color: #b3272c; }
.la-code { display: block; margin-top: 8px; font-family: var(--la-mono); font-size: 13px; word-break: break-all; background: var(--la-surface); border: 1px solid var(--la-border-strong); border-radius: var(--la-r-sm); padding: 9px 11px; color: var(--la-text); }

/* ---------------- Badges (informativos, neutros e legiveis) ---------------- */
.la-badge { display: inline-block; font-size: 11px; font-weight: 620; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--la-accent-soft); border: 1px solid var(--la-accent-border); color: var(--la-accent); white-space: nowrap; }
.la-badge-good { background: var(--la-good-bg); border-color: var(--la-good-bd); color: #0b7a44; }
.la-badge-warn { background: var(--la-warn-bg); border-color: var(--la-warn-bd); color: #9a6400; }
.la-badge-bad  { background: var(--la-bad-bg);  border-color: var(--la-bad-bd);  color: #b3272c; }
.la-badge-neutral { background: var(--la-surface-2); border-color: var(--la-border-strong); color: var(--la-text-muted); }

/* ---------------- Listas de cards (empresas / usuarios) ---------------- */
.la-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.la-list-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r-lg); box-shadow: var(--la-sh-sm); padding: 16px 18px; }
.la-list-card-info { min-width: 0; }
.la-list-card-nm { margin: 0; font-size: 15px; font-weight: 640; letter-spacing: -.01em; color: var(--la-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.la-list-card-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--la-text-muted); }
.la-list-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.la-inline-form { margin: 0; display: inline; }

/* ---------------- Estado vazio ---------------- */
.la-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r-lg); box-shadow: var(--la-sh-sm); padding: 40px 28px; }
.la-empty-icon { font-size: 34px; line-height: 1; }
.la-empty-title { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--la-text); }
.la-empty-text { margin: 0 0 6px; font-size: 13px; color: var(--la-text-muted); max-width: 52ch; }

/* ---------------- Tabela (auditoria / custos) — herda a base .la-table ---------------- */
.la-table tfoot td { padding: 12px 16px; border-top: 1px solid var(--la-border); font-size: 13px; background: var(--la-surface-2); }
.la-table tfoot strong { font-weight: 700; }
.la-table caption { text-align: left; padding: 0 0 10px; color: var(--la-text-muted); font-size: 12.5px; }
.la-pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--la-text-muted); }
.la-pager .la-btn { margin-left: 0; }

/* ---------------- Chips de validade (dossie / onboarding) — RESTYLE v3 -----
   Contrato preservado: os nomes .gv-vchip-ok/warn/bad/none sao emitidos pelo
   presenter (presenters.py) e ASSERTADOS nos testes; aqui APENAS a aparencia
   migra para o tema claro v3 (texto ESCURO sobre tint claro, legivel). Estas
   regras vem depois da definicao Liquid Glass (linha ~750) e vencem por ordem
   de origem/mesma especificidade. */
.gv-vchip { display: inline-block; flex-shrink: 0; font-size: 10.5px; font-weight: 640; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--la-border); }
.gv-vchip-ok   { background: var(--la-good-bg); border-color: var(--la-good-bd); color: #0b7a44; }
.gv-vchip-warn { background: var(--la-warn-bg); border-color: var(--la-warn-bd); color: #9a6400; }
.gv-vchip-bad  { background: var(--la-bad-bg);  border-color: var(--la-bad-bd);  color: #b3272c; }
.gv-vchip-none { background: var(--la-surface-2); border-color: var(--la-border-strong); color: var(--la-text-subtle); }

/* ---------------- Dossie ---------------- */
.la-dossie { display: block; }
.la-dossie-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r-lg); box-shadow: var(--la-sh-sm); padding: 20px; margin-bottom: 16px; }
.la-dossie-empresa h2 { margin: 0; font-size: 19px; font-weight: 720; letter-spacing: -.02em; color: var(--la-text); }
.la-dossie-empresa p { margin: 5px 0 0; font-size: 12.5px; color: var(--la-text-muted); }
.la-dossie-stats { display: flex; gap: 10px; }
.la-stat { min-width: 62px; text-align: center; padding: 8px 12px; border-radius: var(--la-r); border: 1px solid var(--la-border); background: var(--la-surface-2); }
.la-stat-n { font-family: var(--la-mono); font-size: 20px; font-weight: 730; letter-spacing: -.02em; }
.la-stat-l { font-size: 11px; color: var(--la-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.la-stat-ok   { background: var(--la-good-bg); border-color: var(--la-good-bd); }
.la-stat-ok .la-stat-n   { color: #0b7a44; }
.la-stat-warn { background: var(--la-warn-bg); border-color: var(--la-warn-bd); }
.la-stat-warn .la-stat-n { color: #9a6400; }
.la-stat-bad  { background: var(--la-bad-bg);  border-color: var(--la-bad-bd); }
.la-stat-bad .la-stat-n  { color: #b3272c; }
.la-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 16px; }
.la-cat { background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r-lg); box-shadow: var(--la-sh-sm); padding: 16px 18px; }
.la-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.la-cat-title { font-size: 14px; font-weight: 680; color: var(--la-text); }
.la-cat-ref { font-family: var(--la-mono); font-size: 11px; color: var(--la-text-subtle); }
.la-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.la-cat-empty { margin: 0; font-size: 12.5px; color: var(--la-text-subtle); padding: 10px; border: 1px dashed var(--la-border-strong); border-radius: var(--la-r-sm); text-align: center; }
.la-doc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: var(--la-r-sm); background: var(--la-surface-2); border: 1px solid var(--la-hair); }
.la-doc-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.la-doc-nm { font-size: 13px; font-weight: 580; color: var(--la-text); }
.la-doc-dt { font-size: 11.5px; color: var(--la-text-muted); }

/* ---------------- Onboarding ---------------- */
.la-onb-head { background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r-lg); box-shadow: var(--la-sh-sm); padding: 18px 20px; margin-bottom: 15px; }
.la-onb-title { margin: 0; font-size: 20px; font-weight: 720; letter-spacing: -.02em; color: var(--la-text); }
.la-onb-empresa { margin: 5px 0 0; font-size: 12.5px; color: var(--la-text-muted); }
.la-onb-panel { background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r-lg); box-shadow: var(--la-sh-sm); padding: 20px; margin-bottom: 15px; }
.la-onb-sub { margin: 0 0 14px; font-size: 15px; font-weight: 680; color: var(--la-text); }
.la-onb-done { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
.la-onb-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.la-onb-doc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--la-r-sm); background: var(--la-surface-2); border: 1px solid var(--la-hair); }
.la-onb-doc-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.la-onb-doc-nm { font-size: 13px; font-weight: 580; color: var(--la-text); }
.la-onb-doc-file { font-size: 11.5px; color: var(--la-text-muted); }
.la-onb-doc-cat { font-size: 11px; color: var(--la-text-subtle); text-transform: uppercase; letter-spacing: .04em; }
.la-onb-empty { margin: 0; font-size: 12.5px; color: var(--la-text-subtle); }

/* ---------------- Zona de upload (dossie inline) ---------------- */
.la-upload-zone { display: flex; flex-direction: column; gap: 12px; background: var(--la-surface); border: 1px solid var(--la-border); border-radius: var(--la-r-lg); box-shadow: var(--la-sh-sm); padding: 18px 20px; margin-top: 16px; }
.la-upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.la-upload-field { display: flex; flex-direction: column; gap: 6px; }
.la-upload-label { font-size: 12.5px; font-weight: 560; color: var(--la-text-muted); }
.la-upload-hint { margin: 2px 0 0; font-size: 12px; color: var(--la-text-subtle); }
.la-upload-feedback { margin-top: 10px; font-size: 13px; color: var(--la-text-muted); }

/* ---------------- Toast de movimentacao (fragmento HTMX) ---------------- */
.la-toast { display: inline-block; background: var(--la-good); color: #fff; font-size: 13px; font-weight: 560; padding: 8px 14px; border-radius: var(--la-r-sm); box-shadow: var(--la-sh-md); }

/* =========================================================================
 * DRAWER de detalhe (card_detail.html) — RESTYLE v3 completo
 * -------------------------------------------------------------------------
 * O contrato JS/HTMX e preservado: o elemento mantem `gv-drawer` (hook do
 * closeDetail + animacao de entrada/saida ja definida no Epic 8) e o overlay
 * mantem `gv-drawer-overlay`. As classes `la-drawer-*` (definidas apos as
 * camadas Liquid Glass/Broadsheet) sobrescrevem a APARENCIA para o tema claro.
 * ========================================================================= */
.gv-drawer.la-drawer { position: fixed; right: 0; top: 0; bottom: 0; height: 100vh; width: 100%; max-width: 490px; border: 0; border-radius: 0; background: var(--la-surface); color: var(--la-text); box-shadow: var(--la-sh-lg); overflow-y: auto; z-index: 50; }
.la-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--la-hair); position: sticky; top: 0; background: var(--la-surface); z-index: 1; }
.la-drawer-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--la-text); }
.la-drawer-close { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; border-radius: var(--la-r-sm); border: 1px solid var(--la-border); background: var(--la-surface); color: var(--la-text-muted); font-size: 16px; cursor: pointer; }
.la-drawer-close:hover { background: var(--la-surface-2); color: var(--la-text); }
.la-drawer-badges { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px; border-bottom: 1px solid var(--la-hair); }
.la-drawer-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.la-drawer-block { display: block; }
.la-drawer-valor { margin: 0; font-family: var(--la-mono); font-size: 23px; font-weight: 730; letter-spacing: -.02em; color: var(--la-text); }
.la-drawer-valor.la-muted { color: var(--la-text-subtle); font-style: italic; font-size: 16px; }
.la-drawer-objeto { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--la-text); }
.la-drawer-local { margin: 5px 0 0; font-size: 12.5px; color: var(--la-text-muted); }
/* SENT-001 (drawer da Story 4.4): objeto/local sentinela em neutro+italico, igual ao valor. */
.la-drawer-objeto.la-muted, .la-drawer-local.la-muted { color: var(--la-text-subtle); font-style: italic; font-weight: 500; }
.la-drawer-sec { margin: 0 0 8px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--la-text-subtle); }
.la-drawer-box { border: 1px solid var(--la-border); border-radius: var(--la-r-sm); background: var(--la-surface-2); padding: 12px; font-size: 13px; color: var(--la-text); line-height: 1.5; }
.la-drawer-box-info { background: var(--la-info-bg); border-color: var(--la-info-bd); color: #5a37b8; }
.la-drawer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.la-drawer-var { display: flex; gap: 10px; }
.la-drawer-var-k { font-weight: 560; color: var(--la-text-muted); min-width: 122px; }
.la-drawer-var-v { color: var(--la-text); }
.la-drawer-var-v.la-muted { color: var(--la-text-subtle); font-style: italic; }
.la-drawer-link { color: var(--la-accent); text-decoration: none; font-weight: 560; }
.la-drawer-link:hover { text-decoration: underline; color: var(--la-accent-hover); }
.la-drawer-na { color: var(--la-text-subtle); }
.la-drawer-actions { border-top: 1px solid var(--la-hair); padding-top: 16px; }
.la-drawer-moves { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 820px) { .la-field-row, .la-upload-row, .la-cat-grid { grid-template-columns: 1fr; } .la-list-card { align-items: flex-start; } }