/*  --- login.css ---
    La pantalla de entrar es la única que no lleva el marco de la aplicación:
    no hay menú ni encabezado, porque todavía no se sabe quién es.

    Ya no tiene su propia paleta: usa los mismos tokens que el resto, así que
    cambiar el acento en tokens.css también la cambia a ella. */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.login {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e-4);
    background: var(--fondo);
    font-family: var(--fuente);
    font-size: var(--t-base);
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

.login__caja {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    padding: var(--e-6) var(--e-5) var(--e-5);
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-3);
    box-shadow: var(--sombra-3);
}

.login__marca {
    text-align: center;
    margin-bottom: var(--e-5);
}

/*  El logo. Ancho en porcentaje y no en píxeles: en un teléfono la caja es más
    angosta y el logo tiene que achicarse con ella. El max-width evita que en
    una pantalla grande crezca más de la cuenta. */
.login__logo {
    width: 62%;
    max-width: 190px;
    height: auto;
    display: block;
    margin: 0 auto;
    /*  El logo trae fondo crema. Redondeado apenas, se apoya en la tarjeta sin
        que se note el recuadro de la imagen. */
    border-radius: var(--r-2);
}

.login__suc {
    margin-top: var(--e-2);
    font-size: var(--t-sm);
    color: var(--texto-2);
}

.login__caja label {
    display: block;
    margin-bottom: var(--e-2);
    font-size: var(--t-sm);
    font-weight: var(--peso-medio);
    color: var(--texto-2);
}

.login__caja input {
    width: 100%;
    height: 44px;
    padding: 0 var(--e-3);
    margin-bottom: var(--e-4);
    border: 1px solid var(--borde);
    border-radius: var(--r-2);
    background: var(--fondo-2);
    color: var(--texto);
    font-family: inherit;
    /*  16px: abajo de eso el navegador del celular hace zoom solo al tocar el
        campo, y hay que volver a achicar la pantalla a mano para ver el botón. */
    font-size: var(--t-lg);
    transition: border-color var(--dur-rapida) var(--curva),
                box-shadow var(--dur-rapida) var(--curva);
}

.login__caja input::placeholder { color: var(--texto-3); }

.login__caja input:focus {
    outline: none;
    border-color: var(--borde-foco);
    box-shadow: 0 0 0 3px var(--acento-suave);
}

/*  El campo de clave con el ojito. La pieza es la misma que usa el resto de la
    aplicación (core/clave.js), por eso las clases se llaman igual. */
.clave-control {
    position: relative;
    display: flex;
    align-items: center;
}

.clave-control input { padding-right: 46px; }

.clave-ojo {
    position: absolute;
    right: var(--e-1);
    bottom: calc(var(--e-4) + 5px);   /* alineado con el campo, no con el margen */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: var(--r-2);
    background: none;
    color: var(--texto-3);
    cursor: pointer;
    transition: color var(--dur-rapida) var(--curva),
                background-color var(--dur-rapida) var(--curva);
}

.clave-ojo:hover {
    background: var(--fondo-3);
    color: var(--texto-2);
}

.clave-ojo:focus-visible {
    outline: 2px solid var(--borde-foco);
    outline-offset: 1px;
}

.login__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    width: 100%;
    height: 44px;
    margin-top: var(--e-1);
    border: none;
    border-radius: var(--r-2);
    background: var(--acento);
    color: var(--sobre-acento);
    font-family: inherit;
    font-size: var(--t-base);
    font-weight: var(--peso-fuerte);
    cursor: pointer;
    transition: background-color var(--dur-rapida) var(--curva);
}

.login__btn:hover { background: var(--acento-hover); }

.login__btn:focus-visible {
    outline: 2px solid var(--borde-foco);
    outline-offset: 2px;
}

/*  El aviso cuando algo salió mal. Uno solo por vez.
    Lleva borde además de color de fondo: quien no distingue bien los colores
    igual ve que ahí pasó algo. */
.login__aviso {
    padding: var(--e-3);
    margin-bottom: var(--e-4);
    border-radius: var(--r-2);
    font-size: var(--t-base);
    line-height: var(--lh-normal);
}

.login__aviso--error {
    background: var(--peligro-suave);
    border: 1px solid var(--peligro);
    color: var(--peligro);
}

.login__aviso--warning {
    background: var(--aviso-suave);
    border: 1px solid var(--aviso);
    color: var(--aviso);
}