/* ============================
   PortalRequerimientos - estilos
   ============================ */

/* Encabezado: borde inferior negro, pronunciado, con separación */
.bg-plomo2 table thead tr {
    border-bottom: 4px solid #000;
}

.bg-plomo2 table thead th {
    padding-bottom: 14px;
    font-weight: 700;
    color: #222;
}

/* Tabla: separación entre filas y ancho */
.bg-plomo2 table {
    border-collapse: separate;
    border-spacing: 0 23px;
    width: 100%;
}

/* Wrapper scrollable específico */
.table-responsive-pr {
    width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Celdas por defecto */
.bg-plomo2 table th,
.bg-plomo2 table td {
    padding: 12px 10px;
    white-space: nowrap;
    text-align: center;
}

/* Paginador */
.pr-paginador {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

.pr-page, .pr-ellipsis, .pr-arrow {
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
}

.pr-ellipsis {
    cursor: default;
}

.pr-page--active {
    text-decoration: none;
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 3px solid currentColor;
    font-weight: 700;
}

.pr-disabled {
    opacity: .35;
    pointer-events: none;
    cursor: default;
}

.pr-arrow-img {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    display: inline-block;
}

/* Mobile tweaks */
@media (max-width: 767.98px) {
    .bg-plomo2 table th,
    .bg-plomo2 table td {
        padding: 8px 6px;
        font-size: 13px;
    }

    .bg-plomo2 table thead th {
        padding-bottom: 8px;
        border-bottom: 4px solid #000;
    }

    .pr-paginador {
        gap: 8px;
        flex-wrap: wrap;
        padding: 6px 8px;
    }

    .pr-page, .pr-ellipsis, .pr-arrow {
        font-size: 14px;
        padding: 4px 6px;
    }

    .pr-arrow-img {
        width: 18px;
        height: 18px;
    }

    /* Mantener la tabla legible: min-width para forzar scroll horizontal controlado */
    .bg-plomo2 table {
        min-width: 640px;
    }

    /* Navs (botones) compactos en móvil: top pills */
    #pills-tab, #pills-tab .nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: center;
        gap: 0px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 6px;
    }

        #pills-tab .nav-item button,
        #pills-tab .nav-item .btn,
        #pills-tab .nav-item > button {
            min-width: 56px;
            max-width: 120px;
            flex: 0 0 auto;
            padding: 6px 10px !important;
            font-size: 13px !important;
            line-height: 1 !important;
            white-space: nowrap;
            box-sizing: border-box;
        }

    .olv-sky {
        width: auto !important;
    }

    /* Nav finalizados compacto */
    #pr-finalizados-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 6px;
    }

        #pr-finalizados-nav .nav-item button,
        #pr-finalizados-nav .nav-item > button {
            width: auto !important;
            min-width: 56px;
            max-width: 100px;
            flex: 0 0 auto;
            padding: 6px 10px !important;
            font-size: 11.3px !important;
            white-space: nowrap;
        }

    .subtext-nav {
        font-size: 9px !important;
    }

    .portalResponsive {
        margin-bottom: 0px !important;
    }

    .signup-step-container {
        margin-top: 0px !important;
    }

    .textSelecResponsive {
        font-size: 16px !important;
    }

    .table-responsive-pr {
        margin-top: 0px !important;
    }

    #SiHayRequerimientosEnCurso {
        border-spacing: 0px 5px !important;
    }

    .btnInicioResponsive {
        margin-top: 0px !important;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {

    .bg-plomo2 table th, .bg-plomo2 table td {
        padding: 10px 8px;
        font-size: 14px;
    }

    .pr-arrow-img {
        width: 20px;
        height: 20px;
    }

    .pr-paginador {
        gap: 10px;
    }
}

/* Texto auxiliar debajo de Denuncias */
.subtext-nav {
    font-size: 12px;
    color: #0E5487;
    margin-top: 4px; /* pequeño espacio respecto al botón */
    text-align: center;
    line-height: 1;
}

/* Wrapper para que la tabla finalizados scroll horizontal en móvil */
.pr-finalizados-wrapper {
    overflow-x: auto; /* scroll derecha-izquierda */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; /* espacio para la barra del scroll */
}

/* mantener el min-width que ya tenías */
#pr-tabla-finalizados {
    min-width: 640px; /* fuerza el scroll cuando la pantalla sea menor */
}

@media (max-width: 32rem) {
    .mobile-justify-content-center {
        display: block !important;
        justify-content: center !important;
    }
}

@media (max-width: 575.98px) {
    .respon-aviso {
        margin-top: 0px !important;
    }
}

/* FUERZA OCULTO EN MÓVIL CUANDO NO ESTÁ ACTIVO */
@media (max-width: 767px) {
    #pills-profile:not(.active) {
        display: none !important;
    }
}

#NoHayRequerimientosEnCurso {
    margin-right: 8rem !important;
    margin-left: 8rem !important;
}

#NoHayRequerimientosFinalizados {
    margin-right: 9rem !important;
    margin-left: 9rem !important;
}

@media (max-width: 767px) {
    .pr-top-card {
        flex-direction: column !important;
        margin-top: 5px !important;
    }

    .codigo-respon {
        width: auto !important;
    }

    .con-response {
        margin-bottom: 0px !important;
    }

    .modal-dialog.modal-dialog-centered {
        max-width: 375px !important;
    }

    .letra-responsive {
        font-size: 15px !important;
    }

    #NoHayRequerimientosEnCurso {
        margin-right: 0rem !important;
        margin-left: 0rem !important;
    }

    #NoHayRequerimientosFinalizados {
        margin-right: 2rem !important;
        margin-left: 2rem !important;
    }

    .pr-finalizados-wrapper {
        min-height: auto !important;
    }

    .signup-step-container {
        min-height: auto !important;
    }
}