/* === PERSONALIZACIONES CUSTOM === */

/* ===============================
   1. Ajustes para modales en móviles
   =============================== */
@media (max-width: 992px) {
    .modal-body {
        background: transparent !important; /* Quitar fondo blanco */
    }
}

/* ===============================
   2. Banner del header
   =============================== */
.header-middle .adds1 img {
    width: 100%;
    max-height: 240px;     /* altura razonable */
    object-fit: contain;   /* mantiene proporción */
}

/* ===============================
   3. Ajustes de títulos en modales
   =============================== */
.modal-header {
    display: flex;
    align-items: flex-start;   /* título arriba */
    justify-content: space-between;
    position: relative;        /* para ubicar la X */
}

.modal-title {
    flex: 1;                        /* ocupa todo el ancho disponible */
    white-space: normal !important; /* permite salto de línea */
    word-break: break-word;         /* corta si es muy largo */
    font-size: 16px;                /* tamaño ajustado */
    line-height: 1.3;               /* espacio entre líneas */
    padding-right: 30px;            /* espacio para la X */
}

.modal-header .close {
    position: absolute;
    right: 15px;
    top: 15px;
}

/* ===============================
   4. Animación para "En proceso"
   =============================== */

/* Celda base: oculta el texto "En proceso" */
td.loading-cell {
    font-size: 0;               /* oculta texto */
    display: flex;              
    align-items: center;        /* centrado vertical */
    justify-content: flex-start;/* barra alineada a la izquierda */
    height: 100%;               
    padding-left: 5px;          /* margen desde el borde */
}

/* Barra azul animada dentro de la celda */
td.loading-cell::before {
    content: "";
    display: block;
    height: 20px;                /* grosor de la barra */
    width: 200px;                /* largo total */
    background: 
        linear-gradient(
            90deg,
            #0072ff 0%,
            #4facfe 20%,
            #0072ff 40%,
            #4facfe 60%,
            #0072ff 75%,
            #ffffff 75%,  /* tramo final en blanco fijo (25%) */
            #ffffff 100%
        );
    background-size: 250% 100%; /* relleno se mueve en bucle */
    border-radius: 12px;
    animation: move-fill-3q 3s linear infinite;
}

/* Animación: movimiento infinito dentro del 75% inicial */
@keyframes move-fill-3q {
    0%   { background-position: 200% 0; }
    100% { background-position: 0 0; }
}