:root {
  --fondo: #12161c;
  --panel: #1b212a;
  --borde: #2b3341;
  --texto: #e6eaf0;
  --tenue: #9aa5b4;
  --acento: #4da3ff;
  --bien: #35c46a;
  --mal: #e2574c;
  --tibio: #e8a33d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .6rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  flex-wrap: wrap;
}

h1 { font-size: 1rem; margin: 0; font-weight: 600; letter-spacing: .01em; }

.estado { display: flex; align-items: center; gap: .45rem; color: var(--tenue); }

.luz {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--tenue); transition: background .3s;
}
.luz.viva { background: var(--bien); box-shadow: 0 0 8px var(--bien); }
.luz.muerta { background: var(--mal); }

.aviso {
  margin-left: auto; color: var(--tenue); font-size: .82rem;
  border: 1px solid var(--borde); border-radius: 4px; padding: .2rem .55rem;
}
.aviso strong { color: var(--tibio); }

main { flex: 1; display: flex; min-height: 0; }

/* El mapa va posicionado dentro de `.lienzo` para poder apoyarle controles
 * encima sin que MapLibre los tome como parte del canvas. */
.lienzo { flex: 1; position: relative; min-width: 0; }
#mapa { position: absolute; inset: 0; background: #0d1014; }

.controles-mapa {
  position: absolute; z-index: 5; top: .6rem; left: .6rem;
  display: flex; gap: .4rem; align-items: center;
  background: rgba(18,22,28,.82); border: 1px solid var(--borde);
  border-radius: 5px; padding: .3rem .35rem;
  backdrop-filter: blur(3px);
}
.controles-mapa .boton { margin-top: 0; }
.controles-mapa select { padding: .2rem .3rem; font-size: .78rem; }

aside {
  width: 27rem;
  background: var(--panel);
  border-left: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.filtros {
  display: flex; gap: 1rem; padding: .55rem .8rem;
  border-bottom: 1px solid var(--borde); color: var(--tenue); font-size: .85rem;
}
.filtros label { display: flex; align-items: center; gap: .35rem; cursor: pointer; }

table { width: 100%; border-collapse: collapse; }

thead th {
  position: sticky; top: 0;
  background: var(--panel);
  text-align: left;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tenue);
  font-weight: 600;
  padding: .5rem .55rem;
  border-bottom: 1px solid var(--borde);
  cursor: pointer;
  user-select: none;
}
thead th:hover { color: var(--texto); }
thead th.activo { color: var(--acento); }

table { display: block; overflow: hidden; }
tbody { display: block; overflow-y: auto; }
thead, tbody tr { display: table; width: 100%; table-layout: fixed; }

/* La tabla de posiciones es un flex vertical para que el cuerpo pueda llevar
 * su propio scroll. Mientras la tabla fue `display: block` el `flex: 1` del
 * tbody no hacía nada: la lista crecía hacia abajo y los últimos puestos
 * quedaban fuera de la ventana, sin barra para llegar. */
#tabla { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#tabla tbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

#tabla tbody::-webkit-scrollbar { width: 10px; }
#tabla tbody::-webkit-scrollbar-thumb {
  background: #394352; border-radius: 5px;
  border: 2px solid var(--panel);
}
#tabla tbody::-webkit-scrollbar-thumb:hover { background: #4a5666; }
#tabla tbody { scrollbar-width: thin; scrollbar-color: #394352 var(--panel); }

tbody tr { border-bottom: 1px solid rgba(43,51,65,.55); cursor: pointer; }
tbody tr:hover { background: rgba(77,163,255,.08); }
tbody tr.elegida { background: rgba(77,163,255,.16); }

td { padding: .42rem .55rem; font-variant-numeric: tabular-nums; }
td.num { text-align: right; }

/* Filas compactas. Lo que las hacía altas no era el relleno sino el ancho:
 * con `table-layout: fixed` y sin anchos, las 6 columnas se repartían iguales
 * (67 px), así que "Miguel Martinez Boero" se partía en tres renglones y la
 * fila medía 67 px. Con anchos propios y corte por puntos suspensivos todas
 * las filas miden lo mismo y entran el triple. */
#tabla thead th { padding: .38rem .4rem; font-size: .68rem; white-space: nowrap; }
#tabla td { padding: .22rem .4rem; font-size: .84rem; line-height: 1.25; }
#tabla .piloto, #tabla .modelo {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tabla .piloto { line-height: 1.25; }
#tabla .modelo { font-size: .71rem; line-height: 1.2; }
#tabla .chapa { min-width: 1.7rem; font-size: .76rem; padding: 0 .25rem; }
#tabla .puesto { min-width: 1.15rem; font-size: .74rem; }

/* El nombre se queda con lo que sobra; el resto lleva lo justo para su dato. */
#tabla th:nth-child(1), #tabla td:nth-child(1) { width: 4.4rem; }
#tabla th:nth-child(3), #tabla td:nth-child(3) { width: 3.4rem; }
#tabla th:nth-child(4), #tabla td:nth-child(4) { width: 3.4rem; }
#tabla th:nth-child(5), #tabla td:nth-child(5) { width: 2.8rem; }
#tabla th:nth-child(6), #tabla td:nth-child(6) { width: 3.2rem; }

.chapa {
  display: inline-block; min-width: 1.9rem; text-align: center;
  background: var(--acento); color: #0b1017; font-weight: 700;
  border-radius: 3px; padding: .05rem .3rem; font-size: .82rem;
}
.chapa.suelto { background: var(--borde); color: var(--tenue); font-weight: 500; }

.piloto { color: var(--texto); }
.modelo { color: var(--tenue); font-size: .78rem; }

.sube { color: var(--bien); }
.baja { color: var(--tenue); }
.viejo { opacity: .45; }

.vacio { color: var(--tenue); text-align: center; padding: 2rem 1rem; }
.vacio small { color: #6a7484; }

.etiqueta-avion {
  background: rgba(18,22,28,.85);
  border: 1px solid var(--acento);
  border-radius: 3px;
  color: var(--texto);
  font: 700 11px/1.3 system-ui, sans-serif;
  padding: 1px 4px;
  white-space: nowrap;
}
.etiqueta-avion.suelto { border-color: var(--borde); color: var(--tenue); font-weight: 500; }

/* La página de la tarea sigue con Leaflet: ahí la vista es de plano y la
 * inclinación estorbaría más de lo que aporta. */
.leaflet-container { background: #0d1014; }

/* --- marcadores de MapLibre --- */

/* OJO: nada de `position` acá. MapLibre pone `position:absolute` con la clase
 * `.maplibregl-marker` y esta hoja se carga después, así que cualquier
 * `position` propio le gana y el marcador se ubica respecto del documento en
 * vez del mapa: al hacer zoom los planeadores se corren. El rótulo se apoya
 * igual porque el marcador ya es un ancestro posicionado. */
.marca-avion { width: 30px; height: 30px; cursor: pointer; }
/* Sin `transition`: animar el giro hace que en el salto de 359° a 0° el
 * planeador dé una vuelta completa. */
.marca-avion .cuerpo { width: 30px; height: 30px; transform-origin: 50% 50%; }
.marca-avion .rotulo { position: absolute; left: 25px; top: -6px; }
.marca-avion.elegida .cuerpo { filter: drop-shadow(0 0 6px var(--acento)); }
.marca-avion.elegida .rotulo { box-shadow: 0 0 0 1px var(--acento); }

/* La antena se apoya en el suelo: el marcador va anclado abajo, no al centro,
 * así que tampoco lleva `position` propio (ver la nota de arriba). */
.marca-antena { width: 22px; height: 22px; cursor: pointer; }
.marca-antena .cuerpo { width: 22px; height: 22px; }
.marca-antena .rotulo { position: absolute; left: 24px; top: 2px; }
.marca-antena.apagada { opacity: .5; }

.etiqueta-antena {
  background: rgba(18,22,28,.85);
  border: 1px solid var(--bien);
  border-radius: 3px;
  color: var(--texto);
  font: 700 10px/1.3 system-ui, sans-serif;
  padding: 1px 4px;
  white-space: nowrap;
  letter-spacing: .04em;
}
.marca-antena.apagada .etiqueta-antena { border-color: var(--borde); color: var(--tenue); }

.maplibregl-marker { cursor: pointer; }

.globo .maplibregl-popup-content {
  background: rgba(18,22,28,.95);
  border: 1px solid var(--borde);
  border-radius: 5px;
  color: var(--texto);
  font: 12px/1.45 system-ui, sans-serif;
  padding: .45rem .6rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.globo .maplibregl-popup-content small { color: var(--tenue); }
.globo .maplibregl-popup-tip { display: none; }

.maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(255,255,255,.85); }

@media (max-width: 900px) {
  main { flex-direction: column; }
  aside { width: 100%; height: 45%; border-left: none; border-top: 1px solid var(--borde); }
}

/* --- página de carga de la tarea --- */

.volver { color: var(--acento); text-decoration: none; font-size: .88rem; }
.volver:hover { text-decoration: underline; }

aside.ancha { width: 30rem; overflow-y: auto; }

.bloque { padding: .9rem 1rem; border-bottom: 1px solid var(--borde); }
.bloque h2 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tenue); margin: 0 0 .7rem; font-weight: 600;
}

.soltar {
  border: 2px dashed var(--borde); border-radius: 6px;
  padding: 1.4rem 1rem; text-align: center; transition: all .15s;
}
.soltar.encima { border-color: var(--acento); background: rgba(77,163,255,.07); }
.soltar p { margin: .2rem 0; }
.chico { color: var(--tenue); font-size: .82rem; }
.soltar code {
  background: var(--fondo); padding: .05rem .3rem; border-radius: 3px;
  font-size: .82rem;
}

.boton {
  background: var(--borde); color: var(--texto); border: none;
  border-radius: 4px; padding: .4rem .85rem; cursor: pointer;
  font-size: .85rem; margin-top: .6rem;
}
.boton:hover { background: #3a4453; }
.boton.principal { background: var(--acento); color: #0b1017; font-weight: 600; }
.boton.principal:hover { filter: brightness(1.12); }
.boton.chico { padding: .18rem .55rem; font-size: .78rem; margin: 0; }
/* Para que un enlace se vea igual que un boton: el de la tarea del dia lleva
 * a otra pagina, asi que tiene que ser <a>, pero pasaba desapercibido. */
a.boton { display: inline-block; text-decoration: none; line-height: 1.5; }
a.boton:hover { text-decoration: none; }

.mensaje { font-size: .86rem; color: var(--tenue); min-height: 1.2rem; margin: .6rem 0 0; }
.mensaje.bien { color: var(--bien); }
.mensaje.mal { color: var(--mal); }

.resumen {
  display: grid; grid-template-columns: auto 1fr; gap: .28rem .9rem;
  margin: 0 0 .9rem; font-size: .88rem;
}
.resumen dt { color: var(--tenue); }
.resumen dd { margin: 0; font-variant-numeric: tabular-nums; }

table.puntos { width: 100%; border-collapse: collapse; font-size: .86rem; display: table; }
table.puntos th {
  text-align: left; color: var(--tenue); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; padding: .35rem .4rem;
  border-bottom: 1px solid var(--borde); position: static;
}
table.puntos td { padding: .35rem .4rem; border-bottom: 1px solid rgba(43,51,65,.5); }
table.puntos tbody tr { cursor: pointer; display: table-row; }
table.puntos tbody tr:hover { background: rgba(77,163,255,.08); }
.tenue { color: var(--tenue); }

.chapa-punto {
  width: 22px; height: 22px; border-radius: 50%; color: #0b1017;
  font: 700 12px/22px system-ui, sans-serif; text-align: center;
  border: 2px solid rgba(18,22,28,.75);
}
.chapa-punto.chica { width: 18px; height: 18px; line-height: 18px; font-size: 11px; }

.lista { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.lista li {
  display: flex; justify-content: space-between; align-items: center;
  padding: .38rem 0; border-bottom: 1px solid rgba(43,51,65,.5); gap: .6rem;
}
.etiqueta-activa {
  background: var(--bien); color: #0b1017; font-weight: 700; font-size: .72rem;
  padding: .1rem .45rem; border-radius: 3px; text-transform: uppercase;
}

/* --- pagina de configuracion --- */

.puerta { flex: 1; display: flex; align-items: center; justify-content: center; }
.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
  padding: 1.6rem 1.8rem; width: min(24rem, 92vw);
}
.tarjeta h2 { margin: 0 0 .3rem; font-size: 1rem; }
.tarjeta form { display: flex; gap: .5rem; margin-top: .9rem; }
.tarjeta .boton { margin-top: 0; }

.config { flex: 1; overflow-y: auto; display: block; }

.pestanas {
  display: flex; gap: .3rem; padding: .5rem .9rem 0;
  border-bottom: 1px solid var(--borde); background: var(--panel);
  position: sticky; top: 0; z-index: 2;
}
.pestana {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--tenue); padding: .45rem .8rem; cursor: pointer;
  font: inherit; font-size: .88rem;
}
.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--acento); border-bottom-color: var(--acento); }

.hoja { max-width: 60rem; }
.hoja .bloque h2 { font-size: .8rem; }

.rejilla {
  display: grid; gap: .6rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: end;
}
.rejilla label { display: flex; flex-direction: column; gap: .25rem;
                 font-size: .78rem; color: var(--tenue); }
.rejilla .texto { min-width: 0; flex: none; }
.rejilla .boton { margin-top: 0; height: 2rem; }

.resumen-activa h3 { font-size: .95rem; margin: .8rem 0 .5rem; }
.puntos-tarea { margin: .3rem 0 0; padding-left: 1.3rem; font-size: .88rem; }
.puntos-tarea li { padding: .12rem 0; }

#tabla-pilotos code { font-size: .82rem; color: var(--tenue); }
#tabla-pilotos, #tabla-handicaps { margin-top: .8rem; }

/* --- simulador y tabla de posiciones --- */

.reloj {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--acento);
  background: var(--fondo); padding: .18rem .55rem; border-radius: 4px;
  font-size: .9rem;
}

.barra-simulador {
  background: var(--panel); border-bottom: 1px solid var(--borde);
  padding: .6rem 1rem; display: flex; flex-direction: column; gap: .5rem;
}
.barra-simulador .fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.barra-simulador .boton { margin-top: 0; }
.texto {
  flex: 1; min-width: 16rem; background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 4px; padding: .35rem .55rem;
  font-size: .85rem; font-family: inherit;
}
select {
  background: var(--fondo); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 4px; padding: .28rem .4rem; font-size: .85rem; font-family: inherit;
}
.linea-tiempo { flex: 1; min-width: 12rem; accent-color: var(--acento); }
.problemas { margin: 0; font-size: .78rem; color: var(--tibio); line-height: 1.5; }
.problemas strong { color: var(--tibio); }

.cabecera-tarea {
  padding: .5rem .8rem; border-bottom: 1px solid var(--borde);
  font-size: .85rem; color: var(--tenue); background: rgba(77,163,255,.06);
}
.cabecera-tarea strong { color: var(--texto); }
.nota-orden { font-size: .76rem; color: #7d8797; margin-top: .15rem; }
.nota-orden a { color: var(--acento); text-decoration: none; }
.nota-orden a:hover { text-decoration: underline; }

.puesto {
  display: inline-block; min-width: 1.4rem; color: var(--tenue);
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: .8rem;
}
.llego { color: var(--tibio); font-weight: 700; }
.filtros select { flex: 1; }