/*
 * La casilla «mantener la sesión iniciada» en la pantalla de entrar.
 *
 * ⚠️ SIN ESTO NO SE VE. Se comprobó en el navegador (2026-09-04): el envoltorio
 * salía con `display: none` y la casilla con `opacity: 0`. Elastic esconde los
 * `div` sueltos del formulario de entrar y sustituye las casillas por unas
 * suyas, que necesitan un marcado que el plugin no usa. El resultado: la
 * casilla se pintaba en el HTML y era invisible — de 360 sesiones vivas, solo
 * 5 la habían encontrado.
 *
 * Por eso van `!important`: pelean contra `styles.min.css` de la piel, que gana
 * por especificidad y no se puede tocar (se pierde en cada actualización).
 */
#login-form .mexmail-sesion-permanecer {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    margin: 0.1rem 0 0.2rem;
}

/*
 * ⚠️ LA CASILLA CRUDA SE DEJA ESCONDIDA, que es como la quiere Elastic: el
 * interruptor lo dibuja `.custom-control-label` con sus pseudoelementos, y el
 * `input` solo guarda el estado. Forzarlo visible —el primer intento— pintaba
 * DOS controles: el cuadrito de siempre y el interruptor, uno al lado del otro.
 */
#login-form #mexmailpermanecer {
    position: absolute !important;
    opacity: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    z-index: -1;
}

/* La etiqueta: se pulsa entera, no solo el cuadrito. */
#login-form label[for="mexmailpermanecer"] {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    font-weight: normal;
    font-size: 0.92rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    opacity: 0.85;
}

/*
 * ⚠️ Y ELASTIC LA TRANSFORMA CON JAVASCRIPT. No basta con destapar nuestro
 * `div`: `ui.js` envuelve la casilla en un `.custom-control.custom-switch`
 * dentro de un `input-group`, le cuelga un icono y un `placeholder`… y le pone
 * `display: none` EN LÍNEA. Se vio leyendo el DOM ya montado, no el HTML que
 * manda el servidor: en el HTML del servidor no existe nada de esto.
 *
 * Se aprovecha su interruptor —así la casilla se ve como las del resto de la
 * aplicación— pero se le quita el disfraz de campo de texto grande.
 */
#login-form .mexmail-sesion-permanecer .custom-control {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    flex: none;
}
/* El icono que le cuelga `input-group` no significa nada aquí. */
#login-form .mexmail-sesion-permanecer .input-group-prepend {
    display: none !important;
}

/* La fila de la tabla que la contiene: Elastic la deja de 2 px de alto. */
#login-form table tr:has(.mexmail-sesion-permanecer) {
    height: auto !important;
    margin-top: 0.35rem;
}
#login-form table tr:has(.mexmail-sesion-permanecer) td.input {
    display: block !important;
    width: 100% !important;
}