/* ============================================================
   styles.css — EDH San Juan
   ============================================================ */
:root {
  --color-primario: #378ADD;
  --color-fondo: #F5F5F0;
  --color-superficie: #FFFFFF;
  --color-borde: rgba(0,0,0,0.1);
  --color-borde-fuerte: rgba(0,0,0,0.2);
  --color-texto: #1A1A1A;
  --color-texto-muted: #6B6B6B;
  --radio-sm: 8px; --radio-md: 12px; --radio-lg: 16px;
  --sombra-card: 0 1px 3px rgba(0,0,0,0.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-fondo: #1A1A1A; --color-superficie: #252525;
    --color-borde: rgba(255,255,255,0.1); --color-borde-fuerte: rgba(255,255,255,0.2);
    --color-texto: #F0F0F0; --color-texto-muted: #9A9A9A;
    --sombra-card: 0 1px 3px rgba(0,0,0,0.3);
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--color-fondo); color: var(--color-texto); font-size: 15px; line-height: 1.5; }
.app { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--color-fondo); }

/* Header */
.header { background: var(--color-superficie); border-bottom: 0.5px solid var(--color-borde); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.header-logo { display: flex; align-items: center; gap: 10px; }
.header-logo-img { height: 38px; width: auto; }
.header-titulo { font-size: 15px; font-weight: 600; color: var(--color-texto); }
.header-sub { font-size: 11px; color: var(--color-texto-muted); }

/* Contenido */
.contenido { flex: 1; overflow-y: auto; padding: 16px; padding-bottom: 80px; }

/* Nav */
.nav { display: flex; background: var(--color-superficie); border-top: 0.5px solid var(--color-borde); position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; z-index: 100; }
.nav-btn { flex: 1; padding: 10px 4px 14px; font-size: 10px; color: var(--color-texto-muted); background: none; border: none; border-top: 2px solid transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: color 0.15s; }
.nav-btn i { font-size: 20px; }
.nav-btn.activa { color: var(--color-primario); border-top-color: var(--color-primario); }

/* Pantallas */
.pantalla { display: none; }
.pantalla.activa { display: block; }

/* Cards */
.card { background: var(--color-superficie); border: 0.5px solid var(--color-borde); border-radius: var(--radio-md); padding: 14px; margin-bottom: 10px; box-shadow: var(--sombra-card); }
.card.clickeable { cursor: pointer; }
.card.clickeable:hover { border-color: var(--color-borde-fuerte); }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 8px; }
.card-titulo { font-size: 15px; font-weight: 600; color: var(--color-texto); }
.card-sub { font-size: 12px; color: var(--color-texto-muted); margin-top: 2px; }
.card-meta { display: flex; gap: 14px; font-size: 12px; color: var(--color-texto-muted); flex-wrap: wrap; }
.card-meta i { font-size: 13px; vertical-align: -1px; margin-right: 2px; }

/* Badges */
.badge { font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 500; white-space: nowrap; }
.badge-liga    { background: #EEEDFE; color: #534AB7; }
.badge-torneo  { background: #E6F1FB; color: #185FA5; }
.badge-activo  { background: #EAF3DE; color: #3B6D11; }
.badge-done    { background: rgba(0,0,0,0.07); color: var(--color-texto-muted); }
.badge-pendiente { background: #FAEEDA; color: #854F0B; }
.badge-bloqueada { background: #FCEBEB; color: #A32D2D; }

/* Botones */
.btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 11px; border: none; border-radius: var(--radio-sm); font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 8px; transition: opacity 0.15s; }
.btn:active { opacity: 0.8; }
.btn-primary { background: var(--color-primario); color: #fff; }
.btn-outline { background: none; border: 0.5px solid var(--color-borde-fuerte); color: var(--color-texto); }
.btn-danger  { background: none; border: 0.5px solid #F09595; color: #A32D2D; }
.btn-success { background: #3B6D11; color: #fff; }
.btn-icono { background: none; border: none; cursor: pointer; padding: 4px; color: var(--color-texto); font-size: 20px; display: flex; align-items: center; }

/* Avatar */
.avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }

/* Filas */
.fila-jugador, .fila-ranking { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 0.5px solid var(--color-borde); }
.fila-jugador:last-child, .fila-ranking:last-child { border-bottom: none; }
.fila-nombre { flex: 1; font-size: 14px; color: var(--color-texto); }
.fila-sub { display: block; font-size: 11px; color: var(--color-texto-muted); }
.fila-pts { font-size: 14px; font-weight: 600; color: var(--color-texto); }
.pos { font-size: 14px; font-weight: 600; min-width: 22px; color: var(--color-texto-muted); }
.pos.oro { color: #BA7517; } .pos.plata { color: #888780; } .pos.bronce { color: #854F0B; }

/* Mesas */
.mesa-card { background: var(--color-superficie); border: 0.5px solid var(--color-borde); border-radius: var(--radio-md); padding: 14px; margin-bottom: 10px; box-shadow: var(--sombra-card); }
.mesa-titulo { font-size: 13px; font-weight: 600; color: var(--color-texto-muted); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.mesa-fila { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 0.5px solid var(--color-borde); }
.mesa-fila:last-child { border-bottom: none; }
.mesa-nombre { flex: 1; font-size: 14px; color: var(--color-texto); }
.result-badge { font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 500; }
.rganador  { background: #FAEEDA; color: #854F0B; }
.rausente  { background: #FCEBEB; color: #A32D2D; }
.rjugo     { background: #EAF3DE; color: #3B6D11; }
.robjetivo { background: #EEEDFE; color: #534AB7; }
.rpendiente { background: rgba(0,0,0,0.06); color: var(--color-texto-muted); }

/* Stats */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.stat-card { background: var(--color-superficie); border-radius: var(--radio-sm); padding: 12px; border: 0.5px solid var(--color-borde); }
.stat-label { font-size: 11px; color: var(--color-texto-muted); margin-bottom: 4px; }
.stat-valor { font-size: 24px; font-weight: 700; color: var(--color-texto); }
.stat-destacado { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 0.5px solid var(--color-borde); }
.stat-destacado:last-child { border-bottom: none; }

/* Sección */
.seccion-titulo { font-size: 11px; font-weight: 600; color: var(--color-texto-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 8px; }
.seccion-titulo:first-child { margin-top: 0; }

/* Tabs */
.tab-row { display: flex; border: 0.5px solid var(--color-borde); border-radius: var(--radio-sm); overflow: hidden; margin-bottom: 14px; }
.tab { flex: 1; padding: 9px; font-size: 13px; text-align: center; cursor: pointer; background: none; border: none; color: var(--color-texto-muted); transition: background 0.15s, color 0.15s; }
.tab.activa { background: var(--color-primario); color: #fff; }

/* Formularios */
.form-grupo { margin-bottom: 14px; }
.form-grupo label { display: block; font-size: 12px; color: var(--color-texto-muted); margin-bottom: 5px; }
.form-grupo input, .form-grupo select { width: 100%; padding: 10px 12px; border: 0.5px solid var(--color-borde-fuerte); border-radius: var(--radio-sm); background: var(--color-superficie); color: var(--color-texto); font-size: 14px; }
.form-grupo input:focus, .form-grupo select:focus { outline: none; border-color: var(--color-primario); }
.chip-grupo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { padding: 6px 14px; border-radius: 20px; font-size: 13px; border: 0.5px solid var(--color-borde-fuerte); cursor: pointer; color: var(--color-texto); background: none; transition: background 0.15s; }
.chip.seleccionado { background: var(--color-primario); color: #fff; border-color: var(--color-primario); }

/* Alertas */
.alerta { padding: 10px 12px; border-radius: var(--radio-sm); font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.alerta i { font-size: 16px; flex-shrink: 0; }
.alerta-info { background: #E6F1FB; color: #185FA5; }
.alerta-warn { background: #FAEEDA; color: #854F0B; }
.alerta-success { background: #EAF3DE; color: #3B6D11; }

/* Podio */
.podio { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 16px 0 8px; }
.podio-lugar { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.podio-nombre { font-size: 12px; font-weight: 600; color: var(--color-texto); text-align: center; }
.podio-pts { font-size: 11px; color: var(--color-texto-muted); }
.podio-base { width: 100%; padding: 8px 4px; text-align: center; font-size: 13px; font-weight: 700; border-radius: var(--radio-sm) var(--radio-sm) 0 0; }
.podio-base-1 { background: #BA7517; color: #fff; min-height: 60px; display: flex; align-items: center; justify-content: center; }
.podio-base-2 { background: #888780; color: #fff; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.podio-base-3 { background: #854F0B; color: #fff; min-height: 32px; display: flex; align-items: center; justify-content: center; }
.podio-lugar.oro .podio-nombre { font-size: 14px; }

/* Vacio */
.vacio { text-align: center; padding: 28px 16px; color: var(--color-texto-muted); font-size: 14px; }
.icono-muted { color: var(--color-texto-muted); font-size: 16px; }

/* Login */
#p-login { background: var(--color-fondo); }

/* ============================================================
   MODO EVENTO (v26) — pantalla en vivo para proyectar
   ============================================================ */
.vivo-espera {
  text-align: center;
  padding: 40px 16px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.vivo-logo { width: min(60vw, 320px); max-width: 100%; }
.vivo-evento-nombre {
  font-size: clamp(18px, 3.5vw, 30px); font-weight: 800;
  color: var(--color-texto-muted); letter-spacing: 1px; text-transform: uppercase;
}
.vivo-mensaje {
  font-size: clamp(26px, 6vw, 54px); font-weight: 800; line-height: 1.2;
}
.vivo-frase {
  font-size: clamp(14px, 2.5vw, 20px); color: var(--color-texto-muted);
  font-style: italic; transition: opacity .4s; min-height: 1.5em;
}

/* Revelado de mesas */
.vivo-revelado { text-align: center; padding: 22px 10px; }
.vivo-ronda-label {
  font-size: clamp(13px, 2vw, 18px); font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--color-primario); margin-bottom: 8px;
}
.vivo-mesa-titulo { font-size: clamp(34px, 8vw, 70px); font-weight: 800; margin-bottom: 18px; }
.vivo-jugadores {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 4vw, 40px);
}
.vivo-jug { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vivo-jug-nombre { font-size: clamp(16px, 3vw, 26px); font-weight: 700; }
.vivo-progreso { margin-top: 22px; color: var(--color-texto-muted); font-size: 15px; font-weight: 700; }

/* Grilla de todas las mesas */
.vivo-grilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px;
}
.vivo-grilla-mesa {
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 12px; padding: 12px 14px;
}
.vivo-grilla-mesa.vivo-mesa-ok { opacity: .55; border-color: #3B6D11; }
.vivo-grilla-titulo { font-weight: 800; margin-bottom: 8px; font-size: 15px; }
.vivo-grilla-fila { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }

/* Reloj gigante */
.vivo-reloj-wrap { text-align: center; padding: 30px 10px 20px; }
.vivo-reloj {
  font-size: clamp(64px, 18vw, 170px); font-weight: 800; letter-spacing: 4px;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.vivo-pausado {
  font-size: clamp(16px, 3vw, 26px); font-weight: 800; letter-spacing: 2px;
  color: #E8A53A; margin-top: 6px;
}
.vivo-fin {
  font-size: clamp(22px, 5vw, 44px); font-weight: 800; letter-spacing: 2px;
  color: var(--color-primario); margin-top: 6px;
  animation: vivo-parpadeo 1s infinite;
}
.vivo-tiempo-cero .vivo-reloj { color: var(--color-primario); }
@keyframes vivo-parpadeo { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.vivo-mesas-estado { margin-top: 14px; color: var(--color-texto-muted); font-size: clamp(13px, 2vw, 18px); }

/* Banner TU MESA (para el jugador que mira desde su celu) */
.vivo-mimesa {
  background: var(--color-superficie); border: 1px solid var(--color-primario);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  font-size: 14.5px; text-align: center;
}

/* Controles del admin dentro del modo evento */
.vivo-controles .btn { margin-top: 8px; }
.badge-warn { background: #FAEEDA; color: #B45309; }

/* ============================================================
   ETAPA 2 — Gran Final, Campeón y Crónica
   ============================================================ */

/* Presentación de finalistas (estilo deportivo) */
.vivo-final-pres { text-align: center; padding: 24px 10px; }
.vivo-final-titulo {
  font-size: clamp(34px, 8vw, 72px); font-weight: 800; letter-spacing: 1px;
  margin: 6px 0 4px;
}
.vivo-final-sub { color: var(--color-texto-muted); margin-bottom: 14px; font-size: clamp(13px, 2vw, 17px); }
.vivo-finalistas {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 4vw, 44px); margin-top: 18px;
}
.vivo-finalista {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 16px; padding: 18px 22px; position: relative;
  min-width: 150px;
}
.vivo-seed {
  position: absolute; top: -10px; left: -10px;
  background: var(--color-primario); color: #fff; font-weight: 800;
  border-radius: 99px; padding: 4px 10px; font-size: 14px;
}
.vivo-finalista-nombre { font-size: clamp(17px, 2.6vw, 24px); font-weight: 800; }
.vivo-finalista-record { color: var(--color-texto-muted); font-size: 14px; font-weight: 700; }

/* Pantalla de CAMPEÓN */
.vivo-campeon { text-align: center; padding: 24px 10px; }
.vivo-campeon-corona { font-size: clamp(40px, 8vw, 72px); animation: vivo-flota 2.4s ease-in-out infinite; }
@keyframes vivo-flota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.vivo-campeon-label {
  font-size: clamp(13px, 2vw, 18px); font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: #E8A53A; margin: 6px 0 14px;
}
.vivo-campeon-avatar { display: flex; justify-content: center; }
.vivo-campeon-nombre { font-size: clamp(32px, 7vw, 64px); font-weight: 800; margin: 12px 0 16px; }
.vivo-campeon-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 16px;
}
.vivo-stat {
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 12px; padding: 10px 16px; min-width: 86px;
}
.vivo-stat b { display: block; font-size: clamp(18px, 3vw, 26px); }
.vivo-stat span { font-size: 11.5px; color: var(--color-texto-muted); text-transform: uppercase; letter-spacing: .5px; }
.vivo-campeon-dato {
  font-size: clamp(15px, 2.5vw, 21px); font-style: italic;
  color: var(--color-texto-muted); max-width: 560px; margin: 0 auto;
}

/* Podio en pantalla grande */
.vivo-podio-pantalla { max-width: 560px; margin: 20px auto; padding: 0 8px; }
.vivo-podio-pantalla .vivo-ronda-label { text-align: center; margin-bottom: 16px; }
.vivo-podio-fila {
  display: flex; align-items: center; gap: 14px;
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 14px; padding: 12px 16px; margin-bottom: 10px;
}
.vivo-podio-fila.vivo-podio-oro { border-color: #E8A53A; background: linear-gradient(90deg, rgba(232,165,58,.12), transparent); }
.vivo-podio-medalla { font-size: clamp(22px, 4vw, 34px); width: 44px; text-align: center; }
.vivo-podio-nombre { font-size: clamp(17px, 3vw, 26px); font-weight: 800; }

/* La Crónica */
.cron-slide { text-align: center; padding: 18px 8px 8px; min-height: 320px; }
.cron-portada { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 36px; }
.cron-tipo { font-size: 13px; font-weight: 800; letter-spacing: 3px; color: var(--color-primario); text-transform: uppercase; }
.cron-titulo { font-size: clamp(28px, 6vw, 50px); font-weight: 800; line-height: 1.15; }
.cron-sub { color: var(--color-texto-muted); font-size: 15px; }
.cron-cap-titulo { font-size: clamp(22px, 4.5vw, 36px); font-weight: 800; margin-bottom: 16px; }
.cron-participantes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 12px; max-width: 640px; margin: 0 auto;
}
.cron-part { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.cron-mesas { max-width: 620px; margin: 0 auto; text-align: left; }
.cron-mesa {
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 10px; padding: 9px 13px; margin-bottom: 7px; font-size: 14px;
}
.cron-top { margin-top: 16px; }
.cron-top-titulo { color: var(--color-texto-muted); font-size: 13px; margin-bottom: 6px; font-weight: 700; }
.cron-top-fila { font-size: 15px; padding: 2px 0; font-weight: 600; }
.cron-momentos { max-width: 560px; margin: 0 auto; }
.cron-momento {
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
  font-size: clamp(15px, 2.5vw, 19px);
}
.cron-nav {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px;
}
.cron-nav .btn { margin: 0; }
.cron-contador { font-weight: 800; color: var(--color-texto-muted); font-size: 14px; min-width: 56px; text-align: center; }
.cron-acciones { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.cron-acciones .btn { margin: 0; }

/* Lista de crónicas disponibles (Modo Evento sin evento activo) */
.vivo-cronicas-lista { max-width: 480px; margin: 18px auto 0; }
.cron-visor { cursor: pointer; }
.cron-barra {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  flex-wrap: wrap; justify-content: center;
}
.cron-barra .btn { margin: 0; }

/* Tabla final en el Modo Evento (rotación de cierre) */
.vivo-tabla-final { max-width: 560px; margin: 0 auto; }
.vivo-tabla-fila {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 10px; padding: 8px 14px; margin-bottom: 6px;
}
.vivo-tabla-fila.vivo-tabla-podio { border-color: #E8A53A; }
.vivo-tabla-pos { font-weight: 800; min-width: 38px; color: var(--color-texto-muted); }
.vivo-tabla-nombre { flex: 1; font-weight: 700; }
.vivo-tabla-pts { font-weight: 800; color: var(--color-primario); }

/* Archivo de eventos pasados (Modo Evento) */
.vivo-archivo { max-width: 560px; margin: 0 auto; padding: 8px; }
.vivo-archivo-card {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 12px; padding: 13px 16px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .15s;
}
.vivo-archivo-card:hover { border-color: var(--color-primario); }
.vivo-archivo-info { flex: 1; min-width: 0; }
.vivo-archivo-nombre { font-weight: 800; font-size: 15px; }
.vivo-archivo-meta { color: var(--color-texto-muted); font-size: 12.5px; margin-top: 2px; }

/* Indicador "en vivo" */
.vivo-sync {
  text-align: center; color: var(--color-texto-muted); font-size: 12px;
  margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.vivo-sync-punto {
  width: 8px; height: 8px; border-radius: 50%; background: #3B6D11;
  animation: vivo-late 1.6s ease-in-out infinite;
}
@keyframes vivo-late { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Encabezado de ronda en fecha de liga (2 rondas por fecha) */
.liga-ronda-label {
  background: var(--color-superficie); border: 1px solid var(--color-primario);
  border-radius: 10px; padding: 9px 14px; margin: 4px 0 10px;
  font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px;
}

/* Leyenda de desempates (standing torneo y liga) */
.standing-leyenda {
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 10px; padding: 11px 14px; margin-bottom: 12px;
  font-size: 12px; color: var(--color-texto-muted); line-height: 1.5;
}
.standing-leyenda b { color: var(--color-texto); }
.standing-leyenda span { display: block; margin-top: 4px; }
.standing-leyenda span.st-verde { display: inline; margin: 0; color: #2e9e5b; font-weight: 700; }

/* Tabla de standing con columnas de desempate */
.st-head, .st-fila {
  display: grid; grid-template-columns: 24px 1fr 32px 40px 44px 44px 30px;
  gap: 4px; align-items: center;
}
.st-head {
  padding: 4px 8px 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--color-texto-muted); font-weight: 700;
}
.st-head .st-col, .st-head .st-pts { text-align: center; }
.st-fila {
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 9px; padding: 6px 8px; margin-bottom: 4px;
}
.st-pos { font-weight: 800; font-size: 14px; text-align: center; color: var(--color-texto-muted); }
.st-pos.oro { color: #E0A21A; } .st-pos.plata { color: #9AA0AA; } .st-pos.bronce { color: #C0792E; }
.st-jug { display: flex; align-items: center; gap: 7px; min-width: 0; }
.st-nom { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pts { text-align: center; font-weight: 800; font-size: 14px; color: var(--color-primario); }
.st-col { text-align: center; font-size: 12px; color: var(--color-texto-muted); font-variant-numeric: tabular-nums; }
.st-col.dec { color: #2e9e5b; font-weight: 800; background: rgba(46,158,91,.15); border-radius: 5px; }

/* Modal de confirmación propio */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 24px;
}
.modal-box {
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: 16px; padding: 24px; max-width: 340px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.modal-mensaje { font-size: 16px; font-weight: 600; text-align: center; margin-bottom: 20px; }
.modal-botones { display: flex; gap: 10px; }
.modal-botones .btn { flex: 1; margin: 0; }

/* Botón "siguiente paso": guía el flujo, bien llamativo (celeste) */
.btn-siguiente {
  background: linear-gradient(135deg, #4AA3F0, #2E7BD6);
  color: #fff; font-weight: 800; font-size: 15.5px;
  border: none; box-shadow: 0 4px 14px rgba(55,138,221,.45);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  position: relative; animation: pulso-sig 2.4s ease-in-out infinite;
}
.btn-siguiente:hover { filter: brightness(1.06); }
.btn-siguiente i { font-size: 19px; }
@keyframes pulso-sig {
  0%, 100% { box-shadow: 0 4px 14px rgba(55,138,221,.45); }
  50%      { box-shadow: 0 4px 22px rgba(55,138,221,.75); }
}
/* Cartelito que acompaña al botón, explicando el paso */
.siguiente-paso-wrap { margin: 4px 0 16px; }
.siguiente-paso-hint {
  font-size: 12px; color: var(--color-texto-muted);
  text-align: center; margin-top: 6px;
}

/* ===== Pantalla "En espera" / Standby (Fase D) ===== */
.sb-wrap { text-align:center; padding:8px 0 4px; }
.sb-titulo { font-size:12px; font-weight:800; letter-spacing:3px; color:var(--color-primario); text-transform:uppercase; }
.sb-evento-nombre { font-size:22px; font-weight:800; margin:4px 0 2px; color:var(--color-texto); }
.sb-evento-cuando { color:var(--color-texto-muted); font-size:14px; }
.sb-sin-evento { font-size:19px; font-weight:800; margin:6px 0; color:var(--color-texto); }
.sb-evento-card { background:var(--color-superficie); border:1px solid var(--color-borde-fuerte); border-radius:12px; padding:12px 14px; margin:8px auto; max-width:340px; }
.sb-evento-card + .sb-evento-card { margin-top:8px; }
.sb-lugar { color:var(--color-texto-muted); font-size:13px; margin-top:3px; }
.sb-mapbtn { display:inline-flex; align-items:center; gap:6px; margin-top:8px; background:linear-gradient(135deg,#4AA3F0,#2E7BD6); color:#fff; border:none; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; }

/* Carta MTG por código */
.sb-carta-zona { display:flex; justify-content:center; margin:16px 0 10px; }
.sb-carta { width:min(600px,96vw); border-radius:10px; overflow:hidden; opacity:1; transition:opacity .5s ease; box-shadow:0 8px 32px rgba(0,0,0,.6); }
.sb-carta img { width:100%; height:auto; display:block; max-height:70vh; object-fit:contain; }
.sb-carta.fade { opacity:0; }
.sb-carta-titulo { display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg,#f3e7cf,#d8c39a); border-radius:7px; padding:5px 10px; margin-bottom:8px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
.sb-carta-titulo b { color:#2a1d0c; font-size:14px; font-weight:800; }
.sb-mana { display:flex; gap:3px; }
.sb-pip { width:15px; height:15px; border-radius:50%; box-shadow:inset 0 -2px 3px rgba(0,0,0,.4),0 0 0 1px #2a1d0c; }
.sb-pip.verde { background:radial-gradient(circle at 35% 30%,#9bdc7a,#3f8a3a); }
.sb-pip.rojo { background:radial-gradient(circle at 35% 30%,#ff7a5c,#c0341c); }
.sb-arte { border-radius:6px; overflow:hidden; box-shadow:inset 0 0 0 2px rgba(0,0,0,.4); border:1px solid #5a4424; line-height:0; }
.sb-arte img { display:block; width:100%; height:auto; }
.sb-carta-tipo { background:linear-gradient(180deg,#f3e7cf,#d8c39a); border-radius:5px; padding:3px 10px; margin:8px 0 7px;
  font-size:11px; font-weight:700; color:#2a1d0c; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); text-align:left; }
.sb-carta-texto { background:linear-gradient(180deg,#efe6d3,#e2d4b4); border-radius:6px; padding:10px 12px; min-height:92px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
.sb-frase { color:#2a1d0c; font-size:13px; font-style:italic; line-height:1.45; text-align:left; }
.sb-firma { color:#6a5836; font-size:11px; text-align:right; margin-top:8px; font-weight:700; }
.sb-pt { text-align:right; margin-top:7px; }
.sb-pt span { display:inline-block; background:linear-gradient(180deg,#f3e7cf,#cdb588); color:#2a1d0c; font-weight:800;
  font-size:13px; padding:3px 11px; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.3); }
.sb-dots { display:flex; gap:6px; justify-content:center; margin-top:10px; }
.sb-dot { width:7px; height:7px; border-radius:50%; background:var(--color-borde-fuerte); transition:background .3s; }
.sb-dot.activo { background:var(--color-primario); }

/* ===== Modo Evento en pantalla grande (PC / tele) ===== */
/* La app es mobile-first (columna de 480px). En pantallas anchas el Modo Evento
   se ensancha y agranda para verse bien en un monitor o televisor. */
@media (min-width: 820px) {
  body.en-modo-evento .app { max-width: 1120px; }
  body.en-modo-evento .nav { max-width: 1120px; }
  body.en-modo-evento #contenido-evento-vivo { max-width: 1000px; margin: 0 auto; }
  body.en-modo-evento .vivo-reloj { font-size: clamp(160px, 26vw, 400px); letter-spacing: 10px; }
  body.en-modo-evento .vivo-mensaje { font-size: clamp(30px, 4.5vw, 60px); }
  body.en-modo-evento .vivo-ronda-label { font-size: clamp(16px, 2.2vw, 30px); }
  body.en-modo-evento .vivo-fin { font-size: clamp(44px, 7vw, 96px); }
  body.en-modo-evento .vivo-pausado { font-size: clamp(24px, 3.2vw, 44px); }
  body.en-modo-evento .vivo-logo { width: min(40vw, 420px); }
  /* Más mesas por fila en pantalla grande */
  body.en-modo-evento .vivo-grilla { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 1000px; margin: 0 auto; }
  body.en-modo-evento .vivo-grilla-titulo { font-size: 18px; }
  body.en-modo-evento .vivo-grilla-fila { font-size: 17px; }
  /* Carta de la pantalla En espera un poco más grande */
  body.en-modo-evento .sb-carta { width:min(860px,88vw); }
/* modo evento: la imagen ya tiene max-height:70vh en la regla base */
  body.en-modo-evento .sb-evento-nombre { font-size: 28px; }
}

/* ===== Podio del Modo Evento: pedestal de barras verticales ===== */
.vp-pedestal { display: flex; align-items: flex-end; justify-content: center; gap: 12px; max-width: 540px; margin: 22px auto 0; padding: 0 6px; }
.vp-col { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; }
.vp-medalla { font-size: clamp(26px, 5vw, 44px); line-height: 1; }
.vp-nombre { font-weight: 800; font-size: clamp(14px, 2.6vw, 24px); text-align: center; line-height: 1.15; }
.vp-barra { width: 100%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; border-radius: 12px 12px 0 0; font-size: clamp(15px, 2.6vw, 26px); box-shadow: inset 0 2px 6px rgba(255,255,255,.2); }
.vp-barra-1 { background: linear-gradient(180deg, #F5C24B, #BA7517); min-height: 132px; box-shadow: 0 0 32px rgba(232,165,58,.45), inset 0 2px 6px rgba(255,255,255,.3); }
.vp-barra-2 { background: linear-gradient(180deg, #C2C0B7, #888780); min-height: 94px; }
.vp-barra-3 { background: linear-gradient(180deg, #B07A35, #854F0B); min-height: 66px; }
/* En pantalla grande (PC/tele) el pedestal crece */
@media (min-width: 820px) {
  body.en-modo-evento .vp-pedestal { max-width: 760px; }
  body.en-modo-evento .vp-barra-1 { min-height: 220px; }
  body.en-modo-evento .vp-barra-2 { min-height: 155px; }
  body.en-modo-evento .vp-barra-3 { min-height: 110px; }
  /* Tabla de standing (desempates) más grande y legible en la tele */
  body.en-modo-evento .vivo-tabla-standing { max-width: 820px; margin: 0 auto; }
  body.en-modo-evento .vivo-tabla-standing .st-head,
  body.en-modo-evento .vivo-tabla-standing .st-fila {
    grid-template-columns: 40px 1fr 56px 70px 76px 76px 50px; gap: 8px;
  }
  body.en-modo-evento .vivo-tabla-standing .st-head { font-size: 15px; padding: 6px 12px 8px; }
  body.en-modo-evento .vivo-tabla-standing .st-fila { padding: 11px 12px; margin-bottom: 7px; border-radius: 12px; }
  body.en-modo-evento .vivo-tabla-standing .st-pos { font-size: 22px; }
  body.en-modo-evento .vivo-tabla-standing .st-nom { font-size: 21px; }
  body.en-modo-evento .vivo-tabla-standing .st-pts { font-size: 22px; }
  body.en-modo-evento .vivo-tabla-standing .st-col { font-size: 18px; }
  body.en-modo-evento .vivo-tabla-standing .st-jug img,
  body.en-modo-evento .vivo-tabla-standing .st-jug .avatar {
    width: 44px !important; height: 44px !important; font-size: 17px !important;
  }
}

/* La tabla de standing dentro del Modo Evento: un poco más de aire también en celular */
.vivo-tabla-standing { margin-top: 6px; }

/* Modo espectador sin cuenta: ocultar pestañas que no aplican (perfil/inscripciones) */
body.espectador-sin-cuenta #nav-jugador .nav-solo-jugador { display:none !important; }

/* === Carga embebida de resultados en Modo Evento (liga, Opción A) === */
.vc-panel{margin-top:14px;}
.vc-panel-h{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.vc-mesa{background:var(--carta);border:1px solid var(--borde);border-radius:12px;padding:12px 14px;margin-bottom:10px;}
.vc-mesa.cerrada{border-color:rgba(95,174,110,.5);background:#13201A;}
.vc-mesa-h{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.vc-jug{color:var(--muted);font-size:12.8px;margin-top:3px;margin-bottom:8px;}
.vc-badge{font-size:10.5px;font-weight:800;letter-spacing:.5px;padding:3px 9px;border-radius:6px;}
.vc-badge.pend{background:#2A2118;color:var(--ambar);}
.vc-badge.ok{background:#15281C;color:var(--verde);}
.vc-res{background:#101016;border:1px solid rgba(95,174,110,.3);border-radius:9px;padding:8px 11px;font-size:13px;margin-bottom:8px;}
.vc-form{margin-top:6px;}
.vc-lbl{font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin:10px 0 6px;}
.vc-opt{display:flex;align-items:center;gap:10px;background:#101016;border:1px solid var(--borde);border-radius:9px;padding:9px 12px;margin-bottom:6px;cursor:pointer;font-size:14px;}
.vc-opt.sel{border-color:var(--rojo);background:rgba(232,71,43,.20);}
.vc-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--muted);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.vc-opt.sel .vc-dot{border-color:var(--rojo);}
.vc-opt.sel .vc-dot::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--rojo);}
.vc-sq{width:18px;height:18px;border-radius:5px;border:2px solid var(--muted);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#0E0E12;font-weight:900;}
.vc-opt.sel .vc-sq{border-color:var(--verde);background:var(--verde);}
.vc-chips{display:flex;flex-wrap:wrap;gap:6px;}
.vc-chip{font-size:12.5px;padding:6px 11px;border-radius:99px;border:1px solid var(--borde);background:#101016;cursor:pointer;}
.vc-chip.on{border-color:var(--ambar);background:rgba(232,165,58,.24);color:var(--ambar);font-weight:700;}
.vc-chip.on-aus{border-color:var(--muted);background:#1a1a20;color:var(--muted);text-decoration:line-through;}
.vc-chip.dis{opacity:.35;cursor:not-allowed;pointer-events:none;text-decoration:line-through;}
.vc-acc{display:flex;gap:8px;margin-top:12px;}
.btn-mini{width:auto;padding:8px 14px;font-size:13px;}
.vc-acc .btn-mini{flex:1;}

/* === Pantalla "Resultados de la ronda" (liga en vivo) === */
.vivo-resultados{margin-top:10px;}
.vr-titulo{text-align:center;font-size:20px;font-weight:800;color:var(--ambar);margin-bottom:14px;}
.vr-mesa{background:var(--carta);border:1px solid var(--borde);border-radius:12px;padding:12px 14px;margin-bottom:8px;}
.vr-n{font-size:14px;font-weight:800;}
.vr-j{color:var(--muted);font-size:12.5px;margin:2px 0 4px;}
.vr-res{font-size:14px;color:var(--texto);font-weight:600;}
.vr-resumen{margin-top:16px;background:linear-gradient(180deg,#1E1A10,#17150E);border:1px solid rgba(232,165,58,.4);border-radius:14px;padding:14px 16px;}
.vr-resumen-t{text-align:center;font-weight:800;color:var(--ambar);margin-bottom:10px;font-size:15px;}
.vr-fila{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid #22222C;}
.vr-fila:last-child{border-bottom:none;}
.vr-pos{width:24px;text-align:center;font-weight:800;color:var(--muted);}
.vr-nom{flex:1;}
.vr-pts{font-weight:800;color:var(--ambar);}

/* === Jugador con su mesa ya cerrada (reloj detenido) === */
.vivo-mimesa-cerrada{text-align:center;background:linear-gradient(180deg,#13201A,#101713);border:1px solid rgba(95,174,110,.5);border-radius:16px;padding:26px 18px;margin-top:10px;}
.vmc-check{width:58px;height:58px;border-radius:50%;background:var(--verde);color:#0E0E12;font-size:34px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.vmc-titulo{font-size:22px;font-weight:800;color:var(--texto);}
.vmc-reloj{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:800;letter-spacing:.5px;color:var(--muted);background:#101016;border:1px solid var(--borde);border-radius:99px;padding:5px 14px;}
.vmc-res{font-size:17px;color:var(--verde);font-weight:700;margin-top:14px;}
.vmc-res b{color:var(--texto);}
.vmc-nota{color:var(--muted);font-size:13px;margin-top:12px;max-width:340px;margin-left:auto;margin-right:auto;}