/* ════════════════════════════════════════════════════════
   PAGINACIÓN DITT — Override completo Laravel pagination
   Pegar en: public/css/app.css  o  resources/css/app.css
   También funciona en un <style> dentro del layout blade
   ════════════════════════════════════════════════════════ */

/* Contenedor nav de Laravel */
nav[aria-label="Pagination Navigation"] {
    display: flex;
    align-items: center;
}

/* Ocultar el span "Showing X to Y of Z results" si quieres
   (comenta si lo prefieres visible) */
/* nav[aria-label="Pagination Navigation"] > p { display: none !important; } */

/* ── Lista ── */
.pagination {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: wrap;
}

/* ── Cada item/enlace (Bootstrap & Tailwind) ── */
.pagination .page-item .page-link,
.pagination li > a,
.pagination li > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #2E4A7A !important;
    font-size: .83rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all .18s ease !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    line-height: 1 !important;
}

/* ── Hover ── */
.pagination .page-item .page-link:hover,
.pagination li > a:hover {
    background: #EBF0F7 !important;
    border-color: #2E4A7A !important;
    color: #2E4A7A !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(46,74,122,.14) !important;
}

/* ── PÁGINA ACTIVA ── */
.pagination .page-item.active .page-link,
.pagination li > span[aria-current="page"],
.pagination [aria-current="page"],
.pagination li.active > a,
.pagination li.active > span {
    background: #2E4A7A !important;
    border-color: #2E4A7A !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(46,74,122,.28) !important;
    transform: none !important;
    cursor: default !important;
}

/* ── DESHABILITADO (« y ») ── */
.pagination .page-item.disabled .page-link,
.pagination li.disabled > a,
.pagination li.disabled > span,
.pagination li > span[aria-disabled="true"] {
    background: #F8FAFC !important;
    border-color: #E2E8F0 !important;
    color: #CBD5E1 !important;
    cursor: not-allowed !important;
    opacity: .65 !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Tailwind pagination (Laravel 9+) ── */
/* Los enlaces «  ‹  1  2  3  ›  » */
nav[role="navigation"] span[aria-current="page"] > span {
    background: #2E4A7A !important;
    border-color: #2E4A7A !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    min-width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    font-size: .83rem !important;
}

nav[role="navigation"] a,
nav[role="navigation"] span {
    border-radius: 8px !important;
}

/* Separador "..." */
.pagination li > span.page-link,
.pagination span[aria-disabled="true"] {
    background: #F8FAFC !important;
    color: #94A3B8 !important;
    border-color: #E2E8F0 !important;
    cursor: default !important;
    pointer-events: none !important;
}