/* NexTal — acceso. Medidas del diseño a 1619 × 972; en escritorio la composición se escala para ocupar la ventana. */
.lg{display:grid;grid-template-columns:minmax(0,1fr) 641px;min-height:100vh;min-height:100dvh;background:#FFF}
.lg [hidden]{display:none!important}

/* ------------------------------------------------------------ presentación (escena con los personajes) */
/* La escena queda a tamaño de diseño, anclada abajo a la derecha; si sobra espacio (ventanas más altas o más anchas que
   el diseño), arriba y a la izquierda continúan los colores de sus bordes. Así los personajes nunca quedan bajo el texto. */
.lg-lado{position:relative;overflow:hidden;color:#FFF;
  background:url("../img/acceso/borde-arriba.png") right top / 978px calc(100% - 971px) no-repeat,
             url("../img/acceso/borde-izq.png") left bottom / calc(100% - 977px) 972px no-repeat,#011E5F}
.lg-escena{position:absolute;right:0;bottom:0;width:978px;height:972px;max-width:none}
.lg-lado-in{position:relative;display:flex;flex-direction:column;height:100%;padding:64px 0 44px 78px}
.lg-lado-in>*{flex-shrink:0}
.lg-marca{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;width:213px;height:73px;margin-left:-8px;border-radius:9px;background:#FFF;box-shadow:0 8px 22px rgb(0 0 0 / .22)}
.lg-marca img{width:175px;height:auto;max-height:52px;object-fit:contain}
.lg-eyebrow{margin:35px 0 0;font-size:16.5px;letter-spacing:.19em;text-transform:uppercase;color:#D6DEF5}
.lg-titulo{margin:10px 0 0;font-size:44px;line-height:42px;font-weight:800;letter-spacing:-.022em;color:#FFF}
.lg-titulo em{display:block;font-style:normal;color:#1E9BFF}
.lg-lead{max-width:357px;margin:13px 0 0;font-size:16.5px;line-height:23px;color:#E3E9F8}
.lg-rasgos{display:flex;flex-direction:column;gap:17px;margin:25px 0 0;padding:0;list-style:none}
.lg-rasgos li{display:flex;align-items:flex-start;gap:24px}
.lg-ico{flex:none;display:grid;place-items:center;width:65px;height:65px;border-radius:9px;background:rgb(255 255 255 / .06);border:1px solid rgb(120 160 255 / .45);color:#5AA7FF}
.lg-ico svg{width:32px;height:32px}
.lg-rasgos div{display:flex;flex-direction:column;padding-top:5px;max-width:262px}
.lg-rasgos b{font-size:16.5px;line-height:21px;font-weight:700;color:#FFF}
.lg-salto{display:block}
.lg-rasgos div>span{margin-top:3px;font-size:14.2px;line-height:19.5px;color:#D0DAF2}
.lg-pie{margin:auto 0 0;padding-top:24px;font-size:15px;color:#D6DEF5}

/* ------------------------------------------------------------ formulario */
.lg-form{position:relative;display:flex;flex-direction:column;justify-content:center;padding:66px 65px 0 84px;color:#0B1F4D;
  background:radial-gradient(circle at 104% 9%,#F2F5FA 0 158px,transparent 159px),radial-gradient(circle at 108% 96%,#F4F6FA 0 250px,transparent 251px),#FFF}
.lg-idioma{position:absolute;top:23px;right:45px}
.lg-idioma-btn{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px 0 16px;border:1px solid #E3E8F0;border-radius:9px;background:#FFF;font:600 16px/1 inherit;color:#26324A;cursor:pointer;box-shadow:0 2px 6px rgb(12 30 80 / .04)}
.lg-idioma-btn svg{width:13px;height:13px}
.lg-bandera{display:inline-block;flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#FCD116 0 50%,#003893 50% 75%,#CE1126 75%);box-shadow:inset 0 0 0 1px rgb(0 0 0 / .06)}
.lg-idiomas{left:auto;right:0;top:calc(100% + 6px);min-width:250px}
.lg-idiomas b{display:flex;align-items:center;gap:10px}
.lg-idiomas .lg-bandera{width:20px;height:20px}
.lg-form-in{width:100%;max-width:492px}
.lg-form h1{margin:0;font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.025em;color:#0B1F4D}
.lg-sub{margin:5px 0 0;font-size:17px;color:#5B6478}
.lg-aviso{display:flex;align-items:center;gap:14px;min-height:47px;margin:22px 0 0;padding:10px 16px;border-left:3px solid #F2A33A;border-radius:4px;background:#FDF1DF;font-size:14.5px;line-height:1.35;color:#2A3548}
.lg-aviso svg{flex:none;width:23px;height:23px;color:#E8962E}
.lg-aviso.error{border-left-color:#D2503F;background:#FDECEA;color:#8E2518}
.lg-aviso.ok{border-left-color:#1FA774;background:#E9F7F0;color:#14573D}
.lg-campos{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.lg-campo{display:flex;flex-direction:column;gap:7px;font-size:16px;font-weight:500;color:#3A4659}
.lg-control{position:relative;display:block}
.lg-control>svg{position:absolute;left:18px;top:50%;width:21px;height:21px;margin-top:-10.5px;color:#4A5568;pointer-events:none}
.lg-control input{width:100%;height:50px;padding:0 52px 0 56px;border:1px solid #D5DCE6;border-radius:7px;background:#FFF;font:inherit;font-size:16px;font-weight:400;color:#0B1F4D;transition:border-color .15s,box-shadow .15s}
.lg-control input::placeholder{color:#7A8497;opacity:1}
.lg-control input[type=password]::placeholder{letter-spacing:.18em}
.lg-control input:focus{outline:none;border-color:#1F6BF0;box-shadow:0 0 0 3px rgb(31 107 240 / .15)}
.lg-ver{position:absolute;right:10px;top:50%;display:grid;place-items:center;width:36px;height:36px;margin-top:-18px;padding:0;border:0;border-radius:6px;background:none;color:#4A5568;cursor:pointer}
.lg-ver:hover{background:#F1F4F9}
.lg-ver svg{width:24px;height:24px}
.lg-ver[aria-pressed="true"] .tachado{display:none}
.lg-fila{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:2px}
.lg-recordar{display:flex;align-items:center;gap:12px;font-size:16px;color:#56627A;cursor:pointer}
.lg-recordar input{width:20px;height:20px;margin:0;accent-color:#1F4FC7;cursor:pointer}
.lg-enlace{padding:0;border:0;background:none;font:inherit;font-size:16px;color:#1F6BF0;cursor:pointer}
.lg-enlace:hover{text-decoration:underline}
.lg-entrar{display:flex;align-items:center;justify-content:center;gap:16px;height:56px;margin-top:4px;border:0;border-radius:6px;background:#0A2472;color:#FFF;font:inherit;font-size:19px;font-weight:600;cursor:pointer;transition:background .15s,box-shadow .15s}
.lg-entrar:hover{background:#071B5C;box-shadow:0 8px 20px rgb(10 36 114 / .25)}
.lg-entrar svg{width:24px;height:24px}
.lg-separador{display:flex;align-items:center;gap:18px;margin:33px 0 0;font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#4F5B70}
.lg-separador::before,.lg-separador::after{content:"";flex:1 1 auto;height:1px;background:#DDE3EC}
.lg-opciones{display:flex;flex-direction:column;gap:11px;margin-top:17px}
.lg-opciones a{display:flex;align-items:center;gap:24px;min-height:83px;padding:10px 22px 10px 14px;border:1px solid #E6EBF2;border-radius:8px;background:#FFF;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.lg-opciones a:hover{border-color:#C9D6EA;box-shadow:0 10px 24px rgb(12 30 80 / .08);transform:translateY(-1px)}
.lg-opciones a>svg{flex:none;width:20px;height:20px;color:#3A4659}
.lg-op-ico{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:8px;background:#EAF2FE;color:#1F6BF0}
.lg-op-ico svg{width:31px;height:31px}
.lg-op-txt{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;line-height:1.3}
.lg-op-txt small{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#56627A}
.lg-op-txt b{margin-top:3px;font-size:16.5px;color:#0B1F4D}
.lg-op-txt span{margin-top:2px;font-size:14px;color:#56627A}

/* ------------------------------------------------------------ verificación en dos pasos (diseño de 1536 × 1024) */
.lg-2fa{grid-template-columns:minmax(0,1fr) 658px}
.lg-lado-2fa{background:url("../img/acceso/borde-2fa-arriba.png") right top / 878px calc(100% - 1023px) no-repeat,
  url("../img/acceso/borde-2fa-izq.png") left bottom / calc(100% - 877px) 1024px no-repeat,#02205F}
.lg-lado-2fa .lg-escena{width:878px;height:1024px}
.lg-lado-2fa .lg-lado-in{padding:66px 0 60px 82px}
.lg-lado-2fa .lg-marca{width:215px;height:70px;margin-left:-10px}
.lg-lado-2fa .lg-eyebrow{margin-top:44px;letter-spacing:.24em}
.lg-lado-2fa .lg-titulo{margin-top:16px;font-size:50px;line-height:53px}
.lg-lado-2fa .lg-lead{max-width:282px;margin-top:22px;font-size:20px;line-height:28.5px}
.lg-lado-2fa .lg-rasgos{gap:19px;margin-top:40px}
.lg-lado-2fa .lg-ico{width:64px;height:64px}
.lg-lado-2fa .lg-rasgos div{padding-top:10px;max-width:none}
.lg-lado-2fa .lg-rasgos b{font-size:17.5px}
.lg-lado-2fa .lg-rasgos div>span{font-size:15.5px}
.lg-lado-2fa .lg-pie{margin-left:-17px}
.lg-2fa .lg-form{padding:60px 74px 0 94px}
.lg-2fa .lg-idioma{top:28px;right:43px}
.lg-2fa .lg-form-in{max-width:490px}
.lg-volver-2fa{margin:0}
.lg-volver-2fa a{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:500}
.lg-volver-2fa svg{width:18px;height:18px;margin-left:-4px}
.lg-chip{display:inline-flex;align-items:center;gap:8px;height:30px;margin:14px 0 0;padding:0 10px;border-radius:6px;background:#E6EEFC;color:#1F4FC7;font-size:14px;font-weight:500}
.lg-chip svg{width:16px;height:16px}
.lg-2fa .lg-form h1{margin-top:18px}
.lg-sub-2fa{margin-top:14px;font-size:18px;line-height:27px}
.lg-cuenta{display:flex;align-items:center;gap:14px;height:56px;margin-top:16px;padding:0 22px 0 20px;border-radius:8px;background:#EEF3FB;font-size:17px;color:#3A4659}
.lg-cuenta svg{flex:none;width:22px;height:22px;color:#1F6BF0}
.lg-cuenta span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-cuenta a{color:#1F4FC7;font-weight:500;text-decoration:none}
.lg-cuenta a:hover{text-decoration:underline}
.lg-campos-2fa{gap:0;margin-top:22px}
.lg-otp-et{display:block;margin-bottom:12px;font-size:17px;font-weight:500;color:#3A4659}
.lg-otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
.lg-otp input{width:100%;height:66px;padding:0;border:1px solid #D5DCE6;border-radius:8px;background:#FFF;text-align:center;font:700 28px/1 inherit;color:#0B1F4D;caret-color:#1F6BF0;transition:border-color .15s,box-shadow .15s}
.lg-otp input:focus{outline:none;border:2px solid #1F6BF0;box-shadow:0 0 0 3px rgb(31 107 240 / .12)}
.lg-reenvio{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:17px;font-size:17px;color:#5B6478}
.lg-reenvio b{font-weight:500}
.lg-reenvio strong{color:#1F4FC7;font-weight:700}
.lg-reenvio .lg-enlace{font-size:17px}
.lg-tiempo{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:15px;color:#667085}
.lg-tiempo i{--resto:1;position:relative;flex:none;width:72px;height:6px;border-radius:3px;background:#E6EBF2;overflow:hidden}
.lg-tiempo i::after{content:"";position:absolute;inset:0;width:calc(var(--resto) * 100%);border-radius:3px;background:#1F6BF0;transition:width 1s linear}
.lg-campos-2fa .lg-codigo-simple{margin-bottom:4px}
.lg-campos-2fa .lg-entrar{height:58px;margin-top:17px;font-size:20px}
.lg-separador-2fa{margin-top:36px;font-size:16px;letter-spacing:0;text-transform:none;color:#56627A}
.lg-opciones-2fa{gap:11px;margin-top:18px}
.lg-opcion{display:flex;align-items:center;gap:26px;width:100%;min-height:82px;padding:10px 26px 10px 16px;border:1px solid #E6EBF2;border-radius:8px;background:#FFF;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.lg-opcion:hover{border-color:#C9D6EA;box-shadow:0 10px 24px rgb(12 30 80 / .08);transform:translateY(-1px)}
.lg-opcion>svg{flex:none;width:20px;height:20px;color:#3A4659}
.lg-opcion .lg-op-ico{width:56px;height:56px}
.lg-opcion .lg-op-txt b{margin:0;font-size:17.5px}
.lg-opcion .lg-op-txt span{margin-top:4px;font-size:16px}
.lg-opcion.deshabilitada{cursor:not-allowed;opacity:.62}
.lg-opcion.deshabilitada:hover{border-color:#E6EBF2;box-shadow:none;transform:none}
.lg-pronto{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:#F1F4F9;color:#56627A;font-size:12px;font-style:normal;font-weight:600;vertical-align:2px}
.lg-recuperacion{margin:14px 0 0;text-align:center}
.lg-recuperacion .lg-enlace{font-size:14.5px}

/* ------------------------------------------------------------ registro de personas */
.lg .trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.lg-chip-verde{margin-top:0;background:#E3F5EC;color:#0E7A57}
.lg-persona .lg-form h1{margin-top:14px}
.lg-campos-registro{gap:16px;margin-top:22px}
.lg-fila-campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lg-fila-campos .lg-control input{padding-right:46px}
.lg-campo .lg-requisito{display:inline;margin-left:6px;font-size:13px;font-weight:400;color:#7A8497}
.lg-fila-campos .lg-campo{display:block}
.lg-fila-campos .lg-control{margin-top:7px}
.lg-consent{display:flex;align-items:flex-start;gap:12px;margin-top:2px;font-size:14.5px;line-height:20px;color:#3A4659;cursor:pointer}
.lg-consent input{flex:none;width:20px;height:20px;margin:0;accent-color:#1F4FC7;cursor:pointer}
.lg-consent a{color:#1F4FC7;font-weight:600}
.lg-campos-registro .lg-entrar{margin-top:2px}
.lg-nota-centro{text-align:center}
.lg-persona .lg-separador{margin-top:22px}

/* ------------------------------------------------------------ revisa tu correo */
.lg-ayuda-2fa{margin-top:30px;padding:16px 18px;border:1px solid #E6EBF2;border-radius:10px;background:#F8FAFD;font-size:14px;line-height:1.5;color:#4F5B70}
.lg-ayuda-2fa b{color:#0B1F4D}
.lg-ayuda-2fa p{margin:4px 0 0}
.lg-sobre{display:block;width:96px;height:96px;margin-bottom:18px}
.lg-sobre svg{width:100%;height:100%}
.lg-revisa .lg-sub{font-size:16.5px;line-height:1.5}
.lg-cuenta-revisa{margin-top:20px}
.lg-revisa .lg-boton{margin-top:18px}
.lg-pasos{counter-reset:paso;display:flex;flex-direction:column;gap:14px;margin:26px 0 0;padding:0;list-style:none}
.lg-pasos li{counter-increment:paso;position:relative;display:flex;flex-direction:column;padding-left:46px;font-size:15px;line-height:1.4;color:#56627A}
.lg-pasos li::before{content:counter(paso);position:absolute;left:0;top:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#EAF2FE;color:#1F4FC7;font-weight:700;font-size:15px}
.lg-pasos b{color:#0B1F4D;font-size:16px}
.lg-revisa .lg-ayuda-2fa{margin-top:24px}
.lg-secundario{display:flex;align-items:center;justify-content:center;gap:14px;height:52px;border:1px solid #C9D6EA;border-radius:6px;background:#FFF;color:#0A2472;font-size:16.5px;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s}
.lg-secundario:hover{background:#F3F7FD;border-color:#0A2472}
.lg-secundario svg,.lg-boton svg{width:20px;height:20px}

/* ------------------------------------------------------------ pantallas medianas y pequeñas (sin escalado) */
@media (max-width:1100px){
  .lg{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
  .lg-form{padding-left:48px;padding-right:40px}
  .lg-lado-in{padding-left:48px}
}
@media (max-width:900px){
  /* Primero el formulario (es lo que se viene a hacer) y debajo la presentación con los personajes. */
  .lg{display:flex;flex-direction:column}
  .lg-form{order:-1}
  .lg-lado{min-height:0}
  .lg-escena,.lg-lado-2fa .lg-escena{inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 40%}
  .lg-lado::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(1 29 92 / .96) 0,rgb(1 29 92 / .86) 55%,rgb(1 29 92 / .35) 100%)}
  .lg-lado-in{z-index:1;height:auto;padding:28px 24px 30px}
  .lg-titulo{font-size:34px;line-height:36px}
  .lg-rasgos{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
  .lg-rasgos div{max-width:none}
  .lg-form{padding:84px 24px 36px}
  .lg-form-in{margin:0 auto}
  .lg-idioma{top:20px;right:20px}
  .lg-2fa .lg-idioma{top:20px;right:20px}
  .lg-2fa .lg-form{padding:84px 24px 36px}
  .lg-lado-2fa .lg-lado-in{padding:28px 24px 30px}
  .lg-lado-2fa .lg-marca{margin-left:0}
  .lg-lado-2fa .lg-eyebrow{margin-top:26px}
  .lg-lado-2fa .lg-titulo{font-size:36px;line-height:39px}
  .lg-lado-2fa .lg-lead{max-width:none;font-size:17px;line-height:24px}
  .lg-lado-2fa .lg-rasgos{margin-top:26px}
  .lg-lado-2fa .lg-pie{margin-left:0}
}
@media (max-width:600px){
  .lg-fila-campos{grid-template-columns:1fr}
  .lg-otp{gap:8px}
  .lg-otp input{height:54px;font-size:24px}
  .lg-2fa .lg-form{padding:80px 16px 28px}
  .lg-opcion{gap:14px;padding:12px 14px}
  .lg-eyebrow{margin-top:22px;font-size:13px}
  .lg-titulo{font-size:30px;line-height:32px}
  .lg-lead{font-size:15.5px;line-height:21px}
  .lg-rasgos{grid-template-columns:1fr}
  .lg-ico{width:52px;height:52px}
  .lg-ico svg{width:26px;height:26px}
  .lg-rasgos div{padding-top:4px}
  .lg-form{padding:80px 16px 28px}
  .lg-form h1{font-size:32px}
  .lg-fila{flex-wrap:wrap}
  .lg-opciones a{gap:14px;padding:12px 14px}
  .lg-op-ico{width:48px;height:48px}
}

/* ------------------------------------------------------------ recuperar la contraseña */
.lg-volver{margin:0 0 18px;font-size:15px}
.lg-volver a{color:#1F4FC7;text-decoration:none;font-weight:600}
.lg-volver a:hover{text-decoration:underline}
.lg-nota{margin:18px 0 0;font-size:14px;line-height:1.5;color:#667085}
.lg-nota a{color:#1F4FC7;font-weight:600}
.lg-boton{margin-top:24px;text-decoration:none}
.lg-listo{display:flex;align-items:flex-start;gap:16px;margin-top:24px;padding:18px;border:1px solid #DCEBE2;border-radius:10px;background:#F4FBF7;font-size:15px;line-height:1.5;color:#2A3548}
.lg-listo svg{flex:none;width:48px;height:48px}
.lg-listo p{margin:0}