/* ==========================================================================
   Entrada (login.html) y registro (registro-gratuito.html) en el TELÉFONO
   16-oct-2026 · solo maquetación: ni ids, ni campos, ni scripts de acceso.

   Por qué existe (auditoría real a 360×780 y 393×852):
   - /login: main.css (Tailwind compilado y recortado) no trae w-6/h-6, así que
     el logotipo de Google se pintaba a 96-123 px y el correo quedaba en y≈810;
     el ojo de la contraseña caía debajo del campo y la página entera llevaba
     el relleno de 16 px que static/css/responsive-mobile.css pone al <body>.
   - /registro-gratuito: «Ya tengo cuenta» sacaba la página a 363 px.
   - Burbuja de WhatsApp encima de textos y enlaces.

   Va SOLO en ≤640 px y con la clase de página en <body>: el ordenador no cambia.
   Gana a responsive-mobile.css (≤768 px, todo con !important) por especificidad.
   ========================================================================== */

@media (max-width: 640px) {

    /* ------------------------------------------------------------------ */
    /* /login                                                              */
    /* ------------------------------------------------------------------ */
    html body.acceso-login {
        padding: 0 !important;
    }

    body.acceso-login > header > .container {
        padding: 8px 12px !important;
    }
    body.acceso-login > header .space-x-3 > svg {
        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0;
    }
    body.acceso-login > header .space-x-3 > span {
        font-size: 1.05rem !important;
        line-height: 1.25 !important;
    }
    body.acceso-login #login-mobile-menu-btn {
        margin: 0 !important;
        padding: 10px !important;
        min-height: 44px !important;
        flex-shrink: 0;
    }
    body.acceso-login #login-mobile-menu-btn svg {
        width: 24px;
        height: 24px;
    }
    body.acceso-login #login-mobile-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    body.acceso-login #main-content {
        margin: 12px auto 16px !important;
        padding: 0 10px !important;
        min-height: 0 !important;
        display: block !important;
    }
    body.acceso-login #main-content > div {
        padding: 16px 14px 18px !important;
        border-radius: 14px !important;
    }
    body.acceso-login #main-content h1 {
        font-size: 1.375rem !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    /* Bloque de Google: mismo contenido, tamaño normal */
    body.acceso-login .acceso-google {
        padding: 12px !important;
        margin-bottom: 4px !important;
    }
    body.acceso-login .acceso-google > div:first-child {
        display: none !important; /* rayo decorativo (aria-hidden) */
    }
    body.acceso-login .acceso-google h2 {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }
    body.acceso-login #google-login-button {
        min-height: 48px !important;
        padding: 10px 16px !important;
        margin: 0 0 10px !important;
        font-size: 1rem !important;
        transform: none !important;
    }
    body.acceso-login #google-login-button svg {
        width: 20px !important;
        height: 20px !important;
        margin-right: 12px !important;
        flex-shrink: 0;
    }
    body.acceso-login .acceso-google p {
        font-size: 0.8125rem !important;
        line-height: 1.35 !important;
        margin-top: 4px !important;
    }

    /* Separador «o» */
    body.acceso-login .acceso-separador {
        margin: 10px 0 !important;
    }

    /* Correo y contraseña */
    body.acceso-login .acceso-email {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px !important;
    }
    body.acceso-login .acceso-email > p:first-child {
        margin-bottom: 8px !important;
    }
    /* El aviso de «¿te dice que la contraseña no es correcta?» pasa debajo del botón */
    body.acceso-login .acceso-email .acceso-aviso-google {
        order: 2;
        margin: 12px 0 0 !important;
        line-height: 1.4 !important;
    }
    body.acceso-login #login-form > * + * {
        margin-top: 10px !important;
    }
    body.acceso-login #login-form label {
        margin-bottom: 4px !important;
    }
    body.acceso-login #email,
    body.acceso-login #password {
        padding: 11px 12px !important;
        font-size: 16px !important; /* 16 px: iPhone no amplía la página al tocar el campo */
        height: 48px;
    }
    body.acceso-login #password {
        padding-right: 52px !important;
    }
    /* El ojo dentro del campo, a la derecha (antes caía debajo, a la izquierda:
       main.css tampoco trae .relative/.absolute) */
    body.acceso-login #login-form > div {
        position: relative;
    }
    body.acceso-login #toggle-password {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
    }
    body.acceso-login #login-button {
        min-height: 50px !important;
        padding: 12px 16px !important;
        margin: 14px 0 0 !important;
        font-size: 1.05rem !important;
    }
    body.acceso-login #login-form > .flex {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
        gap: 8px;
        margin-top: 4px !important;
    }
    body.acceso-login #forgot-password-link,
    body.acceso-login #register-button {
        display: inline-flex !important;
        align-items: center;
        min-height: 44px !important;
        padding: 0 4px !important;
        margin: 0 !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        background: transparent !important;
        text-align: left;
    }

    body.acceso-login footer {
        padding: 20px 12px 88px !important; /* hueco para la burbuja de WhatsApp */
    }

    /* ------------------------------------------------------------------ */
    /* /registro-gratuito                                                  */
    /* ------------------------------------------------------------------ */
    body.acceso-registro footer {
        padding-bottom: 88px !important; /* hueco para la burbuja de WhatsApp */
    }

    /* ------------------------------------------------------------------ */
    /* Burbuja de WhatsApp en las dos páginas: 52 px, esquina derecha      */
    /* (responsive-mobile.css la mandaba a la izquierda en /login).        */
    /* ------------------------------------------------------------------ */
    body.acceso-login #psicopro-whatsapp-widget,
    body.acceso-registro #psicopro-whatsapp-widget {
        left: auto !important;
        right: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    body.acceso-login #psicopro-whatsapp-widget a,
    body.acceso-registro #psicopro-whatsapp-widget a {
        width: 52px !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}