#view-setup {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
}

#view-setup h2 {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.app-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.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;
}

.ios-install-hint {
  background: rgba(79, 209, 197, 0.12);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
}

/* Buttons are class-based, not id-bound, so the same look is reusable across
   the library bar, the paste panel and the slide rows. */
.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-bar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}

.talk-bar__select {
  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;
  font-size: 1rem;
}

/* Formato de la charla (preset + números si es personalizado + total). */
.format-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.format-row select,
.format-row input[type="number"] {
  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: 0.95rem;
}

.format-row input[type="number"] {
  width: 4.5em;
}

.format-row__custom {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.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);
}

.library-panel,
.paste-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}

.library-panel summary,
.paste-panel summary {
  cursor: pointer;
  color: var(--color-text-muted);
}

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

/* Copy/paste transfer boxes: the export route for browsers with neither a
   share sheet nor file downloads. */
.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) -------------- */

.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: #3fb950;
}

.slide-row--tight {
  border-left-color: #d29922;
}

.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 #f5a623;
  outline-offset: -2px;
}

.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;
}

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

.appearance-row select {
  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;
}

.appearance-row input[type="range"] {
  flex: 1;
}

/* El fondo y el color son los del teleprompter (#000/#fff, hardcodeados ahí
   también), no los del setup: la preview existe para decidir tipografía y para
   ver si negrita e itálica se distinguen de verdad en la fuente elegida —
   sobre --color-bg-elevated mentiría sobre el contraste real, justo en el
   resaltado y el atenuado, que son los dos que dependen del color.

   Las clases tp-* de formato se reusan tal cual: css/teleprompter.css se carga
   en toda la app. Sin la clase .tp-word, eso sí, que arrastra transition y
   border-radius. */
.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 {
  flex: 1;
  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). */
.update-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: calc(100vw - 2 * var(--space-3));
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: 999px;
  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;
  z-index: 20;
}

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