/* ============================================================
   evento.css — la pantalla de un evento

   Puesta en marcha en PASOS: reparti, ajusta, abri. Los tres no
   se bloquean entre si — el numero ordena, no exige.

   Dos pestanas, en pastilla y no subrayadas. La caja de datos
   va al costado y no en su propia pestana: es informacion de
   referencia que se mira de reojo mientras se hace otra cosa.

   Sin colores literales salvo el blanco de la chapa del QR,
   que no es una decision de disenio: es parte del codigo.
   ============================================================ */

/* --- pestañas en pastilla ------------------------------------------------ */

/* Con dos pestanas el subrayado es casi invisible: no hay fila suficiente
   como para que la linea se lea. La pastilla se ve encendida de lejos y
   aguanta que manana entre una tercera sin rediseniar nada. */
.pastillas {
  display: flex;
  gap: var(--e8);
  padding-bottom: var(--e32);
  flex-wrap: wrap;
}

/* Solo la elegida lleva la pastilla. Con todas rodeadas, la fila se lee como
   un grupo de botones iguales y hay que buscar cual esta encendida; con una
   sola, la forma ES la seleccion. */
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: var(--e8);
  height: 38px;
  padding: 0 var(--e16);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--t-apoyo);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.pastilla:hover { color: var(--color-text); }

.pastilla.is-on {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-on-action);
}

/* --- el tablero ---------------------------------------------------------- */

.tablero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--e64);
  align-items: start;
  padding-bottom: var(--e128);
}

/*
 * La columna ancha del tablero.
 *
 * La clase estaba en el JS desde siempre y ninguna hoja la mencionaba. Lo que
 * le corresponde es esto: un item de grilla NO se encoge por omision debajo del
 * ancho de su contenido, asi que una tarjeta de link con una URL larga adentro
 * puede empujar la columna y desbordar el tablero. El `minmax(0, 1fr)` cubre la
 * columna; esto cubre al hijo.
 */
.tablero__ancho { min-width: 0; }

/* --- QR ------------------------------------------------------------------ */

.qr-bloque { display: flex; flex-direction: column; align-items: center; gap: var(--e16); }

/* El QR va en su propia chapa blanca, siempre. La zona de silencio y el blanco
   son parte del codigo, no decoracion: sin eso muchos lectores no lo
   encuentran. Es el unico color literal de esta hoja, y por eso. */
.qr {
  padding: var(--e8);
  background: #ffffff;
  border-radius: var(--radius-inner);
  line-height: 0;
  flex: none;
}

.qr-codigo {
  font-family: var(--font-mono);
  font-size: var(--t-seccion);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
}

/* --- links --------------------------------------------------------------- */

.links { display: flex; flex-direction: column; gap: var(--e8); }

.link {
  display: flex;
  align-items: center;
  gap: var(--e16);
  padding: var(--e16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inner);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.link:hover { border-color: var(--color-border-hover); }

.link__titulo { font-size: var(--t-apoyo); font-weight: var(--weight-medium); }
.link__nota { font-size: var(--t-etiqueta); color: var(--color-text-muted); line-height: 1.4; }

/*
 * LA CAUSA DEL DESBORDE EN TELEFONO.
 *
 * La URL es `nowrap` con puntos suspensivos, que es lo correcto -una URL cortada
 * en dos renglones no se lee ni se dicta- pero vivia adentro de un hijo flexible
 * SIN `min-width: 0`.
 *
 * Un item de flex no se encoge por debajo del ancho de su contenido salvo que se
 * le diga: su `min-width` por omision es `auto`, que para un texto `nowrap` es el
 * largo entero. Asi que la fila crecia hasta donde medía la URL y se salia de la
 * pantalla, arrastrando el resto del bloque. En el panel no se notaba porque
 * sobraba ancho.
 *
 * Los puntos suspensivos tampoco aparecian nunca por el mismo motivo: no tenian
 * de donde recortar.
 */
.link > .crece,
.resumen__item > .crece { min-inline-size: 0; }

.link__url {
  font-family: var(--font-mono);
  font-size: var(--t-etiqueta);
  color: var(--color-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  /* Y el propio nodo, por si queda en un contexto de flex directo. */
  min-inline-size: 0;
}

/* --- lo que un paso ofrece cuando no es un link -------------------------- */

/*
 * ACA VIVIA LA CAJA DEL STUDIO, y de ahi salio todo este cambio.
 *
 * Era glifo a la izquierda, un hueco en el medio y el boton a la derecha. El
 * hueco es la procedencia del diseno, que solo aparece cuando alguien lo trajo a
 * mano. En telefono la caja se partia, el boton tomaba el ancho y bajaba, y
 * arriba quedaba el glifo solo. Con el glifo arriba en el encabezado, lo que
 * quedaba era un boton: y una caja alrededor de un solo boton dibuja un marco
 * para no decir nada.
 */
.paso__acciones {
  display: flex;
  align-items: center;
  gap: var(--e8);
  flex-wrap: wrap;
}

/* De donde salio el diseno. Mas chico que la nota y con su glifo: es
   procedencia, no una instruccion. */
.paso__origen {
  display: flex;
  align-items: center;
  gap: var(--e6);
  font-size: var(--t-etiqueta);
  color: var(--color-text-muted);
}

/* --- los pasos ----------------------------------------------------------- */

/*
 * 64 entre un paso y el siguiente.
 *
 * Estaba en 32, el mismo salto que hay ADENTRO de un paso entre su texto y su
 * caja. Con la misma medida para las dos cosas, no se leia donde terminaba uno y
 * empezaba el otro: seis bloques a distancia pareja son una lista de doce cosas.
 */
.pasos { display: flex; flex-direction: column; gap: var(--e32); }

/*
 * El paso es una COLUMNA, no una fila con el numero al costado.
 *
 * El numero era un circulo de 34 a la izquierda que se llevaba un margen entero
 * de la columna, y el boton de marcar colgaba a la derecha del titulo
 * compitiendo con el. Ahora arriba va una fila propia -"Paso 3" a la izquierda,
 * la casilla a la derecha- y debajo el titulo con la columna entera para el
 * texto.
 */
/*
 * Y EL AIRE DE ADENTRO NO ES UNIFORME: 8 en la cabecera, 24 antes del cuerpo.
 *
 * Eran 16 parejos, y Leon lo leyo como lo que era: *"se ve todo bastante
 * comprimido... la fila que dice el paso, el titulo y subtitulo, la caja donde
 * esta el link, y el boton se beneficiarian de aire consistente"*.
 *
 * "Consistente" no es "igual". El renglon del glifo y el titulo son LA MISMA
 * COSA -la cabecera del paso- y van juntos; el cuerpo es otra cosa y necesita
 * separarse. Con 16 parejos las tres piezas se leen como tres items de una
 * lista, que es justo la sensacion de amontonado.
 *
 * El cuerpo es siempre el ultimo hijo -la zona de subida, el bloque del Studio,
 * los moderadores, el QR, o el `details` del paso ya hecho- asi que la regla no
 * necesita saber cual es.
 */
.paso {
  display: flex;
  flex-direction: column;
  gap: var(--e8);
}

.paso > :last-child { margin-block-start: var(--e16); }

/*
 * El encabezado: el glifo y "Paso 3" a la izquierda, la casilla a la derecha.
 *
 * UN SOLO RENGLON, EN CUALQUIER ANCHO. Y no es lo que hacia:
 *
 *   - Primero la fila pasaba a columna en telefono, y eso ponia el glifo en su
 *     propio renglon, separado del numero al que pertenece.
 *   - Despues se partia con `flex-wrap` y la casilla bajaba sola. Pero entra: el
 *     glifo mide 32, "Paso 1" unos 45, y la casilla con su texto unos 180. En
 *     390 de ancho sobran ochenta pixeles.
 *
 * Asi que no se parte. Lo que puede pasar en un telefono muy angosto es que el
 * texto de la casilla se recorte, y eso es mejor que un renglon de mas: el texto
 * repite lo que la casilla ya dice con su forma.
 *
 * Y SIN FILETE DEBAJO. Lo tuvo mientras un paso no tenia caja -ahi el filete era
 * su unica division- y se fue con la caja (ADR-032): con las dos, la que se lee
 * mal es la de adentro. Leon lo reporto asi: "da la impresion de que ese es el
 * corte entre secciones". El corte lo dibuja el rotulo de la etapa.
 */
.paso__fila {
  display: flex;
  align-items: center;
  gap: var(--e12);
  flex-wrap: nowrap;
}

/*
 * EL GLIFO DEL PASO. Aca, y no adentro de la caja del cuerpo.
 *
 * 32 y UNO SOLO. Adentro de las cajas media 36 en las filas de link y 44 en la
 * del Studio: dos medidas para la misma idea, porque cada caja lo resolvia por
 * su cuenta. En el encabezado compite con el borde de abajo y con el numero, que
 * es texto chico, asi que 44 lo dominaba todo.
 *
 * Apagado y no de color: es un indice, no un estado. El unico que cambia de
 * color es el del paso hecho.
 */
.paso__glifo {
  inline-size: 32px;
  block-size: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-micro);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

/*
 * "Paso 3", en texto chico y apagado.
 *
 * Era un numero solo adentro de un circulo, y un numero sin la palabra obliga a
 * deducir que es un orden. Dicho con la palabra ocupa menos atencion y dice mas.
 */
.paso__numero {
  font-size: var(--t-etiqueta);
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* El titulo y su instruccion, pegados entre si y separados de la caja: son una
   sola unidad de lectura. */
.paso__texto { display: flex; flex-direction: column; gap: var(--e6); }

.paso__titulo {
  font-size: var(--t-seccion, var(--t-tarjeta));
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}

/* La instruccion, un escalon abajo del titulo y en el gris de apoyo: explica
   como hacer el paso, no compite con decir cual es. */
.paso__instruccion {
  margin: 0;
  font-size: var(--t-apoyo);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 62ch;
}

/* --- la casilla de cada paso --------------------------------------------- */

/*
 * La MISMA que la de la vista de tarjetas: cuadrada, vacia la silueta y marcada
 * el icono. El icono del set ya es un cuadrado con el tilde, asi que meterlo
 * adentro de un circulo era dibujar una caja adentro de otra.
 */
.paso__casilla {
  display: flex;
  align-items: center;
  gap: var(--e8);
  /*
   * Se encoge antes que partir la fila, y no al reves.
   *
   * Era `flex: none`, asi que en un ancho donde el texto no entraba la fila se
   * partia y la casilla bajaba a su propio renglon. Recortar "Marcar como
   * completado" cuesta menos que un renglon de mas: la casilla cuadrada ya dice
   * lo que es, y el texto lo repite en palabras.
   */
  flex: 0 1 auto;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--t-apoyo);
  cursor: pointer;
  transition: color .12s ease;
}

.paso__casilla:hover { color: var(--color-text); }

/* La caja ya trae `flex: none` en su propia regla, asi que no se encoge: el
   control es el blanco que se toca y no cede. Lo que cede es el texto. */

.paso__casilla__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.paso__casilla__caja {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  /*
   * EL MISMO BORDE Y EL MISMO RELLENO QUE LA SALIDA DEL CHECKLIST.
   *
   * Leon senialo un borde que le funciona y pidio ese: *"a los bordes de los
   * checkboxes ponle el borde que tiene el boton de Las fotos del evento que
   * esta dentro de ese mismo checklist"*.
   *
   * Y el borde solo no alcanzaba para igualarlos: ese boton se lee bien porque
   * su borde esta sobre un RELLENO propio -`--color-surface-muted`-, y un borde
   * del mismo color sobre un fondo mas oscuro contrasta menos. Asi que la
   * casilla toma las dos cosas. Un cuadrado vacio con relleno sutil y borde
   * visible es ademas la forma mas legible de un checkbox, y resuelve mejor el
   * "demasiado sutil" que engrosar la linea.
   */
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  transition: border-color .12s ease, transform .12s ease;
}

/*
 * EL APRETON SE SIENTE. Es el feedback mas barato que existe y el que mas se
 * nota: el kit ya lo hace en los botones -`.btn:active { scale(0.97) }`- y una
 * casilla que no se mueve al tocarla se lee como que no registro el toque.
 *
 * Dos pasos y no uno: se hunde al apretar y crece un pelo al soltar, que es lo
 * que da la sensacion de que algo se confirmo.
 */
.paso__casilla:active .paso__casilla__caja { transform: scale(0.88); }

.paso__casilla:hover .paso__casilla__caja { border-color: var(--color-text); }

.paso__casilla.is-listo { color: var(--color-text); }
/* Marcada: el icono y nada mas. Ni borde ni relleno, porque el icono del set ya
   ES un cuadrado con el tilde recortado y encerrarlo seria una caja en otra. */
.paso__casilla.is-listo .paso__casilla__caja {
  border-color: transparent;
  background: none;
}

/* La que se MIDIO no se toca: desmarcar un hecho no es una decision que exista,
   y un control que no responde hace creer que la pantalla se colgo. */
.paso__casilla.is-medido { cursor: default; }
.paso__casilla.is-medido:hover { color: var(--color-text); }
.paso__casilla.is-medido:hover .paso__casilla__caja { border-color: transparent; }

.paso__qr {
  display: flex;
  align-items: center;
  gap: var(--e24);
  padding: var(--e24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

/* El QR, mas chico. A 150 era el objeto mas grande del paso y se llevaba la
   atencion; para lo que sirve en pantalla -confirmar que es el correcto-
   alcanza con reconocerlo. El que se imprime sale a 1200 por el boton. */
.paso__qr .qr { flex: none; }
.paso__qr .qr-codigo { font-size: var(--t-tarjeta); }

/* Rotula el link de abajo del QR. Sin esto se lee como si fuera lo que se
   proyecta, que es otro link y esta en el paso 3. */
.qr-rotulo {
  font-size: var(--t-etiqueta);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-align: center;
}

/* --- el aviso del paso del QR -------------------------------------------- */

/* Cruza el bloque entero, debajo del QR: es lo que decide si ese QR sirve, asi
   que no puede leerse como una columna mas al costado. */
.paso__qr { flex-wrap: wrap; }

/*
 * Aca vivia el interruptor del evento -la pastilla de estado y su boton-, que
 * era el mismo que la cabecera ya tiene arriba. Lo que quedo es el aviso: una
 * sola linea, y solo en los estados que tienen algo que avisar.
 *
 * `live` no tiene regla porque no tiene aviso: su `nota` es `null`. Es a
 * proposito y hay una prueba que lo afirma al reves -que ningun estado con nota
 * se quede sin color, y que ninguno sin nota tenga una regla de mas-.
 */
.qr-aviso {
  flex-basis: 100%;
  margin: 0;
  padding-top: var(--e16);
  border-top: 1px solid var(--color-border);
  font-size: var(--t-apoyo);
  line-height: 1.5;
}

.qr-aviso[data-estado="draft"] { color: var(--color-warning-text); }
.qr-aviso[data-estado="closed"] { color: var(--color-text-muted); }

/* --- el chip de la cabecera ---------------------------------------------- */
/* --- teléfono ------------------------------------------------------------ */

@media (max-width: 63.99rem) {
  .tablero { grid-template-columns: minmax(0, 1fr); gap: var(--e32); }
  /* En una sola columna la caja queda abajo: pegada arriba taparia el
     contenido al que acompana. */
}

@media (max-width: 47.99rem) {
  /* El aire entre pasos ya es 32 en todas las anchuras; lo que baja en un
     telefono es el de adentro del paso. */
  .paso { gap: var(--e8); }


  /*
   * El encabezado se queda en un renglon, con menos hueco.
   *
   * Aca estaban las dos reglas que lo partian: `display: none` al separador
   * flexible y `flex-basis: 100%` a la casilla, que la mandaban a su propio
   * renglon. Entra al lado -glifo 32, "Paso 1" unos 45, casilla unos 180, contra
   * 358 de ancho util en un telefono de 390- asi que el renglon de mas era por
   * nada. El separador se queda, que es lo que empuja la casilla a la derecha.
   */
  .paso__fila { gap: var(--e8); }

  .paso__qr { flex-direction: column; align-items: stretch; }

  /*
   * LA TARJETA DEL LINK, EN COLUMNA POR DISENO Y NO POR DESBORDE.
   *
   * Se partia con `flex-wrap`: el link arriba a la izquierda y los dos botones
   * abajo pegados al borde derecho. Quedaba una L, y dos botones chicos en una
   * esquina son el peor blanco posible para un pulgar.
   *
   * Ahora el link ocupa el ancho entero y los dos botones se lo reparten.
   * "Copiar el link" lleva el doble que "Ver" porque es el que se usa: partes
   * iguales dejarian "Ver" tan grande como el principal.
   */
  .link { flex-direction: column; align-items: stretch; gap: var(--e12); }
  .link > .link__acciones > .btn { flex: 1 1 0; justify-content: center; }
  .link > .link__acciones > .btn--primary { flex: 2 1 0; }

  /* Un paso cuyo cuerpo es un boton: al ancho, en vez de colgado a la izquierda. */
  .paso__acciones > .btn { flex: 1 1 auto; justify-content: center; }
}

/* El muro de fotos se mudo a `fotos.css`.

   Vivia aca porque esta pantalla era una pestana de la del evento. Cuando dejo
   de serlo las reglas se quedaron, y de ahi venia buena parte de lo que se veia
   distinto: dos pantallas compartiendo una hoja terminan compartiendo
   decisiones que no se tomaron para las dos. */

/*
 * Aca habia un SEGUNDO `.agregar-campo`.
 *
 * Esta hoja lo declaraba dos veces: esta version -36 px de alto, color de
 * accion, sin borde- y la de mas abajo, que es la que se ve. La segunda gana
 * casi todo, pero lo que la segunda NO declara sobrevive de la primera, y lo
 * que no declaraba era `margin-top: var(--e16)`.
 *
 * De ahi salia el reporte: ese margen se SUMA al hueco de 16 de `.ficha-grupo`,
 * asi que el boton quedaba a 32 del subtitulo y a 16 de la fila de abajo. Con
 * detalles cargados no se notaba -las filas se meten en el medio- y sin ellos
 * el boton quedaba flotando lejos del titulo que lo explica.
 *
 * Un selector repetido no lo atrapa ninguna guardia de las que hay: las dos
 * reglas son validas, la clase existe y alguien la pide.
 */

/* --- la modal de datos del evento ---------------------------------------- */

/*
 * TRES GRUPOS, con 32 entre uno y otro y 16 entre campos.
 *
 * Estaban los seis campos seguidos con el mismo hueco entre todos, asi que no se
 * leia que "nombre, clientes, fecha y tipo" son la ficha del evento y lo de
 * abajo es otra cosa. Sin jerarquia de espacio, seis campos son una planilla.
 */
.modal__body > .ficha-grupo + .ficha-grupo { margin-block-start: var(--e32); }

/*
 * 24 ENTRE CAMPOS, NO 16.
 *
 * Con 16 adentro del grupo y 32 entre grupos, la diferencia era de un escalon y
 * los seis campos se leian como una planilla apretada. Reportado asi: "el
 * espacio entre un campo y otro parece muy estrecho, haciendo que todo se
 * sienta comprimido".
 *
 * 24 y 32 siguen distinguiendose -un campo lleva su rotulo arriba, asi que el
 * hueco entre dos campos compite con el hueco entre rotulo y control, que es
 * 6- y de paso 24 es el mismo hueco que separa los bloques de la pantalla de
 * ajustes. Dos pantallas de formulario con el mismo ritmo.
 */
.ficha-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e24);
}

.modal__subtitulo {
  margin: 0;
  font-size: var(--t-apoyo);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.modal__ayuda {
  margin: 0;
  font-size: var(--t-etiqueta);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/*
 * El campo de fecha, con la altura de los demas.
 *
 * Un `input[type=date]` trae su propia caja del navegador: sin un ancho propio
 * toma el que quiere -y en un telefono se pasa del dialogo- y sin altura queda
 * uno o dos pixeles mas alto que un campo de texto, que al lado se nota.
 */
.entrada--fecha {
  /* Que pueda encogerse: la altura y el borde los pone `field__control`. */
  inline-size: 100%;
  min-inline-size: 0;
}

/* --- los detalles propios del evento ------------------------------------- */

.campos-editables {
  display: flex;
  flex-direction: column;
  gap: var(--e12);
}

/*
 * Una fila: el nombre, el valor y la cruz EN LA MISMA LINEA.
 *
 * La cruz quedaba debajo de los dos campos y los campos a anchos distintos: la
 * rejilla de tres columnas no cabia en el dialogo y se derramaba. Ahora el
 * nombre es mas angosto -es lo que mide una etiqueta-, el valor toma el resto, y
 * la cruz va pegada al valor.
 */
.campo-editable {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
  gap: var(--e8);
  align-items: end;
}

.campo-editable__parte {
  display: flex;
  flex-direction: column;
  gap: var(--e6);
  min-inline-size: 0;
}

/* El rotulo de cada parte. Sin esto, la primera vez nadie sabe cual de las dos
   cajas es el nombre y cual el valor. Solo en la primera fila: repetido en las
   doce es ruido. */
.campo-editable__rotulo {
  font-size: var(--t-etiqueta);
  color: var(--color-text-muted);
}

.campo-editable:not(:first-child) .campo-editable__rotulo { display: none; }

.campo-editable__quitar {
  display: grid;
  place-items: center;
  /* 2.5rem: la misma altura que `field__control`, para que la cruz quede
     alineada con el campo de al lado y no un pixel arriba. */
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-micro);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}

.campo-editable__quitar:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.agregar-campo {
  display: inline-flex;
  align-items: center;
  gap: var(--e8);
  align-self: start;
  /* 12 a los lados era menos que el de cualquier boton del kit, que es 16: al
     lado de uno se leia como otro componente. */
  padding: var(--e8) var(--e16);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-inner);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--t-apoyo);
  cursor: pointer;
}

.agregar-campo:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

/*
 * EN TELEFONO, A TODO EL ANCHO.
 *
 * Lo pidio Leon. Y no es solo comodidad de pulgar: `align-self: start` lo
 * dejaba del ancho de su texto, asi que en una columna de 360px quedaba un
 * boton chico y descentrado debajo de una caja de ancho completo — se leia como
 * si se hubiera caido ahi. A todo el ancho cierra la columna.
 *
 * Y VA DESPUES DE LA REGLA BASE, no en el bloque de telefono de mas arriba.
 * Un `@media` no agrega especificidad: `.agregar-campo` adentro de uno pesa lo
 * mismo que afuera, asi que gana el que esta mas abajo en la hoja. Puesto
 * arriba, `align-self: start` de la base lo pisaba y la regla no hacia NADA. Lo
 * cazo la prueba de los botones nativos, que busca "el bloque cuyo selector ES
 * la clase" y encontro este primero.
 */
@media (max-width: 47.99rem) {
  .agregar-campo {
    align-self: stretch;
    justify-content: center;
  }
}

/* --- la modal en un telefono --------------------------------------------- */

@media (max-width: 47.99rem) {
  /* La fecha y el tipo se apilan: dos campos de medio ancho en un telefono son
     dos campos ilegibles. */

  /*
   * La fila de un detalle se apila, y la cruz queda arriba a la derecha.
   *
   * Tres columnas en 360px de ancho dan tres campos de diez caracteres. Apilado,
   * el nombre y el valor toman el ancho entero y la cruz se va al renglon del
   * nombre, que es donde se la busca.
   */
  /*
   * LOS DOS CAMPOS AL MISMO ANCHO, Y LOS DOS ENTEROS.
   *
   * El valor hacia `grid-column: 1 / -1` y el nombre no, asi que el nombre
   * compartia renglon con la cruz y salia unos 36 px mas angosto: dos campos
   * del mismo par con dos anchos distintos, uno debajo del otro, donde la
   * diferencia no se lee como intencion sino como error. Reportado asi.
   *
   * La cruz pasa a su propio renglon, arriba y a la derecha -que es donde la
   * ubicaba el comentario original y donde se la busca-, y los dos campos
   * toman el ancho entero. Las filas se dan explicitas porque en el codigo la
   * cruz viene DESPUES de los dos campos: sin esto iria al tercer renglon.
   */
  .campo-editable {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e8);
  }

  .campo-editable__quitar { grid-row: 1; justify-self: end; }
  .campo-editable__parte { grid-row: 2; }
  .campo-editable__parte--valor { grid-row: 3; }

  /*
   * EL PIE SE QUEDA ABAJO, fijo.
   *
   * Habia que bajar hasta el final del dialogo para encontrar Cancelar y
   * Guardar: con seis campos y tres detalles, eso es scrollear dos pantallas
   * para confirmar.
   *
   * Y los dos botones al ancho, uno al lado del otro: en un telefono un boton
   * de 90px en la esquina es el objetivo mas chico de la pantalla.
   */
  .modal__footer {
    position: sticky;
    inset-block-end: 0;
    background: var(--color-surface);
    border-block-start: 1px solid var(--color-border);
    padding: var(--e16);
    margin: 0;
  }

  .modal__footer > * { flex: 1 1 0; justify-content: center; }

  /*
   * El dialogo no toma toda la pantalla.
   *
   * Llegaba casi al borde de arriba, asi que no se veia que hay una pagina
   * detras: un dialogo que ocupa todo se lee como otra pantalla, y entonces
   * cerrarlo se siente como perder el lugar. Dejando aire arriba se entiende que
   * es algo que se abrio sobre lo que estaba.
   */
  .modal {
    max-block-size: 85vh;
    max-block-size: 85dvh;
  }
}

/* Las cifras y el grupo de lo moderado tambien se fueron a `fotos.css`.

   Las cinco cajas de numeros pasaron a un renglon -y tres de las cinco no
   podian mostrar nada, porque leian campos que el servidor no mandaba- asi que
   no quedo nada de estas reglas para reusar. */

/* --- el checklist ----------------------------------------------------------

   Ocupa el lugar de la caja de datos. La diferencia entre los dos es cual dice
   algo distinto cada vez que se entra: los datos del evento son los mismos hoy
   que la semana que viene, y esto cambia solo a medida que el trabajo avanza. */

.resumen {
  display: flex;
  flex-direction: column;
  gap: var(--e16);
  padding: var(--e24);
  /* Decorativo: la caja ya se distingue por su relleno, asi que el borde solo la
     delimita. `--radius-inner` y no `--radio-12`, que es una ficha que NO EXISTE
     -venia dibujando su respaldo de 12px, igual que `.btn-quitar` con
     `--radio-8`-. */
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-inner);
  background: var(--color-surface);
  /* Queda a la vista mientras se baja por los pasos: es la lista de lo que
     falta, y sirve justo mientras se hace lo que falta. */
  position: sticky;
  inset-block-start: var(--e24);
  align-self: start;
}

.resumen__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e8);
}

.resumen__titulo { margin: 0; font-size: 16px; font-weight: 500; }
.resumen__cuantos { font-size: 13px; color: var(--color-text-muted); }

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

.resumen__item { display: flex; gap: var(--e12); align-items: start; }

/* El circulo vacio es el pendiente; con tilde, el hecho. Vacio y no una cruz:
   una cruz se lee como error, y no haber hecho todavia el paso cuatro no es un
   error en la mitad de la semana. */
/*
 * CUADRADA y del mismo tamano en los dos estados.
 *
 * Era un circulo con borde cuando estaba vacia y el icono adentro de ese circulo
 * cuando se tildaba: la forma y la medida cambiaban a la vez para decir una sola
 * cosa. Ahora es la silueta del cuadrado y el icono, los dos de 18, igual que la
 * casilla del paso -que va a 24 porque ahi se toca-.
 */
.resumen__marca {
  display: grid;
  place-items: center;
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  margin-block-start: 1px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.is-hecho .resumen__marca,
.resumen__marca.is-listo {
  border-color: transparent;
  background: none;
  color: var(--color-text);
}

.resumen__que { font-size: 14px; }

/* Lo hecho se apaga: lo que queda por hacer tiene que ser lo que se lee
   primero, y una lista donde todo pesa igual obliga a leerla entera. */
.is-hecho .resumen__que { color: var(--color-text-muted); }

/*
 * LA SALIDA ES UN BOTON, no el septimo renglon de la lista.
 *
 * Era un renglon con el mismo tamano de letra que los items y una raya
 * separadora encima: en el checklist se leia como un paso mas, uno que encima
 * nunca se tilda. Ahora lleva el relleno de la ficha de ACCION -la del tema, la
 * misma que un boton puesto- asi que se lee como lo que es: la unica cosa
 * apretable de esta columna.
 *
 * Y se separa de verdad del ultimo item. Pegado a 12 px, un boton al final de
 * una lista sigue perteneciendo a la lista.
 */
.resumen__salida {
  display: flex;
  align-items: center;
  gap: var(--e12);
  margin-block-start: var(--e24);
  padding: var(--e12) var(--e16);
  border-radius: var(--radius-inner);
  background: var(--color-action);
  color: var(--color-on-action);
  text-decoration: none;
  font-size: var(--t-apoyo);
  font-weight: var(--weight-medium);
  transition: background var(--duration-fast) var(--ease-out);
}

.resumen__salida:hover { background: var(--color-action-hover); }
.resumen__salida:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/*
 * EN UNA SOLA COLUMNA, EL CHECKLIST DEJA DE SER UNA CAJA.
 *
 * Decidido el 2026-10-16 sobre tres alternativas. Leon lo planteo asi: *"tengo
 * la duda de si la seccion de Que falta es necesaria en moviles... pensaba que
 * quizas podria ser un poco redundante y estar ocupando espacio vertical"*.
 *
 * Y la redundancia no es de tamanio, es DE ORDEN. En una columna el checklist
 * caia arriba -con `order: -1`, porque antes eran cinco pasos y abajo no lo veia
 * nadie- asi que lo primero que se leia era una lista de tres cosas que faltan,
 * y debajo estaban esas mismas tres cosas con sus botones. Es la critica que dio
 * origen a la vista de tarjetas, escrita en su propio archivo: *"la misma cosa
 * dos veces"*. En escritorio el costado es espacio gratis; en una columna no hay
 * espacio gratis.
 *
 * LA CUENTA NO SE PIERDE: vive tambien en el rotulo de la etapa -"1 de 3"- que
 * en una columna queda justo arriba de los pasos. Lo unico que aportaba la caja
 * era NOMBRAR lo que falta, y eso ya esta en los pasos.
 *
 * Y LO QUE SOBREVIVE ES LA SALIDA A LAS FOTOS, que es lo que NO se podia
 * esconder: es el unico camino a las fotos del evento desde esta pantalla, y un
 * camino que desaparece segun el ancho es peor que uno que estorba. Queda como
 * un renglon al final, despues del QR, que es donde Leon lo pidio.
 *
 * SIN DUPLICAR EL LINK. La alternativa era dibujarlo dos veces -uno en el
 * costado y otro al final- y esconder el que no toca: dos nodos para un link, y
 * dos veces el mismo destino para quien navega con lector de pantalla. Aca el
 * `aside` se queda, deja de ser caja, esconde su cabecera y su lista, y lo que
 * queda es la salida.
 *
 * EL CORTE ES 63.99rem Y NO 56.25rem, y eso corrige un hueco que ya estaba: el
 * tablero pasa a una sola columna en 63.99 -esa regla esta mas arriba- y el
 * costado se desenganchaba recien en 56.25. Entre los dos anchos quedaba un
 * tramo con el checklist apilado, sticky y despues de los pasos.
 */
@media (max-width: 63.99rem) {
  .resumen {
    position: static;
    /* Al final, no arriba: lo que se lee primero son los pasos. */
    order: 1;
    padding: 0;
    border: 0;
    background: none;
  }

  .resumen__cabeza,
  .resumen__lista { display: none; }

  /* El aire lo pone el `gap` del tablero, que en una columna es 32. */
  .resumen__salida { margin-block-start: 0; }
}


/* --- un paso marcado como hecho --------------------------------------------

   Tres de los cinco pasos no se pueden deducir -nadie sabe si el QR se pego en
   las mesas-, asi que el operador puede decirlo. Marcado queda tenue y
   replegado, pero sigue operable: se pueden cargar mas fotos base despues de
   decir que ya estan. */

/* Tenue y mas chico, no escondido. El paso sigue ahi porque se sigue pudiendo
   operar; lo que baja es cuanto pide la atencion. */
.paso--hecho { opacity: 0.6; }
.paso--hecho:hover,
.paso--hecho:focus-within { opacity: 1; }

.paso--hecho .paso__titulo { font-size: var(--t-cuerpo); }

/* El glifo del paso hecho toma el color de lo cumplido: es la unica vez que el
   indice dice algo mas que "aca va esto".

   Y ese color es el del TEMA -`--color-action`-, no el realce. Estaba con
   `--color-highlight`, que es el rol de "ojo con esto": amarillo en los
   veintisiete temas del catalogo, a proposito. Asi que un paso cumplido salia
   amarillo en el tema rosa, en el cian y en el violeta -el sintoma que se
   reporto- y de paso decia "advertencia" donde queria decir "listo". */
.paso--hecho .paso__glifo {
  background: var(--color-action-soft);
  color: var(--color-action);
}

.paso--hecho .paso__numero {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* El cuerpo replegado. `<details>` ya resuelve abrir con Enter y que un lector
   de pantalla lo anuncie, asi que no hay JS de por medio. */
.paso__replegado > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--e8);
  padding: var(--e6) 0;
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.paso__replegado > summary::-webkit-details-marker { display: none; }

.paso__replegado > summary::before {
  content: '';
  inline-size: 6px;
  block-size: 6px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .12s ease;
}

.paso__replegado[open] > summary::before { transform: rotate(45deg); }
.paso__replegado > summary:hover { color: var(--color-text); }

.paso__replegado[open] > summary { margin-bottom: var(--e16); }

/* --- borrar el evento, al fondo de la modal de datos --------------------- */

/*
 * SEPARADO DE LOS DATOS, y sin peso visual.
 *
 * Va al fondo porque es lo ultimo que alguien viene a hacer a esta modal, y
 * separado por una linea porque no es otro campo de la ficha: es una accion que
 * destruye lo que la ficha describe.
 *
 * Es texto y no un boton lleno. Un boton rojo y solido al fondo de un
 * formulario compite con "Guardar", que es lo que se vino a hacer el noventa y
 * nueve por ciento de las veces.
 */
/*
 * LA LINEA, LEJOS DEL BOTON DE ARRIBA.
 *
 * Tenia 8 de margen, que con el hueco del grupo dejaba la linea pegada al boton
 * de "Agregar un detalle" -reportado asi-. Una linea separadora que toca lo que
 * esta separando no separa: parece el borde de ese boton.
 *
 * 32 arriba y 24 despues: mas aire antes de la linea que despues, porque lo que
 * viene abajo es una sola accion y lo que queda arriba es un bloque entero.
 */
.ficha-peligro {
  margin-block-start: var(--e32);
  padding-block-start: var(--e24);
  border-block-start: 1px solid var(--color-border);
}

.ficha-borrar {
  padding: var(--e8) 0;
  border: 0;
  background: none;
  color: var(--color-danger, var(--color-text-muted));
  font: inherit;
  font-size: var(--t-apoyo);
  cursor: pointer;
}

.ficha-borrar:hover { text-decoration: underline; }

/* --- sacar a un moderador de su fila ------------------------------------- */

/*
 * Una cruz, no un boton con palabra.
 *
 * Es la accion menos frecuente de la fila y no tiene que competir con copiar,
 * que es la que se usa. Solo aparece cuando hay mas de una persona moderando.
 */
.btn-quitar {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  flex: none;
  border: 0;
  /* `--radius-md` y no `--radio-8`: esa ficha NO EXISTE -la escala del kit se
     llama `--radius-*`- asi que esta regla venia dibujando siempre su respaldo
     de 8px. Funcionaba por accidente, y habria seguido funcionando igual el dia
     que alguien moviera la escala. Lo encontro la prueba de los radios. */
  border-radius: var(--radius-micro);
  background: none;
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.btn-quitar:hover {
  background: var(--color-surface-muted);
  color: var(--color-danger, var(--color-text));
}

/* --- la puesta en marcha por etapas (variante `nueva`) -----------------------
 *
 * Son las reglas de los bloques que la variante nueva agrega. No pisan ninguna
 * regla de lo que se sirve hoy -son clases que solo esa variante emite- asi que
 * mientras el parametro este apagado esta hoja dibuja lo que dibujaba.
 *
 * "Etapa" y no "grupo": `.grupo` ya existe en `eventos.css` y es otra cosa -los
 * grupos del listado de eventos-. Dos clases con el mismo nombre y distinto
 * dueno es como una regla de una pantalla se cuela en otra.
 *
 * UNA ETAPA NO ES UNA CAJA, Y ESO SE CORRIGIO.
 *
 * La primera version le ponia borde y fondo, y adentro iban los pasos -que YA
 * son tarjetas con su propio borde- y las dos tarjetas del dia de la fiesta.
 * Cajas adentro de cajas, y Leon lo reporto: "no me convence que esté en esas
 * cajas dentro de cajas".
 *
 * Tenia razon y el diagnostico es de manual: el agrupamiento no necesita un
 * contenedor, necesita que se lea. Un titulo con su filete y el aire suficiente
 * agrupan igual de bien y suman CERO niveles de anidado; un borde alrededor de
 * cosas que ya tienen borde agrega un nivel de profundidad que no corresponde a
 * ninguna jerarquia real -las etapas no contienen a los pasos, los nombran-.
 */
.etapa {
  display: block;
}

/* La cabecera es el `summary`: se toca para plegar, asi que lleva el cursor y
   el foco visible. El triangulo nativo se saca porque la cuenta de la derecha
   ya dice el estado, y dos indicadores para una cosa es uno de mas. */
.etapa__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e12);
  padding-block: var(--e8);
  border-block-end: 1px solid var(--color-border);
}

/* El cursor y el foco SOLO en la que se toca.
 *
 * La etapa de "Despues de la fiesta" no se pliega -tiene un solo paso- asi que
 * su cabecera es un `div`. Con el cursor en la clase, esa cabecera invitaba a
 * un clic que no hace nada, que es una de las formas mas barata de que una
 * pantalla parezca rota. */
summary.etapa__cabeza { cursor: pointer; list-style: none; }
summary.etapa__cabeza::-webkit-details-marker { display: none; }
summary.etapa__cabeza:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* El titulo de una etapa es un ROTULO, no un encabezado de contenido: nombra un
   tramo del trabajo. En tinta plena y al tamano de seccion competia con el
   titulo de cada paso, que es lo que de verdad hay que leer.
   SIN VERSALITAS: estaba en `uppercase` con un poco de tracking y Leon lo saco.
   El tono de apoyo y el peso ya lo separan del titulo de un paso; las versalitas
   le agregaban un registro tipografico que esta pantalla no usa en ningun otro
   lado. */
.etapa__titulo {
  font-size: var(--t-apoyo);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

/* La nota va a la derecha, en el tono de apoyo: dice en que estado esta la etapa
   -"1 de 3", "Listos", "La proyeccion y el QR"- sin competir con su rotulo.
   Era `.etapa__cuenta` y `.etapa__nota`, dos clases para lo mismo en el mismo
   lugar: quedo una. */
.etapa__nota {
  margin-inline-start: auto;
  font-size: var(--t-apoyo);
  color: var(--color-text-subtle);
}

.etapa__cuerpo {
  padding-block-start: var(--e16);
}

/* --- cada paso, en su caja (variante `nueva`) --------------------------------
 *
 * Lo pidio Leon: "probemos la idea de que cada paso este en una caja si, pero
 * una muy sutil y sin borde. sera una separacion visual".
 *
 * ES UN TINTE, NO UNA TARJETA, y esa es la diferencia con la primera version que
 * el mismo rechazo. Media tinta entre el fondo y la superficie: suficiente para
 * delimitar donde empieza y termina un paso, y no tanto como para competir con
 * las tarjetas que un paso CONTIENE -la fila de un link, la zona de subida, la
 * chapa del QR-, que si tienen borde. Asi la escala queda en tres: el fondo de
 * la pagina, el tinte del paso, y la tarjeta de adentro.
 */
.etapa__cuerpo .paso {
  /* 32 arriba y abajo, y 16 a los lados EN EL TELEFONO. En escritorio los lados
     suben a 32 -ver el bloque de abajo-: ahi hay ancho de sobra y la caja se
     lee mejor con el aire parejo, mientras que en una pantalla angosta 32 por
     lado le come 64 al texto y a las tarjetas de adentro. */
  padding: var(--e32) var(--e16);
  /* EL ESCALON MAS GORDO, que es el del contenedor. Estaba en `inner` -12, el
     mismo que la fila de link que lleva adentro- y eso es justo lo que rompia
     la escalera: una caja no puede redondear igual que su contenido. */
  border-radius: var(--radius-card);
  /* La superficie hundida del kit. Estaba escrita aca con su `color-mix` y subio
     a `temas.css` cuando la pidieron tambien las filas del listado y los campos:
     la formula tiene que ser una sola o las tres se van separando. */
  background: var(--color-surface-sunken);
  /* Transparente en todos, con color en el que toca: asi el borde no mueve el
     layout al aparecer. */
  border: 1px solid transparent;
}

/*
 * "VER TODAS" NO SE ESTIRA EN ESCRITORIO.
 *
 * Lo pidio Leon: *"esta bien que en moviles mantenga ancho completo ese boton,
 * pero haz que sea un boton de ancho normal en desktop"*. Se estiraba porque
 * vive en una `pila`, que es una columna flex: el ancho completo no lo pedia
 * nadie, lo heredaba.
 *
 * Se apunta POR SU POSICION -el boton que sigue a la zona de subida- y no con
 * una clase nueva: es el unico boton que esta ahi, y la relacion "el que viene
 * despues de la zona donde se sueltan las fotos" es justo lo que lo define.
 */
@media (min-width: 48rem) {
  .panel-soltar + .btn { align-self: start; }
}

/*
 * EN ESCRITORIO, LOS LADOS TAMBIEN A 32.
 *
 * Lo pidio Leon: "en desktop aumenta el padding x de las secciones gordas, de 16
 * a 32, en moviles se mantienen".
 *
 * El corte es el MISMO que ya usa esta hoja para pasar el tablero a una sola
 * columna -63.99rem-, y eso no es casualidad ni comodidad: es exactamente el
 * ancho donde el checklist deja de estar al costado y la columna de los pasos se
 * queda con la pantalla entera. Inventar un corte propio habria dejado un tramo
 * -entre uno y otro- con la caja ancha y el tablero ya apilado, que es la clase
 * de desajuste que solo se ve en un tamanio raro y nadie prueba.
 */
@media (min-width: 64rem) {
  .etapa__cuerpo .paso { padding-inline: var(--e32); }
}

/*
 * EL PASO QUE TOCA, por su borde.
 *
 * Reemplaza al boton primario como seniial de "este es el siguiente". Un paso
 * tiene UNA caja y puede tener varios botones, asi que el color del boton nunca
 * podia senialar el paso -solo una de sus acciones-.
 *
 * `--color-action` es la ficha que cada tema reserva para lo que pide atencion,
 * que es exactamente lo que esto es. A 1px y solo en el contorno: no pinta nada,
 * apunta.
 */
/*
 * EL PASO QUE TOCA: UNA LUZ QUE RECORRE SU BORDE.
 *
 * Tercer intento y el primero que no pelea con nada. El color solo no alcanzaba
 * -a 38% de la accion Leon lo seguia leyendo como el primario- y el punteado
 * choco con algo que ya estaba: *"el borde del dropzone tambien tiene punteado
 * pero luce diferente. Tener esos dos bordes punteados en caracteristicas
 * distintas luce inconsistente"*. Tenia razon: la zona donde se sueltan las
 * fotos usa punteado para decir "aca se suelta algo", y usar el mismo recurso
 * para decir "este paso es el que sigue" son dos significados con un codigo.
 *
 * Asi que el paso en curso usa un recurso que no esta usado en ninguna otra
 * parte del producto: una luz girando despacio por el contorno.
 *
 * COMO FUNCIONA, porque no es obvio: son DOS CAPAS de fondo en el mismo
 * elemento. La primera es el tinte del paso y se pinta sobre el `padding-box`,
 * o sea todo menos el borde; la segunda es un gradiente conico y se pinta sobre
 * el `border-box`, o sea tambien el borde. Como la primera tapa el medio, del
 * conico solo queda a la vista el marco de 1px — y a diferencia de
 * `border-image`, esto RESPETA EL REDONDEO.
 *
 * El giro es la animacion de `--giro`, que es un angulo registrado con
 * `@property`. Sin ese registro el navegador no sabe interpolar un angulo y la
 * animacion no corre: el borde queda quieto con la luz en una posicion, que es
 * una degradacion aceptable y no un defecto a la vista.
 *
 * OCHO SEGUNDOS. La vuelta tiene que leerse como un movimiento y no como un
 * cartel: a dos segundos es una sirena. Y mueve un fondo de un elemento, sin
 * tocar el layout.
 */
@property --giro {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.etapa__cuerpo .paso.is-en-curso {
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface-sunken), var(--color-surface-sunken)) padding-box,
    conic-gradient(
      from var(--giro),
      transparent 0deg 240deg,
      var(--color-border-current) 300deg,
      color-mix(in srgb, var(--color-action) 85%, var(--color-surface)) 340deg,
      var(--color-border-current) 360deg
    ) border-box;
  animation: paso-en-curso 8s linear infinite;
}

@keyframes paso-en-curso {
  to { --giro: 360deg; }
}

/*
 * Y SE DETIENE SI ALGUIEN PIDIO MENOS MOVIMIENTO.
 *
 * El borde se queda -con la luz en su posicion inicial, que sigue senialando- y
 * lo que se va es el giro. Es la regla de la casa: `prefers-reduced-motion`
 * congela lo que se mueve sin sacar la informacion que ese movimiento llevaba.
 */
@media (prefers-reduced-motion: reduce) {
  .etapa__cuerpo .paso.is-en-curso { animation: none; }
}

/* La salida del checklist, neutral.
 *
 * Es navegacion y no una accion sobre el evento, asi que en la variante nueva
 * deja de llevar la ficha de accion: con cuatro superficies pintadas del mismo
 * color, la que hay que mirar deja de distinguirse. Conserva su fondo propio
 * -por eso sigue sin hacer falta la raya separadora- y lo que pierde es el
 * color. */
.resumen__salida.is-neutral {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
}

.resumen__salida.is-neutral:hover {
  background: color-mix(in srgb, var(--color-surface-muted) 88%, var(--color-text));
  border-color: var(--color-border-accent);
}