/* ===========================================================================
   responsiveTablas.css
   Adaptación responsiva GLOBAL de tablas para móvil y tablet.

   Problema que resuelve: una tabla con width:100% NO se desplaza
   horizontalmente; simplemente comprime las columnas y el texto hace "wrap"
   (se ve apretado en el celular). Para lograr scroll horizontal real hacen
   falta dos cosas:
     1) Un contenedor que pueda desplazarse  -> overflow-x: auto
     2) Que las celdas no se compriman        -> white-space: nowrap

   Se aplica solo en pantallas <= 768px (móvil + tablet vertical) usando
   selectores de atributo, de modo que cubre los distintos prefijos de los
   módulos sin tener que tocar cada archivo:
     emp-table-scroll, rfe-table-scroll, per-table-scroll, pclass-table-scroll,
     prf-table-scroll, pp-table-scroll, ppf-table-scroll, mat-table-wrap,
     emp-table-wrapper, table-responsive, y cualquier clase que contenga
     "table-scroll" / "table-wrap" / "tabla-scroll".
   =========================================================================== */

@media (max-width: 768px) {

    [class*="table-scroll"],
    [class*="table-wrap"],
    [class*="tabla-scroll"],
    [class*="tabla-wrap"],
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Las celdas dejan de hacer wrap -> la tabla se ensancha y el contenedor
       se desplaza horizontalmente en vez de apretar el contenido. */
    [class*="table-scroll"] > table,
    [class*="table-scroll"] table,
    [class*="table-wrap"] > table,
    [class*="table-wrap"] table,
    [class*="tabla-scroll"] table,
    [class*="tabla-wrap"] table,
    .table-responsive > table,
    .table-responsive table {
        white-space: nowrap;
        min-width: 100%;
    }
}

/* ===========================================================================
   TABLAS DENTRO DE UN MODAL  (.app-modal — ver modalTheme.css)

   Un modal es mucho más angosto que la pantalla, así que aquí el apretujón es
   peor: varias de estas tablas están declaradas `table-layout: fixed` con
   `width: 100%`, o sea que NUNCA superan el ancho de su envoltorio y por lo
   tanto nunca llegan a desplazarse. Lo que hacen es comprimir las columnas
   hasta que, con `word-break`, el número de un documento acaba escrito en
   vertical: una letra por línea.

   La regla las devuelve a ancho natural (`auto` + sin partir el texto): la
   tabla crece, el envoltorio —que ya tiene `overflow-x: auto`— se desplaza, y
   cada dato se lee de corrido.
   =========================================================================== */

@media (max-width: 768px) {

    .app-modal table {
        table-layout: auto;
    }

    .app-modal table th,
    .app-modal table td {
        white-space: nowrap;
        word-break: normal;
    }
}