/* ============================================================
   GLOBAL TABLES — PATRÓN RESPONSIVE REUTILIZABLE
   Sistema de Administración de Condominios
   ============================================================

   Contiene el patrón base de scroll horizontal para tablas.
   Los anchos fijos internos de cada tabla son responsabilidad
   del módulo correspondiente — no se definen aquí.

   USO
   ──────────────────────────────────────────────────────────
   Envolver la tabla con .table-scroll-wrapper:

   <div class="table-scroll-wrapper">
       <table>...</table>
   </div>

   El módulo define el min-width o width de su tabla específica.
   Esta clase solo provee el scroll container.

   COLUMNAS OCULTABLES
   ──────────────────────────────────────────────────────────
   .col-secondary → columnas de importancia secundaria
   .col-optional  → columnas opcionales / de baja prioridad

   El módulo puede decidir qué columnas usan estas clases.
   También puede ocultar columnas con clases propias sin
   depender de estas si necesita control más específico.

   ============================================================ */

/* ── SCROLL HORIZONTAL CONTAINER ────────────────────────────── */

.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
}

@media (max-width: 767px) {
    .table-scroll-wrapper {
        /* Forzar scroll incluso si el navegador intenta evitarlo */
        overflow-x: scroll;
    }
}


/* ── COLUMNAS OCULTABLES EN MOBILE ──────────────────────────── */

@media (max-width: 767px) {
    /* Columnas de importancia secundaria — ocultar en mobile */
    .col-secondary {
        display: none !important;
    }

    /* Columnas opcionales — ocultar en mobile */
    .col-optional {
        display: none !important;
    }
}

@media (min-width: 768px) {
    /* Restaurar en tablet y desktop */
    .col-secondary,
    .col-optional {
        display: table-cell;
    }
}


/* ── TABLA RESPONSIVE BÁSICA (sin scroll forzado) ───────────── */
/*
 * Para tablas que prefieren wrapping sobre scroll horizontal.
 * Usar .table-responsive en lugar de .table-scroll-wrapper
 * cuando la tabla puede adaptarse sin ancho fijo.
 */
@media (max-width: 767px) {
    .table-responsive {
        width: 100%;
        font-size: 12px;
    }

    .table-responsive th,
    .table-responsive td {
        padding: 6px 4px;
        word-break: break-word;
    }
}