/* =========================================================
   TABLAS ANCHAS EN TELEFONO

   Patron compartido: la tabla no se comprime, se desplaza de lado dentro de
   .table-responsive, y la columna que identifica cada fila queda fija para no
   perder la referencia al desplazar.

   MARKUP ESPERADO
     <div class="tabla-movil">                        contenedor de la vista
                                                      el aviso lo inserta
                                                      tablas.js, no el markup
       <table class="... tabla-ancha">                tabla con muchas columnas
         <th class="celda-correlativo">  / <td ...>   numero de fila, se oculta
         <th class="celda-id">           / <td ...>   columna que identifica
         <th class="celda-id-2">         / <td ...>   segunda, opcional
   Si hay dos columnas fijas, la tabla ademas lleva la clase "dos-fijas".
   Las tablas de pocas columnas llevan "ancho-medio" en lugar del ancho por
   defecto, y pueden no necesitar columna fija: ver nota en esa regla.

   JAVASCRIPT
     El .table-responsive NO va en el markup: DataTables mueve la tabla dentro
     de su propio wrapper y el contenedor terminaria conteniendo tambien al
     buscador y a la paginacion, que se irian de pantalla al desplazar. Se
     agrega en initComplete:

       "initComplete": function() { tablaResponsive(this); }
========================================================= */

.tabla-movil .tabla-ancha {
    min-width: 900px;
}

/* Tablas de pocas columnas (5 a 7): su ancho natural ronda los 500px, asi que
   forzar los 900px del caso general solo agregaria desplazamiento. Este ancho
   alcanza para que las fechas no se partan en tres lineas. */
.tabla-movil .tabla-ancha.ancho-medio {
    min-width: 560px;
}

.tabla-movil .table-responsive {
    -webkit-overflow-scrolling: touch;
}

.tabla-movil .aviso-scroll {
    display: none;
    font-size: 11px;
    color: #6c757d;
    margin-bottom: 4px;
}


/* =========================================================
   TABLET: el layout fija <html> en 12px y los controles de DataTables quedan
   chicos; aqui se llevan a 13px para que sigan legibles
========================================================= */

@media (max-width: 991.98px) {

    .tabla-movil label,
    .tabla-movil .dataTables_info,
    .tabla-movil .dataTables_length,
    .tabla-movil .dataTables_filter,
    .tabla-movil .page-link {
        font-size: 13px !important;
    }
}


/* =========================================================
   TELEFONO
========================================================= */

@media (max-width: 767.98px) {

    /* buttons.css deja las barras .buttons-inline en una sola linea (nowrap
       !important): con tres botones btn-mada-normal no entran en un telefono
       y empujan la pagina. Aca pueden pasar a una segunda linea. Este archivo
       carga despues de buttons.css, por eso gana con la misma especificidad. */
    .buttons-inline {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* el helper de tablas.js agrega aviso-visible solo si la tabla realmente
       se desplaza; sin esa clase el aviso no se muestra nunca */
    .tabla-movil .aviso-scroll.aviso-visible {
        display: block;
    }

    .tabla-movil .dataTables_filter,
    .tabla-movil .dataTables_length {
        text-align: left !important;
    }

    /* label en flex: el input toma el espacio sobrante sin desbordar */
    .tabla-movil .dataTables_filter label,
    .tabla-movil .dataTables_length label {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 0;
    }

    .tabla-movil .dataTables_filter input {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        margin-left: 8px !important;
    }

    .tabla-movil .dataTables_length select {
        margin: 0 8px;
    }

    .tabla-movil .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* DataTables declara white-space:nowrap en el contador de registros; con
       totales de varias cifras el texto no entra y desborda la pagina entera
       por unos pocos pixeles */
    .tabla-movil .dataTables_info {
        white-space: normal !important;
    }

    /* los .btn-mada-* conservan su tamano: van dentro de filas de tabla
       (buttons.css los fija con !important) */
    .tabla-movil .btn:not([class*="btn-mada-"]) {
        font-size: 13px !important;
        min-height: 38px !important;
        padding: 8px 12px !important;
    }

    .tabla-movil .tabla-ancha {
        font-size: 11px;
    }

    /* el correlativo no aporta en pantalla chica y gasta ancho */
    .tabla-movil .celda-correlativo {
        display: none;
    }

    /* columna(s) que identifican la fila */
    .tabla-movil .celda-id,
    .tabla-movil .celda-id-2 {
        position: sticky;
        z-index: 2;
    }

    /* DataTables declara position:relative en los th ordenables
       (table.dataTable thead > tr > th.sorting, que gana por especificidad);
       sin esto el encabezado toma el "left" como desplazamiento y queda
       corrido respecto del cuerpo. Va con !important para no depender de que
       la tabla lleve ademas la clase tabla-ancha. */
    .tabla-movil thead th.celda-id,
    .tabla-movil thead th.celda-id-2 {
        position: sticky !important;
    }

    .tabla-movil .celda-id {
        left: 0;
        width: 120px;
        min-width: 120px;
        max-width: 120px;
    }

    /* con dos columnas fijas la primera cede ancho */
    .tabla-movil .dos-fijas .celda-id {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
    }

    /* el left real lo mide tablas.js (--ancho-celda-id); 80px es el respaldo */
    .tabla-movil .dos-fijas .celda-id-2 {
        left: var(--ancho-celda-id, 80px);
        width: 110px;
        min-width: 110px;
        max-width: 110px;
    }

    /* fondo opaco: con border-collapse las celdas fijas dejarian pasar por
       debajo el contenido desplazado */
    .tabla-movil thead .celda-id,
    .tabla-movil thead .celda-id-2,
    .tabla-movil tfoot .celda-id,
    .tabla-movil tfoot .celda-id-2 {
        background: #eeeeee;
    }

    .tabla-movil tbody .celda-id,
    .tabla-movil tbody .celda-id-2 {
        background: #ffffff;
    }

    /* la sombra separa la zona fija de la que se desplaza */
    .tabla-movil .celda-id {
        box-shadow: 2px 0 3px rgba(0, 0, 0, .12);
    }

    .tabla-movil .dos-fijas .celda-id {
        box-shadow: none;
    }

    .tabla-movil .dos-fijas .celda-id-2 {
        box-shadow: 2px 0 3px rgba(0, 0, 0, .12);
    }
}