/* Pantalla de inicio de sesión: la imagen de fondo de la web de AHORA One con los componentes de la app encima
   (tarjeta blanca con los campos, botón principal cian y aviso para instalar). Usa los tokens de css/app.css */

/* 100dvh y no 100vh: en el móvil 100vh incluye la barra del navegador y sobra altura, lo que provoca un desplazamiento
   aunque el contenido quepa */
.pagina-login {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--pedido-marino);
}

/* Imagen de fondo de la pantalla de acceso de la web, fija detrás de todo */
.login-fondo {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url("https://mi.ahoraone.com/img/background.png") no-repeat right center;
    background-size: cover;
}

.login-cabecera {
    padding: calc(36px + env(safe-area-inset-top)) 16px 8px;
    color: #fff;
    text-align: center;
}

.login-logo {
    display: block;
    /* La imagen mide 306 px de ancho: hasta ahí se ve nítida */
    width: 230px;
    max-width: 70%;
    margin: 0 auto;
}

/* Título y nombre de la app, dentro de la tarjeta y encima de los campos */
.login-tarjeta-cabecera {
    margin-bottom: 20px;
    text-align: center;
    color: #fff;
}

.login-titulo {
    margin: 0;
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: 21px;
    text-transform: uppercase;
}

/* Nombre de la app bajo el título, como en la versión anterior */
.login-subtitulo {
    margin: 4px 0 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
}

.login {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}

/* Caja marino translúcida sobre la imagen de fondo, como el login de la versión anterior */
.login-tarjeta {
    padding: 20px 16px;
    background-color: rgba(0, 32, 51, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.login-tarjeta > div + div {
    margin-top: 14px;
}

.etiqueta {
    display: block;
    margin: 0 0 6px 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pedido-cian);
}

/* appearance: none para que el navegador del móvil no imponga su propio aspecto */
.campo {
    display: block;
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background-color: #02101a;
    font-size: 15px;
    color: #fff;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 150ms, background-color 150ms;
}

.campo::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.campo:focus {
    outline: none;
    border-color: var(--pedido-cian);
    box-shadow: 0 0 0 3px rgba(31, 180, 226, 0.25);
}

/* El autocompletado del navegador no debe volver el campo blanco */
.campo:-webkit-autofill,
.campo:-webkit-autofill:hover,
.campo:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #02101a inset;
    caret-color: #fff;
}

.login-error {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background-color: rgba(201, 74, 74, 0.2);
    color: #ffb4b4;
    font-size: 14px;
}

.login-boton {
    width: 100%;
    height: 48px;
    margin-top: 18px;
}

.login-boton:disabled {
    background-color: var(--pedido-cian-oscuro);
    color: #fff;
    opacity: 0.8;
}

/* Aviso para instalar la app, con el mismo fondo oscuro que la caja del login */
.login-instalar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 14px;
    background-color: rgba(0, 32, 51, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}

.login-instalar img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
}

.login-instalar-texto {
    flex: 1;
    min-width: 0;
}

.login-instalar-texto strong {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
}

.login-instalar .boton-secundario {
    border-color: rgba(255, 255, 255, 0.35);
    background-color: transparent;
    color: #fff;
}

.login-instalar .boton-secundario:active {
    background-color: rgba(255, 255, 255, 0.12);
}

/* En pantallas de ordenador se mantiene centrado, pero todo más grande: con los tamaños del móvil el formulario quedaba
   pequeño en medio de tanto espacio */
@media (min-width: 900px) {
    .login-cabecera {
        padding-top: 56px;
    }

    .login-logo {
        width: 280px;
    }

    .login-titulo {
        font-size: 26px;
    }

    .login {
        max-width: 560px;
        padding-top: 28px;
    }

    .login-tarjeta {
        padding: 32px 30px;
        border-radius: 20px;
    }

    .login-tarjeta > div + div {
        margin-top: 18px;
    }

    .etiqueta {
        margin-bottom: 8px;
        font-size: 15px;
    }

    .campo {
        height: 54px;
        padding: 0 16px;
        border-radius: 16px;
        font-size: 17px;
    }

    .login-boton {
        height: 56px;
        margin-top: 24px;
        font-size: 16px;
    }
}

/* Ordenador con poca altura (portátiles pequeños): menos espacio arriba y logo más pequeño para que quepa sin desplazar */
@media (min-width: 900px) and (max-height: 780px) {
    .login-cabecera {
        padding-top: 24px;
    }

    .login-logo {
        width: 220px;
    }

    .login {
        padding-top: 18px;
    }
}