/* Propuesta C · Lateral / compacto (Dis). Se carga después de lore-vistas.css. */
.aw-vx-c .aw-vistas-banner {
  margin: 0 0 4px; padding: 7px 12px;
  background: rgba(20,19,17,.5); border: 1px solid rgba(200,162,90,.25);
  font: 400 .75rem/1.4 var(--aw-font-body); color: var(--aw-ink-2);
}
.aw-vx-c__lab {
  margin: 0 0 10px;
  font: 500 .6875rem/1 var(--aw-font-display); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(200,162,90,.85);
}
.aw-vx-c__select { display: none; }

/* ---------- Escritorio: raíl izquierdo sticky ---------- */
@media (min-width: 900px) {
  .aw-vx-c__layout {
    display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px;
    align-items: start; margin-top: 28px;
  }
  .aw-vx-c__rail {
    position: sticky; top: calc(var(--aw-topbar-h, 64px) + 20px);
    max-height: calc(100vh - var(--aw-topbar-h, 64px) - 40px); overflow-y: auto;
    padding: 4px 20px 16px 0;
    border-right: 1px solid var(--aw-line-soft);
    scrollbar-width: thin;
  }
  .aw-vx-c .aw-vistas-modes { flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0; }
  .aw-vx-c .aw-vistas-pill {
    flex: none; min-width: 0; width: 100%; text-align: left;
    padding: 8px 12px;
    font: 500 1.0625rem/1.2 var(--aw-font-ui); letter-spacing: .01em; text-transform: none;
    color: var(--aw-ink-2); background: none; border: 0; border-left: 2px solid transparent;
  }
  .aw-vx-c .aw-vistas-pill:hover { color: var(--aw-ink-hi); background: rgba(227,217,189,.04); }
  .aw-vx-c .aw-vistas-pill[aria-selected="true"] {
    color: var(--aw-ink-hi); background: linear-gradient(90deg, rgba(227,217,189,.10), rgba(227,217,189,0));
    border-left-color: var(--aw-gold);
  }
  /* Filigrana: filete con rombo */
  .aw-vx-c__orn {
    display: block; position: relative; height: 1px; margin: 20px 0 20px;
    background: linear-gradient(90deg, transparent, rgba(200,162,90,.45), transparent);
  }
  .aw-vx-c__orn::after {
    content: ""; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px;
    transform: translateX(-50%) rotate(45deg); background: #141311; border: 1px solid rgba(200,162,90,.7);
  }
  .aw-vx-c .aw-vistas-chips { flex-direction: column; flex-wrap: nowrap; gap: 0; overflow: visible; padding: 0; }
  .aw-vx-c .aw-vistas-chip {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 5px 12px;
    font: 400 .9375rem/1.25 var(--aw-font-ui); letter-spacing: .01em; text-transform: none;
    color: var(--aw-ink-muted); background: none; border: 0; border-radius: 0;
  }
  .aw-vx-c .aw-vistas-chip::before {
    content: ""; flex: none; width: 6px; height: 6px; transform: rotate(45deg);
    border: 1px solid rgba(200,162,90,.55);
  }
  .aw-vx-c .aw-vistas-chip:hover { color: var(--aw-ink); }
  .aw-vx-c .aw-vistas-chip[aria-pressed="true"] { background: none; color: var(--aw-cream-hi); }
  .aw-vx-c .aw-vistas-chip[aria-pressed="true"]::before { background: var(--aw-gold); border-color: var(--aw-gold); }

  .aw-vx-c__main .aw-lidx__head { margin-top: 0; }
  .aw-vx-c__main .aw-lore-band:first-of-type { margin-top: 0; }
}

/* ---------- Móvil: select compacto + chips en scroll ---------- */
@media (max-width: 899px) {
  .aw-vx-c__rail {
    /* scrolls with page on mobile (not sticky/fixed) — David 05/10 */
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px;
    margin: 12px calc(-1 * var(--aw-gutter)) 20px; padding: 10px var(--aw-gutter);
    background: rgba(20,19,17,.94); border-bottom: 1px solid var(--aw-line-soft);
  }
  .aw-vx-c__rail > .aw-vx-c__lab, .aw-vx-c__orn, .aw-vx-c .aw-vistas-modes { display: none; }
  .aw-vx-c__select { display: block; grid-column: 1 / -1; }
  .aw-vx-c__select select {
    width: 100%; padding: 8px 32px 8px 12px; appearance: none; -webkit-appearance: none;
    font: 500 1rem/1.2 var(--aw-font-ui); color: var(--aw-ink-hi);
    background: #1a1916 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23c8a25a'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 6px;
    border: 1px solid rgba(200,162,90,.4); border-radius: var(--aw-r-sm);
  }
  .aw-vx-c .aw-vistas-chips { grid-column: 1 / -1; gap: 6px; padding-bottom: 2px; }
  .aw-vx-c .aw-vistas-chip {
    padding: 3px 10px; font: 500 .75rem/1.1 var(--aw-font-body); letter-spacing: .02em; text-transform: none;
    color: var(--aw-ink-2); border-color: rgba(200,162,90,.35);
  }
  .aw-vx-c .aw-vistas-chip[aria-pressed="true"] { background: var(--aw-cream); color: var(--aw-cream-ink); border-color: var(--aw-cream); }
}

/* Callout de modo — contraste claro entre vistas */
.aw-vista-callout {
  margin: 12px 0 20px; padding: 14px 18px;
  border: 1px solid rgba(200,162,90,.55);
  background: linear-gradient(135deg, rgba(227,217,189,.12), rgba(20,19,17,.6));
  border-radius: 2px;
}
.aw-vista-callout__mode {
  display: block; margin: 0 0 6px;
  font: 600 1.125rem/1.2 var(--aw-font-display, Georgia, serif);
  letter-spacing: .04em; color: var(--aw-cream-hi, #E3D9BD);
}
.aw-vista-callout__txt {
  display: block; font: 400 .9375rem/1.45 var(--aw-font-body, system-ui, sans-serif);
  color: var(--aw-ink-2, #c9c0ad);
}
.aw-vista-callout__txt b { color: var(--aw-gold, #C8A25A); font-weight: 600; }
.aw-vista-callout__mode,
.aw-vista-callout__txt { display: none; }
body[data-vista="arco"] .aw-vista-callout__mode[data-for="arco"],
body[data-vista="arco"] .aw-vista-callout__txt[data-for="arco"],
body[data-vista="crono"] .aw-vista-callout__mode[data-for="crono"],
body[data-vista="crono"] .aw-vista-callout__txt[data-for="crono"],
body[data-vista="temas"] .aw-vista-callout__mode[data-for="temas"],
body[data-vista="temas"] .aw-vista-callout__txt[data-for="temas"] { display: block; }
body[data-vista="arco"] .aw-vista-callout__mode:not([data-for="arco"]),
body[data-vista="arco"] .aw-vista-callout__txt:not([data-for="arco"]),
body[data-vista="crono"] .aw-vista-callout__mode:not([data-for="crono"]),
body[data-vista="crono"] .aw-vista-callout__txt:not([data-for="crono"]),
body[data-vista="temas"] .aw-vista-callout__mode:not([data-for="temas"]),
body[data-vista="temas"] .aw-vista-callout__txt:not([data-for="temas"]) { display: none !important; }

/* Chips solo en Temas (= saltos de sección). Arco/Crono: layout sin filtro. */
/* Nota: .aw-vx-c vive en <body>, no es descendiente. */
body.aw-vx-c:not([data-vista="temas"]) .aw-vx-c__orn,
body.aw-vx-c:not([data-vista="temas"]) .aw-vx-c__lab--themes,
body.aw-vx-c:not([data-vista="temas"]) .aw-vistas-chips { display: none !important; }
@media (max-width: 899px) {
  body.aw-vx-c:not([data-vista="temas"]) .aw-vx-c__rail {
    grid-template-columns: 1fr;
  }
}