/* Estilos simples para paginación - funciona con cualquier vista */

/* Contenedor de paginación */
.pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 30px 0 !important;
    list-style: none !important;
    padding: 0 !important;
}

/* Todos los enlaces de paginación */
.pagination a,
.pagination span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 8px 12px !important;
    border: 2px solid #e9ecef !important;
    background-color: #fff !important;
    color: #007bff !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
}

/* Hover effect */
.pagination a:hover {
    background-color: #007bff !important;
    color: #fff !important;
    border-color: #007bff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3) !important;
}

/* Página activa */
.pagination .active span {
    background-color: #007bff !important;
    color: #fff !important;
    border-color: #007bff !important;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2) !important;
}

/* Elementos deshabilitados */
.pagination .disabled span {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #e9ecef !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Flechas específicas - primer y último elemento */
.pagination li:first-child a,
.pagination li:first-child span,
.pagination li:last-child a,
.pagination li:last-child span {
    font-size: 16px !important;
    font-weight: normal !important;
    min-width: 40px !important;
    max-width: 40px !important;
    width: 40px !important;
    padding: 8px !important;
}

/* Ocultar flechas grandes específicas */
.pagination a[aria-label*="previous"]:not(:empty):not([aria-label="‹"]),
.pagination a[aria-label*="next"]:not(:empty):not([aria-label="›"]),
.pagination span[aria-label*="previous"]:not(:empty):not([aria-label="‹"]),
.pagination span[aria-label*="next"]:not(:empty):not([aria-label="›"]) {
    display: none !important;
}

/* Ocultar contenido que contenga flechas grandes */
.pagination a:contains("‹"),
.pagination a:contains("›"),
.pagination span:contains("‹"),
.pagination span:contains("›") {
    display: none !important;
}

/* Ocultar SVG icons grandes de Tailwind */
.pagination svg,
.relative svg,
.inline-flex svg {
    display: none !important;
}

/* Ocultar elementos con aria-label que contengan flechas grandes */
a[aria-label*="«"],
a[aria-label*="»"],
span[aria-label*="«"],
span[aria-label*="»"] {
    display: none !important;
}

/* Forzar flechas pequeñas en todos los casos */
.pagination li:first-child a::before,
.pagination li:first-child span::before {
    content: "‹" !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.pagination li:last-child a::after,
.pagination li:last-child span::after {
    content: "›" !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

/* Ocultar texto original de las flechas */
.pagination li:first-child a,
.pagination li:first-child span {
    font-size: 0 !important;
}

.pagination li:last-child a,
.pagination li:last-child span {
    font-size: 0 !important;
}

/* Estilos específicos para Tailwind pagination */
.relative.z-0.inline-flex svg {
    display: none !important;
}

.relative.z-0.inline-flex a[aria-label*="Previous"]::before {
    content: "‹" !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

.relative.z-0.inline-flex a[aria-label*="Next"]::after {
    content: "›" !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

/* Ocultar texto en elementos de flecha de Tailwind */
.relative.z-0.inline-flex a[aria-label*="Previous"],
.relative.z-0.inline-flex a[aria-label*="Next"] {
    font-size: 0 !important;
}

/* Prevenir superposición de paginaciones */
nav[role="navigation"] {
    position: relative !important;
    z-index: 1 !important;
}

/* Asegurar que solo una paginación sea visible a la vez */
nav[role="navigation"] > div:first-child {
    display: flex !important;
}

nav[role="navigation"] > div:last-child {
    display: none !important;
}

@media (min-width: 640px) {
    nav[role="navigation"] > div:first-child {
        display: none !important;
    }
    
    nav[role="navigation"] > div:last-child {
        display: flex !important;
    }
}

/* Ocultar elementos duplicados */
nav[role="navigation"] div[class*="hidden sm:hidden"] {
    display: none !important;
}

/* Asegurar que la paginación móvil no interfiera con la desktop */
.sm\:hidden {
    display: none !important;
}

@media (max-width: 639px) {
    .sm\:hidden {
        display: flex !important;
    }
    
    .sm\:block {
        display: none !important;
    }
}

/* Estilos específicos para separar elementos de paginación */
.relative.z-0.inline-flex {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.relative.z-0.inline-flex > * {
    margin: 2px !important;
    flex-shrink: 0 !important;
}

/* Separar elementos de paginación */
.relative.z-0.inline-flex a,
.relative.z-0.inline-flex span {
    margin: 0 4px !important;
    min-width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    border: 1px solid #d1d5db !important;
    background-color: #fff !important;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

/* Hover para elementos de paginación */
.relative.z-0.inline-flex a:hover {
    background-color: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #1f2937 !important;
}

/* Página activa */
.relative.z-0.inline-flex span[aria-current="page"] span {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #fff !important;
}

/* Elementos deshabilitados */
.relative.z-0.inline-flex span[aria-disabled="true"] span {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
}

/* Responsive */
@media (max-width: 768px) {
    .pagination {
        gap: 3px !important;
        margin: 20px 0 !important;
    }
    
    .pagination a,
    .pagination span {
        min-width: 35px !important;
        height: 35px !important;
        padding: 6px 8px !important;
        font-size: 13px !important;
    }
    
    .pagination li:first-child a,
    .pagination li:first-child span,
    .pagination li:last-child a,
    .pagination li:last-child span {
        min-width: 35px !important;
        max-width: 35px !important;
        width: 35px !important;
        font-size: 14px !important;
    }
    
    /* Responsive para Tailwind pagination */
    .relative.z-0.inline-flex {
        gap: 4px !important;
    }
    
    .relative.z-0.inline-flex a,
    .relative.z-0.inline-flex span {
        margin: 0 2px !important;
        min-width: 35px !important;
        height: 35px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    .pagination {
        gap: 2px !important;
    }
    
    .pagination a,
    .pagination span {
        min-width: 32px !important;
        height: 32px !important;
        padding: 4px 6px !important;
        font-size: 12px !important;
    }
    
    .pagination li:first-child a,
    .pagination li:first-child span,
    .pagination li:last-child a,
    .pagination li:last-child span {
        min-width: 32px !important;
        max-width: 32px !important;
        width: 32px !important;
        font-size: 12px !important;
    }
    
    /* Responsive para Tailwind pagination */
    .relative.z-0.inline-flex {
        gap: 2px !important;
    }
    
    .relative.z-0.inline-flex a,
    .relative.z-0.inline-flex span {
        margin: 0 1px !important;
        min-width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
} 

/* Estilos agresivos para separar paginación - forzar separación */

/* Reset completo para paginación */
nav[role="navigation"] *,
.relative.z-0.inline-flex *,
.pagination * {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Contenedor principal de paginación */
nav[role="navigation"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Forzar layout horizontal */
.relative.z-0.inline-flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding: 10px 0 !important;
    margin: 0 !important;
}

/* Separar TODOS los elementos de paginación */
.relative.z-0.inline-flex > *,
.relative.z-0.inline-flex > a,
.relative.z-0.inline-flex > span {
    display: inline-block !important;
    flex: 0 0 auto !important;
    margin: 0 4px !important;
    padding: 8px 12px !important;
    min-width: 40px !important;
    height: 40px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* Hover effects */
.relative.z-0.inline-flex > a:hover {
    background-color: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #1f2937 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Página activa */
.relative.z-0.inline-flex > span[aria-current="page"] > span,
.relative.z-0.inline-flex > span[aria-current="page"] {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Elementos deshabilitados */
.relative.z-0.inline-flex > span[aria-disabled="true"] > span,
.relative.z-0.inline-flex > span[aria-disabled="true"] {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Flechas específicas */
.relative.z-0.inline-flex > a[rel="prev"],
.relative.z-0.inline-flex > a[rel="next"],
.relative.z-0.inline-flex > span[aria-label*="previous"],
.relative.z-0.inline-flex > span[aria-label*="next"] {
    min-width: 40px !important;
    max-width: 40px !important;
    width: 40px !important;
    font-size: 16px !important;
    font-weight: normal !important;
}

/* Ocultar SVG y elementos problemáticos */
.relative.z-0.inline-flex svg,
.relative.z-0.inline-flex path,
.relative.z-0.inline-flex g {
    display: none !important;
}

/* Forzar contenido de flechas */
.relative.z-0.inline-flex > a[rel="prev"]::before {
    content: "‹" !important;
    font-size: 16px !important;
}

.relative.z-0.inline-flex > a[rel="next"]::after {
    content: "›" !important;
    font-size: 16px !important;
}

/* Ocultar texto original de flechas */
.relative.z-0.inline-flex > a[rel="prev"],
.relative.z-0.inline-flex > a[rel="next"] {
    font-size: 0 !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .relative.z-0.inline-flex {
        gap: 4px !important;
        padding: 8px 0 !important;
    }
    
    .relative.z-0.inline-flex > *,
    .relative.z-0.inline-flex > a,
    .relative.z-0.inline-flex > span {
        margin: 0 2px !important;
        padding: 6px 8px !important;
        min-width: 35px !important;
        height: 35px !important;
        font-size: 13px !important;
    }
    
    .relative.z-0.inline-flex > a[rel="prev"],
    .relative.z-0.inline-flex > a[rel="next"],
    .relative.z-0.inline-flex > span[aria-label*="previous"],
    .relative.z-0.inline-flex > span[aria-label*="next"] {
        min-width: 35px !important;
        max-width: 35px !important;
        width: 35px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .relative.z-0.inline-flex {
        gap: 2px !important;
        padding: 6px 0 !important;
    }
    
    .relative.z-0.inline-flex > *,
    .relative.z-0.inline-flex > a,
    .relative.z-0.inline-flex > span {
        margin: 0 1px !important;
        padding: 4px 6px !important;
        min-width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
    
    .relative.z-0.inline-flex > a[rel="prev"],
    .relative.z-0.inline-flex > a[rel="next"],
    .relative.z-0.inline-flex > span[aria-label*="previous"],
    .relative.z-0.inline-flex > span[aria-label*="next"] {
        min-width: 32px !important;
        max-width: 32px !important;
        width: 32px !important;
        font-size: 12px !important;
    }
} 

/* Estilos para paginación personalizada - sin conflictos con Tailwind */

/* Contenedor principal */
.custom-pagination-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
    padding: 0 !important;
}

.custom-pagination-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    width: 100% !important;
}

/* Información de resultados */
.custom-pagination-info {
    text-align: center !important;
    width: 100% !important;
}

.custom-pagination-text {
    font-size: 16px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.custom-pagination-bold {
    font-weight: 600 !important;
    color: #374151 !important;
}

/* Controles de paginación */
.custom-pagination-controls {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.custom-pagination-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding: 15px 0 !important;
}

/* Elementos individuales de paginación */
.custom-pagination-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 50px !important;
    height: 50px !important;
    padding: 12px 16px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #374151 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: center !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Enlaces de paginación */
.custom-pagination-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Hover effects */
.custom-pagination-item:hover {
    background-color: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #1f2937 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Página activa */
.custom-pagination-active {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.custom-pagination-active .custom-pagination-link {
    color: #ffffff !important;
}

/* Elementos deshabilitados */
.custom-pagination-disabled {
    background-color: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.custom-pagination-disabled .custom-pagination-link {
    color: #9ca3af !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .custom-pagination-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    .custom-pagination-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .custom-pagination-controls {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .custom-pagination-list {
        gap: 6px !important;
        padding: 12px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }
    
    .custom-pagination-item {
        min-width: 45px !important;
        height: 45px !important;
        padding: 10px 14px !important;
        font-size: 15px !important;
    }
    
    .custom-pagination-text {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .custom-pagination-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    .custom-pagination-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .custom-pagination-controls {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .custom-pagination-list {
        gap: 4px !important;
        padding: 10px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
    }
    
    .custom-pagination-item {
        min-width: 40px !important;
        height: 40px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    
    .custom-pagination-text {
        font-size: 14px !important;
    }
}

/* Estilos legacy para compatibilidad */
.pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 30px 0 !important;
    list-style: none !important;
    padding: 0 !important;
}

.pagination a,
.pagination span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 8px 12px !important;
    border: 2px solid #e9ecef !important;
    background-color: #fff !important;
    color: #007bff !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    margin: 0 4px !important;
}

.pagination a:hover {
    background-color: #007bff !important;
    color: #fff !important;
    border-color: #007bff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3) !important;
}

.pagination .active span {
    background-color: #007bff !important;
    color: #fff !important;
    border-color: #007bff !important;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2) !important;
}

.pagination .disabled span {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    border-color: #e9ecef !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}