/* Feed de noticias monitoreadas (D14). Usa las variables de app.css; claro/oscuro sin reglas extra. */
.badge-outline { background: transparent; color: hsl(var(--muted-foreground)); border: 1px dashed hsl(var(--muted-foreground) / .65); }

/* resumen compacto */
.summary-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; padding: .55rem 1rem; margin-bottom: .75rem; }
.summary-row .sum { display: inline-flex; align-items: baseline; gap: .3rem; font-size: .86rem; color: hsl(var(--muted-foreground)); }
.summary-row .sum b { font-size: 1.05rem; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }
.summary-row a.sum:hover { text-decoration: none; color: hsl(var(--primary)); }
.summary-row .sum-sep { width: 1px; align-self: stretch; background: hsl(var(--line)); }
.sys-details { margin: 0 0 1rem; padding: .6rem 1rem; }
.sys-details > summary { font-size: .88rem; }
.sys-details[open] > summary { margin-bottom: .75rem; }

/* pestanas de estado */
.feed-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.feed-tabs a { white-space: nowrap; }
.feed-tabs .n { display: inline-block; min-width: 1.4em; margin-left: .2rem; padding: 0 .35rem; border-radius: 999px; font-size: .72rem; line-height: 1.5; text-align: center; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.feed-tabs a.on .n { background: hsl(var(--primary) / .14); color: hsl(var(--primary)); }
.feed-filters .grow { flex: 1 1 14rem; }
.feed-filters label { min-width: 8rem; }
.feed-filters .uk-select, .feed-filters .uk-input { width: 100%; }

/* cuadricula: 1 columna en movil, 2-4 en escritorio segun el ancho */
.feed-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.feed-card { display: flex; flex-direction: column; min-width: 0; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--line)); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.feed-card.state-descartada, .feed-card.state-filtrada { background: hsl(var(--card) / .6); }
.feed-img { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, hsl(var(--muted)), hsl(var(--accent))); }
/* marcador cuando no hay imagen o no carga: icono Lucide «image» como mascara */
.feed-img::before { content: ""; position: absolute; inset: 0; margin: auto; width: 2.4rem; height: 2.4rem; background: hsl(var(--muted-foreground) / .45); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E") center / contain no-repeat; }
.feed-img img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: hsl(var(--muted)); }
.feed-img.failed img { display: none; }
.feed-card.state-descartada .feed-img img, .feed-card.state-filtrada .feed-img img { filter: grayscale(.6); opacity: .85; }
.feed-body { display: flex; flex-direction: column; flex: 1; gap: .3rem; padding: .8rem .9rem .9rem; }
.feed-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .5rem; }
.feed-meta .badge { white-space: normal; }
.feed-src { font-weight: 600; }
.feed-title { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 650; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.feed-title a { color: inherit; }
.feed-title a:hover { color: hsl(var(--primary)); text-decoration: none; }
.feed-reason { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.feed-note { margin: .15rem 0 0; padding: .35rem .55rem; border-radius: 8px; background: hsl(var(--muted)); overflow-wrap: anywhere; }
.feed-note.warn { background: hsl(var(--warn-bg)); color: hsl(var(--warn)); }
.feed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: auto; padding-top: .55rem; }
.feed-actions form { display: inline; }
.feed-more-link { margin-left: auto; }
.feed-more { grid-column: 1 / -1; display: flex; justify-content: center; padding: .5rem 0 1rem; }
.spinner { display: inline-block; width: .85em; height: .85em; border: 2px solid hsl(var(--muted-foreground) / .4); border-top-color: hsl(var(--primary)); border-radius: 50%; vertical-align: -.1em; animation: feed-spin .8s linear infinite; }
@keyframes feed-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* detalle */
.detail-title { overflow-wrap: anywhere; }
.detail-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
.detail-main, .detail-side { display: grid; gap: 1rem; min-width: 0; }
.detail-img { border-radius: 12px; border: 1px solid hsl(var(--line)); aspect-ratio: 16 / 9; max-height: 420px; }
.article-text p { margin: 0 0 .85rem; line-height: 1.6; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 1rem 1.5rem; }
.timeline li::before { content: ""; position: absolute; left: .3rem; top: .45rem; bottom: -.1rem; width: 2px; background: hsl(var(--line)); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: .3rem; width: .7rem; height: .7rem; border-radius: 50%; background: hsl(var(--ok)); box-shadow: 0 0 0 3px hsl(var(--card)); }
.timeline .tl-stop::after { background: hsl(var(--muted-foreground)); }
.timeline .tl-fail::after { background: hsl(var(--err)); }
.timeline .tl-pending::after, .timeline .tl-skip::after { background: hsl(var(--card)); border: 2px solid hsl(var(--muted-foreground) / .7); }
.timeline .tl-line { overflow-wrap: anywhere; color: hsl(var(--muted-foreground)); }

@media (max-width: 860px) {
  .summary-row { gap: .15rem .9rem; padding: .5rem .8rem; }
  .summary-row .sum-sep { display: none; }
  .summary-row .sum-title { flex-basis: 100%; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-side { order: -1; }
  .feed-filters label { flex: 1 1 8rem; }
}