/* =============================================================================
AÉREO · CURSO VNOC — capa nocturna
NO reemplaza a curso.css: se carga DESPUÉS y lo repinta.
Los módulos usan exactamente las mismas clases del curso diurno
(.fase, .cards3, .cc, .dato, .widget, .exq, .chk, .tabla, .dro…), así que
todo lo que ya sabemos escribir sirve igual. Acá solo cambia la piel:
fondo de noche, luz de navegación y estroboscópica.
ORDEN OBLIGATORIO EN EL :
============================================================================= */
:root{
/* la paleta de la noche */
--noche:#05070C; /* cielo cerrado */
--noche-2:#0B1119; /* superficie */
--noche-3:#131C27; /* superficie elevada */
--linea-n:#1E2A38;
--linea-n2:#2C3A4B;
--texto-n:#E7ECF2;
--texto-n2:#9FB0C2;
--texto-n3:#71829A;
--estrobo:#FF3B30; /* luz estroboscópica: roja */
--nav-verde:#21C07A; /* luz de navegación: verde (derecha) */
--nav-rojo:#FF4D4D; /* luz de navegación: roja (izquierda) */
--ambar:#FFB020; /* precaución */
}
/* ---------------- BASE ---------------- */
body{background:var(--noche);color:var(--texto-n)}
/* cielo estrellado: dos capas de puntos, muy tenues, sin JS */
body::before{
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
background-image:
radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 68% 12%, rgba(255,255,255,.42) 50%, transparent 51%),
radial-gradient(1.6px 1.6px at 84% 46%, rgba(255,255,255,.38) 50%, transparent 51%),
radial-gradient(1.1px 1.1px at 32% 62%, rgba(255,255,255,.34) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 52% 82%, rgba(255,255,255,.30) 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 8% 88%, rgba(255,255,255,.28) 50%, transparent 51%),
radial-gradient(1.3px 1.3px at 92% 74%, rgba(255,255,255,.26) 50%, transparent 51%);
background-size:520px 520px;
animation:vnocEstrellas 9s ease-in-out infinite;
}
/* resplandor de ciudad en el horizonte */
body::after{
content:"";position:fixed;left:0;right:0;bottom:0;height:38vh;z-index:-2;pointer-events:none;
background:linear-gradient(to top, rgba(255,176,32,.10), rgba(255,176,32,0) 70%);
}
@keyframes vnocEstrellas{0%,100%{opacity:.85}50%{opacity:.45}}
h1,h2,h3{color:var(--texto-n)}
a{color:inherit}
/* ---------------- BARRA ---------------- */
.cbar{background:#020408;border-bottom:3px solid var(--estrobo)}
.cbar .menu{color:var(--ambar);border-color:rgba(255,176,32,.45)}
.cbar .menu:hover{background:var(--ambar);color:#000}
.cbar .dots a.on{background:var(--estrobo);color:#fff;border-color:var(--estrobo)}
.cbar .dots a.done{border-color:var(--nav-verde);color:var(--nav-verde)}
.cprog i{background:var(--estrobo)}
/* ---------------- PORTADA ---------------- */
.mhero{background:transparent;border-bottom:1px solid var(--linea-n)}
.mhero::before{
background-image:linear-gradient(var(--linea-n) 1px,transparent 1px),
linear-gradient(90deg,var(--linea-n) 1px,transparent 1px);
opacity:.65}
.mnum{background:var(--estrobo);color:#fff;animation:vnocPulso 2.4s ease-in-out infinite}
@keyframes vnocPulso{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.55)}50%{box-shadow:0 0 0 9px rgba(255,59,48,0)}}
.mhero .baja{color:var(--texto-n2)}
.mhero .baja strong{color:#fff}
.mmeta span{color:var(--texto-n2);border-color:var(--linea-n2)}
/* ---------------- FASES ---------------- */
.fase{border-bottom:1px solid var(--linea-n)}
.fase.gris{background:rgba(255,255,255,.025)}
.fk{color:var(--ambar)}
.fk::before{background:var(--ambar)}
.fase>.wrap>p,.fase .prosa{color:var(--texto-n2)}
.fase .prosa strong,.fase>.wrap>p strong{background:rgba(255,176,32,.16);color:#fff;padding:0 .14em;border-radius:2px}
/* ---------------- LADRILLOS ---------------- */
.cc{background:var(--noche-2);border-color:var(--linea-n)}
.cc::before{background:var(--estrobo)}
.cc:hover{border-color:var(--ambar);transform:translateY(-3px)}
.cc h3{color:#fff}
.cc p{color:var(--texto-n2)}
.dato{background:var(--noche-3);border-color:#000;box-shadow:8px 8px 0 var(--estrobo)}
.dato .k{color:var(--ambar)}
.dato p{color:var(--texto-n2)}
.widget{background:var(--noche-2);border-color:#000;box-shadow:8px 8px 0 var(--estrobo);color:var(--texto-n)}
.widget .wt{color:var(--ambar)}
.widget .wt::before{background:var(--estrobo);border-color:#000}
.widget label{color:var(--texto-n2)}
.lect span{background:var(--noche-3);border-color:var(--linea-n2);color:var(--texto-n2)}
.lect span b{color:#fff}
.escena{background:var(--noche-3);border-color:var(--linea-n)}
.cbtn{background:var(--ambar);color:#000;border-color:#000}
.cbtn:hover{box-shadow:5px 5px 0 var(--estrobo)}
.cbtn.sec{background:var(--noche-3);color:var(--texto-n);border-color:var(--linea-n2)}
.opc{background:var(--noche-2);border-color:var(--linea-n2);color:var(--texto-n)}
.opc:hover{border-color:var(--ambar)}
.opc.ok{border-color:var(--nav-verde);background:rgba(33,192,122,.14)}
.opc.mal{border-color:var(--estrobo);background:rgba(255,59,48,.14)}
.veredicto{background:var(--noche-3);border-color:var(--linea-n);border-left-color:var(--ambar);color:var(--texto-n2)}
.gonogo.go{background:var(--nav-verde);color:#04150D}
.gonogo.nogo{background:var(--estrobo)}
.gonogo.mid{background:var(--ambar);color:#000}
.exq{background:var(--noche-2);border-color:#000;box-shadow:8px 8px 0 var(--estrobo)}
.exq .exq-h{background:#020408}
.exq .exq-h b{color:var(--ambar)}
.exq .exq-q{color:#fff}
.exq ul.exq-o li{border-color:var(--linea-n2);color:var(--texto-n2)}
.exq ul.exq-o li::before{background:var(--noche-3);border-right-color:var(--linea-n2);color:var(--texto-n3)}
.exq ul.exq-o li.ok{border-color:var(--nav-verde);background:rgba(33,192,122,.14);color:#fff}
.exq ul.exq-o li.ok::before{background:var(--nav-verde);border-right-color:var(--nav-verde)}
.exq .exq-e{background:var(--noche-3);border-color:var(--linea-n);border-left-color:var(--ambar);color:var(--texto-n2)}
.exq .exq-e b{color:#fff}
.chk li{background:var(--noche-2);border-color:var(--linea-n);color:var(--texto-n)}
.chk li:hover{border-color:var(--ambar)}
.chk li.on{border-color:var(--nav-verde);background:rgba(33,192,122,.12)}
.chk li .box{background:var(--noche-3);border-color:var(--linea-n2);color:var(--texto-n)}
.chk li.on .box{background:var(--nav-verde);border-color:var(--nav-verde);color:#04150D}
.tabla{background:var(--noche-2)}
.tabla th{background:#020408;color:var(--ambar)}
.tabla td{border-color:var(--linea-n);color:var(--texto-n2)}
.tabla tr:nth-child(even) td{background:rgba(255,255,255,.03)}
.tabla td b,.tabla td strong{color:#fff}
.dro-b{background:var(--ambar);border-color:#000;color:#170F00}
.dro-b::before{background:var(--ambar);border-color:#000}
.fase-eval{background:#020408}
/* ---------------- PIEZAS PROPIAS DE LA NOCHE ---------------- */
/* Luces de navegación: el par rojo/verde que identifica al RPA en el aire */
.luces{display:flex;gap:26px;align-items:center;margin-top:18px;flex-wrap:wrap}
.luz{display:flex;align-items:center;gap:10px;font-family:var(--mn);font-size:11px;
letter-spacing:.1em;text-transform:uppercase;color:var(--texto-n2)}
.luz i{width:14px;height:14px;border-radius:50%;display:inline-block;flex:0 0 auto}
.luz.roja i{background:var(--nav-rojo);box-shadow:0 0 14px 3px rgba(255,77,77,.75)}
.luz.verde i{background:var(--nav-verde);box-shadow:0 0 14px 3px rgba(33,192,122,.75)}
.luz.estrobo i{background:#fff;animation:vnocEstrobo 1.4s steps(1,end) infinite}
@keyframes vnocEstrobo{0%,8%{opacity:1;box-shadow:0 0 18px 6px rgba(255,255,255,.9)}9%,100%{opacity:.12;box-shadow:none}}
/* Aviso normativo duro: los números que no se negocian */
.limite{display:grid;gap:10px;margin-top:20px}
@media(min-width:640px){ .limite{grid-template-columns:repeat(3,1fr)} }
.lim{background:var(--noche-2);border:2px solid var(--linea-n);border-top:4px solid var(--estrobo);
border-radius:3px;padding:15px 16px}
.lim b{display:block;font-family:var(--hd);font-weight:900;font-size:clamp(24px,4vw,34px);
line-height:1;color:var(--ambar)}
.lim span{display:block;font-family:var(--mn);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
color:var(--texto-n3);margin-top:7px}
.lim em{display:block;font-style:normal;font-size:13px;color:var(--texto-n2);margin-top:8px;line-height:1.5}
/* Comparador día / noche */
.dn{display:grid;gap:0;margin-top:20px;border:2px solid var(--linea-n);border-radius:3px;overflow:hidden}
.dn-fila{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--linea-n)}
.dn-fila:last-child{border-bottom:0}
.dn-fila.cab>*{background:#020408;font-family:var(--mn);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--texto-n3)}
.dn-fila.cab .noc{color:var(--ambar)}
.dn-fila>*{padding:11px 13px;font-size:13.5px;border-right:1px solid var(--linea-n)}
.dn-fila>*:last-child{border-right:0}
.dn-fila .tema{color:var(--texto-n2)}
.dn-fila .dia{color:var(--texto-n3)}
.dn-fila .noc{color:#fff;font-weight:600;background:rgba(255,176,32,.07)}
/* Sello de crepúsculo */
.crep{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;
background:linear-gradient(90deg,rgba(255,176,32,.14),rgba(5,7,12,0));
border-left:4px solid var(--ambar);padding:14px 16px;border-radius:0 3px 3px 0}
.crep b{font-family:var(--hd);font-weight:900;font-size:20px;color:var(--ambar);text-transform:uppercase}
.crep span{font-size:13.5px;color:var(--texto-n2);max-width:62ch}
@media(prefers-reduced-motion:reduce){
body::before,.mnum,.luz.estrobo i{animation:none}
}