/* Parte 4/4 del feed (split Anti-Monolith 2026-10-13, PLAN-2026-10-13-anti-monolith-rojos fila 10).
   Orden de cascada en index.html: feed.css → feed-cards.css → feed-toolbar.css → feed-responsive.css
   (antes de feed-preview.css). Los tramos son contiguos: no reordenar ni mover reglas entre archivos. */

/* ─── Responsive ─── */

/* ── Header Feed: Tablet Landscape (768px - 1200px) ── */
@media (max-width: 1200px) {
    .feed-top-row {
        gap: 12px;
    }
    .feed-top-row h1 {
        font-size: 1.75rem;
    }
    .feed-pagination {
        gap: 8px;
    }
    .feed-tag-wrapper {
        min-width: 150px;
        max-width: 280px;
    }
}

/* ── Header Feed: Tablet Portrait (481px - 767px) ── */
@media (max-width: 767px) {
    /* [2026-09-30] Más espacio para las tarjetas en móvil: el contenedor usaba
       el padding de desktop (32px por lado). 12px = mismo gutter que el rayo
       del drawer. El toolbar compensa con margin negativo para seguir a ancho
       completo (su padding-left de 56px vive en sidebar-mobile-drawer.css). */
    .content-area.feed-active {
        padding-left: 12px;
        padding-right: 12px;
    }
    .feed-top-row {
        gap: 10px;
        margin-left: -12px;
        margin-right: -12px;
        padding-right: 12px;
    }
    .feed-top-row h1 {
        font-size: 1.5rem;
        flex: 1 1 100%;
    }
    .feed-articles-count {
        display: none;
    }
    #feed-pagination {
        order: 2;
        flex: 1 1 auto;
    }
    .feed-top-row .feed-filters {
        order: 3;
        flex: 1 1 100%;
        gap: 8px;
    }
    /* Show toggle button on mobile */
    .feed-filters-toggle {
        display: flex;
    }
    /* Chips de vista: fila horizontal siempre visible debajo del botón Filtros */
    .feed-chips-row {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 8px;
        order: 2;
    }
    /* Mismo selector que la regla base para ganar la especificidad */
    .feed-top-row .feed-chips-row > * {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
    }
    /* Collapse filters by default on mobile */
    .feed-filters-collapsible {
        display: none;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        order: 3;
    }
    .feed-filters--open .feed-filters-collapsible {
        display: flex;
    }
    .feed-filters-collapsible > select,
    .feed-filters-collapsible .feed-tag-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }

    /* [2026-06-05] En mobile el dropdown de sugerencias de temas se abría hacia
       ABAJO (top:100%) y quedaba tapado por el teclado virtual. Lo invertimos
       para que crezca hacia ARRIBA desde el input (sobre el teclado). La lista
       interna acota su alto + scrollea para no salirse por el tope; el footer
       "Aplicar" queda siempre visible al pie del dropdown. */
    .feed-tag-suggestions {
        top: auto;
        bottom: calc(100% + 4px);
    }
    .feed-tag-dropdown-list {
        max-height: 40vh;
        overflow-y: auto;
        /* Dropdown invertido (crece hacia arriba): el orden DOM va de MÁS a
           menos relevante. column-reverse pone el ítem más relevante ABAJO,
           pegado al input, en lugar de arriba (lejos del pulgar y la vista).
           Así "de abajo hacia arriba" la 1ª opción es la más relevante —
           espejo correcto del orden desktop. */
        display: flex;
        flex-direction: column-reverse;
    }
    /* [2026-10-05] La campana va en la esquina derecha de la fila del botón
       Filtros (que solo ocupa la izquierda). Absoluta respecto a .feed-top-row
       (sticky = posicionado) para no restarle ancho a los chips de vista. El
       digest ya no vive en la barra móvil, así que no hay con qué encimarse. */
    .feed-top-row > .announcements-bell {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 1;
    }
    /* El botón Filtros ocupa toda la fila: se le reserva el hueco de la campana. */
    .feed-top-row:has(> .announcements-bell) .feed-filters-toggle {
        flex: 0 0 calc(100% - 46px);
        max-width: calc(100% - 46px);
    }
    /* Panel de novedades en mobile.
       FIX z-index: el `.feed-top-row` es position:sticky + z-index:50, lo que
       crea un stacking context propio; el z-index:200 del panel quedaba
       atrapado adentro y NO podía superar al sidebar (z-index:100, hermano del
       content-area a nivel global) → el panel se dibujaba DETRÁS del sidebar.
       Lo sacamos a `position:fixed` (escapa el stacking context del toolbar) y
       le damos z-index 1100 (> sidebar 100 y > tooltips 200) para que quede por
       encima del sidebar.
       FIX ancho/posición: anclado a la derecha (right:12px) y limitado a
       `calc(100vw - 48px - 24px)` — 48px = ancho del sidebar colapsado, 24px =
       márgenes — para que no se salga por la izquierda (detrás del sidebar) ni
       por la derecha. `top:64px` lo posiciona bajo la campana. */
    .announcements-panel {
        position: fixed;
        top: 64px;
        right: 12px;
        left: auto;
        width: auto;
        max-width: calc(100vw - 48px - 24px);
        max-height: calc(100vh - 96px);
        z-index: 1100;
    }

    /* [2026-06-05] Al desplegar los filtros del feed en mobile, ocultar los dos
       FABs flotantes (chatbot abajo-derecha + grabador de reuniones abajo-izq):
       sus `position:fixed` flotan sobre el panel de filtros desplegado e
       interceptan los taps de selects/chips. `:has()` se auto-resetea al
       colapsar los filtros o salir del feed (el `.feed-filters--open` deja de
       existir en el DOM) — sin estado React pegado. */
    body:has(.feed-filters--open) .chatbot-fab,
    body:has(.feed-filters--open) #mobile-recorder-fab {
        display: none !important;
    }
}

/* ── Header Feed: Mobile (≤ 480px) ── */
@media (max-width: 480px) {
    .feed-top-row {
        gap: 12px;
        padding-bottom: 14px;
    }
    .feed-top-row h1 {
        font-size: 1.35rem;
        flex: 1 1 100%;
        margin-bottom: 4px;
    }
    .feed-articles-count {
        order: 1;
        flex: 0 0 auto;
        text-align: center;
        font-size: 10px;
        padding: 6px 10px;
    }
    #feed-pagination {
        order: 2;
        flex: 1 1 100%;
        justify-content: center;
        gap: 10px;
    }
    .feed-pagination-goto {
        display: none;
    }
    .feed-pagination-info {
        font-size: 10px;
        min-width: auto;
    }
    .feed-pagination-btn {
        padding: 8px 16px;
        font-size: 10px;
    }
    .feed-top-row .feed-filters {
        order: 3;
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .feed-filters-collapsible > select,
    .feed-filters-collapsible > .feed-filter-wrap {
        width: 100%;
        min-width: 0;
    }
    .feed-filters-collapsible .feed-tag-wrapper {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 1400px) {
    .feed-grid-featured .feed-card:nth-child(1)   { grid-column: span 7; }
    .feed-grid-featured .feed-card:nth-child(2),
    .feed-grid-featured .feed-card:nth-child(3)   { grid-column: span 5; }
    .feed-grid-regular                            { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}
@media (max-width: 1100px) {
    .feed-grid-featured                           { grid-template-columns: repeat(6, 1fr); }
    .feed-grid-featured .feed-card:nth-child(1)   { grid-column: span 4; grid-row: span 2; }
    .feed-grid-featured .feed-card:nth-child(2),
    .feed-grid-featured .feed-card:nth-child(3)   { grid-column: span 2; min-height: 230px; }
    .feed-grid-regular                            { grid-template-columns: repeat(3, 1fr); }
    .feed-grid-featured .feed-card:nth-child(1) .feed-card-title { font-size: 18px; }
    .feed-grid-featured .feed-card:nth-child(2) .feed-card-title,
    .feed-grid-featured .feed-card:nth-child(3) .feed-card-title { font-size: 13.5px; }
}
@media (max-width: 800px) {
    .feed-grid-featured                           { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .feed-grid-featured .feed-card:nth-child(1)   { grid-column: span 2; grid-row: span 1; min-height: 300px; }
    .feed-grid-featured .feed-card:nth-child(n+2) { grid-column: span 1; }
    .feed-grid-featured .feed-card:nth-child(1) .feed-card-title { font-size: 18px; }
    .feed-grid-featured .feed-card:nth-child(2),
    .feed-grid-featured .feed-card:nth-child(3)   { min-height: 200px; }
    .feed-grid-regular                            { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* Mobile (≤767px, breakpoint estándar del proyecto): UNA card por fila — todas a
   ancho completo como la hero. Antes el corte a 1 columna era 480px, dejando 2
   columnas en 481–767px (no UX friendly en teléfonos). (2026-06-04) */
@media (max-width: 767px) {
    .feed-grid-featured, .feed-grid-regular       { grid-template-columns: 1fr; gap: 10px; }
    .feed-grid-featured .feed-card                { grid-column: span 1 !important; grid-row: span 1 !important; }
    .feed-grid-featured .feed-card:nth-child(1)   { min-height: 200px; }   /* owner 2026-10-04: igual que la 2.ª y 3.ª */
    .feed-grid-featured .feed-card:nth-child(2),
    .feed-grid-featured .feed-card:nth-child(3)   { min-height: 200px; }
}

/* Móvil (≤767px) — owner 2026-10-04: TODAS las noticias con el formato y la altura de la 2.ª y 3.ª tarjeta
   (imagen de fondo + título encima, 200px). Antes: la 1.ª era «héroe» (260px, título 18px) y de la 4.ª en
   adelante imagen arriba + texto abajo (298px). */
@media (max-width: 767px) {
    /* 1.ª tarjeta = como la 2.ª y 3.ª */
    .feed-grid-featured .feed-card:nth-child(1) { min-height: 200px; }
    .feed-grid-featured .feed-card:nth-child(1) .feed-card-body { padding: 48px 18px 16px; }
    .feed-grid-featured .feed-card:nth-child(1) .feed-card-title {
        font-size: 13.5px; font-weight: 600; line-height: 1.35;
        -webkit-line-clamp: 3; line-clamp: 3; letter-spacing: 0; color: #f6f3ef;
        text-shadow: 0 1px 12px rgba(0,0,0,0.7);
    }
    /* De la 4.ª en adelante: mismo formato de imagen de fondo que la 2.ª y 3.ª */
    .feed-grid-regular .feed-card { position: relative; min-height: 200px; }
    .feed-grid-regular .feed-card .feed-card-image {
        position: absolute; inset: 0; aspect-ratio: unset; height: 100%; flex-shrink: 0;
    }
    .feed-grid-regular .feed-card .feed-card-image img { width: 100%; height: 100%; object-fit: cover; }
    .feed-grid-regular .feed-card .feed-card-overlay {
        background: linear-gradient(to bottom, rgba(0,0,0,0.02) 0%, transparent 22%, rgba(0,0,0,0.38) 55%,
            rgba(0,0,0,0.88) 82%, rgba(0,0,0,0.96) 100%);
    }
    .feed-grid-regular .feed-card .feed-card-body {
        position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background: none;
        padding: 48px 18px 16px; gap: 8px;
    }
    .feed-grid-regular .feed-card .feed-card-title {
        font-size: 13.5px; font-weight: 600; line-height: 1.35;
        -webkit-line-clamp: 3; line-clamp: 3; color: #f6f3ef; text-shadow: 0 1px 12px rgba(0,0,0,0.7);
    }
    .feed-grid-regular .feed-card .feed-date-inline { color: rgba(255,255,255,0.58); }
}

/* [Perf 2026-09-14] Skeleton de la primera carga del feed — antes `!ready`
   en FeedPage.jsx mostraba un `.loader-wrap`/`.loader-pulse` genérico (un
   único punto pulsante sobre lienzo negro, reusado de jobs-detail-extras.css)
   sin ninguna forma de contenido. Se siente más lento de lo que realmente es
   porque no anticipa el layout — el usuario no tiene ninguna señal de "acá va
   a aparecer una grilla de tarjetas" hasta que los datos llegan de golpe.
   `.feed-card--skeleton` se monta DENTRO de los mismos `.feed-grid-featured`/
   `.feed-grid-regular` reales (mismo markup que las tarjetas de verdad) — así
   hereda gratis TODOS los breakpoints responsive de arriba sin duplicar
   lógica. Reemplaza únicamente el fondo/animación de `.feed-card` por un
   shimmer (misma receta ya usada en feed-preview.css/analytics.css, con
   nombre de keyframe propio para no pisar esas otras definiciones). */
.feed-card--skeleton {
    background: linear-gradient(110deg, rgba(255,255,255,0.035) 30%, rgba(255,255,255,0.085) 50%, rgba(255,255,255,0.035) 70%);
    background-size: 200% 100%;
    animation: feedSkeletonShimmer 1.5s ease infinite;
    border-color: rgba(124,77,255,0.16);
    pointer-events: none;
}
@keyframes feedSkeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}