@media (max-width: 575.98px) {
    html,
    body {
        font-size: 0.95rem;
    }

    .container,
    .container-fluid,
    .main-panel,
    .content,
    .page-inner,
    .wrapper {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .row > .col-2,
    .row > .col-3,
    .row > .col-4,
    .row > .col-5,
    .row > .col-6,
    .row > .col-7,
    .row > .col-8,
    .row > .col-9,
    .row > .col-10,
    .row > .col-11 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    form .form-control,
    form .form-select,
    form input,
    form select,
    form textarea {
        width: 100% !important;
        max-width: 100% !important;
    }

    .table-responsive,
    .table-responsive-sm,
    .table-responsive-md,
    .contenedor_tablas,
    .contenedor_tablas1,
    .table_hermana,
    .container_scroll,
    .overflow-auto,
    .table-scroll-mobile {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 42rem;
    }

    /* Tablas dentro de seccion-borde-div no deben tener min-width fijo
       porque el div ya tiene overflow-x:hidden — se scrollean vía .table-scroll-auto */
    .seccion-borde-div table {
        min-width: 0;
    }

    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }

    .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    .container-responsive {
        width: 100%;
        max-width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .d-mobile-hide {
        display: none !important;
    }

    .d-mobile-show {
        display: block !important;
    }

    /* ---- seccion-borde-div responsive (móvil) ---- */
    .seccion-borde-div {
        padding: 0 0.6rem 0.75rem !important;
        padding-top: 0 !important;
        /* clip recorta visualmente sin crear contexto de scroll,
           así los botones globales siguen detectando el overflow de las tablas */
        overflow-x: clip;
    }

    /* Sacar el título del posicionamiento absoluto:
       pasa a ser un bloque en el flujo normal al inicio del div,
       así nunca se superpone sobre inputs, labels ni botones */
    .titulo-seccion,
    .titulo-seccion-centrado {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: block;
        width: calc(100% + 1.2rem);
        background: #e8edf8;
        color: #1a2a4a;
        font-size: 0.78rem;
        font-weight: 700;
        padding: 0.35rem 0.75rem;
        margin: 0 -0.6rem 0.75rem -0.6rem;
        border-radius: 4px 4px 0 0;
        border-bottom: 1px solid #c5cfe8;
        white-space: normal !important;
        text-align: center !important;
    }

    /* Columnas fijas internas de seccion-borde-div → full width */
    .seccion-borde-div .col-1,
    .seccion-borde-div .col-2,
    .seccion-borde-div .col-3,
    .seccion-borde-div .col-4,
    .seccion-borde-div .col-5,
    .seccion-borde-div .col-6,
    .seccion-borde-div .col-7,
    .seccion-borde-div .col-8,
    .seccion-borde-div .col-9,
    .seccion-borde-div .col-10,
    .seccion-borde-div .col-11 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Botones dentro de seccion-borde-div: centrados, en columna, sin solaparse */
    .seccion-borde-div .d-flex,
    .seccion-borde-div .btn-group,
    .seccion-borde-div > .row > [class*="col"] > .d-flex {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    /* Botones sueltos (no en d-flex) → bloque completo centrado */
    .seccion-borde-div .btn:not(.btn-close) {
        display: inline-flex !important;
        width: auto !important;
        min-width: 2.5rem;
        margin-bottom: 0.3rem;
    }

    /* Fila de botones de acción (guardar / finalizar / etc.) */
    .seccion-borde-div > .row.justify-content-end,
    .seccion-borde-div > .row.justify-content-center {
        justify-content: center !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    html,
    body {
        font-size: 0.98rem;
    }

    .container,
    .container-fluid,
    .main-panel,
    .content,
    .page-inner,
    .wrapper {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .row > .col-2,
    .row > .col-3,
    .row > .col-4,
    .row > .col-5,
    .row > .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .table-responsive,
    .table-responsive-sm,
    .table-responsive-md,
    .contenedor_tablas,
    .contenedor_tablas1,
    .table_hermana,
    .container_scroll,
    .overflow-auto,
    .table-scroll-mobile {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 36rem;
    }

    .seccion-borde-div table {
        min-width: 0;
    }

    .container-responsive {
        width: 100%;
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .d-mobile-show {
        display: none !important;
    }

    /* ---- seccion-borde-div responsive (tablet) ---- */
    .seccion-borde-div {
        padding: 0 0.8rem 0.75rem !important;
        padding-top: 0 !important;
        overflow-x: clip;
    }

    .titulo-seccion,
    .titulo-seccion-centrado {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: block;
        width: calc(100% + 1.6rem);
        margin: 0 -0.8rem 0.75rem -0.8rem;
        background: #e8edf8;
        color: #1a2a4a;
        font-size: 0.82rem;
        font-weight: 700;
        padding: 0.4rem 0.9rem;
        border-radius: 4px 4px 0 0;
        border-bottom: 1px solid #c5cfe8;
        white-space: normal !important;
        text-align: center !important;
    }

    /* Columnas muy pequeñas → 50% en tablet */
    .seccion-borde-div .col-1,
    .seccion-borde-div .col-2,
    .seccion-borde-div .col-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .seccion-borde-div .d-flex,
    .seccion-borde-div .btn-group {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }
}

@media (min-width: 992px) {
    .container-responsive {
        width: 100%;
        max-width: 100%;
    }

    .d-mobile-show {
        display: none !important;
    }
}

/* ==============================================
   Flechas globales de scroll lateral (móvil)
   Fijas en los bordes de la pantalla,
   actúan sobre la tabla visible en ese momento.
   ============================================== */
/* ==============================================
   Botón global "Atrás" — fijo esquina superior derecha
   ============================================== */
#btnGlobalAtras {
    position: fixed;
    top: 78px;
    right: 12px;
    z-index: 1045;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(33, 37, 41, 0.82);
    color: #fff;
    font-size: 1.4rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    transition: background 0.15s, opacity 0.15s;
    opacity: 0.85;
    padding: 0;
    line-height: 1;
}

#btnGlobalAtras:hover,
#btnGlobalAtras:active {
    background: #0d6efd;
    opacity: 1;
}

@media (max-width: 575.98px) {
    #btnGlobalAtras {
        display: flex;
    }
}

@media (min-width: 576px) {
    .btn-premium-top {
        display: inline-flex !important;
    }

    .d-flex.justify-content-between.align-items-center.mb-4.border-bottom {
        justify-content: space-between !important;
    }

    .d-flex.justify-content-between.align-items-center.mb-4.border-bottom .letra-titulo {
        text-align: left;
        width: auto;
    }
}

/* Ocultar los botones "Atrás" locales de cada vista —
   el botón global ya cumple esa función */
.btn-premium-top {
    display: none !important;
}

.btn-premium-create.btn-premium-top,
a.btn-premium-create.btn-premium-top,
button.btn-premium-create.btn-premium-top {
    display: inline-flex !important;
}

/* Centrar el título de sección cuando ya no tiene botón al lado */
.d-flex.justify-content-between.align-items-center.mb-4.border-bottom {
    justify-content: center !important;
}

.d-flex.justify-content-between.align-items-center.mb-4.border-bottom .letra-titulo {
    text-align: center;
    width: 100%;
}

/* ==============================================
   Flechas globales de scroll lateral (móvil)
   ============================================== */
#scrollBtnLeft,
#scrollBtnRight {
    display: none;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    font-size: 1.1rem;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    opacity: 0.88;
}

#scrollBtnLeft  { left:  4px; }
#scrollBtnRight { right: 4px; }

#scrollBtnLeft:active,
#scrollBtnRight:active  { background: #0a58ca; }

#scrollBtnLeft.scroll-btn-hidden,
#scrollBtnRight.scroll-btn-hidden {
    opacity: 0.25;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    #scrollBtnLeft,
    #scrollBtnRight {
        display: flex;
    }
}

/* Wrapper automático para tablas sin contenedor de scroll (global) */
.table-scroll-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Dentro de seccion-borde-div la tabla puede ser tan ancha como necesite
   y el wrapper hace el scroll */
.seccion-borde-div .table-scroll-auto table {
    min-width: max-content;
}

/* ==============================================
   Flujo de Aprobación — responsive
   Los .section pasan de columna apilada a
   tarjetas en fila con wrap en móvil/tablet.
   ============================================== */
@media (max-width: 991.98px) {

    /* El .container del flujo se convierte en flex row con wrap */
    .seccion-borde-div > .container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.6rem !important;
        padding: 0 !important;
    }

    /* Cada tarjeta del flujo ocupa ~50% en móvil (2 por fila)
       y se ajusta automáticamente al contenido */
    .seccion-borde-div > .container > .section {
        flex: 1 1 calc(50% - 0.6rem) !important;
        min-width: 130px;
        background: #f8faff;
        border: 1px solid #d0daf0;
        border-radius: 8px;
        padding: 0.55rem 0.65rem;
        box-shadow: 0 1px 4px rgba(13, 110, 253, 0.07);
    }

    /* Título dentro de cada tarjeta (ej: "Autorizado por: coordinador") */
    .seccion-borde-div > .container > .section > .title {
        font-size: 0.72rem;
        font-weight: 700;
        color: #1a3a6e;
        margin-bottom: 0.3rem;
        line-height: 1.3;
        word-break: break-word;
    }

    /* Info dentro de cada tarjeta */
    .seccion-borde-div > .container > .section > .info-container {
        font-size: 0.7rem;
        color: #3a4a6a;
        margin-bottom: 0;
        flex-direction: column;
        align-items: flex-start;
        word-break: break-all;
    }

    /* Botones de Aprobar / Rechazar / Guardar centrados debajo del flujo */
    .seccion-borde-div > .d-flex.justify-content-end {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        margin-top: 0.75rem;
    }
}

@media (min-width: 576px) {
    #btnGlobalAtras {
        display: none !important;
    }

    .btn-premium-top {
        display: inline-flex !important;
    }

    .d-flex.justify-content-between.align-items-center.mb-4.border-bottom {
        justify-content: space-between !important;
    }

    .d-flex.justify-content-between.align-items-center.mb-4.border-bottom .letra-titulo {
        text-align: left !important;
        width: auto !important;
    }
}