body {
    overflow-x: hidden;
}

.pagina {
    position: relative;
}

.lado-info {
    animation: loginInfoEntrada .85s ease both;
}

.lado-formulario {
    position: relative;
    overflow: hidden;
}

.lado-formulario::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 68%);
    top: 10%;
    right: -90px;
    animation: luzLogin 7s ease-in-out infinite alternate;
    pointer-events: none;
}

.card-login {
    position: relative;
    overflow: hidden;
    animation: loginCardEntrada .75s ease both;
    border: 1px solid rgba(255, 255, 255, .52);
    transition: transform .28s ease, box-shadow .28s ease;
}

.card-login::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.34) 35%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .8s ease;
    pointer-events: none;
}

.card-login:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .34);
}

.card-login:hover::before {
    transform: translateX(120%);
}

.icono-admin,
.icono-docente,
.icono-apoderado,
.icono-estudiante {
    animation: iconoRespira 2.4s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .35);
}

.input-icono {
    isolation: isolate;
}

.input-icono input {
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}

.input-icono input:focus {
    transform: translateY(-2px);
    background: #ffffff;
}

.input-icono:focus-within i.icono-campo {
    color: var(--login-acento, #22c55e);
    transform: translateY(-50%) scale(1.08);
}

.input-icono i.icono-campo {
    transition: color .22s ease, transform .22s ease;
}

.btn-login {
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .55) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 18px 34px rgba(0, 0, 0, .22);
    transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

.btn-login::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 42%, transparent 68%);
    transform: translateX(-130%);
    transition: transform .6s ease;
}

.btn-login:hover {
    filter: brightness(.78) saturate(1.1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .78), 0 0 25px var(--login-brillo, rgba(34,197,94,.55)), 0 20px 44px rgba(0, 0, 0, .30);
}

.btn-login:hover::before {
    transform: translateX(130%);
}

.btn-login:active {
    transform: translateY(0) scale(.98);
    filter: brightness(.62) saturate(1.12);
}

.btn-tema,
.btn-volver {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.btn-tema:hover,
.btn-volver:hover {
    box-shadow: 0 0 0 1px rgba(255,255,255,.42), 0 0 22px rgba(255,255,255,.22);
}

.icono-admin,
.icono-admin ~ h2,
.icono-admin ~ .subtitulo,
.icono-admin ~ form {
    --login-acento: #22c55e;
    --login-brillo: rgba(34,197,94,.62);
}

.icono-docente,
.icono-docente ~ h2,
.icono-docente ~ .subtitulo,
.icono-docente ~ form {
    --login-acento: #0ea5e9;
    --login-brillo: rgba(14,165,233,.62);
}

.icono-apoderado,
.icono-apoderado ~ h2,
.icono-apoderado ~ .subtitulo,
.icono-apoderado ~ form {
    --login-acento: #f59e0b;
    --login-brillo: rgba(245,158,11,.64);
}

.icono-estudiante,
.icono-estudiante ~ h2,
.icono-estudiante ~ .subtitulo,
.icono-estudiante ~ form {
    --login-acento: #ef4444;
    --login-brillo: rgba(239,68,68,.62);
}

.card-login:has(.icono-admin) {
    --login-acento: #22c55e;
    --login-brillo: rgba(34,197,94,.62);
}

.card-login:has(.icono-docente) {
    --login-acento: #0ea5e9;
    --login-brillo: rgba(14,165,233,.62);
}

.card-login:has(.icono-apoderado) {
    --login-acento: #f59e0b;
    --login-brillo: rgba(245,158,11,.64);
}

.card-login:has(.icono-estudiante) {
    --login-acento: #ef4444;
    --login-brillo: rgba(239,68,68,.62);
}

@keyframes loginCardEntrada {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes loginInfoEntrada {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes iconoRespira {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, .24), 0 16px 34px rgba(0, 0, 0, .14);
    }
    50% {
        transform: translateY(-5px);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, .08), 0 20px 42px rgba(0, 0, 0, .20);
    }
}

@keyframes luzLogin {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(-90px, 130px, 0) scale(1.35);
    }
}