/* El aviso de «hay plataforma nueva» en la pantalla de entrada.
 *
 * ⚠️ EL PANEL LO PINTA EL SKIN, NO NOSOTROS. Elastic trae esta regla:
 *
 *     #login-footer > div { margin-top:1rem; padding:1rem;
 *                           background:#f1f3f4; border-radius:.3rem }
 *
 * Es decir: cualquier `div` que un plugin cuelgue de `loginfooter` ya sale
 * dentro de una tarjeta gris. Por eso este archivo NO dibuja otra caja — el
 * primer intento sí lo hacía y salía una caja dentro de otra.
 *
 * ⚠️ Y ESA REGLA NO TIENE VERSIÓN OSCURA. Comprobado en el CSS compilado: en
 * `html.dark-mode` el fondo se queda en `#f1f3f4`, así que el aviso salía como
 * una tarjeta BLANCA en mitad de una pantalla oscura, con el texto claro del
 * tema encima — ilegible. Es un descuido del skin, no nuestro, y se corrige
 * aquí porque el skin no se puede tocar (se pierde en cada actualización).
 *
 * Los colores concretos van SOLO dentro del bloque de `dark-mode`, donde se
 * sabe con certeza cómo es el fondo. En claro no se toca nada: manda el skin.
 */
#mxc-aviso-nube { max-width: 26rem; margin-left: auto; margin-right: auto; text-align: left; }

.mxc-aviso-tit { font-weight: bold; margin: 0 0 0.35rem; }
.mxc-aviso-txt { margin: 0 0 0.4rem; font-size: 0.92rem; opacity: 0.85; }
/* La línea de la contraseña va destacada: es la que quita el miedo. */
.mxc-aviso-clave { margin: 0 0 0.9rem; font-size: 0.92rem; font-weight: bold; }

/* Solo geometría: el color lo pone `button mainaction` del propio skin, así que
   el botón sale idéntico al de «Iniciar sesión» en cualquier tema. */
.mxc-aviso-btn { display: block; width: 100%; }
/* Ya NO hay botón de descartar, y es deliberado: el aviso va DEBAJO del
   formulario y nunca impidió entrar, así que no cerraba nada que estorbara —
   solo daba una forma de perderse el anuncio con un clic despistado. Quien no
   lo quiera, entra y ya. El interruptor de verdad es el del panel, por dominio. */

/* ── Tema oscuro: lo que el skin se dejó sin hacer ────────────────────────
   `!important` porque `#login-footer>div` gana por especificidad y ese archivo
   no se puede editar — es el mismo motivo que documenta `mexmail_sesion.css`.
   El tono se deriva del texto, no de un color inventado: así vale igual si
   algún día cambia el fondo del tema. */
html.dark-mode #mxc-aviso-nube {
    background: rgba(127, 127, 127, 0.16) !important;
    border: 1px solid rgba(127, 127, 127, 0.28) !important;
}

/* ── El teléfono: aquí lo que sobra no se puede leer ──────────────────────
 *
 * ⚠️ LA PANTALLA DE ENTRADA NO SE DESPLAZA. Elastic pone `overflow:hidden` en
 * `body` y en `#layout`, así que lo que caiga por debajo del borde **no se
 * alcanza nunca**: en un teléfono de 664 px útiles el aviso se cortaba 28 px y
 * el botón «Ahora no» era imposible de pulsar. No es un detalle estético.
 *
 * Tres medidas, en este orden:
 */

/* 1. MÁS ANCHO QUE EL FORMULARIO. `#login-form` está limitado a 320 px y el pie
 *    hereda ese ancho, así que el texto se partía en muchas más líneas de las
 *    necesarias. Se sale de esa caja centrándose sobre ella —sin tocar el
 *    formulario, que debe seguir estrecho—. Cada línea ahorrada cuenta doble en
 *    una pantalla que no se puede desplazar. */
#mxc-aviso-nube {
    width: min(34rem, calc(100vw - 2rem));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom: 1rem;   /* que nunca quede pegado al borde de abajo */
}

/* 2. LOS DOS BOTONES EN UNA FILA en cuanto hay sitio: es un renglón entero de
 *    alto que se ahorra, y son las dos únicas acciones. Por debajo de eso van
 *    apilados, que en pantallas muy estrechas se pulsa mejor. */
.mxc-aviso-acciones { margin-top: 0.9rem; }
@media (min-width: 360px) {
    .mxc-aviso-acciones { display: flex; gap: 0.5rem; align-items: stretch; }
    .mxc-aviso-acciones .mxc-aviso-btn { flex: 2 1 0; }
    .mxc-aviso-acciones .mxc-aviso-no { flex: 1 1 0; margin-top: 0; }
}

/* 3. RED DE SEGURIDAD: si aun así no cupiera —una pantalla muy baja, una letra
 *    muy grande—, que la página se pueda desplazar. Se acota con `:has()` para
 *    tocar SOLO la pantalla que lleva nuestro aviso y no el resto del webmail. */
body.task-login:has(#mxc-aviso-nube) { overflow-y: auto !important; }
body.task-login:has(#mxc-aviso-nube) #layout { overflow-y: auto !important; }