/**
 * La paginación de DataTables: que quepa y que se sepa en qué página estás.
 *
 * DOS arreglos, los dos de la misma barra.
 *
 * 1) NO CABÍA. En /operaciones (928 registros → 93 páginas) y en el dashboard de
 *    admin la web entera se podía arrastrar a la derecha, dejando media pantalla
 *    en blanco. No lo rompían los botones flotantes de chat y llamada: los
 *    `position: fixed` no cuentan para el scroll del documento (se midió a 375px
 *    y el desbordamiento estaba ahí sin ellos). Era la paginación, que va en UNA
 *    sola línea que no envuelve, en sus dos variantes:
 *      - estilo de fábrica: <a class="paginate_button"> en línea dentro de un
 *        .dataTables_paginate con float:right.
 *      - estilo bootstrap4: <ul class="pagination"> con display:flex.
 *    Con "Anterior 1 2 3 4 5 … 93 Siguiente" esa línea mide ~580px.
 *
 *    El envolver va SIN media query a propósito: solo actúa cuando de verdad no
 *    cabe, así que también cubre paginaciones largas en tablet o en ventanas de
 *    escritorio estrechas. Lo de apilar y centrar los controles sí es de móvil.
 *
 * 2) NO SE VEÍA EN QUÉ PÁGINA ESTABAS. Ni en móvil ni en escritorio: el botón de
 *    la página actual salía idéntico a los demás. La app carga el ADAPTADOR de
 *    DataTables para bootstrap4 (dataTables.bootstrap4.min.css) pero NO carga
 *    Bootstrap, así que `.page-item.active` y `.page-link` se quedan sin una sola
 *    regla que los pinte; y las cinco hojas de vista que copian la píldora azul
 *    (operaciones, alquilados, publicados, disputas_table, user_administrator)
 *    pintan de #1C95DA TODOS los botones, el actual incluido.
 *
 *    Aquí se define el estado una sola vez y para todas las tablas: la página
 *    actual va rellena y el resto de números en contorno. Los `!important` son
 *    inevitables mientras esas cinco copias sigan poniendo `color: white
 *    !important` sobre todos los botones; si algún día se centralizan también
 *    ellas, se pueden quitar.
 *
 * Se carga desde plantillas/layout.blade.php DESPUÉS de @yield('css'), igual
 * que chip-desglose.css: cada vista enlaza ahí dentro las hojas de DataTables
 * y este fichero necesita ir detrás para ganar en cascada.
 */

/* ---- Que la paginación envuelva en vez de ensanchar el documento --------- */
/* Estilo de fábrica: los <a> pasan a ser elementos flex y saltan de línea. */
.dataTables_wrapper .dataTables_paginate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: 100%;
}
/* Con el gap ya no hace falta el margen suelto entre botones. */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    margin-left: 0;
}
/* Estilo bootstrap4: el que envuelve es el <ul>, no el contenedor. */
.dataTables_wrapper .dataTables_paginate .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
    margin-bottom: 0;
}

/* ---- Móvil: los controles dejan de flotar y se apilan centrados ---------- */
@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center;
    }
    /* El info ("Mostrando registros del 1 al 10…") pega con la paginación. */
    .dataTables_wrapper .dataTables_info {
        padding-bottom: 0.5em;
    }
    /* El buscador de fábrica es un <label> con el input dentro. */
    .dataTables_wrapper .dataTables_filter input {
        max-width: 100%;
    }
}

/* ---- En qué página estás -------------------------------------------------- */
/* La forma de píldora la definían solo las cinco hojas de vista; aquí se pone
   para TODAS las tablas, que si no el marcador de página actual sale como un
   rectángulo azul en las que no la traían (el dashboard de admin, por ejemplo).
   En las cinco que ya la tenían esto no cambia nada: son los mismos valores. */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 9999px;
    border: 1px solid #1C95DA;
}

/* La página actual: rellena. `active` es la clase del adaptador de bootstrap4,
   que es el que usa la app; `current` la del renderizador de fábrica. */
.dataTables_wrapper .dataTables_paginate .paginate_button.active,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #1C95DA !important;
    color: #fff !important;
    /* La negrita no es decoración: deja el estado legible sin depender solo del
       color, que es lo que pide la pauta de contraste. */
    font-weight: 700;
}

/* El resto de números: en contorno, para que el relleno signifique algo. */
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.active):not(.current):not(.previous):not(.next):not(.disabled) {
    background: #fff !important;
    color: #1C95DA !important;
}
/* Y su hover, que si no el `!important` de arriba se come el de las hojas de
   vista y el botón deja de responder al ratón. */
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.active):not(.current):not(.previous):not(.next):not(.disabled):hover {
    background: #1C95DA !important;
    color: #fff !important;
}

/* Los puntos suspensivos no son un botón: ni píldora, ni borde, ni azul. */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:not(.previous):not(.next) {
    background: transparent !important;
    border-color: transparent !important;
    color: #9ca3af !important;
    cursor: default;
}

/* Anterior/Siguiente cuando no llevan a ninguna parte: apagados en vez de
   idénticos a los que sí funcionan (las hojas de vista los forzaban a azul
   pleno con !important, así que en la página 1 "Anterior" parecía pulsable). */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled.next {
    opacity: 0.4;
    cursor: default;
}