/* [TABLA] Una tabla de siete columnas en un teléfono.
 *
 * MEDIDO EL 2026-08-22 en un marco de 320px, con el CSS real de cada puerta y una fila como las
 * que se pintan de verdad —empresa, alias, estado, último cambio, quién, motivo, minutos—:
 *
 *     ancho de la tabla         603px
 *     ancho de la ventana       320px
 *     ancho de la PÁGINA        627px   ← la página entera se corrió
 *
 * `table.datos{width:100%}` no alcanza: el ancho mínimo de siete columnas de texto es mayor que
 * la ventana, y entonces la tabla empuja al documento. Lo que se ve no es una tabla ancha: es
 * TODO el panel deslizándose de lado —el encabezado, la navegación, las otras secciones—, y cada
 * vez que alguien mira una columna de la derecha pierde de vista dónde estaba.
 *
 * QUIEN ESTABA CUBIERTO Y QUIEN NO, contado sobre el código:
 *
 *     index.html      `bmTabla` envuelve cada tabla en `.table-wrap`          cubierto
 *     permisos.html   los contenedores viven dentro de `.tabla-scroll`        cubierto
 *     ti.html         lo mismo                                               cubierto
 *     panel.html      36 tablas · 7 dentro de `.mt-scroll` · **29 sueltas**   NO
 *     partner.html    `cons-tabla` se pinta sin ningún envoltorio            NO
 *
 * POR QUE UNA REGLA Y NO 29 ENVOLTORIOS. Se pintan con `innerHTML` desde 29 sitios distintos.
 * Envolverlas una por una es 29 oportunidades de olvidarse, y la que se olvide va a ser la que
 * alguien agregue mañana. Una tabla puesta en `display:block` ES su propio contenedor de scroll.
 *
 * SOLO EN PANTALLA ANGOSTA. En un monitor, `display:block` le sacaría a la tabla el `width:100%`
 * que sí funciona ahí, y las columnas dejarían de repartirse el ancho. Fuera de la consulta de
 * medios no cambia absolutamente nada.
 *
 * CUATRO CLASES, Y DOS LAS ENCONTRO EL GUARD. La primera versión de esta hoja cubría `datos` y
 * `cons-tabla`, que eran las que había visto. El guard —que lee las clases que las puertas pintan
 * de verdad, en vez de una lista escrita a mano— encontró `tabla` y `tabla-canal`, dos más en el
 * panel. Es exactamente lo que se le pedía: la lista a mano ya estaba vieja el día que se escribió.
 *
 * Marca buscable: tablas_angostas
 */

/* ── EL ENVOLTORIO DEL PANEL, QUE SOLO ENVOLVIA EN TRES SITIOS ──────────────────────────
   `.mt-scroll` se usa en siete sitios del panel, pero su `overflow-x` estaba escrito como
   `#mt-tabla .mt-scroll, #mt-libres .mt-scroll, #mt-sueltos .mt-scroll`. En los otros cuatro,
   la clase estaba puesta y no hacía nada: un envoltorio que parece uno y no lo es es peor que
   ninguno, porque quien lo lee da el problema por resuelto. */
.mt-scroll { overflow-x: auto; }

@media (max-width: 720px) {
  table.datos,
  table.tabla,
  table.tabla-canal,
  table.cons-tabla {
    display: block;
    /*  `max-width` NO ES OPCIONAL, y el primer intento lo aprendió midiendo: un bloque sin ancho
        acotado se encoge a SU CONTENIDO, así que la tabla siguió midiendo 658px y `overflow-x`
        no tuvo nada que recortar. La página se corría igual. */
    max-width: 100%;
    overflow-x: auto;
    /* Momentum en iOS: sin esto, el desplazamiento se siente trabado y la gente cree que la
       tabla no se mueve. */
    -webkit-overflow-scrolling: touch;
    /* Una barra fina y siempre visible es la única pista de que hay más a la derecha. En un
       sistema que las esconde hasta que alguien desplaza, nadie descubre las columnas que
       faltan. */
    scrollbar-width: thin;
  }

  /*  EL `thead` Y EL `tbody` NO SE TOCAN, y el primer intento también lo aprendió midiendo.
      Ponerles `display:table` los convertía en DOS tablas independientes, cada una repartiendo
      sus columnas por su cuenta: el encabezado y las filas quedaban corridos entre sí. Con
      `display:block` en la tabla, el navegador arma solo una caja de tabla anónima que envuelve
      a los dos, y las columnas siguen alineadas. Medido: siete encabezados y siete celdas en las
      mismas siete posiciones.  */

  /* Que una celda no se parta en una letra por línea. 12ch deja respirar a «Operativa» y a una
     fecha corta; el resto sigue disponible desplazando. */
  table.datos th, table.datos td,
  table.tabla th, table.tabla td,
  table.tabla-canal th, table.tabla-canal td,
  table.cons-tabla th, table.cons-tabla td { min-width: 12ch; }
}