/* ============================================================
   fotos.css — las fotos del evento

   La pantalla donde se REVISA lo que entro: durante la fiesta para mirar lo que
   sube la gente, y al dia siguiente para armar lo que se entrega.

   Tiene hoja propia desde ahora. Vivia adentro de `evento.css` porque esto era
   una pestana de la pantalla del evento, 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.

   LA CABECERA NO ESTA ACA. Usa `.ev-cabeza*`, que es la de la pantalla del
   evento: son la misma ranura -"el nombre de la pantalla"- y tener dos juegos
   de reglas que se tienen que parecer es uno que se va a desincronizar. Ya se
   desincronizo una vez, y el sintoma fue exactamente ese: dos tipografias
   distintas para el mismo lugar.
   ============================================================ */

/* La pantalla entera, en el marco del panel. */
.pantalla-contenido { padding-bottom: var(--e128); }

/* --- la salida: publicar la galeria y bajarse todo ----------------

   Lo que se hace DESPUES de mirar lo que entro: darle las fotos al cliente o
   llevarselas. No estaba en esta pantalla; publicar vivia solo en una tarjeta
   de la pantalla del evento, que es la de configurar.

   Va arriba de los numeros y respira 32: es la decision de la pantalla, no un
   dato mas. Los numeros ya traen sus 64 abajo. */
.pf-entrega { margin-block-start: var(--e32); }

.pf-entrega__acciones { flex-wrap: wrap; }

/* --- el renglon de numeros ----------------------------------------

   Un renglon y no tarjetas. Lo primero es el unico numero que
   contesta "cuanto hay", en grande; lo demas son excepciones y solo
   aparecen cuando hay algo que decir.

   Un cero permanente ensena a ignorar ese lugar de la pantalla, y
   entonces el dia que diga 3 tampoco se lee. */

/*
 * LOS 64 PX QUE SEPARAN LOS TRES BLOQUES.
 *
 * Cabecera, numeros y la pared son tres cosas distintas, y estaban a 12 y 16
 * px: a esa distancia los numeros se leen como un renglon mas de la cabecera y
 * las pastillas como un renglon mas de los numeros. 64 es el salto grande de la
 * escala y es el que dice "esto termino".
 *
 * El marco de arriba se fue: una caja con dos rayas horizontales en una
 * pantalla que ya tiene una pared de fotos es una division de mas. Con el aire
 * alcanza.
 */
.pf-numeros {
  display: flex;
  align-items: center;
  gap: var(--e24);
  flex-wrap: wrap;
  margin-block: var(--e64);
}

.pf-numeros__total {
  display: flex;
  align-items: baseline;
  gap: var(--e8);
}

.pf-numeros__valor {
  font-size: var(--t-seccion);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
}

.pf-numeros__rotulo { font-size: var(--t-apoyo); color: var(--color-text-muted); }

/* Sin separadores dibujados: con el hueco de 24 alcanza, y una raya cada dos
   datos convierte un renglon de lectura en una tabla. */

/* Las secundarias: valor y rotulo en la misma linea, chicas. Son dato
   de contexto, no titulares. */
.pf-dato {
  display: flex;
  align-items: baseline;
  gap: var(--e6);
  font-size: var(--t-apoyo);
  color: var(--color-text-muted);
}
.pf-dato strong { color: var(--color-text); font-weight: var(--weight-medium); }

/* Una excepcion que pide atencion: lo que se esta procesando y lo que
   se cayo. Con la ficha del TEMA y no con el acento. */
.pf-dato--atencion { color: var(--color-text); }
.pf-dato--atencion .pf-punto {
  inline-size: 7px; block-size: 7px; border-radius: var(--radius-full);
  background: var(--color-action); flex: none;
}
.pf-dato--falla .pf-punto { background: var(--color-danger); }

/* --- herramientas: carpetas, elegir, vista ------------------------ */

/* UN CORTE DECIDIDO, Y NO DONDE LE TOQUE.

   Eran cuatro hijos sueltos -pastillas, separador flexible, boton de eleccion,
   selector de vista- con `flex-wrap`, asi que en un telefono la fila se partia
   donde entraba: las pastillas arriba, el boton pegado a ellas, y el selector
   de vista solo en un tercer renglon.

   Ahora son DOS hijos: las pastillas y el grupo de herramientas. El corte es
   uno y esta elegido, y en un telefono las pastillas se llevan el renglon
   entero. */
.pf-barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--e12);
  /* 24 ENTRE RENGLONES y 12 entre vecinos de la misma fila. Cuando parte, lo
     que queda abajo es otra cosa -herramientas y no fuentes- asi que respira
     mas que dos controles lado a lado. */
  row-gap: var(--e24);
  margin-block-end: var(--e24);
}

.pf-carpetas { display: flex; gap: var(--e8); }

/* El grupo de la derecha: la eleccion y la vista. `margin-inline-start: auto`
   y no un separador flexible — un `<span>` vacio para empujar es un hijo mas
   que el `wrap` tiene que colocar. */
.pf-barra__herramientas {
  display: flex;
  align-items: flex-end;
  gap: var(--e12);
  margin-inline-start: auto;
}

.pf-carpeta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--e8);
  min-height: 36px;
  padding: 0 var(--e12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--t-apoyo);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.pf-carpeta:hover { color: var(--color-text); border-color: var(--color-border-hover); }

/* Puesta: con la ficha del tema, como el resto de lo que esta puesto
   en el panel. */
.pf-carpeta.is-on {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-on-action);
}

.pf-carpeta__cuenta {
  padding: 1px var(--e6);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  font-size: var(--t-etiqueta);
  font-variant-numeric: tabular-nums;
}
.pf-carpeta.is-on .pf-carpeta__cuenta {
  background: color-mix(in oklab, var(--color-on-action) 18%, transparent);
}

/* --- la nota de la carpeta --------------------------------------- */

.pf-nota { margin: 0 0 var(--e16); font-size: var(--t-apoyo); color: var(--color-text-muted); }

/* LA FUENTE DE ESTAS FOTOS: la nota de la carpeta y la zona donde se sueltan.

   Las dos estaban sueltas entre las pastillas y la pared, a 16 px de cada
   lado: la nota se leia como un renglon mas de las pastillas y la zona de
   subida como parte de la pared de abajo. Reportado asi: "esas dos partes
   estan actualmente muy pegadas de la propia galeria y lo que tienen arriba".

   Son una sola cosa -que son estas fotos y como se cargan- asi que van en una
   caja, y la caja respira 32 contra las 16 de adentro. */
.pf-fuente {
  display: flex;
  flex-direction: column;
  gap: var(--e16);
  margin-block-end: var(--e32);
}

/* El margen de la nota lo pone el hueco de la caja: con los dos, la nota queda
   a 32 de la zona de subida y a 24 de las pastillas, que es al reves. */
.pf-fuente > .pf-nota { margin-block-end: 0; }

/* --- la pared ----------------------------------------------------- */

.pf-pared { display: grid; gap: var(--e8); }

/* Bento: columnas de ancho fijo y cada pieza con su relacion. Es lo
   que hace que una pared se lea como fotos y no como una planilla. */
/* FILAS DE 1 PX Y SIN HUECO ENTRE FILAS.

   Con filas de 10 y `row-gap` de 8, estirarse N filas da `N*10 + (N-1)*8`: la
   cuenta de cuantas filas hace falta para un alto dado dejaba de ser una
   division, y los huecos salian desparejos. Con filas de 1 px y sin hueco, N
   filas son N pixeles y la cuenta es exacta.

   El hueco vertical lo pone el margen de cada pieza, que no entra en la cuenta
   porque esta por fuera de la celda. */
/* EL HUECO SE DECLARA UNA VEZ, en `--pf-hueco`.

   El horizontal lo pone `column-gap` y el vertical el margen de cada pieza,
   porque el `row-gap` tiene que ser cero. Escritos como dos `var(--e8)` eran el
   mismo numero dicho dos veces, y `acomodarBento` necesitaba un tercero para
   dejarle lugar — asi que el hueco vertical quedaba sin contar y las fotos
   salian verticalmente pegadas. Con la ficha hay un solo valor: el JS le
   pregunta a la pieza cuanto mide su margen. */
.pf-pared--bento {
  --pf-hueco: var(--e8);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-auto-rows: 1px;
  row-gap: 0;
  column-gap: var(--pf-hueco);
}

.pf-pared--bento .pf-pieza { margin-block-end: var(--pf-hueco); }

.pf-pared--grande { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pf-pared--media  { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.pf-pared--chica  { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--e6); }

/* LA PIEZA ES LA CAJA Y EL BOTON ES LA IMAGEN.

   Era un `<button>` con todo adentro, y el ojo de "sacar de la proyeccion" es
   otro boton: un boton dentro de otro no es HTML valido y el clic de adentro no
   se puede separar del de afuera. Asi que la pieza es un `<div>` -el item de la
   grilla, el que lleva la relacion y el que `acomodarBento` mide- y adentro
   viven el boton que abre y el ojo. */
.pf-pieza {
  position: relative;
  margin: 0;
  display: block;
  inline-size: 100%;
}

.pf-pieza__abrir {
  display: block;
  inline-size: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  appearance: none;
  text-align: start;
}

/* La caja de la imagen, que es la que recorta y la que lleva el radio. El
   renglon del autor queda afuera, asi que no se corta ni se superpone. */
.pf-pieza__caja {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-thumb);
  background: var(--color-surface-muted);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

/* LA CAJA TIENE QUE TENER ALTO EN LAS CUATRO VISTAS.

   Todo lo que va adentro -la miniatura, el texto de un mensaje, el hueco de una
   pieza sin miniatura- es `position: absolute; inset: 0`, asi que NO aporta
   altura: una caja sin alto propio colapsa a cero y la pared se dibuja vacia.

   En las tres vistas cuadradas el alto venia del `aspect-ratio: 1/1`. En bento
   NO HABIA NINGUNO, asi que la caja medía cero y no se veia ni una foto ni un
   mensaje — solo el renglon del autor, que es HERMANO de la caja y no hijo.
   Reportado asi: "veo autores, pero no se ve nada del contenido"; y "al
   presionar los tiles si salen en la vista lightbox", que es otro elemento.

   En bento la relacion es la de cada pieza y la pone el renderer en
   `--pf-ar`, que es el mismo numero con el que calcula cuantas filas ocupa: si
   fueran dos cuentas distintas, la caja y su celda no medirian lo mismo. */
.pf-pared--grande .pf-pieza__caja,
.pf-pared--media .pf-pieza__caja,
.pf-pared--chica .pf-pieza__caja { aspect-ratio: 1 / 1; }

.pf-pared--bento .pf-pieza__caja { aspect-ratio: var(--pf-ar, 1); }



.pf-pieza__abrir:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* LA MINIATURA CUBRE LA CAJA, aun a costa de recortar la foto.

   `inset: 0` no estira una imagen: para un elemento reemplazado el ancho y el
   alto automaticos son los INTRINSECOS, y unos `inset` sobredeterminados se
   resuelven ignorando el borde de abajo y el de la derecha. Asi que la
   miniatura se dibujaba a su tamanio natural, arriba a la izquierda, dejando el
   resto del cuadrado vacio. Reportado asi: "como son cuadradas y las imagenes
   son horizontales algunas, sale dentro de los tiles, pero deberia cubrir los
   tiles ya que son cuadrados aun a costa de la foto".

   Con el tamanio declarado y `object-fit: cover` la foto llena el cuadrado y se
   recorta por el lado largo, que es lo que se quiere de una miniatura: la
   pared existe para barrer doscientas buscando una, y para eso importa la
   continuidad de la grilla mas que ver cada foto entera. La entera esta a un
   toque, en el visor. */
.pf-pieza__imagen {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/*
 * EL AUTOR OCUPA SU PROPIO RENGLON. No va encima de la foto.
 *
 * Estaba sobrepuesto, con un degradado negro de fondo y apareciendo al pasar
 * el mouse. Dos problemas: tapa justo la parte de abajo de la foto -donde en
 * una foto de fiesta suele estar lo que se mira- y en un telefono no hay
 * "pasar el mouse", asi que o no se ve nunca o se ve siempre tapando.
 *
 * Asi que la celda es la foto Y un renglon debajo. El renglon existe aunque no
 * haya autor -queda vacio- para que la pared no quede con las filas
 * desparejas.
 *
 * Solo en bento: en un cuadrado de 76 px un renglon de texto es mas alto que
 * la foto.
 */

/* --- un mensaje en la pared --------------------------------------

   NO es una foto sin imagen: es otra cosa. Se proyecta igual que una
   foto y en la pared tiene el mismo peso, asi que ocupa una celda —
   pero la celda es texto, con comillas y firma.

   Hoy estas piezas estan en la grilla como <img src="">, que es el
   icono de imagen rota del navegador. Se reportaron como "fotos
   corruptas" y no hay ninguna foto corrupta: son las cuatro
   dedicatorias del evento. */

.pf-pieza--mensaje .pf-pieza__caja {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.pf-pieza--mensaje .pf-mensaje {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e8);
  padding: var(--e16);
  text-align: start;
}
.pf-mensaje__texto {
  font-size: var(--t-apoyo);
  line-height: 1.4;
  color: var(--color-text);
  /* Cuatro renglones y despues se corta: la pieza entera se abre al
     tocarla, asi que el recorte no esconde nada. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-mensaje__autor { font-size: var(--t-etiqueta); color: var(--color-text-muted); }
.pf-pared--chica .pf-mensaje__texto { -webkit-line-clamp: 2; font-size: var(--t-etiqueta); }
.pf-pared--chica .pf-mensaje__autor { display: none; }

/* --- oculta por moderacion --------------------------------------- */

.pf-pieza--moderada .pf-pieza__imagen { opacity: 0.32; }
.pf-pieza--moderada .pf-pieza__caja::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--color-border-strong);
  border-radius: inherit;
}

/* --- el ojo: lo que se muestra y lo que no -------------------------

   ARRIBA A LA DERECHA, Y EL ICONO SOLO.

   Lo que habia era `.pf-pieza__marca`: un ojo tachado escrito a mano, dentro de
   un circulo del color del fondo, arriba a la IZQUIERDA, y que no se podia
   tocar. Tres problemas en un objeto de 24 px. Reportado asi: "esa seccion
   necesita el nuevo icono de ojo cerrado, y el icono solo, sin ese circulo
   negro alrededor. Le falta poder presionarlo para volver a mostrarlas".

   Sin circulo, entonces, y la legibilidad sobre una foto la da la sombra del
   trazo: un circulo opaco encima de una foto tapa justo el pedazo que uno
   quiere ver para decidir.

   A la derecha porque a la izquierda va el tilde de la eleccion. Son dos cosas
   distintas y cada una tiene su esquina. */
.pf-ojo {
  position: absolute;
  inset-block-start: var(--e8);
  inset-inline-end: var(--e8);
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: #fff;
  cursor: pointer;
  /* El trazo es blanco y la foto puede ser blanca: la sombra es lo que lo
     separa sin poner una chapa encima. */
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.55));
  transition: scale var(--duration-fast) var(--ease-out);
}
.pf-ojo:hover { scale: 1.12; }
.pf-ojo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* En una pieza de mensaje no hay foto que tapar, asi que el blanco no sirve:
   el texto esta sobre la superficie del tema. */
.pf-pieza--mensaje .pf-ojo { color: var(--color-text-muted); filter: none; }

/* --- el modo elegir ----------------------------------------------- */

/* El tilde solo existe en el modo. Fuera del modo, una pared de
   doscientos tildes es doscientos objetos que nadie va a tocar. */
.pf-tilde { display: none; }

/* EL MISMO MODELO DE CASILLA QUE EL RESTO DEL PANEL.

   Era un circulo con el tilde adentro, y no hay ningun otro circulo que
   signifique "elegido" en toda la app: la casilla de "Marcar como completado" y
   la de las tarjetas del evento son un CUADRADO de 24 con borde de 1,5, y
   marcadas no dibujan caja — el icono del set ya ES un cuadrado con el tilde
   recortado, asi que encerrarlo era una caja adentro de otra. Reportado asi:
   "debemos usar el mismo modelo de checkbox que venimos usando en marcar como
   completado o las tabs del evento, y la forma checked solo icono".

   Lo unico distinto de la del paso es el color del borde sin marcar: esto vive
   encima de una foto, donde `--color-border` no se ve. Blanco con una chapa
   apenas oscura debajo. */
.pf-pared.is-eligiendo .pf-tilde {
  display: grid;
  place-items: center;
  position: absolute;
  inset-block-start: var(--e8);
  inset-inline-start: var(--e8);
  z-index: 1;
  inline-size: 24px;
  block-size: 24px;
  border: 1.5px solid #fff;
  border-radius: var(--radius-sm);
  background: rgb(0 0 0 / 0.35);
  color: transparent;
}

/* Marcada: SOLO EL ICONO. Sin borde y sin fondo, igual que la casilla del
   paso. */
.pf-pieza.is-elegida .pf-tilde {
  border-color: transparent;
  background: none;
  color: var(--color-action);
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45));
}

.pf-pieza.is-elegida .pf-pieza__caja { box-shadow: inset 0 0 0 3px var(--color-action); }
.pf-pieza.is-elegida .pf-pieza__imagen { transform: scale(0.94); transition: transform var(--duration-fast) var(--ease-out); }

/* --- la barra de la seleccion ------------------------------------

   Pegada abajo y sobre el pulgar: la pared se recorre con el dedo y
   las acciones tienen que quedar donde el dedo ya esta. Aparece solo
   cuando hay algo elegido.

   Dice CUANTAS, para que nadie baje 200 creyendo que baja 3. */

/* FLOTA SIEMPRE, Y NO SE SIENTA AL LLEGAR ABAJO.

   Era `position: sticky`, y `sticky` es un elemento que vive EN EL FLUJO y se
   pega mientras su contenedor pasa: al llegar al final de la pagina deja de
   estar pegado y se acomoda debajo de la pared, como un bloque mas. Reportado
   asi: "la barra flotante actual se pone debajo de la galeria cuando llego
   abajo al fondo de la pagina, quita ese comportamiento".

   `fixed` no vive en el flujo, asi que no tiene ese final. Lo que hace falta
   entonces es que la ultima fila se pueda ver: lo pone el
   `padding-bottom: 128` de `.pantalla-contenido`, que es mas que el alto de
   esta barra. */
.pf-seleccion {
  position: fixed;
  inset-block-end: max(var(--e16), env(safe-area-inset-bottom));
  /* Centrada, y en un telefono de ancho completo con sus margenes.

     En escritorio un ancho completo seria una barra de 1200 px con tres cosas
     adentro y medio metro de nada en el medio; 26rem es lo que ocupan la cuenta,
     el menu y la cruz sin apretarse. En un telefono el `min` la deja en el
     ancho de la pantalla menos los margenes: pegada a los bordes se lee como un
     error de recorte, no como ancho completo. */
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: min(26rem, calc(100% - var(--e32)));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--e8);
  /* Mas relleno a la izquierda que a la derecha: a la izquierda hay texto y a
     la derecha dos controles, que ya traen el suyo. */
  padding: var(--e8) var(--e8) var(--e8) var(--e16);
  border: 1px solid var(--color-border-strong);
  /* TOTALMENTE REDONDEADA, como se pidio. */
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.35));
}

.pf-seleccion__cuenta {
  font-size: var(--t-apoyo);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-seleccion__cuenta strong { font-size: var(--t-tarjeta); font-weight: var(--weight-medium); }

/* El disparador de las acciones. Es el unico control con peso de la barra, asi
   que lleva la ficha del tema: lo demas es la cuenta y una cruz. */
.pf-seleccion__acciones {
  display: flex;
  align-items: center;
  gap: var(--e6);
  min-height: 36px;
  padding: 0 var(--e12);
  border: 1px solid var(--color-action);
  border-radius: var(--radius-full);
  background: var(--color-action);
  color: var(--color-on-action);
  font: inherit;
  font-size: var(--t-apoyo);
  cursor: pointer;
  white-space: nowrap;
}
.pf-seleccion__acciones:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* El chevron gira cuando el menu esta abierto: apunta siempre adonde va. */
.menu.is-open .pf-seleccion__acciones svg { rotate: 180deg; }

.pf-seleccion__cerrar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.pf-seleccion__cerrar:hover { background: var(--color-surface-muted); color: var(--color-text); }
.pf-seleccion__cerrar:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* --- el visor -----------------------------------------------------

   SIN FLECHAS Y SIN PALABRAS.

   Se pasa de foto tocando la mitad izquierda o derecha, arrastrando
   o con swipe, y el cambio es instantaneo: nada de transicion, que es
   lo que hace que arrastrar se sienta como mover papeles.

   Los unicos controles dibujados son los tres que no se pueden
   adivinar -bajar, moderar y eliminar- y la cruz. Todos iconos, todos
   con `title` y `aria-label`: una fila de cuatro palabras compite con
   la foto, que es lo unico que se vino a ver.

   El kit ya trae el componente (`ds-lightbox`) con el foco atrapado,
   Escape, el swipe y la precarga del vecino. Esta caja es para poder
   mirar la decision de que va adentro y donde. */

.pf-visor {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  /*
   * `minmax(0, 1fr)` Y NO `1fr`, y es la diferencia entre que el pie este o no.
   *
   * `1fr` es `minmax(auto, 1fr)`: el minimo automatico de la pista lo fija el
   * contenido, y el contenido es una foto de dos mil pixeles de alto. Asi que la
   * fila se negaba a encogerse, la grilla medía mas que la ventana y el pie
   * quedaba empujado por debajo del borde — donde el `overflow: hidden` de dos
   * lineas mas abajo lo recorta. Reportado asi: "la imagen se superpone a la
   * barra inferior, y en moviles me parece que esta tapando tambien esa parte
   * inferior".
   *
   * Con el minimo en cero la fila cede, la foto se acomoda a lo que sobra -su
   * `max-block-size: 100%` ya lo hacia- y el pie siempre tiene su lugar.
   */
  grid-template-rows: minmax(0, 1fr) auto;
  /*
   * `overflow: hidden` Y NADA QUE DESBORDE.
   *
   * La primera version tenia tres filas con `gap` y el pie afuera del marco:
   * la suma pasaba del alto de la ventana y aparecia una barra de scroll
   * vertical sobre la foto -se reporto como "un scroll que no se sabe para
   * que"-. Y de paso la pagina de atras seguia pudiendo scrollear.
   */
  overflow: hidden;
  background: color-mix(in oklab, var(--color-bg) 92%, black);
  backdrop-filter: blur(10px);
}
.pf-visor.is-abierto { display: grid; }

/* La cruz, ARRIBA Y A LA DERECHA. Es donde esta en todo lo que cierra:
   estaba a la izquierda, con la palabra "Cerrar" al lado. */
.pf-visor__cerrar {
  position: absolute;
  inset-block-start: var(--e16);
  inset-inline-end: var(--e16);
  z-index: 2;
}

/* El contador, arriba a la izquierda y chico. Dice donde estas en la pila,
   que es lo unico que las flechas decian ademas de ser flechas. */
.pf-visor__cuenta {
  position: absolute;
  inset-block-start: var(--e24);
  inset-inline-start: var(--e24);
  z-index: 2;
  font-size: var(--t-apoyo);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.pf-visor__marco {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  /* Nada se sale del marco hacia el pie, sea una foto o lo que entre maniana. */
  overflow: hidden;
  padding: var(--e64) var(--e16) var(--e16);
}

.pf-visor__imagen {
  max-inline-size: min(100%, 1100px);
  max-block-size: 100%;
  border-radius: var(--radius-thumb);
  /* Sin transicion: pasar de foto es instantaneo a proposito. */
  user-select: none;
}

/* Las dos mitades que pasan de foto. Invisibles, encima de todo el marco, y
   con el cursor diciendo para donde va cada una. */
.pf-visor__mitad {
  position: absolute;
  inset-block: 0;
  inline-size: 50%;
  z-index: 1;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
}
.pf-visor__mitad--antes { inset-inline-start: 0; }
.pf-visor__mitad--despues { inset-inline-end: 0; }
/* En un telefono no hay cursor y el swipe hace lo mismo, pero las mitades se
   dejan: tocar el costado es el gesto que ya existe en cualquier visor. */

/* El pie: quien la subio a la izquierda, las acciones a la derecha. OCUPA SU
   PROPIO ESPACIO -no esta encima de la foto- y por eso el marco de arriba es
   `1fr`: la foto se acomoda a lo que sobra. */
.pf-visor__pie {
  display: flex;
  align-items: center;
  gap: var(--e16);
  padding: var(--e16) var(--e24) max(var(--e16), env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--color-border);
  background: var(--color-bg);
}
.pf-visor__quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-visor__autor {
  font-size: var(--t-cuerpo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-visor__meta { font-size: var(--t-etiqueta); color: var(--color-text-muted); }
.pf-visor__acciones { display: flex; align-items: center; gap: var(--e8); flex: none; }

/* Un control de icono solo: 44 px de area tactil, que es el minimo que se
   puede tocar sin apuntar. */
.pf-icono {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  appearance: none;
  border: 0;
  border-radius: var(--radius-micro);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.pf-icono:hover { background: var(--color-surface-muted); color: var(--color-text); }
.pf-icono:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pf-icono--peligro:hover { background: var(--color-danger-soft); color: var(--color-danger); }

/* El mensaje abierto: su texto grande, centrado, en su propia caja. */
.pf-visor__mensaje {
  display: grid;
  place-items: center;
  max-inline-size: min(100%, 720px);
  padding: var(--e32);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.pf-visor__mensaje p {
  margin: 0;
  text-align: center;
  font-size: var(--t-seccion);
  font-weight: 400;
  line-height: 1.35;
  text-wrap: balance;
}

@media (max-width: 34rem) {
  .pf-visor__marco { padding: var(--e32) var(--e8) var(--e8); }
  .pf-visor__pie { padding-inline: var(--e16); }
  .pf-visor__cuenta { inset-block-start: var(--e16); inset-inline-start: var(--e16); }
  .pf-visor__mensaje { padding: var(--e24); }
  .pf-visor__mensaje p { font-size: var(--t-tarjeta); }
}

/* --- el grupo de ocultas ----------------------------------------- */

.pf-moderadas { margin-block-start: var(--e32); }
.pf-moderadas__cabeza { display: flex; align-items: center; gap: var(--e8); margin-bottom: var(--e8); }
.pf-moderadas__titulo { margin: 0; font-size: var(--t-tarjeta); font-weight: var(--weight-medium); }

/* --- vacio -------------------------------------------------------- */

.pf-vacio {
  display: grid;
  place-items: center;
  gap: var(--e12);
  padding: var(--e64) var(--e24);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  text-align: center;
  color: var(--color-text-muted);
}
.pf-vacio p { margin: 0; max-width: 46ch; font-size: var(--t-apoyo); line-height: 1.5; }

@media (max-width: 34rem) {
  /* La cabecera no esta en esta hoja: es `.ev-cabeza`, compartida con la
     pantalla del evento, y su responsive vive con ella. */
  .pf-numeros { gap: var(--e12); }
  .pf-pared--bento { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* DOS RENGLONES, Y EL CORTE ESTA ELEGIDO.

     `flex: 1 0 100%` en los dos hijos fuerza el salto: las pastillas se llevan
     el primer renglon entero y las herramientas el segundo. Sin esto el corte
     lo decidia el ancho disponible y el selector de vista terminaba solo en un
     tercer renglon, pegado a lo de arriba.

     En el segundo renglon, `space-between`: la seleccion multiple a la
     izquierda y la vista a la derecha, que es lo pedido. */
  .pf-carpetas { flex: 1 0 100%; }

  .pf-barra__herramientas {
    flex: 1 0 100%;
    margin-inline-start: 0;
    align-items: center;
    justify-content: space-between;
  }
}

/* --- lo que la maqueta no tenia ---------------------------------------- */

.pf-fotos { display: flex; flex-direction: column; }

/*
 * UNA PIEZA SIN CON QUE DIBUJARSE SE DIBUJA COMO UN HUECO, y lo dice.
 *
 * El muro ponia `src` = `thumb ?? lqip ?? ''`, y un `src` vacio es el icono de
 * imagen rota del navegador. Pasaba con cada dedicatoria -que no tiene
 * miniatura- y se reportaron como "fotos corruptas". Ahora los mensajes tienen
 * su propia forma, y esto cubre el otro caso: una foto cuya variante falte.
 */
.pf-pieza__hueco {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-text-subtle);
  background: var(--color-surface-muted);
}

/* La linea de "cuantas hay, cuantas faltan y cuantas se cayeron". */
.pf-estado {
  margin: 0 0 var(--e12);
  font-size: var(--t-apoyo);
  color: var(--color-text-muted);
}

/* El glifo de una dedicatoria, arriba a la derecha de su celda. */
.pf-mensaje__glifo {
  position: absolute;
  inset-block-start: var(--e8);
  inset-inline-end: var(--e8);
  color: var(--color-text-subtle);
}