body.login3-page {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .4)), url("https://public.gaolos.com/cdn/public/extranet/img/Foto11.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

body.login3-page > header {
    box-sizing: border-box;
    flex: 0 0 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-block: 1px solid rgba(255, 255, 255, .62);
    background: linear-gradient(90deg, #0077c8, #00bdf2);
}

body.login3-page > header h1 { padding: 0; }

body.login3-page > .login3-footer {
    box-sizing: border-box;
    flex: 0 0 52px;
    height: 52px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 16px;
    border-block: 1px solid rgba(255, 255, 255, .62);
    background: #000;
}

.login3-footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 0;
    color: #afbdc8;
    font-size: .76rem;
    line-height: 1.2;
}

.login3-footer-nav a { flex: 0 0 auto; color: inherit; text-decoration: none; white-space: nowrap; }
.login3-footer-nav a + a::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 7px 2px;
    border-radius: 50%;
    background: #62717d;
}
.login3-footer-ia {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.login3-footer-ia::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 7px;
    border-radius: 50%;
    background: #62717d;
}
.login3-footer-ia-trigger,
.login3-footer-2fa-trigger {
    display: inline-flex;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: help;
}
.login3-footer-ia-trigger:focus-visible {
    outline: 1px solid #ff9b21;
    outline-offset: 3px;
}
.login3-footer-ia img { display: block; width: auto; height: 24px; }
.login3-footer-2fa {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
}
.login3-footer-2fa::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 7px;
    border-radius: 50%;
    background: #62717d;
}
.login3-footer-2fa img { display: block; width: auto; height: 24px; }
.login3-footer-2fa-trigger:focus-visible {
    outline: 1px solid #24d85a;
    outline-offset: 3px;
}
.login3-footer-ia-tooltip,
.login3-footer-2fa-tooltip {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 9px);
    left: 50%;
    width: min(320px, calc(100vw - 32px));
    padding: 9px 11px;
    border: 1px solid #a95600;
    border-radius: 5px;
    background: #111;
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .48);
    font-size: .8rem;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    pointer-events: none;
}
.login3-footer-2fa-tooltip { border-color: #087b2a; }
.login3-footer-ia:hover .login3-footer-ia-tooltip,
.login3-footer-ia-trigger:focus-visible + .login3-footer-ia-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.login3-footer-2fa:hover .login3-footer-2fa-tooltip,
.login3-footer-2fa-trigger:focus-visible + .login3-footer-2fa-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.login3-footer-nav a:first-child { color: #2bcaff; font-weight: 600; }
.login3-footer-nav a:hover,
.login3-footer-nav a:focus { color: #fff; text-decoration: underline; }
.login3-footer-nav a:focus { outline: 1px solid #2bcaff; outline-offset: 3px; }

.login3-page .login3-main {
    box-sizing: border-box;
    flex: 1 0 auto;
    width: 100%;
    min-height: calc(100vh - 104px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 18px 48px;
}

.login3-shell {
    width: 100%;
    max-width: 620px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login3-form, .login3-steps { width: 100%; min-width: 0; margin: 0; }

.login3-page .login3-card {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 34px;
    text-align: left;
    border-top: 5px solid #2196f3;
    box-shadow: 0 18px 45px rgba(14, 38, 60, .22);
}

.login3-page .login3-card-estandar {
    height: 560px;
    display: flex;
    flex-direction: column;
}

.login3-card-estandar .login3-actions { margin-top: auto; }

.login3-page .login3-card-nueva {
    padding-top: 0;
    padding-bottom: 4%;
    border-color: #00b7ff;
    background: #000;
    color: #f4f9ff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .42), 0 0 24px rgba(0, 183, 255, .18);
}

.login3-card-cabecera { margin-bottom: 20px; text-align: center; }
.login3-card-imagen { display: block; width: 100%; height: auto; margin: 0 auto; }
.login3-card-nueva .login3-campo-label,
#login3-credenciales .custom-control-label { color: #f4f9ff; }
.login3-card-nueva .input-group-prepend .input-group-text {
    border: 1px solid #174b68 !important;
    border-radius: 4px 0 0 4px !important;
    background: #071725;
    color: #1fc8ff;
}
.login3-card-nueva .form-control {
    border-color: #174b68;
    background: #080c13;
    color: #fff;
}
.login3-card-nueva .form-control::placeholder { color: #8396a8; }
.login3-card-nueva .form-control:focus {
    border-color: #20c8ff;
    background: #0b111b;
    color: #fff;
    box-shadow: 0 0 0 .15rem rgba(32, 200, 255, .2);
}
.login3-card-nueva .input-group input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #080c13 inset !important;
    -webkit-text-fill-color: #fff !important;
}
.login3-card-nueva > p { color: #d9e7f0; }
.login3-card-nueva > p.text-muted { color: #8da5b7 !important; }
#login3-credenciales .login3-meta a { color: #26c6ff; }
#login3-credenciales .login3-meta a:hover,
#login3-credenciales .login3-meta a:focus { color: #8ae4ff; }
#login3-credenciales .login3-recordar { position: relative; display: flex; align-items: center; gap: 8px; }
#login3-credenciales .login3-recordar .custom-control { margin: 0; }
#login3-credenciales .login3-ayuda-contextual { display: inline-flex; }
#login3-credenciales .login3-ayuda-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid #26c6ff;
    border-radius: 50%;
    background: transparent;
    color: #26c6ff;
    font-size: 12px;
    line-height: 1;
    cursor: help;
}
#login3-credenciales .login3-ayuda-trigger:hover,
#login3-credenciales .login3-ayuda-trigger:focus {
    outline: 0;
    background: #26c6ff;
    color: #00111c;
    box-shadow: 0 0 0 3px rgba(38, 198, 255, .2);
}
#login3-credenciales .login3-ayuda-tooltip {
    position: absolute;
    z-index: 4;
    top: calc(100% + 9px);
    left: 0;
    width: min(340px, calc(100vw - 78px));
    padding: 10px 12px;
    border: 1px solid #1b7298;
    border-radius: 5px;
    background: #071725;
    color: #d9effa;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
    font-size: .84rem;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    pointer-events: none;
}
#login3-credenciales .login3-ayuda-contextual:hover .login3-ayuda-tooltip,
#login3-credenciales .login3-ayuda-contextual:focus-within .login3-ayuda-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#login3-credenciales .custom-control-label::before {
    border-color: #496274;
    background: #111a24;
}
#login3-credenciales .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #00aeea;
    background: #00aeea;
}
.login3-card-nueva .login3-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(90deg, #0077c8, #00bdf2);
    box-shadow: 0 2px #005d99, 0 0 18px rgba(0, 189, 242, .2);
}
#login3-credenciales .login3-actions { margin-top: auto; }
.login3-card-nueva .login3-submit:hover,
.login3-card-nueva .login3-submit:focus {
    background: linear-gradient(90deg, #008cdb, #24d4ff);
    box-shadow: 0 2px #006fae, 0 0 22px rgba(36, 212, 255, .32);
}

.login3-campo-label { display: block; margin-bottom: 5px; font-weight: 600; }
.login3-meta { margin: 14px 0 7px; }
.login3-ayuda { margin: 0 0 18px; color: #586e7b; font-size: .87rem; line-height: 1.45; }
.login3-steps { position: relative; overflow: visible; transition: height .24s cubic-bezier(.22, .61, .36, 1); }
.login3-step { width: 100%; }
.login3-steps.login3-transicionando { isolation: isolate; }
.login3-steps.login3-transicionando .login3-step {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.login3-step.login3-sale-izquierda { z-index: 1; animation: login3-sale-izquierda .42s cubic-bezier(.55, 0, 1, .45) both; }
.login3-step.login3-entra-derecha { z-index: 2; animation: login3-entra-derecha .42s cubic-bezier(0, .55, .45, 1) both; }
.login3-step.login3-sale-derecha { z-index: 1; animation: login3-sale-derecha .42s cubic-bezier(.55, 0, 1, .45) both; }
.login3-step.login3-entra-izquierda { z-index: 2; animation: login3-entra-izquierda .42s cubic-bezier(0, .55, .45, 1) both; }
.login3-actions { display: flex; align-items: stretch; gap: 10px; margin-top: 18px; }
.login3-submit { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; }
.login3-paso { color: #26c6ff; font-weight: 700; margin-bottom: 10px; }
.login3-codigo { text-align: center; font-size: 1.55rem !important; letter-spacing: .3em; }
.login3-volver { flex: 0 0 auto; margin: 0; padding: 0 14px; border: 1px solid #1b7298; border-radius: 4px; background: #071725; color: #9fe8ff; font-size: .88rem; font-weight: 600; cursor: pointer; }
.login3-volver:hover, .login3-volver:focus { border-color: #26c6ff; background: #0b2233; color: #fff; outline: 0; box-shadow: 0 0 0 .15rem rgba(32, 200, 255, .18); }
.login3-volver:disabled { cursor: default; opacity: .6; }

@keyframes login3-sale-izquierda {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-110vw); opacity: .15; }
}

@keyframes login3-entra-derecha {
    from { transform: translateX(110vw); opacity: .15; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes login3-sale-derecha {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(110vw); opacity: .15; }
}

@keyframes login3-entra-izquierda {
    from { transform: translateX(-110vw); opacity: .15; }
    to { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .login3-steps { transition: none; }
    .login3-step { animation: none !important; }
    #login3-credenciales .login3-ayuda-tooltip { transition: none; }
    .login3-footer-ia-tooltip,
    .login3-footer-2fa-tooltip { transition: none; }
}

@media (max-width: 740px) {
    .login3-page .login3-main { align-items: flex-start; padding-top: 20px; }
    .login3-shell { max-width: 540px; }
    .login3-page .login3-card { padding: 26px 20px 20px; }
    .login3-page .login3-card-nueva { padding-top: 0; padding-bottom: 4%; }
    .login3-actions { align-items: stretch; }
    .login3-volver { padding: 0 11px; }
}

@media (max-width: 480px) {
    .login3-footer-nav { gap: 3px 0; font-size: .6rem; }
    .login3-footer-nav a + a::before { margin-inline: 4px; }
    .login3-footer-ia::before,
    .login3-footer-2fa::before { margin-inline: 4px; }
    .login3-footer-ia img,
    .login3-footer-2fa img { height: 20px; }
    .login3-footer-ia-tooltip,
    .login3-footer-2fa-tooltip { font-size: .78rem; }
    .login3-page .login3-card-estandar { height: 620px; }
    .login3-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
    .login3-actions .login3-submit { padding-inline: 12px; font-size: 1rem; white-space: nowrap; }
}