/* Biblios · sitio web · web-1.0.0+59756f20 */
/* =====================================================================
BIBLIOS · Sistema de diseño · styles.css
---------------------------------------------------------------------
Concepto: "el lomo y el filete".
- La barra lateral es el LOMO de un libro: azul marino del logo con
dos bandas doradas (como los lomos del monograma).
- El FILETE dorado (1px) marca jerarquía: pestaña activa, elemento
activo, separadores de marca. Nunca como relleno de fondo grande.
- Serif (EB Garamond) = la voz de los libros: títulos de obras,
títulos de página, cifras grandes. Sans (Source Sans 3) = la voz de
la herramienta: controles, tablas, etiquetas, ayudas.
Colores medidos en píxeles del logo oficial (src/logo.webp):
marino mediana #062040 · marino letra #021E39 · realce #0D3558
dorado mediana #B48641 · reflejo #D2AC60 · sombra #9A6B2E
Fuentes (van en src/head.html; el ensamblador las pone tras el bloque de estilos):
con
los de Biblios.brand.ICONS (trazo y color vienen de este CSS).
===================================================================== */
/* ---------------------------------------------------------------------
1. TOKENS · TEMA CLARO (por defecto)
--------------------------------------------------------------------- */
:root {
color-scheme: light;
/* Marca (del logo) */
--navy: #062040; /* azul marino del logo: primario, barra lateral */
--navy-2: #0D3558; /* realce del lomo: hover del primario */
--gold: #B48641; /* dorado del logo: filetes, iconos de marca (decorativo, 3.27:1 sobre blanco) */
--gold-bright: #D2AC60; /* reflejo dorado: sobre marino (7.6:1) */
--gold-ink: #85601F; /* dorado para TEXTO sobre claro (5.7:1 sobre blanco) */
--gold-soft: #F5EEDF; /* fondo dorado tenue: banner demo, etiquetas */
--mark-ink: #062040; /* color del monograma fuera de la barra lateral */
/* Superficies */
--paper: #EFF2F5; /* fondo de la app: papel frío */
--surface: #FFFFFF; /* tarjetas, tablas, diálogos, barra superior */
--surface-2: #F6F8FA; /* cabecera de tabla, zonas hundidas */
--surface-3: #E6EDF6; /* fila/elemento seleccionado */
--hover: #EEF2F6; /* hover de filas y botones fantasma */
--line: #DCE2E9; /* divisores y bordes de contenedor */
--line-strong: #B3BFCC; /* bordes de chips, kbd, botón secundario */
--control-border: #7A889A; /* borde de campos (3.2:1 sobre papel, 3.6:1 sobre blanco) */
/* Texto */
--text: #0E1C2E; /* texto principal (17.1:1) */
--text-2: #435266; /* secundario (7.9:1) */
--text-3: #5B6878; /* terciario / placeholder (5.7:1 blanco, 4.8:1 seleccionado) */
/* Interacción */
--accent: #1D5A96; /* enlaces, selección, foco (7.1:1) */
--accent-soft: #E4ECF6; /* fondo de aviso informativo / hover de acento */
--accent-ink: #163E66; /* texto sobre accent-soft (9.2:1) */
--focus: #1D5A96; /* anillo de foco (≥3:1 en todas las superficies claras) */
--primary: #062040; /* fondo del botón primario */
--primary-hover: #0D3558;
--on-primary: #FFFFFF; /* 16.3:1 */
--danger: #B42318; /* acciones destructivas (6.6:1) */
--danger-hover: #912018;
--on-danger: #FFFFFF;
--danger-soft: #FBE5E3;
/* Barra lateral (lomo) */
--side-bg: #062040;
--side-hover: #0C2B50;
--side-active: #12345E;
--side-text: #B9C6D6; /* 9.4:1 */
--side-muted: #8FA1B7; /* 6.2:1 */
--side-strong: #FFFFFF;
--side-line: rgba(255, 255, 255, 0.09);
--side-focus: #D2AC60;
/* Estados de ejemplares y solicitudes (separados del acento) */
--st-ok: #1C6A3E; --st-ok-bg: #E2F1E7; --st-ok-dot: #2E8B57; /* disponible */
--st-loan: #1A5A6F; --st-loan-bg: #DDEDF3; --st-loan-dot: #2B7F99; /* prestado */
--st-late: #A3231F; --st-late-bg: #FBE5E3; --st-late-dot: #CC3A31; /* vencido */
--st-lost: #5E4768; --st-lost-bg: #EEE7F1; --st-lost-dot: #83679A; /* perdido */
--st-off: #535C68; --st-off-bg: #EBEEF1; --st-off-dot: #8993A0; /* retirado / cancelada */
--st-wait: #80560A; --st-wait-bg: #FAEFD3; --st-wait-dot: #C28A1E; /* pendiente */
/* Contador de alerta (vencidos) en el lomo y la barra inferior: cifra blanca de 10–12 px (4.98:1) */
--count-alert-bg: #CC3A31; --count-alert-ink: #FFFFFF;
/* Avisos, toasts y gráficos */
--demo-bg: #F5EEDF; --demo-text: #5A4214; --demo-rule: #B48641;
--toast-bg: #0E1C2E; --toast-text: #F2F5F8; --toast-action: #E0BE77;
--toast-ok: #6FCB95; --toast-err: #FF9E94;
--chart-1: #0D3558; --chart-2: #B48641; --chart-3: #2B7F99; --chart-muted: #C9D2DC;
--backdrop: rgba(4, 14, 28, 0.52);
--selection: #EEDFBD;
--skeleton-a: #E9EEF3; --skeleton-b: #F5F7FA;
/* Imágenes de controles (color por tema) */
--i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23435266' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E");
--i-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 12h11'/%3E%3C/svg%3E");
/* Tipografía */
--font-brand: "Cinzel", "EB Garamond", Georgia, serif;
--font-serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--fs-2xs: 0.6875rem; /* 11px etiquetas de barra inferior, grupos */
--fs-xs: 0.75rem; /* 12px metadatos, kbd */
--fs-sm: 0.8125rem; /* 13px etiquetas de campo, ayudas */
--fs-ui: 0.875rem; /* 14px tablas, botones, menús, barra lateral */
--fs-md: 0.9375rem; /* 15px = base (nombre del contrato de arquitectura) */
--fs-base: 0.9375rem; /* 15px cuerpo */
--fs-lg: 1.0625rem; /* 17px cuerpo destacado, título de libro en tabla (serif) */
--fs-xl: 1.25rem; /* 20px serif: secciones, diálogos */
--fs-2xl: 1.625rem; /* 26px serif: título de página en móvil */
--fs-3xl: 2.125rem; /* 34px serif: título de página */
--fs-4xl: 2.5rem; /* 40px serif: título en ficha, cifras */
--fs-5xl: 3rem; /* 48px serif/marca: bienvenida */
--lh-tight: 1.15;
--lh-snug: 1.3;
--lh-base: 1.5;
/* Espaciado (base 4) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
/* Radios por rol (NO uno para todo) */
--r-xs: 3px; /* kbd, casillas, insignias, etiqueta de signatura */
--r-sm: 5px; /* botones, campos, elementos de menú */
--r-md: 8px; /* tarjetas, tablas, menús, listas */
--r-lg: 12px; /* diálogos, cajones, paleta de comandos, barra de lote */
--r-pill: 999px; /* chips de filtro, interruptores, avatares, progreso */
--r-book: 2px 5px 5px 2px;/* portadas: lomo recto, canto redondeado */
/* Sombras por rol */
--sh-hairline: 0 1px 0 rgba(6, 32, 64, 0.05);
--sh-raise: 0 1px 2px rgba(6, 32, 64, 0.06), 0 2px 6px -2px rgba(6, 32, 64, 0.08);
--sh-pop: 0 10px 28px -8px rgba(6, 32, 64, 0.24), 0 2px 6px rgba(6, 32, 64, 0.08);
--sh-overlay: 0 28px 64px -16px rgba(4, 20, 40, 0.42), 0 6px 16px rgba(4, 20, 40, 0.12);
--sh-cover: 0 1px 1px rgba(6, 32, 64, 0.10), 0 8px 18px -8px rgba(6, 32, 64, 0.45);
/* Movimiento */
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--dur-1: 120ms; --dur-2: 200ms; --dur-3: 280ms;
/* Layout */
--sidebar-w: 248px;
--sidebar-w-collapsed: 68px;
--topbar-h: 56px;
--bottomnav-h: 60px;
--content-max: 1200px;
--gutter: 28px;
--z-sticky: 10; --z-topbar: 20; --z-sidebar: 30; --z-bottomnav: 30; --z-menu: 40;
--z-drawer: 50; --z-dialog: 100; --z-cmdk: 110; --z-toast: 200;
/* ---- Alias del contrato de arquitectura (architecture.md §11.1) ----
Apuntan a los tokens de arriba; como se resuelven en :root, siguen
automáticamente al tema oscuro. Úsense indistintamente. */
--c-bg: var(--paper); --c-surface: var(--surface); --c-surface-2: var(--surface-2);
--c-sunken: var(--surface-2); --c-border: var(--line); --c-border-strong: var(--line-strong);
--c-text: var(--text); --c-text-2: var(--text-2); --c-text-3: var(--text-3);
--c-navy: var(--navy); --c-navy-2: var(--navy-2); --c-on-navy: var(--side-strong);
--c-gold: var(--gold); --c-gold-2: var(--gold-ink); --c-on-gold: var(--navy);
--c-accent: var(--primary); --c-accent-hover: var(--primary-hover); --c-on-accent: var(--on-primary);
--c-link: var(--accent); --c-focus: var(--focus); --c-selection: var(--selection);
--c-ok: var(--st-ok); --c-ok-bg: var(--st-ok-bg); --c-warn: var(--st-wait);
--c-warn-bg: var(--st-wait-bg); --c-danger: var(--danger); --c-danger-bg: var(--danger-soft);
--c-info: var(--accent-ink); --c-info-bg: var(--accent-soft); --c-overlay: var(--backdrop);
--c-chart-1: var(--chart-1); --c-chart-2: var(--chart-2); --c-chart-3: var(--chart-3);
--c-chart-4: var(--chart-muted); --c-chart-grid: var(--line);
--f-brand: var(--font-brand); --f-serif: var(--font-serif); --f-sans: var(--font-sans); --f-mono: var(--font-mono);
--lh-normal: var(--lh-base); --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700;
--s-7: 48px; --r-1: var(--r-xs); --r-2: var(--r-sm);
--sh-1: var(--sh-raise); --sh-2: var(--sh-overlay);
--sidebar-w-compact: var(--sidebar-w-collapsed);
--z-nav: var(--z-topbar); --z-bulk: 30; --z-palette: var(--z-cmdk);
}
/* ---------------------------------------------------------------------
2. TOKENS · TEMA OSCURO (sistema) — mismo contenido que el bloque 3
--------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--navy: #062040;
--navy-2: #0D3558;
--gold: #D2AC60;
--gold-bright: #E0BE77;
--gold-ink: #E0BE77;
--gold-soft: #2A2415;
--mark-ink: #E6EBF1;
--paper: #0B1522;
--surface: #101C2B;
--surface-2: #152335;
--surface-3: #1B3150;
--hover: #172739;
--line: #233246;
--line-strong: #3A4D63;
--control-border: #6B7D93;
--text: #E6EBF1;
--text-2: #A9B6C6;
--text-3: #8C9AAC;
--accent: #8DB9E8;
--accent-soft: #122A44;
--accent-ink: #A9CCF0;
--focus: #E0BE77;
--primary: #D2AC60;
--primary-hover: #DDBB74;
--on-primary: #0B1522;
--danger: #F07A6E;
--danger-hover: #F59287;
--on-danger: #0B1522;
--danger-soft: #3B1818;
--side-bg: #070F1B;
--side-hover: #0F1C2E;
--side-active: #16263A;
--side-text: #AEBBCB;
--side-muted: #8190A3;
--side-strong: #FFFFFF;
--side-line: rgba(255, 255, 255, 0.07);
--side-focus: #E0BE77;
--st-ok: #86D6A6; --st-ok-bg: #12301F; --st-ok-dot: #4DB57A;
--st-loan: #86CDE2; --st-loan-bg: #0F2F3A; --st-loan-dot: #46A5C2;
--st-late: #FF9E94; --st-late-bg: #3B1818; --st-late-dot: #E5584D;
--st-lost: #D4BBDF; --st-lost-bg: #2B2131; --st-lost-dot: #A585B8;
--st-off: #B3BBC5; --st-off-bg: #222A34; --st-off-dot: #7F8B99;
--st-wait: #EDC46C; --st-wait-bg: #33280E; --st-wait-dot: #D39F33;
--count-alert-bg: #C23B31; --count-alert-ink: #FFFFFF; /* 5.3:1 (st-late-dot oscuro daba 3.6:1) */
--demo-bg: #2A2415; --demo-text: #EDD39A; --demo-rule: #D2AC60;
--toast-bg: #E6EBF1; --toast-text: #0E1C2E; --toast-action: #85601F;
--toast-ok: #1C6A3E; --toast-err: #A3231F;
--chart-1: #7FA6D4; --chart-2: #D2AC60; --chart-3: #46A5C2; --chart-muted: #2C3D52;
--backdrop: rgba(1, 5, 12, 0.66);
--selection: #4A3C1C;
--skeleton-a: #15222F; --skeleton-b: #1C2B3C;
--i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B6C6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1522' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E");
--i-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1522' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 12h11'/%3E%3C/svg%3E");
--sh-hairline: 0 1px 0 rgba(0, 0, 0, 0.35);
--sh-raise: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px -2px rgba(0, 0, 0, 0.35);
--sh-pop: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
--sh-overlay: 0 32px 72px -16px rgba(0, 0, 0, 0.75), 0 6px 16px rgba(0, 0, 0, 0.45);
--sh-cover: 0 1px 1px rgba(0, 0, 0, 0.4), 0 10px 22px -8px rgba(0, 0, 0, 0.75);
}
}
/* ---------------------------------------------------------------------
3. TOKENS · TEMA OSCURO (elegido por la persona)
--------------------------------------------------------------------- */
:root[data-theme="dark"] {
color-scheme: dark;
--navy: #062040;
--navy-2: #0D3558;
--gold: #D2AC60;
--gold-bright: #E0BE77;
--gold-ink: #E0BE77;
--gold-soft: #2A2415;
--mark-ink: #E6EBF1;
--paper: #0B1522;
--surface: #101C2B;
--surface-2: #152335;
--surface-3: #1B3150;
--hover: #172739;
--line: #233246;
--line-strong: #3A4D63;
--control-border: #6B7D93;
--text: #E6EBF1;
--text-2: #A9B6C6;
--text-3: #8C9AAC;
--accent: #8DB9E8;
--accent-soft: #122A44;
--accent-ink: #A9CCF0;
--focus: #E0BE77;
--primary: #D2AC60;
--primary-hover: #DDBB74;
--on-primary: #0B1522;
--danger: #F07A6E;
--danger-hover: #F59287;
--on-danger: #0B1522;
--danger-soft: #3B1818;
--side-bg: #070F1B;
--side-hover: #0F1C2E;
--side-active: #16263A;
--side-text: #AEBBCB;
--side-muted: #8190A3;
--side-strong: #FFFFFF;
--side-line: rgba(255, 255, 255, 0.07);
--side-focus: #E0BE77;
--st-ok: #86D6A6; --st-ok-bg: #12301F; --st-ok-dot: #4DB57A;
--st-loan: #86CDE2; --st-loan-bg: #0F2F3A; --st-loan-dot: #46A5C2;
--st-late: #FF9E94; --st-late-bg: #3B1818; --st-late-dot: #E5584D;
--st-lost: #D4BBDF; --st-lost-bg: #2B2131; --st-lost-dot: #A585B8;
--st-off: #B3BBC5; --st-off-bg: #222A34; --st-off-dot: #7F8B99;
--st-wait: #EDC46C; --st-wait-bg: #33280E; --st-wait-dot: #D39F33;
--count-alert-bg: #C23B31; --count-alert-ink: #FFFFFF; /* 5.3:1 (st-late-dot oscuro daba 3.6:1) */
--demo-bg: #2A2415; --demo-text: #EDD39A; --demo-rule: #D2AC60;
--toast-bg: #E6EBF1; --toast-text: #0E1C2E; --toast-action: #85601F;
--toast-ok: #1C6A3E; --toast-err: #A3231F;
--chart-1: #7FA6D4; --chart-2: #D2AC60; --chart-3: #46A5C2; --chart-muted: #2C3D52;
--backdrop: rgba(1, 5, 12, 0.66);
--selection: #4A3C1C;
--skeleton-a: #15222F; --skeleton-b: #1C2B3C;
--i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B6C6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1522' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E");
--i-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1522' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 12h11'/%3E%3C/svg%3E");
--sh-hairline: 0 1px 0 rgba(0, 0, 0, 0.35);
--sh-raise: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px -2px rgba(0, 0, 0, 0.35);
--sh-pop: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
--sh-overlay: 0 32px 72px -16px rgba(0, 0, 0, 0.75), 0 6px 16px rgba(0, 0, 0, 0.45);
--sh-cover: 0 1px 1px rgba(0, 0, 0, 0.4), 0 10px 22px -8px rgba(0, 0, 0, 0.75);
}
/* ---------------------------------------------------------------------
4. RESET LIGERO Y BASE
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
font-weight: 400;
font-feature-settings: "kern" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
#root, #app, #biblios-root { height: 100%; }
/* Mensaje estático previo a React (lo escribe build.mjs en #biblios-root) */
.app-splash { display: grid; place-items: center; height: 100%; padding: var(--s-4); font-family: var(--font-serif); font-size: var(--fs-xl); color: var(--text-2); text-align: center; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -0.005em; color: var(--text); }
/* Especificidad 0 con :where(): cualquier clase (.b-timeline, .b-tree, .b-steps…) puede fijar su margen y relleno */
:where(ul[role="list"], ol[role="list"], ul[class^="b-"], ol[class^="b-"]) { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
[hidden] { display: none !important; }
::selection { background: var(--selection); color: var(--text); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
/* Icono de trazo 24×24 (paths de Biblios.brand.ICONS) */
.b-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.b-icon--sm { width: 16px; height: 16px; }
.b-icon--lg { width: 24px; height: 24px; }
.b-icon--xl { width: 32px; height: 32px; stroke-width: 1.25; }
/* Solo para lectores de pantalla */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Enlace "Saltar al contenido" (visible solo con foco) */
.b-skip { position: absolute; left: var(--s-4); top: var(--s-2); z-index: var(--z-toast); padding: var(--s-2) var(--s-3); background: var(--surface); color: var(--text); border-radius: var(--r-sm); box-shadow: var(--sh-pop); transform: translateY(-160%); }
.b-skip:focus-visible { transform: none; }
/* ---------------------------------------------------------------------
5. UTILIDADES MÍNIMAS (prefijo u-)
--------------------------------------------------------------------- */
.u-num { font-variant-numeric: tabular-nums lining-nums; } /* cifras tabulares */
.u-mono { font-family: var(--font-mono); font-size: 0.92em; } /* ISBN, códigos */
.u-serif { font-family: var(--font-serif); } /* voz de los libros */
.u-muted { color: var(--text-2); }
.u-subtle { color: var(--text-3); }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.u-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.u-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
.u-stack { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.u-grow { flex: 1 1 auto; min-width: 0; }
.u-right { margin-left: auto; }
.u-gap-lg { gap: var(--s-6); }
/* Utilidades b-* del contrato de arquitectura (§11.2); equivalentes a las u-* */
.b-stack { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.b-stack--sm { gap: var(--s-2); }
.b-stack--lg { gap: var(--s-6); }
.b-row { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.b-row--between { justify-content: space-between; }
.b-row--wrap { flex-wrap: wrap; }
.b-row--end { justify-content: flex-end; }
.b-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: var(--s-4); }
.b-spacer { flex: 1 1 auto; }
.b-muted { color: var(--text-2); }
.b-num { font-variant-numeric: tabular-nums lining-nums; }
.b-mono { font-family: var(--font-mono); font-size: 0.92em; }
.b-serif { font-family: var(--font-serif); }
.b-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.b-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.b-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.b-scroll-x { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.b-container { max-width: var(--content-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); min-width: 0; }
.b-h1 { font-family: var(--font-serif); font-size: var(--fs-3xl); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -0.01em; }
.b-h2 { font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: 500; line-height: var(--lh-tight); }
.b-h3 { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 500; line-height: var(--lh-snug); }
.b-eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); }
.b-divider { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; height: 0; }
/* ---------------------------------------------------------------------
6. LAYOUT DE LA APP
--------------------------------------------------------------------- */
/* Contenedor raíz: banner (opcional) + barra lateral + barra superior + contenido.
Atributos: data-sidebar="collapsed" (escritorio) · data-nav-open="true" (cajón ≤900px) */
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
grid-template-rows: auto var(--topbar-h) minmax(0, 1fr);
grid-template-areas: "banner banner" "side top" "side main";
height: 100%;
overflow: hidden;
background: var(--paper);
}
.app-shell__banner { grid-area: banner; min-width: 0; } /* aquí va .b-banner--demo */
/* Barra lateral = lomo marino con bandas doradas */
.sidebar {
grid-area: side;
display: flex;
flex-direction: column;
min-height: 0;
background: var(--side-bg);
color: var(--side-text);
border-right: 1px solid var(--side-line);
padding-left: env(safe-area-inset-left);
--focus: var(--side-focus);
z-index: var(--z-sidebar);
}
.sidebar__brand { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); color: var(--side-strong); text-decoration: none; min-width: 0; }
.sidebar__mark { width: 34px; height: 34px; flex: none; color: #FFFFFF; --gold: var(--gold-bright); } /* contiene LOGO_MARK_SVG */
.sidebar__mark svg { width: 100%; height: 100%; }
.sidebar__wordmark { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.sidebar__name { font-family: var(--font-brand); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.14em; color: var(--side-strong); }
.sidebar__org { font-size: var(--fs-xs); color: var(--side-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Doble banda dorada, como los lomos del logo */
.sidebar__bands { height: 5px; margin: 0 var(--s-5) var(--s-3); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); opacity: 0.75; flex: none; }
.sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s-1) var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 2px; }
.sidebar__section-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--side-muted); padding: var(--s-4) var(--s-3) var(--s-1); }
/* Elemento de navegación: