/* ============================================================
   escapa — App Shell (Opción A)
   Sidebar 248 px + Topbar 56 px. Carga al final (priority 100)
   para que sus :root overrides ganen a tokens.css legacy.
   ============================================================ */

/* ── Tokens del shell (prefijo --sh-* para espaciado, sin
      colisión con el --sp-* base-8 del tema legacy) ──────── */
:root {
  /* Avisa al navegador de que la página es clara: evita que Edge/Chrome
     apliquen su "modo oscuro forzado" por encima de nuestro tema. */
  color-scheme: light;

  /* Espaciado base-4 del shell */
  --sh-1: 0.25rem;   /*  4 px */
  --sh-2: 0.5rem;    /*  8 px */
  --sh-3: 0.75rem;   /* 12 px */
  --sh-4: 1rem;      /* 16 px */
  --sh-5: 1.25rem;   /* 20 px */
  --sh-6: 1.5rem;    /* 24 px */
  --sh-8: 2rem;      /* 32 px */

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:  56px;
  --header-h:  56px; /* override del 68 px legacy */

  /* Superficies (override del fondo cálido de tokens.css) */
  --bg:        #F4F6FA;
  --bg-panel:  #FFFFFF;
  --bg-sunken: #EEF1F7;

  /* Tinta (escala fría) */
  --ink-900: #0B1220;
  --ink-800: #131B2C;
  --ink-700: #1F2A44;
  --ink-600: #475065;
  --ink-500: #6B7488;
  --ink-400: #97A0B5;
  --ink-300: #C2C9D6;
  --ink-200: #DCE1EB;

  /* Semánticos de texto */
  --text:      var(--ink-900);
  --text-mute: var(--ink-600);
  --text-soft: var(--ink-500);
  --text-inv:  #F4F6FA;

  /* Compatibilidad con var(--ink-soft) legacy de single.php */
  --ink-soft: var(--ink-600);

  /* Marca: azul tinta */
  --brand:      #2F5BB7;
  --brand-900:  #0E1E3A;
  --brand-700:  #1E3A6E;
  --brand-500:  #2F5BB7;
  --brand-300:  #6E8CC9;
  --brand-100:  #DDE6F7;
  --brand-50:   #EEF3FC;
  --brand-soft: #EEF3FC;
  --focus-ring: rgba(47, 91, 183, 0.40);

  /* Health: verde sanitario */
  --health:      #14916A;
  --health-500:  #14916A;
  --health-100:  #D8F0E5;
  --health-soft: #D8F0E5;

  /* Acción: naranja terracota (solo CTA) */
  --accent:       #E25822;
  --accent-hover: #B14418;
  --accent-soft:  #FCEAE0;

  /* Bordes */
  --border:       #DCE1EB;
  --border-strong:#C2C9D6;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 4px 12px -4px rgba(11, 18, 32, 0.10), 0 2px 4px rgba(11, 18, 32, 0.04);
  --shadow-lg: 0 16px 40px -16px rgba(11, 18, 32, 0.28);

  /* Radios del shell */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;

  /* Tipografía del shell */
  --fs-2xs: 0.6875rem;  /* 11 px */
  --fs-xs:  0.75rem;    /* 12 px */
  --fs-sm:  0.8125rem;  /* 13 px */
  --fs-md:  1rem;       /* 16 px */

  /* Movimiento */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
}

/* ── Modo oscuro ("mesa de estudio nocturna") ── */
:root.dark {
  color-scheme: dark;

  --bg:        #0A0F1C;
  --bg-panel:  #111726;
  --bg-sunken: #161D2F;

  /* Tokens legacy de tokens.css: no tenían variante oscura, así que en modo
     noche quedaban con su valor claro (--ink casi negro sobre fondo oscuro:
     contraste 1.2:1). Se mapean aquí a sus equivalentes del shell. */
  --ink:     var(--ink-900);
  --bg-alt:  var(--bg-sunken);
  --surface: var(--bg-panel);

  --ink-900: #ECEFF5;
  --ink-700: #C2C9D6;
  --ink-600: #97A0B5;
  --ink-500: #7E8699;
  --ink-400: #5F6781;
  --ink-300: #3C435A;
  --ink-200: #252C40;

  --border:        #232A40;
  --border-strong: #2E3650;
  --text:      var(--ink-900);
  --text-mute: var(--ink-700);
  --text-soft: var(--ink-500);
  --ink-soft:  var(--ink-700);

  --accent:       #F07A45;
  --accent-hover: #F69468;
  --accent-soft:  rgba(240, 122, 69, 0.14);

  --brand:      #6E8CC9;
  --brand-soft: rgba(110, 140, 201, 0.14);
  --health:     #4DBE93;
  --health-soft:rgba(77, 190, 147, 0.14);
  --focus-ring: rgba(110, 140, 201, 0.55);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 18px -6px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px -24px rgba(0,0,0,0.75);
}

/* ── Base del body ── */
body {
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft);
}

/* ── App-shell: grid de 2 columnas ── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* El backdrop solo ocupa espacio en móvil (fuera del grid desktop) */
.sidebar-backdrop { display: none; }

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Marca / logo */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sh-2);
  padding: 0 var(--sh-5);
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--dur-fast);
}
.sidebar-brand:hover { color: var(--text); opacity: 0.85; }
.sidebar-brand .brand-mark { color: var(--brand); font-weight: 800; }
.sidebar-brand .tag-pill {
  margin-left: auto;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--bg-sunken);
  padding: 2px 7px;
  border-radius: var(--r-pill);
}

/* Sección */
.sidebar-section {
  padding: var(--sh-4) var(--sh-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-section:last-of-type { border-bottom: 0; }

.sidebar-section-title {
  padding: 0 var(--sh-3);
  margin: 0 0 var(--sh-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Nav */
.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-nav li { margin: 0; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--sh-3);
  padding: 0.5rem var(--sh-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-mute);
  border-radius: var(--r-sm);
  text-decoration: none;
  position: relative;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.sidebar-nav a:hover {
  background: var(--bg-sunken);
  color: var(--text);
}
.sidebar-nav a[aria-current="page"] {
  background: var(--bg-sunken);
  color: var(--text);
  font-weight: 600;
}
.sidebar-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.sidebar-nav .nav-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  color: var(--text-soft);
}
.sidebar-nav a[aria-current="page"] .nav-icon { color: var(--accent); }

/* Pie de sidebar */
.sidebar-footer {
  margin-top: auto;
  padding: var(--sh-4) var(--sh-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-2xs);
  color: var(--text-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sh-2);
  flex-shrink: 0;
}

/* ============================================================
   Columna principal
   ============================================================ */
.main-col {
  min-width: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sh-4);
  height: var(--topbar-h);
  padding: 0 var(--sh-6);
  background: rgba(244, 246, 250, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
:root.dark .topbar { background: rgba(10, 15, 28, 0.88); }

.topbar .crumbs {
  display: flex;
  align-items: center;
  gap: var(--sh-2);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
}
.topbar .crumbs a { color: var(--text-soft); text-decoration: none; }
.topbar .crumbs a:hover { color: var(--brand); }
.topbar .crumbs strong { color: var(--text); font-weight: 600; }
.topbar .crumbs .sep { color: var(--ink-300); margin: 0 2px; }
:root.dark .topbar .crumbs .sep { color: var(--ink-400); }

/* Búsqueda rápida */
.topbar .quick-search {
  margin-left: auto;
  flex: 0 1 360px;
  position: relative;
}
.topbar .quick-search form {
  position: relative;
  display: flex;
  align-items: center;
}
.topbar .quick-search input[type="search"],
.topbar .quick-search input[type="text"] {
  width: 100%;
  height: 36px;
  padding: 0 var(--sh-5) 0 36px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  -webkit-appearance: none;
}
.topbar .quick-search input[type="search"]::-webkit-search-decoration,
.topbar .quick-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.topbar .quick-search input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.topbar .quick-search .search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
  z-index: 1;
}
.topbar .quick-search kbd {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-2xs);
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  color: var(--text-soft);
  background: var(--bg-sunken);
  pointer-events: none;
}

/* Acciones topbar */
.topbar .topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sh-2);
}

/* ── Botón icono del shell ── */
.shell-btn-icon {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-mute);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
  padding: 0;
}
.shell-btn-icon:hover { background: var(--bg-sunken); color: var(--text); }
:root.dark .shell-btn-icon:hover { background: var(--bg-sunken); }

/* ── Área de contenido ── */
.site-main {
  flex: 1;
  padding: var(--sh-6);
}

/* ── Hamburgesa (solo visible en móvil) ── */
.mobile-toggle { display: none; }

/* ── Botón colapsar sidebar (solo desktop) ── */
.desktop-collapse { display: inline-flex; }

/* ============================================================
   Sidebar colapsado (solo desktop, > 960 px)
   ============================================================ */
.app.sidebar-collapsed,
:root.sidebar-collapsed-init .app {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}
.app.sidebar-collapsed .sidebar {
  /* Transición suave del ancho */
  transition: grid-template-columns var(--dur-base) var(--ease-soft);
}
.app .sidebar,
.app.sidebar-collapsed .sidebar {
  transition: width var(--dur-base) var(--ease-soft);
}

/* Marca: ocultar texto, mantener logo */
.app.sidebar-collapsed .sidebar-brand {
  padding: 0;
  justify-content: center;
  gap: 0;
}
.app.sidebar-collapsed .sidebar-brand > span,
.app.sidebar-collapsed .sidebar-brand .tag-pill {
  display: none;
}

/* Sección: títulos ocultos, padding reducido */
.app.sidebar-collapsed .sidebar-section {
  padding: var(--sh-2) var(--sh-1);
}
.app.sidebar-collapsed .sidebar-section-title {
  display: none;
}

/* Nav: solo iconos, centrados */
.app.sidebar-collapsed .sidebar-nav a {
  justify-content: center;
  padding: 0.6rem 0;
  gap: 0;
}
.app.sidebar-collapsed .sidebar-nav a > *:not(.nav-icon):not(svg) {
  display: none;
}
/* Ocultar nodos de texto entre el SVG y el final del enlace.
   Como los nodos de texto no son selectables, usamos font-size 0
   en el <a> y restauramos en el icono. */
.app.sidebar-collapsed .sidebar-nav a {
  font-size: 0;
}
.app.sidebar-collapsed .sidebar-nav .nav-icon {
  width: 18px; height: 18px;
}
/* Restaurar la pestaña activa para que no quede pegada al borde */
.app.sidebar-collapsed .sidebar-nav a[aria-current="page"]::before {
  left: 2px;
}

/* Footer: ocultar el copyright, dejar solo el botón tema */
.app.sidebar-collapsed .sidebar-footer {
  flex-direction: column;
  padding: var(--sh-3) var(--sh-1);
  gap: var(--sh-2);
}
.app.sidebar-collapsed .sidebar-footer > span {
  display: none;
}

/* Estado del botón collapse (en topbar): icono que cambia.
   El icono "expand" se oculta por defecto vía CSS (NO inline) para que la regla
   del estado colapsado pueda mostrarlo — un style="display:none" inline ganaría
   a la hoja de estilos y dejaría el botón sin icono al plegar. */
.js-sidebar-collapse .icon-expand { display: none; }
.app.sidebar-collapsed .js-sidebar-collapse .icon-collapse { display: none; }
.app.sidebar-collapsed .js-sidebar-collapse .icon-expand   { display: inline; }

/* ============================================================
   Responsive: ≤ 960 px
   ============================================================ */
@media (max-width: 960px) {
  /* Grid colapsa a 1 columna */
  .app {
    grid-template-columns: 1fr;
  }

  /* Sidebar: overlay deslizable desde la izquierda */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 90vw);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-soft);
    box-shadow: var(--shadow-lg);
    height: 100dvh;
  }
  .sidebar.open { transform: translateX(0); }

  /* Backdrop */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(11, 18, 32, 0.45);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base);
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

  /* Hamburguesa visible, collapse oculto */
  .mobile-toggle { display: inline-flex; }
  .desktop-collapse { display: none; }

  /* En móvil ignoramos cualquier estado colapsado (overlay manda) */
  .app.sidebar-collapsed { grid-template-columns: 1fr; }

  /* Topbar simplificado en móvil */
  .topbar { padding: 0 var(--sh-4); }
  .topbar .quick-search { display: none; }
  .topbar .crumbs { display: none; }

  /* Padding reducido en móvil */
  .site-main { padding: var(--sh-4); }
}

/* ============================================================
   Skip link (accesibilidad)
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 999;
  border-radius: 0 0 var(--r-md) 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   Tokens adicionales (tipografía, tracking)
   ============================================================ */
:root {
  --tracking-tight: -0.015em;
  --tracking-wide:  0.06em;
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --info-500: #2772B5;
  --info-100: #D7E7F4;
  :root.dark { --info-100: rgba(39,114,181,0.20); }
}

/* ============================================================
   Kicker (etiqueta de estado con punto verde)
   ============================================================ */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sh-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-soft);
}
.kicker .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--health);
  box-shadow: 0 0 0 3px var(--health-soft);
  flex-shrink: 0;
}

/* ============================================================
   Botones (nueva nomenclatura: btn-primary, btn-ghost, etc.)
   Convive con los btn--primary del tema legacy
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sh-2);
  padding: 0.55rem 0.95rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: all var(--dur-fast) var(--ease-soft);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), inset 0 -1px 0 rgba(0,0,0,0.12);
}
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--bg-sunken); color: var(--text); }
.btn-subtle {
  background: var(--bg-sunken);
  color: var(--text);
}
.btn-subtle:hover { background: var(--surface-3, #E4E9F2); }
.btn-link {
  padding: 0;
  background: none;
  color: var(--brand);
  font-weight: 600;
  font-size: var(--fs-sm);
  border-radius: 0;
  gap: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.btn-link:hover { color: var(--brand-700); }
.btn-lg { padding: 0.75rem 1.15rem; font-size: 0.9375rem; }
.btn-sm { padding: 0.4rem 0.7rem; font-size: var(--fs-xs); }

/* ============================================================
   Badges
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  color: var(--text-mute);
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.badge-brand  { background: var(--brand-100);   color: var(--brand-700);   border-color: transparent; }
.badge-health { background: var(--health-100);  color: var(--health-500);  border-color: transparent; }
.badge-accent { background: var(--accent-soft); color: var(--accent);      border-color: transparent; }
.badge-info   { background: var(--info-100);    color: var(--info-500);    border-color: transparent; }
:root.dark .badge-brand  { color: var(--brand-300); }
:root.dark .badge-health { color: var(--health); }
.badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   Chips (filtros interactivos)
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sh-1);
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  color: var(--text-mute);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-soft);
  text-decoration: none;
}
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip[aria-pressed="true"] {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ============================================================
   Progress bar
   ============================================================ */
.progress {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--bg-sunken);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow, 320ms) var(--ease-out, cubic-bezier(0.22,1,0.36,1));
}
.progress.thin { height: 3px; }
.progress.health > span { background: var(--health); }
.progress.action > span { background: var(--accent); }

/* ============================================================
   Panel (card contenedor)
   ============================================================ */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.panel-pad    { padding: var(--sh-5); }
.panel-pad-lg { padding: var(--sh-6); }
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sh-4);
  padding: var(--sh-4) var(--sh-5);
  border-bottom: 1px solid var(--border);
}
.panel-header h2,
.panel-header h3 { font-size: 0.9375rem; font-weight: 600; margin: 0; }
.panel-body       { padding: var(--sh-5); }
.panel-body.dense { padding: 0; }
.panel-footer {
  padding: var(--sh-3) var(--sh-5);
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sh-3);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

/* ============================================================
   Page header (encabezado de página con acciones)
   ============================================================ */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sh-6);
  padding-bottom: var(--sh-5);
  margin-bottom: var(--sh-6);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.page-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 0;
}
.page-header .sub {
  font-size: var(--fs-sm);
  color: var(--text-mute);
  margin-top: 4px;
  max-width: 70ch;
}
.page-header .actions {
  display: flex;
  gap: var(--sh-2);
  align-items: center;
  flex-wrap: wrap;
}

/* Section bar */
.section-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sh-4);
  margin-bottom: var(--sh-3);
}
.section-bar h2 { font-size: 1.125rem; font-weight: 600; margin: 0; }
.section-bar .meta { font-size: var(--fs-xs); color: var(--text-soft); }

/* ============================================================
   Session card — hero del dashboard
   ============================================================ */
.session-card {
  background:
    radial-gradient(1200px 200px at 100% 0%, rgba(47, 91, 183, 0.10), transparent 60%),
    var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sh-6);
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: var(--sh-6);
  align-items: center;
}
:root.dark .session-card {
  background:
    radial-gradient(1200px 240px at 100% 0%, rgba(110, 140, 201, 0.16), transparent 60%),
    var(--bg-panel);
}
.session-card .title-row {
  display: flex;
  align-items: center;
  gap: var(--sh-2);
  margin-bottom: var(--sh-2);
}
.session-card h2 {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 4px 0 0;
}
.session-card p { color: var(--text-mute); margin-top: var(--sh-2); font-size: var(--fs-sm); }
.session-card .session-actions {
  display: flex;
  gap: var(--sh-2);
  margin-top: var(--sh-4);
  flex-wrap: wrap;
}
.session-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sh-2);
  background: var(--bg-sunken);
  border-radius: var(--r-md);
  padding: var(--sh-3);
}
.session-meta .cell { padding: var(--sh-2); }
.session-meta .l {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-soft);
  font-weight: 600;
}
.session-meta .v {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .session-card { grid-template-columns: 1fr; padding: var(--sh-5); }
  .session-meta { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  /* En teléfono, 4 celdas en fila no caben («Oposiciones», «30.122» no pueden
     encoger) → desbordan y provocan scroll horizontal en TODA la home. 2×2. */
  .session-meta { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   KPI row — cuatro tiles de métricas
   ============================================================ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sh-3);
  margin-top: var(--sh-6);
}
.kpi {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sh-4);
  position: relative;
  overflow: hidden;
}
.kpi .label {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.kpi .label .icon { color: var(--brand); }
.kpi .value {
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 6px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kpi .value .unit { font-size: 1.125rem; color: var(--text-mute); margin-left: 2px; font-weight: 500; }
.kpi .delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: var(--sh-3);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.kpi .delta.up { color: var(--health); }
@media (max-width: 960px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .kpi-row { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Console — layout 2 columnas
   ============================================================ */
.console {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--sh-5);
  margin-top: var(--sh-6);
}
@media (max-width: 1100px) { .console { grid-template-columns: 1fr; } }

/* ============================================================
   Route list (vista lista de oposiciones)
   ============================================================ */
.route-list {
  display: flex;
  flex-direction: column;
}
.route-row {
  display: grid;
  grid-template-columns: 28px 1.8fr 1fr 1fr auto;
  gap: var(--sh-4);
  align-items: center;
  padding: var(--sh-3) var(--sh-4);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background var(--dur-fast) var(--ease-soft);
}
.route-row:last-child { border-bottom: 0; }
.route-row:hover { background: var(--bg-sunken); color: var(--text); }
.route-row .ix {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs);
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.route-row .name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.route-row .name strong { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.route-row .name span {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.route-row .stats {
  display: flex;
  gap: var(--sh-3);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.route-row .stats .num {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.route-row .progress-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.route-row .progress-cell .pct {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.route-row .go { color: var(--text-soft); }
.route-row:hover .go { color: var(--brand); }
@media (max-width: 760px) {
  .route-row { grid-template-columns: 1fr; gap: var(--sh-2); padding: var(--sh-3); }
  .route-row .ix, .route-row .go, .route-row .progress-cell { display: none; }
}

/* ============================================================
   Route grid + cards (cuadrícula de oposiciones)
   ============================================================ */
.route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sh-3);
}
@media (max-width: 1100px) { .route-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .route-grid { grid-template-columns: 1fr; } }

.route-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sh-4);
  display: flex;
  flex-direction: column;
  gap: var(--sh-3);
  text-decoration: none;
  color: var(--text);
  transition: all var(--dur-base) var(--ease-soft);
  position: relative;
}
.route-card:hover {
  border-color: var(--brand);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--brand);
}
.route-card .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sh-2);
}
.route-card .head .ix {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-2xs);
  color: var(--text-soft);
  padding: 2px 6px;
  background: var(--bg-sunken);
  border-radius: var(--r-xs);
  letter-spacing: 0.04em;
}
.route-card h3 { font-size: 0.9375rem; font-weight: 600; line-height: 1.2; margin: 0; }
.route-card p {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.route-card .stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sh-3);
  padding-top: var(--sh-3);
  border-top: 1px dashed var(--border-strong);
}
.route-card .stats .stat .num {
  font-family: var(--font-mono, monospace);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.route-card .stats .stat .lbl {
  font-size: var(--fs-2xs);
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.route-card .progress-area {
  display: flex;
  align-items: center;
  gap: var(--sh-3);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.route-card .progress-area .progress { flex: 1; }

/* ============================================================
   Topic item (fila de biblioteca / últimos temas)
   ============================================================ */
.topic-item {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: var(--sh-4);
  align-items: center;
  padding: var(--sh-3) var(--sh-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-soft);
}
.topic-item:last-child { border-bottom: 0; }
.topic-item:hover { background: var(--bg-sunken); color: var(--text); }
.topic-item .num {
  font-family: var(--font-mono, monospace);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.topic-item .body { min-width: 0; }
.topic-item .body strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 2px;
}
.topic-item .body .meta {
  display: flex;
  align-items: center;
  gap: var(--sh-2);
  font-size: var(--fs-xs);
  color: var(--text-soft);
}
.topic-item .go { color: var(--text-soft); }
.topic-item:hover .go { color: var(--brand); }
@media (max-width: 640px) {
  .topic-item { grid-template-columns: 36px 1fr; gap: var(--sh-3); }
  .topic-item .go { display: none; }
}

/* ============================================================
   Notice (caja informativa)
   ============================================================ */
.notice {
  display: flex;
  gap: var(--sh-3);
  padding: var(--sh-3) var(--sh-4);
  background: var(--info-100);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text);
  margin-top: var(--sh-6);
}
.notice .icon { color: var(--info-500); flex: 0 0 auto; margin-top: 2px; }

/* ============================================================
   Form controls (select, input)
   ============================================================ */
.select-native, .input-native {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: var(--fs-sm);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  font-family: inherit;
}
.select-native:focus, .input-native:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Split grid */
.split-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sh-3);
}
@media (max-width: 760px) { .split-2 { grid-template-columns: 1fr; } }

/* Live dot (pulsación verde) */
.live-dot {
  display: inline-flex;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--health);
  position: relative;
  flex-shrink: 0;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--health);
  opacity: 0.35;
  animation: livePulse 2s infinite cubic-bezier(0.22,1,0.36,1);
}
@keyframes livePulse {
  0%   { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Main inner wrapper (padding estándar para páginas) */
.main-inner {
  padding: var(--sh-6);
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 960px) { .main-inner { padding: var(--sh-4); } }

/* Utilidades de margen */
.mt-4  { margin-top: var(--sh-4); }
.mt-6  { margin-top: var(--sh-6); }
.mb-4  { margin-bottom: var(--sh-4); }
.mb-6  { margin-bottom: var(--sh-6); }
.flex  { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--sh-2); }
.gap-3 { gap: var(--sh-3); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }