:root {
  --color-bg: #0b0d10;
  --color-bg-elevated: #14171c;
  --color-text: #f4f4f2;
  --color-text-muted: #9aa0a8;
  --color-accent: #4fd1c5;
  --color-danger: #e5484d;
  /* Identidad de la línea v2: la v1 sigue online en pechakucher.pages.dev y
     las dos tienen que distinguirse de un vistazo (franja del cabezal, badge
     de versión, theme_color del manifest). Lavanda a propósito: lejos del
     acento turquesa, del ámbar de ==resaltado== y del rojo de peligro. */
  --color-edition: #a78bfa;

  /* Colores de los marcadores de formato. Son los ÚNICOS que el usuario puede
     cambiar desde la app (js/fmt-colors.js los pisa en :root con la
     preferencia del dispositivo), así que van en variables propias y no
     reusando las de la paleta: cambiar el ámbar del resaltado no puede
     arrastrar nada más. Los defaults están duplicados en fmt-colors.js a
     propósito — ver el comentario de FMT_COLOR_DEFAULTS. */
  /* Ninguno de estos puede ser --color-accent: el resaltado de la palabra que
     se está leyendo pinta el fondo con ese color, y la marca quedaría
     invisible justo encima de la palabra que se está diciendo. */
  --color-fmt-mark: #f6c945;
  --color-fmt-dim: #9aa0a8;
  /* Acento tónico: amarillento y de bajo contraste contra el texto, porque el
     subrayado ya hace el trabajo de señalar. Un color fuerte acá competía con
     la palabra en vez de marcarla. */
  --color-fmt-stress: #ecdca4;
  --color-border: #262a30;

  /* Estado de una slide contra el presupuesto de su formato. Estaban
     hardcodeados en setup.css desde siempre; el rediseño los usa también en el
     medidor del editor a pantalla completa, y dos hexes iguales en dos
     archivos es como se desincronizan. «Muy larga» sigue siendo
     --color-danger: es el mismo «esto no entra» de siempre, no un cuarto
     color. */
  --color-slide-ok: #3fb950;
  --color-slide-tight: #d29922;
  /* Fuera del formato (la slide 21 de una Pechakucha). Canal independiente del
     de tiempo: una slide puede estar cómoda Y sobrar. */
  --color-slide-over: #f5a623;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;

  /* --radius sigue siendo el de los CONTROLES (inputs, selects, botones de
     barra). El rediseño trajo una escala para las superficies, de más chica a
     más grande: chip, fila, botón grande, tarjeta, hoja modal. Son cinco y no
     una sola porque el salto entre una fila de lista y una tarjeta es
     justamente lo que hace que se lean como cosas distintas. */
  --radius: 10px;
  --radius-xs: 6px;    /* muestras e inputs de color */
  --radius-chip: 12px;
  --radius-row: 13px;
  --radius-btn: 14px;
  --radius-card: 16px;
  --radius-sheet: 20px;
  --radius-pill: 999px;
  /* Escala tipográfica del rediseño. En px y no en rem a propósito: viene del
     diseño como un sistema de tamaños fijos. Todo la referencia por token, así
     que pasarla a rem más adelante es un cambio de este bloque.

     --fs-step (10px) y --ls-step se retiraron en la 2.11.0 con la etiqueta
     «PASO N», que era su único consumidor: un token que nadie lee no prueba
     nada, y el bloque de tests/ui-setup.test.html que compara cada token contra
     su valor computado lo habría seguido dando por bueno para siempre. */
  --fs-screen: 30px;   /* título de pantalla */
  --fs-title: 17px;    /* título de tarjeta */
  --fs-head: 16px;     /* cabezal: título de hoja modal y posición de slide */
  /* El NOMBRE DE LA CHARLA en el cabezal del texto, y sólo él. Era --fs-head
     hasta la 2.14.0, cuando se pidió verlo «un poco más grande»; se separa en
     un token propio en vez de mover aquél porque --fs-head tiene otros dos
     consumidores que no se pidió tocar —el título de una hoja modal
     (css/sheet.css) y el «Slide N de M» del editor (css/slide-editor.css)—, y
     agrandarlos de rebote sería cambiar tres pantallas para arreglar una.
     Lo leen el rótulo Y el campo de renombrar: la caja compartida sigue siendo
     el invariante, así que este token tiene siempre dos lectores o ninguno. */
  --fs-name: 19px;     /* nombre de la charla en el cabezal del texto */
  --fs-body: 14px;     /* texto de control */
  --fs-row: 13.5px;    /* texto de fila */
  --fs-meta: 12.5px;
  --fs-hint: 11.5px;   /* ayuda */
  --fs-label: 11px;    /* título de sección, en mayúsculas */
  --ls-label: 0.8px;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
}

.view {
  min-height: 100vh;
  min-height: 100dvh;
}

/* El atributo hidden tiene que ganarle a cualquier display: del autor (un
   .format-row__custom { display: inline-flex } lo dejaba visible). */
[hidden] {
  display: none !important;
}

.muted {
  color: var(--color-text-muted);
}

button {
  font-family: inherit;
  cursor: pointer;
}

h1 {
  margin: 0 0 var(--space-3);
}

/* ---- Conmutador de idioma ES/EN -------------------------------------------
   Dos botones pegados con un borde común, como un segmented control. El activo
   se distingue por fondo, no sólo por color de texto: a 402px y de reojo, un
   cambio de tinte no se lee.

   Alto de .icon-btn (2.75rem) para que no desalinee el cabezal donde entra al
   lado del «⋯» y del «+». El ancho, en cambio, es el mínimo que deja legible un
   par de letras: es el control menos importante de esas barras. */
.lang-toggle {
  display: flex;
  flex: 0 0 auto;
  align-self: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang-toggle__opt {
  background: none;
  border: 0;
  color: var(--color-text-muted);
  min-height: 2.75rem;
  padding-inline: var(--space-2);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
}
.lang-toggle__opt + .lang-toggle__opt {
  border-left: 1px solid var(--color-border);
}
.lang-toggle__opt[aria-pressed="true"] {
  background: var(--color-bg-elevated);
  color: var(--color-text);
}

/* Iconos SVG en línea — js/icons.js.

   `currentColor` es todo el punto: el icono toma el color del control que lo
   aloja, así que una regla `:disabled` que cambie `color` lo apaga sin tener
   que saber que hay un SVG adentro. Es lo que un emoji no puede hacer, y el
   motivo por el que el parlante del teleprompter dejó de serlo.

   El tamaño en `em` y no en px: los dos consumidores tienen font-size muy
   distintos (1.3rem en la botonera del teleprompter, 0.9rem en «Probar») y así
   ninguno necesita una regla propia.

   `flex: none` porque el segundo consumidor SÍ es una caja flex —«Probar»
   pone icono y palabra en línea— y un SVG sin tamaño intrínseco se achica si
   se lo deja encoger. `vertical-align` porque el que es una caja en línea es
   el propio `.icon` (`inline-block`, más abajo), no el botón que lo aloja: en
   el teleprompter `.tp-controls button` tampoco es una caja en línea —es
   ítem flex de `.tp-controls` (`display: flex`, css/teleprompter.css:307) y
   por eso blockifica a `block`, el mismo mecanismo que `#test-voice-btn` en
   css/ajustes.css—, pero eso no cambia que el SVG, adentro, siga siendo un
   elemento en línea: sin `vertical-align` se apoya en la línea base y queda
   un pelo alto respecto del texto. */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
  flex: none;
}