/* Variables de diseño unificadas con institutosCarreras-dges plugin */
:root {
    --dges-border-color: #d6e2f5;
    --dges-hover-bg: #eef4ff;
    --dges-text-color: #1f2a44;
    --dges-text-muted: #5a6b85;
    --dges-bg-light: #f3f6fb;
    --dges-transition: 0.2s ease;
    --dges-primary: #004481;
    --dges-primary-dark: #00325f;
    --dges-secondary: #007ab8;
    --dges-header-bg: #004481;
    --dges-white: #ffffff;
}

/* OPTIMIZACIÓN: Transiciones CSS instantáneas para paginación */
.nd-pagination-btn {
  will-change: background-color, color, border-color, box-shadow;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nd-news-grid {
  will-change: opacity;
}

/* Evitar reflows innecesarios */
.nd-pagination-container,
.nd-news-grid {
  contain: layout style paint;
}

/**
 * ANIMACIÓN DE CAMBIO DE PÁGINA - BLUR + ZOOM
 * Animación moderna y sutil sin slide ni fade evidente
 */
.exit-animation {
  animation: exit-blur 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes exit-blur {
  0% {
    transform: scale(1);
    filter: blur(0px);
  }
  100% {
    transform: scale(0.95);
    filter: blur(3px);
  }
}

.nd-news-grid [data-page] {
  transition: opacity 0.15s ease-in-out;
}

/**
 * Estilos para el Centro de Noticias [nd_center]
 * Responsive design con grid, slider y búsqueda
 */

/* ==========================================================================
   Contenedor principal
   ========================================================================== */

.nd-center-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Mensaje de cache */
.nd-cache-info {
    background: #f1f1f1;
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 0.9em;
    color: #666;
}

/* ==========================================================================
   Slider de noticias destacadas
   ========================================================================== */

.nd-slider-section {
    margin-bottom: 30px;
}

.nd-slider-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.nd-slider {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.nd-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.nd-slide-active {
    opacity: 1;
}

.nd-slide-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.nd-slide-image {
    width: 100%;
    height: 100%;
}

.nd-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.nd-slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    padding: 40px 30px 30px;
}

.nd-slide-title {
    margin: 0 0 10px 0;
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.2;
    font-family: 'Poppins', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 3.2em;
}

.nd-slide-title a {
    color: white;
    text-decoration: none;
}

.nd-slide-title a:hover {
    text-decoration: underline;
}

.nd-slide-excerpt {
    margin: 0 0 15px 0;
    font-size: 1em;
    line-height: 1.5;
    opacity: 0.9;
}

.nd-slide-meta {
    margin-bottom: 20px;
}

.nd-slide-date {
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    display: inline-block;
}

.nd-slide-button {
    background: #005bb5;
    color: white;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: background 0.3s ease;
    font-family: 'Roboto', sans-serif;
}

.nd-slide-button:hover {
    background: #003d82;
    color: white;
}

/* Controles del slider */
.nd-slider-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none;
}

.nd-slider-btn {
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: background 0.3s ease;
    pointer-events: auto;
}

.nd-slider-btn:hover {
    background: rgba(0,0,0,0.8);
}

/* Indicadores */
.nd-slider-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.nd-slider-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.3s ease;
}

.nd-indicator-active,
.nd-slider-indicator:hover {
    background: white;
}

/* Placeholder del slider */
.nd-slider-placeholder {
    height: 400px;
}

/* ==========================================================================
   Barra de búsqueda - Estilo personalizado
   ========================================================================== */

.nd-search-section {
    margin-bottom: 30px;
    text-align: center;
}

.nd-search-container {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

/* ==========================================================================
   Transiciones para búsqueda
   ========================================================================== */

@keyframes borderFadeIn {
    from {
        border-color: #a0a8c0;
        box-shadow: 0px 0px 0px 0px rgba(13, 78, 135, 0);
    }
    to {
        border-color: #0D4E87;
        box-shadow: 0px 0px 0px 4px rgba(13, 78, 135, 0.18);
    }
}

@keyframes borderFadeOut {
    from {
        border-color: #0D4E87;
        box-shadow: 0px 0px 0px 4px rgba(13, 78, 135, 0.18);
    }
    to {
        border-color: #a0a8c0;
        box-shadow: 0px 0px 0px 0px rgba(13, 78, 135, 0);
    }
}

.nd-search-input {
    width: 100%;
    background-color: #f5f5f5;
    color: #242424;
    padding: 15px 22px;
    min-height: 52px;
    border-radius: 6px;
    outline: none;
    border: 1.5px solid #a0a8c0 !important;
    line-height: 1.15;
    box-shadow: 0px 10px 20px -18px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.05em;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.nd-search-input:focus {
    border: 6px solid #0D4E87;
    border-radius: 6px;
    outline: none;
    background-color: #ffffff;
    box-shadow: 0px 0px 0px 4px rgba(13, 78, 135, 0.18) !important;
    animation: borderFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nd-search-input:blur {
    border: 3px solid #a0a8c0 !important;
    animation: borderFadeOut 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nd-search-input:hover {
    border: 2px solid #004481 !important;
}

.nd-search-input::placeholder {
    color: #999;
    font-size: 0.95em;
}



/* ==========================================================================
   Paginación
   ========================================================================== */

/* ==========================================================================
   Paginación - Estilos unificados del plugin institutosCarreras-dges
   ========================================================================== */

.nd-pagination-container {
    margin-top: 20px;
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid var(--dges-border-color);
}

.nd-pagination-info {
    font-size: 14px;
    color: var(--dges-text-muted);
    margin-bottom: 15px;
}

.nd-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px !important;
}

.nd-pagination-list {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px !important;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    align-items: center;
    flex-wrap: wrap;
}

.nd-pagination-btn {
    padding: 12px 16px !important;
    border: 1px solid var(--dges-border-color);
    background-color: #fff;
    color: var(--dges-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--dges-transition);
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-sizing: border-box;
    box-shadow: none;
}

.nd-pagination-btn:hover:not(.nd-pagination-active) {
    background-color: #f0f6ff;
    border-color: var(--dges-primary);
    color: var(--dges-primary);
    transform: none;
    box-shadow: none;
}

/* Eliminar el outline azul de focus en móviles pero mantener accesibilidad */
.nd-pagination-btn:focus:not(:focus-visible) {
    outline: none;
}

.nd-pagination-btn:focus-visible {
    outline: 2px solid var(--dges-primary);
    outline-offset: 2px;
}

/* Botón paginación activo - Estilos del plugin institutosCarreras */
.nd-pagination-active,
.nd-pagination-btn.nd-pagination-active,
button.nd-pagination-active,
.nd-pagination-active:visited,
.nd-pagination-active:hover,
.nd-pagination-btn.nd-pagination-active:hover,
button.nd-pagination-active:hover,
.nd-pagination-active:focus,
.nd-pagination-active:active {
    background: linear-gradient(135deg, var(--dges-primary) 0%, var(--dges-secondary) 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 14px rgba(0, 70, 160, 0.25) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transform: none !important;
}

/* Puntos suspensivos en paginación */
.nd-pagination-dots {
    display: inline-block;
    padding: 10px 8px;
    color: var(--dges-text-muted);
    font-weight: bold;
    user-select: none;
}

/* ==========================================================================
   Grid de noticias
   ========================================================================== */

.nd-grid-section {
    margin-bottom: 30px;
}

.nd-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 30px;
}

/* Tarjetas de noticia - FULLCLICKEABLE */
.nd-news-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.nd-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.nd-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nd-card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

/* Overlay oscuro para tarjetas del grid - solo condicional (via .nd-card-image-overlay) */
/* Mismo nivel de oscuridad que el carrusel para consistencia */
.nd-card-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2;
    pointer-events: none;
}

.nd-card-image a {
    pointer-events: none; /* Evitar que el link de la imagen intercepte el click */
}

.nd-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.nd-news-card:hover .nd-card-image img {
    transform: scale(1.05);
}

.nd-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #FFD000;
    color: #000000;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
    line-height: 1.2;
    z-index: 10 !important;
}

.nd-card-content {
    padding: 20px 20px 15px;
    flex: 1;
    min-height: 120px;
    display: flex;
    flex-direction: column;
}

.nd-card-date {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
}

.nd-card-title {
    margin: 0 0 20px 0;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.3;
    font-family: 'Poppins', sans-serif;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 3.9em;
    min-height: 2.6em;
}

.nd-card-title::after {
    content: '';
    display: block;
    flex-grow: 1;
}

.nd-card-title a {
    color: #333;
    text-decoration: none;
    pointer-events: none; /* Evitar que el link intercepte el click */
}

.nd-news-card:hover .nd-card-title a {
    color: #005bb5;
}

.nd-card-excerpt {
    margin-bottom: 15px;
    color: #666;
    line-height: 1.5;
}

.nd-card-footer {
    padding: 5px 20px 20px;
    text-align: center;
    margin-top: auto;
}

.nd-card-link {
    display: inline-block;
    background: #005bb5;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    pointer-events: auto; /* Permitir clics en el botón */
    cursor: pointer;
}

/* Hacer clickeables la imagen, título y contenido */
.nd-card-clickable {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.nd-card-clickable:hover {
    opacity: 0.95;
}

/* Indicadores visuales de interacción */
.nd-news-card:hover .nd-card-image {
    transform: scale(1.02);
}

.nd-news-card:hover .nd-card-title {
    color: #005bb5;
}

/* Accesibilidad para navegación por teclado - SIN outline visible en click */
.nd-news-card:focus {
    outline: none !important;
}

.nd-news-card:hover .nd-card-link {
    background: #003d82;
    color: white;
}

/* Estados de carga y error */
.nd-loading,
.nd-no-results,
.nd-error-message,
.nd-no-news-message {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 1.1em;
}

.nd-error-message,
.nd-no-news-message {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    color: #856404;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* ==========================================================================
   Tablet: 545px a 921px (Astra breakpoints)
   ========================================================================== */
@media (min-width: 545px) and (max-width: 921px) {
    .nd-center-container {
        padding: 15px;
    }
    
    .nd-slider {
        height: 380px;
    }
    
    .nd-slide-overlay {
        padding: 25px 20px 20px;
    }
    
    .nd-slide-title {
        font-size: 1.6em;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .nd-slide-excerpt {
        font-size: 1em;
        line-height: 1.4;
        margin-bottom: 12px;
    }
    
    .nd-search-input {
        padding: 12px 16px;
        min-height: 45px;
        font-size: 0.95em;
    }
    
    .nd-news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .nd-card-image {
        height: 180px;
    }
    
    /* Paginación responsive - reducir tamaño de botones */
    .nd-pagination-btn {
        padding: 8px 12px;
        font-size: 0.9em;
        min-width: 36px;
    }
    
    /* Mantener estilos activos en tablet */
    .nd-pagination-active,
    .nd-pagination-btn.nd-pagination-active,
    button.nd-pagination-active {
        background: #005bb5 !important;
        color: white !important;
        border-color: #005bb5 !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 4px rgba(0, 154, 218, 0.3) !important;
    }
    
    .nd-pagination-dots {
        padding: 8px 5px;
        font-size: 0.9em;
    }
    
    .nd-pagination-list {
        gap: 5px;
    }
}

/* ==========================================================================
   Mobile: hasta 544px (Astra breakpoints)
   ========================================================================== */
@media (max-width: 544px) {
    /* Prevenir scroll horizontal global */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    .nd-center-container,
    .nd-slider-section,
    .nd-slider-wrapper,
    .nd-slider,
    .nd-slide,
    .nd-slide-content {
        overflow-x: hidden;
        max-width: 100%;
    }
    /* Contenedor sin padding lateral */
    .nd-center-container {
        padding: 0;
        max-width: 100%;
    }
    
    /* Restaurar padding solo para el contenido después del slider */
    .nd-search-section,
    .nd-news-section,
    .nd-pagination-container,
    .nd-cache-info {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Slider section sin margin para aprovechar espacio */
    .nd-slider-section {
        margin-bottom: 20px;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Slider mobile - sin border radius y 100% width SIN overflow */
    .nd-slider-wrapper {
        border-radius: 0;
        box-shadow: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        overflow: hidden;
    }
    
    .nd-slider {
        height: 320px !important;
        width: 100%;
        overflow: hidden;
    }
    
    /* Imagen ocupa 100% del contenedor sin espacios grises */
    .nd-slide-image,
    .nd-slide-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    
    .nd-slide-overlay {
        padding: 25px 15px 20px;
        background: linear-gradient(transparent 20%, rgba(0,0,0,0.92));
    }
    
    .nd-slide-title {
        font-size: 1.1em;
        margin-bottom: 8px;
        line-height: 1.3;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .nd-slide-excerpt {
        font-size: 0.85em;
        line-height: 1.4;
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .nd-slide-date {
        font-size: 0.85em;
        padding: 5px 12px;
    }
    
    .nd-slide-button {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    
    .nd-search-input {
        padding: 10px 14px;
        min-height: 40px;
        font-size: 0.9em;
    }
    
    .nd-news-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .nd-card-image {
        height: 160px;
    }
    
    /* Centrar imágenes en móviles */
    .nd-card-image img {
        object-position: center;
    }
    
    /* Paginación mobile - más compacta */
    .nd-pagination-btn {
        padding: 6px 10px;
        font-size: 0.8em;
        min-width: 32px;
    }
    
    /* Mantener estilos activos en mobile */
    .nd-pagination-active,
    .nd-pagination-btn.nd-pagination-active,
    button.nd-pagination-active {
        background: #005bb5 !important;
        color: white !important;
        border-color: #005bb5 !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 4px rgba(0, 154, 218, 0.3) !important;
    }
    
    .nd-pagination-dots {
        padding: 6px 3px;
        font-size: 0.8em;
    }
    
    .nd-pagination-list {
        gap: 3px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Ocultar texto "Anterior" y "Siguiente" en mobile, solo mostrar iconos */
    .nd-pagination-text {
        display: none;
    }
    
    .nd-pagination-icon {
        display: inline-block;
    }
    
    /* Botones prev/next más pequeños en mobile */
    .nd-pagination-prev,
    .nd-pagination-next {
        padding: 6px 8px;
        min-width: auto;
    }
}

/* ==========================================================================
   Estilos adicionales para consistencia con el tema
   ========================================================================== */

/* Botones principales - forzar estilo consistente */
.nd-card-link,
.nd-slide-button,
.nd-pagination-btn,
.nd-back-button,
button[type="submit"],
input[type="submit"] {
    font-family: 'Roboto', sans-serif !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

/* PAGINACIÓN ACTIVA - Estilos prioritarios que deben aplicarse siempre */
body .nd-pagination-container .nd-pagination-active,
body .nd-pagination-list .nd-pagination-active,
body .nd-pagination .nd-pagination-active,
body .nd-pagination-btn[aria-current="page"],
body button.nd-pagination-btn.nd-pagination-active,
body .nd-pagination-active:focus,
body .nd-pagination-active:active,
body .nd-pagination-active:hover,
body .nd-pagination-active:visited,
html body .nd-pagination-active {
    background-color: #003d82 !important;
    background: #003d82 !important;
    color: #ffffff !important;
    border: 1px solid #003d82 !important;
    border-color: #003d82 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
}

/* Sobrescribir cualquier estilo del tema Astra */
.ast-container .nd-pagination-active,
.site-content .nd-pagination-active,
.entry-content .nd-pagination-active,
#primary .nd-pagination-active,
#content .nd-pagination-active,
.wp-block-group .nd-pagination-active {
    background-color: #003d82 !important;
    background: #003d82 !important;
    color: #ffffff !important;
    border: 1px solid #003d82 !important;
}

/* Forzar estilos incluso con atributos style inline */
.nd-pagination-active[style] {
    background-color: #004582 !important;
    background: #004582 !important;
    color: #ffffff !important;
    border-color: #004582 !important;
}

/* Usar pseudo-elementos como último recurso */
.nd-pagination-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #003d82;
    z-index: -1;
    border-radius: 5px;
}

/* Estilo extremadamente específico con máxima prioridad */
body.wp-admin .nd-pagination-active,
body.wordpress .nd-pagination-active,
body[class] .nd-pagination-active,
html[class] body[class] .nd-pagination-active,
div[class] .nd-pagination-active,
.nd-pagination-active.nd-pagination-active.nd-pagination-active {
    background-color: #003d82 !important;
    background-image: none !important;
    background: #003d82 !important;
    color: #ffffff !important;
    border: 1px solid #003d82 !important;
    border-color: #003d82 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow: 0 3px 6px rgba(0, 69, 130, 0.4) !important;
}

/* CSS Custom Properties como fallback adicional */
.nd-pagination-active {
    --nd-active-bg: #003d82;
    --nd-active-color: #ffffff;
    --nd-active-border: #003d82;
    background-color: var(--nd-active-bg) !important;
    color: var(--nd-active-color) !important;
    border-color: var(--nd-active-border) !important;
}

/* ULTIMO RECURSO - Sobrescribir todo incluyendo estilos inline y hover */
.nd-pagination-active,
.nd-pagination-active:hover,
.nd-pagination-active:focus,
.nd-pagination-active:active,
.nd-pagination-active:visited,
button.nd-pagination-active,
button.nd-pagination-active:hover,
button.nd-pagination-active:focus,
a.nd-pagination-active,
a.nd-pagination-active:hover,
.nd-pagination-list .nd-pagination-active,
.nd-pagination-container button.nd-pagination-active {
    background-color: #003d82 !important;
    background-image: none !important;
    background: #003d82 !important;
    color: #ffffff !important;
    border: 1px solid #003d82 !important;
    border-color: #003d82 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: 0 3px 6px rgba(0, 69, 130, 0.4) !important;
    transform: none !important;
}

/* Colores específicos para botones principales */
.nd-card-link,
.nd-slide-button,
.nd-back-button {
    background: #005bb5 !important;
    color: white !important;
    border: none !important;
}

.nd-card-link:hover,
.nd-slide-button:hover,
.nd-back-button:hover {
    background: #003d82 !important;
    color: white !important;
}

/* Forzar fuentes en todo el plugin */
.nd-center-container,
.nd-center-container *:not(.nd-card-title):not(.nd-slide-title):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.nd-single-wrapper,
.nd-single-wrapper *:not(.nd-single-title):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Títulos específicos con Poppins */
.nd-card-title,
.nd-slide-title,
.nd-single-title,
.nd-content h2,
.nd-content h3,
.nd-content h4 {
    font-family: 'Poppins', sans-serif !important;
}

/* Ajustes para compatibilidad */
.nd-center-container *,
.nd-single-wrapper * {
    box-sizing: border-box;
}

/* ==========================================================================
   Mejoras para experiencia táctil en móvil
   ========================================================================== */

/* En móviles, mejorar área táctil de elementos clickeables */
@media (max-width: 768px) {
    
    /* Eliminar hover effects en móvil para evitar estados pegajosos */
    .nd-news-card:hover {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Mejorar área táctil de imagen */
    .nd-card-image a {
        display: block;
        -webkit-tap-highlight-color: rgba(0, 154, 218, 0.1);
        tap-highlight-color: rgba(0, 154, 218, 0.1);
    }
    
    /* Mejorar área táctil del título */
    .nd-card-title a {
        display: block;
        padding: 8px 0;
        -webkit-tap-highlight-color: rgba(0, 154, 218, 0.1);
        tap-highlight-color: rgba(0, 154, 218, 0.1);
        touch-action: manipulation;
    }
    
    /* Mejorar área táctil del botón Ver más */
    .nd-card-link {
        
        display: inline-flex; /* Cambiar a inline-flex para mejor alineación */
        align-items: center;
        justify-content: center;
        width: auto;
        margin: 0 auto; /* Centrar el botón */
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
        tap-highlight-color: rgba(255, 255, 255, 0.2);
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        pointer-events: auto; /* Asegurar que sea clickeable */
    }
    
    /* Asegurar que el contenido de la tarjeta no interfiera con scroll */
    .nd-card-content {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Hacer el grid más friendly para scroll */
    .nd-news-grid {
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Añadir un pequeño padding para evitar clics accidentales */
    .nd-news-card {
        padding: 2px;
        touch-action: pan-y;
    }
    
    /* Feedback visual sutil al tocar elementos clickeables */
    .nd-card-image a:active,
    .nd-card-title a:active,
    .nd-card-link:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Para pantallas muy pequeñas, aumentar espaciado entre tarjetas */
@media (max-width: 480px) {
    .nd-news-grid {
        gap: 20px;
    }
    
    .nd-news-card {
        margin-bottom: 10px;
    }
    
    /* Asegurar que el footer del botón esté centrado */
    .nd-card-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 20px 20px;
    }
    
    /* El botón debe ocupar un ancho apropiado */
    .nd-card-link {
        min-width: 100px;
        padding: 12px 24px;
        font-size: 14px;
    }
}