/* ════════════════════════════════════════════════════════════════════════
   kreawave — Sistema de diseño · tema oscuro violeta-tinta
   Tokens canónicos (ver DESIGN_SYSTEM.md). Cargado por TODAS las páginas.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Fuentes auto-alojadas (CSP default-src 'self' → sin Google Fonts) ──── */
@font-face {
  font-family: "Space Grotesk Var";
  src: url("/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Var";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Superficies */
  --bg: #0c0a12;
  --bg-soft: #131019;
  --bg-card: #18141f;
  --bg-card-hover: #1f1929;
  --border: #2a2335;
  --border-soft: #211b2b;
  /* Texto */
  --text: #f2eef7;
  --muted: #a89db8;
  --muted-2: #8b7fa0;   /* ≥4.5:1 sobre las cards (WCAG AA texto pequeño) */
  --on-accent: #160c1f; /* texto sobre acentos brillantes */
  /* Marca / acentos */
  --accent: #a06bff;
  --accent-2: #ff5d8f;
  --accent-grad: linear-gradient(135deg, #a06bff, #ff5d8f);
  --wave-grad: linear-gradient(115deg, #a06bff 0%, #ff5d8f 50%, #ffb84d 100%);
  /* Funcionales */
  --green: #38d39f;
  --red: #ff5d73;
  --amber: #ffb84d;
  --gold: #ffc34d;
  --gold-soft: rgba(255, 195, 77, .16);
  --heart: #ff5d8f;
  /* Tipografía */
  --font-display: "Space Grotesk Var", "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-text: "Inter Var", "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  /* Espaciado (base-4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  /* Radios */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  /* Sombras y brillo de marca */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --shadow: 0 14px 44px rgba(0, 0, 0, .5);
  --shadow-glow: 0 0 40px rgba(160, 107, 255, .25);
  /* Movimiento */
  --t-fast: .12s ease;
  --t: .18s ease;
  --t-slow: .3s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-text);
  font-size: 15px; line-height: 1.55; min-height: 100vh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Titulares en la display por defecto (el catálogo y legales heredan) */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
}

/* Foco visible — accesibilidad */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a3048; }

/* Animaciones decorativas: respetar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .wb, .hero-wave span, .demo-progress-bar, .card.playing::before { animation: none !important; }
}

/* ── Waveform logo ─────────────────────────────────────────────────────── */
.waveform-logo {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  width: 52px; height: 52px; flex-shrink: 0;
  background: linear-gradient(145deg, #221a33, #15101f);
  border: 1px solid var(--border); border-radius: 14px;
}
.wb { display: block; width: 4px; border-radius: 2px; background: var(--accent-grad); animation: wave 1.56s ease-in-out infinite; }
.wb:nth-child(1) { height: 12px; animation-delay: 0s; }
.wb:nth-child(2) { height: 22px; animation-delay: .15s; }
.wb:nth-child(3) { height: 32px; animation-delay: .3s; }
.wb:nth-child(4) { height: 22px; animation-delay: .45s; }
.wb:nth-child(5) { height: 12px; animation-delay: .6s; }
@keyframes wave { 0%,100% { transform:scaleY(1); opacity:.9; } 50% { transform:scaleY(.4); opacity:.45; } }

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 28px;
  background: linear-gradient(180deg, #130f1b 0%, #0c0a12 100%);
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-title {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; letter-spacing: -.4px;
  background: var(--wave-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.brand-sub { font-weight: 400; opacity: .7; }
.sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.stats { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.pill {
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.pill b { color: var(--text); }
.pill.premium-pill { border-color: rgba(255,195,77,.35); color: var(--gold); }
.pill.fav-pill { border-color: rgba(240,101,117,.4); color: var(--heart); cursor: pointer; transition: background .1s; }
.pill.fav-pill:hover { background: rgba(240,101,117,.1); }
.pill.fav-pill.active { background: rgba(240,101,117,.15); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.layout {
  display: grid; grid-template-columns: 252px 1fr; gap: 20px;
  max-width: 1440px; margin: 0 auto; padding: 20px 24px 130px;
}

/* ── Filters sidebar ────────────────────────────────────────────────────── */
.filters {
  position: sticky; top: 82px; align-self: start;
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 14px 13px;
  max-height: calc(100vh - 106px); overflow: auto;
}
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.filters h2 { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--muted-2); font-weight: 600; }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 11.5px; padding: 0; }
.link-btn:hover { text-decoration: underline; }

.field { margin: 11px 0; }
.field > label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 5px; font-weight: 500; text-transform: uppercase; letter-spacing: .6px; }
.field.check label { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 12.5px; text-transform: none; letter-spacing: 0; }

input[type="search"], select {
  width: 100%; background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; font-size: 13px;
}
input[type="search"]:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(160,107,255,.12); }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 4px 9px; font-size: 11.5px; cursor: pointer;
  transition: all .12s; user-select: none; white-space: nowrap;
}
.chip:hover { background: var(--bg-card-hover); color: var(--text); border-color: var(--accent); }
.chip .c { color: var(--muted-2); margin-left: 3px; font-size: 10px; }
.chip.on { background: var(--accent-grad); border-color: transparent; color: #0c0a12; font-weight: 600; }
.chip.on .c { color: rgba(10,14,24,.5); }
.chip.premium-chip:not(.on) { border-color: rgba(255,195,77,.4); color: var(--gold); }
.chip.premium-chip.on { background: linear-gradient(135deg,#ffc34d,#e6a817); border-color: transparent; color: #1a1200; }

/* ── Results bar ────────────────────────────────────────────────────────── */
.results-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 10px; flex-wrap: wrap;
}
.results-bar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.count { color: var(--muted); font-size: 13px; }
.count b { color: var(--text); }

.bar-controls { display: flex; align-items: center; gap: 8px; }
.sort { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.sort select { width: auto; padding: 6px 9px; }

/* View toggle */
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 6px 10px; font-size: 14px; transition: all .1s; line-height: 1;
}
.view-btn:hover { color: var(--text); background: var(--bg-card); }
.view-btn.active { background: var(--accent-grad); color: #0c0a12; }

/* ── Grid modes ─────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 12px;
  transition: grid-template-columns .2s;
}
.grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.grid.list {
  grid-template-columns: 1fr;
  gap: 6px;
}

/* ── Card — base ────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 9px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  position: relative;
}
.card:hover { border-color: var(--border); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.card.playing { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 20px rgba(160,107,255,.1); }
.card.premium-card { border-color: rgba(255,195,77,.2); }
.card.premium-card:hover { border-color: rgba(255,195,77,.5); box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 18px rgba(255,195,77,.05); }
.card.fav-card { border-color: rgba(240,101,117,.25); }

/* now-playing dot */
.card.playing::before {
  content: ""; position: absolute; top: 10px; right: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.6);} }

/* ── Card header ────────────────────────────────────────────────────────── */
.card-header { display: flex; align-items: center; gap: 9px; }
.voice-avatar {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #221a33, #16121d);
  border: 1px solid var(--border); font-size: 18px; line-height: 1;
}
.voice-avatar.premium-av { background: linear-gradient(145deg, #2a2010, #1a1500); border-color: rgba(255,195,77,.3); }
.card-meta { flex: 1; min-width: 0; }
.card-lang { font-weight: 600; font-size: 14px; line-height: 1.2; }
.card-id { font-size: 10px; color: var(--muted-2); font-family: ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.badges { display: flex; gap: 4px; flex-wrap: wrap; }
.badge { font-size: 10px; padding: 2px 7px; border-radius: 999px; white-space: nowrap; font-weight: 600; }
.badge.premium { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(255,195,77,.3); }

/* ── Traits & tags ──────────────────────────────────────────────────────── */
.traits { display: flex; flex-wrap: wrap; gap: 4px; }
.trait {
  font-size: 11px; background: rgba(160,107,255,.08);
  border: 1px solid rgba(160,107,255,.15); color: var(--accent);
  padding: 2px 7px; border-radius: 6px;
}
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: 10.5px; background: var(--bg-soft); border: 1px solid var(--border-soft); color: var(--muted); padding: 2px 6px; border-radius: 5px; }
.tag.use { color: var(--accent-2); border-color: rgba(255,93,143,.2); }

/* ── Description (hidden in compact/list) ───────────────────────────────── */
.desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.desc.no-desc { font-style: italic; color: var(--muted-2); }

/* ── Quality stars ──────────────────────────────────────────────────────── */
.quality-stars { display: inline-flex; gap: 1px; }
.qs { font-size: 12px; color: var(--amber); }
.qs.empty { color: var(--border); }
.tier-label { font-size: 10.5px; color: var(--muted-2); }
.tier-label.premium { color: rgba(255,195,77,.7); }

/* ── Meta line ──────────────────────────────────────────────────────────── */
.meta-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11px; color: var(--muted-2); }

/* ── Card bottom ────────────────────────────────────────────────────────── */
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  background: var(--accent-grad); border: none; color: #160c1f;
  font-weight: 600; padding: 8px 13px; border-radius: 9px;
  cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: filter .12s, transform .1s, box-shadow .15s;
  position: relative; overflow: hidden;
}
/* Shimmer on hover — luz que barre el botón */
.btn::after {
  content: ''; position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.2), transparent);
  transform: skewX(-18deg);
  transition: left .45s ease;
  pointer-events: none;
}
.btn:not(:disabled):hover::after { left: 140%; }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn.ghost::after { display: none; }
.btn.ghost:hover { background: var(--bg-card); border-color: var(--accent); }

/* Listen button waveform icon */
.listen-icon { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.listen-icon span { display: block; width: 3px; border-radius: 1.5px; background: currentColor; }
.listen-icon span:nth-child(1) { height: 5px; }
.listen-icon span:nth-child(2) { height: 9px; }
.listen-icon span:nth-child(3) { height: 12px; }
.listen-icon span:nth-child(4) { height: 9px; }
.listen-icon span:nth-child(5) { height: 5px; }
.card.playing .listen-icon span { animation: barsPlay .6s ease-in-out infinite alternate; }
.card.playing .listen-icon span:nth-child(2) { animation-delay: .1s; }
.card.playing .listen-icon span:nth-child(3) { animation-delay: .2s; }
.card.playing .listen-icon span:nth-child(4) { animation-delay: .3s; }
.card.playing .listen-icon span:nth-child(5) { animation-delay: .4s; }
@keyframes barsPlay { from{transform:scaleY(.25);} to{transform:scaleY(1);} }

/* ── Favorite button ────────────────────────────────────────────────────── */
.fav-btn {
  background: none; border: 1px solid var(--border); color: var(--muted-2);
  border-radius: 8px; padding: 7px 9px; cursor: pointer; font-size: 14px; line-height: 1;
  transition: all .12s; flex-shrink: 0;
}
.fav-btn:hover { border-color: var(--heart); color: var(--heart); background: rgba(240,101,117,.08); }
.fav-btn.active { border-color: rgba(240,101,117,.5); color: var(--heart); background: rgba(240,101,117,.1); }

/* ── Use this voice button (F-01) ───────────────────────────────────────── */
.use-voice-btn {
  display: inline-flex; align-items: center; padding: 5px 9px;
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); font-size: 12px; text-decoration: none; white-space: nowrap;
  transition: all .12s; flex-shrink: 0;
}
.use-voice-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(160,107,255,.08); }

/* ── Vote ───────────────────────────────────────────────────────────────── */
.vote { display: flex; align-items: center; gap: 3px; }
.vote button {
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--muted);
  border-radius: 7px; padding: 5px 8px; cursor: pointer; font-size: 12px; transition: all .1s;
}
.vote button:hover { color: var(--text); border-color: var(--accent); }
.vote button.voted-up   { background: rgba(61,214,140,.12); border-color: var(--green); color: var(--green); }
.vote button.voted-down { background: rgba(240,101,117,.12); border-color: var(--red);  color: var(--red);  }
.vote .score { font-size: 11.5px; color: var(--muted); min-width: 22px; text-align: center; }

/* ── COMPACT mode overrides ─────────────────────────────────────────────── */
.grid.compact .card { padding: 11px; gap: 7px; border-radius: 11px; }
.grid.compact .card:hover { transform: translateY(-1px); }
.grid.compact .voice-avatar { width: 32px; height: 32px; border-radius: 8px; font-size: 15px; }
.grid.compact .card-lang { font-size: 13px; }
.grid.compact .card-id { display: none; }
.grid.compact .desc { display: none; }
.grid.compact .tags { display: none; }
.grid.compact .tier-label { display: none; }
.grid.compact .meta-line { gap: 5px; }
/* In compact, make listen btn fill full width */
.grid.compact .card-bottom { flex-direction: column; gap: 6px; }
.grid.compact .btn.play-btn { width: 100%; justify-content: center; padding: 7px; font-size: 12.5px; }
.grid.compact .card-actions { display: flex; justify-content: space-between; width: 100%; align-items: center; }
.grid.compact .vote button { padding: 4px 7px; font-size: 11px; }

/* ── LIST mode overrides ─────────────────────────────────────────────────── */
.grid.list .card {
  flex-direction: row; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: 10px;
}
.grid.list .card:hover { transform: none; }
.grid.list .card-header { min-width: 200px; flex-shrink: 0; }
.grid.list .card-lang { font-size: 13.5px; }
.grid.list .voice-avatar { width: 34px; height: 34px; border-radius: 9px; font-size: 16px; }
.grid.list .traits { flex-shrink: 0; width: 170px; }
.grid.list .desc { display: none; }
.grid.list .tags { flex: 1; }
.grid.list .meta-line { flex-shrink: 0; gap: 6px; }
.grid.list .tier-label { display: none; }
.grid.list .card-bottom { flex-direction: row; margin-top: 0; flex-shrink: 0; gap: 6px; }
.grid.list .btn.play-btn { padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }

/* ── Load more / empty ──────────────────────────────────────────────────── */
.more { display: grid; place-items: center; margin-top: 24px; gap: 12px; }
.more .btn { padding: 10px 22px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; }
.empty-wave { display: flex; align-items: flex-end; gap: 4px; height: 32px; }
.empty-wave span { display: block; width: 5px; border-radius: 3px; background: var(--border); opacity: .5; }
.empty-wave span:nth-child(1) { height: 12px; }
.empty-wave span:nth-child(2) { height: 22px; }
.empty-wave span:nth-child(3) { height: 32px; }
.empty-wave span:nth-child(4) { height: 22px; }
.empty-wave span:nth-child(5) { height: 12px; }
.empty-state p { color: var(--muted); font-size: 14px; }

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius); height: 200px; overflow: hidden; position: relative;
}
.grid.compact .skeleton { height: 140px; }
.grid.list .skeleton { height: 58px; border-radius: 10px; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.03) 50%, transparent 100%);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }

/* ── Floating player ─────────────────────────────────────────────────────── */
.player {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 40;
  width: min(700px, calc(100% - 32px));
  background: linear-gradient(135deg, #18141f, #120e1a);
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(160,107,255,.07) inset;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px; padding: 11px 17px;
}
.player-info { display: flex; flex-direction: column; min-width: 0; }
.player-info strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player audio { height: 34px; width: 100%; }
.player-close {
  order: 3; background: var(--bg-soft); border: 1px solid var(--border); color: var(--muted);
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 11px;
  display: grid; place-items: center; transition: all .1s;
}
.player-close:hover { color: var(--text); border-color: var(--accent); }
.muted { color: var(--muted); font-size: 11.5px; margin-top: 1px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text);
  padding: 9px 16px; border-radius: 10px; font-size: 13px;
  box-shadow: var(--shadow); z-index: 60;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
  white-space: normal; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Subnav (catalog back-link) ──────────────────────────────────────────── */
.subnav {
  display: flex; align-items: center; gap: 10px; padding: 9px 28px;
  background: var(--bg-soft); border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.subnav-back { color: var(--accent); text-decoration: none; }
.subnav-back:hover { text-decoration: underline; }
.subnav-sep { color: var(--muted-2); }
.subnav-title { color: var(--muted); }
.subnav-cta {
  margin-left: auto; background: var(--accent-grad); color: #160c1f;
  padding: 5px 12px; border-radius: 8px; font-weight: 600;
  text-decoration: none; font-size: 12.5px; white-space: nowrap;
}
.subnav-cta:hover { filter: brightness(1.1); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .filters { position: static; max-height: none; }
  .grid.list .card { flex-wrap: wrap; }
  .grid.list .card-header { min-width: unset; }
  .grid.list .traits { width: auto; }
}

/* Móvil estrecho: la barra superior, la subnav y la de resultados no tenían
   reglas → se amontonaban/desbordaban a ~390px. */
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .subnav { padding: 9px 14px; flex-wrap: wrap; }
  .layout { padding: 16px 12px; }
  .stats { font-size: 12px; gap: 6px; flex-wrap: wrap; }
  .results-bar { flex-wrap: wrap; gap: 10px; }
  .bar-controls { width: 100%; justify-content: space-between; }
  .grid, .grid.compact, .grid.comfortable { grid-template-columns: 1fr; }
}

/* ── Legal: footer compartido + páginas de documentos ──────────────────────
   Añadido para A1 (LSSI/DSA/RGPD): footer legal en todas las páginas + layout
   server-rendered de los documentos. Todo server-side; sin JS (CSP script-src 'self'). */
.site-legal-footer {
  border-top: 1px solid var(--border-soft);
  padding: 28px 20px 36px; margin-top: 56px;
  text-align: center; background: var(--bg-soft);
}
.legal-nav {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: center; justify-content: center;
}
.legal-nav a {
  color: var(--muted); text-decoration: none; font-size: 13.5px;
  transition: color .12s ease;
}
.legal-nav a:hover { color: var(--accent); text-decoration: underline; }
.legal-foot-note { color: var(--muted-2); font-size: 12.5px; margin-top: 14px; }

/* Documento legal renderizado */
.legal-body { background: var(--bg); }
.legal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border-soft);
  background: var(--bg-soft); position: sticky; top: 0; z-index: 10;
}
.legal-header a { color: var(--muted); text-decoration: none; font-size: 14px; }
.legal-home-link { font-weight: 600; color: var(--text) !important; }
.legal-header a:hover { color: var(--accent); }
.legal-main { max-width: 820px; margin: 0 auto; padding: 40px 24px 64px; }
.legal-title { font-size: 28px; font-weight: 700; margin-bottom: 18px; line-height: 1.25; }
.legal-content { color: var(--text); font-size: 15px; line-height: 1.7; }
.legal-content h2 { font-size: 21px; margin: 30px 0 12px; line-height: 1.3; }
.legal-content h3 { font-size: 17px; margin: 24px 0 10px; color: var(--text); }
.legal-content h4 { font-size: 15px; margin: 18px 0 8px; color: var(--muted); }
.legal-content p { margin: 12px 0; }
.legal-content ul, .legal-content ol { margin: 12px 0 12px 26px; }
.legal-content li { margin: 6px 0; }
.legal-content a { color: var(--accent); }
.legal-content code {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 5px; padding: 1px 6px; font-size: 13px;
  font-family: ui-monospace, "Cascadia Code", monospace;
}
.legal-pre {
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 14px 16px; margin: 16px 0; overflow-x: auto;
}
.legal-pre code {
  background: none; border: none; padding: 0; font-size: 13px;
  white-space: pre-wrap; word-break: break-word; color: var(--text);
}
.legal-content blockquote {
  border-left: 3px solid var(--accent); margin: 16px 0; padding: 8px 16px;
  background: var(--bg-soft); color: var(--muted); border-radius: 0 8px 8px 0;
}
.legal-content hr { border: none; border-top: 1px solid var(--border-soft); margin: 28px 0; }
.legal-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px; }
.legal-table th, .legal-table td {
  border: 1px solid var(--border-soft); padding: 8px 12px; text-align: left; vertical-align: top;
}
.legal-table th { background: var(--bg-card); color: var(--text); font-weight: 600; }
.legal-banner {
  background: rgba(240, 180, 41, .12); border: 1px solid rgba(240, 180, 41, .4);
  border-radius: 10px; padding: 14px 18px; margin: 0 0 24px; font-size: 14px; color: var(--text);
}
.legal-placeholder {
  background: rgba(240, 180, 41, .25); color: var(--amber); border-radius: 4px;
  padding: 0 5px; font-weight: 600; font-style: normal;
}
.legal-index-list { list-style: none; margin: 18px 0; }
.legal-index-list li { margin: 0; border-bottom: 1px solid var(--border-soft); }
.legal-index-list a { display: block; padding: 13px 4px; color: var(--text); text-decoration: none; font-size: 16px; }
.legal-index-list a:hover { color: var(--accent); padding-left: 10px; transition: padding .12s ease; }
@media (max-width: 600px) {
  .legal-header { flex-direction: column; align-items: flex-start; gap: 8px; position: static; }
  .legal-main { padding: 28px 18px 48px; }
}