/* La lista de slides y el editor de una slide a pantalla completa.

   La lista ya no tiene ningún <textarea>: cada fila es una línea que abre el
   editor. Con eso desaparece toda la maquinaria de medir alto (autoGrow,
   setRowCollapsed, remeasure) y su familia de bugs. */

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

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

.slide-summary {
  font-size: var(--fs-hint);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

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

/* El filete izquierdo es el estado de la slide contra su presupuesto. Canal
   distinto del outline naranja de «fuera del formato»: una slide puede estar
   cómoda Y sobrar. */
.slide-row {
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-row);
  overflow: hidden;
}

.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--over-limit { outline: 2px solid var(--color-slide-over); outline-offset: -2px; }

.slide-row__open {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 11px 12px 11px 10px;
  border: 1px solid var(--color-border);
  border-left: none;
  background: var(--color-bg-elevated);
  color: inherit;
  font: inherit;
  text-align: left;
}

.slide-row__open:hover { border-color: var(--color-accent); }

.slide-row__index {
  flex: none;
  width: 22px;
  font-size: var(--fs-row);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

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

/* Una línea con ellipsis: la lista completa se lee de un vistazo o no sirve. */
.slide-row__text {
  font-size: var(--fs-row);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slide-row__badge {
  font-size: var(--fs-label);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.slide-row--empty .slide-row__text { color: var(--color-text-muted); font-style: italic; }

.slide-row__chevron { flex: none; color: var(--color-text-muted); }

/* ---- Editor a pantalla completa ------------------------------------------ */

#view-slide {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
}

/* COLUMNA desde la 2.14.0: arriba la marca, abajo la fila de controles. Era
   una fila sola —‹ · posición · ＋ · 🗑—, y el logo no cabía como quinto
   elemento sin comerse el ancho del título o el blanco tocable de alguno. */
.sf-head {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: calc(env(safe-area-inset-top, 0px) + 4px + var(--space-3))
           calc(var(--space-3) + env(safe-area-inset-right, 0px))
           var(--space-2)
           calc(var(--space-3) + env(safe-area-inset-left, 0px));
}

/* Lo que .sf-head era antes de tener dos filas. */
.sf-head__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* .app-title llega en `display: none` desde css/setup.css, donde es la
   izquierda de la barra superior del ESCRITORIO y por eso arranca oculta. Acá
   se ve siempre —el porqué está en el marcado de js/ui-slide-fullscreen.js— y
   el `font-size` se declara porque allá lo declara la media query de 1024px
   que acá no corre: sin él, el tamaño depende de dónde se monte. */
#view-slide .app-title {
  display: flex;
  font-size: var(--fs-title);
}

.sf-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-head);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.sf-delete { color: var(--color-danger); }

.sf-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0
           calc(var(--space-3) + env(safe-area-inset-right, 0px))
           var(--space-3)
           calc(var(--space-3) + env(safe-area-inset-left, 0px));
}

.sf-meter__track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.sf-meter__fill {
  height: 100%;
  width: 0;
  background: var(--color-border);
}

/* El mismo color de estado que el filete de la fila: es el mismo juicio, y dos
   escalas distintas para lo mismo confunden. */
.sf-meter__fill--comfortable { background: var(--color-slide-ok); }
.sf-meter__fill--tight { background: var(--color-slide-tight); }
.sf-meter__fill--too-long { background: var(--color-danger); }

.sf-meter__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.sf-meter__words {
  flex: none;
  font-size: var(--fs-hint);
  font-variant-numeric: tabular-nums;
}

.sf-meter__label {
  font-size: var(--fs-hint);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.sf-meter__label--comfortable { color: var(--color-slide-ok); }
.sf-meter__label--tight { color: var(--color-slide-tight); }
.sf-meter__label--too-long { color: var(--color-danger); }

.sf-text {
  flex: 1;
  min-height: 11.875rem;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-btn);
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: none;
}

.sf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Cada chip se muestra CON su propio efecto: es la forma más corta de decir
   qué hace cada uno sin una leyenda al lado. */
.sf-chip {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-chip);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-meta);
}

/* Deshacer y rehacer son chips, pero no son marcadores: no insertan nada y
   valen para todo el texto, así que van en acento y separados del resto por un
   filete. Más anchos que un chip de una letra porque una flecha sola en 12,5px
   es un blanco chico, y estos se tocan con el pulgar y sin mirar. */
.sf-chip--history {
  min-width: 2.75rem;
  color: var(--color-accent);
  font-size: 1rem;
  line-height: 1;
}

/* Un botón apagado tiene que LEERSE apagado: sin esto, deshacer sin nada que
   deshacer se ve igual que deshacer con algo, y el primer toque que no hace
   nada parece que la app se colgó. */
.sf-chip--history:disabled {
  opacity: 0.35;
  cursor: default;
}

.sf-chips__sep {
  width: 1px;
  align-self: stretch;
  margin: 2px var(--space-1);
  background: var(--color-border);
}

.sf-note {
  margin: 0;
  font-size: var(--fs-hint);
  line-height: 1.45;
}

.sf-foot {
  flex: none;
  display: flex;
  gap: var(--space-2);
  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));
}

.sf-nav {
  flex: 1;
  min-height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-chip);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-body);
}