/* style.css - Versión optimizada para integración en Iframe */

/* 1. Ajustes del Body para una integración perfecta */
body {
    /* Hacemos el fondo transparente para que tome el de la página padre (WordPress) */
    background-color: transparent; 
    
    /* Unificamos la fuente para que se parezca a la de un tema moderno de WordPress */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    
    /* Eliminamos cualquier margen o padding para que no haya espacios extraños */
    margin: 0;
    padding: 0; 
}

/* 2. Ocultamos el encabezado de esta página para evitar títulos duplicados */
.main-header {
    display: none;
}

/* 3. Ajustamos el contenedor principal */
.container {
    /* Eliminamos el ancho máximo para que se ajuste al contenedor de WordPress */
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0; /* Sin padding propio */
}

/* 4. Mantenemos el diseño de la cuadrícula de noticias */
#noticias-grid {
    display: grid;
    /* Usamos el diseño que ya decidimos, con tamaño fijo y centrado */
    grid-template-columns: repeat(auto-fill, 340px);
    gap: 25px;
    justify-content: center;
    /* Añadimos un pequeño padding superior para separarlo del título de WordPress */
    padding-top: 0px;
}

/* El resto de estilos de las tarjetas no necesitan grandes cambios */
.noticia-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Estilos para que las tarjetas (ahora enlaces) se vean bien */
a.noticia-card, a.noticia-card:visited {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

a.noticia-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.noticia-imagen {
    width: 100%;
    height: 250px; /* ¡Altura vertical aumentada! Ajusta este valor si quieres más o menos */
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.noticia-contenido {
    padding: 20px;
    flex-grow: 1;
}

.noticia-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    color: #888;
    margin-bottom: 10px;
}

.noticia-fecha {
    text-transform: capitalize;
    margin-bottom: 0;
}

.noticia-ref {
    font-weight: 500;
    color: #aaa;
}

.noticia-contenido h2 {
    font-size: 1.2em;
    margin-top: 5px;
    margin-bottom: 15px;
    color: #333;
}

.noticia-contenido p {
    font-size: 0.95em;
    line-height: 1.6;
    color: #666;
}

.logo-asociacion {
    max-width: 160px;
    height: auto;
    margin-top: 15px;
    display: block;
}

/* =============================================== */
/* === ESTILOS PARA MODO RESPONSIVE (MÓVILES) === */
/* =============================================== */

/* Estas reglas se aplican solo si el ancho de la pantalla es de 768px o menos */

@media (min-width: 576px) {
    #noticias-grid {
        /* Pasamos a 2 columnas */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    #noticias-grid {
        /* Mantenemos el padding superior e inferior de 15px */
        padding-top: 15px;
        padding-bottom: 15px;

        /* Reducimos el padding lateral a 5px para que las tarjetas sean más anchas */
        padding-left: 0px;
        padding-right: 0px;

        /* El gap entre tarjetas se mantiene en 15px */
        gap: 15px;
    }
}

@media (min-width: 992px) {
    #noticias-grid {
        /* Pasamos a 4 columnas */
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1200px) {
    #noticias-grid {
        /* Pasamos a 4 columnas */
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1400px) {
    #noticias-grid {
        /* Pasamos a 2 columnas */
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 2500px) {
    #noticias-grid {
        /* Pasamos a 2 columnas */
        grid-template-columns: repeat(7, 1fr);
    }
}

/* Estilo para el nuevo enlace UEG */
.ueg-link {
    text-decoration: none;
    font-weight: bold;
    color: inherit;
    margin-left: 5px; /* Margen a la izquierda */
}

.ueg-link:hover {
    text-decoration: underline; /* Subrayado solo al pasar el ratón */
}

.noticia-share {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.noticia-share:hover {
    opacity: 1;
}

/* ==========================================================================
   ESTILOS PARA RESALTADO DE NOTICIA COMPARTIDA (PARPADEO)
   ========================================================================== */

/* Animación de parpadeo */
@keyframes highlightBlink {
    0% {
        box-shadow: 0 0 3px 5px rgba(221, 51, 51, 0.7); /* Rojo fuerte */
    }
    50% {
        box-shadow: 0 0 3px 2px rgba(221, 51, 51, 0.3); /* Rojo más suave */
    }
    100% {
        box-shadow: 0 0 3px 5px rgba(221, 51, 51, 0.7); /* Vuelve al rojo fuerte */
    }
}

/* Clase para aplicar la animación */
.noticia-card.highlight-blink {
    animation: highlightBlink 1.5s infinite alternate; /* 1.5s de duración, infinito, alternando */
}

/* Opcional: Pequeña mejora visual al hacer hover */
.noticia-card.highlight-blink:hover {
    animation-play-state: paused; /* Pausa el parpadeo al pasar el ratón */
    box-shadow: 0 0 20px 5px rgba(221, 51, 51, 0.9) !important; /* Más intenso al hacer hover */
}