:root {
     --azul-noche: #061a33;
     --azul-profundo: #08254a;
     --azul-medio: #0d3c78;
     --azul-luz: #1c75d8;
     --verde: #43a936;
     --verde-hover: #368a2c;
     --blanco: #ffffff;
     --texto: #102a4c;
     --texto-suave: #65758b;
     --borde: #d7e1ec;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html,
 body {
     width: 100%;
     min-height: 100%;
 }

 body {
     min-height: 100vh;
     font-family: 'Inter', sans-serif;
     color: var(--blanco);
     overflow: hidden;
     background:
         radial-gradient(circle at 17% 52%, rgba(39, 141, 255, .45) 0%, rgba(39, 141, 255, .18) 18%, transparent 38%),
         radial-gradient(circle at 78% 46%, rgba(23, 92, 171, .42) 0%, rgba(23, 92, 171, .16) 20%, transparent 44%),
         linear-gradient(135deg, var(--azul-noche) 0%, var(--azul-profundo) 45%, var(--azul-medio) 100%);
 }

 .login-page {
     position: relative;
     width: 100%;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 38px;
     overflow: hidden;
 }

 .network-bg {
     position: absolute;
     inset: 0;
     opacity: .32;
     background-image:
         radial-gradient(circle, rgba(95, 170, 255, .55) 1.5px, transparent 2px),
         linear-gradient(120deg, transparent 0 42%, rgba(112, 182, 255, .12) 42.2% 42.5%, transparent 42.7%),
         linear-gradient(32deg, transparent 0 58%, rgba(112, 182, 255, .10) 58.2% 58.5%, transparent 58.7%);
     background-size: 130px 130px, 260px 260px, 230px 230px;
     animation: networkMove 30s linear infinite;
 }

 .glow {
     position: absolute;
     border-radius: 50%;
     filter: blur(45px);
     opacity: .42;
     pointer-events: none;
 }

 .glow-one {
     width: 420px;
     height: 420px;
     left: -170px;
     bottom: -120px;
     background: rgba(57, 151, 255, .55);
     animation: glowFloat 13s ease-in-out infinite;
 }

 .glow-two {
     width: 360px;
     height: 360px;
     right: -120px;
     top: -110px;
     background: rgba(28, 117, 216, .42);
     animation: glowFloat 16s ease-in-out infinite reverse;
 }

 .orbit-system {
     position: absolute;
     width: min(760px, 52vw);
     height: min(760px, 52vw);
     left: 5vw;
     top: 50%;
     transform: translateY(-50%);
     opacity: .56;
     pointer-events: none;
 }

 .orbit {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     border: 1px solid rgba(255, 166, 166, 0.22);
 }

 .orbit::before {
     content: "";
     position: absolute;
     inset: -1px;
     border-radius: inherit;
     border: 18px solid transparent;
     border-left-color: rgba(113, 182, 255, .26);
     border-top-color: rgba(113, 182, 255, .12);
     transform: rotate(18deg);
 }

 .orbit.o1 {
     animation: rotateSlow 34s linear infinite;
 }

 .orbit.o2 {
     inset: 86px;
     animation: rotateSlowReverse 45s linear infinite;
 }

 .orbit.o2::before {
     border-width: 14px;
     border-right-color: rgba(144, 202, 255, .28);
     border-left-color: transparent;
     border-bottom-color: rgba(144, 202, 255, .12);
 }

 .orbit.o3 {
     inset: 168px;
     animation: rotateSlow 28s linear infinite;
 }

 .orbit.o3::before {
     border-width: 9px;
     border-top-color: rgba(173, 216, 255, .30);
     border-left-color: transparent;
     border-right-color: rgba(173, 216, 255, .10);
 }

 .center-globe {
     position: absolute;
     width: 150px;
     height: 150px;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     border-radius: 50%;
     background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), rgba(53, 135, 230, .22) 40%, rgba(7, 45, 92, .16) 100%);
     box-shadow: inset 0 0 32px rgba(255, 255, 255, .16), 0 0 48px rgba(64, 151, 255, .14);
     animation: globePulse 6s ease-in-out infinite;
 }

 .orbit-node {
     position: absolute;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: radial-gradient(circle at 32% 25%, rgba(255, 255, 255, .65), rgba(82, 154, 233, .42) 42%, rgba(25, 82, 154, .52));
     box-shadow: 0 0 24px rgba(89, 170, 255, .28);
 }

 .n1 {
     top: 8%;
     left: 54%;
 }

 .n2 {
     top: 32%;
     right: 9%;
     width: 42px;
     height: 42px;
 }

 .n3 {
     bottom: 12%;
     left: 48%;
     width: 40px;
     height: 40px;
 }

 .n4 {
     left: 6%;
     top: 48%;
     width: 34px;
     height: 34px;
 }

 .n5 {
     right: 20%;
     bottom: 24%;
     width: 52px;
     height: 52px;
 }

 .floating-bubble {
     position: absolute;
     border-radius: 50%;
     background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .95), rgba(91, 178, 255, .42) 35%, rgba(16, 79, 150, .18) 70%, rgba(255, 255, 255, .05));
     border: 1px solid rgba(210, 235, 255, .28);
     box-shadow: inset 0 0 18px rgba(255, 255, 255, .24), 0 0 25px rgba(62, 157, 255, .18);
     pointer-events: none;
 }

 .fb1 {
     width: 74px;
     height: 74px;
     left: 13%;
     top: 10%;
     animation: bubbleFloat 12s ease-in-out infinite;
 }

 .fb2 {
     width: 42px;
     height: 42px;
     right: 18%;
     top: 12%;
     animation: bubbleFloat 15s ease-in-out infinite reverse;
 }

 .fb3 {
     width: 92px;
     height: 92px;
     left: 8%;
     bottom: 12%;
     animation: bubbleFloat 18s ease-in-out infinite;
 }

 .fb4 {
     width: 55px;
     height: 55px;
     right: 8%;
     top: 52%;
     animation: bubbleFloat 14s ease-in-out infinite reverse;
 }

 .fb5 {
     width: 31px;
     height: 31px;
     right: 25%;
     bottom: 8%;
     animation: bubbleFloat 10s ease-in-out infinite;
 }

 .layout {
     position: relative;
     z-index: 3;
     width: min(1160px, 100%);
     display: grid;
     grid-template-columns: 1fr 430px;
     align-items: center;
     gap: 78px;
 }

 .brand-space {
     min-height: 560px;
 }

 .login-card {
     width: 100%;
     padding: 42px 40px;
     border-radius: 26px;
     background: white;
     color: var(--texto);
     box-shadow: 0 28px 90px rgba(0, 0, 0, .30);
     border: 1px solid rgba(255, 255, 255, .65);
     animation: cardIn .9s ease both;
 }

 .brand-mini {
     display: flex;
     justify-content: center;
     /* Centrado horizontal */
     align-items: center;
     /* Centrado vertical (si el div tiene altura) */
     margin-bottom: 40px;
 }

 .mini-logo {
     position: relative;
     width: 72px;
     height: 72px;
     border-radius: 50%;
     flex: 0 0 auto;
 }

 .mini-logo .arc {
     position: absolute;
     inset: 6px;
     border-radius: 50%;
     border: 4px solid transparent;
     border-left-color: var(--azul-medio);
     border-top-color: var(--azul-profundo);
     transform: rotate(-22deg);
 }

 .mini-logo .arc.two {
     inset: 15px;
     border-width: 3px;
     border-left-color: transparent;
     border-right-color: var(--azul-medio);
     border-bottom-color: var(--verde);
     transform: rotate(14deg);
 }

 .mini-logo .dot {
     position: absolute;
     width: 11px;
     height: 11px;
     border-radius: 50%;
     background: var(--verde);
 }

 .mini-logo .d1 {
     left: 19px;
     top: 37px;
     width: 16px;
     height: 16px;
 }

 .mini-logo .d2 {
     right: 19px;
     top: 26px;
     background: var(--azul-medio);
 }

 .mini-logo .d3 {
     right: 24px;
     bottom: 16px;
     background: #d85549;
 }

 .mini-logo .d4 {
     left: 28px;
     bottom: 12px;
     width: 9px;
     height: 9px;
 }

 .brand-mini h2 {
     color: var(--azul-profundo);
     font-size: 21px;
     line-height: 1.22;
     letter-spacing: -.4px;
     font-weight: 800;
 }

 .brand-mini span {
     display: block;
     margin-top: 5px;
     color: var(--texto-suave);
     font-size: 12px;
     font-weight: 500;
 }

 .login-card h1 {
     font-size: 28px;
     color: var(--azul-profundo);
     margin-bottom: 10px;
     letter-spacing: -.7px;
 }

 .subtitle {
     color: var(--texto-suave);
     font-size: 14px;
     line-height: 1.65;
     margin-bottom: 30px;
 }

 .form-group {
     margin-bottom: 18px;
 }

 .input-wrap {
     position: relative;
 }

 /* ICONO IZQUIERDO (LOCK, USER) */
 .input-wrap .material-icons:not(.eye) {
     position: absolute;
     left: 15px;
     top: 50%;
     transform: translateY(-50%);
     color: #7186a0;
     font-size: 21px;
     pointer-events: none;
     /* 🔥 clave */
 }

 /* ICONO DERECHO (OJO) */
 .input-wrap .eye {
     position: absolute;
     right: 15px;
     top: 50%;
     transform: translateY(-50%);
     color: #7186a0;
     font-size: 20px;
     cursor: pointer;
     z-index: 2;
 }

 .input-wrap input {
     width: 100%;
     height: 56px;
     border-radius: 15px;
     border: 1px solid var(--borde);
     outline: none;
     padding: 0 50px 0 48px;
     color: #24364f;
     font-size: 14px;
     background: rgba(255, 255, 255, .92);
     transition: .22s ease;
 }

 .input-wrap input::placeholder {
     color: #7f8ea3;
 }

 .input-wrap input:focus {
     border-color: rgba(67, 169, 54, .65);
     box-shadow: 0 0 0 4px rgba(67, 169, 54, .13);
 }

 .eye {
     position: absolute;
     right: 15px;
     top: 50%;
     transform: translateY(-50%);
     color: #7186a0;
     cursor: pointer;
     font-size: 20px;
 }

 .options {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin: 8px 0 28px;
     font-size: 13px;
 }

 .remember {
     display: flex;
     align-items: center;
     gap: 9px;
     color: var(--texto-suave);
 }

 .remember input {
     width: 18px;
     height: 18px;
     accent-color: var(--verde);
 }

 .forgot {
     color: #005ed6;
     text-decoration: none;
     font-weight: 600;
 }

 .forgot:hover {
     text-decoration: underline;
 }

 .btn-login {
     width: 100%;
     height: 56px;
     border: none;
     border-radius: 15px;
     background: linear-gradient(135deg, #43a936, #308d28);
     color: #fff;
     font-weight: 700;
     font-size: 15px;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     box-shadow: 0 18px 30px rgba(67, 169, 54, .22);
     transition: .22s ease;
 }

 .btn-login:hover {
     transform: translateY(-1px);
     box-shadow: 0 22px 36px rgba(67, 169, 54, .28);
     background: linear-gradient(135deg, #3f9f33, #2f8028);
 }

 .secure-note {
     margin-top: 24px;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 8px;
     color: var(--texto-suave);
     font-size: 13px;
 }

 .secure-note .material-icons {
     color: var(--verde);
     font-size: 19px;
 }

 .footer {
     position: absolute;
     z-index: 4;
     left: 0;
     right: 0;
     bottom: 28px;
     text-align: center;
     color: rgba(255, 255, 255, .74);
     font-size: 13px;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 18px;
 }

 .footer .dot {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: var(--verde);
 }

 @keyframes rotateSlow {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 @keyframes rotateSlowReverse {
     from {
         transform: rotate(360deg);
     }

     to {
         transform: rotate(0deg);
     }
 }

 @keyframes bubbleFloat {

     0%,
     100% {
         transform: translate3d(0, 0, 0) scale(1);
     }

     50% {
         transform: translate3d(16px, -24px, 0) scale(1.04);
     }
 }

 @keyframes glowFloat {

     0%,
     100% {
         transform: translate3d(0, 0, 0);
     }

     50% {
         transform: translate3d(38px, -28px, 0);
     }
 }

 @keyframes networkMove {
     from {
         background-position: 0 0, 0 0, 0 0;
     }

     to {
         background-position: 130px 130px, 260px 260px, -230px 230px;
     }
 }

 @keyframes globePulse {

     0%,
     100% {
         opacity: .72;
         transform: translate(-50%, -50%) scale(1);
     }

     50% {
         opacity: .9;
         transform: translate(-50%, -50%) scale(1.035);
     }
 }

 @keyframes cardIn {
     from {
         opacity: 0;
         transform: translateY(18px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @media (max-width: 980px) {
     body {
         overflow-y: auto;
     }

     .login-page {
         padding: 30px 18px 82px;
     }

     .layout {
         grid-template-columns: 1fr;
         gap: 20px;
         max-width: 470px;
     }

     .brand-space {
         min-height: 260px;
     }

     .orbit-system {
         width: 520px;
         height: 520px;
         left: 50%;
         top: 24%;
         transform: translate(-50%, -50%);
         opacity: .34;
     }

     .login-card {
         padding: 34px 26px;
     }

     .footer {
         flex-wrap: wrap;
         gap: 10px;
         bottom: 18px;
         padding: 0 20px;
     }
 }

 @media (max-width: 520px) {
     .brand-mini {
         align-items: flex-start;
     }

     .brand-mini h2 {
         font-size: 18px;
     }

     .login-card h1 {
         font-size: 25px;
     }

     .options {
         align-items: flex-start;
         flex-direction: column;
         gap: 12px;
     }
 }

 #loaderGestor {
     position: fixed;
     inset: 0;
     z-index: 999999;
     /* 🔥 importante */
     background: rgba(6, 26, 51, 0.95);

     display: none;
     /* oculto por defecto */

     align-items: center;
     justify-content: center;
 }

 /* cuando se activa */
 #loaderGestor.is-active {
     display: flex;
 }

 .contact-info {
     margin-top: 10px;
     text-align: center;
     opacity: 0.8;
 }

 .contact-item {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     color: #5a6c7d;
     margin-top: 4px;
 }

 .contact-item .material-icons {
     font-size: 17px;
     margin-right: 6px;
     color: #43a936;
     /* azul corporativo */
 }