.contenedor-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.tarjeta-login {
    background-color: var(--color-superficie);
    padding: 2rem;
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-lg);
    width: 100%;
    max-width: 400px;
}

.encabezado-login {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo-plataforma {
    display: block;
    height: auto;
    margin: 0 auto 1rem;
    max-width: min(100%, 248px);
    width: 210px;
}

.encabezado-login h1 {
    font-size: 1.5rem;
    color: var(--color-texto-principal);
    margin-bottom: 0.5rem;
}

.encabezado-login p {
    color: var(--color-texto-secundario);
    font-size: 0.875rem;
}

.enlaces-login {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
}

/* Entrada administrativa: conserva la sobriedad del panel y da una señal
   visual clara de acceso seguro, sin cargar el formulario ni usar imágenes. */
.contenedor-login {
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.contenedor-login::before,
.contenedor-login::after {
    border-radius: 999px;
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.contenedor-login::before {
    background: radial-gradient(circle, rgba(37, 99, 235, .16), rgba(37, 99, 235, 0) 69%);
    height: min(44rem, 72vw);
    left: -20rem;
    top: -20rem;
    width: min(44rem, 72vw);
    animation: accesoAura 12s ease-in-out infinite alternate;
}

.contenedor-login::after {
    background: radial-gradient(circle, rgba(20, 184, 166, .12), rgba(20, 184, 166, 0) 70%);
    bottom: -19rem;
    height: min(35rem, 65vw);
    right: -16rem;
    width: min(35rem, 65vw);
    animation: accesoAura 14s ease-in-out -4s infinite alternate-reverse;
}

.acceso-presentacion {
    animation: accesoPresentacionEntra .68s cubic-bezier(.2, .8, .2, 1) both;
}

.tarjeta-login {
    animation: accesoTarjetaEntra .72s cubic-bezier(.2, .82, .22, 1) .08s both;
    transform-origin: center right;
}

.encabezado-login > * {
    animation: accesoContenidoEntra .48s ease-out both;
}

.encabezado-login > :nth-child(1) { animation-delay: .24s; }
.encabezado-login > :nth-child(2) { animation-delay: .31s; }
.encabezado-login > :nth-child(3) { animation-delay: .38s; }
.acceso-beneficios span { animation: accesoContenidoEntra .45s ease-out both; }
.acceso-beneficios span:nth-child(1) { animation-delay: .24s; }
.acceso-beneficios span:nth-child(2) { animation-delay: .32s; }
.acceso-beneficios span:nth-child(3) { animation-delay: .40s; }

.tarjeta-login:focus-within {
    box-shadow: 0 24px 78px rgba(22, 53, 112, .16), 0 0 0 3px rgba(37, 99, 235, .06);
    transition: box-shadow .22s ease;
}

@keyframes accesoPresentacionEntra {
    from { opacity: 0; transform: translateX(-1.5rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes accesoTarjetaEntra {
    from { opacity: 0; transform: translateY(1.25rem) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes accesoContenidoEntra {
    from { opacity: 0; transform: translateY(.45rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes accesoAura {
    from { transform: translate3d(-.9rem, .9rem, 0) scale(.95); }
    to { transform: translate3d(1.1rem, -1rem, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .contenedor-login::before,
    .contenedor-login::after,
    .acceso-presentacion,
    .tarjeta-login,
    .encabezado-login > *,
    .acceso-beneficios span { animation: none; }
}

/* Snipper de Carga GIF */
.acceso-snipper-gif {
    height: 28px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    vertical-align: middle;
}

.acceso-enviando {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}