/* Propuesta Dis — vistas Arco / Cronológico / Temas (solo maqueta). Base: lore-propuesta. */

/* --- Franjas del arco --- */
.aw-lore-band { margin: 28px 0 14px; }
.aw-lore-band:first-of-type { margin-top: 8px; }
.aw-lore-band__h {
  margin: 0 0 14px; padding: 0 0 8px;
  font: 500 1.15rem/1.2 var(--aw-font-ui, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase;
  color: var(--aw-ink-2, #E3D9BD); border-bottom: 1px solid var(--aw-line-soft, rgba(227,217,189,.25));
}
.aw-lore-cards--band { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--aw-s-6, 1.25rem); margin-bottom: 8px; }
@media (max-width: 899px) { .aw-lore-cards--band { grid-template-columns: 1fr; } }
@media (min-width: 900px) and (max-width: 1199px) { .aw-lore-cards--band { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* --- Badge Serie abierta --- */
.aw-lore-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  font: 600 .6875rem/1.2 var(--aw-font-body, system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase;
  color: var(--aw-gold, #C8A25A); border: 1px solid rgba(200,162,90,.55); border-radius: 0;
  vertical-align: middle;
}

/* --- Puntito rojo --- */
.aw-lore-dot, .aw-card.is-new .aw-card__meta::after, .aw-row.is-new .aw-lore-dot, .aw-lidx__a.aw-lidx__new::after {
  width: 8px; height: 8px; border-radius: 50%; background: #C43B3B; flex-shrink: 0;
}
.aw-card.is-new .aw-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aw-card.is-new .aw-card__meta::after {
  content: ""; display: inline-block;
  box-shadow: 0 0 0 0 rgba(196,59,59,.5);
  animation: aw-lore-dot-pulse 2.2s ease-out infinite;
}
.aw-lore-dot {
  display: inline-block; margin-left: 6px;
  box-shadow: 0 0 0 0 rgba(196,59,59,.5);
  animation: aw-lore-dot-pulse 2.2s ease-out infinite;
}
.aw-lidx__a.aw-lidx__new { display: flex; align-items: center; gap: 8px; }
.aw-lidx__a.aw-lidx__new::after {
  content: ""; display: inline-block; margin-left: auto;
  box-shadow: 0 0 0 0 rgba(196,59,59,.5);
  animation: aw-lore-dot-pulse 2.2s ease-out infinite;
}
@keyframes aw-lore-dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(196,59,59,.5); }
  70% { box-shadow: 0 0 0 8px rgba(196,59,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,59,59,0); }
}
@media (prefers-reduced-motion: reduce) {
  .aw-card.is-new .aw-card__meta::after, .aw-lore-dot, .aw-lidx__a.aw-lidx__new::after { animation: none; }
}

/* --- Hueco de portada --- */
.aw-card__media--hueco {
  display: grid; place-items: center; aspect-ratio: 4/3;
  background: linear-gradient(160deg, #1a1916 0%, #2a2824 100%);
  border-bottom: 1px solid var(--aw-line, rgba(227,217,189,.2));
  color: var(--aw-ink-2, #E3D9BD); font: 500 .8125rem/1.35 var(--aw-font-body, system-ui, sans-serif);
  text-align: center; padding: 16px; letter-spacing: .04em;
}
.aw-card__media--hueco span { max-width: 18ch; border: 1px dashed rgba(200,162,90,.4); padding: 10px 12px; }

.aw-card.is-new .aw-card__meta:has(.aw-lore-dot)::after { content: none; display: none; }

/* ========== VISTAS: toolbar + chips ========== */
.aw-vistas-banner {
  margin: 0 0 16px; padding: 10px 14px;
  font: 500 .8125rem/1.4 var(--aw-font-body, system-ui, sans-serif);
  color: var(--aw-ink-2, #E3D9BD);
  background: rgba(20,19,17,.72);
  border: 1px solid rgba(200,162,90,.45);
}
.aw-vistas-banner strong { color: var(--aw-gold, #C8A25A); }

.aw-vistas-toolbar {
  margin: 16px 0 20px;
  padding: 14px 16px;
  background: rgba(20,19,17,.78);
  border: 1px solid rgba(227,217,189,.35);
  box-shadow: inset 0 0 0 1px rgba(200,162,90,.12);
}
.aw-vistas-modes {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 12px;
}
.aw-vistas-pill {
  flex: 1 1 0; min-width: 7.5rem;
  padding: 10px 14px;
  font: 600 .6875rem/1.2 var(--aw-font-body, system-ui, sans-serif);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--aw-gold, #C8A25A);
  background: transparent;
  border: 1px solid rgba(200,162,90,.55);
  cursor: pointer;
  text-align: center;
}
.aw-vistas-pill[aria-selected="true"] {
  background: #E3D9BD;
  color: #141311;
  border-color: #E3D9BD;
}
.aw-vistas-pill:focus-visible { outline: 2px solid var(--aw-gold, #C8A25A); outline-offset: 2px; }

.aw-vistas-chips {
  display: flex; flex-wrap: nowrap; gap: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; scrollbar-width: thin;
}
.aw-vistas-chip {
  flex: 0 0 auto;
  padding: 6px 12px;
  font: 600 .6875rem/1.2 var(--aw-font-body, system-ui, sans-serif);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--aw-gold, #C8A25A);
  background: transparent;
  border: 1px solid rgba(200,162,90,.55);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.aw-vistas-chip[aria-pressed="true"] {
  background: #E3D9BD;
  color: #141311;
  border-color: #E3D9BD;
}
.aw-vistas-chip:focus-visible { outline: 2px solid var(--aw-gold, #C8A25A); outline-offset: 2px; }

.aw-vistas-hint {
  margin: 0 0 4px;
  font: 500 .75rem/1.35 var(--aw-font-body, system-ui, sans-serif);
  color: rgba(227,217,189,.65); letter-spacing: .04em;
}

/* Chip de tema en card */
.aw-theme-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.aw-theme-chip {
  display: inline-block; padding: 2px 8px;
  font: 600 .625rem/1.2 var(--aw-font-body, system-ui, sans-serif);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--aw-gold, #C8A25A);
  border: 1px solid rgba(200,162,90,.4);
  border-radius: 999px;
}

.aw-card__date {
  display: inline-block;
  margin-left: 6px;
  font: 500 .75rem/1.2 var(--aw-font-body, system-ui, sans-serif);
  color: rgba(227,217,189,.7); letter-spacing: .02em;
}
body[data-vista="arco"] .aw-card__date,
body[data-vista="temas"] .aw-card__date { display: none; }
body[data-vista="crono"] .aw-card__date { display: inline-block; }

/* Ocultar franjas arco fuera de Arco */
body[data-vista="crono"] .aw-lore-bands--arco,
body[data-vista="temas"] .aw-lore-bands--arco { display: none; }
body[data-vista="arco"] .aw-lore-bands--crono,
body[data-vista="arco"] .aw-lore-bands--temas,
body[data-vista="crono"] .aw-lore-bands--temas,
body[data-vista="temas"] .aw-lore-bands--crono { display: none; }

/* Legacy hide class — vistas = estética/orden, no filtrado (C no la usa). */
.aw-card.is-filtered-out { display: none !important; }
.aw-lore-band.is-filtered-out { display: none !important; }

@media (max-width: 699px) {
  .aw-vistas-modes { flex-direction: column; }
  .aw-vistas-pill { flex: 1 1 auto; width: 100%; }
}