/* ── RESET & BASE ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  transition: background var(--duration-normal) var(--easing-default), color var(--duration-normal) var(--easing-default);
  -webkit-font-smoothing: antialiased;
}
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }
a { color: var(--color-text-link); text-decoration: none; }
a:hover { color: var(--color-text-link-hover); }

/* ── APP SHELL ─────────────────────────────────────────────────────────────── */
.app-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app-body { display: flex; flex: 1; overflow: hidden; }

/* ── TOPBAR ────────────────────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-height);
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-primary);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  gap: var(--space-4);
  position: sticky; top: 0; z-index: 100;
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
.topbar-center { display: flex; align-items: center; justify-content: center; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: var(--space-2); flex: 1; justify-content: flex-end; }

.sidebar-toggle, .search-btn, .theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--border-radius-sm);
  color: var(--color-text-secondary);
  transition: background var(--duration-fast) var(--easing-default), color var(--duration-fast) var(--easing-default);
}
.sidebar-toggle:hover, .search-btn:hover, .theme-toggle:hover {
  background: var(--color-bg-tertiary); color: var(--color-text-primary);
}

.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-family: var(--font-family-display); font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold); color: var(--color-text-primary);
  line-height: 1.2; letter-spacing: var(--letter-spacing-tight);
}
.brand-sub { font-size: var(--font-size-xs); color: var(--color-text-tertiary); line-height: 1.2; }

.profile-selector-wrap { display: flex; align-items: center; gap: var(--space-2); }
.profile-label { font-size: var(--font-size-sm); color: var(--color-text-tertiary); white-space: nowrap; }
.profile-select-container { position: relative; display: flex; align-items: center; }
.profile-select {
  appearance: none;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-sm);
  padding: var(--space-2) var(--space-7) var(--space-2) var(--space-3);
  font-size: var(--font-size-sm); font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium); color: var(--color-text-primary);
  cursor: pointer; min-width: 200px;
}
.profile-select:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); }
.select-arrow { position: absolute; right: var(--space-3); pointer-events: none; color: var(--color-text-tertiary); }

.icon { width: 18px; height: 18px; display: block; }
.icon-sm { width: 14px; height: 14px; display: block; }
.icon-xs { width: 12px; height: 12px; display: block; }

/* ── SEARCH OVERLAY ────────────────────────────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0; background: var(--color-bg-overlay);
  z-index: 200; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10vh; opacity: 0; pointer-events: none;
  transition: opacity var(--duration-normal) var(--easing-default);
}
.search-overlay.open { opacity: 1; pointer-events: all; }
.search-modal {
  background: var(--color-bg-primary); border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-lg); box-shadow: var(--shadow-xl);
  width: min(620px, 90vw); overflow: hidden;
}
.search-input-wrap {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-secondary);
}
.search-icon-inner { color: var(--color-text-tertiary); flex-shrink: 0; }
.search-input {
  flex: 1; font-size: var(--font-size-md); font-family: var(--font-family-body);
  color: var(--color-text-primary); background: transparent; border: none; outline: none;
}
.search-input::placeholder { color: var(--color-text-tertiary); }
.search-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--border-radius-sm); color: var(--color-text-tertiary);
}
.search-close:hover { background: var(--color-bg-tertiary); }
.search-results { max-height: 440px; overflow-y: auto; }
.search-result-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default);
  border-bottom: 1px solid var(--color-border-secondary);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--color-bg-secondary); }
.search-result-icon {
  width: 32px; height: 32px; border-radius: var(--border-radius-sm);
  background: var(--color-bg-accent-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent-primary); flex-shrink: 0;
}
.search-result-icon.section { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.search-result-text { flex: 1; min-width: 0; }
.search-result-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.search-result-sub { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.search-result-type {
  font-size: 10px; font-weight: var(--font-weight-semibold); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary); border-radius: var(--border-radius-xs);
  padding: 2px 6px; flex-shrink: 0;
}
.search-empty { padding: var(--space-8) var(--space-5); text-align: center; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }

/* ── SIDEBAR ───────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width); background: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-sidebar-border);
  overflow-y: auto; flex-shrink: 0;
  transition: width var(--duration-normal) var(--easing-default), transform var(--duration-normal) var(--easing-default);
}
.sidebar.collapsed { width: var(--sidebar-width-collapsed); }
.sidebar-inner { padding: var(--space-4) var(--space-2); }
.sidebar-section-label {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  color: var(--color-sidebar-text-muted); padding: var(--space-2) var(--space-3);
}
.nav-list { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3); border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  color: var(--color-sidebar-text); text-align: left; min-height: 36px;
  transition: background var(--duration-fast) var(--easing-default), color var(--duration-fast) var(--easing-default);
}
.nav-item:hover { background: var(--color-sidebar-item-hover); color: var(--color-text-primary); }
.nav-item.active { background: var(--color-sidebar-item-active-bg); color: var(--color-sidebar-item-active-text); }
.nav-icon { display: flex; align-items: center; flex-shrink: 0; }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.sidebar.collapsed .nav-label, .sidebar.collapsed .sidebar-section-label { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: var(--space-2); }

/* Section sub-list */
.section-list {
  margin: 2px 0 4px var(--space-6);
  display: flex; flex-direction: column; gap: 1px;
}
.section-item {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: 5px var(--space-3); border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  color: var(--color-sidebar-text-muted); text-align: left;
  transition: background var(--duration-fast) var(--easing-default), color var(--duration-fast) var(--easing-default);
}
.section-item:hover { background: var(--color-sidebar-item-hover); color: var(--color-text-primary); }
.section-item.active {
  background: var(--color-bg-accent-subtle); color: var(--color-accent-primary);
  font-weight: var(--font-weight-semibold);
}
.section-icon { display: flex; align-items: center; flex-shrink: 0; }
.section-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .section-list { display: none; }

/* ── MAIN CONTENT ──────────────────────────────────────────────────────────── */
.main-content { flex: 1; overflow-y: auto; padding: var(--space-8) var(--space-9); max-width: 100%; }

/* ── HOME VIEW ─────────────────────────────────────────────────────────────── */
.home-header {
  margin-bottom: var(--space-8); padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-secondary);
}
.home-eyebrow {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  color: var(--color-accent-primary); margin-bottom: var(--space-2);
}
.home-title {
  font-family: var(--font-family-display); font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary); line-height: var(--line-height-tight);
  margin-bottom: var(--space-3);
}
.home-desc { font-size: var(--font-size-md); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); max-width: 60ch; }
.profile-welcome {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-bg-accent-subtle); border: 1px solid var(--color-border-accent);
  border-radius: var(--border-radius-full); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary); margin-bottom: var(--space-4);
}
.profile-welcome-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-primary); }
.section-title {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  color: var(--color-text-tertiary); margin-bottom: var(--space-4);
}
.topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.topic-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--card-radius); box-shadow: var(--card-shadow);
  padding: var(--card-padding); cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--easing-default), border-color var(--duration-fast) var(--easing-default), transform var(--duration-fast) var(--easing-default);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.topic-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-focus); transform: translateY(-1px); }
.topic-card-icon {
  width: 40px; height: 40px; border-radius: var(--border-radius-md);
  background: var(--color-bg-accent-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent-primary); flex-shrink: 0;
}
.topic-card-name { font-family: var(--font-family-display); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.topic-card-desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); flex: 1; }
.topic-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-secondary);
}
.topic-card-badges { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.topic-section-count {
  font-size: var(--font-size-xs); color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary); padding: 2px 8px;
  border-radius: var(--border-radius-full);
}

/* ── TOPIC VIEW ────────────────────────────────────────────────────────────── */
.topic-header {
  display: flex; align-items: flex-start; gap: var(--space-5);
  margin-bottom: var(--space-6); padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-secondary);
}
.topic-header-icon {
  width: 56px; height: 56px; border-radius: var(--border-radius-lg);
  background: var(--color-bg-accent-subtle); border: 1px solid var(--color-border-accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent-primary); flex-shrink: 0;
}
.topic-header-icon svg, .topic-header-icon i { width: 26px; height: 26px; }
.topic-header-meta { flex: 1; min-width: 0; }
.topic-eyebrow {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  color: var(--color-text-tertiary); margin-bottom: var(--space-1);
}
.topic-title {
  font-family: var(--font-family-display); font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-extrabold); letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary); line-height: var(--line-height-snug); margin-bottom: var(--space-2);
}
.topic-desc { font-size: var(--font-size-base); color: var(--color-text-secondary); max-width: 65ch; margin-bottom: var(--space-3); }
.topic-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ── SECTION TABS ──────────────────────────────────────────────────────────── */
.section-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: var(--space-5);
  padding: 4px; background: var(--color-bg-secondary);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-secondary);
}
.section-tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary); cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default), color var(--duration-fast) var(--easing-default), box-shadow var(--duration-fast) var(--easing-default);
  white-space: nowrap;
}
.section-tab:hover { background: var(--color-bg-primary); color: var(--color-text-primary); }
.section-tab.active {
  background: var(--color-bg-primary); color: var(--color-accent-primary);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-sm);
}

/* ── SECTION CONTENT ───────────────────────────────────────────────────────── */
.section-content {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}
.section-content p { margin-bottom: var(--space-4); max-width: 72ch; }
.section-content h4 {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
  margin: var(--space-7) 0 var(--space-4);
  color: var(--color-text-primary); letter-spacing: var(--letter-spacing-tight);
}
.section-content h4:first-child { margin-top: 0; }

/* ── SUBSECTION ────────────────────────────────────────────────────────────── */
.subsection { margin-bottom: var(--space-6); }
.subsection-label {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  color: var(--color-text-tertiary); margin-bottom: var(--space-3);
}
.subsection-desc {
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
  margin-bottom: var(--space-3); max-width: 72ch; line-height: var(--line-height-relaxed);
}
.subsection h4 { margin-top: 0; margin-bottom: var(--space-3); }

/* ── INFO CARDS ────────────────────────────────────────────────────────────── */
.info-card {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--space-5); font-size: var(--font-size-sm);
  color: var(--color-text-secondary); line-height: var(--line-height-relaxed);
  max-width: 72ch;
}
.info-card.highlight {
  background: var(--color-bg-accent-subtle); border-color: rgba(27,63,160,0.2);
}
.info-card-icon { color: var(--color-accent-primary); flex-shrink: 0; margin-top: 1px; }
.info-card strong { color: var(--color-text-primary); }

.cards-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.cards-grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }

.info-card-mini {
  padding: var(--space-4); background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
}
.info-card-mini-title {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary); margin-bottom: var(--space-2);
}
.info-card-mini-body {
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ── INFO TAGS ─────────────────────────────────────────────────────────────── */
.info-tag {
  display: inline-flex; align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs); margin-bottom: var(--space-3);
  background: var(--color-bg-tertiary); color: var(--color-text-secondary);
  border: 1px solid var(--color-border-secondary);
}
.info-tag.promo { background: var(--color-status-success-bg); color: #166534; border-color: rgba(22,101,52,0.2); }
.info-tag.warning { background: var(--color-status-warning-bg); color: #92400e; border-color: rgba(146,64,14,0.2); }
.info-tag.token { background: rgba(27,63,160,0.08); color: var(--color-accent-primary); border-color: rgba(27,63,160,0.2); }

/* ── MATRIX TABLE ──────────────────────────────────────────────────────────── */
.matrix-table-wrap { overflow-x: auto; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-primary); margin-bottom: var(--space-4); }
.matrix-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.matrix-table thead tr { background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-primary); }
.matrix-table th {
  padding: var(--space-3) var(--space-4); text-align: left;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide); text-transform: uppercase;
  color: var(--color-text-tertiary); white-space: nowrap;
}
.matrix-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-secondary); color: var(--color-text-primary); vertical-align: top; }
.matrix-table tbody tr { transition: background var(--duration-fast) var(--easing-default); }
.matrix-table tbody tr:hover { background: var(--color-bg-accent-subtle); }
.matrix-table tbody tr:last-child td { border-bottom: none; }

/* ── FLOW DIAGRAM ──────────────────────────────────────────────────────────── */
.flow-diagram {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-6); max-width: 480px;
}
.flow-node {
  width: 100%; padding: var(--space-3) var(--space-5);
  background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md); text-align: center;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.flow-node.accent { background: var(--color-bg-accent-subtle); border-color: rgba(27,63,160,0.3); color: var(--color-accent-primary); }
.flow-sub { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-text-tertiary); margin-top: 2px; }
.flow-arrow { color: var(--color-text-tertiary); }

/* ── DIVISION CARDS ────────────────────────────────────────────────────────── */
.division-cards { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.division-card {
  border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-md);
  overflow: hidden;
}
.division-card-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-secondary);
  font-size: var(--font-size-sm);
}
.division-badge {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono); letter-spacing: 0.05em;
  background: var(--color-bg-tertiary); color: var(--color-text-tertiary);
  padding: 2px 7px; border-radius: var(--border-radius-xs); flex-shrink: 0;
}
.division-badge.accent { background: var(--color-bg-accent-subtle); color: var(--color-accent-primary); }
.division-headcount {
  margin-left: auto; font-size: var(--font-size-xs); color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary); padding: 2px 8px; border-radius: var(--border-radius-full);
}
.division-card-body {
  padding: var(--space-4);
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}
.division-card-body p { margin-bottom: var(--space-3); }
.tramites-row { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tramite-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  background: var(--color-bg-tertiary); color: var(--color-text-secondary);
  border: 1px solid var(--color-border-secondary);
}

/* ── PROCESS CARDS ─────────────────────────────────────────────────────────── */
.process-cards { display: flex; flex-direction: column; gap: var(--space-4); }
.process-card {
  border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-md);
  padding: var(--space-5); background: var(--color-bg-primary);
}
.process-card-header {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3); flex-wrap: wrap;
}
.process-code {
  font-family: var(--font-family-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  background: var(--color-bg-accent-subtle); color: var(--color-accent-primary);
  padding: 2px 8px; border-radius: var(--border-radius-xs); flex-shrink: 0;
}
.process-card-header strong { font-size: var(--font-size-base); color: var(--color-text-primary); flex: 1; }
.sla-badge {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  background: var(--color-status-info-bg); color: var(--color-status-info);
  padding: 3px 10px; border-radius: var(--border-radius-full);
}
.process-card > p { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.process-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  margin-top: var(--space-3);
}
.process-detail-col {}
.process-detail-title {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-tertiary); margin-bottom: var(--space-2);
}

/* ── CHECKLISTS & LISTS ────────────────────────────────────────────────────── */
.checklist { display: flex; flex-direction: column; gap: var(--space-1); padding-left: 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--font-size-sm); color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}
.checklist li::before {
  content: '☐'; color: var(--color-accent-primary); flex-shrink: 0;
  font-size: var(--font-size-sm); line-height: 1.5;
}
.reject-list { display: flex; flex-direction: column; gap: var(--space-1); padding-left: 0; }
.reject-list li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--font-size-sm); color: var(--color-text-primary); line-height: var(--line-height-normal);
}
.reject-list li::before { content: '✗'; color: var(--color-status-error); flex-shrink: 0; line-height: 1.5; }
.steps-list { padding-left: 0; counter-reset: steps; display: flex; flex-direction: column; gap: var(--space-1); }
.steps-list li {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--font-size-sm); color: var(--color-text-primary);
  line-height: var(--line-height-normal); counter-increment: steps;
}
.steps-list li::before {
  content: counter(steps); min-width: 20px; height: 20px;
  border-radius: 50%; background: var(--color-bg-accent-subtle);
  color: var(--color-accent-primary); font-size: 11px; font-weight: var(--font-weight-bold);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}

/* ── VALIDATION CARDS ──────────────────────────────────────────────────────── */
.validation-card {
  padding: var(--space-4); background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md);
}
.validation-card-title {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary); margin-bottom: var(--space-3);
}

/* ── PERFIL CARDS ──────────────────────────────────────────────────────────── */
.perfil-cards { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.perfil-card {
  border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-md);
  padding: var(--space-5); background: var(--color-bg-primary);
}
.perfil-card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.perfil-icon {
  width: 36px; height: 36px; border-radius: var(--border-radius-sm);
  background: var(--color-bg-accent-subtle); display: flex; align-items: center; justify-content: center;
  color: var(--color-accent-primary); flex-shrink: 0;
}
.perfil-title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.perfil-reporta { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.perfil-mision { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); line-height: var(--line-height-relaxed); }
.perfil-lista { display: flex; flex-direction: column; gap: 4px; padding-left: 0; }
.perfil-lista li { font-size: var(--font-size-sm); color: var(--color-text-primary); padding-left: var(--space-4); position: relative; line-height: var(--line-height-normal); }
.perfil-lista li::before { content: '·'; position: absolute; left: var(--space-2); color: var(--color-accent-primary); font-weight: bold; }

.note-sm { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-top: var(--space-2); }

/* ── BADGES ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--space-2); border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  border: 1px solid transparent;
}
.badge-pm           { background: var(--badge-pm-bg); color: var(--badge-pm-text); border-color: var(--badge-pm-border); }
.badge-vendedor     { background: rgba(245,130,31,0.1); color: #c45a0a; border-color: rgba(245,130,31,0.2); }
.badge-mesa_control { background: rgba(20,184,166,0.1); color: #0f766e; border-color: rgba(20,184,166,0.2); }

/* ── RELATED TOPICS ────────────────────────────────────────────────────────── */
.related-topics { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border-secondary); }
.related-label {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  color: var(--color-text-tertiary); margin-bottom: var(--space-3);
}
.chips-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--chip-bg); border: 1px solid var(--chip-border);
  border-radius: var(--border-radius-full); font-size: var(--font-size-sm);
  color: var(--chip-text); cursor: pointer;
  transition: background var(--duration-fast) var(--easing-default), color var(--duration-fast) var(--easing-default), border-color var(--duration-fast) var(--easing-default);
}
.chip:hover { background: var(--chip-bg-hover); color: var(--chip-text-hover); border-color: var(--color-border-accent); }

/* ── PROCESO — FICHAS OPERATIVAS ───────────────────────────────────────────── */
.proceso-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4);
  padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-border-primary);
  flex-wrap: wrap;
}
.proceso-meta { display: flex; align-items: center; gap: var(--space-3); }
.proceso-code-lg {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: var(--border-radius-sm);
  background: var(--color-accent-primary); color: #fff; flex-shrink: 0;
  font-family: var(--font-family-mono, monospace);
}
.proceso-code-lg.soporte {
  background: var(--color-bg-tertiary); color: var(--color-text-secondary);
}
.proceso-titulo { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); line-height: 1.2; }
.proceso-subtitulo { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-top: 2px; }
.proceso-badges { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.sla-badge-lg {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--space-1) var(--space-3); border-radius: var(--border-radius-full);
  background: rgba(99,102,241,0.1); color: var(--color-accent-primary);
  border: 1px solid rgba(99,102,241,0.25); font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.sla-badge-lg.sla-largo {
  background: rgba(234,179,8,0.1); color: #a16207;
  border-color: rgba(234,179,8,0.3);
}
.token-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: var(--space-1) var(--space-3); border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
}
.token-badge.con-token {
  background: rgba(245,158,11,0.1); color: #b45309;
  border: 1px solid rgba(245,158,11,0.3);
}
.token-badge.no-token {
  background: var(--color-bg-tertiary); color: var(--color-text-tertiary);
  border: 1px solid var(--color-border-secondary);
}
.token-badge.nip-badge {
  background: rgba(20,184,166,0.1); color: #0f766e;
  border: 1px solid rgba(20,184,166,0.3);
}
.proceso-proposito {
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  background: var(--color-bg-secondary); padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius-md); border-left: 3px solid var(--color-accent-primary);
  margin-bottom: var(--space-5);
}
.proceso-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.proceso-col { display: flex; flex-direction: column; gap: var(--space-4); }
.proceso-bloque {
  padding: var(--space-4); background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-secondary); border-radius: var(--border-radius-md);
}
.proceso-bloque-titulo {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  color: var(--color-text-tertiary); margin-bottom: var(--space-3);
}
.excepcion-list { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 0; }
.excepcion-list li {
  font-size: var(--font-size-sm); color: var(--color-text-secondary);
  padding-left: var(--space-5); position: relative; line-height: var(--line-height-relaxed);
}
.excepcion-list li::before { content: '⚠'; position: absolute; left: 0; font-size: 11px; top: 2px; }
.proceso-resultado {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--border-radius-md);
  background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.2);
  margin-top: var(--space-4); color: var(--color-text-primary);
  font-size: var(--font-size-sm); line-height: var(--line-height-relaxed);
}
.proceso-resultado svg { color: #16a34a; flex-shrink: 0; margin-top: 2px; }
.sla-escalamiento {
  margin-top: var(--space-4); padding: var(--space-4);
  background: var(--color-bg-tertiary); border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-secondary);
}
.sla-escalamiento-titulo {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
  color: var(--color-text-tertiary); margin-bottom: var(--space-2);
}
.sla-escalamiento p { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }

/* ── PROMO BADGE (inline en tablas) ─────────────────────────────────────────── */
.promo-badge {
  display: inline-block; padding: 1px 5px; border-radius: 4px;
  background: rgba(234,179,8,0.15); color: #b45309;
  font-size: 11px; font-weight: var(--font-weight-semibold); margin-left: 3px;
}
.row-highlight { background: rgba(234,179,8,0.04); }
.row-highlight td:nth-child(4) { font-weight: var(--font-weight-medium); }

/* ── ICON SIZES ─────────────────────────────────────────────────────────────── */
.icon-xs { width: 12px; height: 12px; }

/* ── EMPTY STATE ───────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-12) var(--space-6); text-align: center;
  color: var(--color-text-tertiary); gap: var(--space-3);
}
.empty-state-icon { opacity: 0.4; }

/* ── RESPONSIVE ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { position: fixed; left: 0; top: var(--topbar-height); bottom: 0; z-index: 50; transform: translateX(-100%); width: 280px !important; box-shadow: var(--shadow-xl); }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-content { padding: var(--space-5) var(--space-4); }
  .home-title { font-size: var(--font-size-2xl); }
  .topics-grid { grid-template-columns: 1fr; }
  .topbar-center { display: none; }
  .section-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .process-detail { grid-template-columns: 1fr; }
  .proceso-grid { grid-template-columns: 1fr; }
  .cards-grid-2, .cards-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .topbar { padding: 0 var(--space-3); }
  .brand-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ════════════════════════════════════════════════════
   BRAIN SHELL — convivencia (v1.1.0)
   El Shell envuelve el contenido en #bs-content (topbar 56px + sidebar).
   La marca, el nav de temas y el toggle de tema los aporta el Shell;
   la topbar local queda como toolbar de contenido (Vista + búsqueda) —
   sus controles NO van al slot del Shell porque el slot copia innerHTML
   y los listeners de app.js se perderían.
   ════════════════════════════════════════════════════ */
.app-shell { height: auto; min-height: calc(100vh - 56px); }
.topbar .brand { display: none; }
.topbar .sidebar-toggle { display: none; }
.topbar .theme-toggle { display: none; }
.sidebar { display: none !important; }