/* La configuración es una columna de alto de viewport que NO scrollea: el
   cabezal y la barra de inicio son filas fijas, y el único nodo que scrollea
   es .setup-scroll. Antes era scroll de página con el botón de iniciar en
   position: sticky.

   Esa regla vieja traía un gotcha que ya no aplica y conviene no "restaurar":
   el botón no podía envolverse en un <div>, porque ese wrapper habría pasado a
   ser su bloque contenedor con el alto exacto del botón y nunca se habría
   despegado. Ahora el wrapper .start-bar es obligatorio —lleva el padding y el
   degradado— y no hay nada que despegar.

   El invariante que SÍ sobrevive: la barra de inicio nunca puede terminar
   dentro de .setup-scroll. Hay aserción, que es mejor que este comentario.

   Y sigue vigente la prohibición de transform/filter/contain/will-change en
   cualquier ancestro de una hoja modal, de la franja de edición o del editor a
   pantalla completa: son position:fixed y un bloque contenedor nuevo los
   reanclaría. Tentación concreta: animar el cambio de paso con un transform
   sobre .setup-scroll. */
#view-setup {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
}


/* En teléfono no hay wordmark en la configuración: el cabezal es «‹ nombre de
   la charla ⋯». Sigue en el DOM porque es la izquierda de la barra superior de
   escritorio, y porque lleva el pill de versión que marca la línea v2. */
.app-title {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.app-title__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.app-title__version {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-edition);
  border: 1px solid var(--color-edition);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Franja de la línea v2, fija arriba de todo. Va debajo del safe-area para no
   pelear con la barra de estado del iPhone en modo standalone. Vive dentro de
   #view-setup, así que en el teleprompter (.view[hidden]) no existe. */
.edition-stripe {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-edition);
  z-index: 10;
}

.field-hint {
  font-size: 0.8rem;
  margin: var(--space-1) 0 var(--space-3);
}

/* Los marcadores se citan literales en la ayuda del editor de slides. */
.field-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0 0.25em;
  white-space: nowrap;
}

.btn {
  font-family: inherit;
  font-size: 1rem;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: none;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--primary {
  width: 100%;
  padding: var(--space-3);
  font-size: 1.1rem;
  font-weight: 600;
  background: var(--color-accent);
  color: #06231f;
  border: none;
  margin-top: var(--space-4);
}

.btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--dashed {
  width: 100%;
  border-style: dashed;
}

/* 2.75rem, not the old 2rem: below Apple's 44pt touch target these are
   genuinely hard to hit on the iPad this app is built for. */
.icon-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: 1rem;
}

textarea {
  width: 100%;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}

/* ---- Library bar -------------------------------------------------------- */

.talk-name-input {
  width: 100%;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2);
  font-family: inherit;
  font-size: 1rem;
  margin-bottom: var(--space-3);
}

/* El único panel plegable que queda: pegar texto. La biblioteca y la ayuda de
   marcadores se fueron a hojas modales. */
.paste-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  background: var(--color-bg-elevated);
}

.paste-panel summary {
  cursor: pointer;
  color: var(--color-text);
  font-weight: 600;
}

.paste-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.paste-panel__actions .btn { flex: 1; }

.transfer-box {
  margin-top: var(--space-3);
}

.transfer-box[hidden] {
  display: none;
}

.transfer-box textarea {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 0.85rem;
  margin-bottom: var(--space-2);
}

.transfer-status {
  font-size: 0.9rem;
  margin: var(--space-2) 0 0;
  color: var(--color-accent);
}

.transfer-status:empty {
  margin: 0;
}

.transfer-status--error {
  color: var(--color-danger);
}

/* ---- Slide editor (editor and preview merged into one list) -------------- */

/* Resumen y control maestro en la misma línea: el botón es la contraparte
   global de los disclosures de cada fila. */
.slide-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.btn--ghost {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2);
  font-size: 0.9rem;
  background: none;
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.slide-summary {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.slide-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.slide-row {
  padding: var(--space-2);
  border-radius: var(--radius);
  background: var(--color-bg-elevated);
  border-left: 4px solid var(--color-border);
}

.slide-row--comfortable {
  border-left-color: var(--color-slide-ok);
}

.slide-row--tight {
  border-left-color: var(--color-slide-tight);
}

.slide-row--too-long {
  border-left-color: var(--color-danger);
}

.slide-row--empty {
  opacity: 0.7;
}

/* Independent of the timing-status colors above (border-left-color) — a
   slide can be "comfortable" in duration and still fall outside the
   Pechakucha 20-slide format by position. `outline` doesn't share a box
   model with `border`, so both can be visible on the same row at once. */
.slide-row--over-limit {
  outline: 2px solid var(--color-slide-over);
  outline-offset: -2px;
}

/* Disclosure de la fila. NO es <details>/<summary> aunque el proyecto ya use
   ese patrón en .paste-panel y .library-panel: <summary> es contenido
   interactivo y anidarle botones adentro es HTML inválido — y Safari togglea
   con el click de cualquier descendiente, así que los botones de insertar y
   quitar que ya viven en el head dejarían de funcionar solos. El patrón
   correcto para esto es un <button> con aria-expanded. */
.slide-row__toggle {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Lo que se ve de la slide con la fila plegada. Va DEBAJO del head y no
   dentro: en el head tendría que pelear por el espacio con el índice, el
   badge, las palabras y dos botones de 2.75rem, y el ellipsis no serviría de
   nada. Acá se queda con el ancho completo de la fila. */
.slide-row__preview {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slide-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.slide-row__index {
  color: var(--color-text-muted);
  min-width: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.slide-row__badge,
.slide-row__words {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Pushes the buttons to the right edge of the row. */
.slide-row__words {
  flex: 1;
  text-align: right;
}

.font-preview-wrap {
  background: #000;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}

/* Sin `white-space: nowrap`: que envuelva como envuelve de verdad en el
   teleprompter, en vez de scrollear en horizontal. Con la misma line-height. */
.font-preview {
  margin: 0;
  color: #fff;
  line-height: 1.4;
}

.voice-enable-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.voice-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.voice-row select {
  /* min-width: 0 no es opcional. El ancho mínimo intrínseco de un <select> es
     el de su opción más larga —un nombre de voz como «Google UK English Male»
     pasa los 300px— y el default de un ítem flex es min-width: auto, que
     respeta ese mínimo y empuja al botón «Probar» fuera de la pantalla. A
     402px la página scrolleaba de costado; se veía solo a ancho de teléfono,
     y hasta la 2.7.0 los tests corrían a 1280. */
  flex: 1;
  min-width: 0;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2);
  font-family: inherit;
}

.voice-row .btn {
  white-space: nowrap;
}

.voice-row .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Toast de "nueva versión disponible" (ver renderUpdateToast en ui-setup.js). */
/* Una fila más de la columna, justo encima de la barra de inicio. Antes era
   position:fixed con un `bottom` calculado a partir de --setup-footer-h, que
   era un espejo a mano del alto real del botón: cambiarle el padding al botón
   y olvidarse de la variable dejaba el aviso debajo del pie. Ahora el orden
   del DOM lo resuelve y la variable se retiró. */
.update-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 var(--space-3) var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-edition);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-size: 0.9rem;
}


/* Modo libre: la fila no tiene estado cómoda/ajustada, solo la estimación. */
.slide-row--free {
  border-left-color: var(--color-text-muted);
}

/* La ayuda de marcadores dentro de su panel: sin el margen superior que
   tendría como párrafo suelto, para que no se despegue del summary. */
.help-panel #slide-help {
  margin-bottom: 0;
}

/* Encabezado de sección plegable. El <h2> sigue siendo el encabezado real
   (importa para la navegación por landmarks); el botón vive adentro. */
/* Fila que abre la hoja de marcadores. Reemplaza al <details class="help-panel">
   cerrado, donde la referencia de sintaxis no la encontraba nadie. Las tres
   muestras adelantan de qué se trata sin abrir nada, y son los colores
   vigentes: leen las mismas custom properties que escribe fmt-colors.js. */
.markers-row-open {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-row);
  background: var(--color-bg-elevated);
  color: inherit;
  font: inherit;
  text-align: left;
}

.markers-row-open:hover { border-color: var(--color-accent); }

.markers-row-open__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.markers-row-open__title {
  font-size: var(--fs-body);
  font-weight: 600;
}

.markers-row-open__sub {
  font-size: var(--fs-hint);
}

.markers-row-open__swatches {
  flex: none;
  display: flex;
  gap: var(--space-1);
}

.markers-row-open__dot {
  width: 16px;
  height: 16px;
  border-radius: 5px;
}

.markers-row-open__dot--mark { background: var(--color-fmt-mark); }
.markers-row-open__dot--dim { background: var(--color-fmt-dim); }
.markers-row-open__dot--stress { background: var(--color-fmt-stress); }

.markers-row-open__chevron {
  flex: none;
  color: var(--color-text-muted);
}

/* ---- Cabezal, riel de pasos y barra de inicio ----------------------------- */

.setup-head {
  flex: none;
  /* La franja de edición son 4px fijos bajo el safe-area; el cabezal empieza
     debajo de las dos cosas. En landscape los insets laterales también
     cuentan, o el botón «‹» queda bajo el notch. */
  padding: calc(env(safe-area-inset-top, 0px) + 4px + var(--space-3))
           calc(var(--space-3) + env(safe-area-inset-right, 0px))
           0
           calc(var(--space-3) + env(safe-area-inset-left, 0px));
}

.setup-head__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
}

/* Es un <a href="#talks">, no un <button>: volver a la biblioteca es una
   navegación de verdad, así que tiene que poder abrirse en otra pestaña y
   funcionar aunque el JS todavía no haya montado. */
.setup-head__back {
  text-decoration: none;
}

.setup-head__talk {
  flex: 1;
  min-width: 0;
}

.setup-head__name {
  font-size: var(--fs-head);
  font-weight: 600;
  /* Un nombre largo se acorta: lo que no puede es empujar al «⋯» fuera de la
     pantalla. Misma razón que el min-width:0 del <select> de voz. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setup-head__format {
  font-size: var(--fs-hint);
  font-variant-numeric: tabular-nums;
}

/* Navegación libre: cualquier paso es alcanzable siempre. */
.step-rail {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-3) 0 var(--space-2);
}

.step {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-chip);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  text-align: left;
}

.step[aria-selected="true"] {
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}

.step__label {
  font-size: var(--fs-step);
  letter-spacing: var(--ls-step, 0.7px);
  opacity: 0.7;
}

.step__name {
  font-size: var(--fs-row);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Por debajo de 380px (un iPhone SE) «Letra y voz» no entra en un tercio de la
   pantalla. La etiqueta «PASO N» se va —es la regla del handoff— y el nombre
   pasa a poder partirse en dos líneas en vez de cortarse: con la etiqueta
   fuera hay sitio de sobra a lo alto, y un nombre a medias con puntos
   suspensivos no dice qué paso es. Encogerlo hasta que entrara en una línea
   también habría funcionado, pero ilegible no sirve de nada.

   VA DESPUÉS de la regla base a propósito: un media query no agrega
   especificidad, así que puesto antes lo pisa el `white-space: nowrap` de
   arriba por orden de fuente. */
@media (max-width: 379px) {
  .step { padding: 11px 6px; }
  .step__label { display: none; }
  .step__name {
    font-size: var(--fs-meta);
    white-space: normal;
    line-height: 1.15;
  }
}

.setup-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-1)
           calc(var(--space-3) + env(safe-area-inset-right, 0px))
           var(--space-4)
           calc(var(--space-3) + env(safe-area-inset-left, 0px));
}

.step-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.start-bar {
  flex: none;
  padding: var(--space-2)
           calc(var(--space-3) + env(safe-area-inset-right, 0px))
           calc(var(--space-3) + env(safe-area-inset-bottom, 0px))
           calc(var(--space-3) + env(safe-area-inset-left, 0px));
  /* Decorativo: la barra no se superpone al área scrolleable, así que el
     degradado se funde con el fondo de la página y no se ve. Está para que, si
     algún día la barra flota sobre el contenido, el corte no sea seco. */
  background: linear-gradient(to top, var(--color-bg) 70%, transparent);
}

/* Dice SIEMPRE qué se va a correr: la acción a la izquierda, qué implica a la
   derecha. Es lo único de la pantalla que no cambia al cambiar de paso. */
.start-btn {
  width: 100%;
  min-height: 3.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-accent);
  color: #06231f;
  font: inherit;
}

.start-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.start-btn__label {
  font-size: 1.0625rem;
  font-weight: 700;
}

.start-btn__meta {
  font-size: var(--fs-row);
  font-weight: 600;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* ---- Tarjetas de los pasos ----------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-elevated);
}

.step-label {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label, 0.8px);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---- Formato -------------------------------------------------------------- */

/* Cuatro tarjetas en vez de un <select>: el formato decide cuánto dura todo, y
   un desplegable lo esconde detrás de un toque y no deja comparar. Cada una
   dice sus números, así que elegir no exige abrir nada. */
.format-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.format-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 2.75rem;
  padding: 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-row);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font: inherit;
  text-align: left;
}

.format-card[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
}

.format-card__title {
  font-size: var(--fs-body);
  font-weight: 600;
}

.format-card__line {
  font-size: var(--fs-meta);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.format-custom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.format-custom input[type="number"] {
  min-width: 58px;
  width: 4.5rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.format-total {
  margin-left: auto;
  color: var(--color-accent);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
}

/* ---- Sliders -------------------------------------------------------------- */

.slider-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.slider-row__label {
  font-size: var(--fs-body);
}

.slider-row__value {
  flex: none;
  color: var(--color-accent);
  font-size: var(--fs-row);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--color-accent);
}

/* ---- Tipografía ----------------------------------------------------------- */

.font-picker {
  display: flex;
  gap: var(--space-2);
}

/* Cada botón se dibuja EN SU PROPIA fuente (el style inline lo pone el JS):
   es la forma más corta de elegir una tipografía sin probarlas una por una. */
.font-pick {
  flex: 1;
  min-height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font-size: var(--fs-body);
}

.font-pick[aria-pressed="true"] {
  border-color: var(--color-accent);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}

/* ---- Interruptor de voz --------------------------------------------------- */

.switch-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.switch-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.switch-row__title { font-size: var(--fs-body); font-weight: 600; }
.switch-row__sub { font-size: var(--fs-hint); line-height: 1.35; }

.switch { flex: none; position: relative; display: inline-flex; }

/* El checkbox real sigue existiendo y sigue siendo el que se toca: se lo tapa
   con la pista pero NO se lo saca del árbol, así que el teclado, el lector de
   pantalla y el <label> siguen funcionando sin una sola línea de JS. */
.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 1;
}

.switch__track {
  width: 52px;
  height: 31px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 2px;
  transition: background 0.15s ease;
}

.switch__knob {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: transform 0.15s ease, background 0.15s ease;
}

.switch input:checked + .switch__track { background: var(--color-accent); border-color: var(--color-accent); }
.switch input:checked + .switch__track .switch__knob { transform: translateX(21px); background: #06231f; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .switch__track, .switch__knob { transition: none; }
}

/* ---- Escritorio ----------------------------------------------------------
   El breakpoint es 1024px, el mismo que declara js/responsive.js. Si alguien
   mueve uno, tiene que mover el otro: con dos media queries sueltas basta
   tocar una para que el DOM y el layout discrepen en una franja de anchos. */

.talks-rail,
.preview-col { display: none; }

.setup-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.setup-foot { flex: none; }

@media (min-width: 1024px) {
  /* Mismo DOM, otra disposición: las tres columnas salen de las áreas, no de
     mover un solo nodo con JS. La barra de inicio aterriza abajo a la derecha
     porque el área la manda ahí, sin tocar su marcado. */
  #view-setup {
    display: grid;
    max-width: none;
    grid-template-columns: 240px minmax(0, 1fr) 340px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "head head  head"
      "rail main  aside"
      "rail main  start";
    gap: 0 var(--space-3);
    padding-inline: var(--space-3);
  }

  .setup-head { grid-area: head; padding-inline: 0; }
  .talks-rail { grid-area: rail; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
  .setup-main { grid-area: main; }
  .preview-col { grid-area: aside; display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; overflow-y: auto; padding-top: var(--space-2); }
  .setup-foot { grid-area: start; }
  .setup-scroll { padding-inline: 0; }
  .start-bar { padding-inline: 0; }

  /* En escritorio el cabezal es una barra: wordmark a la izquierda, charla al
     medio. El «‹» sobra —el riel de charlas está siempre a la vista— y el
     nombre deja de necesitar su propia fila. */
  .setup-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }
  /* El <h1> por defecto es 2em: en una barra superior de 48px de alto eso es
     un titular, no una marca. */
  .setup-head .app-title { display: flex; font-size: var(--fs-title); }
  .setup-head__row { flex: 1; min-width: 0; }
  .setup-head__back { display: none; }

  .step-rail { margin-top: var(--space-3); }

  /* Y la fila que abría la hoja no tiene nada que abrir. */
  .markers-row-open { display: none; }

  .summary-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-bg-elevated);
    font-size: var(--fs-meta);
  }
  .summary-card dt { color: var(--color-text-muted); }
  .summary-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
}