/* 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;
}

.sf-head {
  flex: none;
  display: flex;
  align-items: center;
  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));
}

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

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