/* ═══════════════════════════════════════════════════════════════
   UniProy — formulacion.css
   Wizard, formulación, identificación, revisión, aprobación,
   proyectos, ayuda, alistamiento
   Mobile-first · Breakpoints: 480 · 640 · 768 · 992 · 1200
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   WORKSPACE MAIN
   ══════════════════════════════════════ */
.workspace-main {
  padding: clamp(22px, 4vw, 34px) 0 clamp(60px, 10vw, 92px);
}
.hero-section { margin-bottom: 0; }

/* ── Workspace hero panel ──────────────────────────────────────── */
.workspace-hero {
  padding: clamp(20px, 4vw, 34px);
  border-radius: var(--radius-xl);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  overflow: hidden;
  position: relative;
}
.workspace-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(780px 360px at 10% 0%,  var(--hero-grad-1), transparent 62%),
    radial-gradient(720px 320px at 100% 10%, var(--hero-grad-2), transparent 58%);
  pointer-events: none;
}
.workspace-hero > * { position: relative; z-index: 1; }

/* ── Hero grid ─────────────────────────────────────────────────── */
.hero-grid-pro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .9fr);
  gap: 22px;
  align-items: stretch;
}
.hero-grid-pro-compact { grid-template-columns: minmax(0, 1fr); }

.hero-copy-pro       { display: grid; gap: 18px; }
.hero-copy-pro-compact { max-width: 920px; }
.hero-copy-top       { display: grid; gap: 10px; }

.hero-kicker-pro {
  margin: 0;
  color: var(--brand);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero-title-pro {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0;
  color: var(--text);
}
.hero-title-pro span { color: var(--brand); }

.hero-text-pro {
  max-width: 720px;
  color: var(--text-muted);
  line-height: 1.82;
  font-size: clamp(.92rem, 2vw, 1.02rem);
  margin: 0;
}

.hero-actions-pro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: 12px;
  align-items: stretch;
}
.hero-compact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── Metrics row ───────────────────────────────────────────────── */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hero-metric-card {
  padding: clamp(12px, 2vw, 16px) clamp(14px, 2.5vw, 18px);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card-solid);
  box-shadow: var(--shadow-soft);
}
.hero-metric-card strong {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2.5vw, 1.28rem);
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  margin-bottom: 7px;
}
.hero-metric-card span { display: block; color: var(--text-muted); line-height: 1.6; font-size: .88rem; }

/* ── Primary / quick actions ───────────────────────────────────── */
.hero-primary-action,
.hero-quick-action,
.inline-chip-link { text-decoration: none; }

.hero-primary-action,
.hero-quick-action {
  border: 1px solid var(--border);
  color: var(--text);
  transition:
    transform    var(--transition-fast),
    box-shadow   var(--transition-fast),
    border-color var(--transition-fast),
    background   var(--transition-fast),
    color        var(--transition-fast);
}

.hero-primary-action {
  min-height: 100%;
  padding: clamp(16px, 2.5vw, 20px) clamp(16px, 2.5vw, 22px);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background:
    radial-gradient(360px 180px at 0% 0%, rgba(0,89,78,0.16), transparent 65%),
    linear-gradient(135deg, rgba(0,89,78,0.12), rgba(181,161,96,0.10)),
    var(--card);
  box-shadow: var(--shadow-md);
}
.hero-primary-action:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(0,89,78,0.24);
  box-shadow: 0 20px 40px rgba(0,89,78,0.16);
}

.hero-action-copy { display: grid; gap: 5px; }
.hero-action-copy strong {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(.94rem, 2vw, 1.06rem);
  font-weight: 800;
  color: var(--text);
}
.hero-action-copy small { display: block; color: var(--text-muted); line-height: 1.65; font-size: .9rem; }

.hero-action-icon {
  width: 52px; height: 52px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: .98rem;
  box-shadow: 0 12px 28px rgba(0,89,78,0.22);
}

.hero-action-stack { display: grid; gap: 10px; }

.hero-quick-action {
  padding: clamp(13px, 2vw, 16px) clamp(14px, 2.5vw, 18px);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,0.36);
  box-shadow: var(--shadow-soft);
}
html[data-theme="dark"] .hero-quick-action { background: rgba(10,20,33,0.54); }
.hero-quick-action:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: rgba(0,89,78,0.24);
  box-shadow: var(--shadow-md);
}
.hero-quick-action span  { display: grid; gap: 3px; }
.hero-quick-action strong { display: block; font-family: var(--font-heading); font-size: .96rem; font-weight: 800; color: var(--text); }
.hero-quick-action small  { display: block; color: var(--text-muted); line-height: 1.55; font-size: .83rem; }
.hero-quick-action i {
  width: 40px; height: 40px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(0,89,78,0.1);
  color: var(--brand);
}

/* ── Inline chips ──────────────────────────────────────────────── */
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }

.inline-chip {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  padding: .6rem .88rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-soft);
  font-weight: 700;
  font-size: .83rem;
}
.inline-chip i { color: var(--brand); }
.inline-chip-link:hover { color: var(--brand); border-color: rgba(0,89,78,0.22); background: rgba(0,89,78,0.06); }

/* ── Command / signal cards ────────────────────────────────────── */
.hero-command { display: grid; gap: 14px; align-content: start; }

.command-card {
  padding: clamp(16px, 3vw, 22px);
  border-radius: 24px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,89,78,0.08), rgba(181,161,96,0.08));
  box-shadow: var(--shadow-md);
}

.command-card h3, .signal-card h4,
.screen-copy h4, .screen-form h4,
.review-card h4, .approval-card h4,
.support-card h4, .mini-map h4 {
  font-family: var(--font-heading);
  font-size: clamp(.96rem, 2vw, 1.08rem);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 10px;
}
.command-card p, .signal-card p,
.support-card p, .review-card p, .approval-card p {
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

.command-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.command-support { margin-top: 12px; }

.command-list { display: grid; gap: 10px; margin-top: 14px; }
.command-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  background: var(--card-solid);
  border: 1px solid var(--border);
}
.command-item i {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,89,78,0.1);
  color: var(--brand);
}

.hero-illustration {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  filter: drop-shadow(0 16px 30px rgba(15,23,42,0.14));
}

/* ── Signal cards ──────────────────────────────────────────────── */
.signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.signal-card {
  padding: clamp(14px, 2.5vw, 18px);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.signal-value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  margin-bottom: 7px;
}
.signal-meta { color: var(--text-muted); font-size: .86rem; }

/* ── Page strip ────────────────────────────────────────────────── */
.page-strip { margin-top: 26px; }
.page-strip-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 16px;
}

.mini-map, .support-card {
  padding: clamp(18px, 3vw, 24px);
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.step-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.step-map-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card-solid);
}
.step-map-card strong { display: block; color: var(--text); font-family: var(--font-heading); font-size: .94rem; margin-bottom: 7px; }
.step-map-card p { font-size: .9rem; color: var(--text-muted); line-height: 1.65; margin: 0; }

/* ══════════════════════════════════════
   WORKSPACE LAYOUT (rail + content)
   ══════════════════════════════════════ */
.workspace-layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.wizard-rail {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 14px;
}

.rail-card, .rail-status {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.rail-card { padding: 16px; }
.rail-card h3, .rail-status h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 10px;
  font-size: .98rem;
}

.step-stack { display: grid; gap: 6px; }

.step-link {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 16px;
  border: 1px solid transparent;
  color: var(--text-soft);
  font-weight: 700;
  font-size: .86rem;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.step-link:hover  { color: var(--brand); background: rgba(0,89,78,0.06); border-color: rgba(0,89,78,0.12); }
.step-link.active { color: var(--brand); background: rgba(0,89,78,0.08); border-color: rgba(0,89,78,0.16); transform: translateX(2px); }

.step-num {
  width: 36px; height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: .84rem;
  background: rgba(0,89,78,0.1);
  color: var(--brand);
  flex-shrink: 0;
}
.step-copy small { display: block; color: var(--text-muted); font-weight: 600; font-size: .72rem; }
.step-copy span  { display: block; line-height: 1.35; font-size: .86rem; }

.rail-status { padding: 16px; }
.status-list { display: grid; gap: 8px; }
.status-row  { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; color: var(--text-soft); }
.status-row strong { color: var(--text); }

/* ══════════════════════════════════════
   WIZARD CONTENT / SCREENS
   ══════════════════════════════════════ */
.wizard-content { display: grid; gap: 18px; }

.wizard-screen {
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.screen-head {
  padding: clamp(16px, 3vw, 20px) clamp(16px, 3vw, 24px);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.screen-kicker {
  display: inline-flex;
  align-items: center;
  gap: .46rem;
  padding: .42rem .72rem;
  border-radius: 999px;
  background: rgba(0,89,78,0.1);
  color: var(--brand);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 9px;
}

.screen-head h2 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  margin: 0 0 7px;
  color: var(--text);
  letter-spacing: -0.03em;
}
.screen-head p { margin: 0; color: var(--text-muted); line-height: 1.7; max-width: 720px; font-size: .94rem; }

.screen-meta { display: flex; gap: 7px; flex-wrap: wrap; }

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .52rem .72rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-solid);
  color: var(--text-soft);
  font-weight: 700;
  font-size: .8rem;
}
.badge-soft.ok i, .badge-soft.secure i { color: var(--green); }
.badge-soft.warn i  { color: #d97706; }
.badge-soft.info i  { color: var(--blue); }

.screen-body {
  display: grid;
  grid-template-columns: minmax(240px, .92fr) minmax(0, 1.28fr);
  gap: 20px;
  padding: clamp(16px, 3vw, 22px) clamp(16px, 3vw, 24px) clamp(18px, 3vw, 24px);
}

/* ── Phase shell / container ───────────────────────────────────── */
.phase-shell {
  display: grid;
  gap: 24px;
  padding: clamp(18px, 4vw, 28px) clamp(18px, 4vw, 32px) clamp(22px, 4vw, 36px);
}

.phase-container {
  padding-inline: clamp(10px, 3vw, 36px);
}
.access-section { padding-top: 24px !important; padding-bottom: 28px !important; }
.access-section .access-gate-card { margin: 0; }
.access-section + .phase-container { padding-top: 0 !important; }
.phase-container .phase-screen { max-width: 74%; margin-inline: auto; }

.phase-overview { display: grid; gap: 14px; }

/* ── Progress card ─────────────────────────────────────────────── */
.phase-progress-card {
  padding: clamp(14px, 2.5vw, 18px) clamp(16px, 3vw, 20px);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--card-solid);
  box-shadow: var(--shadow-soft);
}
.phase-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.phase-progress-copy { display: grid; gap: 3px; }
.phase-progress-copy strong { color: var(--text); font-family: var(--font-heading); font-size: 1rem; font-weight: 900; }
.phase-progress-copy span   { color: var(--text-muted); font-size: .86rem; }
.phase-progress-track {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  margin: 14px 0 10px;
  background: rgba(127,127,127,0.14);
}
.phase-progress-bar {
  display: block;
  width: 14.285%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width var(--transition-base);
}
.phase-progress-note { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.7; }

/* ── Projects card ─────────────────────────────────────────────── */
.phase-projects-card {
  display: grid;
  gap: 12px;
  padding: clamp(14px, 2.5vw, 18px) clamp(16px, 3vw, 20px);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,89,78,0.04), rgba(37,99,235,0.03));
  box-shadow: var(--shadow-soft);
}
.phase-projects-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.phase-projects-copy { display: grid; gap: 5px; max-width: 680px; }
.phase-projects-copy strong { color: var(--text); font-family: var(--font-heading); font-size: 1rem; font-weight: 900; }
.phase-projects-copy p, .phase-projects-status { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.65; }

.phase-projects-list { display: grid; gap: 10px; margin-top: 12px; }
@media (min-width: 640px) {
  .phase-projects-list { grid-template-columns: repeat(2, 1fr); }
}

/* ── Project switch cards ──────────────────────────────────────── */
.project-switch-card {
  width: 100%;
  display: grid;
  gap: 10px;
  padding: clamp(13px, 2vw, 16px) clamp(14px, 2.5vw, 18px);
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
  text-align: left;
  appearance: none;
  transition:
    transform    var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast),
    background   var(--transition-fast);
}
.project-switch-card:hover, .project-switch-card:focus-visible {
  border-color: rgba(0,89,78,0.32);
  box-shadow: 0 14px 28px rgba(15,23,42,0.08);
  transform: translateY(-1px);
}
.project-switch-card.is-active {
  border-color: rgba(0,89,78,0.34);
  background: linear-gradient(135deg, rgba(0,89,78,0.08), rgba(181,161,96,0.08));
}

.project-switch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.project-switch-copy { display: grid; gap: 5px; }
.project-switch-copy strong { color: var(--text); font-size: .98rem; font-weight: 800; }
.project-switch-copy span   { color: var(--text-muted); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }

.project-switch-badge {
  display: inline-flex;
  align-items: center;
  padding: .4rem .68rem;
  border-radius: 999px;
  background: rgba(0,89,78,0.1);
  color: var(--brand);
  font-size: .76rem;
  font-weight: 800;
  flex-shrink: 0;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-switch-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.55;
}
.project-switch-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.project-switch-meta span:not(:last-child)::after { content: "•"; margin-left: 8px; color: rgba(15,23,42,0.28); }

.project-switch-action { color: var(--brand); font-size: .84rem; font-weight: 800; }
.project-switch-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.project-switch-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .68rem .96rem;
  border-radius: 13px;
  border: 1px solid rgba(0,89,78,0.16);
  background: rgba(0,89,78,0.06);
  color: var(--brand);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.project-switch-link:hover, .project-switch-link:focus-visible {
  border-color: rgba(0,89,78,0.28);
  background: rgba(0,89,78,0.1);
  color: var(--brand);
  transform: translateY(-1px);
}
.project-switch-link.is-phase-progress {
  position: relative;
  justify-content: space-between;
  gap: 10px;
  overflow: hidden;
  isolation: isolate;
  background: rgba(255,255,255,0.82);
  border-color: var(--phase-border, rgba(0,89,78,0.22));
}
.project-switch-link.is-phase-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--phase-progress, 0%);
  background: linear-gradient(90deg, var(--phase-fill-strong, rgba(0,89,78,0.2)), var(--phase-fill-soft, rgba(0,89,78,0.08)));
  z-index: 0;
  transition: width var(--transition-base);
}
.project-switch-link.is-phase-progress > span { position: relative; z-index: 1; }
.project-switch-link.is-phase-progress .project-switch-link-label { white-space: nowrap; }
.project-switch-link.is-phase-progress .project-switch-link-progress { font-size: .74rem; font-weight: 900; letter-spacing: .04em; }
.project-switch-link.is-phase-progress.phase-formulacion  { --phase-border: rgba(0,89,78,0.24); --phase-fill-strong: rgba(0,89,78,0.22); --phase-fill-soft: rgba(0,89,78,0.1); }
.project-switch-link.is-phase-progress.phase-identificacion { --phase-border: rgba(37,99,235,0.24); --phase-fill-strong: rgba(37,99,235,0.22); --phase-fill-soft: rgba(37,99,235,0.1); color: #1d4ed8; }
.project-switch-link.is-phase-progress.phase-identificacion:hover,
.project-switch-link.is-phase-progress.phase-identificacion:focus-visible { color: #1d4ed8; }
.project-switch-link.is-muted { border-color: rgba(148,163,184,0.28); background: rgba(148,163,184,0.1); color: var(--text); }
.project-switch-link.is-muted:hover, .project-switch-link.is-muted:focus-visible { border-color: rgba(100,116,139,0.36); background: rgba(148,163,184,0.16); color: var(--text); }

/* ── Project title ─────────────────────────────────────────────── */
.project-title-wrap { display: grid; gap: 2px; }
.project-title-text {
  color: var(--text);
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.45;
  text-align: justify;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.project-title-text.is-expanded { -webkit-line-clamp: unset; }
.project-title-toggle {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand);
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  letter-spacing: .02em;
  width: fit-content;
}
.project-title-toggle:hover { text-decoration: underline; }

/* Empty state */
.project-switch-empty {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed rgba(0,89,78,0.2);
  color: var(--text-muted);
  background: rgba(0,89,78,0.03);
  line-height: 1.65;
  font-size: .9rem;
}

/* ══════════════════════════════════════
   PROJECTS MODAL & TABS
   ══════════════════════════════════════ */
.projects-modal-shell { border-radius: 26px; overflow: hidden; }
.projects-modal-shell .modal-header {
  padding: 22px 26px 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--card) 80%, rgba(0,89,78,0.12)),
    color-mix(in srgb, var(--card) 90%, rgba(0,89,78,0.04)));
  border-bottom: 1px solid var(--border) !important;
}
.projects-modal-shell .modal-body {
  padding: 18px 26px 26px;
  max-height: 72vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,89,78,0.25) transparent;
}
.projects-modal-shell .modal-body::-webkit-scrollbar { width: 5px; }
.projects-modal-shell .modal-body::-webkit-scrollbar-thumb { background: rgba(0,89,78,0.25); border-radius: 99px; }

.projects-modal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 26px 18px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 96%, transparent);
}

.projects-tabs-shell { display: grid; gap: 16px; }
.projects-tabs-nav   { display: flex; gap: 10px; flex-wrap: wrap; }

.project-tab {
  min-width: 160px;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  text-align: left;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.project-tab:hover, .project-tab:focus-visible { transform: translateY(-1px); border-color: rgba(0,89,78,0.2); }
.project-tab.is-active {
  border-color: rgba(0,89,78,0.34);
  background: linear-gradient(135deg, rgba(0,89,78,0.08), rgba(181,161,96,0.08));
  box-shadow: 0 14px 28px rgba(15,23,42,0.08);
}
.project-tab span   { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.project-tab small  { color: var(--text-muted); font-size: .82rem; line-height: 1.5; }
.project-tab strong { color: var(--text); font-size: .98rem; font-weight: 900; }

.projects-tab-panel   { display: grid; gap: 12px; }
.projects-tab-content { display: grid; gap: 12px; }

/* Filters */
.projects-filters-shell {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(0,89,78,0.12);
  background: linear-gradient(180deg, rgba(0,89,78,0.03), rgba(37,99,235,0.03));
}
.projects-filters-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 10px;
  align-items: end;
}
.projects-filter-search { margin: 0; }
.projects-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.projects-filters-advanced {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.projects-filters-meta { color: var(--text-muted); font-size: .86rem; line-height: 1.6; }

.projects-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.projects-group-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

.project-admin-controls { display: grid; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(148,163,184,0.2); }
.project-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.project-admin-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(220px, 1fr) minmax(300px, 1.2fr);
  gap: 10px;
  align-items: end;
}
.project-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.project-id-input, .project-status-select { min-width: 0; }

/* ══════════════════════════════════════
   PHASE STEPPER
   ══════════════════════════════════════ */
.phase-stepper-shell {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(0,89,78,0.10);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 34px rgba(15,23,42,0.06);
}
.phase-stepper-shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.phase-stepper-shell-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--brand);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.phase-stepper-shell-copy { color: var(--text-muted); font-size: .82rem; line-height: 1.55; }

.phase-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.phase-step-pill {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 18px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  text-align: left;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}
.phase-step-pill:hover { transform: translateY(-1px); border-color: rgba(0,89,78,0.18); }

.phase-step-pill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.phase-step-pill-icon {
  width: 34px; height: 34px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,89,78,0.1);
  color: var(--brand);
  font-size: .9rem;
  flex: 0 0 auto;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.phase-step-pill.active   { border-color: rgba(0,89,78,0.22); background: rgba(0,89,78,0.08); box-shadow: inset 0 0 0 1px rgba(0,89,78,0.12); }
.phase-step-pill.completed { border-color: rgba(4,120,87,0.18); background: rgba(4,120,87,0.08); }
.phase-step-pill.active .phase-step-pill-icon { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; transform: translateY(-1px); }
.phase-step-pill.completed .phase-step-pill-icon { background: rgba(4,120,87,0.14); color: var(--green); }

.phase-step-pill-num {
  color: var(--brand);
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.phase-step-pill-copy { color: var(--text); font-size: .88rem; font-weight: 700; line-height: 1.35; }

/* ── Fixed progress dock ───────────────────────────────────────── */
.phase-progress-dock {
  position: fixed;
  bottom: 18px;
  left: 50%;
  z-index: 45;
  width: min(1100px, calc(100vw - 36px));
  padding: 13px;
  border-radius: 24px;
  border: 1px solid rgba(0,89,78,0.16);
  background: color-mix(in srgb, var(--card-solid) 92%, transparent);
  box-shadow: 0 20px 56px rgba(15,23,42,0.16);
  backdrop-filter: blur(22px);
  transform: translate(-50%, -14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.phase-progress-dock.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.phase-progress-dock-head { display: grid; gap: 9px; margin-bottom: 11px; }
.phase-progress-dock-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.phase-progress-dock-copy strong { color: var(--text); font-family: var(--font-heading); font-size: .98rem; font-weight: 900; }
.phase-progress-dock-copy span:last-child { color: var(--text-muted); font-size: .82rem; }
.phase-progress-dock-kicker {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  color: var(--brand);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.phase-progress-dock-track { height: 7px; border-radius: 999px; overflow: hidden; background: rgba(127,127,127,0.12); }
.phase-progress-dock-bar {
  display: block;
  width: 14.285%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width var(--transition-base);
}

.phase-progress-dock-stepper {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.phase-step-pill-dock {
  min-width: 86px;
  flex: 0 0 86px;
  padding: 10px 11px;
  justify-items: center;
  text-align: center;
  gap: 6px;
  box-shadow: none;
}
.phase-step-pill-dock .phase-step-pill-head  { width: 100%; justify-content: center; gap: 6px; }
.phase-step-pill-dock .phase-step-pill-icon  { width: 32px; height: 32px; border-radius: 11px; }
.phase-step-pill-dock .phase-step-pill-copy  { display: none; }

/* ══════════════════════════════════════
   FORM — steps, fields, controls
   ══════════════════════════════════════ */
.phase-form         { display: block; }
.wizard-step-panel  { display: none; }
.wizard-step-panel.is-active { display: block; }

.phase-block {
  padding: clamp(22px, 4vw, 36px) clamp(18px, 4vw, 40px);
}

.phase-step-text {
  margin: 0 0 clamp(22px, 4vw, 36px);
  color: var(--text-muted);
  line-height: 1.85;
  font-size: .96rem;
  max-width: 72ch;
  text-wrap: balance;
}

.phase-field-grid { display: grid; gap: clamp(20px, 3vw, 32px); }

.phase-subsection {
  display: grid;
  gap: 8px;
  padding: clamp(16px, 3vw, 22px) clamp(18px, 3.5vw, 26px);
  border-radius: 18px;
  border: 1px solid rgba(0,89,78,0.14);
  background: linear-gradient(135deg, rgba(0,89,78,0.07), rgba(181,161,96,0.07));
}
.phase-subsection-kicker { color: var(--brand); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.phase-subsection h5 { margin: 0; color: var(--text); font-family: var(--font-heading); font-size: 1.03rem; font-weight: 800; }
.phase-subsection p  { margin: 0; color: var(--text-muted); line-height: 1.7; font-size: .9rem; }

/* ── Field grid ────────────────────────────────────────────────── */
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.5vw, 20px);
}
.field-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── Field base ─────────────────────────────────────────────────── */
.field { display: grid; gap: 8px; }
.field.span-2, .field.span-3, .field.span-4 { grid-column: 1 / -1; }

.field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  transition: color var(--transition-fast);
}
label.field:has(.control-pro:focus) .field-label,
label.field:has(.catalog-search:focus) .field-label { color: var(--brand); }

.field.required .field-label::after {
  content: "·requerido";
  color: #d97706;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(217,119,6,0.1);
  white-space: nowrap;
}

.field-helper { color: var(--text-muted); font-size: .78rem; font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1.6; }

.field.is-invalid .control-pro,
.field.is-invalid .catalog-chipline,
.field.is-invalid .structured-builder {
  border-color: rgba(220,38,38,0.6);
  box-shadow: 0 0 0 4px rgba(220,38,38,0.08);
}
.field.is-invalid .field-label { color: #b91c1c; }

.field-error {
  color: #dc2626;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 5px;
}
.field-error::before { content: "⚠"; font-size: .68rem; }

/* ── Control ─────────────────────────────────────────────────────── */
.field-input,
.field-select,
.field-textarea,
.control-pro,
.field-chipline,
.stat-box {
  width: 100%;
  min-height: 52px;
  border-radius: 13px;
  border: 1.5px solid var(--border);
  background: var(--bg-2);
  color: var(--text-soft);
  padding: 13px 16px;
  font-size: .93rem;
  line-height: 1.55;
  font-family: var(--font-body);
}
.field-textarea { min-height: 130px; resize: none; }

.control-pro {
  appearance: none;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast),
    background   var(--transition-fast),
    color        var(--transition-fast);
}
.control-pro:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); background: var(--bg-soft); }
.control-pro::placeholder { color: color-mix(in srgb, var(--text-muted) 62%, transparent); font-size: .88rem; }
.control-pro:focus {
  outline: none;
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 4%, var(--bg-2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent), 0 2px 7px rgba(0,89,78,0.08);
  color: var(--text);
}
.control-pro:focus::placeholder { color: color-mix(in srgb, var(--text-muted) 38%, transparent); }
.control-pro-textarea { min-height: 170px; resize: vertical; field-sizing: content; }
.control-pro[type="number"]::-webkit-inner-spin-button,
.control-pro[type="number"]::-webkit-outer-spin-button { opacity: .4; }
.catalog-search:disabled { cursor: not-allowed; opacity: .78; }

/* ── Form blocks ───────────────────────────────────────────────── */
.screen-copy  { display: grid; gap: 12px; align-content: start; }
.screen-form  { display: grid; gap: 18px; }

.form-block {
  padding: clamp(20px, 3.5vw, 28px) clamp(18px, 3.5vw, 32px);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--card-solid);
  box-shadow: 0 4px 20px rgba(15,23,42,0.04);
}
.form-block h4 { margin-bottom: 8px; font-size: clamp(1.1rem, 2.5vw, 1.35rem); letter-spacing: -.02em; }

/* ── Note / check cards ────────────────────────────────────────── */
.note-stack { display: grid; gap: 10px; }
.note-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card-solid);
}
.note-card strong { display: block; color: var(--text); font-size: .93rem; margin-bottom: 7px; }
.note-card p, .note-card li { margin: 0; color: var(--text-muted); line-height: 1.65; font-size: .9rem; }
.note-card ul, .check-list { display: grid; gap: 7px; padding-left: .9rem; margin: 0; }

/* Phase block overrides */
.phase-block .section-kicker { font-size: .7rem; letter-spacing: .14em; margin-bottom: 7px; opacity: .8; }
.phase-block h4 { font-size: clamp(1.15rem, 2.5vw, 1.3rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.2; color: var(--text); margin-top: 0; margin-bottom: 9px; }
.phase-field-divider { height: 1px; background: var(--border); margin: 3px 0; border: none; }

/* Phase footer */
.phase-footer { align-items: center; }
.phase-footer-copy { display: grid; gap: 3px; max-width: 540px; }

/* ── Lock banner ───────────────────────────────────────────────── */
.phase-lock-banner {
  margin: 0 clamp(14px, 3vw, 24px) 7px;
  padding: clamp(14px, 2.5vw, 18px) clamp(16px, 3vw, 20px);
  border-radius: 20px;
  border: 1px solid rgba(181,161,96,0.28);
  background: linear-gradient(135deg, rgba(181,161,96,0.12), rgba(0,89,78,0.08));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.phase-lock-banner-copy { display: grid; gap: 5px; }
.phase-lock-banner-copy strong { color: var(--text); font-size: .98rem; }
.phase-lock-banner-copy p { margin: 0; color: var(--text-muted); line-height: 1.65; font-size: .9rem; }

/* ── Submit checks ─────────────────────────────────────────────── */
.phase-submit-checks { margin-top: 22px; display: grid; gap: 12px; }
.phase-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-solid) 92%, transparent);
  color: var(--text);
  line-height: 1.65;
  font-size: .92rem;
}
.phase-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--brand); flex: 0 0 auto; }
.phase-check span  { display: block; }
.phase-check-error { padding: 11px 13px; border-radius: 13px; background: rgba(220,38,38,0.08); color: #b91c1c; font-size: .9rem; font-weight: 700; }
.phase-submit-note { padding: 13px 15px; border-radius: 15px; background: rgba(0,89,78,0.07); color: var(--text-muted); line-height: 1.6; font-size: .9rem; }

/* ── Context grid ──────────────────────────────────────────────── */
.phase-context-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }

/* ── Danger button ─────────────────────────────────────────────── */
.btn-outline-danger-pro {
  border-color: rgba(220,38,38,0.28);
  color: #b91c1c;
  background: rgba(220,38,38,0.04);
}
.btn-outline-danger-pro:hover, .btn-outline-danger-pro:focus-visible {
  border-color: rgba(220,38,38,0.46);
  color: #991b1b;
  background: rgba(220,38,38,0.08);
}
.btn-outline-danger-pro:disabled { opacity: .56; cursor: not-allowed; }
html[data-theme="dark"] .btn-outline-danger-pro { color: #fca5a5; border-color: rgba(248,113,113,0.34); background: rgba(127,29,29,0.14); }
html[data-theme="dark"] .btn-outline-danger-pro:hover, html[data-theme="dark"] .btn-outline-danger-pro:focus-visible { color: #fecaca; border-color: rgba(248,113,113,0.5); background: rgba(127,29,29,0.22); }

/* ══════════════════════════════════════
   CATALOG / STRUCTURED SELECTORS
   ══════════════════════════════════════ */
.catalog-select      { display: grid; gap: 10px; }
.catalog-select-meta { color: var(--text-muted); font-size: .78rem; line-height: 1.6; }
.catalog-select-multi { gap: 10px; }

.catalog-chipline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1.5px solid var(--border);
  background: var(--bg-2);
  transition: border-color var(--transition-fast);
}
.catalog-chipline:has(.catalog-chip) {
  border-color: color-mix(in srgb, var(--brand) 22%, transparent);
  background: color-mix(in srgb, var(--brand) 3%, var(--bg-2));
}

.catalog-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .52rem .68rem;
  border-radius: 999px;
  background: rgba(0,89,78,0.1);
  color: var(--brand);
  font-size: .82rem;
  font-weight: 700;
}
.catalog-chip-remove {
  width: 24px; height: 24px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,89,78,0.16);
  color: var(--brand);
  cursor: pointer;
}
.catalog-chip-remove:hover { background: rgba(0,89,78,0.24); }
.catalog-empty { color: var(--text-muted); font-size: .86rem; line-height: 1.6; }

.catalog-multi-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}
.catalog-action { min-height: 52px; white-space: nowrap; }

.indicator-select-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Structured builder ────────────────────────────────────────── */
.structured-builder {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 3vw, 22px) clamp(18px, 3.5vw, 24px);
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--bg-soft);
  transition: border-color var(--transition-fast);
}
.structured-builder:focus-within { border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.structured-builder-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.structured-builder-head strong { color: var(--text); font-size: .93rem; font-weight: 800; }
.structured-builder-head span, .structured-builder-note { color: var(--text-muted); font-size: .82rem; line-height: 1.65; }
.structured-builder-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}
.structured-draft-textarea { min-height: 115px; }

.structured-objective-list { display: grid; gap: 10px; }
.structured-objective-item {
  display: grid;
  gap: 8px;
  padding: 13px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
}
.structured-objective-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.structured-objective-id {
  display: inline-flex;
  align-items: center;
  padding: .4rem .65rem;
  border-radius: 999px;
  background: rgba(0,89,78,0.1);
  color: var(--brand);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.structured-objective-remove {
  width: 32px; height: 32px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(220,38,38,0.1);
  color: #b91c1c;
  cursor: pointer;
}
.structured-objective-remove:hover, .structured-objective-remove:focus-visible { background: rgba(220,38,38,0.16); color: #991b1b; }
.structured-objective-textarea { min-height: 100px; }

/* ══════════════════════════════════════
   ACTIVITY / TABLE COMPONENTS
   ══════════════════════════════════════ */
.table-helper-text { margin-top: 5px; color: var(--text-muted); font-size: .8rem; line-height: 1.45; }
.table-input { min-width: 120px; padding: .66rem .76rem; }

.variance-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: .36rem .68rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .03em;
}
.variance-ok   { background: rgba(0,89,78,0.12); color: var(--brand); }
.variance-warn { background: rgba(220,38,38,0.10); color: #b91c1c; }

.month-flow-table { min-width: 1800px; }

.activity-builder { gap: 14px; }
.activity-builder-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.activity-builder-primary-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.activity-total-chip {
  display: inline-grid;
  gap: 3px;
  min-width: 200px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,89,78,0.12);
  background: linear-gradient(135deg, rgba(0,89,78,0.08), rgba(181,161,96,0.08));
}
.activity-total-chip strong { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 900; color: var(--text); }
.activity-total-chip span   { color: var(--text-muted); font-size: .82rem; line-height: 1.5; }

.activity-table-shell { display: grid; gap: 10px; }
.activity-section-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.activity-section-card { display: grid; gap: 5px; padding: 13px 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); }
.activity-section-card-id, .activity-section-inline {
  display: inline-flex;
  align-items: center;
  padding: .32rem .6rem;
  border-radius: 999px;
  background: rgba(181,161,96,0.14);
  color: color-mix(in srgb, var(--brand-2) 88%, #6b4f13);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  width: fit-content;
}
.activity-section-card strong { color: var(--text); line-height: 1.5; font-size: .9rem; }
.activity-section-card span:last-child { color: var(--text-muted); font-size: .82rem; }

.activity-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.activity-table-empty {
  padding: 16px;
  border-radius: 16px;
  border: 1px dashed var(--border);
  background: rgba(127,127,127,0.04);
  color: var(--text-muted);
  line-height: 1.65;
  font-size: .9rem;
}

.activity-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--card);
}
.activity-table thead th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-solid) 86%, transparent);
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Column visibility controls */
.activity-col-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--card-solid) 60%, transparent);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 13px 13px 0 0;
}
.activity-col-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-soft);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
  line-height: 1;
}
.activity-col-btn i { font-size: .7rem; }
.activity-col-btn:hover { color: var(--brand); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.activity-col-btn.is-hidden { opacity: 0.5; color: var(--text-muted); background: transparent; border-style: dashed; }
.activity-col-btn.is-hidden:hover { opacity: 1; color: var(--brand); border-color: var(--brand); border-style: solid; background: color-mix(in srgb, var(--brand) 8%, transparent); }
.activity-col-controls:not([hidden]) + .activity-table-scroll .activity-table { border-top-left-radius: 0; border-top-right-radius: 0; }

/* Column hide classes */
.activity-table.hide-col-0 thead th:nth-child(1), .activity-table.hide-col-0 .activity-data-row td:nth-child(1) { display: none; }
.activity-table.hide-col-1 thead th:nth-child(2), .activity-table.hide-col-1 .activity-data-row td:nth-child(2) { display: none; }
.activity-table.hide-col-2 thead th:nth-child(3), .activity-table.hide-col-2 .activity-data-row td:nth-child(3) { display: none; }
.activity-table.hide-col-3 thead th:nth-child(4), .activity-table.hide-col-3 .activity-data-row td:nth-child(4) { display: none; }
.activity-table.hide-col-4 thead th:nth-child(5), .activity-table.hide-col-4 .activity-data-row td:nth-child(5) { display: none; }
.activity-table.hide-col-5 thead th:nth-child(6), .activity-table.hide-col-5 .activity-data-row td:nth-child(6) { display: none; }
.activity-table.hide-col-6 thead th:nth-child(7), .activity-table.hide-col-6 .activity-data-row td:nth-child(7) { display: none; }

.activity-table tbody td, .activity-table tfoot td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
  font-size: .9rem;
}
.activity-table tbody tr:last-child td { border-bottom: 0; }
.activity-table-section-row td { background: color-mix(in srgb, rgba(0,89,78,0.08) 78%, var(--card-solid)); border-bottom: 1px solid var(--border); }

.activity-table-section-copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.activity-table-section-copy > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.activity-table-section-copy strong { color: var(--text); }
.activity-table-section-copy > span:last-child { color: var(--text-muted); font-size: .82rem; font-weight: 700; }

.activity-row-id {
  display: inline-flex;
  align-items: center;
  padding: .38rem .66rem;
  border-radius: 999px;
  background: rgba(0,89,78,0.1);
  color: var(--brand);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.activity-row-link { padding: 0; border: 0; background: transparent; cursor: pointer; }
.activity-row-link:hover .activity-row-id, .activity-row-link:focus-visible .activity-row-id { background: rgba(0,89,78,0.18); box-shadow: 0 0 0 3px rgba(0,89,78,0.08); }
.activity-row-main { min-width: 240px; }
.activity-row-main strong { display: block; color: var(--text); line-height: 1.6; }
.activity-cell-pending { color: #b45309; font-weight: 700; }

.activity-row-actions { display: flex; align-items: center; gap: 7px; }
.activity-row-action {
  width: 34px; height: 34px;
  border: 0;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,89,78,0.1);
  color: var(--brand);
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.activity-row-action:hover, .activity-row-action:focus-visible { transform: translateY(-1px); background: rgba(0,89,78,0.16); color: var(--brand-2); }
.activity-row-action.danger { background: rgba(220,38,38,0.1); color: #b91c1c; }
.activity-row-action.danger:hover, .activity-row-action.danger:focus-visible { background: rgba(220,38,38,0.16); color: #991b1b; }

.activity-table-total-row td { background: color-mix(in srgb, var(--card-solid) 84%, transparent); border-top: 1px solid var(--border); border-bottom: 0; }
.activity-table-total-copy { display: grid; gap: 3px; }
.activity-table-total-copy strong, .activity-table-total-value { color: var(--text); font-weight: 900; }
.activity-table-total-copy span { color: var(--text-muted); font-size: .82rem; }

.activity-modal-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.activity-modal-description { min-height: 126px; }
.activity-modal-note   { grid-column: 1 / -1; color: var(--text-muted); font-size: .8rem; line-height: 1.6; }
.activity-modal-error,
.activity-section-error {
  grid-column: 1 / -1;
  padding: 11px 13px;
  border-radius: 13px;
  background: rgba(220,38,38,0.08);
  color: #b91c1c;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.6;
}
.activity-section-form { display: grid; gap: 12px; }

/* ══════════════════════════════════════
   INDICATOR ADMIN
   ══════════════════════════════════════ */
.indicator-admin-grid {
  display: grid;
  grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr);
  gap: 16px;
}
.indicator-admin-panel { display: grid; gap: 12px; padding: 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--card-solid); }
.indicator-admin-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.indicator-admin-panel-head h6 { margin: 0 0 3px; color: var(--text); font-size: .96rem; font-weight: 800; }
.indicator-admin-panel-head p  { margin: 0; color: var(--text-muted); font-size: .82rem; line-height: 1.6; }
.indicator-admin-list { display: grid; gap: 10px; max-height: 500px; overflow: auto; padding-right: 4px; }
.indicator-admin-item { display: grid; gap: 8px; padding: 13px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); }
.indicator-admin-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.indicator-admin-item-copy { display: grid; gap: 3px; }
.indicator-admin-item-copy strong { color: var(--text); line-height: 1.5; font-size: .9rem; }
.indicator-admin-item-copy span { color: var(--text-muted); font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.indicator-admin-item-actions { display: flex; align-items: center; gap: 7px; }
.indicator-admin-item-formula { margin: 0; color: var(--text-muted); font-size: .82rem; line-height: 1.65; white-space: pre-wrap; }
.indicator-admin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.indicator-admin-textarea { min-height: 126px; }
.indicator-admin-error { grid-column: 1 / -1; padding: 11px 13px; border-radius: 13px; background: rgba(220,38,38,0.08); color: #b91c1c; font-size: .82rem; font-weight: 700; line-height: 1.6; }

/* ── Field chipline ────────────────────────────────────────────── */
.field-chipline { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-height: 52px; }
.ghost-pill {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .46rem .7rem;
  border-radius: 999px;
  background: rgba(0,89,78,0.08);
  color: var(--brand);
  font-weight: 700;
  font-size: .82rem;
}

/* ── Stat box ──────────────────────────────────────────────────── */
.stat-box { display: grid; gap: 5px; }
.stat-box strong { color: var(--text); font-family: var(--font-heading); }

/* ── Action groups ─────────────────────────────────────────────── */
.micro-actions, .screen-actions, .board-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Table mock ────────────────────────────────────────────────── */
.table-mock { overflow: auto; border-radius: 16px; border: 1px solid var(--border); }
.table-mock table { width: 100%; border-collapse: collapse; min-width: 720px; background: rgba(127,127,127,0.03); }
.table-mock th, .table-mock td { padding: 11px 13px; border-bottom: 1px solid var(--border); text-align: left; font-size: .88rem; }
.table-mock th { background: rgba(0,89,78,0.08); color: var(--text); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.table-mock td { color: var(--text-soft); }
.table-mock tr:last-child td { border-bottom: 0; }

/* ── Summary matrix ────────────────────────────────────────────── */
.summary-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.summary-card { padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: rgba(127,127,127,0.04); }
.summary-card strong { display: block; color: var(--text); font-family: var(--font-heading); margin-bottom: 5px; font-size: .96rem; }
.summary-card span   { color: var(--text-muted); font-size: .86rem; }

/* ══════════════════════════════════════
   TIMELINE GRID (cronograma)
   ══════════════════════════════════════ */
.timeline-grid { display: grid; gap: 12px; }
.timeline-row {
  display: grid;
  grid-template-columns: minmax(170px, 210px) repeat(6, minmax(0, 1fr));
  gap: 7px;
  align-items: center;
}
.timeline-row.timeline-head { grid-template-columns: minmax(170px, 210px) repeat(6, minmax(0, 1fr)); }
.timeline-cell {
  min-height: 44px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: rgba(127,127,127,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  color: var(--text-soft);
  font-size: .84rem;
  text-align: center;
}
.timeline-cell.is-name   { justify-content: flex-start; color: var(--text); font-weight: 700; }
.timeline-cell.is-active { background: linear-gradient(135deg, rgba(0,89,78,0.14), rgba(37,99,235,0.12)); color: var(--text); border-color: rgba(0,89,78,0.14); }

/* ── Check grid ────────────────────────────────────────────────── */
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(127,127,127,0.04);
  color: var(--text-soft);
  font-weight: 700;
  font-size: .9rem;
}
.check-item i { color: var(--green); flex-shrink: 0; }

/* ══════════════════════════════════════
   REVIEW & APPROVAL SCREENS
   ══════════════════════════════════════ */
.review-shell, .approval-shell { display: grid; gap: 18px; }

.board-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.board-tab {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 999px;
  padding: .72rem .96rem;
  font-weight: 800;
  font-size: .88rem;
  transition: all var(--transition-fast);
  cursor: pointer;
}
.board-tab.active, .board-tab:hover { background: rgba(0,89,78,0.08); border-color: rgba(0,89,78,0.16); color: var(--brand); }

.panel-view { display: none; }
.panel-view.active { display: block; }

.review-grid, .approval-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 18px;
}
.review-stack, .approval-stack, .info-stack { display: grid; gap: 14px; }

.review-card, .approval-card, .support-card {
  padding: clamp(16px, 3vw, 22px);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.comment-list, .audit-list { display: grid; gap: 10px; margin-top: 14px; }
.comment-card, .audit-card {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card-solid);
}
.comment-card strong, .audit-card strong { display: block; color: var(--text); margin-bottom: 5px; font-size: .92rem; }

.meta-line { display: flex; flex-wrap: wrap; gap: 7px 12px; color: var(--text-muted); font-size: .82rem; margin-top: 9px; }

.decision-grid, .security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.decision-card, .method-card { padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--card-solid); }
.method-card.active { border-color: rgba(0,89,78,0.22); box-shadow: inset 0 0 0 1px rgba(0,89,78,0.14); }
.decision-card strong, .method-card strong { display: block; color: var(--text); margin-bottom: 5px; font-size: .9rem; }

/* ── OTP ─────────────────────────────────────────────────────── */
.otp-shell { padding: 18px; border-radius: 20px; border: 1px dashed var(--border-strong); background: rgba(127,127,127,0.04); }
.otp-head  { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.otp-head p { margin-top: 5px; }
.otp-row   { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.otp-slot  {
  width: 52px; height: 58px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card-solid);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 900;
  color: var(--text);
}
.otp-slot:focus { outline: 2px solid rgba(0,89,78,0.2); border-color: rgba(0,89,78,0.18); }
.trust-line { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-muted); font-size: .82rem; }

/* ── Audit timeline ────────────────────────────────────────────── */
.audit-timeline { display: grid; gap: 14px; }
.audit-node { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; }
.audit-icon {
  width: 46px; height: 46px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,89,78,0.1);
  color: var(--brand);
  border: 1px solid rgba(0,89,78,0.14);
  flex-shrink: 0;
}
.audit-node .audit-card { margin: 0; }
.view-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.view-switch a { display: inline-flex; align-items: center; gap: .48rem; }

.screen-footer-bar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: clamp(14px, 3vw, 18px) clamp(16px, 3vw, 24px) clamp(18px, 3vw, 24px);
  border-top: 1px solid var(--border);
}
.screen-footer-bar p { margin: 0; color: var(--text-muted); font-size: .88rem; }

/* ══════════════════════════════════════
   HELP / AYUDA
   ══════════════════════════════════════ */
.help-step-list { display: grid; gap: 18px; }

.help-step-pager {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: clamp(14px, 3vw, 18px) clamp(16px, 3vw, 20px);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.help-step-pager-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.help-step-pager-copy strong { color: var(--brand); font-family: var(--font-heading); font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.help-step-pager-copy span   { color: var(--text); font-family: var(--font-heading); font-size: .98rem; font-weight: 700; }
.help-step-pager-tags, .help-step-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.help-step-pager-progress { width: 100%; height: 9px; border-radius: 999px; overflow: hidden; background: rgba(148,163,184,0.18); }
.help-step-pager-bar {
  display: block;
  width: 9.1%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width var(--transition-fast);
}

.help-step-list.is-paginated .help-step-card { display: none; }
.help-step-list.is-paginated .help-step-card.is-active { display: block; }
.help-step-card { overflow: hidden; }

.help-step-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: clamp(16px, 3vw, 24px) clamp(16px, 3vw, 24px) 0; }
.help-step-copy { display: grid; gap: 8px; }
.help-step-copy h3 { margin: 0; color: var(--text); font-family: var(--font-heading); font-size: clamp(1.1rem, 2.5vw, 1.36rem); font-weight: 800; }
.help-step-copy p  { margin: 0; color: var(--text-muted); line-height: 1.75; }

.help-step-tags .inline-chip,
.help-step-pager-tags .inline-chip { background: rgba(255,255,255,0.82); }

.help-step-body { display: grid; gap: 14px; padding: clamp(14px, 3vw, 18px) clamp(16px, 3vw, 24px) clamp(18px, 3vw, 24px); }

.help-sample-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.help-sample-table-shell { border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: var(--card-solid); }
.help-sample-title { display: block; padding: 16px 18px 0; color: var(--text); font-family: var(--font-heading); font-size: .94rem; font-weight: 800; }
.help-sample-table { width: 100%; border-collapse: collapse; }
.help-sample-table th, .help-sample-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: .92rem; }
.help-sample-table th { background: rgba(0,89,78,0.08); color: var(--text); font-family: var(--font-heading); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.help-sample-table tbody tr:last-child td { border-bottom: 0; }

.help-flow-grid, .help-status-grid, .help-evidence-grid, .help-principles-grid { display: grid; gap: 12px; }
.help-flow-grid       { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; }
.help-status-grid     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.help-evidence-grid,
.help-principles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.help-status-card { display: grid; gap: 7px; padding: 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-soft); }
.help-status-card strong { color: var(--brand); font-family: var(--font-heading); font-size: .86rem; font-weight: 800; letter-spacing: .04em; }
.help-status-card span   { color: var(--text-muted); line-height: 1.6; font-size: .9rem; }

.help-action-track { display: flex; flex-wrap: wrap; gap: 8px; }
.help-action-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .64rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(0,89,78,0.12);
  background: rgba(0,89,78,0.07);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: .82rem;
  font-weight: 700;
}

.help-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: clamp(14px, 3vw, 18px) clamp(16px, 3vw, 20px);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.help-step-nav-meta { flex: 1 1 auto; display: flex; justify-content: center; }
.help-step-card .control-pro[readonly], .help-step-card .control-pro:disabled { background: rgba(148,163,184,0.08); color: var(--text); }

/* ══════════════════════════════════════
   AIU SECTION
   ══════════════════════════════════════ */
.aiu-section {
  display: grid;
  gap: 22px;
  padding: clamp(18px, 3.5vw, 28px);
  border-radius: 18px;
  border: 1px solid rgba(0,89,78,0.15);
  background: linear-gradient(135deg, rgba(0,89,78,0.04), rgba(181,161,96,0.05));
}
.aiu-section-header { display: flex; align-items: flex-start; gap: 18px; }
.aiu-main-toggle-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 13px;
  border: 1.5px solid var(--border);
  background: var(--bg-2);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.aiu-main-toggle-label:has(.aiu-toggle-check:checked) {
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: color-mix(in srgb, var(--brand) 6%, var(--bg-2));
}
.aiu-main-toggle-text { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.aiu-main-toggle-label:has(.aiu-toggle-check:checked) .aiu-main-toggle-text { color: var(--brand); }
.aiu-iva-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 11px 14px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  color: var(--blue);
  font-size: .82rem;
  line-height: 1.5;
}

/* ══════════════════════════════════════
   MISC
   ══════════════════════════════════════ */
.access-gate-body { align-items: center; }

.demo-toast {
  position: fixed;
  right: clamp(12px, 3vw, 18px);
  bottom: clamp(12px, 3vw, 18px);
  z-index: 1200;
  min-width: min(350px, calc(100vw - 30px));
  padding: 13px 15px;
  border-radius: 16px;
  background: rgba(7,17,28,0.92);
  color: #fff;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.08);
  transform: translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.demo-toast.show { transform: translateY(0); opacity: 1; }

.workspace-footer { margin-top: 22px; }

/* ══════════════════════════════════════
   RESPONSIVE — 1200px
   ══════════════════════════════════════ */
@media (max-width: 1199.98px) {
  .workspace-layout,
  .review-grid,
  .approval-grid,
  .hero-grid-pro,
  .page-strip-grid,
  .screen-body {
    grid-template-columns: 1fr;
  }

  .wizard-rail { position: static; }

  .hero-actions-pro {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .85fr);
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — 992px
   ══════════════════════════════════════ */
@media (max-width: 991.98px) {
  .workspace-main { padding-top: 20px; }

  .workspace-hero, .mini-map, .support-card,
  .review-card, .approval-card { padding: clamp(16px, 3vw, 20px); }

  .field-grid.cols-3, .field-grid.cols-4,
  .summary-matrix, .hero-metrics, .signal-grid,
  .decision-grid, .security-grid,
  .step-map, .check-grid, .help-sample-grid-2,
  .help-flow-grid, .help-status-grid,
  .help-evidence-grid, .help-principles-grid {
    grid-template-columns: 1fr;
  }

  .phase-progress-dock { width: min(1100px, calc(100vw - 24px)); }

  .structured-builder-compose { grid-template-columns: 1fr; }
  .activity-modal-form         { grid-template-columns: 1fr; }
  .activity-builder-actions    { align-items: stretch; }
  .activity-builder-primary-actions,
  .activity-table-section-copy { align-items: stretch; }

  .help-step-pager-copy, .help-step-nav { flex-direction: column; align-items: stretch; }
  .help-step-nav-meta { justify-content: flex-start; }

  .activity-total-chip { width: 100%; }

  .indicator-admin-grid, .indicator-admin-form { grid-template-columns: 1fr; }

  .projects-group-grid,
  .projects-filters-bar,
  .projects-filters-advanced,
  .project-admin-grid { grid-template-columns: 1fr; }

  .projects-filter-actions { justify-content: stretch; }
  .projects-filter-actions .btn, .project-admin-actions .btn { flex: 1 1 200px; }

  .indicator-select-actions { align-items: stretch; }

  .phase-container .phase-screen { max-width: 100%; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px
   ══════════════════════════════════════ */
@media (max-width: 767.98px) {
  .screen-head, .screen-body, .screen-footer-bar { padding-inline: 14px; }

  .timeline-row, .timeline-row.timeline-head {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .timeline-cell.is-name { grid-column: 1 / -1; }

  .projects-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .project-tab { min-width: 155px; flex: 0 0 155px; }

  .otp-slot { width: calc((100% - 44px) / 6); min-width: 40px; }

  .hero-title-pro { font-size: clamp(1.85rem, 10vw, 2.7rem); }

  .hero-actions-pro { grid-template-columns: 1fr; align-items: stretch; }

  .phase-stepper {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .phase-step-pill { min-width: 148px; flex: 0 0 148px; }

  .phase-progress-dock {
    top: auto;
    bottom: 12px;
    width: min(400px, calc(100vw - 18px));
    border-radius: 20px;
    transform: translate(-50%, 14px);
  }
  .phase-progress-dock.is-visible { transform: translate(-50%, 0); }
  .phase-progress-dock-copy { align-items: flex-start; }
  .phase-step-pill-dock { min-width: 72px; flex-basis: 72px; padding-inline: 9px; }

  .catalog-multi-head { grid-template-columns: 1fr; }
  .screen-actions, .board-actions { flex-direction: column; align-items: stretch; }

  .site-header { padding-top: 12px; }

  .phase-block { padding: clamp(16px, 4vw, 22px) clamp(14px, 4vw, 20px); }
  .phase-step-text { max-width: 100%; }

  .field-grid, .field-grid.cols-3, .field-grid.cols-4 { grid-template-columns: 1fr; }

  .hero-grid-pro { gap: 16px; }
  .hero-actions-pro { gap: 10px; }
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px
   ══════════════════════════════════════ */
@media (max-width: 479.98px) {
  .workspace-hero { padding: 14px; border-radius: 20px; }

  .wizard-screen { border-radius: 20px; }

  .phase-stepper-shell { padding: 10px; border-radius: 18px; }
  .phase-step-pill { min-width: 135px; flex: 0 0 135px; padding: 10px 12px; }

  .phase-block { padding: 14px; }

  .activity-table { min-width: 780px; }

  .review-card, .approval-card, .support-card { padding: 14px; border-radius: 18px; }

  .help-step-head { padding: 14px 14px 0; }
  .help-step-body { padding: 12px 14px 14px; }

  .otp-slot { width: calc((100% - 36px) / 6); min-width: 36px; height: 50px; }

  .phase-progress-dock {
    width: min(380px, calc(100vw - 14px));
    padding: 11px;
    border-radius: 18px;
  }

  .command-card { padding: 14px; border-radius: 18px; }

  .phase-projects-card { padding: 13px; border-radius: 18px; }
  .phase-progress-card { padding: 13px; border-radius: 18px; }
}

/* ══════════════════════════════════════
   VIABILIDAD — CHECKLIST FORM
   ══════════════════════════════════════ */

/* Section group */
.viab-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.viab-section:last-child { margin-bottom: 0; }

.viab-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Check row */
.viab-check-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-fast);
}
.viab-check-row:last-child { border-bottom: none; }
.viab-check-row:hover { background: color-mix(in srgb, var(--brand) 3%, transparent); }

/* Determinante highlight */
.viab-check-determinante {
  background: color-mix(in srgb, var(--brand) 5%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--brand) 15%, transparent) !important;
}
.viab-check-determinante:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); }

.viab-check-label {
  flex: 1;
  font-size: .9rem;
  color: var(--text);
  line-height: 1.6;
}

/* Options group */
.viab-check-opts {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Radio pill */
.viab-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  user-select: none;
  white-space: nowrap;
}
.viab-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.viab-opt:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--card)); }

/* Cumple → green */
.viab-opt-cumple:has(input:checked),
.viab-opt-si:has(input:checked) {
  background: color-mix(in srgb, #16a34a 12%, var(--card));
  border-color: #16a34a;
  color: #15803d;
  box-shadow: 0 0 0 3px color-mix(in srgb, #16a34a 14%, transparent);
}

/* No Cumple / NO → red */
.viab-opt-no:has(input:checked) {
  background: color-mix(in srgb, #dc2626 12%, var(--card));
  border-color: #dc2626;
  color: #b91c1c;
  box-shadow: 0 0 0 3px color-mix(in srgb, #dc2626 14%, transparent);
}

/* N/A → muted */
.viab-opt-na:has(input:checked) {
  background: color-mix(in srgb, var(--text-muted) 12%, var(--card));
  border-color: var(--text-muted);
  color: var(--text-muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 14%, transparent);
}

/* Observation / textarea row */
.viab-obs-row {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.viab-obs-row:last-child { border-bottom: none; }
.viab-obs-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.viab-obs-row textarea.control-pro {
  min-height: 80px;
  resize: vertical;
}

/* Concept row (si/no overall verdict) */
.viab-concept-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.viab-concept-row:last-child { border-bottom: none; }
.viab-concept-label {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
}

/* Locked state — dim everything in form when project is radicado */
.phase-form[inert] .viab-check-row,
.phase-form fieldset[disabled] .viab-check-row { opacity: .55; pointer-events: none; }
.viab-opt:has(input:disabled) { opacity: .6; cursor: not-allowed; }

/* Responsive: stack opts below label on small screens */
@media (max-width: 640px) {
  .viab-check-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .viab-check-opts { flex-wrap: wrap; }
  .viab-opt { font-size: .76rem; padding: 4px 11px; }
  .viab-concept-row { flex-direction: column; align-items: flex-start; }
}