:root {
  --fondo: #f5f6f8;
  --panel: #ffffff;
  --texto: #1b1f24;
  --suave: #5b6470;
  --borde: #dde1e6;
  --acento: #155e75;
  --acento-texto: #ffffff;
  --acento-suave: #e3f1f5;
  --ok: #1f7a4d;
  --ok-suave: #e5f4ec;
  --aviso: #8a5a00;
  --aviso-suave: #fdf3dc;
  --error: #b42318;
  --error-suave: #fdecea;
  --alto: #b42318;
  --alto-suave: #fde4e1;
  --medio: #8a5a00;
  --medio-suave: #fcefd2;
  --fila-alterna: #fafbfc;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #111418;
    --panel: #1a1e24;
    --texto: #e6e8eb;
    --suave: #9aa3ad;
    --borde: #2e343c;
    --acento: #4fb3cc;
    --acento-texto: #08232b;
    --acento-suave: #12313a;
    --ok: #5cc995;
    --ok-suave: #15301f;
    --aviso: #f0bf5a;
    --aviso-suave: #33290f;
    --error: #ff8a80;
    --error-suave: #3a1715;
    --alto: #ff8a80;
    --alto-suave: #3f1a17;
    --medio: #f0bf5a;
    --medio-suave: #3a2d10;
    --fila-alterna: #1d2228;
    --sombra: none;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #111418;
  --panel: #1a1e24;
  --texto: #e6e8eb;
  --suave: #9aa3ad;
  --borde: #2e343c;
  --acento: #4fb3cc;
  --acento-texto: #08232b;
  --acento-suave: #12313a;
  --ok: #5cc995;
  --ok-suave: #15301f;
  --aviso: #f0bf5a;
  --aviso-suave: #33290f;
  --error: #ff8a80;
  --error-suave: #3a1715;
  --alto: #ff8a80;
  --alto-suave: #3f1a17;
  --medio: #f0bf5a;
  --medio-suave: #3a2d10;
  --fila-alterna: #1d2228;
  --sombra: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1, h2 { margin: 0; line-height: 1.2; }

.cabecera {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  padding: 16px max(16px, calc((100vw - 1180px) / 2));
  background: var(--panel); border-bottom: 1px solid var(--borde);
}
.marca { display: flex; gap: 12px; align-items: center; }
.logo {
  width: 36px; height: 36px; border-radius: 9px; background: var(--acento);
  -webkit-mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 21l6-6 4 4 8-9' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100%;
}
.marca h1 { font-size: 20px; letter-spacing: .04em; }
.sub { margin: 0; color: var(--suave); font-size: 13px; }
.versiones { color: var(--suave); font-size: 13px; text-align: right; }
.versiones .mal { color: var(--error); }

main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 8px; display: grid; gap: 16px; }
.panel {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 20px;
  box-shadow: var(--sombra); min-width: 0;
}
.panel h2 { font-size: 17px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
/* Paneles 1 y 2: se pliegan tras calcular; la cabecera los abre y cierra. */
.plegar { all: unset; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; cursor: pointer;
  white-space: nowrap; }
.plegar:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 6px; }
.plegar::after { content: "▾"; margin-left: auto; font-size: 12px; color: var(--suave); transition: transform .15s; }
.resumen-plegado { font-weight: 400; font-size: 14px; color: var(--suave); min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.panel.plegado h2 { margin-bottom: 0; }
.panel.plegado .plegar::after { transform: rotate(-90deg); }
.panel.plegado > .cuerpo { display: none; }
.paso {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--acento-suave); color: var(--acento); font-size: 13px; font-weight: 700;
}

.zona {
  display: grid; gap: 4px; justify-items: center; text-align: center; cursor: pointer;
  padding: 28px 16px; border: 2px dashed var(--borde); border-radius: 10px; transition: border-color .15s, background .15s;
}
.zona:hover, .zona.encima { border-color: var(--acento); background: var(--acento-suave); }
.zona:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.zona input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zona-ayuda { color: var(--suave); font-size: 13px; }
/* Ficheros elegidos: cada uno con lo que es (roster, actividades o no reconocido) */
.ficheros { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.ficheros li {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 10px;
  border: 1px solid var(--borde); border-radius: 8px;
}
.fichero-tipo {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--acento-suave);
  color: var(--acento); white-space: nowrap;
}
.fichero-tipo.raro { background: var(--aviso-suave); color: var(--aviso); }
.ficheros .nombre { font-weight: 600; overflow-wrap: anywhere; }
.ficheros .tam { color: var(--suave); font-size: 13px; }
.ficheros .nota { color: var(--suave); font-size: 13px; width: 100%; }
.ficheros .enlace { margin-left: auto; font-size: 13px; }

.opciones { margin: 16px 0; }
.opciones summary { cursor: pointer; font-weight: 600; width: fit-content; }
.opciones-cuerpo { display: grid; gap: 4px; margin: 10px 0 0; }
.opciones-cuerpo .ayuda { margin: 0 0 0 26px; }
.check { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
input[type="text"], input[type="search"] {
  font: inherit; color: var(--texto); background: var(--panel);
  border: 1px solid var(--borde); border-radius: 8px; padding: 7px 10px; min-width: 0;
}
input:disabled { opacity: .55; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.boton {
  font: inherit; font-weight: 600; border-radius: 8px; padding: 9px 18px; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px;
}
.boton.primario { background: var(--acento); color: var(--acento-texto); }
.boton.secundario { background: var(--panel); color: var(--texto); border-color: var(--borde); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton.pequeno { padding: 4px 12px; }
.estado { color: var(--suave); font-size: 14px; }
.estado.trabajando::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
  border: 2px solid var(--borde); border-top-color: var(--acento); border-radius: 50%; animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.caja { border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.caja h3 { margin: 0 0 6px; font-size: 15px; }
.caja ul { margin: 0; padding-left: 20px; }
.caja li + li { margin-top: 4px; }
.caja.ok { background: var(--ok-suave); }
.caja.ok h3 { color: var(--ok); }
.caja.info { background: var(--acento-suave); }
.caja.info h3 { color: var(--acento); }
.caja.aviso { background: var(--aviso-suave); }
.caja.aviso h3 { color: var(--aviso); }
.caja.error { background: var(--error-suave); }
.caja.error h3 { color: var(--error); }
.resumen-lectura { color: var(--suave); margin: 0 0 12px; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tarjeta { border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; }
.tarjeta .valor { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tarjeta .etiqueta { color: var(--suave); font-size: 13px; }
.tarjeta.alta .valor { color: var(--alto); }

.descargas { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 16px; }
.archivos { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.archivos a { color: var(--acento); }
.archivos .tam { color: var(--suave); }

.tabla-controles { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 10px; }
#filtro-trip { width: 150px; font-variant-numeric: tabular-nums; }
.contador { color: var(--suave); font-size: 14px; margin-left: auto; }
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--borde); }
th { position: sticky; top: 0; background: var(--panel); font-weight: 600; cursor: pointer; user-select: none; }
th.num, td.num { text-align: right; }
th[aria-sort="ascending"]::after { content: " ▲"; font-size: 10px; }
th[aria-sort="descending"]::after { content: " ▼"; font-size: 10px; }
tbody tr:nth-child(even) { background: var(--fila-alterna); }
tbody tr:last-child td { border-bottom: 0; }
tr.encima td:first-child { box-shadow: inset 3px 0 0 var(--alto); }
.sp { display: inline-block; min-width: 46px; padding: 1px 6px; border-radius: 6px; text-align: right; }
.sp.medio { background: var(--medio-suave); color: var(--medio); font-weight: 600; }
.sp.alto { background: var(--alto-suave); color: var(--alto); font-weight: 700; }
.vacio { color: var(--suave); }
.paginacion { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 10px; color: var(--suave); }

.pie { max-width: 1180px; margin: 0 auto; padding: 4px 16px 28px; color: var(--suave); font-size: 13px; }

@media (max-width: 600px) {
  .panel { padding: 16px; }
  .versiones { text-align: left; }
  .contador { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------- pestañas */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: 4px 0 14px; }
.pestanas [role="tab"] {
  font: inherit; font-weight: 600; color: var(--suave); background: none; border: 0; cursor: pointer;
  padding: 8px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestanas [role="tab"][aria-selected="true"] { color: var(--acento); border-bottom-color: var(--acento); }
.enlace {
  font: inherit; color: var(--acento); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ---------------------------------------------------------------- vista por tripulante */
:root {
  --f-deep: #e6e8f6; --f-early: #fbf2e1; --f-late: #e6f1ee; --f-latefinish: #fbe4da; --f-nightend: #f1e8f3;
  --guia: rgba(0, 0, 0, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --f-deep: rgba(120, 130, 220, .13); --f-early: rgba(240, 190, 90, .10); --f-late: rgba(90, 180, 150, .10);
    --f-latefinish: rgba(240, 130, 90, .13); --f-nightend: rgba(190, 120, 200, .12);
    --guia: rgba(255, 255, 255, .06);
  }
}
:root[data-tema="oscuro"] {
  --f-deep: rgba(120, 130, 220, .13); --f-early: rgba(240, 190, 90, .10); --f-late: rgba(90, 180, 150, .10);
  --f-latefinish: rgba(240, 130, 90, .13); --f-nightend: rgba(190, 120, 200, .12);
  --guia: rgba(255, 255, 255, .06);
}
.trip-controles { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.campo { display: inline-flex; gap: 6px; align-items: center; }
.campo label { display: inline-flex; gap: 6px; align-items: center; }
select, input[type="date"] {
  font: inherit; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); border-radius: 8px;
  padding: 6px 8px;
}
.segmentado { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.segmentado button {
  font: inherit; font-size: 14px; background: var(--panel); color: var(--texto); border: 0; padding: 6px 12px; cursor: pointer;
}
.segmentado button + button { border-left: 1px solid var(--borde); }
.segmentado button[aria-pressed="true"] { background: var(--acento); color: var(--acento-texto); font-weight: 600; }
.mostrar { position: relative; }
.mostrar summary {
  cursor: pointer; list-style: none; border: 1px solid var(--borde); border-radius: 8px; padding: 6px 12px; font-size: 14px;
}
.mostrar summary::-webkit-details-marker { display: none; }
.mostrar summary::after { content: " ▾"; font-size: 11px; }
.mostrar-opciones {
  position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; min-width: 260px; display: grid; gap: 8px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; box-shadow: var(--sombra);
}
@media (max-width: 600px) { .mostrar-opciones { left: 0; right: auto; } }

#vista-tripulante { position: relative; }
.crono-envoltorio { position: relative; overflow-x: auto; border: 1px solid var(--borde); border-radius: 10px; }
.crono { display: grid; grid-template-columns: max-content minmax(560px, 1fr); min-width: 900px; font-size: 13px; }
.crono-izq { display: grid; grid-auto-rows: 34px; border-right: 1px solid var(--borde); align-content: start; }
.crono-izq > .crono-cab { height: 28px; }
.crono-cab {
  display: flex; align-items: center; padding: 0 10px; font-weight: 600; color: var(--suave);
  border-bottom: 1px solid var(--borde); white-space: nowrap; background: var(--panel);
}
.crono-izq { grid-template-rows: 28px; }
.crono-celda {
  display: flex; align-items: center; padding: 0 10px; white-space: nowrap; border-bottom: 1px solid var(--borde);
  font-variant-numeric: tabular-nums;
}
.crono-cab.num, .crono-celda.num { justify-content: flex-end; }
.crono-der { position: relative; min-width: 0; }
.crono-franjas-nombres { position: relative; height: 28px; padding: 0; }
.crono-franjas-nombres span {
  position: absolute; top: 0; bottom: 0; display: block; line-height: 28px; text-align: center; padding: 0 3px;
  font-size: 12px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.crono-cuerpo { position: relative; }
.crono-franja { position: absolute; top: 0; bottom: 0; }
.f-deep { background: var(--f-deep); } .f-early { background: var(--f-early); } .f-late { background: var(--f-late); }
.f-latefinish { background: var(--f-latefinish); } .f-nightend { background: var(--f-nightend); }
.crono-guia { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--guia); }
.crono-linea { position: absolute; left: 0; right: 0; height: 1px; background: var(--borde); margin-top: -1px; }
.crono-barra {
  position: absolute; height: 20px; border: 0; border-radius: 3px; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset;
}
.crono-barra:hover, .crono-barra:focus-visible { outline: 2px solid var(--texto); outline-offset: 1px; z-index: 3; }
.crono-barra.encima { box-shadow: 0 0 0 2px var(--alto) inset; }
.crono-barra.sin_calculo {
  background: repeating-linear-gradient(135deg, var(--borde) 0 6px, transparent 6px 10px); box-shadow: 0 0 0 1px var(--suave) inset;
}
.crono-barra.descartado {
  background: repeating-linear-gradient(45deg, var(--error-suave) 0 5px, transparent 5px 9px);
  box-shadow: 0 0 0 1px var(--error) inset; opacity: .9;
}
.crono-etiqueta {
  position: absolute; height: 20px; display: flex; align-items: center; white-space: pre; font-size: 12px;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.crono-eje { position: relative; height: 24px; border-top: 1px solid var(--borde); color: var(--suave); font-size: 12px; }
.crono-eje span { position: absolute; top: 4px; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.crono-eje span:first-child { transform: none; padding-left: 3px; }
.crono-eje span:last-child { transform: translateX(-100%); padding-right: 3px; }
.crono-tip {
  position: absolute; z-index: 10; pointer-events: none; background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  font-size: 13px; line-height: 1.45; max-width: 360px;
}
.tip-clave { color: var(--suave); }
.crono-leyenda {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 10px; color: var(--suave); font-size: 13px;
}
.ley-gradiente { width: 140px; height: 12px; border-radius: 3px; }
.ley-valor { font-variant-numeric: tabular-nums; }
.ley-muestra { width: 22px; height: 12px; border-radius: 3px; margin-left: 8px; }
.ley-muestra.encima { background: var(--panel); box-shadow: 0 0 0 2px var(--alto) inset; }
.ley-muestra.sin_calculo { background: repeating-linear-gradient(135deg, var(--borde) 0 4px, transparent 4px 7px); box-shadow: 0 0 0 1px var(--suave) inset; }
.ley-muestra.descartado { background: repeating-linear-gradient(45deg, var(--error-suave) 0 4px, transparent 4px 7px); box-shadow: 0 0 0 1px var(--error) inset; }
.ley-reloj { margin-left: auto; }

.crono-celda.sin-datos { color: var(--suave); font-style: italic; }
.crono-sin-datos {
  position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center;
  color: var(--suave); font-size: 12px; font-style: italic; letter-spacing: .02em;
  background: repeating-linear-gradient(135deg, transparent 0 8px, var(--guia) 8px 10px);
}

.tema {
  font: inherit; font-size: 13px; color: var(--texto); background: var(--panel); border: 1px solid var(--borde);
  border-radius: 999px; padding: 4px 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
}
.cabecera-derecha { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: flex-end; }
#trip-ref { width: 150px; font-variant-numeric: tabular-nums; }
.ayuda { color: var(--suave); font-size: 13px; }

/* ---------------------------------------------------------------- actividades */
.crono-barra.con-actividades { overflow: hidden; }
.crono-barra.con-actividades::before {
  content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .55); border-radius: inherit;
}
.tramo { position: absolute; top: 0; bottom: 0; }
.tramo-vuelo { background: inherit; z-index: 1; box-shadow: inset 1px 0 0 rgba(0, 0, 0, .3), inset -1px 0 0 rgba(0, 0, 0, .3); }
.tramo-pos {
  z-index: 1; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .28) 0 3px, transparent 3px 6px);
}
.tramo-otro { z-index: 1; box-shadow: inset 1px 0 0 rgba(0, 0, 0, .18); }
.ley-muestra.ley-vuelo { background: rgb(242, 150, 38); }
.ley-muestra.ley-tierra { background: rgba(242, 150, 38, .4); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .crono-barra.con-actividades::before { background: rgba(17, 20, 24, .5); }
}
:root[data-tema="oscuro"] .crono-barra.con-actividades::before { background: rgba(17, 20, 24, .5); }
/* «¿Qué trae?» de la descarga detallada: al abrirse, ocupa su propia línea bajo los controles (no se sale por los lados) */
.detalle-que[open] { flex-basis: 100%; }
.detalle-que summary { width: fit-content; }
.detalle-que .detalle-ayuda { position: static; max-width: 760px; margin-top: 8px; box-shadow: none; font-size: 14px; }
.detalle-ayuda p { margin: 0; }
.detalle-ayuda ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* ---------------------------------------------------------------- motor (fase 6, D8) */
.motor-elegir { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 12px; }
#motor-ruta { flex: 1 1 320px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
#panel-motor .ayuda { margin: 8px 0 0; }
.versiones .enlace { font-size: inherit; }

/* ---------------------------------------------------------------- servidor: usuarios y biblioteca (fase 6b) */
.entrar { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }
.form-entrar { display: grid; gap: 12px; }
.form-entrar .acciones { margin-top: 4px; }
.campo-bloque { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.campo-bloque input { font-weight: 400; }
input[type="password"] {
  font: inherit; color: var(--texto); background: var(--panel);
  border: 1px solid var(--borde); border-radius: 8px; padding: 7px 10px; min-width: 0;
}
.usuario .menu-usuario summary { font-size: 13px; padding: 4px 12px; border-radius: 999px; }
.usuario .mostrar-opciones { min-width: 220px; }
.usuario .mostrar-opciones .enlace { justify-self: start; }
#panel-biblioteca th, #panel-usuarios th { cursor: default; }
#tabla-biblioteca tr.abierto td { background: var(--acento-suave); }
#tabla-biblioteca td.acciones-fila, #tabla-usuarios td.acciones-fila { display: flex; gap: 12px; }
.enlace.peligro { color: var(--error); }
.form-linea { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 14px 0 6px; }
.form-titulo { font-weight: 600; }
.clave-fila { display: inline-flex; gap: 8px; align-items: center; }
.registro { margin-top: 14px; }
.registro summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
#tabla-registro td:nth-child(4) { white-space: normal; }