/* ── CSS Variables — Light Theme (default) ───────────── */
:root {
  --bg: #F3F4F6;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --border: #E2E4E9;
  --border-light: #F0F1F4;
  --text: #3D4858;
  --text-secondary: #6B7180;
  --text-muted: #9BA0A8;

  --accent: #CA1617;
  --accent-hover: #B01314;
  --accent-bg: #FEF2F2;
  --accent-border: #FECACA;

  --danger: #E11D48;
  --danger-bg: #FFF1F2;
  --warning: #D97706;
  --warning-bg: #FFFBEB;
  --success: #059669;
  --success-bg: #ECFDF5;

  /* Sidebar — gris-celeste light theme (2026-06-08). Cool blue-gray
     tone que se distingue del page bg (#F3F4F6) sin oscurecer el
     ambiente como antes (#252A35). Hover/active states usan tintes
     del slate primario en vez de rgba(255,255,255,...) — el último
     era invisible sobre fondo claro. */
  --sidebar-bg: #E5EAF0;
  --sidebar-brand: #1F2937;
  --sidebar-text: #3D4858;
  --sidebar-text-muted: rgba(31, 41, 55, 0.45);
  --sidebar-hover-bg: rgba(31, 41, 55, 0.07);
  --sidebar-active-bg: rgba(31, 41, 55, 0.10);
  --sidebar-active-text: #1F2937;
  --sidebar-active: var(--accent);

  /* Outgoing chat bubble — gris-celeste un punto más saturado que el
     sidebar para diferenciarlos en la misma vista. Reemplaza el rojo
     accent que era ruidoso en sesiones largas. */
  --bubble-user-bg: #DDE5EE;
  --bubble-user-text: #1F2937;

  --font: 'DM Sans', system-ui, sans-serif;
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --sidebar-w: 260px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Dark Theme ──────────────────────────────────────── */
[data-theme="dark"] {
  --bg: #14161C;
  --surface: #1E2028;
  --surface-2: #181A22;
  --border: #2E323E;
  --border-light: #262934;
  --text: #E8E9EC;
  --text-secondary: #9BA0A8;
  --text-muted: #6B7180;

  --accent: #E04044;
  --accent-hover: #F05458;
  --accent-bg: rgba(224, 64, 68, 0.12);
  --accent-border: rgba(224, 64, 68, 0.25);

  --danger: #FB7185;
  --danger-bg: rgba(225, 29, 72, 0.12);
  --warning: #FBBF24;
  --warning-bg: rgba(217, 119, 6, 0.12);
  --success: #34D399;
  --success-bg: rgba(5, 150, 105, 0.12);

  /* Dark theme keeps the original sidebar palette (dark slate +
     white-tint hovers) y restaura la burbuja roja — el user pidió
     SÓLO cambiar light theme. */
  --sidebar-bg: #111318;
  --sidebar-brand: #fff;
  --sidebar-text: #7B8190;
  --sidebar-text-muted: rgba(255, 255, 255, 0.25);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-active-bg: rgba(255, 255, 255, 0.08);
  --sidebar-active-text: #fff;
  --sidebar-active: #E04044;

  --bubble-user-bg: var(--accent);
  --bubble-user-text: #fff;
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-w);
  height: 100dvh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: transform 0.3s var(--ease);
}

.sidebar-brand {
  padding: 28px 24px 20px;
  position: relative;
}
.sidebar-brand h1 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--sidebar-brand);
  letter-spacing: -0.02em;
}
.sidebar-brand .brand-alt,
.sidebar-brand .brand-ai {
  color: var(--sidebar-active);
}
.sidebar-brand .brand-legal {
  color: var(--sidebar-brand);
}
.brand-ai {
  color: var(--sidebar-active);
}
.sidebar-brand p {
  font-size: 11px;
  color: var(--sidebar-text);
  opacity: 0.5;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* Theme toggle */
.theme-toggle {
  position: absolute;
  top: 24px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sidebar-text-muted);
  padding: 4px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  line-height: 0;
}
.theme-toggle:hover {
  color: var(--sidebar-active-text);
  background: var(--sidebar-hover-bg);
}

/* Sidebar sections */
.sidebar-section {
  padding: 16px 16px 8px;
}
.sidebar-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-text-muted);
  padding: 0 0 8px;
}

/* Scope selectors */
.scope-selectors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scope-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.scope-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
}
.scope-select {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  font-size: 12px;
  font-family: var(--font);
  color: #fff;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}
.scope-select option {
  background: var(--sidebar-bg);
  color: #fff;
}

/* New session button */
.new-session-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,0.12);
  background: transparent;
  color: var(--sidebar-text);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  margin-bottom: 8px;
}
.new-session-btn:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

.replay-btn {
  border-style: solid;
  border-color: rgba(255,255,255,0.08);
  opacity: 0.7;
  font-size: 11px;
}
.replay-btn:hover { opacity: 1; }

/* Replay mode header */
.replay-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  background: var(--warning-bg);
  color: var(--warning);
  margin-left: 8px;
}

/* Sidebar nav items — showcase pattern (altlegal-design) */
.sidebar-nav { list-style: none; }
.sidebar-nav li { margin-bottom: 1px; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-nav a:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-active-text);
}
.sidebar-nav a.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  border-left-color: var(--accent);
}
.sidebar-nav svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
  opacity: 0.75;
}
.sidebar-nav a.active svg { opacity: 1; stroke: var(--accent); }

/* Session delete button */
.session-delete-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.15s var(--ease);
}
.sidebar-nav a:hover .session-delete-btn { display: flex; }
.session-delete-btn:hover {
  color: var(--danger);
  background: rgba(225,29,72,0.15);
}
[data-theme="dark"] .session-delete-btn:hover {
  color: var(--danger);
  background: rgba(251,113,133,0.15);
}

/* Sidebar layout: brand + search up top (fixed), sections scroll, footer fixed bottom.
   .sidebar is a flex column with height 100dvh — children at the edges have
   flex-shrink:0 and the middle scroller takes the remaining space. */
.sidebar-brand,
.sidebar-search { flex-shrink: 0; }

.sidebar-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  /* Match the dark sidebar scrollbar visual to the rest of the chrome */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* Sidebar footer / user */
.sidebar-footer {
  flex-shrink: 0;
  margin-top: 0;          /* no longer needs auto-push; .sidebar-scroll absorbs the space */
  padding: 16px;
  border-top: 1px solid var(--sidebar-hover-bg);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-user-info { min-width: 0; flex: 1; }
.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sidebar-hover-bg);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-initials {
  font-size: 12px;
  font-weight: 700;
  color: var(--sidebar-text-muted);
}
.sidebar-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--sidebar-brand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-email {
  font-size: 10px;
  color: var(--sidebar-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-badge {
  font-size: 9px;
  background: rgba(202,22,23,0.2);
  color: var(--sidebar-active);
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  font-weight: 600;
}
[data-theme="dark"] .admin-badge {
  background: rgba(224,64,68,0.2);
}

/* ── LLM selector ────────────────────────────────────── */
.llm-selector {
  display: flex;
  gap: 4px;
  align-items: center;
}
.llm-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--sidebar-text);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  flex: 1;
  justify-content: center;
}
.llm-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.llm-btn.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
.llm-btn.unavailable {
  opacity: 0.35;
  cursor: not-allowed;
}
.llm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.llm-dot.available { background: var(--success); }
.llm-dot.active { background: var(--accent); }
.llm-settings-btn {
  flex: 0;
  padding: 5px 8px;
  color: rgba(255,255,255,0.35);
}
.llm-settings-btn:hover { color: rgba(255,255,255,0.8); }

/* ── Config view ─────────────────────────────────────── */
.config-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.config-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.config-view-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.config-view-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.config-view-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 48px;
}

.config-tabs {
  display: flex;
  gap: 4px;
  padding: 0 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.config-tabs::-webkit-scrollbar { display: none; }
.config-tab {
  position: relative;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 14px 16px;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.config-tab:hover {
  color: var(--text);
}
.config-tab.active {
  color: var(--text);
  font-weight: 700;
  /* +1px compensates for the parent's `border-bottom: 1px` that the tab's
     `margin-bottom: -1px` overlaps — keeps visible red ≈ 2px to match
     the inner `.al-subnav` underline. */
  border-bottom: 3px solid var(--accent);
}
.config-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: 4px;
}

.config-tab-panel { display: none; }
.config-tab-panel.is-active { display: block; }

.config-section {
  margin-bottom: 28px;
}
.config-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.config-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.config-providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.config-provider-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.config-provider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.config-provider-dot.on { background: var(--success); }
.config-provider-dot.off { background: var(--text-muted); }
.config-provider-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.config-provider-model {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.config-provider-status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
}
.config-provider-status.on { color: var(--success); }
.config-provider-status.off { color: var(--text-muted); }

.config-field { margin-bottom: 16px; }
.config-field:last-child { margin-bottom: 0; }
.config-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 2px;
}
.config-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  outline: none;
  margin-top: 6px;
}
.config-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(202,22,23,0.1);
}
[data-theme="dark"] .config-select:focus {
  box-shadow: 0 0 0 3px rgba(224,64,68,0.15);
}

.config-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  outline: none;
}
.config-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(202,22,23,0.1);
}
[data-theme="dark"] .config-input:focus {
  box-shadow: 0 0 0 3px rgba(224,64,68,0.15);
}
textarea.config-input {
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}

/* ── Use-case list (config view) ────────────────────── */
.uc-list-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.uc-list-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;  /* empuja los botones (Nuevo caso + Recargar) al extremo derecho */
}
.uc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.uc-list-row {
  display: grid;
  grid-template-columns: 140px 1fr auto auto 28px;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s var(--ease);
}
.uc-list-row:first-child { border-top: 0; }
.uc-list-row:hover { background: var(--border-light); }
.uc-list-row.is-disabled .uc-list-name,
.uc-list-row.is-disabled .uc-list-id { opacity: 0.55; }

/* Category drill-down rows */
.uc-cat-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s var(--ease);
}
.uc-cat-row:first-child { border-top: 0; }
.uc-cat-row:hover { background: var(--border-light); }
.uc-cat-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
}
.uc-cat-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.uc-cat-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
}

.uc-list-back {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.uc-list-back:first-child { border-top: 0; }
.uc-list-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.uc-list-back-btn:hover { color: var(--text); background: var(--border-light); }
.uc-list-back-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.uc-list-cat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.uc-list-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uc-list-id {
  font-size: 11px;
  color: var(--text-muted);
}
.uc-list-state {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.uc-list-row.is-disabled .uc-list-state { color: var(--warning); }

/* Prefijo numérico del paso (cuando el caso es parte de una trayectoria) */
.uc-list-paso {
  display: inline-block;
  min-width: 26px;
  padding: 1px 6px;
  margin-right: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: center;
  vertical-align: 1px;
}

/* Pill de multi-turno — se muestra al lado del nombre cuando el caso
   declara `subprompts` en el frontmatter (ver web/admin.html#uc-multi-turn). */
.uc-list-multipill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg, rgba(0, 102, 204, 0.08));
  border: 1px solid var(--accent);
  border-radius: 4px;
  vertical-align: 1px;
}
.uc-list-row.is-disabled .uc-list-multipill { opacity: 0.55; }

/* Version tag — sutil, monoespaciado, junto al nombre. Sin fondo de pill
   para no competir con los pills coloridos (tier-high, multi-turno). */
.uc-list-version {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  vertical-align: 1px;
}
.uc-list-row.is-disabled .uc-list-version { opacity: 0.55; }

/* Pill de tier-high — visible cuando el caso configuró un modelo high-tier
   como primary en model_chain (Pro / Opus / GPT-5). Color contrastante con
   multipill para distinguirlas a primera vista. */
.uc-list-tierpill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7a4400;
  background: rgba(255, 178, 56, 0.15);
  border: 1px solid #cc8800;
  border-radius: 4px;
  vertical-align: 1px;
}
.uc-list-row.is-disabled .uc-list-tierpill { opacity: 0.55; }
.uc-list-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.uc-list-edit:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg);
}
.uc-list-loading,
.uc-list-empty {
  padding: 14px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* ── Use-case editor view ──────────────────────────── */
.uc-editor-status {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 90px;
  text-align: right;
}
.uc-editor-status.is-saved { color: var(--success); }
.uc-editor-status.is-dirty { color: var(--warning); }
.uc-editor-status.is-error { color: var(--danger); }

.uc-editor-form { display: none; }
.uc-editor-form.is-active { display: block; }

.uc-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.uc-editor-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
/* Equalize input + select metrics inside the editor grid:
   - kill the legacy margin-top from .config-select (it lives in a flex
     container with its own gap, so the margin double-spaces against inputs)
   - match font-size so intrinsic line height — and therefore element
     height — is identical between <input> and <select> */
.uc-editor-field .config-input,
.uc-editor-field .config-select {
  height: 36px;
  font-size: 13.5px;
  margin-top: 0;
  box-sizing: border-box;
}
.uc-editor-field textarea.config-input {
  height: auto; /* textarea sizes from rows attribute */
}

/* Icon select + live preview swatch — gives the editor a visual sense of
   what each named icon ("gavel", "receipt", ...) actually looks like. */
.uc-editor-icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
}
.uc-editor-icon-row .config-select {
  flex: 1;
  min-width: 0;
}
.uc-editor-icon-preview {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--accent);
  flex-shrink: 0;
}
.uc-editor-icon-preview svg {
  width: 18px;
  height: 18px;
  display: block;
}
.uc-editor-icon-preview:empty::before {
  /* Subtle dot when no icon selected yet */
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
}
.uc-editor-field--full { grid-column: 1 / -1; }
.uc-editor-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.uc-editor-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.uc-editor-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

.uc-editor-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.uc-editor-tools label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}

.uc-editor-sugerencias {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.uc-editor-body {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  resize: vertical;
  min-height: 320px;
}
.uc-editor-body:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(202,22,23,0.1);
}

/* Sprint 3 — body header con toggle preview */
.uc-editor-body-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.uc-editor-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.uc-editor-preview-toggle input { cursor: pointer; }
.uc-editor-preview-toggle:hover { color: var(--text); }

/* Pane: por default textarea ocupa todo. is-split habilita 2 columnas. */
.uc-editor-body-pane {
  display: block;
}
.uc-editor-body-pane.is-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.uc-editor-body-pane.is-split .uc-editor-body { resize: none; }
.uc-editor-body-preview {
  min-height: 320px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  overflow-y: auto;
  max-height: 600px;
}
.uc-editor-body-preview h1,
.uc-editor-body-preview h2,
.uc-editor-body-preview h3 {
  font-family: var(--font-display);
  margin: 14px 0 6px;
  font-weight: 700;
}
.uc-editor-body-preview h2 { font-size: 16px; }
.uc-editor-body-preview h3 { font-size: 14px; }
.uc-editor-body-preview p { margin: 0 0 10px; }
.uc-editor-body-preview ul,
.uc-editor-body-preview ol { padding-left: 22px; margin: 0 0 10px; }
.uc-editor-body-preview code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--border-light);
  padding: 1px 5px;
  border-radius: 3px;
}
.uc-editor-body-preview pre {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--border-light);
  padding: 10px 12px;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}
.uc-preview-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-style: italic;
}

/* Linter inline */
.uc-editor-linter {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.uc-editor-linter[hidden] { display: none; }
.uc-linter-summary {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10.5px;
  color: var(--text-muted);
}
.uc-linter-summary strong {
  color: var(--text);
  font-weight: 700;
}
.uc-linter-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.uc-linter-item {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  color: var(--text);
}
.uc-linter-icon {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
}
.uc-linter-warn .uc-linter-icon { color: var(--warning); }
.uc-linter-info .uc-linter-icon { color: var(--info); }
.uc-editor-linter code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--border-light);
  padding: 1px 4px;
  border-radius: 3px;
}

.uc-editor-errors {
  margin-top: 14px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid rgba(225, 29, 72, 0.25);
  border-radius: 8px;
}
.uc-editor-errors[hidden] { display: none; }
.uc-editor-errors ul {
  list-style: disc;
  margin: 4px 0 0 16px;
  padding: 0;
}
.uc-editor-errors li + li { margin-top: 2px; }
.uc-editor-errors strong {
  font-family: var(--font-mono);
  font-weight: 500;
}

.uc-editor-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.uc-editor-footer-spacer { flex: 1; }

/* Variante "ghost peligroso" — Archivar. Sobrio en idle, marca color
   accent (rojo del brand) on hover. */
.btn-danger-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s var(--ease);
}
.btn-danger-ghost:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* Errores del modal de creación */
.uc-create-errors {
  margin: 10px 0;
  padding: 10px 12px;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-size: 12.5px;
}
.uc-create-error { line-height: 1.4; }
.config-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.config-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  margin-left: 4px;
}
.config-slider {
  width: 100%;
  margin-top: 8px;
  accent-color: var(--accent);
  height: 4px;
}
.config-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.config-checkbox input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.config-divider {
  border-top: 1px solid var(--border);
  margin: 16px 0;
}
.config-section-tip {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}
.config-section-tip-title {
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-size: 12px;
}
.config-section-tip-list {
  margin: 0;
  padding-left: 18px;
}
.config-section-tip-list li {
  margin-bottom: 6px;
}
.config-section-tip-list li:last-child {
  margin-bottom: 0;
}
.config-section-tip-list strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ── Comportamiento (per-user) ─────────────────────────── */
.config-behavior-intro {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 4px;
}
.config-behavior-list {
  display: flex;
  flex-direction: column;
}
.config-behavior-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.config-behavior-row:first-child {
  border-top: none;
  padding-top: 16px;
}
.config-behavior-text {
  flex: 1;
  min-width: 0;
}
.config-behavior-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.config-behavior-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-switch .toggle-track {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.toggle-switch .toggle-track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.toggle-switch input:checked + .toggle-track {
  background: var(--accent);
}
.toggle-switch input:checked + .toggle-track::before {
  transform: translateX(20px);
}
.toggle-switch input:disabled + .toggle-track {
  opacity: 0.5;
  cursor: not-allowed;
}
[data-theme="dark"] .toggle-switch .toggle-track {
  background: #3a3a3a;
}
.config-stats {
  margin-top: 8px;
}
.config-stats-loading {
  font-size: 12px;
  color: var(--text-muted);
}
.config-stats-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.config-stats-breakdown { min-width: 0; }
@media (max-width: 720px) {
  .config-stats-split { grid-template-columns: 1fr; gap: 16px; }
}

.config-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.config-stat-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.config-stat-value {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.config-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 2px;
}
.config-cat-list {
  margin-top: 8px;
}
.config-cat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border-light);
}
.config-cat-row:last-child { border-bottom: none; }
.config-cat-name {
  color: var(--text-secondary);
  text-transform: capitalize;
}
.config-cat-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.config-cat-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

/* ── Chat header actions ─────────────────────────────── */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.chat-header .chat-header-info {
  flex: 1;
  min-width: 0;
}
.chat-header-actions {
  display: flex;
  gap: 4px;
}
.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s var(--ease);
}
.btn-icon:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* ── Main content area ───────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 24px 64px;
  flex: 1;
  text-align: center;
  overflow-y: auto;
}
.empty-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.empty-desc {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 28px;
}

/* Grid 3x2 de casos sugeridos. Reusa el render compacto de _catalogCardHtml.
   Ancho máximo limitado para que las cards no se vuelvan gigantes en
   pantallas anchas (mantiene la lectura compacta tipo dashboard). */
.suggested-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto 24px;
  text-align: left;
}
.suggested-grid .uc-card {
  cursor: pointer;
}
@media (max-width: 900px) {
  .suggested-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .suggested-grid { grid-template-columns: 1fr; }
}

/* Fila de acciones secundarias bajo el grid */
.empty-cta-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.empty-help-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--ease);
  max-width: 360px;
}
.empty-help-card:hover {
  border-color: rgba(202, 22, 23, 0.4);
  background: var(--surface);
  transform: translateY(-1px);
}
.empty-help-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent-bg, rgba(202, 22, 23, 0.08));
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-help-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.empty-help-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.empty-help-desc {
  font-size: 12px;
  color: var(--text-muted);
}
.empty-help-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s var(--ease);
}
.empty-help-card:hover .empty-help-arrow {
  transform: translateX(2px);
  color: var(--accent);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.btn[hidden] { display: none; }
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); }

/* ── Chat view ───────────────────────────────────────── */
.chat-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  position: relative;  /* anchor for scroll-to-top floating button */
}

/* ── Scroll-to-top button (chat) ─────────────────────── */
.scroll-to-top-btn {
  position: absolute;
  right: 24px;
  bottom: 116px;             /* sits above the input area + chips row */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), color 160ms var(--ease), background 160ms var(--ease);
  z-index: 12;
  opacity: 0.92;
}
.scroll-to-top-btn:hover {
  background: var(--surface-2);
  color: var(--accent);
  transform: translateY(-2px);
  opacity: 1;
}
.scroll-to-top-btn[hidden] {
  display: none;
}
@media (max-width: 768px) {
  .scroll-to-top-btn { right: 16px; bottom: 100px; }
}

/* Variant para vistas donde el botón debe quedarse fijo respecto al
 * viewport (ej. trayectoria-view es ella misma el scroll container, así
 * que un absolute lo anclaría al fondo del CONTENIDO scrollable y se
 * iría con el scroll). Fixed lo deja anclado al viewport. */
.scroll-to-top-btn--floating {
  position: fixed;
  right: 24px;
  bottom: 24px;
}
@media (max-width: 768px) {
  .scroll-to-top-btn--floating { right: 16px; bottom: 16px; }
}

.chat-header {
  padding: 20px 32px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.chat-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
  margin: 0;
}
/* The chat-scope subtitle is indented to align with the chat title text
   (which starts after the favorite-star button). Mirrors the trayectoria
   header pattern. */
.chat-scope {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  padding-left: 36px;
  display: inline-flex;
  align-items: center;
}

/* Messages area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* System message */
.system-message {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 16px;
}

/* User message */
.msg-user {
  align-self: flex-end;
  max-width: 70%;
  background: var(--bubble-user-bg);
  color: var(--bubble-user-text);
  padding: 10px 16px;
  border-radius: 16px 16px 4px 16px;
  font-size: 14px;
  line-height: 1.5;
  animation: fadeSlideIn 0.3s var(--ease);
}

/* Error message */
.msg-error {
  align-self: flex-start;
  max-width: 80%;
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 10px 16px;
  border-radius: 4px 16px 16px 16px;
  font-size: 13px;
  font-family: var(--font-mono);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  animation: fadeSlideIn 0.3s var(--ease);
}

/* Assistant message */
.msg-assistant {
  align-self: flex-start;
  max-width: 80%;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 14px 18px;
  border-radius: 4px 16px 16px 16px;
  font-size: 14px;
  line-height: 1.6;
  animation: fadeSlideIn 0.3s var(--ease);
  /* URLs largas (Google Doc /document/d/<long-id>/edit) deben envolverse
     dentro de la burbuja en lugar de empujar el ancho. overflow-wrap:
     anywhere es más agresivo que break-word — quiebra en cualquier
     punto si no hay un espacio razonable. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.msg-assistant p { margin-bottom: 8px; }
.msg-assistant p:last-child { margin-bottom: 0; }
.msg-assistant strong { font-weight: 600; color: var(--text); }
.causa-rol-link {
  font-family: inherit;
  font-size: inherit;
  color: var(--accent);
  background: transparent;
  border: 1px solid transparent;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: background 120ms, border-color 120ms;
}
.causa-rol-link:hover:not(:disabled) {
  background: var(--accent-bg, rgba(0, 102, 204, 0.08));
  border-color: var(--accent);
  text-decoration: none;
}
.causa-rol-link:disabled { opacity: 0.6; cursor: progress; }
.causa-rol-link.is-linked {
  background: var(--success-bg, rgba(34, 139, 34, 0.1));
  border-color: var(--success, #2e7d32);
  color: var(--success, #2e7d32);
  text-decoration: none;
}
.msg-assistant ul, .msg-assistant ol { padding-left: 20px; margin-bottom: 8px; }
.msg-assistant li { margin-bottom: 4px; }
.msg-assistant code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--border-light);
  padding: 1px 5px;
  border-radius: 4px;
}
/* Fenced code blocks (```...```): wrap habilitado para evitar scroll
   horizontal cuando el contenido es una sola línea larga (típico de
   prompts generados por el modelo). Bug observado: una sola línea sin
   wrap quedaba ilegible en el ancho del chat. white-space:pre-wrap
   preserva newlines internos pero rompe líneas largas en el ancho del
   contenedor. word-break:break-word maneja palabras sin espacios
   (URLs, tokens largos) sin overflow horizontal. */
.msg-assistant pre {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--border-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  position: relative;
}
.msg-assistant pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* Botón "Copiar" en la esquina superior derecha de cada <pre>. Aparece
   on hover del bloque (no permanente para no contaminar la lectura).
   Patrón estándar de Claude / ChatGPT / GitHub. Genérico — aplica a
   cualquier <pre> dentro de mensajes assistant. */
.msg-assistant pre .code-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s var(--ease), background 0.12s var(--ease), color 0.12s var(--ease), border-color 0.12s var(--ease);
}
.msg-assistant pre:hover .code-copy,
.msg-assistant pre .code-copy:focus-visible {
  opacity: 1;
}
.msg-assistant pre .code-copy:hover {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}
.msg-assistant pre .code-copy.is-copied {
  opacity: 1;
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
/* Touch: en móvil no hay hover, el botón queda siempre visible pero
   con menor contraste para no ocupar visualmente. */
@media (hover: none) {
  .msg-assistant pre .code-copy { opacity: 0.55; }
}
.msg-assistant h1, .msg-assistant h2, .msg-assistant h3 {
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 8px;
}
.msg-assistant h3 { font-size: 15px; }

/* Generic links inside assistant messages (URLs renderizadas por marked) */
.msg-assistant a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.msg-assistant a:hover {
  text-decoration-thickness: 2px;
}

/* Citations in assistant messages */
.msg-assistant a.citation {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.msg-assistant a.citation:hover {
  text-decoration: underline;
}

/* Tool call indicator */
.tool-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--border-light);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-muted);
  align-self: flex-start;
  animation: fadeSlideIn 0.3s var(--ease);
}
.tool-indicator .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 12px 18px;
  align-self: flex-start;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: typing 1.4s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

/* Chat input */
.chat-input-area {
  padding: 16px 32px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 8px 8px 16px;
  transition: border-color 0.15s;
}
.chat-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(202,22,23,0.1);
}
[data-theme="dark"] .chat-input-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(224,64,68,0.15);
}
.chat-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  resize: none;
  max-height: 120px;
  line-height: 1.5;
}
.chat-input::placeholder { color: var(--text-muted); }

.send-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s var(--ease);
}
.send-btn:hover { background: var(--accent-hover); }
.send-btn:active { transform: scale(0.95); }
.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mic-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s var(--ease);
}
.mic-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.mic-btn:active { transform: scale(0.95); }
.mic-btn[hidden] { display: none; }
.mic-btn.recording {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  animation: micPulse 1.2s var(--ease) infinite;
}
.mic-btn.recording:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(202,22,23,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(202,22,23,0); }
}

/* ── Toast notifications ─────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  animation: toastIn 0.4s var(--ease);
}
.toast-success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid #a7f3d0;
}
.toast-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid #fecdd3;
}
.toast-info {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}
[data-theme="dark"] .toast-success { border-color: rgba(52,211,153,0.3); }
[data-theme="dark"] .toast-error { border-color: rgba(251,113,133,0.3); }
[data-theme="dark"] .toast-info { background: rgba(30,64,175,0.18); color: #93C5FD; border-color: rgba(96,165,250,0.3); }

/* ── Animations ──────────────────────────────────────── */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Skeleton loading ────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
  height: 14px;
  margin-bottom: 8px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Sidebar sessions ───────────────────────────────── */
.sidebar-sessions {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sidebar-history-link {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  margin-top: 4px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--sidebar-text);
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  opacity: 0.6;
}
.sidebar-history-link:hover {
  opacity: 1;
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* ── History view ───────────────────────────────────── */
.history-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
.history-view-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 24px;
}
.history-list {
  display: flex;
  flex-direction: column;
}

/* ── History tree: cliente → caso → caso de uso → sesión ── */
.history-client {
  border-top: 1px solid var(--border-light);
}
.history-client:first-child { border-top: none; }
.history-client > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.history-client > summary::-webkit-details-marker { display: none; }
.history-client-icon {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  width: 12px;
  display: inline-block;
  text-align: center;
}
.history-client[open] .history-client-icon::before { content: '−'; }
.history-client:not([open]) .history-client-icon::before { content: '+'; }
.history-client-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.history-client-name.is-orphan {
  color: var(--text-secondary);
}
.history-client-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

.history-group {
  padding: 4px 0 14px;
}
.history-group-head {
  margin: 8px 0 6px;
  padding-left: 22px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.history-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  background: var(--border-light);
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1;
}
.history-group-name {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.history-group-link {
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.history-group-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.history-group-rol {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.history-group-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

/* Caso de uso block — collapsible inside "Otras sesiones" */
.history-uc-group { padding: 0; }
.history-uc-group > summary.history-group-head {
  list-style: none;
  cursor: pointer;
  padding: 8px 6px 8px 12px;
  margin: 4px 0;
  border-radius: 6px;
  transition: background 0.12s var(--ease);
}
.history-uc-group > summary.history-group-head::-webkit-details-marker { display: none; }
.history-uc-group > summary.history-group-head::before {
  content: '▸';
  font-size: 9px;
  color: var(--text-muted);
  margin-right: 4px;
  transition: transform 0.15s var(--ease);
  display: inline-block;
}
.history-uc-group[open] > summary.history-group-head::before { transform: rotate(90deg); }
.history-uc-group > summary.history-group-head:hover { background: var(--border-light); }

.history-session {
  display: grid;
  grid-template-columns: 24px 130px 1fr auto auto 28px;
  gap: 14px;
  padding: 10px 8px 10px 14px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s var(--ease), box-shadow 0.12s var(--ease);
  position: relative;
}
.history-ses-fav {
  align-self: start;
  margin-top: -1px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.12s var(--ease), background 0.12s var(--ease), transform 0.12s var(--ease);
}
.history-ses-fav:hover {
  background: var(--border-light);
  color: var(--warning, #D97706);
  transform: scale(1.05);
}
.history-ses-fav.is-fav {
  color: var(--warning, #D97706);
}
.history-session:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
  border-top-color: transparent;
}
.history-session.active {
  background: #E2E4E9;
  border-top-color: transparent;
}
[data-theme="dark"] .history-session.active {
  background: #2E323E;
}
.history-session.active + .history-session,
.history-session:hover + .history-session {
  border-top-color: transparent;
}
/* ── Use-case identity tokens ──
   Single source of truth for the per-use-case color used across every pill
   (history list, chat top strip, catalog card, in-chat greeting). Prefix
   selector covers every PDP step (pdp-onboarding-cliente, pdp-redaccion-
   politica, pdp-mapa-datos, etc.) without enumerating each id. Override an
   individual id below the prefix block if a particular step should diverge. */
[data-uc^="pdp-"] {
  --uc-fg: var(--accent);
  --uc-bg: var(--accent-bg);
  --uc-bd: var(--accent-border);
}

.history-uc-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--uc-fg, var(--text-muted));
  background: var(--uc-bg, var(--border-light));
  border: 1px solid var(--uc-bd, var(--border));
  border-radius: 4px;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: start;
  margin-top: 1px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.history-ses-text {
  min-width: 0;
}
.history-ses-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}
.history-ses-desc {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-ses-when {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  align-self: start;
  white-space: nowrap;
  margin-top: 1px;
  text-align: right;
}
.history-ses-counts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  align-self: start;
  margin-top: 1px;
}
.history-ses-counts span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.history-ses-kebab {
  align-self: start;
  margin-top: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.12s var(--ease);
}
.history-ses-kebab:hover {
  color: var(--text);
  background: var(--border-light);
}
.history-session.menu-open .history-ses-kebab {
  background: var(--accent-bg);
  color: var(--accent);
}
.history-session.menu-open {
  background: var(--accent-bg);
  box-shadow: inset 3px 0 0 0 var(--accent);
}

/* ── Reasignar sesión modal ──────────────────────────────── */
.reassign-blocked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  color: #B45309;
  font-size: 13px;
  line-height: 1.4;
}
.reassign-blocked[hidden] { display: none; }
.reassign-blocked svg { flex-shrink: 0; margin-top: 1px; }
[data-theme="dark"] .reassign-blocked { color: #fcd34d; }

/* Override global .modal-content input rule (que pinta todos los inputs
   con width:100% + border) para radios/checkboxes — apariencia nativa. */
.reassign-field input[type="radio"],
.reassign-field input[type="checkbox"] {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  appearance: auto;
  -webkit-appearance: auto;
}
.reassign-field input[type="radio"]:focus,
.reassign-field input[type="checkbox"]:focus {
  border: none;
  box-shadow: none;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.reassign-field {
  border: none;
  padding: 0;
  margin: 0 0 18px;
}
.reassign-field legend {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding: 0;
}
.reassign-field[disabled] {
  opacity: 0.55;
  pointer-events: none;
}
.reassign-radio-list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 6px;
}
.reassign-radio-list:empty { display: none; }
.reassign-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.1s;
}
.reassign-row:last-child { border-bottom: none; }
.reassign-row:hover { background: var(--border-light); }
.reassign-row input[type="radio"] {
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.reassign-row-label { font-weight: 500; }
.reassign-row-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
  text-align: right;
}
/* Top-level "Sin cliente / Sin proyecto" rows: standalone, before the list */
.reassign-field > .reassign-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--bg);
}
.reassign-field > .reassign-row:hover {
  border-color: var(--text-muted);
  background: var(--surface);
}
.reassign-empty-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.reassign-input-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.reassign-input-row:last-child { margin-bottom: 0; }
.reassign-input-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.reassign-input-row input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color 120ms;
}
.reassign-input-row input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

.history-empty {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  padding: 32px;
}

/* ── Sidebar logout ─────────────────────────────────── */
.sidebar-logout-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--sidebar-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s var(--ease);
}
.sidebar-logout-btn:hover {
  color: var(--sidebar-active-text);
  background: var(--sidebar-hover-bg);
}

/* ── User management ────────────────────────────────── */
.user-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.user-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-row-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.user-row-info {
  flex: 1;
  min-width: 0;
}
.user-row-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.user-row-email {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.user-row-login {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.user-row-role {
  flex-shrink: 0;
}
.user-role-select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text);
  cursor: pointer;
}
.user-role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
}
.user-role-badge.admin {
  background: var(--accent-bg);
  color: var(--accent);
}
.user-role-badge.viewer {
  background: var(--border-light);
  color: var(--text-muted);
}

.user-self-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.user-self-avatar-slot {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-self-avatar {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}
.user-self-avatar--initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border-light);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.user-self-info {
  flex: 1;
  min-width: 0;
}
.user-self-name {
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}
.user-self-email {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  word-break: break-all;
}

/* ── Login page ─────────────────────────────────────── */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background: var(--bg);
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.08);
}
.login-brand h1 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.login-brand p {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.login-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 24px 0;
  line-height: 1.5;
}
.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.login-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(202,22,23,0.1);
}
.login-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 12px;
}

/* ── Mobile responsive ───────────────────────────────── */
.mobile-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 50;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--sidebar-bg);
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-toggle svg { color: #fff; }

@media (max-width: 768px) {
  .mobile-toggle { display: flex; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .chat-messages { padding: 16px 20px; }
  .chat-input-area { padding: 12px 20px 20px; }
  .chat-header { padding: 16px 20px 12px; }
  .msg-user { max-width: 85%; }
  .msg-assistant { max-width: 90%; }
  .config-view-body { padding: 16px 20px 32px; }
  .config-view-header { padding: 16px 20px 12px; }
  .config-tabs { padding: 0 20px; }
  .config-tab { padding: 12px 12px; font-size: 13px; }
  .history-view-body { padding: 6px 12px 20px; }
  .history-row-delete { display: flex; }
}

/* ── Casos de uso: strip + suggestions + sidebar link ── */

.uc-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--border-light);
  border-bottom: 1px solid var(--border);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.uc-strip-cat {
  display: inline-block;
  background: var(--uc-bg, var(--accent-bg));
  color: var(--uc-fg, var(--accent));
  border: 1px solid var(--uc-bd, transparent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
}
.uc-strip-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  flex: 1;
}

.uc-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 0;
}
.uc-suggestion {
  display: inline-flex;
  align-items: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.uc-suggestion:hover { background: var(--border-light); }

.sidebar-nav-link {
  display: block;
  padding: 6px 10px;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
}
.sidebar-nav-link:hover { background: var(--border-light); }

/* ── Sidebar additions: search + nav links with icons + active/stub states ── */

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 14px;
  padding: 0 10px;
  height: 34px;
  background: var(--sidebar-hover-bg);
  border: 1px solid var(--sidebar-active-bg);
  border-radius: 8px;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.sidebar-search:focus-within {
  border-color: var(--sidebar-active);
  background: var(--sidebar-active-bg);
}
.sidebar-search svg {
  flex-shrink: 0;
  color: var(--sidebar-text-muted);
}
.sidebar-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--sidebar-active-text);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  padding: 0;
  outline: none;
}
.sidebar-search input::placeholder { color: var(--sidebar-text-muted); }
/* kbd ⌘K removido (visualmente) 2026-05-11 — reemplazado por botón X
   clear que aparece solo cuando hay texto. El atajo de teclado Cmd/Ctrl+K
   sigue funcionando desde global-search.js. Reglas de fallback por si
   queda algún <kbd> en views antiguas:  */
.sidebar-search kbd { display: none; }

.sidebar-search-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--sidebar-hover-bg);
  border: 1px solid var(--sidebar-active-bg);
  border-radius: 50%;
  color: var(--sidebar-text);
  cursor: pointer;
  transition: background 0.12s var(--ease), color 0.12s var(--ease), border-color 0.12s var(--ease);
}
.sidebar-search-clear[hidden] { display: none; }
.sidebar-search-clear:hover {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  border-color: var(--sidebar-active);
}
.sidebar-search-clear:focus-visible {
  outline: 2px solid var(--sidebar-active);
  outline-offset: 1px;
}

/* Search results dropdown — anclado al sidebar-search, mostrado on focus
   y on tipeo. Vertical scroll si hay muchas categorías. */
.sidebar-search { position: relative; }
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.28);
  z-index: 600;  /* sobre el sidebar (z=500), bajo modales (z=1000+) */
  padding: 6px 0;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.search-results[hidden] { display: none; }
.search-results .sr-section-label {
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.search-results .sr-state {
  padding: 14px 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}
.search-results .sr-state-error { color: var(--accent); font-style: normal; }
.search-results .sr-state-empty { color: var(--text-muted); }
.search-results .sr-hint {
  padding: 4px 14px 12px;
  font-size: 11.5px;
  color: var(--text-faint);
  text-align: center;
  line-height: 1.5;
}
.search-results .sr-hint code {
  background: var(--border-light);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10.5px;
}
.search-results .sr-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
  color: inherit;
  font-family: inherit;
}
.search-results .sr-item:hover,
.search-results .sr-item.is-active {
  background: var(--border-light);
}
.search-results .sr-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.search-results .sr-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-results .sr-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-results .sr-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bullets por tipo de resultado. Paleta INTENCIONALMENTE distinta a
   vendors (naranjo/verde/fucsia/azul) y tiers (verde/ámbar/rojo):
     - chat:    cyan
     - matter:  índigo
     - uc:      teal
     - norma:   coral/dorado
*/
.sr-bullet-chat   { background: #06b6d4; }   /* cyan */
.sr-bullet-matter { background: #6366f1; }   /* indigo */
.sr-bullet-uc     { background: #14b8a6; }   /* teal */
.sr-bullet-norma  { background: #d97706; }   /* amber-dark (warm tone) */

/* .sidebar-nav-link inherits visuals from the shared `.sidebar-nav a` rules
   defined earlier in this file (dark sidebar, white-on-active, red icon + bar).
   Only stub-specific tweaks here. */
.sidebar-nav-link.disabled-stub { opacity: 0.45; }
.sidebar-nav-link.disabled-stub:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--sidebar-text);
}

/* ── Catalog view (Casos de uso in main area) ── */

.catalog-view {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  background: var(--bg);
}
.catalog-header {
  padding: 28px 36px 16px;
}
.catalog-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--text);
  letter-spacing: -0.03em;
  margin: 0;
}
.catalog-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 6px 0 0;
}

.category-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 36px 20px;
  flex-wrap: wrap;
}
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.15s, border-color 0.15s;
}
.cat-pill:hover { background: var(--border-light); }
.cat-pill.active {
  background: var(--cat-tone, var(--accent));
  color: #fff;
  border-color: var(--cat-tone, var(--accent));
}
/* Paleta del filter bar — mismos tonos que .uc-cat en cards. La pill
 * "Todos" no tiene data-cat → cae al accent rojo, lo que la marca como
 * el reset visual. */
.cat-pill[data-cat="Protección de datos"]     { --cat-tone: #B91C1C; }
.cat-pill[data-cat="Productividad"]           { --cat-tone: #4338CA; }
.cat-pill[data-cat="Demo / Capacitación"]     { --cat-tone: #B45309; }
.cat-pill[data-cat="Litigios"]                { --cat-tone: #0F766E; }
.cat-pill[data-cat="Corporativo"]             { --cat-tone: #475569; }
.cat-pill[data-cat="Licitaciones"]            { --cat-tone: #7E22CE; }
.cat-pill[data-cat="Jurisprudencia"]          { --cat-tone: #0E7490; }
.cat-pill[data-cat="Redacción"]               { --cat-tone: #BE185D; }
.cat-pill .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}
.cat-pill.active .count { color: rgba(255, 255, 255, 0.75); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 16px;
  row-gap: 20px;
  padding: 0 36px 64px;
}
@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .card-grid { grid-template-columns: 1fr; padding: 0 20px 64px; } }

/* ── Catalog section headers ─────────────────────────── */
.catalog-section-header {
  grid-column: 1 / -1;
  margin: 12px 0 -4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.catalog-section-header:first-child { margin-top: 0; }
.catalog-section-label {
  font-family: var(--font-display, 'DM Sans');
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ── Paso badge in catalog cards ─────────────────────── */
.uc-paso-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--uc-bg, var(--accent-bg));
  color: var(--uc-fg, var(--accent));
  border: 1px solid var(--uc-bd, var(--accent-border));
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  z-index: 1;
}
.uc-card { position: relative; }

/* Lápiz top-right — sólo visible si data-perm-feature lo activa
   (admin o user con menu_option=casos_de_uso explícito). Convive con
   uc-paso-badge: si la card tiene paso, el badge se posiciona donde
   estaba y el lápiz se corre a la izquierda. Sin paso, el lápiz vive
   en la esquina top-right. */
.uc-card-edit {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 2;
  opacity: 0;  /* aparece sólo al hover de la card */
  pointer-events: none;
}
.uc-card:hover .uc-card-edit {
  opacity: 1;
  pointer-events: auto;
}
.uc-card-edit:hover {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}
.uc-card-edit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  opacity: 1;
  pointer-events: auto;
}
/* Cuando hay paso badge, el lápiz cede el right=10 al badge y se mueve
   a la izquierda del badge para no superponerse. */
.uc-card .uc-paso-badge ~ .uc-card-edit,
.uc-card .uc-card-edit:has(~ .uc-paso-badge) {
  right: 46px;
}

.uc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  cursor: pointer;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.uc-card:hover {
  border-color: rgba(202, 22, 23, 0.5);
  transform: translateY(-2px);
}
.uc-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.uc-icon {
  width: 38px; height: 38px;
  background: var(--accent-bg);
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
.uc-icon svg { display: block; }
.uc-cat {
  display: inline-block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Defaults usan accent. Cualquier categoría sin override en la paleta
   * de abajo cae al rojo AltLegal — esperado para CUs sin clasificar. */
  color: var(--uc-fg, var(--accent));
  background: var(--uc-bg, var(--accent-bg));
  border: 1px solid var(--uc-bd, var(--accent-border));
  padding: 2px 8px;
  border-radius: 4px;
}
/* ── Paleta por categoría ───────────────────────────────────
 * Cada categoría tiene un tono propio que el usuario aprende con el uso.
 * Mantener bajos los alpha de bg/border para que el pill no compita con
 * el contenido del card. Agregar nuevas categorías acá cuando se creen.
 * Tonos cool, low-saturation — refined utilitarian, no neón.
 *
 * Selector sin clase: cualquier elemento que porte `data-cat="..."` y
 * use var(--uc-fg/bg/bd) hereda el tono. Cubre .uc-cat (cards),
 * .history-uc-chip (historial), .uc-strip-cat (chat strip) y similares.
 */
[data-cat="Protección de datos"] {
  --uc-fg: #B91C1C;
  --uc-bg: rgba(220, 38, 38, 0.08);
  --uc-bd: rgba(220, 38, 38, 0.20);
}
[data-cat="Productividad"] {
  --uc-fg: #4338CA;
  --uc-bg: rgba(99, 102, 241, 0.10);
  --uc-bd: rgba(99, 102, 241, 0.22);
}
[data-cat="Demo / Capacitación"] {
  --uc-fg: #B45309;
  --uc-bg: rgba(217, 119, 6, 0.10);
  --uc-bd: rgba(217, 119, 6, 0.22);
}
[data-cat="Litigios"] {
  --uc-fg: #0F766E;
  --uc-bg: rgba(20, 184, 166, 0.10);
  --uc-bd: rgba(20, 184, 166, 0.22);
}
[data-cat="Corporativo"] {
  --uc-fg: #475569;
  --uc-bg: rgba(100, 116, 139, 0.10);
  --uc-bd: rgba(100, 116, 139, 0.22);
}
[data-cat="Licitaciones"] {
  --uc-fg: #7E22CE;
  --uc-bg: rgba(168, 85, 247, 0.10);
  --uc-bd: rgba(168, 85, 247, 0.22);
}
[data-cat="Jurisprudencia"] {
  --uc-fg: #0E7490;
  --uc-bg: rgba(14, 165, 233, 0.10);
  --uc-bd: rgba(14, 165, 233, 0.22);
}
[data-cat="Redacción"] {
  --uc-fg: #BE185D;
  --uc-bg: rgba(236, 72, 153, 0.10);
  --uc-bd: rgba(236, 72, 153, 0.22);
}
/* Multi-cat wrapper en cards del catálogo: flex wrap para que N categorías
 * apilen sin desbordar el header del card. Reaprovecha el estilo de .uc-cat
 * por cada item. */
.uc-cats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}
/* Editor de CU: input multi-categoría tipo "chips/pills". Container que
 * renderiza las categorías ya elegidas + un input inline para tipear nuevas.
 * Enter o coma agregan; Backspace en input vacío elimina la última.
 */
.uc-cat-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--border, #D1D5DB);
  border-radius: 8px;
  background: var(--surface, #fff);
  min-height: 38px;
  font-family: inherit;
  font-size: 14px;
  cursor: text;
}
.uc-cat-input:focus-within {
  border-color: var(--accent, #CA1617);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(202, 22, 23, 0.10);
}
.uc-cat-input input {
  border: 0;
  outline: 0;
  background: transparent;
  flex: 1 1 120px;
  min-width: 80px;
  font: inherit;
  color: inherit;
  padding: 4px 2px;
}
.uc-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 10px;
  border-radius: 999px;
  background: var(--accent-bg, rgba(202, 22, 23, 0.08));
  color: var(--accent, #CA1617);
  border: 1px solid var(--accent-bd, rgba(202, 22, 23, 0.18));
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.uc-cat-pill-remove {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 6px;
  color: inherit;
  opacity: 0.55;
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;
}
.uc-cat-pill-remove:hover { opacity: 1; }
.uc-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}
.uc-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.uc-chip {
  display: inline-flex;
  align-items: center;
  background: var(--border-light);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
}
.uc-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}
.uc-footer .meta { display: inline-flex; align-items: center; gap: 5px; }
.font-mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum' 1; }

/* ── Tooltip CSS reutilizable [data-tip] ──────────────────────────
   Drop-in para reemplazar `title=` cuando se quiere instant feel.
   El atributo `title` nativo tiene delay ~500-1000ms hardcoded en
   el motor del browser; este patrón aparece a los 80ms.

   Uso:
     <span data-tip="Texto del tooltip">…</span>
   Posición (default arriba):
     data-tip-pos="bottom" | "left" | "right"
   Texto largo con wrap:
     data-tip-wrap  (sin valor — atributo presente)

   Mantén también `aria-label` con el mismo texto para screen
   readers — el ::after content no es accesible por todos los AT. */

[data-tip] { position: relative; }

/* Bubble */
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 1000;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: #1f2937;
  color: #f9fafb;
  font-family: var(--font, system-ui, sans-serif);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Arrow */
[data-tip]::before {
  content: '';
  position: absolute;
  z-index: 999;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1f2937;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms ease;
}

[data-tip]:hover::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::after,
[data-tip]:focus-visible::before {
  opacity: 1;
}

/* Position variants */
[data-tip][data-tip-pos="bottom"]::after {
  bottom: auto; top: calc(100% + 8px);
}
[data-tip][data-tip-pos="bottom"]::before {
  bottom: auto; top: calc(100% + 3px);
  border-top-color: transparent;
  border-bottom-color: #1f2937;
}
[data-tip][data-tip-pos="left"]::after {
  bottom: auto; left: auto; top: 50%; right: calc(100% + 8px);
  transform: translateY(-50%);
}
[data-tip][data-tip-pos="left"]::before {
  bottom: auto; left: auto; top: 50%; right: calc(100% + 3px);
  transform: translateY(-50%);
  border-top-color: transparent;
  border-left-color: #1f2937;
}
[data-tip][data-tip-pos="right"]::after {
  bottom: auto; left: calc(100% + 8px); top: 50%;
  transform: translateY(-50%);
}
[data-tip][data-tip-pos="right"]::before {
  bottom: auto; left: calc(100% + 3px); top: 50%;
  transform: translateY(-50%);
  border-top-color: transparent;
  border-right-color: #1f2937;
}

/* Wrap mode para textos largos. Sin esto el tooltip se queda en una
   sola línea muy ancha hasta que choca con el viewport. */
[data-tip][data-tip-wrap]::after {
  white-space: normal;
  width: max-content;
  max-width: 240px;
}

/* Dark mode: invierte fondo / texto para legibilidad sobre surfaces
   oscuras. Sombra más profunda. */
@media (prefers-color-scheme: dark) {
  [data-tip]::after {
    background: #f3f4f6;
    color: #1f2937;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  }
  [data-tip]::before { border-top-color: #f3f4f6; }
  [data-tip][data-tip-pos="bottom"]::before { border-bottom-color: #f3f4f6; }
  [data-tip][data-tip-pos="left"]::before { border-left-color: #f3f4f6; }
  [data-tip][data-tip-pos="right"]::before { border-right-color: #f3f4f6; }
}

/* Reduce motion: sin transition (aparece de golpe pero igual instant). */
@media (prefers-reduced-motion: reduce) {
  [data-tip]::after, [data-tip]::before { transition: none; }
}

/* Indicador de tier del modelo por defecto en cada caso de uso.
   Reemplazó al bullet de color (verde/ámbar/rojo) que se confundía
   con semáforo de estado en demos ("¿es habilitado/en construcción?").
   Ahora muestra 1/2/3 íconos de billete según low/mid/high. El conteo
   es la señal — más billetes = más caro/potente. Color uniforme
   (text-muted) para que no se lea como severity.
   Tooltip via [data-tip] reusa el patrón global instant-feel. */
.uc-tier-bills {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--text-muted);
  cursor: help;
  padding: 2px;
  border-radius: 4px;
  transition: color 120ms var(--ease, ease), background 120ms var(--ease, ease);
}
.uc-tier-bills:hover {
  color: var(--text);
  background: var(--border-light);
}
/* SVG individual: padding-out leve para que cada billete sea
   distinguible cuando hay 2 o 3 apilados. */
.uc-tier-bill {
  display: block;
}
.uc-tier-bills .uc-tier-bill + .uc-tier-bill {
  margin-left: -6px;  /* ligero overlap para que el grupo se lea como pila */
}
/* Por tier, ajustamos el color levemente para que high se sienta más
   "pesado" sin volver al esquema semáforo. */
.uc-tier-bills.uc-tier-low  { color: var(--text-faint); }
.uc-tier-bills.uc-tier-mid  { color: var(--text-muted); }
.uc-tier-bills.uc-tier-high { color: var(--text); }

.catalog-loading {
  padding: 40px 36px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  grid-column: 1 / -1;
}

/* ── Use-case greeting (rendered as first assistant message) ── */

.msg-assistant.uc-greeting {
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}
.uc-greeting-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.uc-greeting-header strong {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.uc-greeting-cat {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uc-fg, var(--accent));
  background: var(--uc-bg, var(--accent-bg));
  border: 1px solid var(--uc-bd, transparent);
  padding: 2px 8px;
  border-radius: 4px;
}
.uc-greeting-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 10px;
}
.uc-greeting-hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 10px 0 6px;
}
.uc-greeting .uc-suggestions { padding: 4px 0 0; }

/* ── Sidebar nav count badge ── */

.sidebar-nav-link .nav-count {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--sidebar-active-bg);
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Hide if empty so non-counting links (Casos, Plantillas, Documentos) stay clean. */
.sidebar-nav-link .nav-count:empty { display: none; }
.sidebar-nav-link.active .nav-count {
  border-color: var(--sidebar-active);
  background: var(--surface);
  color: var(--sidebar-active-text);
}

/* ── Thinking indicator (shown immediately on send) ── */

/* (no extra styling for .thinking variant — keep same as tool-indicator) */

/* ── Documentos view (Spec 1) ─────────────────────────── */

.documentos-view {
  display: none;
  flex: 1;                 /* toma el espacio remanente del .main flex-column;
                              consistente con .investigacion-view y necesario
                              para que el paginador quede sticky abajo */
  min-height: 0;           /* permite que el wrap interno scrollee dentro */
  flex-direction: column;
  overflow: hidden;        /* wrap inside es el scroller; paginador queda sticky */
  background: var(--bg);
}

.documentos-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  flex-wrap: wrap;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.documentos-toolbar .btn { flex-shrink: 0; }
.documentos-toolbar svg { flex-shrink: 0; }

.documentos-search {
  position: relative;
  flex: 1;
  max-width: 360px;
}
.documentos-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.documentos-search input {
  width: 100%;
  padding: 7px 10px 7px 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  outline: none;
}
.documentos-search input:focus {
  border-color: var(--accent);
}

.documentos-filter {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.documentos-filter button {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.documentos-filter button:hover { background: var(--border-light); }
.documentos-filter button.active {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}

.documentos-table-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0 32px;          /* sin padding-bottom: el paginador es footer sticky */
}
.documentos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.documentos-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 8px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 1;
}
.documentos-table tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  vertical-align: middle;
}
.documentos-table tbody tr { cursor: pointer; transition: background 0.1s; }
.documentos-table tbody tr:hover { background: var(--border-light); }
.documentos-table tbody tr.doc-row--menu-open,
.documentos-table tbody tr.doc-row--menu-open:hover {
  background: var(--accent-bg);
  box-shadow: inset 3px 0 0 0 var(--accent);
}
.documentos-table tbody tr.doc-row--menu-open .doc-actions-btn {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}

.doc-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.doc-icon {
  width: 32px;
  height: 32px;
  background: var(--border-light);
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}

.doc-actions-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.doc-actions-btn:hover { background: var(--border-light); color: var(--text); }

.documentos-empty {
  padding: 80px 32px;
  text-align: center;
  color: var(--text-muted);
}
.documentos-empty p { margin: 0 0 16px; font-size: 14px; }

.badge.badge-slate {
  background: var(--border-light);
  color: var(--text);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Chat attach chips + drag overlay (Spec 2) ───────────── */

.attach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px 0;
  min-height: 0;
}
.attach-chips:empty {
  padding: 0;
}

.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  max-width: 280px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.attach-chip:hover { background: var(--border-light); }
.attach-chip .chip-icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
.attach-chip .chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.attach-chip .chip-meta {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}
.attach-chip .chip-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
}
.attach-chip .chip-remove:hover { color: var(--danger, #d14); }

.attach-chip.uploading {
  opacity: 0.6;
}
.attach-chip.uploading .chip-remove { visibility: hidden; }

.attach-chip.warn {
  background: var(--warning-bg, rgba(245, 158, 11, 0.08));
  border-color: rgba(245, 158, 11, 0.35);
}
.attach-chip.warn .chip-meta { color: rgb(180, 100, 0); }

.attach-chip.over-limit {
  background: var(--danger-bg, rgba(220, 38, 38, 0.08));
  border-color: rgba(220, 38, 38, 0.35);
  cursor: not-allowed;
}
.attach-chip.over-limit .chip-meta { color: rgb(185, 28, 28); }

.attach-chip.error {
  background: var(--danger-bg, rgba(220, 38, 38, 0.08));
  border-color: rgba(220, 38, 38, 0.35);
}

/* Link variant — distinguishes URL pins from file attachments. */
.attach-chip.is-link {
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.25);
}
.attach-chip.is-link .chip-icon { color: rgb(79, 70, 229); }
.attach-chip.is-link.fetching { opacity: 0.6; }
.attach-chip.is-link.fetching .chip-remove { visibility: hidden; }

.composer-attach {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.composer-attach .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
}
.composer-attach-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 20;
}
.composer-attach-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
}
.composer-attach-menu button svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.composer-attach-menu button:hover { background: var(--border-light); }
.composer-attach-menu button:hover svg { color: var(--text); }

.drag-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg);
  opacity: 0.92;
  border: 2px dashed var(--accent);
  display: grid;
  place-items: center;
  z-index: 15;
  pointer-events: none;
}
.drag-overlay[hidden] { display: none; }
.drag-overlay-inner {
  padding: 16px 24px;
  background: var(--surface);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
}

/* ── Per-message action row + save modal (Spec 3) ────────── */

.msg-assistant {
  position: relative;
}

/* ── Citations summary (per assistant message) ─────────────
   Numbered "Fuentes citadas" footer. Inline [1] markers replace the model's
   verbose [Doc Title, p.5] / [Ley X] labels. Spec: monospace numbering,
   uppercase section label, neutral palette, 1px hairline border above. */
.cite-ref {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1;
  vertical-align: 1px;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 1px 5px;
  border-radius: 4px;
  margin: 0 1px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s;
}
.cite-ref:hover {
  background: rgba(202, 22, 23, 0.18);
}
[data-theme="dark"] .cite-ref:hover {
  background: rgba(224, 64, 68, 0.22);
}
/* Superscript variant — placed AFTER an auto-linked law so the law itself
   stays clickable to BCN while the number cross-refs the summary. */
sup.cite-ref--sup {
  display: inline-block;
  margin-left: 2px;
  padding: 0;
  background: transparent;
  vertical-align: baseline;
  position: relative;
  top: -0.45em;
  font-size: 0.7em;
  line-height: 1;
}
sup.cite-ref--sup a {
  color: var(--accent);
  text-decoration: none;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--accent-bg);
}
sup.cite-ref--sup a:hover {
  background: rgba(202, 22, 23, 0.18);
}

.citations-summary {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.citations-summary-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.citations-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 28px 1fr;
  row-gap: 4px;
  column-gap: 4px;
}
.citation-item {
  /* `display: contents` so each <li> contributes its two children directly
     to the parent grid (number + label as siblings on one row). */
  display: contents;
}
.citation-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  padding-right: 6px;
  padding-top: 1px;
  align-self: baseline;
}
.citation-label {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.citations-summary:target,
.citation-item:target .citation-label {
  /* Subtle highlight when navigated via [N] superscript anchor. */
  background: var(--accent-bg);
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: -4px;
}

.msg-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.msg-assistant:hover .msg-actions,
.msg-actions.visible { opacity: 1; }

.msg-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.msg-action-btn:hover {
  background: var(--border-light);
  color: var(--text);
}
.msg-action-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.msg-action-btn[disabled] {
  opacity: 0.5;
  cursor: progress;
}
.msg-action-btn.msg-action-saved {
  color: var(--success);
  border-color: var(--success);
  background: var(--success-bg);
}
.msg-action-btn.msg-action-saved:hover {
  background: var(--success-bg);
  opacity: 0.85;
}

.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 100;
}
.modal-overlay[hidden] { display: none; }

.modal-dialog {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-family: var(--font-display, var(--font));
}

.modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-field-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.modal-input {
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  outline: none;
}
.modal-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(202, 22, 23, 0.1);
}
[data-theme="dark"] .modal-input:focus {
  box-shadow: 0 0 0 3px rgba(224, 64, 68, 0.15);
}
.modal-input--mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.modal-help {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.modal-error {
  margin-top: 4px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--danger, #BE123C);
  background: var(--danger-bg, rgba(225, 29, 72, 0.06));
  border: 1px solid rgba(225, 29, 72, 0.25);
  border-radius: 6px;
}
.modal-error[hidden] { display: none; }

/* Harvest modal — grid 2-col (label/input) inspirado en el modal nativo
 * de Harvest. Mismo orden de campos para keep familiaridad visual. */
.harvest-modal-dialog { max-width: 620px; width: 100%; box-sizing: border-box; }
.harvest-modal-grid {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px 14px;
  align-items: center;
}
.harvest-modal-grid .modal-field-label {
  margin: 0;
  align-self: center;
}
.harvest-modal-grid .modal-input,
.harvest-modal-grid select.modal-input,
.harvest-modal-grid textarea.modal-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.harvest-modal-grid textarea.modal-input { resize: vertical; min-height: 80px; }
.modal-help-inline {
  color: var(--text-muted, #6B7180);
  font-weight: 400;
  font-size: 11px;
  margin-left: 4px;
}
.modal-help--warn {
  color: var(--danger, #BE123C);
}

/* Integration row (Harvest, futuro Slack/etc.) */
.config-integration-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}
.config-integration-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface-alt, #ECEFF3);
  color: var(--text, #1F2937);
  display: grid;
  place-items: center;
}
.config-integration-text {
  flex: 1 1 auto;
  min-width: 0;
}
.config-integration-name {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #1F2937);
}
.config-integration-desc {
  font-size: 12px;
  color: var(--text-muted, #6B7180);
  line-height: 1.4;
}
.config-integration-actions {
  flex-shrink: 0;
}
.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}


.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.modal-footer .btn.is-loading {
  pointer-events: none;
  opacity: 0.7;
}
.modal-footer .btn.is-loading::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  vertical-align: -1px;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ── Token-usage pill (chat header) ────────────────────── */

.token-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  cursor: help;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.token-pill[hidden] { display: none; }

.token-pill .token-pill-label {
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
}
.token-pill .token-pill-value {
  font-size: 11px;
  font-weight: 600;
  color: inherit;
}

.token-pill.token-pill-ok {
  color: var(--success);
  border-color: var(--success);
  background: var(--success-bg);
}
.token-pill.token-pill-warn {
  color: var(--warning);
  border-color: var(--warning);
  background: var(--warning-bg);
}
.token-pill.token-pill-danger {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-bg);
}

/* Model pill — sibling to token-pill, opens a dropdown picker */
.model-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--vendor-color, var(--border));
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vendor-color, var(--text-muted));
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.model-pill[hidden] { display: none; }
.model-pill:hover { background: var(--vendor-tint, var(--surface-2)); }
/* Antes diferenciábamos override/fallback con borde rojo/naranjo. Ahora
   con el color por familia, esos estados se marcan con peso de letra
   adicional + tipografía itálica. El color del vendor sigue siendo el
   eje principal de identificación. */
.model-pill.is-overridden {
  font-style: italic;
  font-weight: 700;
}
.model-pill.is-fallback {
  font-style: italic;
  font-weight: 700;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.model-pill .model-pill-caret { opacity: 0.6; }
.model-pill:hover .model-pill-caret { opacity: 1; }

/* Paleta por familia (vendor) — set como CSS var en el elemento que la
   necesita (.model-pill o un .mpi-name dentro del menú).
   Iteraciones Google 2026-05-11:
     #5f6368 (gris Material) → percibido como deshabilitado.
     #1f2937 (slate-800)      → mismo problema (monocromo vs saturados).
     #5b21b6 (violet-800)     → demasiado cercano al azul DeepSeek.
     #86198f (fuchsia-800)    → actual. Lejos del azul (DeepSeek),
                                naranjo (Anthropic) y verde (OpenAI);
                                captura el extremo pink del logo Gemini
                                real (gradient blue→purple→pink). Ratio
                                8.4:1 sobre blanco (AAA texto pequeño). */
.vendor-google     { --vendor-color: #86198f; --vendor-tint: rgba(134, 25, 143, 0.08); }
.vendor-anthropic  { --vendor-color: #b85a3a; --vendor-tint: rgba(184, 90, 58, 0.08); }
.vendor-openai     { --vendor-color: #10a37f; --vendor-tint: rgba(16, 163, 127, 0.08); }
.vendor-deepseek   { --vendor-color: #2470cc; --vendor-tint: rgba(36, 112, 204, 0.08); }
@media (prefers-color-scheme: dark) {
  .vendor-google     { --vendor-color: #e879f9; --vendor-tint: rgba(232, 121, 249, 0.12); }
  .vendor-anthropic  { --vendor-color: #d97757; --vendor-tint: rgba(217, 119, 87, 0.12); }
  .vendor-openai     { --vendor-color: #35d4a3; --vendor-tint: rgba(53, 212, 163, 0.10); }
  .vendor-deepseek   { --vendor-color: #5ea1e8; --vendor-tint: rgba(94, 161, 232, 0.12); }
}

.model-picker-menu {
  position: absolute;
  top: 64px;
  right: 16px;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.model-picker-menu[hidden] { display: none; }
.model-picker-menu button {
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.model-picker-menu button:hover { background: var(--border-light); }
.model-picker-menu button.is-selected {
  background: var(--accent-bg, rgba(0, 102, 204, 0.08));
  color: var(--accent);
}
.model-picker-menu .mpi-name {
  font-weight: 600;
  color: var(--vendor-color, var(--text));
}
.model-picker-menu .mpi-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}
.model-picker-menu .mpi-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.model-picker-menu .mpi-vendor-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--vendor-color, var(--text-muted));
  padding: 8px 10px 4px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.model-picker-menu .mpi-vendor-header:first-child {
  border-top: none;
  margin-top: 0;
}
.model-picker-menu .mpi-vendor-header::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vendor-color, var(--text-muted));
}

/* ── Documentos: sortable headers, bulk toolbar, kebab menu, checkbox col ── */
.documentos-table th.sortable { cursor: pointer; user-select: none; }
.documentos-table th.sortable .sort-glyph { font-size: 9px; margin-left: 4px; opacity: 0.5; }
.documentos-table th.sortable.active .sort-glyph { opacity: 1; color: var(--accent); }

.documentos-bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 13px;
}
.documentos-bulk-toolbar[hidden] { display: none; }
.documentos-bulk-toolbar .bulk-count { font-weight: 600; color: var(--accent); }
.documentos-bulk-toolbar .bulk-spacer { flex: 1; }

.doc-actions-menu {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  min-width: 220px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 30;
}
.doc-actions-menu[hidden] { display: none; }
.doc-actions-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
}
.doc-actions-menu button:hover { background: var(--border-light); }
.doc-actions-menu button.danger { color: var(--danger); }
.doc-actions-menu button.danger:hover { background: var(--danger-bg); }
.doc-actions-menu button.is-disabled,
.doc-actions-menu button:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.55;
}
.doc-actions-menu button.is-disabled:hover,
.doc-actions-menu button:disabled:hover { background: transparent; }

.documentos-table td.col-checkbox,
.documentos-table th.col-checkbox { width: 32px; }
.documentos-table td.col-actions,
.documentos-table th.col-actions { width: 56px; text-align: right; }

.row-checkbox { cursor: pointer; }

/* Mobile: tabla horizontal → cards verticales. Cada <tr> se vuelve una
   card; cada <td> muestra "label: valor" usando el `data-label` que
   inyecta documentos.view.js. La fila se mantiene clickeable como en
   desktop. Checkbox y acciones se anclan a las esquinas. */
@media (max-width: 720px) {
  .documentos-table-wrap { padding: 0 12px; }
  .documentos-table thead { display: none; }
  .documentos-table,
  .documentos-table tbody,
  .documentos-table tr,
  .documentos-table td {
    display: block;
    width: auto;
  }
  .documentos-table tbody tr {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 14px 16px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .documentos-table tbody tr:hover { background: var(--surface); }
  .documentos-table tbody tr.doc-row--menu-open {
    box-shadow: 0 0 0 2px var(--accent);
  }
  .documentos-table tbody td {
    border: none;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 0;
    text-align: right;
  }
  .documentos-table tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-align: left;
  }
  /* Documento: el header del card — sin label, texto a la izquierda */
  .documentos-table tbody td.doc-name {
    text-align: left;
    padding: 0 0 10px 0;
    margin: 0 50px 8px 28px;  /* deja espacio para checkbox left + actions right */
    border-bottom: 1px solid var(--border-light);
    flex-wrap: wrap;
  }
  .documentos-table tbody td.doc-name::before { display: none; }
  .documentos-table tbody td.doc-name span { word-break: break-word; }
  /* Checkbox anclado top-left; actions top-right */
  .documentos-table tbody td.col-checkbox {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 0;
    width: auto;
    background: transparent;
  }
  .documentos-table tbody td.col-checkbox::before { display: none; }
  .documentos-table tbody td.col-actions {
    position: absolute;
    top: 10px;
    right: 8px;
    padding: 0;
    width: auto;
    background: transparent;
  }
  .documentos-table tbody td.col-actions::before { display: none; }
  /* Sort glyphs no aplican (thead oculto) — el sort sigue funcionando via
     headers desktop; mobile users no lo necesitan inmediato. */
}

/* Documentos library count badge (next to view title) */
.docs-count {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.docs-count[hidden] { display: none; }

/* ── Chat header favorite (star) button ── */
.chat-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-fav-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.12s var(--ease), background 0.12s var(--ease), transform 0.12s var(--ease);
  flex-shrink: 0;
}
.chat-fav-btn:hover {
  background: var(--border-light);
  color: var(--warning, #D97706);
  transform: scale(1.05);
}
.chat-fav-btn.is-fav { color: var(--warning, #D97706); }

/* ── Proyectos view ───────────────────────────────────── */
.proyectos-view {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  background: var(--bg);
}
.proyectos-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  flex-wrap: wrap;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.proyectos-toolbar .btn { flex-shrink: 0; }
.proyectos-toolbar svg { flex-shrink: 0; }

.proyectos-view .card-grid { padding: 16px 36px 64px; }

.proyecto-card .uc-top { align-items: flex-start; }
.proyecto-card-eyebrow {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.proyecto-card-ley {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.proyecto-card-client {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 4px 0 -4px;
}
.proyecto-card-rol {
  font-weight: 500;
  color: var(--text-secondary);
}
.proyecto-card-fav {
  background: none;
  border: none;
  padding: 4px;
  margin: -4px 4px -4px -4px;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.proyecto-card-fav:hover {
  color: var(--warning, #D97706);
  background: rgba(217, 119, 6, 0.08);
}
.proyecto-card-fav.is-fav { color: var(--warning, #D97706); }
.proyecto-card-stats { align-items: center; }

.trayectoria-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trayectoria-fav-btn {
  background: none;
  border: none;
  padding: 4px;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.trayectoria-fav-btn:hover {
  color: var(--warning, #D97706);
  background: rgba(217, 119, 6, 0.08);
}
.trayectoria-fav-btn.is-fav { color: var(--warning, #D97706); }

/* ── Favoritos view: proyectos block ────────────────── */
.favorites-section-label {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.favorites-projects { margin-bottom: 24px; }
.favorites-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
  gap: 10px;
}
.favorite-matter-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.favorite-matter-card:hover {
  border-color: rgba(202, 22, 23, 0.5);
  transform: translateY(-1px);
}
.favorite-matter-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.favorite-matter-client {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.favorite-matter-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fav-card-type {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.fav-card-type--generic {
  color: var(--text-muted);
  background: var(--border-light);
  border: 1px solid var(--border);
}
.fav-card-type--pdp {
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
}
.favorite-matter-meta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

@media (max-width: 720px) {
  .proyectos-toolbar { padding: 12px 20px; }
  .proyectos-toolbar .btn { width: 100%; justify-content: center; }
  .proyectos-view .card-grid { padding: 12px 20px 64px; }
}

/* ── Modal (used by Proyectos + Trayectoria) ──────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 1000;
}
.modal-backdrop[hidden] { display: none; }

.modal-content {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 24px 20px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
}
.modal-content.modal-content-wide {
  max-width: min(960px, calc(100vw - 64px));
}
.modal-content textarea.markdown-textarea {
  font-family: var(--font-mono);
  font-size: 12.5px;
  min-height: 360px;
  line-height: 1.55;
}
.modal-content h2 {
  margin: 0 0 12px;
  font-family: 'Space Grotesk', var(--font-display, var(--font));
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.modal-content label {
  display: block;
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.modal-content input,
.modal-content select,
.modal-content textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  box-sizing: border-box;
}
.modal-content textarea {
  resize: vertical;
  min-height: 200px;
  line-height: 1.5;
}
.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(202, 22, 23, 0.1);
}
[data-theme="dark"] .modal-content input:focus,
[data-theme="dark"] .modal-content select:focus {
  box-shadow: 0 0 0 3px rgba(224, 64, 68, 0.15);
}
.modal-content input[readonly] {
  background: var(--border-light);
  color: var(--text-muted);
  cursor: not-allowed;
}
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ── Associate-matter modal ─────────────────────────── */
.associate-matter-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--bg, #fff);
}
.associate-matter-item {
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.associate-matter-item:last-child { border-bottom: none; }
.associate-matter-item.is-selected {
  background: var(--accent-bg);
  box-shadow: inset 3px 0 0 var(--accent);
}
.associate-matter-item.is-selected .associate-matter-name {
  color: var(--accent);
}
.associate-matter-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.associate-matter-row:hover {
  background: var(--border-light);
}
.associate-matter-name {
  font-weight: 600;
}
.associate-matter-client {
  font-size: 0.85em;
  color: var(--text-muted, #6b7280);
}
.associate-matter-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted, #6b7280);
  font-size: 0.9em;
}

/* ── Trayectoria view ───────────────────────────────── */
.trayectoria-view {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  background: var(--bg);
}
.trayectoria-header {
  gap: 12px;
  justify-content: flex-start;
}
.trayectoria-header .config-view-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Indent the client subtitle so it visually aligns with the matter name
   (which starts after the favorite-star button inside the title row). */
.trayectoria-header .config-view-subtitle {
  padding-left: 30px;
  display: inline-flex;
  align-items: center;
}
/* Editable affordance for the matter + client name. Subtle until hover so
   the header doesn't look like a wall of buttons. */
.editable-title {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 4px;
  margin: -1px -4px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.editable-title:hover {
  background: var(--accent-bg);
  color: var(--accent);
}
.editable-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Inline rename input — inherits the title typography so the header
   doesn't reflow when the user starts editing. */
.editable-title-input {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 4px;
  margin: -2px -4px;
  outline: none;
  min-width: 200px;
}
.trayectoria-back-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.trayectoria-back-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.trayectoria-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  flex-wrap: wrap;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.trayectoria-toolbar .btn { flex-shrink: 0; }
.trayectoria-toolbar svg { flex-shrink: 0; }
.trayectoria-toolbar-spacer { flex: 1; }
.trayectoria-toolbar .drive-status-label {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.trayectoria-toolbar .nav-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 11px;
  background: var(--border-light);
  border-radius: 10px;
  color: var(--text-muted);
}

.trayectoria-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 36px 14px;
  font-size: 13px;
  color: var(--text-secondary);
}
.trayectoria-selector label {
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.trayectoria-selector select {
  flex: 0 1 auto;
  min-width: 280px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.trayectoria-selector select:hover {
  border-color: var(--text-muted);
}
.trayectoria-selector select:focus {
  outline: none;
  border-color: var(--accent, #6f4dff);
  box-shadow: 0 0 0 3px rgba(111, 77, 255, 0.12);
}

.trayectoria-steps {
  list-style: none;
  padding: 0 36px 64px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trayectoria-loading,
.trayectoria-empty {
  list-style: none;
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
}
.trayectoria-empty strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
  font-size: 14px;
}
.trayectoria-empty p {
  margin: 0;
}

.trayectoria-empty-guide {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 36px 16px;
  padding: 16px 18px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-bg, rgba(0, 102, 204, 0.06));
}
.trayectoria-empty-guide[hidden] { display: none; }
.trayectoria-empty-guide .teg-icon {
  flex-shrink: 0;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--accent);
}
.trayectoria-empty-guide .teg-body { flex: 1; min-width: 0; }
.trayectoria-empty-guide h3 {
  font-family: var(--font-display);
  font-size: 14px;
  margin: 0 0 4px;
  color: var(--text);
}
.trayectoria-empty-guide p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.trayectoria-empty-guide .teg-cta { margin-top: 4px; }

.paso {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  transition: transform 120ms var(--ease), border-color 120ms var(--ease), box-shadow 120ms var(--ease);
  position: relative;
}
.paso-kebab {
  align-self: start;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  transition: background 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease);
}
.paso-kebab:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.paso-kebab-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 240px;
  padding: 4px;
  z-index: 1000;
}
.paso-kebab-item {
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  display: block;
  font-size: 13px;
  padding: 8px 12px;
  text-align: left;
  width: 100%;
  border-radius: 6px;
}
.paso-kebab-item:hover { background: var(--surface-2); }
.paso-available { cursor: pointer; }
.paso-available:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.12);
}
.paso-completed {
  background: var(--success-bg);
  border-color: #A7F3D0;
  cursor: pointer;
}
.paso-completed:hover {
  transform: translateY(-1px);
  border-color: var(--success);
}
.paso-locked {
  opacity: 0.6;
  background: var(--border-light);
}
.paso-num {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-muted);
  align-self: start;
  letter-spacing: -0.02em;
}
.paso-completed .paso-num { color: var(--success); }
.paso-body { min-width: 0; }
.paso-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.paso-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.paso-missing {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--warning);
}
.paso-state {
  display: inline-block;
  margin-top: 10px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  background: var(--border-light);
  color: var(--text-muted);
}
.paso-state-available {
  background: var(--accent-bg);
  color: var(--accent);
}
.paso-state-completed {
  background: var(--success-bg);
  color: var(--success);
}
.paso-state-locked {
  background: var(--border-light);
  color: var(--text-muted);
}
.paso-state-in-progress {
  background: #fef3c7;
  color: #92400e;
}
.paso-in-progress {
  cursor: pointer;
  background: #fffbeb;
  border-color: #fde68a;
}
.paso-in-progress:hover {
  transform: translateY(-1px);
  border-color: #f59e0b;
}
.paso-in-progress .paso-num { color: #b45309; }
.paso-ongoing {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: #92400e;
  font-style: italic;
}

@media (max-width: 720px) {
  .trayectoria-toolbar { padding: 12px 20px; }
  .trayectoria-toolbar .btn { flex: 1 1 auto; justify-content: center; }
  .trayectoria-toolbar-spacer { display: none; }
  .trayectoria-steps { padding: 0 12px 64px; gap: 8px; }
  .trayectoria-selector {
    padding: 0 20px 12px;
    flex-wrap: wrap;
  }
  .trayectoria-selector select { min-width: 0; width: 100%; }
  .trayectoria-empty-guide { margin: 0 12px 12px; padding: 14px; gap: 10px; }

  /* Stepper: el grid 56px+1fr+auto desktop comprime el título en mobile
     (el número y el kebab se quedan con 56px+auto, dejando ~30% para
     título + descripción). Re-layout a número inline en el header del
     paso, kebab absoluto top-right, body full-width. */
  .paso {
    display: block;
    padding: 14px 16px;
    position: relative;
  }
  .paso-num {
    display: inline;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    margin-right: 8px;
    letter-spacing: 0;
  }
  .paso-completed .paso-num { color: var(--success); }
  .paso-in-progress .paso-num { color: #b45309; }
  .paso-body { display: inline; }
  .paso-title {
    display: inline;
    font-size: 14px;
  }
  .paso-desc {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
  }
  .paso-missing { font-size: 11.5px; }
  .paso-state {
    display: inline-block;
    margin-top: 8px;
  }
  .paso-kebab {
    position: absolute;
    top: 8px;
    right: 8px;
  }
}

/* ── Artifact panel ─────────────────────────────────── */
.artifact-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 360px;
  max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 20px 22px 28px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: -8px 0 24px -12px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.artifact-panel[hidden] { display: none; }
.artifact-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.artifact-panel-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.artifact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.artifact {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
/* Versiones superadas se renderizan tenues — siguen visibles para
 * trazabilidad pero el aprobado actual destaca arriba. */
.artifact.is-superseded {
  opacity: 0.55;
  background: var(--surface-2, var(--bg));
}
.artifact.is-superseded .artifact-tipo { color: var(--text-muted); }
.artifact-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.artifact-tipo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.artifact-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.artifact-empty {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.artifact-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.artifact-pending-note {
  font-size: 11.5px;
  color: var(--text-faint);
  font-style: italic;
}
.artifact-discard-btn {
  color: var(--text-muted);
}
.artifact-discard-btn:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-bg);
}
.artifact-preview {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.artifact-preview h1, .artifact-preview h2, .artifact-preview h3 {
  font-family: var(--font-display);
  margin: 8px 0 4px;
}
.artifact-preview h1 { font-size: 15px; }
.artifact-preview h2 { font-size: 14px; }
.artifact-preview h3 { font-size: 13.5px; }
.artifact-preview p, .artifact-preview ul, .artifact-preview ol { margin: 6px 0; }
.artifact-preview pre {
  background: var(--surface-2);
  padding: 8px;
  border-radius: 4px;
  overflow-x: auto;
}
.artifact-empty-body {
  color: var(--text-faint);
  font-style: italic;
}
.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
}

/* ── Drive status (trayectoria header) ─────────────────── */
.drive-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.drive-status-label {
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

/* ── Usages modal ──────────────────────────────────────── */
.usages-block { margin-top: 14px; }
.usages-block h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}
.usages-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}
.usages-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text);
}
.usages-list li.usages-empty {
  font-style: italic;
  color: var(--text-faint);
  justify-content: center;
}
.usages-list li.deleted {
  opacity: 0.55;
}
.usages-list li .usage-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.usages-list li .usage-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--border-light);
  color: var(--text-muted);
  white-space: nowrap;
}
.usages-list li .usage-status.deleted {
  background: var(--accent-bg);
  color: var(--accent);
}
.usages-list li .usage-status.detached {
  background: #fef3c7;
  color: #92400e;
}
.usages-list li .usage-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* ── Documentos table — usage count column ────────────── */
.usage-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--border-light);
  color: var(--text-muted);
}
.usage-badge.has-usage {
  background: var(--accent-bg);
  color: var(--accent);
}
.usage-badge.zero {
  background: transparent;
  color: var(--text-faint);
}

/* ── Modal hint ─────────────────────────────────────────── */
.modal-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Trayectoria client subtitle ───────────────────────── */
.trayectoria-client-rut {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  margin-left: 6px;
}
.chat-rename-btn {
  margin-left: 6px;
  padding: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text-faint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  transition: color 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease);
}
.chat-rename-btn:hover {
  color: var(--accent);
  background: var(--accent-bg);
  border-color: var(--accent-border);
}

.trayectoria-edit-client-btn {
  margin-left: 6px;
  padding: 2px;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  border-radius: 4px;
  transition: color 160ms var(--ease), background 160ms var(--ease);
}
.trayectoria-edit-client-btn:hover {
  color: var(--accent);
  background: var(--accent-bg);
}

/* ── Matter sessions (trayectoria — handoff) ─────────── */
.matter-sessions {
  margin: 24px 36px 12px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.matter-sessions h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.matter-sessions-hint {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
}
#matterSessionsList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#matterSessionsList .empty,
#matterSessionsList .error {
  padding: 12px;
  text-align: center;
  color: var(--text-faint);
  font-style: italic;
  font-size: 13px;
}
.matter-session {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}
.matter-session-main { flex: 1; min-width: 0; }
.matter-session-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.matter-session-delete {
  color: var(--text-muted);
  padding: 6px;
}
.matter-session-delete:hover {
  color: var(--danger, #d14);
  background: var(--border-light);
}
.matter-session-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.matter-session-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  flex-wrap: wrap;
}
.matter-session-uc { font-family: var(--font-mono); }
.matter-session-owner { font-family: var(--font-mono); }
.matter-session-owner.mine {
  color: var(--accent);
  font-weight: 600;
}
.matter-session-owner.other { color: var(--text-muted); }
.matter-session-mode {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .matter-sessions { margin: 20px 20px 12px; padding: 16px 18px; }
}

/* ── Read-only banner in chat view ─────────────────────── */
.read-only-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
  font-size: 13px;
  line-height: 1.4;
}
.read-only-banner svg { flex-shrink: 0; }
.read-only-banner strong { font-weight: 600; }
.chat-input-area.read-only {
  opacity: 0.55;
  pointer-events: none;
}

/* ── Matter documents (trayectoria) ────────────────────── */
.matter-documents {
  margin: 24px 36px 64px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.matter-documents h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.matter-documents ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (max-width: 768px) {
  .matter-documents { margin: 20px 20px 64px; padding: 16px 18px; }
}

/* ── Proyecto card delete button ────────────────────────── */
.proyecto-card { position: relative; }
.proyecto-card-stage {
  margin-top: auto;
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}
.proyecto-card-stage strong {
  font-family: var(--font-mono);
  color: var(--text);
  font-weight: 600;
}
.proyecto-card-stats {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.proyecto-card-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.proyecto-card-stat svg {
  flex-shrink: 0;
  color: var(--text-faint);
}
.proyecto-card-delete {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
  z-index: 2;
}
.proyecto-card:hover .proyecto-card-delete,
.proyecto-card-delete:focus-visible { opacity: 1; }
.proyecto-card-delete:hover {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}

/* ── Trayectoria header — danger button ────────────────── */
.trayectoria-delete-btn { color: var(--text-muted); }
.trayectoria-delete-btn:hover {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}
.matter-doc {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
}
.doc-name { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.doc-name > span:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.doc-actions { display: flex; gap: 0.5rem; }
.badge {
  display: inline-block; padding: 0.125rem 0.5rem;
  border-radius: 999px; font-size: 0.7rem; font-weight: 500;
}
.badge-anon {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}

/* ── Investigación (Corpus Legal — BCN) ─────────────────────── */

.investigacion-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.investigacion-toolbar {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 12px;
  padding: 0 32px;
  margin-bottom: 8px;
  align-items: stretch;
}
.investigacion-toolbar .config-select {
  width: 100%;
  margin-top: 0;
  height: 40px;
}
.investigacion-search {
  position: relative;
  display: flex;
  align-items: center;
}
.investigacion-search svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}
.investigacion-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  box-sizing: border-box;
}
.investigacion-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(202,22,23,0.1);
}
[data-theme="dark"] .investigacion-search input:focus {
  box-shadow: 0 0 0 3px rgba(224,64,68,0.15);
}

.investigacion-count {
  padding: 0 32px;
  margin: 8px 0 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.investigacion-table-wrap {
  flex: 1;
  overflow-y: auto;
  /* Bottom padding eliminado: el paginador es sibling fijo abajo (footer
     sticky natural por el flex column). Mantener el lateral para que la
     tabla no toque los bordes. */
  padding: 0 32px;
}
.investigacion-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.investigacion-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 14px 8px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}
.investigacion-table th.sortable { cursor: pointer; user-select: none; }
.investigacion-table th.sortable .sort-glyph {
  font-size: 9px;
  margin-left: 4px;
  opacity: 0.5;
}
.investigacion-table th.sortable.active .sort-glyph { opacity: 1; color: var(--accent); }
.investigacion-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  vertical-align: middle;
}
.investigacion-table tbody tr {
  transition: background 0.1s;
  animation: invRowIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.investigacion-table tbody tr:hover { background: var(--border-light); }
.investigacion-table tbody .col-num,
.investigacion-table tbody .col-date {
  font-family: var(--font-mono);
}
.investigacion-table .col-num,
.investigacion-table .col-date {
  white-space: nowrap;
}
.investigacion-table .col-desc {
  min-width: 220px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.investigacion-table .col-titulo {
  min-width: 240px;
  max-width: 360px;
}
.investigacion-table .titulo-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.investigacion-table .titulo-text.muted { color: var(--text-muted); font-style: italic; }

@keyframes invRowIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.inv-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.inv-badge-accent  { background: var(--accent-bg);  color: var(--accent);  }
.inv-badge-slate   { background: rgba(61,72,88,0.08); color: #3D4858; }
.inv-badge-amber   { background: var(--warning-bg); color: var(--warning); }
.inv-badge-warning { background: var(--warning-bg); color: var(--warning); }
.inv-badge-danger  { background: var(--danger-bg);  color: var(--danger);  }
.inv-badge-green   { background: var(--success-bg); color: var(--success); }
.inv-badge-neutral { background: var(--border-light); color: var(--text-muted); }

[data-theme="dark"] .inv-badge-slate {
  background: rgba(232,233,236,0.08);
  color: #B8BCC5;
}

.investigacion-empty,
.investigacion-loading {
  padding: 60px 32px;
  text-align: center;
  color: var(--text-muted);
}
.investigacion-empty p,
.investigacion-loading p { margin: 0; font-size: 14px; }

/* ── Paginador (compartible — usado en Investigación, extensible a otras vistas) ── */
.inv-paginator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.inv-paginator:empty { display: none; }
.inv-paginator button {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 120ms ease;
  min-width: 36px;
}
.inv-paginator button:hover:not(:disabled) {
  border-color: var(--accent-border, rgba(202, 22, 23, 0.5));
  color: var(--accent);
  background: var(--accent-bg, rgba(202, 22, 23, 0.06));
}
.inv-paginator button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.inv-paginator .inv-pag-num.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.inv-paginator .inv-pag-num.is-active:hover {
  background: var(--accent-hover, var(--accent));
  color: #fff;
}
.inv-paginator .inv-pag-step {
  padding-inline: 14px;
}
.inv-paginator .inv-pag-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--text-muted);
  font-weight: 600;
}

@media (max-width: 720px) {
  .investigacion-toolbar { grid-template-columns: 1fr; }
  .inv-paginator { padding: 12px 8px; gap: 3px; }
  .inv-paginator button { padding: 5px 9px; font-size: 12px; min-width: 30px; }
}

/* ── Investigación: norm detail ────────────────────────────── */

/* Layout split: header full-width con bg+border (matches chat-header)
   + body padded scrollable. Antes el view era un único container padded
   con `overflow-y:auto` y el header iba "inset" dentro, desconectado del
   resto de la app.
   `height: 100dvh` y `min-height: 0` son CRÍTICOS para el scroll del
   body interno — sin altura fija al view, el body con `flex:1` crece
   con el contenido y nunca overflowea (no aparece scroll). Mismo patrón
   que .chat-view y .history-view. */
.investigacion-detail-view {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* el body interno scrolea */
  position: relative;  /* anchor para scroll-to-top floating */
  min-height: 0;
}
/* Header full-width: bg surface + border-bottom, back-btn icon-only +
   título en la misma fila. Espeja el chat-header. */
.inv-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 32px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.inv-detail-header .trayectoria-back-btn {
  margin-top: 2px;  /* alinea con primera línea de h2 (line-height 1.25) */
}
.inv-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 48px;
  min-height: 0;  /* scroll hygiene */
}
.investigacion-detail-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--text);
  margin: 0;
  flex: 1;
  min-width: 0;
}
.investigacion-detail-title .inv-badge {
  vertical-align: 4px;
  margin-right: 6px;
}
.investigacion-detail-loading {
  padding: 60px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.detail-grid {
  display: grid;
  /* minmax(0, 1fr) — sin esto, contenido ancho (texto largo de
     jurisprudencia, fuentes legales con muchas referencias) infla la
     columna y rompe el layout horizontalmente. */
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.detail-meta {
  position: sticky;
  top: 24px;
}
.meta-block {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.meta-block:first-child { padding-top: 0; }
.meta-block:last-child  { border-bottom: none; }
.meta-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.meta-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.45;
  word-break: break-word;
}
.meta-value.mono {
  font-family: var(--font-mono);
  font-size: 13px;
}
.meta-value a { color: var(--accent); text-decoration: none; }
.meta-value a:hover { text-decoration: underline; }

.detail-content .timeline-header {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--text);
}
.detail-juris-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.detail-juris-grid .stat-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 22px;
}
.detail-juris-grid .stat-value {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.01em;
}
.detail-juris-grid .stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 6px;
}

.detail-juris-grid .stat-item.is-clickable {
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.detail-juris-grid .stat-item.is-clickable:hover:not(:disabled) {
  border-color: var(--accent);
}
.detail-juris-grid .stat-item.is-active {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.detail-juris-grid .stat-item.is-empty {
  opacity: 0.45;
  cursor: not-allowed;
}

.juris-panel {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: -16px 0 28px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.juris-panel[hidden] { display: none; }
.juris-panel-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface);
}

.juris-row {
  background: var(--surface);
  /* flex item dentro del .juris-panel (flex column) — sin min-width:0
     el contenido ancho expande el row más allá del viewport. */
  min-width: 0;
}
.juris-row.is-no-text .juris-row-head { cursor: default; opacity: 0.7; }
.juris-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.12s;
  min-width: 0;
}
.juris-row:not(.is-no-text) .juris-row-head:hover { background: var(--accent-bg); }
.juris-row.is-open .juris-row-head {
  background: var(--accent-bg);
  border-bottom: 1px solid var(--border);
}
.juris-row-indicator {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 11px;
  width: 14px;
  text-align: center;
}
.juris-row-titles { flex: 1; min-width: 0; }
.juris-row-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.juris-row-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.juris-no-text-hint {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint, var(--text-muted));
  background: var(--bg);
  padding: 2px 7px;
  border-radius: 999px;
  cursor: help;
  flex-shrink: 0;
}
/* Link externo al expediente original (ej. Tercer Tribunal Ambiental).
   Visible directamente en la row — no requiere expansión porque esos
   items NO tienen texto local. */
.juris-external-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-bg);
  padding: 5px 10px;
  border-radius: 6px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.12s var(--ease);
  border: 1px solid transparent;
}
.juris-external-link:hover {
  background: var(--surface);
  border-color: var(--accent);
  text-decoration: none;
}
.juris-external-link svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

.juris-row-body { display: none; }
.juris-row.is-open .juris-row-body {
  display: block;
  padding: 14px 18px 18px;
  background: var(--surface);
}
.juris-detail-loading,
.juris-detail-error,
.juris-detail-empty {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  padding: 8px 0;
}
.juris-detail-error { color: var(--danger); }
.juris-detail-meta {
  display: grid;
  /* Columna de keys con ancho fijo razonable (no max-content) +
     valor flexible que respeta minmax(0, 1fr) → permite wrap. */
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 4px 14px;
  margin-bottom: 14px;
  font-size: 12px;
}
.juris-detail-meta-row { display: contents; }
.juris-detail-meta-key {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding-top: 1px;
}
.juris-detail-meta-val {
  color: var(--text);
  /* Las "Fuentes legales" del SCJ a veces traen cadenas largas de
     refs separadas por comas sin espacios — forzamos break para no
     desbordar la columna. */
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.juris-detail-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 60vh;
  overflow: auto;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* ── Juris tabs section (vista detail de norma) ─────────────────── */
/* Reemplaza el grid de 3 stat cards + panel único expandible. Layout:
   tabs sticky + toolbar (search/año/clear) + lista paginada + paginación.
   El contenido vive dentro de detail-content; el scroll real está en
   .inv-detail-body. */
.juris-tabs-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin: -8px 0 24px;
}
.juris-tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.juris-tabs::-webkit-scrollbar { display: none; }
.juris-tab {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 14px 10px 12px;
  margin-right: 24px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.juris-tab:hover:not(:disabled):not(.is-empty) { color: var(--text); }
.juris-tab.is-active {
  color: var(--text);
  font-weight: 700;
  border-bottom-color: var(--accent);
}
.juris-tab.is-empty {
  opacity: 0.45;
  cursor: not-allowed;
}
.juris-tab-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--border-light);
  padding: 2px 7px;
  border-radius: 999px;
}
.juris-tab.is-active .juris-tab-count {
  color: var(--accent);
  background: var(--accent-bg);
}

.juris-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2, var(--bg));
}
.juris-search {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 360px;
}
.juris-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  pointer-events: none;
}
.juris-search input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  padding: 8px 12px 8px 32px;
  outline: 0;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.juris-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.juris-filter-anio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.juris-filter-anio label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.juris-filter-anio select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}
.juris-filter-anio select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.juris-clear-filters {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.juris-clear-filters:hover { color: var(--text); background: var(--border-light); }
.juris-clear-filters[hidden] { display: none; }

.juris-list-container {
  background: var(--surface);
}
.juris-list-loading,
.juris-list-empty {
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.juris-list-empty .link-as-btn {
  background: transparent;
  border: 0;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Override: en la nueva vista tabbed, las rows NO son flex items de un
   panel column (que era .juris-panel). Ahora viven directo en
   .juris-list-container. Aplicar separador inferior 1px y padding propio
   para que match estética de listing data-table del repo. */
.juris-list-container .juris-row {
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
}
.juris-list-container .juris-row:last-child { border-bottom: 0; }
.juris-list-container .juris-row-head { padding: 14px 18px; }
.juris-list-container .juris-row.is-open .juris-row-head {
  border-bottom: 1px solid var(--border);
}
.juris-list-container .juris-row.is-open .juris-row-body {
  padding: 16px 18px 20px;
}

/* Title-line: Rol mono red + caratulado lado a lado. */
.juris-row-title-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
}
.juris-row-rol {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
/* Badge slate para tribunales no-Corte-Suprema (ej. 3TA, TDLC). Visualmente
   distinto del rol (red) y del título — slate cool para no competir con
   el accent. Tooltip muestra el nombre completo del tribunal. */
.juris-corte-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--border-light);
  border: 1px solid var(--border);
  flex-shrink: 0;
  cursor: help;
  line-height: 1.4;
}
.juris-list-container .juris-row-title {
  white-space: normal;       /* permite wrap del caratulado largo */
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.juris-list-container .juris-row-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: normal;
  margin-top: 4px;
}

/* ── Paginación ── */
.juris-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.juris-pagination:empty { display: none; }
.juris-pagination-info {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.juris-pagination-info strong {
  color: var(--text);
  font-weight: 600;
}
.juris-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.juris-page-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, var(--text-muted));
  cursor: pointer;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease), color 0.12s var(--ease);
  min-width: 32px;
}
.juris-page-btn:hover:not(:disabled) { background: var(--border-light); color: var(--text); }
.juris-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.juris-page-btn.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg);
}
.juris-page-btn.juris-page-nav { padding: 6px 12px; }
.juris-page-ellipsis {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 12px;
  padding: 0 2px;
}

.detail-alertas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.detail-alerta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--warning-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.detail-alerta-icon { font-size: 18px; line-height: 1; }
.detail-alerta-body { flex: 1; min-width: 0; }
.detail-alerta-msg {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}

.detail-resumen {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 28px;
  white-space: pre-wrap;
}
.detail-footer {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-meta { position: static; }
}
@media (max-width: 600px) {
  .detail-juris-grid { grid-template-columns: 1fr; }
}

/* ── Equipos y permisos (admin) ───────────────────────── */
.al-section-header { display:flex; justify-content:space-between; align-items:center; margin: 12px 0 8px; gap: 12px; flex-wrap: wrap; }
.al-section-header h3, .al-section-header h4 { margin: 0; }
.al-section-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 16px 0 6px; }
.al-actions { display: flex; gap: 8px; align-items: center; }
.al-team-list { list-style: none; padding: 0; margin: 0; }
.al-team-list > li { display: grid; grid-template-columns: 1fr auto auto auto; gap: .75rem; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.al-team-list .al-empty { display: block; color: var(--text-muted); padding: 12px 4px; }

/* Default-team badge + name cell wrapper (T5) */
.al-team-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.al-team-name-cell strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-team-meta {
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.al-team-badge-default {
  flex-shrink: 0;
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-bg, rgba(202, 22, 23, 0.08));
  border: 1px solid var(--accent-border, rgba(202, 22, 23, 0.25));
}
.al-muted { color: var(--text-muted); font-size: 13px; }
.al-subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.al-subnav button { background: none; border: none; padding: 8px 14px; cursor: pointer; color: var(--text-secondary); border-bottom: 2px solid transparent; }
.al-subnav button.is-active { color: var(--text); border-bottom-color: var(--accent, #2563eb); }
.al-add-member-row { display: flex; gap: 8px; align-items: center; margin: 6px 0 16px; }
.al-add-member-row select { flex: 1; padding: 6px 8px; }
.al-members-profile { width: 100%; border-collapse: collapse; }
.al-members-profile td { padding: 6px 4px; border-bottom: 1px solid var(--border); }
/* ── Audit view fallback (still used by the resolved-permissions view) ── */
.al-policy-section { padding: 12px 0; border-bottom: 1px solid var(--border); }
.al-error { color: var(--danger, #dc2626); padding: 12px; }

/* ── Policies editor — two-pane layout ─────────────────────────────── */
.al-policies-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.al-policies-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.al-policies-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.al-policies-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.al-policies-scope-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.al-policies-scope-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

.al-policies-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  min-height: 480px;
}

/* ── Rail (left) ─────────────────────────────────────────────────── */
.al-policies-rail {
  border-right: 1px solid var(--border);
  background: var(--surface-2, #FAFBFC);
  overflow-y: auto;
}
.al-rail-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.al-rail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.al-rail-item:hover {
  background: var(--border-light, #F0F1F4);
}
.al-rail-item.is-active {
  background: var(--surface);
  border-left-color: var(--accent);
}
.al-rail-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.al-rail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.al-rail-count {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  padding: 1px 6px;
  background: var(--border-light, #F0F1F4);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
}
.al-rail-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid;
}
.al-rail-badge--none {
  color: var(--text-faint, #9BA0A8);
  background: transparent;
  border-color: var(--border);
}
.al-rail-badge--allow {
  color: #047857;
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.25);
}
.al-rail-badge--deny {
  color: var(--accent);
  background: var(--accent-bg, rgba(202, 22, 23, 0.08));
  border-color: var(--accent-border, rgba(202, 22, 23, 0.25));
}
.al-rail-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D97706;
  vertical-align: middle;
}

/* ── Editor (right) ─────────────────────────────────────────────── */
.al-policies-editor {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
}
.al-policies-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.al-editor-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.al-editor-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.al-editor-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}
.al-editor-count {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.al-editor-help {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.al-editor-help strong {
  color: var(--text);
  font-weight: 700;
}
.al-editor-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.al-segmented {
  display: inline-flex;
  background: var(--border-light, #F0F1F4);
  padding: 2px;
  border-radius: 7px;
  border: 1px solid var(--border);
}
.al-segmented-opt {
  background: transparent;
  border: 0;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 5px;
  cursor: pointer;
  transition: all 120ms ease;
}
.al-segmented-opt:hover { color: var(--text); }
.al-segmented-opt.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.al-segmented-opt--deny.is-active {
  color: var(--accent);
}

.al-editor-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 200px;
  display: flex;
  align-items: center;
}
.al-editor-search svg {
  position: absolute;
  left: 10px;
  color: var(--text-faint, #9BA0A8);
  pointer-events: none;
}
.al-editor-search input {
  width: 100%;
  padding: 6px 10px 6px 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}
.al-editor-search input:focus {
  outline: 2px solid var(--accent-bg, rgba(202, 22, 23, 0.18));
  outline-offset: 0;
  border-color: var(--accent-border, rgba(202, 22, 23, 0.5));
}

.al-editor-bulk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-left: auto;
}
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

.al-editor-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 8px;
  background: var(--surface);
}
.al-editor-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
}

.al-editor-stub {
  max-width: 520px;
  margin: 32px auto;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-2, #FAFBFC);
}
.al-editor-stub > svg {
  display: block;
  margin: 0 auto 8px;
  color: var(--text-faint, #9BA0A8);
}
.al-editor-stub h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.al-editor-stub p {
  margin: 0 0 12px;
}
.al-editor-stub code {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  padding: 1px 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
}
.al-editor-stub-needs {
  margin: 16px auto 8px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
  font-size: 12.5px;
  max-width: 440px;
}
.al-editor-stub-needs > span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint, #9BA0A8);
  margin-bottom: 6px;
}
.al-editor-stub-needs ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
}
.al-editor-stub-needs li {
  margin-bottom: 4px;
  line-height: 1.5;
}
.al-editor-stub-foot {
  margin-top: 12px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-faint, #9BA0A8);
}

.al-policy-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px;
}
.al-policy-item {
  border-radius: 6px;
  transition: background-color 120ms ease;
}
.al-policy-item:hover {
  background: var(--border-light, #F0F1F4);
}
.al-policy-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  width: 100%;
}
.al-policy-item input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  cursor: pointer;
}
.al-policy-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.al-policy-item-label {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.35;
}
.al-policy-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.al-policy-item-id {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  padding: 0;
  border: 0;
  letter-spacing: 0;
}
.al-policy-item-cat {
  font-size: 10.5px;
  color: var(--text-faint, #9BA0A8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.al-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface-2, #FAFBFC);
}
.al-editor-footer-status {
  font-size: 12.5px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.al-editor-dirty {
  color: #D97706;
  font-weight: 600;
}
.al-editor-saved {
  color: #047857;
  font-weight: 600;
}
.al-editor-none { color: var(--text-faint, #9BA0A8); }
.al-editor-footer-actions {
  display: inline-flex;
  gap: 8px;
}

@media (max-width: 880px) {
  .al-policies-layout {
    grid-template-columns: 1fr;
  }
  .al-policies-rail {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: 240px;
  }
  .al-editor-controls { flex-direction: column; align-items: stretch; }
  .al-editor-bulk { margin-left: 0; }
}

/* ── Document share modal + restricted badge ──────────────────── */
.doc-card-badge--locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  margin-left: 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-bg, rgba(202, 22, 23, 0.08));
  border: 1px solid var(--accent-border, rgba(202, 22, 23, 0.25));
  vertical-align: middle;
}

.share-modal {
  max-width: 540px;
}
/* Pre-upload ACL modal: reusa el estilo del share modal pero más
   compacto — sin pickers, solo el toggle de restricción. */
.upload-acl-modal { max-width: 480px; }
.upload-acl-hint {
  margin: 10px 0 16px;
  padding: 10px 12px;
  background: var(--surface-2, #FAFBFC);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.share-modal-owner {
  padding: 8px 12px;
  background: var(--surface-2, #FAFBFC);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
/* Override global .modal-content label { display: block } — toggle is flex. */
.modal-content label.share-modal-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  margin: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: normal;
  cursor: pointer;
}
/* Override the global .modal-content input rule (display:block, width:100%,
   padding, border, border-radius) for the share toggle's checkbox — it must
   be a native checkbox, not a styled text-input box. */
.share-modal-toggle input[type="checkbox"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  appearance: auto;
  -webkit-appearance: auto;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.share-modal-toggle span { line-height: 1.4; }

.share-modal-pickers {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}
.share-modal-pickers.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.share-modal-picker-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.share-modal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.share-modal-chips:empty { display: none; }
.share-modal-chips:not(:empty) { margin-bottom: 8px; }
/* Reset modal-content margin-top on the picker selects — el chip strip ya
   marca el espacio si tiene contenido; sin chips no debe haber gap extra. */
.share-modal-pickers select { margin-top: 0; }
.share-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  background: var(--accent-bg, rgba(202, 22, 23, 0.08));
  border: 1px solid var(--accent-border, rgba(202, 22, 23, 0.25));
  color: var(--accent);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.share-chip button {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.share-chip button:hover {
  background: var(--accent-border, rgba(202, 22, 23, 0.25));
}
.share-modal-empty-warning {
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--warning-bg, rgba(217, 119, 6, 0.08));
  border: 1px solid rgba(217, 119, 6, 0.25);
  color: #B45309;
  font-size: 13px;
  margin-top: 4px;
}

/* ── Configuración → Actividad (Phase 4.2 telemetry) ─────────────────── */

.cv-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Sub-tabs (Eventos | Uso LLM) */
.cv-actividad-subtabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.cv-actividad-subtabs .cv-subtab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 16px 18px 14px;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  transition: color 0.15s var(--ease, ease), border-color 0.15s var(--ease, ease);
}
.cv-actividad-subtabs .cv-subtab:hover {
  color: var(--text);
}
.cv-actividad-subtabs .cv-subtab .cv-subtab-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.cv-actividad-subtabs .cv-subtab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.cv-actividad-subtabs .cv-subtab.is-active .cv-subtab-hint {
  color: var(--accent);
  opacity: 0.75;
}
.cv-actividad-subtabs .cv-subtab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}

/* Panel body */
.cv-panel {
  display: flex;
  flex-direction: column;
}
.cv-panel[hidden] { display: none; }

/* Toolbar */
.cv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-light);
}
.cv-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.cv-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cv-field-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cv-input {
  appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 36px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cv-input:hover { border-color: var(--text-muted); }
.cv-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
select.cv-input {
  padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239BA0A8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
input.cv-input[type="date"] { min-width: 150px; }

/* Segmented control */
.cv-segmented {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.cv-segmented button {
  appearance: none;
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  min-height: 30px;
  transition: background 0.15s, color 0.15s;
}
.cv-segmented button:hover:not(.is-active) {
  color: var(--text);
  background: var(--border-light);
}
.cv-segmented button.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.cv-segmented button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Impersonation banner — admin viendo como otro user */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--warning, #b45309);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.impersonation-banner-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.9;
}
.impersonation-banner-text strong {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.impersonation-banner-exit {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: background 120ms;
}
.impersonation-banner-exit:hover { background: rgba(255, 255, 255, 0.3); }

/* Cuando hay banner, empuja el contenido para no taparlo */
body.is-impersonating .topbar { top: 38px; }
body.is-impersonating { padding-top: 0; }
.user-row-actions { display: flex; align-items: center; gap: 6px; }

/* Help text under toolbar (Calidad PDP sub-tab) */
.cv-help {
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  line-height: 1.5;
}

/* Table */
.cv-table-wrap {
  overflow-x: auto;
}
.cv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cv-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cv-table thead th.cv-num,
.cv-table tbody td.cv-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.cv-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  vertical-align: top;
}
.cv-table tbody tr:last-child td { border-bottom: none; }
.cv-table tbody tr {
  transition: background 0.1s;
}
.cv-table tbody tr:hover { background: var(--border-light); }

/* Empty / loading row */
.cv-row-state td {
  text-align: center;
  padding: 32px 16px !important;
  color: var(--text-muted);
  font-style: italic;
}

/* Date column — two-line stack */
.cv-table .cv-col-date { width: 1%; white-space: nowrap; }
.cv-cell-date {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  font-feature-settings: "tnum";
}
.cv-cell-time {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
  margin-top: 2px;
}

/* Actor column */
.cv-actor {
  font-size: 12.5px;
  color: var(--text-secondary);
  word-break: break-word;
}

/* Event pill — domain-tinted chip */
.cv-event-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  background: var(--border-light);
  color: var(--text);
  border: 1px solid var(--border);
}
.cv-event-pill[data-domain="policy"] {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
}
.cv-event-pill[data-domain="team"] {
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.25);
}
.cv-event-pill[data-domain="user"] {
  background: rgba(168, 85, 247, 0.10);
  color: #7c3aed;
  border-color: rgba(168, 85, 247, 0.25);
}
.cv-event-pill[data-domain="artifact"] {
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.25);
}
.cv-event-pill[data-domain="doc"] {
  background: rgba(245, 158, 11, 0.10);
  color: #B45309;
  border-color: rgba(245, 158, 11, 0.25);
}
.cv-event-pill[data-domain="matter"] {
  background: rgba(20, 184, 166, 0.10);
  color: #0f766e;
  border-color: rgba(20, 184, 166, 0.25);
}
.cv-event-pill[data-domain="chat"] {
  background: rgba(99, 102, 241, 0.10);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.25);
}
[data-theme="dark"] .cv-event-pill[data-domain="team"] { color: #93c5fd; background: rgba(59, 130, 246, 0.18); }
[data-theme="dark"] .cv-event-pill[data-domain="user"] { color: #c4b5fd; background: rgba(168, 85, 247, 0.18); }
[data-theme="dark"] .cv-event-pill[data-domain="artifact"] { color: #6ee7b7; background: rgba(16, 185, 129, 0.18); }
[data-theme="dark"] .cv-event-pill[data-domain="doc"] { color: #fcd34d; background: rgba(245, 158, 11, 0.18); }
[data-theme="dark"] .cv-event-pill[data-domain="matter"] { color: #5eead4; background: rgba(20, 184, 166, 0.18); }
[data-theme="dark"] .cv-event-pill[data-domain="chat"] { color: #a5b4fc; background: rgba(99, 102, 241, 0.18); }

/* Target column */
.cv-target-type {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-right: 6px;
}
.cv-target-id {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-muted);
}
.cv-muted { color: var(--text-muted); }

/* Payload column */
.cv-table .cv-col-payload {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.cv-payload-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
}
.cv-payload-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cv-payload-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.cv-payload-toggle-icon {
  font-size: 13px;
  line-height: 1;
  transition: transform 0.15s;
  display: inline-block;
}
.cv-payload-toggle.is-open .cv-payload-toggle-icon {
  transform: rotate(90deg);
}
.cv-event-row.is-expanded {
  background: var(--border-light);
}
.cv-event-row.is-expanded:hover {
  background: var(--border-light);
}

/* Drawer row — full-width payload viewer */
.cv-drawer-row > td {
  padding: 0 16px 14px !important;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light) !important;
}
.cv-payload-body {
  margin: 0;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
  max-height: 360px;
  overflow-y: auto;
  tab-size: 2;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
[data-theme="dark"] .cv-payload-body {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Paginator override (events) */
.cv-paginator { padding: 14px 20px; border-top: 1px solid var(--border-light); }
.cv-pag-status {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 8px;
}

/* Uso LLM — numeric-heavy table polish */
.cv-table--numeric .cv-col-key {
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  color: var(--text);
}
.cv-num {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.cv-num-strong {
  font-weight: 700;
  color: var(--text);
}
.cv-unit {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  margin-left: 1px;
}

/* Hop-rate badge */
.cv-hop {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  font-feature-settings: "tnum";
  border: 1px solid transparent;
}
.cv-hop-clean {
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.25);
}
.cv-hop-low {
  background: rgba(59, 130, 246, 0.10);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.25);
}
.cv-hop-mid {
  background: rgba(245, 158, 11, 0.10);
  color: #B45309;
  border-color: rgba(245, 158, 11, 0.25);
}
.cv-hop-high {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
}
[data-theme="dark"] .cv-hop-clean { color: #6ee7b7; }
[data-theme="dark"] .cv-hop-low   { color: #93c5fd; }
[data-theme="dark"] .cv-hop-mid   { color: #fcd34d; }

/* LLM summary footer — KPI strip */
.cv-llm-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 18px 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg);
}
.cv-llm-summary:empty { display: none; }
.cv-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cv-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cv-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* LLM charts (Configuración → Actividad → Uso LLM) */
.cv-llm-charts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
}
.cv-chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cv-chart-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 14px 16px 12px;
}
.cv-chart-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cv-chart {
  width: 100%;
  height: 280px;
}
.cv-chart--small { height: 220px; }
.cv-chart-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

.cv-toolbar-spacer { flex: 1; }

/* Adopción de casos de uso */
.cv-row-hint {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  margin-left: 2px;
}
.cv-adoption-unused {
  margin: 16px 20px 24px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}
.cv-adoption-unused[hidden] { display: none; }
.cv-adoption-unused summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
}
.cv-adoption-unused summary:hover { color: var(--text); }
.cv-adoption-unused-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 16px;
}
.cv-adoption-unused-list li {
  font-size: 12.5px;
  color: var(--text);
  padding: 3px 0;
}

/* Mobile */
@media (max-width: 720px) {
  .cv-actividad-subtabs { padding: 0 12px; overflow-x: auto; }
  .cv-actividad-subtabs .cv-subtab { padding: 12px 14px 10px; flex-shrink: 0; }
  .cv-actividad-subtabs .cv-subtab .cv-subtab-hint { display: none; }
  .cv-toolbar { padding: 12px; gap: 12px; }
  .cv-toolbar-group { width: 100%; }
  .cv-toolbar > .btn { width: 100%; justify-content: center; }
  .cv-table thead th, .cv-table tbody td { padding: 10px 12px; }
  .cv-payload-body { max-width: 100%; }
  .cv-llm-summary { padding: 14px 12px; gap: 16px; }
  .cv-llm-charts { padding: 12px; gap: 12px; }
  .cv-chart-row { grid-template-columns: 1fr; }
  .cv-chart { height: 240px; }
  .cv-chart--small { height: 200px; }
}

/* ── Chat context sidebar (right) ───────────────────────────────── */

:root {
  --right-sidebar-w: 320px;
}

.ccs-root {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--right-sidebar-w);
  height: 100dvh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 220ms var(--ease);
  z-index: 35;
  overflow: hidden;
}
.ccs-root.is-open { transform: translateX(0); }

body.with-right-sidebar .main {
  margin-right: var(--right-sidebar-w);
  transition: margin-right 220ms var(--ease);
}

.ccs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ccs-toolbar-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.ccs-toolbar-close {
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
}
.ccs-toolbar-close:hover { background: var(--border-light); color: var(--text); }

.ccs-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 24px;
  font-size: 13px;
  line-height: 1.5;
}

.ccs-empty {
  padding: 28px 8px;
  text-align: center;
}
.ccs-empty-msg {
  color: var(--text-faint);
  font-size: 12.5px;
}

.ccs-block {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}
.ccs-block:last-child { border-bottom: none; padding-bottom: 0; }

/* Harvest entries en el sidebar — lista compacta con total al pie */
.ccs-harvest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ccs-harvest-row {
  padding: 8px 10px;
  border: 1px solid var(--border-light, #F0F1F4);
  border-left: 2px solid #B45309;
  border-radius: 6px;
  background: var(--surface, #fff);
  font-size: 12.5px;
}
.ccs-harvest-row-title {
  font-weight: 600;
  color: var(--text, #1F2937);
  line-height: 1.3;
}
.ccs-harvest-row-task {
  margin-top: 2px;
  color: var(--text-secondary, #3D4858);
  font-size: 11.5px;
}
.ccs-harvest-row-meta {
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--text-secondary, #3D4858);
}
.ccs-harvest-row-hours { font-weight: 600; color: var(--text, #1F2937); }
.ccs-harvest-row-sep { color: var(--text-muted, #9BA0A8); }
.ccs-harvest-total {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light, #F0F1F4);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.ccs-harvest-total-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-muted, #6B7180);
  font-size: 11px;
}
.ccs-harvest-total-value {
  font-weight: 700;
  color: var(--text, #1F2937);
}

.ccs-block-title {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.ccs-header-block { margin-bottom: 18px; }
.ccs-header-subtitle {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.3;
}

.ccs-fields { margin-bottom: 8px; }
.ccs-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 8px;
}
.ccs-field-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.ccs-field-value, .ccs-field-link {
  font-size: 13px;
  color: var(--text);
}
.ccs-field-link { color: var(--accent); text-decoration: none; }
.ccs-field-link:hover { text-decoration: underline; }

.ccs-ver-proyecto-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.ccs-ver-proyecto-link:hover { text-decoration: underline; }

.ccs-subhead {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 10px 0 4px;
}

/* Etapas / pasos */

.ccs-etapa {
  margin-bottom: 4px;
}
.ccs-etapa-head {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 4px;
  list-style: none;
  font-size: 12.5px;
  border-radius: 4px;
}
.ccs-etapa-head::marker { content: ''; }
.ccs-etapa-head::-webkit-details-marker { display: none; }
.ccs-etapa-head:hover { background: var(--border-light); }
.ccs-etapa-head::before {
  content: '▸';
  font-size: 9px;
  color: var(--text-faint);
  width: 10px;
  display: inline-block;
  transition: transform 120ms;
}
.ccs-etapa[open] > .ccs-etapa-head::before { transform: rotate(90deg); }
.ccs-etapa-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-faint);
  min-width: 32px;
}
.ccs-etapa-name {
  color: var(--text);
  font-weight: 500;
}

.ccs-paso-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 4px 0 4px 18px;
}
.ccs-paso {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  font-size: 12px;
  color: var(--text-muted);
  border-radius: 3px;
}
.ccs-paso-icon {
  width: 14px;
  text-align: center;
  font-weight: 700;
  font-size: 11px;
}
.ccs-paso-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  min-width: 28px;
}
.ccs-paso-label { flex: 1; }
.ccs-paso--actual {
  background: var(--accent-bg);
  color: var(--text);
  font-weight: 600;
}
.ccs-paso--actual .ccs-paso-icon { color: var(--accent); }
.ccs-paso--aprobado .ccs-paso-icon { color: var(--success); }
.ccs-paso--draft_pendiente .ccs-paso-icon { color: var(--warning); }
.ccs-paso--bloqueado { opacity: 0.5; }

/* Documentos */

.ccs-doc-list {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
}
.ccs-doc-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-radius: 4px;
}
.ccs-doc-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.ccs-doc-link:hover { color: var(--accent); }
.ccs-doc-icon { color: var(--text-faint); flex-shrink: 0; }
.ccs-doc-name {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.ccs-doc-action {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.ccs-doc-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* Variante destructiva: botón de "Quitar" para docs adjuntos. */
.ccs-doc-action--detach {
  border-color: transparent;
  color: var(--text-faint);
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
  border-radius: 50%;
}
.ccs-doc-action--detach:hover {
  border-color: var(--danger, #dc2626);
  color: var(--danger, #dc2626);
  background: rgba(220, 38, 38, 0.08);
}

/* Artefactos */

.ccs-artifact-list {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
}
.ccs-artifact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
}
.ccs-artifact-tipo {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ccs-artifact-version {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  flex-shrink: 0;
}
.ccs-artifact-date {
  font-size: 10.5px;
  color: var(--text-faint);
  flex-shrink: 0;
}
.ccs-artifact--draft .ccs-artifact-tipo { color: var(--warning); }
.ccs-artifact--clickable { cursor: pointer; transition: background 120ms; }
.ccs-artifact--clickable:hover { background: var(--border-light); }

.ccs-partes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ccs-parte-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg);
  border-radius: 6px;
}
.ccs-parte-tipo {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ccs-parte-nombre {
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}
.ccs-artifact-action {
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.ccs-artifact-action:hover { background: var(--accent-hover); }

/* Citas */

.ccs-citations-wrap {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 4px 6px;
}
.ccs-citations-empty {
  padding: 12px 4px;
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
  font-style: italic;
}
.ccs-citation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ccs-citation {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 4px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-light);
}
.ccs-citation:last-child { border-bottom: none; }
.ccs-citation-label {
  flex: 1;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ccs-citation-label:hover { color: var(--accent); }
.ccs-citation-type {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--border-light);
  color: var(--text-muted);
  flex-shrink: 0;
}
.ccs-citation-type--ley { background: rgba(202, 22, 23, 0.08); color: var(--accent); }
.ccs-citation-type--juris,
.ccs-citation-type--jurisprudencia { background: rgba(217, 119, 6, 0.10); color: var(--warning); }
.ccs-citation-type--constitucion { background: rgba(124, 58, 237, 0.10); color: #7C3AED; }
.ccs-citation-type--doc,
.ccs-citation-type--documento { background: rgba(15, 118, 110, 0.10); color: #0F766E; }

/* Responsive */

@media (max-width: 1279px) {
  /* Default cerrado en pantallas medianas; el usuario puede abrir con toggle */
}
@media (max-width: 900px) {
  .ccs-root {
    width: min(360px, 90vw);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  }
  body.with-right-sidebar .main {
    margin-right: 0;  /* en mobile el sidebar es overlay, no empuja contenido */
  }
}

/* ── Sprint 4: Versiones panel + diff modal + divergence badge ── */

.uc-divergence-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--warning-bg, rgba(220, 150, 30, 0.12));
  color: var(--warning, #c2880f);
  border: 1px solid var(--warning, #c2880f);
  flex-shrink: 0;
  white-space: nowrap;
  cursor: help;
}
.uc-divergence-badge::before {
  content: "•";
  font-size: 14px;
  line-height: 1;
}
.uc-divergence-badge[hidden] { display: none; }

.uc-versions-panel {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.uc-versions-summary {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.uc-versions-summary::-webkit-details-marker { display: none; }
.uc-versions-summary::before {
  content: "▶";
  font-size: 9px;
  transition: transform 0.15s ease;
  color: var(--text-muted);
}
.uc-versions-panel[open] > .uc-versions-summary::before {
  transform: rotate(90deg);
}
.uc-versions-summary:hover {
  background: var(--accent-bg);
}
.uc-versions-summary-title { flex: 0 0 auto; }
.uc-versions-summary-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}

.uc-versions-body {
  padding: 4px 0 4px;
  border-top: 1px solid var(--border);
}
.uc-versions-loading,
.uc-versions-empty,
.uc-versions-error {
  padding: 14px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.uc-versions-error { color: var(--danger); }

.uc-versions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.uc-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.uc-version-row:last-child { border-bottom: none; }
.uc-version-row:hover { background: var(--accent-bg); }

.uc-version-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.uc-version-num {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 60px;
}
.uc-version-meta {
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uc-version-chars {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint, var(--text-muted));
  flex-shrink: 0;
}
.uc-version-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Diff modal ─────────────────────────────── */
.uc-diff-modal {
  max-width: min(1100px, 96vw);
  width: 96vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.uc-diff-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px 8px;
  gap: 12px;
}
.uc-diff-header h2 {
  margin: 0 0 4px;
  font-size: 16px;
}
.uc-diff-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
}
.uc-diff-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.uc-diff-tab:hover { color: var(--text); }
.uc-diff-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.uc-diff-body {
  flex: 1;
  overflow: auto;
  padding: 12px 20px;
}
.uc-diff-loading,
.uc-diff-error {
  padding: 30px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.uc-diff-error { color: var(--danger); }

.uc-diff-summary {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  padding: 6px 10px;
  background: var(--bg);
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
}
.uc-diff-stat {
  font-weight: 600;
}
.uc-diff-stat-add { color: var(--success, #2e7d32); }
.uc-diff-stat-del { color: var(--danger, #c62828); }
.uc-diff-stat-eq { color: var(--text-muted); font-style: italic; }

.uc-diff-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.uc-diff-col {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
}
.uc-diff-col-header {
  padding: 6px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-body, inherit);
  position: sticky;
  top: 0;
  z-index: 1;
}
.uc-diff-line {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  padding: 0 8px;
  white-space: pre-wrap;
  word-break: break-word;
}
.uc-diff-line:hover { background: var(--accent-bg); }
.uc-diff-num {
  color: var(--text-faint, var(--text-muted));
  text-align: right;
  user-select: none;
  border-right: 1px solid var(--border);
  padding-right: 6px;
}
.uc-diff-text { min-width: 0; }
.uc-diff-line.is-del {
  background: rgba(220, 53, 69, 0.10);
}
.uc-diff-line.is-del .uc-diff-text { color: var(--danger, #c62828); }
.uc-diff-line.is-add {
  background: rgba(40, 167, 69, 0.10);
}
.uc-diff-line.is-add .uc-diff-text { color: var(--success, #2e7d32); }
.uc-diff-line.is-empty {
  background: var(--border-subtle, rgba(0, 0, 0, 0.02));
  opacity: 0.4;
}

/* ── Frontmatter diff table ─────────────────── */
.uc-fm-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.uc-fm-diff-table th,
.uc-fm-diff-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}
.uc-fm-diff-table thead th {
  background: var(--surface);
  font-weight: 600;
  font-size: 11px;
  color: var(--text-muted);
  position: sticky;
  top: 0;
  z-index: 1;
}
.uc-fm-diff-table tbody th {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  width: 180px;
}
.uc-fm-diff-table tbody td {
  font-family: var(--font-mono);
  font-size: 11px;
  word-break: break-word;
}
.uc-fm-diff-row.is-diff .uc-fm-diff-snap {
  background: rgba(220, 53, 69, 0.08);
  color: var(--danger, #c62828);
}
.uc-fm-diff-row.is-diff .uc-fm-diff-cur {
  background: rgba(40, 167, 69, 0.08);
  color: var(--success, #2e7d32);
}
.uc-fm-diff-row.is-eq {
  color: var(--text-muted);
}
.uc-fm-diff-missing {
  color: var(--text-faint, var(--text-muted));
  font-style: italic;
}

@media (max-width: 760px) {
  .uc-diff-cols {
    grid-template-columns: 1fr;
  }
}

/* ── Sprint 5: model_chain shuttle picker ─────────────────────── */

.uc-chain-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
  min-height: 260px;
}
.uc-chain-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.uc-chain-pane--available {
  border-right: 1px solid var(--border);
}
.uc-chain-pane-header {
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.uc-chain-empty-hint {
  font-size: 10px;
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint, var(--text-muted));
}
.uc-chain-empty-hint[hidden] { display: none; }
.uc-chain-pane-body {
  flex: 1;
  overflow: auto;
  padding: 6px 0;
  max-height: 360px;
}

/* Available side: grupos por proveedor / tier preset */
.uc-chain-group {
  margin-bottom: 6px;
}
.uc-chain-group-header {
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.uc-chain-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.uc-chain-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 12px;
  transition: background 0.1s;
}
.uc-chain-item:hover { background: var(--accent-bg); }
.uc-chain-item.is-in-chain {
  opacity: 0.4;
  background: var(--bg);
}
.uc-chain-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uc-chain-item--tier .uc-chain-item-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
}
.uc-chain-item-tier {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
}
.uc-chain-item-tier--high { color: var(--accent); border-color: var(--accent); }
.uc-chain-item-tier--mid { color: var(--warning); border-color: var(--warning); }
.uc-chain-item-tier--low { color: var(--text-muted); }
.uc-chain-add {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.1s;
}
.uc-chain-add:hover:not(:disabled) {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.uc-chain-add:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Selected side: lista ordenada con controles */
.uc-chain-selected-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.uc-chain-selected-empty {
  padding: 30px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint, var(--text-muted));
  font-style: italic;
}
.uc-chain-selected-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.uc-chain-selected-item:last-child { border-bottom: none; }
.uc-chain-selected-item:hover { background: var(--accent-bg); }
.uc-chain-selected-item--tier .uc-chain-selected-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
}
.uc-chain-pos {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint, var(--text-muted));
  background: var(--bg);
  border-radius: 999px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.uc-chain-selected-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uc-chain-selected-actions {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.uc-chain-selected-actions button {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  transition: all 0.1s;
}
.uc-chain-selected-actions button:hover:not(:disabled) {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}
.uc-chain-selected-actions button[data-act="remove"]:hover {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}
.uc-chain-selected-actions button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .uc-chain-picker {
    grid-template-columns: 1fr;
  }
  .uc-chain-pane--available {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ── Sprint 6: version mask + auto-bump preview ────────────────── */
.uc-version-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.uc-version-row .config-input {
  flex: 0 0 auto;
  width: 90px;
  font-family: var(--font-mono);
  text-align: center;
}
.uc-version-row .config-input:invalid {
  border-color: var(--danger);
}
.uc-version-preview {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  flex: 1;
  min-width: 0;
}
.uc-version-preview[hidden] { display: none; }
.uc-version-preview.is-bump { color: var(--accent); font-style: normal; }
.uc-version-preview.is-manual { color: var(--success); font-style: normal; }

/* ── Sprint notif: sidebar bell badge + bandeja ─────────────── */

.sidebar-nav-link {
  /* Necesario para que el badge se posicione adyacente sin romper el
     layout actual del link. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.sidebar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: var(--accent);
  border-radius: 999px;
  line-height: 1;
}
.sidebar-badge[hidden] { display: none; }

/* Bandeja de notificaciones (vista de detalle) */
.notif-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.notif-toolbar-filters {
  display: inline-flex;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.notif-toolbar-radio {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.notif-toolbar-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.notif-toolbar-radio span {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 999px;
  color: var(--text-muted);
  transition: all 0.15s;
}
.notif-toolbar-radio input:checked + span {
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.notif-toolbar-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.notif-list {
  padding: 0;
}
.notif-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.notif-empty-error { color: var(--danger); }

.notif-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.notif-row:hover { background: var(--accent-bg); }
.notif-row.is-unread {
  background: var(--accent-bg);
}
.notif-row.is-unread:hover {
  background: rgba(224, 64, 68, 0.12);
}
.notif-row.is-unread .notif-title { font-weight: 600; }

.notif-check {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.notif-body {
  cursor: pointer;
  min-width: 0;
}
.notif-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}
.notif-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.notif-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-title strong { font-weight: 600; }
.notif-title code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
}
.notif-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.notif-subtitle {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 22px;
}
.notif-actor {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-faint, var(--text-muted));
  margin-left: 22px;
}

/* ── Normas adquiridas (Config tab) ───────────────────────── */
.normas-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}
.normas-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.normas-stat strong {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
}
.normas-stat[data-stat="acquired"] strong { color: var(--success); }
.normas-stat[data-stat="not_found"] strong { color: var(--warning); }
.normas-stat[data-stat="error"] strong { color: var(--danger); }

.normas-toolbar {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.normas-filter {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
}
.normas-filter select,
.normas-filter input {
  min-width: 140px;
}

.normas-list-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  max-height: 60vh;
  background: var(--surface);
}
.normas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.normas-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 1;
}
.normas-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.normas-table tbody tr:hover {
  background: var(--accent-bg);
}
.normas-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 30px;
  font-style: italic;
}
.normas-empty.normas-error { color: var(--danger); font-style: normal; }
.normas-detail {
  max-width: 380px;
  word-break: break-word;
}
.normas-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.normas-status--acquired { background: rgba(5, 150, 105, 0.10); color: var(--success); }
.normas-status--not_found { background: rgba(217, 119, 6, 0.10); color: var(--warning); }
.normas-status--error { background: rgba(225, 29, 72, 0.10); color: var(--danger); }
.normas-status--limit_reached,
.normas-status--remote_unavailable,
.normas-status--unsupported_type {
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.normas-acquire-form {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
}
.normas-acquire-form .normas-filter input {
  min-width: 180px;
}
.normas-acquire-feedback {
  font-size: 12px;
  flex: 1;
  min-width: 240px;
}
.normas-acquire-feedback.is-pending { color: var(--text-muted); font-style: italic; }
.normas-acquire-feedback.is-ok { color: var(--success); }
.normas-acquire-feedback.is-warn { color: var(--warning); }
.normas-acquire-feedback.is-err { color: var(--danger); }

.normas-actions { text-align: right; white-space: nowrap; }
.normas-retry { font-size: 11px; padding: 3px 9px; }
.normas-hint { font-size: 10px; font-weight: 400; color: var(--text-faint, var(--text-muted)); font-style: italic; }
.normas-hint-tip { font-size: 11px; color: var(--text-muted); margin: -8px 0 14px; }
.normas-hint-tip code { font-family: var(--font-mono); background: var(--bg); padding: 1px 5px; border-radius: 3px; }

/* Aviso de jurisprudencia pendiente — pie de mensaje del agente */
.notice-juris-pending {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: 6px;
  font-style: italic;
}
.notice-juris-pending svg {
  flex-shrink: 0;
  color: var(--warning);
}

/* ── Sidebar de contexto: panel "Jurisprudencia consultada" ── */
.ccs-juris-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ccs-juris-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  min-width: 0;
  transition: border-color 0.15s, background 0.15s;
}
.ccs-juris-row.is-open {
  border-color: var(--accent);
}
.ccs-juris-row.is-focused {
  animation: ccs-juris-flash 1.5s ease-out;
}
@keyframes ccs-juris-flash {
  0%, 30% { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: none; }
}
.ccs-juris-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  min-width: 0;
}
.ccs-juris-head:hover { background: var(--accent-bg); }
.ccs-juris-row.is-open .ccs-juris-head {
  background: var(--accent-bg);
  border-bottom: 1px solid var(--border);
}
.ccs-juris-indicator {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 11px;
  width: 12px;
  flex-shrink: 0;
  padding-top: 1px;
}
.ccs-juris-titles { flex: 1; min-width: 0; }
.ccs-juris-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ccs-juris-subtitle {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ccs-juris-typetag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg);
  color: var(--text-muted);
  flex-shrink: 0;
}
.ccs-juris-typetag--judicial { color: var(--accent); }
.ccs-juris-typetag--administrativa { color: var(--warning); }
.ccs-juris-typetag--constitucional { color: #7C3AED; }

.ccs-juris-body { display: none; }
.ccs-juris-row.is-open .ccs-juris-body {
  display: block;
  padding: 8px 10px 10px;
}
.ccs-juris-loading,
.ccs-juris-error,
.ccs-juris-empty {
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
}
.ccs-juris-error { color: var(--danger); }
.ccs-juris-meta {
  font-size: 11px;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 2px 8px;
  margin-bottom: 8px;
}
.ccs-juris-meta-row { display: contents; }
.ccs-juris-meta-key {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.ccs-juris-meta-val {
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.ccs-juris-text {
  font-size: 11px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 200px;
  overflow: auto;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 8px;
}
.ccs-juris-ley-link {
  display: inline-block;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  margin-top: 2px;
}
.ccs-juris-ley-link:hover { text-decoration: underline; }

/* ── Chat: Rol clickable que apunta a la sidebar ── */
.juris-rol-link {
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--accent);
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.juris-rol-link:hover {
  background: var(--accent-bg);
  border-bottom-style: solid;
}


/* ──────────────────────────────────────────────────────
   Demo Mode — banner sticky + sidebar item activo.
   Aparece sólo cuando el endpoint /api/demo-mode reporta
   enabled=true. JS en app.js controla el toggle.
   ────────────────────────────────────────────────────── */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(0deg, #B91C1C 0%, #DC2626 100%);
  color: #fff;
  padding: 10px 20px;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 2px 8px rgba(220,38,38,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
.demo-banner-content {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
}
.demo-banner svg { flex-shrink: 0; }
.demo-banner strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12.5px;
}
.demo-banner-sub {
  flex: 1;
  font-weight: 400;
  opacity: 0.92;
  font-size: 12px;
}
.demo-banner-exit {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.demo-banner-exit:hover {
  background: rgba(255,255,255,0.3);
}

/* Sidebar item — pulse cuando demo está activo */
#navDemoMode.is-active {
  color: #ef4444;
}
#navDemoMode.is-active svg { stroke: #ef4444; }