/*
|--------------------------------------------------------------------------
| VideoBook360 · Tablas responsive del portal privado
|--------------------------------------------------------------------------
|
| Objetivos:
| - que ninguna tabla pueda ensanchar la página y ocultar contenido;
| - mantener siempre accesible el desplazamiento horizontal;
| - limitar las tablas largas a la altura disponible de la ventana;
| - mantener visible la cabecera al desplazarse verticalmente;
| - mantener accesible la columna "Acciones" cuando exista;
| - permitir desplazamiento táctil y mediante teclado.
|
*/

.private-page,
.private-main,
.private-shell,
.private-shell > *,
.card,
.card-body,
.row,
[class*="col-"] {
    min-width: 0;
}

.private-main {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/*
 * Barra horizontal superior sincronizada con la tabla.
 *
 * Es especialmente útil cuando la tabla es muy alta: el usuario no tiene
 * que llegar al final del listado para encontrar el scrollbar horizontal.
 */
.vb-table-top-scroll {
    display: none;
    width: 100%;
    max-width: 100%;
    height: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-bottom: 0;
    border-radius: .5rem .5rem 0 0;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.vb-table-top-scroll.is-visible {
    display: block;
}

.vb-table-top-scroll__track {
    height: 1px;
}

/*
 * Se aplica automáticamente a todos los .table-responsive del layout
 * privado mediante responsive-tables.js.
 */
.table-responsive.vb-responsive-table {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 .5rem .5rem;
    background: #fff;
}

/*
 * Cuando la tabla tiene bastantes filas, JS calcula dinámicamente el espacio
 * vertical restante de la ventana y lo guarda en --vb-table-max-height.
 * Así el scrollbar horizontal queda dentro de la zona visible.
 */
.table-responsive.vb-responsive-table.vb-responsive-table--viewport {
    max-height: var(--vb-table-max-height, 62dvh);
}

/*
 * No dejamos que Bootstrap comprima una tabla de muchas columnas hasta
 * volverla ilegible. JS calcula un mínimo aproximado según su número de
 * columnas y lo expone en --vb-table-min-width.
 */
.table-responsive.vb-responsive-table > table {
    width: 100%;
    min-width: var(--vb-table-min-width, 760px);
    margin-bottom: 0 !important;
}

/*
 * Los identificadores y nombres de fichero pueden ser largos y no contener
 * espacios. Se pueden partir sin obligar a la tabla a crecer indefinidamente.
 */
.table-responsive.vb-responsive-table td,
.table-responsive.vb-responsive-table th {
    max-width: 34rem;
}

.table-responsive.vb-responsive-table td {
    overflow-wrap: anywhere;
    word-break: normal;
}

.table-responsive.vb-responsive-table .text-nowrap,
.table-responsive.vb-responsive-table .btn,
.table-responsive.vb-responsive-table .badge,
.table-responsive.vb-responsive-table audio,
.table-responsive.vb-responsive-table select,
.table-responsive.vb-responsive-table input {
    overflow-wrap: normal;
    word-break: normal;
}

/*
 * Cabecera fija solo cuando existe scroll vertical interno.
 */
.table-responsive.vb-responsive-table--viewport thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--bs-table-bg, #f8f9fa);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .10);
}

/*
 * En tablas cuyo último encabezado es "Acciones", JS añade
 * vb-responsive-table--actions. La última columna permanece visible a la
 * derecha mientras se desplazan las demás columnas.
 */
.table-responsive.vb-responsive-table--actions th:last-child,
.table-responsive.vb-responsive-table--actions td:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    min-width: 7rem;
    background: #fff;
    box-shadow: -10px 0 14px -14px rgba(6, 18, 26, .75);
}

.table-responsive.vb-responsive-table--actions thead th:last-child {
    z-index: 6;
    background: #f8f9fa;
}

.table-responsive.vb-responsive-table--actions tbody tr:hover td:last-child {
    background: #f7f9fb;
}

/*
 * Indicadores laterales: informan visualmente de que existe más contenido
 * fuera de la vista, incluso en sistemas que ocultan los scrollbars.
 */
.table-responsive.vb-responsive-table::before,
.table-responsive.vb-responsive-table::after {
    content: "";
    position: sticky;
    top: 0;
    bottom: 0;
    z-index: 7;
    width: 14px;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .16s ease;
}

.table-responsive.vb-responsive-table::before {
    left: 0;
    float: left;
    margin-right: -14px;
    background: linear-gradient(
        to right,
        rgba(6, 18, 26, .18),
        rgba(6, 18, 26, 0)
    );
}

.table-responsive.vb-responsive-table::after {
    right: 0;
    float: right;
    margin-left: -14px;
    background: linear-gradient(
        to left,
        rgba(6, 18, 26, .18),
        rgba(6, 18, 26, 0)
    );
}

.table-responsive.vb-responsive-table.vb-can-scroll-left::before,
.table-responsive.vb-responsive-table.vb-can-scroll-right::after {
    opacity: 1;
}

/*
 * Mejor foco de teclado: al tener tabindex=0 se puede desplazar la tabla con
 * Shift+rueda, trackpad y teclas horizontales en navegadores compatibles.
 */
.table-responsive.vb-responsive-table:focus-visible,
.vb-table-top-scroll:focus-visible {
    outline: 3px solid rgba(13, 110, 253, .28);
    outline-offset: 2px;
}

/*
 * Scrollbars visibles y manejables.
 */
.table-responsive.vb-responsive-table,
.vb-table-top-scroll {
    scrollbar-width: auto;
    scrollbar-color: #7e8a94 #edf0f2;
}

.table-responsive.vb-responsive-table::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

.vb-table-top-scroll::-webkit-scrollbar {
    height: 13px;
}

.table-responsive.vb-responsive-table::-webkit-scrollbar-track,
.vb-table-top-scroll::-webkit-scrollbar-track {
    background: #edf0f2;
}

.table-responsive.vb-responsive-table::-webkit-scrollbar-thumb,
.vb-table-top-scroll::-webkit-scrollbar-thumb {
    background: #7e8a94;
    border: 3px solid #edf0f2;
    border-radius: 999px;
}

.table-responsive.vb-responsive-table::-webkit-scrollbar-thumb:hover,
.vb-table-top-scroll::-webkit-scrollbar-thumb:hover {
    background: #596670;
}

/*
 * En pantallas pequeñas dejamos algo más de espacio útil al listado.
 */
@media (max-width: 991.98px) {
    .table-responsive.vb-responsive-table > table {
        min-width: max(
            var(--vb-table-min-width, 760px),
            760px
        );
    }

    .table-responsive.vb-responsive-table.vb-responsive-table--viewport {
        max-height: var(--vb-table-max-height, 56dvh);
    }

    .table-responsive.vb-responsive-table--actions th:last-child,
    .table-responsive.vb-responsive-table--actions td:last-child {
        min-width: 6.5rem;
    }
}

@media (max-width: 575.98px) {
    .vb-table-top-scroll {
        height: 20px;
    }

    .table-responsive.vb-responsive-table {
        border-radius: 0 0 .35rem .35rem;
    }

    .table-responsive.vb-responsive-table td,
    .table-responsive.vb-responsive-table th {
        max-width: 18rem;
    }

    .table-responsive.vb-responsive-table--actions th:last-child,
    .table-responsive.vb-responsive-table--actions td:last-child {
        min-width: 6rem;
    }
}

/*
 * Impresión: nunca limitar altura ni mantener columnas sticky.
 */
@media print {
    .vb-table-top-scroll {
        display: none !important;
    }

    .table-responsive.vb-responsive-table {
        max-height: none !important;
        overflow: visible !important;
    }

    .table-responsive.vb-responsive-table > table {
        min-width: 0 !important;
    }

    .table-responsive.vb-responsive-table th,
    .table-responsive.vb-responsive-table td {
        position: static !important;
    }
}