/* ==================================================================
   PODIO - mejores 3 del dia y mejores 3 de todo el evento
   Misma paleta que el tablero: ORO / PLATA / BRONCE.
================================================================== */

/* Columna flex a pantalla completa: la pista se queda con el hueco libre
   y los paneles con el pie quedan pegados al borde inferior. El body
   tambien es flex porque la barra de sesion va encima, en el flujo. */
body.podio {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1000px 500px at 50% -5%, #17171f 0%, transparent 70%),
    var(--fondo);
}
body.podio > .barra-sesion { flex-shrink: 0; }

.marco-podio {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 0 18px;
}
.marco-podio > * { flex-shrink: 0; }

/* ---- Pista: nombre + dibujo del circuito ---- */
.pista {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 28px 0;
}
.pista[hidden] { display: none; }

/* Hereda de .titulo-principal (fuente, degradado, inclinacion) a la mitad
   del tamano de «PODIO»: clamp(34px, 4.4vw, 58px) / 2. */
.titulo-principal.pista-nombre {
  font-size: clamp(17px, 2.2vw, 29px);
  text-align: center;
}
.titulo-principal.pista-nombre[hidden] { display: none; }

/* La imagen va absoluta dentro de una caja flexible: asi se ajusta al hueco
   que sobre sin empujar los paneles fuera de la pantalla. */
.pista-imagen {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 140px;
}
.pista-imagen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pista-imagen[hidden] { display: none; }

/* Sin pista visible, igual los paneles bajan al borde. */
.paneles { margin-top: auto; }

/* Las dos columnas de logo miden lo mismo a proposito: es lo que
   mantiene «PODIO» centrado de verdad en la proyeccion. */
.cabecera-podio {
  display: grid;
  grid-template-columns: minmax(150px, 260px) 1fr minmax(150px, 260px);
  align-items: center;
  gap: 20px;
  padding: 18px 28px 16px;
}

.paneles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-right: 28px;
  margin-left: 28px;
  padding-top: 22px;
}

.panel-podio {
  background: linear-gradient(180deg, #101015 0%, #0b0b0f 100%);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 22px 22px 26px;
}

.panel-titulo {
  font-family: var(--f-titulo);
  font-size: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
}

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

.plazas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- Una plaza del podio ---- */
.plaza {
  --acento: var(--gris-pos);
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 8px;
  border-left: 5px solid var(--acento);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
}

/* Igual que en el tablero: `--acento` se repite aqui porque `.plaza`
   tiene la misma especificidad que `.podio-*` y se carga despues. */
.plaza.podio-oro {
  --acento: var(--oro);
  background: linear-gradient(90deg, rgba(255, 210, 74, 0.18) 0%, rgba(255, 210, 74, 0.04) 55%, transparent 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 74, 0.2), 0 0 34px -14px rgba(255, 210, 74, 0.55);
}
.plaza.podio-plata {
  --acento: var(--plata);
  background: linear-gradient(90deg, rgba(200, 205, 212, 0.14) 0%, rgba(200, 205, 212, 0.03) 55%, transparent 100%);
}
.plaza.podio-bronce {
  --acento: var(--bronce);
  background: linear-gradient(90deg, rgba(201, 123, 58, 0.15) 0%, rgba(201, 123, 58, 0.03) 55%, transparent 100%);
}

.plaza-medalla {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.plaza-numero {
  font-family: var(--f-titulo);
  font-size: 44px;
  line-height: 0.9;
  color: var(--acento);
  transform: skewX(-8deg);
  font-variant-numeric: tabular-nums;
}

.plaza-metal {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--acento);
  text-transform: uppercase;
  opacity: 0.85;
}

.plaza-datos { min-width: 0; }

.plaza-nombre {
  font-family: var(--f-titulo);
  font-size: 22px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plaza-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--texto-tenue);
  text-transform: uppercase;
}

.plaza-sigla {
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--acento);
  color: #0b0b0f;
  font-family: var(--f-titulo);
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* Misma tipografia y color que el nombre del piloto, al tamano pequeno
   de la sede: es el dato que se usa para etiquetar en redes. */
.plaza-instagram {
  font-family: var(--f-titulo);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--texto);
  /* `.plaza-meta` fuerza uppercase; el usuario va tal cual se registro. */
  text-transform: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plaza-tiempo {
  text-align: right;
}

.plaza-tiempo strong {
  display: block;
  font-family: var(--f-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  transform: skewX(-6deg);
}
.plaza.podio-oro .plaza-tiempo strong { color: var(--magenta); }

.plaza-tiempo span {
  display: block;
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--texto-medio);
  font-variant-numeric: tabular-nums;
}

.plaza-libre {
  padding: 22px 18px;
  border: 1px dashed var(--linea-fuerte);
  border-radius: 8px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--texto-tenue);
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .paneles { grid-template-columns: 1fr; margin-right: 14px; margin-left: 14px; padding-top: 20px; }
  .pista { flex: 0 0 auto; padding: 18px 14px 0; }
  .pista-imagen { flex: 0 0 auto; height: 40vh; min-height: 0; }
  .cabecera-podio { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .plaza { grid-template-columns: 56px minmax(0, 1fr); }
  .plaza-meta { flex-wrap: wrap; gap: 6px 10px; }
  .plaza-tiempo { grid-column: 1 / -1; text-align: left; }
}