/* =====================================================================
   LOGIN-V2 2026-10-01 — rediseño NEXUS. Lo usa Views/Login/login_v2.php.
   Toda la pantalla es la red: fondo del ISP + 12 hilos con el código de
   colores de fibra que terminan DENTRO de una placa de vidrio con el
   formulario; cada pulso que llega ilumina el borde con el color del hilo.
   Teléfono primero: 375 px, casillas de 16 px y objetivos de 44 px o más.
   ===================================================================== */
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/barlow/Barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/barlow/Barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/barlow/Barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/barlow/Barlow-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/barlow/BarlowSemiCondensed-600.woff2) format("woff2")}

:root{
  --nxl-tinta:#eef2f0;
  --nxl-tinta-2:#a3b3ae;
  --nxl-noche:#090e0d;
  --nxl-vidrio:rgba(13,20,18,.62);
  --nxl-borde:rgba(233,238,236,.14);
  --nxl-casilla:rgba(7,11,10,.55);
  --nxl-linea:rgba(233,238,236,.16);
  --nxl-acento:#e8771e;
  --nxl-acento-hover:#f08a36;
  --nxl-acento-tinta:#1c0f03;
  --nxl-foco:#5b9bff;
}

html,body.nxl-body{margin:0;min-height:100%;background:var(--nxl-noche);color-scheme:dark}
body.nxl-body{font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--nxl-tinta);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.nxl-body ::selection{background:var(--nxl-acento);color:var(--nxl-acento-tinta)}
.nxl *,.nxl *::before,.nxl *::after{box-sizing:border-box}

/* Cargando (lo muestra functions_login.js con display:flex) */
#loading{position:fixed;inset:0;background:rgba(9,14,13,.8);z-index:9999;display:none;align-items:center;justify-content:center}
#loading .loading-spinner{width:36px;height:36px;border:3px solid var(--nxl-linea);border-top-color:var(--nxl-acento);border-radius:50%;animation:nxl-giro .7s linear infinite}
@keyframes nxl-giro{to{transform:rotate(360deg)}}

/* ---------- Escenario: la red ocupa toda la pantalla ---------- */
.nxl{position:relative;min-height:100vh;min-height:100svh}
.nxl-red{position:fixed;inset:0;z-index:0;background:var(--nxl-noche);--hilo:#e8771e}
.nxl-red-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.6) brightness(.38) contrast(1.1)}
.nxl-red::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 50%,rgba(9,14,13,.15) 0%,rgba(9,14,13,.55) 55%,rgba(9,14,13,.92) 100%)}
#nxl-fibras{position:absolute;inset:0;width:100%;height:100%;z-index:1}

/* ---------- Placa de vidrio con el formulario ---------- */
.nxl-form-col{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:48px 0 72px 9vw;pointer-events:none}
.nxl-form-wrap{
  pointer-events:auto;position:relative;width:100%;max-width:380px;
  padding:40px 36px 26px;border-radius:16px;
  background:var(--nxl-vidrio);border:1px solid var(--nxl-borde);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06);
  --llega:#e8771e;
}
/* Destello del borde cuando llega un pulso por un hilo */
.nxl-form-wrap::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  border:1px solid var(--llega);box-shadow:0 0 22px -2px var(--llega),inset 0 0 18px -6px var(--llega)}
.nxl-form-wrap.llega::after{animation:nxl-llega .9s cubic-bezier(.2,.8,.2,1)}
@keyframes nxl-llega{0%{opacity:.95}100%{opacity:0}}

.nxl-logo-box{display:flex;justify-content:center;margin:0 0 30px}
.nxl-logo{display:block;max-width:220px;max-height:96px;width:auto;height:auto}
.nxl-logo-nexus{max-height:132px;border-radius:10px;box-shadow:0 12px 28px -12px rgba(0,0,0,.8)}

.nxl-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nxl-field{margin-bottom:14px}
.nxl-field>label:not(.nxl-oculto){display:block;font-family:"Barlow Semi Condensed","Barlow",sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;margin:0 0 6px;color:var(--nxl-tinta)}
.nxl-field>label i{color:var(--nxl-tinta-2);margin-right:4px}
.nxl-input{position:relative}
.nxl-input input,.nxl-input select{
  width:100%;height:50px;padding:0 14px;font:500 16px/1.2 "Barlow",sans-serif;color:var(--nxl-tinta);
  background:var(--nxl-casilla);border:1px solid var(--nxl-linea);border-radius:8px;
  transition:border-color .15s, box-shadow .15s, background .15s;caret-color:var(--nxl-acento);
}
.nxl-input select option{background:#121a18;color:var(--nxl-tinta)}
.nxl-input input::placeholder{color:#8a9a95;opacity:1}
.nxl-input input:hover,.nxl-input select:hover{border-color:rgba(233,238,236,.3)}
.nxl-input input:focus,.nxl-input select:focus{outline:none;border-color:var(--nxl-foco);background:rgba(7,11,10,.75);box-shadow:0 0 0 3px rgba(91,155,255,.22)}
.nxl-input input:-webkit-autofill{-webkit-text-fill-color:var(--nxl-tinta);-webkit-box-shadow:0 0 0 40px #0c1311 inset;caret-color:var(--nxl-acento)}
.nxl-input input.parsley-error{border-color:#f0575d}
.nxl-con-icono .nxl-icono{position:absolute;left:0;top:0;width:46px;height:50px;display:flex;align-items:center;justify-content:center;color:var(--nxl-tinta-2);font-size:15px;pointer-events:none;transition:color .15s}
.nxl-con-icono input{padding-left:46px}
.nxl-con-icono:focus-within .nxl-icono{color:var(--nxl-acento)}
.nxl #password{padding-right:52px}
.nxl .showHidePw{position:absolute;right:0;top:0;width:50px;height:50px;display:flex;align-items:center;justify-content:center;color:var(--nxl-tinta-2);cursor:pointer;font-size:17px;border-radius:0 8px 8px 0}
.nxl .showHidePw:hover{color:var(--nxl-tinta)}
.nxl .showHidePw:focus-visible{outline:3px solid var(--nxl-foco);outline-offset:-3px}

.nxl-captcha #captcha-question{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--nxl-tinta)}
.nxl-captcha input{text-align:center;font-size:18px}

.nxl-btn{
  width:100%;height:52px;margin-top:22px;border:0;border-radius:8px;cursor:pointer;
  background:var(--nxl-acento);color:var(--nxl-acento-tinta);
  font:700 16px/1 "Barlow",sans-serif;letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 1px 0 rgba(0,0,0,.25),0 10px 22px -10px rgba(232,119,30,.75);
  transition:background .15s, transform .1s, box-shadow .15s;
}
.nxl-btn:hover{background:var(--nxl-acento-hover);box-shadow:0 1px 0 rgba(0,0,0,.25),0 12px 26px -10px rgba(232,119,30,.9)}
.nxl-btn:active{transform:translateY(1px)}
.nxl-btn:focus-visible{outline:3px solid var(--nxl-foco);outline-offset:2px}

.nxl-row{display:flex;align-items:center;justify-content:space-between;margin:12px 0 0;gap:12px;flex-wrap:wrap}
.nxl-check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;cursor:pointer;min-height:44px;margin:0;color:var(--nxl-tinta-2)}
.nxl-check input{width:18px;height:18px;accent-color:var(--nxl-acento);margin:0}
.nxl-link,.nxl-link:visited{color:var(--nxl-tinta-2);font-weight:500;font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(163,179,174,.5);min-height:44px;display:inline-flex;align-items:center}
.nxl-link:hover{color:var(--nxl-tinta)}

.nxl-foot{position:absolute;left:9vw;bottom:24px;z-index:2;font-size:13px;color:var(--nxl-tinta-2);display:flex;gap:24px;flex-wrap:wrap;pointer-events:auto}
.nxl-foot b{font-weight:600;color:var(--nxl-tinta)}

/* ---------- Estado y mensajes (sobre la red) ---------- */
.nxl-estado{position:absolute;top:24px;right:24px;z-index:3;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:20px;background:rgba(9,14,13,.7);border:1px solid rgba(255,255,255,.12);font:500 13px/1 "Barlow",sans-serif;color:#e9eeec}
.nxl-punto{width:8px;height:8px;border-radius:50%;background:#2a9d55;box-shadow:0 0 8px #2a9d55}
.nxl-red-texto{position:absolute;right:56px;bottom:56px;z-index:2;color:#e9eeec;width:min(460px,38vw)}
.nxl-marca{font:600 13px/1 "Barlow Semi Condensed","Barlow",sans-serif;letter-spacing:.22em;color:#a9b8b3;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.nxl-marca::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--hilo);box-shadow:0 0 8px var(--hilo);transition:background .4s, box-shadow .4s}
.nxl-msj{position:relative;min-height:118px}
.nxl-red-texto .nxl-msj-t{font-size:34px;line-height:1.12;font-weight:700;letter-spacing:-0.01em;margin:0 0 10px;color:#f2f5f4;text-wrap:balance}
.nxl-red-texto .nxl-msj-s{font-size:18px;line-height:1.4;font-weight:500;margin:0;color:#a9b8b3;text-wrap:pretty}
.nxl-msj-luz{position:absolute;top:-6px;bottom:-6px;left:0;width:2px;background:var(--hilo);box-shadow:0 0 14px 2px var(--hilo);opacity:0;pointer-events:none}
.nxl-msj.entra .nxl-msj-t{animation:nxl-barrido .9s cubic-bezier(.2,.8,.2,1) both}
.nxl-msj.entra .nxl-msj-s{animation:nxl-barrido .9s .18s cubic-bezier(.2,.8,.2,1) both}
.nxl-msj.entra .nxl-msj-luz{animation:nxl-luz 1.1s cubic-bezier(.2,.8,.2,1) both}
.nxl-msj.sale{opacity:0;transform:translateY(-6px);transition:opacity .35s, transform .35s}
@keyframes nxl-barrido{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% 0 -10% 0)}}
@keyframes nxl-luz{0%{left:0;opacity:1}80%{left:100%;opacity:1}100%{left:100%;opacity:0}}
.nxl-hilos{display:flex;gap:4px;margin-top:20px}
.nxl-hilos span{width:22px;height:4px;border-radius:2px;background:currentColor;cursor:pointer;opacity:.35;transition:opacity .3s, transform .3s, box-shadow .3s;position:relative}
.nxl-hilos span::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.nxl-hilos span:hover{opacity:.8}
.nxl-hilos span.activo{opacity:1;transform:scaleY(1.6);box-shadow:0 0 10px currentColor}
.nxl-hilos span:nth-child(1){color:#1f5fbf}.nxl-hilos span:nth-child(2){color:#e8771e}.nxl-hilos span:nth-child(3){color:#2a9d55}
.nxl-hilos span:nth-child(4){color:#8b5a2b}.nxl-hilos span:nth-child(5){color:#8a8f93}.nxl-hilos span:nth-child(6){color:#f3f5f4}
.nxl-hilos span:nth-child(7){color:#d62828}.nxl-hilos span:nth-child(8){color:#4a5653}.nxl-hilos span:nth-child(9){color:#f2c230}
.nxl-hilos span:nth-child(10){color:#7b3fa0}.nxl-hilos span:nth-child(11){color:#e7609e}.nxl-hilos span:nth-child(12){color:#2bb3a6}

/* ---------- Pantallas medianas ---------- */
@media (max-width:1100px){
  .nxl-red-texto{width:min(380px,40vw);right:32px;bottom:40px}
  .nxl-red-texto .nxl-msj-t{font-size:28px}
}

/* ---------- Celular ---------- */
@media (max-width:820px){
  .nxl-form-col{justify-content:center;align-items:flex-start;padding:150px 16px 96px}
  .nxl-form-wrap{max-width:420px;padding:30px 22px 18px}
  .nxl-logo-box{margin-bottom:24px}
  .nxl-logo{max-width:180px;max-height:72px}
  .nxl-logo-nexus{max-height:104px}
  .nxl-red-texto{left:16px;right:auto;top:18px;bottom:auto;width:auto}
  .nxl-msj,.nxl-hilos{display:none}
  .nxl-marca{margin:0}
  .nxl-estado{top:12px;right:12px}
  .nxl-foot{left:16px;right:16px;bottom:18px;justify-content:space-between;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .nxl-btn,.nxl-input input{transition:none}
  .nxl-msj.entra *{animation:none!important}
  .nxl-msj.sale{transition:none}
  .nxl-form-wrap.llega::after{animation:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nxl-form-wrap{background:rgba(13,20,18,.94)}
}

/* Ventana "Restablecer contraseña" en oscuro */
body.nxl-body .modal-content{font-family:"Barlow",sans-serif;background:#121a18;color:#e9eeec;border:1px solid #2c3835}
body.nxl-body .modal-header{border-bottom-color:#2c3835}
body.nxl-body .modal-footer{border-top-color:#2c3835}
body.nxl-body .modal .close{color:#e9eeec;text-shadow:none;opacity:.8}
body.nxl-body .modal .form-control{font-size:16px;height:46px;background:#0b1110;border-color:#2c3835;color:#e9eeec}
body.nxl-body .modal .control-label{color:#e9eeec}

/* Logo propio del ISP: va sobre una plaquita clara (muchos logos traen letras
   negras o moradas pensadas para fondo blanco y se perderían en el vidrio) */
.nxl-logo-isp .nxl-logo{background:#f4f6f5;padding:12px 18px;border-radius:10px;max-width:240px;max-height:104px;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.6)}
@media (max-width:820px){.nxl-logo-isp .nxl-logo{max-width:200px;max-height:84px;padding:10px 14px}}