:root {
  --brand: #06AEEA;
  --brand-bright: #12B4E6;
  --brand-deep: #10243D;
  --brand-soft: #EAF9FE;
  --brand-soft-2: #F6FCFF;
  --bg: #F8FBFD;
  --panel: #FFFFFF;
  --ink: #10243D;
  --muted: #677789;
  --line: #DCE8EF;
  --navy: var(--brand-deep);
  --blue: var(--brand);
  --green: #2E8B57;
  --purple: #6F42C1;
  --amber: #B7791F;
  --red: #B33A3A;
  --soft-blue: var(--brand-soft);
  --soft-green: #EDF8F1;
  --soft-purple: #F4EFFC;
  --soft-amber: #FFF8E8;
  --shadow: 0 18px 50px rgba(16,36,61,.07);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 12% 0%, rgba(6,174,234,.055), transparent 28rem), var(--bg); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 10; background: rgba(250,253,255,.94); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(220,232,239,.92); }
.topbar-inner { max-width: 900px; margin: 0 auto; padding: 14px 24px 12px; }
.brand-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.brand { display: flex; gap: 10px; align-items: center; }
.brand-mark { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(145deg,var(--brand),var(--brand-bright)); color: var(--brand-deep); display: grid; place-items: center; font-family: ui-rounded, "Arial Rounded MT Bold", Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 700; box-shadow: 0 7px 20px rgba(6,174,234,.18); }
.brand h1 { font-family: ui-rounded, "Arial Rounded MT Bold", Inter, ui-sans-serif, system-ui, sans-serif; font-size: 17px; margin: 0; letter-spacing: -.01em; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.icon-btn { width: 38px; height: 38px; border: 1px solid var(--line); background: white; color: #5f6b7b; border-radius: 12px; display: grid; place-items: center; padding: 9px; transition: .15s; }
.icon-btn:hover { border-color: #bdc8d5; color: var(--navy); }
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }
.icon-btn.subtle { border: 0; background: #f2f4f7; font-size: 22px; padding: 0; }
.stage-nav { display: flex; gap: 8px; margin-top: 12px; }
.stage-btn { flex: 1; min-width: 0; border: 0; background: transparent; border-radius: 10px; padding: 7px 9px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #7a8594; font-size: 12px; font-weight: 700; }
.stage-btn .stage-number { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: #e9edf2; color: #697586; font-size: 11px; }
.stage-btn.active { color: var(--brand-deep); background: var(--brand-soft-2); box-shadow: inset 0 0 0 1px rgba(6,174,234,.22); }
.stage-btn.active .stage-number { background: var(--brand); color: var(--brand-deep); }
.stage-btn:disabled { opacity: .38; cursor: not-allowed; }
.progress-wrap { margin-top: 10px; }
.progress-copy { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; color: #7a8594; font-size: 11px; }
.progress-copy strong { color: var(--ink); font-size: 12px; }
.progress-track { height: 4px; background: #e8ecf1; border-radius: 999px; overflow: hidden; margin-top: 6px; }
.progress-bar { height: 100%; background: linear-gradient(90deg,var(--brand),var(--brand-bright)); border-radius: 999px; transition: width .22s ease; }
.main { max-width: 900px; margin: 0 auto; padding: 34px 24px 72px; }
.content { width: 100%; min-width: 0; }
.form-intro { max-width: 720px; margin: 0 auto 34px; }
.eyebrow { font-size: 12px; font-weight: 750; color: #048CBF; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 7px; }
.form-intro h2 { font-size: clamp(24px,4vw,34px); line-height: 1.15; letter-spacing: -.035em; margin: 0; }
.form-intro p { color: var(--muted); line-height: 1.55; margin: 9px 0 0; max-width: 620px; }
.typeform-wrap { max-width: 720px; margin: 0 auto; }
.question-context { display: flex; justify-content: space-between; gap: 12px; color: #87919e; font-size: 12px; margin-bottom: 14px; }
.typeform-question { min-height: 420px; display: flex; flex-direction: column; justify-content: center; padding: 10px 0 20px; }
.question-title-row { display: flex; align-items: flex-start; gap: 12px; }
.question-title-row h3 { font-size: clamp(26px,4vw,38px); line-height: 1.18; letter-spacing: -.035em; margin: 0; font-weight: 760; flex: 1; }
.question-help { color: var(--muted); font-size: 15px; line-height: 1.55; margin: 12px 0 24px; max-width: 640px; }
.optional-label { font-size: 11px; color: #8a94a2; padding-top: 8px; white-space: nowrap; }
.required { color: var(--red); }
.type-input { width: 100%; border: 0; border-bottom: 2px solid #cbd4df; background: transparent; border-radius: 0; padding: 12px 2px 10px; color: var(--ink); outline: none; font-size: 20px; transition: border-color .15s; }
.type-input:focus { border-color: var(--blue); }
.type-input::placeholder { color: #abb4bf; }
.type-textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.detail-input { margin-top: 18px; font-size: 15px; }
.input, textarea:not(.type-input), select { width: 100%; border: 1px solid #cfd7e2; border-radius: 12px; padding: 11px 12px; color: var(--ink); background: white; outline: none; }
.options { display: grid; gap: 9px; }
.option { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: center; padding: 13px 14px; border: 1px solid #d7dee7; border-radius: 13px; background: white; transition: .13s; user-select: none; }
.option:hover { border-color: rgba(6,174,234,.55); box-shadow: 0 2px 14px rgba(6,174,234,.07); }
.option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option-key { width: 28px; height: 28px; border: 1px solid #cbd4df; color: #627083; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: #f8fafc; }
.option:has(input:checked) .option-key { color: var(--brand-deep); background: var(--brand); border-color: var(--brand); }
.option input:disabled ~ * { opacity: .5; }
.option-boolean { max-width: 560px; }
.selection-count { color: var(--muted); font-size: 12px; margin-top: 10px; }
.paired-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.paired-grid label > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.form-nav { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.nav-link { border: 0; background: transparent; color: #738092; padding: 8px 0; font-weight: 650; }
.nav-link:hover { color: var(--ink); }
.nav-link:disabled { opacity: .28; cursor: not-allowed; }
.btn { border: 0; border-radius: 12px; padding: 11px 15px; font-weight: 750; }
.btn.primary { background: var(--brand); color: var(--brand-deep); box-shadow: 0 7px 18px rgba(6,174,234,.15); }
.btn.blue { background: var(--brand-deep); color: white; }
.btn.ghost { background: #eef1f5; color: #384455; }
.btn.danger { background: #fff0f0; color: #983737; }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.next-btn { min-width: 138px; }
.participant-bar { max-width: 720px; margin: -16px auto 20px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.participant-bar label:first-child { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.participant-bar select { padding: 8px 10px; width: auto; max-width: 310px; border-radius: 10px; }
.role-filter { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.mini-add { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: white; color: var(--blue); font-size: 18px; }
.wave-rail { display: flex; gap: 6px; margin-bottom: 20px; }
.wave-dot { flex: 1; border: 0; border-bottom: 2px solid #e0e5eb; background: transparent; padding: 8px 4px; color: #8a94a2; display: flex; align-items: center; justify-content: center; gap: 6px; }
.wave-dot span { width: 20px; height: 20px; border-radius: 999px; background: #eef1f5; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.wave-dot small { font-size: 11px; font-weight: 700; }
.wave-dot.active { border-color: var(--brand); color: var(--brand-deep); }
.wave-dot.active span { background: var(--brand); color: var(--brand-deep); }
.validation-link { border: 0; background: var(--soft-amber); color: #73511b; border-radius: 999px; padding: 7px 11px; font-size: 12px; font-weight: 700; margin-bottom: 14px; }
.media-controls { margin-top: 22px; padding-top: 13px; border-top: 1px solid #edf0f3; }
.media-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.media-btn { border: 0; background: transparent; color: #657286; padding: 5px 0; font-size: 12px; font-weight: 700; cursor: pointer; }
.media-btn:hover { color: var(--blue); }
.media-list { margin-top: 7px; display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.media-list button { border: 0; background: transparent; color: var(--blue); padding: 0 2px; }
.media-list .delete-media { color: var(--red); }
.workspace-wrap { max-width: 780px; margin: 0 auto; }
.workspace-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.workspace-head h3 { font-size: 26px; margin: 2px 0 5px; }
.workspace-head p { color: var(--muted); margin: 0; }
.finding-card { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 12px 0; box-shadow: var(--shadow); }
.finding-top { display: flex; justify-content: space-between; gap: 12px; }
.finding-kicker { color: #8993a1; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.finding-card h4 { margin: 3px 0 7px; font-size: 17px; }
.finding-card p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.severity-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--amber); flex: none; }
.severity-dot.high { background: var(--red); }
.severity-dot.medium { background: var(--amber); }
.severity-dot.low { background: var(--green); }
.finding-fields { margin-top: 14px; }
.finding-actions { margin-top: 12px; display: grid; gap: 8px; }
.action-row { padding: 10px 11px; background: #f7f9fc; border-radius: 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.action-row.done { opacity: .6; text-decoration: line-through; }
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.small { font-size: 12px; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; background: #eef1f5; color: #4f5b6c; font-size: 12px; font-weight: 650; }
.chip.pending::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.chip.role { background: var(--soft-blue); color: #2457a6; }
.notice { padding: 13px 14px; border-radius: 14px; background: var(--soft-amber); color: #73511b; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.notice.good { background: var(--soft-green); color: #286b48; }
.empty { text-align: center; padding: 36px 18px; color: var(--muted); border: 1px dashed #cfd8e3; border-radius: 16px; }
.empty.minimal { border: 0; padding: 70px 20px; }
.validation-list { display: grid; gap: 10px; }
.queue-item { border: 1px solid var(--line); border-radius: 13px; padding: 13px; }
.queue-item h4 { margin: 0 0 5px; font-size: 14px; }
.queue-item p { margin: 0; color: var(--muted); font-size: 12px; }
.finding-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(17,24,39,.44); display: grid; place-items: center; padding: 20px; z-index: 40; }
.modal { width: min(640px,100%); max-height: 90vh; overflow: auto; background: white; border-radius: 20px; padding: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.22); }
.modal h3 { margin-top: 0; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.modal-head h3 { margin: 3px 0 5px; }
.modal-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.technical-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--blue); }
.technical-status { display: flex; gap: 7px; flex-wrap: wrap; margin: 18px 0 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.stat { background: #f7f9fc; border-radius: 12px; padding: 11px; }
.stat strong { display: block; font-size: 18px; }
.stat span { font-size: 10px; color: var(--muted); }
.technical-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.dev-preview { white-space: pre-wrap; word-break: break-word; background: #111827; color: #dbeafe; padding: 13px; border-radius: 12px; font: 11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; max-height: 300px; overflow: auto; margin-top: 12px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.footer-note { text-align: center; color: #9aa3af; font-size: 10px; padding-top: 38px; }
@media (max-width: 720px) {
  .topbar-inner, .main { padding-left: 16px; padding-right: 16px; }
  .main { padding-top: 28px; }
  .stage-btn { padding: 7px 5px; }
  .stage-btn span:last-child { font-size: 11px; }
  .progress-copy { grid-template-columns: 1fr auto; }
  .progress-copy span:last-child { display: none; }
  .form-intro { margin-bottom: 24px; }
  .typeform-question { min-height: 340px; }
  .participant-bar { flex-wrap: wrap; margin-top: -8px; }
  .participant-bar label:first-child { flex-basis: 100%; }
  .role-filter { white-space: normal; }
  .paired-grid, .field-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .technical-actions { grid-template-columns: 1fr; }
  .workspace-head { display: block; }
  .workspace-head .nav-link { margin-top: 8px; }
}
@media (max-width: 480px) {
  /* Mantener SemVer visible en móvil; ocultar solo el contexto secundario. */
  .brand { min-width: 0; }
  .brand > div { min-width: 0; }
  .brand-meta { display: flex; flex-wrap: nowrap; margin-top: 3px; }
  .brand-meta > span:first-child, .brand-meta .meta-sep { display: none; }
  .version-link { flex: none; font-size: 10px; padding: 2px 7px; }
  .brand h1 { font-size: 16px; }
  .stage-btn .stage-number { display: none; }
  .question-title-row h3 { font-size: 27px; }
  .question-help { font-size: 14px; }
  .type-input { font-size: 18px; }
  .form-nav { position: sticky; bottom: 0; background: linear-gradient(180deg,rgba(247,248,250,0),var(--bg) 28%); padding-top: 28px; }
}


/* MiA identity — v2.0.2 */
.brand-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.meta-sep { color:#B5C2CC; }
.version-link { display:inline-flex; align-items:center; padding:2px 7px; border-radius:999px; color:#047DAA; background:var(--brand-soft); text-decoration:none; font-weight:800; font-size:10px; letter-spacing:.02em; transition:.15s; }
.version-link:hover { background:#DDF5FD; color:var(--brand-deep); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:3px solid rgba(6,174,234,.22); outline-offset:2px; }
.icon-btn:hover { border-color:rgba(6,174,234,.38); color:#047DAA; }
.type-input:focus { border-color:var(--brand); }
.mini-add, .media-list button { color:#047DAA; }
.media-btn:hover { color:#047DAA; }

/* Changelog */
.changelog-page { min-height:100vh; background:radial-gradient(circle at 15% 0%, rgba(6,174,234,.07), transparent 30rem), var(--bg); }
.changelog-shell { max-width:860px; margin:0 auto; padding:28px 24px 80px; }
.changelog-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:46px; }
.changelog-brand { display:flex; align-items:center; gap:12px; color:var(--brand-deep); text-decoration:none; }
.changelog-brand .brand-mark { flex:none; }
.changelog-brand strong { font-family:ui-rounded, "Arial Rounded MT Bold", Inter, ui-sans-serif, system-ui, sans-serif; font-size:17px; }
.back-home { color:#527084; text-decoration:none; font-weight:700; font-size:13px; }
.back-home:hover { color:#047DAA; }
.changelog-hero { margin-bottom:42px; }
.changelog-kicker { color:#047DAA; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:11px; }
.changelog-hero h1 { font-family:ui-rounded, "Arial Rounded MT Bold", Inter, ui-sans-serif, system-ui, sans-serif; font-size:clamp(34px,7vw,58px); line-height:1.02; letter-spacing:-.045em; margin:10px 0 14px; }
.changelog-hero p { max-width:680px; color:var(--muted); font-size:16px; line-height:1.65; }
.release { padding:26px 0; border-top:1px solid var(--line); }
.release-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
.release-version { font-family:ui-rounded, "Arial Rounded MT Bold", Inter, ui-sans-serif, system-ui, sans-serif; font-size:26px; margin:0; }
.release-meta { color:#8191A0; font-size:12px; white-space:nowrap; padding-top:6px; }
.release-badge { display:inline-flex; margin-left:8px; padding:3px 8px; border-radius:999px; background:var(--brand-soft); color:#047DAA; font:800 10px/1.4 Inter,ui-sans-serif,system-ui,sans-serif; vertical-align:middle; }
.change-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.change-card { border:1px solid var(--line); background:rgba(255,255,255,.82); border-radius:15px; padding:15px 16px; }
.change-card h3 { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#047DAA; margin:0 0 8px; }
.change-card ul { margin:0; padding-left:18px; color:#526374; font-size:13px; line-height:1.55; }
.change-card li+li { margin-top:5px; }
.history-note { margin-top:36px; padding:18px; border-radius:15px; background:var(--brand-soft-2); border:1px solid rgba(6,174,234,.16); color:#526374; line-height:1.6; font-size:13px; }
@media (max-width:640px) { .change-grid { grid-template-columns:1fr; } .release-head { display:block; } .release-meta { margin-top:5px; } .changelog-top { margin-bottom:32px; } }

/* Stage guidance — versión 2.0.2 */
.stage-intro { max-width: 840px; }
.stage-summary { max-width: 760px; }
.stage-guide { margin-top: 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 14px; padding: 13px 15px; border: 1px solid rgba(6,174,234,.14); background: rgba(246,252,255,.72); border-radius: 15px; }
.stage-guide-item { min-width: 0; display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 9px; align-items: start; }
.stage-guide-item span { color: #047DAA; font-size: 10px; line-height: 1.5; text-transform: uppercase; letter-spacing: .045em; font-weight: 800; }
.stage-guide-item p { margin: 0; color: #5D7182; font-size: 12px; line-height: 1.5; }
@media (max-width: 720px) {
  .stage-guide { grid-template-columns: 1fr; gap: 9px; padding: 12px 13px; }
  .stage-guide-item { grid-template-columns: 92px minmax(0,1fr); }
}
@media (max-width: 480px) {
  .stage-guide-item { display: block; }
  .stage-guide-item span { display: block; margin-bottom: 2px; }
}

/* Question guidance + human help — versión 2.0.2 */
.question-guide { margin: 2px 0 22px; border: 1px solid rgba(6,174,234,.14); border-radius: 14px; background: linear-gradient(135deg,rgba(246,252,255,.95),rgba(255,255,255,.82)); overflow:hidden; }
.question-guide-toggle { list-style:none; display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 12px; cursor:pointer; color:#047DAA; user-select:none; transition:.15s ease; }
.question-guide-toggle::-webkit-details-marker { display:none; }
.question-guide-toggle:hover { background:rgba(6,174,234,.045); }
.question-guide-toggle:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; border-radius:12px; }
.question-guide-toggle-copy { min-width:0; display:flex; flex-direction:column; gap:1px; }
.question-guide-toggle-copy strong { font-size:11px; letter-spacing:.01em; color:#047DAA; }
.question-guide-toggle-copy small { font-size:10px; line-height:1.4; color:#748795; font-weight:500; }
.guide-icon { flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:rgba(6,174,234,.12); color:#047DAA; font:800 11px/1 ui-rounded,"Arial Rounded MT Bold",Inter,ui-sans-serif,system-ui,sans-serif; }
.question-guide-chevron { flex:0 0 auto; margin-left:auto; color:#6D8798; font-size:16px; line-height:1; transition:transform .16s ease; transform-origin:center; }
.question-guide[open] .question-guide-chevron { transform:rotate(180deg); }
.question-guide[open] .question-guide-toggle { border-bottom:1px solid rgba(6,174,234,.10); background:rgba(6,174,234,.035); }
.question-guide-body { padding:12px 14px 14px; }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; }
.guide-item { min-width:0; }
.guide-item span { display:block; color:#6E8192; font-size:9px; font-weight:800; letter-spacing:.055em; text-transform:uppercase; margin-bottom:2px; }
.guide-item p { margin:0; color:#455B6C; font-size:11.5px; line-height:1.48; }
.guide-example p { color:#204E63; }
.guide-limit { padding-top:7px; border-top:1px solid rgba(6,174,234,.10); grid-column:1/-1; }
.guide-limit span { color:#8B6A2F; }
.guide-limit p { color:#6F6250; }

.human-help-btn { position:fixed; right:22px; bottom:22px; z-index:25; display:flex; align-items:center; gap:8px; border:1px solid rgba(6,174,234,.24); background:rgba(255,255,255,.96); color:var(--brand-deep); border-radius:999px; padding:9px 13px 9px 9px; font-size:12px; font-weight:800; box-shadow:0 12px 34px rgba(16,36,61,.12); backdrop-filter:blur(12px); transition:.15s ease; }
.human-help-btn:hover { transform:translateY(-1px); border-color:rgba(6,174,234,.5); box-shadow:0 14px 38px rgba(6,174,234,.14); }
.human-help-icon { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:var(--brand); color:var(--brand-deep); font:800 13px/1 ui-rounded,"Arial Rounded MT Bold",Inter,ui-sans-serif,system-ui,sans-serif; }
.help-modal { width:min(680px,100%); }
.help-context { margin:18px 0 14px; padding:11px 13px; border-radius:12px; background:var(--brand-soft-2); border:1px solid rgba(6,174,234,.13); }
.help-context span { display:block; color:#047DAA; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.055em; margin-bottom:3px; }
.help-context strong { display:block; font-size:13px; line-height:1.45; color:var(--brand-deep); }
.help-fields { margin-top:12px; }
.help-fields label, .help-note-label { color:#566A7B; font-size:11px; font-weight:700; }
.help-fields select, .help-fields input, .help-note-label textarea { margin-top:5px; font-weight:500; color:var(--ink); }
.help-note-label { display:block; margin-top:12px; }
.help-note-label textarea { min-height:100px; }
.help-answer-toggle { display:flex; align-items:flex-start; gap:8px; margin-top:12px; color:#596C7D; font-size:11px; line-height:1.45; }
.help-answer-toggle input { margin-top:2px; accent-color:var(--brand); }
.help-channel { margin-top:14px; border-radius:11px; padding:10px 12px; font-size:10.5px; line-height:1.5; }
.help-channel.pending { background:#FFF9EC; color:#725D35; border:1px solid #F4E4BB; }
.help-channel.connected { background:var(--soft-green); color:#286B48; border:1px solid #CDEBD8; }

@media (max-width:720px) {
  .guide-grid { grid-template-columns:1fr; gap:8px; }
  .guide-limit { grid-column:auto; }
  .human-help-btn { right:14px; bottom:14px; }
}
@media (max-width:480px) {
  .question-guide { margin-bottom:18px; }
  .question-guide-toggle { padding:9px 10px; }
  .question-guide-toggle-copy small { display:none; }
  .question-guide-body { padding:11px 12px 13px; }
  .human-help-btn { padding:8px; }
  .human-help-btn > span:last-child { display:none; }
  .human-help-icon { width:28px; height:28px; }
}


/* Entry gate + one-time stage intros — versión 2.0.2 */
.onboarding-screen, .stage-entry-screen { max-width: 840px; margin: 0 auto; }
.onboarding-intro, .stage-entry-intro { margin-bottom: 0; }
.entry-consents { margin-top: 22px; display: grid; gap: 10px; }
.entry-check { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 11px; align-items: start; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.86); cursor: pointer; transition: .15s ease; }
.entry-check:hover { border-color: rgba(6,174,234,.38); }
.entry-check:has(input:checked) { border-color: rgba(6,174,234,.45); background: var(--brand-soft-2); }
.entry-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); }
.entry-check strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.45; }
.entry-check small { display: block; color: #6B7D8D; font-size: 10.5px; line-height: 1.5; margin-top: 3px; }
.entry-check a { color: #047DAA; text-underline-offset: 2px; }
.entry-actions { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.entry-actions p { margin: 0; max-width: 460px; color: #83909C; font-size: 10px; line-height: 1.45; }
.entry-start { min-width: 190px; }
.stage-entry-actions { justify-content: flex-end; }
@media (max-width: 560px) {
  .entry-actions { display: grid; grid-template-columns: 1fr; }
  .entry-start, .stage-entry-actions .btn { width: 100%; }
  .stage-entry-actions { justify-content: stretch; }
}


/* Persistencia UX: al revisar una pregunta respondida se confirma que el dato ya está guardado. */
.saved-answer-indicator{display:inline-flex;align-items:center;gap:.35rem;margin:.35rem 0 .8rem;color:#4d6879;font-size:.82rem;font-weight:700;letter-spacing:-.01em}
.validation-link.advisory{color:var(--brand-deep);background:rgba(6,174,234,.07);border-color:rgba(6,174,234,.22)}

/* v3.0.0 · organizational need/value lens */
.diagnostic-lens { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px; padding:0 0 11px; border-bottom:1px solid rgba(6,174,234,.10); }
.diagnostic-lens span { display:inline-flex; align-items:center; min-height:24px; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:700; line-height:1.2; }
.lens-need { background:#edf8fc; color:#047da9; }
.lens-values { background:#f2f4f7; color:#596575; }
@media (max-width:480px) { .diagnostic-lens { gap:5px; } .diagnostic-lens span { font-size:9px; } }

/* v3.0.0-r2 — validation and governed closure */
.queue-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.queue-head h4 { margin:8px 0 0; }
.queue-actions { margin-top:12px; flex-wrap:wrap; }
.diagnostic-close-panel { margin-top:22px; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.diagnostic-close-panel h4 { margin:0 0 6px; }
.diagnostic-close-panel p { margin:0 0 14px; color:var(--muted); line-height:1.55; }
.modal[role="dialog"]:focus-within { outline:none; }

/* ==========================================================================\n   v3.0.0 pre-release · UI composition pass r3\n   Rebalances information density and layout without changing diagnostic logic.\n   ========================================================================== */
:root {
  --surface: #FFFFFF;
  --surface-muted: #F3F8FB;
  --surface-accent: #EDF9FD;
  --ink-soft: #334A5F;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow-soft: 0 16px 44px rgba(16,36,61,.075);
  --shadow-card: 0 8px 24px rgba(16,36,61,.055);
}

body {
  background:
    radial-gradient(circle at 10% -8%, rgba(6,174,234,.085), transparent 30rem),
    linear-gradient(180deg,#FBFDFE 0%,#F6FAFC 100%);
}

/* Wider institutional frame. The previous 720px column made the interface feel
   sparse while forcing support information into tiny typography. */
.topbar-inner,
.main {
  max-width: 1180px;
}
.topbar-inner { padding: 16px 28px 13px; }
.main { padding: 42px 28px 92px; }
.content { min-height: calc(100vh - 150px); }

.brand { gap: 12px; }
.brand-mark { width: 40px; height: 40px; font-size: 16px; }
.brand h1 { font-size: 18px; letter-spacing: -.02em; }
.brand p { font-size: 11px; }

.stage-nav {
  max-width: 680px;
  margin: 14px auto 0;
  padding: 4px;
  gap: 4px;
  border: 1px solid rgba(220,232,239,.9);
  border-radius: 14px;
  background: rgba(255,255,255,.68);
}
.stage-btn {
  min-height: 38px;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
}
.stage-btn.active {
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(16,36,61,.06), inset 0 0 0 1px rgba(6,174,234,.22);
}
.progress-wrap { max-width: 840px; margin: 10px auto 0; }
.progress-copy { font-size: 10.5px; }
.progress-track { height: 5px; margin-top: 7px; }

/* Stage introductions: main explanation + compact decision guide in a real grid. */
.onboarding-screen,
.stage-entry-screen,
.stage-intro {
  max-width: 1120px;
}
.form-intro { max-width: 1120px; margin-bottom: 38px; }
.stage-intro-grid {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(340px,.85fr);
  gap: 34px;
  align-items: start;
}
.stage-copy {
  padding: 22px 4px 14px 0;
}
.stage-copy .eyebrow { margin-bottom: 11px; }
.stage-copy h2,
.form-intro h2 {
  max-width: 760px;
  font-size: clamp(34px,4.6vw,54px);
  line-height: 1.04;
  letter-spacing: -.048em;
  font-weight: 760;
}
.stage-summary,
.form-intro p {
  max-width: 740px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.66;
  color: #5B6E7F;
}
.stage-guide {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 6px 20px;
  border: 1px solid rgba(6,174,234,.17);
  border-radius: 20px;
  background: linear-gradient(180deg,rgba(246,252,255,.97),rgba(255,255,255,.97));
  box-shadow: var(--shadow-card);
}
.stage-guide-item {
  display: grid;
  grid-template-columns: 116px minmax(0,1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(220,232,239,.8);
}
.stage-guide-item:last-child { border-bottom: 0; }
.stage-guide-item span {
  padding-top: 1px;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .07em;
}
.stage-guide-item p {
  font-size: 12.5px;
  line-height: 1.55;
  color: #4F6576;
}
.entry-consents {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.entry-check {
  min-height: 122px;
  grid-template-columns: 26px minmax(0,1fr);
  gap: 13px;
  padding: 18px 18px 17px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 5px 18px rgba(16,36,61,.035);
}
.entry-check strong { font-size: 13.5px; line-height: 1.45; }
.entry-check small { margin-top: 6px; font-size: 11.5px; line-height: 1.52; }
.entry-actions {
  margin-top: 18px;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.entry-actions p { max-width: 540px; font-size: 11px; line-height: 1.55; }
.entry-start { min-width: 220px; min-height: 48px; }
.stage-entry-actions { justify-content: flex-end; }

/* Question workspace: primary answer surface + proportional context rail. */
.typeform-wrap { max-width: 1160px; margin: 0 auto; }
.question-context {
  max-width: 760px;
  margin: 0 0 12px;
  padding: 0 4px;
  color: #6E8191;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
}
.wave-rail {
  max-width: 760px;
  margin: 0 0 18px;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.68);
}
.wave-dot {
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
}
.wave-dot.active {
  border: 0;
  background: var(--brand-soft-2);
  box-shadow: inset 0 0 0 1px rgba(6,174,234,.18);
}
.typeform-question {
  min-height: 0;
  padding: 0;
  display: block;
}
.question-layout {
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(300px,.92fr);
  gap: 24px;
  align-items: start;
}
.question-card {
  min-width: 0;
  min-height: 470px;
  display: flex;
  flex-direction: column;
  padding: 34px 36px 30px;
  border: 1px solid rgba(208,222,231,.95);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-soft);
}
.question-card-kicker {
  min-height: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 17px;
  color: #758695;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.question-title-row { display: block; }
.question-title-row h3 {
  max-width: 690px;
  font-size: clamp(28px,3vw,38px);
  line-height: 1.14;
  letter-spacing: -.038em;
  font-weight: 500;
  color: #355B73;
}
.question-title-static {
  color: #355B73;
  font-weight: 500;
}
.question-title-variable {
  color: #10243C;
  font-weight: 800;
}
.help-question-title .question-title-static { color: #49677A; font-weight: 500; }
.help-question-title .question-title-variable { color: #10243C; font-weight: 800; }
.optional-label {
  padding: 5px 8px;
  border-radius: 999px;
  background: #F0F4F7;
  color: #71808E;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .04em;
}
.saved-answer-indicator {
  margin: 11px 0 2px;
  padding: 7px 10px;
  align-self: flex-start;
  border-radius: 999px;
  background: #F0F8F4;
  color: #367052;
  font-size: 10.5px;
}
.question-answer {
  margin-top: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.type-input {
  font-size: 19px;
  line-height: 1.45;
  padding: 13px 2px 12px;
}
.type-textarea { min-height: 180px; }
.options { gap: 10px; }
.option {
  min-height: 52px;
  grid-template-columns: 32px minmax(0,1fr);
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  color: #243C50;
  font-size: 14px;
  line-height: 1.35;
}
.option-key { width: 30px; height: 30px; border-radius: 9px; }
.selection-count { margin-top: 12px; font-size: 11px; }
.media-controls { margin-top: 26px; }

.question-context-panel {
  position: sticky;
  top: 184px;
  min-width: 0;
}
.question-guide {
  margin: 0;
  padding: 22px;
  border: 1px solid rgba(208,222,231,.95);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg,#F5FBFD 0%,#FFFFFF 100%);
  box-shadow: var(--shadow-card);
}
.question-guide-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(208,222,231,.78);
}
.question-guide-head > div { min-width: 0; }
.question-guide-head strong {
  display: block;
  color: var(--brand-deep);
  font-size: 13px;
  line-height: 1.35;
}
.question-guide-head small {
  display: block;
  margin-top: 3px;
  color: #758695;
  font-size: 10.5px;
  line-height: 1.45;
}
.guide-icon {
  width: 24px;
  height: 24px;
  margin-top: 1px;
  font-size: 12px;
}
.diagnostic-lens {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 15px 0 0;
  padding: 0 0 15px;
}
.diagnostic-lens span {
  justify-content: flex-start;
  min-height: 30px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 10px;
  line-height: 1.35;
}
.guide-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2px;
}
.guide-item {
  padding: 13px 0;
  border-bottom: 1px solid rgba(220,232,239,.78);
}
.guide-item:last-child { border-bottom: 0; padding-bottom: 0; }
.guide-item span {
  margin-bottom: 5px;
  color: #047DAA;
  font-size: 9.5px;
  letter-spacing: .065em;
}
.guide-item p {
  color: #42596B;
  font-size: 12.5px;
  line-height: 1.55;
}
.guide-limit { padding-top: 13px; }

.form-nav {
  width: min(760px,100%);
  min-height: 58px;
  margin-top: 18px;
  padding: 0 4px;
}
.btn { min-height: 42px; padding: 11px 17px; border-radius: 12px; }
.next-btn { min-width: 154px; }

.participant-bar {
  max-width: 1160px;
  margin: 0 auto 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 4px 16px rgba(16,36,61,.035);
}
.participant-bar select { min-height: 38px; }

/* Findings/workspace: stronger information hierarchy. */
.workspace-wrap { max-width: 1120px; }
.workspace-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.workspace-head h3 { font-size: clamp(28px,3vw,38px); letter-spacing: -.035em; }
.workspace-head p { max-width: 720px; font-size: 14px; line-height: 1.55; }
.finding-card {
  padding: 24px 26px;
  margin: 14px 0;
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}
.finding-card h4 { font-size: 20px; line-height: 1.3; }
.finding-card > p { max-width: 820px; color: #52687A; line-height: 1.6; }
.finding-fields { gap: 16px; margin-top: 18px; }
.diagnostic-close-panel {
  padding: 24px 26px;
  border-radius: 20px;
  background: linear-gradient(180deg,#FFFFFF,#F7FBFD);
  box-shadow: var(--shadow-card);
}

/* Responsive composition is redesigned rather than simply shrunk. */
@media (max-width: 980px) {
  .stage-intro-grid { grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: 24px; }
  .question-layout { grid-template-columns: minmax(0,1.55fr) minmax(280px,.85fr); gap: 18px; }
  .question-card { padding: 30px 30px 26px; }
  .question-guide { padding: 19px; }
}

@media (max-width: 820px) {
  .topbar-inner, .main { padding-left: 20px; padding-right: 20px; }
  .main { padding-top: 30px; }
  .stage-intro-grid, .question-layout { grid-template-columns: 1fr; }
  .stage-copy { padding: 4px 0 0; }
  .stage-copy h2, .form-intro h2 { font-size: clamp(31px,7vw,44px); }
  .stage-guide { margin-top: 2px; }
  .entry-consents { grid-template-columns: 1fr; }
  .entry-check { min-height: 0; }
  .question-card { min-height: 0; }
  .question-context-panel { position: static; }
  .question-guide { margin-top: 0; }
  .participant-bar { margin-top: 0; }
  .wave-rail, .question-context, .form-nav { max-width: 100%; }
}

@media (max-width: 560px) {
  .topbar-inner { padding: 12px 14px 10px; }
  .main { padding: 22px 14px 78px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand h1 { font-size: 16px; }
  .stage-nav { margin-top: 10px; }
  .stage-btn { min-height: 34px; padding: 6px 5px; }
  .stage-btn span:last-child { font-size: 10.5px; }
  .progress-wrap { margin-top: 8px; }
  .stage-copy h2, .form-intro h2 { font-size: clamp(29px,9vw,38px); line-height: 1.07; }
  .stage-summary, .form-intro p { margin-top: 12px; font-size: 14.5px; line-height: 1.58; }
  .stage-guide { padding: 2px 15px; border-radius: 17px; }
  .stage-guide-item { grid-template-columns: 96px minmax(0,1fr); gap: 10px; padding: 13px 0; }
  .stage-guide-item p { font-size: 11.5px; }
  .entry-consents { margin-top: 22px; gap: 10px; }
  .entry-check { padding: 15px; border-radius: 15px; }
  .entry-check strong { font-size: 12.5px; }
  .entry-check small { font-size: 10.5px; }
  .entry-actions { display: grid; grid-template-columns: 1fr; }
  .entry-start, .stage-entry-actions .btn { width: 100%; }

  .participant-bar { padding: 10px 11px; border-radius: 13px; }
  .wave-rail { overflow-x: auto; scrollbar-width: none; }
  .wave-rail::-webkit-scrollbar { display: none; }
  .wave-dot { min-width: 94px; }
  .wave-dot span { display: none; }
  .question-context { margin-bottom: 9px; padding: 0 2px; font-size: 10px; }
  .question-card {
    padding: 22px 18px 20px;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(16,36,61,.05);
  }
  .question-card-kicker { margin-bottom: 13px; }
  .question-title-row h3 { font-size: clamp(24px,7vw,30px); line-height: 1.16; }
  .question-answer { margin-top: 22px; }
  .type-input { font-size: 17px; }
  .type-textarea { min-height: 150px; }
  .option { min-height: 50px; padding: 12px 12px; font-size: 13.5px; }
  .question-guide {
    padding: 17px 16px;
    border-radius: 18px;
    box-shadow: none;
  }
  .question-guide-head small { font-size: 10px; }
  .diagnostic-lens span { font-size: 9.5px; }
  .guide-item p { font-size: 12px; }
  .form-nav {
    position: sticky;
    bottom: 0;
    z-index: 9;
    margin-top: 14px;
    padding: 22px 2px 8px;
    background: linear-gradient(180deg,rgba(246,250,252,0),rgba(246,250,252,.95) 25%,#F6FAFC 44%);
  }
  .form-nav .btn { min-height: 44px; }
  .next-btn { min-width: 144px; }
  .human-help-btn { right: 12px; bottom: 66px; }
  .finding-card { padding: 20px 18px; border-radius: 18px; }
  .diagnostic-close-panel { padding: 20px 18px; }
}

@media (max-width: 390px) {
  .stage-btn span:last-child { font-size: 10px; }
  .stage-guide-item { display: block; }
  .stage-guide-item span { display: block; margin-bottom: 3px; }
  .question-card { padding-left: 16px; padding-right: 16px; }
  .question-title-row h3 { font-size: 24px; }
  .option { grid-template-columns: 29px minmax(0,1fr); gap: 10px; }
  .option-key { width: 28px; height: 28px; }
}

@media (max-width:560px) {
  .human-help-btn.entry { bottom: 14px; }
}

/* Help belongs to the sticky navigation layer, never above form content. */
.header-actions { display:flex; align-items:center; gap:8px; }
.human-help-btn.header-help {
  position: static;
  right: auto;
  bottom: auto;
  z-index: auto;
  min-height: 38px;
  padding: 6px 11px 6px 7px;
  border-radius: 12px;
  box-shadow: none;
  background: rgba(255,255,255,.9);
}
.human-help-btn.header-help .human-help-icon { width:24px; height:24px; }
@media (max-width:560px) {
  .header-actions { gap:6px; }
  .human-help-btn.header-help { width:38px; height:38px; padding:6px; border-radius:12px; }
  .human-help-btn.header-help > span:last-child { display:none; }
  .human-help-btn.header-help .human-help-icon { width:24px; height:24px; }
}

/* Release navigation — v3.0.0 pre-release: changelog + SemVer remain explicit on every viewport. */
.brand-meta .stage-meta { min-width:0; }
.version-link {
  gap:5px;
  min-height:22px;
  padding:3px 8px;
  white-space:nowrap;
}
.version-link-label { font-weight:800; }
.version-link-sep { color:#7FB7CA; font-weight:700; }
.version-link-version { font-variant-numeric:tabular-nums; font-weight:850; }
.changelog-top-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.changelog-current {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:5px 9px;
  border:1px solid rgba(6,174,234,.18);
  border-radius:999px;
  background:var(--brand-soft-2);
  color:#527084;
  font-size:10px;
  white-space:nowrap;
}
.changelog-current strong { color:#047DAA; font-size:11px; font-variant-numeric:tabular-nums; }

@media (max-width:560px) {
  .brand-meta { gap:5px; }
  .brand-meta .stage-meta, .brand-meta .meta-sep { display:none; }
  .version-link { font-size:10px; min-height:23px; padding:3px 7px; }
  .version-link-label, .version-link-sep, .version-link-version { display:inline; }
  .changelog-shell { padding:18px 14px 64px; }
  .changelog-top { align-items:flex-start; gap:12px; margin-bottom:30px; }
  .changelog-brand { gap:9px; min-width:0; }
  .changelog-brand strong { font-size:15px; }
  .changelog-top-actions { flex-direction:column; align-items:flex-end; gap:7px; }
  .changelog-current { min-height:27px; padding:4px 8px; }
  .back-home { font-size:11px; white-space:nowrap; }
  .changelog-hero { margin-bottom:30px; }
  .changelog-hero h1 { font-size:clamp(34px,12vw,46px); }
}

@media (max-width:390px) {
  .version-link { gap:4px; padding-left:6px; padding-right:6px; }
  .changelog-current > span { display:none; }
  .changelog-top-actions { gap:6px; }
}