/* El Traje — base: colores, tipografía, marco, escenario, botones, hojas (sheets), avisos, visor de fotos y versión
   sin WebGL. Todo bajo html.traje (prototipo aislado). La app es contenedor de tamaño: por dentro se mide en cqw/cqh y
   con @container (en computadora, contra el marco de teléfono; nunca contra la ventana).
   El Vestidor del Héroe (escaparate de juguetería): crema y durazno con un toque del color del héroe (html[data-hero]),
   coral para la acción principal; texto azul tinta sobre crema (contraste ≥ 4.5:1). */
.traje {
  --ink: #2F3B57; --ink-2: #56617C; --cream: #FFFAF3; --cream-2: #F7EDE3; --line: #EBDDD0;
  --accent: #E8506F; --accent-2: #BF3A57; --sky: #4C9BEF; --sky-2: #2F79C8; --sun: #FFC94D; --soft: #FFE8EC; --on-accent: #FFFFFF;
  /* color del héroe (niña por omisión; main.js pone data-hero) */
  --hero: #E8338A; --hero-soft: #FF9CC9; --hero-ink: #B01F68; --hero-shadow: rgba(232, 51, 138, .35); --hero-tint: #F4B7C8;
  --shadow: 0 12px 34px rgba(47, 59, 87, .22);
  --radius: 24px;
  --font-d: "Lilita One", "Nunito", system-ui, sans-serif;
  --font-b: "Nunito", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.traje[data-hero="nino"] { --hero: #2F63E0; --hero-soft: #8DB1FF; --hero-ink: #1F4AB8; --hero-shadow: rgba(47, 99, 224, .35); --hero-tint: #B9CBF4; }
.traje *, .traje *::before, .traje *::after { box-sizing: border-box; }
.traje body { height: 100%; overflow: hidden; color: var(--ink); font: 600 16px/1.45 var(--font-b); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
.traje button { font: inherit; color: inherit; }
.traje :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.traje .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.traje .noscript { position: fixed; inset: auto 16px 16px; padding: 16px; border-radius: 16px; background: var(--cream); color: var(--ink); }

/* ---------- la app: pantalla completa en el teléfono; marco de teléfono (≤ 430 px) centrado en computadora ---------- */
/* (alrededor del marco, en computadora: el mismo escaparate difuminado — crema → durazno con el tinte del héroe y luces
   de bokeh) */
.traje .room { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(50% 45% at 50% 42%, #FFF6EC, transparent 75%), linear-gradient(180deg, color-mix(in srgb, #F7D2BE 58%, var(--hero-tint)) 0%, #F8DCCB 55%, #FFF1E4 100%); }
.traje .room::before {
  content: ""; position: absolute; inset: -40px; filter: blur(14px); opacity: .75;
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, .8) 0 22px, transparent 40px), radial-gradient(circle at 24% 12%, rgba(255, 214, 120, .55) 0 30px, transparent 52px), radial-gradient(circle at 78% 16%, rgba(255, 255, 255, .75) 0 26px, transparent 46px), radial-gradient(circle at 90% 30%, color-mix(in srgb, var(--hero) 30%, transparent) 0 34px, transparent 60px),
    radial-gradient(circle at 8% 60%, color-mix(in srgb, var(--hero) 22%, transparent) 0 30px, transparent 56px), radial-gradient(circle at 92% 66%, rgba(255, 214, 120, .45) 0 26px, transparent 48px);
}
.traje .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; container-type: size; transition: opacity .5s ease; }
@media (min-width: 560px) and (min-height: 560px) {
  .traje .app { inset: auto; left: 50%; top: 50%; width: min(430px, 100vw - 32px); height: min(932px, 100dvh - 40px); transform: translate(-50%, -50%);
    border-radius: 36px; box-shadow: 0 0 0 10px #FFF8F0, 0 0 0 12px #F2C3B0, 0 30px 80px rgba(80, 50, 60, .3); }
}
.traje.is-showcase .room { display: none; }
.traje.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.traje .stage { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(70% 55% at 50% 52%, #FFF6EC, #F9E0CF 70%), linear-gradient(180deg, color-mix(in srgb, #F7D2BE 58%, var(--hero-tint)), #FFF1E4); }
.traje .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
/* viñeta cálida del escaparate (capa fija sobre el lienzo: no se repinta) */
.traje .stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 75% at 50% 52%, transparent 58%, rgba(140, 70, 52, .16) 100%); }
.traje.is-fallback .stage::after { display: none; }
.traje .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.traje.is-ready .poster { animation: tj-fade-out .5s ease .2s forwards; }
@keyframes tj-fade-out { to { opacity: 0; visibility: hidden; } }
.traje .ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.traje .ui > * { pointer-events: auto; }

/* (sólo para generar la imagen OG: ?showcase=1&still=1&og=1) */
.traje .og-title { position: absolute; left: 50%; top: 24px; z-index: 4; padding: 14px 34px 16px; border-radius: 30px; background: rgba(255, 250, 243, .95); color: var(--accent); text-align: center; box-shadow: 0 12px 30px rgba(47, 59, 87, .25); transform: translateX(-50%); pointer-events: none; }
.traje .og-title p { margin: 0; font: 400 34px/1 var(--font-d); color: var(--ink); }
.traje .og-title strong { display: block; margin-top: 4px; font: 400 64px/1 var(--font-d); font-weight: 400; white-space: nowrap; }

/* ---------- botones (de plástico: canto abajo y se hunden) ---------- */
.traje .gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 2px solid var(--line); border-radius: 999px; background: var(--cream); color: var(--ink); font: 400 17px/1.1 var(--font-d); letter-spacing: .01em; text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 rgba(47, 59, 87, .14); transition: transform .12s ease, box-shadow .12s ease, background .2s; }
.traje .gbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(47, 59, 87, .14); }
.traje .gbtn.is-primary { border-color: transparent; background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 0 var(--accent-2), 0 8px 18px rgba(191, 58, 87, .25); }
.traje .gbtn.is-primary:active { box-shadow: 0 1px 0 var(--accent-2); }
.traje .gbtn.is-soft { background: rgba(255, 250, 243, .85); }
.traje .gbtn.is-big { min-height: 54px; font-size: 19px; padding: 0 24px; }
.traje .gbtn.is-small { min-height: 44px; font-size: 15px; padding: 0 14px; }
.traje .gbtn[disabled] { opacity: .5; cursor: default; }
.traje .round-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 250, 243, .94); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 rgba(47, 59, 87, .12), 0 6px 14px rgba(47, 59, 87, .16); }
.traje .round-btn[disabled] { opacity: .4; cursor: default; }

/* ---------- hojas (confirmación, información) ---------- */
.traje .sheet { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(47, 59, 87, 0); pointer-events: auto; transition: background .35s ease; }
.traje .sheet.is-on { background: rgba(47, 59, 87, .22); }
.traje .sheet.is-rsvp.is-on { background: rgba(47, 59, 87, 0); } /* (los casilleros se ven arriba) */
.traje .sheet-panel { display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(78cqh, 720px); border-radius: var(--radius) var(--radius) 0 0; background: var(--cream); box-shadow: var(--shadow); transform: translateY(105%); transition: transform .38s cubic-bezier(.2, .9, .25, 1.05); overflow: hidden; padding-bottom: var(--safe-b); }
.traje .sheet.is-on .sheet-panel { transform: none; }
.traje .sheet.is-rsvp .sheet-panel { max-height: min(66cqh, 640px); }
.traje .sheet.is-details .sheet-panel { max-height: 92cqh; }
.traje .sh-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 8px 20px; border-bottom: 1px solid var(--line); }
.traje .sh-head > div:first-child, .traje .sh-titles { flex: 1; min-width: 0; }
.traje .sh-head.is-sticky { flex-wrap: wrap; }
.traje .sh-head .chips { flex-basis: 100%; }
.traje .kick { margin: 0; font: 400 21px/1.2 var(--font-d); color: var(--ink); }
.traje .sub { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.traje .sh-titles h2 { margin: 2px 0 0; font: 400 25px/1.15 var(--font-d); color: var(--accent); }
.traje .sh-body, .traje .rv-body { flex: 1; overflow: auto; padding: 12px 20px 16px; overscroll-behavior: contain; }
.traje .sh-bar { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 16px 14px; border-top: 1px solid var(--line); background: var(--cream); }
.traje .sh-bar .dead { margin: 0; text-align: center; font-size: 14px; font-weight: 800; color: var(--ink-2); }
.traje .c-close { flex: none; width: 44px; height: 44px; box-shadow: none; background: var(--cream-2); }
.rm.traje .sheet-panel { transition: opacity .2s ease; transform: none; opacity: 0; }
.rm.traje .sheet.is-on .sheet-panel { opacity: 1; }

/* ---------- avisos ---------- */
.traje .toast { position: absolute; left: 50%; top: calc(var(--safe-t) + 26cqh); z-index: 40; max-width: min(92cqw, 440px); padding: 12px 18px; border-radius: 18px; background: var(--cream); color: var(--ink); font: 400 17px/1.3 var(--font-d); text-align: center; box-shadow: var(--shadow); transform: translate(-50%, -12px); opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.traje .toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.traje .notice { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(47, 59, 87, .45); opacity: 0; transition: opacity .25s ease; pointer-events: auto; }
.traje .notice.is-on { opacity: 1; }
.traje .notice-card { width: min(380px, 100%); padding: 22px 20px 18px; border-radius: var(--radius); background: var(--cream); text-align: center; box-shadow: var(--shadow); }
.traje .notice-card h2 { margin: 8px 0 6px; font: 400 23px/1.2 var(--font-d); }
.traje .notice-card p { margin: 0 0 10px; color: var(--ink-2); }
.traje .notice-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #DDF5E3; color: #1E7A43; }
.traje .notice-msg { margin: 0 0 14px; padding: 12px; border-radius: 14px; background: #fff; text-align: left; white-space: pre-wrap; font: 700 14px/1.45 var(--font-b); color: var(--ink); max-height: 30cqh; overflow: auto; }
.traje .notice-card .gbtn { width: 100%; }

/* ---------- visor de fotos ---------- */
.traje .viewer { position: absolute; inset: 0; z-index: 45; background: rgba(36, 42, 62, .95); opacity: 0; transition: opacity .25s ease; pointer-events: auto; transform: translateY(var(--drag, 0)); }
.traje .viewer.is-on { opacity: 1; }
.traje .v-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.traje .v-track::-webkit-scrollbar { display: none; }
.traje .v-slide { flex: 0 0 100%; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 64px 16px 72px; scroll-snap-align: center; }
.traje .v-frame { position: relative; max-width: 100%; padding: 10px; border-radius: 26px; background: var(--soft); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.traje .v-frame img { display: block; max-width: calc(100cqw - 52px); max-height: calc(100cqh - 200px); border-radius: 18px; object-fit: contain; }
.traje .v-slide figcaption { color: var(--cream); font: 400 19px/1.2 var(--font-d); }
.traje .v-count { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 22px); margin: 0; transform: translateX(-50%); color: var(--cream); font-weight: 800; }
.traje .v-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.traje .v-prev { left: 12px; } .traje .v-next { right: 12px; }
.traje .v-close { position: absolute; top: calc(var(--safe-t) + 12px); right: 12px; }

/* ---------- sin WebGL: versión ilustrada ---------- */
.traje .fb { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.traje .fb-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.traje .fb-card { position: relative; max-height: 74cqh; overflow: auto; margin: 0; padding: 18px 20px calc(var(--safe-b) + 16px); border-radius: var(--radius) var(--radius) 0 0; background: var(--cream); box-shadow: var(--shadow); }
.traje .fb-kick { margin: 0; font: 800 15px/1.3 var(--font-b); color: var(--ink-2); }
.traje .fb-title { margin: 2px 0 4px; font: 400 36px/1.05 var(--font-d); color: var(--accent); }
.traje .fb-sub { margin: 0 0 8px; font-weight: 700; }
.traje .fb-facts { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.traje .fb-facts li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; }
.traje .fb-facts li > span:first-child { flex: none; color: var(--sky-2); }
.traje .fb-count { margin: 10px 0 6px; font-weight: 800; color: var(--ink-2); }
.traje .fb-mine { display: flex; align-items: center; gap: 10px; }
.traje .fb-mine p { margin: 0; font-weight: 700; }
.traje .fb-actions { display: grid; gap: 8px; margin-top: 10px; }