body {
    background-color: #1e1e1e; /* Fondo oscuro */

        }
        
        .hero-section {
            /* 1. Imagen de fondo */
            background-image: url('../../assets/img/Blog.png'); /* <-- REEMPLAZA ESTA URL CON TU IMAGEN */
            
            /* 2. Asegura que la imagen cubra toda la sección */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            /* 3. Ocupa toda la altura de la pantalla */
            height: 100vh; /* vh = viewport height */
            
            /* 4. Color de texto para que contraste con la imagen */
            color: white;

            /* 5. Sombra de texto para mejorar la legibilidad */
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
        }
.main-title {
    color: #f1f1f1;
}

/* --- Barra Lateral (Sidebar) --- */
.sidebar-widget {
    background-color: #2e2e2e; /* Fondo oscuro del widget */
    padding: 1.5rem;
    border-radius: 4px; /* Bordes menos redondeados */
    margin-bottom: 2rem;
}

.sidebar-widget2 {
    padding: 1.5rem;
    border-radius: 4px; /* Bordes menos redondeados */
    margin-bottom: 2rem;
}

.widget-title {
    color: #f1f1f1;
    font-weight: 600;
    margin-bottom: 1rem;
    /* Línea divisora verde */
    border-bottom: 2px solid #006c36; 
    padding-bottom: 0.5rem;
}

/* INPUT DE BÚSQUEDA */
#search-input {
    background-color: #555555; 
    border: 1px solid #555555;
    color: #f1f1f1;
    box-shadow: none; /* Quitar cualquier sombra o estilo de foco */
}
#search-input::placeholder {
    color: #aaaaaa;
}
.btn-custom-search {
    background-color: #006c36; /* Fondo del botón de búsqueda (verde) */
    border-color: #006c36;
    color: white;
}
.btn-custom-search:hover {
    background-color: rgb(57, 131, 57);
    border-color: rgb(57, 131, 57);
    color: white;
}

/* LISTAS DE CATEGORÍAS Y ARTÍCULOS */
.category-list li, .recent-posts-list li {
    background-color: #333333; /* Fondo de los ítems de lista */
    margin-bottom: 2px; /* Espacio mínimo */
    padding: 0.5rem 1rem;
}
.category-list a, .recent-posts-list a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.2s;
}
.category-list a:hover, .recent-posts-list a:hover {
    color: rgb(57, 131, 57); /* Verde al hacer hover */
}
.category-list .bi, .recent-posts-list .bi {
    font-size: 0.8rem;
    margin-right: 0.5rem;
    color: #cccccc; /* Color sutil para las flechas */
}

/* --- Tarjetas de Artículo --- */
.article-card {
    background-color: #444444; /* Fondo de la tarjeta */
    color: #f1f1f1;
    border: none;
    border-radius: 8px;
    height: 100%;
}
.card-img-top {
    /* Si usas la etiqueta <img> en lugar del placeholder, asegúrate de que se vea bien */
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.card-img-placeholder {
    height: 200px; 
    background-color: #6c757d; 
    border-bottom: 1px solid #555555;
}
.btn-custom-green {
    background-color: #006c36;
    color: white;
    font-weight: 500;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    transition: background-color 0.2s;
}
.btn-custom-green:hover {
    background-color: rgb(57, 131, 57);
}
/* --- Paginación --- */
.pagination .page-item .page-link {
    background-color: #444444;
    border: 1px solid #666666;
    color: #f1f1f1;
}

.pagination .page-item.active .page-link {
    background-color: rgb(57, 131, 57);
    border-color: rgb(57, 131, 57);
    color: white;
}
.pagination .page-item.disabled .page-link {
    background-color: #383838;
    border-color: #444444;
    color: #777777;
}

/* ==============================================
   TRANSICIONES Y EFECTOS DE DESVANECIMIENTO (FADE)
   ============================================== */

/* 1. Transiciones para las Tarjetas de Artículo */
/* Esto hace que cualquier cambio en la tarjeta (como la sombra o el color) sea suave. */
.article-card {
    /* Mantenemos tus estilos anteriores... */
    background-color: #444444; 
    border-radius: 8px;
    height: 100%;
    
    /* 💥 Transición para cualquier propiedad que cambie (transform, box-shadow) 💥 */
    transition: all 0.3s ease-in-out; 
}

/* Efecto de 'Levantamiento' al pasar el cursor (Añade suavidad visual) */
.article-card:hover {
    transform: translateY(-5px); /* Se levanta un poco */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); /* Sombra sutil */
}

/* 2. Transiciones para Enlaces de la Barra Lateral */
/* Asegura que el cambio de color al hacer hover sea suave. */
.category-list a, 
.recent-posts-list a {
    color: #cccccc;
    text-decoration: none;
    display: block; /* Necesario para que el hover sea visible */
    
    /* 💥 Transición para el cambio de color 💥 */
    transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.category-list a:hover, 
.recent-posts-list a:hover {
    color: rgb(57, 131, 57); /* Cambio de color suave */
}

/* 3. Transiciones para Botones (Seguir Leyendo y Buscar) */
/* Hace que el cambio de color al pasar el cursor sea gradual. */
.btn-custom-green,
.btn-custom-search {
    /* 💥 Transición para los cambios de color y fondo 💥 */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


/* 4. Efecto de Opacidad al Filtrar (Para simular desvanecimiento al desaparecer/aparecer) */
/* NOTA: Para un desvanecimiento completo al filtrar, la lógica debe estar en JS.
   Este CSS ayuda a que los elementos que sí existen se vean suaves. */

/* Ejemplo si deseas reducir la opacidad en una categoría NO activa (requiere la clase 'active-category' del JS) */
.category-list li {
    transition: opacity 0.3s ease-in-out;
}
/* Al hacer click en una categoría, si quieres que las NO seleccionadas se atenúen */
/* .category-list li:not(.active-category) {
    opacity: 0.6;
} */