/* ═══════════════════════════════════════════════════════════════════
   CORRIDA ANIVERSARIO 232 — LINARES
   Sistema de Cronometraje y Resultados
   Fariña Producciones
   ═══════════════════════════════════════════════════════════════════ */

/* ── Variables de diseño ────────────────────────────────────────── */
:root {
  --azul:       #1F3864;
  --azul-claro: #2a4a8a;
  --azul-medio: #1a2e55;
  --azul-oscuro:#0d1f3c;
  --rojo:       #CC0000;
  --rojo-hover: #aa0000;
  --blanco:     #FFFFFF;
  --gris-claro: #f4f6f9;
  --gris-med:   #e0e4eb;
  --gris-texto: #666;
  --verde:      #1a8a1a;
  --verde-claro:#e8f8e8;
  --naranja:    #e87c00;
  --naranja-claro: #fff3e0;
  --oro:        #FFD700;
  --plata:      #C0C0C0;
  --bronce:     #CD7F32;

  --radio:      10px;
  --radio-lg:   16px;
  --sombra:     0 2px 12px rgba(0,0,0,0.12);
  --sombra-lg:  0 4px 24px rgba(0,0,0,0.18);
  --transition: 0.2s ease;

  /* Tipografía del sistema — sin dependencias externas */
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── Reset y base ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--fuente);
  background: var(--gris-claro);
  color: #222;
  min-height: 100vh;
  line-height: 1.5;
}

/* ── Encabezado del sitio ──────────────────────────────────────── */
.site-header {
  background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul) 60%, var(--azul-claro) 100%);
  color: var(--blanco);
  padding: 20px 16px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='20' cy='20' r='1' fill='rgba(255,255,255,0.05)'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.6;
}

.site-header > * { position: relative; }

.header-logo {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.header-logo .acento { color: var(--rojo); }

.header-subtitulo {
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  opacity: 0.85;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.header-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  opacity: 0.8;
}

.header-meta span { display: flex; align-items: center; gap: 4px; }

/* ── Badge de estado ─────────────────────────────────────────────── */
.badge-estado {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.badge-estado.en-curso {
  background: var(--verde);
  color: white;
}

.badge-estado.finalizada {
  background: var(--gris-texto);
  color: white;
}

.badge-estado.proximamente {
  background: var(--naranja);
  color: white;
}

.parpadeante {
  animation: parpadear 1.5s ease-in-out infinite;
}

@keyframes parpadear {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Estado de conexión ──────────────────────────────────────────── */
.indicador-conexion {
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;
}

.indicador-conexion.en-linea {
  background: var(--verde-claro);
  color: var(--verde);
}

.indicador-conexion.sin-linea {
  background: #fef3cd;
  color: #856404;
}

/* ── Login overlay ───────────────────────────────────────────────── */
#login-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.login-box {
  background: var(--blanco);
  border-radius: var(--radio-lg);
  padding: 40px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--sombra-lg);
  text-align: center;
}

.login-box h1 {
  color: var(--azul);
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.login-box p {
  color: var(--gris-texto);
  font-size: 0.9rem;
  margin-bottom: 24px;
}

.login-box input {
  width: 100%;
  padding: 16px;
  font-size: 1.1rem;
  border: 2px solid var(--gris-med);
  border-radius: var(--radio);
  margin-bottom: 16px;
  text-align: center;
  letter-spacing: 4px;
  transition: border-color var(--transition);
}

.login-box input:focus {
  outline: none;
  border-color: var(--azul);
}

.login-error {
  color: var(--rojo);
  font-size: 0.85rem;
  min-height: 20px;
  margin-bottom: 8px;
}

/* ── Botones ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 60px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--radio);
  font-family: var(--fuente);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  letter-spacing: 0.5px;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-primario {
  background: var(--azul);
  color: var(--blanco);
  width: 100%;
}

.btn-primario:hover:not(:disabled) {
  background: var(--azul-claro);
}

.btn-verde {
  background: var(--verde);
  color: var(--blanco);
  width: 100%;
  font-size: 1.2rem;
}

.btn-verde:hover:not(:disabled) {
  background: #157015;
  box-shadow: 0 4px 16px rgba(26,138,26,0.3);
}

.btn-rojo {
  background: var(--rojo);
  color: var(--blanco);
  width: 100%;
}

.btn-rojo:hover:not(:disabled) {
  background: var(--rojo-hover);
}

.btn-naranja {
  background: var(--naranja);
  color: var(--blanco);
}

.btn-naranja:hover:not(:disabled) {
  background: #c56a00;
}

.btn-gris {
  background: var(--gris-med);
  color: #333;
}

.btn-gris:hover:not(:disabled) {
  background: #d0d4dc;
}

.btn-sm {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 0.85rem;
}

.btn-icon {
  min-height: 44px;
  min-width: 44px;
  padding: 8px;
  border-radius: 8px;
}

/* ── Layout principal ────────────────────────────────────────────── */
.main-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 16px;
}

.seccion {
  background: var(--blanco);
  border-radius: var(--radio-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}

.seccion-titulo {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--azul);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gris-med);
}

/* ── Cronómetro ──────────────────────────────────────────────────── */
.cron-display {
  font-size: clamp(2.4rem, 8vw, 4rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  color: var(--azul);
  text-align: center;
  padding: 16px 0;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(31,56,100,0.15);
}

.cron-display.en-curso {
  color: var(--verde);
}

.cron-display.finalizado {
  color: var(--gris-texto);
}

.estado-badge {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px 0;
  margin-bottom: 8px;
}

.estado-badge.antes    { color: var(--gris-texto); }
.estado-badge.en-curso { color: var(--verde); }
.estado-badge.finalizada { color: var(--gris-texto); }

.hora-disparo {
  text-align: center;
  font-size: 0.85rem;
  color: var(--gris-texto);
  margin-top: 4px;
}

/* ── Campo de dorsal ─────────────────────────────────────────────── */
.campo-dorsal-grupo {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.campo-dorsal {
  flex: 1;
  min-height: 70px;
  padding: 12px 16px;
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 3px solid var(--gris-med);
  border-radius: var(--radio);
  text-align: center;
  color: var(--azul);
  transition: border-color var(--transition);
  -moz-appearance: textfield;
}

.campo-dorsal::-webkit-outer-spin-button,
.campo-dorsal::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.campo-dorsal:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(31,56,100,0.15);
}

.campo-dorsal:disabled {
  background: var(--gris-claro);
  color: var(--gris-texto);
  border-color: var(--gris-med);
}

/* ── Feedback corredor ───────────────────────────────────────────── */
.feedback-corredor {
  min-height: 28px;
  font-size: 1rem;
  font-weight: 600;
  padding: 6px 0;
  transition: all var(--transition);
}

.feedback-corredor.encontrado { color: var(--verde); }
.feedback-corredor.no-encontrado { color: var(--rojo); }
.feedback-corredor.ok { color: var(--verde); }
.feedback-corredor.advertencia { color: var(--naranja); }
.feedback-corredor.info { color: var(--azul); }

/* ── Alertas ──────────────────────────────────────────────────────── */
.alerta {
  padding: 12px 16px;
  border-radius: var(--radio);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 8px 0;
  display: none;
  animation: slideDown 0.2s ease;
}

.alerta.error {
  background: #fdecea;
  color: var(--rojo);
  border-left: 4px solid var(--rojo);
}

.alerta.advertencia {
  background: var(--naranja-claro);
  color: var(--naranja);
  border-left: 4px solid var(--naranja);
}

.alerta.ok {
  background: var(--verde-claro);
  color: var(--verde);
  border-left: 4px solid var(--verde);
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Lista de llegadas (admin) ───────────────────────────────────── */
.lista-llegadas {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.llegada-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--gris-claro);
  border-radius: 8px;
  font-size: 0.85rem;
  border-left: 3px solid var(--verde);
  animation: slideIn 0.2s ease;
}

.llegada-row.sin-validar {
  border-left-color: var(--naranja);
  background: var(--naranja-claro);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.llegada-orden  { color: var(--gris-texto); min-width: 28px; font-size: 0.75rem; }
.llegada-dorsal { font-weight: 700; color: var(--azul); min-width: 44px; }
.llegada-nombre { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llegada-tiempo { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.9rem; color: var(--azul); }
.llegada-control { font-size: 1rem; }

.btn-eliminar {
  background: none;
  border: none;
  color: var(--gris-texto);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all var(--transition);
  min-height: 32px;
  min-width: 32px;
}

.btn-eliminar:hover {
  background: #fdecea;
  color: var(--rojo);
}

/* ── Zona de pendientes ──────────────────────────────────────────── */
.zona-pendientes {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--naranja-claro);
  border: 1px solid var(--naranja);
  border-radius: var(--radio);
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--naranja);
  font-weight: 600;
}

.contador-pendientes {
  background: var(--naranja);
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ── Botones de acción admin (fila) ──────────────────────────────── */
.fila-botones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fila-botones .btn {
  flex: 1;
  min-width: 140px;
}

/* ── Sin datos ───────────────────────────────────────────────────── */
.sin-datos {
  text-align: center;
  color: var(--gris-texto);
  font-size: 0.9rem;
  padding: 20px 0;
}

/* ═══════════════════════════════════════════════════════════════════
   PÁGINA PÚBLICA — index.html
   ═══════════════════════════════════════════════════════════════════ */

/* ── Buscador ────────────────────────────────────────────────────── */
.buscador-zona {
  position: relative;
  margin-bottom: 16px;
}

.buscador {
  width: 100%;
  padding: 16px 48px 16px 18px;
  font-size: 1.1rem;
  border: 2px solid var(--gris-med);
  border-radius: var(--radio-lg);
  background: var(--blanco);
  color: #222;
  transition: all var(--transition);
  box-shadow: var(--sombra);
}

.buscador:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(31,56,100,0.12), var(--sombra);
}

.buscador-icono {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gris-texto);
  font-size: 1.2rem;
  pointer-events: none;
}

.btn-limpiar-busqueda {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gris-texto);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  display: none;
}

/* ── Pestañas de filtro ──────────────────────────────────────────── */
.pestanas-zona {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pestanas-zona::-webkit-scrollbar { display: none; }

.pestana {
  padding: 8px 16px;
  border: 2px solid var(--gris-med);
  border-radius: 24px;
  background: var(--blanco);
  color: #444;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  font-family: var(--fuente);
  min-height: 40px;
}

.pestana:hover {
  border-color: var(--azul);
  color: var(--azul);
}

.pestana.activa {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--blanco);
}

/* ── Podio público ───────────────────────────────────────────────── */
#zona-podio {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.podio-card {
  flex: 1;
  min-width: 120px;
  max-width: 200px;
  border-radius: var(--radio-lg);
  padding: 16px 12px;
  text-align: center;
  border: 2px solid transparent;
  transition: transform var(--transition);
}

.podio-card:hover { transform: translateY(-2px); }

.podio-card.oro {
  background: linear-gradient(135deg, #fffbf0, #fff3c4);
  border-color: var(--oro);
}

.podio-card.plata {
  background: linear-gradient(135deg, #f8f8f8, #ececec);
  border-color: var(--plata);
}

.podio-card.bronce {
  background: linear-gradient(135deg, #fdf6f0, #f5e6d8);
  border-color: var(--bronce);
}

.podio-lugar {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.podio-nombre {
  font-weight: 700;
  font-size: 0.85rem;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.3;
}

.podio-dorsal {
  font-size: 0.75rem;
  color: var(--gris-texto);
  margin-bottom: 4px;
}

.podio-categoria {
  font-size: 0.7rem;
  color: var(--gris-texto);
  margin-bottom: 6px;
}

.podio-tiempo {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--azul);
}

/* ── Tabla de resultados (desktop) ───────────────────────────────── */
.tabla-zona {
  overflow-x: auto;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tabla-resultados {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabla-resultados thead {
  background: var(--azul);
  color: var(--blanco);
}

.tabla-resultados th {
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.tabla-resultados tbody tr {
  border-bottom: 1px solid var(--gris-med);
  transition: background var(--transition);
}

.tabla-resultados tbody tr:hover {
  background: var(--gris-claro);
}

.tabla-resultados td {
  padding: 10px 10px;
  vertical-align: middle;
}

.tabla-resultados tr.pos-1 { background: linear-gradient(90deg, #fffbf0, transparent); }
.tabla-resultados tr.pos-2 { background: linear-gradient(90deg, #f8f8f8, transparent); }
.tabla-resultados tr.pos-3 { background: linear-gradient(90deg, #fdf6f0, transparent); }

.td-pos  { font-weight: 700; color: var(--azul); width: 40px; text-align: center; }
.td-dorsal { font-weight: 600; width: 60px; }
.td-nombre { font-weight: 600; }
.td-cat    { color: var(--gris-texto); font-size: 0.8rem; }
.td-tiempo { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--azul); white-space: nowrap; }
.td-pos-cat { color: var(--gris-texto); text-align: center; }

.sin-resultados {
  text-align: center;
  color: var(--gris-texto);
  padding: 32px 16px;
  font-size: 0.95rem;
}

/* ── Tarjetas móvil ──────────────────────────────────────────────── */
.tarjetas-zona {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.tarjeta-corredor {
  background: var(--blanco);
  border-radius: var(--radio-lg);
  padding: 14px 16px;
  box-shadow: var(--sombra);
  border-left: 4px solid var(--gris-med);
  transition: transform var(--transition);
}

.tarjeta-corredor:active { transform: scale(0.99); }
.tarjeta-corredor.pos-1 { border-left-color: var(--oro); }
.tarjeta-corredor.pos-2 { border-left-color: var(--plata); }
.tarjeta-corredor.pos-3 { border-left-color: var(--bronce); }

.tarjeta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.tarjeta-pos {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--azul);
}

.tarjeta-tiempo {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--azul);
}

.tarjeta-nombre {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #222;
}

.tarjeta-info {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.chip-dorsal, .chip-cat, .chip-pos-cat {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.chip-dorsal  { background: var(--azul); color: white; }
.chip-cat     { background: var(--gris-med); color: #444; }
.chip-pos-cat { background: var(--gris-claro); color: var(--gris-texto); }

/* ── Nota provisorio ─────────────────────────────────────────────── */
.nota-provisorio {
  background: linear-gradient(90deg, var(--naranja-claro), #fff8f0);
  border: 1px solid var(--naranja);
  border-radius: var(--radio);
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--naranja);
  display: none;
  margin-bottom: 12px;
}

/* ── Última actualización ────────────────────────────────────────── */
.actualizacion-info {
  text-align: center;
  font-size: 0.75rem;
  color: var(--gris-texto);
  padding: 8px 0;
}

/* ── Conteo de resultados ────────────────────────────────────────── */
.conteo-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--gris-texto);
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   CONTROL DE RUTA — control-ruta.html
   ═══════════════════════════════════════════════════════════════════ */

.control-header {
  background: linear-gradient(135deg, #1a4a1a, #2d7a2d);
  color: white;
  padding: 16px;
  text-align: center;
}

.control-header h1 {
  font-size: 1.4rem;
  font-weight: 900;
}

.control-header p {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 4px;
}

.feedback-nombre {
  min-height: 36px;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  transition: all var(--transition);
}

.feedback-nombre.ok {
  background: var(--verde-claro);
  color: var(--verde);
}

.feedback-nombre.advertencia {
  background: var(--naranja-claro);
  color: var(--naranja);
}

.lista-registros {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
}

.registro-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  animation: slideIn 0.15s ease;
}

.registro-row.sincronizado { background: var(--verde-claro); }
.registro-row.pendiente { background: var(--naranja-claro); }

.reg-hora   { color: var(--gris-texto); font-size: 0.8rem; min-width: 60px; font-variant-numeric: tabular-nums; }
.reg-dorsal { font-weight: 700; color: var(--azul); min-width: 52px; }
.reg-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.reg-sync   { font-size: 1rem; }

.contador-grande {
  font-size: 3rem;
  font-weight: 900;
  color: var(--verde);
  text-align: center;
  line-height: 1;
}

.contador-label {
  text-align: center;
  color: var(--gris-texto);
  font-size: 0.85rem;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIACIÓN — premiacion.html
   ═══════════════════════════════════════════════════════════════════ */

body.prem-body {
  background: #0a0a1a;
  color: var(--blanco);
  overflow: hidden;
  height: 100vh;
}

.prem-header {
  background: linear-gradient(180deg, rgba(31,56,100,0.8), transparent);
  padding: 24px 32px 16px;
  text-align: center;
}

.prem-titulo-evento {
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.7;
}

.prem-titulo-cat {
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--blanco);
  text-shadow: 0 0 40px rgba(255,255,255,0.2);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.prem-indicador {
  font-size: 1rem;
  opacity: 0.5;
  margin-top: 8px;
  letter-spacing: 1px;
}

#zona-podio {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 20px;
  padding: 20px 32px;
  flex: 1;
}

.podio-item {
  flex: 1;
  max-width: 300px;
  text-align: center;
  padding: 24px 20px;
  border-radius: var(--radio-lg);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(255,255,255,0.1);
}

.podio-item.oro {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,215,0,0.05));
  border-color: rgba(255,215,0,0.4);
  padding: 40px 24px;
  box-shadow: 0 0 60px rgba(255,215,0,0.15);
}

.podio-item.plata {
  background: linear-gradient(135deg, rgba(192,192,192,0.15), rgba(192,192,192,0.05));
  border-color: rgba(192,192,192,0.3);
}

.podio-item.bronce {
  background: linear-gradient(135deg, rgba(205,127,50,0.15), rgba(205,127,50,0.05));
  border-color: rgba(205,127,50,0.3);
}

.podio-item.vacio {
  opacity: 0.3;
}

.podio-emoji { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: 8px; }

.podio-lugar-num {
  font-size: clamp(0.8rem, 2vw, 1rem);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 12px;
}

.podio-nombre-grande {
  font-size: clamp(1rem, 3vw, 1.8rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 10px;
  text-shadow: 0 0 20px rgba(255,255,255,0.3);
}

.podio-dorsal-chip {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.podio-tiempo-grande {
  font-size: clamp(1.2rem, 3.5vw, 2.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--oro);
  letter-spacing: 1px;
}

.podio-sin-datos {
  font-size: 1rem;
  opacity: 0.4;
}

.prem-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 16px 32px 24px;
}

.prem-nav .btn {
  min-width: 160px;
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 1.1rem;
}

.prem-nav .btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.2);
}

.bullets-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  padding: 0;
  min-height: auto;
}

.bullet.activo {
  background: var(--blanco);
  transform: scale(1.4);
}

/* ── Cargando ────────────────────────────────────────────────────── */
#zona-cargando {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
  color: white;
  gap: 16px;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: white;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  background: var(--azul-oscuro);
  color: rgba(255,255,255,0.5);
  text-align: center;
  padding: 16px;
  font-size: 0.75rem;
  margin-top: 32px;
}

/* ═══════════════════════════════════════════════════════════════════
   QR PAGE
   ═══════════════════════════════════════════════════════════════════ */

.qr-container {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  text-align: center;
}

.qr-box {
  background: white;
  border-radius: var(--radio-lg);
  padding: 32px;
  box-shadow: var(--sombra-lg);
  margin-bottom: 20px;
}

.qr-instruccion {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--azul);
  margin-top: 16px;
  margin-bottom: 8px;
}

.qr-url {
  font-size: 0.85rem;
  color: var(--gris-texto);
  word-break: break-all;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Móvil primero
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .tabla-zona { display: none; }
  .tarjetas-zona { display: flex; }

  .campo-dorsal-grupo {
    flex-direction: column;
  }

  .campo-dorsal-grupo .btn {
    min-height: 70px;
    font-size: 1.2rem;
  }

  .seccion { padding: 16px; }

  .llegada-row {
    font-size: 0.8rem;
  }

  #zona-podio {
    flex-direction: column;
    align-items: center;
  }

  .podio-card {
    max-width: 100%;
    width: 100%;
  }
}

@media (min-width: 641px) {
  .tabla-zona { display: block; }
  .tarjetas-zona { display: none; }

  .campo-dorsal-grupo .btn {
    min-width: 180px;
    flex: 0 0 auto;
  }
}

@media print {
  body { background: white; }
  .site-header { background: var(--azul) !important; print-color-adjust: exact; }
  .btn { display: none; }
  .pestanas-zona { display: none; }
  .actualizacion-info { display: none; }
}

/* ── Reloj Oficial en Tiempo Real ── */
.carrera-timer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
  border-radius: var(--radio-lg);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--sombra-lg), inset 0 1px 0 rgba(255,255,255,0.1);
  text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
}

.carrera-timer-card .timer-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.carrera-timer-card .timer-display {
  font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 900;
  color: #7fff7f;
  line-height: 1;
  text-shadow: 0 0 20px rgba(127,255,127,0.4);
  letter-spacing: 2px;
}

.carrera-timer-card.finalizada .timer-display {
  color: #ffffff;
  text-shadow: 0 0 15px rgba(255,255,255,0.3);
}

.carrera-timer-card.countdown .timer-display {
  color: var(--oro);
  text-shadow: 0 0 15px rgba(255,215,0,0.3);
}

/* ── Modal de Código QR ── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(13, 31, 60, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: fadeInModal var(--transition);
}

.modal-content {
  background: var(--blanco);
  border-radius: var(--radio-lg);
  padding: 32px 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--sombra-lg);
  text-align: center;
  position: relative;
  border: 1px solid rgba(255,255,255,0.2);
  animation: slideUpModal var(--transition);
}

.modal-cerrar {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--gris-texto);
  cursor: pointer;
  padding: 4px;
  transition: color var(--transition);
}

.modal-cerrar:hover {
  color: var(--rojo);
}

.modal-titulo {
  color: var(--azul);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.modal-descripcion {
  color: var(--gris-texto);
  font-size: 0.85rem;
  margin-bottom: 20px;
  line-height: 1.4;
}

.qr-imagen-zona {
  background: #f9fbfd;
  padding: 16px;
  border-radius: var(--radio);
  border: 2px dashed var(--gris-med);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.qr-imagen-zona img {
  display: block;
  max-width: 180px;
  height: auto;
}

.qr-url-text {
  font-size: 0.75rem;
  color: var(--gris-texto);
  background: var(--gris-claro);
  padding: 8px 12px;
  border-radius: 8px;
  word-break: break-all;
  font-family: monospace;
  margin: 0;
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* ── Estilos de Ritmo en Tabla y Chips ── */
.td-ritmo {
  color: var(--azul-claro);
  font-weight: 600;
}
.chip-ritmo {
  background: #eef3fc;
  color: var(--azul-claro);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-block;
}

.btn-qr-compartir {
  transition: all 0.2s ease;
}
.btn-qr-compartir:hover {
  background: rgba(255,255,255,0.3) !important;
  transform: translateY(-1px);
}