/* ==========================================================================
   EL MURO, COMO PÁGINA APARTE — el acomodo "de aplicación"
   (barra arriba con el evento y quién eres, pestañas, lo que se publica al
   centro y un botón grande para subir). Los colores y las letras son los del
   tema del evento: esta hoja solo acomoda.
   ========================================================================== */
body.app{ min-height:100dvh; padding-bottom:calc(5.6rem + env(safe-area-inset-bottom)); }
/* aquí todo se ve desde que carga: nada espera a "aparecer" con el scroll */
body.app .reveal{ opacity:1 !important; transform:none !important; }

/* ── la barra de arriba ── */
.app__barra{
  position:sticky; top:0; z-index:30;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:.8rem;
  padding:calc(.7rem + env(safe-area-inset-top)) 1rem .7rem;
  background:var(--marca); color:#fff;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.55);
}
.app__evento{ min-width:0; text-align:left; }
.app__evento small{ display:block; font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; opacity:.85; }
.app__evento b{ display:block; font-family:var(--f-display); font-weight:600; font-size:1.25rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app__yo{
  display:flex; align-items:center; gap:.5rem; max-width:46vw;
  padding:.25rem .7rem .25rem .25rem; border:1px solid rgba(255,255,255,.45); border-radius:999px;
  background:rgba(255,255,255,.12); color:inherit; font:inherit; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.app__avatar{
  flex:none; width:2rem; height:2rem; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--marca); font-family:var(--f-display); font-weight:700; font-size:1.05rem;
}
.app__quien{ font-size:.78rem; line-height:1.15; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── las pestañas ── */
.app__pestanas{
  position:sticky; top:calc(3.55rem + env(safe-area-inset-top)); z-index:29;
  display:flex; background:var(--papel); border-bottom:1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
}
.app__pestanas button{
  flex:1; padding:.85rem .4rem .75rem; border:0; background:none; cursor:pointer;
  font-family:var(--f-texto); font-size:.9rem; font-weight:600; color:var(--tinta-suave);
  border-bottom:3px solid transparent;
  -webkit-tap-highlight-color:transparent;
}
.app__pestanas button[aria-selected="true"]{ color:var(--acento); border-bottom-color:var(--acento); }

/* ── la puerta: "¿quién eres?" ── */
.app__puerta{
  margin:1rem auto 0; padding:1.3rem 1.1rem 1.2rem; width:min(100% - 2rem, 560px);
  background:var(--papel-hondo); border:1px solid color-mix(in srgb, var(--tinta) 12%, transparent); border-radius:var(--radio);
  text-align:center; box-shadow:var(--sombra);
}
.app__puerta h2{ margin:0 0 .25rem; font-family:var(--f-display); font-size:1.45rem; color:var(--marca); }
.app__puerta p{ margin:0 0 .8rem; font-size:.92rem; color:var(--tinta-suave); }
.app__puerta .buscar__entrada{ width:100%; }
.app__puerta .buscar__lista{ margin-top:.7rem; }

/* ── lo que se publica ── */
.app__cuerpo{ width:min(100%, 640px); margin:0 auto; }
body.app .seccion{ padding:1.2rem 1rem 2rem; max-width:none; }
body.app .seccion > .etiqueta, body.app .seccion > .titulo{ display:none; }      /* el título ya está en la barra */
body.app .muro__intro, body.app .deseos__intro{ font-size:.92rem; margin-bottom:1rem; }
/* la cajita de "comparte algo", como la de las redes */
body.app .muro__subir{
  grid-template-columns:auto 1fr; justify-items:stretch; align-items:center; gap:.3rem .8rem;
  padding:.8rem; background:var(--papel-hondo); border-radius:var(--radio);
  border:1px solid color-mix(in srgb, var(--tinta) 10%, transparent);
}
body.app .muro__subir::before{
  content:attr(data-inicial); grid-row:1 / span 2;
  width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center;
  background:var(--marca); color:#fff; font-family:var(--f-display); font-weight:700; font-size:1.2rem;
}
body.app .muro__subir .boton{ min-width:0; width:100%; }
body.app .muro__cupo{ grid-column:2; margin:0; font-size:.78rem; text-align:left; }
body.app .muro__lista{ grid-template-columns:1fr; margin-top:1.2rem; }

/* ── la barra de abajo: el botón de publicar y el regreso a la invitación ── */
.app__pie{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:.5rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--papel) 92%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
}
.app__pie a{ font-size:.78rem; font-weight:600; color:var(--tinta-suave); text-decoration:none; }
.app__pie a:last-child{ text-align:right; }
.app__mas{
  width:3.6rem; height:3.6rem; margin-top:-1.6rem; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--acento); color:#fff;
  box-shadow:0 0 0 5px var(--papel), 0 12px 22px -10px rgba(0,0,0,.6);
  -webkit-tap-highlight-color:transparent; transition:transform .15s ease;
}
.app__mas:active{ transform:scale(.94); }
.app__mas:disabled{ opacity:.45; cursor:default; }
.app__mas svg{ width:1.7rem; height:1.7rem; }
body[data-viendo="deseos"] .app__mas{ visibility:hidden; }

@media (min-width:700px){
  .app__barra{ padding-left:max(1rem, calc(50vw - 320px)); padding-right:max(1rem, calc(50vw - 320px)); }
  .app__yo{ max-width:260px; }
}
@media print{ .app__barra,.app__pestanas,.app__pie{ display:none; } }


/* ══════════════════════════════════════════════════════════════════════
   LA TARJETA DE MESA (el código QR para imprimir) — /<evento>/muro/mesa/
   En pantalla se ve la tarjeta y sus botones; al imprimir, solo la tarjeta.
   ══════════════════════════════════════════════════════════════════════ */
body.hoja{ min-height:100dvh; display:grid; place-items:center; gap:1.2rem; padding:1.4rem 1rem 2.4rem; }
.mesa{
  width:min(100%, 105mm); min-height:148mm; padding:9mm 8mm 7mm;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3.5mm;
  text-align:center; background:var(--papel);
  border:1px solid var(--marca-claro); outline:1px solid var(--hilo, var(--marca-claro)); outline-offset:-2.2mm;
  box-shadow:var(--sombra-alta);
}
.mesa .etiqueta{ margin:0; }
.mesa__nombre{ margin:0; font-family:var(--f-display); font-weight:600; font-size:1.9rem; line-height:1.1; color:var(--marca); }
.mesa__qr{ padding:2.5mm; background:#fff; border-radius:3mm; box-shadow:0 0 0 1px var(--marca-claro); }
.mesa__qr canvas{ display:block; width:52mm; height:52mm; image-rendering:pixelated; }
.mesa__pasos{ margin:0; padding:0; list-style:none; counter-reset:paso; display:grid; gap:1.4mm; font-size:.86rem; color:var(--tinta); }
.mesa__pasos li{ counter-increment:paso; }
.mesa__pasos li::before{ content:counter(paso) " · "; color:var(--acento); font-weight:700; }
.mesa__liga{ margin:0; font-size:.62rem; letter-spacing:.04em; color:var(--tinta-suave); word-break:break-all; }
.hoja__botones{ display:grid; gap:.6rem; justify-items:center; width:min(100%, 360px); text-align:center; }
.hoja__botones .boton{ width:100%; }
.hoja__nota{ margin:0; font-size:.82rem; color:var(--tinta-suave); }
.hoja__volver{ font-size:.82rem; font-weight:600; color:var(--tinta-suave); }
@media print{
  @page{ size:A6; margin:0; }
  body.hoja{ display:block; padding:0; background:#fff !important; }
  .hoja__botones{ display:none; }
  .mesa{ width:105mm; height:148mm; min-height:0; box-shadow:none; }
}