/* public/assets/css/components/modal.css
   Componente: dialogo modal generico de contenido arbitrario (a diferencia
   de components/confirm.css, que es solo para confirmaciones si/no). Se
   controla con components/modal.js via atributos data-* (mismo criterio de
   auto-inicializacion que components/buscador.js), sin JS especifico por
   pantalla.

   Uso:
   <button data-modal-toggle="mi-modal">Abrir</button>
   <div class="app-modal-overlay" data-modal="mi-modal">
     <div class="app-modal" role="dialog" aria-modal="true">
       <div class="app-modal-header">
         <h2 class="app-modal-titulo">Titulo</h2>
         <button class="app-modal-cerrar" data-modal-cerrar aria-label="Cerrar">&times;</button>
       </div>
       <div class="app-modal-body">...</div>
       <div class="app-modal-footer">...</div>
     </div>
   </div>
   Tambien programable desde JS: window.appModal.abrir('mi-modal') /
   .cerrar('mi-modal') (ver calendario.js, que rellena el formulario antes
   de abrir el modal al hacer doble clic en un dia/hora). */

.app-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--app-space-md);
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    overflow-y: auto;
}
.app-modal-overlay.app-modal-visible { display: flex; }

.app-modal {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - var(--app-space-xl) * 2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--app-surface);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-card);
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
}
.app-modal-overlay.app-modal-visible .app-modal { opacity: 1; transform: translateY(0) scale(1); }

.app-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--app-space-md);
    padding: var(--app-space-md) var(--app-space-lg);
    border-bottom: 1px solid var(--app-border-soft);
}

/* Titulo con peso ligero (no 700/800): un modal es una capa secundaria
   sobre la pantalla, no debe competir en peso visual con el contenido. */
.app-modal-titulo { margin: 0; font-size: var(--app-text-md); font-weight: 600; color: var(--app-text); }

/* Boton de cerrar sutil: circulo pequeño, "×" de trazo fino, color apagado
   hasta el hover, sin fondo propio permanente. */
.app-modal-cerrar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: -2px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--app-text-muted);
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.app-modal-cerrar:hover,
.app-modal-cerrar:focus-visible { background: var(--app-surface-soft); color: var(--app-text); }

/* Cuando el contenido del modal es un <form> (envuelve body+footer para
   que el submit incluya el pie, ver calendario/index.php), ese <form> es
   el hijo directo real de .app-modal - no .app-modal-body -, asi que es
   EL que necesita las propiedades flex para que el body pueda scrollear
   internamente. min-height:0 es imprescindible en los dos niveles: sin
   el, un hijo flex nunca se encoge por debajo de su contenido (asunto
   tipico de flexbox) y el formulario entero desborda .app-modal en vez de
   scrollear solo dentro de .app-modal-body, quedando cortado por el
   overflow:hidden de arriba sin ninguna barra de scroll visible. */
.app-modal > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.app-modal-body { flex: 1; min-height: 0; padding: var(--app-space-lg); overflow-y: auto; }

.app-modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: var(--app-space-sm);
    padding: var(--app-space-md) var(--app-space-lg);
    border-top: 1px solid var(--app-border-soft);
}

body.app-modal-abierto { overflow: hidden; }
html:has(body.app-modal-abierto) { overflow: hidden; height: 100%; }