/* Estilos compartidos de Ponce Picks.
   Fondo azul marino con lluvia de balones (comun.js), tipografías
   Syne/Space Grotesk/Press Start 2P. Todo blanco sobre azul: cards
   rectangulares de borde blanco sobre fondo transparente. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-deep: #051659;
  --white: #FFFFFF;
  --w85: rgba(255,255,255,0.85);
  --w70: rgba(255,255,255,0.7);
  --w50: rgba(255,255,255,0.5);
  --w30: rgba(255,255,255,0.3);
  --w12: rgba(255,255,255,0.12);
  --w05: rgba(255,255,255,0.05);
  --ease: cubic-bezier(0.16,1,0.3,1);
}

html { overflow-x: hidden; }

body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--bg-deep);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
}

#starsCanvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

.pagina {
  position: relative; z-index: 10;
  width: 100%; max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 56px) clamp(16px, 4vw, 32px) 64px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.titulo-pixel {
  font-family: 'Press Start 2P', cursive;
  font-size: clamp(18px, 5vw, 32px);
  letter-spacing: 3px;
  line-height: 1.4;
  margin-bottom: 10px;
  text-shadow: 0 0 14px rgba(255,255,255,0.35);
}

.sub {
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--w50);
  margin-bottom: 34px;
}

/* Botones rectangulares: lenguaje de la portada, todo en blanco */
.btn-blanco {
  display: block;
  width: 100%;
  background: var(--w05);
  color: var(--white);
  border: 2px solid var(--w85);
  border-radius: 10px;
  padding: 18px 24px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  backdrop-filter: blur(4px);
}
.btn-blanco:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(255,255,255,0.12);
}
.btn-blanco .nota {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--w50);
  margin-top: 6px;
}
.menu-deportes { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 420px; }

/* Circulito con el número de picks del día: minimalista, junto al nombre */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 6px;
  border: 1.5px solid var(--w85); border-radius: 50%;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: 0;
  margin-left: 10px; vertical-align: 2px;
}
.badge.cero { opacity: 0.3; }

/* Cards de picks: rectangulares, borde blanco, contenido transparente */
.card {
  width: 100%;
  background: var(--w05);
  border: 2px solid var(--w85);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  text-align: left;
  backdrop-filter: blur(4px);
}
.card .encabezado {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; flex-wrap: wrap;
}
.card .duelo { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; }
.card .hora { font-size: 11px; letter-spacing: 2px; color: var(--w50); text-transform: uppercase; }
.card .abridores { font-size: 12.5px; color: var(--w70); margin: 6px 0 12px; }

/* Escudo de equipo antes del nombre, en cards y en picks estelares. Si el
   PNG todavía no existe, el <img> se esconde solo (onerror inline). Subido
   de 18px a 26px el 2026-08-22 (pedido de Axel) — los PNG ya vienen
   normalizados (recorte de margen transparente + lienzo uniforme, ver
   scratchpad/normalizar_logos.py) así que todos se ven del mismo tamaño. */
.logo-mini { height: 26px; width: 26px; object-fit: contain; vertical-align: -7px; margin-right: 6px; }

/* Marcador tipo scoreboard: logo grande + nombre debajo por equipo, VS y
   hora al centro. Usado hoy solo por MLB (report_builder.py, _tarjeta). */
.marcador {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.equipo-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.logo-team { width: clamp(60px, 20vw, 92px); height: clamp(60px, 20vw, 92px); object-fit: contain; }
.logo-team.logo-vacio { visibility: hidden; }
.nombre-equipo {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px;
  text-align: center; line-height: 1.25;
}
.vs-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; padding-top: 22px; }
.vs-text { font-family: 'Press Start 2P', cursive; font-size: 10px; color: var(--w30); }
.abridores-centrado { text-align: center; margin: 10px 0 12px; }

/* Barras de probabilidad: Elo = blanco sólido, Mercado = blanco tenue */
.barras {
  display: grid; grid-template-columns: 64px 1fr 52px;
  gap: 3px 10px; align-items: center; font-size: 12px;
}
.barras .etq { color: var(--w50); text-align: right; letter-spacing: 1px; }
.pista { background: var(--w12); border-radius: 3px; height: 12px; position: relative; }
.relleno { height: 100%; border-radius: 0 3px 3px 0; min-width: 2px; }
.r-elo { background: var(--white); }
.r-mkt { background: var(--w30); }
.mitad { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--w50); }
.pct { font-variant-numeric: tabular-nums; font-weight: 600; }

.leyenda {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--w50); margin-bottom: 18px;
}
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.leyenda .i-elo { background: var(--white); }
.leyenda .i-mkt { background: var(--w30); }

.fila-ev { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.chip {
  font-size: 12px; padding: 5px 12px; border-radius: 6px;
  border: 1px solid var(--w30); color: var(--w70);
  font-variant-numeric: tabular-nums;
}
.chip b { color: var(--white); font-weight: 600; }
.chip-pick {
  background: var(--white); color: var(--bg-deep);
  border-color: var(--white); font-weight: 700; letter-spacing: 0.5px;
}

/* Tiles de resumen */
.tiles { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; margin-bottom: 20px; }
.tile {
  flex: 1 1 110px; background: var(--w05); border: 2px solid var(--w85);
  border-radius: 10px; padding: 12px 14px; backdrop-filter: blur(4px);
}
.tile .v { font-family: 'Syne', sans-serif; font-size: 24px; font-weight: 700; }
.tile .l { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--w50); margin-top: 2px; }

.seccion {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 3px; text-transform: uppercase;
  margin: 30px 0 14px; width: 100%; text-align: left;
}

table { border-collapse: collapse; width: 100%; font-size: 12.5px; text-align: left; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--w12); font-variant-numeric: tabular-nums; }
th { color: var(--w50); font-weight: 500; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; }
.gano { font-weight: 700; }
.perdio { color: var(--w50); }

.vacio {
  width: 100%; border: 2px dashed var(--w30); border-radius: 10px;
  padding: 44px 20px; font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: 18px; letter-spacing: 3px; text-transform: uppercase; color: var(--w70);
}
.vacio .porque {
  display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 400;
  font-size: 13px; letter-spacing: 1px; text-transform: none; color: var(--w50); margin-top: 10px;
}

.nota-pie {
  margin-top: 32px; font-size: 12px; line-height: 1.6; color: var(--w50);
  border-top: 1px solid var(--w12); padding-top: 14px; width: 100%; text-align: left;
}
/* Fila de navegación superior: "volver" (un nivel arriba) a la izquierda,
   botón HOME (directo a la portada de εtεrεo) a la derecha. Agregado
   2026-08-22: desde una página honda (p.ej. /picks/mlb/historial.html)
   antes solo se podía subir de un nivel a la vez. */
.nav-superior {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-bottom: 26px; gap: 12px;
}
.volver {
  display: inline-block; color: var(--w50); margin-bottom: 0;
  text-decoration: none; font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
}
.volver:hover { color: var(--white); }
.btn-home {
  font-family: 'Press Start 2P', cursive; font-size: 9px; letter-spacing: 1px;
  color: var(--w50); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--w30); border-radius: 6px; padding: 7px 10px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn-home:hover { color: var(--white); border-color: var(--w85); }

/* Popup de deslinde */
.velo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(3,3,5,0.82); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.velo.oculto { display: none; }
.aviso-caja {
  max-width: 440px; background: var(--bg-deep);
  border: 2px solid var(--w85); border-radius: 10px; padding: 26px 24px;
  text-align: center;
}
.aviso-caja h2 {
  font-family: 'Syne', sans-serif; font-size: 15px; letter-spacing: 3px;
  text-transform: uppercase; margin-bottom: 12px;
}
.aviso-caja p { font-size: 13.5px; line-height: 1.65; color: var(--w70); margin-bottom: 18px; }
.aviso-caja button {
  background: var(--white); color: var(--bg-deep); border: none; border-radius: 8px;
  padding: 12px 34px; font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
}

/* Aviso flotante (mensajes cortos) */
.mensaje {
  position: fixed; z-index: 101; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  background: var(--bg-deep); border: 1px solid var(--w85); border-radius: 8px;
  padding: 12px 20px; font-size: 13px; max-width: calc(100vw - 32px);
  transition: opacity 0.4s; white-space: nowrap;
}

@media (max-width: 480px) {
  .barras { grid-template-columns: 54px 1fr 46px; }
  .btn-blanco { font-size: 17px; padding: 15px 18px; }
  .mensaje { white-space: normal; }
}

/* ===== PICKS ESTELARES =====
   Rediseño 2026-08-23 (pedido de Axel): sin card ni píldora — los dos
   escudos y nombres arriba (como el marcador de las cards de abajo, pero
   compacto y sin borde) y el pick en blanco, grande, al centro. Se
   distingue así de las cards con borde de "todos los juegos": lo
   destacado flota, el detalle se enmarca. Deportes sin logo (box) caen
   solo al texto del pick, sin fila de equipos — se ve igual de bien. */
.estelares { width: 100%; display: flex; flex-direction: column; gap: 22px; margin-bottom: 30px; }
.estelar {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; text-decoration: none; color: var(--white);
  padding-bottom: 20px; border-bottom: 1px solid var(--w12);
  transition: opacity 0.25s var(--ease);
}
.estelares .estelar:last-child { border-bottom: none; padding-bottom: 0; }
a.estelar:hover { opacity: 0.7; }
.estelar-equipos { display: flex; align-items: center; gap: 14px; }
.estelar-equipo { display: flex; align-items: center; }
.estelar-equipo .logo-mini { margin-right: 8px; }
.estelar-nombre { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 14px; color: var(--w70); }
.estelar-vs { font-size: 10px; color: var(--w30); letter-spacing: 2px; text-transform: uppercase; }
.estelar-pick-row { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 10px; }
.estelar-pick { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: 0.2px; }
.estelar-pick .cuota { font-weight: 500; font-size: 13px; color: var(--w50); margin-left: 4px; font-variant-numeric: tabular-nums; }
/* Casa donde está ese momio (line shopping, 2026-08-23): chiquita, en
   mayúsculas espaciadas, al lado de la cuota. */
.estelar-pick .casa { font-weight: 500; font-size: 10px; color: var(--w50); margin-left: 6px; letter-spacing: 1.5px; text-transform: uppercase; }
.estelar-prob {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 21px;
  font-variant-numeric: tabular-nums;
}
.estelar-prob::before { content: '·'; color: var(--w30); margin-right: 10px; font-weight: 400; }
.estelar .ctx { font-size: 12px; color: var(--w50); letter-spacing: 0.3px; }

/* Calificación, riesgo, descripción y noticias de cada pick (2026-10-02) */
.estelar-eval { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip-eval {
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 5px 11px; border: 1px solid var(--w30); border-radius: 999px; color: var(--w70);
}
.chip-eval.riesgo-bajo { border-color: rgba(130,225,170,0.7); color: #a8ecc6; }
.chip-eval.riesgo-medio { border-color: rgba(255,214,110,0.7); color: #ffdc82; }
.chip-eval.riesgo-alto { border-color: rgba(255,130,130,0.7); color: #ffa3a3; }
.estelar-desc { font-size: 13.5px; line-height: 1.5; color: var(--w70); max-width: 520px; }
.estelar-noticias {
  width: 100%; max-width: 560px; text-align: left;
  background: var(--w05); border: 1px solid var(--w12); border-radius: 10px;
  padding: 14px 16px; font-size: 13.5px; line-height: 1.55; color: var(--w85);
}
.estelar-noticias-t { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--w50); margin-bottom: 8px; }
.estelar-noticias p + p { margin-top: 8px; }
/* Lista Hándicap (de paga): el juego se ve, el lado no */
.seccion .de-paga {
  font-size: 10px; letter-spacing: 2px; vertical-align: middle; margin-left: 10px;
  padding: 3px 9px; border: 1px solid var(--w50); border-radius: 999px; color: var(--w70);
}
.estelar-pick.reservado {
  font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--w70); padding: 8px 16px; border: 1px dashed var(--w50); border-radius: 999px;
}
.ticker .estelar-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 12.5px;
}

/* ===== TICKER del hub (2026-08-23) =====
   En /picks/ los estelares de todos los deportes van en UNA caja de altura
   fija: una card visible, deslizas hacia arriba y la siguiente encaja
   (scroll-snap nativo, sin librerías). Estilo Google Clock, no carrusel de
   noticias. El auto-avance vive en index.html y se apaga al primer toque. */
/* La caja mide una card + un "asomo" (--peek) de la siguiente, que se ve
   atenuada por la máscara de abajo: así se entiende sin explicar que hay
   más y se desliza. El ::after del alto del asomo deja que la ÚLTIMA card
   también pueda encajar arriba (si no, quedaría corrida hacia abajo). */
.ticker {
  /* --peek = media card (pedido de Axel 2026-08-23): la siguiente se LEE,
     no solo se insinúa. El degradado arranca justo donde termina la card
     visible y baja hasta ~40% al fondo, así la de abajo queda atenuada
     pero legible. */
  --card: 225px; --peek: 76px;  /* más alta desde que la card trae calificación y descripción */
  width: 100%; height: calc(var(--card) + var(--peek)); margin-bottom: 30px;
  overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-top: 1px solid var(--w12); border-bottom: 1px solid var(--w12);
  outline: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--card), rgba(0,0,0,0.55) calc(var(--card) + 20px), rgba(0,0,0,0.4) 100%);
          mask-image: linear-gradient(to bottom, #000 var(--card), rgba(0,0,0,0.55) calc(var(--card) + 20px), rgba(0,0,0,0.4) 100%);
}
.ticker::after { content: ''; display: block; height: var(--peek); }
.ticker::-webkit-scrollbar { display: none; }
.ticker:focus-visible { box-shadow: 0 0 0 2px var(--w30); border-radius: 6px; }
.ticker .estelar {
  height: var(--card); scroll-snap-align: start; scroll-snap-stop: always;
  justify-content: center; gap: 9px;
  padding: 10px 2px; border-bottom: none;
}
.ticker-eyebrow {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--w50);
}
.ticker-pos { font-variant-numeric: tabular-nums; letter-spacing: 1px; color: var(--w30); }
@media (max-width: 480px) { .ticker { --card: 142px; --peek: 70px; } }
.estelares-grupo {
  width: 100%; text-align: left; font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--w70);
  margin: 4px 0 8px;
}
.estelares-grupo a { color: inherit; text-decoration: none; }
.estelares-grupo a:hover { color: var(--white); }
.estelares-vacio {
  width: 100%; border: 2px dashed var(--w30); border-radius: 10px; padding: 14px 18px;
  font-size: 13px; color: var(--w50); text-align: left; margin-bottom: 26px;
}

/* Record compacto: una card con una fila por lista */
.record-tabla { width: 100%; }
.record-tabla table { font-size: 13px; }
.record-tabla th { text-align: right; }
.record-tabla th:first-child, .record-tabla td:first-child { text-align: left; }
.record-tabla td { text-align: right; padding: 8px 8px; }
.record-tabla td:first-child { font-family: 'Syne', sans-serif; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; }
.record-tabla tr:last-child td { border-bottom: none; }
.record-tabla .pos { font-weight: 700; }
.record-tabla .neg { color: var(--w70); }
.btn-blanco .nota.record { color: var(--w70); letter-spacing: 1px; text-transform: none; }

@media (max-width: 480px) {
  .estelar-pick, .estelar-prob { font-size: 17px; }
  .estelar-nombre { font-size: 12.5px; }
  .record-tabla table { font-size: 12px; }
  .record-tabla td, .record-tabla th { padding: 7px 5px; }
}

/* ===== Móvil: récord e historial (2026-08-23) =====
   La tabla de récord tiene 5-6 columnas y los encabezados en mayúsculas
   espaciadas medían más que la card en 360px: se apretaba o se partía. En
   móvil se compactan y, si aun así no cabe, la tabla desliza dentro de la
   card sin partir celdas (nowrap + overflow). */
.record-tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.record-tabla::-webkit-scrollbar { display: none; }
.record-tabla table { white-space: nowrap; }
@media (max-width: 480px) {
  .record-tabla table { font-size: 11.5px; }
  .record-tabla th { font-size: 9.5px; letter-spacing: 0.8px; }
  .record-tabla td, .record-tabla th { padding: 7px 4px; }
  .record-tabla td:first-child { font-size: 11px; letter-spacing: 0.5px; }
}

/* Historial: antes era un <pre> monoespaciado con líneas de ~90 caracteres
   (~700px) dentro de una card de ~290px en teléfono — scroll horizontal y
   letra ilegible. Ahora cada pick es una fila que envuelve sola: fecha y
   resultado arriba, el pick grande, el detalle abajo. */
.record-bloque { width: 100%; margin-top: 14px; }
.record-titulo {
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 2px; text-transform: uppercase; text-align: left;
  margin-bottom: 10px;
}
.record-titulo span {
  display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 400;
  font-size: 12px; letter-spacing: 0.5px; text-transform: none; color: var(--w50);
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.hist-fila { padding: 10px 0; border-bottom: 1px solid var(--w12); text-align: left; }
.hist-fila:last-child { border-bottom: none; padding-bottom: 2px; }
.hist-fila:first-child { padding-top: 2px; }
.hist-top {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--w50);
  font-variant-numeric: tabular-nums;
}
.hist-res { font-weight: 700; }
.hist-fila.gano .hist-res { color: var(--white); }
.hist-fila.perdio .hist-res { color: var(--w50); }
.hist-fila.push .hist-res { color: var(--w70); }
.hist-pick { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; margin-top: 4px; line-height: 1.3; }
.hist-pick .cuota { font-weight: 500; font-size: 12px; color: var(--w50); margin-left: 5px; font-variant-numeric: tabular-nums; }
.hist-pick .casa { font-weight: 500; font-size: 10px; color: var(--w50); margin-left: 6px; letter-spacing: 1.5px; text-transform: uppercase; }
.hist-meta { font-size: 12px; color: var(--w50); margin-top: 3px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.hist-meta b { color: var(--w70); font-weight: 600; }
.hist-vacio { font-size: 13px; color: var(--w50); text-align: left; }

/* Otros ajustes de móvil que salieron en la auditoría */
.estelar-equipos { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
@media (max-width: 480px) {
  .sub { letter-spacing: 2px; line-height: 1.6; }
  .card { padding: 14px 14px; }
}