@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

*[style*="font-weight:600"], *[style*="font-weight: 600"],
*[style*="font-weight:700"], *[style*="font-weight: 700"],
*[style*="font-weight:800"], *[style*="font-weight: 800"],
*[style*="font-weight:900"], *[style*="font-weight: 900"] { font-weight: 500 !important; }

/* Teto de peso 500 SEM EXCEÇÃO (manual Avanti): <strong>/<b>/<th> usam 700 do navegador
   (não inline, escapavam do guard acima). Força 500 e desliga faux-bold sintético. */
b, strong, th { font-weight: 500 !important; }
* { font-synthesis-weight: none; }

[style*="linear-gradient"], [style*="radial-gradient"] { background-image: none !important; }

:root {
    /* 5 tokens canônicos do Sistema de Marca Avanti (Sistema_de_Cores v1) */
    --bg-primary: #020B1A;   /* BG Primary  */
    --bg-surface: #0A1931;   /* BG Surface  */
    --brand-deep: #002970;   /* Brand Deep — hero/full-bleed, hover do botão, overline no claro */
    --brand-accent: #2290FF; /* Brand Accent */
    --brand-purple: #2290FF;
    --brand-cyan: #2290FF;
    --text-primary: #F6F5F2;   /* texto sobre escuro = BG Light */
    --text-secondary: #F6F5F2; /* idem — no dark TODO texto é BG Light (hierarquia por peso/escala) */
    --text-tertiary: #0A1931;  /* texto alternativo sobre claro = BG Surface (Sistema de Cores) */
    --bg-light: #F6F5F2;     /* BG Light — off-white da marca (NUNCA branco puro) */

    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-success-soft: #F0FDF4;
    --color-warning-soft: #FFFBEB;
    --color-danger-soft: #FEF2F2;

    --navy: #020B1A;
    --navy-hex: #020B1A;
    --navy-foreground: #F6F5F2;       /* texto sobre escuro = BG Light, nunca #F6F5F2 puro */
    --navy-foreground-hex: #F6F5F2;
    --sky: #F6F5F2;
    --sky-hex: #F6F5F2;
    --background: #F6F5F2;            /* canvas = BG Light off-white (regra de marca) */
    --background-hex: #F6F5F2;
    --foreground: #020B1A;
    --foreground-hex: #020B1A;
    --card: #F6F5F2;                 /* card branco = leve elevação sobre o off-white */
    --card-hex: #F6F5F2;
    --card-foreground: #020B1A;
    --border: rgba(2,11,26,0.12);    /* borda sutil da marca (12% navy, 0.5px) */
    --border-hex: rgba(2,11,26,0.12);
    --muted: #F6F5F2;
    --muted-hex: #F6F5F2;
    --muted-foreground: #0A1931;      /* texto secundário = BG Surface, tom sólido sancionado
                                         ("texto alternativo sobre o claro" — Sistema de Cores).
                                         Hierarquia vem de peso/escala, não de cinza. */
    --muted-foreground-hex: #0A1931;
    --ring: #2290FF;
    --ring-hex: #2290FF;
    --input: var(--border-hex);

    --primary: var(--navy);
    --primary-hex: var(--navy-hex);
    --accent: var(--brand-accent);
    --accent-soft: rgba(34,144,255,0.10); /* tint de chip — exceção documentada (padrão pill) */
    --purple-soft: rgba(34,144,255,0.10); /* roxo eliminado — cai no tint do accent */
    --cyan-soft: rgba(34,144,255,0.10);
    --bg: var(--background);
    --bg-alt: var(--muted);
    --text: var(--foreground);
    --text-muted: var(--muted-foreground);
    --text-faint: var(--text-tertiary);

    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-btn: 100px;
    --radius-card: 16px;
    --radius-chip: 100px;

    --shadow-xs: 0 1px 2px rgba(2, 11, 26, 0.04);
    --shadow-sm: 0 1px 3px rgba(2, 11, 26, 0.06), 0 1px 2px rgba(2, 11, 26, 0.04);
    --shadow: 0 4px 12px -2px rgba(2, 11, 26, 0.08), 0 2px 4px -2px rgba(2, 11, 26, 0.04);
    --shadow-lg: 0 12px 24px -6px rgba(2, 11, 26, 0.12), 0 4px 8px -4px rgba(2, 11, 26, 0.06);

    --transition: all .2s cubic-bezier(.4, 0, .2, 1);
    --transition-colors: background-color .2s ease, color .2s ease, border-color .2s ease;

    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
@media (min-width: 1920px) { html { font-size: 17px; } }
@media (min-width: 2560px) { html { font-size: 19px; } }
@media (min-width: 3200px) { html { font-size: 22px; } }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img { image-rendering: -webkit-optimize-contrast; }
}

/* Micro-animations (clean / sutis) */
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.55; } }
.avanti-card, .quick-card, .metric-card { transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease, border-color .18s ease; }
.avanti-card:hover, .quick-card:hover, .metric-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -6px rgba(2,11,26,0.10); }
button:not(:disabled), .avanti-cta-pill, a.avanti-cta-pill { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease; }
button:not(:disabled):hover, .avanti-cta-pill:hover { transform: translateY(-1px); }
button:not(:disabled):active, .avanti-cta-pill:active { transform: translateY(0); }
input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(34,144,255,0.15); }
.flash { animation: slideUp .3s cubic-bezier(.4,0,.2,1); }
.pill-tag, .au-pill, .af-pill, .sf-status { transition: background-color .18s ease, color .18s ease; }
[data-step].active { animation: fadeIn .25s ease-out; }
.modal-bg.open { animation: fadeIn .2s ease; }
.modal-box, .modal-box-content { animation: slideUp .28s cubic-bezier(.4,0,.2,1); }
/* ── Microanimações leves (o guard prefers-reduced-motion abaixo zera todas) ── */
.avanti-card:hover, .quick-card:hover, .metric-card:hover, .hd-card:hover, .sf-card:hover {
  transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(2,11,26,.20); }
button:not(:disabled):active, .avanti-cta-pill:active, a.avanti-cta-pill:active { transform: translateY(1px); }
main { animation: fadeIn .34s cubic-bezier(.4,0,.2,1); }
.toast { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body, input, textarea, select, button {
    font-family: var(--font-display) !important;
    font-feature-settings: 'cv11', 'ss01';
    font-weight: 400;
}

body {
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0;
    color: var(--text);
    background: var(--bg);
    margin: 0;
}

h1, h2, h3, h4, h5 {
    color: var(--navy-hex);
    font-family: var(--font-display);
    font-weight: 500;
    margin: 0 0 .5rem;
}

h1, .text-titulo {
    font-size: 44px;
    line-height: 48px;
    letter-spacing: -1.6px;
    font-weight: 500;
}
@media (max-width: 1024px) { h1, .text-titulo { font-size: 38px; line-height: 42px; letter-spacing: -1.35px; } }
@media (max-width: 768px) { h1, .text-titulo { font-size: 32px; line-height: 35px; letter-spacing: -1.1px; } }

h2, .text-titulo-2 { font-size: 30px; line-height: 36px; letter-spacing: -0.8px; }
@media (max-width: 1024px) { h2, .text-titulo-2 { font-size: 27px; line-height: 33px; letter-spacing: -0.65px; } }
@media (max-width: 768px) { h2, .text-titulo-2 { font-size: 24px; line-height: 30px; letter-spacing: -0.5px; } }
h3, .text-titulo-3 { font-size: 22px; line-height: 30px; letter-spacing: -0.4px; }
@media (max-width: 1024px) { h3, .text-titulo-3 { font-size: 20px; line-height: 28px; letter-spacing: -0.32px; } }
@media (max-width: 768px) { h3, .text-titulo-3 { font-size: 19px; line-height: 26px; letter-spacing: -0.25px; } }
h4 { font-size: 18px; line-height: 24px; letter-spacing: -.3px; }

p { font-size: 16px; line-height: 28px; letter-spacing: 0; margin: 0 0 1rem; }

.text-display { font-weight: 300; font-size: 64px; line-height: 66px; letter-spacing: -2.9px; }
@media (max-width: 1024px) { .text-display { font-size: 52px; line-height: 54px; letter-spacing: -2.35px; } }
@media (max-width: 768px) { .text-display { font-size: 42px; line-height: 44px; letter-spacing: -1.9px; } }

.text-subtitulo { font-weight: 300; font-size: 19px; line-height: 30px; letter-spacing: -.3px; color: var(--text-muted); }

.text-overline, .avanti-tag {
    display: inline-block;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--brand-deep);   /* overline no claro = Brand Deep (accent e overline do Dark) */
}
html[data-theme="dark"] .text-overline, html[data-theme="dark"] .avanti-tag { color: var(--brand-accent); }

.text-caption { font-weight: 300; font-size: 13px; line-height: 20px; letter-spacing: .2px; color: var(--text-muted); }

.text-label, .pill-tag, .avanti-badge {
    display: inline-block;
    font-weight: 500;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--accent-soft);
    color: var(--brand-deep);
}
html[data-theme="dark"] .text-label, html[data-theme="dark"] .pill-tag { color: var(--brand-accent); }
.pill-tag.api { background: var(--brand-deep); color: #F6F5F2; letter-spacing: 1px; }  /* label solido (spec) */
.pill-tag.email { background: var(--cyan-soft); color: var(--brand-deep); }
html[data-theme="dark"] .pill-tag.email { color: var(--brand-accent); }
.pill-purple { background: var(--purple-soft); color: var(--brand-purple); }
.pill-cyan { background: var(--cyan-soft); color: var(--brand-cyan); }
.pill-success { background: var(--color-success-soft); color: var(--color-success); }
.pill-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.pill-danger { background: var(--color-danger-soft); color: var(--color-danger); }

.text-footnote { font-weight: 300; font-size: 11px; line-height: 16px; letter-spacing: .1px; color: var(--text-muted); }

.text-quote, blockquote { font-weight: 300; font-style: italic; font-size: 26px; line-height: 34px; letter-spacing: -.4px; }

.text-stat { font-weight: 400; font-size: 64px; line-height: 64px; letter-spacing: -3.2px; color: var(--navy-hex); }
@media (max-width: 1024px) { .text-stat { font-size: 54px; line-height: 54px; letter-spacing: -2.7px; } }
@media (max-width: 768px) { .text-stat { font-size: 42px; line-height: 42px; letter-spacing: -2.1px; } }

.text-list, ul.text-list, ol.text-list { font-weight: 400; font-size: 16px; line-height: 30px; padding-left: 14px; }

.text-leadin { font-weight: 300; font-size: 22px; line-height: 34px; letter-spacing: -0.4px; }
@media (max-width: 1024px) { .text-leadin { font-size: 20px; line-height: 31px; letter-spacing: -0.34px; } }
@media (max-width: 768px) { .text-leadin { font-size: 18px; line-height: 28px; letter-spacing: -0.28px; } }

.text-pullquote { font-weight: 300; font-size: 34px; line-height: 42px; letter-spacing: -1.2px; }
@media (max-width: 1024px) { .text-pullquote { font-size: 28px; line-height: 35px; letter-spacing: -0.95px; } }
@media (max-width: 768px) { .text-pullquote { font-size: 24px; line-height: 31px; letter-spacing: -0.8px; } }

.text-button, .avanti-cta-pill {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .3px;
    padding: 14px 28px;
    border-radius: 100px;
    cursor: pointer;
    border: none;
    background: var(--navy-hex);
    color: var(--navy-foreground-hex);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    transition: var(--transition-colors), transform .2s;
}
.avanti-cta-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow); background: var(--brand-deep); color: var(--bg-light); }
.avanti-cta-pill.accent { background: var(--brand-accent); color: var(--bg-light); }
.avanti-cta-pill.accent:hover { background: var(--brand-deep); }  /* hover canônico Brand Deep */
.avanti-cta-pill.purple { background: var(--brand-purple); }
.avanti-cta-pill.cyan { background: var(--brand-cyan); }
.avanti-cta-pill.outline { background: transparent; color: var(--brand-accent); border: 1.5px solid var(--brand-accent); }
.avanti-cta-pill.outline:hover { background: transparent; color: var(--brand-deep); border-color: var(--brand-deep); }

.avanti-card {
    background: var(--card);
    border: 1px solid var(--border-hex);
    border-radius: 16px;
    padding: 1.5rem;
    transition: var(--transition);
}
.avanti-card { transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s; }
.avanti-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.avanti-cta-pill:active { transform: translateY(0); }
button:not(:disabled):active, .avanti-cta-pill:not(:disabled):active { transform: scale(.97); }
.skeleton { background: var(--muted-hex); animation: skel 1.4s ease-in-out infinite; border-radius: 8px; }
@keyframes skel { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.fade-in, tbody tr, .avanti-card { animation: fadeIn .25s ease-out; }
.copy-btn { background: none; border: 0; cursor: pointer; padding: 2px 6px; border-radius: 100px; color: var(--muted-foreground-hex); font-size: 12px; transition: color .15s, background .15s; }
.copy-btn:hover { color: var(--brand-accent); background: var(--accent-soft); }
.copy-btn.copied { color: #22c55e; }
#toast-stack { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 1000; pointer-events: none; }
.toast { background: var(--navy-hex); color: #F6F5F2; padding: .75rem 1.25rem; border-radius: 9999px; font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-lg); animation: toastIn .3s cubic-bezier(.4,0,.2,1); pointer-events: auto; max-width: 480px; }
.toast.success { background: #15803d; }
.toast.error { background: #b91c1c; }
.toast.warn { background: #f59e0b; color: #020B1A; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(20px); } }
.toast.fade-out { animation: toastOut .25s forwards; }
#cmd-palette { position: fixed; inset: 0; background: rgba(2,11,26,.6); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 1001; }
#cmd-palette.open { display: flex; }
#cmd-palette .cmd-box { background: var(--card); width: min(560px, 92vw); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
#cmd-palette input { width: 100%; padding: 1.1rem 1.4rem; border: 0; font-size: 16px; font-family: inherit; border-bottom: 1px solid var(--border-hex); outline: none; box-sizing: border-box; }
#cmd-palette .cmd-list { max-height: 400px; overflow-y: auto; }
#cmd-palette .cmd-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.4rem; cursor: pointer; font-size: 14px; color: var(--text); }
#cmd-palette .cmd-item:hover, #cmd-palette .cmd-item.active { background: var(--muted-hex); color: var(--navy-hex); }
#cmd-palette .cmd-item .cmd-shortcut { margin-left: auto; font-size: 11px; color: var(--text-muted); font-family: monospace; }

.avanti-card-sky { background: var(--card); border-radius: 16px; padding: 1.75rem; }

.avanti-card-accent {
    background: var(--card);
    border-radius: 16px;
    border-left: 4px solid var(--brand-accent);
    padding: 1.25rem;
    transition: var(--transition);
}
.avanti-card-accent:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.avanti-card-accent.purple { border-left-color: var(--brand-purple); }
.avanti-card-accent.cyan { border-left-color: var(--brand-cyan); }
.avanti-card-accent.success { border-left-color: var(--color-success); }
.avanti-card-accent.warning { border-left-color: var(--color-warning); }
.avanti-card-accent.danger { border-left-color: var(--color-danger); }

a { color: var(--brand-accent); text-decoration: none; }
a:hover { text-decoration: none; filter: brightness(1.15); }

input, select, textarea {
    font-size: 14px;
    background: var(--card);
    border: 1px solid var(--border-hex);
    border-radius: 8px;
    padding: .75rem 1rem;
    color: var(--foreground-hex);
    transition: var(--transition-colors);
    font-family: var(--font-display);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 3px rgba(34,144,255,0.10);
}

.field input:required + label::after,
.field select:required + label::after,
.field label:has(+ input[required])::after,
.field label:has(+ select[required])::after,
.field label:has(+ textarea[required])::after {
    content: " *";
    color: #ef4444;
    font-weight: 500;
}

input:invalid:not(:placeholder-shown), select:invalid, textarea:invalid:not(:placeholder-shown) {
    border-color: #EF4444;
    background: #fef2f2;
}

input:valid:not(:placeholder-shown):required, select:valid:required, textarea:valid:not(:placeholder-shown):required {
    border-color: #22C55E;
}

/* ============ DARK MODE — refinado ============ */
html[data-theme="dark"] {
    --navy-hex: #F6F5F2;
    --brand-accent: #2290FF;
    --background: #020B1A;
    --background-hex: #020B1A;
    --foreground: #F6F5F2;
    --foreground-hex: #F6F5F2;
    --card: #0A1931;
    --card-hex: #0A1931;
    --border: rgba(246,245,242,.14);
    --border-hex: rgba(246,245,242,.14);
    --muted: #0A1931;
    --muted-hex: #0A1931;
    --muted-foreground: #F6F5F2;   /* no dark todo texto é BG Light (peso/escala fazem a hierarquia) */
    --muted-foreground-hex: #F6F5F2;
    --bg: #020B1A;
    --bg-alt: #0A1931;
    --text: #F6F5F2;
    --text-muted: #F6F5F2;
}
html[data-theme="dark"] body { background: #020B1A; color: #F6F5F2; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: #F6F5F2; }
html[data-theme="dark"] .avanti-card,
html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .hd-card,
html[data-theme="dark"] .sf-card,
html[data-theme="dark"] .au-table,
html[data-theme="dark"] .af-table,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .tpl-block,
html[data-theme="dark"] .bc-callout,
html[data-theme="dark"] .gloss-item,
html[data-theme="dark"] details.bc-item,
html[data-theme="dark"] .fundo-section { background: #0A1931; border-color: rgba(246,245,242,.14); color: #F6F5F2; }
html[data-theme="dark"] aside.sidebar { background: #020B1A; border-color: rgba(246,245,242,.14); }
html[data-theme="dark"] header.app-header { background: #020B1A; border-color: rgba(246,245,242,.14); }
html[data-theme="dark"] .sidebar nav a { color: var(--text-muted); }
html[data-theme="dark"] .sidebar nav a:hover,
html[data-theme="dark"] .sidebar nav a.active { color: #F6F5F2; background: #0A1931; border-left-color: #2290FF; }
html[data-theme="dark"] .sidebar-brand-text { color: #F6F5F2; }
html[data-theme="dark"] .sidebar-section { color: var(--text-muted); }
html[data-theme="dark"] .header-greet, html[data-theme="dark"] .header-greet strong { color: #F6F5F2; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
    background: #020B1A; color: #F6F5F2; border-color: rgba(246,245,242,.14);
}
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus {
    border-color: #2290FF; box-shadow: 0 0 0 3px rgba(34,144,255,.18);
}
html[data-theme="dark"] table { color: #F6F5F2; }
html[data-theme="dark"] table th { background: #0A1931; color: var(--text-muted); border-color: rgba(246,245,242,.14); }
html[data-theme="dark"] table tr { border-color: rgba(246,245,242,.14); }
html[data-theme="dark"] table tr:hover { background: #0A1931; }
/* Gui 15/jul: exclui links ATIVOS/SELECIONADOS (.active/.on) — eles ficam sobre fundo colorido
   (aba/pílula ativa) e o azul global os fazia sumir; agora vale a cor própria do componente. */
html[data-theme="dark"] a:not(.avanti-cta-pill):not(.btn-primary):not(.btn-outline):not(.active):not(.on) { color: #2290FF; }
html[data-theme="dark"] code { background: #0A1931; color: #F6F5F2; }
html[data-theme="dark"] pre { background: #020B1A; color: #F6F5F2; }
html[data-theme="dark"] .pill-tag.pill-success { background: #0A1931; color: #22C55E; }
html[data-theme="dark"] .pill-tag.pill-danger { background: #0A1931; color: #EF4444; }
html[data-theme="dark"] .pill-tag.pill-warning { background: #0A1931; color: #F59E0B; }
html[data-theme="dark"] .flash { background: #0A1931; border-color: #b91c1c; color: #EF4444; }
html[data-theme="dark"] .app-footer { background: #020B1A; border-color: rgba(246,245,242,.14); color: var(--text-muted); }
html[data-theme="dark"] .app-footer a { color: var(--text-muted); }
html[data-theme="dark"] .avanti-cta-pill { background: #2290FF; color: #F6F5F2; }
html[data-theme="dark"] .avanti-cta-pill:hover { background: #002970; }
html[data-theme="dark"] .sidebar-brand .logo-light { display: none; }
html[data-theme="dark"] .sidebar-brand .logo-dark { display: block; }
html:not([data-theme="dark"]) .sidebar-brand .logo-dark { display: none; }

/* DARK MODE — cobrir hardcoded colors comuns em style inline */
html[data-theme="dark"] [style*="background:#F6F5F2"],
html[data-theme="dark"] [style*="background: #F6F5F2"],
html[data-theme="dark"] [style*="background:#F6F5F2"],
html[data-theme="dark"] [style*="background-color:#F6F5F2"],
html[data-theme="dark"] [style*="background:#F6F5F2"],
html[data-theme="dark"] [style*="background:#F6F5F2"],
html[data-theme="dark"] [style*="background:#F6F5F2"] { background: #0A1931 !important; color: #F6F5F2 !important; }
html[data-theme="dark"] [style*="background:#020B1A"] { background: #020B1A !important; }
html[data-theme="dark"] [style*="color:#020B1A"],
html[data-theme="dark"] [style*="color:#020B1A"],
html[data-theme="dark"] [style*="color:var(--navy-hex)"] { color: #F6F5F2 !important; }
html[data-theme="dark"] [style*="color:var(--text-muted)"],
html[data-theme="dark"] [style*="color:var(--text-muted)"],
html[data-theme="dark"] [style*="color:var(--text-muted)"],
html[data-theme="dark"] [style*="color:var(--muted-foreground-hex)"] { color: var(--text-muted) !important; }
html[data-theme="dark"] [style*="border:1px solid var(--border-hex)"],
html[data-theme="dark"] [style*="border:1px solid var(--border-hex)"],
html[data-theme="dark"] [style*="border:1px solid var(--border-hex)"] { border-color: rgba(246,245,242,.14) !important; }

/* Hero dark (já é escuro mas garantir contraste do texto) */
html[data-theme="dark"] .home-hero { background-color: #020B1A; background-image:
  linear-gradient(90deg, rgba(2,11,26,.96) 0%, rgba(2,11,26,.88) 38%, rgba(2,11,26,.55) 62%, rgba(2,11,26,.08) 100%),
  url('/static/equipe-avanti.jpg') !important; }
html[data-theme="dark"] .home-hero, html[data-theme="dark"] .home-hero * { color: #F6F5F2; }
html[data-theme="dark"] .home-hero .home-hero-eyebrow { color: #2290FF; }
html[data-theme="dark"] .home-hero .accent { color: #2290FF; }
html[data-theme="dark"] .home-hero .btn-primary { background: #F6F5F2; color: #020B1A; }
html[data-theme="dark"] .home-hero .btn-outline { color: #F6F5F2; border-color: rgba(238,247,255,0.30); }

/* Metric values, headings, sub-text consistentes */
html[data-theme="dark"] .metric-value, html[data-theme="dark"] .home-hero-title { color: #F6F5F2; }
html[data-theme="dark"] .metric-label { color: #2290FF; }
html[data-theme="dark"] .metric-sub { color: var(--text-muted); }
html[data-theme="dark"] .quick-card h3 { color: #F6F5F2; }
html[data-theme="dark"] .quick-card p { color: var(--text-muted); }
html[data-theme="dark"] .quick-card::after { color: var(--text-muted); }

/* Tabelas — text-muted nos ths */
html[data-theme="dark"] th { color: var(--text-muted) !important; }
html[data-theme="dark"] td { color: #F6F5F2; }

/* Form elements em dark */
html[data-theme="dark"] label { color: #F6F5F2; }
html[data-theme="dark"] legend { color: #F6F5F2; }
html[data-theme="dark"] fieldset { border-color: rgba(246,245,242,.14); background: #0A1931 !important; }

/* Wizard pills no dark */
html[data-theme="dark"] .wizard-step-pill { background: #0A1931; color: var(--text-muted); }
html[data-theme="dark"] .wizard-step-pill.active { background: #2290FF; color: #020B1A; }
html[data-theme="dark"] .wizard-step-pill.done { background: #0A1931; color: #2290FF; }
html[data-theme="dark"] .wizard-arrow { color: var(--text-muted); }

/* Tabs */
html[data-theme="dark"] .sim-tab.active, html[data-theme="dark"] .sf-tab.active { color: #2290FF; border-bottom-color: #2290FF; }

/* Skeleton placeholder */
html[data-theme="dark"] .skeleton { background: #0A1931; }

/* DARK — painéis novos (Rodobens/etapas, avisos) + acento AZUL (migração v2) */
/* fundos quentes/claros (laranja Rodobens, creme da etapa atual, amarelo aviso) → escuro quente */
html[data-theme="dark"] [style*="background:#FFFBEB"],
html[data-theme="dark"] [style*="background:#FFFBEB"],
html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] [style*="background:#FFFBEB"],
html[data-theme="dark"] [style*="background:var(--accent-soft)"],
html[data-theme="dark"] [style*="background:#f0fdf4"],
html[data-theme="dark"] [style*="background:#FEF2F2"] { background: #0A1931 !important; }
/* bordas claras desses painéis → escuras */
html[data-theme="dark"] [style*="border:1px solid #F59E0B"],
html[data-theme="dark"] [style*="border:1px solid #F59E0B"],
html[data-theme="dark"] [style*="border:1px solid #2290FF"],
html[data-theme="dark"] [style*="border:1px solid #2290FF"],
html[data-theme="dark"] [style*="border:1px solid #22C55E"] { border-color: rgba(246,245,242,.14) !important; }
/* textos escuros desses painéis → claros pra ter contraste no fundo escuro */
html[data-theme="dark"] [style*="color:#b45309"],
html[data-theme="dark"] [style*="color:#b45309"],
html[data-theme="dark"] [style*="color:#b45309"],
html[data-theme="dark"] [style*="color:#b45309"],
html[data-theme="dark"] [style*="color:#002970"] { color: #F59E0B !important; }
/* acento AZUL no dark (no lugar do roxo antigo #2290FF) */
html[data-theme="dark"] .wizard-step-pill.active { background: #2290FF; color: #020B1A; }
html[data-theme="dark"] .wizard-step-pill.done { background: #0A1931; color: #2290FF; }
html[data-theme="dark"] .sim-tab.active, html[data-theme="dark"] .sf-tab.active { color: #2290FF; border-bottom-color: #2290FF; }
html[data-theme="dark"] .metric-label, html[data-theme="dark"] .home-hero .accent, html[data-theme="dark"] .home-hero .home-hero-eyebrow { color: #2290FF; }

/* Deep-no-claro vira Accent-no-escuro (16/jul, Gui: pill '1 auto' e nº do funil sumiam).
   É a regra do próprio Sistema de Cores: overline/destaque = Deep no White, Accent no Dark. */
html[data-theme="dark"] [style*="color:#002970" i] { color: #2290FF !important; }
html[data-theme="dark"] .fn-ord { background: #0A1931; color: #2290FF; }

/* Botão dark mode toggle mais visível */
html[data-theme="dark"] #darkmode-btn { color: #2290FF; }

/* Modal background opaco */
html[data-theme="dark"] .modal-bg { background: rgba(2,11,26,0.75); }


/* DARK — cobertura ABRANGENTE de fundos claros (mata os "quadrados" brancos) */
html[data-theme="dark"] [style*="background:#F6F5F2" i],
html[data-theme="dark"] [style*="background: #F6F5F2" i],
html[data-theme="dark"] [style*="background-color:#F6F5F2" i],
html[data-theme="dark"] [style*="background:#F6F5F2" i],
html[data-theme="dark"] [style*="background: #F6F5F2" i],
html[data-theme="dark"] [style*="background-color:#F6F5F2" i],
html[data-theme="dark"] [style*="background:#F6F5F2" i],
html[data-theme="dark"] [style*="background: #F6F5F2" i],
html[data-theme="dark"] [style*="background-color:#F6F5F2" i],
html[data-theme="dark"] [style*="background:#F6F5F2" i],
html[data-theme="dark"] [style*="background: #F6F5F2" i],
html[data-theme="dark"] [style*="background-color:#F6F5F2" i],
html[data-theme="dark"] [style*="background:#F6F5F2" i],
html[data-theme="dark"] [style*="background: #F6F5F2" i],
html[data-theme="dark"] [style*="background-color:#F6F5F2" i],
html[data-theme="dark"] [style*="background:#F6F5F2" i],
html[data-theme="dark"] [style*="background: #F6F5F2" i],
html[data-theme="dark"] [style*="background-color:#F6F5F2" i],
html[data-theme="dark"] [style*="background:#F6F5F2" i],
html[data-theme="dark"] [style*="background: #F6F5F2" i],
html[data-theme="dark"] [style*="background-color:#F6F5F2" i],
html[data-theme="dark"] [style*="background:#F6F5F2" i],
html[data-theme="dark"] [style*="background: #F6F5F2" i],
html[data-theme="dark"] [style*="background-color:#F6F5F2" i],
html[data-theme="dark"] [style*="background:#F6F5F2" i],
html[data-theme="dark"] [style*="background: #F6F5F2" i],
html[data-theme="dark"] [style*="background-color:#F6F5F2" i],
html[data-theme="dark"] [style*="background:#F6F5F2" i],
html[data-theme="dark"] [style*="background: #F6F5F2" i],
html[data-theme="dark"] [style*="background-color:#F6F5F2" i],
html[data-theme="dark"] [style*="background:var(--border-hex)" i],
html[data-theme="dark"] [style*="background: var(--border-hex)" i],
html[data-theme="dark"] [style*="background-color: #F6F5F2" i],
html[data-theme="dark"] [style*="background:var(--border-hex)" i],
html[data-theme="dark"] [style*="background: var(--border-hex)" i],
html[data-theme="dark"] [style*="background-color: #F6F5F2" i],
html[data-theme="dark"] [style*="background:var(--border-hex)" i],
html[data-theme="dark"] [style*="background: var(--border-hex)" i],
html[data-theme="dark"] [style*="background-color: #F6F5F2" i],
html[data-theme="dark"] [style*="background:#f6f5f2" i],
html[data-theme="dark"] [style*="background: #f6f5f2" i],
html[data-theme="dark"] [style*="background-color:#f6f5f2" i],
html[data-theme="dark"] [style*="background:#F6F5F2" i],
html[data-theme="dark"] [style*="background: #F6F5F2" i],
html[data-theme="dark"] [style*="background-color:#F6F5F2" i],
html[data-theme="dark"] [style*="background:#fef2f2" i],
html[data-theme="dark"] [style*="background: #fef2f2" i],
html[data-theme="dark"] [style*="background-color:#fef2f2" i],
html[data-theme="dark"] [style*="background:#FEF2F2" i],
html[data-theme="dark"] [style*="background: #FEF2F2" i],
html[data-theme="dark"] [style*="background-color:#FEF2F2" i],
html[data-theme="dark"] [style*="background:#EF4444" i],
html[data-theme="dark"] [style*="background: #EF4444" i],
html[data-theme="dark"] [style*="background-color:#EF4444" i],
html[data-theme="dark"] [style*="background:#f0fdf4" i],
html[data-theme="dark"] [style*="background: #f0fdf4" i],
html[data-theme="dark"] [style*="background-color:#f0fdf4" i],
html[data-theme="dark"] [style*="background:#F0FDF4" i],
html[data-theme="dark"] [style*="background: #F0FDF4" i],
html[data-theme="dark"] [style*="background-color:#F0FDF4" i],
html[data-theme="dark"] [style*="background:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background: var(--accent-soft)" i],
html[data-theme="dark"] [style*="background-color:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background: var(--accent-soft)" i],
html[data-theme="dark"] [style*="background-color:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background: var(--accent-soft)" i],
html[data-theme="dark"] [style*="background-color:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background: var(--accent-soft)" i],
html[data-theme="dark"] [style*="background-color:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background: var(--accent-soft)" i],
html[data-theme="dark"] [style*="background-color:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background: var(--accent-soft)" i],
html[data-theme="dark"] [style*="background-color:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background: var(--accent-soft)" i],
html[data-theme="dark"] [style*="background-color:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background:#FFFBEB" i],
html[data-theme="dark"] [style*="background: #FFFBEB" i],
html[data-theme="dark"] [style*="background-color:#FFFBEB" i],
html[data-theme="dark"] [style*="background:#fffbeb" i],
html[data-theme="dark"] [style*="background: #fffbeb" i],
html[data-theme="dark"] [style*="background-color:#fffbeb" i],
html[data-theme="dark"] [style*="background:#FFFBEB" i],
html[data-theme="dark"] [style*="background: #FFFBEB" i],
html[data-theme="dark"] [style*="background-color:#FFFBEB" i],
html[data-theme="dark"] [style*="background:#FFFBEB" i],
html[data-theme="dark"] [style*="background: #FFFBEB" i],
html[data-theme="dark"] [style*="background-color:#FFFBEB" i],
html[data-theme="dark"] [style*="background:#FFFBEB" i],
html[data-theme="dark"] [style*="background: #FFFBEB" i],
html[data-theme="dark"] [style*="background-color:#FFFBEB" i],
html[data-theme="dark"] [style*="background:var(--accent-soft)" i],
html[data-theme="dark"] [style*="background: var(--accent-soft)" i],
html[data-theme="dark"] [style*="background-color:var(--accent-soft)" i] { background-color: #0A1931 !important; }

/* DARK — textos escuros de painel → claros */
html[data-theme="dark"] [style*="color:#b91c1c" i],
html[data-theme="dark"] [style*="color:#b91c1c" i],
html[data-theme="dark"] [style*="color:#b91c1c" i] { color: #EF4444 !important; }
html[data-theme="dark"] [style*="color:#15803d" i],
html[data-theme="dark"] [style*="color:#15803d" i],
html[data-theme="dark"] [style*="color:#15803d" i] { color: #22C55E !important; }
html[data-theme="dark"] [style*="color:#002970" i],
html[data-theme="dark"] [style*="color:#002970" i],
html[data-theme="dark"] [style*="color:#002970" i] { color: #2290FF !important; }
html[data-theme="dark"] [style*="color:#b45309" i],
html[data-theme="dark"] [style*="color:#b45309" i],
html[data-theme="dark"] [style*="color:#b45309" i] { color: #F59E0B !important; }
html[data-theme="dark"] [style*="color:#002970" i] { color: #2290FF !important; }
html[data-theme="dark"] [style*="color:#002970" i] { color: #2290FF !important; }
html[data-theme="dark"] [style*="color:#002970" i] { color: #2290FF !important; }  /* Deep no claro = Accent no escuro (fix 16/jul: valor tinha virado tint no passe) */

/* DARK — superfícies brancas definidas em REGRAS CSS (não inline): Leads, Histórico, cards.
   O override de inline-style não alcança essas (são class { background:#F6F5F2 }). */
html[data-theme="dark"] .lp-card, html[data-theme="dark"] .lp-tbl, html[data-theme="dark"] .lp-list,
html[data-theme="dark"] .funil, html[data-theme="dark"] .fcard, html[data-theme="dark"] .empty,
html[data-theme="dark"] .hd-card, html[data-theme="dark"] .anx-item, html[data-theme="dark"] .lp-sortsel,
html[data-theme="dark"] .lp-refresh, html[data-theme="dark"] .chip.miss {
  background: #0A1931 !important; color: #F6F5F2 !important; border-color: rgba(246,245,242,.14) !important;
}
html[data-theme="dark"] .fview.on, html[data-theme="dark"] .lp-filt button.on {
  background: #0A1931 !important; color: #F6F5F2 !important;
}
html[data-theme="dark"] .lp-card *, html[data-theme="dark"] .fcard *, html[data-theme="dark"] .hd-card *:not(.pill-tag):not([style*="color:#b91c1c"]):not([style*="color:#15803d"]) {
  border-color: rgba(246,245,242,.14);
}
/* DARK — campo obrigatório vazio (sem placeholder) não fica ROSA claro: escuro com hint vermelho */
html[data-theme="dark"] input:invalid:not(:placeholder-shown),
html[data-theme="dark"] select:invalid,
html[data-theme="dark"] textarea:invalid:not(:placeholder-shown) {
  background: #0A1931 !important; border-color: #b91c1c !important; color: #F6F5F2 !important;
}

/* DARK — cards de fundo (Para quais fundos enviar): nome legível + borda/hover */
html[data-theme="dark"] .fundo-card > span:nth-of-type(2) { color: #F6F5F2 !important; }
html[data-theme="dark"] .fundo-card { border-color:rgba(246,245,242,.14); }
html[data-theme="dark"] .fundo-card:hover { background:#0A1931; border-color:#2290FF; }
html[data-theme="dark"] .fundo-card:has(input:checked) { background:rgba(34,144,255,.10); }

/* DARK — backgrounds setados via JS (setField IA, ViaCEP, 2FA): el.style.background='#hex'
   é serializado pelo browser pra rgb(...), então os hacks [style*="#hex"] acima NÃO casam.
   Cobre as cores claras que o JS usa, com tint sutil pra manter a distinção ok/aviso/erro. */
html[data-theme="dark"] [style*="rgb(240, 253, 244)"]  /* #f0fdf4 — IA preencheu ok */
{ background: #0A1931 !important; color: #F6F5F2 !important; }
html[data-theme="dark"] [style*="rgb(220, 252, 231)"]  /* #F0FDF4 — confirmado (2FA) */
{ background: #0A1931 !important; color: #F6F5F2 !important; }
html[data-theme="dark"] [style*="rgb(254, 243, 199)"]  /* #FFFBEB — confiança baixa, conferir */
{ background: #0A1931 !important; color: #F59E0B !important; }
html[data-theme="dark"] [style*="rgb(254, 226, 226)"]  /* #FEF2F2 — erro/atenção */
{ background: #0A1931 !important; color: #EF4444 !important; }

/* ── Aurora Avanti — brilho animado em CSS puro (sem vídeo) ─────────────────
   Camada decorativa pra momentos de marca (login, hero da home). As manchas de
   luz derivam devagar em loop; conteúdo fica acima com z-index. GPU-friendly:
   só transform anima (o blur é estático). Respeita prefers-reduced-motion. */
.av-aurora { position:relative; overflow:hidden; }
.av-aurora::before, .av-aurora::after {
  content:""; position:absolute; inset:-40%; pointer-events:none; z-index:0;
  background:
    radial-gradient(38% 32% at 22% 30%, rgba(34,144,255,.30), transparent 70%),
    radial-gradient(30% 28% at 78% 68%, rgba(34,144,255,.15), transparent 70%),
    radial-gradient(24% 22% at 60% 18%, rgba(34,144,255,.11), transparent 70%);
  filter:blur(46px);
  animation:av-aurora-drift 26s ease-in-out infinite alternate;
}
.av-aurora::after {
  background:
    radial-gradient(30% 26% at 75% 25%, rgba(34,144,255,.18), transparent 70%),
    radial-gradient(26% 24% at 25% 75%, rgba(34,144,255,.12), transparent 70%);
  animation-duration:34s; animation-delay:-12s;
}
@keyframes av-aurora-drift {
  from { transform:translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  to   { transform:translate3d(5%, 4%, 0) rotate(8deg) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .av-aurora::before, .av-aurora::after { animation:none; }
}

/* ── Vidro Avanti (glassmorphism) — card sobre fundo escuro ── */
.av-glass {
  background:#0A1931;                        /* elevacao = BG Surface (cromatica, sem vidro) */
  border:1px solid rgba(246,245,242,.14);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
}

/* ───────────────────────────────────────────────────────────────────────────
   Anti-overflow (Guilherme 02/jul: "coisas ficam pra fora"). Defensivo e de
   baixo risco: nada estoura o container, texto/CPF/URL longos quebram, e filhos
   de flex/grid podem encolher (causa nº1 de layout vazando). Vale pra todas as telas.
   ─────────────────────────────────────────────────────────────────────────── */
img, svg, video, canvas { max-width: 100%; }
table { max-width: 100%; }
td, th,
.avanti-card, .quick-card, .metric-card, .hd-card, .sf-card,
.pipe-card, .pp-card, .gs-card, .kpi { overflow-wrap: anywhere; word-break: break-word; }
main, .app-content,
.grid-2, .grid-3, .grid-4,
.grid-cols-2, .grid-cols-3, .grid-cols-4 { min-width: 0; }
.table-wrap, .tbl-wrap, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Identidade da Home aplicada ao portal inteiro (Gui 14/jul): títulos leves,
   negrito interno 500 — telas com estilo próprio (inline) seguem ganhando. ── */
.app-main h1 { font-weight: 300; letter-spacing: -1.2px; }
.app-main h1 b, .app-main h1 strong { font-weight: 500; }

/* botão de tema no padrão da home (Gui 14/jul): quadradinho arredondado ☾/☀ */
#darkmode-btn { width: 34px; height: 34px; border-radius: 100px; border: 0.5px solid var(--border-hex);
  background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; font-size: 15px; line-height: 1; padding: 0;
  transition: color .15s ease, border-color .15s ease; }
#darkmode-btn:hover { color: var(--navy-hex); border-color: rgba(2,11,26,.3); }
html[data-theme="dark"] #darkmode-btn { border-color: rgba(246,245,242,.14); color: var(--text-muted); }
html[data-theme="dark"] #darkmode-btn:hover { color: #F6F5F2; border-color: rgba(34,144,255,.45); }

/* ── Ícones do kit (sprite _icons.html) — herdam a cor do texto, escalam com a fonte ── */
.av-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; }
.av-dot { width: .55em; height: .55em; display: inline-block; border-radius: 100px; vertical-align: baseline; margin-right: .3em; }