/* ==========================================================================
   EVENTO — estilos de la mesa, el muro y el libro de buenos deseos
   (los mueve nucleo/evento.js)
   Igual que base.css: aquí no hay colores propios. Todo sale de las variables
   del tema, así que el muro se viste solo en cada diseño.
   ========================================================================== */

/* ══════════ TU MESA ══════════ */
.saludo__mesa{
  display:inline-block;
  margin:.7rem 0 0;
  padding:.45rem 1.1rem;
  border-radius:var(--radio);
  background:var(--papel); color:var(--tinta);
  border:1px dashed var(--marca-claro);
  font-family:var(--f-display); font-size:1.15rem; line-height:1.2;
  box-shadow:var(--sombra);
}
.saludo__mesa[hidden]{ display:none; }

/* ══════════ EL MURO ══════════ */
.muro__intro{ color:var(--tinta-suave); margin-bottom:1.3rem; }
.muro__subir{ display:grid; gap:.6rem; justify-items:center; }
.muro__subir .boton{ min-width:14rem; }
.muro__subir .boton:disabled{ opacity:.55; cursor:default; }
.muro__cupo{ font-size:.86rem; color:var(--tinta-suave); min-height:1.3em; }

/* el borrador: las fotos que se van a publicar */
.muro__borrador{
  display:grid; gap:1rem;
  margin-top:1.3rem; padding:1.1rem 1rem 1.2rem;
  text-align:left;
  background:var(--papel);
  border:1px dashed var(--marca-claro);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.muro__previas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:.5rem; }
.muro__previa{ position:relative; aspect-ratio:1 / 1; border-radius:calc(var(--radio) / 1.6); overflow:hidden; background:var(--papel-hondo); }
.muro__previa img{ display:block; width:100%; height:100%; object-fit:cover; }
.muro__quitar{
  position:absolute; top:4px; right:4px;
  width:28px; height:28px; border-radius:50%;
  border:0; background:rgba(0,0,0,.62); color:#fff;
  font-size:1.2rem; line-height:1; cursor:pointer;
}
.muro__acciones{ display:flex; flex-wrap:wrap; gap:.6rem; }
.muro__acciones .boton{ flex:1 1 9rem; }

.muro__lista{ display:grid; gap:1.1rem; margin-top:1.8rem; text-align:left; }
.muro__vacio{ text-align:center; color:var(--tinta-suave); padding:1.4rem 0; }
.muro__aviso{ margin-top:1.1rem; font-size:.82rem; color:var(--tinta-suave); min-height:1.3em; }
.muro__panel{ margin-top:.5rem; font-size:.9rem; color:var(--tinta-suave); }
.muro__panel a,.formulario__demo a{ color:inherit; font-weight:700; text-underline-offset:.2em; }
.formulario__demo{ margin-top:.2rem; }

/* ── una publicación: "Familia Ayala compartió 3 fotos" ── */
.post{
  background:var(--papel);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  border:1px solid color-mix(in srgb, var(--marca-claro) 40%, transparent);
  overflow:hidden;
}
.post--nuevo{ animation:post-llega .7s cubic-bezier(.2,.8,.2,1); }
@keyframes post-llega{ from{ opacity:0; transform:translateY(-14px) scale(.98); } }
.post__cabeza{ display:flex; align-items:center; gap:.7rem; padding:.85rem .9rem .7rem; }
.post__inicial{
  flex:none; width:2.5rem; height:2.5rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--marca); color:var(--papel);
  font-family:var(--f-display); font-weight:600; font-size:1.2rem; line-height:1;
}
.post__quien{ display:flex; flex-direction:column; min-width:0; }
.post__quien b{ font-family:var(--f-display); font-weight:600; font-size:1.08rem; line-height:1.2; color:var(--tinta); }
.post__quien small{ font-size:.8rem; color:var(--tinta-suave); }
.post__texto{ padding:0 .95rem .75rem; font-size:1rem; line-height:1.45; color:var(--tinta); overflow-wrap:anywhere; }

.post__fotos{ display:grid; gap:3px; background:var(--papel-hondo); }
.post__fotos--2{ grid-template-columns:1fr 1fr; }
.post__fotos--3{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
.post__fotos--3 .post__foto:first-child{ grid-row:1 / 3; }
.post__fotos--4{ grid-template-columns:1fr 1fr; }
.post__foto{
  position:relative; display:block;
  margin:0; padding:0; border:0; background:none; cursor:zoom-in;
  aspect-ratio:1 / 1; overflow:hidden;
}
.post__fotos--1 .post__foto{ aspect-ratio:4 / 3; }
.post__fotos--3 .post__foto:first-child{ aspect-ratio:auto; }
.post__foto img{ display:block; width:100%; height:100%; object-fit:cover; }
.post__mas{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.52); color:#fff;
  font-family:var(--f-display); font-size:1.7rem; font-weight:600;
}
.post__pie{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.55rem .6rem .5rem; }
.post__cuantos{ padding-right:.45rem; font-size:.82rem; color:var(--tinta-suave); }

/* ── comentarios ── */
.post__comentarios{ display:grid; gap:.4rem; padding:0 .95rem .2rem; }
.post__comentarios:empty{ display:none; }
.post__comentario{ font-size:.93rem; line-height:1.4; color:var(--tinta); overflow-wrap:anywhere; }
.post__comentario b{ font-weight:700; }
.post__comentario small{ font-size:.76rem; color:var(--tinta-suave); white-space:nowrap; }
.post__vermas{
  justify-self:start; border:0; background:none; cursor:pointer; padding:.1rem 0;
  font-family:var(--f-texto); font-size:.84rem; font-weight:600; color:var(--tinta-suave);
  text-decoration:underline; text-underline-offset:.2em;
}
.post__comentar{ display:flex; gap:.4rem; padding:.7rem .8rem .8rem; }
.post__comentar input{
  flex:1; min-width:0; min-height:42px;
  padding:.5rem .85rem;
  border:1px solid color-mix(in srgb, var(--marca-claro) 70%, transparent); border-radius:999px;
  background:var(--papel-hondo); color:var(--tinta);
  font-family:var(--f-texto); font-size:.95rem;
}
.post__comentar input::placeholder{ color:var(--tinta-suave); }
.post__comentar input:focus{ outline:none; border-color:var(--acento); box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
.post__comentar .post__enviar{ flex:none; width:auto; min-height:42px; padding:.4rem .95rem; font-size:.76rem; box-shadow:none; border-radius:999px; }
.post__comentar .post__enviar:active{ transform:none; }
.post__error{ padding:0 .95rem .7rem; font-size:.82rem; color:var(--acento); }
.post__error:empty{ display:none; }

/* ── descargar todas las fotos ── */
.muro__descarga{ display:grid; gap:.55rem; justify-items:center; margin-top:1.7rem; }
.muro__descarga:empty{ display:none; }
.muro__descarga .boton:disabled{ opacity:.6; cursor:default; }
.muro__cierre{ font-family:var(--f-display); font-size:1.2rem; line-height:1.3; color:var(--tinta); }
.post__gusta{
  border:0; background:none; cursor:pointer;
  padding:.45rem .6rem; border-radius:999px;
  font-family:var(--f-texto); font-size:.92rem; font-weight:600;
  color:var(--tinta-suave);
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease, color .15s ease;
}
.post__gusta[aria-pressed="true"]{ color:var(--acento); }
.post__gusta:active{ transform:scale(.92); }
.post__gusta:focus-visible,.post__foto:focus-visible,.muro__quitar:focus-visible{ outline:3px solid var(--acento); outline-offset:2px; }

/* Cada tema viste sus campos para la sección de confirmar (a veces sobre fondo oscuro,
   con el rótulo en blanco). Dentro de las tarjetas del muro y del libro, el campo va
   siempre con los colores de la tarjeta: si no, el rótulo se pierde. */
.muro__borrador .campo > span,.deseos__forma .campo > span{ color:var(--tinta); }
.muro__borrador .campo > span small,.deseos__forma .campo > span small{ color:var(--tinta-suave); }
.muro__borrador .campo textarea,.deseos__forma .campo textarea{
  background:var(--papel-hondo); color:var(--tinta);
  border:1px solid color-mix(in srgb, var(--marca-claro) 70%, transparent);
}
.muro__borrador .campo textarea::placeholder,.deseos__forma .campo textarea::placeholder{ color:var(--tinta-suave); }
.muro__borrador .campo textarea:focus,.deseos__forma .campo textarea:focus{
  outline:none; border-color:var(--acento);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}

/* ══════════ UN CUADRO DE VIDEO (portada + triangulito + cuánto dura) ══════════ */
.cuadro-video{ position:relative; background:#1b1614; }
.post__foto.cuadro-video{ background:#1b1614; cursor:pointer; }
.cuadro-video__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:3.1rem; height:3.1rem; border-radius:50%;
  display:grid; place-items:center; padding-left:.18rem;
  background:rgba(0,0,0,.58); color:#fff;
  border:2px solid rgba(255,255,255,.88);
  font-size:1.1rem; line-height:1;
  pointer-events:none;
}
.cuadro-video__dur{
  position:absolute; right:6px; bottom:6px;
  padding:.08rem .42rem; border-radius:6px;
  background:rgba(0,0,0,.72); color:#fff;
  font-family:var(--f-texto); font-size:.72rem; font-weight:700; font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.muro__previa .cuadro-video__play{ width:2rem; height:2rem; font-size:.72rem; border-width:1.5px; }
.muro__previa .cuadro-video__dur{ right:auto; left:4px; bottom:4px; font-size:.66rem; }

/* ══════════ EL LIBRO DE BUENOS DESEOS ══════════ */
.deseos__intro{ color:var(--tinta-suave); margin-bottom:1.5rem; }

/* el pedido de video: solo lo ven los más cercanos */
.deseos__pedido{
  position:relative;
  display:grid; gap:.7rem; justify-items:center;
  margin:0 0 1.5rem; padding:1.7rem 1.1rem 1.2rem;
  background:var(--papel);
  border:2px solid var(--acento);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.deseos__pedido[hidden],.deseos__previa[hidden],.deseos__botones[hidden],.deseos__forma[hidden]{ display:none; }
.deseos__pedido::before{
  content:"Solo para ti";
  position:absolute; top:0; left:50%; translate:-50% -50%;
  padding:.22rem .85rem; border-radius:999px;
  background:var(--acento); color:var(--papel);     /* acento contra papel va medido en cada tema (4.5:1 o más) */
  font-family:var(--f-texto); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
.deseos__pedido-titulo{ font-family:var(--f-display); font-weight:600; font-size:1.4rem; line-height:1.2; color:var(--tinta); }
.deseos__pedido-texto{ font-size:.96rem; line-height:1.5; color:var(--tinta-suave); }
.deseos__botones{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; width:100%; }
.deseos__botones .boton{ flex:1 1 11rem; }
.deseos__botones .boton:disabled,.deseos__forma .boton:disabled{ opacity:.6; cursor:default; }
.deseos__previa{ display:grid; gap:.8rem; width:100%; }
.deseos__previa video{ display:block; width:100%; max-height:62vh; border-radius:calc(var(--radio) / 1.6); background:#000; }
.deseos__nota{ font-size:.84rem; color:var(--tinta-suave); min-height:1.3em; text-align:center; }
.deseos__nota:empty{ min-height:0; }

/* escribir el mensaje */
.deseos__forma{
  display:grid; gap:.8rem;
  padding:1.1rem 1rem 1.2rem;
  text-align:left;
  background:var(--papel);
  border:1px dashed var(--marca-claro);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}
.deseos__forma .boton{ justify-self:center; min-width:14rem; }

/* las hojitas: cada mensaje pegado con su cinta, un poco chueco, como en un libro de firmas */
.deseos__lista{ display:grid; gap:1.5rem; margin-top:2.1rem; text-align:left; }
.deseo{
  position:relative;
  padding:1.5rem 1.15rem 1rem;
  background:var(--papel);
  border:1px solid color-mix(in srgb, var(--marca-claro) 40%, transparent);
  border-radius:calc(var(--radio) / 1.6);
  box-shadow:var(--sombra);
}
.deseo:nth-child(odd){ rotate:-.7deg; }
.deseo:nth-child(even){ rotate:.6deg; }
.deseo::before{
  content:""; position:absolute; top:-.6rem; left:50%; z-index:1;
  width:4.8rem; height:1.25rem; translate:-50% 0; rotate:-2deg;
  background:color-mix(in srgb, var(--marca-claro) 72%, transparent);
  box-shadow:0 1px 2px rgba(0,0,0,.14);
}
.deseo:nth-child(even)::before{ rotate:2.5deg; left:34%; }
.deseo__texto{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:1.14rem; line-height:1.45; color:var(--tinta);
  overflow-wrap:anywhere;
}
.deseo__texto::before{
  content:"“"; display:block;
  font-style:normal; font-size:2.8rem; line-height:.62; margin-bottom:.3rem;
  color:var(--acento);
}
.deseo__pie{ display:flex; align-items:center; gap:.6rem; margin-top:.9rem; }
.deseo__pie .post__inicial{ width:2.1rem; height:2.1rem; font-size:1rem; }
.deseo--video{ padding:.55rem .55rem .9rem; }
.deseo__video{
  display:block; width:100%; aspect-ratio:4 / 5;
  margin:0; padding:0; border:0; cursor:pointer;
  border-radius:calc(var(--radio) / 2.2); overflow:hidden;
}
.deseo__video img{ display:block; width:100%; height:100%; object-fit:cover; }
.deseo__video:focus-visible{ outline:3px solid var(--acento); outline-offset:2px; }
.deseo--video .deseo__pie{ padding:0 .5rem; }
.deseo--mio{ border-color:var(--acento); }

/* ══════════ LA GRABADORA (la arma nucleo/grabadora.js) ══════════
   Pantalla completa y negra, como la cámara del celular: lo único que se ve es la persona.
   Texto blanco sobre placas negras al 55%: se lee sobre cualquier fondo. */
.grabadora{
  position:fixed; inset:0; z-index:95;
  display:grid; grid-template-rows:auto 1fr auto auto;
  background:#0C0A09; color:#fff;
  font-family:var(--f-texto);
}
.grabadora__vista{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.grabadora__vista--espejo{ transform:scaleX(-1); }
.grabadora__barra{ position:absolute; z-index:1; left:0; right:0; top:0; height:5px; background:rgba(255,255,255,.22); }
.grabadora__barra u{ display:block; width:0; height:100%; background:#FF3B30; text-decoration:none; transition:width .2s linear; }
.grabadora__arriba{
  position:relative; z-index:1; grid-row:1; justify-self:center;
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:max(1rem, env(safe-area-inset-top)); padding:.35rem .9rem;
  border-radius:999px; background:rgba(0,0,0,.55);
  font-weight:700; font-size:.95rem; font-variant-numeric:tabular-nums;
}
.grabadora__punto{ width:.7rem; height:.7rem; border-radius:50%; background:#9A9A9A; }
.grabadora--grabando .grabadora__punto{ background:#FF3B30; animation:graba-late 1s steps(2) infinite; }
.grabadora--casi .grabadora__tiempo{ color:#FFD60A; }
.grabadora__cuenta{
  position:relative; z-index:1; grid-row:2; place-self:center;
  font-family:var(--f-display); font-weight:600; font-size:8rem; line-height:1;
  text-shadow:0 4px 28px rgba(0,0,0,.7);
}
.grabadora__cuenta:empty{ display:none; }
.grabadora__frase{
  position:relative; z-index:1; grid-row:3; justify-self:center;
  max-width:22rem; margin:0 1rem .9rem; padding:.5rem .9rem;
  border-radius:12px; background:rgba(0,0,0,.55);
  font-size:.95rem; line-height:1.35; text-align:center;
}
.grabadora__botones{
  position:relative; z-index:1; grid-row:4;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:1.2rem 1rem max(1.5rem, env(safe-area-inset-bottom));
  background:linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0));
}
.grabadora__lado{
  justify-self:center; min-height:44px; padding:.5rem 1rem;
  border:0; border-radius:999px; background:rgba(0,0,0,.55); color:#fff;
  font-family:inherit; font-weight:700; font-size:.92rem; cursor:pointer;
}
.grabadora__lado:first-child{ grid-column:1; }
.grabadora__lado:last-child{ grid-column:3; }
.grabadora__lado[hidden]{ display:none; }
.grabadora__boton{
  grid-column:2; position:relative;
  width:78px; height:78px; padding:0;
  border:4px solid #fff; border-radius:50%; background:transparent; cursor:pointer;
}
.grabadora__boton::after{
  content:""; position:absolute; inset:6px; border-radius:50%; background:#FF3B30;
  transition:inset .2s ease, border-radius .2s ease;
}
.grabadora--grabando .grabadora__boton::after{ inset:21px; border-radius:7px; }
.grabadora__boton:disabled{ opacity:.55; cursor:default; }
.grabadora__boton:focus-visible,.grabadora__lado:focus-visible{ outline:3px solid #FFD60A; outline-offset:3px; }
body.con-grabadora{ overflow:hidden; }
@keyframes graba-late{ 50%{ opacity:.25; } }

/* ══════════ VER UNA FOTO O UN VIDEO EN GRANDE ══════════ */
.visor{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:3.2rem 1rem 1.5rem;
  background:rgba(12,10,9,.93);
}
.visor[hidden]{ display:none; }
.visor__foto{ max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.visor__foto[hidden]{ display:none; }
video.visor__foto{ width:100%; height:100%; background:#000; }
.visor__cerrar{
  position:absolute; top:.7rem; right:.8rem;
  width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.14); color:#fff;
  font-size:1.8rem; line-height:1; cursor:pointer;
}
.visor__cerrar:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
body.con-visor{ overflow:hidden; }

@media (min-width:700px){
  .muro__lista{ grid-template-columns:1fr 1fr; align-items:start; }
  .deseos__lista{ grid-template-columns:1fr 1fr; align-items:start; gap:1.6rem 1.3rem; }
}
@media (prefers-reduced-motion:reduce){
  .post--nuevo{ animation:none; }
  .grabadora--grabando .grabadora__punto{ animation:none; }
}


/* ══════════ RASPA Y DESCUBRE (nucleo/detalles.js): la mesa llega tapada con una capa de oro ══════════ */
.saludo__mesa{ position:relative; }
.raspa--tapada{ min-width:13.5rem; min-height:2.9rem; }
.raspa__capa{
  position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px);
  border-radius:inherit; touch-action:none; cursor:pointer;
  box-shadow:0 6px 14px -8px rgba(60,40,0,.6);
  transition:opacity .45s ease, transform .45s ease;
}
.raspa__capa--fuera{ opacity:0; transform:scale(1.1); pointer-events:none; }
.raspa__capa:focus-visible{ outline:3px solid var(--acento); outline-offset:3px; }

/* el muro sigue en pantalla aunque un refresco falle: solo sale este aviso */
.muro__sinred{ margin:0 0 .9rem; padding:.55rem .9rem; border-radius:10px; background:rgba(0,0,0,.08); font-size:.86rem; line-height:1.4; text-align:center; }