/* =====================================================================
   Programa de incentivo CVP — camada de tema
   Carregada DEPOIS do CSS de cada página: só ajusta, não reescreve telas.
   1. tokens   2. tipografia leve   3. mola   4. menu em pílula (estilo Pinguim, claro)
   5. cabeçalho claro   6. componentes   7. login   8. rodapé "by"
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root:root {
  --cvp-azul: #005ca9; --cvp-azul-600: #0a6fc4; --cvp-azul-800: #003f78; --cvp-azul-900: #00264a;
  --cvp-azul-50: #eef5fc; --cvp-azul-100: #dcebfa;
  --cvp-laranja: #f39200; --cvp-laranja-600: #c46a00; --cvp-laranja-50: #fff4e3;
  --cvp-tinta: #0f1e33; --cvp-tinta-2: #3b4a5e; --cvp-suave: #6b7a8f; --cvp-fraco: #98a4b5;
  --cvp-linha: #e5ebf2; --cvp-fundo: #f5f7fb; --cvp-cartao: #ffffff;
  --cvp-ok: #12805c; --cvp-alerta: #b45309; --cvp-erro: #c62828;
  --cvp-r: 16px; --cvp-r-md: 12px; --cvp-r-sm: 10px;
  --cvp-sombra-1: 0 1px 2px rgba(15,30,51,.05), 0 1px 3px rgba(15,30,51,.04);
  --cvp-sombra-2: 0 18px 40px -18px rgba(15,30,51,.28), 0 2px 6px rgba(15,30,51,.05);
  --cvp-sombra-3: 0 30px 70px -20px rgba(15,30,51,.38);

  /* mola: as mesmas curvas do HubGov V2 / prévia da Pinguim */
  --mola: linear(0, 0.034, 0.123, 0.251, 0.399, 0.555, 0.705, 0.843, 0.961, 1.056, 1.127, 1.174, 1.199, 1.207, 1.199, 1.18, 1.153, 1.122, 1.09, 1.059, 1.031, 1.007, 0.987, 0.973, 0.964, 0.959, 0.957, 0.959, 0.963, 0.969, 0.975, 0.982, 0.988, 0.994, 0.999, 1.003, 1.006, 1.008, 1.009, 1.009, 1.008, 1.008, 1.006, 1.005, 1.004, 1.002, 1.001, 1, 1);
  --mola-item: linear(0, 0.035, 0.126, 0.254, 0.403, 0.559, 0.708, 0.843, 0.958, 1.05, 1.117, 1.162, 1.186, 1.192, 1.184, 1.165, 1.14, 1.111, 1.081, 1.053, 1.027, 1.006, 0.989, 0.976, 0.968, 0.964, 0.963, 0.965, 0.969, 0.974, 0.979, 0.985, 0.99, 0.995, 0.999, 1.002, 1.005, 1.006, 1.007, 1.007, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.001, 1, 1);
  --mola-abre: linear(0, 0.025, 0.092, 0.187, 0.3, 0.42, 0.54, 0.654, 0.758, 0.85, 0.928, 0.99, 1.039, 1.074, 1.098, 1.111, 1.116, 1.114, 1.107, 1.096, 1.083, 1.07, 1.056, 1.042, 1.03, 1.019, 1.01, 1.002, 0.996, 0.992, 0.989, 0.987, 0.987, 0.987, 0.987, 0.989, 0.99, 0.992, 0.993, 0.995, 0.996, 0.998, 0.999, 1, 1, 1.001, 1.001, 1.001, 1);
  --mola-dur: 900ms; --mola-item-dur: 820ms; --mola-abre-dur: 800ms;

  /* as páginas herdadas usam estes nomes: passam a apontar para a paleta CVP */
  --marca: var(--cvp-azul); --marca-escura: var(--cvp-azul-800); --marca-clara: var(--cvp-azul-600);
  --dourado: var(--cvp-laranja); --dourado-claro: #ffb547; --orange: var(--cvp-laranja);
  --grad: linear-gradient(135deg, var(--cvp-azul-800) 0%, var(--cvp-azul) 100%);
  --ink: var(--cvp-tinta); --ink-2: var(--cvp-tinta-2); --ink-strong: var(--cvp-tinta);
  --muted: var(--cvp-suave); --line: var(--cvp-linha);
}

/* ---------- 2. tipografia leve ---------- */
html { font-size: 14.5px; }
html body { background: var(--cvp-fundo); color: var(--cvp-tinta); letter-spacing: -.003em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html body h1, html body h2, html body h3, html body h4 { letter-spacing: -.015em; }
html body .page-head h1 { font-size: 1.4rem; font-weight: 700; color: var(--cvp-tinta); }
html body .ui-card h2, html body .pf-title { font-size: 1.05rem; font-weight: 700; color: var(--cvp-tinta); }
html body .wm-title { font-size: 1.02rem; font-weight: 700; letter-spacing: .02em; }
html body .intro h3 { font-size: 1.3rem; font-weight: 700; }
html body .social__slide { font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
html body .ex-saldo b { font-size: 2.1rem; font-weight: 700; }
html body .hdr__info h4 strong, html body .hdr__pontos strong, html body .drawer__nav a.active { font-weight: 700; }
html body .kpi .num, html body .kpi2 .num, html body .chart-top .cnum, html body .gv-k strong { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; }
html body .top h1 { font-size: 1rem; font-weight: 650; }
html body .sec, html body .card__head h2, html body .card h2 { font-weight: 650; }

/* ---------- 3. mola ---------- */
@keyframes mola-caixa { from { transform: translateY(-18px) scale(.86, .7); } to { transform: none; } }
@keyframes mola-caixa-cima { from { transform: translateY(18px) scale(.86, .7); } to { transform: none; } }
@keyframes mola-lado { from { transform: translateX(-14px) scale(.86, .8); } to { transform: none; } }
@keyframes mola-item { from { transform: translateY(-14px) scale(.92); } to { transform: none; } }
@keyframes mola-sobe { from { transform: translateY(16px) scale(.97); } to { transform: none; } }
@keyframes surge { from { opacity: 0; } to { opacity: 1; } }
.mola-cascata > * { animation: mola-item var(--mola-item-dur) var(--mola-item) both, surge .22s ease-out both; animation-delay: calc(var(--n, 0) * 38ms + 40ms); }
/* entrada em cascata dos blocos da página: usa translate/scale separados para não brigar
   com o transform que o mosaico da home e outras telas usam para posicionar */
@keyframes mola-entra { from { translate: 0 18px; scale: .97; } to { translate: 0 0; scale: 1; } }
.mola-entra { animation: mola-entra var(--mola-item-dur) var(--mola-item) both, surge .25s ease-out both; animation-delay: calc(var(--n, 0) * 45ms); }

/* toda ação "aperta" e volta na mola */
html body :is(button, .btn, a.btn, .rv-btn, .bb-vender, .gv-k, .tabs button, .chip-btn, input[type=submit]) {
  transition: transform .55s var(--mola), box-shadow .25s ease, background-color .2s ease, color .2s ease, filter .2s ease, opacity .2s ease;
}
html body :is(button, .btn, a.btn, .rv-btn, .gv-k, input[type=submit]):not(:disabled):hover { transform: translateY(-1px); }
html body :is(button, .btn, a.btn, .rv-btn, .bb-vender, .gv-k, .tabs button, input[type=submit]):not(:disabled):active { transform: scale(.95); transition-duration: .12s; }

/* acordeões abrem na mola (Configurações, grupos do menu no celular) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details:not(.sgroup)::details-content { height: 0; overflow: clip; transition: height var(--mola-abre-dur) var(--mola-abre), content-visibility var(--mola-abre-dur) allow-discrete; }
  details:not(.sgroup)[open]::details-content { height: auto; }
}
details.mola-abrindo[open] > :not(summary) { animation: mola-item var(--mola-item-dur) var(--mola-item) both, surge .24s ease-out both; animation-delay: 40ms; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* dica (tooltip) dos ícones do menu em pílula */
.cvp-pilula [data-tip] { position: relative; }
.cvp-pilula [data-tip]::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 14px); top: 50%; z-index: 5; pointer-events: none;
  white-space: nowrap; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: #fff; background: var(--cvp-tinta);
  padding: 6px 10px; border-radius: 9px; box-shadow: var(--cvp-sombra-2);
  opacity: 0; transform: translate(-8px, -50%) scale(.86); transform-origin: left center;
  transition: opacity .14s ease, transform .55s var(--mola);
}
.cvp-pilula [data-tip]:hover::after { opacity: 1; transform: translate(0, -50%); transition-delay: .06s; }

/* marca do topo da pílula: o X */
.cvp-pilula .cvp-marca { width: 36px; height: 36px; display: block; margin: 0 auto 10px; background: url(x.svg) center / contain no-repeat; transition: transform .7s var(--mola); }
.cvp-pilula .cvp-marca:hover { transform: rotate(-12deg) scale(1.08); }

/* ---------- 4a. menu em pílula — app do atendente (desktop) ---------- */
@media (min-width: 641px) {
  html body.cvp-app { padding-left: 96px; }
  html body.cvp-app .scrim, html body.cvp-app .hdr__burger { display: none !important; }
  html body.cvp-app .drawer {
    transform: none !important; top: 16px; left: 16px; bottom: 16px; height: auto; width: 64px; max-width: none;
    background: #fff; border: 1px solid var(--cvp-linha); border-radius: 999px; box-shadow: var(--cvp-sombra-2) !important;
    padding: 14px 0; align-items: center; overflow: visible; z-index: 70;
    animation: mola-lado var(--mola-dur) var(--mola) both, surge .2s ease-out both;
  }
  html body.cvp-app .drawer__head { background: none; padding: 0; display: block; }
  html body.cvp-app .drawer__head img, html body.cvp-app .drawer__head button { display: none; }
  html body.cvp-app .drawer__nav { padding: 0; gap: 6px; align-items: center; overflow: visible; flex: 1; }
  html body.cvp-app .drawer__nav a {
    width: 42px; height: 42px; padding: 0; justify-content: center; gap: 0; border: 0; border-radius: 13px;
    font-size: 0; color: var(--cvp-tinta-2); display: flex !important;
  }
  html body.cvp-app .drawer__nav a[hidden] { display: none !important; }
  html body.cvp-app .drawer__nav a .ic { width: 20px; height: 20px; color: currentColor; stroke-width: 1.8; }
  html body.cvp-app .drawer__nav a:hover { background: var(--cvp-azul-50); color: var(--cvp-azul); }
  html body.cvp-app .drawer__nav a.active { background: var(--cvp-azul-100); color: var(--cvp-azul); }
  html body.cvp-app .drawer__nav a.active::before { display: none; }
  html body.cvp-app .drawer__nav a[href="registrar-venda.html"] { color: var(--cvp-laranja-600); }
  html body.cvp-app .drawer__nav a[href="registrar-venda.html"]:hover, html body.cvp-app .drawer__nav a[href="registrar-venda.html"].active { background: var(--cvp-laranja-50); color: var(--cvp-laranja-600); }
}

/* ---------- 4b. menu em pílula — painel do gestor (desktop) ---------- */
@media (min-width: 901px) {
  html body .g { padding-left: 96px; }
  html body aside#side {
    position: fixed; top: 16px; left: 16px; bottom: 16px; height: auto; width: 64px; flex: none;
    background: #fff; border: 1px solid var(--cvp-linha); border-radius: 999px; box-shadow: var(--cvp-sombra-2);
    padding: 14px 0; align-items: center; overflow: visible; z-index: 60;
    animation: mola-lado var(--mola-dur) var(--mola) both, surge .2s ease-out both;
  }
  html body aside#side .brand { margin: 0; padding: 0; background: none; }
  html body aside#side .brand img { display: none; }
  html body aside#side .snav { padding: 0; gap: 6px; align-items: center; overflow: visible; flex: 1; }
  html body aside#side .snav > a, html body aside#side .snav summary {
    width: 42px; height: 42px; padding: 0; justify-content: center; gap: 0; border-radius: 13px; font-size: 0; color: var(--cvp-tinta-2);
  }
  html body aside#side .snav summary span, html body aside#side .snav summary .chev { display: none; }
  html body aside#side .snav .ic { width: 20px; height: 20px; color: currentColor; }
  html body aside#side .snav > a:hover, html body aside#side .snav summary:hover, html body aside#side .sgroup[open] > summary { background: var(--cvp-azul-50); color: var(--cvp-azul); }
  html body aside#side .snav > a.active, html body aside#side .sgroup.tem-ativo > summary { background: var(--cvp-azul-100); color: var(--cvp-azul); }
  html body aside#side .snav a.active::before { display: none; }
  html body aside#side .snav > a[href="gestor-vendas.html"] { color: var(--cvp-laranja-600); }
  html body aside#side .snav > a[href="gestor-vendas.html"].active, html body aside#side .snav > a[href="gestor-vendas.html"]:hover { background: var(--cvp-laranja-50); color: var(--cvp-laranja-600); }
  /* grupo vira um menu lateral flutuante que sai da pílula na mola */
  html body aside#side .sgroup { position: relative; }
  html body aside#side .sflyout {
    position: absolute; left: calc(100% + 16px); top: -10px; min-width: 216px; z-index: 6;
    background: #fff; border: 1px solid var(--cvp-linha); border-radius: 16px; padding: 8px; box-shadow: var(--cvp-sombra-3);
    display: flex; flex-direction: column; gap: 1px; transform-origin: left top;
  }
  html body aside#side .sgroup[open] > .sflyout { animation: mola-lado var(--mola-dur) var(--mola) both, surge .16s ease-out both; }
  html body aside#side .sflyout__t { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cvp-suave); padding: 6px 10px 6px; }
  html body aside#side .sflyout a { width: auto; height: auto; padding: 8px 10px; justify-content: flex-start; font-size: .88rem; border-radius: 10px; color: var(--cvp-tinta-2); font-weight: 500; }
  html body aside#side .sflyout a:hover { background: var(--cvp-azul-50); color: var(--cvp-azul); }
  html body aside#side .sflyout a.active { background: var(--cvp-azul-100); color: var(--cvp-azul); font-weight: 600; }
  html body .burger, html body .g > .scrim { display: none !important; }
}
/* gestor no celular: a gaveta de sempre, clara e com a mola */
@media (max-width: 900px) {
  html body aside#side .brand { background: none; border-bottom: 1px solid var(--cvp-linha); border-radius: 0; margin: 10px 16px; }
  html body aside#side .brand img { filter: none; }
  html body aside#side.open .snav { }
}

/* ---------- 5. cabeçalho claro do app ---------- */
html body .hdr {
  background: radial-gradient(120% 160% at 88% 0%, var(--cvp-azul-50) 0%, #fff 58%) !important;
  color: var(--cvp-tinta); box-shadow: 0 1px 0 var(--cvp-linha), 0 18px 36px -28px rgba(15,30,51,.35) !important;
  border-radius: 0 0 22px 22px !important; min-height: 118px; width: auto !important; max-width: none !important;
  margin: 0 16px 0 0 !important; padding: 22px 26px 18px !important; overflow: hidden;
  animation: mola-caixa var(--mola-dur) var(--mola) both, surge .2s ease-out both;
}
html body .hdr .hdr__bg, html body .hdr .hdr__veil { display: none !important; }
html body .hdr .x3d-host { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html body .hdr .hdr__info h4 { color: var(--cvp-tinta); font-size: 1.05rem; }
html body .hdr .hdr__pontos { color: var(--cvp-suave); font-size: .7rem; }
html body .hdr .hdr__pontos strong { color: var(--cvp-tinta); }
html body .hdr .hdr__logout { color: var(--cvp-azul); font-weight: 600; }
html body .hdr .hdr__dots { color: var(--cvp-fraco); }
html body .hdr .engage__track { background: #e3eaf3; }
html body .hdr .hdr__logo { filter: none; max-height: 54px; }
html body .hdr .hdr__burger { background: var(--cvp-azul-50); color: var(--cvp-azul); }
html body .hdr .hdr__avatar .pic { border-color: #fff; box-shadow: 0 6px 16px -6px rgba(0,63,120,.45); }
@media (max-width: 640px) { html body .hdr { margin: 0 !important; border-radius: 0 0 20px 20px !important; } }

/* gaveta do celular (app), clara */
html body .drawer__head { background: #fff; border-bottom: 1px solid var(--cvp-linha); }
html body .drawer__head button { background: var(--cvp-azul-50); color: var(--cvp-azul); }
html body .drawer[data-open="1"] .drawer__nav > a { animation: mola-item var(--mola-item-dur) var(--mola-item) both, surge .2s ease-out both; animation-delay: calc(var(--n, 0) * 30ms + 60ms); }

/* ---------- 6. componentes ---------- */
html body .ui-card { border-radius: var(--cvp-r); border: 1px solid var(--cvp-linha); box-shadow: var(--cvp-sombra-1); }
html body .card { border-radius: var(--cvp-r); box-shadow: var(--cvp-sombra-1); }
html body .btn { border-radius: var(--cvp-r-sm); font-weight: 600; }
html body .bottombar { box-shadow: 0 -10px 30px -18px rgba(15,30,51,.3); }
html body .mo { background: rgba(15,30,51,.42); }
html body .mo__box { border-radius: 18px; box-shadow: var(--cvp-sombra-3); }
html body .mo.show .mo__box { animation: mola-caixa var(--mola-dur) var(--mola) both, surge .16s ease-out both; }
html body .irc { border-radius: 18px; box-shadow: var(--cvp-sombra-3); transform-origin: bottom right; }
html body .irc.on { animation: mola-caixa-cima var(--mola-dur) var(--mola) both, surge .16s ease-out both; }
html body .iris__pill { transition: transform .55s var(--mola); }
html body .iris__pill:hover { transform: translateY(-2px); }
html body .iris__ava { transition: transform .6s var(--mola); }
html body .iris__ava:hover { transform: scale(1.08) rotate(-6deg); }
html body .tbl th { font-size: .7rem; letter-spacing: .02em; }
html body .tbl td { font-size: .88rem; }

/* home clara: os cartões que eram azul-escuro viram superfícies claras com título azul */
html body .mood, html body .mood__box { background: linear-gradient(180deg, var(--cvp-azul-50) 0%, #fff 100%) !important; color: var(--cvp-tinta) !important; }
html body .mood .wm-title, html body .roleta__head .wm-title, html body .resg__body .wm-title { color: var(--cvp-azul-800) !important; }
html body .mood__opt { color: var(--cvp-tinta-2) !important; }
html body .mood__opt p { font-weight: 600; font-size: .88rem; }
html body .mood__opt[aria-pressed="true"] { background: #fff !important; border-color: var(--cvp-laranja) !important; }
html body .mood__ico { width: 84px; height: 84px; transition: filter .25s ease, transform .6s var(--mola) !important; }
html body .mood__desc { color: var(--cvp-tinta-2); font-size: .92rem; border-top: 1px solid var(--cvp-linha); }
html body .roleta__head { background: #fff !important; color: var(--cvp-tinta) !important; border-bottom: 1px solid var(--cvp-linha); }
html body .roleta__head p { color: var(--cvp-suave) !important; }
html body .banner { background: linear-gradient(135deg, var(--cvp-laranja-50) 0%, #fff 70%) !important; color: var(--cvp-tinta) !important; border-left: 4px solid var(--cvp-laranja); }
html body .banner :is(h1, h2, h3, b, strong, .wm-title) { color: var(--cvp-laranja-600) !important; }
html body .banner p { color: var(--cvp-tinta-2) !important; }
html body .resg__body { background: #fff !important; color: var(--cvp-tinta) !important; }
html body .resg__body .btn { background: var(--cvp-azul) !important; color: #fff !important; border: 0 !important; }
html body .social__slide { background: linear-gradient(160deg, var(--cvp-azul-50), var(--cvp-azul-100)) !important; color: var(--cvp-azul-800) !important; letter-spacing: 0; }
html body .irc__h { background: #fff !important; color: var(--cvp-tinta) !important; border-bottom: 1px solid var(--cvp-linha); }
html body .irc__h * { color: inherit; }
html body .hdr__logout { position: relative; z-index: 3; background: #fff; padding: 6px 14px; border-radius: 999px; box-shadow: var(--cvp-sombra-1); border: 1px solid var(--cvp-linha); }

/* destaques que eram azul-escuro viram claros (saldo do extrato, topo do Registrar venda) */
html body .ex-sum { background: linear-gradient(135deg, var(--cvp-azul-50) 0%, #fff 75%) !important; color: var(--cvp-tinta) !important; border: 1px solid var(--cvp-azul-100); }
html body .ex-sum .ex-saldo b { color: var(--cvp-azul-800); }
html body .ex-sum .ex-saldo span, html body .ex-sum .ex-note { color: var(--cvp-suave) !important; opacity: 1; }
html body .rv-hero { background: linear-gradient(135deg, var(--cvp-azul-50) 0%, #fff 80%) !important; color: var(--cvp-tinta) !important; border: 1px solid var(--cvp-azul-100); }
html body .rv-hero h2 { color: var(--cvp-azul-800) !important; }
html body .rv-hero p, html body .rv-hero .rv-dica { color: var(--cvp-tinta-2) !important; opacity: 1; }
html body .rv-hero .rv-btn--line { background: #fff; color: var(--cvp-azul); border: 1px solid var(--cvp-azul-100); }

/* canvas dos X 3D: ocupa o hospedeiro (o tamanho em pixels de tela é do renderer) */
.x3d-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.x3d-host { overflow: hidden; }

/* ---------- 7. login ----------
   A parede de X ocupa a tela inteira; a massa fica à esquerda e o lado direito é azul liso.
   O formulário flutua direto nesse azul, sem caixa: campos de vidro, logo da CVP em cima. */
html body .login { position: relative; min-height: 100vh; display: block; background: #0a57a6; }
html body .login__hero { position: fixed !important; inset: 0; z-index: 0; min-height: 0 !important; flex: none !important; background: #0a57a6 !important; }
html body .login__hero .login__video, html body .login__hero .login__vin, html body .login__hero .login__som { display: none !important; }
html body .login__hero .x3d-host { position: absolute; inset: 0; z-index: 1; }
html body .login__panel {
  position: relative; z-index: 2; margin-left: auto; width: min(460px, 38vw); max-width: none; min-height: 100vh;
  background: transparent !important; color: #fff; padding: 48px clamp(28px, 4vw, 64px) 32px 0;
  display: flex; flex-direction: column; justify-content: center; align-items: stretch; pointer-events: none;
}
html body .login__panel > * { pointer-events: auto; }
html body .login__marca { max-width: none; margin: 0 0 30px; justify-content: flex-start; }
html body .login__marca img { width: 168px; height: auto; }
.cvp-login-eyebrow { margin: 0 0 4px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.cvp-login-tit { margin: 0 0 6px; font-size: clamp(1.7rem, 2.4vw, 2.2rem); font-weight: 700; letter-spacing: -.025em; color: #fff; line-height: 1.1; }
html body .login__form { max-width: none; }
html body .login__form .sub { text-align: left; color: rgba(255,255,255,.78); margin: 0 0 22px; font-size: .95rem; }
html body .login .field input {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26); color: #fff; border-radius: 12px; padding: 13px 15px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .2s, background-color .2s, box-shadow .55s var(--mola);
}
html body .login .field input::placeholder { color: rgba(255,255,255,.66); }
html body .login .field input:focus { background: rgba(255,255,255,.16); border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
html body .login .field input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px rgba(10,87,166,.95) inset; caret-color: #fff; }
html body .login .eye { color: rgba(255,255,255,.75); }
html body .login .forgot { color: rgba(255,255,255,.85); }
html body .login .btn { border-radius: 12px; font-weight: 700; padding: 14px; }
html body .login .btn--primary { background: #fff !important; color: var(--cvp-azul-800) !important; box-shadow: 0 14px 30px -16px rgba(0,0,0,.6); }
html body .login .btn--fundo-escuro-2, html body .login #btn-primeiro { background: var(--cvp-laranja) !important; color: #fff !important; box-shadow: 0 14px 30px -16px rgba(243,146,0,.95); margin-top: 10px; }
html body .login .btn--fundo-escuro-2:hover, html body .login #btn-primeiro:hover { background: var(--cvp-laranja-600) !important; }
.cvp-login-aviso { margin: 34px 0 0; font-size: 11px; color: rgba(255,255,255,.5); }
html body .login__marca, .cvp-login-eyebrow, .cvp-login-tit, html body .login__form, .cvp-login-aviso { animation: mola-sobe var(--mola-item-dur) var(--mola-item) both, surge .3s ease-out both; }
.cvp-login-eyebrow { animation-delay: .06s; } .cvp-login-tit { animation-delay: .1s; } html body .login__form { animation-delay: .16s; } .cvp-login-aviso { animation-delay: .24s; }
/* celular: X em cima, formulário embaixo no azul */
@media (max-width: 820px) {
  html body .login__panel { width: auto; margin: 0; min-height: 100vh; padding: 36vh 22px 28px; justify-content: flex-start; }
  html body .login__marca { margin-bottom: 18px; } html body .login__marca img { width: 140px; }
}
/* login do painel */
html body .bgv { display: none !important; }
.cvp-adm-fundo { position: fixed; inset: 0; z-index: 0; background: radial-gradient(130% 120% at 78% 28%, #0a6fc4 0%, #005ca9 34%, #003563 72%, #00264a 100%); }
.cvp-adm-fundo ~ .veil { display: none !important; }
.cvp-adm-fundo ~ .card .cvp-by { display: none !important; }   /* o logo já está no topo do cartão; o branco sumia no fundo branco */
.cvp-adm-fundo ~ .card { pointer-events: auto; box-shadow: var(--cvp-sombra-3) !important; animation: mola-caixa var(--mola-dur) var(--mola) both, surge .2s ease-out both; }
.cvp-adm-fundo ~ .card .card__top { background: #fff !important; border-bottom: 1px solid var(--cvp-linha); }
.cvp-adm-fundo ~ .card .card__top p { color: var(--cvp-suave) !important; font-weight: 600; letter-spacing: .08em; font-size: .72rem; }
.cvp-adm-fundo ~ .card .cvp-by { margin-top: 18px; }

/* ---------- 8. rodapé "by" ---------- */
.cvp-by { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; color: var(--cvp-suave); }
.cvp-by img { height: 26px; width: auto; display: block; }
.cvp-by .cvp-selo { height: 30px; padding: 6px 10px; border-radius: 9px; background: var(--cvp-azul); box-sizing: content-box; }
.cvp-by .cvp-by__prog { height: 34px; }
.cvp-by .cvp-by__sep { width: 1px; height: 22px; background: var(--cvp-linha); }
html body .footbar { background: transparent !important; padding: 26px 16px 34px !important; border-top: 1px solid var(--cvp-linha); margin-top: 24px; }
html body .footbar .flogo { display: none; }
html body .foot .cvp-by { margin-top: 2px; }
.login__panel .cvp-by { margin-top: 28px; }

/* =====================================================================
   9. rodada de 06/11 (tarde): sem nome de programa, banner azul, dois temas, roleta 3D
   ===================================================================== */

/* ---- placar e cabeçalho: banner azul com X grandes, só o essencial ---- */
html body .hdr {
  background: radial-gradient(120% 180% at 85% 0%, #1c74c9 0%, #0a57a6 45%, #084a8f 100%) !important;
  color: #fff !important; min-height: 132px; box-shadow: 0 18px 40px -26px rgba(0,30,70,.6) !important;
}
html body .hdr .hdr__logo, html body .hdr .hdr__dots, html body .hdr__medalha, html body .hdr__nivel, html body .hdr .engage { display: none !important; }
html body .hdr .hdr__center { align-items: center; gap: 16px; }
html body .hdr .hdr__info h4 { color: #fff; font-size: 1.15rem; font-weight: 500; }
html body .hdr .hdr__info h4 strong { font-weight: 700; }
/* saldo em destaque: o número grande, "SALDO" e "PONTOS" pequenos na mesma linha de base */
html body .hdr .hdr__pontos { color: rgba(255,255,255,.82); font-size: .74rem; font-weight: 600; letter-spacing: .08em; margin-top: 4px;
  display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; line-height: 1; }
html body .hdr .hdr__pontos strong { color: #fff; font-size: 2rem; font-weight: 800; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { html body .hdr .hdr__pontos strong { font-size: 1.6rem; } }
html body .hdr .hdr__avatar .pic { width: 56px; height: 56px; border: 2px solid rgba(255,255,255,.8); }
html body .hdr .hdr__logout { color: var(--cvp-azul-800); }
html body .hdr .hdr__burger { background: rgba(255,255,255,.16); color: #fff; }
/* o conteúdo do cabeçalho fica à esquerda; os X ocupam a direita */
@media (min-width: 641px) {
  html body .hdr { grid-template-columns: auto 1fr auto !important; }
  html body .hdr .hdr__center { grid-column: 1 / 2; }
}

/* ---- módulos que não existem mais ---- */
html body [data-card="regua"], html body [data-card="niveis"], html body .mood { display: none !important; }

/* ---- X 3D do menu (substitui o X plano quando o 3D carrega) ---- */
.cvp-pilula .cvp-marca { position: relative; width: 40px; height: 34px; }
.cvp-pilula .cvp-marca.x3d-ok { background: none; }
.cvp-pilula .cvp-marca:hover { transform: none; }
.cvp-pilula .cvp-marca .x3d-canvas { inset: -6px; width: calc(100% + 12px) !important; height: calc(100% + 12px) !important; }
html body .drawer__head img, html body aside#side .brand img { display: none !important; }

/* ---- submenus na mola: menu flutuante (computador) e acordeão (celular) ---- */
html body aside#side .sgroup[open] > .sflyout > a { animation: mola-item var(--mola-item-dur) var(--mola-item) both, surge .2s ease-out both; animation-delay: calc(var(--n, 0) * 38ms + 60ms); }
@media (max-width: 900px) {
  html body aside#side .sgroup > .sflyout { display: flex; flex-direction: column; transform-origin: top left; }
  html body aside#side .sgroup[open] > .sflyout { animation: mola-caixa var(--mola-dur) var(--mola) both, surge .16s ease-out both; }
  html body aside#side .sflyout__t { display: none; }
  html body aside#side.open .snav > * { animation: mola-item var(--mola-item-dur) var(--mola-item) both, surge .2s ease-out both; }
}

/* ---- botão de tema (no fim da pílula; no celular, dentro da gaveta) ---- */
.cvp-tema-bt { width: 42px; height: 42px; border-radius: 13px; border: 0; background: transparent; color: var(--cvp-tinta-2); cursor: pointer; display: grid; place-items: center; margin: 6px auto 0; }
.cvp-tema-bt:hover { background: var(--cvp-azul-50); color: var(--cvp-azul); }
.cvp-tema-bt svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cvp-tema-bt .lua { display: none; }
html[data-tema="claro"] .cvp-tema-bt .sol { display: none; }
html[data-tema="claro"] .cvp-tema-bt .lua { display: block; }

/* ---- tema ESCURO: o site sobre o azul da parede de X; cartões brancos ---- */
html[data-tema="escuro"] body { background: #0a57a6 !important; }
html[data-tema="escuro"] body .page-head h1,
html[data-tema="escuro"] body .intro h3, html[data-tema="escuro"] body .intro strong { color: #fff !important; }
html[data-tema="escuro"] body .intro p { color: rgba(255,255,255,.82) !important; }
html[data-tema="escuro"] body .hdr { box-shadow: none !important; }
html[data-tema="escuro"] body .footbar { border-top-color: rgba(255,255,255,.14); }
html[data-tema="escuro"] body .cvp-by { color: rgba(255,255,255,.75); }
html[data-tema="escuro"] body .cvp-by .cvp-selo { background: transparent; padding: 0; }
html[data-tema="escuro"] body .ui-card, html[data-tema="escuro"] body .card { border-color: transparent; box-shadow: 0 18px 40px -24px rgba(0,20,50,.55); }
html[data-tema="escuro"] body .top { background: rgba(10,87,166,.82) !important; border-bottom-color: rgba(255,255,255,.12) !important; }
html[data-tema="escuro"] body .top h1, html[data-tema="escuro"] body .top .me b, html[data-tema="escuro"] body .top .logout { color: #fff !important; }
html[data-tema="escuro"] body .gv-hero p, html[data-tema="escuro"] body .gv-hero p b { color: rgba(255,255,255,.88) !important; }
html[data-tema="escuro"] body .content > .hint, html[data-tema="escuro"] body .content > p, html[data-tema="escuro"] body .content > h2 { color: rgba(255,255,255,.88) !important; }
html[data-tema="escuro"] body .foot, html[data-tema="escuro"] body .foot .cvp-by { color: rgba(255,255,255,.7); }

/* ---- tema CLARO: fundo cinza clarinho; módulos de destaque em azul e laranja ---- */
html[data-tema="claro"] body { background: #eef1f5 !important; }
html[data-tema="claro"] body .banner { background: linear-gradient(135deg, #f39200 0%, #ffad33 100%) !important; color: #fff !important; border-left: 0; }
html[data-tema="claro"] body .banner :is(h1, h2, h3, b, strong, .wm-title), html[data-tema="claro"] body .banner p { color: #fff !important; }
html[data-tema="claro"] body .roleta__head { background: linear-gradient(135deg, #003f78, #005ca9) !important; color: #fff !important; border-bottom: 0; }
html[data-tema="claro"] body .roleta__head .wm-title, html[data-tema="claro"] body .roleta__head p { color: #fff !important; }
html[data-tema="claro"] body .resg__body { background: linear-gradient(135deg, #003f78, #005ca9) !important; color: #fff !important; }
html[data-tema="claro"] body .resg__body .wm-title { color: #fff !important; }
html[data-tema="claro"] body .resg__body .btn { background: var(--cvp-laranja) !important; }
html[data-tema="claro"] body .social__slide { background: linear-gradient(160deg, #0a6fc4, #003f78) !important; color: #fff !important; }
html[data-tema="claro"] body .ex-sum { background: linear-gradient(135deg, #003f78, #005ca9) !important; color: #fff !important; border: 0; }
html[data-tema="claro"] body .ex-sum .ex-saldo b { color: #fff; }
html[data-tema="claro"] body .ex-sum .ex-saldo span, html[data-tema="claro"] body .ex-sum .ex-note { color: rgba(255,255,255,.82) !important; }
html[data-tema="claro"] body .rv-hero { background: linear-gradient(135deg, #f39200 0%, #ffad33 100%) !important; color: #fff !important; border: 0; }
html[data-tema="claro"] body .rv-hero h2, html[data-tema="claro"] body .rv-hero p, html[data-tema="claro"] body .rv-hero .rv-dica { color: #fff !important; }
html[data-tema="claro"] body .rv-hero .rv-btn--foto { background: #fff; color: #c46f00; }
html[data-tema="claro"] body .rv-hero .rv-btn--line { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.7); }
html[data-tema="claro"] body .mo__head { background: linear-gradient(135deg, #003f78, #005ca9); color: #fff; }
html[data-tema="claro"] body .mo__head * { color: #fff; }

/* ---- roleta 3D nas cores do guia ---- */
html body .roleta__stage { perspective: 900px; padding-top: 34px; }
html body .roleta__ring {
  padding: 0 !important; background: none !important; box-shadow: none !important; position: relative; border-radius: 50%;
  transform: rotateX(14deg); transform-origin: 50% 60%;
  filter: drop-shadow(0 26px 22px rgba(0,40,90,.32)) drop-shadow(0 6px 6px rgba(0,40,90,.25));
}
html body .roleta__ring::after {   /* brilho fixo: a roda gira por baixo dele */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(58% 42% at 34% 20%, rgba(255,255,255,.5), rgba(255,255,255,0) 62%),
              radial-gradient(closest-side, rgba(0,0,0,0) 82%, rgba(0,20,50,.22) 100%);
}
html body .roleta__hub {
  width: 64px !important; height: 64px !important; border: 0 !important; z-index: 3;
  background: url(x.svg) center / 56% no-repeat, radial-gradient(circle at 35% 30%, #ffffff 0%, #e9f0f7 55%, #c9d6e5 100%) !important;
  box-shadow: 0 8px 18px -6px rgba(0,30,70,.55), inset 0 -3px 6px rgba(0,40,90,.18), 0 0 0 5px rgba(255,255,255,.9) !important;
}
html body .roleta__pointer {
  top: 12px !important; border-left-width: 15px !important; border-right-width: 15px !important; border-top: 30px solid var(--cvp-laranja) !important;
  filter: drop-shadow(0 4px 4px rgba(0,30,70,.45)) !important; z-index: 4 !important;
}
html body .roleta__pointer::before { content: ""; position: absolute; left: -9px; top: -40px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffd28a 40%, #f39200 75%); box-shadow: 0 2px 4px rgba(0,30,70,.4); }

/* topo azul do cartão do painel: o logo da CVP é branco */
.cvp-adm-fundo ~ .card .card__top { background: linear-gradient(135deg, #003f78, #005ca9) !important; border-bottom: 0; }
.cvp-adm-fundo ~ .card .card__top img { height: 40px; }
.cvp-adm-fundo ~ .card .card__top p { color: rgba(255,255,255,.75) !important; }

/* links soltos no fundo azul (tema escuro) */
html[data-tema="escuro"] body .content > p a, html[data-tema="escuro"] body .content > .hint a, html[data-tema="escuro"] body .intro a { color: #ffd28a !important; text-decoration: underline; }

/* "Conciliar agora" no azul: laranja para não sumir */
html[data-tema="escuro"] body .gv-acts .btn:not(.btn--line) { background: var(--cvp-laranja) !important; }

/* banner laranja no tema azul (escuro); no claro ele continua azul */
html[data-tema="escuro"] body .hdr { background: radial-gradient(120% 180% at 85% 0%, #ffad33 0%, #f39200 45%, #e07f00 100%) !important; }
html[data-tema="escuro"] body .hdr .hdr__pontos { color: rgba(255,255,255,.88); }
html[data-tema="escuro"] body .hdr .hdr__avatar .pic { border-color: #fff; }
html[data-tema="escuro"] body .hdr .hdr__logout { color: #c46f00; }

/* placar à direita, ao lado do Sair: a massa de X do banner fica à esquerda */
@media (min-width: 641px) {
  html body .hdr { grid-template-columns: 1fr auto auto !important; }
  html body .hdr .hdr__center { grid-column: 2 / 3 !important; justify-content: flex-end; flex-direction: row-reverse; text-align: right; }
  html body .hdr .hdr__info { text-align: right; }
  html body .hdr .hdr__logout { grid-column: 3 / 4 !important; align-self: center; margin-left: 18px; }
}
html[data-tema="escuro"] body .hdr { background: radial-gradient(120% 180% at 15% 0%, #ff9a1a 0%, #f07800 45%, #d86400 100%) !important; }

/* cartões aguardando entrar na tela (o script anima na mola quando aparecem) */
.cvp-espera { opacity: 0; }
/* roleta: o X fica dentro da roda, no centro exato (gira o canvas por baixo dele) */
html body .roleta__ring > .roleta__hub { position: absolute !important; left: 50% !important; top: 50% !important; margin: 0 !important;
  transform: translate(-50%, -50%) !important; z-index: 3; }
html body .roleta__ring::after { z-index: 2; }

/* ---------- janela padrão do design system (privacidade, criar senha, esqueci a senha) ---------- */
.cvp-capa { position: fixed; inset: 0; z-index: 590; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto;
  background: rgba(8,28,58,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cvp-jan { background: #fff; border-radius: 22px; width: 100%; max-width: 480px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,20,50,.55), 0 2px 8px rgba(0,20,50,.08); color: var(--cvp-tinta); }
.cvp-jan__topo { display: flex; gap: 14px; align-items: flex-start; padding: 24px 24px 6px; }
.cvp-jan__marca { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; background: url(x.svg) center / 60% no-repeat, var(--cvp-azul-50); }
.cvp-jan__topo h3 { margin: 2px 0 2px; font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; color: var(--cvp-tinta); }
.cvp-jan__topo p { margin: 0; font-size: .88rem; color: var(--cvp-suave); }
.cvp-jan__corpo { padding: 14px 24px 4px; overflow: auto; }
.cvp-jan__texto { margin: 0 0 16px; font-size: .9rem; line-height: 1.6; color: var(--cvp-tinta-2); }
.cvp-jan__rot { margin: 18px 0 2px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cvp-suave); }
.cvp-jan__dica { margin: 0 0 10px; font-size: .82rem; color: var(--cvp-fraco); }
.cvp-jan__erro { margin: 12px 0 0; min-height: 1em; font-size: .84rem; font-weight: 600; color: var(--cvp-laranja-600); }
.cvp-jan__acoes { display: flex; justify-content: space-between; gap: 10px; padding: 16px 24px 22px; border-top: 1px solid var(--cvp-linha); margin-top: 10px; }
.cvp-jan__acoes .btn { min-width: 120px; justify-content: center; padding: 12px 20px; border-radius: 12px; }
.cvp-jan__acoes .btn:not(.btn--line) { background: var(--cvp-azul) !important; color: #fff; box-shadow: 0 12px 24px -14px rgba(0,92,169,.9); }
.cvp-jan__acoes .btn:disabled { background: #c9d6e5 !important; box-shadow: none; cursor: not-allowed; }
.cvp-jan__acoes .btn--line { background: #fff; color: var(--cvp-tinta-2); border: 1px solid var(--cvp-linha); }
/* opções marcáveis: laranja da CVP no lugar do vermelho */
.cvp-opcao { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 1.5px solid var(--cvp-linha); border-radius: 14px; cursor: pointer;
  background: #fff; transition: border-color .2s, background-color .2s, transform .55s var(--mola); }
.cvp-opcao:hover { border-color: #ffd28a; }
.cvp-opcao:active { transform: scale(.98); }
.cvp-opcao:has(input:checked) { border-color: var(--cvp-laranja); background: var(--cvp-laranja-50); }
.cvp-opcao input { accent-color: var(--cvp-laranja); width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; }
.cvp-opcao input:checked { animation: mola-item var(--mola-item-dur) var(--mola-item) both; }
.cvp-opcao--aceite span { font-size: .92rem; color: var(--cvp-tinta); }
.cvp-opcao--aceite a { color: var(--cvp-azul); font-weight: 700; }
.cvp-canais { display: grid; gap: 8px; }
.cvp-canal { align-items: center; padding: 10px 14px; }
.cvp-canal__ic { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--cvp-azul); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cvp-canal:has(input:checked) .cvp-canal__ic { stroke: var(--cvp-laranja-600); }
.cvp-canal b { display: block; font-size: .9rem; color: var(--cvp-tinta); }
.cvp-canal small { display: block; font-size: .8rem; color: var(--cvp-suave); }
.cvp-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: .82rem; font-weight: 600; color: var(--cvp-tinta-2); }
.cvp-campo input { font: 400 .95rem 'Source Sans 3', system-ui, sans-serif; padding: 12px 14px; border: 1.5px solid var(--cvp-linha); border-radius: 12px; color: var(--cvp-tinta);
  transition: border-color .2s, box-shadow .55s var(--mola); }
.cvp-campo input:focus { outline: none; border-color: var(--cvp-azul); box-shadow: 0 0 0 4px rgba(0,92,169,.12); }
@media (max-width: 520px) { .cvp-jan__topo, .cvp-jan__corpo, .cvp-jan__acoes { padding-left: 18px; padding-right: 18px; } }
/* caixas de seleção em geral: laranja da marca */
html body input[type="checkbox"], html body input[type="radio"] { accent-color: var(--cvp-laranja); }

/* saldo do extrato em laranja (destaque de pontos), nos dois temas */
html body .ex-sum, html[data-tema] body .ex-sum { background: radial-gradient(120% 160% at 0% 0%, #ffad33 0%, #f39200 45%, #e07a00 100%) !important; color: #fff !important; border: 0 !important;
  box-shadow: 0 22px 44px -26px rgba(160,70,0,.75) !important; }
html body .ex-sum .ex-saldo b, html[data-tema] body .ex-sum .ex-saldo b { color: #fff !important; }
html body .ex-sum .ex-saldo span, html body .ex-sum .ex-note, html[data-tema] body .ex-sum .ex-saldo span, html[data-tema] body .ex-sum .ex-note { color: rgba(255,255,255,.9) !important; }

/* ícone do assistente: X 3D sobre um círculo branco (gira na mola ao passar o mouse) */
html body .iris__ava.cvp-ava-x, html body .iris__ava { position: relative; font-size: 0 !important; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #eef4fa 60%, #d9e5f2 100%) !important;
  border: 3px solid #fff; box-shadow: 0 12px 26px -10px rgba(0,30,70,.55), 0 0 0 1px rgba(0,63,120,.08) !important; }
html body .iris__ava:not(.x3d-ok) { background: url(x.svg) center / 56% no-repeat, radial-gradient(circle at 35% 30%, #ffffff 0%, #eef4fa 60%, #d9e5f2 100%) !important; }
html body .iris__ava .x3d-canvas { inset: 4px; width: calc(100% - 8px) !important; height: calc(100% - 8px) !important; }
html body .iris__ava:hover { transform: scale(1.08) !important; }
html body #irc-av { font-size: 0 !important; background: url(x.svg) center / 60% no-repeat, #fff !important; border: 1px solid var(--cvp-linha); }

/* modo azul: alguns cartões em laranja (quiz, campanha sazonal e o saldo do extrato) */
html[data-tema="escuro"] body .hq__head { background: radial-gradient(120% 160% at 0% 0%, #ffad33 0%, #f39200 50%, #e07a00 100%) !important; color: #fff !important; }
html[data-tema="escuro"] body .hq__head h2, html[data-tema="escuro"] body .hq__head p { color: #fff !important; }
html[data-tema="escuro"] body .banner { background: radial-gradient(120% 160% at 0% 0%, #ffad33 0%, #f39200 50%, #e07a00 100%) !important; color: #fff !important; border-left: 0 !important; }
html[data-tema="escuro"] body .banner :is(h1, h2, h3, b, strong, .wm-title), html[data-tema="escuro"] body .banner p { color: #fff !important; }

/* tarja do perfil: laranja no modo azul (no claro segue azul) */
html[data-tema="escuro"] body .pf-hero__top { background: radial-gradient(120% 180% at 0% 0%, #ffad33 0%, #f39200 50%, #e07a00 100%) !important; }
html[data-tema="escuro"] body .pf-hero__top .pf-foto-btn { border-color: rgba(255,255,255,.9); }
html body .pf-chip { background: var(--cvp-laranja-50); color: #b45f00; }

/* ícone do assistente: sem círculo, só o X 3D com brilho suave */
html body .iris__ava, html body .iris__ava.cvp-ava-x, html body .iris__ava:not(.x3d-ok) {
  background-color: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
html body .iris__ava.x3d-ok { background: none !important; }
html body .iris__ava:not(.x3d-ok) { background: url(x.svg) center / 70% no-repeat !important; }
html body .iris__ava .x3d-canvas { inset: -6px !important; width: calc(100% + 12px) !important; height: calc(100% + 12px) !important;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.7)) drop-shadow(0 0 16px rgba(255,190,90,.75)) drop-shadow(0 0 30px rgba(255,170,60,.35)); }
html body .iris__ava:not(.x3d-ok) { filter: drop-shadow(0 0 10px rgba(255,214,150,.75)) drop-shadow(0 0 22px rgba(120,190,255,.45)); }
html body .iris__ava:hover .x3d-canvas { filter: drop-shadow(0 0 8px rgba(255,255,255,.9)) drop-shadow(0 0 20px rgba(255,190,90,.95)) drop-shadow(0 0 40px rgba(255,170,60,.5)); }

/* placar: avatar e nome levam ao perfil; ao passar o mouse, o avatar cresce na mola e mostra a câmera */
html body .hdr .cvp-ir-perfil { cursor: pointer; }
html body .hdr .hdr__avatar.cvp-ir-perfil { position: relative; transition: transform .6s var(--mola); }
html body .hdr .hdr__avatar.cvp-ir-perfil:hover, html body .hdr .hdr__avatar.cvp-ir-perfil:focus-visible { transform: scale(1.08); }
html body .hdr h4.cvp-ir-perfil:hover { text-decoration: underline; text-underline-offset: 3px; }
.cvp-cam { position: absolute; right: -4px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 10px -2px rgba(0,30,70,.45); opacity: 0; transform: scale(.4); transition: opacity .15s ease, transform .55s var(--mola); pointer-events: none; }
.cvp-cam svg { width: 14px; height: 14px; fill: none; stroke: var(--cvp-laranja-600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .hdr .hdr__avatar.cvp-ir-perfil:hover .cvp-cam, html body .hdr .hdr__avatar.cvp-ir-perfil:focus-visible .cvp-cam { opacity: 1; transform: none; }
@media (hover: none) { .cvp-cam { opacity: 1; transform: none; } }   /* no celular a câmera fica sempre visível */

html body #pf-avatar.cvp-ir-perfil { cursor: pointer; transition: transform .6s var(--mola); }
html body #pf-avatar.cvp-ir-perfil:hover { transform: scale(1.06); }

/* cupons e descontos no azul: título legível, busca no padrão e topo do cupom em laranja */
html[data-tema="escuro"] body .bnf-head h1 { color: #fff !important; }
html[data-tema="escuro"] body .bnf-head p { color: rgba(255,255,255,.82) !important; }
html[data-tema="escuro"] body #cp-lista > p { color: rgba(255,255,255,.8) !important; }
html body #cp-busca { border: 1.5px solid var(--cvp-linha) !important; border-radius: 14px !important; padding: 13px 16px !important; box-shadow: var(--cvp-sombra-1); }
html body #cp-busca:focus { outline: none; border-color: var(--cvp-laranja) !important; box-shadow: 0 0 0 4px rgba(243,146,0,.18); }
html[data-tema="escuro"] body .cup-top { background: radial-gradient(120% 160% at 0% 0%, #ffad33 0%, #f39200 50%, #e07a00 100%) !important; }
html body .cup-card { border-radius: 18px; box-shadow: 0 18px 40px -26px rgba(0,20,50,.6) !important; transition: transform .6s var(--mola), box-shadow .3s ease !important; }
html body .cup-card:hover { transform: translateY(-4px) !important; }
html body .cup-off { font-weight: 700 !important; }

/* post sem foto: some o bloco de imagem vazio e o texto ganha destaque */
html body .post__img:empty:not([style*="url("]) { display: none !important; }   /* a foto vem como fundo: só some o bloco SEM imagem */
html body .post:has(.post__img:empty:not([style*="url("])) .post__txt { font-size: 1.02rem; line-height: 1.6; padding-top: 4px; }

/* ganhou pontos: "+N pontos" sobe na mola e some (junto da explosão de X do banner) */
@keyframes cvp-ganho { 0% { transform: translateY(10px) scale(.6); opacity: 0; } 18% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-34px) scale(1); opacity: 0; } }
.cvp-ganho { position: absolute; right: 0; bottom: 100%; z-index: 5; white-space: nowrap; pointer-events: none;
  background: #fff; color: #c46f00; font-weight: 800; font-size: .82rem; padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 10px 22px -10px rgba(0,30,70,.6); animation: cvp-ganho 1.8s var(--mola-item) both; }
html body .hdr .hdr__pontos strong { display: inline-block; transform-origin: center; }

/* ---------- lista de seleção própria (substitui a do navegador): cantos redondos e mola ---------- */
.cvp-sel { position: relative; }
.cvp-sel > select { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0 !important; pointer-events: none !important; }
.cvp-sel__bt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer;
  font: inherit; font-size: .95rem; color: var(--cvp-tinta); background: #fff; border: 1.5px solid var(--cvp-linha); border-radius: 12px;
  padding: 11px 14px; min-height: 44px; transition: border-color .2s, box-shadow .55s var(--mola), transform .55s var(--mola) !important; }
.cvp-sel__bt:hover { border-color: #b9cde3; }
.cvp-sel__bt:focus-visible, .cvp-sel.aberto .cvp-sel__bt { outline: none; border-color: var(--cvp-azul); box-shadow: 0 0 0 4px rgba(0,92,169,.12); }
.cvp-sel__bt:disabled { opacity: .55; cursor: not-allowed; }
.cvp-sel__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvp-sel__bt::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: -4px 2px 0 0; border-right: 2px solid var(--cvp-suave); border-bottom: 2px solid var(--cvp-suave);
  transform: rotate(45deg); transition: transform .6s var(--mola), border-color .2s; }
.cvp-sel.aberto .cvp-sel__bt::after { transform: translateY(4px) rotate(225deg); border-color: var(--cvp-azul); }
html body .cvp-sel__bt:not(:disabled):hover, html body .cvp-sel__bt:not(:disabled):active { transform: none; }
.cvp-sel__lista { position: fixed; z-index: 700; background: #fff; border: 1px solid var(--cvp-linha); border-radius: 16px; padding: 6px;
  box-shadow: var(--cvp-sombra-3); max-height: 300px; overflow: auto; transform-origin: top center;
  animation: mola-caixa var(--mola-dur) var(--mola) both, surge .16s ease-out both; font-family: 'Source Sans 3', system-ui, sans-serif; }
.cvp-sel__lista.acima { transform-origin: bottom center; animation-name: mola-caixa-cima, surge; }
.cvp-sel__op { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; color: var(--cvp-tinta-2); font-size: .93rem; }
.cvp-sel__op i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; }
.cvp-sel__op:hover, .cvp-sel__op.foco { background: var(--cvp-azul-50); color: var(--cvp-azul); }
.cvp-sel__op.marcada { background: var(--cvp-laranja-50); color: #b45f00; font-weight: 600; }
.cvp-sel__op.marcada i { opacity: 1; }
.cvp-sel__op.desligada { opacity: .45; cursor: not-allowed; }
.cvp-sel__grupo { padding: 8px 12px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cvp-fraco); }

/* ---------- card de descontos da home: cartão do parceiro no lugar do box cinza ---------- */
html body .benef__tile.bnf-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  text-align: left; padding: 14px 14px 13px; border-radius: 16px; border: 1.5px solid var(--cvp-linha); background: #fff; color: var(--cvp-tinta);
  text-decoration: none; transition: transform .55s var(--mola), border-color .2s, box-shadow .25s; }
html body .benef__tile.bnf-tile::after { content: ""; position: absolute; right: -16px; bottom: -18px; width: 74px; height: 74px; opacity: .08;
  background: url(x.svg) center / contain no-repeat; transform: rotate(-12deg); }
html body .benef__tile.bnf-tile:hover { transform: translateY(-3px); border-color: #ffd28a; box-shadow: 0 16px 30px -18px rgba(243,146,0,.7); }
html body .benef__tile.bnf-tile small { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cvp-suave); }
html body .benef__tile.bnf-tile .bnf-off { font-size: 1.45rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--cvp-laranja-600); }
html body .benef__tile.bnf-tile .bnf-off--longo { font-size: 1.12rem; }
html body .benef__tile.bnf-tile b { font-size: .98rem; font-weight: 700; color: var(--cvp-azul); }
html body .benef__slide:nth-child(odd) .bnf-tile:first-child, html body .benef__slide:nth-child(even) .bnf-tile:last-child { border-top: 4px solid var(--cvp-laranja); }
html body .benef__slide:nth-child(odd) .bnf-tile:last-child, html body .benef__slide:nth-child(even) .bnf-tile:first-child { border-top: 4px solid var(--cvp-azul); }

/* ---------- login: "Prevenir vale muito! E aqui vale pontos!" sobre a parede de X ---------- */
.cvp-slogan { position: absolute; left: clamp(28px, 5vw, 88px); z-index: 2; pointer-events: none; opacity: 0; visibility: hidden; }
.cvp-slogan.ok { opacity: 1; visibility: visible; animation: mola-sobe var(--mola-dur) var(--mola) both, surge .35s ease-out both; animation-delay: .35s; }
.cvp-slogan::before { content: ""; position: absolute; inset: -40px -70px -40px -60px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,32,72,.72), rgba(0,32,72,.4) 55%, rgba(0,32,72,0)); filter: blur(8px); }
.cvp-slogan h2 { margin: 0; color: #fff; line-height: 1; letter-spacing: -.035em; text-shadow: 0 2px 18px rgba(0,25,60,.55), 0 1px 2px rgba(0,25,60,.5); }
.cvp-slogan .l1 { display: block; font-size: clamp(2.6rem, 4.6vw, 4.6rem); font-weight: 800; }
.cvp-slogan .l2 { display: block; margin-top: .28em; font-size: clamp(1.5rem, 2.5vw, 2.5rem); font-weight: 700; }
.cvp-slogan em { font-style: normal; display: inline-block; padding: .02em .32em .08em; margin-left: .06em; border-radius: .32em; background: #f39200; color: #fff;
  text-shadow: none; box-shadow: 0 14px 30px -12px rgba(243,146,0,.95); }
@media (max-width: 899px) { .cvp-slogan { display: none; } }

/* ---------- painel: o mesmo respiro (16px, igual ao espaço entre colunas) entre todos os cartões ---------- */
html body.cvp-painel .content > .card, html body.cvp-painel .content > section, html body.cvp-painel .content > .dpane,
html body.cvp-painel .content > .grid-kpi, html body.cvp-painel .content > .kgrid, html body.cvp-painel .content > .grid,
html body.cvp-painel .dpane > * { margin-bottom: 16px; }
html body.cvp-painel .dpane > *:last-child, html body.cvp-painel .content > *:last-child { margin-bottom: 0; }

/* ---------- leitura: nada de texto cinza ou escuro direto sobre o azul; cinzas mais firmes no branco ---------- */
/* indicadores do NPS (e qualquer .kpi2 sem estilo próprio) viram cartões brancos */
html body .kpi2 { background: #fff; border: 1px solid var(--cvp-linha); border-radius: 16px; padding: 16px 18px; box-shadow: var(--cvp-sombra-1); }
html body .kpi2 .lbl { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cvp-suave); margin-bottom: 6px; }
html body .kpi2 .sub { font-size: .82rem; color: var(--cvp-suave); }
/* títulos, dicas e contadores soltos no fundo azul (fora de cartões e janelas) */
html[data-tema="escuro"] body .content :is(h1, h2, h3, h2.sec, .sec):not(:is(.card, .mo, .mo__box, .kpi, .kpi2, .icard, .ge-k, .gv-k, .cvp-jan, .ui-card, .rz, .tbl) *) { color: #fff !important; }
html[data-tema="escuro"] body .content :is(p.hint, .hint, .page-actions > span, .page-actions .muted, .muted):not(:is(.card, .mo, .mo__box, .kpi, .kpi2, .icard, .ge-k, .gv-k, .cvp-jan, .ui-card, .rz, .tbl) *) { color: rgba(255,255,255,.86) !important; }
html[data-tema="escuro"] body .content :is(p.hint, .hint):not(:is(.card, .mo, .mo__box, .kpi, .kpi2, .icard, .cvp-jan, .ui-card, .tbl) *) b { color: #fff !important; }
/* dias de fora do mês no calendário: cinza legível */
html body .cal-dia > div { color: var(--cvp-suave); }

/* leitura (2ª rodada): app */
html[data-tema="escuro"] body .reg, html[data-tema="escuro"] body .reg a { color: rgba(255,255,255,.88) !important; }
html[data-tema="escuro"] body .rz-bar h1 { color: #fff !important; }
html[data-tema="escuro"] body .rz-saldo { color: rgba(255,255,255,.9) !important; }
html[data-tema="escuro"] body .rz-saldo b { color: #ffd28a !important; }
html body .rz__b .btn.off, html body .vc-pe .btn:disabled, html body .cvp-jan__acoes .btn:disabled { color: #5d6b80 !important; background: #e3e9f1 !important; box-shadow: none !important; }
html body .vc-cat-experiencias { background: linear-gradient(135deg, #f39200, #c96400) !important; }
html body .drawer__nav a.in-bottombar[href="registrar-venda.html"] { color: var(--cvp-laranja-600); }
/* texto branco sobre o laranja da marca: sombra suave para firmar a leitura sem mudar a cor */
html body :is(.hdr, .banner, .hq__head, .ead-chip, .ead-pts, .vc-saldo, .ead-resumo > div:last-child, .ge-k--lar, .ex-sum, .ex-saldo, .pf-hero__top, .pf-ident,
  .vc-cat-alimentacao, .vc-cat-experiencias, .rv-btn--foto, .cup-top, .cvp-slogan em, .ead-res__selo, .ead-filtros button.on, .vc-filtros button.on) { text-shadow: 0 1px 2px rgba(110,45,0,.3); }

/* câmera ao vivo do Registrar venda (cvp-camera.js) */
.cam-capa .cvp-jan { width: min(720px, calc(100vw - 24px)); }
.cam-palco { position: relative; border-radius: 16px; overflow: hidden; background: #00264a; aspect-ratio: 4 / 3; }
.cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-moldura { position: absolute; inset: 9% 14%; border: 2px dashed rgba(255,255,255,.85); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,20,50,.35); pointer-events: none; }
.cam-msg { position: absolute; left: 16px; right: 16px; bottom: 14px; margin: 0; color: #fff; font-weight: 600; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.cam-msg:empty { display: none; }
@media (max-width: 560px) { .cam-palco { aspect-ratio: 3 / 4; } .cam-moldura { inset: 10% 8%; } }