/* SOCIAREM · Estilos de la web PoC */
:root {
  --bg:          #F4F5F7;
  --card:        #FFFFFF;
  --card2:       #F0F1F3;
  --text:        #111827;
  --muted:       #6B7280;
  --border:      #E5E7EB;
  --primary:     #2563EB;
  --primary-soft:#DBEAFE;
  --primary-fg:  #1D4ED8;
  --sec-soft:    #EDE9FE;
  --sec-fg:      #6D28D9;
  --warning:     #D97706;
  --warn-soft:   #FEF3C7;
  --danger:      #DC2626;
  --danger-soft: #FEE2E2;
  --success:     #16A34A;
  --success-soft:#DCFCE7;
  --neutral:     #374151;
  --accent2:     #7C3AED;
  --tip-bg:      #1F2937;
  --tip-fg:      #F9FAFB;
}

/* ─── Constructor de perfiles ─────────────────────────────────────────────── */
.status-pill.preliminary { background:#FFF7ED; color:#9A3412; }
.profile-source { color:var(--muted); font-size:.82rem; margin-bottom:12px; }
.profile-method-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:10px; }
.profile-indicator-group { padding:12px; border:1px solid var(--border); border-radius:10px; background:#F8FAFC; }
.profile-indicator-group b { display:block; font-size:.76rem; margin-bottom:8px; }
.profile-chip { display:inline-flex; padding:3px 7px; margin:2px; border-radius:999px; font-size:.72rem; font-weight:700; }
.profile-chip.primary { background:#DBEAFE; color:#1D4ED8; }
.profile-chip.secondary { background:#E2E8F0; color:#475569; }
.profile-chip.pending { background:#FEF3C7; color:#92400E; }
.profile-rule-palette,.profile-variable-add { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.profile-rule-palette .form-control,.profile-variable-add .form-control { width:min(360px,100%); }
.profile-rule-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr); gap:14px; align-items:start; }
.profile-rule-node { margin:6px 0; border:1px solid var(--border); border-radius:9px; background:white; overflow:hidden; }
.profile-rule-node.selected { box-shadow:0 0 0 2px var(--accent2); }
.profile-rule-node-head { display:flex; align-items:center; gap:8px; min-height:42px; padding:7px 9px; cursor:pointer; }
.profile-rule-node-head button { margin-left:auto; border:0; background:transparent; color:#64748B; font-size:1.1rem; }
.profile-rule-node.family-logic > .profile-rule-node-head { background:#F3E8FF; }
.profile-rule-node.family-input > .profile-rule-node-head { background:#EFF6FF; }
.profile-value-mode { margin-left:auto; font-size:.64rem; font-weight:800; letter-spacing:.04em; color:#1D4ED8; }
.profile-rule-readable { padding:14px; border-radius:10px; background:#F8FAFC; border:1px solid var(--border); font-size:.82rem; }
.profile-rule-readable p { line-height:1.5; }
.profile-rule-readable code { display:block; white-space:normal; overflow-wrap:anywhere; margin-top:8px; }
.profile-variable-table { display:grid; gap:7px; margin-bottom:12px; }
.profile-variable-row { display:grid; grid-template-columns:44px minmax(160px,1fr) 90px 64px; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:9px; }
.profile-variable-row.zero { background:#F8FAFC; opacity:.8; }
.profile-variable-name { font-weight:600; font-size:.82rem; }
.profile-variable-role,.profile-variable-weight { color:var(--muted); font-size:.75rem; }
.profile-preview-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.profile-preview-household { display:grid; grid-template-columns:1fr auto; gap:3px 8px; padding:10px; border:1px solid var(--border); border-radius:9px; background:#F8FAFC; }
.profile-preview-household b { grid-column:1 / -1; font-size:.78rem; }
.profile-preview-household span { font-size:.67rem; color:#64748B; text-transform:uppercase; }
.profile-preview-household strong { font-size:.9rem; }
.profile-preview-household.active { border-color:#86EFAC; background:#F0FDF4; }
.profile-preview-household.error { border-color:#FCA5A5; }

@media (max-width: 900px) {
  .profile-method-grid,.profile-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-rule-layout { grid-template-columns:1fr; }
  .profile-variable-row { grid-template-columns:40px 1fr 80px; }
  .profile-variable-role { display:none; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.4;
}

/* ── Data panel (sidebar) ──────────────────────────────────────────────────── */
.data-panel {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.data-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.data-panel-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.data-panel-info {
  font-size: 0.73rem;
  color: var(--text);
  margin-bottom: 3px;
  word-break: break-all;
}
.data-no-gt {
  font-size: 0.68rem;
  color: var(--warning);
  font-style: italic;
  margin-bottom: 4px;
}
.data-panel-btns { display: flex; flex-direction: column; gap: 3px; }
.mb-1 { margin-bottom: 4px; }
.sidebar-divider { border: none; border-top: 1px solid var(--border); margin: 5px 0; }

/* ── Notification toast ────────────────────────────────────────────────────── */
.notification {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--tip-bg);
  color: var(--tip-fg);
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 0.82rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9999;
  white-space: nowrap;
}
.notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  padding: 7px 16px;
  line-height: 1.4;
  transition: opacity 0.15s, background 0.15s;
}
.btn:hover:not(:disabled) { opacity: 0.82; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary  { background: var(--primary); color: #fff; font-weight: 600; }
.btn-secondary{ background: var(--card2); color: var(--neutral); }
.btn-accent2  { background: var(--accent2); color: #fff; font-weight: 700; }
.btn-sm       { font-size: 0.8rem; padding: 5px 10px; }
.btn-lg       { font-size: 1rem; padding: 9px 22px; font-weight: 700; }
.btn-full     { width: 100%; text-align: center; }
.mb-2         { margin-bottom: 7px; }
.mt-4         { margin-top: 18px; }

/* ── Main screen ───────────────────────────────────────────────────────────── */
#main-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
#topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 44px;
}
#profile-selector-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.topbar-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-right: 2px;
  white-space: nowrap;
}
#profile-buttons { display: flex; gap: 3px; flex-wrap: nowrap; }
.profile-btn {
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  background: var(--card2);
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.profile-btn.active { color: #fff; }
.profile-btn:hover:not(.active) { background: var(--primary-soft); }
.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ref-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* ── Workflow roadmap ─────────────────────────────────────────────────────── */
#workflow-bar {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 7px 10px;
  background: #F8FAFC;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.workflow-step {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  border-radius: 7px;
  min-width: 128px;
  padding: 6px 9px;
  font: inherit;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.workflow-step:hover { border-color: #93C5FD; background: #EFF6FF; }
.workflow-step.active {
  color: var(--primary-fg);
  border-color: var(--primary);
  background: var(--primary-soft);
}
.workflow-step.future { border-style: dashed; }
.workflow-step-num {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card2);
  font-size: 0.7rem;
  font-weight: 800;
}
.workflow-step.active .workflow-step-num { background: var(--primary); color: #fff; }
.workflow-step-copy { min-width: 0; }
.workflow-step-title {
  display: block;
  font-size: 0.71rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workflow-step-state { display: block; font-size: 0.61rem; margin-top: 1px; }
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--sec-soft);
  color: var(--sec-fg);
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── App layout ────────────────────────────────────────────────────────────── */
#app-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
#sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-top {
  padding: 10px 12px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-logo-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.sidebar-logo-img {
  height: 42px;
  width: 42px;
  object-fit: cover;
  object-position: left center;
  flex-shrink: 0;
}
.sidebar-logo {
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
}
.sidebar-sub {
  font-size: 0.72rem;
  color: var(--muted);
}
#sidebar-profile-info {
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 3px;
}
.sidebar-search { padding: 6px 8px 2px; flex-shrink: 0; }
.sidebar-search input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.8rem;
  background: var(--bg);
  color: var(--text);
}
.sidebar-search-hint {
  font-size: 0.68rem;
  color: var(--muted);
  padding: 1px 8px 5px;
}
.sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 3px;
  min-height: 0;
}
.sidebar-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-size: 0.78rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  color: var(--text);
  transition: background 0.1s;
  line-height: 1.3;
}
.sidebar-item:hover  { background: var(--primary-soft); }
.sidebar-item.active { background: var(--primary-soft); font-weight: 600; }
#sidebar-bottom {
  padding: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-progress {
  font-size: 0.73rem;
  color: var(--muted);
  padding: 0 2px 5px;
}
.sidebar-progress.ok { color: var(--success); }

/* ── Main area ─────────────────────────────────────────────────────────────── */
#main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
#household-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 10px 22px;
  flex-shrink: 0;
  position: relative;
  min-height: 88px;
}
.hh-id   { font-size: 0.72rem; color: var(--muted); }
.hh-name { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 2px 0; }
.hh-comp { font-size: 0.82rem; color: var(--muted); }
.hh-desc { font-size: 0.76rem; color: var(--muted); margin-top: 1px; max-width: calc(100% - 100px); }
.hh-profiles { font-size: 0.74rem; color: var(--muted); margin-top: 2px; }
.hh-nav {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-btn {
  background: var(--primary-soft);
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  color: var(--primary);
  cursor: pointer;
  padding: 3px 8px;
  line-height: 1.2;
}
.nav-btn:disabled { opacity: 0.3; cursor: default; }
.nav-counter { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

#content-scroll { flex: 1; overflow-y: auto; min-height: 0; }
#content-area   { padding: 16px 22px 32px; }
#content-area.phase2-bg { background: #F0F4FF; min-height: 100%; }

/* ── Indicator cards (Phase 1 – neutral) ───────────────────────────────────── */
.indicator-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.indicator-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
.card-top {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
}
.badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.badge-pri { background: var(--primary-soft); color: var(--primary-fg); }
.badge-sec { background: var(--sec-soft);     color: var(--sec-fg); }
.role-label { font-size: 0.62rem; color: var(--muted); }
.derived-tag {
  font-size: 0.6rem;
  background: #F0F9FF;
  color: #0369A1;
  padding: 1px 4px;
  border-radius: 2px;
  font-style: italic;
}
.info-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  padding: 0;
  line-height: 1;
}
.indicator-name  { font-size: 0.78rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.indicator-value { font-size: 1rem; font-weight: 700; color: var(--neutral); margin-bottom: 2px; }
.indicator-note  { font-size: 0.68rem; color: var(--muted); }
.card-divider    { border: none; border-top: 1px solid var(--border); margin: 6px 0; }
.indicator-source{ font-size: 0.62rem; color: var(--muted); }
.mb-4            { margin-bottom: 18px; }

/* ── Validation card ───────────────────────────────────────────────────────── */
.validation-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.validation-question { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.validation-hint     { font-size: 0.78rem; color: var(--muted); margin-bottom: 12px; }
.validation-buttons  { display: flex; gap: 10px; margin-bottom: 10px; }
.label-btn {
  flex: 1;
  padding: 11px 14px;
  border-radius: 5px;
  border: 2px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--card2);
  color: var(--muted);
  transition: all 0.15s;
  font-weight: 500;
}
.label-btn:hover       { border-color: var(--muted); }
.label-btn.active-yes  { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); font-weight: 700; }
.label-btn.active-no   { background: var(--success-soft); color: var(--success); border-color: var(--success); font-weight: 700; }
.validation-status     { font-size: 0.8rem; color: var(--muted); }

/* ── Progress card ─────────────────────────────────────────────────────────── */
.progress-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.progress-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.profile-progress-cell { display: flex; flex-direction: column; align-items: center; min-width: 36px; }
.profile-progress-count { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.profile-progress-label { font-size: 0.65rem; color: var(--muted); }

/* ── Section heading ───────────────────────────────────────────────────────── */
.section-heading { font-size: 0.95rem; font-weight: 700; color: var(--text); }

/* ── Phase 2: Score banner ─────────────────────────────────────────────────── */
.score-banner {
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 12px;
  border: 1.5px solid;
}
.score-banner-top { font-size: 0.72rem; font-weight: 700; margin-bottom: 5px; }
.score-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.score-pct   { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.score-level { font-size: 1.3rem; font-weight: 700; }
.score-classification { font-size: 0.88rem; }
.score-bar-container {
  margin-top: 10px;
  height: 7px;
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
  overflow: hidden;
}
.score-bar-fill { height: 7px; border-radius: 4px; transition: width 0.18s; }

/* ── Phase 2: Metrics ──────────────────────────────────────────────────────── */
.metrics-card {
  background: var(--card);
  border: 1px solid var(--primary);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.metrics-row  { display: flex; gap: 8px; margin-top: 8px; }
.metric-cell  { flex: 1; text-align: center; }
.metric-value { font-size: 1.25rem; font-weight: 700; color: var(--primary); }
.metric-label { font-size: 0.68rem; color: var(--muted); }
.confusion-row { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.cm-cell  { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--muted); }
.cm-value { font-size: 0.95rem; font-weight: 700; color: var(--neutral); }
.metrics-note { font-size: 0.7rem; color: var(--muted); margin-top: 4px; }

/* ── Phase 2: Decision threshold ───────────────────────────────────────────── */
.threshold-control {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 11px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.threshold-control label { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.threshold-control input[type="range"] { width: 180px; cursor: pointer; }
.threshold-val  { font-size: 1rem; font-weight: 700; color: var(--primary); min-width: 38px; }
.threshold-hint { font-size: 0.73rem; color: var(--muted); }

/* ── Phase 2: Indicator rows ───────────────────────────────────────────────── */
.indicator-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 7px 12px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.ind-row-left  { min-width: 140px; display: flex; flex-direction: column; gap: 1px; }
.ind-row-name  { font-size: 0.72rem; color: var(--muted); }
.ind-row-value { font-size: 0.95rem; font-weight: 700; color: var(--neutral); min-width: 90px; }
.ind-row-note  { font-size: 0.72rem; color: var(--muted); min-width: 140px; }
.derived-label { font-size: 0.72rem; color: var(--muted); font-style: italic; }
.contrib-bar-container { background: var(--border); height: 7px; width: 72px; border-radius: 3px; overflow: hidden; }
.contrib-bar-fill      { height: 7px; background: var(--accent2); border-radius: 3px; transition: width 0.18s; }
.contrib-pct           { font-size: 0.78rem; font-weight: 700; color: var(--accent2); min-width: 36px; text-align: right; }

/* ── Phase 2: Weights card ─────────────────────────────────────────────────── */
.weights-card {
  background: var(--card);
  border: 1.5px solid var(--accent2);
  border-radius: 6px;
  padding: 14px 16px;
}
.weight-row   { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.weight-name  { font-size: 0.82rem; color: var(--text); min-width: 220px; display: flex; align-items: center; gap: 5px; }
.weight-row input[type="range"] { width: 130px; cursor: pointer; }
.weight-val   { font-size: 0.85rem; font-weight: 700; color: var(--accent2); min-width: 44px; }
.weight-delta { font-size: 0.75rem; min-width: 54px; }

/* ── Phase 2: Household table ──────────────────────────────────────────────── */
.households-table { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; }
.table-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.1s;
}
.table-row.current  { background: var(--primary-soft); border-color: var(--primary); }
.table-row:not(.current):hover { background: var(--bg); }
.table-id    { font-size: 0.72rem; font-weight: 700; color: var(--muted); min-width: 64px; }
.table-name  { font-size: 0.78rem; min-width: 72px; }
.table-label { font-size: 0.72rem; color: var(--muted); min-width: 62px; }
.table-bar-container { background: var(--border); height: 7px; width: 88px; border-radius: 3px; overflow: hidden; }
.table-bar-fill      { height: 7px; border-radius: 3px; transition: width 0.18s; }
.table-score { font-size: 0.85rem; font-weight: 700; min-width: 40px; }
.table-check { font-size: 0.95rem; font-weight: 700; min-width: 20px; }

/* ── Tooltip ───────────────────────────────────────────────────────────────── */
.tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--tip-bg);
  color: var(--tip-fg);
  padding: 9px 13px;
  border-radius: 6px;
  font-size: 0.76rem;
  max-width: 280px;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* ── Utility ───────────────────────────────────────────────────────────────── */
.text-muted  { color: var(--muted); }
.text-small  { font-size: 0.76rem; }
.mb-2        { margin-bottom: 7px; }
.mb-3        { margin-bottom: 12px; }
.mt-4        { margin-top: 18px; }

/* ── Scrollbars ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Range input ───────────────────────────────────────────────────────────── */
input[type="range"] { accent-color: var(--accent2); }

/* ════════════════════════════════════════════════════════════════════════════
   SESSION 3 — Login, ordinal labels, phase-2 compact, weight versions
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Login screen ──────────────────────────────────────────────────────────── */
#login-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 360px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.login-logo-img {
  display: block;
  margin: 0 auto 4px;
  max-width: 100%;
  height: 56px;
  object-fit: contain;
}
.login-logo {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.02em;
  text-align: center;
}
.login-error {
  font-size: 0.8rem;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 5px;
  padding: 6px 10px;
  text-align: center;
}
.login-sub {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  margin-top: -6px;
  margin-bottom: 6px;
}
.demo-banner {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border: 1px solid #F59E0B;
  border-radius: 6px;
  background: var(--warn-soft);
  color: #92400E;
  font-size: 0.75rem;
  text-align: center;
}
.demo-banner strong { font-size: 0.78rem; }
.login-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.login-input {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.login-input:focus { border-color: var(--primary); }
.login-select { cursor: pointer; }
.login-btn { width: 100%; margin-top: 4px; }

/* ── Topbar user info ──────────────────────────────────────────────────────── */
.topbar-user-info {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 10px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.topbar-user-label { font-size: 0.72rem; color: var(--muted); }
#topbar-user { font-size: 0.78rem; font-weight: 700; color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Household header: smaller since no desc/composicion ───────────────────── */
#household-header { min-height: 0; }

/* ── Reference badge (household header) ────────────────────────────────────── */
.hh-ref-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border: 1.5px solid;
  border-radius: 4px;
  background: transparent;
}

/* ── Sidebar items: flex layout ────────────────────────────────────────────── */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sidebar-dot { font-size: 0.45rem; flex-shrink: 0; line-height: 1; }
.sidebar-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-level-tag {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.sidebar-ref-tag {
  font-size: 0.6rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Ordinal label buttons (Phase 1) ───────────────────────────────────────── */
.ordinal-buttons {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: nowrap;
}
.ordinal-btn {
  flex: 1;
  min-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 9px 6px;
  border: 2px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  background: var(--card2);
  font-family: inherit;
  transition: all 0.15s;
  gap: 3px;
}
.ordinal-btn:hover:not(.ordinal-active) { border-color: var(--muted); background: var(--card); }
.ordinal-num { font-size: 1.2rem; font-weight: 800; line-height: 1; color: var(--neutral); }
.ordinal-lbl { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.ordinal-active .ordinal-num { color: #fff; }
.ordinal-active .ordinal-lbl { color: rgba(255,255,255,0.85); }

/* ── Phase 2: 2-column compact layout ─────────────────────────────────────── */
.phase2-layout {
  display: grid;
  grid-template-columns: 370px 1fr;
  gap: 12px;
  align-items: start;
}
.phase2-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phase2-right {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

/* ── Score compact card ────────────────────────────────────────────────────── */
.score-compact {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--primary);
  border-radius: 8px;
  padding: 16px 18px;
}
.sc-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.sc-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.sc-pct   { font-size: 2.3rem; font-weight: 800; line-height: 1; }
.sc-level { font-size: 1.15rem; font-weight: 700; }
.sc-exp   { font-size: 0.88rem; color: var(--muted); }

/* ── Metrics compact ───────────────────────────────────────────────────────── */
.metrics-compact {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  align-items: center;
}
.mc-item {
  font-size: 0.73rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.mc-item b { color: var(--text); font-size: 0.8rem; }

/* ── Weights compact card ──────────────────────────────────────────────────── */
.weights-compact-card {
  background: var(--card);
  border: 1.5px solid var(--accent2);
  border-radius: 6px;
  padding: 8px 10px;
}
.wc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 4px;
}
.weight-row-c {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.wk { flex-shrink: 0; }
.wname {
  font-size: 0.7rem;
  color: var(--muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wslider { width: 80px; flex-shrink: 0; cursor: pointer; }
.wval   { font-size: 0.73rem; font-weight: 700; color: var(--accent2); min-width: 36px; text-align: right; }
.wdelta { font-size: 0.66rem; min-width: 42px; text-align: right; }

/* ── Weight versions card ──────────────────────────────────────────────────── */
.versions-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.vc-header {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}
.vc-save-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  align-items: center;
}
.vc-name-input {
  flex: 1;
  min-width: 0;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.75rem;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.vc-name-input:focus { border-color: var(--primary); }
.vc-load-row { margin-bottom: 4px; }
.vc-select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.75rem;
  background: var(--bg);
  color: var(--text);
}
.vc-actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── Export row ────────────────────────────────────────────────────────────── */
.export-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.export-gt-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

/* ── Compact table (phase2 right column) ───────────────────────────────────── */
.phase2-right {
  max-width: 620px;
}
.ct-header {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.compact-table-header {
  display: grid;
  grid-template-columns: minmax(70px,1fr) 56px 92px 64px 56px;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--card2);
  border-bottom: 1px solid var(--border);
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.compact-table-header span:not(:first-child) { text-align: right; }
.compact-table { }
.compact-row {
  display: grid;
  grid-template-columns: minmax(70px,1fr) 56px 92px 64px 56px;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
  font-size: 0.76rem;
}
.compact-row:last-child { border-bottom: none; }
.compact-row:hover:not(.current) { background: var(--bg); }
.compact-row.current { background: var(--primary-soft); }
.cr-name   { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-score  { text-align: right; font-weight: 700; font-size: 0.76rem; }
.cr-level  { text-align: right; font-size: 0.76rem; font-weight: 600; }
.cr-lt     { font-size: 0.65rem; font-weight: 400; }
.cr-expert { text-align: right; font-weight: 700; }
.cr-err    { text-align: right; font-weight: 700; font-size: 0.76rem; }
.cr-dash   { color: var(--muted); }

/* ── Footer: financiación UE / SERI ────────────────────────────────────────── */
#app-footer {
  flex-shrink: 0;
  height: 56px;
  background: var(--tip-bg);
  color: var(--tip-fg);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
}
.footer-logos {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.footer-logo {
  width: auto;
  object-fit: contain;
}
.footer-logo-eu { height: 34px; }
.footer-logo-seri { height: 38px; }
.footer-text {
  font-size: 0.74rem;
  color: rgba(249,250,251,0.75);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.footer-info-btn {
  color: rgba(249,250,251,0.75);
  font-size: 0.78rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   ROADMAP DEMO — indicator builder, consensus and future-stage previews
   ════════════════════════════════════════════════════════════════════════════ */
.stage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.stage-eyebrow {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
  color: var(--primary-fg);
  margin-bottom: 2px;
}
.stage-title { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.stage-description { font-size: 0.78rem; color: var(--muted); margin-top: 2px; max-width: 760px; }
.stage-status {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--primary-soft);
  color: var(--primary-fg);
}
.stage-status.future { background: var(--card2); color: var(--muted); }
.permission-note {
  border: 1px solid #C4B5FD;
  background: #F5F3FF;
  color: #5B21B6;
  border-radius: 7px;
  padding: 8px 10px;
  margin-bottom: 12px;
  font-size: 0.76rem;
}
.permission-note.warning { border-color: #F59E0B; background: var(--warn-soft); color: #92400E; }
.demo-note {
  border-left: 4px solid var(--primary);
  background: #EFF6FF;
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 12px;
  font-size: 0.78rem;
  color: #1E3A8A;
}
.demo-note strong { color: #1E40AF; }

/* Indicator catalogue sidebar */
.catalog-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
}
.catalog-kpi {
  background: var(--bg);
  border-radius: 5px;
  padding: 5px 3px;
  text-align: center;
}
.catalog-kpi b { display: block; font-size: 0.9rem; color: var(--text); }
.catalog-kpi span { display: block; font-size: 0.58rem; color: var(--muted); text-transform: uppercase; }
.catalog-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: 6px 7px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.catalog-item:hover { background: var(--bg); }
.catalog-item.active { background: var(--primary-soft); }
.catalog-code { font-size: 0.68rem; font-weight: 800; color: var(--primary-fg); min-width: 24px; }
.catalog-name { flex: 1; min-width: 0; font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--warning); }
.catalog-status-dot.approved { background: var(--success); }
.catalog-status-dot.retired { background: var(--muted); }

/* Builder */
.builder-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(340px, 1.05fr);
  gap: 12px;
  align-items: start;
}
.builder-card,
.consensus-card,
.future-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.builder-card h3,
.consensus-card h3,
.future-card h3 {
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px; }
.form-field { display: flex; flex-direction: column; gap: 3px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.68rem; font-weight: 700; color: var(--muted); }
.form-control {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.76rem;
}
.form-control:focus { border-color: var(--primary); outline: none; }
textarea.form-control { resize: vertical; min-height: 58px; }
.form-control:disabled { opacity: 0.72; cursor: not-allowed; }
.field-help { font-size: 0.63rem; color: var(--muted); }
.metadata-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; }
.metadata-chip {
  font-size: 0.65rem;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--card2);
  color: var(--neutral);
}
.builder-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rule-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rule-list { display: flex; flex-direction: column; gap: 7px; }
.rule-row {
  display: grid;
  grid-template-columns: 52px minmax(100px,1fr) 76px 70px 70px 28px;
  gap: 5px;
  align-items: center;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #FAFAFA;
}
.rule-row .form-control { padding: 4px 5px; font-size: 0.68rem; }
.rule-result { font-size: 0.65rem; font-weight: 800; text-align: center; color: var(--danger); }
.rule-result.ok { color: var(--success); }
.rule-remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
}
.rule-preview {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  background: #F5F3FF;
  color: #4C1D95;
  font-size: 0.74rem;
  line-height: 1.5;
}
.rule-preview code { font-family: inherit; font-weight: 700; }
.builder-empty {
  color: var(--muted);
  font-size: 0.74rem;
  padding: 14px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 6px;
}

/* Compact aliases used by the meeting-ready builder */
.builder-shell { display: flex; flex-direction: column; gap: 12px; }
.builder-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.05fr); gap: 12px; align-items: start; }
.builder-card-title { font-size: 0.85rem; font-weight: 800; margin-bottom: 10px; }
.builder-card > label,
.builder-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 0.68rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.builder-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.builder-input,
.rule-row select,
.rule-row input { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font: inherit; font-size: 0.73rem; }
.builder-textarea { min-height: 72px; resize: vertical; }
.builder-meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.68rem; color: var(--muted); }
.status-pill { border-radius: 999px; padding: 3px 7px; background: var(--primary-soft); color: var(--primary-fg); font-weight: 800; }
.rule-help { font-size: 0.68rem; color: var(--muted); margin-bottom: 8px; }
.rule-columns { display: grid; grid-template-columns: 52px minmax(100px,1fr) 76px 70px 70px 28px; gap: 5px; padding: 0 7px 4px; color: var(--muted); font-size: 0.6rem; font-weight: 800; text-transform: uppercase; }
.rule-preview { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rule-preview.match { background: #ECFDF5; color: #166534; }
.rule-preview.no-match { background: #FEF2F2; color: #991B1B; }
.rule-natural { margin-top: 7px; color: var(--muted); font-size: 0.68rem; }
.workflow-step-number { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 22px; background: var(--card2); color: var(--neutral); font-size: 0.67rem; font-weight: 800; }
.workflow-step.active .workflow-step-number { background: var(--primary); color: #fff; }

/* AST indicator builder */
.ast-builder { display: flex; flex-direction: column; gap: 10px; }
.builder-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.82rem; }
.builder-step { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-right: 7px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 0.68rem; }
.metadata-section .form-grid { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
.metadata-section .form-field.full { grid-column: span 2; }
.output-spec { display: grid; grid-template-columns: auto repeat(3, minmax(130px, 1fr)) auto; gap: 8px; align-items: end; padding: 10px; margin-top: 10px; border-radius: 7px; background: #F8FAFC; border: 1px solid var(--border); }
.output-spec > b { align-self: center; color: var(--primary-fg); }
.output-spec .form-field { margin: 0; }
.nullable-check { display: flex; align-items: center; gap: 5px; padding-bottom: 7px; font-size: 0.7rem; color: var(--muted); }
.block-palette { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 8px 12px; }
.palette-group { min-width: 0; }
.palette-title { margin-bottom: 4px; color: var(--muted); font-size: 0.61rem; font-weight: 900; letter-spacing: .06em; }
.palette-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.block-button { border: 1px solid var(--border); border-radius: 5px; padding: 4px 7px; background: #fff; color: var(--text); font-size: 0.66rem; font-weight: 750; cursor: pointer; }
.block-button:hover { border-color: var(--primary); background: var(--primary-soft); }
.block-button.input { border-color: #93C5FD; }
.block-button.math { border-color: #C4B5FD; }
.block-button.comparison { border-color: #FCD34D; }
.block-button.logic { border-color: #86EFAC; }
.block-button.flow { border-color: #FDBA74; }
.block-button.transform { border-color: #A5B4FC; }
.block-button:disabled { opacity: .45; cursor: not-allowed; }
.ast-main-grid { display: grid; grid-template-columns: minmax(520px, 1.45fr) minmax(270px, .65fr); gap: 10px; align-items: start; }
.workspace-card { min-width: 0; }
.preview-column { display: flex; flex-direction: column; gap: 10px; }
.expression-preview { padding: 10px; border-radius: 6px; background: #111827; color: #F9FAFB; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .76rem; overflow-wrap: anywhere; }
.natural-preview, .dependency-line { color: var(--neutral); font-size: .73rem; line-height: 1.5; }
.ast-tree { display: flex; flex-direction: column; gap: 7px; }
.ast-node { border: 1px solid var(--border); border-left: 4px solid #94A3B8; border-radius: 7px; padding: 7px; background: #fff; }
.ast-node.selected { box-shadow: 0 0 0 2px #93C5FD; }
.ast-node.family-input { border-left-color: #3B82F6; }
.ast-node.family-math { border-left-color: #8B5CF6; }
.ast-node.family-comparison { border-left-color: #F59E0B; }
.ast-node.family-logic { border-left-color: #16A34A; }
.ast-node.family-flow { border-left-color: #EA580C; }
.ast-node.family-transform { border-left-color: #4F46E5; }
.ast-node-header { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.ast-branch { min-width: 28px; color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: .64rem; }
.ast-type { min-width: 145px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: .72rem; font-weight: 850; }
.ast-inferred { margin-left: auto; color: var(--muted); font-size: .62rem; }
.ast-node-actions { display: flex; gap: 2px; }
.ast-node-actions button, .add-operand { border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--neutral); cursor: pointer; font-size: .67rem; }
.ast-node-actions button:disabled { opacity: .25; cursor: not-allowed; }
.ast-children { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 0 24px; padding-left: 10px; border-left: 2px dashed #CBD5E1; }
.ast-node-editor { display: grid; grid-template-columns: repeat(3,minmax(110px,1fr)); gap: 5px; padding: 7px 0 0 35px; }
.ast-node-editor.six-cols { grid-template-columns: repeat(3,minmax(110px,1fr)); }
.ast-node-editor label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: .58rem; font-weight: 750; }
.ast-node-editor input, .ast-node-editor select { min-width: 0; width: 100%; padding: 4px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); font: inherit; font-size: .66rem; }
.ast-operation-help { padding: 5px 0 0 35px; color: var(--muted); font-size: .61rem; }
.add-operand { margin: 6px 0 0 35px; padding: 3px 7px; }
.sandbox-inputs { display: grid; grid-template-columns: repeat(4,minmax(140px,1fr)); gap: 8px; }
.sandbox-inputs label { display: flex; flex-direction: column; gap: 3px; font-size: .68rem; font-weight: 750; }
.sandbox-inputs input, .sandbox-inputs select { padding: 6px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); }
.sandbox-inputs small { color: var(--muted); font-size: .58rem; font-weight: 400; }
.sandbox-result { margin-top: 9px; padding: 9px; border-radius: 6px; background: var(--card2); font-size: .72rem; }
.sandbox-result.error { background: #FEF2F2; color: #991B1B; }
.sandbox-output { display: grid; grid-template-columns: 180px 1fr; gap: 12px; margin-top: 10px; }
.sandbox-value { display: flex; flex-direction: column; justify-content: center; padding: 12px; border-radius: 7px; background: #ECFDF5; color: #166534; }
.sandbox-value span { font-size: .61rem; font-weight: 900; }
.sandbox-value b { font-size: 1.35rem; }
.execution-trace { margin: 0; padding: 10px 10px 10px 28px; border-radius: 7px; background: #111827; color: #E5E7EB; font: .68rem/1.6 ui-monospace, Consolas, monospace; }
.diagnostics { display: flex; flex-direction: column; gap: 5px; }
.diagnostic { padding: 6px 8px; border-radius: 5px; font-size: .68rem; }
.diagnostic.ok { background: #ECFDF5; color: #166534; }
.diagnostic.error { background: #FEF2F2; color: #991B1B; }
.diagnostic.warning { background: #FFFBEB; color: #92400E; }

/* Expert phase additions */
.phase-intro {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 9px 11px;
  margin-bottom: 10px;
  border: 1px solid #BFDBFE;
  border-radius: 7px;
  background: #EFF6FF;
}
.phase-intro-title { font-size: 0.78rem; font-weight: 800; color: #1E40AF; }
.phase-intro-text { font-size: 0.7rem; color: #1E3A8A; margin-top: 2px; }
.model-version { font-size: 0.63rem; color: var(--muted); white-space: nowrap; }
.weight-row-c.excluded { opacity: 0.62; }
.weight-row-c.excluded .wname { text-decoration: line-through; }
.weight-row-c.excluded .wval { color: var(--muted); }
.zero-hint { font-size: 0.64rem; color: var(--muted); margin-top: 5px; }

/* Consensus */
.consensus-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.consensus-kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px;
}
.consensus-kpi span { display: block; font-size: 0.65rem; color: var(--muted); }
.consensus-kpi b { display: block; font-size: 1.15rem; margin-top: 2px; color: var(--text); }
.consensus-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.7fr); gap: 12px; }
.consensus-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.consensus-table th {
  text-align: right;
  padding: 6px;
  background: var(--neutral);
  color: #fff;
  font-size: 0.63rem;
}
.consensus-table th:first-child,
.consensus-table td:first-child { text-align: left; }
.consensus-table td { padding: 6px; border-bottom: 1px solid var(--border); text-align: right; }
.dispersion-high { color: var(--danger); font-weight: 800; }
.dispersion-medium { color: var(--warning); font-weight: 800; }
.dispersion-low { color: var(--success); font-weight: 800; }
.submission-list { display: flex; flex-direction: column; gap: 6px; }
.submission-item {
  padding: 8px;
  background: var(--bg);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.7rem;
}
.submission-item small { color: var(--muted); }
.guardrail-list { margin: 8px 0 0 17px; color: var(--muted); font-size: 0.71rem; }
.guardrail-list li { margin-bottom: 5px; }

/* Future phase preview */
.future-stage { max-width: 900px; margin: 0 auto; }
.future-hero {
  background: linear-gradient(135deg, #EFF6FF, #F5F3FF);
  border: 1px solid #C4B5FD;
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 12px;
}
.future-hero h2 { font-size: 1.25rem; margin-bottom: 6px; }
.future-hero p { color: var(--muted); max-width: 720px; }
.future-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.future-card p { font-size: 0.73rem; color: var(--muted); }
.future-card ul { margin: 8px 0 0 16px; font-size: 0.71rem; color: var(--muted); }
.future-card li { margin-bottom: 4px; }

@media (max-width: 1050px) {
  .workflow-step { min-width: 116px; }
  .builder-layout,
  .builder-grid,
  .consensus-grid { grid-template-columns: 1fr; }
  .phase2-layout { grid-template-columns: 1fr; }
  .phase2-right { max-width: none; }
  .future-grid { grid-template-columns: 1fr 1fr; }
  .metadata-section .form-grid { grid-template-columns: repeat(2,minmax(140px,1fr)); }
  .output-spec { grid-template-columns: repeat(2,minmax(140px,1fr)); }
  .block-palette { grid-template-columns: repeat(2,minmax(180px,1fr)); }
  .ast-main-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { overflow: auto; height: auto; min-height: 100vh; }
  #main-screen { height: auto; min-height: 100vh; overflow: visible; }
  #topbar { height: auto; flex-wrap: wrap; padding: 7px; }
  #profile-selector-wrap { order: 2; width: 100%; overflow-x: auto; }
  .topbar-actions { width: 100%; margin-left: 0; justify-content: space-between; }
  #workflow-bar { position: sticky; top: 0; z-index: 20; }
  #app-layout { overflow: visible; }
  #sidebar { display: none; }
  #main-area, #content-scroll { overflow: visible; }
  #content-area { padding: 12px; }
  .indicator-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .builder-form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .rule-row { grid-template-columns: 48px 1fr 70px; }
  .rule-row .rule-threshold,
  .rule-row .rule-sample,
  .rule-row .rule-result { grid-row: 2; }
  .consensus-overview { grid-template-columns: 1fr 1fr; }
  .future-grid { grid-template-columns: 1fr; }
  .metadata-section .form-grid,
  .output-spec,
  .block-palette,
  .sandbox-inputs,
  .sandbox-output { grid-template-columns: 1fr; }
  .ast-node-editor,
  .ast-node-editor.six-cols { grid-template-columns: 1fr 1fr; }
  #app-footer { height: auto; min-height: 38px; padding: 7px 10px; }
  .footer-logos { display: none; }
}

/* Fase 0 compacta */
.topbar-language { width:54px; height:28px; border:1px solid var(--border); border-radius:6px; background:#fff; color:var(--text); }
.compact-profile-builder { display:grid; gap:10px; }
.profile-builder-header { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.profile-builder-header h2 { font-size:1.18rem; line-height:1.2; }
.profile-builder-header p { color:var(--muted); font-size:.78rem; margin-top:2px; }
.profile-builder-tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); }
.profile-builder-tabs button { border:0; border-bottom:3px solid transparent; background:transparent; padding:7px 12px; color:var(--muted); font-weight:700; cursor:pointer; }
.profile-builder-tabs button.active { color:var(--primary); border-bottom-color:var(--primary); }
.profile-dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:start; }
.compact-card { padding:12px; margin:0; }
.compact-card .builder-section-heading { margin-bottom:8px; }
.profile-identity-grid { display:grid; grid-template-columns:1.5fr .75fr .5fr; gap:7px 9px; }
.profile-identity-grid .form-field { min-width:0; }
.profile-identity-grid .form-field:nth-child(4),.profile-identity-grid .form-field.full { grid-column:1 / -1; }
.profile-identity-grid textarea { min-height:52px; }
.profile-composition-stack { display:grid; gap:7px; }
.profile-composition-stack .profile-indicator-group { padding:8px 9px; }
.profile-composition-stack .profile-indicator-group b { margin-bottom:3px; }
.profile-activation-card,.profile-validation-card { grid-column:1 / -1; }
.compact-help { color:var(--muted); font-size:.76rem; margin:-2px 0 8px; }
.profile-rule-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) auto auto auto auto; gap:6px; align-items:center; }
.logic-buttons { display:flex; gap:4px; }
.profile-rule-compact { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(220px,.55fr); gap:8px; margin-top:8px; align-items:start; }
.profile-rule-compact .ast-tree { display:flex; flex-wrap:wrap; gap:5px; padding:7px; min-height:48px; max-height:180px; overflow:auto; border:1px solid var(--border); border-radius:8px; background:#F8FAFC; }
.profile-rule-compact .profile-rule-node { margin:0; min-width:190px; flex:1 1 220px; }
.profile-rule-compact .profile-rule-node-head { min-height:34px; padding:5px 7px; font-size:.75rem; }
.profile-rule-compact .ast-children { padding:2px 5px 5px 14px; }
.condition-criterion { margin-left:auto; color:#166534; font-size:.66rem; line-height:1.2; text-align:right; max-width:230px; }
.profile-rule-summary { display:grid; gap:4px; padding:9px; border:1px solid var(--border); border-radius:8px; font-size:.74rem; background:#fff; }
.profile-rule-summary span { color:var(--muted); line-height:1.35; }
.profile-rule-console { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; margin-top:8px; padding:9px 12px; border-radius:8px; background:#111827; color:#E5E7EB; }
.profile-rule-console span { color:#93C5FD; font-size:.67rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.profile-rule-console code { color:#F9FAFB; font-size:.86rem; font-weight:700; white-space:normal; overflow-wrap:anywhere; }
.profile-condition-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:7px; }
.profile-condition-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:7px; min-width:0; padding:7px 8px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); text-align:left; cursor:pointer; }
.profile-condition-card:hover { border-color:#93C5FD; }
.profile-condition-card.selected { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-soft); }
.profile-condition-copy { display:grid; min-width:0; }
.profile-condition-copy b { font-size:.74rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-condition-copy small { color:var(--muted); font-size:.65rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-condition-true { padding:2px 5px; border-radius:4px; background:#DCFCE7; color:#166534; font-size:.62rem; font-weight:800; }
.profile-condition-remove { color:#64748B; font-size:1rem; line-height:1; }
.profile-condition-remove.disabled { visibility:hidden; }
.profile-rule-toolbar .btn.active { border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }
.profile-logic-diagram { display:flex; justify-content:center; align-items:flex-start; margin-top:7px; padding:12px 10px 8px; overflow-x:auto; border:1px solid var(--border); border-radius:8px; background:#F8FAFC; }
.profile-logic-subtree { display:flex; flex-direction:column; align-items:center; min-width:max-content; }
.profile-logic-operator { position:relative; display:flex; align-items:center; gap:6px; min-height:34px; padding:5px 10px; border:1px solid #C4B5FD; border-radius:8px; background:#F3E8FF; color:#5B21B6; cursor:pointer; }
.profile-logic-operator span { font-size:.6rem; font-weight:800; letter-spacing:.06em; color:#7C3AED; }
.profile-logic-operator b { font-size:.76rem; }
.profile-logic-operator button { border:0; background:transparent; color:#64748B; cursor:pointer; }
.profile-logic-operator.selected,.profile-logic-indicator.selected { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-soft); }
.profile-logic-subtree > .profile-logic-operator:not(:last-child)::after { content:''; position:absolute; left:50%; top:100%; width:1px; height:18px; background:#94A3B8; }
.profile-logic-children { position:relative; display:flex; align-items:flex-start; gap:12px; padding-top:18px; }
.profile-logic-children::before { content:''; position:absolute; top:17px; left:8%; right:8%; height:1px; background:#94A3B8; }
.profile-logic-branch { position:relative; display:flex; justify-content:center; padding-top:8px; }
.profile-logic-branch::before { content:''; position:absolute; top:0; left:50%; width:1px; height:8px; background:#94A3B8; }
.profile-logic-indicator { display:grid; grid-template-columns:auto minmax(100px,1fr) auto auto; align-items:center; gap:6px; width:190px; min-height:54px; padding:6px 7px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer; }
.profile-variable-table { max-height:245px; overflow:auto; }
.profile-variable-row { grid-template-columns:38px minmax(120px,1fr) 78px 58px; padding:6px 8px; }
.profile-variable-add { margin:7px 0 0; }
.profile-preview-grid { grid-template-columns:repeat(4,minmax(0,1fr)); max-height:none; overflow:visible; }
.profile-preview-household { padding:7px 8px; }
.profile-validation-card .diagnostics { margin-bottom:6px; }
.compact-actions { gap:5px; }
.compact-actions .btn { padding:6px 9px; font-size:.72rem; }
.btn-danger { color:var(--danger); background:#fff; border-color:#FCA5A5; }
.btn-danger:hover:not(:disabled) { color:#991B1B; background:var(--danger-soft); border-color:var(--danger); }
.profile-methodology-view { display:grid; gap:10px; }
.methodology-intro { color:var(--muted); }
.profile-methodology-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.profile-methodology-grid .builder-card { margin:0; }

@media (max-width: 1050px) {
  .profile-dashboard-grid,.profile-methodology-grid { grid-template-columns:1fr; }
  .profile-activation-card,.profile-validation-card { grid-column:auto; }
  .profile-rule-toolbar { grid-template-columns:1fr auto; }
  .logic-buttons { grid-column:1 / -1; }
  .profile-condition-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 800px) {
  .profile-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ─── Activación por perfil: hogares que no requieren etiqueta ─── */
.profile-preview-household { grid-template-columns:1fr; }
.profile-preview-household.active span { color:#15803D; font-weight:700; }
.profile-preview-household.inactive { opacity:.7; }
.sidebar-item.profile-inactive { opacity:.55; }
.sidebar-item.profile-inactive.active { opacity:.85; }
.sidebar-inactive-tag { background:#F1F5F9; color:#64748B; }
.sidebar-inactive-note { font-size:.7rem; color:var(--muted, #64748B); margin:-2px 0 8px; line-height:1.3; }
.hh-activation-badge { font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid; }
.hh-activation-badge.on { color:#15803D; border-color:#86EFAC; background:#F0FDF4; }
.hh-activation-badge.off { color:#64748B; border-color:#CBD5E1; background:#F8FAFC; }
.validation-card.validation-inactive { background:#F8FAFC; border-style:dashed; }
.validation-card.validation-inactive .builder-actions { margin-top:10px; }
.profile-progress-count small { font-size:.62em; font-weight:600; color:#94A3B8; }
.compact-row.profile-inactive { opacity:.5; }
@media (max-width: 900px) { .profile-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ─── Evaluación experta: progreso + etiquetado 0–4 en la fila superior ─── */
.eval-top-row { display:grid; grid-template-columns:minmax(260px,auto) minmax(0,1fr); gap:12px; align-items:stretch; margin-bottom:14px; }
.eval-top-row .progress-card,.eval-top-row .validation-card { margin-bottom:0; }
.eval-top-row .validation-card { padding:12px 16px; }
.eval-top-row .validation-hint { margin-bottom:8px; }
.eval-top-row .ordinal-buttons { margin-bottom:6px; }
.eval-top-row .ordinal-btn { padding:7px 4px; }
@media (max-width: 1100px) { .eval-top-row { grid-template-columns:1fr; } }

/* ─── Panel de datos compacto (siempre visible) ─── */
.data-panel { padding:5px 10px 4px; }
.data-panel-summary { display:flex; align-items:baseline; gap:8px; }
.data-panel-details .data-panel-info { margin:0; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.data-panel-details .data-panel-btns { flex-direction:row; gap:4px; margin:4px 0 2px; }
.data-panel-details .data-panel-btns .btn { flex:1; padding:3px 4px; font-size:.7rem; white-space:nowrap; }
.sidebar-search-hint { display:none !important; }

/* ─── Ajuste de pesos: tabla estrecha, sliders con más recorrido ─── */
.phase2-layout { grid-template-columns:minmax(0,1fr) 440px; }
.phase2-right { max-width:none; }
.compact-table-header,.compact-row { grid-template-columns:minmax(96px,124px) 50px minmax(78px,1fr) 52px 44px; }
.wname { flex:0 0 190px; }
.weight-row-c .wk { flex:0 0 32px; text-align:center; box-sizing:border-box; }
.wslider { flex:1 1 auto; width:auto; min-width:120px; }
@media (max-width: 1050px) { .phase2-layout { grid-template-columns:1fr; } }

/* ─── Botones compactos del pie del sidebar ─── */
.sidebar-actions { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.sidebar-actions .btn { padding:4px 6px; font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-actions .sidebar-action-wide { grid-column:1 / -1; }
#sidebar-bottom .sidebar-progress { margin-bottom:2px; }
.sidebar-inactive-note { margin:0 0 5px; font-size:.66rem; }