:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eef4ff;
  background: #07101f;
  --ods-bg: #07101f;
  --ods-panel: #0d192c;
  --ods-panel-2: #111f35;
  --ods-border: #263a58;
  --ods-blue: #1677ff;
  --ods-cyan: #2cbcff;
  --ods-muted: #9fb0ca;
  --ods-danger: #ff776d;
  --ods-success: #50d890;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0%, #132849 0, var(--ods-bg) 38%); }
a { color: inherit; text-decoration: none; }
.ods-topbar { min-height: 86px; padding: 14px clamp(20px, 4vw, 58px); display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 2px solid var(--ods-blue); background: rgba(5, 13, 27, .94); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px); }
.ods-brand { display: flex; align-items: center; gap: 13px; }
.ods-brand-mark { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid #465a76; border-radius: 14px; font-weight: 900; background: linear-gradient(145deg, #1d2d45, #060c16); box-shadow: inset 0 0 16px rgba(255,255,255,.08); }
.ods-brand strong { display: block; font-size: 1.03rem; letter-spacing: .02em; }
.ods-brand small { display: block; color: var(--ods-muted); margin-top: 3px; }
.ods-topbar nav { display: flex; gap: 9px; color: var(--ods-muted); font-size: .9rem; }
.ods-topbar nav strong { color: #fff; }
.ods-shell { max-width: 1220px; margin: 0 auto; padding: 34px 28px 64px; }
.hero { display: grid; grid-template-columns: 1fr 230px; gap: 28px; align-items: center; padding: 36px; border: 1px solid var(--ods-border); border-radius: 22px; background: linear-gradient(145deg, rgba(18,42,75,.95), rgba(8,22,43,.98)); box-shadow: 0 22px 70px rgba(0,0,0,.3); }
.eyebrow { letter-spacing: .12em; text-transform: uppercase; color: var(--ods-cyan); font-size: .76rem; font-weight: 800; }
h1 { margin: 6px 0 14px; max-width: 860px; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.04; }
h2, h3, h4 { color: #fff; }
.hero p:last-child { color: #c3d0e3; max-width: 820px; line-height: 1.65; }
.score-card { min-height: 160px; display: grid; place-content: center; text-align: center; border: 1px solid #315177; background: rgba(18,44,79,.72); border-radius: 18px; }
.score-card span { font-size: 3.7rem; font-weight: 900; color: var(--ods-cyan); }
.score-card small { color: var(--ods-muted); }
.panel { position: relative; background: linear-gradient(145deg, var(--ods-panel), #0a1628); margin-top: 22px; border: 1px solid var(--ods-border); border-radius: 18px; padding: 28px; box-shadow: 0 10px 36px rgba(0,0,0,.18); overflow: hidden; }
.section-number { position: absolute; right: 24px; top: 15px; font-size: 3.5rem; font-weight: 900; color: rgba(44,188,255,.08); }
.panel h2 { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
label { display: grid; gap: 7px; color: #dce7f7; font-weight: 700; font-size: .88rem; }
input, select { width: 100%; border: 1px solid #304563; border-radius: 10px; padding: 11px 12px; font: inherit; color: #f5f8fd; background: #101d31; outline: none; }
input:focus, select:focus { border-color: var(--ods-cyan); box-shadow: 0 0 0 3px rgba(44,188,255,.13); }
button { border: 1px solid #365174; border-radius: 10px; padding: 11px 18px; margin-top: 18px; cursor: pointer; font-weight: 800; color: #fff; background: #172943; transition: transform .15s ease, border-color .15s ease, opacity .15s ease; }
button:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--ods-cyan); }
button:disabled { opacity: .55; cursor: wait; }
button.primary, #start { border-color: #1b82ff; background: linear-gradient(135deg, #0e65d5, #199ee8); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-head p, .panel > p { color: var(--ods-muted); }
.question { border-top: 1px solid #223754; padding: 20px 0; }
.question-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.question h4 { margin: 0 0 12px; font-size: .99rem; line-height: 1.5; }
.controls { display: grid; grid-template-columns: 175px 190px 1fr; gap: 12px; }
.dimension-title { margin: 30px 0 8px; color: var(--ods-cyan); }
.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #1a2e49; color: #bcd2ed; font-size: .75rem; margin-left: 5px; white-space: nowrap; }
.badge.critical { background: rgba(255,119,109,.15); color: #ffaaa4; }
.status { margin: 18px 0 0; padding: 12px 15px; border: 1px solid var(--ods-border); border-radius: 12px; background: #102039; color: #d7e5f8; }
.status-error { border-color: rgba(255,119,109,.6); color: #ffc0bc; }
.status-success { border-color: rgba(80,216,144,.55); color: #9ceabb; }
.result-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.result-summary > div { padding: 15px; border: 1px solid var(--ods-border); border-radius: 12px; background: var(--ods-panel-2); }
.result-summary small { display: block; color: var(--ods-muted); }
.result-summary strong { display: block; margin-top: 5px; font-size: 1.12rem; }
.alert { border-left: 4px solid var(--ods-danger); padding: 11px 14px; background: rgba(255,119,109,.08); margin: 8px 0; color: #f6d4d1; }
.action { border: 1px solid var(--ods-border); border-radius: 13px; padding: 15px; margin: 10px 0; background: #0e1c30; }
.action > strong { color: var(--ods-cyan); font-size: .78rem; }
.action h4 { margin: 7px 0; }
.action p, .action small { color: var(--ods-muted); }
.empty-state { padding: 18px; border: 1px dashed #36506f; border-radius: 12px; color: var(--ods-muted); }
.hidden { display: none !important; }
@media (max-width: 900px) {
  .ods-topbar { align-items: flex-start; }
  .ods-topbar nav { display: none; }
  .hero, .grid, .controls, .result-summary { grid-template-columns: 1fr; }
  .section-head, .question-heading { align-items: stretch; flex-direction: column; }
}
@media (max-width: 560px) {
  .ods-shell { padding: 20px 14px 42px; }
  .hero, .panel { padding: 20px; }
  .ods-brand small { display: none; }
}

.result-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.result-toolbar h2 { margin-bottom:4px; }
.result-toolbar p { margin:0; color:var(--ods-muted); }
.export-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.export-button { margin-top:0; min-width:145px; }
@media (max-width: 700px) { .result-toolbar { flex-direction:column; } .export-actions { width:100%; } .export-button { flex:1; } }


/* v1.2.1: barra persistente de exportación */
body.ods-export-ready { padding-bottom: 92px; }
.ods-export-dock {
  position: fixed;
  right: 24px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #315177;
  border-radius: 14px;
  background: rgba(7, 16, 31, .96);
  box-shadow: 0 16px 48px rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
}
.ods-export-dock-label { color: var(--ods-muted); font-size: .82rem; font-weight: 800; white-space: nowrap; }
.ods-export-dock .export-button { min-width: 92px; margin: 0; }
@media (max-width: 620px) {
  body.ods-export-ready { padding-bottom: 112px; }
  .ods-export-dock { left: 12px; right: 12px; bottom: 10px; justify-content: stretch; }
  .ods-export-dock-label { display: none; }
  .ods-export-dock .export-button { flex: 1; }
}

/* v1.2.3: controles visibles desde la carga y habilitados al calcular */
body.ods-export-controls-visible { padding-bottom: 92px; }
.export-actions { align-items: center; }
.export-hint { flex-basis: 100%; color: var(--ods-muted); text-align: right; font-size: .76rem; }
.export-button:disabled { opacity: .48; filter: grayscale(.35); cursor: not-allowed; transform: none; }
.ods-version-badge {
  position: fixed;
  left: 12px;
  bottom: 10px;
  z-index: 79;
  padding: 5px 8px;
  border: 1px solid rgba(49,81,119,.75);
  border-radius: 999px;
  background: rgba(7,16,31,.88);
  color: #7f93b0;
  font-size: .68rem;
  font-weight: 800;
}
@media (max-width: 620px) {
  body.ods-export-controls-visible { padding-bottom: 112px; }
  .ods-version-badge { display: none; }
  .export-hint { text-align: left; }
}
@media print {
  .ods-export-dock, .ods-version-badge, .export-actions { display: none !important; }
  body, body.ods-export-controls-visible, body.ods-export-ready { padding-bottom: 0 !important; }
}