/* ============================================================
   HUF — Componente: Modal (.hd-modal)
   ------------------------------------------------------------
   Implementación propia, sin depender de bootstrap.Modal: Bootstrap se
   reserva para grid/utilidades, no para componentes visuales/de
   comportamiento (regla explícita de esta build de HUF). El motor de
   apertura/cierre/foco vive en wwwroot/js/huf/hd-modal.js.
   Ejemplos de uso → docs/hednora-ui-framework-guide.md §Modal.
   ============================================================ */

.hd-modal {
    position: fixed;
    inset: 0;
    /* `inset: 0` por sí solo resuelve el alto contra el viewport "grande"
       (el que existe con la barra de direcciones oculta), no contra el área
       realmente visible cuando el navegador la está mostrando — típico justo
       al abrir un modal en Chrome Android / Safari iOS. El body/footer del
       modal quedaban tapados por la barra sin que hubiera overflow real que
       scrollear (encontrado en "Editar producto" de Discoteca/Menu en un
       Android real; el emulador de escritorio no lo reproduce porque no
       tiene una barra de direcciones que aparecer/ocultar). `100svh` fija el
       viewport "pequeño" (nunca queda detrás de la barra); `100vh` es el
       respaldo para navegadores sin soporte de unidades dvh/svh/lvh. */
    height: 100vh;
    height: 100svh;
    z-index: var(--hd-z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--hd-space-4);
}

.hd-modal--open {
    display: flex;
}

.hd-modal__backdrop {
    position: absolute;
    inset: 0;
    z-index: var(--hd-z-modal-backdrop);
    background: rgba(8, 15, 26, 0.72); /* HVL §6.6 — sin backdrop-filter */
}

.hd-modal__dialog {
    position: relative;
    z-index: var(--hd-z-modal);
    width: 100%;
    max-width: 40rem; /* 640px */
    /* Contra el viewport, no contra el contenido: sin esto, un modal más alto
       que la pantalla (p. ej. Nueva Venta con su grid de productos completo)
       no tenía ningún mecanismo de scroll y el footer quedaba inalcanzable —
       encontrado migrando Discoteca/Caja, el primer modal de esta build con
       contenido genuinamente más alto que el viewport. */
    max-height: 100%;
    display: flex;
    animation: hd-fade-in var(--hd-motion-standard) var(--hd-ease);
}

.hd-modal--sm .hd-modal__dialog { max-width: 26rem; }
.hd-modal--lg .hd-modal__dialog { max-width: 60rem; } /* 960px — modales de tabla */

/* 1280px + alto completo — modales de TRABAJO, no de formulario: el composer
   de "Nueva Venta" en Discoteca/Caja pone un catálogo de productos con fotos
   y el carrito lado a lado, y a 960px las dos columnas quedaban demasiado
   estrechas para ser usables (la ficha de producto no alcanzaba a mostrar
   foto + nombre + precio sin partirse). El alto fijo es lo que permite que
   catálogo y carrito scrolleen cada uno por su lado en vez de que scrollee
   el modal entero. */
.hd-modal--xl .hd-modal__dialog {
    max-width: 80rem;
    height: 100%;
}

.hd-modal--xl .hd-modal__content { height: 100%; }

.hd-modal__content {
    display: flex;
    flex-direction: column;
    min-height: 0; /* deja que .hd-modal__body encoja y sea quien scrollee */
    width: 100%;
    background: var(--hd-theme-surface);
    border-radius: var(--hd-radius-md);
    border: 1px solid var(--hd-color-border);
    box-shadow: var(--hd-shadow-floating);
    overflow: hidden;
}

/* Cabecera sólida (HVL §6.6: "panel técnico, no ventana flotante"), nunca
   degradado.
   REVISIÓN 3 (2026-08-04): se retiró la línea de energía de acento del borde
   superior. Un modal abierto no es un "estado activo" que haya que señalizar:
   ya es lo único con lo que se puede interactuar. El acento aquí decoraba
   (HVL §4.2 revisado, §5.3).
   La variante de peligro SÍ conserva su línea, porque ahí el color comunica
   la naturaleza destructiva de la acción — es información, no adorno. */
.hd-modal__header {
    flex-shrink: 0;
    padding: var(--hd-space-4) var(--hd-space-5);
    background: var(--hd-color-bg-secondary);
    color: var(--hd-theme-text);
}

.hd-modal__header--danger {
    border-top: 2px solid var(--hd-color-error);
}

.hd-modal-title {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-3);
    font-weight: 600;
    font-size: var(--hd-text-title);
}

/* Insignia de ícono de la cabecera: 32px (tamaño ya lo fija
   <hd-icon size="32">), sin fondo circular de color (HVL §5.5/§6.11). El
   color por defecto hereda el texto; las variantes lo tiñen. */
.hd-modal-title .hd-icon {
    color: inherit;
    flex-shrink: 0;
}

.hd-modal-title--danger  .hd-icon { color: var(--hd-color-error); }
.hd-modal-title--success .hd-icon { color: var(--hd-color-success); }
.hd-modal-title--warning .hd-icon { color: var(--hd-color-warning); }

/* Cuando header/body/footer conservan su form de POST (asp-page-handler), el
   <form> queda como hijo directo de .hd-modal__content junto a .hd-modal__header,
   y por defecto NO es un contenedor flex: .hd-modal__body hereda flex/min-height/
   overflow de un padre que no los reparte, así que nunca se recorta y el footer
   con el botón de guardar queda inalcanzable en pantallas cortas (encontrado en
   el modal "Editar producto" de Discoteca/Menu en móvil). Mismo defecto y misma
   solución que .hd-page__content > form en shell.css, aquí a nivel de modal. */
.hd-modal__content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.hd-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--hd-space-5);
    color: var(--hd-theme-text);
}

.hd-modal__message {
    margin: 0;
    color: var(--hd-theme-text-muted);
    /* Los mensajes de HD.dialogs se arman con \n entre líneas (el resumen del cierre de caja:
       contado, esperado, diferencia). El texto se escapa antes de insertarlo, así que sin esto
       los saltos se colapsan y las tres cifras salen como un párrafo corrido. pre-line conserva
       los saltos y sigue colapsando los espacios sobrantes. */
    white-space: pre-line;
}

.hd-modal__footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: var(--hd-space-2);
    padding: var(--hd-space-4) var(--hd-space-5);
    border-top: 1px solid var(--hd-color-border);
}

/* Pantalla completa en móvil (< 576px) — mismo umbral y mismo padding
   que .modal-fullscreen-sm-down en admin-portal.css (plan §8.3). */
@media (max-width: 575.98px) {
    .hd-modal__dialog {
        max-width: 100%;
        height: 100%;
    }

    .hd-modal__content {
        height: 100%;
        border-radius: 0;
    }
}