/**
 * q-modal.css — Sistema de diseño Quasar · geometría de los diálogos modales.
 *
 * Vive aparte de q-components.css porque el loginLayout (que NO carga
 * components, tiene estética propia en q-login.css) también necesita el
 * centrado y la escala: al retirar de las vistas el <style> con el hack de
 * centrado (2026-08-16), los modales del login se quedarían pegados arriba.
 * Orden de carga: después de q-tokens (usa sus variables) y antes de las capas
 * que puedan querer sobrescribir un diálogo concreto.
 *
 * Desde 2026-08-19 este archivo lleva TAMBIÉN la piel del modal (radio, sombra,
 * header/body/footer, animación, variantes de header coloreado). Antes vivía en
 * q-components.css §5 y solo la aplicaba el layout principal, con lo que los
 * modales del login (bienvenida, error, recuperar clave) salían con Bootstrap 3
 * crudo + el verde sólido de AdminLTE. Regla: q-modal.css = TODO lo que un
 * diálogo necesita para verse bien en cualquier página que lo cargue.
 */

/* --- Centrado vertical GLOBAL de todos los diálogos --------------------------
   Sustituye al hack `.modal{text-align:center} .modal:before{inline-block;
   height:100%} .modal-dialog{inline-block}` que 23 vistas repetían en <style>
   inline (_modal.php y derivados, tablero, calendario, notas…). Patrón
   .modal-dialog-centered de Bootstrap 4: el diálogo es una columna flex de
   altura mínima ≈ viewport y el contenido se centra en ella. Los hijos
   posicionados (.cargando) no participan del flujo. */
.modal-dialog {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100% - 20px);   /* margen 10px de Bootstrap en móvil */
}
.modal-dialog > .modal-content { width: 100%; }
@media (min-width: 768px) {
    .modal-dialog { min-height: calc(100% - 60px); }  /* margen 30px auto */
}

/* --- Tamaños de diálogo declarativos ------------------------------------------
   Reemplazan al `$(".modal-dialog").width("NN%")` imperativo y GLOBAL (ponía el
   mismo ancho inline a TODOS los diálogos de la página). Escala:
     sm ≈ 30–40 %  ·  md ≈ 50–60 %  ·  lg ≈ 70–85 %  ·  xl ≈ 90 %
   Se aplican como clase en el markup del .modal-dialog (modal propio, tamaño
   fijo) o en runtime con $('#modal').qModalSize('md') (shared/q-modal.js) para
   modales polimórficos como #myModal (_modal.php). Ancho porcentual con
   límites en px para que no degeneren en pantallas muy anchas ni muy estrechas. */
.modal-dialog.q-modal-sm { width: 40%; min-width: 460px; max-width: 600px; }
.modal-dialog.q-modal-md { width: 60%; min-width: 560px; max-width: 800px; }
.modal-dialog.q-modal-lg { width: 80%; min-width: 680px; max-width: 1100px; }
.modal-dialog.q-modal-xl { width: 92%; max-width: 1400px; }

/* Diálogos con nombre propio (partials protected/views/_modal_*.php):
   - .dialog-pay (_modal_pay.php): teclado de pago diseñado a 640px fijos (antes
     `$('.dialog-pay').width('640px')` en 5 view-scripts).
   - .modal-dialog-footer / .modal-dialog-products (_modal_not_footer.php,
     _modal_products.php): NO llevan la clase .modal-dialog de Bootstrap; su
     ancho lo pone el JS por caso (wizard de caja, productos) o es el intrínseco
     del contenido (fit-content ≡ el inline-block que tenían). Se centran igual. */
.modal-dialog.dialog-pay { width: 640px; max-width: calc(100% - 24px); }
.modal-dialog-footer,
.modal-dialog-products {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: fit-content;
    min-width: 320px;
    max-width: calc(100% - 20px);
    min-height: calc(100% - 20px);
    margin: 10px auto;
}
@media (min-width: 768px) {
    .modal-dialog-footer,
    .modal-dialog-products { max-width: calc(100% - 60px); min-height: calc(100% - 60px); margin: 30px auto; }
}

/* Móvil: NINGÚN diálogo más estrecho que la pantalla, aunque el JS legacy le
   haya puesto un width inline (30%–90%). Márgenes de 12px como Bootstrap. */
@media (max-width: 767px) {
    .modal-dialog,
    .modal-dialog.dialog-pay,
    .modal-dialog-footer,
    .modal-dialog-products,
    .modal-dialog.q-modal-sm,
    .modal-dialog.q-modal-md,
    .modal-dialog.q-modal-lg,
    .modal-dialog.q-modal-xl {
        width: calc(100% - 24px) !important;
        min-width: 0;
        max-width: none;
        margin: 12px auto;
    }
}


/* --- PIEL del modal (trasladada desde q-components.css §5 el 2026-08-19) ----
   Radio 14, sombra flotante, header con hairline, entrada con scale sutil.
   Usa solo tokens de q-tokens.css, que cargan ambos layouts. */
.modal-content {
    background-color: var(--q-surface);   /* en claro = Bootstrap; en dark voltea */
    border-radius: var(--q-radius-l);
    border: none;
    box-shadow: var(--q-shadow-2);
}
.modal-header {
    border-bottom: 1px solid var(--q-hairline);
    padding: var(--q-space-4) var(--q-space-5);
}
.modal-header .modal-title, .modal-title { font-size: var(--q-text-md); font-weight: 600; }
.modal-body { padding: var(--q-space-5); }
/* Pie FLEX: alinear inline-blocks con text-align dejaba huecos fantasma de
   espacios en blanco (medido: el último botón quedaba a 34px del borde con
   padding de 24). El gap sustituye al margin-left:5px de Bootstrap. */
.modal-footer {
    border-top: 1px solid var(--q-hairline);
    padding: var(--q-space-4) var(--q-space-5);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--q-space-2);
}
.modal-footer .btn + .btn { margin-left: 0; }
/* El clearfix de Bootstrap (::before/::after) se vuelve ITEM flex y, con el
   gap, empujaba el último botón 10px hacia dentro. En flex no hace falta. */
.modal-footer::before, .modal-footer::after { content: none; }
/* Un pie sin contenido (p.ej. el .footer-msj de _modal.php en los mensajes)
   no debe pintar una franja vacía con hairline. */
.modal-footer:empty { display: none; }
.modal-backdrop.in { opacity: 0.4; }
.modal.fade .modal-dialog {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
    opacity: 0;
    transition: transform var(--q-dur) var(--q-ease), opacity var(--q-dur) var(--q-ease);
}
.modal.in .modal-dialog { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
/* La ✕ con entidad de BOTÓN (antes: glifo suelto a opacity .4, 15px de área,
   casi invisible — señalado por el dueño en el modal de tarea). Mismo lenguaje
   que los botones-icono de box-tools: fantasma 32px, gris, hover con fondo. */
.modal .close {
    font-weight: 400;
    text-shadow: none;
    opacity: 1;
    color: var(--q-gray-600);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--q-radius-s);
    line-height: 1;
}
.modal .close:hover { opacity: 1; color: var(--q-text); background: var(--q-gray-100); }

/* Header coloreado por estado (el patrón `.modal-header.alert-*` que usan los
   mensajes de login, reportes y formularios). Tonos SUAVES del sistema; el
   !important es necesario porque AdminLTE.min.css pinta .alert-success como
   verde sólido #00a65a con texto blanco, también con !important. En el layout
   principal q-components.css ya aplica estos mismos valores a todo .alert-*;
   aquí se repiten SOLO para el header del modal, que es lo que el login necesita. */
.modal-header.alert { border-radius: var(--q-radius-l) var(--q-radius-l) 0 0; margin-bottom: 0; }
.modal-header.alert-success { background-color: var(--q-success-soft) !important; border-color: rgba(52, 199, 89, 0.3) !important; color: var(--q-success-text) !important; }
.modal-header.alert-danger, .modal-header.alert-error { background-color: var(--q-danger-soft) !important; border-color: rgba(255, 59, 48, 0.3) !important; color: var(--q-danger-text) !important; }
.modal-header.alert-warning { background-color: var(--q-warning-soft) !important; border-color: rgba(255, 149, 0, 0.3) !important; color: var(--q-warning-text) !important; }
.modal-header.alert-info { background-color: var(--q-info-soft) !important; border-color: rgba(90, 200, 250, 0.35) !important; color: var(--q-info-text) !important; }
.modal-header.alert .modal-title { color: inherit; }
.modal-header.alert .close { color: inherit; }
/* --- Cierre (✕) en modales SIN .modal-header --------------------------------
   Recuperar clave y registro (login) no tienen .modal-content ni header: el
   .modal-body es TRANSPARENTE y la tarjeta blanca que ve el usuario es un
   .panel dentro de una columna. El .close flotaba suelto en esa columna y caía
   pegado a la esquina del panel; su único respiro (.q-pad-icon, 5px) vive en
   q-utilities.css, que el login no carga → 0px. Se ancla a la ESQUINA DEL
   PANEL con margen del sistema y área táctil de 32px. Los modales con header
   no se tocan (ahí el .close es hijo de .modal-header). */
.modal-body > .row > [class*="col-"]:has(> .close > span) { position: relative; }
.modal-body > .row > [class*="col-"] > .close {
    position: absolute;
    top: var(--q-space-3);
    right: calc(var(--q-space-3) + 15px);  /* 15px = gutter de la columna */
    width: 32px; height: 32px; line-height: 32px;
    margin: 0; padding: 0; text-align: center; float: none; z-index: 2;
    /* El panel de estos modales es blanco FIJO (no toma --q-surface), así que
       la ✕ no puede heredar --q-text: en dark sería blanco sobre blanco. */
    color: #333; opacity: 0.45;
}
.modal-body > .row > [class*="col-"] > .close:hover { opacity: 0.8; }