/* Estilo común de las páginas que no son el panel: entrada, Admin,
   Captación e instalador. Los mismos colores y tipografías del panel. */

/* ---------- Cuánto sitio hay y cuánta letra cabe ----------
   El contenido se queda en 1240 px de ancho mientras la pantalla no dé
   para más, que es el caso del portátil de 1366. Cuando sobra sitio se
   ensancha, y con el sitio ganado toda la letra sube de golpe: un 8 % en
   pantallas medianas y un 15 % en las grandes.

   El factor de la letra va en --k, y todos los "font-size" del proyecto
   lo llevan multiplicado. Si --k no existiera valdría 1 y todo quedaría
   exactamente como antes; esa es la red de seguridad.

   --caja es el ancho del contenido y --caja-estrecha el de las páginas
   de formulario (el perfil), que no deben estirarse tanto. */
:root{
  --k:1; --caja:1240px; --caja-estrecha:720px;
  --bg:#EFF3F2; --panel:#FFFFFF; --panel2:#E7ECEB; --sunken:#F4F7F6;
  --ink:#101E1C; --ink2:#38504C; --muted:#556763; --line:#D3DCDA;
  --accent:#0D6E62; --accent-soft:#DCEDEA;
  --dep:#8A5A06; --dep-soft:#F8EEDC;
  --app:#1A5A9E; --app-soft:#DEEAF6;
  --gnd:#5C6B68; --gnd-soft:#E5EAE9;
  --alerta:#C62828; --alerta-soft:#FBE9E9;
  --radius:8px;
  --shadow:0 1px 1px rgba(16,30,28,.05), 0 6px 18px rgba(16,30,28,.06);
  --disp:"Barlow Condensed","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow",-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1211; --panel:#111B19; --panel2:#182422; --sunken:#0D1615;
    --ink:#E3EDEB; --ink2:#B6C7C3; --muted:#8B9F9B; --line:#22322F;
    --accent:#4CC4B0; --accent-soft:#0F2B27;
    --dep:#E2A950; --dep-soft:#2B2213;
    --app:#6FB0E8; --app-soft:#12232F;
    --gnd:#8B9F9B; --gnd-soft:#1A2422;
    --alerta:#FF6B6B; --alerta-soft:#2B1414;
    --shadow:0 1px 1px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
  }
}
/* Oscuro porque lo has pedido tú, tenga el ordenador lo que tenga */
:root[data-theme="dark"]{
  --bg:#0A1211; --panel:#111B19; --panel2:#182422; --sunken:#0D1615;
  --ink:#E3EDEB; --ink2:#B6C7C3; --muted:#8B9F9B; --line:#22322F;
  --accent:#4CC4B0; --accent-soft:#0F2B27;
  --dep:#E2A950; --dep-soft:#2B2213;
  --app:#6FB0E8; --app-soft:#12232F;
  --gnd:#8B9F9B; --gnd-soft:#1A2422;
  --alerta:#FF6B6B; --alerta-soft:#2B1414;
  --shadow:0 1px 1px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
}
:root[data-theme="dark"] input[type=text],
:root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] select{color-scheme:dark}

/* Los dos escalones. Van después de los colores a propósito: aquí sólo
   se toca el tamaño, nunca el tema, así que claro y oscuro se comportan
   igual. Los cortes están medidos: a 1240 px la tabla de pilotos de
   Administración va justa y no admite más letra; a 1440 y a 1600 sí. */
@media (min-width:1400px){
  :root{--k:1.08; --caja:1440px; --caja-estrecha:780px}
}
@media (min-width:1700px){
  :root{--k:1.15; --caja:1600px; --caja-estrecha:820px}
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:calc(15px * var(--k,1));line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);}
[hidden]{display:none !important}
a{color:var(--app)}

.brand{font-family:var(--disp);font-weight:700;font-size:calc(23px * var(--k,1));letter-spacing:.04em;text-transform:uppercase;line-height:1}
.brand span{color:var(--accent)}
/* ---------- El logotipo ----------
   Donde antes ponía "VENTUS OPS" en letra ahora va el logotipo. Ocupa
   exactamente el mismo alto que ponía la letra (23 px), así que no
   cambia la altura de ninguna barra. Hay dos versiones, la blanca para
   el tema oscuro y la azul para el claro; se cambia una por otra con el
   mismo criterio que el resto de los colores de la página. */
.brand.logo{display:flex;align-items:center;line-height:0}
.brand.logo img{height:23px;width:auto;display:block}
.brand.logo .desc{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand.logo .lgo-osc{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand.logo .lgo-cla{display:none}
  :root:not([data-theme="light"]) .brand.logo .lgo-osc{display:block}
}
:root[data-theme="dark"] .brand.logo .lgo-cla{display:none}
:root[data-theme="dark"] .brand.logo .lgo-osc{display:block}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- Formularios ---------- */
.campo{margin-bottom:16px}
.campo label{display:block;font-family:var(--mono);font-size:max(12px, calc(10.5px * var(--k,1)));letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-weight:500}
input[type=text],input[type=password],select{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:11px 12px;font-family:var(--body);font-size:calc(15px * var(--k,1));color:var(--ink)}
input.mono{font-family:var(--mono)}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:6px;text-decoration:none;
  padding:11px 18px;font-family:var(--body);font-weight:600;font-size:calc(15px * var(--k,1));cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ancho{display:block;width:100%;text-align:center}
.btn.gris{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.radios{display:flex;gap:10px}
.radios label{flex:1;border:1px solid var(--line);border-radius:6px;padding:9px 12px;font-size:calc(14px * var(--k,1));
  text-align:center;background:var(--panel);cursor:pointer;font-family:var(--body);letter-spacing:0;
  text-transform:none;color:var(--ink);margin:0}
.radios input{position:absolute;opacity:0;pointer-events:none}
.radios input:checked + span{color:var(--accent);font-weight:600}
.radios label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.checkline{display:flex;align-items:center;gap:9px;font-size:calc(14px * var(--k,1));padding-top:6px}
.checkline input{width:17px;height:17px}
input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px}

/* ---------- Avisos ---------- */
.aviso{border-radius:var(--radius);padding:11px 14px;font-size:calc(13.5px * var(--k,1));margin-bottom:16px;
  background:var(--dep-soft);border:1px solid var(--dep);border-left-width:3px;color:var(--ink2);font-weight:500}
.aviso b{color:var(--ink)}
.aviso.mal{background:var(--alerta-soft);border-color:var(--alerta)}
.aviso.bien{background:var(--accent-soft);border-color:var(--accent)}

/* ---------- Barra de pestañas ---------- */
.nav{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.nav .dentro{max-width:var(--caja);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* Las pestañas se parten en dos renglones si no caben, en vez de
   empujar la página a lo ancho. En el móvil iban justas de un píxel o
   dos y con la letra con más cuerpo ya no caben. */
.nav .tabs{display:flex;gap:6px;flex-wrap:wrap}
.nav .tab{font-size:calc(13.5px * var(--k,1));padding:6px 13px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel);color:var(--ink);text-decoration:none;font-weight:500}
.nav .tab:hover{border-color:var(--accent);color:var(--accent)}
.nav .tab.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.nav .quien{margin-left:auto;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:calc(13px * var(--k,1));color:var(--muted);font-weight:500}
.nav .quien a{color:var(--muted);font-size:calc(12.5px * var(--k,1));font-weight:500}
.nav .quien a:hover{color:var(--accent)}

/* ---------- Claro / oscuro / del sistema ----------
   Tres botoncitos pegados, del alto justo para no estirar la barra. */
.tema{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--panel);line-height:0}
.tema .tm{border:0;background:none;color:var(--muted);cursor:pointer;
  padding:3px 9px;font-size:calc(15px * var(--k,1));line-height:1.3;border-right:1px solid var(--line)}
.tema .tm:last-child{border-right:0}
.tema .tm:hover{color:var(--ink);background:var(--sunken)}
.tema .tm.on{background:var(--accent-soft);color:var(--accent)}

/* ---------- Páginas con contenido ---------- */
.wrap{max-width:var(--caja);margin:0 auto;padding:0 16px 56px}
/* Con el contenido a 1600 px un párrafo de lado a lado se lee peor que
   antes: el ojo pierde el renglón. Las tablas, las fichas y el mapa sí
   aprovechan todo el ancho; el texto corrido se queda en 80 caracteres,
   que es la medida de siempre. */
.wrap p{max-width:68ch}
/* Los recuadros de aviso llevan el texto suelto, sin <p>, así que el
   tope va en la propia caja. A 1600 px un aviso de lado a lado era un
   renglón de 130 caracteres. */
.aviso{max-width:72ch}
.sec-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:24px 0 9px}
.sec-head h2{font-family:var(--disp);font-weight:600;font-size:calc(21px * var(--k,1));letter-spacing:.03em;
  text-transform:uppercase;margin:0}
.sec-head p{margin:0;font-size:calc(13px * var(--k,1));color:var(--muted);font-weight:500}

/* Las barras de desplazamiento de las cajas que se mueven por dentro se
   ven: con la barra fina y gris de fábrica parecía que la lista se
   acababa donde se acababa la caja. */
.cp-scroll, .est-scroll, .tablewrap, .vent-cuerpo{
  scrollbar-width:thin; scrollbar-color:var(--accent) var(--panel2);
}
.cp-scroll::-webkit-scrollbar, .est-scroll::-webkit-scrollbar,
.tablewrap::-webkit-scrollbar, .vent-cuerpo::-webkit-scrollbar{width:12px;height:12px}
.cp-scroll::-webkit-scrollbar-track, .est-scroll::-webkit-scrollbar-track,
.tablewrap::-webkit-scrollbar-track, .vent-cuerpo::-webkit-scrollbar-track{
  background:var(--panel2);border-radius:6px}
.cp-scroll::-webkit-scrollbar-thumb, .est-scroll::-webkit-scrollbar-thumb,
.tablewrap::-webkit-scrollbar-thumb, .vent-cuerpo::-webkit-scrollbar-thumb{
  background:var(--accent);border-radius:6px;border:3px solid var(--panel2)}

/* Las esquinas se recortan con "clip" y no con "hidden": hidden
   convierte la tabla en su propia caja de desplazamiento y eso anula
   el pegado de la cabecera. Con clip se recorta igual y la cabecera
   puede quedarse fija. */
table.tabla{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);overflow:clip;box-shadow:var(--shadow)}
/* La fila de cabecera se queda arriba mientras bajas por la tabla, que
   si no, a la quinta fila ya no sabes qué columna es cada número.
   --alto-tabla lo pone cada página según lo que tenga fijo por encima
   (la barra de pestañas y, en Captación, los cuadros de cifras). */
table.tabla th{font-family:var(--mono);font-size:max(12px, calc(10.5px * var(--k,1)));letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:10px 13px;background:var(--sunken);border-bottom:1px solid var(--line);
  position:sticky;top:var(--alto-tabla,var(--alto-nav,0px));z-index:4;font-weight:500}
table.tabla td{padding:11px 13px;border-bottom:1px solid var(--line);font-size:calc(14px * var(--k,1));vertical-align:middle}
table.tabla tr:last-child td{border-bottom:0}
table.tabla .cs{font-family:var(--disp);font-weight:700;font-size:calc(19px * var(--k,1));line-height:1}
.etq{display:inline-block;font-family:var(--mono);font-size:max(12px, calc(10.5px * var(--k,1)));letter-spacing:.08em;text-transform:uppercase;
  border:1px solid;border-radius:4px;padding:2px 8px;font-weight:500}
.etq.adm{color:var(--app);background:var(--app-soft);border-color:var(--app)}
.etq.usu{color:var(--gnd);background:var(--gnd-soft);border-color:var(--gnd)}
.etq.off{color:var(--alerta);background:var(--alerta-soft);border-color:var(--alerta)}
.ficha{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
@media (max-width:700px){.rejilla{grid-template-columns:1fr}}
.rejilla .ancho2{grid-column:1 / -1}
.pie-form{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:16px}
.pie-form .txt{font-size:calc(12.5px * var(--k,1));color:var(--muted);font-weight:500}
.enlinea{display:flex;gap:9px}
.enlinea input{flex:1}