/* =========================================================
   PENCA MULTI · APP PROTOTYPE
   Multi Soluciones · Mundial FIFA 2026
   Mobile-first interactive HTML mockup
   ========================================================= */

/* View Transitions — disolución al navegar + morph de elementos
   con el mismo view-transition-name (ej: card de grupo → deck card). */
@view-transition { navigation: auto; }
/* En mobile las view transitions quedaban mal (fantasma, barras navy con
   efecto raro en iOS). Se desactivan; en desktop siguen activas. */
@media (max-width: 639.98px) {
  @view-transition { navigation: none; }
  /* Sustituto: fade-in mínimo del contenido al entrar a la página. No tiene
     doble exposición (no hay overlap con la página vieja, esto corre solo
     después de que la nueva ya cargó), evita el "flash blanco" cuando el
     prefetch hace que la nav sea casi instantánea. */
  .screen.active { animation: pencaScreenIn .18s cubic-bezier(.4, 0, .2, 1) both; }
  @keyframes pencaScreenIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* Usuarios con reduced-motion: sin animación */
  @media (prefers-reduced-motion: reduce) {
    .screen.active { animation: none; }
  }
}
/* La página nueva entra sólida (sin fade); la vieja se disuelve por encima.
   Evita el cross-fade de doble exposición (las dos páginas superpuestas se ven
   como un fantasma sucio, sobre todo en iOS). */
::view-transition-new(root) { animation: none; }
::view-transition-old(root) {
  animation-duration: .26s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* El morph de la card (grupo → figurita) un toque más lento, con remate suave */
::view-transition-group(*) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.34, 1.1, .38, 1);
}

/* Bebas Neue self-hosted — sin DNS lookup ni TLS handshake externo */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/penca/assets/fonts/bebas-neue.woff2') format('woff2');
}

/* FIFA 26 — tipografía oficial del Mundial 2026 (reemplaza FWC2026 viejo).
   Solo usada en los trigrams (MEX, ARG, etc.) detrás de las cards del swipe
   deck y en la share card. Glyph squared/expanded → matchea las figuritas
   Panini reales. */
@font-face {
  font-family: 'FWC2026'; /* nombre de family se mantiene para no tocar todas las refs */
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/penca/assets/fonts/fifa-26.otf') format('opentype');
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }

/* El atributo HTML [hidden] DEBE ocultar siempre. Si una regla con clase
   declara display:flex/block después, gana en cascada y rompe el [hidden].
   Esta regla con !important previene ese bug en toda la app. */
[hidden] { display: none !important; }

:root {
  --navy:        #001B6B;
  --navy-deep:   #00103F;
  --navy-soft:   #0A2A8A;
  --blue:        #0172CC;
  --olive:       #95A748;
  --olive-bright:#B8CC5C;
  --cream:       #F5F1EA;
  --cream-2:     #EDE7DA;
  --bg:          #F7F4EE;
  --ink:         #0E1330;
  --muted:       #6B7280;
  --muted-soft:  #9CA3AF;
  --line:        #E8E2D5;
  --white:       #FFFFFF;
  --danger:      #DC2626;
  --success:     #059669;
  --gold:        #D4A82A;
  --penca-urgent:#E85D4E; /* coral — solo para acentos chicos de urgencia (deadline T-1h) */

  --radius:      18px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,27,107,.06), 0 1px 3px rgba(0,27,107,.04);
  --shadow:    0 4px 14px rgba(0,27,107,.08), 0 1px 4px rgba(0,27,107,.06);
  --shadow-lg: 0 18px 40px rgba(0,27,107,.18), 0 8px 16px rgba(0,27,107,.10);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

body {
  font-family: 'Sora', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, #E6DFCF 0%, transparent 60%),
    radial-gradient(1200px 800px at 110% 110%, #DDD6C5 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
}

/* ---- Desktop: phone frame floats ---- */
.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  min-height: 100vh;
  width: 100%;
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,27,107,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,27,107,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
.brand-watermark .casita {
  width: 36px; height: 36px;
  background: var(--navy);
  -webkit-mask: var(--casita-mask);
          mask: var(--casita-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.brand-watermark .name { font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; }
.brand-watermark .sub  { font-size: 11px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 2px;}

/* ---- Phone shell ---- */
.phone {
  position: relative;
  width: 390px;
  height: 844px;
  background: #0a0a0a;
  border-radius: 56px;
  padding: 12px;
  box-shadow: var(--shadow-lg), 0 0 0 2px #1a1a1a, 0 0 0 12px #2a2a2a;
  z-index: 2;
  transition: transform .3s var(--ease);
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--white);
  border-radius: 44px;
  overflow: hidden;
}
/* dynamic island */
.phone::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 32px;
  background: #0a0a0a;
  border-radius: 22px;
  z-index: 100;
  pointer-events: none;
}
.statusbar .signal { display: inline-flex; gap: 2px; align-items: flex-end; }
.statusbar .signal i {
  display: inline-block; width: 3px; background: currentColor; border-radius: 1px;
}
.statusbar .signal i:nth-child(1){ height: 4px;}
.statusbar .signal i:nth-child(2){ height: 6px;}
.statusbar .signal i:nth-child(3){ height: 8px;}
.statusbar .signal i:nth-child(4){ height: 10px;}

/* Screen container & screens */
.screens {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 44px;
}
.screen {
  position: absolute;
  inset: 0;
  background: var(--white);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(20px);
  transition: opacity .35s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
.screen.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: opacity .35s var(--ease), transform .4s var(--ease), visibility 0s;
  z-index: 5;
}
.screen.exit-left { transform: translateX(-20px); }

.screen-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 110px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.screen-body::-webkit-scrollbar { width: 4px; }
.screen-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* ---- Reusable header for content screens ---- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: calc(26px + env(safe-area-inset-top, 0px)) 22px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
}
/* Cuando hay lomo álbum encima, no doble-counter la safe-area-top.
   El header sticky se pega DEBAJO del lomo (que ya es sticky arriba). */
.app-header--with-spine {
  padding-top: 22px !important;
  top: calc(56px + env(safe-area-inset-top, 0px));
}
.app-header.navy { background: var(--navy); color: #fff; }
.app-header h1 {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--navy);
}
.app-header .iconbtn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cream);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
  position: relative;
}
.app-header.navy .iconbtn { background: rgba(255,255,255,.1); }
.app-header .iconbtn:active { transform: scale(.92); }
.app-header .iconbtn svg { width: 20px; height: 20px; stroke: var(--navy); }
.app-header.navy .iconbtn svg { stroke: #fff; }
.app-header .iconbtn .dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px;
  background: var(--olive);
  border: 2px solid var(--cream);
  border-radius: 50%;
}
.app-header.navy .iconbtn .dot { border-color: var(--navy); }

/* ---- Bottom nav ---- */
.tabbar {
  position: absolute !important;
  bottom: 0; left: 0; right: 0;
  /* Tabbar navy sólido → iconos blancos legibles + "azul" consistente
     debajo de la barra en todas las páginas. */
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 10px 12px 28px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 20;
  border-radius: 0 0 44px 44px;
  transition: transform .35s var(--ease);
}
.tabbar.hidden { transform: translateY(110%); }
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  border: none;
  background: transparent;
  /* Blanco sólido (sin alpha) — el alpha hacía que los trazos finos de los
     iconos se vieran "líneas". El tab activo se marca con el indicador olive. */
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  transition: color .2s var(--ease);
  position: relative;
}
.tab svg { width: 22px; height: 22px; stroke-width: 2; transition: transform .3s var(--ease-spring); }
.tab.active { color: #fff; }
/* Indicador del tab activo: pill detrás SOLO del ícono (estilo Material 3).
   El label va afuera del pill → sin apreturas con labels largos. */
.tab-ico {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 32px;
  border-radius: 999px;
  transition: background-color .2s var(--ease);
}
.tab.active .tab-ico { background-color: rgba(255,255,255,.18); }
.tab-lbl { line-height: 1; }

/* ============== SPLASH ============== */
#screen-splash {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  align-items: center;
  justify-content: center;
  color: #fff;
}
#screen-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(149,167,72,.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(1,114,204,.18) 0%, transparent 40%);
  pointer-events: none;
}
@keyframes splashLogo {
  0% { transform: scale(.4) translateY(-20px); opacity: 0; }
  60% { transform: scale(1.08) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes splashLoad {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@keyframes splashIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============== LOGIN ============== */
#screen-login {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 60px 24px 24px;
}
#screen-login::before {
  content: "";
  position: absolute;
  bottom: -240px; right: -120px;
  width: 400px; height: 400px;
  background: var(--casita-mask);
  -webkit-mask: var(--casita-mask);
          mask: var(--casita-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background: rgba(255,255,255,.04);
}
.login-top {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 60px;
  animation: fadeUp .6s var(--ease-out) both;
}
.login-top .casita {
  width: 42px; height: 42px;
  background: #fff;
  -webkit-mask: var(--casita-mask);
          mask: var(--casita-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.login-top .name {
  font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
}
.login-top .sub { font-size: 10px; color: var(--olive-bright); letter-spacing: 2px; text-transform: uppercase; }

.login-eyebrow {
  font-size: 11px; color: var(--olive-bright); letter-spacing: 3px;
  text-transform: uppercase; font-weight: 600; margin-bottom: 12px;
  animation: fadeUp .6s .1s var(--ease-out) both;
}
.login-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
  animation: fadeUp .6s .2s var(--ease-out) both;
}
.login-title em {
  font-style: normal;
  color: var(--olive-bright);
}
.login-sub {
  font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.5;
  margin-bottom: 36px; max-width: 320px;
  animation: fadeUp .6s .3s var(--ease-out) both;
}

.login-form {
  display: flex; flex-direction: column; gap: 14px;
  animation: fadeUp .6s .4s var(--ease-out) both;
  position: relative;
  z-index: 1;
}
.field {
  position: relative;
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.13);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field:focus-within {
  border-color: var(--olive-bright);
  background: rgba(255,255,255,.10);
}
.field label {
  font-size: 10px; color: rgba(255,255,255,.55); letter-spacing: 2px;
  text-transform: uppercase; font-weight: 600;
}
.field input {
  background: transparent; border: none; outline: none;
  color: #fff; font-family: inherit; font-size: 16px; font-weight: 500;
  padding: 4px 0;
}
.field input::placeholder { color: rgba(255,255,255,.35); }
.field .prefix { color: rgba(255,255,255,.5); margin-right: 6px; font-weight: 500; }
.field-row { display: flex; align-items: center; gap: 0; }

.btn-primary {
  background: var(--olive);
  color: var(--navy);
  border: none;
  padding: 16px 24px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .15s var(--ease), background .15s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 6px 18px rgba(149,167,72,.45);
}
.btn-primary:active { transform: scale(.98); }
.btn-primary svg { width: 18px; height: 18px; }

.btn-ghost {
  background: transparent;
  color: rgba(255,255,255,.7);
  border: none;
  padding: 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  letter-spacing: .2px;
}
.btn-ghost b { color: var(--olive-bright); font-weight: 700; }

.login-foot {
  margin-top: auto;
  font-size: 11px; color: rgba(255,255,255,.5);
  text-align: center;
  padding-top: 24px;
  letter-spacing: .3px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============== ONBOARDING ============== */
#screen-onboard {
  background: var(--cream);
  padding: 60px 0 0;
}
.onb-dots i.active { width: 24px; border-radius: 4px; background: var(--navy); }

/* Illustration shapes */
.illust-1 .ball, .illust-1 .pencil, .illust-1 .pin {
  position: absolute;
}
.illust-2 .progress-row .check { width: 22px; height: 22px; border-radius: 50%; background: var(--olive); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.illust-2 .progress-row .check.empty { background: var(--cream); color: var(--muted); }
.illust-2 .progress-row .pts { margin-left: auto; color: var(--olive); font-weight: 700; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ============== HOME ============== */
.home-hero {
  background: var(--navy);
  color: #fff;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 22px 28px;
  border-radius: 0 0 32px 32px;
  position: relative;
  overflow: hidden;
}
/* Cuando el home tiene el lomo álbum arriba, el hero no absorbe safe-area-top */
.home-hero--with-spine {
  padding-top: 24px;
}
.home-hero::before {
  content: "";
  position: absolute;
  top: -40px; right: -60px;
  width: 240px; height: 240px;
  background: rgba(255,255,255,.04);
  -webkit-mask: var(--casita-mask);
          mask: var(--casita-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.home-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.greet-left .hello {
  font-size: 12px; color: rgba(255,255,255,.6);
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px;
}
.greet-left .name { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.greet-right {
  display: flex; gap: 8px;
}
.greet-right .iconbtn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform .15s var(--ease), background .15s var(--ease);
}
.greet-right .iconbtn:active { transform: scale(.92); }
.greet-right .iconbtn svg { width: 18px; height: 18px; stroke: #fff; }
.greet-right .iconbtn .badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--olive);
  border: 2px solid var(--navy);
  border-radius: 50%;
}

/* Stats card */
.stats-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.stats-card .rank-badge {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 1px;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(149,167,72,.3);
  flex-shrink: 0;
}
.stats-card .rank-badge .label {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .8;
  margin-top: -2px;
}
.stats-card .rank-info { flex: 1; }
.stats-card .rank-info .lbl { font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 2px; }
.stats-card .rank-info .val { font-size: 14px; font-weight: 600; }
.stats-card .rank-info .val em { font-style: normal; color: var(--olive-bright); }
.stats-card .arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
}
.stats-card .arrow svg { width: 16px; height: 16px; stroke: #fff; }

/* ============== CUPÓN (mis-cupones.php) ============== */
.cupon-card {
  margin: 18px 22px 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 18px;
  position: relative;
}
.cupon-card--active { border-color: var(--olive); box-shadow: 0 8px 24px rgba(149,167,72,.18); }
.cupon-card--inactive { opacity: .6; }
.cupon-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.cupon-card-fase {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--olive);
}
.cupon-card-estado {
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
}
.cupon-estado--activo   { background: var(--olive); color: #fff; }
.cupon-estado--canjeado { background: var(--cream); color: var(--muted); }
.cupon-estado--vencido  { background: rgba(220,38,38,.10); color: var(--danger); }
.cupon-card-desc {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 22px; line-height: 1.1; letter-spacing: .5px;
  color: var(--navy); margin-bottom: 16px;
}
.cupon-qr {
  display: flex; justify-content: center;
  padding: 12px; background: #fff;
  border-radius: 14px; border: 1px solid var(--line);
  margin: 4px 0 14px;
}
.cupon-qr img { display: block; width: 240px; height: 240px; max-width: 100%; }
.cupon-codigo {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  background: var(--cream); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px;
}
.cupon-codigo-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}
.cupon-codigo-num {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 32px; letter-spacing: 4px; color: var(--navy);
  font-feature-settings: "tnum";
}
.cupon-instruc {
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink); text-align: center;
  padding: 0 4px;
}
.cupon-instruc b { color: var(--navy); }
.cupon-vence {
  text-align: center; margin-top: 8px;
  font-size: 11px; color: var(--muted);
}
.cupon-card-meta { font-size: 12px; color: var(--muted); }

/* === CARD PENDIENTES + MODAL (predictions.php) === */
.pendientes-card {
  display: flex; align-items: center; gap: 14px;
  width: calc(100% - 44px);
  margin: 4px 22px 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer; font-family: inherit; text-align: left;
  box-shadow: 0 6px 18px rgba(0,16,63,.25);
  transition: transform .15s var(--ease);
}
.pendientes-card:active { transform: scale(.99); }
.pendientes-card-num {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--olive-bright);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 22px; line-height: 1; letter-spacing: .5px;
}
.pendientes-card-body { flex: 1 1 auto; min-width: 0; }
.pendientes-card-title { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.pendientes-card-sub { display: block; font-size: 11.5px; color: rgba(255,255,255,.65); margin-top: 2px; }

.pendientes-modal {
  width: 100%; max-width: 460px;
  max-height: 88vh;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 22px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.pendientes-modal-close {
  position: absolute; top: 8px; right: 12px;
  background: transparent; border: 0;
  color: var(--muted);
  font-size: 26px; line-height: 1;
  cursor: pointer; padding: 6px 12px;
}
.pendientes-modal-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: 2px;
  color: var(--olive); text-transform: uppercase;
  text-align: center; margin-bottom: 6px;
}
.pendientes-modal-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 24px; font-weight: 400; letter-spacing: .5px;
  color: var(--navy); line-height: 1.1;
  text-align: center; padding: 0 22px; margin: 0;
}
.pendientes-modal-sub {
  font-size: 12.5px; color: var(--muted);
  text-align: center; margin: 6px 22px 14px;
}
/* Tabs Pendientes / Cargados dentro del modal */
.pendientes-tabs {
  display: flex;
  gap: 6px;
  margin: 0 22px 12px;
  background: rgba(0,16,63,.05);
  border-radius: 10px;
  padding: 4px;
}
.pendientes-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pendientes-tab.active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 2px 6px rgba(0,16,63,.10);
}
/* Row variant para pronósticos ya cargados — score como pill grande a la
   derecha (no texto suelto debajo del segundo equipo). */
.pendientes-row--done {
  background: rgba(149,167,72,.06);
  border-color: rgba(149,167,72,.18);
}
.pendientes-row--done .pendientes-row-arrow { display: none; }
.pendientes-row-score {
  flex: 0 0 auto;
  min-width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: rgba(149,167,72,.14);
  border-radius: 10px;
  margin-left: auto;
}
.pendientes-row-score-num {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 22px;
  line-height: 1;
  color: var(--olive);
  letter-spacing: 1px;
}
.pendientes-row-score-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
/* Card done variant para "Ver/editar tus N pronósticos" */
.pendientes-card--done {
  border-color: var(--olive) !important;
}
.pendientes-card--done .pendientes-card-num {
  background: var(--olive) !important;
  color: #fff !important;
}
.pendientes-list {
  flex: 1 1 auto;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}
.pendientes-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.pendientes-row:active { background: var(--cream); }
.pendientes-row-when {
  flex: 0 0 auto;
  text-align: center;
  min-width: 44px;
}
.pendientes-row-day {
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted);
}
.pendientes-row-date {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 22px; line-height: 1; color: var(--navy);
}
.pendientes-row-vs { flex: 1 1 auto; min-width: 0; }
.pendientes-row-team {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: 2px;
}
.pendientes-row-team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pendientes-row-group {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: var(--olive); text-transform: uppercase; margin-top: 2px;
}
.pendientes-row-arrow {
  flex: 0 0 auto;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; color: var(--muted); line-height: 1;
}

/* === HITO VIRAL — predictions.php cuando el player completó todo === */
.viral-done {
  margin: 20px 22px 20px;
  padding: 22px 20px 18px;
  /* V1 · Panini multicolor: cream warm + border navy + grilla con colores
     reales de los 12 grupos. El "álbum lleno" se VE, no se cuenta. */
  background: linear-gradient(180deg, #FBF6E9 0%, #F1E9D4 100%);
  border: 2px solid var(--navy);
  border-radius: var(--radius-lg);
  color: var(--navy);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,16,63,.12);
}
/* Grilla 6×2 con los 12 grupos exactos del Mundial 26 (A-L) */
.viral-figuritas {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-bottom: 16px;
  padding: 8px;
  background: rgba(0,16,63,.06);
  border-radius: 10px;
}
.viral-figurita {
  aspect-ratio: 3/4;
  border-radius: 3px;
  position: relative;
  border: 1px solid rgba(0,16,63,.10);
  overflow: hidden;
}
.viral-figurita::after {
  content: '✓';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--navy); font-weight: 900; font-size: 11px;
  background: #fff;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,16,63,.18);
}
/* Colores reales A-L del DNA Panini del proyecto */
.viral-figurita[data-g="A"] { background: #3FAC4D; }
.viral-figurita[data-g="B"] { background: #D8252E; }
.viral-figurita[data-g="C"] { background: #F5C522; }
.viral-figurita[data-g="D"] { background: #26B7B5; }
.viral-figurita[data-g="E"] { background: #E07823; }
.viral-figurita[data-g="F"] { background: #3FBFB1; }
.viral-figurita[data-g="G"] { background: #7FB3D9; }
.viral-figurita[data-g="H"] { background: #9F8BD0; }
.viral-figurita[data-g="I"] { background: #B8CC5C; }
.viral-figurita[data-g="J"] { background: #F5A8A8; }
.viral-figurita[data-g="K"] { background: #D43F86; }
.viral-figurita[data-g="L"] { background: #7D1A2B; }
.viral-done-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: 2.5px;
  color: var(--navy); text-transform: uppercase;
  margin-bottom: 10px;
}
.viral-done-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 30px; font-weight: 400; letter-spacing: .8px;
  color: var(--navy); line-height: 1.05; margin-bottom: 8px;
}
.viral-done-sub {
  font-size: 13px; color: rgba(0,16,63,.70);
  line-height: 1.5; margin-bottom: 18px;
}
.viral-done-sub b { color: var(--navy); font-weight: 800; }
.viral-done-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%; box-sizing: border-box;
  padding: 14px 20px;
  background: #25D366; color: #fff;
  border-radius: 999px;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 17px; letter-spacing: 1px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(37,211,102,.40);
  transition: transform .15s var(--ease);
}
.viral-done-cta:active { transform: scale(.98); filter: brightness(.95); }
.viral-done-secondary {
  display: block; margin-top: 12px;
  font-size: 12px; color: rgba(0,16,63,.60);
  text-decoration: none; text-align: center;
}
.viral-done-secondary:hover { color: var(--olive); }

/* CTA de instalar PWA — card al pie de home, adaptativa por plataforma */
.install-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - 44px);
  margin: 18px 22px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a0f3a 100%);
  border: 1px solid rgba(212,168,42,.30);
  border-radius: var(--radius);
  color: #fff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  box-shadow: 0 8px 22px rgba(0,16,63,.20);
  transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.install-card:hover  { border-color: var(--gold); }
.install-card:active { transform: scale(.99); }
.install-card-ico { font-size: 26px; flex: 0 0 auto; line-height: 1; }
.install-card-body { flex: 1 1 auto; min-width: 0; }
.install-card-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 18px;
  letter-spacing: .8px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 3px;
}
.install-card-sub { font-size: 12px; color: rgba(255,255,255,.75); line-height: 1.4; }
.install-card-go {
  flex: 0 0 auto;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: var(--gold);
  margin-right: 24px;
  line-height: 1;
}
.install-card-dismiss {
  position: absolute;
  top: 6px; right: 8px;
  background: transparent; border: 0;
  color: rgba(255,255,255,.45);
  font-size: 18px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
}
.install-card-dismiss:hover { color: #fff; }

/* Modal de instrucciones (iOS Safari + iOS otros) */
.install-modal {
  position: fixed; inset: 0; z-index: 920;
  background: rgba(0, 8, 31, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  overscroll-behavior: contain;
}
.install-modal[hidden] { display: none; }
.install-modal-card {
  position: relative;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  border-radius: 22px;
  padding: 26px 24px 22px;
  width: 100%; max-width: 380px;
  box-shadow: 0 40px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.07);
}
.install-modal-close {
  position: absolute; top: 8px; right: 12px;
  background: transparent; border: 0;
  color: rgba(255,255,255,.55);
  font-size: 26px; line-height: 1;
  cursor: pointer; padding: 6px 12px;
}
.install-modal-close:hover { color: #fff; }
.install-modal-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--gold); text-transform: uppercase; margin-bottom: 6px;
}
.install-modal-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 26px; line-height: 1.05; letter-spacing: .5px;
  margin: 0 0 16px;
}
.install-steps {
  padding-left: 20px; margin: 0 0 14px;
  color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.6;
}
.install-steps li { margin-bottom: 8px; }
.install-steps b { color: var(--olive-bright); }
.install-modal-body code {
  background: rgba(255,255,255,.10); padding: 2px 6px;
  border-radius: 4px; font-size: 12px; color: var(--olive-bright);
}
.install-modal-note {
  font-size: 12px; color: rgba(255,255,255,.55);
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px; margin: 12px 0 0;
}
.install-modal-cta {
  display: block;
  width: 100%;
  margin: 18px 0 0;
  padding: 14px;
  background: var(--olive);
  color: var(--navy);
  border: 0;
  border-radius: 999px;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 16px;
  letter-spacing: 1.2px;
  cursor: pointer;
  font-weight: 700;
}
.install-modal-cta:active { transform: scale(.98); background: var(--olive-bright); }

/* Link discreto "Iniciar sesión" para visitors anon que ya tienen cuenta. */
.anon-login-link {
  margin: 14px 22px 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.anon-login-link button {
  background: none; border: 0; padding: 0;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Toast social: anuncia el último ganador de premio en home (24h post-cierre) */
.premio-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 22px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--olive) 0%, var(--olive-bright) 100%);
  color: var(--navy);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(149,167,72,.25);
}
.premio-toast b { font-weight: 700; }
.premio-toast-ico { font-size: 22px; flex: 0 0 auto; }

/* ============== PREMIOS ENTREGADOS (home + modal) ==============
   Lista cronológica que crece a medida que avanza el Mundial. Cada row
   muestra fase + ganador + puntos al cierre + fecha. */
.premios-feed {
  margin: 8px 22px 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.premio-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}
.premio-row + .premio-row { border-top: 1px solid var(--line); }
.premio-trophy { font-size: 20px; line-height: 1; }
.premio-fase {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 2px;
}
.premio-ganador {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.premio-ganador b { color: var(--navy); font-weight: 700; }
.premio-fecha {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 14px;
  letter-spacing: .5px;
  color: var(--muted);
}

/* Variante dentro del modal de premios (fondo navy) */
.prizes-modal-card .premios-feed {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  margin: 14px 20px 0;
}
.prizes-modal-card .premio-row + .premio-row { border-top-color: rgba(255,255,255,.08); }
.prizes-modal-card .premio-fase { color: var(--olive-bright); }
.prizes-modal-card .premio-ganador { color: rgba(255,255,255,.92); }
.prizes-modal-card .premio-ganador b { color: var(--olive-bright); }
.prizes-modal-card .premio-fecha { color: rgba(255,255,255,.55); }
.prizes-modal-feed-title {
  margin: 14px 20px 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--olive-bright);
  text-transform: uppercase;
}

/* CTA del Recap en home (post-final) — gold accent */
.recap-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 22px 0;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--navy) 0%, #1a0f3a 100%);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.recap-cta::after {
  content: '→';
  position: absolute;
  right: 16px; top: 50%; transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  color: var(--gold);
}
.recap-cta-ico { font-size: 28px; flex: 0 0 auto; }
.recap-cta-body { flex: 1 1 auto; min-width: 0; padding-right: 24px; }
.recap-cta-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--gold);
  line-height: 1;
}
.recap-cta-sub { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 4px; }

/* ============== RECAP "WRAPPED" (/recap.php) ==============
   Página personal post-final con stats del player. Fondo navy oscuro,
   numerales gigantes Bebas Neue, share por WhatsApp. */
.recap-hero {
  padding: 22px 22px 18px;
  text-align: left;
  position: relative;
}
.recap-back {
  position: absolute;
  top: 16px; right: 18px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.10);
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  text-decoration: none;
}
.recap-eyebrow {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 8px;
}
.recap-name {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 38px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: .5px;
  color: #fff;
}
.recap-preview-note {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  padding: 8px 12px;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
}
.recap-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 20px 16px;
  color: #fff;
  text-align: center;
}
.recap-stat--hero {
  margin: 8px 22px 0;
  padding: 28px 22px;
  background: linear-gradient(180deg, rgba(212,168,42,.15) 0%, rgba(255,255,255,.04) 100%);
  border-color: rgba(212,168,42,.30);
  position: relative;
}
.recap-stat-num {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 80px;
  line-height: 1;
  letter-spacing: 1px;
  color: #fff;
}
.recap-stat--hero .recap-stat-num {
  font-size: 120px;
  color: var(--gold);
}
.recap-stat-num-sub {
  font-size: 36px;
  margin-left: 4px;
  opacity: .55;
}
.recap-stat-label {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  line-height: 1.3;
}
.recap-stat-label span { color: rgba(255,255,255,.45); font-weight: 500; }
.recap-stat-pct {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--gold);
  color: var(--navy);
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 999px;
}
.recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 22px 0;
}
.recap-grid .recap-stat-num { font-size: 48px; }
.recap-section-title {
  margin: 24px 22px 8px;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--gold);
}
.recap-best {
  margin: 0 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 16px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.recap-best-teams {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: 600;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.recap-best-vs { opacity: .5; }
.recap-best-scores {
  font-size: 12px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
}
.recap-best-scores b { color: var(--olive-bright); font-weight: 700; }
.recap-best-pts {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 28px;
  color: var(--gold);
  letter-spacing: 1px;
}
.recap-preview {
  margin: 28px 22px 0;
  text-align: center;
}
.recap-preview-img {
  display: block;
  max-width: 240px;
  width: 60%;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.10);
}
.recap-preview-cap {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}
.recap-share {
  margin: 18px 22px 0;
  text-align: center;
}
.recap-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: 0;
  cursor: pointer;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  text-decoration: none;
}
.recap-share-btn--primary {
  background: var(--gold);
  color: var(--navy);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(212,168,42,.30);
}
.recap-share-fallback {
  margin-top: 14px;
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.recap-share-mini {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.65); font-size: 12px;
  text-decoration: none;
}
.recap-share-mini:hover { color: #fff; }
.recap-thanks {
  margin: 28px 22px 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
}
.recap-thanks span { display: block; margin-top: 4px; color: rgba(255,255,255,.40); }
.recap-thanks b { color: rgba(255,255,255,.75); font-weight: 600; }
#screen-recap { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); min-height: 100vh; }

/* ============== HALL OF FAME (ranking post-final) ==============
   Cuando la final está finalizada, el rank-hero se transforma en
   "Hall of Fame · Campeones de la Penca Multi". Eyebrow gold,
   leyenda especial con la dirección del local Multi. */
.rank-hero--hof::before {
  /* Brillo gold sutil arriba */
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
}
.rank-hero--hof { position: relative; }
.hof-eyebrow {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 6px;
}
.rank-hero--hof h1 {
  color: #fff;
}
.rank-hero--hof .podium-bar { background: linear-gradient(180deg, var(--gold) 0%, #b8902f 100%) !important; color: var(--navy) !important; }
.rank-hero--hof .podium-spot.first .podium-bar { box-shadow: 0 0 30px rgba(212,168,42,.45); }

/* ============== HERO DE LA GRAN FINAL ==============
   Render alternativo del live card cuando $live['fase'] === 'final'.
   Scoreboard cinematográfico XL + apuestas del Top 3 visibles. */
.final-hero {
  display: block;
  margin: 18px 22px 0;
  padding: 22px 18px 18px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 60%, #1a0f3a 100%);
  border: 1px solid rgba(212,168,42,.35);
  border-radius: var(--radius-lg);
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}
.final-hero::before {
  /* Brillo gold sutil arriba */
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
}
.final-hero-eyebrow {
  text-align: center;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--gold);
  margin-bottom: 18px;
}
.final-hero-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 0 14px;
}
.final-hero-team { text-align: center; }
.fh-flag {
  display: flex; justify-content: center;
  margin-bottom: 8px;
}
.fh-name {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1.05;
}
.final-hero-score {
  text-align: center;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 52px;
  line-height: 1;
  letter-spacing: 2px;
  color: #fff;
}
.final-hero-score .sep { margin: 0 4px; opacity: .5; }
.fh-live-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  background: rgba(232,93,78,.16);
  color: var(--penca-urgent);
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
}
.fh-live-tag .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--penca-urgent);
  animation: pulse 1.4s ease-in-out infinite;
}
.fh-yourpred {
  text-align: center;
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  margin: 6px 0 14px;
}
.fh-yourpred b { color: var(--olive-bright); font-weight: 700; }
.fh-podium {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
}
.fh-podium-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
}
.fh-podium-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 12.5px;
}
.fh-podium-row + .fh-podium-row { border-top: 1px solid rgba(255,255,255,.06); }
.fh-podium-pos {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 16px;
  color: var(--gold);
}
.fh-podium-name { color: rgba(255,255,255,.85); }
.fh-podium-pred {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 14px;
  letter-spacing: .5px;
  color: var(--olive-bright);
}

/* Fixture preview pre-Mundial (resultados.php) — usa el color oficial
   Panini de cada grupo, separa bloques con aire generoso y suma un
   botón "Pronosticar" al lado de cada partido. */
.fx-group {
  margin: 0 22px 22px;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.fx-group + .fx-group { margin-top: 18px; }
.fx-group-head {
  background: var(--g-color);
  color: var(--g-text);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fx-group-tag {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  flex: 1 1 auto;
}
.fx-group-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .8;
}
.fx-cards {
  display: flex;
  flex-direction: column;
}
.fx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
  border-top: 1px solid var(--line);
}
.fx-row:first-child { border-top: 0; }
.fx-card {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.fx-when {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
}
.fx-teams {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fx-teams .vs { opacity: .45; font-weight: 500; font-size: 11px; margin: 0 2px; }
.fx-pred {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .15s var(--ease);
}
.fx-pred:hover  { text-decoration: underline; }
.fx-pred:active { opacity: .7; }

/* Teaser pre-Mundial: tarjeta liviana que linkea a /resultados.php
   (fixture preview). Solo visible mientras !$mundialEmpezo. */
.hub-teaser {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 22px 0;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.hub-teaser:hover  { border-color: var(--olive-bright); }
.hub-teaser:active { transform: scale(.99); }
.hub-teaser-ico {
  flex: 0 0 auto;
  font-size: 26px;
  line-height: 1;
}
/* Mini-fixture: dos banderas + vs en vez del emoji genérico. */
.hub-teaser-fixture {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0;
}
.hub-teaser-fixture img,
.hub-teaser-fixture svg {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,16,63,.10);
  flex: 0 0 auto;
}
.hub-teaser-vs {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  padding: 0 2px;
}
.hub-teaser-body { flex: 1 1 auto; min-width: 0; }
.hub-teaser-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 18px;
  letter-spacing: .5px;
  color: var(--navy);
  line-height: 1.1;
}
.hub-teaser-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* "Tu próxima jugada" CTA del home — patrón álbum con numeral monumental */
.next-play-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 22px 0;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--olive) 0%, var(--olive-bright) 100%);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(149,167,72,.30);
  text-decoration: none;
  color: var(--navy);
  position: relative;
  overflow: hidden;
}
.next-play-cta::after {
  /* Numeral fantasma de fondo (como FECHA en predict) */
  content: '→';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: rgba(0,16,63,.20);
  line-height: 1;
}
.next-play-num {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 56px;
  font-weight: 400;
  color: var(--navy);
  line-height: .9;
  letter-spacing: 1px;
  flex-shrink: 0;
  min-width: 38px;
  text-align: center;
}
.next-play-body { flex: 1; }
.next-play-eyebrow {
  font-size: 10px;
  color: var(--navy);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 800;
  opacity: .65;
}
.next-play-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: .5px;
  line-height: 1.1;
  margin-top: 2px;
}
.next-play-sub {
  font-size: 12px;
  color: var(--navy);
  opacity: .75;
  font-weight: 600;
  margin-top: 4px;
}

/* Section heading */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 28px 22px 12px;
}
.section-head h2 {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 18px;
  color: var(--navy);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
}
.section-head h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 14px;
  background: var(--olive);
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 8px;
  margin-top: -2px;
}
.section-head .more {
  font-size: 12px; color: var(--navy); font-weight: 700;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  display: flex; align-items: center; gap: 4px;
}
.section-head .more svg { width: 12px; height: 12px; stroke: var(--navy); stroke-width: 2.5; }

/* Live match card */
.match-live {
  display: block;
  margin: 0 22px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s var(--ease);
}
.match-live:active { transform: scale(.99); }
.match-live::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: rgba(149,167,72,.12);
  border-radius: 50%;
}
.match-live .live-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(220,38,38,.15);
  color: #FCA5A5;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  position: relative; z-index: 1;
}
.match-live .live-tag .pulse {
  width: 6px; height: 6px;
  background: #EF4444;
  border-radius: 50%;
  animation: pulseDot 1.4s infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  70% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.match-live .live-time { font-size: 11px; color: rgba(255,255,255,.6); margin-left: 8px; }
.match-live .teams {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px;
  position: relative; z-index: 1;
}
.match-live .team {
  display: flex; flex-direction: column; align-items: center;
  flex: 1;
}
.match-live .team .flag {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
  margin-bottom: 8px;
}
.match-live .team .name {
  font-weight: 700; font-size: 14px; letter-spacing: .5px;
}
.match-live .score-block {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 14px;
}
.match-live .score {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 52px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  font-feature-settings: "tnum";
  display: flex; gap: 14px; align-items: baseline;
}
.match-live .score .sep { color: rgba(255,255,255,.3); font-size: 36px; letter-spacing: 0; }
.match-live .pred {
  margin-top: 4px;
  font-size: 10px; color: var(--olive-bright);
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
}
.match-live .live-bottom {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
.match-live .live-bottom .your-pred {
  font-size: 11px; color: rgba(255,255,255,.6);
}
.match-live .live-bottom .your-pred b { color: #fff; font-weight: 700; }
.match-live .live-bottom .pts {
  background: var(--olive);
  color: var(--navy);
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

/* Upcoming match card (small) */
.match-card {
  background: var(--white);
  border-radius: 18px;
  border: 1px solid var(--line);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .2s var(--ease);
  position: relative;
}
.match-card:active { transform: scale(.99); }
.match-card.predicted { border-color: var(--olive); }
.match-card.predicted::before {
  content: "✓";
  position: absolute; top: 12px; right: 12px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--olive); color: var(--navy);
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.match-card .when {
  display: flex; flex-direction: column; align-items: center;
  width: 52px; flex-shrink: 0;
}
.match-card .when .day {
  font-size: 10px; color: var(--muted); letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 700;
}
.match-card .when .date {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 30px;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: 1px;
  line-height: 1;
}
.match-card .when .time {
  font-size: 10px; color: var(--muted); margin-top: 2px;
}
.match-card .versus {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.match-card .versus .row { display: flex; align-items: center; gap: 8px; }
.match-card .versus .row .flag { font-size: 18px; }
.match-card .versus .row .nm { font-size: 13px; font-weight: 600; color: var(--ink); }
.match-card .versus .group {
  font-size: 9px; color: var(--muted); letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 700;
  margin-top: 2px;
}
.match-card .arrow-right {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.match-card .arrow-right svg { width: 12px; height: 12px; stroke: var(--navy); stroke-width: 2.5; }

/* Card stack list */
.cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 22px;
}
.cta-banner .icon-wrap {
  width: 48px; height: 48px;
  background: var(--navy); color: var(--olive-bright);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  z-index: 1;
}
.cta-banner .text { z-index: 1; flex: 1; }
.cta-banner .text .t { font-size: 14px; font-weight: 700; color: var(--navy); }
.cta-banner .text .s { font-size: 12px; color: rgba(0,27,107,.7); margin-top: 2px; }
.cta-banner .arrow {
  width: 32px; height: 32px;
  background: var(--navy);
  color: var(--olive-bright);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.cta-banner .arrow svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; }

/* Quick stats row */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 22px;
  margin-top: 14px;
}
/* Cuando va dentro del hero, el padding del hero ya inseta — sin doble inset */
.home-hero .quick-stats { padding: 0; }
.qstat {
  background: var(--cream);
  border-radius: 14px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qstat .v { font-family: 'Bebas Neue', 'Sora', sans-serif; font-size: 32px; font-weight: 400; color: var(--navy); letter-spacing: 1px; line-height: 1; }
.qstat .l { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }

/* ============== PRONÓSTICOS LIST ============== */
.filters {
  display: flex;
  gap: 8px;
  padding: 14px 22px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--muted);
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s var(--ease);
}
.chip.active {
  background: var(--navy);
  color: var(--olive-bright);
  border-color: var(--navy);
}
.chip:active { transform: scale(.96); }

/* Day group */
.day-group {
  margin-top: 18px;
}
.day-group-head {
  display: flex; align-items: center; gap: 12px;
  padding: 0 22px;
  margin-bottom: 10px;
}
.day-group-head .dot {
  width: 8px; height: 8px;
  background: var(--olive);
  border-radius: 50%;
}
.day-group-head .label {
  font-size: 11px; color: var(--ink); letter-spacing: 2px;
  text-transform: uppercase; font-weight: 700;
}
.day-group-head .count {
  font-size: 11px; color: var(--muted); margin-left: auto;
}
.day-group .cards-list { padding: 0 22px; }

/* ============== MATCH DETAIL / PREDICT ============== */
#screen-predict {
  background: #EDE6D8;
  /* min-height: 100vh (= alto máximo, igual que el .phone-screen) → el sand
     tapa SIEMPRE el blanco del .phone-screen. Con dvh se achicaba al mostrarse
     la barra del navegador y asomaba blanco abajo del card. */
  min-height: 100vh;
  min-height: 100lvh;
}

/* Swipe deck — card real 320×440, centrada. Aire alrededor = la profundidad
   tiene dónde leer y los efectos físicos (rotate/scale) caen como objeto. */
.swipe-deck {
  position: relative;
  width: 360px;     /* ancho del card (era 320) */
  height: 440px;
  margin: 0 auto;
}
.swipe-card {
  position: absolute;
  /* Llena el deck (que a su vez llena el viewport disponible) → el card se
     adapta a CUALQUIER pantalla, sin alto fijo. */
  top: 0; left: 0; right: 0; bottom: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* clipea trigrams que sangran fuera del borde — el card no muestra contenido afuera de sus rounded corners */
  background: var(--cream);
  border-radius: 22px;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.swipe-card--top {
  z-index: 10;
  /* La card maneja su gesto (swipe) por JS; el navegador no debe scrollear ni
     rebotar. Evita que el scroll de la página pelee con el de la ruedita. */
  touch-action: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    0 2px 6px rgba(0,16,63,.10),
    0 14px 28px -8px rgba(0,16,63,.22),
    0 32px 64px -16px rgba(0,16,63,.32);
  /* drop-shadow respeta la silueta — sombra que se ve incluso contra
     las bandas navy de las cards de atrás (donde la box-shadow navy desaparece). */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)) drop-shadow(0 8px 12px rgba(0,0,0,.10));
}
/* Card del próximo partido: misma posición/tamaño que el top, justo debajo.
   Lleva la sombra "ambient" grande (la de blur largo) para que cuando avance
   y se convierta en top, la profundidad ya esté ahí — no aparece de golpe.
   Las sombras "close" (más cercanas/nítidas) solo viven en el top activo. */
.swipe-card--next {
  z-index: 9;
  pointer-events: none;
  box-shadow:
    0 14px 28px -8px rgba(0,16,63,.18),
    0 32px 64px -16px rgba(0,16,63,.28);
}

/* Card final celebratoria: aparece cuando se confirma el último partido */
.swipe-card--done {
  z-index: 11;
  box-shadow:
    0 2px 6px rgba(0,16,63,.08),
    0 14px 24px -8px rgba(0,16,63,.20),
    0 30px 60px -16px rgba(0,16,63,.30);
}
.swipe-card--done .card-band { background: var(--olive); }
.swipe-card--done .card-band .band-title { color: var(--navy); letter-spacing: 3px; }
.swipe-card--done .card-band .band-btn { color: var(--navy); }
.card-content--done {
  align-items: center;
  text-align: center;
  padding: 28px 24px 14px !important;
  position: relative;
  overflow: hidden;
}
.card-content--done::before {
  /* watermark "26" enorme en background */
  content: "26";
  position: absolute;
  bottom: -40px;
  right: -20px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 220px;
  color: transparent;
  -webkit-text-stroke: 2px rgba(149,167,72,.18);
  text-stroke: 2px rgba(149,167,72,.18);
  pointer-events: none;
  line-height: .85;
}
.done-trophy {
  width: 72px;
  height: 72px;
  color: var(--olive);
  margin: 8px auto 18px;
  position: relative;
  z-index: 1;
}
.done-trophy svg { width: 100%; height: 100%; }
.done-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 38px;
  line-height: .95;
  color: var(--navy);
  letter-spacing: 0;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.done-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 28px;
  position: relative;
  z-index: 1;
}
.done-cta {
  margin: 0;
  text-decoration: none;
  width: 100%;
  position: relative;
  z-index: 1;
}
.done-share {
  margin-top: 12px;
  padding: 12px 16px;
  background: transparent;
  border: 1.5px solid var(--olive);
  color: var(--olive);
  border-radius: 12px;
  font-weight: 700;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .2px;
  cursor: pointer;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  transition: background .15s ease, transform .1s ease;
}
.done-share:hover { background: rgba(149,167,72,.08); }
.done-share:active { transform: scale(.98); }
.done-share:disabled { opacity: .6; cursor: not-allowed; }
.done-share svg { stroke: currentColor; }

.done-secondary {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: .2px;
  position: relative;
  z-index: 1;
}

/* === Card de transición al grupo siguiente === */
.swipe-card--nextgroup {
  z-index: 11;
  box-shadow:
    0 2px 6px rgba(0,16,63,.08),
    0 14px 24px -8px rgba(0,16,63,.20),
    0 30px 60px -16px rgba(0,16,63,.30);
}
.ng-check {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 2px;
  position: relative; z-index: 1;
}
.ng-check svg { width: 22px; height: 22px; }
/* Letra del grupo como watermark (igual que la card de grupo del hub) */
.ng-letter {
  position: absolute;
  top: 8px; right: 16px;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 150px;
  line-height: .78;
  font-weight: 400;
  color: rgba(255,255,255,.20);
  pointer-events: none;
  z-index: 0;
}
/* Banderas de los 4 equipos del grupo siguiente */
.ng-flags {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 6px 0 20px;
  position: relative; z-index: 1;
}
.ng-flags img, .ng-flags > * {
  width: 46px !important; height: 46px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 8px rgba(0,16,63,.22);
}
/* En esta card el watermark es la letra del grupo, no el "26" */
.swipe-card--nextgroup .card-content--done::before { display: none; }
.swipe-card--nextgroup .done-title { color: #fff; }
.swipe-card--nextgroup .done-sub { color: rgba(255,255,255,.82); }
.swipe-card--nextgroup .done-sub b { color: #fff; }
.swipe-card--nextgroup .card-cta {
  background: #fff;
  color: var(--navy);
}
.swipe-card--nextgroup .card-cta svg { stroke: var(--navy); }
.swipe-card--nextgroup .done-secondary { color: rgba(255,255,255,.8); }

/* === Card de onboarding "Bienvenido a la Penca" === */
/* Modal centrado fijo: position:fixed centrado en el viewport, independiente
   del layout (lomo, tabbar, rail, deck) → se comporta igual en mobile y en
   desktop. El box-shadow gigante (100vmax) hace de backdrop oscurecido. */
.swipe-card--intro {
  position: fixed;
  left: 50%; top: 50%;
  right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: calc(100% - 36px);
  max-width: 380px;
  height: auto;
  max-height: calc(100% - 96px);
  z-index: 300;
  box-shadow:
    0 18px 50px -12px rgba(0,16,63,.45),
    0 0 0 100vmax rgba(0,16,63,.55);
}
/* Animación de entrada: aplica solo cuando el card está visible (no hidden).
   Suave fade-in + scale-up desde 92% sin shift de posición. */
.swipe-card--intro:not([hidden]) {
  animation: penca-intro-in .35s cubic-bezier(.16,1,.3,1) both;
}
.swipe-card--intro.intro-closing {
  animation: penca-intro-out .28s cubic-bezier(.4,0,.2,1) both;
}
@keyframes penca-intro-in {
  from { transform: translate(-50%, -50%) scale(.92); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}
@keyframes penca-intro-out {
  from { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  to   { transform: translate(-50%, -52%) scale(.96); opacity: 0; }
}
.card-content--intro {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px 22px 16px !important;
  position: relative;
  overflow: hidden;
}
/* "26" fantasma de fondo, guiño al álbum */
.card-content--intro::before {
  content: '26';
  position: absolute;
  right: -16px; bottom: -52px;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 196px; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(149,167,72,.13);
  pointer-events: none;
}
/* Cuerpo scrolleable si no entra (pantallas bajas); el CTA queda fijo abajo. */
.intro-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
}
.intro-hero { margin-bottom: 18px; }
.intro-eyebrow {
  font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase;
  font-weight: 700; color: var(--olive); margin-bottom: 8px;
}
.intro-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-weight: 400; font-size: 40px; line-height: .95;
  letter-spacing: .6px; color: var(--navy); text-transform: uppercase; margin: 0;
}
.intro-title em { font-style: normal; color: var(--olive); }
.intro-hook {
  font-size: 13px; line-height: 1.5; color: var(--muted); margin: 11px 0 0;
}
.intro-hook b { color: var(--ink); font-weight: 700; }
.intro-steps {
  display: flex; flex-direction: column; gap: 9px; margin: 0;
}
.intro-step {
  display: flex; gap: 12px; align-items: center;
  background: rgba(0,27,107,.045);
  border-radius: 12px; padding: 10px 12px;
}
.intro-step-ico {
  flex: 0 0 34px; width: 34px; height: 34px;
  background: var(--navy); color: var(--olive-bright);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.intro-step-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }
.intro-step-tx { display: flex; flex-direction: column; }
.intro-step-tx b { font-size: 13.5px; color: var(--ink); font-weight: 800; }
.intro-step-tx span { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.intro-note {
  font-size: 12px; color: var(--muted); line-height: 1.45;
  text-align: center; margin: 14px 0 2px;
}
.intro-note b { color: var(--olive); font-weight: 700; }
.swipe-card--intro .card-cta { flex: 0 0 auto; margin: 14px 0 0; text-decoration: none; }

/* Fan de siluetas — extienden 180px PAST la card del top → no se ve donde terminan.
   Sin banda navy: puras siluetas cremas (igual que la referencia de cards blancas). */
.fan-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  /* Fan tenue: el color del grupo actual mezclado con cream al 22%. Acompaña
     la card top sin competir. JS actualiza --fan-color al avanzar partido. */
  background: color-mix(in srgb, var(--fan-color, var(--cream)) 70%, var(--cream));
  border-radius: 22px;
  pointer-events: none;
  transform-origin: 50% 100%;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,16,63,.05), 0 8px 14px -8px rgba(0,16,63,.10);
  transition: background .35s cubic-bezier(.4, 0, .2, 1);
}
.fan-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  /* La banda hereda el color del card (background-color: inherit no funciona aquí
     porque ::before tiene fondo independiente). Lo dejamos transparent → el bg
     del .fan-card se ve a través, manteniendo color consistente top-to-bottom. */
  background: transparent;
}
/* Ángulos reducidos porque cards más altas amplifican el swing horizontal */
/* Asimetría intencional — un mazo real nunca queda simétrico.
   Rotaciones desparejas + micro-translaciones para parecer hecho a mano. */
.fan-card.fan-l1 { transform: translate(-2px, 2px) rotate(-2.5deg) scale(.995); z-index: 9; }
.fan-card.fan-r1 { transform: translate(3px, 1px)  rotate(3.8deg)  scale(1);    z-index: 8; }
.fan-card.fan-l2 { transform: translate(-1px, 4px) rotate(-7.2deg) scale(.99);  z-index: 7; }
.fan-card.fan-r2 { transform: translate(4px, 3px)  rotate(5.5deg)  scale(1.005); z-index: 6; }
.fan-card.fan-l3 { transform: translate(2px, 2px)  rotate(-9.8deg) scale(.985); z-index: 5; }
.fan-card.fan-r3 { transform: translate(-3px, 5px) rotate(10.2deg) scale(.995); z-index: 4; }
.fan-card.fan-l4 { transform: translate(-2px, 6px) rotate(-13.5deg) scale(.98); z-index: 3; }
.fan-card.fan-r4 { transform: translate(5px, 4px)  rotate(13.2deg)  scale(1);   z-index: 2; }

/* Card interna — banda al top + body crema score-only.
   Color de banda dinámico por grupo (Panini album DNA): se override via data-group.
   Sin transition — cada card tiene su color fijo, snap instantáneo al swipear. */
.card-band {
  flex: 0 0 auto;
  height: 60px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  position: relative;
  overflow: hidden;
}
.card-band .band-26 { display: none; }
.card-band .band-btn {
  background: none; border: none; padding: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
}
.card-band .band-btn:active { background: rgba(255,255,255,.10); }
.card-band .band-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.card-band .band-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  flex: 1;
  text-align: center;
}

/* === Colores oficiales por grupo (Panini Mundial 2026) ===
   Tanto la banda como el card entero comparten el color.
   Cada regla además expone `--tri-bg` para que el trigram pueda usarlo como
   color de fill — combinado con `paint-order: stroke fill` da outline puro
   100% afuera del glyph, interior IDÉNTICO al bg de la card. */
.card-band[data-group="A"], .swipe-card[data-group="A"] { background: #3FAC4D; --tri-bg: #3FAC4D; } /* verde */
.card-band[data-group="B"], .swipe-card[data-group="B"] { background: #D8252E; --tri-bg: #D8252E; } /* rojo */
.card-band[data-group="C"], .swipe-card[data-group="C"] { background: #F5C522; --tri-bg: #F5C522; } /* yellow */
.card-band[data-group="D"], .swipe-card[data-group="D"] { background: #26B7B5; --tri-bg: #26B7B5; } /* teal */
.card-band[data-group="E"], .swipe-card[data-group="E"] { background: #E07823; --tri-bg: #E07823; } /* naranja */
.card-band[data-group="F"], .swipe-card[data-group="F"] { background: #3FBFB1; --tri-bg: #3FBFB1; } /* mint */
.card-band[data-group="G"], .swipe-card[data-group="G"] { background: #7FB3D9; --tri-bg: #7FB3D9; } /* sky blue */
.card-band[data-group="H"], .swipe-card[data-group="H"] { background: #9F8BD0; --tri-bg: #9F8BD0; } /* lavender */
.card-band[data-group="I"], .swipe-card[data-group="I"] { background: #B8CC5C; --tri-bg: #B8CC5C; } /* lime */
.card-band[data-group="J"], .swipe-card[data-group="J"] { background: #F5A8A8; --tri-bg: #F5A8A8; } /* pink */
.card-band[data-group="K"], .swipe-card[data-group="K"] { background: #D43F86; --tri-bg: #D43F86; } /* magenta */
.card-band[data-group="L"], .swipe-card[data-group="L"] { background: #7D1A2B; --tri-bg: #7D1A2B; } /* maroon */

/* Knockout → progresión de color por ronda, calentando hacia el dorado
   de la Final. Distinto del arcoíris de grupos: tonos profundos, premium. */
.card-band[data-stage="octavos"], .swipe-card[data-stage="octavos"], .fase-card[data-stage="octavos"] { background:#3E5C6B; --tri-bg:#3E5C6B; color:#fff; }
.card-band[data-stage="cuartos"], .swipe-card[data-stage="cuartos"], .fase-card[data-stage="cuartos"] { background:#7A5C3A; --tri-bg:#7A5C3A; color:#fff; }
.card-band[data-stage="semi"],    .swipe-card[data-stage="semi"],    .fase-card[data-stage="semi"]    { background:#9A7B36; --tri-bg:#9A7B36; color:#fff; }
.card-band[data-stage="tercer"],  .swipe-card[data-stage="tercer"],  .fase-card[data-stage="tercer"]  { background:#6B5236; --tri-bg:#6B5236; color:#fff; }
.card-band[data-stage="final"],   .swipe-card[data-stage="final"],   .fase-card[data-stage="final"]   { background:#B8924A; --tri-bg:#B8924A; color:#fff; }
/* Final épica: marco dorado-claro en el card de pronóstico */
.swipe-card--top[data-stage="final"] {
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.55),
    0 2px 6px rgba(0,16,63,.12),
    0 14px 28px -8px rgba(0,16,63,.28),
    0 32px 64px -16px rgba(0,16,63,.38);
}

/* === Adaptaciones internas para cards coloreadas (data-group / data-stage) === */

/* Trigramas outline blanco translúcido contra bg colorido. */
.swipe-card[data-group] .card-tri-bg,
.swipe-card[data-stage] .card-tri-bg {
  -webkit-text-stroke-color: rgba(255,255,255,.27);
  text-stroke-color: rgba(255,255,255,.27);
}
/* (Override de has-pred eliminado — los trigrams se ven idénticos en ambos
   estados. La diferenciación visual de "ya pronosticado" la da el CTA
   "Actualizar ✓" vs "Confirmar", no el trigram.) */

/* Nombres de equipos en blanco (aplica al layout vertical nuevo + legacy) */
.swipe-card[data-group] .card-teams .team-name,
.swipe-card[data-stage] .card-teams .team-name,
.swipe-card[data-group] .card-team-row .team-name,
.swipe-card[data-stage] .card-team-row .team-name {
  color: #fff;
}

/* VS separator entre equipos y entre score: blanco translúcido */
.swipe-card[data-group] .card-teams .vs-mid,
.swipe-card[data-stage] .card-teams .vs-mid,
.swipe-card[data-group] .card-pickers .vs-mini,
.swipe-card[data-stage] .card-pickers .vs-mini {
  color: rgba(255,255,255,.55);
}

/* Score numbers: blanco para que exploten contra el color del grupo.
   Se mantiene blanco también en has-pred — la diferenciación de "ya
   pronosticado" la da el CTA "Actualizar ✓" + stamp + chip de goleadores,
   no cambiamos el color del número (en grupos lime/yellow olive-bright
   se confundía con el fondo y los números desaparecían). */
.swipe-card[data-group] .card-pickers .num,
.swipe-card[data-stage] .card-pickers .num,
.swipe-card.has-pred[data-group] .card-pickers .num,
.swipe-card.has-pred[data-stage] .card-pickers .num {
  color: #fff;
}

/* Sello MULTI · 26: pasa a blanco translúcido sobre overlay oscuro sutil */
.swipe-card[data-group] .card-stamp,
.swipe-card[data-stage] .card-stamp {
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.88);
}

/* Kickoff pill en cards coloreadas: fill blanco translúcido + texto blanco
   (item 3: matchea el lenguaje brand de la card en vez de cream sobre color) */
.swipe-card[data-group] .card-when,
.swipe-card[data-stage] .card-when {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}

/* Step buttons: borde más visible contra el bg colorido */
.swipe-card[data-group] .card-pickers .step-btn,
.swipe-card[data-stage] .card-pickers .step-btn {
  border-color: rgba(255,255,255,.50);
  background: rgba(255,255,255,.95);
}

/* Goleadores chip: fondo blanco translúcido en lugar de olive (que clashearía con verdes/limes) */
.swipe-card[data-group] .card-goleadores-chip,
.swipe-card[data-stage] .card-goleadores-chip {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.40);
  color: #fff;
}
.swipe-card[data-group] .card-goleadores-chip svg,
.swipe-card[data-stage] .card-goleadores-chip svg { stroke: #fff; }
.swipe-card[data-group] .card-goleadores-chip[data-state="picked"],
.swipe-card[data-stage] .card-goleadores-chip[data-state="picked"] {
  background: rgba(255,255,255,.28);
}

/* CTA Confirmar: fill blanco + texto en el color del card → contraste máximo */
.swipe-card[data-group] .card-cta,
.swipe-card[data-stage] .card-cta {
  background: #fff;
  color: var(--tri-bg);
}
.swipe-card[data-group] .card-cta svg,
.swipe-card[data-stage] .card-cta svg { stroke: var(--tri-bg); }
/* has-pred ("Actualizar"): mismo fill blanco — la diferencia la da el label */
.swipe-card.has-pred[data-group] .card-cta,
.swipe-card.has-pred[data-stage] .card-cta {
  background: #fff;
  color: var(--tri-bg);
  border: none;
}
.swipe-card.has-pred[data-group] .card-cta svg,
.swipe-card.has-pred[data-stage] .card-cta svg { stroke: var(--tri-bg); }
.card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* match-grid (flex:1) absorbe la variación de alto del viewport; el resto
     (kickoff/chip/CTA) queda fijo abajo → el botón Confirmar SIEMPRE visible,
     sin scroll. En pantallas chicas se clipea la zona del score, nunca el CTA. */
  padding: 14px 18px 16px;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
/* Trigrama outline gigante de cada equipo, en background → DNA Panini.
   Escalonados (left arriba, right abajo) para asimetría tipo ficha real.
   Bebas Neue: tipografía condensed/sport, look FIFA scoreboard. */
.card-tri-bg {
  position: absolute;
  font-family: 'FWC2026', 'Bebas Neue', 'Sora', system-ui, sans-serif;
  font-size: 88px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: .85;
  /* Outline puro — receta validada por Fabricio en DevTools (2026-05-19):
     fill transparente + stroke fino con alpha bajo. Default olive para cards
     cream, blanco para data-group (ver override más abajo). */
  color: transparent;
  -webkit-text-stroke: 1.8px rgba(149,167,72,.32);
  text-stroke: 1.8px rgba(149,167,72,.32);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
/* Trigrams en los CUADRANTES VACÍOS del layout vertical:
   - Local (left): TOP-RIGHT — no toca team L (flag+nombre en top-left)
                                ni kickoff pill (centrado abajo)
   - Visit (right): MID-LEFT (al costado izquierdo de team R, NO en zona chip)
                                ni team R (flag+nombre en bottom-right) */
/* Trigrams VERTICALES rotados 90° contra-reloj, asimétricos en altura:
   - Local (left): a la altura de las flags (top zone del match-grid)
   - Visit (right): bastante más abajo (cerca del chip/CTA zone)
   Bleed-off 50% en cada borde. Texto lee de abajo hacia arriba. */
.card-tri-bg--left {
  top: 150px;           /* bajo la barra superior, sin letras cortadas */
  left: 0;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
  text-align: center;
  white-space: nowrap;
}
.card-tri-bg--right {
  top: 380px;           /* zona inferior, bastante más abajo */
  right: 0;
  left: auto;
  bottom: auto;
  /* translate 30% en vez de 50%: con la fuente fifa-26 las métricas son
     distintas a las del FWC2026 viejo, el 50% dejaba el trigram muy fuera. */
  transform: translate(30%, -50%) rotate(-90deg);
  transform-origin: center center;
  text-align: center;
  white-space: nowrap;
}

/* El stack interno va por encima del trigrama */
.card-content > *:not(.card-tri-bg):not(.card-stamp) { position: relative; z-index: 1; }
/* =============================================================
   LAYOUT MATCH-CARD — grid 3 columnas (team L · vs · team R).
   Cada equipo tiene su columna entera: flag → nombre → score → stepper.
   Lectura horizontal scoreboard-style.
   ============================================================= */
.match-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto;
  row-gap: 10px;
  column-gap: 14px;
  width: 100%;
  justify-items: center;
  align-items: center;
  /* Zona elástica del card: se estira/encoge con el viewport y se centra.
     Si la pantalla es muy baja, clipea (nunca scroll — chocaría con la ruedita). */
  flex: 1 1 auto;
  min-height: 0;
  align-content: center;
  overflow: hidden;
}
/* Cada elemento va a su celda por data-side + clase */
.match-grid > [data-side="left"]  { grid-column: 1; }
.match-grid > [data-side="right"] { grid-column: 3; }
.match-grid > .match-vs           { grid-column: 2; grid-row: 3; align-self: center; }
.match-grid > .flag-circle        { grid-row: 1; }
.match-grid > .team-name          { grid-row: 2; }
.match-grid > .score-num          { grid-row: 3; }
.match-grid > .wheel-picker       { grid-row: 3; }
.match-grid > .wheel-wrap         { grid-row: 3; }
.match-grid > .stepper-pair       { grid-row: 4; }

/* Flag */
.match-grid .flag-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,16,63,.10);
  box-sizing: border-box;
}
.match-grid .flag-circle img,
.match-grid .flag-circle > * {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}

/* Team name */
.match-grid .team-name {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: 1px;
  line-height: 1.05;
  text-transform: uppercase;
  text-align: center;
  max-width: 100%;
  word-break: break-word;
  hyphens: none;
}

/* Score number — hero */
.match-grid .score-num {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 64px;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: 1px;
  line-height: 1;
  font-feature-settings: "tnum";
  min-width: 50px;
  text-align: center;
  margin-top: 4px;
}

/* "vs" central — pequeño, entre los dos números */
.match-grid .match-vs {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
}

/* Stepper pair (−/+) debajo del score-num */
.match-grid .stepper-pair {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.match-grid .stepper-pair .step-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  font-family: inherit;
  padding: 0;
}
.match-grid .stepper-pair .step-btn:active { transform: scale(.94); }

/* === Cards coloreadas: overrides white para legibilidad === */
.swipe-card[data-group] .match-grid .team-name,
.swipe-card[data-stage] .match-grid .team-name,
.swipe-card[data-group] .match-grid .score-num,
.swipe-card[data-stage] .match-grid .score-num {
  color: #fff;
}
.swipe-card[data-group] .match-grid .match-vs,
.swipe-card[data-stage] .match-grid .match-vs {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}
.swipe-card[data-group] .match-grid .stepper-pair .step-btn,
.swipe-card[data-stage] .match-grid .stepper-pair .step-btn {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.95);
}

/* === Wheel picker (iOS-native) — reemplaza score-num + stepper-pair === */
.wheel-picker {
  position: relative;
  width: 84px;
  height: 132px;            /* 3 items × 44px = ventana de selección visible */
  overflow: hidden;
  /* La ruedita maneja su drag por JS → se adueña del gesto, sin scroll del navegador. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  outline: none;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    rgba(0,0,0,.35) 18%,
    #000 44%, #000 56%,
    rgba(0,0,0,.35) 82%,
    transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0,
    rgba(0,0,0,.35) 18%,
    #000 44%, #000 56%,
    rgba(0,0,0,.35) 82%,
    transparent 100%);
}
.wheel-picker:active { cursor: grabbing; }
.wheel-picker.dragging { cursor: grabbing; }

/* Líneas indicadoras del slot seleccionado (centro) */
.wheel-picker::before,
.wheel-picker::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px;
  height: 1.5px;
  background: rgba(0,16,63,.18);
  pointer-events: none;
  z-index: 2;
}
.wheel-picker::before { top: 44px; }
.wheel-picker::after  { top: 88px; }

.wheel-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding-top: 44px;        /* item 0 cae en el slot central */
  padding-bottom: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .28s cubic-bezier(.22,.85,.30,1);
  will-change: transform;
}
.wheel-picker.dragging .wheel-strip { transition: none; }

.wheel-item {
  height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  color: var(--navy);
  letter-spacing: 1px;
  font-feature-settings: "tnum";
  opacity: .25;
  transition: opacity .18s ease, transform .18s ease, font-size .18s ease;
}
/* El item centrado se ve grande y opaco; los vecinos atenuados (CSS lo marca con --pos) */
.wheel-item[data-pos="0"]  { opacity: 1; font-size: 36px; }
.wheel-item[data-pos="-1"],
.wheel-item[data-pos="1"]  { opacity: .55; font-size: 32px; }
.wheel-item[data-pos="-2"],
.wheel-item[data-pos="2"]  { opacity: .25; font-size: 26px; }
/* Sin transición cuando: (a) wheel es preview (nunca anima), o (b) está en
   re-render instant (clase temporal). Sin esto, asignar data-pos al cargar
   una card dispara la transition de .18s y se ve como "salto" del número. */
.wheel-picker--preview .wheel-item,
.wheel-picker.wheel-no-anim .wheel-item { transition: none; }

/* Cards coloreadas → texto blanco + líneas blancas */
.swipe-card[data-group] .wheel-item,
.swipe-card[data-stage] .wheel-item { color: #fff; }
.swipe-card[data-group] .wheel-picker::before,
.swipe-card[data-stage] .wheel-picker::before,
.swipe-card[data-group] .wheel-picker::after,
.swipe-card[data-stage] .wheel-picker::after { background: rgba(255,255,255,.45); }

/* Preview wheel (cardNext): sin interacción, sin cursor */
.wheel-picker--preview { pointer-events: none; cursor: default; }

/* Wrap del wheel + chevrons indicadores de scroll (arriba/abajo) */
.wheel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: 10px;        /* baja un poco el bloque del scroll */
}
.wheel-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,16,63,.30);
  /* Clickeables → +/- (stepper). Clave en desktop. */
  pointer-events: auto;
  cursor: pointer;
  padding: 3px 18px;
  transition: color .15s ease, transform .1s ease;
}
.wheel-chevron:active { transform: scale(.82); }
.wheel-chevron svg { width: 22px; height: 13px; display: block; }
.swipe-card[data-group] .wheel-chevron,
.swipe-card[data-stage] .wheel-chevron { color: rgba(255,255,255,.55); }
@media (hover: hover) {
  .wheel-chevron:hover { color: rgba(0,16,63,.62); }
  .swipe-card[data-group] .wheel-chevron:hover,
  .swipe-card[data-stage] .wheel-chevron:hover { color: #fff; }
}

/* === LAYOUT INTEGRADO viejo (legacy, sin uso actual pero conservado) === */
.card-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* team-id a un extremo, stepper al otro */
  gap: 14px;
  width: 100%;
  padding: 0 4px;
  margin: 0;
}
/* En --bottom el team-id va a la derecha (flag right, name left), naturalmente
   con flex order — usamos margin-left auto en team-id si pinta. */

.card-team-row .flag-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,16,63,.10);
  box-sizing: border-box;
  flex-shrink: 0;
}
.card-team-row .flag-circle img,
.card-team-row .flag-circle > * {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}
.card-team-row .team-name {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 28px;       /* reducido de 32 a 28 para dejar lugar al stepper en la misma row */
  font-weight: 400;
  color: var(--navy);
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-team-row .row-stepper .num {
  min-width: 36px;
  text-align: center;
  font-family: 'Bebas Neue', 'Sora', system-ui, sans-serif;
  font-size: 44px;
  font-weight: 400;
  color: var(--navy);
  font-feature-settings: "tnum";
  line-height: 1;
  letter-spacing: 1px;
}
/* En cards coloreadas: borde white visible + num blanco */
.swipe-card[data-group] .card-team-row .row-stepper .step-btn,
.swipe-card[data-stage] .card-team-row .row-stepper .step-btn {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.95);
}
.swipe-card[data-group] .card-team-row .row-stepper .num,
.swipe-card[data-stage] .card-team-row .row-stepper .num {
  color: #fff;
}
.card-teams .flag-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,16,63,.10);
  box-sizing: border-box;
}
.card-teams .flag-circle img,
.card-teams .flag-circle > * {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}
.card-teams .team-name {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: 1.2px;
  line-height: 1;
  text-transform: uppercase;
  margin-top: 4px;
}
/* Kickoff como pill (estilo etiqueta Panini) */
.card-when-wrap {
  flex: 0 0 auto;
  text-align: center;
  margin-top: 12px;
}
.card-when {
  display: inline-flex;
  align-items: center;
  background: var(--cream-2);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .3px;
}
.card-pickers .stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.card-pickers .num {
  min-width: 40px;
  text-align: center;
  font-family: 'Bebas Neue', 'Sora', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 400;
  color: var(--navy);
  font-feature-settings: "tnum";
  line-height: 1;
  letter-spacing: 1px;
}
/* Variant monumental — score como el elemento dominante de la card.
   item 4: subido de 44 → 56 para que pese visualmente vs flag 56px + nombre 32. */
.card-pickers--big .num {
  font-size: 56px;
  letter-spacing: 1px;
  min-width: 44px;
}
/* VS badge: separa visualmente los dos steppers — item 4: subido a 36px */
.card-pickers .vs-mini {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  line-height: 1;
  text-indent: 0;
}
.card-pickers .vs-mini::before {
  content: 'VS';
}
/* Divisor vertical olive translúcido detrás del badge → refuerza la separación */
.card-pickers .vs-mini::after {
  content: '';
  position: absolute;
  top: -18px; bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: rgba(149,167,72,.30);
  z-index: -1;
}
/* En cards coloreadas: badge invertido (blanco bg + navy texto) + divisor blanco */
.swipe-card[data-group] .card-pickers .vs-mini,
.swipe-card[data-stage] .card-pickers .vs-mini {
  background: #fff;
  color: var(--navy);
}
.swipe-card[data-group] .card-pickers .vs-mini::after,
.swipe-card[data-stage] .card-pickers .vs-mini::after {
  background: rgba(255,255,255,.35);
}

/* Estado "pronosticado": solo cambia el CTA (de filled navy → outlined navy
   = "done, tap to revise"). El trigram NO se toca — siempre outline puro,
   nunca cambia el fill (regla Fabricio). */
.swipe-card.has-pred .card-cta {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.swipe-card.has-pred .card-cta svg {
  stroke: var(--olive);
}

/* Stamp "MULTI · 26" eliminado por pedido de Fabricio. */
.card-stamp { display: none; }
.card-cta {
  flex: 0 0 auto;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: var(--navy);
  color: var(--olive-bright);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.card-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.card-cta:disabled { opacity: .6; }
.card-cta-row .card-cta { flex: 1; }

/* Slot entre team-R y CTA: reserva 44px SIEMPRE para que el CTA no salte
   cuando aparece el chip de goleadores (regla Fabricio: el botón no mueve nada). */
.chip-slot {
  flex: 0 0 auto;
  margin-top: 10px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Chip de goleadores: invitación contextual entre score y CTA */
.card-goleadores-chip {
  align-self: stretch;
  flex: 1;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.card-goleadores-chip:active {
  background: var(--cream-2);
}
.card-goleadores-chip[data-state="picked"] {
  border-color: rgba(0,27,107,.22);
}
.card-goleadores-chip svg {
  width: 16px; height: 16px;
  stroke: var(--olive);
  flex-shrink: 0;
}
.card-goleadores-chip .chip-label {
  flex: 1;
}
.card-goleadores-chip .chip-count {
  background: var(--navy);
  color: #fff;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-feature-settings: "tnum";
}
/* Cuando el chip está en cardNext (visual mirror): mismo look, no interactivo */
.card-next-chip { pointer-events: none; }

/* CTA: item 1 — 24px de gap consistente con el resto del grid */
.card-content > .card-cta { margin-top: 24px; }
.card-cerrado {
  margin-top: auto;
  padding: 12px;
  background: rgba(0,27,107,.06);
  border-radius: 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ===== Card read-only en el deck (.is-locked) =====
   wheel-wrap, score-num y card-cerrado van SIEMPRE en el DOM; el JS togglea
   .is-locked en el cardTop según la card esté abierta o cerrada. Por eso
   score-num y card-cerrado arrancan OCULTOS y solo aparecen en .is-locked. */
.swipe-card .score-num { display: none; }
.swipe-card .card-cerrado { display: none; }
.swipe-card.is-locked .wheel-wrap { display: none; }
.swipe-card.is-locked .score-num { display: block; }
.swipe-card.is-locked .chip-slot,
.swipe-card.is-locked .card-cta { display: none; }
.swipe-card.is-locked .card-cerrado { display: flex; flex-direction: column; gap: 4px; }
.card-cerrado .card-cerrado-detail {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: none;
  color: var(--navy);
  opacity: .85;
}

/* Layout vertical: lomo arriba, numeral, deck centrado. NO scroll en predict:
   la card queda FIJA en viewport, lo que no entre se oculta vía overflow:hidden
   (el deck se truncará en el bottom edge — es lo que el user quiere). */
/* En la página del deck (predict.php), bloquear scroll vertical entero.
   El swipe horizontal del deck es el gesto principal y el scroll vertical
   competía con él generando confusión. Override sobre las reglas globales.
   NO usar touch-action: pan-x — rompe el handler del deck después del primer
   swipe (el browser cancela gestos con componente vertical). El control
   queda 100% en el JS via preventDefault dentro del swipe handler. */
html:has(#screen-predict),
body:has(#screen-predict) {
  overflow: hidden !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}

/* En la página del deck, sin rebote/overscroll de iOS — que no compita con
   el gesto de la ruedita ni del swipe. */
html:has(#screen-predict),
body:has(#screen-predict) { overscroll-behavior: none; }

#screen-predict .screen-body {
  overscroll-behavior: none;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
  padding-bottom: 90px !important; /* tabbar */
  position: relative;
}
@supports not (height: 100svh) {
  #screen-predict .screen-body { height: 100vh !important; max-height: 100vh !important; }
}

/* Lomo del álbum: banda navy fina full-width, marca centrada, borde perforado */
.album-spine {
  flex: 0 0 auto;
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sticky: el lomo navy queda siempre fijo arriba → la zona del reloj/status
     bar mantiene el azul de marca aunque la página scrollee. */
  position: sticky;
  top: 0;
  z-index: 50;
  /* Perforación real (técnica "stamp", vía CodePen): el navy se pinta con un
     radial-gradient repetido que recorta semicírculos TRANSPARENTES del borde
     inferior. Como son huecos de verdad, filter:drop-shadow sigue esa silueta
     dentada → la sombra adquiere la forma de la perforación. */
  background-image: radial-gradient(circle 4.5px at 7px 100%, transparent 4.4px, var(--navy) 4.9px);
  background-size: 14px 100%;
  background-repeat: repeat-x;
  filter: drop-shadow(0 2px 4px rgba(0,16,63,.20));
}
.album-mark {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 16px;
  letter-spacing: 4px;
  color: var(--olive-bright);
}
.album-mark-year {
  color: #fff;
  margin-left: 2px;
}
/* Lockup del lomo: logo Multi a la izquierda · MUNDIAL 26 a la derecha */
.album-spine-lockup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 22px;
  box-sizing: border-box;
}
.album-spine-lockup svg { display: block; }
/* Perforación: círculos cortados EXACTAMENTE al medio en el bottom del lomo.
   Radio 4.5px + bottom: -4.5px + height: 9px → el ecuador del círculo cae
   precisamente sobre la línea inferior del lomo. Hard edge (sin anti-alias). */
/* Páginas con hero navy debajo del lomo (home/ranking/perfil): el lomo va
   LISO — sin perforación ni drop-shadow. Si no, los huecos no se ven (navy
   sobre navy) pero la sombra igual dibujaría la silueta dentada → artefacto.
   Navy continuo que se funde con el hero. */
#screen-home .album-spine,
#screen-ranking .album-spine,
#screen-profile .album-spine {
  background-image: none;
  background-color: var(--navy);
  filter: none;
}

/* Stats del player: racha + posición + puntos. Va entre el lomo y el FECHA. */
.album-stats {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 0;
  position: relative;
  z-index: 2;
}
/* Botón "volver a los grupos" — navegación clara arriba del deck */
.album-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--navy);
  color: #fff;
  padding: 10px 14px 10px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;
  transition: transform .1s ease;
}
.album-back svg { width: 15px; height: 15px; }
.album-back:active { transform: scale(.96); }
/* Stats del player empujados a la derecha */
.album-stats-pills {
  display: flex;
  gap: 6px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.album-stats-pills::-webkit-scrollbar { display: none; }
.stat-pill {
  flex: 0 0 auto;
  background: rgba(0,16,63,.05);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.stat-pill b { font-weight: 800; }
.stat-pill .of, .stat-pill .lbl {
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
}
.stat-pill--streak {
  background: rgba(149,167,72,.16);
  border: 1px solid rgba(149,167,72,.30);
}
.stat-pill--streak .emoji { font-size: 13px; line-height: 1; }
.stat-pill--soft {
  background: rgba(149,167,72,.10);
  color: var(--olive);
  font-weight: 700;
}

/* Slot: ocupa el alto disponible entre el header y la tabbar; centra el deck. */
#screen-predict .deck-slot {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* El deck tiene un tamaño de DISEÑO fijo (560px de alto, donde el contenido
   entra sin recortarse) y se escala como unidad con --deck-scale, que calcula
   la JS según el alto disponible. Así la card se achica entera y proporcionada,
   sin recortar nada ni achicar el contenido por separado. */
#screen-predict .swipe-deck {
  flex: 0 0 auto;
  width: 94%;
  height: 560px;
  margin: 0 !important;
  transform: scale(var(--deck-scale, 1));
  transform-origin: center;
}
.predict-hero .back {
  position: absolute;
  top: 22px; left: 22px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,.1);
  border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.predict-hero .back svg { width: 18px; height: 18px; stroke: #fff; }
.predict-hero .meta {
  text-align: center;
  margin-bottom: 8px;
}
.predict-hero .meta .group {
  font-size: 10px; color: var(--olive-bright);
  letter-spacing: 3px; text-transform: uppercase; font-weight: 700;
}
.predict-hero .meta .when {
  font-size: 12px; color: rgba(255,255,255,.65);
  margin-top: 4px;
}
.predict-hero .team-block .flag {
  width: 80px; height: 80px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.predict-hero .team-block .name {
  font-weight: 700; font-size: 15px; letter-spacing: .5px;
}
.predict-hero .countdown {
  margin-top: 16px;
  display: flex; gap: 14px;
  justify-content: center;
}
.picker .number {
  width: 56px; height: 56px;
  font-size: 36px; font-weight: 800; color: var(--navy);
  letter-spacing: -1.5px;
  display: flex; align-items: center; justify-content: center;
  font-feature-settings: "tnum";
  transition: transform .25s var(--ease-spring);
}
.picker .number.bump { transform: scale(1.15); }
.score-pickers .vs-mini {
  font-size: 14px; color: var(--muted); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
}
.rtype.active { border-color: var(--olive); background: rgba(149,167,72,.08); }
.rtype .nm { font-size: 13px; color: var(--navy); font-weight: 700; }
.scorer-chip.active { border-color: var(--olive); background: rgba(149,167,72,.06); }
.scorer-chip .ph {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.scorer-chip .info { flex: 1; min-width: 0; }
.scorer-chip .info .nm { font-size: 12px; color: var(--navy); font-weight: 700; line-height: 1.2; }
.scorer-chip .info .meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
.predict-foot .meta {
  flex: 1;
}
.predict-foot .meta .lbl { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
.predict-foot .meta .val { font-size: 14px; color: var(--navy); font-weight: 700; }
.predict-foot .meta .val em { font-style: normal; color: var(--olive); }
.predict-foot .btn-primary { padding: 14px 22px; }

/* ============== CONFIRMATION OVERLAY ============== */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,16,63,0);
  display: flex; align-items: center; justify-content: center;
  visibility: hidden;
  z-index: 50;
  transition: background .35s var(--ease), visibility 0s linear .35s;
  padding: 24px;
}
.modal-overlay.active {
  background: rgba(0,16,63,.65);
  visibility: visible;
  transition: background .35s var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal {
  background: var(--white);
  border-radius: 28px;
  padding: 32px 22px 22px;
  width: 100%;
  text-align: center;
  transform: scale(.85);
  opacity: 0;
  transition: transform .4s var(--ease-spring), opacity .35s var(--ease);
  position: relative;
  overflow: hidden;
}
.modal-overlay.active .modal { transform: scale(1); opacity: 1; }
.modal .ribbon-bg {
  position: absolute;
  top: -100px; left: -100px; right: -100px;
  height: 220px;
  background: radial-gradient(circle at center top, rgba(149,167,72,.18), transparent 70%);
  pointer-events: none;
}
.modal .check-circle {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  margin: 0 auto 16px;
  position: relative;
  animation: bounceIn .5s var(--ease-spring) both;
}
@keyframes bounceIn {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.modal .check-circle::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(149,167,72,.3);
  animation: checkRing 1.5s var(--ease) infinite;
}
@keyframes checkRing {
  0% { transform: scale(.7); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.modal h2 {
  font-size: 24px; font-weight: 800; color: var(--navy);
  letter-spacing: -.5px;
  margin-bottom: 6px;
}
.modal p {
  font-size: 13px; color: var(--muted); line-height: 1.5;
  margin-bottom: 18px;
}
.modal .summary {
  background: var(--cream);
  border-radius: 16px;
  padding: 14px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.modal .summary .team-mini {
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--navy);
}
.modal .summary .team-mini .fg { font-size: 22px; }
.modal .summary .score {
  font-size: 28px; font-weight: 800; color: var(--navy); letter-spacing: -.5px;
  font-feature-settings: "tnum";
}
.modal .actions { display: flex; flex-direction: column; gap: 10px; }
.modal .btn-secondary {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--navy);
  padding: 14px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  letter-spacing: .3px;
}
.modal .btn-secondary:active { transform: scale(.98); }
.modal-overlay.active .confetti i {
  animation: confetti 1.2s var(--ease) forwards;
}

@keyframes confetti {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(220px) rotate(720deg); opacity: 0; }
}

/* ============== RANKING ============== */
.rank-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 22px 70px;
  position: relative;
  overflow: hidden;
}
/* Cuando viene con el lomo álbum arriba: padding-top reducido + perforación matchea navy */
.rank-hero--with-spine { padding-top: 24px; }
.rank-hero::before {
  content: ""; position: absolute;
  top: -60px; right: -80px;
  width: 280px; height: 280px;
  background: rgba(255,255,255,.04);
  -webkit-mask: var(--casita-mask);
          mask: var(--casita-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.rank-hero h1 {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 6px;
}
.rank-hero .sub { font-size: 13px; color: rgba(255,255,255,.6); letter-spacing: .3px; }

/* Podium */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin: 32px auto 0;
  max-width: 320px;
}
.podium-spot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative;
  padding-top: 24px; /* aire arriba para la corona del 1° */
}
.podium-spot .crown {
  position: absolute;
  top: -4px; left: 50%; transform: translateX(-50%);
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.podium-spot .nm {
  font-size: 11px; font-weight: 700;
  text-align: center;
  max-width: 80px;
}
.podium-spot .pts {
  font-size: 10px; color: var(--olive-bright);
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
}
.podium-bar {
  width: 100%;
  background: rgba(255,255,255,.08);
  border-radius: 12px 12px 0 0;
  padding: 14px 0 8px;
  margin-top: 4px;
  text-align: center;
  font-size: 18px; font-weight: 800;
  position: relative;
}
.podium-spot.first .podium-bar { height: 80px; background: var(--gold); color: var(--navy); }
.podium-spot.second .podium-bar { height: 60px; }
.podium-spot.third .podium-bar { height: 44px; }
.podium-spot.first .podium-bar .label,
.podium-spot.second .podium-bar .label,
.podium-spot.third .podium-bar .label {
  position: absolute;
  bottom: 6px; left: 0; right: 0;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
}

/* My pos card */
.my-pos {
  margin: -40px 22px 0;
  background: var(--white);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow);
  border: 2px solid var(--olive);
  z-index: 2;
  position: relative;
}
.my-pos .pos-circle {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 1px;
  line-height: 1;
}
.my-pos .info { flex: 1; }
.my-pos .info .you { font-size: 10px; color: var(--olive); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
.my-pos .info .nm { font-size: 14px; color: var(--navy); font-weight: 700; }
.my-pos .info .change { font-size: 11px; color: var(--success); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.my-pos .points { text-align: right; }
.my-pos .points .v { font-family: 'Bebas Neue', 'Sora', sans-serif; font-size: 32px; font-weight: 400; color: var(--navy); letter-spacing: 1px; line-height: 1; font-feature-settings: "tnum"; }
.my-pos .points .l { font-size: 9px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }

/* Rank list */
.rank-list { padding: 18px 22px 0; display: flex; flex-direction: column; gap: 6px; }

/* Placeholder vacío del ranking · pre-Mundial. Sin padding lateral porque
   .rank-list ya tiene 22px (sino se ve más angosto que el resto del content). */
.rank-empty {
  padding: 24px 0 12px;
  text-align: center;
}
.rank-empty-logo {
  display: flex; justify-content: center;
  opacity: .12;
  margin-bottom: 14px;
}
.rank-empty-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 26px;
  color: var(--navy);
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 8px;
}
.rank-empty-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 300px;
  margin: 0 auto 24px;
}
.rank-empty-stats {
  display: flex;
  gap: 10px;
  margin: 0 0 22px;
}
.rank-empty-stat {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
}
.rank-empty-stat-num {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 28px;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}
.rank-empty-stat-lbl {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--olive);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.rank-empty-rules {
  background: var(--navy);
  border-radius: 16px;
  padding: 16px 18px;
  text-align: left;
  color: #fff;
}
.rank-empty-rules-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--olive-bright);
  margin-bottom: 10px;
}
.rank-empty-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  color: rgba(255,255,255,.85);
}
.rank-empty-rule .pts {
  display: inline-block;
  min-width: 36px;
  text-align: center;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 18px;
  color: var(--olive-bright);
  background: rgba(184,204,92,.15);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: .5px;
}
.rank-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.rank-item.you { border-color: var(--olive); background: rgba(149,167,72,.04); }
button.rank-item.you { font-family: inherit; cursor: pointer; text-align: left; width: 100%; }
button.rank-item.you:hover { background: rgba(149,167,72,.08); }
button.rank-item.you:active { transform: scale(.99); }
.rank-item .pos { font-family: 'Bebas Neue', 'Sora', sans-serif; font-size: 20px; font-weight: 400; color: var(--muted); letter-spacing: .5px; width: 40px; text-align: center; line-height: 1; }
.rank-item.you .pos { color: var(--olive); }
.rank-item .nm { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-item .pts { font-family: 'Bebas Neue', 'Sora', sans-serif; font-size: 22px; font-weight: 400; color: var(--navy); letter-spacing: .5px; line-height: 1; font-feature-settings: "tnum"; }
.rank-item .delta { font-size: 10px; color: var(--success); margin-left: 4px; font-weight: 700; }
.rank-item .delta.down { color: var(--danger); }

/* ============== PREMIOS ============== */
#screen-prizes { background: var(--cream); }
.prize-tab.active {
  background: var(--navy);
  color: var(--olive-bright);
  border-color: var(--navy);
}
.prize-card.locked { opacity: .55; }
.prize-card .top {
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
}
.prize-card.gold .top { background: var(--gold); color: var(--navy); }
.prize-card .top .pos { color: var(--olive-bright); font-weight: 800; }
.prize-card.gold .top .pos { color: var(--navy); }
.prize-card .body {
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.prize-card.gold .product { background: linear-gradient(135deg, #FFE9A8 0%, #F5D572 100%); }
.prize-card .info { flex: 1; }
.prize-card .info .cat {
  font-size: 10px; color: var(--olive); letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 700;
  margin-bottom: 4px;
}
.prize-card .info h3 { font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -.3px; line-height: 1.15; }
.prize-card .info .desc { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.prize-card .value {
  position: absolute; top: 12px; right: 12px;
  background: var(--olive);
  color: var(--navy);
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.prize-card.gold .value { background: var(--navy); color: var(--gold); }
.coupon .pct {
  width: 60px; height: 60px;
  border-radius: 14px;
  background: var(--olive);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800;
}
.coupon .info { flex: 1; }
.coupon .info .t { font-size: 14px; font-weight: 700; color: var(--navy); }
.coupon .info .s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.coupon .info .exp { font-size: 10px; color: var(--danger); margin-top: 4px; font-weight: 600; letter-spacing: .5px; }
.coupon .qr { width: 44px; height: 44px; background: var(--cream); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; }

/* ============== RESULTS ============== */
.result-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
}
/* Sin accent de color al costado — el puntaje (pts-pill) ya comunica el estado. */
.result-card .when-mini {
  font-size: 9px; color: var(--muted); letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 700;
  width: 42px; flex-shrink: 0;
  text-align: center;
}
.result-card .vs-mini { flex: 1; min-width: 0; }
.result-card .vs-mini .row { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink); }
.result-card .vs-mini .row .fg { font-size: 14px; }
.result-card .vs-mini .pred-line { font-size: 9px; color: var(--muted); margin-top: 4px; }
.result-card .scores {
  text-align: right;
  flex-shrink: 0;
}
.result-card .scores .real { font-family: 'Bebas Neue', 'Sora', sans-serif; font-size: 22px; font-weight: 400; color: var(--navy); letter-spacing: 1px; line-height: 1; font-feature-settings: "tnum"; }
.result-card .scores .pred-mini { font-size: 9px; color: var(--muted); margin-top: 4px; font-feature-settings: "tnum"; }
.result-card .pts-pill {
  background: var(--cream); color: var(--navy);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 16px; font-weight: 400; letter-spacing: .5px;
  min-width: 36px; text-align: center;
  line-height: 1;
}
.result-card.correct .pts-pill { background: var(--olive); color: var(--navy); }
.result-card.partial .pts-pill { background: rgba(212,168,42,.2); color: #8A6B11; }
.result-card.wrong .pts-pill { background: rgba(220,38,38,.1); color: var(--danger); }

/* ============== PROFILE ============== */
.profile-hero {
  background: var(--navy);
  color: #fff;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 22px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 32px 32px;
}
/* Penca card · lista de pencas privadas en perfil */
.penca-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}
.penca-card-body { flex: 1 1 auto; min-width: 0; }
.penca-card-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 18px;
  color: var(--navy);
  letter-spacing: .5px;
  line-height: 1.1;
  margin-bottom: 4px;
}
.penca-card-meta {
  font-size: 11.5px;
  color: var(--muted);
}
.penca-card-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.penca-card-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,16,63,.05);
  border-radius: 10px;
  text-decoration: none;
  color: var(--navy);
  font-size: 16px;
  transition: background .15s ease;
}
.penca-card-btn:hover { background: rgba(0,16,63,.10); }
.penca-card-btn--wa { background: #25D366; color: #fff; }
.penca-card-btn--wa:hover { background: #1cb053; }

/* Logout visible en el top-right del hero (Diego se quejó de que estaba
   enterrado al final del scroll). */
.profile-logout-btn {
  position: absolute;
  top: 18px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease;
}
.profile-logout-btn:hover { background: rgba(255,255,255,.18); }
.profile-logout-btn svg { opacity: .85; }
.profile-hero--with-spine { padding-top: 28px; }
.profile-hero::before {
  content: ""; position: absolute;
  top: -50px; right: -80px;
  width: 280px; height: 280px;
  background: rgba(255,255,255,.04);
  -webkit-mask: var(--casita-mask);
          mask: var(--casita-mask);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* Decorativo puro — no debe absorber clicks (bug del botón "Iniciá sesión"). */
  pointer-events: none;
}
.profile-avatar {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 800;
  margin: 0 auto 12px;
  border: 4px solid rgba(255,255,255,.15);
}
.profile-hero h1 { font-family: 'Bebas Neue', 'Sora', sans-serif; font-size: 32px; font-weight: 400; letter-spacing: 1px; line-height: 1; margin-top: 4px; }
.profile-hero .role { font-size: 11px; color: var(--olive-bright); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-top: 4px; }
.profile-hero .badge-row { display: flex; gap: 8px; margin-top: 16px; justify-content: center; }
.profile-hero .badge {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.85);
  display: flex; align-items: center; gap: 6px;
}

.stats-overview {
  margin: -50px 22px 0;
  background: var(--white);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  z-index: 2;
}
.stats-overview .so {
  text-align: center; padding: 4px;
  border-right: 1px solid var(--line);
}
.stats-overview .so:last-child { border-right: none; }
.stats-overview .so .v { font-family: 'Bebas Neue', 'Sora', sans-serif; font-size: 32px; font-weight: 400; color: var(--navy); letter-spacing: 1px; line-height: 1; font-feature-settings: "tnum"; }
.stats-overview .so .l { font-size: 10px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; margin-top: 2px; }

/* Headers de sección dentro del perfil — mismo lenguaje que section-head en home */
.profile-section-head {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 18px;
  color: var(--navy);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.profile-section-head::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 14px;
  background: var(--olive);
  border-radius: 2px;
  margin-right: 8px;
}

.menu-list { padding: 22px 22px 0; display: flex; flex-direction: column; gap: 6px; }
.menu-item {
  background: var(--white);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: background .15s var(--ease);
  border: 1px solid var(--line);
}
.menu-item:active { background: var(--cream); }
.menu-item .icon-wrap {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.menu-item .label { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); }
.menu-item .arrow { color: var(--muted); }
.menu-item .arrow svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; }

/* Toast */
.toast {
  position: absolute;
  top: 70px; left: 22px; right: 22px;
  background: var(--navy);
  color: #fff;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  z-index: 99;
  transform: translateY(-120%);
  transition: transform .4s var(--ease-spring);
  box-shadow: var(--shadow);
}
.toast.show { transform: translateY(0); }
.toast .ic {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.sheet-overlay.active {
  background: rgba(0,16,63,.5);
  visibility: visible;
  transition: background .3s var(--ease);
  backdrop-filter: blur(4px);
}
.sheet {
  background: var(--white);
  border-radius: 28px 28px 0 0;
  width: 100%;
  max-height: 80%;
  padding: 14px 0 28px;
  transform: translateY(100%);
  transition: transform .4s var(--ease);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sheet-overlay.active .sheet { transform: translateY(0); }
.sheet-handle {
  width: 40px; height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin: 0 auto 12px;
}
.sheet-title {
  padding: 0 22px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.sheet-title h2 { font-size: 16px; font-weight: 800; color: var(--navy); }
.sheet-title button {
  background: var(--cream); border: none;
  font-size: 11px; color: var(--muted);
  padding: 6px 10px; border-radius: 10px;
  font-family: inherit; font-weight: 600; cursor: pointer;
}
.notif-item .ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--navy); color: var(--olive-bright);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.notif-item .ic.alert { background: var(--olive); color: var(--navy); }
.notif-item .ic.live { background: rgba(220,38,38,.15); color: var(--danger); }
.notif-item .body { flex: 1; }
.notif-item .body .t { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
.notif-item .body .d { font-size: 11px; color: var(--muted); line-height: 1.4; }
.notif-item .time { font-size: 10px; color: var(--muted-soft); white-space: nowrap; }

/* Responsive */
@media (max-width: 480px) {
  body { padding: 0; align-items: stretch; }
  .stage { gap: 0; }
  .brand-watermark, .help-card, .stage::before { display: none; }
  .phone {
    width: 100%; height: 100vh; max-height: -webkit-fill-available;
    border-radius: 0; padding: 0;
    box-shadow: none;
  }
  .phone-screen, .screens { border-radius: 0; }
  .tabbar { border-radius: 0; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .phone::after { display: none; }
}
/* Casita mask used by various elements */
:root {
  --casita-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248.9 221.6'><path d='M233.1,60.6L141.7,4.8c-10.6-6.4-23.9-6.4-34.5,0L15.9,60.6C6,66.6,0,77.3,0,88.8v99.7c0,18.3,14.8,33.1,33.1,33.1h182.7c18.3,0,33.1-14.8,33.1-33.1V88.8C248.9,77.3,242.9,66.6,233.1,60.6z'/></svg>");
}
.brand-watermark .casita,
.login-top .casita,
.splash-logo {
  -webkit-mask-image: var(--casita-mask);
          mask-image: var(--casita-mask);
}
.home-hero::before,
#screen-login::before,
.rank-hero::before,
.profile-hero::before,
.onb-illust .casita-bg {
  -webkit-mask-image: var(--casita-mask);
          mask-image: var(--casita-mask);
}

/* ============================================================
   Adiciones para páginas reales (registro, flash, errores)
   ============================================================ */
.field-label {
  font-size: 10px;
  color: rgba(255,255,255,.55);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #FFB4B4;
  font-weight: 500;
}
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: rgba(255,255,255,.78);
  line-height: 1.45;
  margin-top: 4px;
}
.consent input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--olive-bright);
}
.penca-flash {
  margin: 8px 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
}
.penca-flash--error {
  background: rgba(220,38,38,.12);
  color: #FFB4B4;
  border: 1px solid rgba(220,38,38,.3);
}

/* ============================================================
   Layout override — MOBILE-ONLY (<640px): fullscreen, sin frame.
   En desktop (>=640px) el frame .phone (390x844) está activo y
   estos overrides NO deben dispararse.
   ============================================================ */
@media (max-width: 639.98px) {
  body {
    padding: 0;
    align-items: stretch;
    display: block;
    background: var(--bg);
  }
  .stage {
    display: block;
    min-height: 100vh;
    gap: 0;
  }
  .stage::before { display: none; }
  .phone {
    position: static;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100vh;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .phone::after { display: none; }
  .phone-screen {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100vh;
    border-radius: 0;
    background: var(--white);
  }
  .screens {
    position: static;
    border-radius: 0;
    height: auto;
    min-height: 100vh;
  }
  .screen {
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  /* Sticky bottom bar (predict.php) en lugar de absolute */
  .predict-foot {
    position: sticky;
    bottom: 0;
  }
}

/* ============================================================
   DESKTOP — "LA MESA": fieltro navy de marca + rail-lomo de
   navegación. Sin dispositivo. Mobile-first: sin min-width,
   la app queda fullscreen igual que en mobile.
   ============================================================ */
@media (min-width: 640px) {
  /* Fieltro azul de marca: navy con spotlight central + grilla técnica tenue */
  :root {
    --penca-desktop-bg:
      linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px) 0 0 / 48px 48px,
      linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px) 0 0 / 48px 48px,
      radial-gradient(ellipse 60% 56% at 52% 40%, #173594 0%, #0A1E5E 44%, #00103F 76%, #00081F 100%);
  }
  body {
    background: var(--penca-desktop-bg) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
  }
  /* Trigramas de fondo: los anfitriones del Mundial 26 (USA·MEX·CAN) + URU */
  body::before, body::after, .stage::before, .stage::after {
    position: fixed;
    font-family: 'Bebas Neue', 'Sora', sans-serif;
    font-size: clamp(170px, 21vw, 320px);
    line-height: .8;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,.07);
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
  }
  body::before  { content: "URU"; top: -3vh;    left:  max(-60px, calc(50vw - 700px)); transform: rotate(-10deg); }
  body::after   { content: "MEX"; bottom: -5vh; right: max(-60px, calc(50vw - 700px)); transform: rotate(8deg); }

  /* FRAME IPHONE DESKTOP — el sitio se renderiza igual que en mobile,
     dentro del marco de iPhone. Sin layout desktop especial → cero doble
     mantenimiento. La Mesa (passthrough + workspace 1180 + rail-lomo) fue
     reemplazada por el frame .phone (definido en .phone línea 158). */
  .stage {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px 16px !important;
    position: relative;
  }
  .stage::before { content: "USA"; top: -2vh;    right: max(-60px, calc(50vw - 700px)); transform: rotate(7deg); }
  .stage::after  { content: "CAN"; bottom: -4vh; left:  max(-60px, calc(50vw - 700px)); transform: rotate(-7deg); }
  /* .phone, .phone-screen, .screens, .screen → usar el default de mobile (390×844).
     No hacer passthrough: el contenido vive dentro del marco. */
}

/* Mobile: tabbar fixed al viewport. Desktop: usa el default absolute (línea 290)
   y queda dentro del .phone-screen (movida via JS adoptTabbarToFrame). */
@media (max-width: 639.98px) {
  .tabbar {
    position: fixed !important;
    left: 0; right: 0;
    bottom: 0;
    border-radius: 0;
    z-index: 50;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}
@media (min-width: 640px) {
  /* Tabbar dentro del frame iPhone: absolute al .phone-screen en vez de fixed
     al viewport. Mismo look-and-feel que mobile. */
  .tabbar {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    border-radius: 0 0 44px 44px !important;
    padding-bottom: 18px !important;
  }
  /* Scrollbar estilizada para el área alrededor del frame */
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.13);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.24);
    background-clip: padding-box;
  }
}

/* Bottom clearance — tabbar fija mide ~80px + safe-area-inset-bottom en
   iPhone X+ (~34px). Usamos max() para garantizar al menos 140px y respetar
   notch en devices grandes (Pro Max). Antes era 124px fijo, que no alcanzaba
   en iPhone 14/15 Pro Max → última card quedaba tapada por la tabbar. */
.screen-body { padding-bottom: max(140px, calc(96px + env(safe-area-inset-bottom))) !important; }

/* Body bg que matchea el hero principal de cada pantalla — para que las
   safe-areas de iOS no se vean crema mientras la pantalla es navy/white. */
body.bn { background: var(--navy) !important; }
body.bw { background: #EDE6D8 !important; } /* warm sand — página interior del álbum, deja flotar la card crema */
@media (min-width: 640px) {
  /* En desktop, todas las páginas comparten la escena de marca (la página
     real vive dentro del marco) — no el navy/sand plano del mobile. */
  body.bn, body.bw {
    background: var(--penca-desktop-bg) !important;
    background-attachment: fixed !important;
  }
}

/* Safe-area padding para pantallas sin tabbar ni predict-foot */
#screen-login,
#screen-rules,
.screen.no-tabbar {
  padding-bottom: max(40px, env(safe-area-inset-bottom, 24px)) !important;
}

/* Botón primary "flotante" en heroes navy */
#screen-login .btn-primary,
.btn-primary.lift {
  box-shadow: 0 10px 28px rgba(184, 204, 92, .35);
  font-size: 15px;
  padding: 18px 22px;
}

/* Registro/login compactos para que entre todo sin scroll forzado en iPhones SE-tier */
@media (max-width: 639.98px) {
  .phone-screen { overflow: visible !important; }
}
#screen-login {
  padding-top: 28px !important;
  padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
}
#screen-login .login-top { margin-bottom: 22px !important; }
#screen-login .login-eyebrow { margin-bottom: 6px !important; font-size: 10px !important; }
#screen-login .login-title { font-size: 38px !important; line-height: 1 !important; margin-bottom: 10px !important; letter-spacing: 1px !important; }
#screen-login .login-sub { font-size: 13px !important; margin-bottom: 18px !important; max-width: none !important; }
#screen-login .login-form { gap: 8px !important; }
#screen-login .field { padding: 8px 14px !important; gap: 1px !important; border-radius: 12px !important; }
#screen-login .field input { font-size: 16px !important; padding: 2px 0 !important; }
#screen-login .field-label { font-size: 9px !important; letter-spacing: 1.5px !important; }
#screen-login .consent { font-size: 12px !important; margin-top: 2px !important; }
#screen-login .login-foot { font-size: 10px !important; margin-top: 16px !important; line-height: 1.5 !important; }
#screen-login .btn-primary { padding: 14px 22px !important; font-size: 14px !important; }

/* MOBILE-ONLY: document-level scroll. En desktop el frame iPhone tiene su
   propio scroll interno (.phone-screen overflow:auto), así que estas reglas
   no deben aplicar. */
@media (max-width: 639.98px) {
  html, body {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  body { overflow-x: hidden !important; }
  .phone-screen,
  .screens,
  .screen,
  .screen-body {
    overflow: visible !important;
  }
  .screen-body {
    flex: initial !important;
  }
}
/* DESKTOP: scroll interno al .phone-screen. El contenido se recorta al frame
   y se puede scrollear sin afectar el documento. */
@media (min-width: 640px) {
  /* Frame iPhone responsive: cap al viewport. Mantiene aspect ratio
     390:844 (iPhone 14/15). Si el viewport es chico, el frame se
     achica proporcionalmente. */
  .phone {
    height: min(844px, calc(100vh - 40px)) !important;
    width: calc(min(844px, calc(100vh - 40px)) * 0.462) !important;
    min-height: 0 !important;
    max-height: 844px !important;
    flex: 0 0 auto !important;
    aspect-ratio: 390 / 844;
  }
  .phone-screen {
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}

/* Registro no necesita ser flex column — pasa a block para fluir natural */
#screen-login {
  display: block !important;
}
.login-foot { margin-top: 16px !important; }

/* Modal overlay debe ser fixed para cubrir todo el viewport */
.modal-overlay { position: fixed !important; inset: 0 !important; z-index: 100 !important; }

/* Header compacto en registro/login — logo solo, 96px, sin texto al lado.
   Reemplaza el layout viejo (casita-mask + texto Multi Soluciones).
   El logo SVG ya contiene la marca completa engravada. */
#screen-login .login-top {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 22px !important;
  gap: 0 !important;
  flex-direction: row !important;
}
#screen-login .login-top svg { display: block; }

/* Casita decorativa enorme (::before) extendía el viewport y rompía mobile.
   La ocultamos — el logo del header ya carga el peso visual de la marca. */
#screen-login::before { display: none !important; }

/* iOS Safari hace zoom automático al enfocar inputs con font-size < 16px.
   Forzamos 16px mínimo en todos los form elements de la app. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  font-size: 16px !important;
}

/* Pantallas full-color (registro/login en navy) tienen que cubrir 100vh,
   sino la phone-screen blanca asoma debajo. */
#screen-login { min-height: 100vh; }
.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 22px 14px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.section-group:first-of-type .section-head {
  border-top: none;
  padding-top: 6px;
}

/* ============================================================
   Splash landing (/penca/index.php) — premios protagonistas
   ============================================================ */
#screen-login.splash { padding: 32px 20px 20px; }
#screen-login.splash .login-top { margin-bottom: 18px; }
#screen-login.splash .login-title { font-size: 34px; line-height: 1.05; margin-bottom: 8px; letter-spacing: -.8px; }
#screen-login.splash .login-sub { font-size: 14px; margin-bottom: 22px; max-width: 360px; }

.podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 8px;
  align-items: end;
}
.prize-tile.first {
  background: linear-gradient(180deg, rgba(212,168,42,.20) 0%, rgba(212,168,42,.04) 100%);
  border-color: rgba(212,168,42,.55);
  padding: 18px 10px 16px;
  box-shadow: 0 12px 32px -10px rgba(212,168,42,.45);
}
.prize-badge.gold { background: var(--gold); color: var(--navy); }
.prize-tile.first .prize-ico { width: 28px; height: 28px; color: var(--gold); }
.prize-tile.first .prize-line { font-size: 15px; }
.prize-tile.second .prize-line,
.prize-tile.third  .prize-line { color: rgba(255,255,255,.85); }

@media (max-height: 700px) {
  #screen-login.splash .login-title { font-size: 30px; }
  #screen-login.splash .login-sub { margin-bottom: 16px; }
  .splash-prizes { margin-bottom: 16px; }
}

/* ============================================================
   Wrappers de layout desktop — en mobile son transparentes
   (display:contents), así el flujo de una sola columna queda
   idéntico al original. En desktop pasan a grid/flex reales.
   ============================================================ */
.login-aside, .login-main,
.splash-hero, .splash-hero-left, .splash-hero-right,
.splash-sections {
  display: contents;
}

/* ============================================================
   DESKTOP — login / registro: layout partido real.
   Izquierda: arte de marca sobre el fieltro (logo, titular XL,
   trigramas de fondo visibles). Derecha: panel navy con el form.
   ============================================================ */
@media (min-width: 9999px) {
  #screen-login:not(.splash) {
    display: block !important;
    min-height: 100vh !important;
    padding: 0 !important;
  }
  #screen-login:not(.splash) .login-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(440px, 0.85fr);
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Panel de arte — transparente: deja ver el fieltro + trigramas */
  #screen-login .login-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px clamp(48px, 6vw, 120px);
    position: relative;
    z-index: 1;
  }
  #screen-login .login-aside .login-top    { margin-bottom: 44px !important; }
  #screen-login .login-aside .login-eyebrow{ font-size: 12px !important; margin-bottom: 14px !important; }
  #screen-login .login-aside .login-title  {
    font-size: clamp(48px, 5vw, 76px) !important;
    line-height: .96 !important;
    letter-spacing: 1px !important;
    margin-bottom: 18px !important;
  }
  #screen-login .login-aside .login-sub {
    font-size: 16px !important;
    line-height: 1.55 !important;
    max-width: 440px !important;
    margin-bottom: 0 !important;
  }

  /* Panel del formulario — superficie navy más oscura, separada */
  #screen-login .login-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 72px clamp(40px, 4.5vw, 88px);
    background: linear-gradient(180deg, #061554 0%, #00103F 100%);
    box-shadow: inset 1px 0 0 rgba(255,255,255,.07),
                -48px 0 90px -50px rgba(0,0,0,.75);
    position: relative;
    z-index: 1;
  }
  #screen-login .login-main > * {
    width: 100%;
    max-width: 380px;
  }
  #screen-login .login-main .login-form { gap: 12px !important; }
  #screen-login .login-main .field {
    padding: 12px 16px !important;
    border-radius: 14px !important;
    gap: 3px !important;
  }
  #screen-login .login-main .field-label { font-size: 10px !important; letter-spacing: 2px !important; }
  #screen-login .login-main .login-foot  { margin-top: 26px !important; }
}

/* ============================================================
   DESKTOP — splash (index.php): hero partido 50/50 + secciones
   a lo ancho del workspace (1140px).
   ============================================================ */
@media (min-width: 9999px) {
  #screen-login.splash {
    display: block !important;
    min-height: 100vh !important;
    padding: 0 !important;
  }
  #screen-login.splash .login-card {
    display: block;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 56px 40px 88px;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }

  .splash-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
    min-height: calc(100vh - 144px);
  }
  .splash-hero-left  { display: block; position: relative; z-index: 1; }
  .splash-hero-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 44px 40px;
    background: linear-gradient(180deg, #061554 0%, #00103F 100%);
    border-radius: 24px;
    box-shadow: 0 34px 80px -32px rgba(0,0,0,.72),
                inset 0 0 0 1px rgba(255,255,255,.07);
    position: relative;
    z-index: 1;
  }

  #screen-login.splash .login-title {
    font-size: clamp(46px, 4.6vw, 72px) !important;
    line-height: .98 !important;
    margin-bottom: 14px !important;
  }
  #screen-login.splash .login-sub {
    font-size: 16px !important;
    max-width: 460px !important;
    margin-bottom: 24px !important;
  }
  #screen-login.splash .splash-prizes { margin-bottom: 0 !important; }

  /* Secciones bajo el fold — a lo ancho del workspace */
  .splash-sections { display: block; }
  /* Los 3 pasos pasan a fila horizontal en desktop */
  .splash-steps { flex-direction: row !important; }
  .splash-steps > div { flex: 1; }
}

/* ============================================================
   Topbar slim — marca presente en cada tab page sin robar foco
   ============================================================ */
/* Topbar eliminada — la marca vive en home-hero / app-header.
   El padding-top de los heroes/headers absorbe el safe-area-inset-top. */

/* No horizontal scroll bajo ninguna circunstancia — bulletproof contra
   pseudo-elementos decorativos que sobresalen del viewport. */
html {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  /* HTML siempre navy: en iOS Safari el rubber-band del document muestra el
     color del primer ancestro con bg. Body queda transparente más abajo y
     el color del contenido (cream/navy) vive en .stage. */
  background: var(--navy) !important;
}
/* iOS Safari: el rubber-band del scroll del document muestra el bg del primer
   ancestro opaco. Si body/stage/phone-screen son opacos con un color != navy,
   se ve ese color (cream/blanco) en pull-down. La cadena queda transparent
   hasta llegar al html (navy). El color real del contenido va al wrapper
   más interno (.screen-body) que NO cubre todo el viewport. */
body.bw, body.bn { background: transparent !important; }
body.bw .stage,
body.bn .stage { background: transparent !important; }
body.bw .phone,
body.bn .phone { background: transparent !important; }
body.bw .phone-screen { background: #EDE6D8 !important; }
body.bn .phone-screen { background: var(--navy) !important; }
body { overflow-x: hidden !important; max-width: 100vw !important; }
.stage, .phone, .phone-screen { overflow-x: hidden !important; max-width: 100vw !important; }

/* Tabbar más slim — antes era ~88px + safe-area, ahora ~64px + safe-area */
.tabbar {
  padding: 6px 12px max(14px, env(safe-area-inset-bottom, 14px)) !important;
}
.tab { padding: 4px 2px !important; gap: 2px !important; }
.tab svg { width: 20px !important; height: 20px !important; stroke-width: 2 !important; }
.tab svg[viewBox="0 0 248.9 221.6"] { stroke-width: 22 !important; }
.tab { font-size: 10px !important; }

/* Tabbar typography — directiva del Creative Director.
   10px se renderiza sub-pixel en Android mid-range → labels "raras".
   11px / weight 500 / tracking 0 es el estándar iOS/Material. */
.tab {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
  gap: 4px !important;
}
/* Ya no usamos casita en tabbar — limpio override viejo */
.tab svg[viewBox="0 0 248.9 221.6"] { stroke-width: 2 !important; }

/* El deck (flex:1) llena el alto entre stats y tabbar. El padding-bottom
   reserva EXACTAMENTE el alto de la tabbar (6 top + 55 tab + max(14,safe))
   → el card termina justo arriba de la tabbar, sin meterse detrás ni dejar hueco. */
#screen-predict .screen-body {
  padding-bottom: calc(61px + max(14px, env(safe-area-inset-bottom, 14px))) !important;
}

/* ============================================================
   Toast notification — pencaToast(msg, type)
   ============================================================ */
.toast-host {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: max(64px, calc(env(safe-area-inset-top, 0px) + 56px)) 16px 0;
  pointer-events: none;
  max-width: 480px;
  width: 100%;
  box-sizing: border-box;
}
.toast {
  background: var(--navy);
  color: #fff;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  pointer-events: auto;
  animation: toast-in .35s cubic-bezier(.16,1,.3,1) both;
}
.toast.success { background: var(--olive); color: var(--navy); }
.toast.error { background: var(--danger); color: #fff; }
.toast.leaving { animation: toast-out .25s ease forwards; }
.toast .ic { font-size: 16px; flex-shrink: 0; }
@keyframes toast-in {
  from { transform: translateY(-120%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateY(-120%); opacity: 0; }
}

/* Cards pronosticados — diferenciación con neutrales.
   Accent (olive) SOLO en el check chico, no para tintar cards ni rellenar chips. */
.match-card.predicted::before {
  width: 22px !important;
  height: 22px !important;
  font-size: 13px !important;
  top: 14px !important;
  right: 14px !important;
}
.match-card .pred-chip {
  display: inline-block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}
.match-card .pred-chip b {
  color: var(--navy);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
}

/* ============================================================
   Bottom sheets (goleadores, info "Cómo se puntúa")
   ============================================================ */
.penca-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.penca-sheet[data-open="true"] { display: block; }

/* Body lock global cuando hay cualquier sheet abierto. La técnica real
   (position: fixed + captura de scrollY) la aplica el JS en penca.js, esto
   es solo un fallback para browsers sin JS y para impedir overflow horizontal. */
body.sheet-open { overflow: hidden !important; touch-action: none; }
.penca-sheet .sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,16,63,.5);
  opacity: 0;
  transition: opacity .25s ease;
}
.penca-sheet[data-open="true"] .sheet-backdrop { opacity: 1; }
.penca-sheet .sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--cream);
  border-radius: 22px 22px 0 0;
  padding: 14px 20px max(28px, env(safe-area-inset-bottom, 14px));
  max-height: 78vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 -20px 50px -10px rgba(0,16,63,.30);
}
.penca-sheet[data-open="true"] .sheet-panel { transform: translateY(0); }
.sheet-handle {
  width: 40px; height: 4px;
  background: rgba(0,16,63,.18);
  border-radius: 4px;
  margin: 0 auto 14px;
}
.sheet-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.3px;
}
.sheet-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.sheet-body { margin: 18px 0; display: flex; flex-direction: column; gap: 14px; }
.sheet-team-block {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 12px 14px;
}
.sheet-team-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 6px;
}
.sheet-team-slots > select {
  width: 100%;
  padding: 11px 38px 11px 13px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 600;
  color: var(--ink);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.sheet-team-slots > select:focus {
  outline: none;
  border-color: var(--olive);
}
.sheet-empty {
  font-size: 12px; color: var(--muted);
  text-align: center; padding: 6px 0;
}
.sheet-actions {
  display: flex; gap: 8px;
  padding-top: 8px;
}
.sheet-actions button {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
}
.sheet-actions .btn-skip {
  background: rgba(0,27,107,.08);
  color: var(--navy);
}
.sheet-actions .btn-save {
  background: var(--navy);
  color: var(--olive-bright);
}

/* Info modal (Cómo se puntúa) — usa el mismo .penca-sheet pero más corto */
.penca-sheet.is-info .sheet-panel { max-height: 60vh; }

/* === SHEET DEL GOLEADOR — diseño hero, más prominente que el sheet genérico === */
.penca-sheet--goleador .sheet-panel {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 65%, #150A3A 100%);
  color: #fff;
  max-height: 92vh;
  padding-top: 10px;
}
.penca-sheet--goleador .sheet-handle { background: rgba(255,255,255,.22); }

/* Hero del sheet — eyebrow gold + título Bebas + sub */
.gol-hero { text-align: center; padding: 6px 4px 18px; border-bottom: 1px solid rgba(255,255,255,.10); }
.gol-hero-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  color: var(--gold); text-transform: uppercase;
  margin-bottom: 8px;
}
.gol-hero-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 28px; font-weight: 400; letter-spacing: .8px;
  color: #fff; line-height: 1.05;
  margin: 0 0 6px;
}
.gol-hero-sub {
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
  line-height: 1.5;
  margin: 0;
}
.gol-hero-deadline { display: inline-block; margin-top: 4px; color: rgba(255,255,255,.85); }
.gol-hero-deadline b { color: var(--olive-bright); font-weight: 700; }
.gol-hero-deadline--closed { color: var(--penca-urgent); }

/* Botón "Sellar mi elección" — gold accent, copy emocional */
.gol-actions { border-top: 1px solid rgba(255,255,255,.10); margin-top: 10px; padding-top: 14px !important; }
.gol-actions .btn-skip {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.gol-actions .btn-skip:active { background: rgba(255,255,255,.15) !important; }
.gol-btn-save {
  background: var(--gold) !important;
  color: var(--navy) !important;
  display: inline-flex !important;
  align-items: center; justify-content: center; gap: 8px;
  font-weight: 800 !important;
  letter-spacing: .5px;
  flex: 1.4 !important;
  box-shadow: 0 8px 22px rgba(212,168,42,.35);
}
.gol-btn-save:active { transform: scale(.98); filter: brightness(.95); }
.gol-btn-save span { font-size: 18px; line-height: 1; }

/* === Buscador de goleador del torneo (dentro del sheet) === */
.gol-picked {
  font-size: 13px; color: var(--navy);
  background: rgba(149,167,72,.16);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 10px;
}
.gol-picked b { font-weight: 800; }
.gol-search {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 12px; font-size: 14px; font-family: inherit;
  background: var(--white); color: var(--ink);
}
.gol-search:focus { outline: none; border-color: var(--olive); }
.gol-results {
  margin-top: 10px;
  max-height: 38vh; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
.gol-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  background: transparent; border: none;
  border-bottom: 1px solid var(--line);
  font-family: inherit; cursor: pointer; text-align: left;
}
.gol-row:last-child { border-bottom: none; }
.gol-row:active { background: var(--cream-2); }
.gol-row.is-sel { background: rgba(149,167,72,.18); }
.gol-row .gol-row-flag,
.gol-row .gol-row-noflag {
  width: 22px; height: 22px; border-radius: 50%;
  flex: 0 0 auto; background: #fff;
}
.gol-row .gol-row-noflag { background: var(--cream-2); }
.gol-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gol-row-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.gol-row-team { font-size: 11px; color: var(--muted); }
.gol-row-pos {
  font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--olive); background: rgba(149,167,72,.10);
  padding: 3px 7px; border-radius: 999px; flex: 0 0 auto;
}
.gol-empty, .gol-hint {
  padding: 22px 16px; text-align: center;
  font-size: 13px; color: var(--muted);
}

/* Top picks: los más elegidos por otros players (social proof) */
.gol-top-picks { margin: 4px 0 14px; }
.gol-top-picks-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--olive);
  margin: 0 0 8px;
}
.gol-top-picks-list {
  display: flex; gap: 8px;
  overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gol-top-picks-list::-webkit-scrollbar { display: none; }
.gol-top-pick {
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-width: 150px; max-width: 180px;
  display: grid;
  grid-template-columns: 32px auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
  padding: 8px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: inherit; cursor: pointer; text-align: left;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.gol-top-pick:hover  { border-color: var(--olive-bright); }
.gol-top-pick:active { transform: scale(.97); }
.gol-top-pick.is-sel { border-color: var(--olive); background: rgba(149,167,72,.10); }
.gol-top-pick-avatar {
  grid-row: 1 / 3;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 14px; letter-spacing: .5px;
}
.gol-top-pick-flag { flex: 0 0 auto; }
.gol-top-pick-flag svg { width: 18px; height: 18px; border-radius: 50%; }
.gol-top-pick-name {
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.gol-top-pick-meta {
  grid-column: 2 / 4;
  font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gol-search-wrap { margin-top: 4px; }

/* === Overrides sobre fondo dark del sheet goleador === */
.penca-sheet--goleador .gol-picked {
  background: linear-gradient(135deg, rgba(212,168,42,.20), rgba(184,204,92,.16));
  color: #fff;
  border: 1px solid rgba(212,168,42,.45);
  padding: 12px 14px;
  font-size: 13.5px;
  display: flex; align-items: center; gap: 10px;
}
.penca-sheet--goleador .gol-picked::before {
  content: '⚽';
  font-size: 22px;
  line-height: 1;
}
.penca-sheet--goleador .gol-picked b { color: var(--olive-bright); }

.penca-sheet--goleador .gol-top-picks-title {
  color: var(--gold);
  font-size: 11px; letter-spacing: 2px;
}
.penca-sheet--goleador .gol-top-pick {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff;
  min-width: 170px; max-width: 200px;
  padding: 10px 12px;
}
.penca-sheet--goleador .gol-top-pick:hover  { border-color: var(--gold); background: rgba(212,168,42,.10); }
.penca-sheet--goleador .gol-top-pick.is-sel {
  border-color: var(--gold);
  background: rgba(212,168,42,.18);
  box-shadow: 0 0 0 2px rgba(212,168,42,.25);
}
.penca-sheet--goleador .gol-top-pick-avatar {
  background: linear-gradient(135deg, var(--gold) 0%, #b8902f 100%);
  color: var(--navy);
}
.penca-sheet--goleador .gol-top-pick-name { color: #fff; font-size: 13px; }
.penca-sheet--goleador .gol-top-pick-meta { color: rgba(255,255,255,.55); }

.penca-sheet--goleador .gol-search {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: #fff;
}
.penca-sheet--goleador .gol-search::placeholder { color: rgba(255,255,255,.45); }
.penca-sheet--goleador .gol-search:focus { border-color: var(--gold); background: rgba(255,255,255,.10); }

.penca-sheet--goleador .gol-results {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  max-height: 36vh;
}
.penca-sheet--goleador .gol-row {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.08);
}
.penca-sheet--goleador .gol-row:active { background: rgba(255,255,255,.06); }
.penca-sheet--goleador .gol-row.is-sel { background: rgba(212,168,42,.15); }
.penca-sheet--goleador .gol-row-name { color: #fff; }
.penca-sheet--goleador .gol-row-team { color: rgba(255,255,255,.55); }
.penca-sheet--goleador .gol-row-pos {
  color: var(--gold);
  background: rgba(212,168,42,.15);
}
.penca-sheet--goleador .gol-row .gol-row-noflag { background: rgba(255,255,255,.10); }
.penca-sheet--goleador .gol-empty {
  color: rgba(255,255,255,.50);
  padding: 18px;
}
.penca-sheet--goleador label { color: rgba(255,255,255,.85) !important; }
.penca-sheet--goleador label input[type="checkbox"] { accent-color: var(--gold) !important; }
.info-rules { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 6px; }
.info-rule {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--ink);
  background: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.info-rule .pts {
  background: var(--olive);
  color: var(--navy);
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .3px;
  flex: 0 0 auto;
}

/* ============================================================
   AFORDANCIA DE MOUSE — hover, cursores y foco para desktop.
   Todo va dentro de @media (hover:hover) → los dispositivos
   táctiles NUNCA heredan hover pegajoso (siguen con :active).
   ============================================================ */
@media (hover: hover) {
  /* --- Cards clickeables: se elevan --- */
  .match-live, .match-card, .cta-banner, .prize-card,
  .group-card, .fase-card, .goleador-card {
    transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
    cursor: pointer;
  }
  .match-live:hover, .match-card:hover, .cta-banner:hover, .prize-card:hover,
  .group-card:hover, .fase-card:hover, .goleador-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -10px rgba(0,16,63,.34);
  }

  /* --- Botones rellenos: brillo + micro-lift --- */
  .btn-primary, .onb-next, .card-cta, .modal .btn-secondary, .btn-ghost {
    transition: filter .16s var(--ease), transform .16s var(--ease), background-color .16s var(--ease);
  }
  .btn-primary:hover, .onb-next:hover,
  .modal .btn-secondary:hover {
    filter: brightness(1.08);
  }
  .btn-ghost:hover { background: rgba(255,255,255,.06); }
  /* card-cta: lift suave — no toca el fondo (sirve para relleno y outline) */
  .card-cta:hover { transform: translateY(-1.5px); }

  /* --- Filas de lista: tinte de fondo --- */
  .menu-item, .gol-row, .info-rule {
    transition: background-color .14s var(--ease);
    cursor: pointer;
  }
  .menu-item:hover, .gol-row:hover { background: var(--cream-2); }

  /* --- Controles chicos --- */
  .step-btn, .chip, .band-btn, .album-back, .card-goleadores-chip, .picker .ctrl {
    transition: background-color .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease);
  }
  .step-btn:hover { border-color: var(--navy); }
  .chip:hover { border-color: var(--navy); }
  .band-btn:hover { background: rgba(255,255,255,.14); }
  .album-back:hover { filter: brightness(1.06); }
  .card-goleadores-chip:hover { background: rgba(149,167,72,.18); }
  .picker .ctrl:hover { background: var(--cream-2); }

  /* --- Tabbar: el pill del ícono asoma en hover --- */
  .tab { cursor: pointer; }
  .tab:hover .tab-ico { background-color: rgba(184,204,92,.14); }
  .tab.active:hover .tab-ico { background-color: rgba(184,204,92,.30); }

  /* --- Afordancia de arrastre: el deck y la ruedita se "agarran" --- */
  .swipe-card--top { cursor: grab; }
  .swipe-card--top:active { cursor: grabbing; }

  /* --- FAQ accordion --- */
  .faq-item summary { cursor: pointer; }
}

/* Foco de teclado visible (desktop tabula) — sin afectar a quien usa mouse */
:focus-visible {
  outline: 2px solid var(--olive-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   LA MESA — layouts de escritorio por página (fase 2).
   .dash* son wrappers transparentes (display:contents) en mobile.
   ============================================================ */
.dash, .dash-main, .dash-side { display: contents; }

@media (min-width: 9999px) {
  /* ---- HOME — dashboard 2 columnas ---- */
  /* Hero compacto: saludo a la izquierda, status (posición + stats)
     agrupado a la derecha — sin huecos flotando. */
  #screen-home .home-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 16px 24px;
    border-radius: 22px;
    box-shadow: 0 16px 38px -16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06);
  }
  /* margin-right:auto empuja todo lo demás (posición + stats) hacia la derecha, junto */
  #screen-home .home-greeting { margin: 0 auto 0 0 !important; flex: 0 0 auto; }
  #screen-home .greet-right { display: none; }
  /* posición: ancho de contenido (sin estirar → la flecha no queda lejos) */
  #screen-home .home-hero .stats-card { flex: 0 1 auto; margin: 0; }
  /* Jerarquía: bloques apilados a lo ancho — próximos partidos domina,
     goleador+invitar peso medio, sponsor banda al pie. */
  #screen-home .dash {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
  }
  #screen-home .dash-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }
  /* Secundarios: goleador + invitar emparejados cuando hay espacio.
     auto-fit con min 280px → en pantallas estrechas pasa a 1 columna sin
     que el contenido se aplaste. */
  #screen-home .dash-side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    align-items: stretch;
    min-width: 0;
  }
  #screen-home .dash-side > * { order: 3; grid-column: 1 / -1; }
  #screen-home .home-goleador { order: 1; grid-column: auto; }
  #screen-home .home-invite   { order: 2; grid-column: auto; }
  #screen-home .home-sponsor  { order: 5; }
  /* Secciones sobre el fieltro → títulos claros */
  #screen-home .section-head { margin: 8px 2px 0 !important; }
  #screen-home .section-head h2 { color: #fff; }
  #screen-home .section-head .more,
  #screen-home .section-head .more svg { color: var(--olive-bright); stroke: var(--olive-bright); }
  /* Neutralizar paddings/márgenes mobile dentro de las columnas */
  #screen-home .cards-list { padding: 0 !important; }
  /* Próximos partidos: grilla auto-fit que ajusta nº de columnas según ancho.
     Min 220px por card → en pantallas estrechas baja a 2 o 1 col sin overflow. */
  #screen-home .dash-main .cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }
  #screen-home .next-play-cta { margin: 0 !important; }
  /* quick-stats en la fila del hero — ancho de contenido */
  #screen-home .home-hero .quick-stats { margin-top: 0; flex: 0 0 auto; }
  #screen-home .dash [style*="padding: 18px 22px"] { padding: 0 !important; }
  /* Cards navy: separación del fieltro */
  #screen-home .match-live,
  #screen-home .dash-side [style*="background: var(--navy)"] {
    box-shadow: 0 16px 32px -16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08) !important;
  }
  /* Goleador e Invitar: mismo alto (la grilla los estira parejo) */
  #screen-home .home-goleador > button,
  #screen-home .home-invite > div { height: 100%; }
  /* Invitar amigos: mantengo el layout natural (texto arriba, botón abajo
     ocupando el ancho del card). El intento de "row con button a la derecha"
     rompía en anchos medios porque el botón "Invitar por WhatsApp" es texto
     largo. Mejor que respire vertical y use todo el ancho del card. */
}

@media (min-width: 9999px) {
  /* ---- PREDICTIONS — grilla de grupos a 4 columnas ---- */
  #screen-predictions .app-header h1 { color: #fff; }
  #screen-predictions .app-header [style*="--muted"] { color: rgba(255,255,255,.72) !important; }
  #screen-predictions .hub-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  #screen-predictions [style*="padding: 4px 22px"],
  #screen-predictions [style*="padding: 0 22px"] { padding-left: 0 !important; padding-right: 0 !important; }

  /* ---- RANKING — header compacto: título + podio lado a lado ---- */
  #screen-ranking .rank-hero {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 20px 32px !important;
    border-radius: 22px;
    box-shadow: 0 16px 38px -16px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
  }
  #screen-ranking .rank-hero::before { display: none; }   /* casita decorativa fuera */
  #screen-ranking .rank-hero-head { flex: 0 0 auto; }
  /* el podio ocupa el resto del ancho → sin vacío al costado */
  #screen-ranking .podium {
    flex: 1;
    max-width: none;
    margin: 0 !important;
    justify-content: space-evenly;
  }
  #screen-ranking .my-pos { margin: 16px 0 0 !important; }
  /* tabla en 2 columnas; separador "vos" y vacío ocupan ancho completo */
  #screen-ranking .rank-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
    padding: 18px 0 0 !important;
  }
  #screen-ranking .rank-list > div[style*="dashed"],
  #screen-ranking .rank-list > div[style*="text-align"] { grid-column: 1 / -1; }

  /* ---- RESULTADOS — header + grilla de resultados 2 columnas por día ---- */
  #screen-results .app-header h1 { color: #fff; }
  #screen-results .app-header [style*="--muted"] { color: rgba(255,255,255,.72) !important; }
  #screen-results .quick-stats { padding-left: 0 !important; padding-right: 0 !important; }
  #screen-results [style*="padding: 0 22px"] { padding-left: 0 !important; padding-right: 0 !important; }
  #screen-results .day-group-head .label,
  #screen-results .day-group-head .count { color: #fff; }
  #screen-results .day-group .cards-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 !important;
  }
  #screen-results .filters { padding-left: 0 !important; padding-right: 0 !important; }

  /* ---- MIS PRONÓSTICOS — grilla a 2 columnas ---- */
  #screen-mispronos .app-header h1 { color: #fff; }
  #screen-mispronos .app-header [style*="--muted"] { color: rgba(255,255,255,.72) !important; }
  #screen-mispronos .cards-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 !important;
  }
}

@media (min-width: 9999px) {
  /* ---- PERFIL — dashboard 2 columnas ---- */
  /* Hero compacto: avatar a la izquierda, nombre/rol/badge al lado */
  #screen-profile .profile-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 32px !important;
    text-align: left;
    border-radius: 22px;
    box-shadow: 0 16px 38px -16px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
  }
  #screen-profile .profile-hero::before { display: none; }
  #screen-profile .profile-avatar { flex: 0 0 auto; margin: 0 !important; }
  #screen-profile .profile-hero-head { flex: 1; min-width: 0; }
  #screen-profile .profile-hero .badge-row { justify-content: flex-start; }
  #screen-profile .dash {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 20px;
  }
  #screen-profile .dash-main,
  #screen-profile .dash-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }
  #screen-profile .dash [style*="padding: 6px 22px"],
  #screen-profile .dash [style*="padding: 12px 22px"] {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  #screen-profile .stats-overview,
  #screen-profile .menu-list { margin: 0 !important; }
  #screen-profile .profile-section-head { color: #fff; }
  #screen-profile .dash [style*="text-align: center"] { color: rgba(255,255,255,.6) !important; }
}

@media (min-width: 9999px) {
  /* ---- Páginas angostas dentro del workspace (partido + estáticas) ----
     Contenido centrado en columna legible; el rail queda en el borde del
     workspace (igual criterio que el deck de predict). */
  #screen-partido .screen-body > *,
  #screen-sobre .screen-body > *,
  #screen-rules .screen-body > *,
  #screen-terms .screen-body > *,
  #screen-privacy .screen-body > *,
  #screen-faq .screen-body > * {
    max-width: 720px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Estáticas: texto suelto (sobre el fieltro) en claro */
  #screen-sobre .screen-body,
  #screen-rules .screen-body,
  #screen-terms .screen-body,
  #screen-privacy .screen-body { color: rgba(255,255,255,.85); }
  /* Títulos display — !important para ganarle al color navy inline */
  #screen-sobre h1, #screen-sobre h2, #screen-sobre h3,
  #screen-rules h1, #screen-rules h2, #screen-rules h3,
  #screen-terms h1, #screen-terms h2, #screen-terms h3,
  #screen-privacy h1, #screen-privacy h2, #screen-privacy h3,
  #screen-partido .app-header h1, #screen-faq h1, #screen-faq h2 { color: #fff !important; }
  /* PERO el texto DENTRO de las cards claras vuelve a oscuro */
  #screen-sobre [style*="var(--cream)"], #screen-sobre [style*="var(--white)"],
  #screen-rules [style*="var(--cream)"], #screen-rules [style*="var(--white)"],
  #screen-terms [style*="var(--cream)"], #screen-terms [style*="var(--white)"],
  #screen-privacy [style*="var(--cream)"], #screen-privacy [style*="var(--white)"],
  #screen-faq .faq-item { color: var(--ink); }
  #screen-sobre .screen-body a:not(.btn-primary),
  #screen-rules .screen-body a:not(.btn-primary),
  #screen-terms .screen-body a:not(.btn-primary),
  #screen-privacy .screen-body a:not(.btn-primary) { color: var(--olive-bright); }
}

/* Barras fijas (lomo, header, tabbar) con view-transition-name propio →
   no se lavan en el cross-fade de las transiciones (mobile y desktop). */
.tabbar { view-transition-name: vt-tabbar; }
.album-spine { view-transition-name: vt-spine; }
.app-header { view-transition-name: vt-header; }

/* Las barras navy fijas NO deben animarse durante la transición. Se congelan
   (sin morph, sin cross-fade) para que no reboten ni se deslicen mientras el
   contenido hace su cross-fade. Sin esto, en iOS las barras de arriba/abajo
   hacen un efecto raro por el easing springy de ::view-transition-group(*). */
::view-transition-group(vt-spine),
::view-transition-group(vt-tabbar),
::view-transition-group(vt-header),
::view-transition-old(vt-spine),
::view-transition-new(vt-spine),
::view-transition-old(vt-tabbar),
::view-transition-new(vt-tabbar),
::view-transition-old(vt-header),
::view-transition-new(vt-header) {
  animation: none !important;
}
/* Y siempre por encima: durante la transición, las cards (con view-transition-name
   propio) se pintaban por delante del lomo y la tabbar. z-index alto lo corrige. */
::view-transition-group(vt-spine),
::view-transition-group(vt-tabbar),
::view-transition-group(vt-header) {
  z-index: 2147483647;
}

@media (min-width: 9999px) {
  /* ---- Card EN VIVO en blanco — destaca sobre el fieltro ---- */
  .match-live {
    background: #fff !important;
    color: var(--ink) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: 0 16px 34px -16px rgba(0,0,0,.5) !important;
  }
  .match-live .live-tag { background: rgba(220,38,38,.10); color: #DC2626; }
  .match-live .live-time { color: var(--muted); }
  .match-live .score { color: var(--navy); }
  .match-live .score .sep { color: rgba(0,16,63,.22); }
  .match-live .pred { color: var(--olive); }
  .match-live .live-bottom { border-top-color: rgba(0,16,63,.10); }
  .match-live .live-bottom .your-pred { color: var(--muted); }
  .match-live .live-bottom .your-pred b { color: var(--navy); }
  .match-live::before { background: rgba(149,167,72,.10); }

  /* ---- "Rellenar al azar": destacado (olive). La separación de la grilla la
     da el padding inferior del wrapper (inline). ---- */
  #screen-predictions [style*="padding: 4px 22px"] > button {
    background: var(--olive-bright) !important;
    color: var(--navy) !important;
    box-shadow: 0 10px 24px -8px rgba(184,204,92,.45) !important;
  }
  #screen-predictions [style*="padding: 4px 22px"] > button > span {
    background: var(--navy) !important;
    color: var(--olive-bright) !important;
  }
}

/* Grupo secundario del rail (Instagram, Sobre, Reglas) — oculto en mobile */
.rail-sec { display: none; }
@media (min-width: 9999px) {
  .rail-sec {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .tab--sec {
    padding: 8px 0 !important;
    color: rgba(255,255,255,.55) !important;
  }
  .tab--sec .tab-ico { width: 46px; height: 27px; }
  .tab--sec .tab-ico svg { width: 17px !important; height: 17px !important; }
  .tab--sec .tab-lbl { font-size: 9px !important; }
}
@media (hover: hover) {
  .tab--sec:hover { color: rgba(255,255,255,.9) !important; }
}

@media (min-width: 9999px) {
  /* ---- partido.php: legible sobre el fieltro ---- */
  #screen-partido .pm-section h2 { color: #fff !important; }
  #screen-partido .pm-gol { color: rgba(255,255,255,.9) !important; }
  #screen-partido .pm-gol .min { color: var(--olive-bright) !important; }
  #screen-partido .pm-gol .who .eq { color: rgba(255,255,255,.55) !important; }
  #screen-partido .pm-board {
    box-shadow: 0 18px 38px -16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.07);
  }

  /* ---- sobre.php: bloques al ancho del workspace + gaps parejos ---- */
  #screen-sobre .screen-body {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  #screen-sobre .screen-body > * {
    max-width: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* 2 columnas: foto · identidad */
  #screen-sobre .sobre-top {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 36px;
    align-items: center;
  }
  #screen-sobre .sobre-top > div { padding: 0 !important; }
  /* el párrafo va sobre el fieltro → claro (gana al color navy inline) */
  #screen-sobre .sobre-top p { color: rgba(255,255,255,.86) !important; }
  /* las 3 cards de contacto → grilla, no apiladas full-width */
  #screen-sobre .sobre-contact {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

@media (min-width: 9999px) {
  /* rules.php — intro compacto + 3 pasos parejos */
  #screen-rules .screen-body > * { max-width: 1040px; }
  /* intro: una sola línea, alineado a la izquierda (los <br> se ocultan) */
  #screen-rules .rules-grid > div:first-child {
    text-align: left;
    margin: 0 0 24px;
  }
  #screen-rules .rules-grid > div:first-child h2 {
    font-size: 30px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
  #screen-rules .rules-grid > div:first-child h2 br { display: none; }
  /* 3 pasos: el del medio (Sumá puntos) más ancho; alturas parejas */
  #screen-rules .rules-steps {
    display: grid !important;
    grid-template-columns: 1fr 1.32fr 1fr;
    gap: 16px;
    align-items: stretch;
  }
  #screen-rules .rules-steps > div { padding: 22px !important; }
  /* la card de cierre y el disclaimer ocupan el ancho completo */
  #screen-rules .rules-steps > [style*="var(--navy)"],
  #screen-rules .rules-steps > div:last-child { grid-column: 1 / -1; }
  #screen-rules .rules-steps > [style*="var(--navy)"] { margin-top: 14px !important; }
  /* los chips de puntos no se parten en dos líneas */
  #screen-rules .rules-steps [style*="min-width: 48px"] {
    flex-shrink: 0;
    white-space: nowrap;
  }
  /* menos sangría del cuerpo dentro de las cards → gana ancho útil */
  #screen-rules .rules-steps [style*="padding-left: 44px"] { padding-left: 14px !important; }
  /* disclaimer legible sobre el fondo navy */
  #screen-rules .rules-steps > div:last-child { color: rgba(255,255,255,.72) !important; }
}

/* ============================================================
   In-app notification banner (card inline) — vive DESPUÉS del
   home-hero navy, sobre el fondo crema del screen-body. Padding
   lateral 22px (mismo que el resto del contenido) y separación
   18px del hero para que respire.
   ============================================================ */
.inapp-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 22px 0;
  padding: 12px 14px;
  background: #FFFFFF;
  color: var(--navy);
  border-radius: 14px;
  border: 1px solid rgba(0,27,107,.08);
  box-shadow: 0 6px 20px rgba(0,8,31,.08);
  font-family: inherit;
  transition: opacity .2s ease, transform .2s ease;
}
.inapp-banner--dismissed { opacity: 0; transform: translateY(-6px); }
.inapp-banner-glyph {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(149, 167, 72, .15);
  color: var(--olive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.inapp-banner-body {
  flex: 1 1 auto;
  min-width: 0;
}
.inapp-banner-title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy);
}
.inapp-banner-title--urgent {
  font-size: 17px;
  color: var(--olive);
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
.inapp-banner-text {
  font-size: 12px;
  color: rgba(0, 27, 107, .65);
  margin-top: 2px;
  line-height: 1.3;
}
.inapp-banner-cta {
  flex: 0 0 auto;
  background: var(--olive);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  letter-spacing: .3px;
}
.inapp-banner-close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: rgba(0, 27, 107, .4);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  margin-left: -4px;
}
.inapp-banner-close:hover { color: var(--navy); }

@media (min-width: 9999px) {
  .inapp-banner {
    margin: 0 0 18px;
    padding: 14px 18px;
    gap: 16px;
  }
  .inapp-banner-title { font-size: 15px; }
  .inapp-banner-text  { font-size: 13px; }
}

/* ============================================================
   In-app sticky banner — patrón URGENTE para cierre_1h.
   Anclado al top, con countdown live. La urgencia se comunica
   SOLO por el countdown text en coral (indicador chico). El resto
   sigue la paleta neutra del card: ícono olive, sin bordes accent.
   ============================================================ */
.inapp-sticky {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  min-height: 56px;
  background: #FFFFFF;
  color: var(--navy);
  border-bottom: 1px solid rgba(0,27,107,.08);
  box-shadow: 0 4px 18px rgba(0,8,31,.10);
  font-family: inherit;
  transition: opacity .2s ease, transform .2s ease;
}

/* ============================================================
   In-app modal one-shot — patrón storytelling para fin_fase.
   Full-screen overlay, card navy centrado, gold como acento de la
   posición (excepción válida: momento premium del torneo).
   ============================================================ */
.inapp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 8, 31, .68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: inapp-modal-fade-in .25s ease both;
}
.inapp-modal-overlay--dismissed { opacity: 0; transition: opacity .25s ease; }
@keyframes inapp-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.inapp-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  border-radius: 22px;
  padding: 36px 28px 28px;
  box-shadow: 0 40px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.07);
  text-align: center;
  animation: inapp-modal-slide-up .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes inapp-modal-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.inapp-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.55);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
}
.inapp-modal-close:hover { color: #fff; }
.inapp-modal-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--olive-bright);
  margin-bottom: 12px;
}
.inapp-modal-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 1px;
  margin: 0 0 18px;
  color: #fff;
}
.inapp-modal-pos {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}
.inapp-modal-pos-num {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 64px;
  line-height: .9;
  color: var(--gold);
  letter-spacing: -1px;
}
.inapp-modal-pos-deg { font-size: 32px; color: var(--gold); }
.inapp-modal-pos-tot {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  letter-spacing: 1px;
}
.inapp-modal-text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  margin: 0 0 22px;
}
.inapp-modal-cta {
  display: inline-block;
  background: var(--olive);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 12px;
  letter-spacing: .3px;
  min-height: 46px;
}

/* ============================================================
   Notif preferences toggle — pantalla "Mis notificaciones" en Perfil.
   Switch estilo iOS. Color olive cuando ON.
   ============================================================ */
.notif-pref-row { position: relative; cursor: pointer; }
.notif-pref-row--disabled { cursor: default; opacity: .55; }
.notif-toggle {
  display: inline-block !important;
  position: relative;
  flex: 0 0 auto;
  width: 42px !important;
  height: 24px !important;
  background: rgba(0, 27, 107, .15);
  border-radius: 999px;
  cursor: pointer;
  align-self: center;
  transition: background .2s ease;
}
.notif-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
  transition: left .2s ease;
}
.notif-toggle[data-value="1"] { background: var(--olive); }
.notif-toggle[data-value="1"]::after { left: 20px; }
.notif-pref-row--disabled .notif-toggle { cursor: default; }

/* ============================================================
   Modal de registro — aparece al guardar primer pronóstico u otras
   acciones que requieren cuenta. Pattern Duolingo: registro DESPUÉS
   de actuar, no antes.
   ============================================================ */
.penca-reg-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 8, 31, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: penca-reg-fadein .2s ease;
}
.penca-reg-modal[hidden] { display: none; }
@keyframes penca-reg-fadein { from { opacity: 0 } to { opacity: 1 } }
.penca-reg-modal-card {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  border-radius: 22px;
  padding: 32px 24px 22px;
  width: 100%;
  max-width: 380px;
  position: relative;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255,255,255,.07);
  max-height: 92vh;
  overflow-y: auto;
  animation: penca-reg-slide .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes penca-reg-slide { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.penca-reg-modal-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: 0;
  color: rgba(255,255,255,.55);
  font-size: 26px; line-height: 1;
  cursor: pointer; padding: 6px 12px;
}
.penca-reg-modal-close:hover { color: #fff; }
.penca-reg-modal-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: var(--olive-bright); margin-bottom: 8px;
}
.penca-reg-modal-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 28px; font-weight: 400; line-height: 1.05;
  letter-spacing: 1px; margin: 0 0 6px;
}
.penca-reg-modal-sub {
  font-size: 13px; color: rgba(255,255,255,.7); margin: 0 0 18px; line-height: 1.45;
}
#penca-reg-form { display: block; }
.penca-reg-field {
  display: block; margin-bottom: 10px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.13);
  border-radius: 12px;
  padding: 8px 14px;
}
.penca-reg-field:focus-within { border-color: var(--olive-bright); background: rgba(255,255,255,.10); }
.penca-reg-field > span:first-child {
  display: block;
  font-size: 10px; color: rgba(255,255,255,.55);
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
  margin-bottom: 2px;
}
.penca-reg-field input {
  background: transparent; border: 0; outline: none;
  color: #fff; font-family: inherit; font-size: 16px; font-weight: 500;
  padding: 2px 0; width: 100%;
}
.penca-reg-field input::placeholder { color: rgba(255,255,255,.35); }
.penca-reg-field-row { display: flex; align-items: center; }
.penca-reg-field-row .prefix { color: rgba(255,255,255,.5); margin-right: 6px; font-weight: 500; }
.penca-reg-error {
  font-size: 12px; color: #FCA5A5;
  background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.3);
  border-radius: 8px;
  padding: 8px 12px; margin-bottom: 10px;
}
.penca-reg-error:empty { display: none; padding: 0; margin: 0; border: 0; }
.penca-reg-submit {
  display: block; width: 100%;
  background: var(--olive); color: var(--navy);
  border: 0; border-radius: 14px;
  padding: 14px; font-family: inherit;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  letter-spacing: .3px;
  box-shadow: 0 8px 22px rgba(149,167,72,.4);
  transition: transform .15s ease;
}
.penca-reg-submit:active { transform: scale(.98); }
.penca-reg-submit:disabled { opacity: .6; cursor: wait; box-shadow: none; }
.penca-reg-ghost {
  display: block; text-align: center; width: 100%;
  color: rgba(255,255,255,.7);
  font: inherit; font-size: 13px; text-decoration: none;
  padding: 14px 0 0;
  background: none; border: 0; cursor: pointer;
}
.penca-reg-ghost b { color: var(--olive-bright); font-weight: 700; }
.penca-reg-legal {
  font-size: 10px; color: rgba(255,255,255,.45);
  text-align: center;
  margin: 16px 0 0; line-height: 1.4;
}
.penca-reg-legal a { color: rgba(255,255,255,.7); text-decoration: underline; }

/* ============================================================
   Desktop fix — swipe-deck mantiene su tamaño "natural" de mobile
   (~360px) centrado en el workspace. La regla universal de `width:94%`
   funcionaba porque el contenedor era el phone-screen de 390px; en
   desktop el contenedor pasa al workspace completo y se desbordaba.
   ============================================================ */
@media (min-width: 9999px) {
  #screen-predict .swipe-deck {
    width: 360px !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }
}

@media (min-width: 9999px) {
  .anon-cta {
    margin: 18px 0 0;
    padding: 24px 26px;
  }
  .anon-cta-emoji { font-size: 48px; }
  .anon-cta-title { font-size: 28px; }
  .anon-cta-sub   { font-size: 13px; }
  .anon-cta-arrow { width: 44px; height: 44px; }
  .anon-cta-arrow svg { width: 20px; height: 20px; }
}

/* ============================================================
   Perfil — hero unificado (avatar+nombre+stats en una sola card)
   ============================================================ */
/* Stats dentro del hero (no como bloque flotante con margin negativo) */
.stats-overview--in-hero {
  margin: 22px 0 0 !important;
  background: rgba(255,255,255,.96);
  /* Ya no necesita el "lift" negativo — vive dentro del hero. */
}

@media (min-width: 9999px) {
  /* Hero en desktop: avatar+nombre a la izquierda, stats a la derecha en una
     sola fila. Más limpio que apilado vertical. */
  #screen-profile .profile-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 32px 32px;
    text-align: left;
  }
  #screen-profile .profile-hero-top {
    display: flex;
    align-items: center;
    gap: 22px;
    text-align: left;
  }
  #screen-profile .profile-hero h1 { margin: 0; text-align: left; }
  #screen-profile .profile-hero .role,
  #screen-profile .profile-hero .badge-row { justify-content: flex-start; text-align: left; margin-top: 6px; }
  #screen-profile .profile-avatar { margin: 0; flex: 0 0 auto; }
  #screen-profile .stats-overview--in-hero {
    margin: 0 !important;
    min-width: 320px;
    align-self: center;
  }
}

/* ============================================================
   FTUX (first-time visitor) — Home pública para anon
   ============================================================ */

/* Trust strip: card flotante centrada con la info del organizador.
   No full-width: se ve como una "etiqueta" pequeña separada. */
.trust-strip {
  display: inline-block;
  background: rgba(0, 27, 107, .92);
  color: rgba(255, 255, 255, .82);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  margin: 14px auto 12px;
  text-align: center;
}
/* Wrapper para centrar el inline-block. Oculto en mobile (la marca ya está
   en el lomo del álbum + el sponsor card al final del scroll). */
.trust-strip-wrap {
  display: none;
  text-align: center;
  padding: 0 16px;
}
@media (min-width: 9999px) {
  .trust-strip-wrap { display: block; }
}

/* Tagline del greeting anon (debajo del nombre) */
.anon-tagline {
  font-size: 14px;
  color: var(--olive-bright);
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: .3px;
}

/* Countdown compacto: pill horizontal con icono reloj + dígitos tabulares.
   Se inserta dentro del hero greeting; sin botón CTA propio (el next-play-cta
   debajo del hero cumple esa función). */
.anon-countdown-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
}
.anon-countdown-mini-ico {
  flex: 0 0 auto;
  color: var(--olive-bright);
}
.anon-countdown-mini strong {
  color: var(--olive-bright);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}
.anon-countdown-mini-tail {
  opacity: .65;
  margin-left: 2px;
}
@media (max-width: 480px) {
  .anon-countdown-mini { font-size: 11.5px; padding: 6px 12px; }
  .anon-countdown-mini-tail { display: none; } /* en pantallas chicas, solo el "Falta Xd Yh..." */
}
/* Subtítulo de sección dentro del bloque de premios (Top 3, Por fase, etc.) */
.anon-prizes-section {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--olive-bright);
  margin: 16px 0 8px;
  opacity: .85;
}

/* Trigger del modal de premios: card compacta que abre el modal completo */
.anon-prizes-trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - 44px);
  margin: 14px 22px 0;
  padding: 14px 18px;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s ease, border-color .2s ease;
}
.anon-prizes-trigger:hover { border-color: var(--olive-bright); }
.anon-prizes-trigger:active { transform: scale(.99); }
.anon-prizes-trigger-ico { font-size: 26px; flex: 0 0 auto; line-height: 1; }
.anon-prizes-trigger-text { flex: 1 1 auto; display: block; }
.anon-prizes-trigger-text b {
  display: block;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #fff;
}
.anon-prizes-trigger-text em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--olive-bright);
  font-weight: 600;
  letter-spacing: .5px;
  margin-top: 2px;
}

/* === Bingo CTA en home === */
.bingo-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - 44px);
  margin: 10px 22px 0;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--olive), #6B7A34);
  border: 1px solid rgba(184,204,92,.30);
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  text-align: left;
  transition: transform .15s ease;
  box-shadow: 0 6px 18px rgba(149,167,72,.30);
}
.bingo-cta:hover { transform: translateY(-2px); }
.bingo-cta:active { transform: scale(.99); }
.bingo-cta-ico { font-size: 26px; flex: 0 0 auto; line-height: 1; }
.bingo-cta-body { flex: 1 1 auto; }
.bingo-cta-body b {
  display: block;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #fff;
}
.bingo-cta-body em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  margin-top: 2px;
}

@media (min-width: 9999px) {
  .anon-prizes-trigger { width: auto; margin: 18px 0 0; }
}

/* === Chips de pencas privadas arriba del ranking === */
.rank-penca-chips {
  display: flex;
  gap: 6px;
  padding: 14px 22px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rank-penca-chips::-webkit-scrollbar { display: none; }
.rank-penca-chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.rank-penca-chip:hover { border-color: var(--olive); }
.rank-penca-chip.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* === Filtro inline de ranking === */
.rank-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 22px 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s ease;
}
.rank-filter:focus-within { border-color: var(--olive); }
.rank-filter-ico { font-size: 16px; opacity: .55; flex: 0 0 auto; }
.rank-filter input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  min-width: 0;
}
.rank-filter input::placeholder { color: var(--muted); }
.rank-filter button {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border: none;
  background: rgba(0,16,63,.08);
  color: var(--navy);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Items de resultado dentro del rank-list (mismo look del ranking normal) */
.rank-item--search {
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.rank-item--search:active { transform: scale(.99); }
/* Indicador "N resultados para X" */
.rank-search-head {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 4px 12px;
  letter-spacing: .3px;
}
.rank-search-head b { color: var(--navy); font-weight: 700; }

/* Breakdown sheet · desglose de puntos */
.bk-total {
  text-align: center;
  padding: 14px 0 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.bk-total-num {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 64px;
  color: var(--navy);
  line-height: 1;
  letter-spacing: 1px;
}
.bk-total-lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--olive);
  margin-top: 4px;
}
.bk-rows { display: flex; flex-direction: column; gap: 8px; }
.bk-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.bk-row--refs { border-color: var(--olive); }
.bk-row-pts {
  flex: 0 0 auto;
  width: 44px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(149,167,72,.14);
  color: var(--olive);
  border-radius: 8px;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 18px;
  letter-spacing: .5px;
}
.bk-row-body { flex: 1; font-size: 13px; color: var(--ink); line-height: 1.4; }
.bk-row-body b { color: var(--navy); font-weight: 800; }
.bk-row-body span { color: var(--muted); font-size: 11.5px; }

/* === Comparador head-to-head === */
.cmp-hero {
  background: linear-gradient(165deg, var(--navy) 0%, #00103F 100%);
  color: #fff;
  padding: 22px 22px 18px;
  margin: 0 22px 16px;
  border-radius: 16px;
  text-align: center;
}
.cmp-hero-names {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cmp-name { flex: 1; }
.cmp-name--me { color: var(--olive-bright); text-align: left; }
.cmp-name--o  { color: #fff; text-align: right; }
.cmp-vs {
  flex: 0 0 auto;
  font-size: 10px;
  color: rgba(255,255,255,.4);
  letter-spacing: 2px;
}
.cmp-hero-pts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.cmp-pts-big {
  font-family: 'Bebas Neue','Sora',sans-serif;
  font-size: 52px;
  line-height: .9;
  color: #fff;
  flex: 1;
}
.cmp-hero-pts .cmp-pts-big:first-child { text-align: left; }
.cmp-hero-pts .cmp-pts-big:last-child  { text-align: right; }
.cmp-diff {
  font-family: 'Bebas Neue','Sora',sans-serif;
  font-size: 22px;
  letter-spacing: .5px;
  padding: 4px 10px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  flex: 0 0 auto;
}
.cmp-hero-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,.65);
  letter-spacing: .5px;
}

.cmp-list {
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmp-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
}
.cmp-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  margin-bottom: 8px;
}
.cmp-teams {
  font-weight: 700;
  color: var(--navy);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-real {
  font-family: 'Bebas Neue','Sora',sans-serif;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: .5px;
  flex: 0 0 auto;
}
.cmp-row-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cmp-side {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,16,63,.04);
}
.cmp-side--me { border-left: 3px solid var(--olive); }
.cmp-side--o  { border-left: 3px solid var(--navy); }
.cmp-pred {
  font-family: 'Bebas Neue','Sora',sans-serif;
  font-size: 18px;
  color: var(--navy);
  letter-spacing: .5px;
  flex: 1;
}
.cmp-pts {
  font-size: 11px;
  font-weight: 800;
  color: var(--olive);
}

.cmp-actions {
  padding: 16px 22px 22px;
}
.cmp-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 18px;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  font-family: 'Bebas Neue','Sora',sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-decoration: none;
}
.cmp-share:active { transform: scale(.98); filter: brightness(.95); }

/* Modal de premios — overlay + card centrada, mismo lenguaje que el modal
   de registro pero con contenido distinto. */
/* Modal de premios — carousel horizontal con peek del próximo
   (~18%), dots sincronizados, última card = CTA de registro */
.prizes-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 8, 31, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: prizes-modal-fadein .2s ease;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.prizes-modal[hidden] { display: none; }
@keyframes prizes-modal-fadein { from { opacity: 0 } to { opacity: 1 } }
.prizes-modal-card {
  position: relative;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  border-radius: 22px;
  padding: 26px 0 22px;
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255,255,255,.07);
  animation: prizes-modal-slide .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes prizes-modal-slide { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.prizes-modal-close {
  position: absolute; top: 8px; right: 12px;
  background: transparent; border: 0;
  color: rgba(255,255,255,.55);
  font-size: 26px; line-height: 1;
  cursor: pointer; padding: 6px 12px;
  z-index: 2;
}
.prizes-modal-close:hover { color: #fff; }
.prizes-modal-head {
  padding: 0 26px 16px;
  text-align: center;
}
.prizes-modal-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--olive-bright);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.prizes-modal-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 1px;
  margin: 0;
  color: #fff;
}
.prizes-modal-sub {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin-top: 6px;
}

/* Carousel · scroll-snap horizontal */
.prizes-carousel-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.prizes-carousel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 20px 14px;
  scroll-behavior: smooth;
}
.prizes-carousel::-webkit-scrollbar { display: none; }

.prizes-carousel-card {
  scroll-snap-align: start;
  flex: 0 0 82%;
  background: #fafaf7;
  border-radius: var(--radius-lg);
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  box-shadow: 0 18px 38px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.6);
  color: var(--ink);
  text-decoration: none;
}

/* Modo compacto: el carousel se achica cuando hay ganadores entregados,
   para dar lugar a la sección "ya se entregaron" debajo. */
.prizes-carousel--compact .prizes-carousel-card { flex: 0 0 65%; padding: 12px 12px 14px; gap: 8px; }
.prizes-carousel--compact .pp-photo { aspect-ratio: 16 / 10; }
.prizes-carousel--compact .pp-photo-placeholder { font-size: 50px; }
.prizes-carousel--compact .pp-title { font-size: 18px; }
.prizes-carousel--compact .pp-desc { display: none; }
.prizes-carousel--compact .pp-body { min-height: 0; }
.prizes-carousel--compact .pp-trigram { font-size: 24px; }
.prizes-carousel--compact .cta .pp-cta-title { font-size: 22px; }

/* Badge tipo medalla — flow normal arriba de la foto */
.pp-badge {
  align-self: flex-start;
  background: var(--navy);
  color: var(--olive-bright);
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 16px;
  letter-spacing: .8px;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pp-badge.gold   { background: linear-gradient(180deg, #F4D572 0%, var(--gold) 100%); color: var(--navy); }
.pp-badge.silver { background: linear-gradient(180deg, #E8E8E8 0%, #B4B4B4 100%);    color: var(--navy); }
.pp-badge.bronze { background: linear-gradient(180deg, #E8A874 0%, #A86432 100%);    color: #fff; }

/* Trigram outline (DNA Panini) — siempre outline puro, nunca fill */
.pp-trigram {
  position: absolute;
  top: 14px; right: 16px;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 32px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0,27,107,.12);
  letter-spacing: 1px;
  pointer-events: none;
  line-height: .9;
  z-index: 0;
}

/* Slot de imagen del producto · fondo blanco puro */
.pp-photo {
  background: #fff;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,27,107,.05);
  z-index: 1;
}
.pp-photo-placeholder { font-size: 76px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.12)); }

.pp-body { display: flex; flex-direction: column; gap: 4px; min-height: 70px; }
.pp-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--olive);
}
.pp-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 22px;
  letter-spacing: .5px;
  line-height: 1.05;
  color: var(--navy);
}
.pp-desc { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* Marca (detalle): logo chico + nombre, abajo de la descripción */
.pp-marca {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  background: var(--cream);
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--navy);
  align-self: flex-start;
}
.pp-marca img { height: 14px; width: auto; display: block; background: #fff; padding: 1px; border-radius: 2px; }

/* Última card · CTA de registro (button reset incluido) */
.prizes-carousel-card.cta {
  background: linear-gradient(180deg, var(--olive) 0%, var(--olive-bright) 100%);
  color: var(--navy);
  justify-content: center;
  text-align: center;
  gap: 16px;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.prizes-carousel-card.cta .pp-cta-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--navy); opacity: .7;
}
.prizes-carousel-card.cta .pp-cta-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 28px; line-height: 1; letter-spacing: 1px;
  color: var(--navy); padding: 0 12px;
}
.prizes-carousel-card.cta .pp-cta-desc {
  font-size: 13px; color: var(--navy); opacity: .8; padding: 0 16px;
}
.prizes-carousel-card.cta .pp-cta-btn {
  background: var(--navy); color: #fff;
  padding: 12px 22px; border-radius: 999px;
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 18px; letter-spacing: 1.2px;
  box-shadow: 0 10px 24px rgba(0,16,63,.35);
  display: inline-block;
}

/* Dots indicador */
.prizes-dots { display: flex; gap: 6px; justify-content: center; padding: 4px 0 0; }
.prizes-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.22);
  transition: width .25s cubic-bezier(.16,1,.3,1), background .25s;
}
.prizes-dot.active { width: 20px; background: var(--olive-bright); }

/* Footer del modal */
.prizes-modal-foot {
  padding: 14px 22px 0;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,.45);
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 10px;
}
.prizes-modal-foot b { color: rgba(255,255,255,.7); font-weight: 600; }
.prizes-modal-foot a { color: rgba(255,255,255,.7); text-decoration: underline; }

/* Social proof — face pile + texto */
.social-proof {
  margin: 18px 22px 0;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid rgba(0, 27, 107, .08);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - 44px);
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.social-proof:hover  { border-color: var(--olive-bright); }
.social-proof:active { transform: scale(.99); }
.social-proof-faces {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.social-proof-face {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--olive) 0%, var(--olive-bright) 100%);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  margin-left: -8px;
}
.social-proof-face:first-child { margin-left: 0; }
.social-proof-text {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}
.social-proof-cta {
  color: var(--olive);
  font-weight: 700;
  margin-left: 6px;
}

/* Empty state pre-launch (no expulsa al usuario) */
.empty-pre-launch {
  margin: 20px 22px;
  background: var(--white);
  border: 1px solid rgba(0, 27, 107, .08);
  border-radius: 18px;
  padding: 24px 22px;
  text-align: center;
}
.empty-pre-launch-emoji { font-size: 36px; margin-bottom: 8px; }
.empty-pre-launch-title {
  font-family: 'Bebas Neue', 'Sora', sans-serif;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--navy);
  margin-bottom: 6px;
}
.empty-pre-launch-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.empty-pre-launch-cta {
  display: inline-block;
  background: var(--olive);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  padding: 11px 20px;
  border-radius: 12px;
  letter-spacing: .3px;
}

/* Desktop tweaks */
@media (min-width: 9999px) {
  .trust-strip { padding: 9px 22px; font-size: 11px; margin: 18px auto 14px; }
  .anon-countdown { margin: 22px 0 0; padding: 28px 24px 22px; }
  .anon-countdown-grid > div span { font-size: 48px; }
  .anon-howto, .anon-prizes, .social-proof, .empty-pre-launch { margin-left: 0; margin-right: 0; }
}

/* ============================================================
   FTUX — Layout desktop denso (anon home)
   ============================================================ */
@media (min-width: 9999px) {
  /* Hero anon con countdown a la derecha, alineado verticalmente con
     "Mundial 2026" (no con el tagline ni el centro del hero). */
  #screen-home .home-hero:has(.anon-countdown-mini) {
    padding: 22px 28px !important;
    align-items: flex-start !important;
  }
  #screen-home .home-hero:has(.anon-countdown-mini) .anon-tagline {
    font-size: 16px;
  }
  /* Greet-right ocupa el lado derecho. Lo posicionamos para que la pill
     quede a la altura del "name" del greeting. El padding-top se calcula
     para alinear con la baseline de "Mundial 2026" (que viene después del
     "La Penca del" eyebrew). */
  #screen-home .home-hero:has(.anon-countdown-mini) .greet-right {
    display: flex !important;
    align-items: flex-end;
    padding-top: 0;
  }
  #screen-home .home-hero:has(.anon-countdown-mini) .anon-countdown-mini {
    margin-top: 0;
  }

  /* Info grid: Cómo se juega + Premios lado a lado en 2 columnas.
     !important porque la regla mobile (block) viene definida ANTES con
     misma specificity; sin !important, la cascada hace que block gane. */
  .anon-info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-top: 14px !important;
  }
  .anon-info-grid .anon-howto,
  .anon-info-grid .anon-prizes {
    margin: 0 !important;
    align-self: stretch;
  }
}

/* ============================================================
   Sponsor footer ribbon — Multi Soluciones al final del home.
   Mismo navy plano del tabbar. El card termina con padding natural;
   el body (navy plano en mobile, casi navy en desktop) pinta el
   espacio entre el card y el tabbar fijo → no se ve gap.
   El clearance del tabbar lo provee el padding-bottom del screen-body
   (124px, default) — NO lo metemos adentro del card para no generar
   espacio interno entre el botón y el bottom del card.
   ============================================================ */
.home-sponsor--footer-ribbon {
  /* margin-bottom: -124px anula el padding-bottom del screen-body. El card
     llega visualmente al borde superior del tabbar (sin línea blanca del
     phone-screen entre ellos). El padding-bottom interno (incluye 124px
     de clearance) es navy plano → invisible contra el bg del card. */
  margin: 40px 0 -124px !important;
  padding: 0 !important;
}
.home-sponsor--footer-ribbon .home-sponsor-card {
  position: relative;
  overflow: hidden;
  background: var(--navy) !important;
  color: rgba(255, 255, 255, .85);
  border-radius: 24px 24px 0 0 !important;
  padding: 28px 22px calc(32px + 124px) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
}

@media (min-width: 9999px) {
  .home-sponsor--footer-ribbon { margin-top: 56px !important; }
  .home-sponsor--footer-ribbon .home-sponsor-card {
    padding: 36px 40px calc(40px + 124px) !important;
    border-radius: 28px 28px 0 0 !important;
    max-width: 520px;
    margin: 0 auto;
  }
}

/* ============== TAP FEEDBACK GLOBAL (Sprint #5) ==============
 * Respuesta visual instantánea al :active en cualquier elemento clickable.
 * Sin esperar AJAX/navegación, el user siente que la app responde en 0ms.
 *
 * touch-action: manipulation → elimina el delay de 300ms del double-tap-zoom
 * en browsers viejos (en moderno con viewport meta correcto ya no aplica,
 * pero no hace daño y mejora también el hover en stylus/pen).
 *
 * Reglas específicas más arriba ganan por especificidad — esto solo cubre
 * lo que no tiene feedback custom. */
a, button, .tab, label.notif-pref-row, [role="button"], [onclick] {
  touch-action: manipulation;
}
/* Feedback genérico solo si no hay regla más específica (que ya tendría
   su propio :active con transform). Usamos :active + transition rápida. */
a:not([class]):active,
.menu-item:active,
.profile-item:active,
.tab:active .tab-ico {
  transform: scale(.96);
  transition: transform .08s var(--ease, ease-out);
}
.tab:active .tab-ico {
  background-color: rgba(255,255,255,.10);
}
/* Buttons sin :active definido reciben uno sutil */
button:not([class*="-submit"]):not([class*="-primary"]):not(.tab):not([data-reg-close]):active {
  opacity: .75;
  transition: opacity .08s ease-out;
}

/* ============================================================================
   DESKTOP "EL ÁLBUM ABIERTO" · breakpoint 1024+
   Estrategia: dos árboles DOM aislados (.penca-mobile vs .penca-desktop). Por
   default desktop está oculto; en 1024+ se invierte. Mobile queda intacto.
   ============================================================================ */

/* Por default desktop está OCULTO en todos los anchos */
.penca-desktop { display: none; }

/* El wrapper .penca-mobile NO debe generar caja propia en mobile: con
   display:contents sus hijos (.stage, sheets, tabbar) actúan como hijos
   directos de body, preservando EXACTAMENTE el layout pre-wrapper. Sin esto,
   al ser un <div> block dentro de body{display:flex}, se volvía un flex-item
   dimensionado por contenido y rompía el sizing/centrado del .stage (deck
   corrido + equipo derecho clippeado). En 1024+ se fuerza display:none. */
.penca-mobile { display: contents; }

@media (min-width: 1024px) {
  /* Apaga el árbol mobile entero (incluyendo el iPhone frame que se activaba en
     640+ via media queries existentes). NO toca ningún selector del CSS mobile,
     solo lo esconde con un wrapper. */
  .penca-mobile { display: none !important; }
  .penca-desktop { display: block; }

  /* Override del lock viewport mobile (línea 64: html,body{height:100%;overflow:hidden}).
     En desktop necesitamos scroll normal del documento.
     :has(#screen-predict) en líneas 3219+ también lockea html/body porque el ID
     vive en el árbol mobile aunque esté display:none — overrideamos con mayor
     especificidad y !important. */
  html, body,
  html:has(#screen-predict),
  body:has(#screen-predict) {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: auto !important;
    overscroll-behavior: auto !important;
  }

  /* Body se vuelve canvas grande, sin chrome de phone. Override del color
     mobile (bw/bn/pd) — en desktop la cancha es navy.
     También reseteamos el flex-centrado del body (línea 104: display:flex +
     center + padding:16px) que era para flotar el frame iPhone: en desktop el
     árbol .penca-desktop debe ocupar el ancho completo, no quedar como
     flex-item centrado y encogido. */
  body.bn,
  body.bw,
  body.pd {
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.04), transparent 60%),
      linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%) !important;
    background-attachment: fixed !important;
    color: #fff;
    font-family: 'Sora', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    padding: 0 !important;
  }
  /* Grid de cancha sutil de fondo */
  body.bn::before,
  body.bw::before,
  body.pd::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
  }

  /* ===== TOPBAR ===== */
  .pd-topbar {
    position: relative; z-index: 5;
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 32px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .pd-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .pd-brand .logo svg {
    width: 40px;
    height: auto;
    display: block;
  }
  .pd-brand .name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: 2.5px; color: #fff;
  }
  .pd-brand .sub {
    font-size: 9.5px; letter-spacing: 3px;
    color: var(--olive-bright);
    text-transform: uppercase; font-weight: 700; margin-top: 2px;
  }
  .pd-nav { display: flex; gap: 32px; font-size: 12.5px; font-weight: 600; }
  .pd-nav a {
    color: rgba(255,255,255,.65); text-decoration: none;
    transition: color .15s; letter-spacing: .3px;
    position: relative; padding: 4px 0;
  }
  .pd-nav a:hover { color: #fff; }
  .pd-nav a.active { color: #fff; }
  .pd-nav a.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -8px;
    height: 2px; background: var(--olive-bright);
  }
  .pd-user {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    font-size: 12px; color: #fff;
    text-decoration: none;
  }
  .pd-user .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--olive-bright); color: var(--navy);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 800;
  }
  .pd-user.anon .avatar { background: rgba(255,255,255,.12); color: #fff; }

  /* ===== LAYOUT PRINCIPAL ===== */
  .pd-album {
    position: relative; z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 32px 60px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
  }

  /* ===== PANINI CARD GENÉRICA (compartida hero + grupo) ===== */
  .pd-panini {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    position: relative;
  }
  .pd-panini .band {
    height: 56px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px;
    color: #fff;
    background: var(--navy);
    position: relative;
  }
  .pd-panini .band-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px; letter-spacing: 2.5px;
  }
  .pd-panini .band-26 {
    font-family: 'FWC2026', 'Bebas Neue', sans-serif;
    font-size: 50px; line-height: 1;
    opacity: .25;
    font-weight: 900;
    letter-spacing: 1px;
  }

  /* Colores por grupo del Mundial (mismos del mobile) */
  .pd-panini .band[data-group="A"] { background: #3FAC4D; }
  .pd-panini .band[data-group="B"] { background: #D8252E; }
  .pd-panini .band[data-group="C"] { background: #F5C522; color: var(--navy); }
  .pd-panini .band[data-group="D"] { background: #26B7B5; }
  .pd-panini .band[data-group="E"] { background: #E07823; }
  .pd-panini .band[data-group="F"] { background: #3FBFB1; }
  .pd-panini .band[data-group="G"] { background: #7FB3D9; color: var(--navy); }
  .pd-panini .band[data-group="H"] { background: #9F8BD0; }
  .pd-panini .band[data-group="I"] { background: #B8CC5C; color: var(--navy); }
  .pd-panini .band[data-group="J"] { background: #F5A8A8; color: var(--navy); }
  .pd-panini .band[data-group="K"] { background: #D43F86; }
  .pd-panini .band[data-group="L"] { background: #7D1A2B; }

  /* Hero card (próximo partido grande) */
  .pd-hero .content {
    padding: 36px 28px 26px;
    position: relative;
    overflow: hidden;
  }
  /* Trigrams del hero: outline puro estilo Panini, uno por equipo, sin overlap
     con el scoreboard. Cada uno ocupa el cuarto vertical de su lado. */
  .pd-hero .content { position: relative; }
  .pd-hero .tri-bg {
    position: absolute;
    font-family: 'FWC2026', 'Bebas Neue', sans-serif;
    font-weight: 900;
    font-size: 130px;
    line-height: 1;
    letter-spacing: -2px;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(0,16,63,.10);
    pointer-events: none;
    user-select: none;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    white-space: nowrap;
  }
  .pd-hero .tri-bg.left  { left: 12px; }
  .pd-hero .tri-bg.right { right: 12px; }
  /* El scoreboard queda por encima del trigram */
  .pd-hero .scoreboard,
  .pd-hero .when,
  .pd-hero .cta-row { position: relative; z-index: 1; }
  .pd-hero .scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    position: relative; z-index: 1;
  }
  .pd-hero .team { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .pd-hero .team .flag svg, .pd-hero .team .flag img {
    width: 88px; height: 88px; border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,16,63,.10);
    background: #fff;
  }
  .pd-hero .team .name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: 1.5px;
    color: var(--navy);
  }
  .pd-hero .vs {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px; letter-spacing: 2px;
    color: rgba(0,16,63,.4);
  }
  .pd-hero .when {
    text-align: center;
    margin-top: 22px;
    font-size: 11px; letter-spacing: 2px;
    color: var(--navy); opacity: .55;
    text-transform: uppercase; font-weight: 700;
  }
  .pd-hero .cta-row { text-align: center; margin-top: 22px; }
  .pd-hero .cta {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px; letter-spacing: 3px;
    padding: 14px 36px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s, transform .15s;
  }
  .pd-hero .cta:hover { background: var(--navy-deep); transform: translateY(-1px); }
  .pd-hero .cta-row .anon-note {
    display: block;
    margin-top: 10px;
    font-size: 11px;
    color: var(--navy); opacity: .55;
    letter-spacing: 1px; text-transform: uppercase;
  }

  /* ===== SECTION TITLE ===== */
  .pd-section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px; letter-spacing: 3px;
    color: #fff;
    margin: 40px 0 18px;
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .pd-section-title .meta {
    font-size: 10px; letter-spacing: 2.5px;
    color: var(--olive-bright); font-weight: 700;
  }

  /* ===== GRID DE GRUPOS ===== */
  .pd-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .pd-group {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .pd-group:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.30); }
  .pd-group .band {
    height: 38px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px;
    color: #fff;
    position: relative;
  }
  .pd-group .band[data-group="C"],
  .pd-group .band[data-group="G"],
  .pd-group .band[data-group="I"],
  .pd-group .band[data-group="J"] { color: var(--navy); }
  .pd-group .band-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px; letter-spacing: 2px;
  }
  .pd-group .band-26 {
    font-family: 'FWC2026', 'Bebas Neue', sans-serif;
    font-size: 34px; line-height: 1;
    opacity: .25; font-weight: 900;
  }
  .pd-group .content { padding: 14px; }
  .pd-group .teams {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }
  .pd-group .team-row {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600;
    color: var(--navy);
  }
  .pd-group .team-row .flag svg,
  .pd-group .team-row .flag img {
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff;
  }
  .pd-group .progress-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,16,63,.08);
  }
  .pd-group .progress-label {
    font-size: 9.5px; letter-spacing: 1.2px;
    color: var(--navy); opacity: .6;
    text-transform: uppercase; font-weight: 700;
  }
  .pd-group .progress-track {
    flex: 1;
    height: 6px;
    background: rgba(0,16,63,.08);
    border-radius: 3px;
    overflow: hidden;
  }
  .pd-group .progress-fill { height: 100%; background: var(--olive); border-radius: 3px; }
  .pd-group .progress-count {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px; letter-spacing: 1px;
    color: var(--navy);
    min-width: 28px; text-align: right;
  }
  .pd-group.complete .progress-fill { background: var(--gold); }

  /* ===== RAIL DERECHO ===== */
  .pd-rail {
    position: sticky;
    top: 32px;
    display: flex; flex-direction: column;
    gap: 14px;
  }
  .pd-rail-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 18px;
  }
  .pd-rail-eyebrow {
    font-size: 10px; letter-spacing: 2.5px;
    color: var(--olive-bright); font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .pd-rail-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: 1.5px;
    color: #fff;
    margin-bottom: 10px;
  }
  .pd-rail-link {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px; letter-spacing: 2px;
    color: var(--olive-bright);
    text-decoration: none;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.10);
  }

  /* Tu ficha (olive) */
  .pd-ficha {
    background: linear-gradient(160deg, var(--olive-bright) 0%, var(--olive) 100%);
    border-radius: 14px;
    padding: 18px;
    color: var(--navy);
    position: relative;
    overflow: hidden;
  }
  .pd-ficha::before {
    content: ''; position: absolute;
    top: -30px; right: -30px;
    width: 120px; height: 120px;
    border: 2px solid rgba(0,16,63,.10);
    border-radius: 50%;
  }
  .pd-ficha .eyebrow {
    font-size: 10px; letter-spacing: 3px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: .8;
  }
  .pd-ficha .nm {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 14px;
  }
  .pd-ficha .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
  }
  .pd-ficha .stat .l {
    font-size: 9px; letter-spacing: 1.5px;
    text-transform: uppercase; font-weight: 700;
    opacity: .7;
  }
  .pd-ficha .stat .v {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px; line-height: 1; letter-spacing: .5px;
    margin-top: 2px;
  }
  .pd-ficha .trend {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 1px;
    background: var(--navy); color: #fff;
    padding: 4px 10px; border-radius: 999px;
    text-transform: uppercase;
  }

  /* Top 3 ranking */
  .pd-top3 {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
    font-size: 12.5px;
  }
  .pd-top3:last-of-type { border-bottom: none; }
  .pd-top3 .pos {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    color: var(--olive-bright);
    letter-spacing: 1px;
  }
  .pd-top3 .nm { color: #fff; font-weight: 600; }
  .pd-top3 .pts {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: #fff;
  }

  /* Premio card */
  .pd-premio {
    background: linear-gradient(160deg, var(--gold) 0%, #B8924A 100%);
    color: var(--navy);
    border-radius: 14px;
    padding: 18px;
    position: relative;
    overflow: hidden;
  }
  .pd-premio::before {
    content: '🏆';
    position: absolute;
    top: -10px; right: 8px;
    font-size: 80px; opacity: .12;
    transform: rotate(-12deg);
  }
  .pd-premio .eyebrow {
    font-size: 10px; letter-spacing: 2.5px; font-weight: 800;
    text-transform: uppercase; margin-bottom: 6px;
  }
  .pd-premio .nm {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: 1px; line-height: 1.1;
    margin-bottom: 6px;
  }
  .pd-premio .desc { font-size: 11.5px; line-height: 1.5; opacity: .8; }

  /* Goleador card */
  .pd-gol .flag-inline svg,
  .pd-gol .flag-inline img {
    width: 24px; height: 24px;
    display: inline-block; vertical-align: middle;
    border-radius: 50%; background: #fff;
    margin-right: 8px;
  }
  .pd-gol .nm {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px; letter-spacing: 1px; color: #fff;
    margin-top: 6px;
  }
  .pd-gol .meta { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 4px; }
  .pd-gol .lock {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9.5px; letter-spacing: 1.5px;
    color: var(--olive-bright); font-weight: 700;
    text-transform: uppercase;
    margin-top: 8px;
  }
  .pd-gol .empty {
    font-size: 12px; color: rgba(255,255,255,.65);
    line-height: 1.5;
  }
  .pd-gol .empty a {
    color: var(--olive-bright);
    text-decoration: underline;
  }

  /* ===== PREDICT DESKTOP: tabs sticky + secciones stackeadas ===== */
  .pd-predict-tabs-wrap {
    position: sticky;
    top: 0;
    z-index: 50;
    background:
      linear-gradient(180deg, rgba(0,16,63,.95) 0%, rgba(0,16,63,.92) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin: 0;
    padding: 16px 0 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .pd-predict-tabs {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-behavior: smooth;
  }
  .pd-predict-tabs::-webkit-scrollbar { height: 4px; }
  .pd-predict-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
  .pd-tab {
    display: inline-flex; align-items: center;
    padding: 10px 16px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px; letter-spacing: 2px;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
  }
  .pd-tab:hover { color: #fff; }
  .pd-tab.active {
    color: #fff;
    border-bottom-color: var(--olive-bright);
  }
  .pd-tab[data-group="A"].active { border-bottom-color: #3FAC4D; }
  .pd-tab[data-group="B"].active { border-bottom-color: #D8252E; }
  .pd-tab[data-group="C"].active { border-bottom-color: #F5C522; }
  .pd-tab[data-group="D"].active { border-bottom-color: #26B7B5; }
  .pd-tab[data-group="E"].active { border-bottom-color: #E07823; }
  .pd-tab[data-group="F"].active { border-bottom-color: #3FBFB1; }
  .pd-tab[data-group="G"].active { border-bottom-color: #7FB3D9; }
  .pd-tab[data-group="H"].active { border-bottom-color: #9F8BD0; }
  .pd-tab[data-group="I"].active { border-bottom-color: #B8CC5C; }
  .pd-tab[data-group="J"].active { border-bottom-color: #F5A8A8; }
  .pd-tab[data-group="K"].active { border-bottom-color: #D43F86; }
  .pd-tab[data-group="L"].active { border-bottom-color: #7D1A2B; }
  .pd-tab-fase { font-size: 12px; opacity: .75; }
  .pd-tab-fase.active { border-bottom-color: var(--gold); opacity: 1; }

  /* Album especial para predict: 1 columna (la sección entera) */
  .pd-predict-album {
    grid-template-columns: 1fr !important;
  }
  .pd-predict-section {
    scroll-margin-top: 130px; /* offset para el sticky cuando el browser scrollea al ancla */
    margin-bottom: 24px;
  }
  .pd-predict-section .pd-section-title {
    margin-top: 32px;
  }
  .pd-predict-section:first-child .pd-section-title {
    margin-top: 16px;
  }

  .pd-predict-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  @media (max-width: 1199px) { .pd-predict-grid { grid-template-columns: repeat(2, 1fr); } }

  .pd-match-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    transition: transform .15s, box-shadow .15s;
  }
  .pd-match-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
  .pd-match-card.is-locked { opacity: .85; }
  .pd-match-card.is-final { opacity: .7; }
  .pd-match-card .band {
    height: 40px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px;
    color: #fff;
    background: var(--navy);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px; letter-spacing: 2px;
  }
  .pd-match-card .band[data-group="C"],
  .pd-match-card .band[data-group="G"],
  .pd-match-card .band[data-group="I"],
  .pd-match-card .band[data-group="J"] { color: var(--navy); }
  .pd-match-card .band[data-group="A"] { background: #3FAC4D; }
  .pd-match-card .band[data-group="B"] { background: #D8252E; }
  .pd-match-card .band[data-group="C"] { background: #F5C522; }
  .pd-match-card .band[data-group="D"] { background: #26B7B5; }
  .pd-match-card .band[data-group="E"] { background: #E07823; }
  .pd-match-card .band[data-group="F"] { background: #3FBFB1; }
  .pd-match-card .band[data-group="G"] { background: #7FB3D9; }
  .pd-match-card .band[data-group="H"] { background: #9F8BD0; }
  .pd-match-card .band[data-group="I"] { background: #B8CC5C; }
  .pd-match-card .band[data-group="J"] { background: #F5A8A8; }
  .pd-match-card .band[data-group="K"] { background: #D43F86; }
  .pd-match-card .band[data-group="L"] { background: #7D1A2B; }
  .pd-match-card .band[data-stage="octavos"] { background: #3E5C6B; }
  .pd-match-card .band[data-stage="cuartos"] { background: #7A5C3A; }
  .pd-match-card .band[data-stage="semi"]    { background: #9A7B36; }
  .pd-match-card .band[data-stage="tercer"]  { background: #6B5236; }
  .pd-match-card .band[data-stage="final"]   { background: #B8924A; }
  .pd-match-card .band-badge {
    font-family: 'Sora', sans-serif;
    font-size: 9.5px; letter-spacing: 1.5px;
    font-weight: 700;
    background: rgba(0,0,0,.20);
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
  }
  .pd-match-card .band-badge.live {
    background: var(--olive-bright); color: var(--navy);
    animation: pdLive 1.5s ease-in-out infinite;
  }
  @keyframes pdLive {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
  }

  .pd-match-card .content {
    padding: 18px 16px 16px;
    display: flex; flex-direction: column;
    gap: 14px;
  }
  .pd-match-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
  }
  .pd-match-teams .team {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
  }
  .pd-match-teams .team .flag svg,
  .pd-match-teams .team .flag img {
    width: 56px; height: 56px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,16,63,.10);
  }
  .pd-match-teams .team .name {
    font-size: 12px; font-weight: 600;
    color: var(--navy);
    text-align: center;
    line-height: 1.2;
  }
  .pd-match-teams .vs {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px; letter-spacing: 1.5px;
    color: rgba(0,16,63,.4);
  }

  /* Steppers para el score */
  .pd-match-inputs {
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
  }
  .pd-stepper {
    display: flex; align-items: center;
    background: var(--cream);
    border-radius: 8px;
    padding: 4px;
  }
  .pd-stepper .step {
    width: 28px; height: 28px;
    border: none;
    background: rgba(0,16,63,.06);
    color: var(--navy);
    font-size: 16px; font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .12s;
  }
  .pd-stepper .step:hover { background: rgba(0,16,63,.14); }
  .pd-stepper .num {
    width: 38px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    color: var(--navy);
    -moz-appearance: textfield;
  }
  .pd-stepper .num::-webkit-outer-spin-button,
  .pd-stepper .num::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .pd-dash {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    color: var(--navy); opacity: .35;
  }

  .pd-save {
    display: block;
    width: 100%;
    background: var(--navy);
    color: #fff;
    border: none;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px; letter-spacing: 2.5px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, transform .12s;
  }
  .pd-save:hover { background: var(--navy-deep); }
  .pd-save:active { transform: scale(.98); }
  .pd-save.edit { background: var(--olive); }
  .pd-save.edit:hover { background: var(--olive-bright); color: var(--navy); }

  .pd-match-score {
    text-align: center;
    font-size: 13px;
    color: var(--navy);
  }
  .pd-match-score .pred, .pd-match-score .real {
    padding: 4px 0;
  }
  .pd-match-score .real b { color: var(--olive); }

  /* ===== REGISTER MODAL DESKTOP: ligeramente más ancho + sombra más fuerte ===== */
  .penca-reg-modal-card {
    max-width: 440px !important;
    padding: 40px 32px 28px !important;
    box-shadow: 0 60px 120px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255,255,255,.08) !important;
  }

  /* ===== PERFIL DESKTOP: header + activity feed + cupones ===== */
  .pd-profile-header {
    background: linear-gradient(160deg, rgba(184,204,92,.18) 0%, rgba(149,167,72,.08) 100%);
    border: 1px solid rgba(184,204,92,.25);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: center;
  }
  .pd-profile-header .avatar-big {
    width: 92px; height: 92px;
    border-radius: 50%;
    background: var(--olive-bright);
    color: var(--navy);
    display: grid; place-items: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 38px; letter-spacing: 1px;
    box-shadow: 0 4px 16px rgba(184,204,92,.4);
  }
  .pd-profile-header h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px; letter-spacing: 1px; color: #fff;
    line-height: 1;
    margin-bottom: 8px;
  }
  .pd-profile-header .meta {
    font-size: 12.5px;
    color: rgba(255,255,255,.65);
    margin-bottom: 14px;
  }
  .pd-profile-header .stats-inline {
    display: flex; flex-wrap: wrap;
    gap: 20px;
    font-size: 12.5px;
    color: rgba(255,255,255,.75);
  }
  .pd-profile-header .stats-inline b {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    color: var(--olive-bright);
    margin-right: 4px;
    letter-spacing: 1px;
  }

  .pd-activity {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    overflow: hidden;
  }
  .pd-activity-row {
    display: grid;
    grid-template-columns: 90px 1fr 130px 50px;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
    color: rgba(255,255,255,.85);
  }
  .pd-activity-row:last-child { border-bottom: none; }
  .pd-activity-row .when {
    font-size: 10.5px; letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    font-weight: 700;
  }
  .pd-activity-row .match {
    display: flex; align-items: center; gap: 8px;
    color: #fff; font-weight: 600;
  }
  .pd-activity-row .match .vs { opacity: .4; font-weight: 400; padding: 0 2px; }
  .pd-activity-row .match .flag svg,
  .pd-activity-row .match .flag img { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
  .pd-activity-row .scores {
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: rgba(255,255,255,.7);
  }
  .pd-activity-row .scores .pred {
    font-weight: 700; color: #fff;
  }
  .pd-activity-row .pts {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: 1px;
    text-align: right;
    color: rgba(255,255,255,.4);
  }
  .pd-activity-row .pts.exact { color: var(--olive-bright); }
  .pd-activity-row .pts.partial { color: var(--gold); }
  .pd-activity-row .pts.miss { color: rgba(255,255,255,.3); }

  .pd-cupones-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .pd-cupon {
    background: #fff;
    color: var(--navy);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    position: relative;
    overflow: hidden;
  }
  .pd-cupon::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; height: 4px;
    background: var(--olive-bright);
  }
  .pd-cupon.canjeado::before { background: #94A3B8; }
  .pd-cupon.vencido::before { background: #DC2626; }
  .pd-cupon-codigo {
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 22px;
    color: var(--navy);
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 6px;
  }
  .pd-cupon.canjeado .pd-cupon-codigo,
  .pd-cupon.vencido .pd-cupon-codigo {
    text-decoration: line-through;
    opacity: .5;
  }
  .pd-cupon-desc {
    font-size: 12.5px;
    color: var(--navy);
    opacity: .8;
    margin-bottom: 10px;
  }
  .pd-cupon-meta {
    display: flex; justify-content: space-between;
    align-items: center;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .pd-cupon-meta .estado {
    font-weight: 700;
    color: var(--olive);
  }
  .pd-cupon.canjeado .pd-cupon-meta .estado { color: #94A3B8; }
  .pd-cupon.vencido .pd-cupon-meta .estado { color: #DC2626; }
  .pd-cupon-meta .vence {
    color: var(--navy);
    opacity: .5;
  }

  /* ===== RANKING DESKTOP: tabla densa ===== */
  .pd-rank-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
    font-size: 13.5px;
    color: var(--navy);
  }
  .pd-rank-table thead th {
    background: var(--navy);
    color: #fff;
    text-align: left;
    padding: 12px 14px;
    font-size: 10.5px; letter-spacing: 2px;
    text-transform: uppercase; font-weight: 700;
  }
  .pd-rank-table thead th.num { text-align: right; }
  .pd-rank-table thead th.pos { width: 56px; }
  .pd-rank-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(0,16,63,.06);
    font-variant-numeric: tabular-nums;
  }
  .pd-rank-table tbody td.num { text-align: right; }
  .pd-rank-table tbody td.pos {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    color: var(--navy); opacity: .55;
    letter-spacing: 1px;
  }
  .pd-rank-table tbody td.player { font-weight: 600; }
  .pd-rank-table tbody td.pts {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px; letter-spacing: 1px;
  }
  .pd-rank-table tbody tr.gold td.pos { color: var(--gold); opacity: 1; }
  .pd-rank-table tbody tr.silver td.pos { color: #A8A8A8; opacity: 1; }
  .pd-rank-table tbody tr.bronze td.pos { color: #B8924A; opacity: 1; }
  .pd-rank-table tbody tr.me {
    background: linear-gradient(90deg, rgba(184,204,92,.16), rgba(184,204,92,.04));
  }
  .pd-rank-table tbody tr.me td.player { color: var(--navy); font-weight: 800; }
  .pd-rank-table tbody tr.me .me-tag {
    display: inline-block;
    margin-left: 8px;
    background: var(--olive-bright); color: var(--navy);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px; letter-spacing: 1.5px;
    padding: 2px 8px; border-radius: 999px;
  }
  .pd-rank-table tbody tr:hover { background: rgba(0,16,63,.025); }
  .pd-rank-table tbody tr.me:hover { background: rgba(184,204,92,.22); }
  .pd-rank-foot {
    margin-top: 14px;
    font-size: 11.5px;
    color: rgba(255,255,255,.55);
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .pd-rank-empty {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    padding: 36px 28px;
    text-align: center;
    color: #fff;
  }
  .pd-rank-empty h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px; letter-spacing: 1.5px;
    margin-bottom: 10px;
  }
  .pd-rank-empty p {
    font-size: 13.5px; line-height: 1.6;
    color: rgba(255,255,255,.7);
    max-width: 480px; margin: 0 auto;
  }

  .pd-breakdown-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 12.5px;
    color: rgba(255,255,255,.85);
  }
  .pd-breakdown-row .v {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,.55);
    letter-spacing: 1px;
  }
  .pd-breakdown-row .t {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: var(--olive-bright);
    min-width: 50px; text-align: right;
  }
  .pd-breakdown-row.total {
    border-bottom: none;
    border-top: 2px solid rgba(255,255,255,.20);
    padding-top: 12px;
    margin-top: 6px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    color: #fff;
    letter-spacing: 1.5px;
  }
  .pd-breakdown-row.total .t { font-size: 22px; color: #fff; }

  /* ===== PREDICTIONS HUB DESKTOP: pendientes hero ===== */
  .pd-pendientes-hero {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    padding: 22px 24px 18px;
    margin-bottom: 28px;
  }
  .pd-pendientes-hero .head .eyebrow {
    font-size: 10.5px; letter-spacing: 3px;
    color: var(--olive); font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .pd-pendientes-hero .head h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px; letter-spacing: 1px;
    color: var(--navy);
    margin-bottom: 4px;
  }
  .pd-pendientes-hero .head .sub {
    font-size: 13px;
    color: var(--navy); opacity: .65;
    margin-bottom: 6px;
  }
  .pd-pendientes-hero.done {
    background: linear-gradient(160deg, var(--olive-bright) 0%, var(--olive) 100%);
    color: var(--navy);
  }
  .pd-pendientes-hero.done .head .eyebrow { color: var(--navy); opacity: .8; }

  .pd-pendientes-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    border-top: 1px solid rgba(0,16,63,.10);
  }
  .pd-pend-row {
    display: grid;
    grid-template-columns: 130px 1fr 24px;
    align-items: center;
    gap: 16px;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(0,16,63,.08);
    text-decoration: none;
    color: var(--navy);
    transition: background .12s;
  }
  .pd-pend-row:hover { background: rgba(0,16,63,.04); }
  .pd-pendientes-list li:last-child .pd-pend-row { border-bottom: none; }
  .pd-pend-row .when {
    font-size: 11px; letter-spacing: 1.5px;
    color: var(--navy); opacity: .6;
    text-transform: uppercase; font-weight: 600;
  }
  .pd-pend-row .match {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 600;
  }
  .pd-pend-row .match .vs { opacity: .4; font-weight: 400; padding: 0 4px; }
  .pd-pend-row .match .flag svg,
  .pd-pend-row .match .flag img { width: 22px; height: 22px; border-radius: 50%; background: #fff; }
  .pd-pend-row .arrow {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: var(--olive);
    text-align: right;
    transition: transform .12s;
  }
  .pd-pend-row:hover .arrow { transform: translateX(2px); }

  .pd-pendientes-hero .more {
    font-size: 11.5px;
    color: var(--navy); opacity: .55;
    text-align: center;
    margin-top: 12px;
    font-style: italic;
  }

  /* CTA anónimo (cuando no hay player) */
  .pd-anon-card {
    background: linear-gradient(160deg, var(--olive-bright) 0%, var(--olive) 100%);
    color: var(--navy);
    border-radius: 14px;
    padding: 22px;
    text-align: center;
  }
  .pd-anon-card .nm {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px; letter-spacing: 1px; line-height: 1.1;
    margin-bottom: 8px;
  }
  .pd-anon-card .desc { font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; opacity: .85; }
  .pd-anon-card .btn {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px; letter-spacing: 2px;
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
  }
} /* fin @media min-width:1024px */