.modal-overlay-custom {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.modal-fullscreen-custom {
    position: fixed;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    background: #fff;
    z-index: 1051;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    overflow: hidden;
}

@media (max-width: 576px) {
    .modal-fullscreen-custom {
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
    }
}

.modal-header-custom {
    flex-shrink: 0;
    padding: 0;
}

.modal-body-custom {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

.modal-footer-custom {
    flex-shrink: 0;
    padding: 1rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Asegurar que el scrollbar no cause saltos */
.modal-body-custom::-webkit-scrollbar {
    width: 8px;
}

.modal-body-custom::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.modal-body-custom::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.modal-body-custom::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* =========================================
   SOPORTE PARA DARK MODE
   Alineado con product-assign.css
   ========================================= */
body.dark-version .modal-fullscreen-custom {
    background: #202940; /* Fondo principal como product-assign */
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.4);
}

body.dark-version .modal-footer-custom {
    background-color: #202940; /* Misma tarjeta que product-assign */
    border-top: 1px solid #344767;
}

body.dark-version .modal-header-custom {
    background-color: #202940;
    border-bottom: 1px solid #344767;
}

body.dark-version .modal-body-custom {
    background-color: #202940;
}

body.dark-version .modal-body-custom::-webkit-scrollbar-track {
    background: #202940;
}

body.dark-version .modal-body-custom::-webkit-scrollbar-thumb {
    background: #344767;
}

body.dark-version .modal-body-custom::-webkit-scrollbar-thumb:hover {
    background: #4b628a;
}

/* ===== TEXTOS Y LABELS DENTRO DEL MODAL ===== */
body.dark-version .modal-fullscreen-custom .text-dark {
    color: #ffffff !important;
}

body.dark-version .modal-fullscreen-custom .text-muted,
body.dark-version .modal-fullscreen-custom .form-label {
    color: #a0aec0 !important;
}

body.dark-version .modal-fullscreen-custom h6 {
    color: #ffffff !important;
}

/* ===== ELEMENTOS FORM EN MODAL ===== */
body.dark-version .modal-fullscreen-custom .form-control {
    background-color: #202940 !important;
    color: #ffffff !important;
    border-color: #344767 !important;
}

body.dark-version .modal-fullscreen-custom .form-control::placeholder {
    color: #8c9db8 !important;
}

/* ===== TARJETAS Y CARD DENTRO DEL MODAL ===== */
body.dark-version .modal-fullscreen-custom .card {
    background-color: #202940 !important;
    border-color: #344767 !important;
}

body.dark-version .modal-fullscreen-custom .card-body {
    background-color: #202940 !important;
}

body.dark-version .modal-fullscreen-custom .card-header {
    background-color: #1a2035 !important;
    border-color: #344767 !important;
}

/* ===== TABLA EN MODAL ===== */
body.dark-version .modal-fullscreen-custom .table {
    color: #ffffff !important;
}

body.dark-version .modal-fullscreen-custom .table thead th {
    /* background-color: #202940 !important; */
    color: #a0aec0 !important;
    border-color: #344767 !important;
}

body.dark-version .modal-fullscreen-custom .table tbody td {
    /* background-color: #202940 !important; */
    color: #ffffff !important;
    border-color: #344767 !important;
}

body.dark-version .modal-fullscreen-custom .table tbody tr:hover {
    background-color: #202940 !important;
}

/* ===== BOTONES EN MODAL ===== */
body.dark-version .modal-fullscreen-custom .btn {
    border-color: #344767 !important;
}

body.dark-version .modal-fullscreen-custom .btn-outline-secondary {
    color: #232f5d !important;
    border-color: #232f5d !important;
    background-color: transparent !important;
}

body.dark-version .modal-fullscreen-custom .btn-outline-secondary:hover {
    background-color: #232f5d !important;
    color: #ffffff !important;
    border-color: #232f5d !important;
}

body.dark-version .modal-fullscreen-custom .btn-success {
    background-color: #4caf50 !important;
    border-color: #4caf50 !important;
    color: #ffffff !important;
}

body.dark-version .modal-fullscreen-custom .btn-success:hover {
    background-color: #3d8b40 !important;
    border-color: #3d8b40 !important;
}

body.dark-version .modal-fullscreen-custom .btn-danger {
    background-color: #f44335 !important;
    border-color: #f44335 !important;
    color: #ffffff !important;
}

body.dark-version .modal-fullscreen-custom .btn-danger:hover {
    background-color: #d32f2f !important;
    border-color: #d32f2f !important;
}

body.dark-version .modal-fullscreen-custom .btn-primary {
    background-color: #0f734f !important;
    border-color: #0f734f !important;
    color: #ffffff !important;
}

body.dark-version .modal-fullscreen-custom .btn-primary:hover {
    background-color: #0d5c3f !important;
    border-color: #0d5c3f !important;
}

/* ===== BADGES EN MODAL ===== */
body.dark-version .modal-fullscreen-custom .badge {
    background-color: #344767 !important;
    color: #ffffff !important;
}

/* ===== COLORES SEMÁNTICOS ===== */
body.dark-version .modal-fullscreen-custom .text-warning {
    color: #fb8c00 !important;
}

body.dark-version .modal-fullscreen-custom .text-success {
    color: #4caf50 !important;
}

body.dark-version .modal-fullscreen-custom .text-danger {
    color: #f44335 !important;
}

body.dark-version .modal-fullscreen-custom .text-primary {
    color: #0f734f !important;
}

/* ===== SKELETONS EN MODAL ===== */
body.dark-version .modal-fullscreen-custom .skeleton-box {
    background-color: #2d3e5b !important;
}

body.dark-version .modal-fullscreen-custom .skeleton-box::after {
    background: linear-gradient(90deg, #344767 25%, #2d3e5b 50%, #344767 75%) !important;
}

body.dark-version .loading-table-state td::after, 
body.dark-version .loading-summary-state td::after,
body.dark-version .loading-summary-state .skeleton-box::after {
    background: linear-gradient(90deg, #344767 25%, #2d3e5b 50%, #344767 75%);
    background-size: 200% 100%;
}

body.dark-version .checkbox-classic {
    background-color: transparent !important;
}

/* =========================================
   SOPORTE DARK MODE PARA FOOTERS NATIVOS
   ========================================= */

/* Para el modal-footer nativo de Bootstrap dentro del fullscreen */
body.dark-version .modal-fullscreen-custom .modal-footer,
body.dark-version .modal-fullscreen-custom .card-footer {
    background-color: #202940 !important;
}

/* Si quieres que los textos dentro del footer también se adapten */
body.dark-version .modal-fullscreen-custom .modal-footer *,
body.dark-version .modal-fullscreen-custom .card-footer * {
    color: #ffffff;
}

/* Asegurar que los botones transparentes o outline se vean bien */
body.dark-version .btn-outline-secondary {
    color: #a0aec0;
    border-color: #a0aec0;
}
body.dark-version .btn-outline-secondary:hover {
    background-color: #a0aec0;
    color: #fff;
}

/* =========================================
   DELTAS FALTANTES DARK MODE
   ========================================= */

/* Estilos inline hardcoded #ffffff / #f8f9fa / #e9ecef / #e0e0e0 */
body.dark-version .modal-fullscreen-custom [style*="background-color: #ffffff"],
body.dark-version .modal-fullscreen-custom [style*="background-color:#ffffff"],
body.dark-version .modal-fullscreen-custom [style*="background-color: #fff"],
body.dark-version .modal-fullscreen-custom [style*="background-color:#fff"] {
    background-color: #202940 !important;
}
body.dark-version .modal-fullscreen-custom [style*="background-color: #f8f9fa"],
body.dark-version .modal-fullscreen-custom [style*="background-color:#f8f9fa"] {
    background-color: #1a2035 !important;
}
body.dark-version .modal-fullscreen-custom [style*="background-color: #e9ecef"],
body.dark-version .modal-fullscreen-custom [style*="background-color:#e9ecef"] {
    background-color: #1a2035 !important;
}
body.dark-version .modal-fullscreen-custom [style*="border-color: #e0e0e0"] {
    border-color: #344767 !important;
}
/* Utilidades bg / border */
body.dark-version .modal-fullscreen-custom .bg-light,
body.dark-version .modal-fullscreen-custom .bg-white {
    background-color: #1a2035 !important;
    color: #ffffff !important;
}
body.dark-version .modal-fullscreen-custom .border-light,
body.dark-version .modal-fullscreen-custom .border-top,
body.dark-version .modal-fullscreen-custom .border-bottom,
body.dark-version .modal-fullscreen-custom .border-1 {
    border-color: #344767 !important;
}
body.dark-version .modal-fullscreen-custom .table-light {
    background-color: #1a2035 !important;
    color: #ffffff !important;
}
body.dark-version .modal-fullscreen-custom .table-light > * {
    background-color: transparent !important;
    color: #ffffff !important;
}
/* Skeleton shimmer para elementos sin .skeleton-box (usan bg-light plano) */
body.dark-version .modal-fullscreen-custom .loading-summary-state .bg-light {
    background-color: #2d3e5b !important;
}
/* Headers con opacity: .6 → subir en dark */
body.dark-version .modal-fullscreen-custom [style*="opacity: .6"],
body.dark-version .modal-fullscreen-custom [style*="opacity:.6"],
body.dark-version .modal-fullscreen-custom [style*="opacity: 0.6"],
body.dark-version .modal-fullscreen-custom [style*="opacity:0.6"] {
    opacity: .85 !important;
}
/* Opacidades 0.35 (labels PRODUCTOS EXTRA / PAQUETES atenuados) */
body.dark-version .modal-fullscreen-custom [style*="opacity: 0.35"],
body.dark-version .modal-fullscreen-custom [style*="opacity:0.35"] {
    opacity: .6 !important;
}
/* Radios nativos SI/No estilo chip */
body.dark-version .modal-fullscreen-custom .form-check-input[type="radio"] {
    background-color: #202940 !important;
    border-color: #344767 !important;
}
body.dark-version .modal-fullscreen-custom .form-check-input[type="radio"]:checked {
    background-color: #00a782 !important;
    border-color: #00a782 !important;
}
body.dark-version .modal-fullscreen-custom .form-check-input[type="radio"]:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 167, 130, 0.25) !important;
}
body.dark-version .modal-fullscreen-custom .form-check-label {
    color: #ffffff !important;
}
/* Textarea */
body.dark-version .modal-fullscreen-custom textarea.form-control {
    background-color: #202940 !important;
    color: #ffffff !important;
    border-color: #344767 !important;
}
/* Select nativo */
body.dark-version .modal-fullscreen-custom select.form-control {
    background-color: #202940 !important;
    color: #ffffff !important;
    border-color: #344767 !important;
}
body.dark-version .modal-fullscreen-custom select.form-control option {
    background-color: #202940 !important;
    color: #ffffff !important;
}
/* Sticky Resumen */
body.dark-version .modal-fullscreen-custom .sticky-top {
    background-color: #202940 !important;
}
/* Card-header bg-white / bg-light específicos del resumen */
body.dark-version .modal-fullscreen-custom .card-header.bg-white,
body.dark-version .modal-fullscreen-custom .card-header.bg-light,
body.dark-version .modal-fullscreen-custom .card-footer.bg-transparent {
    background-color: #1a2035 !important;
    border-color: #344767 !important;
}
/* Shadow-sm en dark se pierde, dar un borde sutil */
body.dark-version .modal-fullscreen-custom .shadow-sm {
    box-shadow: 0 0 0 1px #344767 !important;
}
/* Input-group-text ($ de Costo Total) */
body.dark-version .modal-fullscreen-custom .input-group-text {
    background-color: transparent !important;
    color: #ffffff !important;
    border-color: #344767 !important;
}
/* Banner .text-secondary y su ícono */
body.dark-version .modal-fullscreen-custom .text-secondary,
body.dark-version .modal-fullscreen-custom .text-secondary .material-icons {
    color: #a0aec0 !important;
}

body.dark-version .modal-fullscreen-custom *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.dark-version .modal-fullscreen-custom *::-webkit-scrollbar-track {
    background: #202940;
}
body.dark-version .modal-fullscreen-custom *::-webkit-scrollbar-thumb {
    background: #344767;
    border-radius: 4px;
}
body.dark-version .modal-fullscreen-custom *::-webkit-scrollbar-thumb:hover {
    background: #4b628a;
}