/* ================================
   LISTADO NOTAS PLUGIN - BASE STYLES
   ================================ */

/* Este plugin reutiliza las mismas clases del plugin blog-home */
/* Solo se agregan estilos específicos para las diferencias */

/* ================================
   LAYOUT COL-8 Y COL-4
   ================================ */

.listado-notas-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.listado-notas-wrapper .col-8 {
    width: 66.666667%;
    padding: 0 15px;
}

.listado-notas-wrapper .col-4 {
    width: 33.333333%;
    padding: 0 15px;
}

/* ================================
   POSTS PRINCIPALES (COLUMNA IZQUIERDA)
   ================================ */

/* Los posts en col-12 ocupan todo el ancho */
.listado-post-item {
    width: 100%;
}

/* Aquí puedes personalizar el diseño de las cards principales */
/* Ejemplo: si quieres que tengan un layout horizontal */
.listado-post-item .post-card {
    /* Tus estilos personalizados aquí */
    /* Por defecto heredan los estilos del plugin blog-home */
}

/* ================================
   SIDEBAR - POSTS RECIENTES
   ================================ */

.sidebar-recent-posts {
    /* Estilos del contenedor sidebar */
}

.sidebar-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #000;
}

.sidebar-posts-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Cards del sidebar (sin imagen) */
.sidebar-post-card {
    /* Heredan estilos de .post-card */
    /* Aquí van tus personalizaciones */
}

/* Badge de categoría en sidebar (sin imagen, arriba del título) */
.sidebar-badge {
    display: inline-block;
    margin-bottom: 10px;
    /* Hereda estilos de .post-category-badge */
}

/* ================================
   ANIMACIONES (heredadas)
   ================================ */

.listado-posts-container {
    transition: opacity 0.3s ease;
}

.listado-posts-container.loading {
    opacity: 0.3;
    pointer-events: none;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 768px) {
    .listado-notas-wrapper .col-8,
    .listado-notas-wrapper .col-4 {
        width: 100%;
    }
    
    .sidebar-recent-posts {
        margin-top: 40px;
    }
}