/* ==================================================
   FRONT-BARRALATERAL.CSS
   Tipo: Zona específica de portada
   Ámbito: Solo portada activa
   Define: Layout y estilos de la zona Barra Lateral
           (columna derecha de dos-columnas). Lista
           vertical de noticias con imagen pequeña.
           Clases: lavoz-zona-barralateral, lavoz-barralateral-*
   Depende de: front-portada-estructura.css
   ================================================== */

.lavoz-zona-barralateral {
    position: sticky;
    top: var(--lavoz-gap-md);
}

.lavoz-barralateral-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lavoz-barralateral-card {
    background: var(--lavoz-color-bg);
    overflow: hidden;
    padding: var(--lavoz-gap-sm) 0;
    border-bottom: 1px dotted var(--lavoz-color-border-dark);
}

.lavoz-barralateral-card:last-child {
    border-bottom: none;
}



/* ==================================================
   RESPONSIVE BARRALATERAL
   En mobile desaparece como columna lateral
   (lo gestiona portada-estructura) y sus cards
   pasan a lista horizontal 2 col → 1 col.
   ================================================== */

/* 1024px — cuando la dos-columnas colapsa a 1fr,
   la barralateral pasa a grid de 2 columnas */
@media (max-width: 1024px) {
    .lavoz-barralateral-stack {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--lavoz-card-gap);
    }
}

/* 480px — mobile: lista compacta imagen izq + título der */
@media (max-width: 480px) {
    .lavoz-barralateral-stack {
        grid-template-columns: 1fr;
    }

    .lavoz-barralateral-card .lavoz-barralateral-titulo {
        margin-top: 0;
    }
}