/* CSS/modal-dialog.css — Ventanas (modales) unificadas.
   1) En pantallas grandes las ventanas de detalle son un diálogo centrado (como el detalle de Balance, .balm).
   2) Un solo contenedor: se elimina la "hoja" interior (segunda tarjeta con fondo, borde y sombra) y las cajas de tabla y total,
      para que el espacio sea del contenido.
   3) Todos los botones de cerrar (×) y de descargar tienen el mismo diseño, arriba a la derecha, sin tapar el contenido.
   En el teléfono siguen siendo hojas inferiores a todo el ancho, sin scroll horizontal. */

/* ------------------------------------------------------------------ */
/* 1. Diálogo centrado en pantallas grandes                             */
/* ------------------------------------------------------------------ */
@media (min-width: 900px) {
    body :is(#cashflow-details-modal, #debt-sheet-modal, #daily-report-modal, #agenda-modal,
             #inventory-history-modal, #crm-profile-modal, #create-client-modal) {
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
    }

    body :is(#cashflow-details-modal, #debt-sheet-modal, #daily-report-modal, #agenda-modal,
             #inventory-history-modal, #crm-profile-modal, #create-client-modal) > .modal-content {
        position: relative !important;
        width: min(1000px, 100%) !important;
        max-width: 1000px !important;
        height: min(90dvh, 920px) !important;
        max-height: 90dvh !important;
        margin: 0 auto !important;
        border-radius: 24px !important;
        border: 1px solid var(--card-border) !important;
        background-color: var(--view-bg-color) !important;
        box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6) !important;
        overflow: hidden !important;
    }
}

/* ------------------------------------------------------------------ */
/* 2. Un solo contenedor: sin hoja interior ni cajas anidadas           */
/* ------------------------------------------------------------------ */
body .modal > .modal-content { position: relative; }

body .modal :is(.report-print-area, .balance-print-area) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: var(--text-primary);
}
body .modal .report-scroll-wrapper {
    padding: 16px 16px 28px !important;
    box-sizing: border-box;
}
/* la tabla y el total se apoyan en la ventana: sin caja, sin altura mínima */
body .modal .table-wrapper-modal {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
}
body .modal .m-sheet-total > div {
    background: transparent !important;
    border: 0 !important;
    padding: 4px 0 0 !important;
    min-width: 0 !important;
}
body .modal .m-sheet-total { padding-top: 14px !important; margin-top: 14px !important; }

@media (min-width: 900px) {
    body .modal .report-scroll-wrapper { padding: 24px 30px 30px !important; }
    body .modal .table-wrapper-modal { max-height: none !important; overflow: visible !important; }
}

/* ------------------------------------------------------------------ */
/* 3. Botones de la esquina: cerrar (×) y descargar                     */
/* ------------------------------------------------------------------ */
body .modal :is(.close-btn, .report-close-btn, .crm-close-btn, .balm-close) {
    position: absolute !important; top: 14px !important; right: 14px !important; left: auto !important; z-index: 1001;
    width: 40px !important; height: 40px !important; display: grid !important; place-items: center; padding: 0 !important; margin: 0 !important;
    font-size: 1.4rem !important; font-weight: 600 !important; line-height: 1; cursor: pointer;
    color: var(--text-primary) !important; background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important; border-radius: 12px !important;
    -webkit-backdrop-filter: none; backdrop-filter: none; transform: none !important;
    transition: color 0.15s ease, border-color 0.15s ease;
}
body .modal :is(.close-btn, .report-close-btn, .crm-close-btn, .balm-close):hover {
    color: var(--danger-color) !important; border-color: var(--danger-color) !important; transform: none !important;
}
body .modal :is(.close-btn, .report-close-btn, .crm-close-btn, .balm-close) :is(svg, i) { width: 18px; height: 18px; pointer-events: none; }

/* Cerrar dentro de encabezados propios (Ahorros, Nómina, Registro rápido): mismo aspecto, sin cambiar su posición */
.sv-x, .nm-icon-btn.close, .qa-close {
    width: 40px !important; height: 40px !important; flex-shrink: 0; display: inline-grid !important; place-items: center; padding: 0 !important;
    color: var(--text-primary) !important; background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important; border-radius: 12px !important; cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.sv-x:hover, .nm-icon-btn.close:hover, .qa-close:hover {
    color: var(--danger-color) !important; border-color: var(--danger-color) !important; background: var(--card-bg) !important;
}
.sv-x :is(svg, i), .nm-icon-btn.close :is(svg, i), .qa-close :is(svg, i) { width: 18px; height: 18px; }

/* Descargar: al lado del cerrar */
body .modal .floating-download-btn {
    position: absolute !important; top: 14px !important; right: 62px !important; bottom: auto !important; left: auto !important; z-index: 1001;
    width: 40px !important; height: 40px !important; display: grid !important; place-items: center; padding: 0 !important; margin: 0 !important;
    color: var(--primary-color) !important; background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important; border-radius: 12px !important; box-shadow: none !important; cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
body .modal .floating-download-btn:hover {
    color: #fff !important; background: var(--primary-color) !important; border-color: var(--primary-color) !important; transform: none !important;
}
body .modal .floating-download-btn :is(svg, i) { width: 19px !important; height: 19px !important; margin: 0 !important; }

/* Los encabezados dejan sitio a los dos botones */
body .modal :is(.report-print-area, .balance-print-area) > :first-child { padding-right: 100px; }
body .modal .modal-header { padding-right: 60px; }
body .modal .balm-head { padding-right: 60px !important; }
body #weekly-details-modal .balm-head { padding-right: 110px !important; }

@media (prefers-reduced-motion: reduce) {
    body .modal :is(.close-btn, .report-close-btn, .crm-close-btn, .balm-close, .floating-download-btn),
    .sv-x, .nm-icon-btn.close, .qa-close { transition: none; }
}

/* Modales pequeños (formularios de 450px): el título deja sitio al botón de cerrar */
body .modal .modal-content[style*="margin: 20px"] > .modal-body > :first-child { padding-right: 48px; }