/* Composición del login: capas decorativas independientes, sin imágenes. */
.contenedor-principal {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    padding: clamp(24px, 5vh, 64px) 4vw;
}

.background,
.background > div {
    position: absolute;
    pointer-events: none;
}

.background {
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(115deg, #010815, #03132b 62%, #020b1b);
}

.top-glow {
    inset: -22% -18% 15% 25%;
    background: radial-gradient(ellipse at 82% 12%, rgba(0, 104, 255, .46), rgba(0, 62, 166, .16) 32%, transparent 67%);
    filter: blur(3vw);
    transform: rotate(-17deg);
}

/* Cintas con degradados amplios. Las máscaras desvanecen los extremos
   antes del centro para evitar cortes y acumulaciones de luz. */
.wave-left-back,
.wave-left-front,
.wave-right-back,
.wave-right-front {
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 95%);
    mask-image: linear-gradient(90deg, #000 0%, #000 30%, transparent 95%);
}

.wave-left-back {
    left: -18%;
    top: -15%;
    width: 91%;
    height: 111%;
    background: radial-gradient(ellipse at 84% 5%, transparent 58%, rgba(0, 45, 153, .12) 60%, rgba(0, 82, 237, .3) 65%, rgba(14, 128, 255, .24) 69%, transparent 74%);
    transform: rotate(7deg);
    filter: blur(9px);
    opacity: .8;
}

.wave-left-front {
    left: -16%;
    top: -12%;
    width: 88%;
    height: 108%;
    background: radial-gradient(ellipse at 88% 0%, transparent 62%, rgba(0, 56, 167, .04) 64%, rgba(0, 87, 231, .32) 67%, rgba(9, 143, 255, .58) 69%, rgba(134, 239, 255, .92) 69.35%, rgba(0, 141, 255, .46) 69.65%, rgba(0, 64, 220, .12) 73%, transparent 77%);
    transform: rotate(4deg);
    filter: blur(.6px) drop-shadow(0 8px 17px rgba(0, 95, 255, .22));
}

.wave-right-back,
.wave-right-front {
    -webkit-mask-image: linear-gradient(90deg, transparent 3%, #000 74%);
    mask-image: linear-gradient(90deg, transparent 3%, #000 74%);
}

.wave-right-back {
    right: -24%;
    top: 12%;
    width: 81%;
    height: 79%;
    background: radial-gradient(ellipse at 10% 0%, transparent 60%, rgba(0, 51, 161, .13) 63%, rgba(0, 69, 240, .35) 69%, rgba(0, 114, 255, .2) 73%, transparent 79%);
    transform: rotate(-9deg);
    filter: blur(12px);
}

.wave-right-front {
    right: -20%;
    top: 9%;
    width: 78%;
    height: 87%;
    background: radial-gradient(ellipse at 6% 0%, transparent 64%, rgba(0, 62, 195, .08) 66%, rgba(0, 83, 238, .34) 69%, rgba(11, 158, 255, .54) 71%, rgba(108, 229, 255, .85) 71.3%, rgba(0, 134, 255, .4) 71.6%, rgba(0, 58, 207, .12) 75%, transparent 79%);
    transform: rotate(-5deg);
    filter: blur(.7px) drop-shadow(0 6px 18px rgba(0, 93, 255, .22));
}

.horizon-glow {
    left: 15%;
    width: 74%;
    top: 79%;
    height: 7%;
    background: radial-gradient(ellipse, rgba(0, 136, 255, .34), rgba(0, 82, 225, .12) 38%, transparent 72%);
    filter: blur(18px);
    opacity: .6;
}

.horizon-line {
    left: 16%;
    top: 82%;
    width: 72%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 115, 255, .2) 10%, #68d9ff 28%, rgba(13, 123, 255, .68) 55%, rgba(0, 103, 255, .22) 84%, transparent);
    box-shadow: 0 0 6px rgba(0, 145, 255, .32);
    transform: rotate(.7deg);
    opacity: .8;
}

.contendor-contenido {
    position: relative;
    z-index: 1;
    width: min(66vw, 1088px);
    margin: max(0px, calc((100svh - clamp(36px, 7.5vh, 96px) - 540px) / 2)) auto;
    min-height: min(540px, calc(75svh - clamp(36px, 7.5vh, 96px)));
    height: auto;
    padding: 32px 0;
    overflow: hidden;
    border-radius: 40px;
    background: rgba(2, 14, 30, .88);
    border: 1.5px solid rgba(61, 165, 255, .8);
    box-shadow: 0 0 5px rgba(38, 145, 255, .45), 0 0 15px rgba(0, 112, 255, .2), inset 0 0 20px rgba(0, 80, 180, .05);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: grid;
    grid-template-columns: 58% 42%;
    align-items: center;
}

/* Luz viajera: se anima el gradiente, nunca la geometría del contenedor. */
@property --login-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* Si no hay soporte de máscaras, permanece únicamente el borde base. */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
    .contendor-contenido::before,
    .contendor-contenido::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-sizing: border-box;
        pointer-events: none;
        z-index: 2;
        background: conic-gradient(
            from var(--login-border-angle),
            transparent 0deg 310deg,
            rgba(22, 140, 255, .08) 318deg,
            #168cff 332deg,
            #39aaff 340deg,
            #55d8ff 345deg,
            #d8f7ff 348deg,
            #55d8ff 351deg,
            #168cff 355deg,
            transparent 360deg
        );
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        animation: login-border-travel 5s linear infinite;
    }

    .contendor-contenido::before {
        padding: 1.5px;
    }

    .contendor-contenido::after {
        padding: 3px;
        opacity: .22;
        filter: blur(2px);
    }
}

@keyframes login-border-travel {
    to { --login-border-angle: 360deg; }
}

.contendor-contenido .imagen,
.contendor-contenido .login-section {
    width: 100%;
    height: auto;
    grid-column: auto;
    min-width: 0;
}

.contendor-contenido .login-section {
    padding: 0;
    align-items: center;
}

.login-section > form {
    width: 530px !important;
    max-width: 88%;
}

.contendor-contenido .pnl_login {
    max-width: 530px;
    padding: 50px 28px 40px;
    border-radius: 24px;
    background: rgba(13, 39, 70, .72);
    border: 1px solid rgba(69, 157, 255, .75);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#logo-login {
    width: min(640px, 78%) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
    margin: auto;
}

.login-brand { display: flex; width: 100%; }
.contendor-contenido .imagen { gap: 25px; }
.contendor-contenido #espaciador { display: none; }
.contendor-contenido .logo_it_2 { display: block; height: auto; width: min(280px, 48%); margin: 0 auto; }
.contendor-contenido .logo_it_2 img { width: 100%; height: auto; object-fit: contain; }
.contendor-contenido .logo_it_1 { display: none; }
.pnl_login .title-login { color: #fff; font-size: clamp(28px, 2.5vw, 36px); font-weight: 700; margin: 0 0 45px; }
.login-fields { display: grid; gap: 14px; }
.login-password-row { position: relative; width: 100%; }
.pnl_login .login-password-row .input-style { width: 100%; padding-right: 58px; }

.pnl_login .input-style {
    min-width: 0;
    min-height: 60px;
    height: 60px;
    border-radius: 30px;
    border: none;
    background: linear-gradient(90deg, #fff, #f2f4f7);
    padding: 0 25px;
    margin: 0;
    color: #203149;
    font-size: 19px;
    box-shadow: none;
}

.pnl_login .input-style::placeholder { color: #768195; opacity: 1; }
.pnl_login .input-style:focus { outline: none; box-shadow: 0 0 0 3px rgba(40, 151, 255, .22); }
.pnl_login .login-password-toggle {
    position: absolute;
    top: 50%;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #66758c;
    font-size: 18px;
    cursor: pointer;
}
.pnl_login .login-password-toggle:hover { background: rgba(24, 142, 245, .1); color: #168cf2; }
.pnl_login .login-password-toggle:focus-visible { outline: 2px solid rgba(22, 140, 242, .65); outline-offset: 1px; }
.pnl_login .btn-login { min-height: 54px; height: 54px; margin: 42px 0 0; border-radius: 9px; background: linear-gradient(90deg, #168cf2, #2b9fff); font-size: 19px; font-weight: 600; transition: filter .18s ease, transform .18s ease; }
.pnl_login .btn-login:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.login-recovery { text-align: center; margin-top: 24px; }
.login-recovery .btn-link { color: #179cff; font-size: 18px; padding: 0; white-space: normal; text-decoration: none; }
.login-recovery .btn-link:hover { text-decoration: underline; }
.pnl_login .btn:focus-visible { outline: 2px solid #99dbff; outline-offset: 3px; }

/* Modales de recuperación y selección de rol, coordinados con la tarjeta de acceso. */
.remodal-overlay { background: rgba(1, 8, 22, .78); }
.login-modal.remodal {
    width: min(92vw, 560px);
    min-height: 0;
    padding: clamp(32px, 5vw, 48px);
    border: 1px solid rgba(69, 157, 255, .68);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(9, 29, 59, .97), rgba(3, 16, 36, .97));
    color: #f6f9ff;
    text-align: left;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .42), 0 0 24px rgba(0, 112, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.login-modal h3 {
    margin: 0 32px 14px 0;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.3;
}
.login-modal p { margin: 0 0 24px; color: #b5c7df; line-height: 1.55; }
.remodal .remodal-close {
    top: 16px;
    right: 16px;
    left: auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(126, 181, 255, .42);
    border-radius: 50%;
    background: rgba(35, 91, 153, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.remodal .remodal-close::after {
    display: block;
    color: #d8e9ff;
    font-family: Arial, sans-serif !important;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}
.remodal .remodal-close:hover,
.remodal .remodal-close:active { border-color: rgba(94, 180, 255, .8); background: rgba(44, 137, 235, .32); }
.remodal .remodal-close:focus-visible { outline: 2px solid #99dbff; outline-offset: 3px; }
.login-modal .form-control {
    width: 100%;
    height: 54px;
    margin: 6px 0 22px;
    padding: 0 18px;
    border: 1px solid rgba(141, 184, 236, .32);
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    color: #203149;
    box-shadow: none;
}
.login-modal .form-control:focus { border-color: #4aa8ff; box-shadow: 0 0 0 3px rgba(40, 151, 255, .17); }
.login-modal-action {
    min-width: 140px;
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #168cf2, #2b9fff);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 7px 18px rgba(0, 112, 255, .18);
}
.login-modal-action:hover,
.login-modal-action:focus { background: linear-gradient(90deg, #258ff0, #43aaff); color: #fff; }
.login-modal-action:focus-visible { outline: 2px solid #99dbff; outline-offset: 3px; }

/* Recuperación de contraseña: formato más ancho y compacto. */
.login-modal[data-remodal-id="modal-reset-password"] { width: min(94vw, 680px); }
.login-modal[data-remodal-id="modal-reset-password"] h3 {
    font-size: clamp(20px, 2vw, 24px);
    margin-bottom: 18px;
}
.login-modal[data-remodal-id="modal-reset-password"] .form-control {
    height: 48px;
    font-size: 16px;
    margin: 4px 0 18px;
}
.login-modal[data-remodal-id="modal-reset-password"] .login-modal-action {
    min-width: 120px;
    min-height: 44px;
    font-size: 16px;
}

@media (max-width: 900px) {
    .contenedor-principal { padding: 30px 5vw; }
    .wave-left-back, .wave-left-front { top: 30%; height: 68%; opacity: .45; }
    .wave-right-back, .wave-right-front { top: 42%; height: 59%; opacity: .4; }
    .horizon-line { top: 91%; opacity: .4; }
    .horizon-glow { top: 88%; opacity: .3; }
}

@media (min-width: 850px) and (max-width: 1099px) {
    .contendor-contenido { grid-template-columns: 50% 50%; }
    .contendor-contenido .pnl_login { padding: 38px 20px 32px; }
    .pnl_login .input-style { font-size: 17px; padding: 0 20px; }
}

@media (max-width: 849px) {
    .contendor-contenido { width: 92vw; margin: 0 -1vw; min-height: calc(100svh - 60px); grid-template-columns: 1fr; gap: 28px; padding: 32px 0; border-radius: 28px; }
    #logo-login { width: min(280px, 62%) !important; }
    .contendor-contenido .imagen { gap: 20px; }
    .contendor-contenido .logo_it_2 { width: min(180px, 38%); }
    .contendor-contenido .pnl_login { padding: 32px clamp(16px, 4vw, 28px); }
    .pnl_login .title-login { margin-bottom: 32px; }
    .pnl_login .input-style { font-size: 16px; padding: 0 18px; }
    .pnl_login .login-password-row .input-style { padding-right: 58px; }
    .login-modal.remodal { padding: 32px 24px; border-radius: 20px; }
    .remodal .remodal-close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .contendor-contenido::before,
    .contendor-contenido::after { animation: none; }
    .pnl_login .btn-login { transition: none; }
    .pnl_login .btn-login:hover { transform: none; }
}

/* Escala del contenido interno: 75%, independiente del fondo y sus capas. */
.contendor-contenido {
    --login-content-scale: .75;
    padding-top: calc(32px * var(--login-content-scale));
    padding-bottom: calc(32px * var(--login-content-scale));
}

.contendor-contenido .imagen { gap: calc(25px * var(--login-content-scale)); }
.contendor-contenido .logo_it_2 { width: min(210px, 48%); }
.login-section > form { width: 397.5px !important; }
.contendor-contenido .pnl_login {
    max-width: 397.5px;
    padding: 37.5px 21px 30px;
    border-radius: 18px;
}
.pnl_login .title-login {
    font-size: clamp(21px, 1.875vw, 27px);
    margin-bottom: 33.75px;
}
.login-fields { gap: 10.5px; }
.pnl_login .input-style {
    min-height: 45px;
    height: 45px;
    padding-left: 18.75px;
    font-size: 14.25px;
}
.pnl_login .login-password-row .input-style { padding-right: 43.5px; }
.pnl_login .login-password-toggle {
    right: 13.5px;
    width: 27px;
    height: 27px;
    font-size: 13.5px;
}
.pnl_login .btn-login {
    min-height: 40.5px;
    height: 40.5px;
    margin-top: 31.5px;
    font-size: 14.25px;
}
.login-recovery { margin-top: 18px; }
.login-recovery .btn-link { font-size: 13.5px; }

@media (min-width: 850px) and (max-width: 1099px) {
    .contendor-contenido .pnl_login { padding: 28.5px 15px 24px; }
    .pnl_login .input-style { font-size: 12.75px; padding: 0 15px; }
}

@media (max-width: 849px) {
    .contendor-contenido { padding-top: 24px; padding-bottom: 24px; }
    .contendor-contenido .imagen { gap: 15px; }
    .contendor-contenido .logo_it_2 { width: min(135px, 38%); }
    .login-section > form { width: 397.5px !important; }
    .contendor-contenido .pnl_login { padding: 24px clamp(12px, 3vw, 21px); }
    .pnl_login .title-login { font-size: clamp(18px, 5.25vw, 24px); margin-bottom: 24px; }
    .pnl_login .input-style { min-height: 40.5px; height: 40.5px; padding-left: 13.5px; font-size: 12px; }
    .pnl_login .login-password-row .input-style { padding-right: 43.5px; }
    .pnl_login .btn-login { min-height: 40.5px; height: 40.5px; margin-top: 24px; font-size: 14.25px; }
}