:root{
  --surface:#16181d;
  --surface-2:#1f2229;
  --line:#2a2e36;
  --text:#f2f4f7;
  --muted:#aab0ba;
  --gold:#ffd21a;
  --gold-2:#39d11f;
  --gold-soft:#ffe27a;
  --btn-gold:#ffd21a;
  --btn-gold-2:#e08a00;
  --emerald:#39d11f;
  --navy-900:#0e0f12;
  --navy-800:#16181d;
  --navy-700:#1f2229;
  --navy-600:#272b32;
}

/* ===== Base oscura ===== */
body{
  background:radial-gradient(120% 120% at 80% -10%,#10301a 0%,#0e0f12 55%);
  color:var(--text);
}

/* Header */
.hdr{
  background:rgba(14,15,18,.9);
  border-bottom:1px solid #23262d;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
}

/* ===== Marca: mascota + nombre ===== */
.brand-logo{
  content:url("assets/logo-super-icon.png");
  height:44px;
  width:44px;
  border-radius:50%;
  border:2px solid #39d11f;
  box-shadow:0 0 0 2px rgba(57,209,31,.15),0 0 16px rgba(57,209,31,.25);
}
.brand{display:flex;align-items:center;gap:10px}
.brand::after{
  content:"Super Sorteos RD";
  font-family:'Sora',sans-serif;
  font-weight:800;
  font-size:19px;
  letter-spacing:.2px;
  color:#f2f4f7;
}

/* ===== Navegacion ===== */
.nav{background:#0e0f12}
.nav a{color:var(--muted)}
.nav a:hover{color:#f2f4f7}
.nav a.on{color:var(--gold)}

/* ===== Tipografia de acento ===== */
.sec-tag,.eyebrow{color:var(--gold)}
.hero-stats b,.cd .u b,.pill-gold{color:var(--gold)}
.pill-gold{
  background:rgba(255,210,26,.10);
  border:1px solid rgba(255,210,26,.30);
}

/* Texto con degradado */
.grad{
  background:linear-gradient(120deg,#39d11f,#ffd21a 70%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ===== Botones ===== */
.btn-primary{
  background:linear-gradient(135deg,var(--btn-gold),var(--btn-gold-2));
  color:#1a1300;
  border:none;
  box-shadow:0 6px 18px rgba(255,210,26,.18);
}
.btn-primary:hover{filter:brightness(1.06)}

.btn-ghost{
  background:#16181d;
  color:#f2f4f7;
  border:1px solid #2a2e36;
}
.btn-ghost:hover{
  background:#1f2229;
  border-color:#39d11f;
  color:#f2f4f7;
}

.nav .vbtn,.brand .lg{
  background:linear-gradient(135deg,var(--btn-gold),var(--btn-gold-2));
  color:#1a1300;
}

/* ===== Cards y superficies ===== */
.card,.modal,.panel{
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text);
}
.card-2,.subtle{background:var(--surface-2)}

/* ===== Inputs ===== */
input,textarea,select{
  background:#1f2229;
  color:#f2f4f7;
  border:1px solid #2a2e36;
}
input::placeholder,textarea::placeholder{color:#7c828c}
input:focus,textarea:focus,select:focus{
  border-color:#39d11f;
  outline:none;
  box-shadow:0 0 0 3px rgba(57,209,31,.18);
}

/* ===== Cantidad / pills ===== */
.qpill{
  background:#1f2229;
  color:#f2f4f7;
  border:1px solid #2a2e36;
}
.qpill.on{
  background:linear-gradient(135deg,#39d11f,#0d7a13);
  color:#04210a;
  border-color:transparent;
  box-shadow:0 4px 14px rgba(57,209,31,.30);
}

/* ===== Total / progreso ===== */
.total-box{
  background:linear-gradient(120deg,rgba(57,209,31,.16),transparent);
  border:1px solid rgba(57,209,31,.22);
}
.prog{background:#272b32}
.prog span{
  background:linear-gradient(90deg,var(--btn-gold),var(--btn-gold-2));
}

/* +gratis verde */
.free,.plus-free{color:var(--emerald)}

/* ===== Footer ===== */
footer,.footer{
  background:#0e0f12;
  color:var(--muted);
  border-top:1px solid #23262d;
}
footer a,.footer a{color:#cfd3da}
footer a:hover,.footer a:hover{color:#39d11f}

/* ===== Lineas / divisores ===== */
hr,.divider{border-color:var(--line)}

/* WhatsApp flotante: se conserva verde oficial */
.wa-float{background:#25d366}

/* fix tema oscuro: inputs en foco (resplandor VERDE de marca, no dorado) */
.field input:focus,.field select:focus,.field textarea:focus{background:#1f2229;color:#f2f4f7;border-color:#39d11f;box-shadow:0 0 0 3px rgba(57,209,31,.20)}
.field.ic:focus-within .fic,.field.ic:focus-within label{color:#39d11f}
.pay .pic,#comp-preview .pv-thumb{background:#1f2229;border-color:#2a2e36}
.cobox,.lookup,.result,.np-head{background:var(--surface-2);border-color:var(--line)}
/* A11y: contraste AA de pills/estados y placeholders sobre el fondo oscuro (heredaban color del tema claro) */
.pill-live{color:#fb7185}
.pill-soon,.status.s-ok{color:#4ade80}
.status.s-pend,.tnum{color:#ffcc33}
input::placeholder,textarea::placeholder,.field input::placeholder{color:#9aa1ab;opacity:1}