/* ================================================================
   PRODE MUNDIAL 2026 — Voucheroo public design system
   Basado en app/hub.php + styleguide. Vida útil 2-3 meses.
   ================================================================ */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { background:#0c0c0e; color:#fff; font-family:'Inter',-apple-system,sans-serif; }
body { min-height:100vh; min-height:100dvh; -webkit-overflow-scrolling:touch; }

a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea, button { font-family:inherit; }

/* ============================================================
   APP SHELL — fondo + container
   ============================================================ */
.voo-app {
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  position:relative; overflow-x:hidden;
}
.voo-bg {
  position:fixed; inset:0; z-index:0; overflow:hidden;
}
.voo-bg img {
  width:100%; height:100%; object-fit:cover;
  filter:blur(6px) brightness(0.45);
  transform:scale(1.08);
}
.voo-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 100%);
}
.voo-bg.no-image {
  background:linear-gradient(135deg,#1f1f1f 0%,#2d2d2d 100%);
}

.voo-content {
  position:relative; z-index:2;
  width:100%; max-width:480px;
  margin:0 auto;
  flex:1; display:flex; flex-direction:column;
}

/* ============================================================
   HEADER — full-width sticky con contenido centrado
   ============================================================ */
.voo-header {
  position:sticky; top:0; z-index:10;
  width:100%;
  background:rgba(12,12,14,0.6);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.voo-header-inner {
  max-width:480px; margin:0 auto;
  padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.voo-header .icon-btn {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.16);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; flex-shrink:0;
  transition:all .2s;
}
.voo-header .icon-btn:hover { background:rgba(255,255,255,0.22); }
.voo-header .brand-block {
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:3px; min-width:0;
}
.voo-header .brand-logo {
  height:24px; max-width:90px; object-fit:contain;
  filter:brightness(0) invert(1); opacity:0.95;
}
.voo-header .brand-name {
  font-size:9.5px; font-weight:700;
  letter-spacing:1.8px;
  color:rgba(255,255,255,0.75);
  text-transform:uppercase;
  white-space:nowrap;
}
.voo-header .title {
  font-size:15px; font-weight:600;
  flex:1; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.voo-header .spacer { width:40px; flex-shrink:0; }

/* Pill "Ingresar" (header sin login) */
.btn-header-login {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  border-radius:50px;
  background:rgba(255,255,255,0.97);
  color:#1a1a1a;
  font-size:13px; font-weight:600;
  flex-shrink:0;
  transition:all .2s;
}
.btn-header-login:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,0.25); }
.btn-header-login i { font-size:15px; }

/* Link "ir al hub" en footer */
.voo-back-hub {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px;
  padding:8px 14px;
  border-radius:50px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.7);
  font-size:12px; font-weight:500;
  transition:all .2s;
}
.voo-back-hub:hover { background:rgba(255,255,255,0.14); color:#fff; }
.voo-back-hub i { font-size:14px; }

/* ============================================================
   TAB TOGGLE — pills horizontales con scroll
   ============================================================ */
.voo-tabs {
  display:flex; gap:4px; padding:5px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:50px;
  margin:20px 20px 12px;
  backdrop-filter:blur(10px);
  overflow-x:auto; scrollbar-width:none;
}
.voo-tab {
  flex:1; text-align:center; justify-content:center;
}
.voo-tabs::-webkit-scrollbar { display:none; }
.voo-tab {
  padding:9px 18px; border-radius:50px;
  background:transparent; border:none;
  color:rgba(255,255,255,0.5);
  font-size:13px; font-weight:500;
  white-space:nowrap; flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none;
  transition:all .2s;
}
.voo-tab:hover { color:rgba(255,255,255,0.85); }
.voo-tab.active {
  background:rgba(255,255,255,0.97);
  color:#1a1a1a; font-weight:600;
  box-shadow:0 2px 12px rgba(0,0,0,0.25);
}

/* ============================================================
   BODY scroll area + footer
   ============================================================ */
.voo-body {
  flex:1; padding:20px 20px 40px;
}
.voo-footer {
  text-align:center; padding:24px 20px 24px;
  font-size:12px; color:rgba(255,255,255,0.45);
  position:relative; z-index:2;
}
.voo-footer a { color:rgba(255,255,255,0.7); font-weight:600; }
.voo-footer a:hover { color:#fff; }
.voo-social {
  display:flex; justify-content:center; gap:14px; margin-top:16px;
}
.voo-social a {
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px;
  backdrop-filter:blur(8px);
  transition:all .3s ease;
}
.voo-social a:hover {
  background:rgba(255,255,255,0.22);
  transform:scale(1.08);
}

/* ============================================================
   BOTONES PILL
   ============================================================ */
.btn-pill {
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:16px 28px;
  border:none; border-radius:50px;
  font-size:15px; font-weight:600;
  width:100%;
  transition:all .25s ease;
}
.btn-pill.primary {
  background:linear-gradient(135deg,#ffd166,#f0b429);
  color:#231a05;
  font-weight:700;
  box-shadow:0 4px 18px rgba(255,209,102,0.35);
}
.btn-pill.primary:hover {
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 26px rgba(255,209,102,0.5);
}
.btn-pill.secondary {
  background:rgba(255,209,102,0.10);
  color:#ffd166; font-weight:600;
  border:1px solid rgba(255,209,102,0.45);
  backdrop-filter:blur(8px);
}
.btn-pill.secondary:hover {
  background:rgba(255,209,102,0.2);
  transform:translateY(-2px);
}
.btn-pill.disabled, .btn-pill:disabled {
  opacity:.4; cursor:not-allowed; pointer-events:none;
}
.btn-pill.danger-text { color:#ef4444; }
.btn-pill i { font-size:18px; }

.btn-chip {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 18px;
  border-radius:50px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;
  font-size:13px; font-weight:500;
  backdrop-filter:blur(8px);
  transition:all .2s;
}
.btn-chip:hover { background:rgba(255,255,255,0.22); }

/* Fila de navegación — link tipo tarjeta (no pill, no parece buscador) */
.nav-row {
  display:flex; align-items:center; gap:14px;
  width:100%;
  margin:22px 0 18px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(8px);
  color:#fff;
  transition:all .2s;
}
.nav-row:hover {
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,209,102,0.4);
  transform:translateY(-1px);
}
.nav-row-icon {
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:12px;
  background:rgba(255,209,102,0.14);
  color:#ffd166;
  font-size:19px;
}
.nav-row-text {
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
  text-align:left;
}
.nav-row-text strong { font-size:14px; font-weight:600; }
.nav-row-text small { font-size:12px; color:rgba(255,255,255,0.55); }
.nav-row-chevron {
  flex:0 0 auto;
  font-size:20px;
  color:rgba(255,255,255,0.45);
}

/* ============================================================
   INPUTS — glass dark, no pill
   ============================================================ */
.voo-input {
  display:block; width:100%;
  padding:16px 20px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:16px;
  color:#fff; font-size:15px;
  transition:all .2s;
}
.voo-input::placeholder { color:rgba(255,255,255,0.4); }
.voo-input:focus {
  outline:none;
  border-color:rgba(255,255,255,0.45);
  background:rgba(255,255,255,0.12);
}
.voo-input.error {
  border-color:#ef4444;
  background:rgba(239,68,68,0.08);
}
/* El popup nativo del <select> usa fondo claro: forzamos texto oscuro en las
   opciones para que sean legibles (sino quedan blanco sobre blanco). */
select.voo-input option,
select.voo-input optgroup {
  color:#111827;
  background:#ffffff;
}
select.voo-input optgroup { font-weight:700; }
.voo-input-wrap { position:relative; margin-bottom:14px; }
.voo-input-wrap .input-icon {
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,0.5); font-size:18px; cursor:pointer;
}
.voo-input-wrap .input-icon.left {
  left:18px; right:auto; cursor:default;
}
.voo-input-wrap .voo-input.has-icon-left { padding-left:48px; }
.voo-input-error-msg {
  display:block; font-size:12px; color:#ef4444;
  margin:-8px 4px 12px;
}
.voo-label {
  display:block; font-size:12px; font-weight:600;
  color:rgba(255,255,255,0.7);
  margin:0 4px 6px; letter-spacing:0.2px;
}
.voo-select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' opacity='0.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:18px;
  padding-right:48px;
}

/* Checkbox custom */
.voo-check {
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:rgba(255,255,255,0.7);
  margin:14px 4px 18px; line-height:1.5;
  cursor:pointer;
}
.voo-check input[type=checkbox] { display:none; }
.voo-check .box {
  width:20px; height:20px; border-radius:6px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.04);
  flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.voo-check input:checked + .box {
  background:#ffd166; border-color:#ffd166;
}
.voo-check input:checked + .box::after {
  content:'\2713'; color:#1a1a1a; font-size:13px; font-weight:700;
}
.voo-check a { color:#fff; text-decoration:underline; }

.inline-link {
  text-align:center; font-size:13px;
  color:rgba(255,255,255,0.55);
  margin-top:20px;
}
.inline-link a { color:#fff; text-decoration:underline; font-weight:600; margin-left:4px; }

/* ============================================================
   BANDERAS — flagcdn vía flag_url() helper
   ============================================================ */
.flag-img {
  width:28px; height:20px;
  object-fit:cover;
  border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,0.35);
  flex-shrink:0;
  display:inline-block;
  vertical-align:middle;
}
.flag-img.lg { width:42px; height:30px; border-radius:5px; }
.flag-img.sm { width:22px; height:16px; border-radius:2px; }
.flag-img.xs { width:18px; height:13px; border-radius:2px; }

/* ============================================================
   CARDS DE PARTIDO
   ============================================================ */
.card-match {
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; padding:22px 20px;
  margin-bottom:16px;
  backdrop-filter:blur(8px);
}
.card-match .meta-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:50px;
  font-size:11px; font-weight:600; letter-spacing:0.3px;
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.7);
  margin-bottom:14px;
}
.card-match .meta-chip.done {
  background:rgba(16,185,129,0.15); color:#10b981;
}
.card-match .meta-chip.live {
  background:rgba(239,68,68,0.15); color:#ef4444;
}
.card-match .teams {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:16px;
}
.card-match .team {
  display:flex; align-items:center; gap:10px;
  font-size:14px; font-weight:600;
  flex:1; min-width:0;
}
.card-match .team.right { justify-content:flex-end; text-align:right; }
.card-match .team span:not(.flag-img) {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-match .vs {
  font-size:11px; color:rgba(255,255,255,0.4);
  font-weight:500; padding:0 4px;
}

.score-row {
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-bottom:14px;
}
.score-input {
  width:48px; height:56px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:14px;
  text-align:center;
  font-size:22px; font-weight:700; color:#fff;
  transition:all .2s;
  -moz-appearance:textfield; appearance:textfield;
}
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.score-input:focus {
  outline:none; border-color:#ffd166;
  box-shadow:0 0 0 3px rgba(255,209,102,0.15);
}
.score-input::placeholder { color:rgba(255,255,255,0.25); }
.score-dash {
  color:rgba(255,255,255,0.4); font-weight:500; padding:0 4px;
}

.match-meta {
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; color:rgba(255,255,255,0.5);
  margin-bottom:14px; gap:8px;
}
.match-meta.warn { color:#ffd166; }
.match-meta.closed { color:#ef4444; }
.match-meta i { font-size:14px; }

/* Resultado real */
.result-final {
  display:flex; align-items:center; justify-content:center;
  gap:14px; font-size:32px; font-weight:700;
  margin:10px 0 16px;
}
.result-final .score { min-width:30px; text-align:center; }
.result-final .flag-img { width:42px; height:30px; border-radius:5px; }
.result-final .dash {
  color:rgba(255,255,255,0.3); font-size:18px; font-weight:500;
}

.pronostico-line {
  font-size:13px; color:rgba(255,255,255,0.55);
  margin-bottom:12px; text-align:center;
}
.pronostico-line b { color:#fff; font-weight:600; }

/* Chips de puntos */
.chip-points {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:50px;
  font-size:13px; font-weight:600;
}
.chip-points.exact {
  background:rgba(255,209,102,0.18);
  color:#ffd166;
  border:1px solid rgba(255,209,102,0.4);
}
.chip-points.winner {
  background:rgba(255,209,102,0.1);
  color:rgba(255,209,102,0.85);
}
.chip-points.zero {
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.4);
}

/* ============================================================
   EN VIVO — card inmersiva con ring de minuto
   ============================================================ */
.live-section-head {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:#ef4444;
  margin:4px 0 12px;
}
.live-dot {
  width:9px; height:9px; border-radius:50%;
  background:#ef4444; position:relative; flex-shrink:0; display:inline-block;
}
.live-dot::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:#ef4444; animation:livePulse 1.4s ease-out infinite;
}
@keyframes livePulse {
  0%   { transform:scale(1);   opacity:.7; }
  100% { transform:scale(3.2); opacity:0; }
}

.live-card {
  position:relative; border-radius:22px; padding:20px;
  margin-bottom:16px; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, rgba(239,68,68,0.18), rgba(255,255,255,0.05) 55%);
  border:1px solid rgba(239,68,68,0.28);
}
.live-card-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; color:#ef4444; margin-bottom:14px;
}
.live-card-grid {
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.live-team {
  display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; min-width:0;
}
.live-team img {
  width:46px; height:34px; border-radius:6px; object-fit:cover;
}
.live-team .nm {
  font-size:13px; font-weight:600; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.live-center { display:flex; flex-direction:column; align-items:center; gap:6px; }
.live-score {
  font-family:'JetBrains Mono', monospace;
  font-size:38px; font-weight:700; color:#fff; letter-spacing:2px; line-height:1;
}
.live-ring { position:relative; width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.live-ring svg { transform:rotate(-90deg); position:absolute; inset:0; }
.live-ring .min {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; color:#fff;
}
.live-ring .min.no-ring {
  position:static; font-size:10px; letter-spacing:1px; color:#fca5a5;
}
.live-pred {
  margin-top:16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:14px;
  background:rgba(0,0,0,0.28); backdrop-filter:blur(6px);
}
.live-pred .lbl { font-size:13px; color:rgba(255,255,255,0.7); }
.live-pred .lbl b { color:#fff; font-weight:700; }
.live-pred .lbl.muted { color:rgba(255,255,255,0.4); }
.live-st {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; white-space:nowrap;
}
/* El exacto (+5) es el puntaje máximo: pill dorada con brillo, resalta sobre el resto */
.live-st.exact  {
  color:#ffd166; padding:6px 13px; border-radius:50px;
  background:linear-gradient(135deg, rgba(255,209,102,0.24), rgba(255,176,31,0.16));
  box-shadow:0 0 0 1px rgba(255,209,102,0.35);
  animation:exactGlow 1.8s ease-in-out infinite;
}
@keyframes exactGlow {
  0%,100% { box-shadow:0 0 0 1px rgba(255,209,102,0.35); }
  50%     { box-shadow:0 0 14px rgba(255,209,102,0.40); }
}
.live-st.winner { color:#34d399; }
.live-st.zero   { color:rgba(255,255,255,0.45); }
.live-st.none   { color:rgba(255,255,255,0.4); }

/* ============================================================
   DASHBOARD — panel de inicio del usuario logueado
   ============================================================ */
.dash-hero { display:flex; align-items:center; gap:14px; padding:20px 0 6px; }
.dash-hero .av {
  width:54px; height:54px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; color:#0c0c0e;
  background:linear-gradient(135deg,#ffd166,#ffb01f);
}
.dash-hero .hi { font-size:13px; color:rgba(255,255,255,0.55); }
.dash-hero .nm { font-size:21px; font-weight:700; line-height:1.15; }
.dash-hero .aldia {
  margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:50px; font-size:11px; font-weight:700;
  background:rgba(16,185,129,0.14); color:#34d399;
}
.dash-hero .aldia.pending { background:rgba(255,209,102,0.16); color:#ffd166; }

.dash-next {
  position:relative; border-radius:20px; padding:18px; margin-bottom:16px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
}
.dash-next.pending { background:rgba(255,209,102,0.08); border-color:rgba(255,209,102,0.32); }
.dash-next .cap {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:rgba(255,255,255,0.6); margin-bottom:14px;
}
.dash-next .cap .when-chip {
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:50px;
  background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.7);
  letter-spacing:0; text-transform:none; font-weight:600;
}
.dash-next.pending .cap { color:#ffd166; }
.dash-next.pending .cap .when-chip { background:rgba(255,209,102,0.18); color:#ffd166; }
/* Cierre inminente (< 1 h): rojo de urgencia */
.dash-next.urgent { border-color:rgba(239,68,68,0.4); }
.dash-next .cap .when-chip.urgent { background:rgba(239,68,68,0.18); color:#fca5a5; }
.dash-next .teams { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:8px; }
.dash-next .teams .t { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; }
.dash-next .teams img { width:34px; height:25px; border-radius:5px; object-fit:cover; }
.dash-next .teams .vs { font-size:11px; color:rgba(255,255,255,0.4); font-weight:500; }
.dash-next .teams .tbd {
  width:34px; height:25px; border-radius:5px; background:rgba(255,255,255,0.1);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:rgba(255,255,255,0.6);
}
.dash-next .when { text-align:center; font-size:12px; color:rgba(255,255,255,0.55); margin-bottom:14px; }
.dash-next .when b { color:#ffb01f; }
.dash-next .foot {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:13px; border-top:1px solid rgba(255,255,255,0.08);
}
.dash-next .foot .pred { font-size:13px; color:rgba(255,255,255,0.6); }
.dash-next .foot .pred b { color:#fff; font-weight:700; }
.dash-next .foot .pred.muted { color:rgba(255,255,255,0.4); }
.dash-next .foot .edit { font-size:12px; font-weight:600; color:#ffd166; display:inline-flex; align-items:center; gap:4px; }
.dash-next .foot .tbd-note { font-size:12px; color:rgba(255,255,255,0.45); display:inline-flex; align-items:center; gap:5px; }

.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px; }
.dash-tile {
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:16px; padding:15px; display:flex; flex-direction:column; gap:9px;
  transition:all .2s;
}
.dash-tile:hover { background:rgba(255,255,255,0.1); transform:translateY(-1px); }
.dash-tile .ic {
  width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  background:rgba(255,209,102,0.14); color:#ffd166;
}
.dash-tile.alt .ic { background:rgba(255,255,255,0.08); color:#fff; }
.dash-tile .t { font-size:14px; font-weight:600; }
.dash-tile .s { font-size:11px; color:rgba(255,255,255,0.45); line-height:1.3; }
.dash-tile.span2 { grid-column:1 / -1; }

.dash-brand { display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 0 8px; opacity:.55; }
.dash-brand img { height:30px; filter:brightness(0) invert(1); }
.dash-brand .by { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.5); }

/* Banda de marcas arriba del dashboard (las que arman el prode) */
.brand-band {
  text-align:center; padding:20px 0 18px;
  border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:6px;
}
.brand-band img { height:46px; max-width:88%; object-fit:contain; }

/* Espaciado más holgado dentro del dashboard */
.voo-body.dash .live-section-head,
.voo-body.dash .divider-text { margin:28px 0 14px; }
.voo-body.dash .stats-strip .stat { padding:14px 4px; }
.voo-body.dash .dash-hero { padding:10px 0 18px; }

/* ============================================================
   BARRA DE NAVEGACIÓN INFERIOR (app-like, solo logueado)
   ============================================================ */
.has-botnav .voo-content { padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px)); }
.botnav {
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  background:rgba(12,12,14,0.88); backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,0.08);
}
.botnav-inner {
  max-width:480px; margin:0 auto; display:flex;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
}
.botnav-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 0; color:rgba(255,255,255,0.5);
  background:transparent; border:0; cursor:pointer; transition:color .15s;
}
.botnav-item i { font-size:23px; line-height:1; }
.botnav-item span { font-size:10px; font-weight:600; letter-spacing:.2px; }
.botnav-item.active { color:#ffd166; }
.botnav-item:active { transform:scale(0.94); }

/* Isologo Voucheroo en el footer */
.voo-foot-logo { display:inline-flex; }
.voo-foot-logo img { height:28px; object-fit:contain; opacity:0.9; }

/* Status badge para premios/AJAX */
.status-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:50px;
  font-size:11px; font-weight:600; letter-spacing:0.3px;
}
.status-badge.saving { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.6); }
.status-badge.saved  { background:rgba(16,185,129,0.18); color:#10b981; }
.status-badge.error  { background:rgba(239,68,68,0.18); color:#ef4444; }

/* ============================================================
   CTA BANNER — partido más urgente sin pronosticar
   ============================================================ */
.cta-banner {
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  padding:20px 20px 18px;
  margin:0 0 28px;
  backdrop-filter:blur(8px);
}
.cta-banner.urgent {
  background:rgba(255,209,102,0.08);
  border-color:rgba(255,209,102,0.35);
  box-shadow:0 0 30px rgba(255,209,102,0.06);
}
.cta-banner-label {
  font-size:10.5px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  margin-bottom:16px;
  display:flex; align-items:center; gap:6px;
}
.cta-banner.urgent .cta-banner-label { color:#ffd166; }
.cta-banner-label i { font-size:13px; }
.cta-banner-match {
  display:flex; align-items:center; gap:10px;
  font-size:16px; font-weight:600;
  color:#fff;
  flex-wrap:wrap; justify-content:center;
  margin-bottom:18px;
}
.cta-banner-match .vs {
  font-size:11px; color:rgba(255,255,255,0.5);
  font-weight:500;
}
.cta-banner .btn-pill {
  padding:12px 22px; font-size:14px;
}
.cta-banner .btn-pill i { font-size:16px; }

/* ============================================================
   STATS STRIP — fila compacta de puntaje
   ============================================================ */
.stats-strip {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  padding:12px 8px;
  margin-bottom:16px;
  backdrop-filter:blur(8px);
}
.stats-strip .stat { text-align:center; }
.stats-strip .stat .value {
  font-size:20px; font-weight:700;
  line-height:1; margin-bottom:4px;
  font-variant-numeric:tabular-nums;
}
.stats-strip .stat .value.text-gold { color:#ffd166; }
.stats-strip .stat .label {
  font-size:10px; color:rgba(255,255,255,0.5);
  text-transform:uppercase; letter-spacing:0.5px;
  font-weight:600;
}

/* ============================================================
   LATER BLOCK — colapsable "más adelante"
   ============================================================ */
.later-block {
  margin-top:24px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  overflow:hidden;
}
.later-block summary {
  list-style:none;
  cursor:pointer;
  padding:18px 20px;
  display:flex; align-items:center; gap:12px;
  font-size:13.5px; font-weight:600;
  color:rgba(255,255,255,0.85);
  transition:background .2s;
}
.later-block summary::-webkit-details-marker { display:none; }
.later-block summary:hover { background:rgba(255,255,255,0.04); }
.later-block summary i:first-child {
  font-size:18px; color:#ffd166;
}
.later-block summary .count {
  margin-left:auto;
  font-size:12px; color:rgba(255,255,255,0.5);
  font-weight:500;
}
.later-block summary .chev {
  font-size:18px; color:rgba(255,255,255,0.4);
  transition:transform .25s;
  margin-left:4px;
}
.later-block[open] summary .chev { transform:rotate(180deg); }
.later-block .later-content {
  padding:8px 16px 16px;
  border-top:1px solid rgba(255,255,255,0.06);
}

/* ============================================================
   PHASE FILTER CHIPS (Todas / Grupos / Eliminatorias)
   ============================================================ */
.phase-filter {
  display:flex; gap:8px; overflow-x:auto;
  margin:0 0 28px; padding-bottom:4px;
  scrollbar-width:none;
}
.phase-filter::-webkit-scrollbar { display:none; }
.phase-filter .btn-chip {
  padding:9px 16px; font-size:12.5px;
  font-weight:500;
}
.phase-filter .btn-chip.active {
  background:rgba(255,209,102,0.16);
  color:#ffd166;
  border-color:rgba(255,209,102,0.4);
  font-weight:600;
}

/* ============================================================
   DAY HEADER (separador entre fechas)
   ============================================================ */
.day-header {
  font-size:11.5px; font-weight:700;
  color:rgba(255,255,255,0.45);
  letter-spacing:1.2px; text-transform:uppercase;
  margin:28px 4px 14px;
}
.day-header:first-child { margin-top:0; }

/* ============================================================
   LOGO GRANDE (landings + auth)
   ============================================================ */
.big-logo {
  width:110px; height:110px; border-radius:16px;
  margin:24px auto 28px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.big-logo img {
  max-width:100%; max-height:100%;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.big-logo .placeholder {
  width:100%; height:100%; border-radius:50%;
  background:rgba(255,255,255,0.95);
  display:flex; align-items:center; justify-content:center;
  color:#7c3aed; font-size:48px; font-weight:700;
}

.brand-kicker {
  text-align:center;
  font-size:11px; font-weight:700;
  color:#ffd166;
  letter-spacing:2.5px;
  text-transform:uppercase;
  margin-bottom:14px;
  margin-top:-12px;
}
.brand-title {
  text-align:center;
  font-size:24px; font-weight:700;
  margin-bottom:8px; letter-spacing:-0.4px;
}
.brand-sub {
  text-align:center;
  color:rgba(255,255,255,0.55); font-size:14px;
  margin-bottom:28px; line-height:1.55; padding:0 8px;
}

/* Sub-marcas */
.sub-brands-img {
  display:block; margin:-12px auto 28px;
  max-width:280px; max-height:60px; object-fit:contain;
  opacity:0.85;
}

.actions-stack {
  display:flex; flex-direction:column; gap:14px;
  padding:0 4px;
}
.actions-chips {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:22px;
}

/* ============================================================
   RANKING
   ============================================================ */
.rank-card {
  display:flex; align-items:center;
  padding:14px 18px; border-radius:50px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  margin-bottom:10px;
  gap:12px;
}
.rank-card.you {
  background:rgba(255,255,255,0.97);
  color:#1a1a1a;
  border-color:rgba(255,255,255,0.5);
  box-shadow:0 4px 20px rgba(0,0,0,0.25);
  padding:20px; flex-direction:column; align-items:center;
  border-radius:24px; text-align:center; gap:6px;
  margin-bottom:14px;
}
.rank-card.you .label {
  font-size:12px; color:rgba(0,0,0,0.55);
  font-weight:500; text-transform:uppercase; letter-spacing:0.5px;
}
.rank-card.you .pos {
  font-size:48px; font-weight:700; line-height:1;
  margin:2px 0 4px;
}
.rank-card.you .pts { font-size:14px; color:rgba(0,0,0,0.55); }
.rank-card .medal { font-size:18px; width:22px; text-align:center; }
.rank-card .num {
  font-size:14px; font-weight:600;
  color:rgba(255,255,255,0.55); width:24px; text-align:center;
}
.rank-card .name { flex:1; font-size:14px; font-weight:500; }
.rank-card .pts-small {
  font-size:14px; font-weight:600; color:#ffd166;
  font-variant-numeric:tabular-nums;
}

.divider-text {
  display:flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  margin:24px 4px 12px; font-weight:600;
}
.divider-text::before,
.divider-text::after {
  content:''; flex:1; height:1px;
  background:rgba(255,255,255,0.1);
}

/* Podio top 3 (V9 styleguide) */
.podium {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
  margin-bottom:18px; align-items:end;
}
.podium .step {
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  padding:14px 10px; text-align:center;
  backdrop-filter:blur(8px);
}
.podium .step.first {
  background:rgba(255,209,102,0.12);
  border-color:rgba(255,209,102,0.35);
}
.podium .medal { font-size:24px; line-height:1; margin-bottom:8px; }
.podium .name {
  font-size:12px; font-weight:600;
  margin-bottom:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.podium .pts { font-size:11px; color:#ffd166; font-weight:600; }

.pagination {
  display:flex; justify-content:center; gap:6px;
  margin-top:18px; flex-wrap:wrap;
}
.pagination a, .pagination span {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px;
  border-radius:50px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff; font-size:13px; font-weight:600;
}
.pagination a.active, .pagination span.active {
  background:rgba(255,255,255,0.97); color:#1a1a1a;
}
.pagination .ellipsis {
  background:transparent; border:none; color:rgba(255,255,255,0.4);
}

/* ============================================================
   PREMIOS
   ============================================================ */
.prize-card {
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,209,102,0.35);
  border-radius:24px; padding:24px;
  margin-bottom:14px;
  box-shadow:0 0 30px rgba(255,209,102,0.08);
  backdrop-filter:blur(8px);
}
.prize-card .icon-big {
  font-size:38px; text-align:center; margin-bottom:8px;
}
.prize-card .icon-big img {
  max-width:100%; max-height:120px; object-fit:contain; border-radius:14px;
}
.prize-card .title {
  font-size:18px; font-weight:700;
  text-align:center; margin-bottom:4px;
}
.prize-card .sub {
  font-size:13px; color:rgba(255,255,255,0.6);
  text-align:center; margin-bottom:14px;
}
.prize-card .branches {
  background:rgba(0,0,0,0.2);
  border-radius:14px; padding:12px 16px; font-size:13px;
  color:rgba(255,255,255,0.75); margin-bottom:8px;
}
.prize-card .branches b {
  color:#fff; display:block; margin-bottom:6px;
  font-size:12px; text-transform:uppercase;
  letter-spacing:0.4px; font-weight:600; opacity:.7;
}
.prize-card .branches ul { list-style:none; padding:0; }
.prize-card .branches li { padding:2px 0; }
.prize-card .branches li::before {
  content:'\2022'; margin-right:8px; color:#ffd166;
}
.prize-card .expiry {
  font-size:12px; color:rgba(255,255,255,0.5);
  text-align:center; margin-bottom:18px;
}
.prize-card .qr-mini {
  display:flex; justify-content:center; margin-bottom:14px;
}
.prize-card .qr-mini img,
.prize-card .qr-mini .qr-placeholder {
  width:140px; height:140px; background:#fff; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  padding:8px;
}
.prize-card .qr-mini img { padding:8px; object-fit:contain; }
.prize-card .token-line {
  font-family:'JetBrains Mono',monospace;
  font-size:12px; text-align:center;
  color:rgba(255,255,255,0.55); margin-bottom:14px;
  letter-spacing:0.1em;
}
.prize-card.used {
  border-color:rgba(255,255,255,0.1);
  box-shadow:none;
  opacity:.55;
  padding:16px 20px;
}
.prize-card.used .row {
  display:flex; gap:14px; align-items:center;
}
.prize-card.used .row .ic { font-size:24px; }
.prize-card.used .row .info { flex:1; font-size:13px; }
.prize-card.used .row .info b {
  display:block; font-size:14px; margin-bottom:2px;
}
.prize-card.used .status {
  font-size:12px; color:rgba(255,255,255,0.5); margin-top:6px;
}
.prize-card.used .status.expired { color:#ef4444; }

/* QR fullscreen card */
.qr-card {
  background:rgba(255,255,255,0.97);
  color:#1a1a1a;
  border-radius:24px;
  padding:32px 24px;
  text-align:center;
  margin:8px 4px;
  box-shadow:0 8px 40px rgba(0,0,0,0.4);
}
.qr-card .qr-frame {
  background:#fff; border-radius:16px;
  padding:18px; display:inline-block; margin-bottom:18px;
}
.qr-card .qr-frame img,
.qr-card .qr-frame svg {
  display:block; width:220px; height:220px;
}
.qr-card .code {
  font-family:'JetBrains Mono',monospace;
  font-size:18px; letter-spacing:0.18em; font-weight:600;
  color:#1a1a1a; margin-bottom:14px;
}
.qr-card .info {
  font-size:13px; color:rgba(0,0,0,0.6); line-height:1.5;
}

/* ============================================================
   REGLAS — step cards
   ============================================================ */
.step-card {
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  padding:22px 24px;
  margin-bottom:14px;
  backdrop-filter:blur(8px);
}
.step-card .num {
  font-size:28px; font-weight:700; color:#ffd166;
  line-height:1; margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}
.step-card .step-title {
  font-size:17px; font-weight:600; margin-bottom:8px;
}
.step-card .step-body {
  font-size:14px; color:rgba(255,255,255,0.7); line-height:1.55;
}
.step-card .step-body .li {
  display:flex; gap:8px; margin-top:6px; align-items:flex-start;
}
.step-card .step-body .li i {
  color:#ffd166; font-size:14px; margin-top:2px;
}

.example-box {
  margin-top:14px; padding:14px;
  background:rgba(0,0,0,0.3);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.06);
}
.example-box .label {
  font-size:11px; color:rgba(255,255,255,0.5);
  letter-spacing:0.4px; text-transform:uppercase;
  font-weight:600; margin-bottom:10px;
}
.example-box .row {
  display:flex; align-items:center; justify-content:center;
  gap:8px; font-size:14px; color:#fff; margin-bottom:6px;
}
.example-box .row.muted { color:rgba(255,255,255,0.7); margin-bottom:10px; }

/* ============================================================
   DRAWER perfil (sheet desde arriba)
   ============================================================ */
.drawer-overlay {
  position:fixed; inset:0; z-index:50;
  display:none;
  background:rgba(0,0,0,0.4);
}
.drawer-overlay.open { display:block; }
.drawer-sheet {
  position:fixed; bottom:0; left:0; right:0; z-index:51;
  background:rgba(20,16,14,0.96);
  backdrop-filter:blur(20px);
  border-radius:24px 24px 0 0;
  padding:10px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid rgba(255,255,255,0.08);
  box-shadow:0 -24px 60px rgba(0,0,0,0.5);
  max-width:480px; margin:0 auto;
  max-height:84vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.drawer-sheet.open { transform:translateY(0); }
.drawer-sheet .drawer-handle {
  width:40px; height:4px; border-radius:4px;
  background:rgba(255,255,255,0.2); margin:0 auto 16px;
}
.drawer-sheet .head {
  display:flex; align-items:center; gap:14px; margin-bottom:14px;
}
.drawer-sheet .drawer-close {
  margin-left:auto; flex-shrink:0;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.16);
  color:#fff; font-size:20px;
  display:flex; align-items:center; justify-content:center;
}
.drawer-sheet .drawer-close:active { background:rgba(255,255,255,0.2); }
.drawer-sheet .head .av {
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,0.97); color:#1a1a1a;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700;
}
.drawer-sheet .head .who b {
  display:block; font-size:15px; font-weight:600; margin-bottom:2px;
}
.drawer-sheet .head .who span {
  font-size:12px; color:rgba(255,255,255,0.5);
}
.drawer-sheet .stats {
  font-size:13px; color:rgba(255,255,255,0.7); margin-bottom:18px;
}
.drawer-sheet .stats b { color:#ffd166; }
.drawer-sheet hr {
  border:none; height:1px; background:rgba(255,255,255,0.08);
  margin:14px 0;
}
.drawer-sheet .menu-item {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:50px;
  color:#fff; font-size:14px;
  margin-bottom:6px;
  transition:background .2s;
}
.drawer-sheet .menu-item:hover { background:rgba(255,255,255,0.06); }
.drawer-sheet .menu-item i:first-child {
  font-size:20px; color:rgba(255,255,255,0.7);
  width:24px; text-align:center;
}
.drawer-sheet .menu-item .label { flex:1; }
.drawer-sheet .menu-item i:last-child {
  font-size:14px; color:rgba(255,255,255,0.4);
}
.drawer-sheet .menu-item.danger { color:#ef4444; }
.drawer-sheet .menu-item.danger i:first-child { color:#ef4444; }
.drawer-sheet .menu-item button {
  background:transparent; border:none; color:inherit;
  flex:1; text-align:left; padding:0; font-size:inherit;
}
.drawer-sheet .foot {
  text-align:center; font-size:11px; color:rgba(255,255,255,0.35);
  margin-top:14px;
}

/* ============================================================
   VERIFY EMAIL — círculo dorado central
   ============================================================ */
.verify-icon {
  width:80px; height:80px; border-radius:50%;
  background:rgba(255,209,102,0.15);
  border:1px solid rgba(255,209,102,0.3);
  display:flex; align-items:center; justify-content:center;
  margin:24px auto 24px;
  color:#ffd166; font-size:32px;
}

/* ============================================================
   FLASH MESSAGES
   ============================================================ */
.voo-flash {
  margin:8px 20px 0; padding:14px 18px;
  border-radius:16px; font-size:14px;
  display:flex; align-items:flex-start; gap:10px;
  backdrop-filter:blur(8px);
}
.voo-flash i { font-size:18px; margin-top:1px; flex-shrink:0; }
.voo-flash.success {
  background:rgba(16,185,129,0.15);
  border:1px solid rgba(16,185,129,0.35);
  color:#34d399;
}
.voo-flash.error {
  background:rgba(239,68,68,0.15);
  border:1px solid rgba(239,68,68,0.35);
  color:#fca5a5;
}
.voo-flash.info {
  background:rgba(255,209,102,0.15);
  border:1px solid rgba(255,209,102,0.35);
  color:#ffd166;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty {
  text-align:center; padding:32px 20px 24px;
  color:rgba(255,255,255,0.5);
}
.empty .ic {
  font-size:36px; margin-bottom:10px; opacity:0.45;
  line-height:1;
}
.empty h3 {
  font-size:15px; font-weight:600; color:rgba(255,255,255,0.8);
  margin-bottom:4px;
}
.empty p {
  font-size:13px; line-height:1.55; max-width:280px; margin:0 auto 14px;
  color:rgba(255,255,255,0.5);
}

/* ============================================================
   TABLA HISTORIAL (history.php)
   ============================================================ */
.hist-table {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  overflow:hidden;
}
.hist-row {
  display:grid; grid-template-columns:1fr auto; gap:8px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.hist-row:last-child { border-bottom:none; }
.hist-row .info { font-size:13px; }
.hist-row .info .date {
  color:rgba(255,255,255,0.5); font-size:11px;
  text-transform:uppercase; letter-spacing:0.4px;
  margin-bottom:4px;
}
.hist-row .info .match { font-weight:600; margin-bottom:2px; }
.hist-row .info .scores {
  font-size:12px; color:rgba(255,255,255,0.6);
}
.hist-row .info .scores b { color:#fff; }
.hist-row .points {
  align-self:center;
}

/* ============================================================
   CANJE — scanner styling
   ============================================================ */
.station-banner {
  margin:8px 20px 16px; padding:14px 18px;
  border-radius:18px;
  background:rgba(255,209,102,0.15);
  border:1px solid rgba(255,209,102,0.35);
  color:#ffd166;
  font-size:13px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; backdrop-filter:blur(8px);
}
.station-banner b { display:block; color:#fff; font-size:14px; }
.station-banner button {
  background:rgba(0,0,0,0.25); color:#fff;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:50px; padding:8px 14px;
  font-size:12px; font-weight:600;
}

.scanner-card {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  padding:18px;
  margin-bottom:14px;
}
#reader {
  border-radius:14px; overflow:hidden;
  background:#000; min-height:280px;
}
#result {
  margin-top:14px; padding:14px;
  border-radius:14px; font-size:14px;
  display:none;
}
#result.show { display:block; }
#result.ok { background:rgba(16,185,129,0.15); border:1px solid rgba(16,185,129,0.35); color:#34d399; }
#result.bad { background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.35); color:#fca5a5; }
#result h4 { font-size:15px; margin-bottom:6px; color:#fff; }
#result .actions {
  display:flex; gap:10px; margin-top:14px;
}
#result .actions button { flex:1; }

/* ============================================================
   UTILIDADES
   ============================================================ */
.text-center { text-align:center; }
.text-muted { color:rgba(255,255,255,0.55); }
.text-gold { color:#ffd166; }
.text-danger { color:#ef4444; }
.mt-0 { margin-top:0; }
.mt-2 { margin-top:8px; }
.mt-4 { margin-top:16px; }
.mb-0 { margin-bottom:0; }
.mb-2 { margin-bottom:8px; }
.mb-4 { margin-bottom:16px; }
.hidden { display:none; }

/* ============================================================
   PLANILLA DE PRONÓSTICOS — tarjeta por día con filas alineadas
   (todo scopeado bajo .planilla para no colisionar con otros componentes)
   ============================================================ */
.planilla{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; backdrop-filter:blur(8px); overflow:hidden; margin-bottom:16px;
}
.planilla .plan-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 18px; background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.1);
}
.planilla .plan-hd .d{ font-size:14px; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; }
.planilla .plan-hd .c{ font-size:11.5px; font-weight:700; color:rgba(255,255,255,0.55); }
.planilla .plan-hd .c b{ color:#10b981; }
.planilla .plan-foot{
  padding:13px 16px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,0.1);
}
.planilla .plan-foot .save{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#10b981; }
.planilla .plan-foot .hint{ font-size:11px; color:rgba(255,255,255,0.34); }

.planilla .num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.planilla .match{ padding:12px 14px; border-top:1px solid rgba(255,255,255,0.06); position:relative; }
.planilla .plan-hd + .match{ border-top:0; }
.planilla .match.fin{ background:rgba(255,255,255,0.018); }
/* overlay por resultado (ya cerró): degradé + barra de acento a la izquierda */
.planilla .match.fin.exact{ background:linear-gradient(90deg,rgba(16,185,129,.20),rgba(16,185,129,.05) 60%,transparent); box-shadow:inset 3px 0 0 #10b981; }
.planilla .match.fin.win{ background:linear-gradient(90deg,rgba(240,176,64,.20),rgba(240,176,64,.05) 60%,transparent); box-shadow:inset 3px 0 0 #f0b040; }
.planilla .match.fin.miss{ background:linear-gradient(90deg,rgba(239,68,68,.18),rgba(239,68,68,.05) 60%,transparent); box-shadow:inset 3px 0 0 #ef4444; }

/* Opción 2 — dos líneas: nombres completos arriba, controles centrados abajo */
.planilla .flag{ width:26px; height:19px; object-fit:cover; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,0.4); flex-shrink:0; }
.planilla .teams{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.planilla .t{ display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.planilla .t.a{ justify-content:flex-end; }
.planilla .nm{ font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.planilla .t.a .nm{ text-align:right; }
.planilla .match.loaded .nm{ color:rgba(255,255,255,0.7); }
.planilla .vs{ font-size:10px; color:rgba(255,255,255,0.34); font-weight:700; flex-shrink:0; }

.planilla .ctrl{ position:relative; display:flex; align-items:center; justify-content:center; min-height:46px; }
.planilla .cwrap{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.planilla .res{ display:flex; align-items:center; gap:10px; font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.planilla .res .dash{ font-size:14px; color:rgba(255,255,255,0.34); font-weight:600; }
.planilla .boxes{ display:flex; align-items:center; gap:7px; }
.planilla .boxes .dash{ color:rgba(255,255,255,0.34); font-weight:600; }
.planilla .end-r{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:5px; }
.planilla .bx{
  width:42px; height:44px; border-radius:10px; background:rgba(255,255,255,0.1);
  border:1.5px solid rgba(255,255,255,0.2); color:#fff; text-align:center; font:inherit; font-weight:800; font-size:18px;
  -moz-appearance:textfield; appearance:textfield;
}
.planilla .bx::-webkit-outer-spin-button, .planilla .bx::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.planilla .bx::placeholder{ color:rgba(255,255,255,0.34); }
.planilla .bx:focus{ outline:0; border-color:#ffd166; background:rgba(255,209,102,0.08); }
.planilla .match.loaded .bx{ background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.1); color:rgba(255,255,255,0.55); }
.planilla .match.pending .bx{ border-color:rgba(255,209,102,0.3); background:rgba(255,209,102,0.05); }
.planilla .match.pending .bx::placeholder{ color:rgba(255,209,102,0.5); }

.planilla .cap{ font-size:10px; font-weight:600; color:rgba(255,255,255,0.34); min-height:12px; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.planilla .cap.save{ color:#10b981; font-weight:700; }
.planilla .cap.saving{ color:#ffd166; font-weight:700; }
.planilla .cap.err{ color:#ef4444; font-weight:700; }
.planilla .cap b{ color:rgba(255,255,255,0.55); font-weight:700; }
.planilla .cap .lk{ opacity:.5; font-size:11px; }
.planilla .match.pending .cap{ color:rgba(255,209,102,0.7); font-weight:700; }
.planilla .spin{
  width:10px; height:10px; border:2px solid rgba(255,209,102,0.3); border-top-color:#ffd166;
  border-radius:50%; display:inline-block; animation:planSpin .6s linear infinite;
}
@keyframes planSpin{ to{ transform:rotate(360deg); } }

.planilla .end{ display:flex; justify-content:flex-end; align-items:center; gap:5px; }
.planilla .pts{ min-width:30px; height:23px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; padding:0 6px; gap:3px; }
.planilla .pts.exact{ background:rgba(16,185,129,.16); color:#34d399; border:1px solid rgba(16,185,129,.4); }
.planilla .pts.win{ background:rgba(240,176,64,.14); color:#f0b040; border:1px solid rgba(240,176,64,.32); }
.planilla .pts.zero{ background:rgba(239,68,68,.12); color:#f08a8a; border:1px solid rgba(239,68,68,.3); }
.planilla .figdot{ font-size:13px; }
.planilla .figdot.won{ color:#ffd166; }
.planilla .figdot.lost{ color:rgba(255,255,255,0.34); }

.planilla .figbtn{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center; gap:3px; padding:6px 7px; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.34); line-height:1; transition:background .15s,border-color .15s,color .15s;
}
.planilla .figbtn i.st{ font-size:14px; }
.planilla .figbtn i.chev{ font-size:14px; opacity:.7; }
.planilla .figbtn:active{ transform:translateY(-50%) scale(.94); }
.planilla .figbtn.on{ background:rgba(255,209,102,0.12); border-color:rgba(255,209,102,0.4); color:#ffd166; }

/* ----- bottom sheet selector de figura (fuera de .planilla; prefijo fig-) ----- */
.fig-ov{ position:fixed; inset:0; z-index:40; background:rgba(0,0,0,0.55); opacity:0; pointer-events:none; transition:.2s; }
.fig-ov.on{ opacity:1; pointer-events:auto; }
.fig-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41; max-width:480px; margin:0 auto;
  background:#15171b; border:1px solid rgba(255,255,255,0.1); border-radius:22px 22px 0 0;
  transform:translateY(100%); transition:.25s cubic-bezier(.3,.8,.3,1); display:flex; flex-direction:column; max-height:84vh;
}
.fig-sheet.on{ transform:translateY(0); }
.fig-handle{ width:38px; height:4px; border-radius:3px; background:rgba(255,255,255,0.2); margin:8px auto 12px; flex-shrink:0; }
.fig-head{ padding:0 18px 12px; flex-shrink:0; }
.fig-head h4{ font-size:15px; font-weight:800; display:flex; align-items:center; gap:7px; }
.fig-head h4 i{ color:#ffd166; }
.fig-sub{ font-size:12px; color:rgba(255,255,255,0.55); margin-top:3px; }
.fig-search{ margin:0 18px 6px; display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:13px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); flex-shrink:0; }
.fig-search i{ color:rgba(255,255,255,0.34); font-size:17px; }
.fig-search input{ flex:1; background:transparent; border:0; outline:0; color:#fff; font:inherit; font-size:14px; font-weight:600; }
.fig-search input::placeholder{ color:rgba(255,255,255,0.34); }
.fig-clear{ margin:2px 18px 4px; }
.fig-clear button{ background:transparent; border:0; color:rgba(255,255,255,0.34); font:inherit; font-size:12px; font-weight:700; text-decoration:underline; cursor:pointer; }
.fig-list{ overflow-y:auto; padding:6px 14px calc(20px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling:touch; }
.fig-grp{ position:sticky; top:0; background:#15171b; font-size:10px; font-weight:800; letter-spacing:.1em; color:rgba(255,255,255,0.34); text-transform:uppercase; padding:10px 4px 6px; display:flex; align-items:center; gap:7px; z-index:1; }
.fig-grp img{ width:18px; height:13px; border-radius:2px; }
.fig-pl{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; background:rgba(255,255,255,0.035); border:1px solid transparent; margin-bottom:6px; cursor:pointer; transition:.12s; }
.fig-pl:active{ transform:scale(.99); }
.fig-pl.sel{ background:rgba(255,209,102,0.12); border-color:rgba(255,209,102,0.4); }
.fig-pl .d{ width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:rgba(255,255,255,0.55); flex-shrink:0; font-variant-numeric:tabular-nums; }
.fig-pl.sel .d{ background:rgba(255,209,102,0.2); color:#ffd166; }
.fig-pl .pn{ flex:1; font-size:14px; font-weight:700; }
.fig-pl .ck{ color:#ffd166; font-size:19px; opacity:0; }
.fig-pl.sel .ck{ opacity:1; }
.fig-empty{ text-align:center; color:rgba(255,255,255,0.34); font-size:13px; padding:28px 0; }