/* ============================================================================
   ESTILO PROPIO para el LOGIN de webswing y el circulito de espera.
   (02/09/2026; peticion del usuario). Se carga en los index.html de las DOS
   webroots DESPUES de la hoja del war (css/style.css). NO se toca el JS de
   webswing ni la estructura del formulario: aqui solo se redefine su ASPECTO.

   ANCLAJE (importante, corregido 02/09/2026 viendo el DOM real): el login se
   pinta en DOS estructuras distintas segun por donde se entre:
     - Pagina suelta /login (default.html): el <form class="ws-login-form"> va
       dentro de un <div class="ws-login">.
     - Flujo NORMAL de la app (lo que ve el usuario): webswing INYECTA ese mismo
       <form class="ws-login-form"> dentro de un <div class="ws-dialog"> (NO hay
       .ws-login alrededor). Por eso las reglas NO pueden colgar de .ws-login (un
       primer intento asi dejaba el login de la app SIN estilar); se anclan a las
       clases PROPIAS del login: .ws-login-form (el formulario), .ws-login-title,
       .ws-login-instructions, .ws-form-field, .ws-btn-submit, .ws-form-icon...
       todas exclusivas del login/espera, asi que apuntarlas directamente es
       seguro. El circulito de espera propio (#loading) sigue en .ws-login.

   POR QUE TODO LLEVA !important: la hoja del war estiliza estas mismas clases
   con selectores de 2-3 niveles (`.webswing-element .webswing-element-content
   .ws-btn-submit`...), que ganarian por especificidad a un selector normal
   nuestro aunque cargue despues (el boton se quedaba cian y en position:absolute,
   el spinner cian). !important uniforme = via robusta; no afecta a nada fuera de
   estas clases.

   DONDE vive este estilo (para cubrir las dos pantallas):
   1) esta hoja, enlazada en los index.html: cubre el flujo NORMAL de la app (el
      login inyectado) y el bloque de carga #loading.
   2) una COPIA INCRUSTADA (<style> + logo en data URI) en la plantilla
      default.html del WAR (fuente en nl4-sources/modificadas/
      jar-webswing-server-core/default.html): cubre la pagina suelta /login, que
      la sirve el modulo de seguridad de la RAIZ y no ve los webroots. SI SE
      CAMBIA ESTA HOJA, cambiar tambien esa copia incrustada y rehacer el war.

   Vive en webroot-comun/ (compartida movil+escritorio). El logo:
   webroot-comun/img/logo-login.png (logoLavanderia recortado, 631x118; logo por
   cliente pendiente de automatizar, como los iconos del manifest).

   Paleta (de UIStyle): azul marino #1F2A41, gris de fondo #DADDE2, texto #0C1726.
   ============================================================================ */

:root {
    --nl-azul: #1f2a41;          /* colorBotonAplicacion */
    --nl-azul-hover: #2b3a59;
    --nl-azul-activo: #16202f;
    --nl-texto: #0c1726;
    --nl-texto-suave: #5b6675;
    --nl-campo-fondo: #f4f6f9;
    --nl-campo-borde: #cdd4de;
    --nl-tarjeta: #ffffff;
    --nl-fuente: "Open Sans", "open sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* LA TARJETA. Dos casos:
   - el FORMULARIO de login (.ws-login-form), sea cual sea su contenedor;
   - el circulito de espera propio (.ws-login del #loading), que NO lleva
     formulario dentro. */
.ws-login-form,
.ws-login {
    background: var(--nl-tarjeta) !important;
    color: var(--nl-texto) !important;
    font-family: var(--nl-fuente) !important;
    width: calc(100% - 32px) !important;
    max-width: 360px !important;
    margin: auto !important;
    padding: 26px 24px 22px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(12, 23, 38, 0.18) !important;
    box-sizing: border-box !important;
}

/* El formulario de fabrica reservaba 64px abajo (su boton iba absoluto pegado al
   fondo); con el boton en flujo normal esa reserva sobra. */
.ws-login-form {
    padding-bottom: 22px !important;
}

/* Logo del programa arriba de la tarjeta (login y espera). Va sobre el mismo
   elemento-tarjeta de cada caso. Marca ALARGADA (~5.35:1) -> hueco ancho con esa
   proporcion, para que salga grande y no diminuto. */
.ws-login-form::before,
.ws-login::before {
    content: "";
    display: block;
    width: 78%;
    max-width: 230px;
    aspect-ratio: 631 / 118;
    height: auto;
    margin: 2px auto 16px;
    background-image: url("img/logo-login.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Cuando el .ws-dialog de webswing envuelve el login inyectado, quitarle SU
   tarjeta de fabrica para no ver una tarjeta dentro de otra (la del formulario
   ya hace de tarjeta). Solo afecta al dialogo que contiene el login. */
.ws-dialog:has(.ws-login-form),
.ws-dialog-content:has(.ws-login-form) {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}

.ws-login-title {
    color: var(--nl-azul) !important;
    font-family: var(--nl-fuente) !important;
    font-weight: 600 !important;
    font-size: 22px !important;
    text-align: center !important;
    margin: 0 0 6px !important;
}

.ws-login-instructions {
    color: var(--nl-texto-suave) !important;
    font-family: var(--nl-fuente) !important;
    font-size: 14px !important;
    text-align: center !important;
    margin: 0 0 18px !important;
}

/* Campos de usuario y contrasena. El border con !important tambien anula la
   animacion de fabrica del foco (franja cian a la izquierda). */
.ws-form-field {
    display: block !important;
    font-family: var(--nl-fuente) !important;
    font-size: 16px !important;    /* 16px: en movil evita el zoom al enfocar */
    color: var(--nl-texto) !important;
    background: var(--nl-campo-fondo) !important;
    border: 1px solid var(--nl-campo-borde) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
    min-height: 46px !important;
    outline: none !important;
    transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
}

.ws-form-field:focus {
    border-color: var(--nl-azul) !important;
    box-shadow: 0 0 0 3px rgba(31, 42, 65, 0.15) !important;
}

/* Los iconitos que webswing desliza dentro del campo al enfocar: se ocultan
   (chocaban con el estilo nuevo). */
.ws-form-icon {
    display: none !important;
}

/* Boton Entrar: azul marino de los botones del programa. De fabrica iba absoluto
   al fondo del formulario; aqui vuelve al flujo normal, debajo de los campos. */
.ws-btn-submit {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    font-family: var(--nl-fuente) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: var(--nl-azul) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 13px 16px !important;
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 4px !important;
    cursor: pointer !important;
    transition: background-color 0.12s ease !important;
}

.ws-btn-submit:hover {
    background: var(--nl-azul-hover) !important;
}

.ws-btn-submit:active {
    background: var(--nl-azul-activo) !important;
}

/* La "sombra" decorativa de fabrica bajo el boton (un ::before absoluto) sobra. */
.ws-btn-submit::before {
    display: none !important;
}

/* Mensaje de error de login */
#loginErrorMsg,
.ws-login-message--error {
    color: #b3261e !important;
    font-family: var(--nl-fuente) !important;
    font-size: 13px !important;
    text-align: center !important;
    min-height: 18px;
    margin: 2px 0 8px !important;
}

/* DIALOGO COMUN de webswing (.ws-dialog): webswing REUTILIZA el mismo dialogo para
   el login Y para los avisos de conexion/sesion (Reconectando, "Se ha perdido la
   conexion" con Reconectar/Cerrar sesion, "Hola de nuevo / continuar o empezar de
   nuevo", "Elige una sesion", "Sesion terminada", Iniciando la sesion...). A TODOS
   (menos el login, que ya tiene su tarjeta en .ws-login-form) se les da NUESTRA
   tarjeta con logo, para que TODO lo que ve el usuario sea consistente (peticion
   02/09/2026). Estructura de fabrica: .ws-dialog > .ws-header(titulo) +
   .ws-dialog-content(texto) + botones .ws-messagebar-btn; el texto lleva
   `.ws-dialog * {font-size:14px !important}` de fabrica (por eso aqui hay !important
   y selectores de >=2 clases para ganar). Usa :has() (navegador moderno; en uno
   viejo el dialogo se queda de fabrica, degradacion aceptable). */
.ws-dialog:not(:has(.ws-login-form)) {
    background: var(--nl-tarjeta) !important;
    color: var(--nl-texto) !important;
    font-family: var(--nl-fuente) !important;
    max-width: 340px !important;
    margin: auto !important;
    padding: 26px 24px 24px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(12, 23, 38, 0.18) !important;
    box-sizing: border-box !important;
    text-align: center !important;
}
.ws-dialog:not(:has(.ws-login-form))::before {
    content: "";
    display: block;
    width: 70%;
    max-width: 200px;
    aspect-ratio: 631 / 118;
    height: auto;
    margin: 2px auto 16px;
    background-image: url("img/logo-login.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.ws-dialog:not(:has(.ws-login-form)) .ws-dialog-content,
.ws-dialog:not(:has(.ws-login-form)) .ws-dialog-content p,
.ws-dialog:not(:has(.ws-login-form)) .ws-header {
    color: var(--nl-texto) !important;
    font-family: var(--nl-fuente) !important;
    background: transparent !important;
    border: none !important;
    font-size: 15px !important;
}
.ws-dialog:not(:has(.ws-login-form)) .ws-header {
    font-weight: 600 !important;
    color: var(--nl-azul) !important;
    font-size: 18px !important;
}
/* Botones de los dialogos de conexion/sesion (.ws-messagebar-btn dentro del dialogo,
   NO los de la barra de avisos de arriba): estilo azul del programa (contorno que se
   rellena al pasar por encima). Se excluyen los inactivos (deshabilitados). */
.ws-dialog:not(:has(.ws-login-form)) .ws-messagebar-btn:not(.ws-btn--inactive) {
    display: inline-block !important;
    float: none !important;
    font-family: var(--nl-fuente) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--nl-azul) !important;
    background: transparent !important;
    border: 1px solid var(--nl-azul) !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    margin: 16px 5px 0 !important;
    min-height: 42px !important;
    cursor: pointer !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
}
.ws-dialog:not(:has(.ws-login-form)) .ws-messagebar-btn:not(.ws-btn--inactive):hover {
    background: var(--nl-azul) !important;
    border-color: var(--nl-azul) !important;
    color: #ffffff !important;
}

/* Circulito de espera: en TODAS las esperas (entrada, login, dialogos) se sustituye
   la animacion orbital de fabrica ("rara") por dos puntos con un pulso suave, en el
   azul del programa. */
.ws-spinner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: auto !important;
    height: auto !important;
    margin: 14px auto 2px !important;
    animation: none !important;   /* quita la rotacion orbital de fabrica */
}
.ws-spinner-dot-1,
.ws-spinner-dot-2 {
    position: static !important;
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    top: auto !important;
    bottom: auto !important;
    border-radius: 50% !important;
    background-color: var(--nl-azul) !important;
    animation: nl-pulso-espera 1.1s infinite ease-in-out !important;
}
.ws-spinner-dot-2 {
    animation-delay: 0.35s !important;
}
@keyframes nl-pulso-espera {
    0%, 100% { transform: scale(0.5); opacity: 0.35; }
    50%      { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ws-spinner-dot-1,
    .ws-spinner-dot-2 { animation: none !important; opacity: 0.8 !important; }
}