/* ===========================================================================
   El muro de fotos — pensado para el celular, que es donde se va a usar:
   de noche, en una fiesta, con una mano ocupada.
   =========================================================================== */

.muro-caja{
  flex:1;width:100%;max-width:900px;margin:0 auto;
  padding:22px 14px calc(40px + env(safe-area-inset-bottom));
}
.muro-bajada{
  color:var(--tinta-suave);max-width:460px;margin:10px auto 0;
  font-size:.94rem;line-height:1.6;
}

/* ------------------------------------------------------------ Subir */
.muro-subir{
  background:#fff;border:1px solid var(--linea-suave);border-radius:var(--curva);
  box-shadow:var(--sombra);padding:18px 16px;margin-bottom:18px;
}
.muro-quien{display:block;margin-bottom:12px}
.muro-quien > span{
  display:block;font-size:.84rem;font-weight:700;color:var(--tinta-suave);margin-bottom:6px;
}
.muro-quien > span em{font-style:normal;font-weight:500;color:var(--tinta-tenue)}
.muro-quien .campo{min-height:48px}

.muro-boton{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:60px;padding:12px 18px;border-radius:16px;border:0;cursor:pointer;
  background:var(--oro-degradado);color:#fff;
  font-size:1.02rem;font-weight:700;
  box-shadow:0 8px 18px rgba(187,131,44,.25);transition:.15s ease;
}
.muro-boton:hover{filter:brightness(1.05)}
.muro-boton:active{transform:scale(.99)}
/* El de video va en segundo plano a propósito: la mayoría sube fotos, y
   dos botones dorados iguales harían dudar sobre cuál es cuál. */
.muro-boton-video{
  margin-top:9px;min-height:52px;
  background:var(--marfil);color:var(--oro-hondo);
  border:1.5px solid var(--oro);box-shadow:none;font-size:.96rem;
}
.muro-boton-video:hover{background:var(--oro-lavado);filter:none}
.muro-boton-video:disabled{opacity:.55;cursor:progress}
.muro-nota{
  text-align:center;font-size:.82rem;color:var(--tinta-tenue);margin-top:10px;
}

/* ---------------------------------------------------------- La rejilla
   Cuatro formas de verlas. La pareja elige la suya desde su panel y así se
   ve también para los invitados. */
.muro-rejilla{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
}

/* Mosaico: cada foto conserva su forma y encajan como un tablero */
.muro-rejilla.estilo-mosaico{
  display:block;column-count:2;column-gap:8px;
}
.muro-rejilla.estilo-mosaico .muro-foto{
  aspect-ratio:auto;break-inside:avoid;margin-bottom:8px;display:block;
}
.muro-rejilla.estilo-mosaico .muro-foto img{height:auto}

/* Collage: unas grandes y otras chiquitas */
.muro-rejilla.estilo-collage{grid-auto-flow:dense}
.muro-rejilla.estilo-collage .muro-foto:nth-child(7n+1){grid-column:span 2;grid-row:span 2}
.muro-rejilla.estilo-collage .muro-foto:nth-child(7n+5){grid-row:span 2}

/* Una debajo de otra, grandes */
.muro-rejilla.estilo-tira{grid-template-columns:1fr;gap:12px}
.muro-rejilla.estilo-tira .muro-foto{aspect-ratio:4/5}

/* ---- Montón: encimadas y torcidas, como una pared de fotos ----
   El solape sale de un margen negativo, y los ángulos de nth-child: así no
   hace falta JavaScript ni que dos personas vean el muro distinto. */
.muro-rejilla.estilo-monton{display:block;column-count:3;column-gap:0}
.muro-rejilla.estilo-monton .muro-foto{
  aspect-ratio:auto;break-inside:avoid;display:block;
  margin:0 0 -16px;border-radius:3px;border:0;
  box-shadow:0 4px 14px rgba(30,24,18,.32);
  transition:transform .18s ease;
}
.muro-rejilla.estilo-monton .muro-foto img{height:auto}
.muro-rejilla.estilo-monton .muro-foto:nth-child(5n+1){transform:rotate(-2.6deg) translateX(-3px);z-index:2}
.muro-rejilla.estilo-monton .muro-foto:nth-child(5n+2){transform:rotate(1.9deg) translateX(4px);z-index:4}
.muro-rejilla.estilo-monton .muro-foto:nth-child(5n+3){transform:rotate(-1.1deg);z-index:1}
.muro-rejilla.estilo-monton .muro-foto:nth-child(5n+4){transform:rotate(2.8deg) translateX(-5px);z-index:5}
.muro-rejilla.estilo-monton .muro-foto:nth-child(5n+5){transform:rotate(-3.2deg) translateX(3px);z-index:3}
.muro-rejilla.estilo-monton .muro-foto:hover,
.muro-rejilla.estilo-monton .muro-foto:focus-within{transform:rotate(0) scale(1.05);z-index:30}

/* ---- Polaroid: marco blanco, y el nombre escrito en el borde de abajo ---- */
.muro-rejilla.estilo-polaroid{display:block;column-count:2;column-gap:0;padding:8px 0}
.muro-rejilla.estilo-polaroid .muro-foto{
  aspect-ratio:auto;break-inside:avoid;display:block;
  background:#fff;border:0;border-radius:2px;
  padding:9px 9px 8px;margin:0 5px -10px;
  box-shadow:0 5px 16px rgba(30,24,18,.3);
  transition:transform .18s ease;
}
.muro-rejilla.estilo-polaroid .muro-foto img{height:auto;border-radius:1px}
.muro-rejilla.estilo-polaroid .muro-foto:nth-child(4n+1){transform:rotate(-2.2deg);z-index:2}
.muro-rejilla.estilo-polaroid .muro-foto:nth-child(4n+2){transform:rotate(2.4deg);z-index:4}
.muro-rejilla.estilo-polaroid .muro-foto:nth-child(4n+3){transform:rotate(1.3deg);z-index:1}
.muro-rejilla.estilo-polaroid .muro-foto:nth-child(4n+4){transform:rotate(-3deg);z-index:3}
.muro-rejilla.estilo-polaroid .muro-foto:hover,
.muro-rejilla.estilo-polaroid .muro-foto:focus-within{transform:rotate(0) scale(1.04);z-index:30}
/* Acá el nombre no va encima de la foto: va escrito en el blanco */
.muro-rejilla.estilo-polaroid .muro-quien-etq{
  position:static;background:none;color:#6b6055;
  padding:9px 2px 2px;text-align:center;font-weight:600;
  font-size:.74rem;white-space:normal;
}
.muro-rejilla.estilo-polaroid .muro-quien-etq small{color:#9a8d7e;opacity:1}
.muro-rejilla.estilo-polaroid .muro-quien-etq.seguido{white-space:normal}
/* Sin nombre, el borde de abajo igual queda más ancho: es lo que la hace polaroid */
.muro-rejilla.estilo-polaroid .muro-foto:not(:has(.muro-quien-etq)){padding-bottom:26px}

/* En Polaroid el pie TAMPOCO flota: va en el blanco de abajo, en flujo normal,
   igual que el nombre.

   Sin esto, la caja del pie —que en los demás estilos va pegada al borde de la
   foto— se montaba encima de la imagen con su degradado oscuro, y el nombre
   desaparecía del marco blanco. Se veía bien en el panel de novios y mal en el
   muro porque el panel pinta fichas de solo lectura y el muro pinta la barra
   de botones de verdad. */
.muro-rejilla.estilo-polaroid .muro-pie{
  position:static;background:none;padding-top:0;pointer-events:auto;
}
.muro-rejilla.estilo-polaroid .muro-pie .muro-acciones{padding:4px 0 0}

/* Sobre el blanco, los botones necesitan un borde de verdad: el suyo está
   pensado para verse encima de una foto y acá se perdía. */
.muro-rejilla.estilo-polaroid .muro-pie .muro-r-boton,
.muro-rejilla.estilo-polaroid .muro-pie .muro-coment-btn{
  border-color:rgba(30,24,18,.16);
  box-shadow:0 1px 3px rgba(30,24,18,.12);
}
.muro-vacio{
  grid-column:1/-1;text-align:center;color:var(--tinta-tenue);
  font-size:.9rem;padding:36px 12px;
  border:1px dashed var(--linea);border-radius:var(--curva);
}

.muro-foto{
  position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;
  background:var(--marfil);border:1px solid var(--linea);
}
.muro-foto img{width:100%;height:100%;object-fit:cover;display:block}
.muro-foto a{display:block;width:100%;height:100%}
.muro-foto.mia{border-color:var(--oro);box-shadow:0 0 0 2px var(--oro-lavado)}

.muro-quien-etq{
  position:absolute;left:0;right:0;bottom:0;padding:14px 9px 7px;
  background:linear-gradient(to top,rgba(30,24,18,.75),transparent);
  color:#fff;font-size:.74rem;font-weight:700;
  /* Centrado: el nombre y la fecha tienen que ir alineados entre sí, y
     centrados se ven bien en las cuatro formas de la rejilla */
  text-align:center;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;
}
/* Apilado: el nombre arriba y, debajo, el día y la hora más chicos.
   Cada uno en su propio bloque centrado: así no depende de heredar nada. */
.muro-quien-etq b{
  display:block;text-align:center;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.muro-quien-etq small{
  display:block;text-align:center;font-size:.66rem;font-weight:500;
  opacity:.82;margin-top:1px;letter-spacing:.01em;
}
/* Seguido: los dos en una línea, con un punto que los separa */
.muro-quien-etq.seguido{white-space:nowrap}
.muro-quien-etq.seguido b,
.muro-quien-etq.seguido small{display:inline;margin-top:0}
.muro-quien-etq.seguido b + small::before{content:' · ';opacity:.7}

.muro-x{
  position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;
  border:0;background:rgba(30,24,18,.6);color:#fff;font-size:1.2rem;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.muro-x:hover{background:var(--no)}

/* Mientras sube */
.muro-foto.cargando img{opacity:.45}
.muro-girando{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.35);
}
.muro-girando::after{
  content:'';width:26px;height:26px;border-radius:50%;
  border:3px solid rgba(255,255,255,.7);border-top-color:var(--oro-hondo);
  animation:muro-gira .8s linear infinite;
}
@keyframes muro-gira{to{transform:rotate(360deg)}}

/* --------------------------------------------------------- Los videos */

/* La miniatura de un video es una imagen igual que las demás: el
   reproductor solo aparece cuando alguien toca. Cuarenta reproductores en
   una página matarían el celular del invitado. */
.muro-abrir{
  display:block;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  background:none;position:relative;
}
.muro-foto video{width:100%;height:100%;object-fit:cover;display:block}

/* El triangulito de «darle play» */
.muro-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(30,24,18,.5);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  transition:.15s ease;pointer-events:none;
}
.muro-play::after{
  content:'';margin-left:3px;
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}
.muro-abrir:hover .muro-play{background:rgba(30,24,18,.72);transform:translate(-50%,-50%) scale(1.06)}

/* Cuánto dura, arriba a la izquierda */
.muro-dura{
  position:absolute;top:7px;left:7px;
  padding:2px 7px;border-radius:20px;
  background:rgba(30,24,18,.6);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;pointer-events:none;
}

/* Cuánto lleva subido: un video tarda y sin esto parece colgado */
.muro-avance{
  position:absolute;left:0;right:0;bottom:9px;text-align:center;
  color:#fff;font-size:.8rem;font-weight:700;
  text-shadow:0 1px 3px rgba(30,24,18,.65);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------ Ver un video */
.muro-visor{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(24,19,14,.9);
  animation:muro-aparece .16s ease;
}
@keyframes muro-aparece{from{opacity:0}to{opacity:1}}
.muro-visor-caja{
  width:100%;max-width:900px;aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.muro-visor-caja iframe{width:100%;height:100%;border:0;display:block}
.muro-visor-x{
  position:absolute;top:14px;right:16px;
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.muro-visor-x:hover{background:rgba(255,255,255,.28)}
body.muro-sin-scroll{overflow:hidden}

/* En un celular acostado el video manda: se le da toda la pantalla */
@media (max-height:520px){
  .muro-visor{padding:0}
  .muro-visor-caja{max-width:none;height:100%;border-radius:0}
}

/* ------------------------------------------- El muro visto por la pareja */
.muro-resumen{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--marfil);border:1px solid var(--linea);border-radius:14px;
  padding:13px 15px;margin-bottom:14px;
}
.muro-resumen .crece{flex:1;min-width:140px}
.muro-cuenta{
  font-family:'Playfair Display',Georgia,serif;font-size:1.7rem;
  color:var(--tinta-fuerte);line-height:1;
}
.muro-aviso-dias{
  font-size:.82rem;color:var(--oro-texto);font-weight:700;
}
.muro-aviso-dias.poco{color:var(--no)}

/* ------------------------------------------- Elegir cómo se ven */
.muro-estilos{margin:14px 0}
.muro-estilos .et{
  display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--oro-texto);margin-bottom:9px;
}
.muro-estilos-lista{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.muro-estilo{
  display:block;text-align:left;padding:11px 12px;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--linea);background:#fff;transition:.15s ease;
}
.muro-estilo:hover{border-color:var(--oro)}
.muro-estilo.on{border-color:var(--oro-hondo);background:var(--oro-lavado)}
.muro-estilo strong{display:block;font-size:.88rem;color:var(--tinta-fuerte);margin-top:7px}
.muro-estilo small{display:block;font-size:.76rem;color:var(--tinta-suave);line-height:1.4;margin-top:2px}

/* El dibujito de cada estilo, hecho con cuatro cuadritos */
.muro-estilo-dibujo{display:grid;gap:2px;width:34px;height:26px}
.muro-estilo-dibujo i{background:var(--arena);border-radius:2px;display:block}
.muro-estilo.on .muro-estilo-dibujo i{background:var(--oro)}
.muro-estilo-dibujo.cuadros{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.muro-estilo-dibujo.mosaico{grid-template-columns:1fr 1fr;grid-template-rows:1.4fr 1fr}
.muro-estilo-dibujo.mosaico i:nth-child(2){grid-row:span 2}
.muro-estilo-dibujo.collage{grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr}
.muro-estilo-dibujo.collage i:nth-child(1){grid-row:span 2}
.muro-estilo-dibujo.tira{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}
.muro-nombres{
  display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;
  margin-top:14px;padding:12px 14px;cursor:pointer;
  background:var(--marfil);border:1px solid var(--linea);border-radius:12px;
}
.muro-nombres input{width:18px;height:18px;accent-color:var(--oro);grid-row:span 2}
.muro-nombres span{font-size:.9rem;font-weight:600;color:var(--tinta-suave)}
.muro-nombres small{font-size:.79rem;color:var(--tinta-tenue);line-height:1.45}

/* Elegir cómo se acomodan el nombre y la fecha */
.muro-pie-elige{margin-top:14px}
.muro-pie-elige .et{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-tenue);margin-bottom:8px;
}
.muro-pie-ops{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.muro-pie-op{
  display:flex;flex-direction:column;gap:3px;align-items:center;
  padding:12px 10px;cursor:pointer;text-align:center;
  background:var(--marfil);border:1px solid var(--linea);border-radius:12px;
}
.muro-pie-op.on{border-color:var(--oro);background:var(--oro-lavado)}
.muro-pie-op em{font-style:normal;font-size:.74rem;font-weight:700;color:var(--tinta-suave)}
.muro-pie-op i{font-style:normal;font-size:.66rem;color:var(--tinta-tenue)}
.muro-pie-op strong{
  font-size:.76rem;font-weight:600;color:var(--tinta-tenue);
  margin-top:5px;padding-top:6px;border-top:1px solid var(--linea);width:100%;
}
.muro-pie-op.on strong{color:var(--oro-hondo);border-color:var(--oro-lavado)}

.muro-estilo-dibujo.monton{position:relative;display:block}
.muro-estilo-dibujo.monton i{position:absolute;width:16px;height:13px}
.muro-estilo-dibujo.monton i:nth-child(1){left:0;top:2px;transform:rotate(-8deg)}
.muro-estilo-dibujo.monton i:nth-child(2){left:8px;top:0;transform:rotate(6deg)}
.muro-estilo-dibujo.monton i:nth-child(3){left:4px;top:9px;transform:rotate(-4deg)}
.muro-estilo-dibujo.monton i:nth-child(4){left:15px;top:8px;transform:rotate(9deg)}
.muro-estilo-dibujo.polaroid{position:relative;display:block}
.muro-estilo-dibujo.polaroid i{
  position:absolute;width:15px;height:17px;background:#fff;
  border:1px solid var(--arena);border-radius:1px;
}
.muro-estilo.on .muro-estilo-dibujo.polaroid i{border-color:var(--oro)}
.muro-estilo-dibujo.polaroid i:nth-child(1){left:1px;top:3px;transform:rotate(-9deg)}
.muro-estilo-dibujo.polaroid i:nth-child(2){left:11px;top:1px;transform:rotate(7deg)}
.muro-estilo-dibujo.polaroid i:nth-child(3),
.muro-estilo-dibujo.polaroid i:nth-child(4){display:none}

@media(min-width:560px){
  .muro-rejilla{grid-template-columns:repeat(3,1fr);gap:10px}
  .muro-rejilla.estilo-mosaico{column-count:3}
  .muro-rejilla.estilo-tira{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .muro-caja{padding:30px 18px 56px}
  .muro-subir{padding:22px 20px}
  .muro-estilos-lista{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:860px){
  .muro-rejilla{grid-template-columns:repeat(4,1fr)}
  .muro-rejilla.estilo-mosaico{column-count:4}
  .muro-rejilla.estilo-monton{column-count:4}
  .muro-rejilla.estilo-polaroid{column-count:3}
  .muro-estilos-lista{grid-template-columns:repeat(6,1fr)}
}

/* Quien prefiera que nada se mueva: nada se mueve */
@media(prefers-reduced-motion:reduce){
  .muro-rejilla.estilo-monton .muro-foto,
  .muro-rejilla.estilo-polaroid .muro-foto{transition:none}
}


/* ===========================================================================
   Reacciones, comentarios y «ver una por una»

   Todo lo de acá abajo se pinta encima de la foto o justo debajo, así que
   cuida dos cosas: que se pueda tocar con el dedo y que no le quite
   protagonismo a la foto, que es de lo que se trata el muro.
   =========================================================================== */

/* --------------------------------------------------- El pie de cada foto

   Va ENCIMA de la foto y no debajo: .muro-foto es un cuadro con aspect-ratio
   y overflow:hidden, así que cualquier cosa puesta después de la imagen se
   sale del recorte y no se ve. Encima, además, funciona igual en las cinco
   formas de rejilla sin tocar ninguna. */
.muro-acciones{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:16px 7px 7px;min-height:34px;
  background:linear-gradient(to top,rgba(30,24,18,.72),transparent);
}

/* El pie de la foto: el nombre arriba, los botones abajo, en UNA sola caja.

   Acá vivía un «bottom:38px» para que el nombre no se montara sobre la barra
   de botones. La barra mide 53, así que se montaba igual, y como cada uno traía
   su propio degradado quedaba una mancha oscura a media foto.

   Ahora los dos van dentro de .muro-pie: uno debajo del otro porque están en
   el mismo flujo, sin ningún número que ajustar a ojo, y con un solo degradado
   detrás de ambos. */
.muro-pie{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(to top,rgba(30,24,18,.82) 0%,rgba(30,24,18,.5) 48%,transparent 100%);
  padding-top:26px;
  pointer-events:none;
}
/* Los botones sí se pueden tocar; el degradado de encima no roba los clics */
.muro-pie .muro-acciones{pointer-events:auto}

/* Dentro del pie, las dos partes ya no se posicionan solas */
.muro-pie .muro-quien-etq,
.muro-pie .muro-acciones{
  position:static;background:none;padding-top:0;
}
/* display:block es obligatorio, no decoración: la etiqueta es un <span> y era
   el position:absolute lo que la volvía bloque. Al quitárselo se volvió inline,
   sus dos líneas se desbordaron de su propia caja y se montaron otra vez sobre
   los botones — el mismo síntoma que veníamos a arreglar. */
/* display:block es obligatorio: la etiqueta es un <span> y era el
   position:absolute lo que la volvía bloque.

   Y overflow:visible también: el padre traía overflow:hidden y recortaba su
   propia caja a menos de lo que miden el nombre y la fecha juntos, así que los
   botones se le subían encima. Los nombres largos ya los recorta el <b>, que
   tiene lo suyo. */
.muro-pie .muro-quien-etq{display:block;overflow:visible;padding:0 9px 4px}
.muro-pie .muro-acciones{padding:0 7px 7px}
.muro-reacciones{display:flex;align-items:center;gap:6px;min-width:0}

.muro-r-boton{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.92);
  display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;
  padding:0;transition:transform .12s ease, border-color .12s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.muro-r-boton:hover{transform:scale(1.12);border-color:var(--oro)}
.muro-r-boton.puesta{border-color:var(--oro);background:var(--oro-lavado)}
.muro-r-mas{color:var(--tinta-tenue);font-size:17px;font-weight:400;margin-top:-2px}

.muro-r-chips{display:flex;gap:4px;flex-wrap:wrap;min-width:0;overflow:hidden}
.muro-r-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px 2px 5px;border-radius:99px;
  background:rgba(255,255,255,.92);border:1px solid transparent;
  font-size:12px;line-height:1.4;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.muro-r-chip b{font-size:11px;font-weight:700;color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.muro-r-chip.mia{border-color:var(--oro);background:var(--oro-lavado)}

.muro-coment-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  border:0;background:none;padding:6px;cursor:pointer;
  color:#fff;font-family:inherit;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.muro-coment-btn:hover{opacity:.8}
.muro-coment-btn b{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}

/* --------------------------------------------------- El menú de emojis */
/* z-index alto a propósito: el reel va en 95 y el menú se añade al body, así
   que con 60 se abría DEBAJO de la foto y parecía que mantener apretado el
   corazón no hacía nada. */
.muro-r-menu{
  position:absolute;z-index:110;display:flex;gap:2px;padding:6px;
  background:#fff;border:1px solid var(--linea);border-radius:99px;
  box-shadow:0 6px 24px rgba(58,46,31,.18);
  animation:muro-r-entra .14s ease-out;
}
.muro-r-menu button{
  width:38px;height:38px;border:0;background:none;cursor:pointer;
  font-size:21px;line-height:1;border-radius:50%;padding:0;
  transition:transform .12s ease, background .12s ease;
}
.muro-r-menu button:hover{transform:scale(1.25);background:var(--oro-lavado)}
@keyframes muro-r-entra{from{opacity:0;transform:translateY(6px) scale(.94)}}

/* --------------------------------------------------- Los comentarios */
body.sin-scroll{overflow:hidden}

/* El alto y el «top» los pone el JS con visualViewport, que es lo único que
   sabe cuánto espacio deja libre el teclado del celular. Acá solo va el
   respaldo para antes de que el JS arranque.

   Antes esto era inset:0 con 100dvh: en Android el layout viewport NO se
   encoge al subir el teclado, así que la hoja se iba debajo del teclado y al
   enviar un mensaje la conversación desaparecía. */
.muro-coments{
  position:fixed;left:0;right:0;top:0;z-index:100;
  height:100dvh;
  display:flex;align-items:flex-end;justify-content:center;
}
.muro-c-fondo{position:absolute;inset:0;background:rgba(38,32,24,.55)}
.muro-c-hoja{
  position:relative;width:100%;max-width:560px;
  /* Antes 82vh: con el teclado arriba eso era más alto que la pantalla y la
     conversación se salía. Ahora se estira hasta donde llegue el hueco. */
  max-height:100%;min-height:0;
  display:flex;flex-direction:column;
  background:#fff;border-radius:20px 20px 0 0;
  box-shadow:0 -8px 40px rgba(58,46,31,.25);
  animation:muro-c-sube .2s ease-out;
}
/* Con poco espacio (teclado arriba) la hoja ocupa todo lo que quede libre */
@media(max-height:520px){
  .muro-c-hoja{border-radius:14px 14px 0 0}
  .muro-c-barra{padding:9px 18px}
}
@keyframes muro-c-sube{from{transform:translateY(30px);opacity:.6}}

.muro-c-barra{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--linea-suave);flex:0 0 auto;
}
.muro-c-cerrar{
  border:0;background:none;font-size:26px;line-height:1;cursor:pointer;
  color:var(--tinta-tenue);padding:0 4px;
}

.muro-c-lista{
  list-style:none;margin:0;padding:12px 18px;overflow-y:auto;flex:1 1 auto;
  display:flex;flex-direction:column;gap:12px;
}
.muro-c-lista li{position:relative;padding-right:26px;font-size:.93rem;line-height:1.5}
.muro-c-lista li b{font-weight:700;margin-right:4px}
.muro-c-cuando{display:block;font-size:.74rem;color:var(--tinta-tenue);margin-top:2px}
.muro-c-vacio,.muro-c-cargando{color:var(--tinta-tenue);text-align:center;padding:18px 0}
.muro-c-x{
  position:absolute;right:0;top:-2px;border:0;background:none;cursor:pointer;
  color:var(--tinta-tenue);font-size:19px;line-height:1;padding:2px 4px;
}
.muro-c-x:hover{color:var(--no)}

.muro-c-form{
  display:flex;gap:8px;padding:12px 18px;flex:0 0 auto;
  border-top:1px solid var(--linea-suave);
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.muro-c-form input{
  flex:1;min-width:0;padding:10px 14px;border-radius:99px;
  border:1px solid var(--linea);background:var(--marfil);
  font-family:inherit;font-size:.95rem;
}
.muro-c-form input:focus{outline:none;border-color:var(--oro)}

/* Mandando: se atenúa el botón, pero la caja NUNCA se desactiva — hacerlo le
   quita el foco y en el celular eso baja el teclado, que era justo la queja. */
.muro-c-form.mandando button{opacity:.55;pointer-events:none}

/* Lo escrito no se pierde si la lista es larga: la caja siempre visible */
.muro-c-form{position:relative;z-index:2;background:#fff}

/* --------------------------------------------------- La bienvenida */
.muro-saludo{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:24px;background:var(--marfil);
}
.muro-saludo-caja{
  width:100%;max-width:400px;text-align:center;
  background:#fff;border:1px solid var(--linea);border-radius:22px;
  padding:34px 26px;box-shadow:var(--sombra);
  animation:muro-c-sube .25s ease-out;
}
.muro-saludo-caja h2{margin:0 0 8px;font-size:1.5rem}
.muro-saludo-caja p{margin:0 0 20px;color:var(--tinta-suave);font-size:.94rem;line-height:1.55}
.muro-saludo-caja input{
  width:100%;padding:13px 16px;margin-bottom:14px;
  border:1px solid var(--linea);border-radius:12px;background:var(--marfil);
  font-family:inherit;font-size:1.02rem;text-align:center;
}
.muro-saludo-caja input:focus{outline:none;border-color:var(--oro)}
.muro-saludo-caja .btn{width:100%}

/* --------------------------------------------------- Ver una por una */
.muro-modos{display:flex;justify-content:center;margin:0 0 18px}
.muro-modo{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:99px;cursor:pointer;
  border:1px solid var(--linea);background:#fff;color:var(--tinta-fuerte);
  font-family:inherit;font-size:.9rem;font-weight:600;
}
.muro-modo:hover{border-color:var(--oro);color:var(--oro-texto)}

.muro-deslizar{
  position:fixed;inset:0;z-index:85;background:#241f19;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px;gap:16px;
}
.muro-d-cerrar{
  position:absolute;top:14px;right:16px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;
}
.muro-d-cuenta{
  position:absolute;top:22px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.66);font-size:.82rem;font-variant-numeric:tabular-nums;
}
.muro-d-pila{
  flex:1 1 auto;width:100%;max-width:420px;
  display:grid;place-items:center;min-height:0;
}
.muro-d-carta{
  position:relative;max-width:100%;max-height:100%;
  border-radius:18px;overflow:hidden;background:#000;
  box-shadow:0 14px 44px rgba(0,0,0,.5);
  touch-action:pan-y;user-select:none;cursor:grab;
  transition:transform .2s ease, opacity .2s ease;
}
.muro-d-carta img{display:block;max-width:100%;max-height:64vh;object-fit:contain}
.muro-d-carta.va-si{box-shadow:0 0 0 3px #2c6b41, 0 14px 44px rgba(0,0,0,.5)}
.muro-d-carta.va-no{box-shadow:0 0 0 3px #94341f, 0 14px 44px rgba(0,0,0,.5)}
.muro-d-carta.fuera-si{transform:translateX(120%) rotate(18deg) !important;opacity:0}
.muro-d-carta.fuera-no{transform:translateX(-120%) rotate(-18deg) !important;opacity:0}

.muro-d-marca{
  position:absolute;top:12px;right:12px;font-size:22px;
  background:rgba(0,0,0,.45);border-radius:50%;width:38px;height:38px;
  display:grid;place-items:center;
}
.muro-d-quien{
  position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.62));
  color:#fff;font-size:.9rem;font-weight:600;
}
.muro-d-fin{text-align:center;color:#fff}
.muro-d-fin strong{display:block;font-size:1.3rem;margin-bottom:6px}
.muro-d-fin p{color:rgba(255,255,255,.6);margin:0}

.muro-d-botones{
  display:flex;gap:26px;flex:0 0 auto;
  padding-bottom:env(safe-area-inset-bottom);
}
.muro-d-botones button{
  width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;
  font-size:26px;line-height:1;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .12s ease;
}
.muro-d-botones button:hover{transform:scale(1.09)}
.muro-d-no{background:#fff;color:#94341f}
.muro-d-si{background:#fff}

@media(prefers-reduced-motion:reduce){
  .muro-r-menu,.muro-c-hoja,.muro-saludo-caja{animation:none}
  .muro-d-carta,.muro-r-boton,.muro-d-botones button{transition:none}
}


/* --------------------------------------------------- En el panel de la pareja

   Los chips del panel no traen el emoji en el HTML: lo pone el CSS según la
   palabra que guardó el servidor. Así el PHP nunca escribe un emoji. */
.muro-r-chips.en-panel{
  position:absolute;left:6px;bottom:6px;z-index:2;
  gap:3px;pointer-events:none;
}
.muro-r-chips.en-panel .muro-r-chip{
  background:rgba(255,255,255,.94);border-color:transparent;
  box-shadow:0 1px 3px rgba(58,46,31,.18);padding:1px 6px 1px 4px;
}
.muro-r-chip[data-emoji]::before{margin-right:1px}
.muro-r-chip[data-emoji="corazon"]::before{content:"\2764\FE0F"}
.muro-r-chip[data-emoji="risa"]::before{content:"\1F602"}
.muro-r-chip[data-emoji="amor"]::before{content:"\1F60D"}
.muro-r-chip[data-emoji="fuego"]::before{content:"\1F525"}
.muro-r-chip[data-emoji="aplauso"]::before{content:"\1F44F"}
.muro-r-chip[data-emoji="llanto"]::before{content:"\1F979"}

/* --------------------------------------------------- Escoger cuáles bajar */
.muro-escoger{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 16px;
}
.muro-escoger form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.muro-escogidas-n{
  font-size:.85rem;font-weight:600;color:var(--tinta-suave);
  font-variant-numeric:tabular-nums;
}

.muro-marcar{
  position:absolute;top:7px;left:7px;z-index:3;cursor:pointer;
  width:26px;height:26px;
}
.muro-marcar input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.muro-marcar span{
  display:block;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.92);border:2px solid #fff;
  box-shadow:0 1px 4px rgba(58,46,31,.3);
  transition:background .12s ease;
}
.muro-marcar input:checked + span{
  background:var(--oro);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-size:16px;background-position:center;background-repeat:no-repeat;
}
.muro-marcar input:focus-visible + span{outline:2px solid var(--oro-hondo);outline-offset:2px}

/* Escogiendo, la foto entera es el botón: apuntarle a una casilla de 26 px
   con el dedo en un celular es una pelea que nadie quiere. */
.muro-rejilla.escogiendo .muro-foto{cursor:pointer}
.muro-rejilla.escogiendo .muro-foto a{pointer-events:none}
.muro-rejilla.escogiendo .muro-foto:has(input:checked){
  outline:3px solid var(--oro);outline-offset:-3px;border-radius:12px;
}


/* ===========================================================================
   El visor tipo reel

   Una pista que se desplaza en vertical con scroll-snap: el navegador hace
   el trabajo y por eso se siente como una app y no como una página. Cada foto
   ocupa exactamente el alto de la pantalla, así el salto cae siempre justo.

   dvh y no vh: en el celular la barra del navegador aparece y desaparece, y
   con vh la última foto quedaba cortada.
   =========================================================================== */
/* --alto-reel lo fija el JS en píxeles al abrir, y NO lo mueve el teclado.

   Acá había 100dvh y era un error: cuando sube el teclado del celular, el
   navegador encoge el viewport, con dvh las tres hojas se achican a la vez, el
   desplazamiento deja de caer en su sitio y el reel se desliza solo — se veía
   media foto, la siguiente asomando y el fondo blanco de la página debajo.

   El respaldo (100dvh) es solo para el instante antes de que el JS arranque. */
.muro-reel{
  position:fixed;inset:0;z-index:95;background:#000;
  --alto-hoja:var(--alto-reel,100dvh);
}
.muro-reel-pista{
  height:var(--alto-hoja);overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.muro-reel-pista::-webkit-scrollbar{display:none}

.muro-reel-hoja{
  position:relative;height:var(--alto-hoja);width:100%;
  scroll-snap-align:center;scroll-snap-stop:always;
  display:grid;place-items:center;overflow:hidden;
  background:#000;
}
.muro-reel-medio{
  width:100%;height:100%;display:grid;place-items:center;
}
.muro-reel-medio img{
  max-width:100%;max-height:var(--alto-hoja);object-fit:contain;display:block;
}
.muro-reel-medio iframe{
  width:100%;height:100%;border:0;display:block;
}

.muro-reel-x{
  position:absolute;top:calc(12px + env(safe-area-inset-top));left:14px;z-index:4;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.42);color:#fff;font-size:25px;line-height:1;
  backdrop-filter:blur(6px);
}

/* Quién la subió, abajo a la izquierda, sobre un degradado para que se lea
   igual sobre una foto clara o una oscura. */
.muro-reel-quien{
  position:absolute;left:0;right:78px;bottom:0;z-index:3;
  padding:44px 18px calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(0,0,0,.66));
  color:#fff;pointer-events:none;
}
.muro-reel-quien b{display:block;font-size:1rem;font-weight:700}
.muro-reel-quien small{display:block;font-size:.78rem;opacity:.75;margin-top:2px}

/* La columna de la derecha, como en Instagram */
.muro-reel-acciones{
  position:absolute;right:10px;bottom:calc(26px + env(safe-area-inset-bottom));z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.muro-reel-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:0;background:none;padding:2px;cursor:pointer;color:#fff;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  /* none y no manipulation: con manipulation el navegador sigue vigilando si
     el dedo va a desplazar, y al mantener apretado el corazón disparaba
     pointercancel antes de los 420 ms. Sobre este botón de 44 px no hace falta
     poder desplazar; para eso está el resto de la pantalla. */
  touch-action:none;
  user-select:none;-webkit-user-select:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
  transition:transform .12s ease;
}
.muro-reel-btn:active{transform:scale(.88)}
.muro-reel-ico{
  display:grid;place-items:center;width:44px;height:44px;font-size:29px;line-height:1;
}
.muro-reel-btn b{
  font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;
  min-height:14px;
}
.muro-reel-btn.puesta .muro-reel-ico{animation:muro-late .32s ease-out}
@keyframes muro-late{40%{transform:scale(1.32)}}

/* En pantalla grande la foto no se estira de lado a lado: se deja del ancho
   de un celular, centrada, como hace Instagram en el escritorio. */
/* En pantalla ancha el reel va en una columna estrecha y centrada, como
   Instagram en el computador.

   El centrado lo hace el «margin:0 auto» de la hoja y nada más. Antes acá
   había un «display:flex;flex-direction:column;align-items:center» en la
   pista, y eso rompía el reel entero en el computador: en un flex en columna
   los hijos traen flex-shrink:1, así que las 35 hojas se repartían el alto de
   la pista en vez de medir una pantalla cada una — salían como tiras de 25px
   apiladas, con las fechas encima. En el celular no se veía porque este
   bloque empieza en 760px.

   No hacía falta el flex para centrar: una caja con ancho fijo y margin auto
   se centra sola dentro de un contenedor normal, y así no hay hijos a los que
   nadie les pueda encoger el alto. */
@media(min-width:760px){
  .muro-reel-hoja{width:min(100%,470px);margin:0 auto}
}

@media(prefers-reduced-motion:reduce){
  .muro-reel-pista{scroll-behavior:auto}
  .muro-reel-btn,.muro-reel-btn.puesta .muro-reel-ico{transition:none;animation:none}
}