/* LaJugada — tema claro "HRB" (experimento 2026-09-30, pedido de Junior)
   fondo gris muy claro · tarjetas blancas · acento primario morado · dorado solo VIP/estrellas/odds */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f4f4f6;      /* fondo: gris muy claro estilo Hard Rock Bet */
  --bg2:#ffffff;     /* inputs, tablas: blanco */
  --card:#ffffff;    /* tarjetas blancas */
  --card2:#f6f6f9;   /* tarjeta alterna muy clara */
  --line:#e3e3ea;    /* bordes suaves */
  --gold:#e6b93e;    /* dorado: SOLO badges VIP, estrellas y odds destacados */
  --olive:#7c3aed;   /* morado: acento primario (botones, activos, highlights) */
  --txt:#1a1a1a;     /* texto oscuro */
  --mut:#8a8a93;     /* secundarios gris */
  --green:#16a34a;   /* éxito/positivo */
  --red:#dc2626;
  --glow:0 2px 14px rgba(25,25,40,.09);  /* sombra ligera */
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--txt);min-height:100vh}
a{color:var(--olive);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 60px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#ffffff;border-bottom:2px solid var(--olive);position:sticky;top:0;z-index:10;box-shadow:0 2px 10px rgba(25,25,40,.06)}
.brand{font-weight:800;font-size:18px;color:#1a1a1a}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.brand img{width:30px;height:30px;border-radius:50%}
.hero-brand{display:flex;align-items:center;gap:12px}
.hero-brand img{width:52px;height:52px;border-radius:50%}
.topbar nav a{color:var(--txt);margin-left:16px;font-size:14px}
.topbar nav a:hover{color:var(--olive)}
.foot{text-align:center;color:var(--mut);font-size:13px;padding:24px 16px;border-top:1px solid var(--line)}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-bottom:14px}
.foot-nav a{color:var(--txt);font-size:14px;font-weight:600;text-decoration:none}
.foot-nav a:hover{color:var(--olive)}
.foot .jresp{margin-top:10px;color:var(--mut);font-size:13px;max-width:720px;margin-left:auto;margin-right:auto;line-height:1.5}
/* caja juego responsable en home */
.jresp-box{background:var(--card2);border:1px solid var(--line);border-left:4px solid var(--olive);border-radius:0 12px 12px 0;padding:14px 16px;margin:18px 0;font-size:14.5px;line-height:1.6;color:var(--txt)}
/* hero — se mantiene la foto oscura del estadio como banner; overlay reforzado para el tema claro */
.hero{position:relative;border-radius:14px;overflow:hidden;margin-bottom:26px;border:1px solid var(--line);box-shadow:var(--glow)}
.hero img.bg{width:100%;height:280px;object-fit:cover;display:block;filter:brightness(.55)}
.hero .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;background:linear-gradient(transparent 20%,rgba(8,8,12,.85))}
.hero h1{font-size:30px;margin-bottom:6px;color:#fff}
.hero p{color:#e8e8ee;max-width:640px}
.ligas{display:flex;gap:14px;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:26px;flex-wrap:wrap;box-shadow:var(--glow)}
.ligas img{width:88px;height:52px;object-fit:contain;background:#fff;border-radius:8px;padding:5px 8px;flex:none}
.ligas span{color:var(--mut);font-size:13px;width:100%;text-align:center}
/* sections */
.sec{margin:28px 0}
.sec h2{font-size:22px;margin-bottom:4px}
.sec .sub{color:var(--mut);font-size:14px;margin-bottom:14px}
.aclara{background:#f1eafe;border:1px solid var(--olive);border-radius:12px;padding:16px;margin:26px 0;font-size:15px;line-height:1.5}
/* pick cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;position:relative;overflow:hidden;box-shadow:var(--glow)}
.card .wx{position:static;display:block;font-size:12px;background:#f4f4f8;border:1px solid var(--line);border-radius:8px;padding:6px 10px;line-height:1.4;margin:0 0 10px;color:#55555e}
.card .wx .fav{color:var(--olive);font-weight:700}
.card .wx .nofav{color:var(--red);font-weight:700}
.prow{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.foto{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);flex:none;background:#ececf1}
.foto-logo{width:58px;height:58px;border-radius:50%;object-fit:contain;border:2px solid var(--gold);flex:none;background:#ffffff;padding:6px}
.foto-fb{width:58px;height:58px;border-radius:50%;background:#ececf1;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-weight:800;color:#b8912a;flex:none;font-size:18px}
.who{min-width:0}
.who .j{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .e{color:var(--mut);font-size:13px;display:flex;align-items:center;gap:6px}
.who .e img{width:22px;height:22px;object-fit:contain}
.merc{font-size:14px;color:var(--txt);margin:6px 0}
.odd{display:inline-block;background:#7c3aed;color:#fff;font-weight:800;border-radius:8px;padding:6px 12px;font-size:17px;margin-top:4px}
.stars{color:var(--gold);font-size:17px;margin-left:8px;letter-spacing:2px}
.dep{font-size:12px;color:var(--mut);margin-top:8px;letter-spacing:1px}
.rec{margin-top:10px;background:rgba(124,58,237,.08);border:1px solid var(--olive);color:var(--olive);border-radius:8px;padding:8px;font-weight:700;font-size:14px}
.res-g{color:var(--green);font-weight:800}
.res-p{color:var(--red);font-weight:800}
/* locked */
.locked{text-align:center;padding:26px 16px}
.locked .lk{font-size:44px}
.locked h3{margin:8px 0 4px}
.locked p{color:var(--mut);font-size:14px;margin-bottom:14px}
.btn{display:inline-block;background:var(--olive);color:#fff;font-weight:800;border:none;border-radius:10px;padding:12px 22px;font-size:16px;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:#ececf1;color:var(--txt);border:1px solid var(--line)}
.precio{font-size:13px;color:var(--mut);margin-top:8px}
/* paquete */
.paq{background:linear-gradient(135deg,#ffffff,#f6f1ff);border:2px solid var(--olive);border-radius:14px;padding:24px;text-align:center;margin:30px 0;box-shadow:var(--glow)}
.paq h2{color:var(--olive)}
.paq p{color:var(--txt);margin:8px 0 16px}
.paq.premium{border-color:var(--gold);background:linear-gradient(135deg,#fffdf4,#ffffff)}
.paq.premium h2{color:#b8912a}
.paq .arg{color:var(--olive);font-weight:800;font-size:18px;margin:4px 0 14px}
.planbtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.btn.alt{background:#fff;color:var(--olive);border:2px solid var(--olive)}
.btn .ahorro{display:block;font-size:12px;font-weight:600;color:var(--olive)}
/* stats */
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;box-shadow:var(--glow)}
.stat .n{font-size:26px;font-weight:800;color:var(--olive)}
.stat .l{font-size:13px;color:var(--mut)}
.vacio{background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:30px;text-align:center;color:var(--mut)}
/* gate — se mantiene como pantalla oscura de entrada (foto del estadio) */
.gate-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#0d0f0a url('/static/img/fondo.jpg') center/cover}
.gate-card{background:rgba(16,18,16,.95);border:1px solid var(--olive);border-radius:16px;padding:36px 30px;max-width:380px;width:92%;text-align:center;box-shadow:var(--glow);color:#f4f4f6}
.gate-logo{font-size:44px}
.gate-card h1{margin:10px 0 6px;color:#fff}
.gate-card p{color:#b9b9c2;font-size:14px;margin-bottom:16px}
.gate-card input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#1a1a1a;font-size:16px;margin-bottom:12px}
.gate-card button{width:100%}
.err{color:var(--red)!important;font-weight:700}
/* admin */
.adm-form{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin:18px 0;box-shadow:var(--glow)}
.adm-form h3{margin-bottom:12px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.fgrid label{font-size:13px;color:var(--mut);display:flex;flex-direction:column;gap:4px}
.fgrid input,.fgrid select{padding:10px;border-radius:8px;border:1px solid var(--line);background:#fff;color:#1a1a1a;font-size:14px}
.fgrid textarea{padding:10px;border-radius:8px;border:1px solid var(--line);background:#fff;color:#1a1a1a;font-size:14px;font-family:inherit;resize:vertical}
/* mini tabla últimos 10 + justificación */
.mini-tabla{margin-top:12px;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px}
.mini-tabla .mt-t{font-size:13px;font-weight:700;color:var(--olive);margin-bottom:6px}
.mini-tabla table{width:100%;border-collapse:collapse;font-size:13px}
.mini-tabla td{padding:5px 4px;border-top:1px solid var(--line);color:var(--txt)}
.mini-tabla td:first-child{color:var(--mut)}
.mini-tabla td b{color:#1a1a1a}
.just{margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--txt);background:var(--card2);border-left:3px solid var(--olive);border-radius:0 8px 8px 0;padding:10px 12px}
.chk{flex-direction:row!important;align-items:center;gap:8px!important}
table.adm{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
table.adm th,table.adm td{border:1px solid var(--line);padding:8px;text-align:left}
table.adm th{background:#f0f0f4;color:var(--olive)}
table.adm td{color:var(--txt)}
.mini{padding:6px 10px;font-size:12px;border-radius:6px;border:1px solid var(--line);background:#ececf1;color:#1a1a1a;cursor:pointer}
.mini.g{background:rgba(124,58,237,.10);border-color:var(--olive);color:var(--olive)}
.mini.p{background:#fdecec;border-color:var(--red);color:var(--red)}
.mini.on{outline:2px solid currentColor}
form.inline{display:inline}
/* metodo */
.met{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin:14px 0;box-shadow:var(--glow)}
.met h3{color:var(--olive);margin-bottom:10px}
.met ul{margin-left:20px;line-height:1.7;color:var(--txt)}
.met li{margin-bottom:4px}

/* Toggle de idioma ES/EN */
.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-left:14px;vertical-align:middle}
.lang-toggle button{background:transparent;border:0;color:var(--mut);font-weight:700;font-size:12px;padding:6px 11px;cursor:pointer;letter-spacing:.5px}
.lang-toggle button.active{background:var(--olive);color:#fff}
.lang-toggle-float{position:fixed;top:12px;right:12px;z-index:50;margin-left:0}

/* Filtro por deporte (chips multi-selección) */
.dep-filter{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:26px;box-shadow:var(--glow);text-align:center}
.dep-t{font-weight:800;margin-bottom:10px;font-size:16px}
.dep-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dep-chip{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px 14px;cursor:pointer;opacity:.4;transition:opacity .15s,border-color .15s,box-shadow .15s;font-family:inherit}
.dep-chip img{width:64px;height:38px;object-fit:contain}
.dep-chip span{font-size:12px;font-weight:800;color:#1a1a1a}
.dep-chip.on{opacity:1;border-color:var(--olive);box-shadow:0 0 0 2px rgba(124,58,237,.25)}
.dep-cap{color:var(--mut);font-size:12px;margin-top:8px}
.dep-note{margin-top:10px;font-size:13px;color:var(--mut)}
.dep-note b{color:var(--txt)}

/* Marca de reserva en la tabla del admin */
.reserva-mark{display:inline-block;background:var(--olive);color:#fff;font-size:10px;font-weight:800;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}

/* Logos anzuelo en tarjetas bloqueadas */
.locked-logos{display:flex;justify-content:center;gap:12px;margin:12px 0 4px}
.locked-logos img{width:52px;height:52px;object-fit:contain;background:#fff;border-radius:12px;padding:6px;box-shadow:0 2px 8px rgba(0,0,0,.25)}

/* Botón compartir en Blast Minute */
.share-btn{display:block;width:100%;margin-top:12px;padding:12px;border:none;border-radius:12px;
  background:linear-gradient(160deg,#7c3aed,#5b21b6);color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.share-btn:disabled{opacity:.6;cursor:default}
/* Resaltado al llegar por deep link (#sec-pro) */
.sec.flash{animation:secflash 2.6s ease}
@keyframes secflash{0%,100%{box-shadow:none}20%,60%{box-shadow:0 0 0 3px #7c3aed,0 0 34px rgba(124,58,237,.55);border-radius:18px}}

/* Botón compartir agrupado de Blast Minute */
.share-btn.share-all{max-width:420px;margin:16px auto 4px;font-size:17px;padding:15px}

/* Banner del sorteo semanal Totalclapper */
.giveaway-banner{display:block;text-align:center;background:linear-gradient(90deg,#b8912a,#e6b93e);color:#241a05;font-weight:800;padding:9px 12px;text-decoration:none;font-size:.95rem;letter-spacing:.2px}
.giveaway-banner:hover{filter:brightness(1.06);color:#241a05}

/* ===== Rediseño home compacto 2026-10-04: franja % grande + chips chicos ===== */
.home-hero{background:linear-gradient(135deg,#7c3aed,#4c1d95);border:1px solid #6d28d9;border-radius:14px;padding:18px;margin-bottom:18px;color:#fff;box-shadow:var(--glow);text-align:center}
.home-hero .hh-top{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap}
.home-hero .hh-pct{font-size:38px;font-weight:900;line-height:1;color:#fff;letter-spacing:.5px}
.home-hero .hh-sub{font-size:15px;font-weight:700;color:#ede9fe}
.home-hero .hh-fecha{font-size:14px;font-weight:600;color:#ddd6fe;margin-top:8px}
.home-hero .hh-tag{font-size:12.5px;color:#e9e4ff;margin-top:4px;line-height:1.5}
.fine-line{font-size:12.5px;color:var(--mut);text-align:center;line-height:1.55;margin:16px 6px 4px}
.dep-filter{padding:12px 10px;margin-bottom:22px}
.dep-t{font-size:14px;margin-bottom:8px}
.dep-cap{font-size:11.5px}
.dep-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:8px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.dep-chip{flex-direction:row;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;flex:0 0 auto}
.dep-chip img{width:26px;height:20px}
.dep-chip span{font-size:12.5px}
.dep-chip .cnt{background:var(--olive);color:#fff;font-size:11px;font-weight:800;line-height:1.4;padding:1px 7px;border-radius:999px}
.giveaway-banner{padding:6px 12px;font-size:.85rem}

/* Análisis desplegable (2026-10-04): la explicación vive tras la flechita */
.ana{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.ana summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;font-weight:800;font-size:13.5px;color:var(--olive);padding:2px 0;-webkit-tap-highlight-color:transparent}
.ana summary::-webkit-details-marker{display:none}
.ana .arr{font-size:11px;transition:transform .15s}
.ana[open ] .arr{transform:rotate(180deg)}
.ana .wx,.ana .mini-tabla,.ana .just{margin-top:9px}
/* Gratis con botón que despliega (2026-10-04) */
.gteaser{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--glow);overflow:hidden}
.gteaser summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:10px 12px;-webkit-tap-highlight-color:transparent}
.gteaser summary::-webkit-details-marker{display:none}
.gteaser .timg{width:38px;height:38px;border-radius:50%;object-fit:contain;background:#fff;border:2px solid var(--gold);padding:3px;flex:none}
.gteaser .tfb{width:38px;height:38px;border-radius:50%;background:#ececf1;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-weight:800;color:#b8912a;font-size:14px;flex:none}
.gteaser .twho{flex:1;min-width:0;display:flex;flex-direction:column}
.gteaser .tj{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gteaser .te{color:var(--mut);font-size:12px}
.gteaser .gbtn{background:var(--green);color:#fff;font-weight:800;font-size:13px;border-radius:999px;padding:6px 12px;white-space:nowrap;flex:none}
.gteaser .arr{font-size:11px;color:var(--olive);transition:transform .15s;flex:none}
.gteaser[open ] .arr{transform:rotate(180deg)}
.gteaser .card{border:0;box-shadow:none;border-radius:0;border-top:1px dashed var(--line)}
/* Selecciones bloqueadas compactas (2026-10-04) */
.card.locked-c{padding:12px}
.lc-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.lc-lock{font-size:20px;flex:none}
.lc-main{flex:1;min-width:0;display:flex;flex-direction:column}
.lc-name{font-weight:800;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-desc{color:var(--mut);font-size:12.5px}
.lc-logos{display:flex;gap:6px;flex:none}
.lc-logos img{width:34px;height:34px;object-fit:contain;background:#fff;border-radius:9px;padding:4px;box-shadow:0 1px 5px rgba(0,0,0,.18)}
.lc-btn{display:block;text-align:center}
.lc-precio{text-align:center;color:var(--mut);font-size:12px;margin-top:6px}

/* Tarjeta de cierre del día (2026-10-09) */
.cierre-card{background:#14101f;color:#fff;border-radius:16px;padding:16px 18px;margin:14px 0}
.cierre-card h2{font-size:20px;margin:0 0 8px}
.cierre-rec{background:#2ecc71;color:#0b2417;border-radius:999px;padding:2px 10px;font-size:16px}
.cierre-card .marc-chip{border-color:#fff}
.cierre-tit{font-weight:700;margin:10px 0 6px}
.cierre-list{list-style:none;margin:0;padding:0}
.cierre-list li{padding:3px 0;font-size:15px}
.cierre-card .dep-cap{color:#cfc9e8}

/* Banner de resultados de ayer (2026-10-15): misma familia que el cierre,
   con borde dorado para distinguirlo del día en curso */
.ayer-card{background:#1c1735;border:1.5px solid rgba(255,215,94,.5)}
.ayer-fecha{color:#cfc9e8;font-weight:700;font-size:14px;margin:0 0 2px}
.ayer-div{color:#cfc9e8;font-size:13px;font-weight:700;white-space:nowrap}

/* Marcador en vivo por sección (2026-10-07) */
.marc{display:inline-block;background:#14101f;color:#fff;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;margin-left:6px;vertical-align:middle;white-space:nowrap}
.marc-strip{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:12px 0 4px}
.marc-chip{background:#fff;border:1.5px solid #14101f;color:#14101f;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700;white-space:nowrap}