html { font-size: 15px; min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* Paleta neutra: gris frío con un solo acento */
:root, [data-bs-theme="light"] {
  --bs-body-bg: #f6f7f9;
  --bs-body-color: #1f2328;
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: #2563eb;
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: #1d4ed8;
  --bs-link-hover-color-rgb: 29, 78, 216;
  --surface: #ffffff;
  --surface-border: #e3e6ea;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #0f1216;
  --bs-body-color: #e6e8eb;
  --bs-primary: #5b8def;
  --bs-primary-rgb: 91, 141, 239;
  --bs-link-color: #7aa2f7;
  --bs-link-color-rgb: 122, 162, 247;
  --bs-link-hover-color: #9ab8ff;
  --bs-link-hover-color-rgb: 154, 184, 255;
  --surface: #171b21;
  --surface-border: #262c35;
}
.btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-link-hover-color); --bs-btn-hover-border-color: var(--bs-link-hover-color); }

.site-header .navbar { background: var(--surface); }
.brand-mark { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--bs-primary); margin-right: .5rem; transform: rotate(45deg); }

.theme-toggle { display: inline-flex; align-items: center; padding: .55rem .9rem; border-radius: .75rem; }
[data-bs-theme="dark"] .icon-sun { display: inline; }
[data-bs-theme="dark"] .icon-moon { display: none; }
[data-bs-theme="light"] .icon-sun { display: none; }
[data-bs-theme="light"] .icon-moon { display: inline; }

.card { background: var(--surface); border-color: var(--surface-border); border-radius: .9rem; }
.card-header { background: transparent; border-color: var(--surface-border); }
.form-control, .form-select { background: var(--surface); border-color: var(--surface-border); }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); border-color: var(--bs-primary); }

.footer { padding: 1.25rem 0; border-top: 1px solid var(--surface-border); }

.hero { padding: 4rem 0 2rem; }
.hero h1 { font-weight: 650; letter-spacing: -.01em; }

.stat { background: var(--surface); border: 1px solid var(--surface-border); border-radius: .9rem; padding: 1rem 1.25rem; }
.stat .value { font-size: 2rem; font-weight: 650; line-height: 1.1; }
.stat .label { color: var(--bs-secondary-color); font-size: .85rem; }

.question-card { position: relative; }
.question-card .q-index { position: absolute; top: -.7rem; left: 1rem; background: var(--bs-primary); color: #fff; font-size: .75rem; padding: .15rem .55rem; border-radius: 999px; }

/* Escala de respuesta */
.scale { display: flex; flex-wrap: wrap; gap: .4rem; }
.scale input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.scale label { min-width: 2.75rem; text-align: center; padding: .55rem .5rem; border: 1px solid var(--surface-border); border-radius: .6rem; cursor: pointer; background: var(--surface); user-select: none; }
.scale input[type="radio"]:checked + label { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.scale input[type="radio"]:focus-visible + label { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35); }
.scale-ends { display: flex; justify-content: space-between; font-size: .85rem; color: var(--bs-secondary-color); margin-top: .35rem; }

/* Distribución de resultados */
.dist { display: grid; grid-template-columns: 2.25rem 1fr 3.5rem; gap: .35rem .6rem; align-items: center; }
.dist .bar { height: .8rem; background: var(--surface-border); border-radius: 999px; overflow: hidden; }
.dist .bar > span { display: block; height: 100%; background: var(--bs-primary); border-radius: 999px; }
.dist .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); font-size: .85rem; }

.open-answer { border-left: 3px solid var(--bs-primary); padding: .5rem .9rem; margin-bottom: .6rem; background: var(--surface); border-radius: 0 .5rem .5rem 0; white-space: pre-wrap; }