/* Pantallas que no son la configuración ni el teleprompter: la biblioteca de
   charlas y —más adelante— el onboarding y el editor de slide a pantalla
   completa.
   
   Scroll de página y no un contenedor interno, a propósito: son listas, no
   tienen chrome anclado al pie, y el scroll nativo del documento es el que
   mejor se porta con el momentum de iOS. El contenedor interno lo necesita
   solo la configuración, que sí tiene barra de inicio abajo. */

#view-talks {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-5)) var(--space-3)
           calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
  padding-left: calc(var(--space-3) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--space-3) + env(safe-area-inset-right, 0px));
}

/* La marca de la pantalla de charlas, y el vínculo a la bienvenida. En un
   teléfono esta pantalla era una lista sola en medio de la nada: sin logo, sin
   versión y sin ninguna salida hacia arriba. */
.talks__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: inherit;
  text-decoration: none;
}

.talks__brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.talks__brand-name {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* Mismo pill de versión que la barra de escritorio: dice qué versión tenés
   cargada, que con una PWA que se actualiza sola no es evidente. */
.talks__brand-version {
  font-size: var(--fs-hint);
  color: var(--color-edition);
  border: 1px solid var(--color-edition);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}

.talks__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.talks__title {
  margin: 0;
  font-size: var(--fs-screen);
  font-weight: 700;
  letter-spacing: -0.6px;
}

/* Redondo y no cuadrado como los .icon-btn: es la única acción de creación de
   la pantalla y tiene que leerse como distinta de «abrir esta charla». */
.talks__new {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-accent);
  font-size: 1.4rem;
  line-height: 1;
}

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

/* La tarjeta es el <li>, no un botón: aloja el nombre y el botón de abrir, y
   más adelante el control de formato. El MARCO —fondo, borde, radio— vive acá
   porque los envuelve a todos; el botón de abrir va transparente adentro, sin
   marco propio, que se leería como una tarjeta dentro de otra.

   FILA y no columna desde la 2.12.0: la tarjeta se parte en el contenido y la
   franja de abrir de la derecha. El padding bajó a `.talk-card__body` — si se
   quedaba acá, la franja arrancaría a 16px del borde y dejaría de ser una
   franja. El `overflow: hidden` es lo que la hace respetar el --radius-card:
   sin él, su fondo rectangular asoma por las dos esquinas de la derecha.
   En el riel el único hijo es el botón de abrir, que se estira solo (ver
   .talks--rail más abajo): ahí la fila no cambia nada. */
.talk-card {
  display: flex;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-elevated);
}

/* La columna de contenido: lo que la tarjeta era antes de tener franja. Se
   queda con el padding y con la separación entre el nombre, el bloque de abrir
   y los formatos — el barrido píxel a píxel de tests/talks.test.html mide sus
   gaps y su caja de contenido, no los del <li>. */
.talk-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

/* LA FRANJA. Todo el alto de la tarjeta y cliqueable entera: reemplaza a un
   chevron de ~6px que decía «esto se abre» sin poder tocarse.

   El gris NO sale de un token porque no hay ninguno entre --color-bg-elevated
   (#14171c) y --color-border (#262a30). El idioma que la hoja ya usa para «un
   poco más claro que el fondo» es el overlay blanco con alfa: 0.06 en el chip
   de formato pulsado, 0.07 en la pista de la barra, 0.04 en el botón de
   transferencia. Este es el mismo 0.06. Y NO --color-fmt-*: esos los pisa el
   usuario en runtime (js/fmt-colors.js), así que un gris de estructura no puede
   depender de ellos.

   44px es el mínimo de blanco tocable; `place-items: center` centra el glifo en
   el alto entero, que es lo que hace que se lea como una zona y no como un
   ícono con mucho aire. */
.talk-card__strip {
  flex: none;
  width: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

.talk-card__strip:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}

/* El borde de acento lo pinta la tarjeta entera, pero quién es la charla
   actual lo sabe el botón, que es donde vive aria-current desde que dejó de
   haber un solo nodo. El puente es una clase que pone ui-talks.js y NO un
   :has() sobre el botón, por dos razones:

   1. Un selector inválido tira la regla ENTERA, no sólo su parte: en un
      navegador sin :has() esta regla no llega ni a insertarse, así que se
      perdería también el :hover de la línea de al lado — todas las tarjetas,
      no sólo la actual.
   2. El piso declarado en el README es iOS 15+, y :has() es Safari 15.4. No
      es que el repo evite lo posterior a 15.0: css/setup.css:924 usa
      :focus-visible, que también es 15.4, y está bien porque esa regla está
      SOLA — si no matchea, se pierde el anillo de foco y nada más. La línea
      que importa no es la versión, es si el selector arrastra vecinos al
      caerse. Donde el fallback cabe se escribe a nivel de declaración
      (min-height: 100vh; min-height: 100dvh); un selector no admite ese
      patrón: o matchea o no existe.

   O sea que no es una vuelta larga para lo mismo: es la única forma de que
   el :hover de acá abajo no dependa de un selector que puede no existir.

   Y ese :hover se queda en la TARJETA, no baja al botón. Cuando esto se
   escribió el realce prometía de más: la franja del nombre era zona muerta y
   sólo respondía el bloque de abajo. El renombrado en el sitio cerró ese
   hueco —el nombre es un <button data-action="rename-inline">— y ahora lo
   único muerto del alto útil de la tarjeta son los gaps DECLARADOS entre sus
   controles: 17 px muestreados de 154, que son los dos gaps de 8 de
   .talk-card__body (nombre↔abrir y abrir↔formatos) más el canal de 4 entre las
   dos filas del grupo de formatos. Antes del renombrado en el sitio era un hueco de 27 de 82,
   la franja del nombre pegada al gap. Medido con elementFromPoint píxel a píxel
   en tests/talks.test.html («sólo los gaps declarados quedan muertos»), no
   deducido del layout. O sea que el borde ya no promete nada que no se pueda
   tocar; si esa aserción se cayera, este comentario vuelve a mentir. */
.talk-card--current,
.talk-card:hover {
  border-color: var(--color-accent);
}

/* Los resets que traía .talk-card cuando ELLA era el botón.
   Grilla de UNA columna desde la 2.12.0: la segunda existía sólo para el
   chevron, que se fue a `.talk-card__strip` —hermano del botón, no hijo—. Una
   fila por hijo, ninguna declarada: así en el riel, donde barra y fecha van
   display:none, no quedan filas vacías sumando gaps.

   Sigue siendo grid y no columna flex porque el bloque de abajo del nombre
   —métricas, barra, fecha— se apila igual y el cambio a flex no compraría
   nada; grid deja además `align-items` haciendo lo mismo que hacía. */
.talk-card__open {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

/* El ancho acotado que la tríada de abajo necesita para recortar algo ya no
   sale de `flex: 1; min-width: 0` dentro de .talk-card__top: el nombre es hijo
   directo de la tarjeta, que es una COLUMNA flex, así que el stretch lo deja
   del ancho del contenido de la tarjeta y no del texto. Medido con 200
   caracteres en tests/talks.test.html, porque de eso depende que la lista se
   lea de un vistazo.

   Desde la 2.10.0 este selector matchea DOS elementos distintos: un <button>
   en `cards` (el control de renombrar) y el <span> de siempre en el riel. Un
   solo bloque para los dos porque la tipografía y el recorte valen igual, y
   los tres resets de botón no le hacen nada a un <span>.

   Los tres, y no más: un botón es ítem flex de la tarjeta (o de la grilla, en
   el riel), así que se bloquifica y se estira solo — display y width sobran. Lo
   que NO se arregla solo es el aspecto: el agente de usuario le pone fondo
   gris, texto negro y centrado, que sobre la tarjeta oscura deja el nombre
   ilegible. Que sea un control no puede notarse: la lista se lee como títulos
   de charla, no como una columna de botones. Aserido en
   tests/talks.test.html, porque de un color ningún test de layout se entera. */
.talk-card__name {
  background: none;
  color: inherit;
  text-align: left;
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.2px;
  /* Un nombre largo tiene que acortarse, no ensanchar la tarjeta: la lista
     completa se lee de un vistazo o no sirve de nada. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CAJA COMPARTIDA entre el rótulo y el campo, primera de las dos instancias. El
   porqué —por qué la caja del campo tiene que ser la del rótulo, y por qué eso
   no es cosmética— está escrito UNA sola vez, en js/rename-inline.js, que es el
   módulo que hace el reemplazo; la gemela es `.setup-head__name,
   .setup-head__name-input` en css/setup.css, y ahí está también el porqué de que
   sean dos bloques y no una regla común.

   DE ESTA PANTALLA: el padding es SÓLO vertical porque uno lateral indentaría el
   título respecto de las métricas de abajo, que empiezan en el borde del
   contenido. Y acá la que se corre debajo del dedo es la LISTA entera, porque la
   tarjeta no tiene alto fijo que absorba la diferencia.

   MEDIDO a 402px sobre el marcado que ui-talks.js produce: 30px de nombre con
   esta regla, 26 sin ella. Ninguno de los dos cae por debajo del 24 de WCAG 2.2
   SC 2.5.8 — los resets de arriba pisan background, color, text-align y
   font-size, así que el <button> CONSERVA el padding y el borde del agente de
   usuario y nunca se queda en el alto de su contenido pelado. La aserción de
   altura de tests/talks.test.html es entonces un piso absoluto, no la defensa de
   este bloque.

   Sólo en `cards`: en el riel el nombre no es un control y no reserva nada. */
.talks--cards .talk-card__name,
.talk-card__name-input {
  padding: var(--space-1) 0;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
}

/* Sobre un <input> la tríada del recorte NO vale y no tiene que valer:
   text-overflow no pone puntos suspensivos en un campo con foco, y no debería
   —hay que poder ver lo que se escribe, que para eso se abrió—. El invariante
   que sí vale mientras se edita es que LA CAJA NO CREZCA: 200 caracteres tienen
   que desbordar el campo en lugar de ensanchar la tarjeta o empujar la página
   de costado. Eso NO lo declara esta regla: lo hace el stretch del flex de la
   tarjeta contra el box-sizing:border-box global de main.css, igual que con el
   botón. Un `width: 100%` acá sería la misma declaración que no hace nada que
   este bloque acaba de sacarle a .talk-card__name tres reglas más arriba.
   Medido en tests/talks.test.html, que es donde está escrito el porqué. */
.talk-card__name-input {
  border-color: var(--color-accent);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* (Acá vivían .talk-card__chevron y el `grid-column: 1` que mandaba a todo lo
   demás a la primera columna para no compartir fila con él. Se fueron juntos
   en la 2.12.0, y tenían que irse juntos: el chevron era el único motivo de
   que .talk-card__open tuviera dos columnas, y con una sola columna mandar a
   alguien «a la 1» no dice nada.

   El chevron pedía además un `grid-row: 1 / span 3` acoplado al marcado —tres
   hijos hoy, un número a mover si mañana son cuatro—; la franja no tiene ese
   problema porque su alto lo da la fila flex de la tarjeta, no un conteo.
   Quien defiende que las métricas siguen DEBAJO del nombre es la aserción de
   apilado de tests/desktop.test.html, que no se tocó.) */

/* Los cuatro presets, como CONTROL y no como etiqueta. Acá vivía
   .talk-card__badge, que decía cuál era el formato y no dejaba cambiarlo: el
   grupo dice lo mismo Y lo cambia, así que dejar los dos sería decir lo mismo
   dos veces en una tarjeta que ya lleva nombre, métricas, barra y fecha. El que
   sobra es el que no se puede tocar. (Con el badge se fue también su envoltorio
   .talk-card__meta, que era un flex sólo para ponerlo al lado de los números.)

   Grilla de dos columnas y no una fila flex que envuelve. El argumento NO es
   el recorte: una fila envolvente no trunca nada, envuelve, que para eso está.
   Es que reparte el ancho según el LARGO DE CADA RÓTULO, y eso da cuatro
   blancos de cuatro tamaños distintos. Medidos los anchos naturales a 402 px:
   Pechakucha 87, Ignite 51, Personalizado 99, Libre 47 (en inglés, 87/51/62/43)
   — el blanco más chico queda a menos de la mitad del más grande, y cuál es el
   más chico cambia con el idioma. En un control de cuatro opciones excluyentes
   eso no es un detalle: el tamaño del blanco deja de decir «cuatro cosas
   equivalentes».

   Y dónde parte las filas tampoco es estable. Los cuatro suman 296 px con sus
   gaps (255 en inglés) contra 336 px útiles a 402: entran en un renglón. A
   320 px —el ancho de un iPhone SE, dentro del iOS 15+ que declara el README—
   los útiles caen a 254 y envuelven, en dos filas desparejas. La grilla da
   cuatro blancos IGUALES en los dos anchos y en los dos idiomas: 166×28 a 402.
   Es además la misma forma que .format-grid (js/ui-format.js), que ofrece estos
   mismos cuatro y por la misma razón — aquélla fue el paso «Formato» del riel y
   desde la 2.11.0 sólo vive en su página de test, pero las dos siguen
   recorriendo PRESET_IDS y por eso no se pueden separar sin que algo lo diga.

   En el RIEL no hay nada que esconder: no se pinta. Lo decide `variant ===
   "cards"` en ui-talks.js, y es más fuerte que un display:none —que sigue
   costando nodos y sigue estando a una declaración de volver—. Lo mide
   tests/desktop.test.html. */
.talk-card__formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}

/* El aspecto lo hereda del badge que reemplaza: pastilla, letra chica, y en
   acento cuando está elegido. Los resets de botón son los mismos tres que
   .talk-card__name necesita por lo mismo — el agente de usuario le pone fondo
   gris y texto negro, que sobre la tarjeta oscura queda ilegible.

   El min-height de 1.75rem (28px) no es decorativo: es el 24×24 de WCAG 2.2
   SC 2.5.8, el mismo mínimo que este proyecto ya cita en el riel y en la franja
   del nombre, con margen para el redondeo. Medido con elementFromPoint en
   tests/talks.test.html, no deducido del layout. */
.talk-card__format {
  /* Los tres juntos, y los tres hacen falta. Un ítem de grilla trae
     min-width:auto, así que un rótulo largo ESTIRA su pista y con ella la
     tarjeta; con min-width:0 la pista manda. Y sin nowrap el rótulo no
     desborda: envuelve en dos renglones y engorda la fila, que es un modo de
     falla que ninguna medición de ancho puede ver — medido, un rótulo de 33
     caracteres dejaba la suite entera en verde. Con los tres, un rótulo que no
     entra se CLIPEA, y eso sí lo caza scrollWidth > clientWidth en
     tests/talks.test.html. Clipeado y no con puntos suspensivos a propósito:
     en un control, un «Person…» es elegir a ciegas, así que el recorte tiene
     que verse roto y salir en rojo, no disimularse. */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  min-height: 1.75rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-align: center;
}

.talk-card__format[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-accent);
}

.talk-card__numbers,
.talk-card__when {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.talk-card__numbers { font-size: var(--fs-meta); }
.talk-card__when { font-size: var(--fs-hint); }

/* Qué proporción del formato está escrita. Es la única señal de «cuánto te
   falta» que se puede dar sin abrir la charla. */
.talk-card__bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.talk-card__fill {
  display: block;
  height: 100%;
  background: var(--color-accent);
}

/* Importar/exportar en la pantalla de charlas: borde de acento y alto de
   blanco tocable, no el dashed apagado de «+ Agregar slide». Es la única
   forma de traer una charla desde otro dispositivo, y hasta la 2.7.0 estaba
   enterrada dentro del «⋯» de una charla ya abierta. */
#view-talks [data-action="open-transfer"] {
  min-height: 2.875rem;
  border-style: solid;
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--fs-body);
  font-weight: 600;
}

/* ---- Bienvenida ---------------------------------------------------------- */

#view-onboarding {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
}

.onboarding {
  flex: 1;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-5))
           calc(var(--space-4) + env(safe-area-inset-right, 0px))
           calc(env(safe-area-inset-bottom, 0px) + var(--space-4))
           calc(var(--space-4) + env(safe-area-inset-left, 0px));
}

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

.onboarding__icon { border-radius: 11px; }

/* El conmutador ES/EN se cuelga de .onboarding__brand —lo hace
   ui-onboarding.js—, que es la fila del logo. Sin esto queda pegado al
   wordmark: se lee encima del logo y sin relación con el resto de la columna.
   Con el auto se va al borde derecho del .onboarding, que es donde terminan el
   titular, el texto, los tres pasos y el botón.
   `margin-left: auto` y no `justify-content: space-between` en la fila: el
   sobrante tiene que quedar entre el wordmark y el conmutador, y no repartido
   también entre el icono y el wordmark. */
.onboarding__brand .lang-toggle { margin-left: auto; }

.onboarding__wordmark {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.onboarding__edition {
  font-size: var(--fs-meta);
  color: var(--color-edition);
}

.onboarding__headline {
  margin: 0;
  font-size: var(--fs-screen);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.8px;
  text-wrap: pretty;
}

.onboarding__lead {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: pretty;
}

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

.onboarding__step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-body);
  line-height: 1.45;
}

.onboarding__num {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-row);
  font-weight: 700;
}

.onboarding__cta {
  width: 100%;
  min-height: 3.25rem;
  border: none;
  border-radius: var(--radius-btn);
  background: var(--color-accent);
  color: #06231f;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
}

.onboarding__foot {
  margin: 0;
  text-align: center;
  font-size: var(--fs-meta);
  line-height: 1.4;
}

/* El riel de charlas del escritorio: las mismas tarjetas, más apretadas y sin
   la barra de avance ni la fecha — a esa altura de la pantalla lo que hace
   falta es cambiar de charla, no compararlas. */
/* El rótulo se queda con TODO el sobrante (`flex: 1`) desde la 2.14.0, y no es
   cosmética: `.talks__head` es `justify-content: space-between`, que con dos
   hijos ponía uno en cada punta y con TRES —rótulo, «Ver todas», «+»— repartiría
   el hueco también ENTRE el enlace y el botón. Y ésos son las dos acciones de la
   lista: separarlos sería leerlos como dos cosas sueltas en vez de como el
   rincón donde se opera sobre la lista entera. */
.talks--rail .talks__title { flex: 1; min-width: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label, 0.8px); text-transform: uppercase; color: var(--color-text-muted); }

/* La salida hacia #talks. Se pinta como ENLACE y no como botón —que es lo que
   es—: en el acento, sin recuadro y con el subrayado guardado para el hover. Al
   lado del «+», que sí es un botón redondo con borde, dos recuadros competirían
   por el mismo rincón de 240px.

   `min-height: 2rem` es exactamente el alto del «+» del riel —así los dos se
   apoyan en la misma línea de abajo, que es lo que `align-items: flex-end` del
   cabezal alinea— y es también lo que lo deja arriba de los 24×24 de blanco
   tocable de WCAG 2.2 SC 2.5.8, que un enlace de 11.5px no alcanzaría solo.
   `white-space: nowrap` porque el riel se estrecha a mano con el divisor
   arrastrable: lo que no entra se sale del cabezal, no se parte en dos líneas
   debajo del rótulo. */
.talks--rail .talks__all {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--space-1);
  color: var(--color-accent);
  font-size: var(--fs-hint);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.talks--rail .talks__all:hover { text-decoration: underline; }

.talks--rail .talks__new { width: 2rem; height: 2rem; font-size: 1.1rem; }
/* En el riel el nombre va DENTRO del botón, así que la tarjeta entera es una
   sola cosa tocable — y para que el blanco sea la tarjeta entera y no su
   interior, el padding lo lleva el botón. En `cards` lo lleva
   .talk-card__body, que envuelve el nombre, el bloque de abrir y los formatos;
   el <li> va sin padding en las dos variantes desde la 2.12.0, para que la
   franja pueda pegarse al borde. Medido con elementFromPoint: 238×51 de 240×53.

   El `flex: 1` es lo que mantiene ese 238: la tarjeta es fila flex y acá su
   único hijo es el botón, que sin estirarse se quedaría del ancho del nombre y
   dejaría muerta la derecha del riel — justo lo contrario de lo que este
   bloque busca. (La franja no se monta en el riel: ui-talks.js sólo la
   construye en `cards`, así que no hay nada que ocultar.) */
.talks--rail .talk-card { padding: 0; border-radius: var(--radius); }
.talks--rail .talk-card__open { flex: 1; min-width: 0; padding: var(--space-2); gap: var(--space-1); }
.talks--rail .talk-card__name { font-size: var(--fs-row); }
.talks--rail .talk-card__bar,
.talks--rail .talk-card__when { display: none; }
.talks--rail .talk-card--current { background: rgba(255, 255, 255, 0.06); }

/* El 🗑 de cada tarjeta del riel (2.14.0). Hermano del botón de abrir dentro de
   la misma fila flex, así que `align-self: stretch` le da el alto ENTERO de la
   tarjeta sin declarar ninguno: 36×51, muy por encima del 24×24 de WCAG 2.2
   SC 2.5.8, y de los 240px del riel se lleva esos 36 — el nombre conserva ~194,
   que es donde su recorte con puntos suspensivos sigue dejando ver de qué
   charla se trata.

   SIN FONDO, al revés que `.talk-card__strip`. Aquélla es el blanco de ABRIR y
   se pinta para leerse como zona; ésta se repite en cada tarjeta, y una columna
   de recuadros pegada al borde derecho pesaría más que la lista que acompaña. El
   borde de la izquierda sí va: es lo único que impide que el glifo se lea como
   parte del botón de al lado.

   --color-danger es el mismo rojo de `.sf-delete` (css/slide-editor.css), y se
   declara sabiendo que en iOS y en macOS no se ve: el 🗑 lo pinta Apple Color
   Emoji y `color` no lo toca —allá pasa exactamente lo mismo—. Queda para la
   presentación de TEXTO del glifo, que es lo que aparece donde no hay fuente de
   emoji en color.

   Y el :hover va en el overlay blanco de siempre —0.06, el de la franja, el de
   la tarjeta actual y el del chip de formato pulsado— y no en un rojo con alfa:
   rgba() no sabe leer un token hex, así que un rojo translúcido acá sería el
   único color del riel escrito a mano en vez de salir de --color-danger. */
.talks--rail .talk-card__delete {
  flex: none;
  align-self: stretch;
  width: 2.25rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: none;
  color: var(--color-danger);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.talks--rail .talk-card__delete:hover { background: rgba(255, 255, 255, 0.06); }