/* ==================================================================
   TABLERO EN VIVO - pantalla de proyeccion
   Pensado para 1920x1080 en un televisor, pero se adapta a portatil.
================================================================== */

body.tablero {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, #16161d 0%, transparent 70%),
    var(--fondo);
  overflow-x: hidden;
}

body.tablero.sin-cursor { cursor: none; }

.marco {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 0 40px;
}

/* ------------------------------------------------------------------
   Cabecera
------------------------------------------------------------------- */
.cabecera {
  display: grid;
  grid-template-columns: minmax(170px, 300px) 1fr minmax(200px, 320px);
  align-items: center;
  gap: 24px;
  padding: 18px 28px 16px;
}

/* ------------------------------------------------------------------
   Logos
   Cada logo trae su propio fondo dentro del PNG: el de Macrollantas
   con transparencia real y el de Pirelli con su rectangulo amarillo.
   Por eso la caja NO pinta ningun recuadro; si lo hiciera se veria
   asomar por los cuatro lados. Su unico trabajo es reservar el hueco
   y dejar que la imagen lo llene de lado a lado.
------------------------------------------------------------------- */
.logo-caja {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 56px;
  border-radius: 8px;
  overflow: hidden;
}
.logo-caja img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
}

/* Marcador de posicion mientras el admin no sube el logo real.
   Dibuja su propio recuadro porque la caja ya no aporta fondo. */
.logo-texto {
  padding: 9px 16px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  font-family: var(--f-titulo);
  font-size: 17px;
  letter-spacing: 0.5px;
  color: var(--texto);
  text-transform: uppercase;
  white-space: nowrap;
}

.titulo-bloque { text-align: center; }

.kicker {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--texto-medio);
  text-transform: uppercase;
  margin: 0 0 2px;
}

.titulo-principal {
  font-family: var(--f-titulo);
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 0.95;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
  transform: skewX(-6deg);
  background: linear-gradient(180deg, #ffffff 40%, #b9bec7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitulo {
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--texto-tenue);
  text-transform: uppercase;
  margin: 6px 0 0;
}

.reloj-bloque {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.reloj {
  font-family: var(--f-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.en-vivo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--verde);
  text-transform: uppercase;
  margin-top: 3px;
}

.punto-vivo {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
  animation: latir 1.6s ease-in-out infinite;
}
.en-vivo.caido { color: var(--texto-tenue); }
.en-vivo.caido .punto-vivo { background: var(--texto-tenue); animation: none; }

@keyframes latir {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}

/* ------------------------------------------------------------------
   Barra de estadisticas
------------------------------------------------------------------- */
.barra-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 28px;
  background: var(--linea);
  border-bottom: 1px solid var(--linea);
}

.stat {
  background: linear-gradient(180deg, #101015 0%, #0b0b0f 100%);
  padding: 14px 22px 16px;
}

.stat-etiqueta {
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--texto-tenue);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.stat-valor {
  font-family: var(--f-mono);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.stat-valor.record { color: var(--magenta); }

.stat-nota {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--texto-medio);
  text-transform: uppercase;
  margin: 7px 0 0;
}

/* ------------------------------------------------------------------
   Tabla de clasificacion
------------------------------------------------------------------- */
.tabla {
  margin: 22px 28px 0;
}

/* Las mismas columnas para el encabezado y para cada fila */
.fila-grid {
  display: grid;
  grid-template-columns:
    68px            /* POS */
    minmax(0, 1fr)  /* PILOTO */
    90px            /* COMP */
    minmax(150px, 190px) /* VUELTA RAPIDA */
    minmax(90px, 130px)  /* DIF */
    90px;           /* INTENTOS */
  align-items: center;
  gap: 12px;
}

/* El encabezado repite la rejilla de las filas. Lleva el mismo borde
   izquierdo (transparente) y el mismo padding horizontal para que las
   columnas queden alineadas al pixel con los datos de abajo. */
.encabezado {
  padding: 0 18px 10px;
  border-left: 4px solid transparent;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--texto-tenue);
  text-transform: uppercase;
  white-space: nowrap;
}
.encabezado .col-pos      { text-align: center; }
.encabezado .col-comp     { text-align: center; }
.encabezado .col-tiempo   { text-align: right; }
.encabezado .col-dif      { text-align: right; }
.encabezado .col-intentos { text-align: center; }

.cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Fila de piloto ---- */
.fila {
  --acento: var(--gris-pos);
  --acento-oscuro: #2a2e36;
  position: relative;
  padding: 12px 18px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 45%, transparent 100%);
  border-left: 4px solid var(--acento);
  /* La animacion FLIP al reordenar se aplica sobre transform */
  transition: transform 520ms cubic-bezier(0.22, 0.9, 0.3, 1);
  will-change: transform;
}

/* `--acento` se redefine aqui (y no solo en las clases .podio-* de
   base.css) porque `.fila` tiene la misma especificidad y gana por
   orden de carga. Sin esto, el 1.o no seria dorado. */
.fila.podio-oro {
  --acento: var(--oro);
  --acento-oscuro: var(--oro-oscuro);
  background: linear-gradient(90deg, rgba(255, 210, 74, 0.16) 0%, rgba(255, 210, 74, 0.05) 45%, transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.18), 0 0 28px -12px rgba(255, 210, 74, 0.5);
}
.fila.podio-plata {
  --acento: var(--plata);
  --acento-oscuro: var(--plata-oscuro);
  background: linear-gradient(90deg, rgba(200, 205, 212, 0.13) 0%, rgba(200, 205, 212, 0.04) 45%, transparent 100%);
}
.fila.podio-bronce {
  --acento: var(--bronce);
  --acento-oscuro: var(--bronce-oscuro);
  background: linear-gradient(90deg, rgba(201, 123, 58, 0.14) 0%, rgba(201, 123, 58, 0.04) 45%, transparent 100%);
}

/* Destello cuando la fila cambia (tiempo nuevo o cambio de posicion) */
.fila.destello { animation: destello 1.1s ease-out; }
@keyframes destello {
  0%   { box-shadow: inset 0 0 0 2px var(--acento), 0 0 34px -8px var(--acento); }
  100% { box-shadow: none; }
}

.fila .col-pos {
  font-family: var(--f-titulo);
  font-size: 30px;
  line-height: 1;
  color: var(--acento);
  transform: skewX(-8deg);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.fila .col-piloto {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.fila .sigla {
  flex: 0 0 auto;
  min-width: 40px;
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--acento);
  color: #0b0b0f;
  font-family: var(--f-titulo);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
}

.fila .piloto-datos { min-width: 0; }

.fila .piloto-nombre {
  font-family: var(--f-titulo);
  font-size: 19px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fila .piloto-sede {
  font-size: 9px;
  letter-spacing: 2.2px;
  color: var(--texto-tenue);
  text-transform: uppercase;
  margin: 3px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fila .col-comp { display: flex; justify-content: center; }

.fila .col-tiempo {
  font-family: var(--f-mono);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  transform: skewX(-6deg);
}
.fila.podio-oro .col-tiempo { color: var(--magenta); }

.fila .col-dif {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-medio);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fila .col-dif.lider { color: var(--oro); letter-spacing: 1.5px; font-size: 12px; }

.fila .col-intentos {
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--texto-medio);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fila .col-intentos small {
  font-size: 9px;
  color: var(--texto-tenue);
  letter-spacing: 1px;
  margin-left: 3px;
}

/* ---- Estado vacio ---- */
.vacio {
  padding: 70px 20px;
  text-align: center;
  color: var(--texto-tenue);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
}
.vacio h2 {
  font-family: var(--f-titulo);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--texto-medio);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.vacio p { margin: 0; font-size: 13px; }

/* ------------------------------------------------------------------
   Pie del tablero
------------------------------------------------------------------- */
/* Tres columnas y no space-between: asi el enlace del medio queda centrado
   respecto a la pagina y no respecto al hueco que dejan los extremos. */
.pie-tablero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 26px 28px 0;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--texto-tenue);
  text-transform: uppercase;
}
.pie-tablero > :last-child { text-align: right; }
.pie-tablero a { color: var(--texto-medio); text-decoration: none; }
.pie-tablero a:hover { color: var(--texto); }

/* Tipografia del titulo y blanco puro, pero al cuerpo del pie: el tamano,
   el espaciado y las mayusculas se heredan del contenedor. */
.pie-terminos { font-family: var(--f-titulo); }
.pie-tablero .pie-terminos a { color: #fff; }
.pie-tablero .pie-terminos a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------
   Adaptacion a pantallas pequenas (el tablero tambien se ve en movil)
------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cabecera { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .logo-caja img { max-height: 44px; }
  .reloj-bloque { justify-content: center; }
  .barra-stats { grid-template-columns: 1fr; margin: 0 14px; }
  .tabla { margin: 16px 14px 0; }

  .fila-grid {
    grid-template-columns: 46px minmax(0, 1fr) 64px;
    grid-template-areas:
      'pos piloto comp'
      'pos tiempo dif';
    row-gap: 4px;
  }
  .encabezado { display: none; }
  .col-pos      { grid-area: pos; font-size: 24px; }
  .col-piloto   { grid-area: piloto; }
  .col-comp     { grid-area: comp; }
  .col-tiempo   { grid-area: tiempo; text-align: left; font-size: 22px; }
  .col-dif      { grid-area: dif; text-align: right; }
  .col-intentos { display: none; }
  .piloto-nombre { font-size: 15px; }

  /* Con tres bloques a 10px el pie no cabe en una linea de telefono. */
  .pie-tablero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    row-gap: 8px;
  }
  .pie-tablero > :last-child { text-align: center; }
}