/* =========================================================
   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-oculta-movil">  / <td ...>  otra columna que sobra en telefono
         <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 (language.url hace la inicializacion asincrona):

       "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: main.css agranda label y .btn bajo 992px (pensado para los menues);
   aqui se acotan los controles de DataTables 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) {

    /* 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;
    }

    .tabla-movil .btn {
        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;
    }

    /* cualquier otra columna prescindible en telefono: miniaturas, iconos o
       datos que ya estan en el encabezado de la vista. Usarla con criterio, no
       para esconder informacion que en el telefono tambien hace falta. */
    .tabla-movil .celda-oculta-movil {
        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 desplazamiento es el ancho REAL de la primera columna, que mide
       tablas.js y publica en --ancho-celda-id. El 80px es solo el valor de
       respaldo si el JS no llego a correr: una celda de tabla no respeta
       width/max-width como limite duro, asi que la primera columna suele
       terminar mas ancha que los 80px de arriba, y con un left fijo esta
       segunda se corre al desplazar y tapa el final de la primera. */
    .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);
    }
}