/* ======================================================
    Base (cualquier alto): main fluye, scrollea si excede
   ========================================================= */
main.main-fixed {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
main.main-fixed > .navbar,
main.main-fixed > nav {
    flex: 0 0 auto;
}
.raiz-fija {
    min-height: 100dvh;
    min-height: 100svh;
}
.async-hide {
    opacity: 0 !important
}

/* ======================================================
   Estilos de Sesión expirada
   ========================================================= */
#session-expired-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .2s ease;
}
#session-expired-overlay .session-expired-card {
    background: #fff;
    border-radius: .75rem;
    width: 90%;
    max-width: 380px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
#session-expired-overlay .session-expired-header {
    background: linear-gradient(195deg, #0f734f 0%, #0a5c3f 100%);
    padding: 1rem;
    text-align: center;
}
#session-expired-overlay .session-expired-header h4 {
    color: #fff;
    font-weight: 700;
    margin: 0;
}
#session-expired-overlay .session-expired-body {
    padding: 2rem 1rem;
    text-align: center;
}
#session-expired-overlay .session-expired-body h5 {
    margin: 1rem 0 .5rem;
}
#session-expired-overlay .session-expired-body p {
    font-size: .875rem;
    color: #67748e;
    margin-bottom: 1.5rem;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =========================================================
   MODAL DE SESIÓN EXPIRADA (MODO OSCURO — CORREGIDO)
   ========================================================= */
body.dark-version #session-expired-overlay {
    background-color: rgba(15, 23, 42, 0.9) !important; /* Fondo translúcido oscuro */
}
/* Forzamos el ID completo para ganarle al estilo claro */
body.dark-version #session-expired-overlay .session-expired-card {
    background-color: #1f283e !important; 
    background: #1f283e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}
body.dark-version #session-expired-overlay .session-expired-header {
    background: linear-gradient(195deg, #0f734f, #084c33) !important; /* Verde oscuro */
}
body.dark-version #session-expired-overlay .session-expired-body h5 {
    color: #ffffff !important;
}
body.dark-version #session-expired-overlay .session-expired-body p {
    color: #a0aec0 !important; /* Gris claro suave para lectura */
}
body.dark-version #session-expired-overlay .session-expired-body .sync-icon {
    color: #ffb74d !important; /* Naranja brillante en la oscuridad */
}
body.dark-version #session-expired-overlay .session-expired-body .custom-spinner {
    color: #4caf50 !important; /* Spinner verde Material */
    border-color: currentColor;
    border-right-color: transparent;
}


/* =========================================================
   MODAL DE SESIÓN EXPIRADA (MODO OSCURO)
   ========================================================= */
body.dark-version #session-expired-overlay {
    background-color: rgba(15, 23, 42, 0.85); /* Azul marino transparente */
}
body.dark-version .session-expired-card {
    background: #1f283e; /* Fondo oscuro de tarjeta */
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
body.dark-version .session-expired-header {
    background: linear-gradient(195deg, #0f734f, #084c33); /* Verde adaptado a la oscuridad */
}
body.dark-version .session-expired-body h5 {
    color: #ffffff;
}
body.dark-version .session-expired-body p {
    color: #a0aec0; /* Gris claro para lectura cómoda */
}
body.dark-version .session-expired-body .sync-icon {
    color: #ffb74d; /* Naranja un poco más claro para brillar en fondo oscuro */
}
body.dark-version .session-expired-body .custom-spinner {
    color: #4caf50; /* Verde material claro para contrastar */
}

/* ======================================================
   Imagen fija de marca
   ========================================================= */
/* El wrapper entre body y main: ancla de posicionamiento */
.raiz-fija {
    position: relative;
}
/* Marca de agua como capa fija detrás del contenido (no es scroll-container, no captura gestos) */
.raiz-fija::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;               
    z-index: 0;
    pointer-events: none;
    background-image: url('/material/img/logos/BA_Mich_Horizontal_Gradiente_Grande.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 84vw auto;
}
/* main por encima de la marca, y transparente para dejarla ver */
.raiz-fija > main {
    position: relative;
    z-index: 1;
    background: transparent;   /* sin background-image aquí */
}
/* ===== Modo Oscuro ===== */
body.dark-version .main-content {
    background-color: transparent !important;
}
body.dark-version .raiz-fija::before {
    background-color: #1a2035;
}
.dark-version .card, .dark-version .dropdown .dropdown-menu, .dark-version .kanban-board, .dark-version .swal2-popup {
    background-color: rgba(32, 41, 64, 0.94) !important;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.blur {
    box-shadow: inset 0 0 2px #fefefed1;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: hsla(0, 0%, 96%, 0.94) !important;
}
.shadow-blur {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06) !important;
}
/* Desktop: el sidenav ocupa la izquierda → desplazar el inicio de la capa */
@media (min-width: 1200px) {
    /* DEFAULT: estado inicial (sin clase) y expandido (pinned) → menú ancho */
    .raiz-fija::before {
        left: 250px;
    }
    /* Solo cuando se colapsa, la marca cubre todo el ancho */
    body.g-sidenav-hidden .raiz-fija::before {
        left: 0;
    }
}
@media screen and (max-width: 768px) {
    .raiz-fija::before {
        background-image: url('/material/img/logos/BA_Mich_Vertical_Gradiente_Grande.png');
    }
    #footer {
        margin-bottom: 20px;
    }
}
/* CANDADO VERTICAL: solo con alto >= 900px (desktop) */
@media (min-height: 900px) and (min-width: 1024px) {
    .raiz-fija {
        height: 100svh;
        min-height: 0;
    }
    main.main-fixed {
        overflow: hidden;
    }
    main.main-fixed > .container-fluid.pantalla-fija,
    main.main-fixed > .container-fluid.pantalla-fija > .row,
    main.main-fixed > .container-fluid.pantalla-fija > .row > .container-fluid,
    main.main-fixed > .container-fluid.pantalla-fija > .row > .container-fluid > .row {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
}

/* =========================================================
   DARK MODE — Inputs underline (input-group-static/dynamic) Global a todo el sistema.
   ========================================================= */
body.dark-version .input-group-static .form-control,
body.dark-version .input-group-dynamic .form-control {
    color: rgba(255, 255, 255, 0.8) !important;
}
/* Placeholder más tenue pero legible */
body.dark-version .input-group-static .form-control::placeholder,
body.dark-version .input-group-dynamic .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}
/* Línea inferior (border-bottom) del input underline */
body.dark-version .input-group-static .form-control,
body.dark-version .input-group-static.is-focused .form-control {
    border-bottom-color: rgba(255, 255, 255, 0.35) !important;
}
/* Labels de los grupos */
body.dark-version .input-group-static label,
body.dark-version .input-group-dynamic label,
body.dark-version .modal-content .form-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* =========================================================
   DARK MODE — Flatpickr (se monta en <body>, fuera del modal) Global a todo el sistema.
   ========================================================= */
body.dark-version .flatpickr-calendar {
    background: #202940 !important;
    box-shadow: 0 3px 13px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #344767 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
/* Flecha/triángulo del popover */
body.dark-version .flatpickr-calendar.arrowTop::before,
body.dark-version .flatpickr-calendar.arrowTop::after {
    border-bottom-color: #202940 !important;
}
body.dark-version .flatpickr-calendar.arrowBottom::before,
body.dark-version .flatpickr-calendar.arrowBottom::after {
    border-top-color: #202940 !important;
}
/* Header: mes, año, flechas */
body.dark-version .flatpickr-months,
body.dark-version .flatpickr-month,
body.dark-version .flatpickr-current-month,
body.dark-version .flatpickr-current-month .cur-month {
    color: rgba(255, 255, 255, 0.9) !important;
    fill: rgba(255, 255, 255, 0.9) !important;
}
body.dark-version .flatpickr-current-month .numInputWrapper input.cur-year {
    color: rgba(255, 255, 255, 0.9) !important;
}
body.dark-version .flatpickr-prev-month svg,
body.dark-version .flatpickr-next-month svg {
    fill: rgba(255, 255, 255, 0.9) !important;
}
body.dark-version .flatpickr-prev-month:hover svg,
body.dark-version .flatpickr-next-month:hover svg {
    fill: #5e72e4 !important;
}
/* Días de la semana (Lu Ma Mi...) */
body.dark-version .flatpickr-weekday {
    color: rgba(255, 255, 255, 0.55) !important;
}
/* Días del mes */
body.dark-version .flatpickr-day {
    color: rgba(255, 255, 255, 0.85) !important;
}
body.dark-version .flatpickr-day:hover,
body.dark-version .flatpickr-day.prevMonthDay:hover,
body.dark-version .flatpickr-day.nextMonthDay:hover {
    background: #344767 !important;
    border-color: #344767 !important;
}
/* Días de otros meses (atenuados) */
body.dark-version .flatpickr-day.prevMonthDay,
body.dark-version .flatpickr-day.nextMonthDay,
body.dark-version .flatpickr-day.flatpickr-disabled {
    color: rgba(255, 255, 255, 0.3) !important;
}
/* Día seleccionado y extremos del rango — color principal del sistema */
body.dark-version .flatpickr-day.selected,
body.dark-version .flatpickr-day.startRange,
body.dark-version .flatpickr-day.endRange,
body.dark-version .flatpickr-day.selected:hover,
body.dark-version .flatpickr-day.startRange:hover,
body.dark-version .flatpickr-day.endRange:hover {
    background: #00a782 !important;
    border-color: #00a782 !important;
    color: #fff !important;
}
/* Día de hoy */
body.dark-version .flatpickr-day.today {
    border-color: #00a782 !important;
}
body.dark-version .flatpickr-day.today:hover {
    background: #00a782 !important;
    border-color: #00a782 !important;
    color: #fff !important;
}
/* Rango intermedio (entre inicio y fin) — verde tenue para que se note el desplazamiento */
body.dark-version .flatpickr-day.inRange {
    background: rgba(0, 167, 130, 0.25) !important;
    border-color: rgba(0, 167, 130, 0.25) !important;
    box-shadow: -5px 0 0 rgba(0, 167, 130, 0.25), 5px 0 0 rgba(0, 167, 130, 0.25) !important;
}
/* Timepicker dark */
body.dark-version .flatpickr-time {
    background: #202940 !important;
    border-top: 1px solid #344767 !important;
    height: 40px !important;
}
body.dark-version .flatpickr-time .numInputWrapper:hover,
body.dark-version .flatpickr-time .flatpickr-am-pm:hover {
    background: #344767 !important;
}
body.dark-version .flatpickr-time input.numInput,
body.dark-version .flatpickr-time .flatpickr-am-pm {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
body.dark-version .flatpickr-time input.numInput:focus {
    background: #344767 !important;
}
body.dark-version .flatpickr-time .flatpickr-time-separator {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
body.dark-version .flatpickr-time .arrowUp:after {
    border-bottom-color: rgba(255, 255, 255, 0.5) !important;
}
body.dark-version .flatpickr-time .arrowDown:after {
    border-top-color: rgba(255, 255, 255, 0.5) !important;
}
body.dark-version .flatpickr-time .arrowUp:hover:after {
    border-bottom-color: #00a782 !important;
}
body.dark-version .flatpickr-time .arrowDown:hover:after {
    border-top-color: #00a782 !important;
}

/* =========================================================
   MODALES
   ========================================================= */
/* Sin animación de entrada/salida en modales (global) Empareja el comportamiento con los modales de Livewire. */
.modal.fade .modal-dialog,
.modal.fade.show .modal-dialog,
.modal.fade .modal-dialog-centered,
.modal.fade.show .modal-dialog-centered {
    transition: none !important;
    transform: none !important;
}
.modal.fade {
    transition: none !important;
}

/* =========================================================
   Bloqueo de scroll de fondo cuando hay un modal abierto
   (modales con clase manual no añaden .modal-open al body, por eso se bloquea vía :has().
   Cubre modales Bootstrap (.modal.show) y modales custom fullscreen (.modal-overlay-custom).
   Global a todo el sistema.)
   ========================================================= */
html:has(.modal.show), body:has(.modal.show),
html:has(.modal-overlay-custom), body:has(.modal-overlay-custom) {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
}
body:has(.modal.show) .main-content,
body:has(.modal-overlay-custom) .main-content {
    overflow: hidden !important;
    touch-action: none;
}
body:has(.modal.show) .modal.show,
body:has(.modal.show) .modal.show .modal-body,
body:has(.modal.show) .modal.show .card-footer,
body:has(.modal-overlay-custom) .modal-overlay-custom,
body:has(.modal-overlay-custom) .modal-overlay-custom .modal-body-custom,
body:has(.modal-overlay-custom) .modal-overlay-custom .card-footer {
    touch-action: auto;
    overscroll-behavior: contain;
}

/* ====================================================
   Fix global de stacking context para modales
   ==================================================== */
.main-content.main-fixed {
    z-index: auto;
}
body.dark-version .modal-content { background-color: #1a2035; }
body.dark-version .modal-content .text-dark { color: #e0e0e0 !important; }
body.dark-version .modal-content .text-muted { color: #a0aec0 !important; }
body.dark-version .modal-content .card-footer { background-color: #1a2035 !important; }

/* =========================================================
   MODALES <768px — Pantalla completa con altura dinámica
   Ocupa todo el alto del dispositivo (dvh: respeta barra de Safari abierta/cerrada sin mermar). 
   Header arriba y footer abajo fijos con respiro; el body llena el centro y scrollea solo si el contenido excede. 
   Global. Respeta clases Bootstrap.
   ========================================================= */
@media screen and (max-width: 768px) {
    /* Contenedor full-height con safe-area de iOS (notch + home indicator) */
    .modal.fade.show {
        height: 100dvh !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        padding: calc(0.75rem + env(safe-area-inset-top, 0px))
                 calc(0.75rem + env(safe-area-inset-right, 0px))
                 calc(0.75rem + env(safe-area-inset-bottom, 0px))
                 calc(0.75rem + env(safe-area-inset-left, 0px)) !important;
        overflow: hidden !important;
        padding-top: 2rem !important;
        padding-bottom: 2.50rem !important;
    }
    /* Dialog: llena todo el alto disponible dentro del padding */
    .modal.fade.show .modal-dialog,
    .modal.fade.show .modal-dialog-centered {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: 0 !important;
        display: flex !important;
        align-items: stretch !important;
    }
    /* Content: tarjeta full-height. overflow visible para que el header
       verde pueda sobresalir por arriba (efecto flotante mt-n4). */
    .modal.fade.show .modal-content {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        border-radius: 1rem !important;
        box-shadow: 0 20px 60px rgba(0,0,0,.4) !important;
    }
    /* Header: lo subimos por fuera del borde blanco y lo metemos a los lados,
       de modo que el verde flote sobre la tarjeta. Replica mt-n4 mx-3. */
    .modal.fade.show .modal-header {
        flex: 0 0 auto !important;
        margin: -1.25rem 0.75rem 0 0.75rem !important;  /* sube el verde fuera del blanco + respiro lateral */
        padding: 0 !important;
        overflow: visible !important;
        border-radius: 0 !important;
        /* background: rgba(0, 0, 0, 0.5); */
        z-index: 2 !important;
    }
    .modal.fade.show .modal-header .modal-title {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0.75rem !important;   /* caja flotante: 4 esquinas */
    }
    /* Footer fijo abajo, esquinas inferiores redondeadas */
    .modal.fade.show .card-footer {
        flex: 0 0 auto !important;
        border-bottom-left-radius: 1rem !important;
        border-bottom-right-radius: 1rem !important;
    }
    /* Body: ocupa el centro y scrollea SOLO si el contenido excede */
    .modal.fade.show .modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .modal-backdrop {
        visibility: visible !important;
        position: fixed !important;
        /* Extiende el backdrop MÁS ALLÁ del área segura hacia los bordes físicos */
        top: calc(-1 * env(safe-area-inset-top, 0px)) !important;
        bottom: calc(-1 * env(safe-area-inset-bottom, 0px)) !important;
        left: calc(-1 * env(safe-area-inset-left, 0px)) !important;
        right: calc(-1 * env(safe-area-inset-right, 0px)) !important;
        width: auto !important;
        height: auto !important;
        background-color: #000 !important;
        opacity: 0.5 !important;
        z-index: 1090 !important;   /* debajo del modal (1100), encima del contenido */
    }
}

/* =========================================================
   MODAL FULL-SCREEN SIEMPRE — clase .modal-full-screen
   Espejo EXACTO del bloque móvil de arriba, pero SIN media query: aplica en TODOS los anchos (móvil y escritorio). 
   Para modales que deben ocupar toda la pantalla siempre (ej. calendario), reutilizando la misma lógica que ya tienen los modales en <768px. 
   Centralizado: un modal solo necesita la clase .modal-full-screen en su contenedor .modal para comportarse full-screen en cualquier resolución.
   ========================================================= */
.modal.fade.show.modal-full-screen {
    height: 100dvh !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: calc(0.75rem + env(safe-area-inset-top, 0px))
             calc(0.75rem + env(safe-area-inset-right, 0px))
             calc(0.75rem + env(safe-area-inset-bottom, 0px))
             calc(0.75rem + env(safe-area-inset-left, 0px)) !important;
    overflow: hidden !important;
    padding-top: 3rem !important;
    padding-bottom: 1.45rem !important;
}
.modal.fade.show.modal-full-screen .modal-dialog,
.modal.fade.show.modal-full-screen .modal-dialog-centered {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}
.modal.fade.show.modal-full-screen .modal-content {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    border-radius: 1rem !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.4) !important;
}
.modal.fade.show.modal-full-screen .modal-header {
    flex: 0 0 auto !important;
    margin: -1.25rem 0.75rem 0 0.75rem !important;  /* sube el header fuera del blanco + respiro lateral */
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    z-index: 2 !important;
}
.modal.fade.show.modal-full-screen .modal-header .modal-title {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0.75rem !important;   /* caja flotante: 4 esquinas */
}
.modal.fade.show.modal-full-screen .card-footer {
    flex: 0 0 auto !important;
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}
.modal.fade.show.modal-full-screen .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
/* Cuando hay un modal full-screen abierto, el sidenav baja su z-index para no asomarse por las zonas del velo. 
   Al cerrarse el modal (sale del DOM), :has() deja de aplicar y el sidenav recupera su 1040 original. */
body:has(.modal.show.modal-full-screen) .sidenav {
    z-index: 1 !important;
}
/* Un modal normal (no full-screen) siempre va por encima del calendario full-screen (z-index 1100). 
   Cubre el caso de abrir el detalle de un evento desde dentro del calendario. 
   Sin lógica particular: aplica a cualquier modal Livewire que coexista con un full-screen. */
.modal.fade.show:not(.modal-full-screen) {
    z-index: 1110 !important;
}
@media screen and (max-width: 767px) {
    .modal.fade.show.modal-full-screen {
        padding-top: 2rem !important;
        padding-bottom: 2.50rem !important;
    }
}

/* =========================================================
   PWA iOS standalone — Modal bajo el notch / isla dinámica
   No afecta navegador ni escritorio.
   ========================================================= */
@media screen and (max-width: 768px) {
    html.pwa-standalone .modal.fade.show {
        padding-top: calc(2rem + env(safe-area-inset-top, 0px)) !important;
        background: #1a1a1a !important;
    }
    /* modal-full-screen: mismo ajuste PWA en TODOS los anchos */
    html.pwa-standalone .modal.fade.show.modal-full-screen {
        padding-top: calc(2rem + env(safe-area-inset-top, 0px)) !important;
    }
}

/* =========================================================
   Safari iOS (NO PWA) — Capa opaca que tapa TODO el contenido (NO afecta PWA)
   El background del body no basta: la tabla se pinta encima y asoma tras la barra. 
   Usamos un ::before fijo, opaco y sobredimensionado que cubre el viewport físico completo, por encima del contenido y por debajo del modal. 
   ========================================================= */
@media screen and (max-width: 768px) {
    html:not(.pwa-standalone) body:has(.modal.show)::before,
    html:not(.pwa-standalone) body:has(.modal-overlay-custom)::before {
        content: "" !important;
        position: fixed !important;
        top: -10vh !important;
        left: -10vw !important;
        right: -10vw !important;
        bottom: -10vh !important;
        width: 120vw !important;
        height: 120vh !important;
        background-color: #1a1a1a !important;   /* opaco: tapa la tabla */
        z-index: 1040 !important;                /* encima del contenido, debajo del modal (1050+) */
        pointer-events: none !important;
    }
    /* El modal debe quedar POR ENCIMA de la capa */
    html:not(.pwa-standalone) .modal.fade.show {
        background: transparent !important;
        z-index: 1100 !important;
    }
    /* Solo Safari iOS (no PWA): quita el padding-bottom extra.
       Android/tablet/escritorio conservan su 2.50rem general. */
    html.is-ios:not(.pwa-standalone) .modal.fade.show {
        padding-bottom: 0.75rem !important;
    }
    /* Sin backdrop nativo (la capa ::before lo reemplaza) */
    html:not(.pwa-standalone) .modal-backdrop {
        display: none !important;
    }
    /* El body ya no necesita el background (lo da el ::before) */
    html:not(.pwa-standalone) body:has(.modal.show) {
        background-color: #1a1a1a !important;   /* respaldo por si el ::before no cubre algún píxel */
    }
    /* El modal full-screen queda en 1100, encima de la capa */
    html:not(.pwa-standalone) .modal.fade.show {
        background: transparent !important;
        z-index: 1100 !important;
    }
    /* Un modal normal (detalle) abierto sobre el calendario full-screen
       debe quedar por encima de él también en Safari móvil */
    html:not(.pwa-standalone) body:has(.modal.show.modal-full-screen) .modal.fade.show:not(.modal-full-screen) {
        z-index: 1110 !important;
    }
}

/* Safari iOS (NO PWA) — mismo tratamiento para modal-full-screen en TODOS los anchos. 
   Condicionado a :has(.modal.show.modal-full-screen) para no afectar modales normales en escritorio (que no deben oscurecerse). */
html:not(.pwa-standalone) body:has(.modal.show.modal-full-screen)::before {
    content: "" !important;
    position: fixed !important;
    top: -10vh !important;
    left: -10vw !important;
    right: -10vw !important;
    bottom: -10vh !important;
    width: 120vw !important;
    height: 120vh !important;
    background-color: #1a1a1a !important;
    z-index: 1040 !important;
    pointer-events: none !important;
}
html:not(.pwa-standalone) .modal.fade.show.modal-full-screen {
    background: transparent !important;
    z-index: 1100 !important;
}
html.is-ios:not(.pwa-standalone) .modal.fade.show.modal-full-screen {
    padding-bottom: 0.75rem !important;
}
html:not(.pwa-standalone) body:has(.modal.show.modal-full-screen) .modal-backdrop {
    display: none !important;
}
html:not(.pwa-standalone) body:has(.modal.show.modal-full-screen) {
    background-color: #1a1a1a !important;
}

/* =========================================================
   DARK MODE — Recuadros .bg-light dentro de modales
   Mantiene el contraste (caja diferenciada del fondo del modal) en lugar de quedar casi blanca. Global a todo el sistema.
   ========================================================= */
body.dark-version .modal-content .bg-light {
    background-color: #2c3654 !important;
}
body.dark-version .modal-content .bg-light .text-muted,
body.dark-version .modal-content .bg-light small {
    color: rgba(255, 255, 255, 0.75) !important;
}
body.dark-version .modal-content .bg-light strong {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* =========================================================
   TOASTS EN DARK MODE (tall-toasts / WireToast)
   ========================================================= */
/* ----- Contenedor del toast ----- */
body.dark-version .bg-white.rounded-3.shadow-lg {
    background-color: #202940 !important;
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.4) !important;
}
/* Anular el hover blanco que el JS inline fuerza (#f9fafb / #ffffff) */
body.dark-version .bg-white.rounded-3.shadow-lg[onmouseover] {
    background-color: #202940 !important;
}
/* ----- Textos ----- */
/* Título */
body.dark-version .bg-white.rounded-3.shadow-lg .text-dark {
    color: #ffffff !important;
}
/* Mensaje */
body.dark-version .bg-white.rounded-3.shadow-lg .text-secondary {
    color: #a0aec0 !important;
}
/* ----- Botón cerrar (X) ----- */
body.dark-version .bg-white.rounded-3.shadow-lg .btn-link.text-secondary {
    color: #a0aec0 !important;
}
/* Hover del botón cerrar (el inline lo pone en #f3f4f6) */
body.dark-version .bg-white.rounded-3.shadow-lg .btn-link.text-secondary:hover {
    background-color: #2d3e5b !important;
    color: #ffffff !important;
    border-radius: 6px !important;
}
/* ----- Iconos semánticos dentro del toast (por si usan text-*) ----- */
body.dark-version .bg-white.rounded-3.shadow-lg .text-success { color: #4caf50 !important; }
body.dark-version .bg-white.rounded-3.shadow-lg .text-danger  { color: #f44335 !important; }
body.dark-version .bg-white.rounded-3.shadow-lg .text-warning { color: #fb8c00 !important; }
body.dark-version .bg-white.rounded-3.shadow-lg .text-info    { color: #3b82f6 !important; }

/* =========================================================
   DROPZONE MULTI-FILE EN DARK MODE
   ========================================================= */
body.dark-version .dropzone-compact {
    border-color: #344767 !important;
}
body.dark-version .dropzone-compact:hover {
    border-color: #4b628a !important;
    background: rgba(15, 115, 79, 0.12);
}
/* Caja del icono (cambia bg-light claro por uno oscuro) */
body.dark-version .dropzone-compact .bg-light {
    background-color: #2d3e5b !important;
}
/* Icono cloud_upload legible */
body.dark-version .dropzone-compact .material-icons.text-secondary {
    color: #a0aec0 !important;
}
/* Textos de la zona de carga */
body.dark-version .dropzone-compact p { color: #ffffff !important; }
body.dark-version .dropzone-compact .text-muted { color: #8c9db8 !important; }
body.dark-version .dropzone-compact .text-primary { color: #4caf50 !important; }

/* ===== Tarjeta con archivos cargados en dark mode ===== */
body.dark-version .file-uploaded {
    background-color: #202940 !important;
}
body.dark-version .border.rounded p { color: #ffffff !important; }
body.dark-version .border.rounded .text-muted { color: #8c9db8 !important; }
/* Borde de las tarjetas de archivo */
body.dark-version .border.rounded,
body.dark-version .border.border-dashed {
    border-color: #344767 !important;
}
.justificante-card { background-color: #ffffff; }
body.dark-version .justificante-card {
    background-color: #202940 !important;
    border-color: #344767 !important;
}
body.dark-version .justificante-card p { color: #ffffff !important; }
body.dark-version .justificante-card .text-muted { color: #8c9db8 !important; }