/* Archivo: tarjetas-noticias.css */

/* Estilos generales de la tarjeta */
.card-noticia {
    border: 1px solid #e0e0e0; /* Borde suave */
    border-radius: 8px; /* Esquinas redondeadas */
    overflow: hidden; /* Asegura que las esquinas de la imagen se redondeen con el borde de la tarjeta */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    background-color: #fff; /* Fondo blanco para la tarjeta */
    transition: transform 0.3s ease-in-out; /* Efecto hover suave */
    height: 100%; /* Asegura que las tarjetas tengan la misma altura en una fila */
    display: flex; /* Permite flexbox para organizar el contenido interno */
    flex-direction: column; /* Apila los elementos verticalmente */
}

.card-noticia:hover {
    transform: translateY(-5px); /* Ligeramente elevado en hover */
}

/* Área de la imagen */
.card-imagen {
    position: relative; /* Necesario para posicionar la fecha absolutamente */
    overflow: hidden;
}

.card-imagen img {
    width: 100%; /* La imagen ocupa todo el ancho del contenedor */
    height: 200px; /* Altura fija para las imágenes, ajusta si es necesario */
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
}

/* Fecha superpuesta en la imagen */
.fecha-noticia {
    position: absolute;
    bottom: 10px; /* Distancia desde abajo */
    right: 10px; /* Distancia desde la derecha */
    background-color: rgba(14, 44, 74, 0.8); /* Fondo azul oscuro semitransparente */
    color: #fff; /* Texto blanco */
    padding: 5px 10px; /* Espaciado interno */
    border-radius: 4px; /* Esquinas redondeadas */
    font-size: 0.8em;
    font-weight: bold;
}

/* Área del contenido (título y resumen) */
.card-cuerpo {
    padding: 15px; /* Espaciado interno */
    flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
    display: flex;
    flex-direction: column;
}

.titulo-noticia {
    font-size: 1.2em; /* Tamaño de fuente del título */
    margin-top: 0;
    margin-bottom: 10px; /* Espacio debajo del título */
    color: #0e2c4a; /* Color del título similar al azul oscuro del banner */
    line-height: 1.3;
}

.resumen-noticia {
    font-size: 0.9em; /* Tamaño de fuente del resumen */
    color: #555; /* Color de texto para el resumen */
    margin-bottom: 15px; /* Espacio debajo del resumen */
}

/* Área del botón (pie de tarjeta) */
.card-footer-btn {
    padding: 0 15px 15px; /* Espaciado interno, solo abajo y laterales */
    margin-top: auto; /* Empuja el botón hacia abajo */
}

.btn-noticia {
    width: 100%; /* Botón de ancho completo */
    background-color: #0e2c4a; /* Color azul oscuro del banner */
    border-color: #0e2c4a; /* Color del borde del botón */
    font-size: 0.9em;
    padding: 10px 15px;
    color: #fff; /* Texto blanco para el botón */
}

.btn-noticia:hover {
     background-color: #0a2238; /* Tono ligeramente más oscuro en hover */
     border-color: #0a2238;
     color: #fff; /* Asegura que el texto siga blanco en hover */
}

/* Estilos adicionales para el preview */
body {
    background-color: #f8f9fa; /* Un fondo claro para ver mejor las tarjetas */
}

.site-section {
    padding: 60px 0; /* Espaciado superior e inferior */
}

/* Estilos para el selector de año */
.filter-year-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.filter-year-section h4 {
    margin-bottom: 10px;
    color: #0e2c4a;
}

.filter-year-section .btn {
    margin-right: 5px;
    margin-bottom: 5px; /* Espacio entre botones en pantallas pequeñas */
}

/* --- Nuevos estilos para el carrusel de noticias --- */

/* Asegura que cada ítem del carrusel tenga una altura mínima */
.owl-carousel .owl-item {
    /* Eliminamos height: auto; y display/flex-direction aquí para no interferir con Owl Carousel */
    /* Considera usar min-height para forzar una altura mínima consistente */
    min-height: 450px; /* Ajusta este valor según necesites para que las tarjetas se vean uniformes */
}

/* Asegura que la tarjeta dentro del ítem del carrusel ocupe toda la altura disponible */
.owl-carousel .owl-item .card-noticia {
    height: 100%; /* La tarjeta ocupa el 100% de la altura de su contenedor (.owl-item) */
    display: flex; /* Mantenemos flexbox aquí para organizar el contenido de la tarjeta */
    flex-direction: column;
}

/* Solo asegura que la tarjeta ocupe todo el alto del item */
.owl-slide-3 .owl-item .card-noticia {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Asegura que el cuerpo de la tarjeta se expanda para llenar el espacio */
.owl-carousel .owl-item .card-noticia .card-cuerpo {
    flex-grow: 1;
}


/* Ajustes para pantallas más pequeñas si es necesario (puedes añadir más breakpoints) */
@media (max-width: 992px) { /* Ajuste para pantallas medianas y pequeñas */
    .owl-carousel .owl-item {
        min-height: 420px; /* Ajusta la altura mínima para tablets */
    }
}

@media (max-width: 768px) {
    .card-imagen img {
        height: 180px; /* Ajustar altura de imagen en pantallas medianas */
    }
    .owl-carousel .owl-item {
        min-height: 400px; /* Ajusta la altura mínima para móviles */
    }
}

@media (max-width: 576px) {
    .card-imagen img {
        height: 160px; /* Ajustar altura de imagen en pantallas pequeñas */
    }
    .card-cuerpo {
        padding: 10px;
    }
    .card-footer-btn {
        padding: 0 10px 10px;
    }
     .owl-carousel .owl-item {
        min-height: 380px; /* Ajusta la altura mínima para móviles más pequeños */
    }
}