/* theme-popups.css — Popups (DxPopup): tamaño seguro con unidades de viewport
   dinámico (dvh) y layout flex, para que el contenido y los botones de acción
   (Cancelar / Guardar / paginación) nunca queden ocultos por el zoom del
   navegador, pantallas pequeñas o cambios de DPI. Si el contenido no cabe,
   se habilita scroll interno en vez de recortarlo.

   Estructura real verificada en el DOM (DevExpress Blazor 26.1.3, DxPopup):
     div.dxbl-modal-content
       ├─ dxbl-popup-header.dxbl-modal-header.dxbl-popup-header   (título fijo)
       └─ <contenido del BodyTemplate del proyecto, sin wrapper propio de DevExpress>
   DxPopup NO envuelve el BodyTemplate en ningún .dxbl-popup-body/.dxbl-modal-body
   (esas clases pertenecen a otros componentes tipo DxWindow/message box), por eso
   el selector tiene que apuntar al hijo directo de .dxbl-modal-content que no sea
   el header.

   Cargar al final, después de theme-views. */

/* Capa del modal: nunca más alta que el viewport visible realmente disponible */
.dxbl-modal-root {
    height: 100dvh !important;
    box-sizing: border-box !important;
    padding: 1rem !important;
}

/* Ventana del popup: alto máximo seguro + layout en columna (header fijo, body flexible) */
.dxbl-modal-content {
    max-height: min(92dvh, calc(100dvh - 2rem)) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Encabezado: tamaño fijo, nunca se comprime */
.dxbl-modal-header,
.dxbl-popup-header {
    flex: 0 0 auto !important;
}

/* Cuerpo real (BodyTemplate del proyecto, hijo directo de .dxbl-modal-content
   distinto del header): ocupa el espacio restante y siempre permite scroll
   interno. min-height:0 es necesario para que un hijo flex pueda encogerse por
   debajo de su contenido y así habilitar el overflow en vez de desbordar la
   ventana (que es lo que ocultaba los botones al hacer zoom). */
.dxbl-modal-content > *:not(.dxbl-popup-header) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* Scrollbar moderno y discreto dentro de los popups */
.dxbl-modal-content > *:not(.dxbl-popup-header) {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .35) transparent;
}

.dxbl-modal-content > *:not(.dxbl-popup-header)::-webkit-scrollbar {
    width: 10px;
}

.dxbl-modal-content > *:not(.dxbl-popup-header)::-webkit-scrollbar-track {
    background: transparent;
}

.dxbl-modal-content > *:not(.dxbl-popup-header)::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, .35);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.dxbl-modal-content > *:not(.dxbl-popup-header)::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, .55);
}

/* ========== Modo oscuro: scrollbar del popup ========== */
html.theme-dark .dxbl-modal-content > *:not(.dxbl-popup-header) {
    scrollbar-color: rgba(148, 163, 184, .35) transparent;
}

html.theme-dark .dxbl-modal-content > *:not(.dxbl-popup-header)::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, .35);
}

html.theme-dark .dxbl-modal-content > *:not(.dxbl-popup-header)::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, .55);
}