/* El login usa el layout de cuenta de ABP y Bootstrap; aquí solo va lo que ABP no trae: la pandilla sobre la
   tarjeta, el ojo de la contraseña, la línea de «cargando» y los avisos. */

.login {
    position: relative;
    margin-top: 72px;
}

.escena-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    width: 100%;
    height: auto;
    overflow: visible;
    touch-action: none;
}

.login > .card {
    position: relative;
    z-index: 1;
}

.ojo {
    display: grid;
    place-items: center;

    .ojo-cerrado { display: none; }

    &[aria-pressed="true"] {
        .ojo-abierto { display: none; }
        .ojo-cerrado { display: block; }
    }
}

.campo.mal .form-control { border-color: var(--bs-danger); }

.pista,
.aviso {
    display: block;
    margin-top: 1rem;
    font-size: .875rem;
    font-weight: 600;

    p { margin: 0; }
    &:empty { display: none; }
}

.pista,
.aviso.bloqueo { color: var(--bs-warning-text-emphasis); }

.aviso.error { color: var(--bs-danger); }

.boton {
    position: relative;
    overflow: hidden;

    .linea {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 3px;
        width: 100%;
        background: #bfb18a;
        transform-origin: left;
        transform: scaleX(0);
    }

    &.cargando .linea { animation: progreso 1.4s cubic-bezier(.65, 0, .35, 1) infinite; }
}

@keyframes progreso {
    0% { transform: scaleX(0); transform-origin: left; }
    55% { transform: scaleX(1); transform-origin: left; }
    56% { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

@media (prefers-reduced-motion: reduce) {
    .boton.cargando .linea { animation: none; transform: scaleX(1); }
}