/* Marchas de Cristo — hoja de estilos propia.
   Rediseño «Índigo noche» (rama design/frontend-review): gramática de catálogo
   bibliográfico — reglas de tinta, asiento, descripción con puntos de guía.
   El índigo se reserva para lo consultable (enlaces, acciones); la estructura
   se dibuja con filetes. Especificación: docs/revision-diseno-frontend.html. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    /* Paleta clara */
    --bg: #eaecf2;          /* fondo de la app (gris con sesgo índigo) */
    --card: #ffffff;        /* superficie del registro / tarjetas */
    --s2: #f2f4fa;          /* superficie secundaria */
    --line: #dce0eb;        /* filete */
    --ink: #181b24;         /* tinta */
    --muted-c: #59606f;
    --faint: #8890a1;
    --acc: #3a4d9e;         /* índigo: enlaces y acciones */
    --acc-tint: #e9ecf9;
    /* Semánticos (estreno / novedad / recuperación / error) */
    --est: #1c6b3c;  --est-bg: #e6f3ea;
    --nov: #0f6e78;  --nov-bg: #e2f2f3;
    --rec: #8a5a1f;  --rec-bg: #f6ecd9;
    --err: #8a1f1f;  --err-bg: #fdecec; --err-line: #f5c2c2;
    --juv: #5b3ea3;  --juv-bg: #f1ecfb;
    /* Alias legacy (plantillas y JS existentes) */
    --surface: var(--s2);
    --surface2: var(--acc-tint);
    --border: var(--line);
    --fg: var(--ink);
    --muted: var(--muted-c);
    --neutral: var(--ink);
    --neutral-fg: var(--card);
    /* Tipografía y métricas */
    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
    --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    --radius: 4px;
    --radius-sm: 3px;
    --wrap: 54rem;
    font-synthesis-weight: none;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e1016;
        --card: #161a24;
        --s2: #1c2130;
        --line: #2a3350;
        --ink: #e7eaf4;
        --muted-c: #9aa3b8;
        --faint: #6a7488;
        --acc: #8ea0ec;
        --acc-tint: #1e2540;
        --est: #7cc39a;  --est-bg: #16281d;
        --nov: #5fc3cd;  --nov-bg: #12292c;
        --rec: #d7a866;  --rec-bg: #2c2416;
        --err: #e09a9a;  --err-bg: #2e1717; --err-line: #4d2626;
        --juv: #b9a3e8;  --juv-bg: #241d33;
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 2px; }

.mono { font-family: var(--mono); }

/* ── Cabecera del sitio ─────────────────────────────────────────────────── */
header {
    background: var(--card);
    border-bottom: 2px solid var(--ink);
}
header nav {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
}
.brand { font-family: var(--serif); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.brand .brand-sub { display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); font-weight: 400; margin-top: -0.1rem; }
.nav-links { list-style: none; display: flex; gap: 0.1rem; margin: 0; padding: 0; font-size: 0.87rem; }
.nav-links a { text-decoration: none; color: var(--muted-c); padding: 0.3rem 0.55rem; border-bottom: 2px solid transparent; display: inline-block; }
.nav-links a:hover { color: var(--acc); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--acc); }

.site-search-row { max-width: var(--wrap); margin: 0 auto; padding: 0 1rem 0.7rem; display: flex; justify-content: center; }
.site-search { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); padding: 0.4rem 0.7rem; width: 100%; max-width: 34rem; }
.site-search input { border: 0; background: none; font: inherit; font-family: var(--mono); font-size: 0.8rem; color: var(--ink); width: 100%; padding: 0; outline: none; }
.site-search input::placeholder { color: var(--faint); }
.site-search .kbd { font-family: var(--mono); font-size: 0.6rem; color: var(--faint); border: 1px solid var(--line); border-radius: 3px; padding: 0 0.3rem; flex: none; }

/* Menú móvil (sin JS, con <details>) */
.nav-mobile { position: relative; display: none; }
.nav-mobile > summary { list-style: none; cursor: pointer; padding: 0.35rem; border-radius: var(--radius-sm); display: inline-flex; color: var(--ink); }
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary svg { width: 1.4rem; height: 1.4rem; }
.nav-mobile ul {
    position: absolute; right: 0; top: 100%; margin-top: 0.25rem;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(10, 14, 30, 0.18); width: 12rem; padding: 0.4rem; list-style: none;
    display: flex; flex-direction: column; gap: 0.1rem; z-index: 30;
}
.nav-mobile ul a { display: block; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font-size: 0.9rem; }
.nav-mobile ul a:hover { background: var(--s2); }

/* ── Main / footer ──────────────────────────────────────────────────────── */
main { flex: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 1.1rem 1rem 2rem; }
main a { color: var(--acc); text-decoration: none; }
main a:not(.btn):hover { text-decoration: underline; }

footer { border-top: 1px solid var(--line); background: var(--card); }
footer .inner { max-width: var(--wrap); margin: 0 auto; padding: 0.9rem 1rem; text-align: center; font-size: 0.74rem; color: var(--muted-c); font-variant-numeric: tabular-nums; }

/* ── Utilidades de layout ───────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: 1rem; }
.home { gap: 1.5rem; }
.row { display: flex; gap: 0.5rem; }
.muted { color: var(--muted-c); font-size: 0.8rem; }
.small { font-size: 0.85rem; }
.nums { font-variant-numeric: tabular-nums; }
.hidden { display: none; }

h1 { font-family: var(--serif); font-size: 1.55rem; letter-spacing: -0.01em; margin: 0 0 0.5rem; text-wrap: balance; }

/* ── Cards / panels ─────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* Cabecera de detalle (vistas aún no migradas a .record) */
.headDetail {
    font-family: var(--serif); font-size: 1.55rem; font-weight: 600;
    max-width: var(--wrap); margin: 0.75rem auto; padding: 0 0 0.6rem;
    border-bottom: 2px solid var(--ink); text-wrap: balance;
}

/* ── El registro (ficha de catálogo) ────────────────────────────────────── */
.crumbs { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.2rem; flex-wrap: wrap; font-family: var(--mono); font-size: 0.68rem; color: var(--faint); margin: 0 0 0.55rem; }
.crumbs a { color: var(--muted-c); text-decoration: none; }
.crumbs a:hover { color: var(--acc); text-decoration: none; }
.crumbs .regnav a { color: var(--acc); }

.record { background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--ink); border-radius: var(--radius-sm); padding: 1.4rem 1.6rem 1.5rem; box-shadow: 0 1px 2px rgba(20, 28, 60, 0.05); }
.record .head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.record .eb { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); font-weight: 600; }
.record .sig { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); letter-spacing: 0.06em; }
.record h1 { font-size: clamp(1.5rem, 4.5vw, 2.15rem); margin: 0.45rem 0 0.1rem; line-height: 1.12; }
.asiento { font-family: var(--serif); font-style: italic; font-size: 0.98rem; color: var(--muted-c); margin: 0.15rem 0 0; line-height: 1.55; }
.asiento a { color: var(--acc); text-decoration: none; font-style: normal; }
.asiento a:hover { text-decoration: underline; }

/* Descripción etiqueta/valor con puntos de guía, como ficha de cartón */
dl.desc { display: grid; grid-template-columns: 1fr; gap: 0 2.4rem; margin: 1.05rem 0 0; padding-top: 0.25rem; border-top: 3px double var(--line); }
dl.desc .f { display: grid; grid-template-columns: 8.6rem 1fr; gap: 0.7rem; padding: 0.32rem 0; border-bottom: 1px dotted var(--line); align-items: baseline; }
dl.desc dt { margin: 0; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
dl.desc dd { margin: 0; font-size: 0.89rem; }
.cnt { font-family: var(--mono); font-size: 0.68rem; color: var(--faint); }

/* Cabecera de sección con regla de tinta */
.shead { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin: 1.7rem 0 0.4rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--ink); }
.shead h2, .shead h3 { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; margin: 0; }
.shead .n { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); }
.shead .filter { margin-left: auto; }
.filter { font-family: var(--mono); font-size: 0.76rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.32rem 0.55rem; background: var(--card); color: var(--ink); min-width: 11rem; }
.filter::placeholder { color: var(--faint); }

/* Escuchar — enlaces por servicio (pendiente de datos) */
.listen { margin: 1.1rem 0 0; padding: 0.7rem 0.85rem; border-radius: var(--radius-sm); background: var(--s2); border: 1px dashed var(--line); }
.listen-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.listen-head .pt { font-weight: 600; font-size: 0.9rem; }
.todo { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rec); background: var(--rec-bg); border-radius: 3px; padding: 0.12rem 0.42rem; font-weight: 700; }
.svcs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.svc { font-size: 0.76rem; color: var(--acc); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.26rem 0.6rem; text-decoration: none; }
a.svc:hover { border-color: var(--acc); }
.svc.off { color: var(--faint); }

/* Vídeo embebido: fachada sin cookies (no carga YouTube hasta pulsar). */
.ytembed { position: relative; aspect-ratio: 16 / 9; margin: 0 0 0.6rem; border-radius: var(--radius-sm); overflow: hidden; background: #000; border: 1px solid var(--line); }
.ytembed .ytfacade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; display: block; }
.ytfacade-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.92; transition: opacity 0.15s ease; }
.ytfacade:hover .ytfacade-img, .ytfacade:focus-visible .ytfacade-img { opacity: 1; }
.ytfacade-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4.2rem; height: 2.9rem; border-radius: 0.7rem; background: rgba(20, 20, 25, 0.72); transition: background 0.15s ease; }
.ytfacade:hover .ytfacade-play, .ytfacade:focus-visible .ytfacade-play { background: #cc1f1f; }
.ytfacade-play::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-42%, -50%); border-style: solid; border-width: 0.62rem 0 0.62rem 1.05rem; border-color: transparent transparent transparent #fff; }
.ytfacade:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.ytembed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Notas del registro */
.notas { font-size: 0.92rem; line-height: 1.65; margin: 0.4rem 0 0; max-width: 44rem; }
.bio-empty { color: var(--faint); font-style: italic; font-size: 0.88rem; margin: 0.4rem 0 0.2rem; }

/* Tabla de grabaciones / obra — densidad compacta, ordenable */
.scrollx { overflow-x: auto; }
table.reg { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
table.reg thead th { text-align: left; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-c); font-weight: 600; border-bottom: 1px solid var(--line); padding: 0.3rem 0.6rem; white-space: nowrap; }
table.reg[data-sortable] thead th { cursor: pointer; user-select: none; }
table.reg thead th .ar { color: var(--faint); font-size: 0.7rem; }
table.reg tbody td { padding: 0.28rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: baseline; }
table.reg tbody tr:hover td { background: var(--acc-tint); }
table.reg td.num, table.reg th.num { text-align: right; }
table.reg td.num { font-family: var(--mono); font-size: 0.76rem; }
.badge-1a { font-family: var(--mono); font-size: 0.62rem; font-weight: 700; color: var(--est); background: var(--est-bg); border-radius: 3px; padding: 0.08rem 0.4rem; white-space: nowrap; margin-left: 0.45rem; vertical-align: 0.06em; }

/* Véase también */
ul.vease { list-style: none; margin: 0.15rem 0 0; padding: 0; }
ul.vease li { padding: 0.32rem 0; border-bottom: 1px dotted var(--line); font-size: 0.88rem; }

/* Identificadores del registro */
.ids { display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; margin-top: 1.6rem; padding-top: 0.55rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.68rem; color: var(--faint); }
.ids a { color: var(--muted-c); text-decoration: none; border-bottom: 1px dotted var(--faint); }
.ids a:hover { color: var(--acc); border-bottom-color: var(--acc); text-decoration: none; }

/* ── Explorador (listado con facetas) ───────────────────────────────────── */
.toolbar { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.toolbar .rescount { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.toolbar .rescount b { color: var(--acc); font-variant-numeric: tabular-nums; }
.toolbar .sortby { font-family: var(--mono); font-size: 0.72rem; color: var(--muted-c); }
.toolbar .sortby a { color: var(--muted-c); text-decoration: none; }
.toolbar .sortby a:hover { color: var(--acc); }
.toolbar .sortby a.on { color: var(--acc); font-weight: 700; }
.toolbar .clearall { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; color: var(--muted-c); text-decoration: none; }
.toolbar .clearall:hover { color: var(--acc); }
details.adv > summary { cursor: pointer; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); list-style: none; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before { content: "▸ "; }
details.adv[open] > summary::before { content: "▾ "; }
details.adv[open] > summary { margin-bottom: 0.5rem; }
.results-layout { display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: start; }
@media (min-width: 720px) { .results-layout { grid-template-columns: 12.5rem 1fr; } }
.facet-rail { display: flex; flex-direction: column; gap: 1.1rem; }
.rail-title { font-family: var(--serif); font-size: 0.95rem; font-weight: 600; padding-bottom: 0.3rem; border-bottom: 2px solid var(--ink); margin-bottom: 0.15rem; }
.fgroup .ftitle { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.25rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--line); }
a.fopt { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.8rem; padding: 0.18rem 0; color: var(--ink); text-decoration: none; }
a.fopt:hover { color: var(--acc); text-decoration: none; }
a.fopt.on { color: var(--acc); font-weight: 600; }
a.fopt .x { font-family: var(--mono); color: var(--faint); font-size: 0.72rem; }
a.fopt .fcount { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ── Tablas (listados generales) ────────────────────────────────────────── */
.tableList { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); width: 100%; max-width: var(--wrap); margin: 0 auto; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; padding: 0.45rem 0.7rem; vertical-align: top; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.table th { font-weight: 600; white-space: nowrap; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table-zebra tbody tr:hover { background: var(--acc-tint); }
.table-sm th, .table-sm td { padding: 0.35rem 0.6rem; font-size: 0.82rem; }
.thead-neutral td { background: var(--s2); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-c); font-weight: 600; }
.table thead th { border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-c); font-weight: 600; }

/* ── Divider con texto ──────────────────────────────────────────────────── */
.divider { display: flex; align-items: center; text-align: center; gap: 0.75rem; color: var(--muted-c); font-size: 0.9rem; margin: 2rem auto 0.8rem; max-width: var(--wrap); font-family: var(--serif); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--card); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer;
    text-decoration: none; line-height: 1; white-space: nowrap;
}
.btn:hover { border-color: var(--acc); color: var(--acc); }
.btn-sm { padding: 0.35rem 0.65rem; font-size: 0.85rem; }
.btn-neutral { background: var(--acc); color: #ffffff; border-color: var(--acc); }
.btn-neutral:hover { opacity: 0.9; background: var(--acc); color: #ffffff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--s2); color: var(--ink); }

/* ── Formularios ────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field-label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--faint); }
.input, .select {
    width: 100%; padding: 0.4rem 0.6rem; font: inherit; font-size: 0.9rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
}
.input:focus, .select:focus { outline: 2px solid var(--acc); outline-offset: -1px; }
.select { width: auto; }
.search-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.25rem; }
.search-info { font-size: 0.8rem; color: var(--muted-c); margin: 0 0 0.5rem; }

/* ── Paginación ─────────────────────────────────────────────────────────── */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 1rem; font-family: var(--mono); font-size: 0.8rem; }
.pagination .ellipsis { padding: 0 0.25rem; color: var(--faint); }

/* ── Home: últimas incorporaciones ──────────────────────────────────────── */
.welcome-text { margin: 0; font-size: 0.92rem; }
.welcome-counts { margin-top: 0.75rem; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.section-title { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--faint); margin: 0 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 2px solid var(--ink); }
.ultimas { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); }
.ultima-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.9rem; text-decoration: none; color: inherit; border-top: 1px solid var(--line); }
.ultima-row:first-child { border-top: 0; }
.ultima-row:hover { background: var(--acc-tint); text-decoration: none; }
.ultima-main { min-width: 0; }
.ultima-title { display: block; font-weight: 600; font-size: 0.88rem; color: var(--acc); }
.ultima-authors { display: block; font-size: 0.76rem; color: var(--muted-c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ultima-date { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.firma { font-size: 0.72rem; color: var(--faint); text-align: right; margin: 0; }

/* ── CdList (vistas aún no migradas) ────────────────────────────────────── */
.cdlist { list-style: none; margin: 0.5rem auto; padding: 0; max-width: var(--wrap); }
.cdlist-row { display: flex; align-items: center; gap: 0.9rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; margin-bottom: 0.45rem; }
.cdlist-row:hover { background: var(--acc-tint); }
.cover-thumb { width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.cdlist-main { flex: 1; min-width: 0; }
.cdlist-title { font-size: 1rem; color: var(--acc); }
.cdlist-sub { font-size: 0.8rem; font-weight: 600; color: var(--muted-c); margin-left: 1rem; }
.cdlist-date { color: var(--faint); font-family: var(--mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* ── Timeline (banda; pendiente de sustituir por la línea de sucesión) ──── */
.timeline-wrap { display: grid; place-items: center; margin: 1rem 0; }
.timeline { list-style: none; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; }
.timeline li { display: flex; align-items: center; gap: 0.5rem; }
.timeline li::after { content: ""; width: 2rem; height: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.tl-date { font-family: var(--mono); font-size: 0.78rem; color: var(--muted-c); }
.tl-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--ink); flex-shrink: 0; }
.tl-box { background: var(--s2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.2rem 0.55rem; font-size: 0.85rem; }

/* ── Línea de sucesión (linaje de banda, §09-B del dossier) ─────────────── */
ul.lnB { list-style: none; margin: 0.3rem 0 0; padding: 0; }
ul.lnB > li { position: relative; padding: 0.36rem 0 0.36rem 1.5rem; display: flex; align-items: baseline; gap: 0.55rem; }
ul.lnB > li::before { content: ""; position: absolute; left: 0.4rem; top: 0; bottom: 0; border-left: 1.5px solid var(--muted-c); }
ul.lnB > li:first-child::before { top: 50%; }
ul.lnB > li.last::before { bottom: 50%; }
ul.lnB > li::after { content: ""; position: absolute; left: 0.4rem; top: 50%; width: 0.48rem; height: 0.48rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--card); border: 1.5px solid var(--muted-c); }
ul.lnB > li.focus::after { background: var(--ink); border-color: var(--ink); }
ul.lnB .nm { font-size: 0.87rem; color: var(--acc); text-decoration: none; min-width: 0; }
ul.lnB a.nm:hover { text-decoration: underline; }
ul.lnB li.focus .nm { color: var(--ink); font-weight: 700; }
ul.lnB .cnt2 { font-family: var(--mono); font-size: 0.66rem; color: var(--faint); }
ul.lnB .lead { flex: 1; border-bottom: 1px dotted var(--line); min-width: 1rem; }
ul.lnB .yr { font-family: var(--mono); font-size: 0.73rem; color: var(--muted-c); font-variant-numeric: tabular-nums; white-space: nowrap; }
ul.lnB > li.juv { padding-left: 2.9rem; }
ul.lnB > li.juv::before { left: 0.4rem; top: 0; bottom: 50%; width: 1.15rem; border-left: 1.5px dashed var(--muted-c); border-bottom: 1.5px dashed var(--muted-c); border-bottom-left-radius: 9px; }
ul.lnB > li.juv::after { left: 1.8rem; border-style: dashed; }
/* fusión / división: carriles que convergen o se abren */
.lnB-merge { margin: 0.3rem 0 0; }
.lnB-merge .mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.lnB-merge .mnode { border: 1px solid var(--line); border-radius: 2px; background: var(--card); padding: 0.34rem 0.6rem; font-size: 0.8rem; text-align: center; }
.lnB-merge .mnode .nm { color: var(--acc); font-weight: 600; }
.lnB-merge .mnode .yr { font-family: var(--mono); font-size: 0.66rem; color: var(--faint); display: block; font-variant-numeric: tabular-nums; }
.lnB-merge .mjoin { display: grid; grid-template-columns: 1fr 1fr; height: 0.85rem; }
.lnB-merge .jl { border-left: 1.5px solid var(--muted-c); border-bottom: 1.5px solid var(--muted-c); border-bottom-left-radius: 9px; margin-left: calc(50% - 1px); }
.lnB-merge .jr { border-right: 1.5px solid var(--muted-c); border-bottom: 1.5px solid var(--muted-c); border-bottom-right-radius: 9px; margin-right: calc(50% - 1px); }
.lnB-merge .mstem { width: 0; height: 0.55rem; border-left: 1.5px solid var(--muted-c); margin: 0 auto; }
.lnB-merge .mnode.res { width: min(60%, 16rem); margin: 0 auto; }

/* ── Linaje legado (árbol SVG; se retirará con la línea de sucesión) ────── */
.lineage-wrap { margin: 1rem 0; }
.lin { overflow-x: auto; padding: 0.25rem 0 1rem; }
.lin-inner { margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.ln-row { display: flex; justify-content: center; gap: 22px; width: 100%; }
.ln-card { width: 170px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; background: var(--s2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.55rem; text-align: center; }
.ln-card.is-focus { border-color: var(--ink); border-width: 2px; background: var(--card); }
.ln-name { font-weight: 600; font-size: 0.9rem; line-height: 1.25; color: var(--ink); text-decoration: none; }
a.ln-name:hover { text-decoration: underline; }
.ln-yr { color: var(--muted-c); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.ln-chip { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.05rem 0.4rem; border-radius: 3px; }
.ln-chip.renombrado { background: var(--acc-tint); color: var(--acc); }
.ln-chip.fusion { background: var(--est-bg); color: var(--est); }
.ln-chip.division { background: var(--rec-bg); color: var(--rec); }
.ln-svg { display: block; stroke-width: 2; stroke-linecap: round; }
.ln-svg line { stroke: var(--line); }
.ln-svg.renombrado line { stroke: var(--acc); }
.ln-svg.fusion line { stroke: var(--est); }
.ln-svg.division line { stroke: var(--rec); }
.ln-focusrow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; }
.ln-side { display: flex; align-items: center; min-width: 0; }
.ln-side-right { justify-self: start; }
.ln-side-left { justify-self: end; justify-content: flex-end; }
.ln-ylink { display: flex; align-items: center; }
.ln-dash { width: 1.4rem; border-top: 2px dashed var(--juv); }
.ln-ytag { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; background: var(--juv-bg); color: var(--juv); padding: 0.05rem 0.4rem; border-radius: 3px; margin: 0 0.3rem; white-space: nowrap; }
.ln-card.is-youth { width: 150px; border-color: var(--juv); background: var(--juv-bg); }

/* ── Collapse (estadísticas) ────────────────────────────────────────────── */
.collapse { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.collapse-title { cursor: pointer; padding: 0.8rem 1rem; font-family: var(--serif); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.collapse-title::-webkit-details-marker { display: none; }
.collapse-title::after { content: "▾"; color: var(--faint); transition: transform 0.15s; }
.collapse[open] .collapse-title::after { transform: rotate(180deg); }
.collapse-content { padding: 0 0.75rem 0.75rem; font-size: 0.9rem; }

/* ── Detalle de disco ───────────────────────────────────────────────────── */
.disco-detail { display: flex; flex-direction: column; align-items: center; }
.disco-head { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.disco-cover { margin: 0.25rem; }
.cover-large { max-width: 16rem; width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: 0 1px 4px rgba(10, 14, 30, 0.2); display: block; }
.disco-meta { display: flex; flex-direction: column; align-items: center; }

/* ── Admin ──────────────────────────────────────────────────────────────── */
.admin-narrow { max-width: 22rem; margin: 0 auto; }
.admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin-bar h1 { margin: 0; }
.inline-form { display: inline; }
.admin-form textarea.input { resize: vertical; min-height: 5rem; }

.alert { border-radius: var(--radius-sm); padding: 0.6rem 0.9rem; font-size: 0.9rem; }
.alert-error { background: var(--err-bg); color: var(--err); border: 1px solid var(--err-line); }
.alert-success { background: var(--est-bg); color: var(--est); border: 1px solid var(--est-bg); }
.alert-info { background: var(--acc-tint); color: var(--acc); border: 1px solid var(--acc-tint); }

.btn-danger { background: var(--err-bg); color: var(--err); border-color: var(--err-line); }
.btn-danger:hover { background: var(--err-bg); border-color: var(--err); color: var(--err); }

dialog.panel { max-width: 32rem; width: calc(100% - 2rem); }
dialog.panel:not([open]) { display: none; }
dialog.panel[open] { display: flex; }
dialog.panel::backdrop { background: rgba(0, 0, 0, 0.5); }

.badge { display: inline-block; border-radius: 3px; padding: 0.1rem 0.5rem; font-family: var(--mono); font-size: 0.68rem; font-weight: 600; background: var(--s2); color: var(--muted-c); }
.badge-estreno { background: var(--est-bg); color: var(--est); }
.badge-novedad { background: var(--nov-bg); color: var(--nov); }
.badge-recuperacion { background: var(--rec-bg); color: var(--rec); }
.badge-warn { background: var(--err-bg); color: var(--err); }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--s2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.2rem 0.6rem; font-size: 0.85rem; }
.chip-x { border: 0; background: none; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--muted-c); padding: 0; }
.chip-x:hover { color: var(--ink); }

.autocomplete { position: relative; }
.suggest { position: absolute; z-index: 25; left: 0; right: 0; margin-top: 0.25rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(10, 14, 30, 0.18); max-height: 16rem; overflow-y: auto; }
.suggest-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0.5rem 0.7rem; cursor: pointer; font: inherit; font-size: 0.9rem; color: var(--ink); }
.suggest-item:hover { background: var(--s2); }

/* ── Índice de dedicatorias (N-02) ──────────────────────────────────────── */
.aznav { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 1.1rem 0 0.4rem; font-family: var(--mono); }
.aznav a { text-decoration: none; color: var(--acc); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.1rem 0.5rem; font-size: 0.78rem; }
.aznav a:hover { background: var(--acc-tint); }
ul.azgrid { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.15rem 1.4rem; }
.azitem { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px dotted var(--line); }
.azitem a { text-decoration: none; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.azitem .aznom { font-size: 0.92rem; }
.azitem .azloc { font-family: var(--mono); font-size: 0.68rem; color: var(--faint); }
.azitem .azcount { font-family: var(--mono); font-size: 0.72rem; color: var(--muted-c); font-variant-numeric: tabular-nums; flex: none; }
@media (min-width: 640px) { ul.azgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { ul.azgrid { grid-template-columns: 1fr 1fr 1fr; } }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
    .col-span-2 { grid-column: span 2; }
    dl.desc { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
    .disco-head { flex-direction: row; align-items: flex-start; }
}
@media (max-width: 639px) {
    .nav-links { display: none; }
    .nav-mobile { display: block; }
    .site-search-row { padding: 0 1rem 0.6rem; }
    dl.desc .f { grid-template-columns: 7.2rem 1fr; }
    .record { padding: 1.1rem 1rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ── Enlaces de streaming (ficha de disco/banda) ─────────────────────────── */
.streaming { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.7rem 0 0.2rem; }
.streaming-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-c); margin-right: 0.15rem; }
.stream-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.8rem; line-height: 1; text-decoration: none;
    padding: 0.4rem 0.7rem; border-radius: 999px;
    border: 1px solid var(--line); color: var(--fg); background: var(--bg);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.stream-btn:hover { border-color: currentColor; }
.stream-spotify:hover { color: #1db954; }
.stream-apple:hover   { color: #fa2d48; }
.stream-deezer:hover  { color: #a238ff; }
.stream-youtube:hover { color: #ff0000; }
.stream-tidal:hover   { color: #00ffff; }
.stream-amazon:hover  { color: #00a8e1; }
.stream-btn::before { content: "▸"; font-size: 0.7em; color: var(--muted-c); }
.stream-btn:hover::before { color: currentColor; }

/* Texto de ayuda debajo de los campos del formulario admin */
.field-help { margin-top: 0.25rem; }
/* Botón con apariencia de enlace (para «Quitar selección» inline) */
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: inherit; text-decoration: underline; }
.link-btn:hover { color: var(--ink); }