/* ═══════════════════════════════════════════════════════════════════════════════
   Avanti · camada "clean" (28/ago/2026) — pedido do Gui: "design parecido à Apple,
   tudo mais clean e mais fácil". Carrega DEPOIS de avanti-theme.css e só sobrescreve
   o que muda o tom: respiro, superfícies, hierarquia por tamanho, menos chrome.
   Regras de marca mantidas: 5 tokens, Plus Jakarta (peso ≤ 500), pill 100px, sem
   gradiente, sem #fff/#000 puros. Cards em #FCFBF9 (elevação suave sobre o off-white).
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  /* 28/ago (Gui): "fundo branco mesmo" — canvas #FFFFFF, superfícies brancas com borda, trilhos cinza-claro */
  --canvas: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F5F3;             /* trilho/track (colunas, chips neutros, seções agrupadas) */
  --sidebar: #FAFAF9;
  --line: rgba(2,11,26,0.10);
  --line-strong: rgba(2,11,26,0.16);
  --ink: #020B1A;
  --ink-2: #0A1931;
  --ink-3: rgba(2,11,26,0.56);      /* texto terciário (só metadados curtos) */
  --radius-xl: 20px;
  --shadow-soft: 0 1px 2px rgba(2,11,26,0.04), 0 8px 24px -16px rgba(2,11,26,0.10);
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ── canvas e layout ─────────────────────────────────────────────────────── */
html { color-scheme:light; }
html[data-theme="dark"] { color-scheme:dark; }
body { background:var(--canvas); color:var(--ink); -webkit-font-smoothing:antialiased; transition:background-color .25s var(--ease), color .25s var(--ease); }
aside.sidebar, header.app-header, .avanti-card, .metric-card, .quick-card, .op-tile, .fn-step, .pp-card, .pp-col { transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .18s ease, transform .18s var(--ease); }
.container { max-width:1480px; padding:2.25rem 2.5rem 3rem; }
@media (min-width:1920px) { .container { max-width:1800px; padding:2.75rem 3rem 3.5rem; } }
main { animation:none; }

/* ── sidebar: sem barrinha lateral; item ativo vira pill suave ───────────── */
aside.sidebar { background:var(--sidebar); border-right:1px solid var(--line); padding:0 .75rem 1.25rem; }
.sidebar-brand { padding:0 .75rem; border-bottom:0; height:64px; margin-bottom:.25rem; }
.sidebar-brand .brand-selo { height:34px; width:34px; }
.sidebar-brand-text { font-size:14px; letter-spacing:-.01em; }
.sidebar-section { padding:1.1rem .85rem .35rem; font-size:10px; letter-spacing:.16em; color:var(--ink-3); }
.sidebar nav { gap:2px; }
.sidebar nav a { border-left:0; border-radius:10px; padding:.55rem .85rem; font-size:13.5px; color:var(--ink-2); transition:background-color .18s var(--ease), color .18s var(--ease); }
.sidebar nav a:hover { background:rgba(2,11,26,0.05); color:var(--ink); }
.sidebar nav a.active { background:rgba(2,11,26,0.09); font-weight:500; color:var(--ink); border-left:0; }

.home-mais { margin-top:1.5rem; }
.home-mais > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; border:1px solid var(--line-strong); border-radius:100px; font-size:13.5px; font-weight:500; color:var(--ink-2); background:transparent; user-select:none; }
.home-mais > summary::-webkit-details-marker { display:none; }
.home-mais > summary:hover { border-color:var(--ink); color:var(--ink); }
.home-mais[open] > summary { margin-bottom:1.5rem; }

/* ── header: translúcido, fixo, discreto ─────────────────────────────────── */
header.app-header { position:sticky; top:0; z-index:900; background:rgba(255,255,255,0.78); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid var(--line); height:58px; padding:0 2.5rem; }
.header-greet { font-size:13px; color:var(--ink-3); }
.header-user { gap:.65rem; }
.header-user form button { font-size:12.5px; color:var(--ink-3); padding:.35rem .6rem; border-radius:100px; }
.header-user form button:hover { background:rgba(2,11,26,0.05); color:var(--ink); }
.header-home { padding:.35rem; border-radius:100px; }
.header-home:hover { background:rgba(2,11,26,0.05); }

/* ── "hero" escuro inline das páginas (13 telas) vira cabeçalho claro ─────
   Apple não abre a página com um bloco navy: título grande, leve, no canvas.  */
.container > div > div[style*="background:#020B1A"][style*="border-radius:20px"],
.container > div[style*="background:#020B1A"][style*="border-radius:20px"] {
  background:transparent !important; color:var(--ink) !important; border-radius:0 !important;
  padding:.35rem 0 1.4rem !important; margin-bottom:.35rem !important; border-bottom:1px solid var(--line);
}
.container > div > div[style*="background:#020B1A"][style*="border-radius:20px"] h1,
.container > div[style*="background:#020B1A"][style*="border-radius:20px"] h1 { color:var(--ink) !important; font-size:34px !important; letter-spacing:-1.2px !important; }
.container > div > div[style*="background:#020B1A"][style*="border-radius:20px"] p,
.container > div[style*="background:#020B1A"][style*="border-radius:20px"] p { color:var(--ink-3) !important; font-size:15px; }
.container > div > div[style*="background:#020B1A"][style*="border-radius:20px"] div[style*="letter-spacing:2.4px"],
.container > div[style*="background:#020B1A"][style*="border-radius:20px"] div[style*="letter-spacing:2.4px"] { color:#2290FF !important; }

/* variante genérica (Retornos, Base de clientes…): qualquer bloco navy inline que abre com h1 */
.container div[style*="background:#020B1A"][style*="border-radius"]:has(> h1),
.container div[style*="background: #020B1A"][style*="border-radius"]:has(> h1),
.container div[style*="background:#020B1A"][style*="border-radius"]:has(> div > h1) {
  background:transparent !important; color:var(--ink) !important; border-radius:0 !important; box-shadow:none !important;
  padding:.35rem 0 1.4rem !important; margin-bottom:.35rem !important; border-bottom:1px solid var(--line);
}
.container div[style*="background:#020B1A"][style*="border-radius"]:has(> h1) h1,
.container div[style*="background:#020B1A"][style*="border-radius"]:has(> div > h1) h1 { color:var(--ink) !important; font-size:34px !important; letter-spacing:-1.2px !important; }
.container div[style*="background:#020B1A"][style*="border-radius"]:has(> h1) p,
.container div[style*="background:#020B1A"][style*="border-radius"]:has(> h1) div:not([style*="letter-spacing"]),
.container div[style*="background:#020B1A"][style*="border-radius"]:has(> div > h1) p { color:var(--ink-2) !important; }
.container div[style*="background:#020B1A"][style*="border-radius"]:has(> h1) [style*="letter-spacing"] { color:#2290FF !important; }
html[data-theme="dark"] .container div[style*="background:#020B1A"][style*="border-radius"]:has(> h1) h1 { color:#F6F5F2 !important; }

/* ── superfícies: cards, tabelas, inputs, botões ─────────────────────────── */
.avanti-card, .metric-card, .quick-card, .modal-box, .modal-box-content,
.pp-filters, .pp-listwrap, .pp-modal, .home-search-results {
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-soft);
}
.avanti-card:hover, .quick-card:hover, .metric-card:hover, .hd-card:hover, .sf-card:hover, .op-tile:hover { transform:translateY(-2px); box-shadow:0 2px 4px rgba(2,11,26,0.04), 0 16px 32px -20px rgba(2,11,26,0.16); border-color:var(--line-strong); }
.metric-card { border-radius:var(--radius-xl); padding:1.5rem 1.6rem 1.4rem; }
.metric-label { color:var(--ink-3); letter-spacing:.12em; font-size:10.5px; }
.metric-value { font-size:2.5rem; letter-spacing:-2px; }
.quick-card { border-radius:var(--radius-xl); }
.quick-card::after { color:var(--ink-3); }
.quick-card:hover { border-color:var(--line-strong); }

table th { font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); font-weight:500; }
table td, table th { border-color:var(--line) !important; }
table tbody tr:hover td { background:rgba(2,11,26,0.025); }

input:not([type=checkbox]):not([type=radio]), select, textarea {
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px;
}
input:focus, select:focus, textarea:focus { border-color:#2290FF; box-shadow:0 0 0 4px rgba(34,144,255,0.14); }
input::placeholder, textarea::placeholder { color:var(--ink-3); }

.avanti-cta-pill, a.avanti-cta-pill, button.avanti-cta-pill { box-shadow:none; }
button:not(:disabled):hover, .avanti-cta-pill:hover { transform:none; }
.flash { border-radius:14px; border-width:1px; box-shadow:var(--shadow-soft); }

.app-footer { background:transparent; border-top:1px solid var(--line); color:var(--ink-3); }

/* ── modo escuro: mesmas ideias com os tokens escuros ─────────────────────── */
html[data-theme="dark"] { --canvas:#020B1A; --sidebar:#040F26; --surface:#0A1931; --surface-2:#071429; --line:rgba(246,245,242,0.12); --line-strong:rgba(246,245,242,0.22); --ink:#F6F5F2; --ink-2:#E6E8EE; --ink-3:rgba(246,245,242,0.62); --shadow-soft:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -18px rgba(0,0,0,.6); }
html[data-theme="dark"] body { background:#020B1A; }
html[data-theme="dark"] aside.sidebar { background:var(--sidebar); }
html[data-theme="dark"] .avanti-card, html[data-theme="dark"] .metric-card, html[data-theme="dark"] .quick-card, html[data-theme="dark"] .op-tile, html[data-theme="dark"] .op-panel, html[data-theme="dark"] .fn-step, html[data-theme="dark"] .home-search-inp, html[data-theme="dark"] .pp-filters, html[data-theme="dark"] .pp-listwrap { background:var(--surface) !important; border-color:var(--line) !important; color:var(--ink); }
html[data-theme="dark"] .metric-value, html[data-theme="dark"] .op-num, html[data-theme="dark"] .fn-val, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color:#F6F5F2; }
html[data-theme="dark"] .metric-label, html[data-theme="dark"] .section-tag { color:var(--ink-3); }
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background:#0A1931; border-color:var(--line-strong); color:#F6F5F2; }
html[data-theme="dark"] .app-footer, html[data-theme="dark"] .app-footer a { color:var(--ink-3); }
html[data-theme="dark"] .home-hero-cta .btn-outline { color:#F6F5F2; border-color:var(--line-strong); }
html[data-theme="dark"] .erro-page .erro-acoes .p { background:#2290FF; }
html[data-theme="dark"] .home-photo::after { opacity:.35; }
html[data-theme="dark"] .sidebar nav a:hover, html[data-theme="dark"] .sidebar nav a.active { background:rgba(246,245,242,0.08); color:#F6F5F2; }
html[data-theme="dark"] header.app-header { background:rgba(2,11,26,0.78); }
html[data-theme="dark"] .container > div > div[style*="background:#020B1A"][style*="border-radius:20px"] h1,
html[data-theme="dark"] .container > div[style*="background:#020B1A"][style*="border-radius:20px"] h1 { color:#F6F5F2 !important; }
html[data-theme="dark"] table tbody tr:hover td { background:rgba(246,245,242,0.04); }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
@media (max-width:900px) { .container { padding:1.1rem .9rem 2rem; } header.app-header { padding:0 1rem; } }

/* ── página de erro (404/500) com a casca do portal ─────────────────────── */
.erro-page { max-width:560px; margin:8vh auto 0; text-align:center; }
.erro-page .erro-cod { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#2290FF; font-weight:500; }
.erro-page h1 { font-size:40px; font-weight:300; letter-spacing:-1.6px; margin:.4rem 0 .6rem; color:var(--ink); }
.erro-page p { color:var(--ink-3); font-size:16px; margin:0 0 1.5rem; }
.erro-page .erro-acoes { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.erro-page .erro-acoes a { display:inline-flex; padding:12px 24px; border-radius:100px; text-decoration:none; font-weight:500; font-size:14px; }
.erro-page .erro-acoes .p { background:#020B1A; color:#F6F5F2; } .erro-page .erro-acoes .p:hover { background:#002970; }
.erro-page .erro-acoes .s { border:1.5px solid var(--line-strong); color:var(--ink); }

/* ── desempenho: Retornos renderiza até 800 cards — o browser só faz layout do que está na tela ── */
.rt-card { content-visibility:auto; contain-intrinsic-size: 1px 240px; }

/* ── dinâmica: entrada suave das colunas/cards e esqueleto de carregamento ─────── */
@keyframes avIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.pp-col { animation: avIn .32s var(--ease) both; }
.pp-col:nth-child(2) { animation-delay:.04s } .pp-col:nth-child(3) { animation-delay:.08s } .pp-col:nth-child(4) { animation-delay:.12s } .pp-col:nth-child(5) { animation-delay:.16s } .pp-col:nth-child(6) { animation-delay:.2s } .pp-col:nth-child(7) { animation-delay:.24s } .pp-col:nth-child(8) { animation-delay:.28s }
.pp-grid, #pp-lista { animation: avIn .28s var(--ease) both; }
.pp-card.link:hover { transform:translateY(-1px); }
@keyframes avShimmer { 0% { background-position:-400px 0 } 100% { background-position:400px 0 } }
.av-skel { position:relative; overflow:hidden; border-radius:10px; background:var(--surface-2); }
.av-skel::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); background-size:400px 100%; animation:avShimmer 1.2s linear infinite; }
html[data-theme="dark"] .av-skel::after { background:linear-gradient(90deg, transparent, rgba(246,245,242,.08), transparent); background-size:400px 100%; }
.pp-skel-col { flex:0 0 272px; width:272px; background:var(--surface-2); border-radius:18px; padding:10px; display:flex; flex-direction:column; gap:.45rem; }
.pp-skel-col .av-skel { height:74px; background:var(--surface); border:1px solid var(--line); }
.pp-skel-col .av-skel.h { height:18px; width:60%; border:0; margin:.3rem .3rem .5rem; background:var(--line); }
.pp-live { display:inline-block; width:7px; height:7px; border-radius:50%; background:#22C55E; margin-right:.4rem; vertical-align:middle; }
.pp-live.on { animation:avPulse 1s ease-in-out infinite; background:#2290FF; }
@keyframes avPulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }
@media (prefers-reduced-motion: reduce) { .pp-col, .pp-grid, #pp-lista { animation:none; } .av-skel::after { animation:none; } }

/* ── dark: o tema já pinta a foto do escritório atrás da saudação; a foto-cartão sai; menu sem azul ── */
html[data-theme="dark"] .home-photo { display:none; }
html[data-theme="dark"] .home-hero { grid-template-columns:1fr; grid-template-areas:"texto" "cta"; padding:2rem 2rem 2.2rem; border-radius:22px; border-bottom:0; margin-bottom:1.25rem; }
html[data-theme="dark"] .sidebar nav a { color:var(--ink-2); }
html[data-theme="dark"] .sidebar nav a:hover { color:#F6F5F2; background:rgba(246,245,242,0.06); }
html[data-theme="dark"] .sidebar nav a.active { color:#F6F5F2; background:rgba(246,245,242,0.10); border-left:0; }
html[data-theme="dark"] .header-home, html[data-theme="dark"] .header-user form button { color:var(--ink-3); }
html[data-theme="dark"] .header-home:hover, html[data-theme="dark"] .header-user form button:hover { color:#F6F5F2; }
html[data-theme="dark"] .pp-tab.fseg.on { background:#0A1931; color:#F6F5F2; }
html[data-theme="dark"] .pp-funil { background:#040F26; }
html[data-theme="dark"] .pp-skel-col { background:#071429; }
html[data-theme="dark"] .pp-skel-col .av-skel { background:#0A1931; }

/* especificidade acima do <style> inline do base.html */
html[data-theme="dark"] body aside.sidebar nav a { color:var(--ink-2); border-left:0; }
html[data-theme="dark"] body aside.sidebar nav a:hover { color:#F6F5F2; background:rgba(246,245,242,0.06); }
html[data-theme="dark"] body aside.sidebar nav a.active { color:#F6F5F2; background:rgba(246,245,242,0.10); }

/* ═══ CASCA 2.0 (28/ago): sidebar com ícones + usuário embaixo, cabeçalho com busca global ═══ */
html body .app-layout { grid-template-columns:248px 1fr; }
html body aside.sidebar { display:flex; flex-direction:column; padding:.85rem .7rem 1rem; gap:.25rem; }
html body .sidebar-brand { height:auto; padding:.5rem .6rem .9rem; margin:0; gap:.7rem; align-items:center; }
html body .sidebar-brand .brand-selo { height:36px; width:36px; }
html body .sidebar-brand-text { display:flex; flex-direction:column; line-height:1.05; font-size:15px; letter-spacing:-.02em; color:var(--ink); }
html body .sidebar-brand-text small { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-top:3px; }
html body .nav-main { display:flex; flex-direction:column; gap:2px; padding:0; flex:1; }
html body .nav-main a, html body .nav-main summary { display:flex; align-items:center; gap:.7rem; padding:.58rem .75rem; border-radius:12px; font-size:13.5px; font-weight:500; color:var(--ink-2); text-decoration:none; border:0; background:transparent; cursor:pointer; transition:background-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease); }
html body .nav-main a .av-ic, html body .nav-main summary .av-ic { width:17px; height:17px; flex:none; opacity:.85; }
html body .nav-main a:hover, html body .nav-main summary:hover { background:rgba(2,11,26,0.06); color:var(--ink); }
html body .nav-main a.active { background:var(--ink); color:#F6F5F2; box-shadow:0 6px 16px -10px rgba(2,11,26,.6); }
html body .nav-main a.active .av-ic { opacity:1; }
html body .nav-main a:active { transform:scale(.985); }
html body .sidebar-user { margin-top:auto; padding:.6rem .35rem 0; border-top:1px solid var(--line); display:flex; align-items:center; gap:.5rem; }
html body .sidebar-user-link { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; flex:1; min-width:0; padding:.4rem .4rem; border-radius:12px; }
html body .sidebar-user-link:hover { background:rgba(2,11,26,0.05); }
html body .sidebar-user-link .header-avatar, html body .sidebar-user-link img { width:34px; height:34px; border-radius:50%; flex:none; }
html body .sidebar-user-txt { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
html body .sidebar-user-txt b { font-weight:500; font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html body .sidebar-user-txt small { font-size:11px; color:var(--ink-3); }
/* cabeçalho: busca à esquerda, sino + tema + avatar à direita */
html body header.app-header { height:64px; padding:0 2.25rem; gap:1rem; background:rgba(255,255,255,0.72); }
html body .gs { position:relative; flex:1; max-width:560px; }
html body .gs-ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-3); pointer-events:none; }
html body .gs-inp { width:100%; box-sizing:border-box; height:42px; padding:0 1rem 0 2.5rem; border-radius:100px; border:1px solid var(--line); background:var(--surface-2); font:inherit; font-size:14px; color:var(--ink); transition:background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
html body .gs-inp:focus { background:var(--surface); border-color:#2290FF; box-shadow:0 0 0 4px rgba(34,144,255,.14); outline:0; }
html body .gs-inp::-webkit-search-cancel-button { -webkit-appearance:none; }
html body .gs-results { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:950; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 48px -24px rgba(2,11,26,.35); overflow:hidden; }
html body .gs-item { display:grid; grid-template-columns:1fr auto; gap:.15rem .8rem; padding:.7rem 1rem; text-decoration:none; color:inherit; border-bottom:1px solid var(--line); }
html body .gs-item:last-child { border-bottom:0; }
html body .gs-item:hover { background:rgba(2,11,26,0.04); }
html body .gs-nome { font-weight:500; color:var(--ink); font-size:14px; }
html body .gs-meta { grid-column:1; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
html body .gs-badge { grid-row:1 / span 2; align-self:center; font-size:11px; font-weight:500; padding:.2rem .6rem; border-radius:100px; background:var(--surface-2); color:var(--ink-2); white-space:nowrap; }
html body .gs-empty { padding:.9rem 1rem; color:var(--ink-3); font-size:13px; }
html body .header-user { gap:.35rem; }
html body .header-user #darkmode-btn, html body .header-user #notifBtn { width:38px; height:38px; border-radius:100px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-2); background:transparent; border:0; }
html body .header-user #darkmode-btn:hover, html body .header-user #notifBtn:hover { background:rgba(2,11,26,0.06); color:var(--ink); }
html body .header-user > a { margin-left:.35rem; }
html[data-theme="dark"] body .nav-main a:hover, html[data-theme="dark"] body .nav-main summary:hover { background:rgba(246,245,242,0.07); color:#F6F5F2; }
html[data-theme="dark"] body .nav-main a.active { background:#2290FF; color:#F6F5F2; box-shadow:0 8px 20px -10px rgba(34,144,255,.7); }
html[data-theme="dark"] body .sidebar-user-link:hover { background:rgba(246,245,242,0.07); }
html[data-theme="dark"] body header.app-header { background:rgba(2,11,26,0.72); }
html[data-theme="dark"] body .gs-inp { background:#0A1931; border-color:var(--line); color:#F6F5F2; }
html[data-theme="dark"] body .gs-inp:focus { background:#0A1931; }
html[data-theme="dark"] body .gs-item:hover { background:rgba(246,245,242,0.05); }
html[data-theme="dark"] body .header-user #darkmode-btn:hover, html[data-theme="dark"] body .header-user #notifBtn:hover { background:rgba(246,245,242,0.08); }
@media (max-width:900px) {
  html body .app-layout { grid-template-columns:1fr; }
  html body header.app-header { padding:0 .9rem; gap:.5rem; }
  html body .gs { max-width:none; }
  html body .gs-inp { height:38px; font-size:16px; }
}

/* hero da Home alinhado com o conteúdo no claro (o tema dava padding lateral) */

/* menu no escuro — vence o "a { color:#2290FF }" global do tema */
html[data-theme="dark"] .nav-main a { color:#E6E8EE !important; }
html[data-theme="dark"] .nav-main a:hover, html[data-theme="dark"] .nav-main summary:hover { color:#F6F5F2 !important; background:rgba(246,245,242,0.07) !important; }
html[data-theme="dark"] .nav-main a.active { color:#F6F5F2 !important; background:#2290FF !important; }
html[data-theme="dark"] .nav-main summary { color:rgba(246,245,242,0.62) !important; }


/* ═══ NAV LEVE (28/ago): 6 itens, sem rótulos; o resto no menu do avatar ═══ */
html body .nav-main { gap:3px; padding-top:.35rem; }
html body .nav-main a { padding:.62rem .8rem; font-size:14px; }
html body details.sidebar-user { position:relative; margin-top:auto; padding:.5rem .1rem 0; border-top:1px solid var(--line); display:block; }
html body details.sidebar-user > summary { list-style:none; display:flex; align-items:center; gap:.6rem; padding:.45rem .5rem; border-radius:12px; cursor:pointer; color:inherit; }
html body details.sidebar-user > summary::-webkit-details-marker { display:none; }
html body details.sidebar-user > summary:hover, html body details.sidebar-user[open] > summary { background:rgba(2,11,26,0.05); }
html body details.sidebar-user > summary .av-ic { margin-left:auto; width:16px; height:16px; color:var(--ink-3); }
html body .user-pop { position:absolute; left:.1rem; right:.1rem; bottom:calc(100% + 6px); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 48px -20px rgba(2,11,26,.35); padding:.4rem; z-index:1300; animation:avIn .16s var(--ease) both; }
html body .user-pop-grp { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:.55rem .75rem .25rem; font-weight:500; }
html body .user-pop a, html body .user-pop .user-pop-sair { display:block; width:100%; text-align:left; padding:.5rem .75rem; border-radius:10px; font-size:13.5px; font-weight:500; color:var(--ink-2); text-decoration:none; background:transparent; border:0; cursor:pointer; font-family:inherit; }
html body .user-pop a:hover, html body .user-pop .user-pop-sair:hover { background:rgba(2,11,26,0.06); color:var(--ink); }
html body .user-pop a.on { color:#2290FF; }
html body .user-pop .user-pop-sair { color:#b91c1c; }
html[data-theme="dark"] body details.sidebar-user > summary:hover, html[data-theme="dark"] body details.sidebar-user[open] > summary { background:rgba(246,245,242,0.07); }
html[data-theme="dark"] body .user-pop { background:#0A1931; border-color:var(--line); }
html[data-theme="dark"] body .user-pop a, html[data-theme="dark"] body .user-pop .user-pop-sair { color:#E6E8EE !important; }
html[data-theme="dark"] body .user-pop a:hover, html[data-theme="dark"] body .user-pop .user-pop-sair:hover { background:rgba(246,245,242,0.08); color:#F6F5F2 !important; }
html[data-theme="dark"] body .user-pop a.on { color:#2290FF !important; }
html[data-theme="dark"] body .user-pop .user-pop-sair { color:#EF4444 !important; }

/* contadores do menu */
html body .nav-main a .nav-badge { margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:100px; font-size:11px; font-weight:500; font-style:normal; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
html body .nav-main a .nav-badge.ok { background:#F0FDF4; color:#15803d; }
html body .nav-main a .nav-badge.warn { background:#FFFBEB; color:#b45309; }
html body .nav-main a.active .nav-badge { background:rgba(246,245,242,.18); color:#F6F5F2; }
html[data-theme="dark"] body .nav-main a .nav-badge.ok { background:rgba(34,197,94,.16); color:#22C55E; }
html[data-theme="dark"] body .nav-main a .nav-badge.warn { background:rgba(245,158,11,.16); color:#F59E0B; }
/* "voltar" discreto no topo das telas de detalhe */
.voltar-linha { display:flex; gap:1rem; align-items:center; margin:0 0 .9rem; font-size:13px; }
.voltar-linha a { color:var(--ink-3); text-decoration:none; }
.voltar-linha a:hover { color:var(--ink); }

/* selo do menu: `hidden` vence o display */
html body .nav-main a .nav-badge[hidden] { display:none !important; }

/* ═══ MENU FLUTUANTE (28/ago, Gui: "prefiro um menu flutuante; estava cortando") ═══ */
@media (min-width:901px) {
  html body .app-layout { grid-template-columns:270px 1fr; column-gap:0; background:var(--canvas); }
  html body aside.sidebar { box-sizing:border-box; position:sticky; top:12px; height:calc(100vh - 24px); margin:12px 0 12px 12px;
    border:1px solid var(--line); border-radius:22px; background:var(--sidebar); box-shadow:0 14px 44px -24px rgba(2,11,26,.28);
    padding:.9rem .7rem .8rem; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; }
  html body aside.sidebar::-webkit-scrollbar { width:0; }
  html body .nav-main { flex:0 0 auto; }
  html body details.sidebar-user { flex:0 0 auto; margin-top:auto; padding-top:.5rem; }
  html body main.app-main { min-height:100vh; }
  html body header.app-header { background:transparent; border-bottom:0; -webkit-backdrop-filter:none; backdrop-filter:none; height:72px; padding:6px 2.25rem 0 1.5rem; position:static; }
  html body .gs-inp { background:var(--surface); border-color:var(--line); box-shadow:0 8px 24px -20px rgba(2,11,26,.25); }
  html body .container { padding-top:.5rem; }
  html[data-theme="dark"] body aside.sidebar { background:#071429; border-color:var(--line); box-shadow:0 14px 44px -20px rgba(0,0,0,.7); }
  html[data-theme="dark"] body .gs-inp { background:#0A1931; }
}
/* telas baixas: menu compacto pra caber sem cortar */
@media (min-width:901px) and (max-height:760px) {
  html body .nav-main a { padding:.48rem .75rem; font-size:13.5px; }
  html body .sidebar-brand { padding:.3rem .6rem .6rem; }
  html body .sidebar-brand .brand-selo { height:32px; width:32px; }
  html body details.sidebar-user > summary { padding:.35rem .45rem; }
}
/* foto do time maior na Home (Gui 28/ago) */
@media (min-width:1001px) {
  html body .home-hero { grid-template-columns:minmax(0,1fr) minmax(380px,46%); column-gap:3rem; align-items:center; padding-top:.5rem; }
  html body .home-photo { width:100%; max-width:none; aspect-ratio:16/10; max-height:380px; border-radius:26px; box-shadow:0 30px 60px -34px rgba(2,11,26,.45); }
  html body .home-hero-title { font-size:52px; letter-spacing:-2.2px; }
}

@media (min-width:1001px) { html body .home-hero { grid-template-rows:auto auto; align-content:center; row-gap:1.4rem; } }

@media (min-width:1001px) { html body .home-hero-content { align-self:end; } html body .home-hero-cta { align-self:start; } }

/* ═══ CONFIGURAÇÕES (29/ago): hub em cards agrupados + faixa de navegação ═══ */
.cfg-grp { margin:0 0 1.6rem; }
.cfg-grp-t { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin:0 0 .6rem; }
.cfg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:.75rem; }
.cfg-card { display:flex; flex-direction:column; gap:.25rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:16px; background:var(--surface); text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.cfg-card:hover { border-color:var(--line-strong); transform:translateY(-1px); box-shadow:0 12px 28px -20px rgba(2,11,26,.3); }
.cfg-card-n { font-weight:500; font-size:14.5px; color:var(--ink); }
.cfg-card-d { font-size:12.5px; color:var(--ink-3); line-height:1.4; }
.cfg-tabs { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin:0 0 1.4rem; padding:.6rem .7rem; border:1px solid var(--line); border-radius:16px; background:var(--surface-2); }
.cfg-tabs a { padding:.4rem .8rem; border-radius:100px; font-size:12.5px; font-weight:500; color:var(--ink-2); text-decoration:none; border:0; background:transparent; }
.cfg-tabs a:hover { background:rgba(2,11,26,.06); color:var(--ink); }
.cfg-tabs a.on { background:var(--ink); color:#F6F5F2 !important; }
.cfg-tabs a.cfg-home { color:var(--ink); background:var(--surface); border:1px solid var(--line); margin-right:.35rem; }
.cfg-grp-lbl { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500; margin:0 .15rem 0 .6rem; }
html[data-theme="dark"] .cfg-tabs { background:#071429; } html[data-theme="dark"] .cfg-tabs a { color:#E6E8EE !important; } html[data-theme="dark"] .cfg-tabs a.on { background:#2290FF; }
html[data-theme="dark"] .cfg-tabs a.cfg-home { background:#0A1931; }

/* ═══ INÍCIO tipo intranet (29/ago): acesso rápido, avisos, links úteis ═══ */
.hq-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.65rem; margin:0 0 1.6rem; }
.hq-tile { display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; padding:1rem 1rem .9rem; border:1px solid var(--line); border-radius:18px; background:var(--surface); text-decoration:none; color:var(--ink); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.hq-tile:hover { border-color:var(--line-strong); transform:translateY(-2px); box-shadow:0 14px 30px -22px rgba(2,11,26,.35); }
.hq-tile .av-ic { width:22px; height:22px; color:#2290FF; }
.hq-tile span { font-size:13.5px; font-weight:500; }
.hq-tile small { font-size:11.5px; color:var(--ink-3); margin-top:-.35rem; }
.hi-2col { display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; margin:0 0 1.6rem; }
@media (max-width:1000px) { .hi-2col { grid-template-columns:1fr; } }
.hi-card { border:1px solid var(--line); border-radius:18px; background:var(--surface); padding:1.1rem 1.25rem; }
.hi-card h3 { margin:0 0 .7rem; font-size:15px; font-weight:500; color:var(--ink); display:flex; justify-content:space-between; align-items:center; }
.hi-card h3 a { font-size:12.5px; color:#2290FF; text-decoration:none; font-weight:500; }
.hi-aviso { display:block; padding:.55rem 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.hi-aviso:last-child { border-bottom:0; }
.hi-aviso b { display:block; font-weight:500; font-size:13.5px; color:var(--ink); }
.hi-aviso small { font-size:11.5px; color:var(--ink-3); }
.hi-links { display:flex; flex-direction:column; gap:.2rem; }
.hi-links a { display:flex; justify-content:space-between; align-items:center; padding:.55rem .7rem; border-radius:10px; text-decoration:none; color:var(--ink-2); font-size:13.5px; font-weight:500; }
.hi-links a:hover { background:rgba(2,11,26,.05); color:var(--ink); }
.hi-links a small { color:var(--ink-3); font-weight:400; font-size:11.5px; }
.hi-vazio { color:var(--ink-3); font-size:13px; padding:.4rem 0; }
html[data-theme="dark"] .hq-tile, html[data-theme="dark"] .hi-card { background:#0A1931; }
html[data-theme="dark"] .hi-links a:hover { background:rgba(246,245,242,.06); }

/* ═══ AZUL DA MARCA (29/ago, Gui): cards e caixas com tinta azul, títulos em Brand Deep, ações em Accent ═══ */
/* 29/ago design: o dono pediu MENOS azul — superfície não leva mais tinta azul (nem bege).
   Os tokens continuam com o mesmo nome pra não quebrar as regras abaixo, mas agora são neutros. */
:root { --tint:#FFFFFF; --tint-2:#FCFCFB; --tint-line:rgba(2,11,26,.10); --deep:#002970; }
html[data-theme="dark"] { --tint:#0A1931; --tint-2:#12253F; --tint-line:rgba(246,245,242,.14); --deep:#8CC2FF; }
/* caixas informativas: superfície branca com borda sutil */
html body .op-tile, html body .hi-card, html body .cfg-card, html body .hq-tile, html body .metric-card, html body .quick-card,
html body .fn-step, html body .op-panel { background:var(--tint); border-color:var(--tint-line); }
html body .op-tile:hover, html body .hq-tile:hover, html body .cfg-card:hover, html body .quick-card:hover, html body .metric-card:hover { background:var(--tint-2); border-color:rgba(2,11,26,.18); }
/* títulos e rótulos em Brand Deep */
html body .hi-card h3, html body .op-tl, html body .metric-label, html body .cfg-grp-t, html body .cfg-card-n,
html body .pp-col-title, html body .pl-title, html body h3 { color:var(--deep); }
html body .section-tag, html body .op-head .section-tag { color:#2290FF; }
/* números grandes em Brand Deep */
html body .op-num, html body .metric-value, html body .fn-val, html body .pp-tab.fseg.on .fseg-n, html body .pp-tab.fseg.on { color:var(--deep); }
/* trilhos do Pipeline e segmentos: cinza de trilho, sem azul */
html body .pp-col { background:#F7F7F5; }
html body .pp-col.terminal-ok { background:#F0FDF4; } html body .pp-col.terminal-no { background:#FEF2F2; }
html body .pp-funil, html body .pp-mode, html body .ls-seg, html body .cfg-tabs { background:#F5F5F3; border:1px solid rgba(2,11,26,.08); }
html body .pp-tab.fseg.on { background:var(--surface); box-shadow:0 1px 2px rgba(2,11,26,.06), 0 6px 16px -12px rgba(2,11,26,.35); }
/* estados ativos e ações primárias: Brand Deep / Accent (em vez do quase-preto) */
html body .nav-main a.active { background:var(--deep); color:#F6F5F2; box-shadow:0 8px 20px -12px rgba(0,41,112,.6); }
html body .pp-mode-btn.on { background:var(--deep); }
html body .pp-toggle.on, html body .pp-vbtn.on, html body .ls-tog.on { background:var(--deep); border-color:var(--deep); }
html body .home-hero-cta .btn-primary, html body .erro-page .erro-acoes .p { background:var(--deep); }
html body .home-hero-cta .btn-primary:hover { background:#2290FF; }
html body .pp-card .pp-subir, html body .pl-subir { background:#2290FF; }
html body .pp-card .pp-subir:hover, html body .pl-subir:hover { background:var(--deep); }
html body .cfg-tabs a.on { background:var(--deep); }
html body .user-pop a.on { color:#2290FF; }
/* ícones das ações rápidas em chip azul */
html body .hq-tile .av-ic { width:36px; height:36px; padding:8px; box-sizing:border-box; border-radius:12px; background:rgba(34,144,255,.14); color:var(--deep); }
/* cabeçalhos de tabela: filete neutro */
html body table th { border-bottom:1px solid rgba(2,11,26,.12) !important; }
/* busca global: campo branco com borda sutil */
html body .gs-inp { border-color:rgba(2,11,26,.12); background:#FFFFFF; }
html body .gs-inp:focus { background:var(--surface); }
/* 29/ago design: filete azul do topo do menu removido (azul demais; a faixa de festa continua) */
@media (min-width:901px) { html body aside.sidebar { border-top:0; } }
html[data-theme="dark"] body .nav-main a.active { background:#2290FF; color:#F6F5F2 !important; }
html[data-theme="dark"] body .pp-mode-btn.on, html[data-theme="dark"] body .cfg-tabs a.on { background:#2290FF; }
html[data-theme="dark"] body .pp-tab.fseg.on { background:#0A1931; color:#F6F5F2; }
html[data-theme="dark"] body .pp-tab.fseg.on .fseg-n { color:#F6F5F2; }

/* ═══ SUPERFÍCIES NEUTRAS (29/ago design, pedido do dono: "não gosto desse azul claro e tem muito
   azul em muita coisa") — cartão é BRANCO com borda sutil; o azul forte fica no banner da Home, no
   item ativo do menu, nos botões primários e nos links. O chip colorido do ícone continua. ═══ */
html body .hq-tile { background:#FFFFFF; border-color:rgba(2,11,26,.10); color:var(--ink); }
html body .hq-tile span { color:#020B1A; } html body .hq-tile small { color:var(--ink-3); }
html body .hq-tile .av-ic { color:#F6F5F2; }
html body .hq-tile:hover { background:#FCFCFB; border-color:rgba(2,11,26,.18); transform:translateY(-3px); box-shadow:0 18px 34px -20px rgba(2,11,26,.35); }
html body .op-tile, html body .fn-step, html body .op-panel, html body .hi-card, html body .metric-card, html body .cfg-card { background:#FFFFFF; border-color:rgba(2,11,26,.10); }
html body .op-tile:hover, html body .cfg-card:hover, html body .metric-card:hover { background:#FCFCFB; border-color:rgba(2,11,26,.18); }
html body .op-tile.link[style*="border-color:#f59e0b"] { background:#FFF7E6; }
html body .pp-col { background:#F7F7F5; }
html body .pp-funil, html body .pp-mode, html body .ls-seg, html body .cfg-tabs { background:#F5F5F3; border-color:rgba(2,11,26,.08); }
html body .home-mais > summary { border-color:rgba(2,11,26,.16); color:var(--deep); }
/* divertido: o selo da marca gira de leve no hover, a foto dá zoom, o número "conta" (já conta) */
html body .sidebar-brand .brand-selo { transition:transform .5s cubic-bezier(.2,.9,.3,1.3); }
html body .sidebar-brand:hover .brand-selo { transform:rotate(12deg) scale(1.08); }
html body .op-num { transition:transform .2s ease; } html body .op-tile:hover .op-num { transform:scale(1.06); transform-origin:left center; }
html[data-theme="dark"] body .op-tile, html[data-theme="dark"] body .fn-step, html[data-theme="dark"] body .op-panel, html[data-theme="dark"] body .hi-card, html[data-theme="dark"] body .metric-card, html[data-theme="dark"] body .cfg-card { background:#0A1931; border-color:rgba(246,245,242,.14); }
html[data-theme="dark"] body .pp-col { background:#081226; }
html[data-theme="dark"] body .hq-tile { background:#0A1931; border-color:rgba(246,245,242,.14); }
html[data-theme="dark"] body .hq-tile span { color:#F6F5F2; }
html[data-theme="dark"] body .hq-tile:hover, html[data-theme="dark"] body .op-tile:hover, html[data-theme="dark"] body .cfg-card:hover, html[data-theme="dark"] body .metric-card:hover { background:#0F2038; border-color:rgba(246,245,242,.22); }
html[data-theme="dark"] body .pp-funil, html[data-theme="dark"] body .pp-mode, html[data-theme="dark"] body .ls-seg, html[data-theme="dark"] body .cfg-tabs { background:#081226; border-color:rgba(246,245,242,.10); }
html[data-theme="dark"] body .gs-inp { background:#0A1931; border-color:rgba(246,245,242,.14); }

/* ═══ BANNER DA HOME — COM a foto do time sob véu azul forte.
   Histórico do dia 29/ago: às 02h o dono reprovou a foto ("era uma coisa ou outra; antes estava melhor") e o
   banner virou Brand Deep chapado; às 14h ele reaprovou a foto e pediu esta versão — véu azul cobrindo a
   largura toda (não corta a foto no meio como antes). Abaixo de 1000px continua azul sólido, sem foto. ═══ */
@media (min-width:1001px) {
  html:not([data-theme="dark"]) body .home-hero, html[data-theme="dark"] body .home-hero { grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"texto" "cta" !important; position:relative; overflow:hidden; min-height:340px;
    padding:2.6rem 2.8rem 2.4rem !important; border-radius:26px; border:0 !important; margin-bottom:1.6rem;
    background:#002970 url('equipe-avanti-hero.jpg') center 42% / cover no-repeat; box-shadow:0 30px 60px -34px rgba(0,41,112,.6); }
  html body .home-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(2,11,26,.72) 0%, rgba(2,11,26,.45) 42%, rgba(2,11,26,.10) 70%, rgba(2,11,26,0) 100%); }   /* 29/ago: sem azul; veu neutro so do lado do texto, pra dar pra ler */
  html body .home-hero > * { position:relative; z-index:1; }
  html body .home-photo { display:none !important; }
  html body .home-hero-content { max-width:600px; }
  html body .home-hero-title, html body .home-hero-sub, html body .home-hero-eyebrow { text-shadow:0 2px 14px rgba(2,11,26,.55); }   /* legibilidade sem veu */
  html body .home-hero-eyebrow { color:#8CC2FF; }
  html body .home-hero-title { color:#F6F5F2 !important; }
  html body .home-hero-title .accent { color:#8CC2FF; }
  html body .home-hero-sub { color:rgba(246,245,242,.85) !important; }
  html body .home-hero-cta .btn-primary { background:#F6F5F2; color:#002970; }
  html body .home-hero-cta .btn-primary:hover { background:#FFFFFF; }   /* 29/ago design: era #fff cru */
  html body .home-hero-cta .btn-outline { color:#F6F5F2; border-color:rgba(246,245,242,.45); }
  html body .home-hero-cta .btn-outline:hover { border-color:#F6F5F2; background:rgba(246,245,242,.1); }
  /* o theme.css punha outra foto (equipe-avanti.jpg) no hero escuro com !important — aqui vale a mesma web */
  html[data-theme="dark"] body .home-hero { background:#020B1A url('equipe-avanti-hero.jpg') center 42% / cover no-repeat !important; }
  html[data-theme="dark"] body .home-hero::before { background:linear-gradient(90deg, rgba(2,11,26,.97) 0%, rgba(2,11,26,.92) 40%, rgba(2,11,26,.45) 68%, rgba(2,11,26,.10) 100%); }
}
@media (max-width:1000px) { html body .home-hero { background:#002970; border-radius:22px; padding:1.6rem 1.4rem; color:#F6F5F2; }
  html body .home-hero-title, html body .home-hero-sub { color:#F6F5F2 !important; } html body .home-hero-cta .btn-primary { background:#F6F5F2; color:#002970; } html body .home-hero-cta .btn-outline { color:#F6F5F2; border-color:rgba(246,245,242,.45); } }

/* ═══ CORES VIVAS (29/ago, Gui): verde, amarelo e vermelho em detalhes — vida sem virar arco-íris ═══ */
:root { --ok:#22C55E; --warn:#F59E0B; --err:#EF4444; }
@media (min-width:1001px) { html body .home-hero-title { font-size:44px !important; letter-spacing:-1.8px !important; } html body .home-hero { min-height:300px; } }
/* acesso rápido: chip do ícone colorido por função + filete embaixo */
html body .hq-tile { position:relative; overflow:hidden; }
html body .hq-tile::after { content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--tile, #2290FF); }
html body .hq-tile:nth-child(1) { --tile:#2290FF; } html body .hq-tile:nth-child(2) { --tile:#22C55E; } html body .hq-tile:nth-child(3) { --tile:#F59E0B; }
html body .hq-tile:nth-child(4) { --tile:#EF4444; } html body .hq-tile:nth-child(5) { --tile:#22C55E; } html body .hq-tile:nth-child(6) { --tile:#2290FF; }   /* 29/ago design: era #8CC2FF (azul claro que o dono nao gosta) */
html body .hq-tile:nth-child(7) { --tile:#F59E0B; } html body .hq-tile:nth-child(8) { --tile:#22C55E; }
html body .hq-tile .av-ic { background:var(--tile, #2290FF); color:#F6F5F2; }
/* números de hoje: filete colorido e rótulo na cor */
html body .op-tile { border-top:4px solid var(--tile, #2290FF); }
html body .op-tiles .op-tile:nth-child(1) { --tile:#22C55E; } html body .op-tiles .op-tile:nth-child(2) { --tile:#2290FF; } html body .op-tiles .op-tile:nth-child(3) { --tile:#F59E0B; }
html body .op-tiles .op-tile:nth-child(1) .op-tl { color:#15803d; } html body .op-tiles .op-tile:nth-child(3) .op-tl { color:#b45309; }
html body .op-tile.link[style*="border-color:#f59e0b"] { --tile:#EF4444; background:#FFF1F1; border-color:rgba(239,68,68,.35) !important; }
/* funil: passos coloridos do azul ao verde */
html body .fn-step .fn-ord { color:#F6F5F2; font-weight:500; }
html body .fn-steps .fn-step:nth-child(1) .fn-ord { background:#2290FF; } html body .fn-steps .fn-step:nth-child(2) .fn-ord { background:#F59E0B; }
html body .fn-steps .fn-step:nth-child(3) .fn-ord { background:#22C55E; } html body .fn-steps .fn-step:nth-child(4) .fn-ord { background:#002970; }
/* avisos e links: pontinho colorido no título */
html body .hi-card h3::before { content:''; display:inline-block; width:9px; height:9px; border-radius:50%; background:#F59E0B; margin-right:.5rem; vertical-align:middle; }
html body .hi-2col .hi-card:nth-child(2) h3::before { background:#22C55E; }
/* pipeline: contagem de fechado em verde e perdido em vermelho nas abas; menu com badges vivos */
html body .pp-tab.fseg[data-view="fechado"] .fseg-n, html body .pp-tab.fseg[data-view="lead_reuniao"] .fseg-n { color:#15803d; }
html body .pp-tab.fseg[data-view="perdido"] .fseg-n, html body .pp-tab.fseg[data-view="lead_desq"] .fseg-n { color:#b91c1c; }
html body .pp-col.terminal-ok .pp-col-title { color:#15803d; } html body .pp-col.terminal-no .pp-col-title { color:#b91c1c; }

html body .hq-grid { grid-template-columns:repeat(auto-fill, minmax(138px, 1fr)); }

/* ═══ SELO DOS PAINÉIS (29/ago design, pedido do dono: "quero exatamente a mesma logo dos painéis").
   Receita copiada do painel de atendimento: círculo #002970 com overflow:hidden e a imagem a 128% — o anel
   externo do SVG é recortado e a marca preenche o círculo. IGUAL nos dois temas (não há variante clara). ═══ */
html body .sidebar-brand .brand-selo { width:40px; height:40px; border-radius:50%; background:#002970; display:flex; align-items:center; justify-content:center; flex:0 0 auto; overflow:hidden; box-shadow:0 6px 14px -8px rgba(0,41,112,.7); }
html body .sidebar-brand .brand-selo img { width:128%; height:128%; max-width:none; display:block; flex:0 0 auto; }   /* max-width:none: o img{max-width:100%} global cortava a imagem em 40px */
html body .sidebar-brand:hover .brand-selo { background:#2290FF; }
@media (min-width:1920px) { html body .sidebar-brand .brand-selo { width:46px; height:46px; } }

/* ═══ DATAS COMEMORATIVAS (29/ago): avanti-datas.js seta html[data-festa] + --festa-faixa/--festa-cor ═══ */
@media (min-width:901px) { html[data-festa] body aside.sidebar { border-top:0; } html[data-festa] body aside.sidebar::before { content:''; position:absolute; left:0; right:0; top:0; height:5px; background:var(--festa-faixa); border-radius:22px 22px 0 0; } html[data-festa] body aside.sidebar { position:sticky; } }
html[data-festa] body .festa-selo { display:inline-flex; align-items:center; height:30px; padding:0 .8rem; border-radius:100px; background:var(--festa-cor,#2290FF); color:#F6F5F2; font-size:12px; font-weight:500; margin-right:.5rem; letter-spacing:.02em; white-space:nowrap; }
html[data-festa] body .home-hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--festa-faixa); z-index:2; }
html[data-festa] body .home-hero-eyebrow { color:#F6F5F2; }
@media (max-width:900px) { html[data-festa] body .festa-selo { display:none; } }

/* ═══ DETALHES (29/ago css): acabamento — foco, hover, campos, tabelas, chips, tipografia, respiro,
   cantos, ícones, heróis, scrollbars, vazios, responsivo, impressão, contraste. Prefixo html body /
   html body .container vence o <style> do base.html e dos templates (carregam DEPOIS deste arquivo).
   Este arquivo só entra em base.html e base_perfil.html; marketing/login/portais carregam só o theme. ═══ */

/* 29/ago css: 0. tokens — acaba com o bege residual (--card/--muted eram #F6F5F2 no theme). O dark segue
   vindo do html[data-theme="dark"] do theme/clean, que tem especificidade maior que :root. */
:root { --card:#FFFFFF; --card-hex:#FFFFFF; --background:#FFFFFF; --background-hex:#FFFFFF; --bg:#FFFFFF; --muted:#F5F5F3; --muted-hex:#F5F5F3; --bg-alt:#F5F5F3; --border:var(--line); --border-hex:var(--line); --input:var(--line-strong); --radius:16px; --radius-sm:10px; --radius-card:16px; --shadow:var(--shadow-soft); --shadow-lg:0 24px 48px -24px rgba(2,11,26,.35); --ink-3:rgba(2,11,26,.64); }
html body { background:var(--canvas); }
html body .app-footer { background:transparent; margin-top:2.5rem; padding:1.25rem 2rem 1.5rem; }
html body aside.sidebar { background:var(--sidebar); scrollbar-width:none; }
html body aside.sidebar::-webkit-scrollbar { width:0; }

/* 29/ago css: 1. foco — sem anel duplo nos campos; o outline segue o raio do próprio elemento
   (base.html perdeu o border-radius:4px do *:focus-visible) */
html body :focus:not(:focus-visible) { outline:none; }
html body :focus-visible { outline:2px solid #2290FF; outline-offset:2px; }
html body :is(input,select,textarea,.gs-inp):focus-visible { outline:none; border-color:#2290FF; box-shadow:0 0 0 4px rgba(34,144,255,.16); }
/* campo obrigatório vazio não nasce vermelho nem fica verde ao preencher; erro só depois da interação */
html body :is(input,select,textarea):is(:invalid,:valid:not(:placeholder-shown):required) { border-color:var(--line-strong); background:var(--surface); }
html[data-theme="dark"] body :is(input,select,textarea):is(:invalid:not(:user-invalid),:valid:not(:placeholder-shown):required) { border-color:var(--line-strong) !important; background:#0A1931 !important; }
html body :is(input,select,textarea):user-invalid { border-color:#EF4444 !important; box-shadow:0 0 0 4px rgba(239,68,68,.14); }

/* 29/ago css: 2. hover / transição / cursor — uma curva e uma duração; link-cartão não "lava" no hover */
html body a:hover { filter:none; }
html body a:not([class]):hover { text-decoration:underline; text-underline-offset:.15em; }
html body :is(a,button,summary,.pp-card,.rt-card,.hd-card,.sf-card,.nt-item,.mc-card,.cfg-card,.hq-tile,.op-tile,.fn-step,.quick-card,.metric-card,.rt-chip,.pp-chip,.wizard-step-pill,.fundo-card,.rd-slot,.rd-drop,.pp-tab.fseg,.gs-item,.hs-item,.sw span) { transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), opacity .18s var(--ease); }
html body :is(.avanti-card,.quick-card,.metric-card,.hd-card,.sf-card,.op-tile,.cfg-card,.hq-tile,.rt-card,.nt-item,.mc-card):hover { transform:translateY(-2px); }
html body :is(button,.avanti-cta-pill,.au-btn-add,.modal-confirm,.rt-chip,.pp-card,.sa-req .go):hover { transform:none; }
html body :is(button,.avanti-cta-pill,.pp-card.link):not(:disabled):active { transform:scale(.985); }
html body :is(tr[data-href],.pp-row,.bc-row,.fundo-row,.pen-row,.pp-card.link,.pp-big,.pp-tab.fseg,details>summary,.rd-slot,.rd-drop,.fundo-card,.pp-table th.ord,.histrow-nome,.rt-card-id,label[for]) { cursor:pointer; }
html body .container table:not(:has(tr[data-href],.pp-row,.bc-row,.fundo-row,.pen-row)) tbody tr:hover td { background:transparent; }
html body .container :is(.hd-row,.fh-item):hover { background:transparent; }

/* 29/ago css: 3. campos — uma altura por família (40 / 36 pill / 32 compacto), seta própria no select,
   sem spinner em número e sem estilo iOS em busca. background-image !important: select com
   style="background:var(--card)" inline (admin_api_keys) não pode perder a seta. */
html body .container :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),select:not([multiple]):not([size])) { height:40px; padding-top:0; padding-bottom:0; line-height:38px; font-size:14px; border-radius:10px; box-sizing:border-box; }
html body .container :is(.pp-input,.pp-select,.rt-busca,.mc-busca,.au-role-sel,.rt-pop-sel,.bc-input,.bc-select) { height:36px; line-height:34px; border-radius:100px; font-size:13.5px; }
html body .container :is(.au-meta-input,.rg-addbar input,.rg-addbar select) { height:32px; line-height:30px; }
html body .container select:not([multiple]):not([size]) { -webkit-appearance:none; appearance:none; padding-right:2.3rem; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%230A1931' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important; background-repeat:no-repeat !important; background-position:right .85rem center !important; background-size:12px !important; }
html[data-theme="dark"] body .container select:not([multiple]):not([size]) { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23F6F5F2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important; }
html body input[type="search"] { -webkit-appearance:none; appearance:none; }
html body input[type="search"]::-webkit-search-decoration, html body input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; }
html body input[type="number"] { -moz-appearance:textfield; appearance:textfield; }
html body input[type="number"]::-webkit-inner-spin-button, html body input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
html body :is(input,textarea)::placeholder { color:var(--ink-3); opacity:1; }
@media (max-width:900px) { html body .container :is(input,select,textarea) { font-size:16px; } }

/* 29/ago css: 4. tabelas — cabeçalho branco em Brand Deep, sticky, números tabulares e à direita,
   hover só em linha clicável. overflow:clip (não hidden) no wrapper pra o sticky funcionar. */
html body .container table { font-size:13.5px; font-variant-numeric:tabular-nums; }
html body .container table :is(td,th) { line-height:1.45; padding:.65rem .9rem; }
html body .container .enviadas-tbl :is(td,th) { padding:.65rem .9rem !important; }
html body .container table th, html body .container table thead tr { background:var(--surface) !important; color:var(--ink-3); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; text-align:left; border-bottom:1px solid rgba(2,11,26,.12) !important; }
html body .container table thead th { position:sticky; top:0; z-index:1; }
@media (max-width:900px) { html body .container table thead th { top:64px; } }
html body .container :is(.pen-tbl,.whd-tbl,.fundos-tbl,.au-table,.bc-tbl) { overflow:clip; }
html body .container div[style*="overflow:hidden"]:has(> table) { overflow:clip !important; }
html body .container table tbody tr:hover td { background:rgba(2,11,26,.03); }
html[data-theme="dark"] body .container table tbody tr:hover td { background:rgba(246,245,242,.05); }
html body .container :is(.pen-tbl tr:hover,.au-table tr:hover,.af-table tr.af-row:hover,.bc-row:hover) { background:transparent; }
html body .container :is(.enviadas-tbl td:nth-child(4),.enviadas-tbl th:nth-child(4),.bc-tbl td:nth-child(6),.bc-tbl th:nth-child(6)) { text-align:right; white-space:nowrap; }
html body .container :is(.bc-tbl td:nth-child(2),.pen-tbl td:nth-child(2),.pen-tbl td:nth-child(6),.au-table td:first-child) { white-space:nowrap; }

/* 29/ago css: 5. chips — uma geometria; caixa alta só nos rótulos de status; semáforo = texto escuro
   sobre fundo soft (legível). Escopo .container: o theme é compartilhado, o clean não pega marketing. */
html body .container :is(.pp-chip,.pill-tag,.hs-badge,.rt-tag,.rt-chip,.eleg-pill,.fv-tag,.rpf-tag,.af-pill,.au-pill,.badge,.whd-pill,.kpi-pill,.rg-pill,.df-pill,.bc-badge,.sf-canal,.sf-amb,.mc-chip,.pp-late,.pp-acao-pill,.pp-org-chip,.pp-tempo span,.pp-auto,.pill-auto,.prio-pill,.etp-pill,.tpl-block .tag,.nt-badge,.nt-nova,.gtag,.badge-ok,.badge-att,.badge-risk,.badge-on,.badge-off,.rt-pop-chip), html body .gs-badge { display:inline-flex; align-items:center; gap:.3rem; height:22px; padding:0 .6rem; border-radius:100px; font-size:11.5px; font-weight:500; line-height:1; letter-spacing:.01em; text-transform:none; white-space:nowrap; box-sizing:border-box; border-width:1px; vertical-align:middle; }
html body .container :is(.pill-tag,.badge,.au-pill,.af-pill,.sf-canal,.sf-amb,.fv-tag,.rpf-tag) { font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
html body .container :is(.pp-chip.ok,.pp-chip.fundo-ok,.pill-success,.eleg-pill.boa,.af-pill.ok,.au-pill.closer,.au-pill.ativo,.whd-pill.ok,.kpi-pill.ok,.df-pill.st-ok,.rt-chip.ok,.badge-ok,.badge-on,.hs-badge.ok,.bc-badge.env,.rg-man) { background:#F0FDF4; color:#15803d; border-color:transparent; }
html body .container :is(.pp-chip.warn,.pp-chip.restr,.pp-chip.doc,.pp-chip.fundo-no,.pill-warning,.eleg-pill.aten,.af-pill.external,.whd-pill.off,.kpi-pill.warn,.df-pill.st-warn,.rt-chip.and,.badge-att,.badge-warning,.hs-badge.err,.pill-auto,.gtag,.rg-obs,.pp-tempo span.parado) { background:#FFFBEB; color:#b45309; border-color:transparent; }
html body .container :is(.pp-chip.erro,.pp-chip.semenvio,.pp-chip.declinado,.pp-chip.fundo-err,.pill-danger,.eleg-pill.bloq,.af-pill.off,.au-pill.inativo,.kpi-pill.bad,.rt-chip.neg,.badge-risk,.badge-erro,.pp-late,.rg-apr) { background:#FEF2F2; color:#b91c1c; border-color:transparent; }
html body .container :is(.pp-chip.icp,.pp-chip.fundo-cob,.badge-pendente,.rt-tag-etapa,.etp-pill,.af-pill.api,.af-pill.admin,.au-pill.admin,.au-pill.sdr,.bc-badge,.rg-base,.pp-acao-pill,.prio-pill) { background:rgba(34,144,255,.14); color:var(--deep); border-color:transparent; }
/* contadores do menu e passos do funil: cheios, mas em tom escuro legível com o off-white (>= 4,5:1) */
html body .nav-main a .nav-badge { font-size:11.5px; }
html body .nav-main a .nav-badge.ok, html body .fn-steps .fn-step:nth-child(3) .fn-ord { background:#15803d; color:#F6F5F2; }
html body .nav-main a .nav-badge.warn, html body .fn-steps .fn-step:nth-child(2) .fn-ord { background:#b45309; color:#F6F5F2; }
html body .fn-steps .fn-step:nth-child(1) .fn-ord { background:var(--deep); }
html body .pp-toggle-pronto b { font-size:11.5px; background:#15803d !important; color:#F6F5F2 !important; }
html body .pp-toggle-pronto.on { background:#15803d !important; border-color:#15803d !important; }
html body .pp-toggle-pronto.on b { background:rgba(246,245,242,.18) !important; }
html body .rd-tab.on { color:#F6F5F2; background:var(--deep); border-color:var(--deep); }
html[data-theme="dark"] body .container :is(.pp-chip.ok,.pp-chip.fundo-ok,.pill-success,.eleg-pill.boa,.af-pill.ok,.rt-chip.ok,.kpi-pill.ok,.badge-ok,.badge-on,.hs-badge.ok,.bc-badge.env,.au-pill.closer,.au-pill.ativo,.whd-pill.ok,.df-pill.st-ok,.rg-man) { background:rgba(34,197,94,.16); color:#22C55E; }
html[data-theme="dark"] body .container :is(.pp-chip.warn,.pp-chip.restr,.pp-chip.doc,.pp-chip.fundo-no,.pill-warning,.eleg-pill.aten,.af-pill.external,.whd-pill.off,.rt-chip.and,.kpi-pill.warn,.df-pill.st-warn,.badge-att,.badge-warning,.hs-badge.err,.pill-auto,.gtag,.rg-obs,.pp-tempo span.parado) { background:rgba(245,158,11,.16); color:#F59E0B; }
html[data-theme="dark"] body .container :is(.pp-chip.erro,.pp-chip.semenvio,.pp-chip.declinado,.pp-chip.fundo-err,.pill-danger,.eleg-pill.bloq,.af-pill.off,.rt-chip.neg,.kpi-pill.bad,.badge-risk,.badge-erro,.pp-late,.au-pill.inativo,.rg-apr) { background:rgba(239,68,68,.16); color:#EF4444; }
html[data-theme="dark"] body .container :is(.pp-chip.icp,.pp-chip.fundo-cob,.badge-pendente,.rt-tag-etapa,.etp-pill,.af-pill.api,.af-pill.admin,.au-pill.admin,.au-pill.sdr,.prio-pill,.bc-badge,.rg-base,.pp-acao-pill) { background:rgba(34,144,255,.18); color:#8CC2FF; }

/* 29/ago css: 6. tipografia — h1 34/300, h2 22/500 em Brand Deep, h3 15/500, overline 11px .14em;
   parágrafo 1.55 (o theme dava 28px fixos). Hero da Home e página de erro ficam com o tamanho próprio. */
html body .container h1:not(.home-hero-title):not(.erro-page h1), html body .container :is(.pp-title,.rd-head h1,.au-head h1,.rt-hero-h1,.nt-hero-h1,.bc-h1,.aud-wrap h1,.pen-hero h1) { font-size:34px; font-weight:300; letter-spacing:-1.2px; line-height:1.1; margin:0 0 .35rem; }
html body .container h1 :is(b,strong,span.accent) { font-weight:500; }
html body .container h2, html body .container :is(.bc-wrap h2,.kpi-sec h2,.modal-box h2,.sa-req h2) { font-size:22px; font-weight:500; letter-spacing:-.4px; line-height:1.25; color:var(--deep); }
html body .container h3, html body .container :is(.hd-card h3,.op-panel h3,.hi-card h3,.quick-card h3,.wh-head h3,.fundo-section .head h3,.etp-card .head h3) { font-size:15px; font-weight:500; letter-spacing:-.1px; line-height:1.3; text-transform:none; }
html body :is(.pp-eyebrow,.home-hero-eyebrow,.section-tag,.op-title,.op-tl,.metric-label,.rt-hero-over,.nt-hero-over,.bc-kicker,.erro-cod,.avanti-tag,.cfg-grp-t,.cfg-grp-lbl,.user-pop-grp,.sf-subtag,.sidebar-section,.rg-sec,.pp-m-sec,.pp-org-title,.pp-lin-rot,.df-fundo,.fh-grp,.rd-sep,.rd-map .cat,.hd-row .lbl,.fh-lbl,.rt-pop-lbl,.fseg-l,.wh-row .lbl) { font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
html body .container [style*="letter-spacing:2.4px"] { letter-spacing:.14em !important; }
html body .container [style*="text-transform:uppercase"] { letter-spacing:.08em; }
html body p { line-height:1.6; }
html body .container :is(p,li,.pp-lead,.bc-sub,.rd-head p,.pen-hero p) { line-height:1.55; }
html body .container :is(.pp-lead,.bc-sub,.rd-head p,.pen-hero p) { font-size:15px; font-weight:400; color:var(--ink-3); max-width:640px; }

/* 29/ago css: 7. respiro — ritmo vertical único (2.25rem antes de seção, 1.5rem depois de bloco, gap 1rem) */
html body .container :is(.section-tag,.op-title,.cfg-grp-t,.sf-subtag) { margin:2.25rem 0 .75rem; }
html body .container :is(.section-tag,.op-title):first-child { margin-top:0; }
html body .container :is(.op-wrap,.hi-2col,.hq-grid,.cfg-grp,.metric-grid,.pen-guia,.pp-funil,.bc-tools,.cfg-tabs,.rt-grid,.mc-grid,.sf-grid,.pp-head,.hd-grid) { margin-bottom:1.5rem; }
html body .container :is(.hq-grid,.cfg-grid,.pp-grid,.rt-grid,.mc-grid,.sf-grid,.op-tiles,.metric-grid,.hi-2col,.hd-grid,.quick-grid) { gap:1rem; }
html body .container .cfg-tabs { padding:.5rem .6rem; }
html body .container .cfg-tabs + .cfg-tabs { margin-top:-.75rem; background:transparent; border:0; padding:0 .2rem; }
html body .container > :last-child { margin-bottom:0; }

/* 29/ago css: 8. cantos e sombras — cartão 16, bloco interno 12, trilho 18, popover 16 com a mesma sombra */
html body .container :is(.hd-card,.sf-card,.rt-card,.mc-card,.nt-item,.pen-hero,.pen-tbl,.pen-guia,.pp-big,.pp-org,.wh-card,.rg-fundo,.rd-card,.fundo-section,.etp-card,.tpl-block,.gloss-item,details.bc-item,.doc-block,.whd-tbl,.fundos-tbl,.df-out,.avanti-card,.op-tile,.op-panel,.cfg-card,.hi-card,.hq-tile,.metric-card,.quick-card,.pp-empty,.rt-empty,.mc-empty,.nt-vazio,.pen-empty,.pp-listwrap,.add-form) { border-radius:16px; border-width:1px; }
html body .container :is(.pp-card,.fn-step,.anx-item,.fh-item,.rt-pop-cond,.aviso-bloco,.ia-traduz-out,.df-erro,.bc-callout,.etp-trap,.pp-fase-acao,.rd-slot,.rd-drop,.tt-fundo,.sf-logo,.wh-row .val,.tpl-block pre,.doc-block pre,.fundo-stats) { border-radius:12px; }
html body .container :is(.pp-col,.pp-funil,.pp-mode,.cfg-tabs) { border-radius:18px; }
html body .flash { border-radius:12px; }
html body :is(.rt-pop,.gs-results,.user-pop,.kb-toc,.modal-box,.pp-modal,.home-search-results) { border-radius:16px; border:1px solid var(--line); box-shadow:0 24px 48px -24px rgba(2,11,26,.35); }
html body #notifDrop { border-radius:16px !important; border:1px solid var(--line) !important; box-shadow:0 24px 48px -24px rgba(2,11,26,.35) !important; padding:.4rem !important; min-width:340px !important; }
html body :is(.au-btn-add,.modal-confirm,.sa-req .go):hover { box-shadow:none; }
html body :is(.rt-card,.rt-tag,.rt-chips,.nt-item,.nt-vazio,#darkmode-btn) { border-width:1px; }
html body .container .rt-chips { border-top-width:1px; }
html body :is(.hd-card,.sf-card,.rt-card,.mc-card,.nt-item,.pen-tbl,.pp-big,.wh-card,.rg-fundo,.rd-card,.fundo-section,.etp-card) { box-shadow:var(--shadow-soft); }

/* 29/ago css: 9. ícones — 1em alinhado à x-height baixa da Plus Jakarta; setas em CSS no lugar de glifos */
html body .av-ic { width:1em; height:1em; vertical-align:-.15em; flex:none; }
html body :is(.nav-main a,.nav-main summary) .av-ic, html body :is(#notifBtn,#darkmode-btn,.nav-burger) .av-ic { width:18px; height:18px; }
html body .nav-burger svg { width:22px; height:22px; }
html body :is(.app-selos .selo svg,.selo svg) { width:12px; height:12px; }
html body :is(.hd-card h3,.hi-card h3,.fh-grp)::before { width:8px; height:8px; border-radius:50%; }
html body .quick-card::after { content:''; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); top:1.6rem; }
html body .container details > summary { list-style:none; }
html body .container details > summary::-webkit-details-marker { display:none; }
html body .container details > summary::after { content:''; position:static; display:inline-block; width:6px; height:6px; margin-left:.5rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .18s var(--ease); }
html body .container details[open] > summary::after { transform:rotate(-135deg) translateY(-1px); }

/* 29/ago css: 10. heróis navy por classe viram cabeçalho claro (como os inline); bege hardcoded vira trilho; dark dos títulos */
html body .container :is(.rt-hero,.bc-hero,.nt-hero) { background:transparent; color:var(--ink); border-radius:0; padding:.35rem 0 1.4rem; margin-bottom:.35rem; border-bottom:1px solid var(--line); box-shadow:none; }
html body .container :is(.rt-hero-h1,.nt-hero-h1,.bc-h1) { color:var(--ink); }
html body .container :is(.rt-hero-sub,.bc-sub,.bc-stat span) { color:var(--ink-3); }
html body .container .bc-stat b { color:var(--deep); }
html body .container :is(.rt-hero-h1 span,.nt-hero-h1 > span:first-of-type) { color:var(--deep); }
html body .container .nt-btn { color:var(--ink); border-color:var(--line-strong); }
html[data-theme="dark"] body .container :is(.rt-hero-h1,.nt-hero-h1,.bc-h1) { color:#F6F5F2; }
html[data-theme="dark"] body .container :is(h2,h3,.kb-toc b) { color:#8CC2FF; }
html[data-theme="dark"] body .kb-toc a.on { background:#2290FF; color:#F6F5F2; }
html body .container .df-doc { border-bottom-color:var(--line); }
html body .container :is(.bar-wrap,.fbarwrap,.tpl-block pre,.bc-wrap code,details.bc-item code,.fundo-stats,.wh-row .val,.wh-token input,.add-form,.anx-item .ico,.af-edit td,.sf-canal,.rt-chip.outro,.rt-pop-cond,.rt-pop-chip,.af-pill.email,.au-pill.normal,.doc-block code,.pp-mode-btn b,.bc-callout) { background:var(--surface-2); }
html body .container :is(.sf-logo,.fundo-section .head img,.etp-card .head img) { background:#FFFFFF; border:1px solid var(--line); padding:4px; box-sizing:border-box; }
html[data-theme="dark"] body .container :is(.bar-wrap,.fbarwrap,.tpl-block pre,.bc-wrap code,.fundo-stats,.wh-row .val,.wh-token input,.add-form,.anx-item .ico,.af-edit td,.rt-pop-cond,.rt-pop-chip,.bc-callout) { background:#071429; }
html[data-theme="dark"] body .container .bc-badge { color:#8CC2FF; border-color:rgba(34,144,255,.4); }

/* 29/ago css: 11. scrollbars — finas e visíveis (o board do Pipeline tinha thumb da cor do trilho) */
html body * { scrollbar-width:thin; scrollbar-color:rgba(2,11,26,.18) transparent; }
html[data-theme="dark"] body * { scrollbar-color:rgba(246,245,242,.2) transparent; }
html body ::-webkit-scrollbar { width:8px; height:8px; }
html body ::-webkit-scrollbar-track { background:transparent; }
html body ::-webkit-scrollbar-thumb { background:rgba(2,11,26,.18); border-radius:100px; border:2px solid transparent; background-clip:padding-box; }
html body ::-webkit-scrollbar-thumb:hover { background:rgba(2,11,26,.32); background-clip:padding-box; }
html[data-theme="dark"] body ::-webkit-scrollbar-thumb { background:rgba(246,245,242,.2); background-clip:padding-box; }
html body .pp-board::-webkit-scrollbar { height:10px; }
html body .pp-board::-webkit-scrollbar-track, html[data-theme="dark"] body .pp-board::-webkit-scrollbar-track { background:transparent; }
html body .pp-board::-webkit-scrollbar-thumb, html[data-theme="dark"] body .pp-board::-webkit-scrollbar-thumb { background:rgba(2,11,26,.22); border:2px solid transparent; background-clip:padding-box; }
html[data-theme="dark"] body .pp-board::-webkit-scrollbar-thumb { background:rgba(246,245,242,.22); }
html body .pp-col .pp-cards::-webkit-scrollbar { width:6px; }
html body .pp-funil { scrollbar-width:thin; }
html body .pp-funil::-webkit-scrollbar { display:block; height:6px; }
html body aside.sidebar { scrollbar-width:none; }

/* 29/ago css: 12. vazios — caixa tracejada única; linha cinza única; sem itálico */
html body .container :is(.pp-empty,.rt-empty,.mc-empty,.bc-empty,.nt-vazio,.pen-empty) { padding:2.2rem 1rem; text-align:center; color:var(--ink-3); font-size:13.5px; font-style:normal; background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:16px; }
html body .container .pen-empty { background:#F0FDF4; border-color:transparent; color:#15803d; }
html[data-theme="dark"] body .container .pen-empty { background:rgba(34,197,94,.16); color:#22C55E; }
html body .container :is(.op-empty,.hi-vazio,.kpi-empty,.hs-empty,.gs-empty,.df-vazio,.rt-vazio,.mc-vazio,.wh-empty) { color:var(--ink-3); font-size:13px; font-style:normal; padding:.5rem 0; }
html body .container .wh-empty { color:#b91c1c; }
html[data-theme="dark"] body .container .wh-empty { color:#EF4444; }

/* 29/ago css: 13. responsivo — abas rolam em vez de empilhar; board sem rolagem dupla; grades não estouram no celular */
@media (max-width:1200px) { html body .container .cfg-tabs { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; } html body .container .cfg-tabs::-webkit-scrollbar { display:none; } html body .container .cfg-tabs a { flex:none; } }
@media (min-width:901px) { html body .pp-board { height:calc(100dvh - 360px); min-height:420px; } }
html body .container :is(.rt-grid,.mc-grid) { grid-template-columns:repeat(auto-fill, minmax(min(340px,100%), 1fr)); }
html body .container .pp-grid { grid-template-columns:repeat(auto-fill, minmax(min(330px,100%), 1fr)); }
html body .container :is(.hd-grid,.gloss-grid) { grid-template-columns:repeat(auto-fit, minmax(min(320px,100%), 1fr)); }
html body .container .sf-grid { grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr)); }
@media (max-width:600px) {
  html body .container { padding:1rem .9rem 2rem; }
  html body .pp-head { flex-direction:column; align-items:flex-start; gap:.6rem; }
  html body .pp-mode { width:100%; overflow-x:auto; scrollbar-width:none; }
  html body .container :is(.hd-card,.sf-card,.rt-card,.mc-card,.op-tile,.op-panel,.hi-card,.cfg-card) { border-radius:14px; }
  html body .container :is(.op-tile,.op-panel,.hi-card,.metric-card) { padding:1rem 1.1rem; }
  html body .container .pen-tbl :is(td,th), html body .container .bc-tbl :is(td,th) { padding:.55rem .7rem; }
  html body .home-hero { padding:1.4rem 1.2rem !important; border-radius:18px; }
}

/* 29/ago css: 14. seleção, tap e impressão */
html { -webkit-tap-highlight-color:transparent; }
html body ::selection { background:rgba(34,144,255,.28); color:inherit; }
html[data-theme="dark"] body ::selection { background:rgba(34,144,255,.45); color:#F6F5F2; }
html body :is(a,button,summary,[role="button"],.pp-card) { touch-action:manipulation; }
@media print {
  html body :is(aside.sidebar,header.app-header,.app-footer,.nav-backdrop,#navload,.skip-link,#toast-stack,.kb-toc,.pp-filters,.pp-mode,.gs,.voltar-linha) { display:none !important; }
  html body .app-layout { display:block; } html body main.app-main { min-height:0; }
  html body .container { max-width:none; padding:0; }
  html body * { box-shadow:none !important; transition:none !important; animation:none !important; }
  html body :is(.avanti-card,.hd-card,.pp-card,.rt-card) { break-inside:avoid; border:1px solid rgba(2,11,26,.3); }
  html body .pp-board { height:auto; overflow:visible; }
  html body a { color:inherit; text-decoration:none; }
}

/* 29/ago css: 15. contraste e alvos — texto pequeno em Accent (2,96:1) vira Brand Deep; alvo mínimo 32px; nada abaixo de 11px */
html:not([data-theme="dark"]) body a:not([class]), html:not([data-theme="dark"]) body :is(.hi-card h3 a,.pp-m-sub a,.anx-item .actions a,.pp-hub:hover,.rd-slot .n,.rd-map .cat,.histrow-nome:hover,.lg-lbl a) { color:var(--deep); }
html body :is(.pp-eyebrow,.section-tag,.op-head .section-tag,.erro-cod,.rt-hero-over,.nt-hero-over,.bc-kicker,.avanti-tag) { color:var(--deep) !important; }
html body .container div[style*="background:#020B1A"][style*="border-radius"] :is([style*="letter-spacing"],div[style*="letter-spacing:2.4px"]) { color:var(--deep) !important; }
html[data-theme="dark"] body :is(.pp-eyebrow,.section-tag,.erro-cod,.rt-hero-over,.nt-hero-over,.bc-kicker,.avanti-tag) { color:#8CC2FF !important; }
html body .pp-card .pp-cd-acao .pp-puxar { padding:.4rem .6rem; margin:-.4rem -.6rem; min-height:32px; }
html body :is(.pp-m-x,.row-remove,.tpl-copy,.tt-mini,.au-table .actions button,.af-btn,.pp-table .pp-wa,.pp-table .pp-sim,.pp-table .pp-puxar,.rt-pop-btn,.bc-pag button,.cfg-tabs a,.pp-vbtn,.pp-toggle,.lg-toggle,.wh-token button,.rg-del,.rg-btn) { min-height:32px; display:inline-flex; align-items:center; justify-content:center; }
html body .pp-m-x { width:34px; height:34px; padding:0; }
html body :is(.hi-card h3 a,.pp-hub,.voltar-linha a,.histrow-nome) { padding:.3rem .45rem; margin:-.3rem -.45rem; border-radius:8px; }
html body .rt-more { width:18px; height:18px; line-height:16px; font-size:11px; }
html body :is(.sidebar-section,.cfg-grp-lbl,.pill-tag,.pp-auto,.rt-pop-lbl,.fv-tag,.rpf-tag,.badge-on,.badge-off,#notifBadge) { font-size:11px; }
html body :is(.pp-chip,.pp-dias,.pp-cd-ft,.pp-lin-rot,.fseg-l,.pp-m-sec,.metric-label,.user-pop-grp) { font-size:11.5px; }

/* ═══ FASE A (29/ago design) — legibilidade no escuro, um primário só, uma overline, uma escala de
   h1, raios do sistema, vazios e erros na mesma voz, alvo de toque de 36px. Tudo aqui é a ÚLTIMA
   camada do arquivo: vence o <style> do base.html e das páginas por prefixo html body + !important
   onde o valor concorrente é inline. ═══ */

/* 29/ago design: 1 — texto ilegível no escuro. `--border-hex` no dark é rgba(246,245,242,.14):
   virou cor de TEXTO em 11 páginas por copiar/colar (queriam --text). Aqui volta a ser texto claro. */
html[data-theme="dark"] body :is(.bar-lab,.flabel,.fcount,.kpi-sec h2,.aud-wrap p,.aud-wrap li,.aud-wrap pre,.df-doc .nm,.lo-card h1,.rt-chip.outro,.rt-pop-cond,.rt-pop-chip,.tt-input,.tt-fundo,.tt-label,.tt-mini,.tt-fundo .nm,.prio-pill) { color:#F6F5F2 !important; }
html[data-theme="dark"] body .lo-secondary:hover { color:#F6F5F2 !important; }
/* no claro o mesmo erro deixava o <pre> da auditoria (fundo #020B1A) com texto quase invisível */
html body .aud-wrap pre { color:#F6F5F2 !important; }

/* 29/ago design: 2 — um primário só. Era navy (#020B1A), Brand Deep e Accent ao mesmo tempo.
   Agora: fundo Accent, hover Brand Deep, texto #F6F5F2. !important porque metade é style inline. */
html body :is(.af-save,.au-btn-add,.modal-confirm,.rg-btn,.sa-btn,.sa-req .go,.wh-token button,.rt-pop-btn:not(.ghost),#btn-atender,#zip-go,#zip-advance,#obs-modal-save,#av-confirm-submit,#rasc-retomar) { background:#2290FF !important; border-color:#2290FF !important; color:#F6F5F2 !important; border-radius:100px !important; }
html body :is(.af-save,.au-btn-add,.modal-confirm,.rg-btn,.sa-btn,.sa-req .go,.wh-token button,.rt-pop-btn:not(.ghost),#btn-atender,#zip-go,#zip-advance,#obs-modal-save,#av-confirm-submit,#rasc-retomar):hover { background:#002970 !important; border-color:#002970 !important; }
html body :is(.af-btn,.bc-anchor,.au-table .actions button):hover { background:#2290FF; border-color:#2290FF; color:#F6F5F2; }

/* 29/ago design: 3 — overline única (11px / .14em / caixa alta / peso 500). Completa a lista de
   cima com os rótulos que tinham tamanho e espaçamento próprios (9,5px a 13px). */
html body .container :is(.af-table th,.au-table th,.kpi-table th,.whd-tbl th,.aw-tbl th,.aud-tbl th,.bc-tbl th,.pen-tbl th,.pen-guia th,.tec-table th,.fundos-tbl th,.matriz th,.pp-table th) { font-size:11px !important; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
html body :is(.af-pill,.au-pill,.aud-tag,.aud-toc strong,.bc-stat span,.kb-toc b,.tpl-block .tag,.fundo-stats div span,.hd-card h3,.ia-traduz-out .tt,.lo-tag,.pt-over,.sf-canal,.sf-amb,.tt-fundo .tp,.cv-tpl,.af-form-grid label,.af-add label,.add-form label,.aw-card h3,.pill-tag,.fv-tag,.rpf-tag) { font-size:11px; letter-spacing:.14em; }

/* 29/ago design: 4 — uma escala de h1: 34px na página, 26px dentro de cartão/diálogo. O tamanho
   vinha em style inline (20 a 40px) em 8 telas, então precisa de !important. */
html body .container h1:not(.home-hero-title):not(.erro-page h1):not(.lo-card h1):not(.sa-hero h1):not(.pt-h1) { font-size:34px !important; font-weight:300 !important; letter-spacing:-1.2px !important; line-height:1.1 !important; }
html body .container :is(.lo-card h1,.sa-hero h1,.modal-box h1) { font-size:26px !important; font-weight:300 !important; letter-spacing:-.6px !important; }

/* 29/ago design: 5 — raios do sistema: 12 (bloco interno), 16 (cartão), 22 (painel), 26 (banner)
   e pill 100px. Pega também o style inline, que era metade dos casos (4, 5, 6, 8, 9, 11, 14, 18, 20). */
html body .container :is([style*="border-radius:4px"],[style*="border-radius: 4px"],[style*="border-radius:5px"],[style*="border-radius: 5px"],[style*="border-radius:6px"],[style*="border-radius: 6px"],[style*="border-radius:8px"],[style*="border-radius: 8px"],[style*="border-radius:9px"],[style*="border-radius: 9px"],[style*="border-radius:10px"],[style*="border-radius: 10px"],[style*="border-radius:11px"],[style*="border-radius: 11px"]) { border-radius:12px !important; }
html body .container :is([style*="border-radius:14px"],[style*="border-radius: 14px"],[style*="border-radius:18px"],[style*="border-radius: 18px"]) { border-radius:16px !important; }
html body .container :is([style*="border-radius:20px"],[style*="border-radius: 20px"]) { border-radius:22px !important; }
html body .container :is([style*="border-radius:9999px"],[style*="border-radius: 9999px"],[style*="border-radius:999px"]) { border-radius:100px !important; }
html body :is(.bc-pag button,.bc-input,.bc-select,.row-add,.row-remove,.tpl-copy,.pt-tgl,.lg-toggle,.rd-tab,.pp-tab,.wizard-step-pill) { border-radius:100px; }
html body .container :is(input,select,textarea):not([type=checkbox]):not([type=radio]) { border-radius:12px; }

/* 29/ago design: 6 — vazios e erros na mesma voz. Vazio = caixa tracejada neutra, texto --ink-3,
   sem itálico. Erro = caixa vermelha soft com texto escuro (o mesmo semáforo dos chips). */
html body .container :is(.cv-vazio,.gs-empty,.hs-empty,.mk-empty,.ag-sem-t,.op-empty,.hi-vazio,.kpi-empty,.df-vazio,.rt-vazio,.mc-vazio) { color:var(--ink-3); font-size:13px; font-style:normal; }
html body .container :is(.df-erro,.rd-warn,.campo-aviso.erro,.aviso-bloco.erro,.flash.error) { background:#FEF2F2; color:#b91c1c; border:1px solid rgba(239,68,68,.30); border-radius:12px; }
html body .container :is(.hi-aviso,.bc-callout.warn,.aud-callout-warn,.campo-aviso,.aviso-bloco,.flash.warning) { background:#FFFBEB; color:#b45309; border:1px solid rgba(245,158,11,.30); border-radius:12px; }
html body .container .flash.success { background:#F0FDF4; color:#15803d; border:1px solid rgba(34,197,94,.30); }
html[data-theme="dark"] body .container :is(.df-erro,.rd-warn,.campo-aviso.erro,.aviso-bloco.erro,.flash.error) { background:rgba(239,68,68,.16); color:#EF4444; border-color:rgba(239,68,68,.35); }
html[data-theme="dark"] body .container :is(.hi-aviso,.bc-callout.warn,.aud-callout-warn,.campo-aviso,.aviso-bloco,.flash.warning) { background:rgba(245,158,11,.16); color:#F59E0B; border-color:rgba(245,158,11,.35); }
html[data-theme="dark"] body .container .flash.success { background:rgba(34,197,94,.16); color:#22C55E; border-color:rgba(34,197,94,.35); }

/* 29/ago design: 7 — alvo de toque. 36px de altura mínima em qualquer botão/pílula clicável;
   44px no dedo (pointer:coarse), inclusive nos ícones do cabeçalho. */
html body :is(.pp-m-x,.row-remove,.row-add,.tpl-copy,.tt-mini,.au-table .actions button,.af-btn,.pp-table .pp-wa,.pp-table .pp-sim,.pp-table .pp-puxar,.rt-pop-btn,.bc-pag button,.cfg-tabs a,.pp-vbtn,.pp-toggle,.lg-toggle,.wh-token button,.rg-del,.rg-btn,.rd-tab,.pt-tgl,.nt-btn,.sf-btn) { min-height:36px; }
html body .pp-m-x { width:36px; height:36px; }
@media (pointer:coarse) {
  html body :is(#notifBtn,#darkmode-btn,.nav-burger,.pp-m-x) { width:44px; height:44px; }
  html body :is(button,[role="button"],.cfg-tabs a,.pp-tab,.rd-tab,.bc-pag button) { min-height:44px; }
}

/* 29/ago design: 8 — .pp-head existia só no <style> do Pipeline; /admin (Configurações) usa as
   mesmas classes e ficava sem cabeçalho. Agora o estilo é daqui e serve às duas. */
html body .container .pp-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:.25rem 0 1.25rem; }
html body .container .pp-eyebrow { margin:0 0 .45rem; }
html body .container .pp-title { margin:0 0 .35rem; }
html body .container .pp-lead { margin:0; }

/* 29/ago design: 9 — hex em CAIXA ALTA escapava das regras do escuro (os seletores de atributo do
   base.html/theme são escritos em minúsculas e [style*=] é sensível a caixa). Cópia com flag i. */
/* o branco vem PRIMEIRO: "background:#fff" e prefixo de "#fffbeb" e ia apagar o ambar */
html[data-theme="dark"] body [style*="background:#fff" i], html[data-theme="dark"] body [style*="background: #fff" i], html[data-theme="dark"] body [style*="background:white" i] { background:#0A1931 !important; border-color:rgba(246,245,242,.14) !important; color:#F6F5F2 !important; }
html[data-theme="dark"] body [style*="background:#f0fdf4" i], html[data-theme="dark"] body [style*="background: #f0fdf4" i] { background:#0A1931 !important; border-color:#15803d !important; color:#22C55E !important; }
html[data-theme="dark"] body [style*="background:#fffbeb" i], html[data-theme="dark"] body [style*="background: #fffbeb" i] { background:#0A1931 !important; border-color:#b45309 !important; color:#F59E0B !important; }
html[data-theme="dark"] body [style*="background:#fef2f2" i], html[data-theme="dark"] body [style*="background: #fef2f2" i] { background:#0A1931 !important; border-color:#b91c1c !important; color:#EF4444 !important; }

/* 29/ago design: 10 — tabelas largas que ainda estouravam a página entre 900 e 1300px (a regra do
   base.html só vale até 900px e estas tabelas não têm .table-wrap). Rolam dentro delas mesmas. */
@media (max-width:1300px) {
  html body .container :is(.aud-tbl,.tec-table,.aw-tbl,.af-table,.au-table,.whd-tbl,.pp-table,.enviadas-tbl,.kpi-table,.matriz,.fundos-tbl) { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ═══ BASICO E SEM BORDA (29/ago, Gui: "mais basico tudo, sem bordas nas paginas", "sempre tela toda e menu lateral") ═══ */
/* 1. nenhuma caixa: fora borda, sombra e filete colorido. o que separa e o espaco. */
html body .op-tile, html body .hi-card, html body .cfg-card, html body .metric-card, html body .quick-card,
html body .fn-step, html body .op-panel, html body .hq-tile, html body .avanti-card, html body .rt-card,
html body .pp-card, html body .kb-toc, html body .home-mais > summary, html body .pl-card, html body .nt-item,
html body .modal-box, html body .gs-results, html body .user-pop {
  border:0 !important; box-shadow:none !important; }
html body .hq-tile::after, html body .hq-tile::before, html body .op-tile::after, html body .op-tile::before { display:none !important; }
html body .pp-col { background:transparent !important; }
/* 2. tela toda: o conteudo nao fica preso num miolo estreito */
html body .container { max-width:none !important; padding-left:28px !important; padding-right:28px !important; }
@media (max-width:900px) { html body .container { padding-left:16px !important; padding-right:16px !important; } }
/* 3. menu lateral chapado e sempre a vista (nao e mais um cartao flutuante) */
@media (min-width:901px) {
  html body aside.sidebar { border:0 !important; box-shadow:none !important; background:transparent !important;
    margin:0 !important; border-radius:0 !important; }
}
/* 4. tabela sem grade: so um fio embaixo do cabecalho e da linha */
html body .container table, html body .container table td, html body .container table th { border:0 !important; }
html body .container table th { border-bottom:1px solid rgba(2,11,26,.10) !important; }
html body .container table td { border-bottom:1px solid rgba(2,11,26,.05) !important; }
/* 5. o banner da home encosta nas bordas da area de conteudo */
@media (min-width:1001px) { html body .home-hero { border-radius:0 !important; margin-left:-28px !important; margin-right:-28px !important; } }
/* 6. escuro: mesma regra, fio claro em vez de escuro */
html[data-theme="dark"] body .container table th { border-bottom-color:rgba(246,245,242,.14) !important; }
html[data-theme="dark"] body .container table td { border-bottom-color:rgba(246,245,242,.07) !important; }

/* ═══ EFEITO PRA LER (29/ago, Gui): sem borda, a leitura vem de profundidade suave e do espaco ═══ */
html body .op-tile, html body .hi-card, html body .cfg-card, html body .metric-card, html body .quick-card,
html body .hq-tile, html body .rt-card, html body .pp-card, html body .avanti-card, html body .modal-box,
html body .gs-results, html body .user-pop {
  box-shadow:0 1px 2px rgba(2,11,26,.05), 0 10px 24px -20px rgba(2,11,26,.35) !important; border-radius:16px !important; }
html body .op-tile:hover, html body .hq-tile:hover, html body .metric-card:hover, html body .cfg-card:hover,
html body .quick-card:hover, html body .pp-card:hover {
  box-shadow:0 2px 4px rgba(2,11,26,.06), 0 16px 32px -20px rgba(2,11,26,.45) !important; transform:translateY(-1px); }
html body .modal-box, html body .gs-results, html body .user-pop {
  box-shadow:0 2px 6px rgba(2,11,26,.08), 0 24px 48px -24px rgba(2,11,26,.45) !important; }
/* no escuro a sombra some (nao se ve): a leitura vem de uma superficie um tom acima do fundo */
html[data-theme="dark"] body .op-tile, html[data-theme="dark"] body .hi-card, html[data-theme="dark"] body .cfg-card,
html[data-theme="dark"] body .metric-card, html[data-theme="dark"] body .quick-card, html[data-theme="dark"] body .hq-tile,
html[data-theme="dark"] body .rt-card, html[data-theme="dark"] body .pp-card, html[data-theme="dark"] body .avanti-card {
  box-shadow:none !important; background:#0A1931 !important; }
html[data-theme="dark"] body .modal-box, html[data-theme="dark"] body .gs-results, html[data-theme="dark"] body .user-pop {
  box-shadow:0 24px 48px -24px rgba(0,0,0,.7) !important; background:#0A1931 !important; }

/* ═══ DEGRADE DISCRETO (29/ago, Gui: "pra não ficar tudo chapado") ═══ */
/* item ativo do menu: do Brand Deep pro azul, no sentido da leitura */
html body .nav-main a.active { background-image:linear-gradient(135deg, #002970 0%, #0B4CB0 100%); }
/* cards: uma lavagem azul quase imperceptivel no topo, some antes da metade */
html body .op-tile, html body .hi-card, html body .cfg-card, html body .metric-card, html body .quick-card,
html body .hq-tile, html body .rt-card, html body .avanti-card, html body .hp-painel {
  background-image:linear-gradient(180deg, rgba(34,144,255,.045) 0%, rgba(255,255,255,0) 46%); }
/* chip de icone: brilho de cima pra baixo, mantendo a cor de cada um */
html body .hq-tile .av-ic { background-image:linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,0) 60%); }
/* rotulo de secao e numero grande: texto em degrade */
html body .section-tag { background-image:linear-gradient(90deg, #002970, #2290FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
html body .metric-value, html body .op-num { background-image:linear-gradient(160deg, #020B1A 10%, #0B4CB0 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* botao primario ganha profundidade */
html body .btn-primary, html body .pp-subir, html body .pl-subir { background-image:linear-gradient(135deg, #2290FF 0%, #0B4CB0 100%); }
/* banner: um sopro de azul no canto de cima, sem tapar a foto */
@media (min-width:1001px) { html body .home-hero::after { content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(200deg, rgba(34,144,255,.22) 0%, rgba(2,11,26,0) 55%); } }
/* escuro: o degrade inverte (clareia de baixo pra cima) pra nao empastar */
html[data-theme="dark"] body .op-tile, html[data-theme="dark"] body .hi-card, html[data-theme="dark"] body .cfg-card,
html[data-theme="dark"] body .metric-card, html[data-theme="dark"] body .quick-card, html[data-theme="dark"] body .hq-tile,
html[data-theme="dark"] body .rt-card, html[data-theme="dark"] body .avanti-card, html[data-theme="dark"] body .hp-painel {
  background-image:linear-gradient(180deg, rgba(34,144,255,.10) 0%, rgba(10,25,49,0) 52%); }
html[data-theme="dark"] body .section-tag { background-image:linear-gradient(90deg, #8CC2FF, #2290FF); }
html[data-theme="dark"] body .metric-value, html[data-theme="dark"] body .op-num { background-image:linear-gradient(160deg, #F6F5F2 10%, #8CC2FF 90%); }
/* quem preferir menos movimento nao ganha degrade em texto (leitura primeiro) */
@media (prefers-reduced-motion: reduce) {
  html body .section-tag, html body .metric-value, html body .op-num { background-image:none; -webkit-text-fill-color:currentColor; color:var(--ink,#020B1A); }
}

/* ═══ FOTO DO BANNER (31/ago, Gui: "da pra melhorar essa foto") — recorte 21:9 no time e no letreiro,
   servida em 1920 (antes era um corte 4:3 de 1400 que cortava rosto e letreiro). ═══ */
@media (min-width:1001px) and (max-width:1400px) {
  html body .home-hero { background-image:url('equipe-avanti-hero-1400.jpg') !important; }
}