/* ============================================================================
   TREVO BANK — Design System (fonte de verdade: DESYGN PROMPT/DESIGN.md)
   ----------------------------------------------------------------------------
   Este arquivo é carregado POR ÚLTIMO no <head> (depois de cakto.css e do
   <style> inline de load_settings.php), portanto vence a cascata em empates
   de especificidade + !important. Remova o <link> deste arquivo do
   cakto_head.php para reverter 100% ao tema anterior (Cakto/x.ai).

   Convenção: prefixo --tv-* = tokens Trevo. Os tokens --ck-*/--accent-* da
   plataforma são repontados para os --tv-* para reaproveitar a camada de
   override global já existente (dark -> creme).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. FONTES LOCAIS (self-hosted, sem CDN) — DESIGN.md §3 "Note on Font Sources"
   ---------------------------------------------------------------------------- */
/* Um face catch-all por família (arquivo latin cobre pt-BR: U+0000-00FF). Sem
   unicode-range para evitar descarte de subset. latin-ext como suplemento. */
:root { --tv-fonts: 1; }
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/geist-mono-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------------------
   2. TOKENS --tv-* (do frontmatter do DESIGN.md, sem hex inline em componentes)
   ---------------------------------------------------------------------------- */
:root {
  /* colors — primary (Clover Green family) */
  --tv-primary:        #7BC547;
  --tv-primary-bright: #8DD954;
  --tv-primary-deep:   #1A4D2E;
  --tv-primary-shoe:   #214E33;
  --tv-primary-shadow: #4A7F2D;
  --tv-on-primary:     #1A1A1A;
  /* colors — ink / text */
  --tv-ink:        #1A1A1A;
  --tv-ink-soft:   #3A3A3A;
  --tv-on-ink:     #F5EFE0;
  --tv-body:       #1A1A1A;
  --tv-muted:      #6B6357;
  --tv-muted-soft: #A39C8C;
  /* colors — surface */
  --tv-canvas:     #F5EFE0;
  --tv-paper:      #FAF6EC;
  --tv-white-pure: #FFFFFF;
  /* colors — hairlines */
  --tv-hairline:      #1A1A1A;
  --tv-hairline-soft: #D6CFB8;
  /* colors — named roles */
  --tv-blush-cheek: #D6CFB8; /* retired: era #F8C9C0 (rosa). Agora aponta para hairline-soft */
  --tv-pearl-glove: #F5EFE0;
  --tv-halftone-dot: #1A1A1A;
  /* colors — semantic */
  --tv-success: #5FA657;
  --tv-warning: #E89B1A;
  --tv-danger:  #C73E2C;
  /* rgb helpers (para rgba dinâmico) */
  --tv-primary-rgb: 123, 197, 71;
  --tv-primary-deep-rgb: 26, 77, 46;
  --tv-ink-rgb: 26, 26, 26;

  /* typography — families */
  --tv-font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --tv-font-body:    'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --tv-font-mono:    'Geist Mono', ui-monospace, Menlo, Monaco, monospace;

  /* rounded */
  --tv-r-none: 0px;
  --tv-r-sm:   4px;
  --tv-r-md:   8px;
  --tv-r-lg:   16px;
  --tv-r-xl:   24px;
  --tv-r-xxl:  32px;
  --tv-r-pill: 9999px;
  --tv-r-full: 9999px;

  /* spacing */
  --tv-space-xxs:  4px;
  --tv-space-xs:   8px;
  --tv-space-sm:   12px;
  --tv-space-md:   16px;
  --tv-space-lg:   20px;
  --tv-space-xl:   24px;
  --tv-space-xxl:  32px;
  --tv-space-xxxl: 48px;
  --tv-space-section: 80px;

  /* depth — único shadow permitido (comic offset duro, sem blur) — DESIGN.md §4 */
  --tv-shadow-modal: 4px 4px 0 var(--tv-ink);

  /* border padrão "chunky outline" */
  --tv-outline: 2px solid var(--tv-ink);

  /* altura canônica do shell (topbar + brand do sidebar coincidem nesta y). */
  --tv-topbar-h: 76px;
}

/* ----------------------------------------------------------------------------
   3. REMAP --ck-* / --accent-* -> Trevo  (flip dark -> creme via tokens)
   !important para vencer o <style> de load_settings.php que carrega antes.
   ---------------------------------------------------------------------------- */
:root {
  /* surfaces */
  --ck-bg:            var(--tv-canvas) !important;
  --ck-surface:       var(--tv-paper) !important;
  --ck-surface-elev:  var(--tv-paper) !important;
  --ck-surface-hover: var(--tv-paper) !important;
  --ck-border:        var(--tv-ink) !important;        /* hairline chunky = ink */
  --ck-border-subtle: var(--tv-hairline-soft) !important;

  /* brand (lock Clover Green — ignora cor dinâmica do admin) */
  --ck-primary:        var(--tv-primary) !important;
  --ck-primary-hover:  var(--tv-primary-bright) !important;
  --ck-primary-muted:  rgba(var(--tv-primary-rgb), 0.14) !important;
  --ck-primary-glow:   rgba(var(--tv-primary-rgb), 0.0) !important;
  --ck-primary-soft:   rgba(var(--tv-primary-rgb), 0.10) !important;
  --ck-gradient:       var(--tv-primary) !important;   /* sem gradiente — DESIGN proíbe */

  /* text */
  --ck-text:           var(--tv-ink) !important;
  --ck-text-2:         var(--tv-ink-soft) !important;
  --ck-text-muted:     var(--tv-muted) !important;
  --ck-text-on-primary: var(--tv-ink) !important;      /* clover é claro -> texto ink */

  /* semantic */
  --ck-success:      var(--tv-success) !important;
  --ck-success-soft: rgba(95, 166, 87, 0.12) !important;
  --ck-warning:      var(--tv-warning) !important;
  --ck-warning-soft: rgba(232, 155, 26, 0.12) !important;
  --ck-error:        var(--tv-danger) !important;
  --ck-error-soft:   rgba(199, 62, 44, 0.12) !important;
  /* Trevo não tem "info" azul -> usa Forest Deep como neutro */
  --ck-info:         var(--tv-primary-deep) !important;
  --ck-info-soft:    rgba(26, 77, 46, 0.10) !important;

  /* radii — restaura escala Trevo (Cakto havia achatado tudo p/ 8px) */
  --ck-r-sm:   var(--tv-r-sm) !important;
  --ck-r-md:   var(--tv-r-md) !important;
  --ck-r-lg:   var(--tv-r-lg) !important;
  --ck-r-xl:   var(--tv-r-xl) !important;
  --ck-r-2xl:  var(--tv-r-xxl) !important;
  --ck-r-full: var(--tv-r-pill) !important;

  /* shadows — flat (Trevo só usa comic-offset em modal/toast) */
  --ck-sh-sm: none !important;
  --ck-sh-md: none !important;
  --ck-sh-lg: 0 0 0 2px var(--tv-ink) !important;
  --ck-sh-glow: none !important;
  --ck-sh-glow-strong: none !important;

  /* fonts */
  --ck-font-sans: var(--tv-font-display) !important;
  --ck-font-mono: var(--tv-font-mono) !important;

  /* accent dinâmico travado em clover */
  --accent-primary:       var(--tv-primary) !important;
  --accent-primary-hover: var(--tv-primary-bright) !important;
  --accent-primary-rgb:   var(--tv-primary-rgb) !important;
  --accent-green:         var(--tv-primary) !important;
}

/* ----------------------------------------------------------------------------
   4. BASE — canvas creme, texto ink, fonte Bricolage
   ---------------------------------------------------------------------------- */
html, body {
  background-color: var(--tv-canvas) !important;
  color: var(--tv-ink);
  font-family: var(--tv-font-display);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
body { font-weight: 400; }

/* ============================================================================
   TRAVA GLOBAL DE FONTES — somente fontes do Design System.
   Bricolage Grotesque em tudo; Geist Mono só nos papéis de metadado/código
   definidos no DESIGN.md (§3). Vence font-family inline / <style> de página
   (Inter, Satoshi, DM Sans, JetBrains, 'monospace', system-ui, etc).
   Sem icon-fonts no projeto (Lucide = SVG), então a trava é segura.
   ============================================================================ */
html body, html body * { font-family: var(--tv-font-display) !important; }

/* Geist Mono SOMENTE em código/IDs/recibos (mais específico -> vence a regra acima).
   Badges, captions, footer, divisores e cabeçalhos usam Bricolage (a fonte principal). */
html body code, html body pre, html body kbd, html body samp, html body tt,
html body .ck-mono, html body .tv-mono,
html body [class*="font-mono"], html body [class*="__mono"],
html body [style*="monospace" i],
html body .receipt-strip, html body .tv-receipt {
  font-family: var(--tv-font-mono) !important;
}

::selection { background: var(--tv-primary); color: var(--tv-ink); }

/* scrollbar creme */
* { scrollbar-color: var(--tv-muted-soft) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--tv-muted-soft); border-radius: var(--tv-r-pill); }
*::-webkit-scrollbar-track { background: transparent; }

/* ----------------------------------------------------------------------------
   5. NEUTRALIZA SCRUBBERS x.ai de load_settings.php
   (carrega antes; aqui restauramos a hierarquia Trevo: display 700, cards 24px)
   ---------------------------------------------------------------------------- */
/* 5a. peso tipográfico — vence "body * {font-weight:400 !important}" */
body h1, body h2, body h3 { font-weight: 700 !important; letter-spacing: -0.5px; }
body h4, body h5, body h6 { font-weight: 600 !important; }
body .font-bold, body .font-extrabold, body .font-black { font-weight: 700 !important; }
body .font-semibold { font-weight: 600 !important; }
body .font-medium   { font-weight: 500 !important; }
body strong, body b { font-weight: 700 !important; }
/* roles tipográficos por convenção de nome também voltam a ter peso */
body [class*="-title"], body [class*="__title"],
body [class*="-value"], body [class*="__value"],
body [class*="-headline"], body [class*="-display"],
body [class*="-amount"], body [class*="-total"],
body [class*="-price"], body [class*="-number"],
body [class*="-stat"], body [class*="-metric"] {
  font-weight: 700 !important;
  letter-spacing: -0.25px !important;
}

/* 5b. radii — restaura cantos Trevo (Cakto forçava 8px) */
body .rounded-lg,  body [class*="rounded-lg"]  { border-radius: var(--tv-r-lg)  !important; }
body .rounded-xl,  body [class*="rounded-xl"]  { border-radius: var(--tv-r-xl)  !important; }
body .rounded-2xl, body [class*="rounded-2xl"] { border-radius: var(--tv-r-xxl) !important; }
body .rounded-3xl, body [class*="rounded-3xl"] { border-radius: var(--tv-r-xxl) !important; }
body [class*="-card"]:not([class*="badge"]):not([class*="pill"]):not([class*="chip"]),
body [class*="__card"],
body [class*="-panel"], body [class*="-modal"], body [class*="-dialog"],
body [class*="-container"] {
  border-radius: var(--tv-r-xl) !important;
}
/* pills/botões continuam pill */
body .rounded-full, body [class*="rounded-full"],
body [class*="-pill"], body [class*="__pill"],
body [class*="-chip"], body [class*="-avatar"], body [class*="-badge"] {
  border-radius: var(--tv-r-pill) !important;
}

/* ----------------------------------------------------------------------------
   6. LOCK de cor — utilitários green/emerald -> Clover  (sobrepõe load_settings)
   ---------------------------------------------------------------------------- */
body [class*="bg-green-"], body [class*="bg-emerald-"] { background-color: var(--tv-primary) !important; }
body [class*="text-green-"], body [class*="text-emerald-"] { color: var(--tv-primary-deep) !important; }
body [class*="border-green-"], body [class*="border-emerald-"] { border-color: var(--tv-ink) !important; }
body [class*="ring-green-"], body [class*="ring-emerald-"] { --tw-ring-color: var(--tv-primary) !important; }
body [class*="fill-green-"], body [class*="fill-emerald-"] { fill: var(--tv-primary) !important; }
body [class*="stroke-green-"], body [class*="stroke-emerald-"] { stroke: var(--tv-primary) !important; }

/* accent ORANGE desta instalação (paleta brand do tailwind.config) -> Clover.
   amber/yellow NÃO entram aqui para preservar o estado semântico de warning. */
body [class*="bg-orange-"]     { background-color: var(--tv-primary) !important; }
body [class*="text-orange-"]   { color: var(--tv-primary-deep) !important; }
body [class*="border-orange-"] { border-color: var(--tv-ink) !important; }
body [class*="ring-orange-"]   { --tw-ring-color: var(--tv-primary) !important; }
body [class*="fill-orange-"]   { fill: var(--tv-primary) !important; }
body [class*="stroke-orange-"] { stroke: var(--tv-primary) !important; }
body [class*="from-orange-"]   { --tw-gradient-from: var(--tv-primary) !important; }
body [class*="to-orange-"]     { --tw-gradient-to: var(--tv-primary) !important; }
body [class*="via-orange-"]    { --tw-gradient-via: var(--tv-primary) !important; }
/* hex laranja inline mais comuns desta base -> clover */
body [style*="#F97316" i], body [style*="#f97316" i] { color: var(--tv-primary-deep) !important; }

/* Trevo proíbe azul e roxo. Neutraliza família info/accent estranha:
   azul/ciano -> paper neutro; roxo/rosa -> blush (callout); texto -> forest; borda -> ink. */
body [class*="bg-blue-"], body [class*="bg-sky-"], body [class*="bg-cyan-"], body [class*="bg-indigo-"] { background-color: var(--tv-paper) !important; }
body [class*="bg-purple-"], body [class*="bg-violet-"], body [class*="bg-fuchsia-"], body [class*="bg-pink-"] { background-color: var(--tv-blush-cheek) !important; }
body [class*="text-blue-"], body [class*="text-sky-"], body [class*="text-cyan-"], body [class*="text-indigo-"],
body [class*="text-purple-"], body [class*="text-violet-"], body [class*="text-fuchsia-"], body [class*="text-pink-"] { color: var(--tv-primary-deep) !important; }
body [class*="border-blue-"], body [class*="border-sky-"], body [class*="border-cyan-"], body [class*="border-indigo-"],
body [class*="border-purple-"], body [class*="border-violet-"], body [class*="border-fuchsia-"], body [class*="border-pink-"] { border-color: var(--tv-ink) !important; }
body [class*="ring-blue-"], body [class*="ring-indigo-"], body [class*="ring-purple-"], body [class*="ring-violet-"], body [class*="ring-sky-"], body [class*="ring-cyan-"] { --tw-ring-color: var(--tv-primary-deep) !important; }
body [class*="fill-blue-"], body [class*="fill-indigo-"], body [class*="fill-purple-"], body [class*="fill-violet-"], body [class*="fill-sky-"], body [class*="fill-cyan-"] { fill: var(--tv-primary-deep) !important; }

/* rgba/hex roxo+azul HARDCODED em style="" (legendas, banners, botões custom) -> on-brand.
   Vermelho (239,68,68 / 220,38,38) e verde (34,197,94) ficam (semânticos). */
body [style*="124,58,237"], body [style*="139,92,246"], body [style*="167,139,250"] { background-color: var(--tv-blush-cheek) !important; color: var(--tv-ink) !important; border-color: var(--tv-ink) !important; }
body [style*="59,130,246"], body [style*="96,165,250"], body [style*="37,99,235"] { background-color: var(--tv-paper) !important; color: var(--tv-primary-deep) !important; border-color: var(--tv-ink) !important; }
body [style*="#a78bfa" i], body [style*="#c4b5fd" i], body [style*="#7c3aed" i], body [style*="#8b5cf6" i],
body [style*="#93c5fd" i], body [style*="#60a5fa" i], body [style*="#3b82f6" i], body [style*="#2563eb" i] { color: var(--tv-primary-deep) !important; }

/* tons neutros Tailwind sobre creme: texto escuro legível */
body .text-white, body [class*="text-gray-1"], body [class*="text-gray-2"], body [class*="text-gray-3"] { color: var(--tv-ink) !important; }
body [class*="text-gray-4"], body [class*="text-gray-5"] { color: var(--tv-muted) !important; }
body [class*="bg-gray-8"], body [class*="bg-gray-9"], body [class*="bg-black"], body [class*="bg-slate-9"], body [class*="bg-zinc-9"] {
  background-color: var(--tv-paper) !important;
}

/* ----------------------------------------------------------------------------
   6b. COR PRIMÁRIA DINÂMICA (var(--accent-primary)) — conserta texto invisível.
   Clover #7BC547 é CLARO: usado como COR DE TEXTO sobre creme fica de baixíssimo
   contraste ("some"). Texto em cor-primária -> Forest Deep (verde escuro legível).
   Usado como FUNDO de botão -> texto ink + contorno 2px ink + pílula (button-clover).
   ---------------------------------------------------------------------------- */
/* texto colorido com a primária dinâmica (sem fundo) -> forest-deep legível */
body [style*="color: var(--accent-primary)"]:not([style*="background"]),
body [style*="color:var(--accent-primary)"]:not([style*="background"]),
body .text-primary, body [class*="text-primary"] {
  color: var(--tv-primary-deep) !important;
}
/* fundo = primária dinâmica (botões) -> texto ink visível + contorno ink + pílula */
body [style*="background-color: var(--accent-primary)"],
body [style*="background-color:var(--accent-primary)"],
body [style*="background: var(--accent-primary)"],
body [style*="background:var(--accent-primary)"],
body .bg-primary {
  color: var(--tv-ink) !important;
  border: 2px solid var(--tv-ink) !important;
  border-radius: var(--tv-r-pill) !important;
}
body [style*="background-color: var(--accent-primary)"] *,
body [style*="background-color:var(--accent-primary)"] *,
body [style*="background: var(--accent-primary)"] *,
body [style*="background:var(--accent-primary)"] * {
  color: var(--tv-ink) !important;
}
/* legados: texto claro sobre fundo claro (clover/amber) -> ink legível */
body .ck-cron-step-n { color: var(--tv-ink) !important; }
body .cashout-test-warn { color: var(--tv-ink) !important; }

/* ----------------------------------------------------------------------------
   7. COMPONENTES BASE (DESIGN.md §5) — mapeados às classes existentes da app
   ---------------------------------------------------------------------------- */

/* 7.1 BOTÕES — pill 52px, contorno 2px ink */
body .ck-btn, body .ck-btn-sm, body .ck-btn-lg,
body .ck-btn-primary, body .ck-btn-secondary, body .ck-btn-outline, body .ck-btn-ghost,
body .a2-btn, body .a2-btn-primary, body .a2-btn-outline,
body button[class*="btn-primary"], body button[class*="btn-secondary"],
body button[class*="btn-outline"] {
  border-radius: var(--tv-r-pill) !important;
  border: var(--tv-outline) !important;
  font-family: var(--tv-font-display);
  font-weight: 600 !important;
  letter-spacing: 0.2px;
  box-shadow: none !important;
  transition: transform 120ms ease, background-color 120ms ease;
}
/* primário = clover + ink (button-clover) */
body .ck-btn-primary, body .a2-btn-primary,
body button[class*="btn-primary"]:not(.tv-btn), body .bg-primary {
  background-color: var(--tv-primary) !important;
  color: var(--tv-ink) !important;
}
body .ck-btn-primary:hover, body .a2-btn-primary:hover,
body button[class*="btn-primary"]:not(.tv-btn):hover { background-color: var(--tv-primary-bright) !important; }
body .ck-btn-primary:active, body .a2-btn-primary:active { transform: translateY(1px); }
/* secundário/outline = transparente + ink */
body .ck-btn-outline, body .ck-btn-ghost, body .a2-btn-outline,
body button[class*="btn-outline"] {
  background-color: transparent !important;
  color: var(--tv-ink) !important;
}
body .ck-btn-secondary { background-color: var(--tv-paper) !important; color: var(--tv-ink) !important; }
/* perigo */
body .ck-btn-danger { background-color: var(--tv-danger) !important; color: var(--tv-on-ink) !important; border: var(--tv-outline) !important; border-radius: var(--tv-r-pill) !important; }
/* ícone circular 52px */
body .ck-btn-icon {
  border-radius: var(--tv-r-full) !important;
  border: var(--tv-outline) !important;
  background-color: var(--tv-primary) !important;
  color: var(--tv-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

/* 7.2 CARDS — paper, 24px, 2px ink, flat */
body .ck-card, body .cakto-card, body .dark-card, body .dashboard-card,
body .metric-card, body .bg-dark-card, body .ck-kpi, body .ck-chart-card {
  background-color: var(--tv-paper) !important;
  color: var(--tv-ink) !important;
  border: var(--tv-outline) !important;
  border-radius: var(--tv-r-xl) !important;
  box-shadow: none !important;
}
body .ck-card:hover, body .dark-card:hover, body .metric-card:hover, body .ck-kpi:hover {
  box-shadow: var(--tv-shadow-modal) !important;
  transform: translateY(-1px);
}
/* card-mascot — clover */
body .tv-card-mascot { background-color: var(--tv-primary) !important; color: var(--tv-ink) !important; border: var(--tv-outline) !important; border-radius: var(--tv-r-xl) !important; padding: var(--tv-space-xxl); }
/* balance-card — Forest Deep */
body .tv-balance, body .balance-card, body .ck-spotlight {
  background-color: var(--tv-primary-deep) !important;
  color: var(--tv-on-ink) !important;
  border: var(--tv-outline) !important;
  border-radius: var(--tv-r-xl) !important;
}
body .tv-balance *, body .ck-spotlight * { color: var(--tv-on-ink) !important; }

/* 7.3 INPUTS — paper, 16px, 2px ink, foco vira canvas + outline forest */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body textarea, body select, body .dark-input, body .form-input-style {
  background-color: var(--tv-paper) !important;
  color: var(--tv-ink) !important;
  border: var(--tv-outline) !important;
  border-radius: var(--tv-r-lg) !important;
  font-family: var(--tv-font-display);
  box-shadow: none !important;
}
body input::placeholder, body textarea::placeholder { color: var(--tv-muted-soft) !important; }
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, body textarea:focus, body select:focus, body .dark-input:focus {
  background-color: var(--tv-canvas) !important;
  border-color: var(--tv-primary-deep) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 7.3a SELECT custom (tv-dd) — dropdown estilo shadcn por cima do <select>
   nativo. O enhancer assets/js/tv-select.js esconde o <select> real (mantém
   ele no form p/ submeter o valor) e pinta um gatilho + menu portado p/ <body>.
   Cobre TODOS os selects do painel ("em todos os cantos"), qualquer classe.
   Fallback sem-JS: o <select> nativo segue estilizado pela regra 7.3 acima. */
.tv-dd { position: relative; display: block; width: 100%; font-family: var(--tv-font-display); }
.tv-dd__native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
.tv-dd__trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 44px; padding: 10px 14px;
  background: var(--tv-paper); color: var(--tv-ink);
  border: var(--tv-outline); border-radius: var(--tv-r-lg);
  font-family: var(--tv-font-display); font-size: 15px; font-weight: 500;
  cursor: pointer; text-align: left; line-height: 1.3;
  transition: background .12s ease, border-color .12s ease;
}
.tv-dd__trigger:hover { background: var(--tv-canvas); }
.tv-dd__trigger:focus-visible { outline: none; border-color: var(--tv-primary-deep); }
.tv-dd[data-open="true"] .tv-dd__trigger { border-color: var(--tv-primary-deep); background: var(--tv-canvas); }
.tv-dd__value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-dd__value[data-placeholder="true"] { color: var(--tv-muted-soft); }
.tv-dd__chev { flex: 0 0 auto; width: 18px; height: 18px; opacity: .6; transition: transform .15s ease; }
.tv-dd[data-open="true"] .tv-dd__chev { transform: rotate(180deg); }
.tv-dd--disabled .tv-dd__trigger { opacity: .55; cursor: not-allowed; }

/* menu — portado p/ <body> (escapa overflow de tabelas/cards), comic offset */
.tv-dd-menu {
  position: fixed; z-index: 2147483600; min-width: 180px; max-height: 320px; overflow-y: auto;
  background: var(--tv-white-pure); color: var(--tv-ink);
  border: var(--tv-outline); border-radius: var(--tv-r-lg);
  box-shadow: var(--tv-shadow-modal); padding: 6px;
  font-family: var(--tv-font-display); overscroll-behavior: contain;
  animation: tv-dd-in .14s ease;
}
@keyframes tv-dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tv-dd-menu__group {
  padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tv-muted);
}
.tv-dd-menu__item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px 9px 32px; position: relative;
  border-radius: var(--tv-r-md); font-size: 14px; color: var(--tv-ink);
  cursor: pointer; user-select: none; line-height: 1.3;
}
.tv-dd-menu__item:hover, .tv-dd-menu__item[data-active="true"] {
  background: rgba(var(--tv-primary-rgb), .16); color: var(--tv-ink);
}
.tv-dd-menu__item[aria-selected="true"] { font-weight: 600; }
.tv-dd-menu__check {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--tv-primary-deep); opacity: 0;
}
.tv-dd-menu__item[aria-selected="true"] .tv-dd-menu__check { opacity: 1; }
.tv-dd-menu__item[data-disabled="true"] { opacity: .45; pointer-events: none; }

/* 7.3b CHECKBOX — caixa chunky 2px ink, check clover. Exclui toggles/switches
   (sr-only/peer/switch/toggle) p/ não quebrar interruptores estilizados. */
html body input[type="checkbox"]:not(.sr-only):not(.peer):not([role="switch"]):not([class*="switch"]):not([class*="toggle"]) {
  -webkit-appearance: none; appearance: none;
  width: 1.15rem !important; height: 1.15rem !important; flex: 0 0 auto; margin: 0; padding: 0;
  display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer;
  background-color: var(--tv-paper) !important;
  border: 2px solid var(--tv-ink) !important;
  border-radius: var(--tv-r-sm) !important;
  box-shadow: none !important;
  transition: background-color .12s ease, border-color .12s ease;
}
html body input[type="checkbox"]:not(.sr-only):not(.peer):not([role="switch"]):not([class*="switch"]):not([class*="toggle"])::after {
  content: ""; width: .62rem; height: .62rem; transform: scale(0);
  background-color: var(--tv-ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transition: transform .12s ease;
}
html body input[type="checkbox"]:checked:not(.sr-only):not(.peer):not([role="switch"]):not([class*="switch"]):not([class*="toggle"]) {
  background-color: var(--tv-primary) !important;
  border-color: var(--tv-ink) !important;
}
html body input[type="checkbox"]:checked:not(.sr-only):not(.peer):not([role="switch"]):not([class*="switch"]):not([class*="toggle"])::after { transform: scale(1); }
html body input[type="checkbox"]:focus-visible:not(.sr-only):not(.peer):not([role="switch"]):not([class*="switch"]):not([class*="toggle"]) {
  outline: 2px solid var(--tv-primary-deep); outline-offset: 2px;
}
html body input[type="checkbox"]:disabled:not(.sr-only):not(.peer):not([role="switch"]) { opacity: .5; cursor: not-allowed; }

/* 7.4 TOP-NAV / HEADER — creme + hairline 1px ink (par com .tv-topbar e
   .tv-sidebar__brand). Esta regra usa !important porque vence backdrop-blur
   e shadow herdados de páginas em transição (Cakto antigo). */
body header.fixed, body .ck-navbar, body .cakto-navbar, body nav.top-nav {
  background-color: var(--tv-canvas) !important;
  border-bottom: 1px solid var(--tv-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* 7.4a USER CHIP do header (sino + chip alinhados, 44px, pill 2px ink).
   Mantém .ck-user-chip do header global do produtor/admin alinhado com .hb-btn. */
body .ck-user-chip {
  height: 44px !important;
  padding: 0 14px 0 6px !important;
  gap: 8px !important;
  background-color: var(--tv-paper) !important;
  color: var(--tv-ink) !important;
  border: var(--tv-outline) !important;
  border-radius: var(--tv-r-pill) !important;
  font-family: var(--tv-font-display) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.1px;
  line-height: 1 !important;
  transition: background-color .12s ease, transform .12s ease, box-shadow .12s ease !important;
  max-width: 280px;
}
body .ck-user-chip:hover {
  background-color: var(--tv-canvas) !important;
  border-color: var(--tv-ink) !important;
  box-shadow: 3px 3px 0 var(--tv-ink) !important;
  transform: translate(-1px, -1px);
}
body .ck-user-chip:active {
  box-shadow: 1px 1px 0 var(--tv-ink) !important;
  transform: translate(1px, 1px);
}
body .ck-user-chip__avatar {
  width: 32px !important;
  height: 32px !important;
  border: var(--tv-outline) !important;
  background-color: var(--tv-primary) !important;
  color: var(--tv-ink) !important;
  font-family: var(--tv-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
}
/* Nome do chip: trunca longos ("TATIANE ARAUJO RODRIGUES FELIX") com ellipsis */
body .ck-user-chip > span:not(.ck-user-chip__avatar) {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tv-ink) !important;
}
/* Chevron: anula o inline style "color: var(--ck-text-muted)" e usa ink */
body .ck-user-chip i[data-lucide="chevron-down"],
body .ck-user-chip svg.lucide-chevron-down {
  color: var(--tv-ink) !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}

/* 7.5 SIDEBAR — creme sólida, item ativo clover */
body .sidebar-glass, body .ck-sidebar, body aside:not(.tv-login-aside) {
  background-color: var(--tv-canvas) !important;
  box-shadow: none !important;
}
body .sidebar-item { color: var(--tv-ink-soft) !important; border-radius: var(--tv-r-lg) !important; }
body .sidebar-item:hover { background-color: var(--tv-paper) !important; color: var(--tv-ink) !important; }
body .sidebar-item-active, body .sidebar-item.active {
  background-color: rgba(var(--tv-primary-rgb), 0.18) !important;
  color: var(--tv-primary-deep) !important;
  border: 2px solid var(--tv-ink) !important;
}
body .sidebar-item-active i, body .sidebar-item-active span { color: var(--tv-primary-deep) !important; filter: none !important; }
body .ck-side-group { color: var(--tv-muted) !important; font-family: var(--tv-font-mono); }

/* 7.6 FOOTER — Forest Deep slab, texto creme, borda superior 2px */
body footer, body .ck-footer {
  background-color: var(--tv-primary-deep) !important;
  color: var(--tv-on-ink) !important;
  border-top: var(--tv-outline) !important;
}
body footer a, body .ck-footer a { color: var(--tv-on-ink) !important; }
/* dentro de slabs Forest Deep, qualquer texto (inclusive .text-white/.text-gray-*) = creme */
body footer [class*="text-"], body .ck-footer [class*="text-"],
body .tv-balance [class*="text-"], body .ck-spotlight [class*="text-"] { color: var(--tv-on-ink) !important; }

/* 7.7 BADGES & PILLS */
body .ck-badge, body [class*="-badge"]:not([class*="__icon"]) {
  border: var(--tv-outline) !important;
  border-radius: var(--tv-r-pill) !important;
  font-family: var(--tv-font-mono);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
}
body .ck-badge-primary, body .tv-badge-clover { background-color: var(--tv-primary) !important; color: var(--tv-ink) !important; }
body .tv-badge-blush { background-color: var(--tv-blush-cheek) !important; color: var(--tv-ink) !important; }
/* pill-tab */
body .ck-pill, body .pill-tab { background-color: var(--tv-canvas) !important; color: var(--tv-ink) !important; border: var(--tv-outline) !important; border-radius: var(--tv-r-pill) !important; }
body .ck-pill.is-active, body .pill-tab.active, body .ck-pill-group .is-active { background-color: var(--tv-ink) !important; color: var(--tv-canvas) !important; }

/* 7.8 TABELAS — divisórias hairline-soft */
body table thead { background-color: var(--tv-paper) !important; }
body table th { color: var(--tv-muted) !important; font-family: var(--tv-font-mono); text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid var(--tv-ink) !important; }
body table td { border-color: var(--tv-hairline-soft) !important; color: var(--tv-ink) !important; }
body table tbody tr:hover { background-color: rgba(var(--tv-primary-rgb), 0.06) !important; }

/* 7.9 RECEIPT STRIP — branco puro, cantos retos, borda tracejada, mono */
body .tv-receipt, body .receipt-strip {
  background-color: var(--tv-white-pure) !important;
  color: var(--tv-ink) !important;
  border: 2px dashed var(--tv-ink) !important;
  border-radius: var(--tv-r-none) !important;
  font-family: var(--tv-font-mono) !important;
  padding: var(--tv-space-lg) var(--tv-space-xl);
}

/* 7.10 MODAIS / TOASTS — card paper + comic offset 6px. Overlays/scrims NÃO são
   card: viram scrim Trevo (blur + tom ink + topo). Isso conserta o bug em que o
   próprio scrim era pintado como caixa de papel.
   :not([class*="__"]) exclui os filhos BEM nativos (tv-modal__title/__head/__body/
   __foot) — senão CADA um virava "card" com borda+sombra empilhada (linha preta
   demais atrás do título). Legados (.modal-content/.ck-modal) não usam "__". */
body .ck-modal, body .modal-content, body .modal-box, body .modal-card,
body [class*="-modal"]:not([class*="overlay"]):not([class*="scrim"]):not([class*="backdrop"]):not([class*="wrap"]):not([class*="__"]):not(.vd-modal):not(.tkt-modal):not(.tv-vmodal),
body [class*="-dialog"]:not([class*="overlay"]):not([class*="backdrop"]):not([class*="__"]),
body [class*="-toast"] {
  background-color: var(--tv-paper) !important;
  color: var(--tv-ink) !important;
  border: var(--tv-outline) !important;
  border-radius: var(--tv-r-xl) !important;
  box-shadow: 6px 6px 0 var(--tv-ink) !important;
}
/* Overlays/scrims legados -> scrim Trevo (cobre a viewport, blur + tom ink, topo).
   .modal-overlay (0,1,1) vence o *{backdrop-filter:none} (0,0,0) por especificidade. */
body .modal-overlay, body .ck-modal-overlay,
body [class*="modal-overlay"], body [class*="modal-backdrop"],
body [data-modal-overlay] {
  background-color: rgba(var(--tv-ink-rgb), 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 2147483600 !important;
}
/* Scrims Tailwind (fixed inset-0 bg-black/bg-opacity) -> scrim Trevo.
   Vence o §6 que mapeia bg-black->paper (especificidade 0,2,1 > 0,1,1). */
body [class*="inset-0"][class*="bg-black"],
body [class*="inset-0"][class*="bg-opacity"],
body [class*="bg-black"][class*="bg-opacity"],
body [class*="bg-gray-9"][class*="bg-opacity"] {
  background-color: rgba(var(--tv-ink-rgb), 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* 7.11 INFO BANNER (partial compartilhado .ck-info-banner) — callout Trevo */
body .ck-info-banner {
  background: var(--tv-paper) !important;
  border: var(--tv-outline) !important;
  border-radius: var(--tv-r-lg) !important;
}
body .ck-info-banner * { color: var(--tv-ink) !important; border-color: var(--tv-hairline-soft) !important; }
body .ck-info-banner summary > span:first-child { background: var(--tv-ink) !important; }
body .ck-info-banner summary > span:first-child i { color: var(--tv-canvas) !important; }
/* chips de legenda dentro do banner -> uniformes (canvas + contorno ink) */
body .ck-info-banner span[style*="background"] { background: var(--tv-canvas) !important; border: 1px solid var(--tv-ink) !important; }

/* ----------------------------------------------------------------------------
   8. UTILITÁRIOS TREVO (para páginas novas / superfícies de marketing)
   ---------------------------------------------------------------------------- */
.tv-display-xxl { font-family: var(--tv-font-display); font-weight: 700; font-size: clamp(48px, 8vw, 96px); line-height: 0.95; letter-spacing: -2px; font-variation-settings: 'opsz' 96; }
.tv-display-xl  { font-family: var(--tv-font-display); font-weight: 700; font-size: 72px; line-height: 0.98; letter-spacing: -1.5px; font-variation-settings: 'opsz' 72; }
.tv-display-lg  { font-family: var(--tv-font-display); font-weight: 700; font-size: 56px; line-height: 1.0; letter-spacing: -1px; font-variation-settings: 'opsz' 56; }
.tv-display-md  { font-family: var(--tv-font-display); font-weight: 700; font-size: 40px; line-height: 1.05; letter-spacing: -0.5px; font-variation-settings: 'opsz' 40; }
.tv-display-sm  { font-family: var(--tv-font-display); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -0.25px; }
.tv-title-lg    { font-family: var(--tv-font-display); font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -0.1px; }
.tv-title-md    { font-family: var(--tv-font-display); font-weight: 600; font-size: 20px; line-height: 1.3; }
.tv-title-sm    { font-family: var(--tv-font-display); font-weight: 600; font-size: 16px; line-height: 1.35; }
.tv-body-lg     { font-family: var(--tv-font-body); font-weight: 400; font-size: 18px; line-height: 1.5; }
.tv-body-md     { font-family: var(--tv-font-body); font-weight: 400; font-size: 16px; line-height: 1.55; }
.tv-body-emphasis { font-family: var(--tv-font-body); font-weight: 600; font-size: 16px; line-height: 1.55; }
.tv-body-sm     { font-family: var(--tv-font-body); font-weight: 400; font-size: 14px; line-height: 1.5; }
.tv-caption     { font-family: var(--tv-font-mono); font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase; }
.tv-mono        { font-family: var(--tv-font-mono); font-weight: 400; font-size: 14px; line-height: 1.5; }

/* botões Trevo explícitos */
.tv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 16px 32px; border-radius: var(--tv-r-pill); border: var(--tv-outline); font-family: var(--tv-font-display); font-weight: 600; font-size: 16px; letter-spacing: 0.2px; cursor: pointer; transition: transform 120ms ease, background-color 120ms ease; }
.tv-btn:active { transform: translateY(1px); }
.tv-btn-primary { background: var(--tv-primary-deep); color: var(--tv-canvas); }
.tv-btn-primary:hover { background: var(--tv-primary-shoe); }
.tv-btn-clover { background: var(--tv-primary); color: var(--tv-ink); }
.tv-btn-clover:hover { background: var(--tv-primary-bright); }
.tv-btn-outline { background: transparent; color: var(--tv-ink); }

/* bandas / heros */
.tv-hero-drench { background: var(--tv-primary); color: var(--tv-ink); padding: 96px 48px; border-bottom: var(--tv-outline); }
.tv-hero-cream  { background: var(--tv-canvas); color: var(--tv-ink); padding: 96px 48px; }
.tv-cta-clover  { background: var(--tv-primary); color: var(--tv-ink); padding: 64px 48px; border-top: var(--tv-outline); border-bottom: var(--tv-outline); text-align: center; }

/* halftone strip — pontos ink em paper (DESIGN.md §4 Halftone-As-Depth) */
.tv-halftone {
  background-color: var(--tv-paper);
  background-image: radial-gradient(var(--tv-halftone-dot) 1.5px, transparent 1.6px);
  background-size: 12px 12px;
  padding: 64px 48px;
}

/* mascote — sempre via <img>; helper de enquadramento */
.tv-mascot { display: block; height: auto; }
.tv-mascot--hero { max-width: 420px; width: 100%; }
.tv-mascot--band { max-width: 200px; width: 100%; }

/* ----------------------------------------------------------------------------
   9. ACESSIBILIDADE
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================================
   10. COMPONENTES NATIVOS .tv-* — usados pelas telas reescritas (sem override).
   Esta camada é a "fonte de verdade" para markup novo. Convive com o override
   (§§3-7) que segue cobrindo telas ainda não migradas, mas o markup Trevo deve
   usar SOMENTE estas classes + tokens (zero hex inline).
   ============================================================================ */

/* 10.1 LAYOUT / SHELL ------------------------------------------------------- */
.tv-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--tv-canvas); }

.tv-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--tv-topbar-h); z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tv-space-md); padding: 0 var(--tv-space-md);
  background: var(--tv-canvas);
  /* hairline 1px (afinada) — propositalmente fora do Chunky Outline Rule:
     a divisória shell↔conteúdo é estrutural, não decorativa, e precisa ler
     como "linha contínua" alinhada à do sidebar__brand. */
  border-bottom: 1px solid var(--tv-ink);
}
.tv-topbar__left, .tv-topbar__right { display: flex; align-items: center; gap: var(--tv-space-xs); }
.tv-topbar__left  { flex: 1 1 auto; min-width: 0; }   /* deixa o título encolher */
.tv-topbar__right { flex: 0 0 auto; gap: 10px; }

/* Título da página dentro do topbar (esquerda, ao lado do hambúrguer). */
.tv-topbar__title {
  font-family: var(--tv-font-display); font-weight: 600; font-size: 18px;
  line-height: 1.2; color: var(--tv-ink); letter-spacing: -0.1px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-left: 4px;
}

/* Divisória vertical (1px hairline) — separa grupos no topbar. */
.tv-divider-vert {
  flex: 0 0 auto; width: 1px; height: 28px;
  background: var(--tv-hairline-soft); margin: 0 6px;
}

/* ── User chip do topbar — botão que dispara o menu de perfil.
   Avatar + (nome bold + sub ink-soft) + chevron. Sem borda, padding suave,
   hover ganha fundo paper. Casa visualmente com .tv-sidebar__user. */
.tv-user-chip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 4px 10px 4px 4px;
  background: transparent; color: var(--tv-ink); border: 0;
  border-radius: var(--tv-r-pill); cursor: pointer; text-decoration: none;
  font-family: var(--tv-font-display);
  transition: background .12s ease;
  max-width: 100%; min-width: 0;
}
/* sem mudança de cor no hover/aberto — o feedback é só o cursor + caret. */
.tv-user-chip:focus-visible { outline: 2px solid var(--tv-primary-deep); outline-offset: 2px; }

.tv-user-chip__avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--tv-r-pill);
  background: var(--tv-hairline-soft); color: var(--tv-ink-soft);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--tv-font-display); font-weight: 700; font-size: 14px;
}
.tv-user-chip__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tv-user-chip__meta {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  text-align: left; line-height: 1.15;
}
.tv-user-chip__name {
  font-weight: 700; font-size: 13px; color: var(--tv-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.tv-user-chip__sub {
  font-weight: 400; font-size: 12px; color: var(--tv-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-user-chip__caret {
  flex: 0 0 auto; width: 18px; height: 18px; color: var(--tv-ink-soft);
  transition: transform .15s ease;
}
.tv-user-chip[aria-expanded="true"] .tv-user-chip__caret { transform: rotate(180deg); }

/* Esconde nome+sub+chevron em telas estreitas — só avatar fica. */
@media (max-width: 639.98px) {
  .tv-user-chip__meta, .tv-user-chip__caret { display: none; }
  .tv-user-chip { padding: 4px; }
}

/* ── Menu do perfil — surge abaixo do chip, alinhado à direita.
   Header: nome + email. Items: ícone + label. Sair: cor danger. */
.tv-user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 260px; max-width: 320px;
  background: var(--tv-paper); color: var(--tv-ink);
  border: 1px solid var(--tv-ink); border-radius: var(--tv-r-lg);
  box-shadow: var(--tv-shadow-modal); overflow: hidden;
  display: none; flex-direction: column;
}
.tv-user-menu[data-open="true"] { display: flex; }

.tv-user-menu__head {
  padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--tv-hairline-soft);
}
.tv-user-menu__name {
  font-family: var(--tv-font-display); font-weight: 700; font-size: 14px;
  color: var(--tv-ink); line-height: 1.25;
  word-break: break-word;                         /* nome longo quebra */
}
.tv-user-menu__email {
  font-family: var(--tv-font-display); font-weight: 400; font-size: 12px;
  color: var(--tv-ink-soft); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tv-user-menu__list { display: flex; flex-direction: column; padding: 6px 0; }
.tv-user-menu__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; color: var(--tv-ink); text-decoration: none;
  font-family: var(--tv-font-display); font-weight: 500; font-size: 14px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  transition: background .12s ease;
}
/* hover: troca SÓ o background. A cor do texto precisa ser declarada de novo
   pra vencer o global `a:hover { color: var(--ck-primary-hover) }` do
   cakto.css:123 — sem isso o item ficava verde no hover. */
.tv-user-menu__item:hover,
.tv-user-menu__item:focus { background: var(--tv-canvas); color: var(--tv-ink); }
.tv-user-menu__item:hover svg, .tv-user-menu__item:hover i,
.tv-user-menu__item:focus svg, .tv-user-menu__item:focus i { color: var(--tv-ink-soft); }
.tv-user-menu__item:focus-visible { outline: 2px solid var(--tv-primary-deep); outline-offset: -2px; }
.tv-user-menu__item svg, .tv-user-menu__item i { width: 18px; height: 18px; flex-shrink: 0; color: var(--tv-ink-soft); }
.tv-user-menu__item--danger        { color: var(--tv-danger); }
.tv-user-menu__item--danger svg,
.tv-user-menu__item--danger i      { color: var(--tv-danger); }
/* Sair: o danger precisa sobrescrever o reset acima E o a:hover global. */
.tv-user-menu__item--danger:hover,
.tv-user-menu__item--danger:focus { color: var(--tv-danger); }
.tv-user-menu__item--danger:hover svg, .tv-user-menu__item--danger:hover i,
.tv-user-menu__item--danger:focus svg, .tv-user-menu__item--danger:focus i { color: var(--tv-danger); }

.tv-user-menu__sep { height: 1px; background: var(--tv-hairline-soft); margin: 0; }

/* SIDEBAR — componente único reutilizável (admin / infoprodutor / member).
   Estrutura em 3 zonas: [brand fixo] · [nav scrollável] · [foot fixo].
   A sidebar inteira NUNCA rola — só a .tv-nav do meio. (DESIGN.md §5 Nav) */
.tv-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
  width: 264px; max-width: 86vw;
  display: flex; flex-direction: column;     /* 3 zonas */
  background: var(--tv-canvas);
  /* hairline 1px na borda direita — mesma espessura e cor da linha
     inferior do brand/topbar, fechando o "L" da moldura do shell. */
  border-right: 1px solid var(--tv-ink);
  overflow: hidden;                          /* a aside não rola por inteiro */
  transform: translateX(0);
  transition: transform .28s ease, width .22s ease;
}

/* ── ZONA 1: BRAND (header fixo, sticky no topo) ──
   Altura travada em var(--tv-topbar-h) = .tv-topbar. SEM border-bottom:
   o brand flui direto na .tv-nav abaixo (transição limpa, sem divisória).
   A linha do topbar continua existindo do lado direito (x ≥ 264px); na
   coluna da sidebar a borda direita 1px ink da própria .tv-sidebar fecha
   o canto, então não falta divisor visual. */
.tv-sidebar__brand {
  flex: 0 0 auto;                            /* não encolhe, não rola */
  display: flex; align-items: center; gap: var(--tv-space-sm);
  height: var(--tv-topbar-h); min-height: var(--tv-topbar-h);
  box-sizing: border-box;
  padding: 0 var(--tv-space-md);
}
.tv-sidebar__brand-link {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--tv-space-sm);
  text-decoration: none; min-width: 0; flex: 0 1 auto;
}
.tv-sidebar__brand img { height: 52px; width: auto; max-width: 100%; display: block; }

/* Tag de versão à direita do brand (irmã de .tv-sidebar__brand-link).
   Visual neutro/discreto — paper bg, 1px hairline-soft, mono ink-soft. */
.tv-sidebar__brand-tag {
  margin-left: auto;                         /* empurra pra direita */
  font-family: var(--tv-font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; color: var(--tv-ink-soft);
  background: var(--tv-paper); border: 1px solid var(--tv-hairline-soft);
  border-radius: var(--tv-r-md); padding: 3px 8px; white-space: nowrap;
}
.tv-sidebar__collapse {
  display: none;                             /* só aparece no tablet */
  flex: 0 0 auto; width: 36px; height: 36px; margin-left: auto;
  align-items: center; justify-content: center;
  background: var(--tv-paper); color: var(--tv-ink); border: var(--tv-outline);
  border-radius: var(--tv-r-full); cursor: pointer; transition: background .12s ease;
}
.tv-sidebar__collapse:hover { background: var(--tv-primary); }
.tv-sidebar__collapse:focus-visible { outline: 2px solid var(--tv-primary-deep); outline-offset: 2px; }
.tv-sidebar__collapse svg, .tv-sidebar__collapse i { width: 18px; height: 18px; }

/* ── ZONA 2: NAV (lista scrollável no meio, ocupa o que sobra) ── */
.tv-nav {
  flex: 1 1 auto; min-height: 0;             /* min-height:0 deixa o flex item encolher e rolar */
  overflow-y: auto; overflow-x: hidden;
  padding: var(--tv-space-sm) var(--tv-space-sm) var(--tv-space-md);
  display: flex; flex-direction: column; gap: 2px;
  /* fade assimétrico: topo 16px (discreto, encosta no brand) · rodapé 48px
     (alto, dissolve os últimos itens antes do card de progresso pra não
     ficar "cortando" o texto seco contra a borda do card). */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 48px), transparent 100%);
  /* scrollbar Trevo — Firefox: hairline-soft padrão, ink-soft no hover. */
  scrollbar-width: thin; scrollbar-color: var(--tv-hairline-soft) transparent;
}
/* scrollbar Trevo — WebKit/Blink: trilha invisível, polegar 4px com
   gutter de 2px (border transparent + background-clip), cresce na largura
   só no hover do nav inteiro pra ficar discreta em repouso. */
.tv-nav::-webkit-scrollbar { width: 8px; }
.tv-nav::-webkit-scrollbar-track { background: transparent; }
.tv-nav::-webkit-scrollbar-thumb {
  background-color: var(--tv-hairline-soft);
  border: 2px solid transparent;
  background-clip: padding-box;              /* gera o "gutter" lateral de 2px */
  border-radius: var(--tv-r-pill);
  min-height: 32px;                          /* pega-fácil de mouse */
  transition: background-color .15s ease;
}
.tv-nav::-webkit-scrollbar-thumb:hover  { background-color: var(--tv-ink-soft); }
.tv-nav::-webkit-scrollbar-thumb:active { background-color: var(--tv-ink); }
.tv-nav::-webkit-scrollbar-corner { background: transparent; }
/* sem setas (botão de seta no topo/rodapé do trilho — alguns WebKit antigos) */
.tv-nav::-webkit-scrollbar-button { display: none; height: 0; width: 0; }

.tv-nav__group {
  font-family: var(--tv-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--tv-muted);
  margin: 24px 0 8px; padding: 0 var(--tv-space-md);   /* só espaçamento, sem divisória */
}
.tv-nav__group:first-child { margin-top: var(--tv-space-xs); }

.tv-nav__item {
  display: flex; align-items: center; gap: var(--tv-space-sm);
  min-height: 44px;                          /* touch target a11y */
  padding: 12px var(--tv-space-md); border-radius: var(--tv-r-lg);
  color: var(--tv-ink-soft); text-decoration: none;
  font-family: var(--tv-font-display); font-size: 16px; font-weight: 500; line-height: 1.2;
  border: 2px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.tv-nav__item svg, .tv-nav__item i { width: 20px; height: 20px; flex-shrink: 0; }
.tv-nav__item span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-nav__item:hover { background: var(--tv-paper); color: var(--tv-ink); }
.tv-nav__item.is-active {                    /* fill primary + outline ink (Chunky Outline Rule) */
  background: var(--tv-primary); color: var(--tv-ink);
  border: var(--tv-outline); font-weight: 600;
}
.tv-nav__item.is-active svg, .tv-nav__item.is-active i { color: var(--tv-ink); }
.tv-nav__item:focus-visible { outline: 2px solid var(--tv-primary-deep); outline-offset: 2px; }
.tv-nav__item[aria-current="page"] { background: var(--tv-primary); color: var(--tv-ink); border: var(--tv-outline); font-weight: 600; }

.tv-nav__badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tv-blush-cheek); color: var(--tv-ink);
  border: 2px solid var(--tv-ink); border-radius: var(--tv-r-pill);
  font-family: var(--tv-font-mono); font-size: 11px; font-weight: 700;
}
.tv-nav__badge--clover { background: var(--tv-primary); }
.tv-nav__badge--alert  { background: var(--tv-danger); color: var(--tv-white-pure); }

/* ── ZONA 2.5: PROGRESS CARD (fixo, entre nav e foot — não rola) ──
   Card opcional: só renderiza se $tv_sidebar['progress'] estiver setado.
   Casa visual com a hairline geral: borda 1px ink, paper bg, radius lg. */
.tv-sidebar__progress {
  flex: 0 0 auto;
  padding: 0 var(--tv-space-sm) var(--tv-space-sm);
}
.tv-progress-card {
  background: var(--tv-paper);
  border: 1px solid var(--tv-ink);
  border-radius: var(--tv-r-lg);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.tv-progress-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tv-progress-card__label {
  font-family: var(--tv-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--tv-muted);
}
.tv-progress-card__refresh {
  flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer;
  background: transparent; color: var(--tv-ink-soft); border: 0;
  border-radius: var(--tv-r-md); transition: background .12s ease, color .12s ease;
}
.tv-progress-card__refresh:hover { background: var(--tv-canvas); color: var(--tv-ink); }
.tv-progress-card__refresh:focus-visible { outline: 2px solid var(--tv-primary-deep); outline-offset: 2px; }
.tv-progress-card__refresh svg, .tv-progress-card__refresh i { width: 14px; height: 14px; }

.tv-progress-card__values {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tv-progress-card__value {
  font-family: var(--tv-font-display); font-weight: 700; font-size: 18px;
  line-height: 1.1; color: var(--tv-ink); font-variant-numeric: tabular-nums;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-progress-card__cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 10px; border-radius: var(--tv-r-md);
  background: var(--tv-canvas); color: var(--tv-ink); border: 1px solid var(--tv-ink);
  font-family: var(--tv-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
  transition: background .12s ease;
}
.tv-progress-card__cta:hover { background: var(--tv-primary); }
.tv-progress-card__cta:focus-visible { outline: 2px solid var(--tv-primary-deep); outline-offset: 2px; }

.tv-progress-card__sub {
  font-family: var(--tv-font-mono); font-size: 10px; color: var(--tv-muted-soft);
  letter-spacing: .3px;
}

.tv-progress-card__bar {
  position: relative; height: 4px; background: var(--tv-hairline-soft);
  border-radius: var(--tv-r-pill); overflow: hidden;
}
.tv-progress-card__bar > span {
  position: absolute; left: 0; top: 0; bottom: 0; min-width: 4px;
  background: var(--tv-primary-deep); border-radius: var(--tv-r-pill);
  transition: width .35s cubic-bezier(.4,0,.2,1);
}

.tv-progress-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-family: var(--tv-font-mono); font-size: 11px;
}
.tv-progress-card__pct {
  color: var(--tv-primary-deep); text-decoration: none; font-weight: 600;
}
a.tv-progress-card__pct:hover { text-decoration: underline; }
.tv-progress-card__remaining {
  color: var(--tv-muted); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* No tablet icon-only o card vira só uma barrinha vertical compacta —
   evita poluir a coluna estreita de 72px. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body:not(.tv-sidebar-expanded) .tv-sidebar__progress { display: none; }
}

/* ── ZONA 3: FOOT (rodapé de usuário fixo, sticky no rodapé) ──
   Refatorado pra leitura limpa: avatar neutro sem outline chunky, nome em
   display bold, sub em ink-soft, ações (perfil + logout) como icon-only
   borderless 32px que ganham fundo paper no hover. (DESIGN.md §5 user-foot) */
.tv-sidebar__foot {
  flex: 0 0 auto;                            /* não rola */
  border-top: 1px solid var(--tv-ink);
  padding: var(--tv-space-sm) var(--tv-space-md);
  display: flex; flex-direction: column; gap: 6px;
}
.tv-sidebar__user { display: flex; align-items: center; gap: 10px; }

.tv-sidebar__avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--tv-r-pill);
  background: var(--tv-hairline-soft); color: var(--tv-ink-soft);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--tv-font-display); font-weight: 700; font-size: 14px;
  border: 0;                                 /* sem chunky outline */
}
.tv-sidebar__avatar img { width: 100%; height: 100%; object-fit: cover; }

.tv-sidebar__user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 1px; }
.tv-sidebar__user-name {
  font-family: var(--tv-font-display); font-weight: 700; font-size: 14px;
  line-height: 1.15; color: var(--tv-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-sidebar__user-sub  {
  font-family: var(--tv-font-display); font-weight: 400; font-size: 12px;
  line-height: 1.2; color: var(--tv-ink-soft); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Ações (perfil + logout) — icon-only 32px, borderless, hover paper. */
.tv-sidebar__actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.tv-sidebar__action {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--tv-ink-soft);
  border: 0; border-radius: var(--tv-r-md);
  text-decoration: none; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.tv-sidebar__action:hover  { background: var(--tv-paper); color: var(--tv-ink); }
.tv-sidebar__action:focus-visible { outline: 2px solid var(--tv-primary-deep); outline-offset: 2px; }
.tv-sidebar__action svg, .tv-sidebar__action i { width: 18px; height: 18px; }

/* Alias do estilo antigo: pages legadas podem ainda passar .tv-sidebar__logout
   diretamente — herda o mesmo visual minimalista. */
.tv-sidebar__logout {
  flex: 0 0 auto; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--tv-ink-soft);
  border: 0; border-radius: var(--tv-r-md); text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.tv-sidebar__logout:hover { background: var(--tv-paper); color: var(--tv-ink); }
.tv-sidebar__logout:focus-visible { outline: 2px solid var(--tv-primary-deep); outline-offset: 2px; }
.tv-sidebar__logout svg, .tv-sidebar__logout i { width: 18px; height: 18px; }
.tv-sidebar__version { font-family: var(--tv-font-mono); font-size: 10px; color: var(--tv-muted-soft); text-align: center; }

.tv-main { flex: 1; margin-top: var(--tv-topbar-h); min-width: 0; transition: margin-left .28s ease; }
.tv-page { max-width: 1320px; margin: 0 auto; padding: calc(var(--tv-space-xl) + var(--tv-space-sm)) var(--tv-space-xl) var(--tv-space-xl); }

/* ── SCRIM (mobile drawer + tablet expand) ── */
.tv-sidebar-scrim {
  position: fixed; inset: 0; z-index: 45; background: rgba(var(--tv-ink-rgb), 0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: none;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ RESPONSIVO — 3 modos                                                  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* DESKTOP ≥1024px — sidebar fixa 264px, sempre aberta. */
@media (min-width: 1024px) {
  .tv-main { margin-left: 264px; }
  #tv-sidebar-toggle { display: none; }      /* hambúrguer some no desktop */
  .tv-sidebar__collapse { display: none; }   /* sempre aberta: sem colapso */
}

/* TABLET 768–1023px — icon-only 72px por padrão; toggle no header expande. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .tv-sidebar { width: 72px; }
  .tv-main { margin-left: 72px; }
  #tv-sidebar-toggle { display: none; }       /* hambúrguer é só do mobile */
  .tv-sidebar__collapse { display: inline-flex; }

  /* esconde rótulos no modo icon-only */
  body:not(.tv-sidebar-expanded) .tv-sidebar__brand-tag,
  body:not(.tv-sidebar-expanded) .tv-sidebar__brand-link img + *,
  body:not(.tv-sidebar-expanded) .tv-nav__item span,
  body:not(.tv-sidebar-expanded) .tv-nav__item .tv-nav__badge,
  body:not(.tv-sidebar-expanded) .tv-nav__group,
  body:not(.tv-sidebar-expanded) .tv-sidebar__user-meta,
  body:not(.tv-sidebar-expanded) .tv-sidebar__version { display: none; }
  body:not(.tv-sidebar-expanded) .tv-nav__item { justify-content: center; padding: 12px; gap: 0; position: relative; }
  body:not(.tv-sidebar-expanded) .tv-sidebar__brand { justify-content: center; padding: 0 var(--tv-space-sm); }
  body:not(.tv-sidebar-expanded) .tv-sidebar__brand-link { justify-content: center; flex: 0 1 auto; }
  body:not(.tv-sidebar-expanded) .tv-sidebar__collapse { margin-left: 0; }
  body:not(.tv-sidebar-expanded) .tv-sidebar__user { justify-content: center; }
  body:not(.tv-sidebar-expanded) .tv-sidebar__logout { display: none; }

  /* tooltip ao passar o mouse no item (modo icon-only) */
  body:not(.tv-sidebar-expanded) .tv-nav__item[data-label]:hover::after {
    content: attr(data-label);
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--tv-ink); color: var(--tv-canvas);
    padding: 6px 10px; border-radius: var(--tv-r-md);
    font-family: var(--tv-font-display); font-size: 13px; font-weight: 500;
    white-space: nowrap; z-index: 60; box-shadow: var(--tv-shadow-modal); pointer-events: none;
  }

  /* expandido: vira overlay 264px sobre o conteúdo, com scrim */
  body.tv-sidebar-expanded .tv-sidebar { width: 264px; box-shadow: var(--tv-shadow-modal); }
  body.tv-sidebar-expanded .tv-sidebar-scrim { display: block; }
}

/* MOBILE <768px — drawer off-canvas; hambúrguer na topbar abre. */
@media (max-width: 767.98px) {
  .tv-sidebar { width: 264px; max-width: 86vw; transform: translateX(-105%); box-shadow: var(--tv-shadow-modal); }
  .tv-main { margin-left: 0; }
  .tv-sidebar__collapse { display: none; }
  body.tv-sidebar-open .tv-sidebar { transform: translateX(0); }
  body.tv-sidebar-open .tv-sidebar-scrim { display: block; }
  body.tv-sidebar-open { overflow: hidden; }  /* trava o scroll de fundo */
}

/* botão ícone topo (hambúrguer, logout) */
.tv-icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tv-paper); color: var(--tv-ink); border: var(--tv-outline);
  border-radius: var(--tv-r-full); cursor: pointer; transition: background .12s ease, transform .12s ease;
}
.tv-icon-btn:hover { background: var(--tv-primary); }
.tv-icon-btn:active { transform: translateY(1px); }
.tv-icon-btn:focus-visible { outline: 2px solid var(--tv-primary-deep); outline-offset: 2px; }
.tv-icon-btn svg, .tv-icon-btn i { width: 20px; height: 20px; }

/* respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .tv-sidebar, .tv-main { transition: none; }
}

/* 10.2 PAGE HEADER ---------------------------------------------------------- */
.tv-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--tv-space-md); flex-wrap: wrap; margin-bottom: var(--tv-space-xl);
}
.tv-page-head__text { min-width: 0; }
.tv-page-title { font-family: var(--tv-font-display); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -0.5px; color: var(--tv-ink); }
.tv-page-sub { color: var(--tv-muted); font-size: 15px; margin-top: 4px; }
.tv-page-head__actions { display: flex; align-items: center; gap: var(--tv-space-xs); flex-wrap: wrap; }

/* 10.3 CARDS ---------------------------------------------------------------- */
.tv-card {
  background: var(--tv-paper); color: var(--tv-ink);
  border: var(--tv-outline); border-radius: var(--tv-r-xl);
  padding: var(--tv-space-xl); box-shadow: none;
}
.tv-card--flush { padding: 0; overflow: hidden; }
.tv-card--clover { background: var(--tv-primary); color: var(--tv-ink); }
.tv-card--forest { background: var(--tv-primary-deep); color: var(--tv-on-ink); }
.tv-card--forest .tv-card__title, .tv-card--forest .tv-stat__label { color: var(--tv-on-ink); }
.tv-card--blush { background: var(--tv-blush-cheek); color: var(--tv-ink); }
.tv-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tv-space-sm); margin-bottom: var(--tv-space-md);
}
.tv-card__title { font-family: var(--tv-font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.1px; }
.tv-card__sub { color: var(--tv-muted); font-size: 13px; }

/* 10.4 STAT / KPI ----------------------------------------------------------- */
.tv-grid { display: grid; gap: var(--tv-space-md); }
.tv-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tv-grid--chart { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .tv-grid--chart { grid-template-columns: 1fr; } }

.tv-stat {
  background: var(--tv-paper); border: var(--tv-outline); border-radius: var(--tv-r-xl);
  padding: var(--tv-space-lg); display: flex; flex-direction: column; gap: var(--tv-space-sm);
  transition: transform .12s ease, box-shadow .12s ease;
  container-type: inline-size; min-width: 0;
}
.tv-stat:hover { transform: translate(-1px,-1px); box-shadow: var(--tv-shadow-modal); }
.tv-stat__top { display: flex; align-items: center; gap: var(--tv-space-sm); min-width: 0; }
.tv-stat__top .tv-stat__label { min-width: 0; overflow-wrap: anywhere; }
.tv-stat__icon {
  width: 44px; height: 44px; flex-shrink: 0; border: var(--tv-outline);
  border-radius: var(--tv-r-md); display: inline-flex; align-items: center; justify-content: center;
  background: var(--tv-primary); color: var(--tv-ink);
}
.tv-stat__icon svg, .tv-stat__icon i { width: 22px; height: 22px; }
.tv-stat__icon.is-success { background: var(--tv-success); color: var(--tv-ink); }
.tv-stat__icon.is-warning { background: var(--tv-warning); color: var(--tv-ink); }
.tv-stat__icon.is-danger  { background: var(--tv-danger); color: var(--tv-white-pure); }
.tv-stat__icon.is-forest  { background: var(--tv-primary-deep); color: var(--tv-on-ink); }
.tv-stat__icon.is-blush   { background: var(--tv-blush-cheek); color: var(--tv-ink); }
.tv-stat__label { font-family: var(--tv-font-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tv-muted); }
.tv-stat__value {
  font-family: var(--tv-font-display); font-weight: 700;
  font-size: clamp(20px, 8.2cqw, 30px); line-height: 1.05; letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}
.tv-stat__delta { font-family: var(--tv-font-mono); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.tv-stat__delta.is-up { color: var(--tv-success); }
.tv-stat__delta.is-down { color: var(--tv-danger); }

/* 10.5 TABELA --------------------------------------------------------------- */
.tv-table-wrap { width: 100%; overflow-x: auto; border: var(--tv-outline); border-radius: var(--tv-r-xl); background: var(--tv-paper); }
table.tv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tv-table thead th {
  font-family: var(--tv-font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--tv-muted); text-align: left; padding: 14px var(--tv-space-md);
  border-bottom: var(--tv-outline); white-space: nowrap; background: var(--tv-paper);
}
table.tv-table tbody td { padding: 14px var(--tv-space-md); border-bottom: 1px solid var(--tv-hairline-soft); color: var(--tv-ink); vertical-align: middle; }
table.tv-table tbody tr:last-child td { border-bottom: 0; }
table.tv-table tbody tr:hover { background: rgba(var(--tv-primary-rgb), 0.07); }
.tv-td-num { font-family: var(--tv-font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* 10.6 BADGES / PILLS ------------------------------------------------------- */
.tv-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--tv-font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 11px; border: var(--tv-outline); border-radius: var(--tv-r-pill);
  background: var(--tv-paper); color: var(--tv-ink); white-space: nowrap;
}
.tv-badge--clover  { background: var(--tv-primary); color: var(--tv-ink); }
.tv-badge--blush   { background: var(--tv-blush-cheek); color: var(--tv-ink); }
.tv-badge--success { background: var(--tv-success); color: var(--tv-ink); }
.tv-badge--warning { background: var(--tv-warning); color: var(--tv-ink); }
.tv-badge--danger  { background: var(--tv-danger); color: var(--tv-white-pure); }
.tv-badge--forest  { background: var(--tv-primary-deep); color: var(--tv-on-ink); }
.tv-badge--neutral { background: var(--tv-canvas); color: var(--tv-ink-soft); }

.tv-pill {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--tv-font-display); font-weight: 600; font-size: 14px;
  padding: 8px 18px; border: var(--tv-outline); border-radius: var(--tv-r-pill);
  background: var(--tv-canvas); color: var(--tv-ink); transition: background .12s ease;
}
.tv-pill:hover { background: var(--tv-paper); }
.tv-pill.is-active { background: var(--tv-ink); color: var(--tv-canvas); }

/* 10.7 FORM FIELDS ---------------------------------------------------------- */
.tv-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--tv-space-md); }
.tv-label { font-family: var(--tv-font-display); font-weight: 600; font-size: 14px; color: var(--tv-ink); }
.tv-hint { font-size: 12px; color: var(--tv-muted); }
.tv-input, .tv-select, .tv-textarea {
  width: 100%; background: var(--tv-paper); color: var(--tv-ink);
  border: var(--tv-outline); border-radius: var(--tv-r-lg);
  padding: 13px var(--tv-space-md); font-family: var(--tv-font-display); font-size: 15px;
  height: 50px; transition: background .12s ease, border-color .12s ease;
}
.tv-textarea { height: auto; min-height: 110px; line-height: 1.55; resize: vertical; }
.tv-input:focus, .tv-select:focus, .tv-textarea:focus {
  outline: none; background: var(--tv-canvas); border-color: var(--tv-primary-deep);
}
.tv-input::placeholder, .tv-textarea::placeholder { color: var(--tv-muted-soft); }

/* 10.8 EMPTY STATE + DIVIDERS ---------------------------------------------- */
.tv-empty { text-align: center; padding: var(--tv-space-xxxl) var(--tv-space-md); color: var(--tv-muted); }
.tv-empty img { max-width: 160px; margin: 0 auto var(--tv-space-md); display: block; }
.tv-divider { height: 2px; background: var(--tv-ink); border: 0; margin: var(--tv-space-lg) 0; opacity: .12; }

/* 10.9 RECEIPT (recibo) ----------------------------------------------------- */
.tv-receipt {
  background: var(--tv-white-pure); color: var(--tv-ink);
  border: 2px dashed var(--tv-ink); border-radius: 0;
  font-family: var(--tv-font-mono); padding: var(--tv-space-lg) var(--tv-space-xl);
}

/* ============================================================================
   11. MODAL — sistema compartilhado (DESIGN.md §4 Comic Offset Rule)
   Scrim cobre a viewport inteira (portado p/ <body> via trevo.js → escapa
   ancestrais transformados), blur + tom Ink, z acima de TUDO. Card paper +
   outline 2px + comic offset 6px. ESC/scrim/focus-trap via trevo.js.
   O seletor .tv-scrim (0,1,0) vence o *{backdrop-filter:none!important} de
   load_settings (0,0,0) por especificidade.
   ============================================================================ */
.tv-scrim {
  position: fixed; inset: 0; z-index: 2147483600;
  display: none; align-items: center; justify-content: center;
  padding: var(--tv-space-md);
  background: rgba(var(--tv-ink-rgb), 0.55);
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  overflow-y: auto; overscroll-behavior: contain;
}
.tv-scrim.is-open { display: flex; }
.tv-scrim .tv-modal {
  background: var(--tv-paper) !important; color: var(--tv-ink) !important;
  border: var(--tv-outline) !important; border-radius: var(--tv-r-xl) !important;
  box-shadow: 6px 6px 0 var(--tv-ink) !important;
  width: 100%; max-width: 560px; margin: auto;
  display: flex; flex-direction: column; max-height: calc(100vh - 64px);
  animation: tv-modal-in .18s ease;
}
.tv-modal--sm { max-width: 440px; }
.tv-modal--lg { max-width: 760px; }
@keyframes tv-modal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tv-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tv-space-sm);
  padding: var(--tv-space-lg) var(--tv-space-xl); border-bottom: var(--tv-outline);
}
.tv-modal__title { font-family: var(--tv-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.2px; }
.tv-modal__close {
  width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tv-paper); color: var(--tv-ink); border: var(--tv-outline);
  border-radius: var(--tv-r-full); cursor: pointer; transition: background .12s ease;
}
.tv-modal__close:hover { background: var(--tv-danger); color: var(--tv-white-pure); }
.tv-modal__close svg, .tv-modal__close i { width: 18px; height: 18px; }
.tv-modal__body { padding: var(--tv-space-xl); overflow-y: auto; }
.tv-modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--tv-space-xs);
  padding: var(--tv-space-md) var(--tv-space-xl); border-top: var(--tv-outline); flex-wrap: wrap;
}
html.tv-modal-lock, body.tv-modal-lock { overflow: hidden !important; }

/* responsivo do page padding */
@media (max-width: 640px) {
  .tv-page { padding: var(--tv-space-md); }
  .tv-modal__head, .tv-modal__foot { padding-left: var(--tv-space-md); padding-right: var(--tv-space-md); }
  .tv-modal__body { padding: var(--tv-space-md); }
}

/* ============================================================================
   12. COMPONENTES COMPARTILHADOS ADICIONAIS
   file input · img fallback · empty state · brand · hero · status badges.
   DESIGN.md: contorno 2px ink, pill/xl, flat (sem soft-shadow/gradient/glow).
   ============================================================================ */

/* 12.1 FILE INPUT (tv-ui.js + partial tv_file) --------------------------- */
.tv-file { display: inline-flex; align-items: center; gap: var(--tv-space-sm); cursor: pointer; max-width: 100%; }
.tv-file__btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px;
  background: transparent; color: var(--tv-ink); border: var(--tv-outline); border-radius: var(--tv-r-pill);
  font-family: var(--tv-font-display); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .12s ease;
}
.tv-file:hover .tv-file__btn { background: var(--tv-canvas); }
.tv-file__name { font-family: var(--tv-font-mono); font-size: 13px; color: var(--tv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-file__input { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 12.2 FALLBACK DE IMAGEM (tv-ui.js) ------------------------------------- */
.tv-img-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 120px; width: 100%; box-sizing: border-box; padding: 16px; text-align: center;
  background: var(--tv-primary); color: var(--tv-ink); border: var(--tv-outline); border-radius: var(--tv-r-lg);
  font-family: var(--tv-font-display);
}
.tv-img-fallback__mark {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tv-paper); color: var(--tv-ink); border: var(--tv-outline); border-radius: var(--tv-r-full); font-weight: 700; font-size: 22px;
}
.tv-img-fallback__name { font-weight: 600; font-size: 13px; line-height: 1.2; }

/* 12.3 EMPTY STATE (partial tv_empty_state) ------------------------------ */
.tv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--tv-space-md);
  padding: 48px var(--tv-space-xl); background: var(--tv-paper); color: var(--tv-ink); border: var(--tv-outline); border-radius: var(--tv-r-xl);
}
.tv-empty__art { width: 96px; height: 96px; display: inline-flex; align-items: center; justify-content: center; background: var(--tv-canvas); border: var(--tv-outline); border-radius: var(--tv-r-full); }
.tv-empty__art img { width: 70%; height: 70%; object-fit: contain; }
.tv-empty__art svg, .tv-empty__art i { width: 40px; height: 40px; color: var(--tv-ink); }
.tv-empty__title { font-family: var(--tv-font-display); font-weight: 700; font-size: 22px; letter-spacing: -.3px; }
.tv-empty__text { color: var(--tv-muted); font-size: 15px; max-width: 42ch; line-height: 1.5; }
.tv-empty__cta { margin-top: var(--tv-space-xs); }

/* 12.4 BRAND (partial tv_brand) — mini-Treezinho + wordmark "Trevo" ------ */
.tv-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tv-ink); }
.tv-brand__mark { width: 32px; height: 32px; flex-shrink: 0; object-fit: cover; object-position: 50% 16%; border: var(--tv-outline); border-radius: var(--tv-r-full); background: var(--tv-primary); }
.tv-brand__word { font-family: var(--tv-font-display); font-weight: 700; font-size: 20px; letter-spacing: -.5px; color: currentColor; line-height: 1; }
/* Logo cadastrada no admin — exibida ao natural (sem crop/círculo). */
.tv-brand__logo { height: 56px; width: auto; max-width: 260px; flex-shrink: 0; object-fit: contain; display: block; }
.tv-brand--on-dark { color: var(--tv-on-ink); }
.tv-brand--sm .tv-brand__mark { width: 26px; height: 26px; }
.tv-brand--sm .tv-brand__word { font-size: 18px; }
.tv-brand--sm .tv-brand__logo { height: 40px; max-width: 200px; }

/* 12.5 HERO (banner com pose inteira do Treezinho, sem crop) ------------- */
.tv-hero {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--tv-space-xl);
  background: var(--tv-primary); color: var(--tv-ink); border: var(--tv-outline); border-radius: var(--tv-r-xl);
  padding: var(--tv-space-xxl); overflow: hidden;
}
.tv-hero__eyebrow { font-family: var(--tv-font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .8; }
.tv-hero__title { font-family: var(--tv-font-display); font-weight: 700; font-size: clamp(24px, 3vw, 40px); line-height: 1.05; letter-spacing: -.5px; margin: 6px 0 8px; }
.tv-hero__text { font-size: 16px; line-height: 1.5; max-width: 52ch; }
.tv-hero__art { align-self: end; }
.tv-hero__art img { display: block; height: clamp(120px, 16vw, 200px); width: auto; }
@media (max-width: 720px) {
  .tv-hero { grid-template-columns: 1fr; }
  .tv-hero__art { justify-self: center; }
  .tv-hero__art img { height: 120px; }
}

/* 12.6 STATUS BADGES (pill, 2px outline, tokens semânticos) -------------- */
.tv-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border: var(--tv-outline); border-radius: var(--tv-r-pill);
  font-family: var(--tv-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  background: var(--tv-canvas); color: var(--tv-ink);
}
.tv-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tv-status--success { background: var(--tv-success); color: var(--tv-ink); }
.tv-status--warning { background: var(--tv-warning); color: var(--tv-ink); }
.tv-status--danger  { background: var(--tv-danger);  color: var(--tv-white-pure); }
.tv-status--neutral { background: var(--tv-canvas);  color: var(--tv-ink); }

/* 12.7 CONTROLES NATIVOS — checkbox/radio sempre na marca (evita azul do browser
   ou cor primária dinâmica do admin escapando). DESIGN.md One-Clover. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--tv-primary-deep); }

/* 12.8 color-scheme light nos campos — evita que o Chromium pinte o chrome nativo
   (texto/caret/spinner) escuro sobre fundo paper quando um color-scheme:dark herda. */
.tv-input, .tv-select, .tv-textarea,
input:not([type="checkbox"]):not([type="radio"]), select, textarea { color-scheme: light; }

/* 12.9 Borda de card NÃO herda a cor-primária dinâmica. load_settings.php injeta
   `div.bg-dark-card.border{border-color:cor_primaria!important}` (0,2,1) — esta regra
   (0,2,2) vence e força o contorno ink do DESIGN.md (Chunky Outline Rule). */
body div.bg-dark-card.border, body .bg-dark-card.border { border-color: var(--tv-ink) !important; }

/* ============================================================================
   13. NORMALIZAÇÃO UNIVERSAL DE MODAIS/POPUPS (legados)
   --------------------------------------------------------------------------
   Topbar (.tv-topbar) é z-index:40 e sidebar (.tv-sidebar) é z-index:50.
   Modal/popup DEVE sobrepor todo o shell. Famílias legadas (tv-vmodal,
   ck-modal-back, gw-overlay, eq-modal-overlay, tk-modal-overlay, etc.) e
   modais Tailwind com `inset-0 z-50` ficavam com z-index baixo (50-9999) e
   alguns sem blur. Esta camada força:
     - z-index máximo (2147483600), background ink 0.55, blur 8px
     - centralização vertical+horizontal QUANDO ABERTO (cada família mantém
       sua classe de "aberto" — não forçamos display em estado fechado).
   Sem !important no display de fechado para não quebrar os modais escondidos.
   ============================================================================ */

/* 13.1 Famílias com classe própria — força z máximo + blur uniforme.
   Inclui legados que NÃO casam com a regra de §7.10 (que só pega "modal-overlay"). */
body .tv-vmodal,
body .vd-modal,
body .tkt-modal,
body .ck-modal-back,
body .gw-overlay,
body [id*="modal"][class*="inset-0"][class*="z-50"],
body [id*="Modal"][class*="inset-0"][class*="z-50"] {
  position: fixed !important; inset: 0 !important;
  z-index: 2147483600 !important;
  background-color: rgba(var(--tv-ink-rgb), 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Scrim interno (filho com classe __overlay) das famílias com 2 camadas — neutraliza
   o overlay próprio (que tinha z:-1 e blur 2px fraco) para não interferir no scrim pai. */
body .vd-modal .vd-modal__overlay,
body .tkt-modal .tkt-modal__overlay,
body .tv-vmodal .tv-vmodal__scrim {
  display: none !important;
}

/* 13.2 Modais Tailwind crus (`fixed inset-0 z-50`).
   A regra de §7.10 já força blur+background; aqui forçamos z-index máximo
   para que não fiquem empatados com o sidebar (z:50). Duas variantes:
   1. Com role/aria (cobertura semântica correta — vendas, tickets, resumos)
   2. Sem role/aria, identificados pelo id contendo "modal" (admin_broadcast,
      admin_smtp_config, plugins, upload-modal — autores não puseram ARIA). */
body [class*="inset-0"][class*="z-50"][role="dialog"],
body [class*="inset-0"][role="dialog"][aria-modal="true"],
body [id*="modal"][class*="inset-0"][class*="z-50"],
body [id*="Modal"][class*="inset-0"][class*="z-50"] {
  z-index: 2147483600 !important;
}

/* 13.3 Estado aberto — garante centralização (algumas famílias já têm,
   mas reforçamos para consistência). Só atinge o estado open de cada
   família, então não quebra o estado fechado. */
body .tv-vmodal:not(.hidden),
body .vd-modal:not(.hidden):not([hidden]),
body .tkt-modal:not(.hidden):not([hidden]),
body .ck-modal-back.is-open,
body .gw-overlay.is-open,
body .eq-modal-overlay.show,
body .tk-modal-overlay.show,
body .cu-modal-overlay.is-open,
body .modal-overlay.open,
body .ck-modal-overlay.open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 13.4 Modais Tailwind quando visíveis (sem .hidden): garante flex+center.
   Tailwind costuma usar `flex items-center justify-center` quando aberto, mas
   reforçamos para os casos onde o autor esqueceu (ex: só `inset-0 z-50`).
   Inclui a variante por id (modais admin sem role/aria). */
body [class*="inset-0"][role="dialog"][aria-modal="true"]:not(.hidden):not([hidden]),
body [id*="modal"][class*="inset-0"][class*="z-50"]:not(.hidden):not([hidden]),
body [id*="Modal"][class*="inset-0"][class*="z-50"]:not(.hidden):not([hidden]) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 13.5 PADRONIZAÇÃO VISUAL DOS CARDS — todos os modais devem ter o mesmo
   visual do canon Trevo (sistema tv_modal_start): paper creme + outline
   2px ink + border-radius XL + comic offset 6px. Antes desta regra:
     - .modal-content (admin_usuarios) → cinza escuro (var(--ck-surface-elev))
     - .gw-modal → borda hairline cinza + shadow 8px hairline
     - .tv-vmodal__card / .eq-modal / .tk-modal-card → shadow 4px (não 6px)
     - .ck-modal → sem shadow
   Esta regra força um único visual consistente.
   IMPORTANTE: position/transform/animation são neutralizados em .modal-content
   porque o original usava translate(-50%,-50%) que conflita com o flex-center
   do scrim (após portal pro body o card ia parar fora da viewport). */
body .tv-vmodal__card,
body .vd-modal__card,
body .tkt-modal__card,
body .ck-modal,
body .gw-modal,
body .eq-modal,
body .tk-modal-card,
body .cu-modal,
body .modal-content,
body [class*="inset-0"][role="dialog"][aria-modal="true"] .bg-dark-card,
body [id*="modal"][class*="inset-0"][class*="z-50"] .bg-dark-card,
body [id*="Modal"][class*="inset-0"][class*="z-50"] .bg-dark-card {
  background: var(--tv-paper) !important;
  color: var(--tv-ink) !important;
  border: var(--tv-outline) !important;
  border-radius: var(--tv-r-xl) !important;
  box-shadow: 6px 6px 0 var(--tv-ink) !important;
}

/* Head/foot dessas famílias usam --tv-canvas em vez de --tv-paper, criando uma
   "faixa cinza" no topo/rodapé do card. Padroniza para paper igual ao canon. */
body .vd-modal__head, body .vd-modal__foot,
body .tkt-modal__head, body .tkt-modal__foot,
body .tv-vmodal__head, body .tv-vmodal__foot {
  background: var(--tv-paper) !important;
  border-color: var(--tv-ink) !important;
}

/* Texto branco/cinza dos modais Tailwind (text-white, text-gray-*) — vira ink,
   pra manter contraste no fundo paper sem tocar nas classes do markup. */
body [class*="inset-0"][role="dialog"][aria-modal="true"] .bg-dark-card,
body [class*="inset-0"][role="dialog"][aria-modal="true"] .bg-dark-card *,
body [id*="modal"][class*="inset-0"][class*="z-50"] .bg-dark-card,
body [id*="modal"][class*="inset-0"][class*="z-50"] .bg-dark-card *,
body [id*="Modal"][class*="inset-0"][class*="z-50"] .bg-dark-card,
body [id*="Modal"][class*="inset-0"][class*="z-50"] .bg-dark-card * {
  color: var(--tv-ink);
}
body [class*="inset-0"][role="dialog"][aria-modal="true"] .bg-dark-card [class*="text-white"],
body [class*="inset-0"][role="dialog"][aria-modal="true"] .bg-dark-card [class*="text-gray-"],
body [id*="modal"][class*="inset-0"][class*="z-50"] .bg-dark-card [class*="text-white"],
body [id*="modal"][class*="inset-0"][class*="z-50"] .bg-dark-card [class*="text-gray-"],
body [id*="Modal"][class*="inset-0"][class*="z-50"] .bg-dark-card [class*="text-white"],
body [id*="Modal"][class*="inset-0"][class*="z-50"] .bg-dark-card [class*="text-gray-"] {
  color: var(--tv-ink) !important;
}

/* 13.6 Reset específico em .modal-content (admin_usuarios): a versão antiga
   usava position:absolute + transform:translate(-50%,-50%) para centralizar,
   que conflita com o flex-center do scrim e quebra após portal pro body. */
body .modal-content {
  position: relative !important;
  top: auto !important; left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 600px !important;
  max-height: calc(100vh - 64px) !important;
  overflow-y: auto !important;
}
