/* Estética Broadcast: fondo oscuro, rojo F1, Titillium, bloques inclinados. */
:root {
  --fondo: #15151E; --fila: #23232F; --fila-baja: #1C1C26; --rojo: #E10600;
  --texto: #FFFFFF; --apagado: #A6A6B5; --verde: #3DDC84; --amarillo: #F5C518;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; background: var(--fondo); color: var(--texto);
  font-family: 'Titillium Web', system-ui, sans-serif; display: flex; flex-direction: column;
}
a { color: var(--texto); }

.cabecera {
  background: var(--rojo); padding: 22px 20px 30px; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
.cabecera > div > span { display: block; line-height: 1; }
.chico { font-size: 12px; font-weight: 600; letter-spacing: 3px; }
.grande { font-size: 34px; font-weight: 900; font-style: italic; }
.quien { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-weight: 700; }
.quien #quien-apodo { text-transform: uppercase; }

main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.bloque { background: var(--fila); border-left: 4px solid var(--rojo); padding: 14px 16px; }
.bloque b { display: block; font-size: 20px; font-weight: 900; font-style: italic; }
.bloque p { margin: 4px 0 0; color: var(--apagado); }

.tarjeta { background: var(--fila); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta h2 { margin: 0; font-size: 14px; letter-spacing: 3px; color: var(--apagado); }
.tarjeta h2 span { color: var(--texto); }
.tarjeta p { margin: 0; }
.apagado { color: var(--apagado); }

.boton {
  height: 48px; padding: 0 18px; border: none; background: var(--rojo); color: var(--texto);
  font-family: inherit; font-size: 16px; font-weight: 900; font-style: italic; letter-spacing: 1px;
  cursor: pointer; transform: skewX(-12deg);
}
.boton-blanco {
  background: var(--texto); color: var(--fondo); display: flex; align-items: center;
  justify-content: center; gap: 10px; font-style: normal;
}
.boton > *, .boton-blanco > * { transform: skewX(12deg); }
.boton:disabled { opacity: .5; cursor: default; }
.boton:focus-visible, input:focus-visible, .link:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; }

.form-mail { display: flex; flex-direction: column; gap: 6px; }
.fila { display: flex; gap: 8px; }
input[type=email], input[type=password] {
  flex: 1; min-width: 0; height: 48px; padding: 0 12px; background: var(--fila-baja); color: var(--texto);
  border: 1px solid #33334A; font-family: inherit; font-size: 16px;
}
.mensaje { padding: 10px 12px; border-left: 4px solid var(--verde); background: var(--fila-baja); }
.mensaje.error { border-left-color: var(--amarillo); }
.link { background: none; border: none; color: var(--texto); font-family: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0; }
.etiqueta { align-self: flex-start; background: var(--amarillo); color: var(--fondo); padding: 2px 10px; font-weight: 900; letter-spacing: 2px; }

footer { padding: 16px 20px 24px; text-align: center; font-size: 12px; color: var(--apagado); }
footer a { color: var(--apagado); }
.aviso-admin { margin: 0 0 12px; padding: 8px 12px; background: var(--amarillo); color: var(--fondo); font-weight: 700; transform: skewX(-12deg); }

/* ---------------------------------------------------------------- Página */
.anuncio { margin: 0 0 12px; padding: 10px 12px; background: var(--fila); border-left: 4px solid var(--amarillo); }
.pestanas { display: flex; gap: 2px; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none; padding: 0 4px; }
.pestanas button {
  flex: 0 0 auto; background: none; border: none; color: var(--apagado); font-family: inherit;
  font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 8px 9px; cursor: pointer;
}
.pestanas button[aria-current=page] { background: var(--texto); color: var(--fondo); transform: skewX(-12deg); }
.titulo-seccion { font-size: 12px; letter-spacing: 3px; color: var(--apagado); margin: 18px 0 8px; }
.chico-nota { font-size: 12px; margin: 6px 0 0; }
.violeta { color: #C77DFF; }
.cargando { padding: 20px 0; }
.boton-gris { background: #33334A; }
.separador { display: flex; align-items: center; gap: 10px; color: var(--apagado); font-size: 12px; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: #33334A; }
.link:disabled { opacity: .5; }

/* Tabla de posiciones (ranking y puntos de la fecha) */
.tabla { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fila {
  display: grid; grid-template-columns: 36px 6px minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  background: var(--fila); min-height: 44px;
}
.fila .pos { font-size: 20px; font-weight: 900; text-align: center; }
.fila .franja { height: 26px; }
.fila .nombre { font-size: 17px; font-weight: 700; text-transform: uppercase; overflow-wrap: anywhere; padding: 8px 0; }
.fila .nombre small, .fila .pts small { font-size: 11px; color: var(--apagado); font-weight: 600; }
.fila .pts { font-size: 18px; font-weight: 900; text-align: right; padding-right: 12px; white-space: nowrap; }
.fila-lider { background: var(--texto); color: var(--fondo); }
.fila-lider .nombre small { color: #55556A; }
.fila-yo { outline: 2px solid var(--rojo); outline-offset: -2px; }
.fila details summary { cursor: pointer; list-style: none; }
.fila details summary::-webkit-details-marker { display: none; }
.fila details[open] summary { margin-bottom: 6px; }

.proxima {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left;
  background: var(--fila); color: var(--texto); border: none; border-left: 4px solid var(--rojo);
  padding: 12px 14px; font-family: inherit; cursor: pointer;
}
.proxima small { display: block; font-size: 11px; letter-spacing: 2px; color: var(--apagado); }
.proxima b { display: block; font-size: 20px; font-weight: 900; font-style: italic; }
.proxima-cuenta { background: var(--rojo); padding: 6px 12px; transform: skewX(-12deg); text-align: center; }
.proxima-cuenta small { color: var(--texto); }
.nota-ultima {
  width: 100%; margin-top: 10px; text-align: left; background: var(--fila-baja); color: var(--apagado);
  border: none; border-left: 4px solid var(--rojo); padding: 10px 12px; font-family: inherit; font-size: 14px; cursor: pointer;
}
.nota-ultima b { color: var(--texto); }

/* Calendario */
.lista-carreras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.carrera {
  width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  background: var(--fila); color: var(--texto); border: none; padding: 10px 12px 10px 0; text-align: left;
  font-family: inherit; cursor: pointer; border-left: 4px solid transparent;
}
.carrera .ronda { font-weight: 900; text-align: center; color: var(--apagado); }
.carrera-dato b { display: block; font-size: 16px; }
.carrera-dato small, .carrera-ganador small { display: block; font-size: 11px; letter-spacing: 1px; color: var(--apagado); }
.carrera-ganador { text-align: right; }
.carrera-ganador b { display: block; font-size: 14px; }
.carrera-ganador .abierta { color: var(--amarillo); }
.estado-abierta { border-left-color: var(--amarillo); }
.estado-cerrada { border-left-color: var(--rojo); }
.estado-cancelada { opacity: .55; }
.estado-programada .carrera-dato b { color: var(--apagado); }

/* Detalle de carrera */
.cabecera-carrera small { display: block; font-size: 12px; letter-spacing: 2px; color: var(--apagado); margin-top: 8px; }
.grande-carrera { margin: 0 0 12px; font-size: 30px; font-weight: 900; font-style: italic; }
.volver { font-size: 14px; }
.podio { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.escalon { flex: 1; display: flex; flex-direction: column; gap: 4px; text-align: center; min-width: 0; }
.escalon b { font-size: 14px; font-weight: 900; overflow-wrap: anywhere; }
.escalon span {
  display: flex; align-items: center; justify-content: center; background: var(--fila); border-top: 4px solid;
  font-size: 32px; font-weight: 900; font-style: italic;
}
.escalon-1 span { height: 100px; background: var(--texto); color: var(--fondo); font-size: 44px; }
.escalon-2 span { height: 72px; }
.escalon-3 span { height: 52px; }
.datos-carrera { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 700; color: var(--apagado); margin: 10px 0 0; }
.datos-carrera b { color: var(--texto); }
.fuente { font-size: 11px; color: #6E6E82; margin: 4px 0 0; }
.desglose { width: 100%; border-collapse: collapse; font-size: 13px; text-transform: none; font-weight: 600; }
.desglose td { padding: 3px 4px; }
.desglose .num { text-align: right; font-weight: 900; }
.desglose .sin-puntos { opacity: .5; }
.desglose .tipo-exacto td:nth-child(3) { color: #C77DFF; }
.desglose .tipo-a_uno td:nth-child(3) { color: var(--verde); }
.fila-lider .desglose .tipo-exacto td:nth-child(3) { color: #7B2CBF; }
.fila-lider .desglose .tipo-a_uno td:nth-child(3) { color: #138A4B; }

/* Mi temporada */
.cabecera-yo { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; }
.cabecera-yo small { display: block; font-size: 12px; letter-spacing: 3px; color: var(--apagado); }
.cabecera-yo b { font-size: 28px; font-weight: 900; font-style: italic; }
.chapa { background: var(--texto); color: var(--fondo); padding: 2px 14px; font-size: 30px; font-weight: 900; font-style: italic; transform: skewX(-12deg); }
.cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cifra { background: var(--fila); padding: 8px; border-bottom: 3px solid transparent; }
.cifra:first-child { border-bottom-color: var(--rojo); }
.cifra small { display: block; font-size: 10px; letter-spacing: 1px; color: var(--apagado); font-weight: 700; }
.cifra b { font-size: 22px; font-weight: 900; }
.barras { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.barra { flex: 1; background: #3A3A4C; }
.barra.gane { background: var(--texto); }
.barra:first-child.gane, .barra.gane:hover { background: var(--texto); }
.tarjetas-dato { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.dato { background: var(--fila); padding: 10px 12px; border-left: 4px solid var(--rojo); display: flex; flex-direction: column; }
.dato small { font-size: 11px; letter-spacing: 2px; color: var(--apagado); font-weight: 700; }
.dato b { font-size: 20px; font-weight: 900; font-style: italic; overflow-wrap: anywhere; }
.dato span { font-size: 12px; color: var(--apagado); }
.mano { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mano li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 40px; align-items: center; gap: 8px; font-weight: 700; text-transform: uppercase; font-size: 14px; }
.mano li > span:first-child { overflow-wrap: anywhere; }
.medidor { height: 12px; background: #3A3A4C; display: block; }
.medidor span { display: block; height: 100%; background: var(--rojo); }
.mano small { color: var(--apagado); text-align: right; }

/* Registro y desplegables */
.sub { margin-top: 14px; }
.sub summary { cursor: pointer; color: var(--apagado); font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.registro { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.registro li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; background: var(--fila-baja); padding: 8px 10px; font-size: 14px; }
.registro small { color: var(--amarillo); font-weight: 700; }

/* ---------------------------------------------------------------- Admin */
.seccion-admin { background: var(--fila); margin-top: 8px; border-left: 4px solid var(--rojo); }
.seccion-admin > summary { padding: 14px 16px; font-weight: 900; letter-spacing: 2px; cursor: pointer; }
.seccion-admin .cuerpo { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.seccion-admin h3 { margin: 8px 0 0; font-size: 13px; letter-spacing: 1px; color: var(--apagado); }
.cuadros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cuadro { background: var(--fila-baja); padding: 10px 12px; border-left: 4px solid var(--verde); display: flex; flex-direction: column; min-width: 0; }
.cuadro.alerta { border-left-color: var(--amarillo); }
.cuadro small { font-size: 11px; letter-spacing: 2px; color: var(--apagado); font-weight: 700; }
.cuadro b { font-size: 16px; font-weight: 900; overflow-wrap: anywhere; }
.cuadro span { font-size: 12px; color: var(--apagado); overflow-wrap: anywhere; }
.tabla-admin { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-admin th { text-align: left; font-size: 11px; letter-spacing: 1px; color: var(--apagado); padding: 4px; }
.tabla-admin td { padding: 6px 4px; border-top: 1px solid #33334A; overflow-wrap: anywhere; }
.tabla-admin .sin-puntos { opacity: .5; }
.fila-form, .fila-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fila-form > input, .fila-form > select { flex: 1 1 140px; min-width: 0; }
.seccion-admin input[type=text], .seccion-admin input[type=email], .seccion-admin input[type=number],
.seccion-admin input[type=datetime-local], .seccion-admin select, .seccion-admin textarea {
  height: 44px; padding: 0 10px; background: var(--fila-baja); color: var(--texto); border: 1px solid #33334A;
  font-family: inherit; font-size: 15px; width: 100%;
}
.seccion-admin textarea { height: auto; padding: 10px; resize: vertical; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--apagado); }
.grilla-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.check input { width: 20px; height: 20px; accent-color: var(--rojo); }
.check small { color: var(--apagado); }
.parrilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.puestos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.puesto { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 14px; }
.acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tarjeta .cuadros + p { margin-top: 4px; }
.form-mail { display: flex; flex-direction: column; gap: 8px; }
.form-mail input { width: 100%; flex: none; }

/* ---------------------------------------------------------------- Votar */
.cabecera-voto { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cabecera-voto small { display: block; font-size: 12px; letter-spacing: 2px; color: var(--apagado); }
.cabecera-voto b { font-size: 26px; font-weight: 900; font-style: italic; line-height: 1.05; }
.fila-titulo { display: flex; justify-content: space-between; }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.slot {
  display: grid; grid-template-columns: 28px 5px minmax(0, 1fr); align-items: center; column-gap: 8px;
  height: 42px; background: var(--fila-baja); color: #55556A; border: 2px solid transparent;
  font-family: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; padding: 0 8px 0 0;
}
.slot .slot-pos { font-weight: 900; text-align: center; font-size: 16px; }
.slot .franja { height: 22px; }
.slot.lleno { background: var(--fila); color: var(--texto); }
.slot.cursor { border-color: var(--rojo); color: #FF6B66; }
.slot.lleno.cursor { color: var(--texto); }
.slot:not(.lleno) .slot-nombre { grid-column: 2 / 4; }
.fila-ayuda { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.grilla-pilotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.piloto {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 0;
  background: var(--fila); color: var(--texto); border: none; font-family: inherit;
  font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; overflow: hidden;
}
.piloto .franja { width: 4px; height: 100%; flex: none; }
.piloto span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piloto small { color: var(--rojo); font-weight: 900; }
.piloto.usado { background: var(--fila-baja); color: #6E6E82; }
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 16px 0; }
.extra { background: var(--fila); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border-top: 3px solid #C77DFF; }
.extra + .extra { border-top-color: #75AADB; }
.extra small { font-size: 11px; letter-spacing: 2px; color: var(--apagado); font-weight: 700; }
.extra select {
  height: 40px; background: var(--fondo); color: var(--texto); border: 1px solid #33334A;
  font-family: inherit; font-size: 15px; font-weight: 700; padding: 0 6px;
}
.stepper { display: flex; align-items: center; justify-content: space-between; }
.stepper button {
  width: 44px; height: 40px; background: var(--fondo); color: var(--texto); border: none;
  font-size: 20px; font-weight: 900; cursor: pointer;
}
.stepper-valor { font-size: 22px; font-weight: 900; }
.boton-ancho { width: 100%; height: 54px; font-size: 18px; letter-spacing: 2px; }
.chip { background: var(--fila); color: var(--apagado); border: none; padding: 8px 12px; font-family: inherit; font-weight: 700; cursor: pointer; }
.chip.activo { background: var(--texto); color: var(--fondo); }