/* ============================================================================
   INFORWEB — MODALES: compatibilidad móvil/tablet, paleta de marca y skeleton (02-oct-2026)
   ============================================================================
   Hoja para los modales de /Modals: SOLO aplica a los que llevan la clase marcadora "modal-app"
   (".modal.modal-app.d-block"), así los modales de las páginas (/Pages, /Components) NO se tocan. Se carga DESPUÉS de
   design-system.css. SOLO ASPECTO: nada aquí cambia lógica, eventos ni datos — únicamente
   tamaños, espaciados, colores y animaciones.

   Referencia visual: ModalAnticipos.razor (encabezado morado de marca #3B2356, encabezados de
   tabla azul teal #007CA3, fila seleccionada celeste #85CAE4, acento vino #8B2929).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SKELETON LOADING — reemplazo de los "spinners" de carga de bloque.
   Mismo nombre/animación que ya usaban ModalAlmacenes/Cajas/Cliente/Empresa/Proveedor/Articulo
   (definidos localmente en cada uno; esta definición global es la misma, así que no choca).
   -------------------------------------------------------------------------- */
@keyframes skeleton-shimmer {
    0% { background-position: -450px 0; }
    100% { background-position: 450px 0; }
}

.skeleton-block {
    background: linear-gradient(90deg, #eceff3 25%, #f8f9fb 37%, #eceff3 63%);
    background-size: 900px 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    display: block;
}

/* Agrupa varias barras: queda como bloque con separación uniforme */
.skeleton-stack {
    width: 100%;
    padding: 0.5rem 0.25rem;
}
.skeleton-stack .skeleton-block {
    height: 18px;
    margin-bottom: 8px;
}
.skeleton-stack .skeleton-block:last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-block { animation: none; }
}

/* --------------------------------------------------------------------------
   2. PALETA DE MARCA en los encabezados y tablas de los modales
   (los semánticos —danger/warning/success— se respetan: son avisos, no marca)
   -------------------------------------------------------------------------- */
.modal.modal-app.d-block .modal-header.bg-dark,
.modal.modal-app.d-block .modal-header.bg-primary,
.modal.modal-app.d-block .modal-header.bg-secondary,
.modal.modal-app.d-block .modal-header.bg-info,
.modal.modal-app.d-block .modal-header.bg-black {
    background-color: var(--brand-primary) !important;
    color: #ffffff !important;
    border-bottom: 2px solid var(--brand-secondary);
}

.modal.modal-app.d-block .modal-header.bg-dark .modal-title,
.modal.modal-app.d-block .modal-header.bg-primary .modal-title,
.modal.modal-app.d-block .modal-header.bg-secondary .modal-title,
.modal.modal-app.d-block .modal-header.bg-info .modal-title,
.modal.modal-app.d-block .modal-header.bg-black .modal-title,
.modal.modal-app.d-block .modal-header.bg-info .text-dark {
    color: #ffffff !important;
}

.modal.modal-app.d-block .modal-header.bg-dark .btn-close,
.modal.modal-app.d-block .modal-header.bg-primary .btn-close,
.modal.modal-app.d-block .modal-header.bg-secondary .btn-close,
.modal.modal-app.d-block .modal-header.bg-info .btn-close,
.modal.modal-app.d-block .modal-header.bg-black .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.85;
}

/* Encabezados de tabla de Bootstrap (los modales con encabezado propio ya usan este mismo teal) */
.modal.modal-app.d-block .table > thead.table-dark > tr > th,
.modal.modal-app.d-block .table > thead.table-info > tr > th,
.modal.modal-app.d-block .table > thead.table-primary > tr > th,
.modal.modal-app.d-block .table > thead.table-secondary > tr > th,
.modal.modal-app.d-block .table > thead.table-light > tr > th,
.modal.modal-app.d-block .table.table-dark > thead > tr > th {
    background-color: var(--brand-accent) !important;
    color: #ffffff !important;
    border-bottom: 2px solid var(--brand-primary) !important;
    vertical-align: middle;
}

/* Fila seleccionada / activa: celeste de marca */
.modal.modal-app.d-block .table > tbody > tr.table-primary > *,
.modal.modal-app.d-block .table > tbody > tr.table-info > *,
.modal.modal-app.d-block .table > tbody > tr.table-active > * {
    --bs-table-bg: var(--brand-accent-light);
    --bs-table-bg-state: var(--brand-accent-light);
    background-color: var(--brand-accent-light) !important;
    color: #000000 !important;
}

/* Botones "outline-primary" de Bootstrap traen el azul de plantilla fijo (no usan --bs-primary) */
.modal.modal-app.d-block .btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-disabled-color: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

/* Pestañas: azul de plantilla (#0d6efd) -> morado de marca */
.modal.modal-app.d-block .nav-tabs .nav-link:hover,
.modal.modal-app.d-block .nav-tabs .nav-link.active {
    color: var(--brand-primary) !important;
}
.modal.modal-app.d-block .nav-tabs .nav-link.active {
    border-top: 2px solid var(--brand-accent);
}

/* --------------------------------------------------------------------------
   2b. UBICACIÓN EN PANTALLA (todos los tamaños): nunca debajo del navbar fijo ni fuera de la
   pantalla
   - Capa: el navbar de MenuLayout vale z-index 1060 (MenuLayoutSC usa el 1030 de Bootstrap). Un
     .modal de Bootstrap vale 1055, así que sin z-index propio quedaba DEBAJO del navbar y su
     encabezado se escondía tras la barra. Se sube a 1065. Los modales que ya fijan un z-index
     propio mayor (10000, 10500...) no se tocan; los que fijaban 1050/1055/1060 se igualan a 1065.
   - Alto: la capa que contiene al diálogo mide el alto REAL visible (dvh = "dynamic viewport
     height", descuenta la barra de direcciones/navegación del celular, a diferencia de vh) y es
     la que hace scroll si el contenido es más alto: el modal nunca crece fuera de la pantalla ni
     hacia arriba (sin cuerpo con scroll propio, para no recortar listas desplegables/autocompletar
     que sobresalen del cuerpo del modal).
   - Ancho: el diálogo (width:auto de Bootstrap) no puede exceder la capa; la capa no hace scroll
     horizontal (los anchos fijos en px que hay en los modales ya llevan max-width en vw).
   -------------------------------------------------------------------------- */
.modal.modal-app.d-block {
    z-index: 1065;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;                           /* respaldo para navegadores sin dvh */
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Respeta la muesca/barra de gestos de iOS y los bordes en horizontal */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.modal.modal-app.d-block[style*="z-index: 1050"],
.modal.modal-app.d-block[style*="z-index:1050"],
.modal.modal-app.d-block[style*="z-index: 1055"],
.modal.modal-app.d-block[style*="z-index:1055"],
.modal.modal-app.d-block[style*="z-index: 1060"],
.modal.modal-app.d-block[style*="z-index:1060"] {
    z-index: 1065 !important;
}

/* --------------------------------------------------------------------------
   3. MÓVIL Y TABLET (hasta 991.98px): el modal ocupa casi toda la pantalla
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Diálogos "grandes" (lg/xl/de ancho propio): al ancho casi completo de la pantalla.
       Los diálogos chicos de confirmación conservan su ancho natural. */
    .modal.modal-app.d-block .modal-dialog.modal-lg,
    .modal.modal-app.d-block .modal-dialog.modal-xl,
    .modal.modal-app.d-block .modal-dialog[class*="modal-dialog-"]:not(.modal-dialog-centered):not(.modal-dialog-scrollable):not(.modal-dialog-fullscreen),
    .modal.modal-app.d-block .modal-dialog[style*="vw"],
    .modal.modal-app.d-block .modal-dialog[style*="%"] {
        max-width: calc(100vw - 8px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Pie con botones: que bajen a otra línea en vez de desbordar o encimarse */
    .modal.modal-app.d-block .modal-footer {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .modal.modal-app.d-block .modal-footer > * {
        margin: 0;
    }

    /* Encabezado: el título largo se recorta con puntos suspensivos y la X no se comprime */
    .modal.modal-app.d-block .modal-header .modal-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .modal.modal-app.d-block .modal-header .btn-close {
        flex-shrink: 0;
    }

    /* Imágenes y medios nunca más anchos que el modal */
    .modal.modal-app.d-block .modal-body img,
    .modal.modal-app.d-block .modal-body canvas,
    .modal.modal-app.d-block .modal-body video {
        max-width: 100%;
    }

}

/* --------------------------------------------------------------------------
   4. PANTALLAS TÁCTILES (celular y tablet, también tablet en horizontal): áreas de toque
   cómodas — solo aumentan tamaño de los controles, no su comportamiento
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
    .modal.modal-app.d-block .btn-close {
        box-sizing: content-box;
        width: 1em;
        height: 1em;
        padding: 0.6em;
    }
    .modal.modal-app.d-block .btn:not(.btn-close) {
        min-height: 38px;
    }
    .modal.modal-app.d-block .form-control,
    .modal.modal-app.d-block .form-select {
        min-height: 38px;
    }
    .modal.modal-app.d-block .form-check-input {
        width: 1.25em;
        height: 1.25em;
    }
    .modal.modal-app.d-block .nav-tabs .nav-link {
        min-height: 38px;
        display: flex;
        align-items: center;
    }
}