:root{--navy:#1D3557;--navy2:#26436b;--cream:#f4f1e8;--ink:#20242b;--line:#d8d2c2;--gold:#b9892f;--muted:#6b6659;--danger:#8a2b2b;--green:#2c6e49;--amber:#8a6a12}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;background:#e9e5da;color:var(--ink)}
.top{background:var(--navy);color:#fff;padding:11px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.anchor{font-size:24px}
.top b{font-size:16px}
.top .sub{display:block;font-size:11px;opacity:.8}
nav{display:flex;gap:2px;flex-wrap:wrap}
nav a{color:#cdd6e4;text-decoration:none;font-size:13px;font-weight:600;padding:7px 10px;border-radius:7px}
nav a:hover{background:#ffffff22;color:#fff}
nav a.salir{color:#e8b9b0}
.who{margin-left:auto;font-size:12px;opacity:.9}
.wrap{max-width:1100px;margin:0 auto;padding:18px 20px 40px}
.flash{background:#e2efe6;border:1px solid #bfd9c9;color:#1f5c3a;border-radius:9px;padding:10px 14px;margin-bottom:14px;font-size:13.5px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;margin-bottom:15px}
.card h2{margin:0 0 11px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);display:flex;align-items:center;gap:8px}
.card h2 .note{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;background:#e9edf4;color:var(--navy);padding:2px 10px;border-radius:20px}

/* ---------- el atajo no es una sección ----------
   Una tarjeta de resumen y una pantalla se veían exactamente iguales, y
   el resultado fue que el oficial con más horas adentro recorrió la app
   entera y anotó seis veces «esto se repite»: leía el resumen creyendo
   que era el lugar. Nunca llegaba a la pantalla de verdad.

   La información no sobraba; faltaba decir cuál era cuál. El atajo
   queda hundido —fondo más oscuro que el papel de una tarjeta— y su
   enlace lleva la flecha puesta, que es el gesto universal de «esto te
   saca de acá». Es todo presentación: no se quitó ni un dato. */
.card.atajo{background:#f6f3ea}
.card.atajo>h2 .note{background:var(--navy);color:#fff}
.card.atajo>h2 .note a{color:#fff;text-decoration:none}
.card.atajo>h2 .note a:after{content:" →";font-weight:400}
.card.atajo>h2 .note:hover{background:var(--navy2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.item{border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:9px;font-size:13.5px}
.item:last-child{margin-bottom:0}
.i-h{font-weight:600;display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.i-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.pill{font-size:10px;padding:1px 9px;border-radius:20px;white-space:nowrap}
.pill.ok{background:#e2efe6;color:var(--green)}.pill.warn{background:#fbf1d8;color:var(--amber)}
.pill.bad{background:#f6e1e1;color:var(--danger)}.pill.info{background:#e9edf4;color:var(--navy)}
label{display:block;font-size:12px;color:var(--muted);margin:9px 0 4px}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:#fdfdfb}
textarea{resize:vertical;min-height:90px}
button,.btn{border:0;border-radius:8px;padding:10px 15px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;background:var(--navy);color:#fff;text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:var(--navy2)}
.btn.ok,button.ok{background:var(--green)}
.btn.ghost,button.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn.sm,button.sm{padding:6px 11px;font-size:12.5px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 9px;border-bottom:1px solid var(--line);text-align:left}
th{font-size:11px;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:0}
td.num{text-align:center}
.brief{background:#fbfaf6;border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:0 10px 10px 0;padding:13px 15px;font-family:Georgia,serif;font-size:14px;line-height:1.6;white-space:pre-wrap;color:#2c2e29}
.bul{border-left:3px solid var(--navy);padding:3px 0 3px 13px;margin-bottom:12px}
.bul .h{font-size:10.5px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
/* pre-wrap: lo que se escribió con renglones y párrafos se lee igual acá.
   Ojo: quien imprima en .bul .t no debe pasar además por nl2br, o los
   saltos salen dobles. */
.bul .t{font-family:Georgia,serif;font-size:14px;line-height:1.55;white-space:pre-wrap}
.nom-corte{margin-top:16px;color:var(--navy);font-weight:700;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.06em;border-bottom:1px solid var(--line);padding-bottom:5px}
.nom-corte:first-of-type{margin-top:2px}
.hint{font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.5}
.foot{text-align:center;color:var(--muted);font-size:12px;margin:10px 0 22px;font-family:Georgia,serif;font-style:italic}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:15px}
@media(max-width:760px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.metric .v{font-size:23px;font-weight:700;color:var(--navy);line-height:1}
.metric .l{font-size:11px;text-transform:uppercase;color:var(--muted);margin-top:5px}
.rcard{background:var(--cream);border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:430px}
.rcard .t{background:var(--navy);color:#fff;padding:13px 16px;display:flex;align-items:center;gap:11px}
.rcard .crest{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:20px}
.rcard .cs{font-size:18px;font-weight:700}.rcard .rk{font-size:11px;opacity:.75}
.rcard .lg{margin-left:auto;text-align:right;font-size:10px;opacity:.8}.rcard .lg b{display:block;font-size:14px;opacity:1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:var(--cream);padding:12px 4px;text-align:center}
.stat .v{font-size:20px;font-weight:700;color:var(--navy)}.stat .l{font-size:9px;text-transform:uppercase;color:var(--muted)}
.resv{background:#f0eee6;border:1px solid #d5cfbe;border-left:4px solid #8a7a4a;border-radius:0 11px 11px 0;padding:12px 15px;margin-bottom:15px;font-size:13.5px;color:#4a4433}
.login-box{max-width:380px;margin:60px auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}
.login-box h1{font-size:20px;color:var(--navy);margin:0 0 4px;text-align:center}
.login-box .s{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:14px}

/* Los cuatro tamaños que admite el formato al escribir. Van en em y no
   en píxeles: así respetan el tamaño de la caja donde caen —un briefing
   no tiene la misma base que un renglón de la Cartelera— y no se
   desarman en el teléfono. */
/* La barrita de formato, encima de la caja donde se escribe. Chica y
   sobria: es una herramienta, no un menú. */
/* El reproductor: relación 16:9 y ancho completo de la caja. Va con
   loading="lazy" desde el PHP, así no pesa hasta que se lo mira. */
.vid{position:relative;width:100%;aspect-ratio:16/9;margin:10px 0;border:1px solid var(--line);
     border-radius:9px;overflow:hidden;background:#000}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.fbar{display:flex;gap:6px;align-items:center;margin:0 0 5px}
.fb{width:auto;padding:3px 10px;font-size:13px;line-height:1.2;border:1px solid var(--line);
    background:#fff;color:var(--navy);border-radius:6px;cursor:pointer}
.fb:hover{border-color:var(--navy)}
.fb-b{font-weight:700}
.fb-i{font-style:italic;font-family:Georgia,serif}
.fb-u{text-decoration:underline}
.fb-tam{padding:3px 6px;font-size:12px;color:var(--muted)}

.tam1{font-size:.85em}
.tam2{font-size:1em}
.tam3{font-size:1.2em}
.tam4{font-size:1.45em;line-height:1.3}

.gal{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
/* Las miniaturas encuadran, no recortan. Con «cover» una foto
   vertical perdía la cabeza del piloto y una panorámica perdía las
   puntas; el que mira una galería quiere reconocer qué hay, y para eso
   necesita la foto entera. Si sobra lugar queda fondo, y está bien. */
.gal img{width:150px;height:100px;object-fit:contain;border:1px solid var(--line);border-radius:8px;display:block;background:#f1efe8}
.gal a:hover img{border-color:var(--navy)}

/* ===== el visor de fotos =====
   La foto grande se abre acá adentro y no en otra pestaña: la app
   instalada en el teléfono no puede abrir pestañas sin echar al
   piloto afuera. Fondo negro y nada más, que la foto es lo que se
   vino a ver. */
.visor{position:fixed;inset:0;z-index:200;background:#000000ee;display:flex;
  align-items:center;justify-content:center;padding:14px;cursor:zoom-out}
.visor[hidden]{display:none}
.visor img{max-width:100%;max-height:100%;object-fit:contain;cursor:default;
  border-radius:4px;box-shadow:0 0 40px #0008}
.visor-x{position:absolute;top:10px;right:12px;width:42px;height:42px;line-height:1;
  font-size:30px;color:#fff;background:#ffffff22;border:0;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.visor-x:hover{background:#ffffff3a}
/* Mientras la foto está abierta, la página de atrás no se mueve. */
body.sin-scroll{overflow:hidden}
/* ===== láminas =====
   La imagen como ilustración y no como adjunto: al ancho de la caja de
   texto, una debajo de la otra y con aire. Va en la Bitácora y en el
   briefing, que son las dos pantallas que se leen. En el resto de la
   app sigue la tira de miniaturas, que para revisar es mejor.

   Sin recorte: la foto entra entera. Un mapa recortado no sirve para
   nada y una captura sin la mira tampoco. */
/* Las láminas viven adentro del marco del briefing o de la caja de
   texto del libro, así que su aire lo pone el propio contenedor: acá
   sólo se las separa del párrafo de arriba y del de abajo. */
.lams{margin:16px 0}
.lams:first-child{margin-top:0}
.lams:last-child{margin-bottom:0}
/* El párrafo dentro de un bloque ilustrado. El salto de línea lo trae
   el texto (pre-wrap del contenedor), así que no lleva margen propio:
   si lo llevara, un texto sin imágenes quedaría con un renglón de más. */
.tx{margin:0}
.lam{display:block;margin:0 0 14px}
.lam:last-child{margin-bottom:0}
.lam img{display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:4px;background:#f1efe8}
.lam:hover img{border-color:var(--navy)}
/* En el briefing la caja es más ancha que la columna del libro: se le
   pone techo para que una captura apaisada no ocupe media pantalla. */
.brief + .lams, .lams:first-child{max-width:46em}

/* Las fotos ya subidas, numeradas, para decidir dónde entra cada una.
   El número va encima y bien visible: sin eso nadie sabe cuál es la 2. */
.imgs-n{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
.imgn{position:relative;padding:0;width:104px;height:70px;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;background:#f1efe8;cursor:pointer;margin:0}
.imgn img{width:100%;height:100%;object-fit:contain;display:block}
.imgn span{position:absolute;top:3px;left:3px;min-width:19px;height:19px;line-height:19px;
  background:var(--navy);color:#fff;border-radius:5px;font-size:12px;font-weight:700;
  text-align:center;padding:0 3px}
.imgn:hover{border-color:var(--navy)}

/* ===== cuántas salidas =====
   La pregunta va antes del formulario y se contesta con un toque. No
   es un <select>: en el teléfono un desplegable se abre, tapa la
   pantalla y hay que confirmar. Acá los números están a la vista y se
   ve de un vistazo en cuál está parado. */
.cuantas{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 13px;margin-bottom:9px;background:#f4f1e8;
  border:1px solid var(--line);border-radius:10px}
.cuantas-r{font-size:13.5px;font-weight:700;color:var(--navy)}
.cuantas-b{display:flex;gap:6px;margin-left:auto}
.nsal{width:40px;height:38px;margin:0;padding:0;font-size:16px;font-weight:700;
  background:#fff;color:var(--navy);border:1.5px solid var(--line);border-radius:9px;cursor:pointer}
.nsal:hover{border-color:var(--navy)}
.nsal.on{background:var(--navy);color:#fff;border-color:var(--navy)}
@media(max-width:430px){ .cuantas-b{margin-left:0} .cuantas-r{flex:1 1 100%} }

input[type=file]{padding:7px;background:#fff}

/* ===== barra rápida + salas ===== */
.top{position:sticky;top:0;z-index:20}
.quick{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.quick a{color:#cdd6e4;text-decoration:none;font-size:13px;font-weight:600;padding:7px 11px;border-radius:7px;display:inline-flex;align-items:center;gap:6px}
.quick a:hover{background:#ffffff22;color:#fff}
.quick a.on{background:#ffffff1f;color:#fff}
.quick a.salir{color:#e8b9b0}
.badge{background:#c0392b;color:#fff;font-size:10px;font-weight:700;border-radius:20px;padding:1px 7px;min-width:18px;text-align:center}
.who{margin-left:auto;font-size:12px;opacity:.92;display:flex;align-items:center;gap:8px}
.crumb{font-size:12px;color:var(--muted);margin-bottom:12px}
.crumb a{color:var(--navy);text-decoration:none}
.crumb a:hover{text-decoration:underline}
/* salas */
.salas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.salas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.salas{grid-template-columns:1fr}}
.sala{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .12s,box-shadow .12s}
.sala:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000018;border-color:#bfc6cf}
.sala .ph{height:118px;background:#1D3557;position:relative;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.sala .ph span{font-size:34px;opacity:.9;color:#fff;text-shadow:0 2px 8px #0007}
.sala .bd{padding:12px 14px}
.sala .nm{font-weight:700;color:var(--navy);font-size:15px;display:flex;align-items:center;gap:8px}
.sala .ds{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.sala .al{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;background:#f6e1e1;color:var(--danger);border-radius:20px;padding:2px 9px}
/* ===== móvil: tablas como tarjetas ===== */
@media(max-width:700px){
  .top{padding:10px 14px}
  .wrap{padding:14px 12px 30px}
  .card{padding:13px 14px}
  .two{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
  table thead,table tr.hrow{display:none}
  table,table tbody,table tr,table td{display:block;width:100%}
  table tr{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:6px 12px;background:#fff}
  table td{border:0;padding:7px 0;display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:right;flex-wrap:wrap}
  table td:before{content:attr(data-l);color:var(--muted);font-weight:600;text-transform:uppercase;font-size:10px;letter-spacing:.04em;text-align:left;flex:0 0 auto}
  table td:empty{display:none}
  table td form{margin-left:auto}
  table td.num{justify-content:space-between}
  input,select,textarea,button,.btn{font-size:16px}   /* evita el zoom de iOS */
  .who{width:100%;margin:6px 0 0}
}

/* ===== subnav de sección ===== */
.subnav{background:#294467;border-bottom:1px solid #1a3050;position:sticky;top:52px;z-index:19;display:block}
.subwrap{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;gap:2px;flex-wrap:wrap}
.subnav a{color:#c3d2e4!important;text-decoration:none!important;font-size:12.5px;font-weight:600;padding:9px 12px;border-bottom:3px solid transparent;display:inline-block}
.subnav a:hover{color:#fff;background:#ffffff12}
/* El rótulo que nombra la barra, y tabs más legibles: eran 12,5 px de
   gris claro sobre azul y se perdían contra el menú de arriba. */
.subrot{align-self:center;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#8fa6c4;padding:0 12px 0 0;margin-right:4px;border-right:1px solid #3a557a;white-space:nowrap}
.subnav a{color:#d6e2f2!important}
.subnav a.on{color:#fff;border-bottom-color:var(--gold)}
/* Los de todos los días, marcados en dorado. El dorado de la paleta es
   muy oscuro contra el azul del submenú, así que acá se usa uno más
   claro, el mismo de las estrellas de las cintas. */
.subnav a.dest{color:#e3b64f!important}
.subnav a.dest:hover{color:#f6dda0!important}
.subnav a.dest.on{color:#fff!important}
.quick a.sec{font-size:14px;padding:8px 13px}
@media(max-width:700px){
  .subnav{position:static;padding:8px 0;border-bottom:1px solid #1a3050}
  .subwrap{padding:0 12px;overflow-x:auto;flex-wrap:nowrap;gap:7px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .subwrap::-webkit-scrollbar{display:none}
  /* El rótulo adentro del carrusel.
     Dos intentos fallidos antes de éste, por no mirar cómo se comporta
     esta barra en el teléfono: acá el submenú no envuelve, es una tira
     que se arrastra de costado. Primero le di ancho completo y empujó
     todas las pestañas fuera de pantalla. Después lo clavé a la
     izquierda y, como su fondo sólo cubre el alto del texto, la
     pastilla dorada de la pestaña activa asomaba alrededor.

     Va como primer eslabón de la tira, chico y sin fondo propio. No
     tapa nada, y se lee al entrar, que es cuando hace falta: el que
     arrastra la tira ya entendió que hay más pantallas. */
  .subrot{font-size:9.5px;padding:0 4px 0 0;margin:0;border-right:0;align-self:center}
  .subnav a{white-space:nowrap;font-size:13px;background:#ffffff14;border:1px solid #ffffff26;border-radius:20px;padding:7px 14px;border-bottom:1px solid #ffffff26}
  .subnav a.on{background:var(--gold);color:#241806!important;border-color:var(--gold)}
  .subnav a.dest{border-color:#e3b64f7a;background:#e3b64f1f}
  .subnav a.dest.on{background:var(--gold);color:#241806!important;border-color:var(--gold)}
  .quick{gap:2px}
  .quick a.sec{font-size:13.5px;padding:7px 10px}
}

/* ===== la firma del piloto ===== */
.firma{display:flex;align-items:center;gap:10px;min-width:0}
.firma .f-txt{min-width:0}
.firma .f-nom{font-weight:700;font-size:13.5px;line-height:1.25}
.firma .f-nom a{color:var(--navy);text-decoration:none}
.firma .f-nom a:hover{text-decoration:underline}
.firma .f-rol{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#e9edf4;color:var(--navy);border-radius:20px;padding:1px 7px;vertical-align:middle}
.firma .f-meta{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.firma-b{align-items:flex-start}
.cintas{display:inline-flex;gap:3px;align-items:center}
.cinta{display:inline-flex;width:26px;height:9px;border-radius:2px;overflow:hidden;border:1px solid #00000022}
.cinta i{flex:1;display:block}
.cinta-mas{font-size:10px;color:var(--muted);font-weight:600}
/* firma dentro de listas y mensajes */
.msg-firma{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px}
.msg-firma .cuerpo{flex:1;min-width:0}
.msg-firma .txt{font-size:13.5px;margin-top:3px;line-height:1.5}
.msg-firma .hora{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
.bul .firma{margin-bottom:6px}

/* cintas grandes del medallero */
.cinta-g{display:inline-flex;width:52px;height:17px;border-radius:2px;overflow:hidden;border:1px solid #00000033;box-shadow:0 1px 2px #00000022}
.cinta-g i{flex:1;display:block}
.barra-cintas{display:flex;flex-wrap:wrap;gap:5px;padding:4px 0 12px;border-bottom:1px dashed var(--line);margin-bottom:11px}

/* línea de tiempo de la campaña */
.mis-linea{border:1px solid var(--line);border-radius:11px;margin-bottom:12px;background:#fff;overflow:hidden}
.mis-linea>summary{cursor:pointer;padding:12px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;list-style:none;background:#f7f6f1}
.mis-linea>summary::-webkit-details-marker{display:none}
.mis-linea>summary:hover{background:#f1efe8}
.mis-linea .ms-t{font-weight:700;color:var(--navy);font-size:14.5px}
.mis-linea .ms-f{margin-left:auto;font-size:12px;color:var(--muted)}
.mis-linea[open]>summary{border-bottom:1px solid var(--line)}
/* La línea de la jornada cerrada: quiénes fueron y cuántos contaron
   cómo les fue. Ocupa el ancho entero para caer debajo del título,
   que en el teléfono ya se comió el renglón. */
.mis-linea .ms-res{flex:0 0 100%;font-size:12.5px;color:var(--muted);margin-top:-2px}

/* Entrada del Diario plegada. Misma barra al costado que la abierta,
   para que no parezca otra cosa: lo único que cambia es que el texto
   está guardado hasta que la tocás. */
.bul-p{display:block}
.bul-p>summary{cursor:pointer;list-style:none;display:block}
.bul-p>summary::-webkit-details-marker{display:none}
.bul-p .cop{font-family:Georgia,serif;font-size:13.5px;line-height:1.5;color:#4a4c48}
.bul-p .mas{display:inline-block;margin-top:5px;font-size:12.5px;font-weight:600;color:var(--navy)}
.bul-p[open] .cop,.bul-p[open] .mas{display:none}
.bul-p>summary:hover .mas{text-decoration:underline}
.ms-cuerpo{padding:13px 14px}
.parte{border-left:3px solid var(--gold);padding:8px 0 8px 12px;margin-bottom:11px}
.parte .p-num{font-size:12.5px;color:var(--muted);margin-top:5px}
.parte .p-rel{font-family:Georgia,serif;font-size:13.5px;line-height:1.55;margin-top:4px;color:#2c2e29}

/* --- login: recordarme --- */
.login-box .rec{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13.5px;color:var(--muted);font-weight:500;cursor:pointer}
.login-box .rec input{width:auto;margin:0;accent-color:var(--navy)}
/* --- instalador --- */
.inst{max-width:760px;margin:34px auto;padding:0 16px}
.inst .paso{display:inline-block;background:var(--navy);color:#fff;border-radius:99px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em}
.chk{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.chk:last-child{border-bottom:0}
.chk b{font-weight:600;color:var(--ink)}
.ok-t{color:var(--green);font-weight:700}.bad-t{color:#a33;font-weight:700}.warn-t{color:var(--amber);font-weight:700}

/* --- app instalable --- */
.login-box .btn-instalar{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.login-box .btn-instalar:hover{background:#f4f1ea}
.btn-instalar{background:var(--navy);color:#fff;border:0;border-radius:9px;padding:11px 16px;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.01em}
.btn-instalar:hover{background:#1e4266}
.pwa-banda{position:fixed;left:10px;right:10px;bottom:10px;z-index:60;display:flex;align-items:center;gap:11px;
  background:var(--navy);color:#fff;border-radius:13px;padding:11px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);animation:pwa-sube .28s ease-out}
@keyframes pwa-sube{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
.pwa-banda .pwa-ico{font-size:24px;color:var(--gold);line-height:1}
.pwa-banda .pwa-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.28}
.pwa-banda .pwa-txt b{font-size:14px;white-space:nowrap}
.pwa-banda .pwa-txt span{font-size:12.5px;opacity:.82}
.pwa-banda .pwa-si{background:var(--gold);color:#20232a;border:0;border-radius:8px;padding:9px 14px;
  font-family:inherit;font-weight:800;font-size:13.5px;cursor:pointer;white-space:nowrap}
.pwa-banda .pwa-no{background:transparent;border:0;color:#fff;opacity:.6;font-size:21px;
  cursor:pointer;padding:0 2px;line-height:1}
.pwa-modal{position:fixed;inset:0;z-index:70;background:rgba(12,22,34,.6);display:flex;
  align-items:center;justify-content:center;padding:18px}
.pwa-modal .pwa-caja{background:#fff;border-radius:15px;padding:20px;max-width:400px;width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.32)}
.pwa-modal h3{margin:0 0 12px;color:var(--navy);font-size:17px}
.pwa-modal ol{margin:0;padding-left:20px;color:var(--ink);font-size:14px;line-height:1.6}
.pwa-modal li{margin-bottom:7px}
.pwa-modal .pwa-nota{margin-top:12px;font-size:12.5px;color:var(--muted);line-height:1.45}
.pwa-modal .pwa-cerrar{width:100%;margin-top:16px;background:var(--navy);color:#fff;border:0;
  border-radius:9px;padding:11px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}
/* corrida por la banda para no tapar el pie */
.foot{padding-bottom:76px}
html.en-app .foot{padding-bottom:22px}
/* en la app: respetar el notch del iPhone */
html.en-app .top{padding-top:calc(10px + env(safe-area-inset-top))}
html.en-app body{padding-bottom:env(safe-area-inset-bottom)}

/* --- tridente del GAEv --- */
.top .brand .tri{display:block;width:26px;height:26px;object-fit:contain;flex:0 0 auto}
.pwa-banda img.pwa-ico{width:26px;height:26px;object-fit:contain;flex:0 0 auto}
.login-box img{display:inline-block}

/* --- instalador: opciones plegadas --- */
.card.avz{padding:14px 18px}
.card.avz summary{cursor:pointer;font-weight:700;color:var(--navy);font-size:14.5px;
  list-style:none;display:flex;align-items:center;gap:9px;letter-spacing:.02em}
.card.avz summary::-webkit-details-marker{display:none}
.card.avz summary:before{content:'▸';color:var(--gold);font-size:13px;transition:transform .15s}
.card.avz[open] summary:before{transform:rotate(90deg)}
.card.avz summary .note,.card.avz summary .pill{margin-left:auto;font-weight:600}

/* --- zona de riesgo --- */
.card.peligro{border-color:#e2c8c8;background:#fffaf9}
.card.peligro h2{color:#8a2b2b}
button.mal{background:#8a2b2b;color:#fff;border:0}
button.mal:hover{background:#a33}

.foot .ver{opacity:.55;font-style:normal;font-size:11px;letter-spacing:.04em}

/* --- planilla de módulos: grilla en la compu, fichas en el teléfono --- */
.grilla-mod{overflow-x:auto}
.grilla-mod table{min-width:520px}
.grilla-mod tr.todos{background:#e2efe6}
.grilla-mod tr.todos td:first-child{font-weight:700;color:#1f5c3a}
.lista-mod{display:none}

@media(max-width:780px){
  .grilla-mod{display:none}
  .lista-mod{display:block}
  details.mod{border:1px solid var(--line);border-radius:10px;margin-bottom:7px;background:#fff;overflow:hidden}
  details.mod.todos{border-color:#bcd8bc;background:#f2f8f2}
  details.mod summary{list-style:none;cursor:pointer;padding:11px 12px;
    display:grid;grid-template-columns:1fr auto;grid-template-areas:"n c" "b b";gap:4px 10px;align-items:center}
  details.mod summary::-webkit-details-marker{display:none}
  .mod-n{grid-area:n;font-weight:600;font-size:14.5px;color:var(--ink)}
  details.mod.todos .mod-n{color:#1f5c3a;font-weight:700}
  .mod-c{grid-area:c;font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
  details.mod.todos .mod-c{color:#2c6e49}
  .mod-b{grid-area:b;display:block;height:5px;border-radius:99px;background:#e8e3d7;overflow:hidden}
  .mod-b i{display:block;height:100%;background:var(--gold);border-radius:99px}
  details.mod.todos .mod-b i{background:#4a9a6a}
  .mod-d{padding:0 12px 12px;font-size:13.5px;line-height:1.55;color:var(--muted);
    border-top:1px dashed var(--line);margin-top:2px;padding-top:10px}
  .mod-d b{color:var(--navy)}
  .mod-d .falta{margin-top:5px}
  .mod-d .falta b{color:#8a6a2b}
}

/* --- inventario de DCS: grupos plegables --- */
details.inv{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:#FCFAF5}
details.inv summary{cursor:pointer;list-style:none;padding:11px 13px;font-weight:700;
  color:var(--navy);font-size:14.5px;display:flex;align-items:center;gap:8px}
details.inv summary::-webkit-details-marker{display:none}
details.inv summary:before{content:'▸';color:var(--gold);font-size:12px;transition:transform .15s}
details.inv[open] summary:before{transform:rotate(90deg)}
.inv-d{padding:0 13px 13px}
.grupo-mod{margin-bottom:12px}
.grupo-t{font-size:11.5px;font-weight:800;color:var(--gold);text-transform:uppercase;
  letter-spacing:.07em;margin:0 0 6px;padding-top:6px;border-top:1px dashed var(--line)}
.grupo-mod:first-child .grupo-t{border-top:0;padding-top:0}
label.chk-mod{display:flex;align-items:center;gap:9px;margin:0 0 5px;font-size:13.5px;
  color:var(--ink);cursor:pointer;line-height:1.35}
label.chk-mod input{width:auto;margin:0;flex:0 0 auto;accent-color:var(--navy)}
.inv-d textarea{width:100%;font-family:inherit;font-size:14px;padding:10px;
  border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
@media(min-width:781px){ .grupo-mod{columns:2;column-gap:22px} .grupo-t{column-span:all} }

/* --- casino: que la firma se vea --- */
.msg-firma{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff}
.msg-firma.propio{background:#FCFAF3;border-color:#e6dcc4}
.msg-cab{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.msg-cab .hora{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;padding-top:3px}
.msg-firma .txt{margin-top:9px;font-size:14.5px;line-height:1.55;color:var(--ink);
  padding-left:2px;border-top:1px dashed var(--line);padding-top:9px}
.msg-firma .firma .cintas{margin-left:6px}
@media(max-width:520px){
  .msg-cab .hora{margin-left:0;width:100%;padding-top:0}
}

/* la cinta de jefatura se distingue del medallero */
.cinta.cinta-j{box-shadow:0 0 0 1.5px var(--gold);margin-right:7px}

.cinta.cinta-c{box-shadow:0 0 0 1.5px #b9a06a}

/* condecoración ganada más de una vez: una sola cinta con el número */
.cinta.cinta-rep,.cinta-g.cinta-rep{position:relative}
.cinta-n{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:8px;font-weight:900;color:#fff;line-height:1;
  text-shadow:0 0 2px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.7);font-style:normal}
.cinta-g .cinta-n{font-size:10px}

/* --- distintivos: no son cintas --- */
.dist{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;
  padding:1px 6px;border-radius:4px;font-size:10px;font-weight:800;line-height:1.6;
  letter-spacing:.04em;white-space:nowrap;vertical-align:middle}
.dist-cent{background:#16324f;color:var(--gold);border:1px solid var(--gold);min-width:20px}
.dist-torneo{background:#F7F1E0;color:#8a6a1e;border:1px solid #d8c48a}
.dist-g{font-size:13px;padding:5px 11px;border-radius:6px;margin:0}

/* --- el punto de novedades ---
   Chico y al costado del nombre. Si no hay punto, no hay nada nuevo:
   la idea es que nadie tenga que entrar «por las dudas». */
/* --- Novedades: la lista de lo nuevo --- */
.nv-t{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 7px}
.nv{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;margin-bottom:7px;background:#fff}
.nv:hover{border-color:var(--gold)}
.nv .nv-h{font-size:14px;font-weight:600;color:var(--ink)}
.nv .nv-s{font-size:12px;color:var(--muted);margin-top:2px}
.nv-mio{border-left:3px solid var(--danger)}
/* La chapa de la barra: el número de verdad, no un punto que puede ser
   una cosa o noventa. */
.nvbtn{background:var(--gold);color:#1D3557 !important;border-radius:20px;padding:5px 12px !important;
  font-weight:600;white-space:nowrap}
.nvbtn:hover{background:#cf9c39;color:#1D3557 !important}
/* Al día: el botón sigue estando —si no, nadie se entera de que la
   pantalla existe— pero apagado, para que el dorado signifique algo
   cuando aparece. */
.nvbtn.nv-cero{background:transparent;color:#cdd6e4 !important;font-weight:600;padding:7px 10px !important}
.nvbtn.nv-cero:hover{background:#ffffff22;color:#fff !important}

.punto{display:inline-block;width:7px;height:7px;border-radius:50%;background:#C0392B;
  margin-left:6px;vertical-align:middle;flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(192,57,43,.22)}
.quick .sec .punto{background:#E8574A;box-shadow:0 0 0 2px rgba(232,87,74,.3)}
.subnav a .punto{background:#E8574A;box-shadow:0 0 0 2px rgba(232,87,74,.28)}
@media(max-width:520px){ .punto{width:6px;height:6px;margin-left:5px} }

/* --- la flota: se tilda, no se escribe --- */
.flota{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:2px;margin-top:4px}
.flota .chk{display:flex;align-items:center;justify-content:flex-start;gap:9px;padding:9px 11px;
  border:1px solid var(--line);border-radius:9px;background:#FCFAF5;cursor:pointer;font-size:14.5px;
  color:var(--ink);margin:0;font-weight:400;line-height:1.25;text-align:left}
.flota .chk:hover{border-color:var(--gold);background:#fff}
.flota .chk input{width:18px !important;height:18px;flex:0 0 auto;margin:0;padding:0;accent-color:var(--navy)}
.flota .chk span{flex:1;text-align:left}
.flota .chk:has(input:checked){border-color:var(--navy);background:#F2F5F9;font-weight:600}
@media(max-width:520px){ .flota{grid-template-columns:1fr} }

/* --- la tira del rango, al lado del nombre --- */
.rango-img{height:13px;width:auto;vertical-align:-2px;margin-right:6px;
  border-radius:1px;image-rendering:auto}
.rcard .rk .rango-img{height:12px;vertical-align:-2px;margin-right:5px;filter:brightness(1.9)}
.rango-g{height:16px}
.rango-xl{height:30px;margin:0}
@media(max-width:520px){ .rango-img{height:12px;margin-right:5px} }

/* --- cintas y distintivos oficiales del GAEv ---
   Todas las piezas de la tira miden lo mismo de alto, y las cintas
   además miden lo mismo de ancho, como en una percha de verdad.
   --tira-h es la única medida que hay que tocar. */
:root{ --tira-h:17px; --tira-w:63px; }
.f-tira{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:5px}
.cintas{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap}
.distintivos{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;margin-left:4px}
.cinta-w{position:relative;display:inline-flex;line-height:0}
.cinta-img{height:var(--tira-h);width:var(--tira-w);border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);display:block}
.cinta-xl{height:30px;width:110px}
.cinta-w-g{margin:0 4px 4px 0}
/* Las estrellas se reparten como en el foro: hasta tres van una al lado
   de la otra, y a partir de cuatro se acomodan en dos columnas —cuatro
   apiladas en fila india no entran en una cinta y quedaban montadas—. */
.estrellas{position:absolute;inset:0;display:grid;place-content:center;
  grid-auto-flow:column;gap:0 1px;pointer-events:none;line-height:0}
.estrellas b{font-size:9px;line-height:1;color:#E8B84B;font-style:normal;text-align:center;
  text-shadow:0 0 1px rgba(0,0,0,.85),0 1px 1px rgba(0,0,0,.6)}
.cinta-xl+.estrellas b{font-size:15px}

/* cuatro: dos columnas de dos */
.estrellas.e4{grid-auto-flow:row;grid-template-columns:1fr 1fr}
/* cinco y seis: dos filas de tres */
.estrellas.e5,.estrellas.e6{grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}
/* siete y ocho: dos filas de cuatro */
.estrellas.e7,.estrellas.e8{grid-auto-flow:row;grid-template-columns:repeat(4,1fr)}
/* en cuanto hay dos filas, la estrella se achica para que entren en el alto */
.estrellas.e4 b,.estrellas.e5 b,.estrellas.e6 b{font-size:7.5px}
.estrellas.e7 b,.estrellas.e8 b{font-size:6.5px}
.cinta-xl+.estrellas.e4 b,.cinta-xl+.estrellas.e5 b,.cinta-xl+.estrellas.e6 b{font-size:12.5px}
.cinta-xl+.estrellas.e7 b,.cinta-xl+.estrellas.e8 b{font-size:11px}
/* Las chapas (alas, Centurión) llevan el mismo alto que las cintas:
   así la tira se lee como una sola pieza. El ancho lo pone cada una. */
.dist-img{height:var(--tira-h);width:auto;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);display:block}
.dist-xl{height:30px}
.dist-fila{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 0}
/* La cinta de campañas lleva el número adentro, en una chapita
   al centro para que no se pise con las franjas de la cinta. */
.dist-camp{position:relative;display:inline-flex;line-height:0}
/* La plaqueta lleva ancho mínimo a propósito: la cinta trae un número
   impreso debajo, y con una sola cifra la plaqueta quedaba tan angosta
   que el número original se asomaba por los costados. Con el mínimo,
   una cifra y dos cifras tapan lo mismo. */
.dist-camp b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:9.5px;font-weight:900;line-height:1;color:#F3DFA2;letter-spacing:.02em;
  background:rgba(16,28,44,.92);border:.5px solid rgba(243,223,162,.55);
  border-radius:3px;padding:1.5px 3.5px;min-width:19px;text-align:center;box-sizing:border-box}
.dist-fila .dist-camp b{font-size:16px;padding:3px 7px;border-radius:5px;border-width:1px;min-width:34px}
@media(max-width:520px){ :root{ --tira-h:15px; --tira-w:55px }
  .dist-camp b{font-size:8.5px;padding:1px 3px;min-width:16px} }

.dist-torneo{height:24px}
.dist-fila .dist-torneo{height:52px}

/* --- la tira: todo en una línea, en su orden --- */
.tira{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap}
/* Los torneos van en una sola fila, del mismo alto que una cinta.
   Apilarlos de a tres levantaba la tira a dos renglones y quedaba
   desprolijo: es mejor que sigan la línea, como una pieza más.

   Cada uno lleva su cuadradito —fondo, borde y esquina redondeada—
   porque sin marco parecían manchas y no se entendía que eran
   insignias. */
.torneos{display:inline-flex;align-items:center;gap:2px;line-height:0;margin-left:3px}
.torneo-img{width:var(--tira-h);height:var(--tira-h);display:block;object-fit:contain;padding:.5px;
  background:#FBF9F3;border:1px solid rgba(0,0,0,.22);border-radius:3px;
  box-shadow:0 1px 1px rgba(0,0,0,.08);flex:0 0 auto}
.dist-fila .torneos{gap:3px;margin-left:4px}
.dist-fila .torneo-img{width:30px;height:30px;padding:1.5px;border-radius:5px}

/* ── La cartilla de la Escuela de Vuelo ─────────────────────── */
.barra-evb{height:11px;background:#e8e5db;border-radius:7px;overflow:hidden;border:1px solid var(--line)}
.barra-evb i{display:block;height:100%;background:var(--navy)}
.fase-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--line);color:var(--navy);font-size:11px;font-weight:700;margin-right:2px}
.fase-n.ok{background:var(--green);color:#fff}
.pto{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid #efece3}
.pto:last-child{border-bottom:0}
.pto-t{flex:1;font-size:13.5px;line-height:1.45}
.pto.hecho .pto-t{color:var(--muted)}
/* El tilde es un botón grande a propósito: esto se usa con una mano,
   de noche, mientras se habla por radio con el aspirante. */
.tilde{flex:0 0 auto;width:26px;height:26px;border-radius:7px;border:1.5px solid var(--line);
  background:#FCFAF5;color:transparent;font-size:15px;line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;margin:0}
.tilde.on{background:var(--green);border-color:var(--green);color:#fff}
button.tilde:hover{border-color:var(--navy)}
/* la banda que separa una época de otra en la línea de tiempo */
.epoca{display:flex;align-items:center;gap:11px;margin:20px 0 13px}
.epoca:first-of-type{margin-top:4px}
.epoca:before,.epoca:after{content:"";height:1px;flex:1;background:var(--line)}
.epoca span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
/* el encabezado de la jornada: lo primero que se ve al entrar */
.jornada{background:var(--navy);color:#fff;border-radius:12px;padding:16px 18px;margin-bottom:15px;
  background-image:linear-gradient(0deg,#00000022,#00000000)}
.jornada .jr-f{font-family:Georgia,serif;font-size:26px;line-height:1.1;letter-spacing:.01em}
.jornada .jr-e{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#e6c98a;margin-top:6px}
.jornada .jr-n{font-size:12px;opacity:.75;margin-top:3px}
@media(max-width:520px){ .jornada .jr-f{font-size:21px} }
/* la agenda de la semana, dentro de la banda de la jornada */
.jornada .jr-px{margin-top:13px;padding-top:12px;border-top:1px solid #ffffff2e}
.jornada .px-r{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;opacity:.7;margin-bottom:7px}
.jornada .px-l{display:flex;gap:12px;align-items:baseline;padding:5px 0;border-top:1px solid #ffffff14}
.jornada .px-l:first-of-type{border-top:0}
.jornada .px-d{flex:0 0 96px;font-size:12.5px;font-weight:700;color:#e6c98a;text-transform:capitalize}
.jornada .px-b{flex:1;min-width:0}
.jornada .px-t{font-size:15px;font-weight:700;line-height:1.25}
.jornada .px-t a{color:#fff;text-decoration:none}
.jornada .px-t a:hover{text-decoration:underline}
.jornada .px-c{font-size:12px;opacity:.82;margin-top:1px}
.jornada .px-m{font-size:12.5px;margin-top:9px;display:inline-block;padding:3px 11px;border-radius:20px;background:#00000030}
@media(max-width:520px){ .jornada .px-l{flex-direction:column;gap:1px} .jornada .px-d{flex:none} }
/* qué me perdí */
.perdi{border-left:3px solid var(--line);padding:2px 0 2px 12px;margin-bottom:12px}
.perdi:last-of-type{margin-bottom:0}
.perdi .pd-h{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);font-size:13.5px;margin-bottom:4px}
.perdi .pd-h a{color:var(--navy);text-decoration:none}
.perdi .pd-h a:hover{text-decoration:underline}
.perdi .pd-i{font-size:13px;line-height:1.45;padding:2px 0;color:#3a3a35}
.perdi .pd-s{color:var(--muted);font-size:11.5px}

/* ===== el mástil de la vidriera =====
   Lo primero que ve el que llega de afuera. Sigue el azul de la barra de
   arriba a propósito: se lee como una sola pieza, no como dos franjas. */
.mastil{position:relative;overflow:hidden;background:var(--navy);color:#fff;
  border-bottom:3px solid var(--gold);padding:44px 20px 40px}
.mastil:before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 8%,#2c4f7c 0%,transparent 62%);opacity:.85}
.mastil .mt-tri{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:340px;height:auto;opacity:.07;pointer-events:none}
.mastil .mt-in{position:relative;max-width:1100px;margin:0 auto}
.mastil .mt-k{font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;color:#e6c98a;margin-bottom:12px}
.mastil .mt-t{font-family:Georgia,serif;font-size:44px;line-height:1.06;margin:0;font-weight:400;letter-spacing:-.01em}
.mastil .mt-s{font-size:16px;line-height:1.6;max-width:620px;margin:16px 0 0;color:#d3dced}
.mastil .mt-s b{color:#fff}
.mastil .mt-b{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}
.mastil .mt-1,.mastil .mt-2{display:inline-block;text-decoration:none;font-size:14px;font-weight:700;
  padding:12px 22px;border-radius:9px;transition:transform .12s,background .12s}
.mastil .mt-1{background:var(--gold);color:#2a1f08}
.mastil .mt-1:hover{background:#cf9c39;transform:translateY(-1px)}
.mastil .mt-2{border:1px solid #ffffff4d;color:#fff}
.mastil .mt-2:hover{background:#ffffff1a;transform:translateY(-1px)}
.mastil .mt-n{display:flex;flex-wrap:wrap;gap:34px;margin-top:32px;padding-top:22px;border-top:1px solid #ffffff26}
.mastil .mt-n div{min-width:92px}
.mastil .mt-n b{display:block;font-family:Georgia,serif;font-size:30px;line-height:1;color:#fff}
.mastil .mt-n span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#a8bad4;margin-top:5px}
@media(max-width:640px){
  .mastil{padding:32px 16px 30px}
  .mastil .mt-t{font-size:31px}
  .mastil .mt-s{font-size:14.5px}
  .mastil .mt-tri{width:210px;right:-70px;opacity:.06}
  .mastil .mt-n{gap:20px 26px;margin-top:24px}
  .mastil .mt-n b{font-size:24px}
  .mastil .mt-1,.mastil .mt-2{flex:1;text-align:center;padding:12px 14px}
}

/* ===== el padrón de números de piloto ===== */
.pad{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;margin-top:4px}
.pd{border:1px solid var(--line);border-radius:8px;padding:7px 8px;background:#fff;min-height:48px}
.pd b{display:block;font-family:Georgia,serif;font-size:17px;line-height:1;color:var(--navy)}
.pd span{display:block;font-size:11px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd span a{color:var(--navy);text-decoration:none}
.pd span a:hover{text-decoration:underline}
.pd.lib{background:#f4f7f2;border-color:#c6d8c2}
.pd.lib b{color:var(--green)}
.pd .l{color:var(--green);font-weight:600}
.pd.mio{border-color:var(--gold);border-width:2px;background:#fdfaf2}
.pd.ocu span{color:var(--muted)}
@media(max-width:520px){ .pad{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))} .pd b{font-size:15px} }

/* ===== el debriefing con el formato del GAEv ===== */
.sal{border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:12px;background:#fbfaf6}
.sal-h{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.sal-t{font-weight:700;color:var(--navy);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.db{font-size:13.5px;line-height:1.55}
.db-t{font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px;margin:11px 0 3px}
.db-t:first-child{margin-top:0}
.db-e{font-family:Georgia,serif;color:#2c2e29;margin-bottom:4px}
.db-r{font-family:Georgia,serif;line-height:1.6;white-space:pre-wrap;margin-bottom:5px;color:#2c2e29}
.db-cierre{margin-bottom:2px}
.db-c{font-size:13px;color:#3a3a35}
.db-c b{color:var(--navy);font-weight:700}
.pd.connota{border-color:var(--gold)}

/* ---------- Hangar: la ficha de cada material ---------- */
.hgr{display:flex;gap:13px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:10px;align-items:flex-start}
.hgr:last-child{margin-bottom:0}
.hgr-f{flex:none;width:132px;height:88px;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#f1efe8}
.hgr-f img{width:100%;height:100%;object-fit:contain;display:block}
/* El escudo de una campaña es cuadrado y no se recorta: la caja de foto
   normal es apaisada y con «cover», y le comía la mitad de arriba y de
   abajo al oso de Estrella Polar. Acá entra entero, sin marco. */
.esc-c{flex:none;width:86px;height:86px;display:flex;align-items:center;justify-content:center}
.esc-c img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
@media(max-width:620px){ .esc-c{width:68px;height:68px} }
.hgr-sin{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted)}
.hgr-c{flex:1;min-width:0}
.hgr-b{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:9px}
.hgr-b form{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0}
.hgr-b input,.hgr-b select{width:auto;padding:6px 9px;font-size:12.5px}
.hgr-r input{max-width:190px}
@media(max-width:560px){
  .hgr{flex-direction:column}
  .hgr-f{width:100%;height:150px}
  .hgr-r input{max-width:none;flex:1}
}

.hgr-e{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.hgr-e summary{font-size:12px;color:var(--navy);cursor:pointer;font-weight:600}
.hgr-e[open] summary{margin-bottom:6px}
.hgr-e input,.hgr-e select,.hgr-e textarea{width:100%}
.hgr-e textarea{min-height:64px}

/* La foto de una efeméride no se recorta.
   El recuadro del Hangar es 132x88 y recorta al centro, que para una
   caja de skins está bien. Acá no: la foto es la cara de un piloto o el
   avión de esa noche, y recortarla le come la cabeza. Se respeta la
   proporción, la que venga. */
.efm-f{flex:none;width:200px;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#f1efe8}
.efm-f img{width:100%;height:auto;display:block}
@media (max-width:720px){
  .efm-f{width:100%}
}

/* ---------- Organigrama de la nómina ----------
   Acá va la estructura, no el legajo: dentro de una casilla se muestra
   quién ocupa el cargo y nada más. El medallero de cada piloto hacía
   que una casilla midiera tres veces lo que debía, y en el teléfono el
   organigrama dejaba de leerse como un organigrama. Para eso está el
   legajo, a un toque de distancia. */
.org{margin-bottom:6px}
.org-caja .firma{gap:8px}
.org-caja .firma .f-nom{font-size:13px}
.org-fila{display:flex;gap:12px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.org-uno{justify-content:center}
.org-baja{width:2px;height:18px;background:var(--line);margin:0 auto}
.org-fila:not(.org-uno){border-top:2px solid var(--line)}
.org-col{position:relative;padding-top:16px;flex:1 1 168px;min-width:158px;max-width:230px}
.org-col::before{content:'';position:absolute;top:0;left:50%;width:2px;height:16px;background:var(--line)}
.org-caja{border:1px solid var(--line);border-radius:9px;background:#fff;padding:8px 10px}
.org-jefe{border-color:var(--navy);border-width:2px;min-width:230px}
.org-t{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);font-weight:700;margin-bottom:5px}
.org-p{margin-bottom:4px}
.org-p:last-child{margin-bottom:0}
.org-v{font-size:12px;color:var(--muted);font-style:italic}
.org-n{font-size:11px;color:var(--muted);margin-top:4px}
.org-sub{position:relative;padding-top:14px}
.org-sub::before{content:'';position:absolute;top:0;left:22px;width:2px;height:14px;background:var(--line)}
.org-chica{background:#fbfaf6}
.org-esc{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px;margin-top:14px}

/* En el teléfono no hay cinco columnas que valgan: pasa a ser un
   esquema con sangría. Sin posiciones absolutas, que se rompen. */
@media(max-width:620px){
  .org-fila{display:block}
  .org-baja{display:none}
  .org-fila:not(.org-uno){border-top:0;border-left:2px solid var(--line);
    margin-left:14px;padding-left:14px;margin-top:8px}
  .org-col{max-width:none;min-width:0;padding-top:0;margin-bottom:8px}
  .org-col:last-child{margin-bottom:0}
  .org-col::before{display:none}
  .org-jefe{min-width:0}
  .org-sub{padding-top:0;margin-top:8px;margin-left:10px;
    border-left:2px solid var(--line);padding-left:10px}
  .org-sub::before{display:none}
  .org-esc{grid-template-columns:1fr;gap:9px}
}

/* ---------- la biblioteca en la vidriera ----------
   Lo del escuadrón va primero y en el azul de la casa; lo de afuera
   después, en un tono terroso y apagado. No es decoración: si van todos
   del mismo color, un manual nuestro y una guía de terceros parecen lo
   mismo, y no lo son. */
.bib-corte{margin:16px 0 8px;color:var(--navy);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);padding-bottom:5px}
.bib-corte:first-of-type{margin-top:6px}
.bib-corte span{display:block;text-transform:none;letter-spacing:0;font-weight:400;
  font-size:11.5px;color:var(--muted);margin-top:3px}
.bib-corte.ext{color:#7a6a4a;border-bottom-color:#ded3bb}
.item.bib-ext{background:#fbf9f3;border-color:#e2d9c4}
.item.bib-ext .i-h a{color:#7a5f2b}
.item.bib-ext .i-h a:hover{color:#5c4720}
.item.bib-ext .pill{background:#efe7d3;color:#7a6a4a}

/* ---------- el organigrama de la vidriera ----------
   Más simple que el de adentro: acá no hace falta el detalle, hace
   falta que se entienda de un vistazo que esto tiene forma. */
.org-pub{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:11px;margin-top:11px}
.opb{border:1px solid var(--line);border-radius:9px;background:#fff;padding:10px 12px}
.opb-1{grid-column:1/-1;border-color:var(--navy);border-width:2px}
.opb-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--navy);font-weight:700;margin-bottom:6px}
.opb-p{font-size:13.5px;font-weight:600;margin-bottom:3px}
.opb-p:last-child{margin-bottom:0}
.opb-p a{color:var(--navy);text-decoration:none}
.opb-p a:hover{text-decoration:underline}
.opb-r{color:var(--muted);font-weight:400;font-style:italic;font-size:13px}
.opb-v{font-size:12.5px;color:var(--muted);font-style:italic}


/* ===== documento institucional: Órdenes del Día y Circulares =====
   El formato del escuadrón, el mismo que se usa en el foro desde
   siempre. La hoja va sobre papel, no sobre la tarjeta: es un
   documento, no una publicación más. */
.doc{background:#fdfcf8;border:1px solid #ded8c8;border-radius:9px;
     padding:26px 30px 22px;margin-top:10px;position:relative;overflow:hidden;
     font-size:14.5px;line-height:1.62;color:#20242b}
.doc-mem{text-align:center;margin-bottom:18px}
.doc-mem img{opacity:.9;margin-bottom:5px;display:inline-block}
.doc-mem b{display:block;font-size:14px;letter-spacing:.4px}
.doc-jef{font-weight:700;margin-bottom:13px}
.doc-tit{text-align:center;font-weight:700;margin:18px 0 16px}
.doc-cuerpo{white-space:pre-wrap}
.doc-firma{margin-top:28px;line-height:1.45}
.doc-sello{position:absolute;right:26px;bottom:14px;width:104px;height:auto;
     opacity:.6;transform:rotate(-11deg);pointer-events:none}
/* Un borrador todavía no tiene número ni sello: se ve que le falta la firma. */
.doc-borrador{border-style:dashed;background:#fbfaf5}
@media(max-width:640px){
  .doc{padding:20px 16px 18px;font-size:13.5px}
  .doc-sello{width:76px;right:12px;bottom:10px}
  .doc-mem b{font-size:12.5px}
}

/* ===== el acuse de recibo de una orden ===== */
.notif{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line)}
.notif-lista{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.notif-uno{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.notif-uno .i-s{margin-left:auto;white-space:nowrap}

/* ===== el CAOP: la línea del año =====
   Un calendario anual se tiene que leer de un golpe. La condición para
   que se lea es que los meses de arriba y las barras de abajo midan
   exactamente lo mismo: si el rótulo le roba ancho a la pista, la barra
   deja de caer debajo del mes que marca y la línea miente.
   Por eso el rótulo va encima de su barra y todo ocupa el ancho entero.
   En el teléfono se ve igual: no hay nada que reacomodar. */
.caop-anios{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:13px}
.caop-anios a{font-size:12px;font-weight:700;text-decoration:none;color:var(--muted);
  border:1px solid var(--line);border-radius:20px;padding:3px 13px;background:#faf9f5}
.caop-anios a.act{background:var(--navy);border-color:var(--navy);color:#fff}

.caop-linea{position:relative;border:1px solid var(--line);border-radius:9px;
  padding:10px 12px 8px;background:#fbfaf6}
.caop-meses{display:grid;grid-template-columns:repeat(12,1fr);font-size:10px;font-weight:700;
  color:var(--muted);letter-spacing:.03em;padding-bottom:5px;
  border-bottom:1px solid var(--line);margin-bottom:11px}
.caop-meses span{text-align:center}
.caop-meses .hoy{color:var(--gold)}
/* Dónde estamos parados hoy, bajando por todas las barras. */
.caop-hoy{position:absolute;top:28px;bottom:8px;width:2px;background:var(--gold);
  opacity:.45;pointer-events:none;border-radius:2px}

.caop-fila{margin-bottom:11px}
.caop-fila:last-child{margin-bottom:2px}
.caop-rot{font-size:12.5px;line-height:1.25;margin-bottom:3px}
.caop-rot b{font-weight:700}
.caop-rot span{font-size:11px;color:var(--muted);margin-left:7px}
.caop-pista{position:relative;height:14px;border-radius:4px;
  background:repeating-linear-gradient(to right,#ece8dc 0 1px,transparent 1px calc(100%/12))}
.caop-barra{position:absolute;top:0;height:14px;border-radius:4px;min-width:4px}
/* Lo cumplido se ve, pero no le compite a lo que viene. */
.caop-barra.cumplido{opacity:.3}
.caop-barra.encurso{box-shadow:0 0 0 2px var(--gold)}

.caop-ref{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:11px;color:var(--muted)}
.caop-ref span{display:flex;align-items:center;gap:5px}
.caop-ref i{width:11px;height:11px;border-radius:3px;display:inline-block;background:var(--navy)}
.caop-ref i.ray{background:var(--navy);opacity:.3}

.caop-mes{font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--muted);
  margin:14px 0 7px;padding-bottom:3px;border-bottom:1px solid var(--line)}
.caop-mes:first-child{margin-top:0}
.caop-ctl{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.caop-ctl form{display:flex;gap:5px}
@media(max-width:640px){
  .caop-rot span{display:block;margin-left:0}
  .caop-meses{font-size:8.5px;letter-spacing:0}
}

.caop-copiar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:12px;
  padding-top:11px;border-top:1px dashed var(--line)}
.caop-copiar .hint{margin:0}

/* La placa de campeones. El SVG viene con proporción fija, así que se
   deja escalar a lo ancho de la tarjeta y listo: en el teléfono entra
   angosta y por eso debajo va la lista escrita, que es la que se lee. */
.placa{margin:0 auto;max-width:520px}
.placa img{display:block;width:100%;height:auto;border-radius:6px;
  box-shadow:0 6px 22px rgba(20,16,6,.38)}

/* ---------- grupos dentro de una pantalla ----------
   Perfil tenía diez tarjetas sin relación entre sí, una abajo de la
   otra: el avatar, los avisos, una decisión de privacidad, el
   cumpleaños, la contraseña, las sesiones abiertas y el inventario de
   DCS. Un oficial la recorrió entera y se llevó dos de las diez. No
   sobraba nada; faltaba decir dónde termina un asunto y empieza otro. */
.grupo-p{margin:26px 0 11px;display:flex;align-items:baseline;gap:9px}
.grupo-p:first-of-type{margin-top:6px}
.grupo-p span{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--navy)}
.grupo-p em{font-style:normal;font-size:12px;color:var(--muted)}
.grupo-p:after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- el hilo de la campaña ----------
   La campaña es lo único que el escuadrón hace con forma de historia:
   abre, se desarrolla y cierra. Por eso se lee de arriba abajo, al
   revés que el resto de la app, y por eso lleva una apertura marcada y
   un cierre que dice dónde estás parado hoy. */
.apertura-c{background:var(--navy);color:#fff;border-radius:11px;padding:13px 15px;margin:0 0 13px}
.apertura-c .ap-k{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#a9bcd6;margin-bottom:4px}
.apertura-c .ap-t{font-size:15.5px;font-weight:600}
.apertura-c .ap-s{font-size:12.5px;color:#cfd8e4;margin-top:5px;line-height:1.5}
.ultimo-m{display:inline-block;background:var(--gold);color:#241806;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 10px;border-radius:20px;margin:6px 0 7px}
.sigue{border:1px dashed var(--line);border-radius:10px;padding:9px 12px;margin-top:12px;
  text-align:center;font-size:11.5px;color:var(--muted);letter-spacing:.02em}


/* La cabecera de cada sección del pizarrón. Es una banda, no una
   tarjeta: separa sin encerrar, porque las secciones de un vuelo son
   partes de una misma formación y no compartimentos. */
.secc-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:16px 0 7px;padding-bottom:5px;border-bottom:2px solid var(--navy)}
.secc-h:first-of-type{margin-top:4px}
.secc-n{font-weight:700;color:var(--navy);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.secc-d{font-size:12px;color:var(--muted);margin-left:auto}
/* ============================================================
   EL LIBRO — la Bitácora.

   Acá no hay tarjetas. Cada vez que esta pantalla tuvo una caja
   —el marcador de derribos, el panel azul de la apertura, la píldora
   de «lo último», el recuadro de cada misión— fue lo primero que
   molestó al leerla. Un libro separa una escena de la siguiente con
   aire, no con un borde.

   Serif y renglón alto porque esto se lee de corrido. Medida de línea
   contenida: un párrafo de ochenta caracteres se lee, uno de ciento
   veinte se abandona.
   ============================================================ */
.libro{max-width:38em;margin:0 auto;padding:0 2px}

.lb-portada{padding:6px 0 18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.lb-t{font-family:Georgia,serif;font-size:30px;font-weight:700;color:var(--navy);
  letter-spacing:.01em;line-height:1.15}
.lb-s{font-size:13px;color:var(--muted);margin-top:5px;letter-spacing:.02em}
.lb-salto{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:600;
  color:var(--navy);text-decoration:none}
.lb-salto:hover{text-decoration:underline}

.lb-abre{font-family:Georgia,serif;font-size:16px;line-height:1.7;color:#33363b;
  margin:0 0 30px;font-style:italic}
.lb-abre em{font-style:normal;font-weight:700;color:var(--navy)}

/* El título de la parte: la campaña. Una línea, centrada, con aire
   arriba y abajo — como el corte entre dos partes de un libro. */
.lb-parte{text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#9a9384;margin:42px 0 26px}
.lb-parte:first-of-type{margin-top:6px}

.lb-escena,.lb-doc,.lb-cap{margin:0 0 34px}

/* ===== el corte de capítulo =====
   Lo que en un libro separa un capítulo del anterior no es una línea
   de título más grande: es el aire que se deja antes, y una marca al
   centro que dice «acá termina aquello». Sin eso, el libro se lee como
   una página web larga aunque la tipografía sea de libro.

   La marca es un rombo dibujado con CSS y no un caracter: un ✦ o un ❧
   depende de la fuente del teléfono y en algunos sale como cuadradito
   vacío. Esto se ve igual en todos.

   El primer corte no lleva marca —no hay nada que cerrar todavía— y
   tampoco cuando viene justo después de la banda de una campaña
   nueva, que ya es una separación más grande. */
.lb-cap,.lb-escena{margin-top:52px}
.lb-cap:before,.lb-escena:before{
  content:"";display:block;width:7px;height:7px;margin:0 auto 34px;
  transform:rotate(45deg);border:1px solid #cfc7b4}
.libro>.lb-cap:first-of-type:before,
.libro>.lb-escena:first-of-type:before,
.lb-parte + .lb-cap:before,
.lb-parte + .lb-escena:before{display:none}
.lb-parte + .lb-cap,.lb-parte + .lb-escena{margin-top:0}

/* La escena abre como abre un capítulo: el primer renglón en
   versalitas. Es el recurso más viejo de la tipografía de libro y el
   único que no depende de con qué carácter arranque el texto —una
   capitular se rompe si el relato empieza con una comilla, y las
   escenas del escuadrón empiezan con diálogo bastante seguido. */
.lb-escena .lb-txt::first-line{font-variant:small-caps;letter-spacing:.03em}
.lb-k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#9a9384;margin-bottom:5px}
.lb-h{font-family:Georgia,serif;font-size:21px;font-weight:700;color:var(--navy);
  line-height:1.25;margin:0 0 10px}
.lb-hm{font-size:23px;letter-spacing:.01em}
.lb-ob{font-size:13px;color:var(--muted);margin:-6px 0 12px;font-style:italic}

/* Ojo: el texto ya trae sus renglones, así que va con pre-wrap y NO
   debe pasar además por nl2br o se duplican los saltos. */
.lb-txt{font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.72;
  color:#2f3238;white-space:pre-wrap}

/* El boletín y el parte de operaciones son documentos, no relato: van
   con una raya al margen, que es lo que en el papel los separaba del
   resto sin encerrarlos. */
.lb-doc{border-left:2px solid var(--line);padding-left:16px}
.lb-doc .lb-txt{font-size:15px;color:#4a4c52}

/* El capítulo: la misión. El briefing es el documento con el que
   salieron; abajo va lo que contó cada uno, que es el relato. */
.lb-cap{padding-top:6px}
.lb-brief{font-size:15px;color:#4a4c52}
.lb-rot{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9a9384}

/* Los partes de los pilotos, plegados en un grupo. El resorte es una
   línea con una raya arriba, no un botón: tiene que leerse como el
   corte entre el capítulo y sus testimonios. */
.lb-partes{display:block;margin:26px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.lb-partes>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px}
.lb-partes>summary::-webkit-details-marker{display:none}
.lb-partes>summary:hover .lb-rot{color:var(--navy)}
.lb-cuantos{margin-left:auto;font-family:Georgia,serif;font-style:italic;font-size:13px;color:#9a9384}
.lb-partes>summary:after{content:"leer ▾";font-size:11.5px;font-weight:600;
  color:var(--navy);letter-spacing:.02em}
.lb-partes[open]>summary:after{content:"cerrar ▴";color:#9a9384;font-weight:400}
.lb-partes[open]>summary{margin-bottom:18px}
.lb-parte-p{margin:0 0 26px}
.lb-quien{font-family:"Segoe UI",system-ui,Arial,sans-serif;font-size:12.5px;font-weight:700;
  color:var(--navy);letter-spacing:.03em;margin-bottom:6px}
.lb-ir{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:600;
  color:var(--navy);text-decoration:none}
.lb-ir:after{content:" →";color:#a79f8b;font-weight:400}
.lb-ir:hover{text-decoration:underline}

/* Corregir una entrada: lo ve sólo el armador y por eso puede ser
   discreto. Gris, chico y al pie de lo que se corrige, para que no
   compita con el texto de nadie. */
.lb-fix{display:inline-block;margin-top:12px;font-size:11.5px;color:#9a9384;
  text-decoration:none;border-bottom:1px dotted #cfc7b4}
.lb-fix:hover{color:var(--navy);border-bottom-color:var(--navy)}

/* ===== el encabezado corriente =====
   Una línea fina, del color del papel, pegada abajo de la barra de la
   app. Dice en qué capítulo estás y de qué campaña es. No es una caja:
   no tiene fondo propio ni recuadro, sólo un filete abajo.

   Va fija y no «sticky» a propósito: una barra que entra y sale del
   flujo del documento corre todo el texto de abajo treinta píxeles
   cada vez que aparece, y eso, leyendo, es un salto en la cara. Fija
   no ocupa lugar y no mueve nada nunca. */
.lb-corr{position:fixed;left:0;right:0;top:var(--barra-h,52px);z-index:18;
  padding:7px 20px 6px;background:#e9e5da;border-bottom:1px solid var(--line)}
.lb-corr[hidden]{display:none}
.lb-corr-i{max-width:38em;margin:0 auto;display:flex;align-items:baseline;gap:10px}
.lb-corr-c{font-family:Georgia,serif;font-size:13px;font-weight:700;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-corr-p{margin-left:auto;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#a29a88;white-space:nowrap;flex:0 0 auto}
@media(max-width:520px){ .lb-corr-p{display:none} }

/* ===== el señalador =====
   Aparece una sola vez, al entrar, y se va con un toque. */
.lb-marca{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  max-width:38em;margin:0 auto 18px;padding:10px 12px;
  background:#f4f1e8;border:1px solid var(--line);border-radius:9px}
.lb-marca[hidden]{display:none}
.lb-marca-t{font-family:Georgia,serif;font-size:13.5px;font-style:italic;color:#6b6659;flex:1 1 auto}
.lb-marca-ir{font-size:12.5px;font-weight:700;color:var(--navy);text-decoration:none;
  border-bottom:1px solid var(--gold)}
.lb-marca-ir:hover{color:#122840}
.lb-marca-x{background:none;border:0;color:#a29a88;font-size:20px;line-height:1;
  cursor:pointer;padding:0 2px;width:auto;margin:0}
.lb-marca-x:hover{color:var(--navy)}

.lb-vacio{font-family:Georgia,serif;font-size:15px;color:var(--muted)}
.lb-fin{text-align:center;font-family:Georgia,serif;font-style:italic;font-size:13.5px;
  color:var(--muted);line-height:1.8;margin:46px 0 10px;padding-top:22px;
  border-top:1px solid var(--line)}

@media(max-width:600px){
  .lb-t{font-size:25px}
  .lb-h{font-size:19px}.lb-hm{font-size:20px}
  .lb-txt{font-size:15.5px;line-height:1.7}
  .lb-doc{padding-left:12px}
}

/* El renglón al margen: lo que pasó y hay que asentar, pero no es
   capítulo. La instrucción de la Escuela, sobre todo. Va en el mismo
   serif del libro para que no parezca un elemento de app, pero chico
   y apagado: se lee al pasar y no corta la lectura. */
.lb-margen{font-family:Georgia,serif;font-size:13.5px;font-style:italic;color:#8a857a;
  margin:0 0 22px;line-height:1.6}
.lb-margen a{color:#6f6a5d;text-decoration:none;border-bottom:1px solid #d8d2c2}
.lb-margen a:hover{color:var(--navy)}

/* ============================================================
   EL KILLBOARD — un renglón por piloto.

   Era una tabla de cinco columnas con la firma entera metida en una
   celda: en 390 píxeles no entra. Acá cada piloto es una fila que se
   parte sola en el teléfono — el nombre arriba, las cifras abajo — y
   en una pantalla ancha queda todo en la misma línea.

   Las cifras en cero van apagadas: lo que importa es ver de un
   vistazo dónde hay números, no leer los quince.
   ============================================================ */
.kb{margin-top:4px}
.kb-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid #eceadf}
.kb-f:last-child{border-bottom:0}
.kb-p{display:flex;align-items:center;gap:9px;flex-wrap:wrap;flex:1 1 210px;min-width:0}
.kb-m{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#241806;background:var(--gold);border-radius:20px;padding:2px 9px;white-space:nowrap}
.kb-n{display:flex;gap:6px;margin-left:auto}
.kb-c{min-width:46px;text-align:center;background:#f6f4ed;border:1px solid var(--line);
  border-radius:8px;padding:5px 4px 4px}
.kb-v{display:block;font-size:17px;font-weight:700;color:var(--navy);line-height:1.1}
.kb-e{display:block;font-size:9.5px;letter-spacing:.06em;color:var(--muted);margin-top:1px}
.kb-0{background:transparent;border-color:#efece2}
.kb-0 .kb-v{color:#c3bdae;font-weight:400}
.kb-0 .kb-e{color:#c3bdae}
@media(max-width:430px){
  .kb-n{margin-left:0;flex:1 1 100%;gap:4px}
  .kb-c{min-width:0;flex:1}
}