/* =========================================================================
   Glosador Design System — v1.0
   ----------------------------------------------------------------------
   Para el dev: este archivo contiene TODO lo necesario para construir la
   UI de Glosador con la identidad visual aprobada. Incluye:

     1. Design tokens (colores, tipografía, espaciado, sombras, radios)
     2. Reset + estilos base (html, body, h1-h4, p, a, hr, ::selection)
     3. Utilidades de marca   (.gl-logo, .gl-eyebrow, .gl-view-title, etc.)
     4. Componentes           (.gl-btn, .gl-input, .gl-sidebar,
                               .gl-doc-card, .gl-stat-grid, .gl-badge, etc.)
     5. Capas glass           (.gl-glass-chrome, .gl-glass-card)

   Uso:
     <link rel="stylesheet" href="/static/glosador.css">

   Reglas de aplicación (importantes):
     - Fondo de app: graphite (--surface-app)
     - Fondo de contenido principal: cream (--surface-content)
     - Sidebar: sólido graphite, NO glass
     - Materia badges: línea vertical 2px + texto, NUNCA pills tintados
     - Stat numbers: Fraunces, con italic jade para destacar
     - Inputs: focus = jade border + ring suave (sin glow neón)
     - Botones: radius 4 (no pill), font-weight 500

   Paleta:
     - Ground: graphite (#0D1218 → #4a5263)
     - Accent: jade (#0a6e62 -> #d8f0ed)
     - Surface: cream (#F6F1E8) + paper (#fbf8f1)
     - Materia: teal (admin), jade (civil), cochinilla (penal),
                amate (laboral), violeta (constitucional)

   Type:
     - Fraunces (serif editorial) — display, headings, stat numbers, logo
     - Inter (sans humanista) — body, UI, eyebrows, labels
     - Mono nativa — código y data tabular

   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
  /* ---------- Ground — graphite ---------------------------------------- */
  --graphite-950: #0D1218;   /* deepest — behind glass */
  --graphite-900: #141a21;   /* app base */
  --graphite-800: #1a222a;   /* sidebar solid */
  --graphite-700: #242932;
  --graphite-600: #353b47;
  --graphite-500: #4a5263;

  /* Back-compat aliases (si hay CSS legacy referenciando navy-*) */
  --navy-900: var(--graphite-900);
  --navy-800: var(--graphite-800);
  --navy-700: var(--graphite-700);

  /* ---------- Accent — muted teal -------------------------------------- */
  --teal-700: #0a6e62;
  --teal-600: #0F8C7D;
  --teal-500: #2f9d96;       /* primary accent */
  --teal-400: #5cb8b0;
  --teal-300: #8ed0ca;
  --teal-100: #d8f0ed;

  /* ---------- Brand stroke + accents ----------------------------------- */
  --gl-stroke: #4C3420;
  --gl-stroke-light: #c4b8a8;
  --gl-jade: #0F8C7D;
  --gl-jade-deep: #0a6e62;
  --gl-clay: #a44620;
  --gl-cinnabar: #c0532a;
  --gl-ochre: #d49b32;
  --gl-cobalt: #3a5a8c;

  /* Back-compat: tokens gold antiguos apuntan a teal */
  --gold-500: var(--teal-500);
  --gold-400: var(--teal-400);
  --gold-300: var(--teal-300);

  /* ---------- Warm cream + paper --------------------------------------- */
  --cream:       #F6F1E8;
  --cream-soft:  #ede5d6;
  --cream-deep:  #d9cfbb;
  --paper:       #faf8f3;
  --paper-warm:  #f4efe6;
  --linen:       rgba(244, 239, 230, 0.94);
  --linen-solid: var(--cream);

  /* ---------- Ink / neutral text --------------------------------------- */
  --ink-900: #16181d;
  --ink-800: #22262e;
  --ink-700: #353a45;
  --ink-500: #5e6470;
  --ink-400: #878d99;
  --ink-300: #b3b8c2;

  /* ---------- Status --------------------------------------------------- */
  --success: #3a8f6a;
  --warning: #d49a3a;
  --danger:  #c3584f;
  --info:    #4a7ba8;

  /* ---------- Mesoamerican accents — cochinilla, amate, jade ----------- */
  --cochinilla-deep: hsl(4, 45%, 45%);
  --cochinilla:      hsl(4, 55%, 55%);
  --cochinilla-soft: hsl(4, 65%, 70%);

  --amate-deep:      hsl(35, 45%, 52%);
  --amate:           hsl(35, 50%, 65%);
  --amate-soft:      hsl(35, 55%, 80%);

  --jade-deep:       #0a6e62;
  --jade:            #0F8C7D;
  --jade-soft:       #5cb8b0;

  /* ---------- Materia (subject) badges --------------------------------- */
  --materia-administrativa: var(--teal-600);
  --materia-civil:          var(--jade);
  --materia-penal:          var(--cochinilla);
  --materia-laboral:        var(--amate-deep);
  --materia-constitucional: #7a4e9c;

  /* ---------- Glass surfaces ------------------------------------------- */
  --glass-light:        rgba(255, 255, 255, 0.07);
  --glass-light-strong: rgba(255, 255, 255, 0.12);
  --glass-dark:         rgba(20, 23, 29, 0.55);
  --glass-dark-strong:  rgba(20, 23, 29, 0.72);
  --glass-warm:         rgba(244, 239, 230, 0.72);

  --glass-border-light: rgba(255, 255, 255, 0.14);
  --glass-border-dark:  rgba(255, 255, 255, 0.05);
  --glass-border-warm:  rgba(22, 24, 29, 0.06);

  --glass-blur:         blur(24px);
  --glass-blur-strong:  blur(40px);
  --glass-blur-xl:      blur(60px);
  --glass-saturate:     saturate(140%);

  --shadow-glass:        0 8px 32px rgba(0, 0, 0, 0.40);
  --shadow-glass-strong: 0 16px 56px rgba(0, 0, 0, 0.50);

  /* Back-compat */
  --glass-chrome-bg:           var(--glass-dark-strong);
  --glass-card-bg:             var(--glass-light);
  --glass-card-border:         var(--glass-border-light);
  --glass-card-border-strong:  rgba(255, 255, 255, 0.22);

  /* ---------- Semantic surfaces / fg ----------------------------------- */
  --surface-app:        var(--graphite-950);
  --surface-chrome:     var(--glass-chrome-bg);
  --surface-content:    var(--cream);
  --surface-card-dark:  var(--glass-card-bg);
  --surface-card-paper: var(--paper);
  --surface-raised:     #ffffff;

  --fg-on-dark:         rgba(255, 255, 255, 0.94);
  --fg-on-dark-muted:   rgba(255, 255, 255, 0.68);
  --fg-on-dark-subtle:  rgba(255, 255, 255, 0.42);
  --fg-on-linen:        var(--ink-900);
  --fg-on-linen-muted:  var(--ink-500);
  --fg-on-linen-subtle: var(--ink-400);

  --accent:             var(--teal-600);
  --accent-hover:       var(--teal-500);
  --accent-tint:        rgba(15, 140, 125, 0.08);
  --accent-tint-strong: rgba(15, 140, 125, 0.18);
  --accent-ring:        rgba(15, 140, 125, 0.22);

  --border-on-linen:        rgba(22, 24, 29, 0.07);
  --border-on-linen-strong: rgba(22, 24, 29, 0.14);
  --border-on-dark:         var(--glass-border-light);

  /* ---------- Type ----------------------------------------------------- */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 60px;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.65;

  --tracking-logo:    0.01em;
  --tracking-eyebrow: 0.14em;
  --tracking-tight:  -0.015em;

  /* Roles semánticos */
  --role-logo-family:       var(--font-serif);
  --role-logo-size:         26px;
  --role-logo-weight:       500;
  --role-logo-tracking:     var(--tracking-logo);

  --role-h1-size:           44px;
  --role-h1-weight:         400;
  --role-h2-size:           30px;
  --role-h2-weight:         500;
  --role-h3-size:           22px;
  --role-h3-weight:         500;

  --role-view-title-size:   26px;
  --role-view-title-weight: 500;

  --role-stat-size:         56px;
  --role-stat-weight:       400;

  --role-body-size:         15px;
  --role-body-weight:       400;
  --role-body-leading:      var(--leading-body);

  --role-small-size:        13px;
  --role-eyebrow-size:      11px;
  --role-eyebrow-weight:    500;

  /* ---------- Spacing -------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --sidebar-width: 260px;
  --topbar-height: 60px;
  --content-max:   1400px;
  --content-pad-y: 28px;
  --content-pad-x: 36px;

  /* ---------- Radii ---------------------------------------------------- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   10px;
  --radius-full: 999px;

  /* ---------- Shadows -------------------------------------------------- */
  --shadow-paper:       0 1px 2px rgba(22, 24, 29, 0.05),
                        0 6px 18px rgba(22, 24, 29, 0.05);
  --shadow-paper-hover: 0 1px 2px rgba(22, 24, 29, 0.05),
                        0 12px 32px rgba(22, 24, 29, 0.09);
  --shadow-floating:    0 12px 40px rgba(0, 0, 0, 0.28);
  --shadow-pop:         0 20px 60px rgba(0, 0, 0, 0.40);
  --ring-focus:         0 0 0 3px var(--accent-ring);

  /* ---------- Motion --------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-lift:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-micro:     120ms;
  --dur-base:      200ms;
  --dur-lg:        280ms;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --cream:       #11161d;
  --cream-soft:  #171d26;
  --cream-deep:  #2a3340;
  --paper:       #171d26;
  --paper-warm:  #1e2630;
  --linen:       rgba(20, 26, 33, 0.94);
  --linen-solid: #141a21;

  --ink-900: #f7f1e8;
  --ink-800: #e8dfd2;
  --ink-700: #d0c5b7;
  --ink-500: #aaa192;
  --ink-400: #837d73;
  --ink-300: #625f59;

  --surface-app:        #090d12;
  --surface-chrome:     rgba(13, 18, 24, 0.92);
  --surface-content:    #0D1218;
  --surface-card-paper: #171d26;
  --surface-raised:     #1e2630;

  --fg-on-linen:        var(--ink-900);
  --fg-on-linen-muted:  var(--ink-500);
  --fg-on-linen-subtle: var(--ink-400);

  --accent-tint:        rgba(15, 140, 125, 0.16);
  --accent-tint-strong: rgba(15, 140, 125, 0.26);
  --accent-ring:        rgba(15, 140, 125, 0.34);

  --border-on-linen:        rgba(246, 241, 232, 0.09);
  --border-on-linen-strong: rgba(246, 241, 232, 0.16);
  --shadow-paper:           0 10px 30px rgba(0, 0, 0, 0.32);
  --shadow-paper-hover:     0 14px 40px rgba(0, 0, 0, 0.42);
}

/* =========================================================================
   2. BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--role-body-size);
  line-height: var(--role-body-leading);
  color: var(--fg-on-linen);
  background: var(--surface-content);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--fg-on-linen);
}
h1 { font-size: var(--role-h1-size); font-weight: 400; }
h2 { font-size: var(--role-h2-size); }
h3 { font-size: var(--role-h3-size); }

p  { margin: 0 0 var(--space-3) 0; }
a  { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
hr {
  border: 0;
  border-top: 1px solid var(--border-on-linen);
  margin: var(--space-6) 0;
}
::selection {
  background: var(--accent-tint-strong);
  color: var(--fg-on-linen);
}

/* App shell — fondo graphite con cream content */
.gl-app {
  min-height: 100vh;
  background: var(--surface-app);
  color: var(--fg-on-dark);
}

/* =========================================================================
   3. UTILIDADES DE MARCA
   ========================================================================= */

/* Logo Glosador */
.gl-logo {
  font-family: var(--role-logo-family);
  font-weight: var(--role-logo-weight);
  letter-spacing: var(--role-logo-tracking);
  color: var(--teal-500);
  font-size: var(--role-logo-size);
  line-height: 1;
}
.gl-logo img,
.brand-logo {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
.gl-logo .mx {
  font-style: italic;
  font-weight: 400;
  font-size: 0.7em;
  margin-left: 0.2em;
  /* WCAG AA: teal-400 on cream was 2.2:1; teal-600 hits 4.57:1 */
  color: var(--teal-600);
  vertical-align: 0.15em;
  letter-spacing: 0.02em;
}

/* Glosador Icon System */
.glo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.glo-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.glo-icon svg [data-accent="true"] {
  stroke: var(--jade);
}

.sidebar-item.active .glo-icon svg {
  color: var(--teal-600);
}

.sidebar-item.active .glo-icon svg [data-accent="true"] {
  stroke: var(--teal-400);
}

.bib-folder-icon.glo-icon,
.materia-card-icon.glo-icon,
.materia-detail-icon.glo-icon {
  color: var(--gl-stroke);
}

.bib-folder-icon.glo-icon {
  width: 20px;
  height: 20px;
}

.materia-card-icon.glo-icon {
  width: 22px;
  height: 22px;
}

.materia-detail-icon.glo-icon {
  width: 24px;
  height: 24px;
}

html[data-theme="dark"] .bib-folder-icon.glo-icon,
html[data-theme="dark"] .materia-card-icon.glo-icon,
html[data-theme="dark"] .materia-detail-icon.glo-icon {
  color: var(--gl-stroke-light);
}

/* Título de vista — barra teal a la izquierda */
.gl-view-title {
  font-family: var(--font-serif);
  font-size: var(--role-view-title-size);
  font-weight: var(--role-view-title-weight);
  color: var(--fg-on-linen);
  padding-left: var(--space-3);
  border-left: 2px solid var(--accent);
  line-height: 1.15;
  letter-spacing: 0.005em;
  display: inline-block;
}
.gl-view-title--dark { color: var(--fg-on-dark); }

/* Eyebrow — uppercase tracking ancho, encima de títulos */
.gl-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--role-eyebrow-size);
  font-weight: var(--role-eyebrow-weight);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-on-linen-muted);
}
.gl-eyebrow--dark { color: var(--fg-on-dark-subtle); }

/* Stat number - Fraunces grande, soporta <em> jade italic */
.gl-stat-number {
  font-family: var(--font-serif);
  font-size: var(--role-stat-size);
  font-weight: var(--role-stat-weight);
  line-height: 1;
  color: var(--fg-on-linen);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: lining-nums tabular-nums;
}
.gl-stat-number em {
  font-style: italic;
  color: var(--teal-600);
}
.gl-stat-number--on-dark { color: var(--fg-on-dark); }

/* =========================================================================
   4. CAPAS GLASS
   ========================================================================= */
.gl-glass-chrome {
  background: var(--glass-chrome-bg);
  backdrop-filter: var(--glass-blur-strong) var(--glass-saturate);
  -webkit-backdrop-filter: var(--glass-blur-strong) var(--glass-saturate);
  border: 1px solid var(--glass-border-light);
  color: var(--fg-on-dark);
}
.gl-glass-card {
  background: linear-gradient(145deg, var(--glass-light-strong), var(--glass-light));
  backdrop-filter: var(--glass-blur-strong) var(--glass-saturate);
  -webkit-backdrop-filter: var(--glass-blur-strong) var(--glass-saturate);
  border: 1px solid var(--glass-border-light);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), var(--shadow-glass);
  color: var(--fg-on-dark);
}
.gl-paper-card {
  background: var(--surface-card-paper);
  border: 1px solid var(--border-on-linen);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
  color: var(--fg-on-linen);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform  var(--dur-base) var(--ease-standard);
}
.gl-paper-card:hover {
  box-shadow: var(--shadow-paper-hover);
  transform: translateY(-1px);
}

/* =========================================================================
   5. COMPONENTES
   ========================================================================= */

/* ---------- Botones ---------------------------------------------------- */
.gl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.005em;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-standard),
              color            var(--dur-base) var(--ease-standard),
              border-color     var(--dur-base) var(--ease-standard);
}
.gl-btn:focus-visible {
  outline: 0;
  box-shadow: var(--ring-focus);
}

/* Primary — teal-600 */
.gl-btn--primary {
  background: var(--teal-600);
  color: #fff;
}
.gl-btn--primary:hover { background: var(--teal-700); }

/* Secondary — outline */
.gl-btn--secondary {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--border-on-linen-strong);
  padding: 10px 19px;
}
.gl-btn--secondary:hover {
  border-color: var(--ink-700);
  background: rgba(22, 24, 29, 0.03);
}

/* Link — underline editorial */
.gl-btn--link {
  background: transparent;
  color: var(--teal-700);
  padding: 11px 2px;
  border-bottom: 1px solid var(--teal-600);
  border-radius: 0;
}
.gl-btn--link:hover {
  color: var(--teal-600);
  border-bottom-color: var(--teal-500);
}

/* Ghost — sin chrome, solo texto */
.gl-btn--ghost {
  background: transparent;
  color: var(--ink-500);
  padding: 11px 2px;
}
.gl-btn--ghost:hover { color: var(--ink-900); }

/* Tamaños */
.gl-btn--sm { padding: 7px 14px; font-size: 13px; }
.gl-btn--lg { padding: 14px 26px; font-size: 15px; }

/* ---------- Inputs ----------------------------------------------------- */
.gl-field {
  display: block;
  max-width: 480px;
}
.gl-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-700);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.gl-input {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(22, 24, 29, 0.18);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-900);
  box-sizing: border-box;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow   var(--dur-base) var(--ease-standard);
}
.gl-input:focus {
  outline: 0;
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px rgba(15, 140, 125, 0.12);
}
.gl-input::placeholder { color: var(--ink-400); }
.gl-input--invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(195, 88, 79, 0.12);
}
.gl-help {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 6px;
}

/* Filtros sin pills — línea vertical + texto */
.gl-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--font-sans);
  font-size: 13px;
}
.gl-filter {
  color: var(--ink-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gl-filter::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 12px;
  background: var(--ink-400);
}
.gl-filter--active {
  color: var(--teal-700);
  font-weight: 500;
}
.gl-filter--active::before { background: var(--teal-600); }

/* ---------- Materia badge — línea vertical, no pill ------------------- */
.gl-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
}
.gl-badge::before {
  content: "";
  width: 2px;
  height: 16px;
  background: currentColor;
  border-radius: 1px;
}
.gl-badge--administrativa { color: var(--materia-administrativa); }
.gl-badge--civil          { color: var(--materia-civil); }
.gl-badge--penal          { color: var(--materia-penal); }
.gl-badge--laboral        { color: var(--materia-laboral); }
.gl-badge--constitucional { color: var(--materia-constitucional); }

/* ---------- Doc card --------------------------------------------------- */
.gl-doc-card {
  background: var(--paper);
  border: 1px solid var(--border-on-linen);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-paper);
  padding: 18px;
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform  var(--dur-base) var(--ease-standard);
}
.gl-doc-card:hover {
  box-shadow: var(--shadow-paper-hover);
  transform: translateY(-1px);
}
.gl-doc-card__meta {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.gl-doc-card__title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.35;
  margin-top: 10px;
  letter-spacing: -0.005em;
}
.gl-doc-card__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}
.gl-doc-card__refs {
  font-size: 12px;
  color: var(--ink-400);
  font-family: var(--font-sans);
}

/* ---------- Stat grid -------------------------------------------------- */
.gl-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-on-linen-strong);
  border-bottom: 1px solid var(--border-on-linen-strong);
}
.gl-stat-grid__item {
  padding: 24px 18px;
  border-right: 1px solid var(--border-on-linen);
}
.gl-stat-grid__item:last-child { border-right: 0; }
.gl-stat-grid__label {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.gl-stat-grid__value {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  margin-top: 12px;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-900);
}
.gl-stat-grid__value em {
  font-style: italic;
  color: var(--teal-600);
}
.gl-stat-grid__delta {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 10px;
}

@media (max-width: 900px) {
  .gl-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .gl-stat-grid__item:nth-child(2) { border-right: 0; }
}

/* ---------- Sidebar — graphite sólido ---------------------------------- */
.gl-sidebar {
  width: var(--sidebar-width);
  background: var(--graphite-800);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--space-6) 0;
  color: var(--fg-on-dark);
}
.gl-sidebar__brand {
  padding: 0 22px var(--space-6);
}
.gl-sidebar__nav {
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
}
.gl-sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  color: var(--fg-on-dark-muted);
  font-size: 14px;
  text-decoration: none;
  position: relative;
  transition: color var(--dur-base) var(--ease-standard);
}
.gl-sidebar__link:hover { color: var(--fg-on-dark); text-decoration: none; }
.gl-sidebar__link--active {
  color: var(--fg-on-dark);
  font-weight: 500;
}
.gl-sidebar__link--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--teal-400);
}

/* ---------- Layout helper --------------------------------------------- */
.gl-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}
.gl-content {
  background: var(--surface-content);
  padding: var(--content-pad-y) var(--content-pad-x);
  max-width: var(--content-max);
}

/* ---------- Status pills (status, no materia) ------------------------- */
.gl-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--teal-700);
}
.gl-status--success { background: rgba(58, 143, 106, 0.10); color: var(--success); }
.gl-status--warning { background: rgba(212, 154, 58, 0.12); color: var(--warning); }
.gl-status--danger  { background: rgba(195, 88, 79, 0.10);  color: var(--danger); }
.gl-status--info    { background: rgba(74, 123, 168, 0.10); color: var(--info); }

/* ---------- Rule (separador editorial) -------------------------------- */
.gl-rule { border: 0; border-top: 1px solid var(--border-on-linen); margin: var(--space-6) 0; }
.gl-rule--strong { border-top-color: var(--border-on-linen-strong); }
.gl-rule--dark { border-top-color: rgba(255, 255, 255, 0.08); }

/* =========================================================================
   OVERRIDES — integración con app shell existente
   ========================================================================= */

/* Área de contenido principal: cream en vez de gray-50 */
.main-content { background: var(--surface-content); }
#view-container { color: var(--fg-on-linen); }

/* Focus ring: teal en vez de gold */
:focus-visible { outline-color: var(--accent); }

/* Search bar: ring teal en focus */
.global-search:focus-within {
  border-color: var(--teal-600) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

/* Logo text en topbar */
.topbar-brand .gl-logo { font-size: 22px; }

/* =========================================================================
   LEGACY SHELL COMPATIBILITY
   Re-pinta el shell viejo para que use la paleta nueva con contraste sano.
   ========================================================================= */

.topbar {
  background: rgba(251, 248, 241, 0.92);
  border-bottom: 1px solid var(--border-on-linen);
  box-shadow: 0 8px 24px rgba(22, 24, 29, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.sidebar-toggle,
.topbar-btn,
.btn-logout {
  color: var(--ink-500);
}

.sidebar-toggle:hover,
.topbar-btn:hover {
  color: var(--ink-900);
  background: rgba(22, 24, 29, 0.06);
}

.theme-toggle {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle__icon {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1.7px solid currentColor;
  border-radius: 50%;
  color: inherit;
}

.theme-toggle__icon::after {
  content: "";
  position: absolute;
  inset: 3px 3px 3px auto;
  width: 8px;
  border-radius: 50%;
  background: var(--cream);
  transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}

html[data-theme="dark"] .theme-toggle__icon::after {
  transform: translateX(-4px);
  background: var(--surface-chrome);
}

html[data-theme="dark"] .topbar {
  background: rgba(13, 18, 24, 0.92);
  border-bottom-color: rgba(246, 241, 232, 0.10);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .topbar .brand-logo {
  content: url("/static/img/logo-primary-dark.png?v=brand-20260507");
}

html[data-theme="dark"] .sidebar-toggle:hover,
html[data-theme="dark"] .topbar-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.user-name {
  color: var(--ink-700);
}

.user-avatar {
  background: var(--teal-700);
  color: #fff;
}

.global-search {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(22, 24, 29, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.search-icon,
.global-search kbd {
  color: var(--ink-400);
}

.global-search input {
  color: var(--ink-900);
}

.global-search input::placeholder {
  color: var(--ink-400);
}

.global-search kbd {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(22, 24, 29, 0.10);
}

html[data-theme="dark"] .global-search {
  background: rgba(23, 29, 38, 0.86);
  border-color: rgba(246, 241, 232, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .global-search kbd {
  background: rgba(13, 18, 24, 0.92);
  border-color: rgba(246, 241, 232, 0.12);
}

.sidebar {
  background: linear-gradient(180deg, rgba(244, 239, 230, 0.98), rgba(236, 228, 214, 0.98));
  border-right: 1px solid rgba(22, 24, 29, 0.08);
}

html[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, rgba(26, 34, 42, 0.98), rgba(13, 18, 24, 0.98));
  border-right-color: rgba(246, 241, 232, 0.10);
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(22, 24, 29, 0.18);
}

.sidebar-label {
  color: var(--ink-700);
}

.sidebar-item {
  color: rgba(34, 38, 46, 0.72);
}

.sidebar-item svg {
  opacity: 0.78;
}

.sidebar-item:hover {
  background: rgba(15, 140, 125, 0.08);
  color: var(--ink-800);
}

html[data-theme="dark"] .sidebar-item {
  color: rgba(232, 223, 210, 0.72);
}

html[data-theme="dark"] .sidebar-item:hover {
  color: var(--ink-900);
}

.sidebar-item.active {
  background: transparent;
  color: var(--ink-900);
  border-left-color: var(--teal-600);
}

.sidebar-item.active svg {
  color: var(--teal-600);
}

.sidebar-badge {
  background: rgba(15, 140, 125, 0.14);
  color: var(--teal-700);
}

.sidebar-version {
  color: var(--ink-400);
}

html[data-theme="dark"] .biblioteca-sidebar {
  background: var(--paper);
  border-color: var(--border-on-linen-strong);
  box-shadow: var(--shadow-paper);
}

html[data-theme="dark"] .bib-sidebar-divider {
  background: var(--border-on-linen);
}

html[data-theme="dark"] .bib-folder-item:hover {
  background: var(--accent-tint);
}

html[data-theme="dark"] .bib-folder-count {
  color: var(--ink-500);
  background: rgba(255, 255, 255, 0.06);
}

.dof-tools-header {
  color: var(--ink-400);
}

.dof-tools-cta {
  margin-top: 8px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(244, 239, 230, 0.6), rgba(236, 228, 214, 0.6));
  border: 1px solid rgba(22, 24, 29, 0.08);
  border-radius: 10px;
  text-align: center;
}

.dof-tools-cta-desc {
  margin: 0 0 12px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-500, #475569);
}

.dof-tools-cta-btn {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  padding: 8px 14px;
  width: 100%;
  justify-content: center;
}

.dof-calendar {
  background: var(--paper);
  border-color: rgba(22, 24, 29, 0.08);
  box-shadow: var(--shadow-paper);
}

.dof-cal-title,
.dof-cal-day,
.dof-cal-nav {
  color: var(--ink-700);
}

.dof-cal-weekday,
.dof-cal-day.sunday,
.dof-cal-day.future {
  color: var(--ink-400);
}

.dof-cal-nav {
  border-color: rgba(22, 24, 29, 0.10);
  background: rgba(255, 255, 255, 0.92);
}

.dof-cal-nav:hover {
  border-color: var(--teal-400);
  color: var(--teal-700);
}

.dof-cal-day.clickable:hover {
  background: rgba(15, 140, 125, 0.08);
}

.dof-cal-day.has-data {
  background: rgba(15, 140, 125, 0.10);
  color: var(--teal-700);
}

.dof-cal-day.has-data:hover {
  background: rgba(15, 140, 125, 0.18);
}

.dof-cal-day.selected {
  background: var(--teal-600) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(44, 123, 128, 0.24);
}

.dof-cal-count,
.dof-cal-day.selected .dof-cal-count {
  color: inherit;
}

.dof-tool-item,
.dof-tool-btn {
  background: #1b1f27;
  border-color: rgba(255, 255, 255, 0.08);
}

.dof-tool-btn:hover,
.dof-tool-item.expanded {
  border-color: var(--teal-400);
}

.dof-tool-label,
.dof-tool-result-title {
  color: rgba(255, 255, 255, 0.92);
}

.dof-tool-chevron,
.dof-tool-result-count,
.dof-tool-result-entity,
.dof-tool-empty {
  color: rgba(255, 255, 255, 0.62);
}

.dof-tool-body {
  background: rgba(8, 10, 14, 0.42);
  border-top-color: rgba(255, 255, 255, 0.08);
}

.dof-tool-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.94);
}

.dof-tool-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.dof-tool-input:focus {
  border-color: var(--teal-400);
  box-shadow: 0 0 0 3px rgba(15, 140, 125, 0.16);
}

.dof-tool-search-btn {
  background: var(--teal-600);
  border-color: var(--teal-600);
  color: #fff;
}

.dof-tool-result {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dof-tool-result:hover {
  /* Solid dark hover. Semi-transparent white revealed the cream <main>
     beneath and made cream/light text illegible. */
  background: var(--ink-700);
}

.dof-entity-group {
  background: var(--paper);
  border-color: rgba(22, 24, 29, 0.08);
}

.dof-entity-header {
  background: rgba(22, 24, 29, 0.92);
}

.dof-entity-header:hover {
  background: #252b35;
}

.dof-entity-name {
  color: rgba(255, 255, 255, 0.96);
}

.dof-entity-chevron,
.dof-entity-count {
  color: rgba(255, 255, 255, 0.70);
}

.dof-entity-count {
  background: rgba(255, 255, 255, 0.10);
}

.dof-pub-card {
  background: transparent;
  border-top-color: rgba(22, 24, 29, 0.08);
}

.dof-pub-card:hover,
.dof-pub-card[data-pub-id]:hover,
.dof-pub-card.dof-pub-has-content:hover {
  background: rgba(15, 140, 125, 0.07);
}

.dof-pub-has-content:hover {
  border-left-width: 4px;
}

.dof-pub-title {
  color: var(--ink-900);
}

.dof-pub-has-content .dof-pub-title:hover {
  color: var(--teal-700);
}

.dof-pub-subordination,
.dof-rule-tag,
.dof-aviso-type {
  color: var(--ink-500);
}

.dof-sub-verb,
.dof-enrichment-meta {
  color: var(--ink-400);
}

.dof-rule-tag,
.dof-aviso-type,
.dof-enrichment-tag {
  background: rgba(22, 24, 29, 0.06);
  border-color: rgba(22, 24, 29, 0.08);
  color: var(--ink-700);
}

.dof-pub-expand-icon {
  color: var(--ink-400);
}

.dof-pub-has-content:hover .dof-pub-expand-icon {
  color: var(--teal-600);
}

.dof-pub-view-hint {
  color: var(--teal-700);
  background: rgba(15, 140, 125, 0.12);
}

/* =========================================================================
   SJF IDENTITY REFRESH
   Sobreescribe el esquema navy/gold oscuro del Semanario con la paleta
   linen + teal + ink del nuevo shell.
   ========================================================================= */

.sjf-view-header {
  border-bottom: 1px solid var(--border-on-linen);
  padding-bottom: 16px;
  margin-bottom: 0;
}

.sjf-header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.sjf-ultimo-libro {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-600);
  background: rgba(15, 140, 125, 0.08);
  border: 1px solid rgba(15, 140, 125, 0.18);
  border-radius: 6px;
  padding: 4px 10px;
}

.sjf-freshness-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-400);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.sjf-freshness-fresh {
  color: #15803d;
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.2);
}

.sjf-freshness-warn {
  color: #92640a;
  background: rgba(234, 179, 8, 0.10);
  border-color: rgba(234, 179, 8, 0.25);
}

.sjf-freshness-stale {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.10);
  border-color: rgba(220, 38, 38, 0.25);
}

.sjf-freshness-note {
  font-size: 11px;
  color: var(--ink-400);
  font-style: italic;
}

.sjf-fuentes-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(22, 24, 29, 0.03);
  border: 1px solid rgba(22, 24, 29, 0.06);
  border-radius: 8px;
  font-size: 12px;
}

.sjf-fuentes-label {
  color: var(--ink-500, #475569);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.sjf-fuente-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #1d4ed8;
  text-decoration: none;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(22, 24, 29, 0.10);
  border-radius: 6px;
  transition: all 0.15s ease;
}

.sjf-fuente-link:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(22, 24, 29, 0.22);
  color: #0f172a;
}

.sjf-cta-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px auto;
  padding: 40px 32px;
  max-width: 720px;
  background: linear-gradient(180deg, rgba(244, 239, 230, 0.6), rgba(236, 228, 214, 0.6));
  border: 1px solid rgba(22, 24, 29, 0.08);
  border-radius: 12px;
}

.sjf-cta-content {
  text-align: center;
  max-width: 540px;
}

.sjf-cta-content h2 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: var(--ink-900, #0f172a);
}

.sjf-cta-content p {
  margin: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-500, #475569);
}

.sjf-cta-btn {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  padding: 10px 22px;
}

/* Sidebar */
.sjf-sidebar {
  background: linear-gradient(180deg, rgba(244, 239, 230, 0.98), rgba(236, 228, 214, 0.98));
  border-right: 1px solid rgba(22, 24, 29, 0.08);
}

.sjf-sidebar-label {
  color: var(--ink-500);
}

.sjf-nav-item {
  color: rgba(34, 38, 46, 0.72);
}

.sjf-nav-item svg { opacity: 0.7; }

.sjf-nav-item:hover {
  background: rgba(15, 140, 125, 0.08);
  color: var(--ink-800);
}

.sjf-nav-item.active {
  background: transparent;
  color: var(--ink-900);
  border-left: 2px solid var(--teal-600);
  padding-left: 10px;
}

.sjf-nav-item.active svg { color: var(--teal-600); opacity: 1; }

.sjf-materia-count {
  color: var(--ink-400);
}

/* Content area */
.sjf-content {
  background: var(--paper, #faf8f1);
}

/* Search panel */
.sjf-search-panel {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(22, 24, 29, 0.09);
}

.sjf-search-panel h2 {
  color: var(--ink-900);
}

.sjf-search-desc {
  color: var(--ink-500);
}

.sjf-field label {
  color: var(--ink-500);
}

.sjf-input,
.sjf-select {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(22, 24, 29, 0.12);
  color: var(--ink-900);
}

.sjf-input::placeholder { color: var(--ink-400); }

.sjf-input:focus,
.sjf-select:focus {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(15, 140, 125, 0.14);
}

/* Results */
.sjf-results-header {
  color: var(--ink-500);
  border-bottom-color: rgba(22, 24, 29, 0.08);
}

.sjf-results-hint { color: var(--ink-400); }

.sjf-sub-header h2 { color: var(--ink-900); }
.sjf-sub-count { color: var(--ink-400); }

/* Cards */
.sjf-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(22, 24, 29, 0.08);
}

.sjf-card:hover {
  border-color: var(--teal-400);
  background: rgba(15, 140, 125, 0.05);
}

.sjf-card-clave { color: var(--ink-400); }
.sjf-card-fecha { color: var(--ink-400); }

.sjf-card-rubro {
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.sjf-card-texto { color: var(--ink-600); }

.sjf-card-meta { color: var(--ink-400); }

.sjf-card-instancia,
.sjf-card-fuente { color: var(--ink-500); }

/* Badges */
.sjf-badge-juris {
  background: rgba(234, 179, 8, 0.12);
  color: #92640a;
  border: 1px solid rgba(234, 179, 8, 0.28);
}

.sjf-badge-aislada {
  background: rgba(22, 24, 29, 0.07);
  color: var(--ink-500);
  border: 1px solid rgba(22, 24, 29, 0.10);
}

.sjf-badge-epoca {
  background: rgba(15, 140, 125, 0.10);
  color: var(--teal-700);
  border: 1px solid rgba(15, 140, 125, 0.20);
}

/* Último libro banner (en vista recientes) */
.sjf-libro-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(15, 140, 125, 0.08), rgba(15, 140, 125, 0.04));
  border: 1px solid rgba(15, 140, 125, 0.20);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
  color: var(--teal-700);
}

.sjf-libro-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sjf-libro-banner-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-600);
  opacity: 0.8;
}

.sjf-libro-banner-volumen {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-800);
}