/**
 * Ajustes finales de estilo - Plugin Noticias DGES
 * Personalización para integración con el sitio
 */


/* ==========================================================================
   Forzar estilos de botones del plugin sobre cualquier tema
   ========================================================================== */

.nd-back-link,
.nd-back-button {
    background: #005bb5 !important;
    color: white !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.nd-back-link:hover,
.nd-back-button:hover,
.nd-back-link:focus,
.nd-back-button:focus,
.nd-back-link:active,
.nd-back-button:active {
    background: #003d82 !important;
    color: white !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

/* FIX: Alineación y color del botón de volver */
.nd-back-link,
.nd-back-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important; /* Espacio entre flecha y texto */
}

.nd-back-link *,
.nd-back-button * {
    color: inherit !important; /* Heredar color del botón */
}

/* ==========================================================================
   Contenedores de imágenes - Altura uniforme y overflow hidden
   ========================================================================== */

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

.nd-slide-image {
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.nd-card-image img,
.nd-slide-image img,
.nd-featured-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Responsive para imágenes de tarjetas */
@media (max-width: 768px) {
    .nd-card-image {
        height: 180px !important;
    }
}

@media (max-width: 480px) {
    .nd-card-image {
        height: 160px !important;
    }
}

/* ==========================================================================
   Barra de búsqueda - Forzar estilo consistente
   ========================================================================== */

.nd-search-container {
    width: 100% !important;
    display: block !important;
}

.nd-search-input {
    width: 100% !important;
    background-color: #f5f5f5 !important;
    color: #242424 !important;
    border-radius: 4px !important;
    border: none !important;
    outline: none !important;
    font-family: 'Roboto', sans-serif !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.nd-search-input:focus {
    border-bottom: 2px solid #5b5fc7 !important;
    border-radius: 4px 4px 2px 2px !important;
    outline: none !important;
}

.nd-search-input:hover {
    outline: 1px solid lightgrey !important;
}

/* ==========================================================================
   Botones - Estilo personalizado DGES
   ========================================================================== */

/* Todos los botones del plugin */
.nd-card-link,
.nd-slide-button,
.nd-back-button,
.nd-pagination-btn {
    background: #005bb5 !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 10px 20px !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-align: center !important;
}

/* Estados hover para botones */
.nd-card-link:hover,
.nd-slide-button:hover,
.nd-back-button:hover,
.nd-pagination-btn:hover {
    background: #003d82 !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Botón activo de paginación */
.nd-pagination-active {
    background: #003d82 !important;
    color: white !important;
}

/* ==========================================================================
   Fuentes - Roboto y Poppins
   ========================================================================== */

/* Contenedor base - Roboto */
.nd-center-container,
.nd-single-wrapper {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Todos los elementos - Roboto por defecto */
.nd-center-container *,
.nd-single-wrapper * {
    font-family: 'Roboto', sans-serif !important;
}

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

/* ==========================================================================
   Colores de enlace consistentes
   ========================================================================== */

.nd-card-title a {
    color: #333 !important;
    text-decoration: none !important;
}

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


/* ==========================================================================
   Ajustes para compatibilidad con temas
   ========================================================================== */

/* Solo aplicar box-sizing y familia de fuentes básica */
.nd-center-container *,
.nd-single-wrapper * {
    box-sizing: border-box !important;
}

/* Asegurar tipografía consistente sin romper layout */
.nd-center-container {
    font-family: 'Roboto', sans-serif !important;
}

.nd-single-wrapper {
    font-family: 'Roboto', sans-serif !important;
}

/* ==========================================================================
   Responsive - Ajustes móviles
   ========================================================================== */

@media (max-width: 768px) {
    .nd-card-link,
    .nd-slide-button,
    .nd-search-btn,
    .nd-back-button {
        padding: 8px 16px !important;
        font-size: 0.9em !important;
    }
}

@media (max-width: 480px) {
    .nd-card-link,
    .nd-slide-button,
    .nd-search-btn,
    .nd-back-button {
        padding: 6px 12px !important;
        font-size: 0.8em !important;
    }
}

/* ==========================================================================
   Grid Layout - Forzar 3x3 tarjetas
   ========================================================================== */

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

/* Responsive Grid */
@media (max-width: 768px) {
    .nd-news-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    .nd-news-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* ==========================================================================
   Tarjetas - Forzar estructura correcta
   ========================================================================== */

.nd-news-card {
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    display: block !important;
}

.nd-news-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

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

.nd-card-content {
    padding: 20px !important;
    flex: 1 !important;
    display: block !important;
}

.nd-card-footer {
    padding: 0 20px 20px !important;
    display: block !important;
    text-align: center !important;
}

/* ==========================================================================
   Estados de carga y error
   ========================================================================== */

.nd-loading,
.nd-no-results,
.nd-error-message {
    font-family: 'Roboto', sans-serif !important;
    text-align: center !important;
    padding: 20px !important;
    color: #666 !important;
}

/* ==========================================================================
   Compatibilidad con modo oscuro (si aplica)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .nd-center-container,
    .nd-single-wrapper {
        color-scheme: light !important; /* Forzar modo claro */
    }
}