/* Smart IT Scan — Sistema de diseño "Instrumento sobrio" (§13 del brief de junio
   de 2026). El dato (G) es el único color.

   Migrado de `index.css` sin cambiar un token. Lo que se agregó está al final,
   en su propio bloque: nada de lo de arriba se tocó.

   Las tipografías se declaran acá y se sirven desde el propio origen. El brief
   las cargaba de Google Fonts; muchas redes corporativas lo bloquean, y este
   instrumento se responde en el computador del trabajo. La licencia de IBM Plex
   —SIL Open Font License 1.1— se sirve en /estatico/fuentes/LICENCIA.txt. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/estatico/fuentes/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/estatico/fuentes/IBMPlexSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/estatico/fuentes/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/estatico/fuentes/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/estatico/fuentes/IBMPlexMono-Medium.woff2") format("woff2");
}

/* Scan IT — Sistema de diseño "Instrumento sobrio" (§13). El dato (G) es el único color. */
:root {
  --paper: #f3f4f6;
  --surface: #ffffff;
  --ink: #12171e;
  --slate: #586273;
  --faint: #8a93a0;
  --line: #e4e7ec;
  --line2: #edeff2;
  --signal: #0f6e66;
  --signal-soft: rgba(15, 110, 102, 0.1);

  --green: #4f8a6b;
  --amber: #b98a3c;
  --red: #b3503f;

  --sans: "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 6px;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}

h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 8px 0;
  color: var(--ink);
}

.sub {
  color: var(--slate);
  font-size: 14px;
  max-width: 58ch;
  margin: 0;
}

/* ---- Brand / wordmark ---- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1.5px solid var(--ink);
  position: relative;
  flex: 0 0 auto;
}
.mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  bottom: 3px;
  width: 1.5px;
  background: var(--signal);
  transform: translateX(-50%);
}
.word {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.word-it {
  color: var(--signal);
}

/* ---- Shell / steps ---- */
.shell {
  margin: 0 auto;
  padding: 30px 26px 56px;
}
.shell--input {
  max-width: 760px;
}
.shell--result {
  max-width: 940px;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
}

.railrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 22px;
}
.rail {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 100px;
  overflow: hidden;
}
.rail i {
  display: block;
  height: 100%;
  background: var(--signal);
  border-radius: 100px;
  transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .rail i {
    transition: none;
  }
}
.railrow .step-label {
  font-size: 11px;
  color: var(--faint);
}

.step-head {
  margin-bottom: 6px;
}

/* ---- Footer nav ---- */
.footrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.profile {
  font-size: 12px;
  color: var(--slate);
}
.profile b {
  color: var(--ink);
  font-weight: 500;
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--surface);
  background: var(--signal);
  border: none;
  border-radius: var(--r);
  padding: 10px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn:hover {
  filter: brightness(1.07);
}
.btn--ghost {
  color: var(--slate);
  background: transparent;
  border: 1px solid var(--line);
}
.btn--ghost:hover {
  filter: none;
  border-color: var(--slate);
  color: var(--ink);
}

/* ================= DF4 — Semáforos ================= */
.lights {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.light-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line2);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  width: 100%;
}
.light-row:last-child {
  border-bottom: none;
}
.light-row:hover {
  background: var(--paper);
}
.light-idx {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}
.light-name {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.35;
}
.light-state {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  min-width: 148px;
}
.light-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .light-dot {
    transition: none;
  }
}
.light-label {
  font-size: 12px;
  color: var(--slate);
  font-weight: 500;
}
.light-1 .light-dot {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(79, 138, 107, 0.14);
}
.light-2 .light-dot {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(185, 138, 60, 0.14);
}
.light-3 .light-dot {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(179, 80, 63, 0.16);
}

/* ================= DF2 — Estrellas ================= */
.bsc-group {
  margin-bottom: 22px;
}
.bsc-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.bsc-title {
  font-size: 13px;
  font-weight: 600;
}
.bsc-hint {
  font-size: 11px;
  color: var(--faint);
}
.star-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line2);
}
.star-row:last-child {
  border-bottom: none;
}
.star-name {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.3;
}
.star-code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}
.stars {
  display: inline-flex;
  gap: 4px;
}
.star {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  line-height: 0;
  color: var(--line);
}
.star svg {
  width: 20px;
  height: 20px;
  display: block;
  transition: color 0.15s ease, transform 0.12s ease;
}
.star.on {
  color: var(--signal);
}
.star:hover svg {
  transform: scale(1.12);
}
@media (prefers-reduced-motion: reduce) {
  .star svg {
    transition: none;
  }
}

/* ================= DF1 — Blob ================= */
.stage {
  position: relative;
  width: 480px;
  max-width: 100%;
  margin: 18px auto 6px;
  aspect-ratio: 1 / 1;
}
.stage svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  touch-action: none;
}
.axis {
  stroke: var(--line);
  stroke-width: 1;
}
.ring {
  fill: none;
  stroke: var(--line2);
  stroke-width: 1;
}
.spoke {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.blob {
  fill: var(--signal-soft);
  stroke: var(--signal);
  stroke-width: 2;
  stroke-linejoin: round;
}
.handle {
  fill: var(--surface);
  stroke: var(--signal);
  stroke-width: 2.5;
  cursor: grab;
}
.handle:active {
  cursor: grabbing;
}
.handle.foc {
  stroke-width: 3;
}
.hcore {
  fill: var(--signal);
}
.corner {
  position: absolute;
  width: 150px;
}
.corner .cn {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}
.corner .co {
  font-size: 10px;
  color: var(--faint);
  letter-spacing: 0.02em;
}
.corner .cv {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.corner .cv b {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
}
.pips {
  display: flex;
  gap: 3px;
}
.pips s {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  display: block;
}
.pips s.on {
  background: var(--signal);
}
.corner.tl {
  top: 0;
  left: 0;
  text-align: left;
}
.corner.tr {
  top: 0;
  right: 0;
  text-align: right;
}
.corner.tr .cv {
  justify-content: flex-end;
}
.corner.bl {
  bottom: 0;
  left: 0;
  text-align: left;
}
.corner.br {
  bottom: 0;
  right: 0;
  text-align: right;
}
.corner.br .cv {
  justify-content: flex-end;
}

/* ================= DF3 — Matriz de riesgo ================= */
.matrix-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 700px) {
  .matrix-layout {
    grid-template-columns: 1fr;
  }
}
/* **Los diecinueve se ven de una vez** · desde la tarea 041.

   Hasta acá la lista tenía `max-height: 460px` con desplazamiento y mostraba unos
   once: con dieciséis colocados, los tres que faltaban podían estar fuera de la
   vista. Y acá cuesta más que en una lista normal, porque para decidir dónde va un
   riesgo hay que compararlo con los otros.

   La pantalla se alarga y eso está bien: lo que no puede es esconder opciones. Es
   lo mismo que DF4 hace con veinte semáforos, y el aire por línea es el que la
   etapa 2 aprendió en sus filas. El panel de la grilla sigue siendo `sticky`, así
   que la matriz acompaña. */
.risk-list {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.risk-item {
  display: grid;
  grid-template-columns: 12px 24px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line2);
  cursor: pointer;
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  text-align: left;
  font: inherit;
  color: inherit;
}
.risk-item:last-child {
  border-bottom: none;
}
.risk-item:hover {
  background: var(--paper);
}
.risk-item.sel {
  background: var(--signal-soft);
}
.risk-item.sel .risk-idx {
  color: var(--signal);
}
/* La marca que no es color. La columna existe en las diecinueve filas y sólo la
   seleccionada la llena: cambiar de riesgo no corre nada de lugar. */
.risk-cursor {
  font-size: 12px;
  line-height: 1;
  color: var(--signal);
  text-align: center;
}
.risk-idx {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}
.risk-text {
  font-size: 12px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.risk-rating {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate);
  white-space: nowrap;
}

.matrix-panel {
  position: sticky;
  top: 16px;
}
.grid5 {
  display: grid;
  grid-template-columns: 24px repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr) 24px;
  gap: 2px;
  aspect-ratio: 1 / 1;
}
.cell {
  border: 1px solid var(--line);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate);
  background: var(--surface);
  transition: outline 0.12s ease;
}
.cell:hover {
  outline: 1.5px solid var(--signal);
  outline-offset: -1px;
}
.cell.active {
  outline: 2px solid var(--signal);
  outline-offset: -1px;
  color: var(--signal);
  font-weight: 600;
}
.axis-l,
.axis-b {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.axis-l {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.matrix-caption {
  margin-top: 12px;
  font-size: 11px;
  color: var(--faint);
  text-align: center;
}
.risk-progress {
  font-size: 11px;
  color: var(--faint);
  margin-left: auto;
}

/* ================= Resultado ================= */
.result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.tag {
  font-size: 11px;
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px 11px;
  background: var(--surface);
}
.hero {
  padding: 30px 0 8px;
}
.hero h1 {
  font-size: 30px;
  margin: 10px 0 8px;
  line-height: 1.15;
}
.hero .sub {
  max-width: 60ch;
  font-size: 15px;
}
.meta {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line2);
}
.meta div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.meta b {
  font-weight: 500;
  font-size: 14px;
}
.meta span {
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.04em;
}

.focus {
  margin: 30px 0 6px;
}
.focus-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.focus-head h2 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.focus-head .hint {
  font-size: 12px;
  color: var(--faint);
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 680px) {
  .cards {
    grid-template-columns: 1fr;
  }
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 15px;
  position: relative;
  overflow: hidden;
}
.card .dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.card .code {
  font-size: 12px;
  color: var(--slate);
}
.card .nm {
  font-size: 13px;
  font-weight: 500;
  margin: 6px 0 12px;
  min-height: 34px;
  line-height: 1.3;
}
.card .val {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.card .scope {
  font-size: 11px;
  color: var(--faint);
  margin-left: 6px;
}

.legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 6px;
  flex-wrap: wrap;
}
.legend .ramp {
  height: 8px;
  width: 200px;
  border-radius: 100px;
}
.legend .ends {
  display: flex;
  justify-content: space-between;
  width: 200px;
  font-size: 10px;
  color: var(--faint);
}
.legend .lab {
  font-size: 11px;
  color: var(--slate);
}

.domain {
  margin-top: 22px;
}
.dhead {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 0 8px;
  border-bottom: 1px solid var(--line);
}
.dcode {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--signal);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 7px;
  background: var(--surface);
}
.dname {
  font-size: 13px;
  font-weight: 500;
}
.dcount {
  font-size: 11px;
  color: var(--faint);
  margin-left: auto;
}
.row {
  display: grid;
  grid-template-columns: 64px 1fr 280px 52px;
  align-items: center;
  gap: 14px;
  padding: 7px 6px;
  border-radius: var(--r);
  border-bottom: 1px solid var(--line2);
}
.row:last-child {
  border-bottom: none;
}
.row:hover {
  background: var(--surface);
}
.row .rc {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--slate);
}
.row .rn {
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row .rv {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}
.track {
  position: relative;
  height: 22px;
}
.track .grid {
  position: absolute;
  inset: 0;
}
.track .grid i {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--line);
}
.track .grid i.mid {
  top: 0;
  bottom: 0;
}
.bar {
  position: absolute;
  top: 6px;
  height: 10px;
  border-radius: 2px;
  width: 0;
  transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .bar {
    transition: none;
  }
}
@media (max-width: 680px) {
  .row {
    grid-template-columns: 58px 1fr 44px;
    gap: 10px;
  }
  .row .track {
    display: none;
  }
}
.foot {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--faint);
  font-size: 11px;
  flex-wrap: wrap;
  gap: 8px;
}

/* ================= Agregado por la tarea 007 =================
   Lo que la superficie servida necesita y el componente de junio no tenía:
   la nota del riel, el contenedor de la isla, la barrera de error y el aviso
   del cierre. Nada de esto redefine un token ni pisa una regla de arriba. */

.rail-nota {
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

.isla-cargando {
  font-size: 12px;
  color: var(--faint);
  margin: 24px 0;
}
body.fallo .isla-cargando {
  display: none;
}

.barrera {
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: var(--r);
  background: var(--surface);
  padding: 16px 18px;
  margin: 18px 0 0;
}
.barrera-titulo {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
}
.barrera-cuerpo,
.barrera-contacto {
  font-size: 13px;
  color: var(--slate);
  margin: 0 0 6px;
  max-width: 58ch;
}
.barrera-contacto {
  margin-bottom: 0;
}
.barrera a {
  color: var(--signal);
}

.aviso {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 14px 16px;
  margin-top: 22px;
}
.aviso p {
  margin: 0;
  font-size: 13px;
  color: var(--slate);
}
.aviso b {
  color: var(--ink);
  font-weight: 600;
}

/* «Atrás» es un enlace y no un botón: navega, no envía el formulario. Se ve
   igual que el botón fantasma que traía StepFrame. */
a.btn {
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn:disabled:hover {
  filter: none;
}


/* ================= Agregado por la tarea 008 =================
   DF4 pasó de un `<div role="list">` con botones marcados `role="listitem"` a un
   `<ul>` de verdad: un `role` explícito reemplaza al implícito, y así esas veinte
   filas se anunciaban como elementos de una lista y no como botones.

   El bloque migrado de junio no se toca. Lo que hace falta se ajusta acá: quitarle
   al `<ul>` su viñeta y su margen, y devolver la línea divisoria, porque
   `.light-row:last-child` ahora empareja con **todos** los botones —cada uno es
   hijo único de su `<li>`— y no sólo con el último de la lista. */

ul.lights {
  margin: 0;
  padding: 0;
  list-style: none;
}
.light-item .light-row {
  border-bottom: 1px solid var(--line2);
}
.light-item:last-child .light-row {
  border-bottom: none;
}

/* ================= Agregado por la tarea 009 =================
   Los dos mecanismos nuevos —el eje y el reparto—, la advertencia del enunciado,
   y lo que se fue con el teclado.

   El bloque migrado de junio no se toca. Los tokens son los mismos: superficie
   clara, un solo acento teal, y el color nunca como único portador —cada tramo y
   cada opción llevan su cifra al lado—. */

.advertencia {
  font-size: 13px;
  color: var(--slate);
  max-width: 58ch;
  margin: 10px 0 0;
  padding-left: 11px;
  border-left: 2px solid var(--signal);
}

/* ---- El eje · DF5, DF6, DF10 ---- */
.eje {
  margin: 26px 0 6px;
}
.eje-pista {
  position: relative;
  height: 44px;
  margin: 0 12px 4px;
  cursor: pointer;
  touch-action: none;
}
.eje-linea {
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
  border-radius: 100px;
}
.eje-marca {
  position: absolute;
  top: 16px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--line);
}
.eje-marca.con-peso {
  border-color: var(--signal);
}
.eje-manija {
  position: absolute;
  top: 10px;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--signal);
  box-shadow: 0 1px 3px rgba(18, 23, 30, 0.12);
  cursor: grab;
}
.eje-pista.arrastrando .eje-manija {
  cursor: grabbing;
  border-width: 3px;
}
.eje-manija::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--signal);
}
.eje-opciones {
  display: grid;
  gap: 14px;
  margin-top: 6px;
}
.eje-opcion {
  text-align: center;
  padding: 0 6px;
}
.eje-opcion:first-child {
  text-align: left;
}
.eje-opcion:last-child {
  text-align: right;
}
.eje-nombre {
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
}
.eje-opcion.con-peso .eje-nombre {
  color: var(--ink);
}
.eje-valor {
  font-size: 13px;
  font-weight: 500;
  color: var(--faint);
  margin-top: 2px;
}
.eje-opcion.con-peso .eje-valor {
  color: var(--signal);
}
.eje-descripcion {
  font-size: 12px;
  line-height: 1.4;
  color: var(--faint);
  margin: 6px 0 0;
}

/* ---- El reparto · DF8, DF9 ---- */
.reparto {
  margin: 26px 0 6px;
}
.reparto-barra {
  position: relative;
  display: flex;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: visible;
  background: var(--surface);
  touch-action: none;
}
.reparto-tramo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
}
.reparto-tramo:first-child {
  border-radius: calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px);
}
.reparto-tramo:last-child {
  border-radius: 0 calc(var(--r) - 1px) calc(var(--r) - 1px) 0;
}
.tramo-0 {
  background: rgba(15, 110, 102, 0.22);
}
.tramo-1 {
  background: rgba(15, 110, 102, 0.12);
}
.tramo-2 {
  background: rgba(15, 110, 102, 0.04);
}
.reparto-tramo-valor {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.reparto-divisor {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 18px;
  margin-left: -9px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reparto-divisor::before {
  content: "";
  width: 3px;
  height: 100%;
  border-radius: 100px;
  background: var(--signal);
}
.reparto-divisor.arrastrando::before {
  width: 5px;
}
.reparto-leyenda {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.reparto-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
}
.reparto-punto {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-top: 3px;
  border: 1px solid var(--line);
}
.reparto-nombre {
  font-size: 13px;
  color: var(--ink);
}
.reparto-nombre b {
  font-weight: 500;
  color: var(--signal);
  margin-left: 4px;
}
.reparto-descripcion {
  font-size: 12px;
  color: var(--faint);
  margin: 3px 0 0;
  line-height: 1.4;
}
.reparto-nota {
  font-size: 11px;
  color: var(--faint);
  margin: 14px 0 0;
}

/* El instrumento se responde con el mouse: no hay manija que reciba el foco, y
   con eso se va la marca que aparecía de forma impredecible al arrastrar y a
   veces quedaba pegada en una punta que ya no se estaba moviendo. Ver
   docs/DECISIONES.md. */
.stage svg g {
  outline: none;
}

/* ── La puerta del respondente · tarea 011 ──────────────────────────────────
   La primera pantalla que ve una persona del padrón. Usa los mismos tokens que
   el resto: no hay ningún valor nuevo acá, sólo las piezas que el recorrido no
   necesitaba —un campo de texto y un campo de código—.

   El campo del código va en mono y espaciado: se transcribe a mano desde un
   correo, y en esa tipografía se distinguen las letras de los dígitos. */
.puerta {
  margin-top: 26px;
}
.campo {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 8px;
}
.campo-texto {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 13px;
  width: 100%;
  max-width: 380px;
  display: block;
}
.campo-texto:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft);
}
.campo-codigo {
  font-family: var(--mono);
  font-size: 28px;
  letter-spacing: 0.3em;
  max-width: 210px;
  text-align: center;
}
.campo-nota {
  font-size: 12px;
  color: var(--faint);
  margin: 10px 0 0;
  max-width: 380px;
  line-height: 1.5;
}
.captcha {
  margin-top: 18px;
}
.puerta .nav-actions {
  margin-top: 22px;
}

/* El aviso de un problema de la puerta. Nunca dice si el correo está en el
   padrón: sólo que el código que llegó no sirve. */
.aviso--problema {
  border-color: var(--red);
  margin-top: 0;
  margin-bottom: 22px;
}
.aviso--problema p {
  color: var(--ink);
}

/* ================= Agregado por la tarea 028 =================
   La etapa 2: el bloque por práctica y nivel, y sus viñetas.

   **No estrena un solo token.** Los mismos siete de junio, la misma superficie
   clara, el mismo acento teal y los mismos espaciados. Las tres viñetas llevan
   **su palabra escrita además del punto**: los tres estados se distinguen en
   escala de grises, que es la garantía que sobrevivió a retirar el teclado.

   **Lo que la tarea 031 retiró de acá**: las cuatro casillas del bloque en grueso
   —`.bloque-opciones`, `.bloque-opcion`, `.bloque-caja`—, el detalle que se abría
   —`.detalle`, `.detalle-head`, `.detalle-nota`— y el `select` del componente B
   —`.campo-select`—. Las viñetas se ven siempre, así que no hay nada que abrir.

   **Y lo que retiró la 032**: `.bloque--cerrado`, `.bloque-estado`, `.detalle-pie`
   y `.detalle-falta`. La unidad de guardado pasó a ser el nivel, así que un grupo
   ya no tiene botón, ni estado propio, ni se congela. Lo que queda de `.bloque`
   —la caja, su cabecera y su cuenta— lo usan las dos pantallas de sólo lectura.

   Y ningún evento cromático nuevo: el único de la interfaz sigue siendo el valor
   de la priorización, en las salidas. */

.capacidad {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bloque {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 16px 18px 12px;
}
.bloque-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.bloque-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.35;
}
.bloque-cuenta {
  font-size: 11px;
  color: var(--slate);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  flex: 0 0 auto;
}

.btn--chico {
  padding: 6px 12px;
  font-size: 12px;
}

ul.vinetas {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  overflow: hidden;
}
.vineta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line2);
}
.vineta:last-child {
  border-bottom: none;
}
.vineta-texto {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}
.vineta-estados {
  display: flex;
  gap: 6px;
  justify-self: end;
}
.vineta-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  color: var(--slate);
  cursor: pointer;
}
.vineta-boton:hover {
  background: var(--paper);
}
.vineta-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--faint);
  flex: 0 0 auto;
}
.vineta-boton.puesta {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 500;
}
.vin-si.puesta .vineta-punto {
  background: var(--green);
  border-color: var(--green);
}
.vin-no.puesta .vineta-punto {
  background: var(--red);
  border-color: var(--red);
}
.vin-nose.puesta .vineta-punto {
  background: var(--faint);
  border-color: var(--faint);
}
.rol .footrow {
  margin-top: 18px;
}

/* ================= Agregado por la tarea 030 =================
   La etapa 2 se responde en varias sesiones: el mapa del recorrido, la vista de
   revisión, la salida, y el bloque en filas.

   **No estrena un solo token, y ni un color literal.** Los mismos siete de junio.
   Lo que cambia es la disposición: el ancho de la caja es el de `.shell--result`,
   que ya existía, y los tres estados del mapa se distinguen **en escala de
   grises** porque cada uno lleva su palabra escrita y su marca cambia de FORMA
   —llena, media, vacía— además de tono.

   La medida de la fila sale de medir los 1.201 sujetos con la tipografía del
   producto: en una columna de 72ch el 95 % entra en una línea. Ver el archivo de
   verificación de la tarea 030. */

/* La caja ancha del recorrido. **Es la misma medida de `.shell--result`**, no un
   ancho nuevo: en 760 px la fila no cabe y el texto se parte en tres líneas. */
.shell--ancho {
  max-width: 940px;
}

/* ---- La práctica manda, no el enunciado ---- */
.bloque-titulo {
  font-size: 18px;
  line-height: 1.3;
}
/* El enunciado: **una sola vez, bajo la primera práctica**, y chico. Es idéntico
   en las cuarenta pantallas; lo que cambia es la práctica de arriba. */
.bloque-enunciado {
  font-size: 12px;
  color: var(--slate);
  margin: 0 0 12px;
  max-width: 58ch;
}

/* ---- La viñeta, en fila ----
   El texto a la izquierda en una columna de lectura acotada, los tres estados a
   la derecha **en columna fija**: la mano va siempre al mismo lugar en vez de
   buscar el botón donde el largo del texto lo haya dejado.

   `100% - 260px` es lo que ocupan los estados (232 px) más su separación (28 px):
   así la fila sobrevive a una ventana mediana sin apilarse ni desbordar. */
.vineta {
  grid-template-columns: min(72ch, 100% - 260px) max-content;
  column-gap: 28px;
  justify-content: space-between;
  padding: 9px 12px;
}
.vineta-estados {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  gap: 8px;
}
.vineta-boton {
  justify-content: center;
}
/* En pantalla angosta se apila: el texto arriba y los estados debajo. */
@media (max-width: 640px) {
  .vineta {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .vineta-estados {
    justify-self: start;
  }
}

/* ---- El mapa del recorrido ---- */
.mapa {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.mapa-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 110px auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line2);
}
.mapa-fila:last-child {
  border-bottom: none;
}
.mapa-ir {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.mapa-ir:hover .mapa-nombre {
  text-decoration: underline;
}
.mapa-nombre {
  font-size: 14px;
  font-weight: 500;
}
.mapa-codigo {
  font-size: 11px;
  color: var(--faint);
  flex: 0 0 auto;
}
.mapa-estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--slate);
}
/* **La marca cambia de forma, no sólo de tono**: llena, media y vacía. Y al lado
   va la palabra escrita, que es la que de verdad lo dice. */
.mapa-marca {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--faint);
  background: var(--surface);
  flex: 0 0 auto;
}
.mapa-fila--completo .mapa-marca {
  border-color: var(--signal);
  background: var(--signal);
  box-shadow: inset 0 0 0 2px var(--surface);
}
.mapa-fila--a_medias .mapa-marca {
  border-color: var(--slate);
  background: linear-gradient(90deg, var(--slate) 50%, var(--surface) 50%);
}
.mapa-fila--completo .mapa-estado {
  color: var(--signal);
  font-weight: 500;
}
.mapa-accion {
  font-size: 12px;
  color: var(--slate);
  text-align: right;
}
@media (max-width: 640px) {
  .mapa-fila {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }
  .mapa-accion {
    display: none;
  }
}

/* ---- Revisar: se mira, no se cambia ---- */
.revision {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 22px;
}
/* La marca de una viñeta ya respondida. **Es la misma pieza que el botón**, sin
   ser un botón: no hay nada que apretar. */
.vineta-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.revision-rol {
  font-size: 14px;
  color: var(--ink);
  margin: 0;
}

/* ---- La salida, dicha antes de apretarla ---- */
.footrow--objetivo {
  align-items: flex-start;
}

/* ================= Agregado por la tarea 031 =================
   Las viñetas se ven siempre, lo respondido también, y el componente B se lee sin
   abrir nada.

   **Ni un token nuevo, ni un color literal.** Los atajos son `.btn--ghost`
   chicos, las filas del componente B son la misma `.vineta` con una sola columna
   de estado, y lo ya respondido usa la misma `.vineta-marca` de la revisión.

   Lo que se retiró está anotado en el bloque de la 028: las cuatro casillas, el
   detalle que se abría y el `select`. */

/* ---- Los atajos: rellenan un grupo y no guardan ----
   **Sólo desde cuatro viñetas**, que es donde ahorran algo: la 032 los sacó de los
   grupos de una y dos líneas, donde ocupaban más que la lista. */
.atajos-botones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- El avance dentro del objetivo. Una cuenta, no un resultado ---- */
.avance {
  font-size: 13px;
  color: var(--slate);
  margin: 10px 0 0;
}

/* ---- Una viñeta ya respondida: una sola columna, sin nada que apretar ---- */
.vineta-estados:has(.vineta-marca) {
  grid-template-columns: 72px;
}

/* ---- Lo que ya se respondió, en la misma pantalla del objetivo ----
   **Va abierto**: plegado por omisión es lo mismo que no estar, que es lo que
   había. Se puede plegar para no alargar la pantalla. */
.respondido {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.respondido-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.respondido-nota {
  font-size: 12px;
  color: var(--slate);
  margin: 8px 0 0;
  max-width: 62ch;
}
.respondido .revision {
  margin-top: 14px;
}

/* ---- El componente B: cuatro filas visibles, con la forma de las viñetas ---- */
.rol .vinetas {
  margin-top: 22px;
}
.vineta--rol {
  grid-template-columns: min(72ch, 100% - 100px) max-content;
  cursor: pointer;
}
.vineta--rol:hover {
  background: var(--paper);
}
.vineta--rol .vineta-estados {
  grid-template-columns: 72px;
}
ul.vinetas > li:last-child > .vineta {
  border-bottom: none;
}
/* El control lleva el estado en su FORMA —vacío o lleno— además del tono, y la
   fila entera se pone en negrita al elegirla. En escala de grises se ve cuál es. */
.rol-radio {
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--faint);
  background: var(--surface);
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.rol-radio:checked {
  border-color: var(--signal);
  background: var(--signal);
  box-shadow: inset 0 0 0 2px var(--surface);
}
.vineta-boton:has(.rol-radio:checked) {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 500;
}

/* ---- La pantalla de error, con salida ---- */
.nav-actions--error {
  margin: 18px 0 4px;
}

/* ================= Agregado por la tarea 032 =================
   La pantalla es un nivel y se guarda una vez. Las prácticas dejan de ser cajas
   con su propio botón y pasan a ser subtítulos con su lista.

   **Ni un token nuevo, ni un color literal.** Lo que se retiró está anotado en el
   bloque de la 028: `.bloque--cerrado`, `.bloque-estado`, `.detalle-pie`,
   `.detalle-falta`, `.atajos` y `.atajos-nota`. */

/* ---- La práctica: un subtítulo con su lista, no una caja ---- */
.practica {
  margin: 0;
}
.practica + .practica {
  margin-top: 26px;
}
.practica .bloque-head {
  margin-bottom: 10px;
}
.practica .atajos-botones {
  margin-bottom: 10px;
}

/* ---- El pie del nivel: un solo botón para toda la pantalla ---- */
.nivel-pie {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.nivel-estado {
  font-size: 12px;
  color: var(--slate);
  margin: 0;
  max-width: 62ch;
}

/* ---- El componente B guarda con su propio botón ---- */
.nav-actions--rol {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

/* ================= Agregado por la tarea 033 =================
   Una acción por pantalla, y el nombre dice lo que hace.

   **Esta tarea quita.** Del mapa se fue el tercer camino de cada fila —la fila
   entera es ahora un solo enlace— y de la pantalla de respuesta se fueron el
   botón de salida y su pie de tres líneas. Lo que queda no estrena ni un token.

   Retirado de acá: `.mapa-ver` —el segundo «Ver lo respondido»— y `.salida` con
   `.salida-nota`, que era el pie que explicaba lo que los botones tendrían que
   decir en su nombre. */

/* La fila entera es el enlace: un solo camino, y el objetivo entero es su área
   de clic. La rejilla se mueve del `<li>` al `<a>`. */
.mapa-fila {
  display: block;
  padding: 0;
}
.mapa-ir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 110px;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}
.mapa-ir:hover {
  background: var(--paper);
}
@media (max-width: 640px) {
  .mapa-ir {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }
  .mapa-accion {
    display: none;
  }
}

/* El enlace discreto del pie: no compite con la acción principal. */
.enlace-discreto {
  font-size: 13px;
  color: var(--slate);
}

/* ================= Agregado por la tarea 034 =================
   Lo respondido se puede corregir, y la revisión pasa a estar agrupada por nivel.

   **Ni un token nuevo ni un color literal.** La sección de un nivel es una caja de
   las de siempre —`var(--line)` y `var(--r)`—, la acción es el mismo
   `.enlace-discreto` que la 033 puso en el pie, y el aviso del descarte es la
   `.advertencia` que ya existía: una regla a la izquierda, no un color.

   **Se lee en escala de grises**: el nivel lleva su número escrito, la cuenta lleva
   su palabra —«6 respuestas»— y la acción lleva su texto. Nada depende del tono. */

/* ---- Un nivel de lo respondido: su encabezado y su lista ---- */
.nivel-revisado {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 14px 16px 6px;
}
.nivel-revisado-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 14px;
}
.nivel-revisado-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.nivel-revisado-cuenta {
  font-size: 12px;
  color: var(--slate);
}
/* La acción del nivel se va al otro extremo: es una fila con una sola acción, y
   no compite con el texto que la nombra. */
.nivel-corregir {
  margin-left: auto;
}
/* Dentro de un nivel, sus grupos van uno bajo otro y sin caja propia: la caja ya
   la puso el nivel. */
.nivel-revisado .bloque + .bloque {
  margin-top: 18px;
}

/* ================= Agregado por la tarea 035 =================
   El instrumento pregunta los siete componentes: los entregables van en la pantalla
   de su nivel, y D, E, F y G en la del cierre del objetivo.

   **Ni un token nuevo ni un color literal.** La casilla usa `var(--line)` y
   `var(--ink)` como todo lo demás, y la parte del cierre es la misma caja de
   siempre. El único control nuevo es un `<input type=checkbox>`, y su color lo pone
   `accent-color: var(--ink)`: gris sobre gris, sin estrenar tono.

   **Se lee en escala de grises**: cada casilla lleva su palabra al lado —«Existe» o
   «No»— y la cultura usa las tres etiquetas de la viñeta. Nada depende del tono. */

/* ---- El componente C, dentro de la práctica y después de sus actividades ---- */
.entregables {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line2);
}
.entregables-titulo {
  font-size: 13px;
  color: var(--slate);
  margin: 0 0 10px;
}

/* ---- La casilla: C en el nivel, y D, E y G en el cierre ---- */
ul.casillas {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
ul.casillas > li + li {
  border-top: 1px solid var(--line2);
}
.casilla-fila {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
}
.casilla--ya .casilla-fila {
  cursor: default;
}
.casilla-control {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  /* El único color del control, y es el del texto: gris sobre gris. */
  accent-color: var(--ink);
}
.casilla-texto {
  flex: 1 1 auto;
  max-width: 72ch;
  font-size: 14px;
  color: var(--ink);
}
/* **La palabra, no sólo la casilla.** Es la misma garantía que la viñeta: el estado
   se lee sin depender de ver el control ni su tono. */
.casilla-estado {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--slate);
  min-width: 5ch;
  text-align: right;
}
.casilla-ya,
.vineta--ya .vineta-boton {
  font-size: 12px;
  color: var(--slate);
}
.casilla-ya {
  flex: 0 0 auto;
}

/* ---- Una parte de la pantalla del cierre ---- */
.cierre-parte + .cierre-parte {
  margin-top: 28px;
}
.cierre-nota {
  font-size: 13px;
  color: var(--slate);
  margin: 0 0 12px;
}
/* En la pantalla del cierre los radios de la cultura son controles de verdad, no
   botones: el `<label>` es la caja y el `<input>` va adentro, chico y al lado. */
.cierre .vineta-boton > input[type='radio'] {
  margin-right: 6px;
  accent-color: var(--ink);
}
.cierre .vineta-boton {
  cursor: pointer;
}

/* ================= Agregado por la tarea 037 =================
   Guardar siempre se puede: el nivel se guarda a medias, y el aviso de entregar
   dice qué queda pendiente con nombre y con cuenta.

   **Ni un token nuevo ni un color literal.** La lista del aviso usa `var(--slate)`
   y `var(--ink)` como el resto del aviso, y el pie del nivel ya tenía su `gap`
   para dos botones: la única pieza nueva es una lista.

   **Se lee en escala de grises**: lo que distingue cada línea es la viñeta de la
   lista y el texto en negrita, no el tono. */

/* ---- Lo que queda pendiente al entregar ---- */
ul.pendiente {
  margin: 10px 0 12px;
  padding-left: 20px;
  font-size: 13px;
  color: var(--slate);
}
ul.pendiente > li + li {
  margin-top: 6px;
}
ul.pendiente b {
  color: var(--ink);
  font-weight: 600;
}

/* ---- El pie del nivel, con sus dos acciones ----
   La segunda va después de la primera y antes del estado, y el `gap` del pie ya
   las separa. Lo único que hace falta es que la línea de estado ocupe su propia
   fila cuando la caja se angosta: dos botones y una frase no entran en 640 px. */
@media (max-width: 640px) {
  .nivel-estado {
    flex: 1 0 100%;
  }
}

/* ================= Agregado por la tarea 042 =================
   **La acción que no se deshace pesa más que la que sí.**

   En la pantalla del cierre de la etapa 1 «Entregar» y «Cerrar sesión» eran dos
   botones parejos, y no lo son: entregar es terminal y cerrar sesión se deshace
   pidiendo otro código. `.btn--discreto` es el tercer peso —después de `.btn` y
   `.btn--ghost`—: sin fondo y sin recuadro, para lo que tiene que estar y no
   competir.

   **Ni un token nuevo, ni un color literal.** `--slate` y `--ink` son los mismos
   que ya usa `.btn--ghost`.

   **Sin subrayado desde la tarea 043.** El subrayado venía de cuando esto era un
   enlace `<a>`; convertido en botón, lo único que hacía era seguir prometiendo un
   enlace. Lo que distingue a este peso del sólido es **no tener recuadro**, que es
   diferencia de forma y se lee igual en escala de grises. */
.btn--discreto {
  color: var(--slate);
  background: transparent;
  border: none;
  padding: 10px 4px;
}
.btn--discreto:hover {
  filter: none;
  color: var(--ink);
}

/* ================= Agregado por la tarea 043 =================
   **«Guardar y salir» dice lo que la persona quiere, y el pie dice que se puede
   volver.**

   «Cerrar sesión» describía lo que hace el sistema, no lo que la persona quiere, y
   «sesión» es vocabulario del oficio. Lo que faltaba después de renombrarlo es la
   promesa: quien lee «salir» al lado de un «Entregar» que es terminal necesita que
   la pantalla le diga, ahí mismo, que salir no cierra nada.

   Va DEBAJO de la fila de acciones y no adentro: la fila es una hilera de botones
   alineados al medio, y un párrafo ahí dentro la parte. `.footrow` ya envuelve, así
   que la nota entra como una línea propia de ancho completo.

   **Ni un token nuevo, ni un color literal.** `--slate` es el mismo gris de
   `.profile`, que es el otro texto de servicio de esta misma fila. */
.salir-nota {
  flex: 1 0 100%;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--slate);
}