/* =========================================================
   RASPA Uai — THEMES (nomes originais: neon, classic, pastel, dark)
   ========================================================= */

/* ---------- Fallback/Base (compartilhado) ---------- */
:root{
  /* Neutros */
  --bg-0:#070b14;
  --bg-1:#0b1220;
  --card:#0f172a;
  --stroke:#273248;
  --border:var(--stroke);
  --text:#e6edf6;
  --muted:#9db0c4;

  /* Marca base */
  --brand:#3b82f6;
  --brand2:#22d3ee;
  --primary:#3b82f6;
  --primary-contrast:#ffffff;

  /* Charts */
  --chart-grid: rgba(255,255,255,.12);
  --chart-line-1:#22d3ee;
  --chart-line-2:#8b5cf6;

  /* Nav glass */
  --nav-glass-top: rgba(7,12,21,.85);
  --nav-glass-mid: rgba(7,12,21,.55);

  /* FX “vivo” (gradientes globais) */
  --vivo-a: var(--brand);
  --vivo-b: var(--brand2);
  --vivo-c: var(--primary);
  --vivo-sheen: color-mix(in oklab, var(--text) 6%, transparent);

  /* Foco */
  --ring: 0 0 0 2px rgba(96,165,250,.35), 0 8px 30px rgba(0,0,0,.35);

  /* Bootstrap map (opcional) */
  --bs-body-bg: var(--bg-1);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-card-bg: var(--card);
  --bs-card-color: var(--text);
  --bs-card-border-color: var(--border);
  --bs-heading-color: var(--text);
  --bs-secondary-color: var(--muted);
  --bs-link-color: var(--primary);
  --bs-primary: var(--primary);
  --bs-success:#22c55e; --bs-info:#0ea5e9; --bs-warning:#f59e0b; --bs-danger:#ef4444;
}

/* =========================================================
   1) NEON (dark) — botões azul-neon; links do extrato brancos
   ========================================================= */
html[data-theme="neon"], body[data-theme="neon"]{
  --bg-0:#060914;
  --bg-1:#0a1020;
  --card:#0c1428;
  --stroke:#1c2b45;
  --border:var(--stroke);
  --text:#eaf6ff;
  --muted:#9cc5ff;

  --brand:#3b82f6;      /* azul neon */
  --brand2:#22d3ee;     /* ciano neon */
  --primary:#3b82f6;
  --primary-contrast:#ffffff; /* texto dos botões = branco */

  --chart-grid: rgba(255,255,255,.14);
  --chart-line-1:#22d3ee;
  --chart-line-2:#a78bfa;

  --nav-glass-top: rgba(6,9,20,.88);
  --nav-glass-mid: rgba(6,9,20,.56);

  --vivo-a:#3b82f6;
  --vivo-b:#22d3ee;
  --vivo-c:#39ff88;     /* laser nos acentos */
  --vivo-sheen: color-mix(in oklab, var(--text) 8%, transparent);

  --ring: 0 0 0 2px rgba(34,211,238,.35), 0 8px 30px rgba(0,0,0,.38);
}

/* =========================================================
   2) CLASSIC (branco) — texto preto, botões legíveis
   ========================================================= */
html[data-theme="classic"], body[data-theme="classic"]{
  --bg-0:#f3f4f6;
  --bg-1:#ffffff;
  --card:#ffffff;
  --stroke:#e5e7eb;
  --border:var(--stroke);
  --text:#111827;
  --muted:#6b7280;

  --brand:#2563eb;      /* azul forte */
  --brand2:#7c3aed;     /* violeta como B do degradê */
  --primary:#2563eb;
  --primary-contrast:#ffffff;

  --chart-grid: rgba(0,0,0,.08);
  --chart-line-1:#2563eb;
  --chart-line-2:#7c3aed;

  --nav-glass-top: rgba(255,255,255,.85);
  --nav-glass-mid: rgba(255,255,255,.65);

  --vivo-a:#2563eb;
  --vivo-b:#7c3aed;
  --vivo-c:#22c55e;     /* verdinho para respiro */
  --vivo-sheen: color-mix(in oklab, #000 6%, transparent);

  --ring: 0 0 0 2px rgba(37,99,235,.25), 0 8px 20px rgba(0,0,0,.08);
}

/* =========================================================
   3) PASTEL (girl) — rosa/lilás, contraste ok
   ========================================================= */
html[data-theme="pastel"], body[data-theme="pastel"]{
  --bg-0:#fdf2f8;      /* rosa bem claro */
  --bg-1:#fffefe;
  --card:#ffffff;
  --stroke:#f8d5e8;
  --border:var(--stroke);
  --text:#3a3a3a;
  --muted:#6b6b6b;

  --brand:#ec4899;      /* pink */
  --brand2:#8b5cf6;     /* lilás */
  --primary:#ec4899;
  --primary-contrast:#ffffff;

  --chart-grid: rgba(0,0,0,.06);
  --chart-line-1:#ec4899;
  --chart-line-2:#8b5cf6;

  --nav-glass-top: rgba(255,255,255,.85);
  --nav-glass-mid: rgba(255,255,255,.65);

  --vivo-a:#ec4899;
  --vivo-b:#8b5cf6;
  --vivo-c:#22c55e;     /* ping de verde p/ vivo */
  --vivo-sheen: color-mix(in oklab, #000 6%, transparent);

  --ring: 0 0 0 2px rgba(236,72,153,.25), 0 8px 20px rgba(0,0,0,.06);
}

/* =========================================================
   4) DARK (flamenguista) — preto/vermelho agressivo
   (mantendo o nome "dark" como você pediu)
   ========================================================= */
html[data-theme="dark"], body[data-theme="dark"]{
  --bg-0:#07080a;       /* quase preto */
  --bg-1:#0b0c10;
  --card:#0f1116;
  --stroke:#1f232b;
  --border:var(--stroke);
  --text:#f5f7fb;       /* branco azulado p/ nitidez */
  --muted:#cbd5e1;      /* cinza neutro */

  --brand:#ef4444;      /* vermelho Flamengo */
  --brand2:#991b1b;     /* vinho */
  --primary:#ef4444;
  --primary-contrast:#0a0a0a; /* texto nos botões: quase preto */

  --chart-grid: rgba(255,255,255,.10);
  --chart-line-1:#ef4444;
  --chart-line-2:#f59e0b; /* dourado de acento */

  --nav-glass-top: rgba(11,12,16,.88);
  --nav-glass-mid: rgba(11,12,16,.58);

  --vivo-a:#ef4444;     /* gradiente vermelho */
  --vivo-b:#7f1d1d;     /* vinho */
  --vivo-c:#f59e0b;     /* dourado em selos/borda */
  --vivo-sheen: color-mix(in oklab, var(--text) 8%, transparent);

  --ring: 0 0 0 2px rgba(239,68,68,.35), 0 8px 28px rgba(0,0,0,.35);
}

/* =========================================================
   Fundo & tipografia (todos temas)
   ========================================================= */
body.bg-app{
  background:
    radial-gradient(1200px 800px at -10% -10%, color-mix(in oklab, var(--vivo-a) 18%, transparent), transparent 60%),
    radial-gradient(900px 700px  at 118% -28%, color-mix(in oklab, var(--vivo-b) 16%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  color:var(--text);
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================================================
   Componentes base
   ========================================================= */
.nav-glass{
  background: linear-gradient(180deg, var(--nav-glass-top), var(--nav-glass-mid));
  border-bottom:1px solid color-mix(in oklab, var(--text) 6%, transparent);
  backdrop-filter: blur(8px);
}
.navbar .nav-link{ color:var(--muted) }
.navbar .nav-link:hover, .navbar .nav-link:focus{ color:var(--text) }
.brand-accent{ color: var(--brand) }

/* Cards / Modais */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.15);
}
.modal-content{
  background:var(--card) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
}

/* Tabela */
.table{ color:var(--text) }
.table thead th{ color:var(--muted); border-color:var(--border) !important }
.table td, .table th{ border-color:var(--border) !important }

/* ===== FIX: links do extrato/tabelas sempre brancos e legíveis */
.table a:not(.btn){
  color: var(--text) !important;
  font-weight: 700;
  text-decoration: underline transparent;
  text-underline-offset: 2px;
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
}
.table a:not(.btn):hover{
  color:#fff !important;
  text-decoration-color:#fff;
}
.table a:not(.btn):visited{ color: var(--text) !important }

/* Forms */
.form-control, .form-select, .input-group-text{
  background-color: color-mix(in oklab, var(--text) 4%, var(--bg-0)) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  border-radius:12px;
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand) !important;
  box-shadow: var(--ring) !important;
  outline: none !important;
}
.form-control::placeholder{
  color: color-mix(in oklab, var(--text) 45%, var(--bg-0)) !important;
}

/* Badges / Progress */
.badge-soft{
  background: rgba(148,163,184,.12);
  border:1px solid rgba(148,163,184,.25);
  color:var(--text);
}
.progress{ background: color-mix(in oklab, var(--text) 8%, transparent) !important; height:.6rem }
.progress-bar{ background: linear-gradient(90deg, var(--vivo-a), var(--vivo-b)) !important }

/* Botões */
.btn-cta, .btn.btn-primary{
  background: linear-gradient(180deg, var(--vivo-a), var(--vivo-b)) !important;
  border-color: transparent !important;
  color: var(--primary-contrast) !important;
  font-weight:700;
  border-radius:12px;
  box-shadow:0 10px 24px color-mix(in oklab, var(--vivo-a) 40%, black);
}
.btn-cta:hover, .btn.btn-primary:hover{ filter: brightness(1.06) }

.btn-ghost, .btn.btn-outline-light, .btn.btn-outline-secondary{
  background:transparent;
  border:1px solid color-mix(in oklab, var(--vivo-a) 18%, var(--stroke));
  color:var(--text);
  border-radius:12px;
}
.btn-ghost:hover, .btn.btn-outline-light:hover, .btn.btn-outline-secondary:hover{
  background: var(--vivo-sheen);
  border-color: color-mix(in oklab, var(--vivo-c) 28%, var(--stroke));
}

/* =========================================================
   FX VIVO — áreas chave
   ========================================================= */
body.bg-app .hero,
body.bg-app .header-card{
  background:
    radial-gradient(900px 400px at 100% 0%,  color-mix(in oklab, var(--vivo-c) 14%, transparent), transparent 60%),
    radial-gradient(900px 400px at 0%   100%,color-mix(in oklab, var(--vivo-b) 12%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in oklab, var(--vivo-a) 22%, var(--card)),
                          color-mix(in oklab, var(--card) 88%, transparent));
  border:1px solid color-mix(in oklab, var(--vivo-a) 20%, var(--stroke));
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  color:var(--text);
  border-radius:16px;
}

/* Trust bar */
body.bg-app .trustbar{
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--vivo-b) 10%, transparent),
                           color-mix(in oklab, var(--vivo-a) 8%, transparent)),
    var(--card);
  border:1px solid color-mix(in oklab, var(--vivo-b) 18%, var(--stroke));
  border-radius:12px;
  padding:10px 14px;
}

/* Cards especiais (produto/ref) */
body.bg-app .card,
body.bg-app .card-product,
body.bg-app .ref-card{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--vivo-a) 10%, transparent),
      color-mix(in oklab, var(--vivo-b) 8%, transparent)),
    var(--card) !important;
  border-color: color-mix(in oklab, var(--vivo-a) 16%, var(--stroke)) !important;
}
body.bg-app .card:hover,
body.bg-app .card-product:hover,
body.bg-app .ref-card:hover{
  border-color: color-mix(in oklab, var(--vivo-c) 26%, var(--stroke)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

/* Modais */
body.bg-app .modal-content{
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--vivo-b) 8%, transparent),
      transparent),
    var(--card) !important;
  border-color: color-mix(in oklab, var(--vivo-a) 14%, var(--stroke)) !important;
}
body.bg-app .modal-header,
body.bg-app .modal-footer{
  border-color: color-mix(in oklab, var(--vivo-a) 16%, var(--stroke));
}

/* Produto: mídia e selos */
body.bg-app .product-media{
  background: linear-gradient(180deg, var(--bg-0), color-mix(in oklab, var(--vivo-b) 10%, var(--bg-1)));
}
body.bg-app .flag-bestseller{
  background: color-mix(in oklab, #ff5600 18%, transparent);
  border-color: color-mix(in oklab, #ff5600 40%, transparent);
}
body.bg-app .flag-boost{
  background: color-mix(in oklab, var(--vivo-b) 20%, transparent);
  border-color: color-mix(in oklab, var(--vivo-b) 45%, transparent);
}