:root {
  --accent: #b08d57;
  --bg: #faf7f2;
  --surface: #ffffff;
  --surface-2: #f3eee6;
  --ink: #1d1a17;
  --ink-2: #5d564e;
  --ink-3: #8f877d;
  --line: #e6dfd4;
  --ok: #2f855a;
  --bad: #c53030;
  --radius: 16px;
  --shadow: 0 1px 2px rgb(29 26 23 / 6%), 0 8px 24px rgb(29 26 23 / 6%);
  --on-accent: #ffffff;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --title-style: normal;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-ink: color-mix(in srgb, var(--accent) 75%, #000);
  color-scheme: light;
}

/* Lo oculto se oculta siempre (si no, .chips/.row con display propio seguían visibles). */
[hidden] { display: none !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14120f;
    --surface: #1e1b17;
    --surface-2: #29251f;
    --ink: #f4efe8;
    --ink-2: #c4bbb0;
    --ink-3: #8f877d;
    --line: #36302a;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
    --accent-ink: color-mix(in srgb, var(--accent) 70%, #fff);
    color-scheme: dark;
  }
}
:root[data-theme='dark'], .scr[data-mode='dark'] {
  --bg: #14120f;
  --surface: #1e1b17;
  --surface-2: #29251f;
  --ink: #f4efe8;
  --ink-2: #c4bbb0;
  --ink-3: #8f877d;
  --line: #36302a;
  --accent-ink: color-mix(in srgb, var(--accent) 70%, #fff);
  color-scheme: dark;
}

/* Vista previa del diseño: el celular de muestra usa el modo elegido. */
.scr[data-mode='dark'] { color: var(--ink); }
.scr[data-mode='light'] { --bg: #faf7f2; --surface: #fff; --surface-2: #f3eee6; --ink: #1d1a17; --ink-2: #5d564e; --line: #e6dfd4; color: var(--ink); color-scheme: light; }

/* Tipografía elegida por el anfitrión */
:root[data-font='elegant'] { --serif: 'Cormorant Garamond', Georgia, serif; --title-style: italic; }
:root[data-font='modern'] { --serif: 'Space Grotesk', 'Inter', sans-serif; }
:root[data-font='playful'] { --serif: 'Fredoka', 'Inter', sans-serif; --sans: 'Fredoka', 'Inter', sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, video { max-width: 100%; display: block; }
a { color: var(--accent-ink); }
h1, h2, h3 { font-family: var(--serif); font-style: var(--title-style); font-weight: 700; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); font-size: .875rem; }
.boot { display: grid; place-items: center; min-height: 100vh; font: 700 1.4rem var(--serif); letter-spacing: .2em; color: var(--ink-3); }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 460px; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }

/* --- Botones y formularios --- */
.btn {
  appearance: none; border: 0; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font: 600 1rem var(--sans);
  transition: transform .08s, filter .15s, opacity .15s;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-ghost { background: var(--surface-2); color: var(--ink); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-danger { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-whatsapp { background: #1fa855; color: #fff; }
.btn-small { min-height: 36px; padding: 0 14px; font-size: .875rem; }
.btn-block { width: 100%; }
.btn-ghost-light { background: rgb(255 255 255 / 14%); color: #fff; }

label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: 6px; color: var(--ink-2); }
input, select, textarea {
  width: 100%; font: 1rem var(--sans); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 14px; min-height: 48px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
textarea { resize: vertical; min-height: 96px; }
input[type='color'] { padding: 4px; width: 64px; }
input[type='checkbox'] { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); }
.check { display: flex; gap: 10px; align-items: center; font-weight: 500; color: var(--ink); }
.field + .field { margin-top: 14px; }
.error { color: var(--bad); font-size: .9rem; }
.error:empty { display: none; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card-flat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: .8rem; font-weight: 600; }
.pill-accent { background: var(--accent-soft); color: var(--accent-ink); }
.pill-ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.empty { text-align: center; padding: 40px 16px; color: var(--ink-3); }
.empty .big { font-size: 2.4rem; display: block; margin-bottom: 8px; }

/* --- Toasts --- */
#toasts { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 220; display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); font-weight: 500; animation: rise .25s ease; transition: opacity .4s, transform .4s; }
.toast-error { background: var(--bad); color: #fff; }
.toast-ok { background: var(--ok); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* --- Barra superior --- */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.brand { white-space: nowrap; font: 700 1.05rem var(--serif); letter-spacing: .12em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.brand img { width: 26px; height: 26px; }

/* --- Landing --- */
.hero { padding-top: 56px; padding-bottom: 40px; display: grid; gap: 32px; }
@media (min-width: 860px) { .hero { grid-template-columns: 1.1fr .9fr; align-items: center; padding-top: 80px; padding-bottom: 56px; } }
.hero h1 em { font-style: italic; color: var(--accent-ink); }
.hero .lead { font-size: 1.15rem; color: var(--ink-2); max-width: 34em; }
.phone { width: min(300px, 80vw); margin: 0 auto; aspect-ratio: 9 / 18; border-radius: 40px; background: var(--ink); padding: 12px; box-shadow: 0 30px 60px rgb(29 26 23 / 25%); }
.phone-screen { height: 100%; border-radius: 30px; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; }
.phone-head { padding: 22px 16px 12px; text-align: center; background: var(--accent); color: var(--on-accent); }
.phone-head b { font-family: var(--serif); font-size: 1.15rem; display: block; }
.phone-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; align-content: start; }
.phone-grid div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 8px; text-align: center; font-size: .8rem; font-weight: 600; }
.phone-grid div span { display: block; font-size: 1.5rem; }
.code-join { display: flex; gap: 8px; max-width: 360px; }
.code-join input { text-transform: uppercase; letter-spacing: .2em; font-weight: 700; }
.section { padding: 48px 0; border-top: 1px solid var(--line); }
.features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.feature { padding: 18px; }
.feature .ico { font-size: 1.6rem; }
.feature h3 { margin: 8px 0 4px; }
.types { display: flex; flex-wrap: wrap; gap: 8px; }
.types span { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 500; }
.steps { counter-reset: s; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; margin-bottom: 10px; }
.footer { padding: 32px 0 48px; color: var(--ink-3); font-size: .875rem; }

/* --- Auth --- */
.auth { min-height: calc(100vh - 61px); display: grid; place-items: center; padding: 32px 16px; }
.auth .card { width: 100%; max-width: 420px; }

/* --- Panel --- */
.page { padding-top: 28px; padding-bottom: 80px; }
.event-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.event-card { display: block; text-decoration: none; color: inherit; border-top: 5px solid var(--c, var(--accent)); transition: transform .12s; }
.event-card:hover { transform: translateY(-2px); }
.event-card .emoji { font-size: 1.8rem; }
.type-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.type-opt { border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 12px 8px; text-align: center; cursor: pointer; font: 500 .9rem var(--sans); color: var(--ink); }
.type-opt span { display: block; font-size: 1.6rem; }
.type-opt[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }

.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 20px 0; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; appearance: none; border: 0; background: none; padding: 12px 14px; font: 600 .95rem var(--sans); color: var(--ink-3); cursor: pointer; border-bottom: 2.5px solid transparent; }
.tab[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--accent); }

.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stat b { display: block; font: 700 2rem var(--serif); }
.stat span { color: var(--ink-2); font-size: .875rem; }
.overview { display: grid; gap: 16px; }
.overview > * { min-width: 0; }
@media (min-width: 860px) { .overview { grid-template-columns: 320px 1fr; } }
.qr-box { max-width: 280px; margin: 0 auto; width: 100%; }
.qr-box svg { width: 100%; height: auto; border-radius: 12px; background: #fff; }
.code-big { font: 700 1.6rem var(--sans); letter-spacing: .25em; text-align: center; }
.links { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.link-row { flex-wrap: wrap; display: flex; gap: 8px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.link-row .grow { min-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.list { display: grid; gap: 10px; }
.item { display: flex; gap: 12px; align-items: flex-start; }
.hidden-item { opacity: .45; }

/* --- Juegos --- */
.poll-card h3 { font-family: var(--sans); font-weight: 700; font-size: 1.1rem; }
.option { position: relative; display: block; width: 100%; text-align: left; overflow: hidden; border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: 13px 14px; margin-top: 8px; font: 500 1rem var(--sans); color: var(--ink); cursor: pointer; }
.option:disabled { cursor: default; }
.option .fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); transition: width .5s ease; z-index: 0; }
.option .lbl { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px; }
.option.mine { border-color: var(--accent); }
.option.correct { border-color: var(--ok); }
.option.correct .fill { background: color-mix(in srgb, var(--ok) 20%, transparent); }
.option.wrong { border-color: var(--bad); }
.opt-edit { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.opt-edit input[type='radio'] { width: 22px; height: 22px; min-height: 0; accent-color: var(--ok); }

/* --- Ranking --- */
.rank { display: grid; gap: 8px; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.rank-row .pos { width: 28px; font: 700 1.1rem var(--serif); color: var(--ink-3); text-align: center; }
.rank-row.top .pos { color: var(--accent-ink); }
.rank-row.me { border-color: var(--accent); background: var(--accent-soft); }
.rank-row .pts { font-weight: 700; }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: .85rem; }

/* --- Galería --- */
.gallery { display: grid; gap: 4px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; } }
.tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--surface-2); cursor: pointer; border: 0; padding: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile .badge { position: absolute; top: 6px; right: 6px; background: rgb(0 0 0 / 55%); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: .75rem; }
.tile .who { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; background: linear-gradient(transparent, rgb(0 0 0 / 55%)); color: #fff; font-size: .72rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.new { animation: pop .5s ease; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.tile-actions { position: absolute; left: 6px; top: 6px; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgb(0 0 0 / 92%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 12px; }
.lightbox img, .lightbox video { max-height: calc(100vh - 120px); max-width: 100%; border-radius: 8px; }
.lightbox-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / 14%); color: #fff; font-size: 1.2rem; cursor: pointer; }
.lightbox-meta { display: flex; gap: 12px; align-items: center; color: #fff; flex-wrap: wrap; justify-content: center; }

/* --- Invitado --- */
.guest { min-height: 100vh; padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
.guest-head { position: relative; background: var(--accent); color: var(--on-accent); padding: 18px 56px 16px; text-align: center; }
.guest-head.has-cover { color: #fff; padding: 72px 56px 18px; background: linear-gradient(rgb(0 0 0 / 15%), rgb(0 0 0 / 62%)), var(--cover) center / cover; text-shadow: 0 1px 8px rgb(0 0 0 / 40%); }
.guest-head .menu-btn { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 18%); color: inherit; font-size: 1.1rem; cursor: pointer; }
.guest-head h1 { font-size: 1.5rem; margin: 0; }
.guest-head .sub { opacity: .9; font-size: .9rem; }
.guest-head .me { margin-top: 8px; display: inline-flex; gap: 8px; align-items: center; background: rgb(255 255 255 / 18%); padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.guest-body { padding: 16px; max-width: 640px; margin: 0 auto; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav button { flex: 1; appearance: none; border: 0; background: none; padding: 8px 2px 10px; font: 600 .7rem var(--sans); color: var(--ink-3); cursor: pointer; position: relative; }
.bottom-nav button span { display: block; font-size: 1.35rem; line-height: 1.3; filter: grayscale(.6); }
.bottom-nav button[aria-selected='true'] { color: var(--accent-ink); }
.bottom-nav button[aria-selected='true'] span { filter: none; }
.bottom-nav .dot { position: absolute; top: 6px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: var(--bad); }

.join { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(120% 60% at 50% 0%, var(--accent-soft), transparent 70%), var(--bg); }
.join .card { width: 100%; max-width: 420px; text-align: center; }
.join .emoji { font-size: 3rem; }
/* Idioma: bandera arriba a la derecha de la tarjeta de entrada */
.join-lang { display: flex; justify-content: flex-end; margin: -8px -8px -18px 0; }
.lang-btn { font-size: 1.05rem; line-height: 1; padding-inline: 10px; }
.join form { text-align: left; }

.uploader { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
.uploader .btn { min-height: 64px; border-radius: 16px; font-size: 1rem; }
.progress { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.progress div { height: 100%; background: var(--accent); width: 0; transition: width .2s; }
.upload-row { display: flex; gap: 10px; align-items: center; font-size: .875rem; }
.upload-row .grow .progress { margin-top: 4px; }

.msg { padding: 14px 16px; }
.msg .who { font-weight: 700; }
.msg audio, .msg video { width: 100%; margin-top: 8px; border-radius: 10px; }
.recorder { display: flex; gap: 10px; align-items: center; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bad); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

.song { display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.song .votes { min-width: 58px; }

/* --- Pantalla gigante --- */
.screen { position: fixed; inset: 0; background: #0d0b09; color: #fff; display: grid; grid-template-columns: 1fr 360px; grid-template-rows: 1fr auto; overflow: hidden; font-size: 1.1rem; }
.screen.no-side { grid-template-columns: 1fr; }
.screen-stage { position: relative; overflow: hidden; display: grid; place-items: center; }
.screen-stage .slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 1.2s ease; }
.screen-stage .slide.on { opacity: 1; }
.screen-stage .slide .bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(40px) brightness(.4); }
.screen-stage .slide img { position: relative; max-width: 92%; max-height: 88%; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px rgb(0 0 0 / 60%); }
.screen-stage .credit { position: absolute; right: 32px; bottom: 28px; background: rgb(0 0 0 / 50%); padding: 8px 16px; border-radius: 999px; font-weight: 600; z-index: 2; }
.screen-title { position: absolute; top: 28px; left: 32px; z-index: 3; text-shadow: 0 2px 12px rgb(0 0 0 / 60%); }
.screen-title h1 { font-size: 2.6rem; margin: 0; }
.screen-side { background: #171410; padding: 28px 24px; display: flex; flex-direction: column; gap: 22px; overflow: hidden; }
.screen-side h3 { font-family: var(--sans); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #a99f92; margin-bottom: 10px; }
.screen-rank .r { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #2a251f; font-size: 1.05rem; }
.screen-rank .r b { color: var(--accent); }
.screen-qr { margin-top: auto; display: flex; gap: 14px; align-items: center; background: #fff; color: #111; padding: 12px; border-radius: 14px; }
.screen-qr svg { width: 110px; height: 110px; flex: none; }
.screen-qr b { font-size: 1.3rem; letter-spacing: .15em; display: block; }
.screen-ticker { grid-column: 1 / -1; background: var(--accent); color: var(--on-accent); padding: 14px 0; overflow: hidden; white-space: nowrap; font-weight: 600; }
.screen-ticker .track { display: inline-block; padding-left: 100%; animation: ticker linear infinite; }
.screen-ticker .track span { margin-right: 64px; }
@keyframes ticker { to { transform: translateX(-100%); } }
.screen-empty { text-align: center; color: #a99f92; }
.screen-empty h1 { color: #fff; font-size: 3.4rem; }
.screen-overlay { position: absolute; inset: 0; z-index: 10; background: rgb(13 11 9 / 92%); display: grid; place-items: center; padding: 48px; animation: rise .4s ease; }
.screen-overlay .box { width: min(1000px, 100%); }
.screen-overlay h2 { font-size: 3rem; text-align: center; margin-bottom: 32px; }
.screen-overlay .option { background: #1e1a15; border-color: #3a332b; color: #fff; font-size: 1.6rem; padding: 18px 24px; }
.screen-overlay .option .fill { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.screen-overlay .option.correct { border-color: #48bb78; }
.screen-overlay .option.correct .fill { background: rgb(72 187 120 / 40%); }
.screen-overlay .count { text-align: center; color: #a99f92; margin-top: 20px; font-size: 1.3rem; }
.screen-toast { position: absolute; right: 24px; top: 24px; z-index: 11; background: rgb(0 0 0 / 70%); padding: 12px 18px; border-radius: 12px; animation: rise .3s; }
.screen-btn { position: absolute; right: 16px; bottom: 16px; z-index: 20; opacity: 0; transition: opacity .3s; }
.screen:hover .screen-btn { opacity: 1; }
@media (max-width: 900px) { .screen { grid-template-columns: 1fr; } .screen-side { display: none; } }

/* --- QR imprimibles --- */
.qr-sheet { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.qr-card { border: 1.5px dashed var(--line); border-radius: 16px; padding: 18px; text-align: center; background: #fff; color: #1d1a17; break-inside: avoid; }
.qr-card svg { width: 170px; height: 170px; margin: 8px auto; }
.qr-card .t { font: 700 1.5rem var(--serif); }
.qr-card .ev { font-family: var(--serif); color: #5d564e; }
.qr-card .cta { font-weight: 600; margin-top: 4px; }
.qr-card .code { letter-spacing: .2em; font-size: .8rem; color: #8f877d; }
@media print {
  .no-print, .topbar { display: none !important; }
  body { background: #fff; }
  .qr-card { border-color: #ccc; }
  .page { padding-top: 0; padding-bottom: 0; }
}

/* --- Álbum --- */
.album-hero { padding: 56px 16px 28px; text-align: center; background: radial-gradient(100% 80% at 50% 0%, var(--accent-soft), transparent 70%); }
.album-day { margin: 28px 0 10px; }
.album-day::first-letter { text-transform: uppercase; }
.album-msgs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.album-msgs .msg { font-family: var(--serif); font-size: 1.05rem; }
.album-msgs .msg .who { font-family: var(--sans); font-size: .85rem; color: var(--ink-2); margin-top: 8px; font-weight: 600; }
.podium { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Navegación del panel --- */
.panel-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.panel-head .cover-thumb { width: 64px; height: 64px; border-radius: 14px; background: var(--accent-soft) center / cover; flex: none; display: grid; place-items: center; font-size: 1.8rem; }
.tabs-sticky { position: sticky; top: 60px; z-index: 15; background: var(--bg); }
.tab .count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: .75rem; line-height: 20px; }
.tab .live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); margin-left: 6px; animation: blink 1.2s infinite; }
.crumbs { display: flex; gap: 6px; align-items: center; font-size: .875rem; color: var(--ink-3); flex-wrap: wrap; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.tile .badge-star { left: 6px; right: auto; background: #f5b301; color: #3a2a00; }
.tile-tools { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 4px; padding: 6px; justify-content: flex-end; opacity: 0; transition: opacity .15s; }
.tile:hover .tile-tools, .tile:focus-within .tile-tools { opacity: 1; }
@media (hover: none) { .tile-tools { opacity: 1; } }
.tool { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 60%); color: #fff; cursor: pointer; font-size: .9rem; display: grid; place-items: center; }
.tool.on { background: #f5b301; color: #3a2a00; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters select { width: auto; min-height: 38px; padding: 6px 12px; }

/* --- Diseño --- */
.design { display: grid; gap: 20px; }
.design > * { min-width: 0; }
@media (min-width: 960px) { .design { grid-template-columns: 1fr 320px; align-items: start; } .design .preview-col { position: sticky; top: 120px; } }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; padding: 0; }
.swatch[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--ink); }
.choice-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.choice { border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 12px; text-align: left; cursor: pointer; color: var(--ink); font: 500 .9rem var(--sans); }
.choice b { display: block; font-size: 1.5rem; line-height: 1.2; }
.choice small { color: var(--ink-3); }
.choice[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); }
.choice[data-font='classic'] b { font-family: 'Fraunces', serif; }
.choice[data-font='elegant'] b { font-family: 'Cormorant Garamond', serif; font-style: italic; }
.choice[data-font='modern'] b { font-family: 'Space Grotesk', sans-serif; }
.choice[data-font='playful'] b { font-family: 'Fredoka', sans-serif; }
/* Cuenta regresiva */
.countdown { display: flex; align-items: center; gap: 14px; border-left: 5px solid var(--accent); }
.countdown .cd-n { min-width: 64px; height: 64px; padding: 0 10px; border-radius: 16px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 700 1.9rem/1 var(--serif); }
.countdown.today .cd-n { font-size: 2rem; animation: cd-pop 1.6s ease-in-out infinite; }
@keyframes cd-pop { 50% { transform: scale(1.08) rotate(-4deg); } }
/* Estilos listos */
.looks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.look { border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 8px 8px 10px; text-align: left; cursor: pointer; color: var(--ink); font: 500 .85rem var(--sans); display: grid; gap: 4px; }
.look[aria-pressed='true'] { border-color: var(--c); box-shadow: 0 0 0 2px var(--c); }
.look small { color: var(--ink-3); font-size: .72rem; line-height: 1.3; }
.look-name { font-weight: 700; }
.look-sample { position: relative; z-index: 0; overflow: hidden; height: 62px; border-radius: 10px; display: grid; place-items: center; background: #fbf7f1; }
.look-sample.dark { background: #1b1714; }
.look-sample b { font-size: 1.7rem; color: var(--c); line-height: 1; }
.look-sample::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--c); }
.look-sample[data-pattern]::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--c); opacity: .18; -webkit-mask: var(--pat) 0 0 / var(--pat-size) repeat; mask: var(--pat) 0 0 / var(--pat-size) repeat; }
.look[data-font='classic'] b { font-family: 'Fraunces', serif; }
.look[data-font='elegant'] b { font-family: 'Cormorant Garamond', serif; font-style: italic; }
.look[data-font='modern'] b { font-family: 'Space Grotesk', sans-serif; }
.look[data-font='playful'] b { font-family: 'Fredoka', sans-serif; }
.cover-edit { aspect-ratio: 16 / 7; border-radius: 14px; background: var(--surface-2) center / cover; display: grid; place-items: center; color: var(--ink-3); border: 1.5px dashed var(--line); }
.mini-phone { width: 100%; max-width: 280px; margin: 0 auto; border-radius: 32px; background: #111; padding: 10px; box-shadow: var(--shadow); }
.mini-phone .scr { border-radius: 24px; overflow: hidden; background: var(--bg); min-height: 420px; }
.mini-phone .guest-head h1 { font-size: 1.25rem; }
.mini-phone .pv-body { padding: 12px; display: grid; gap: 8px; }
.sched-row { display: grid; gap: 8px; grid-template-columns: 150px 100px 1fr 1fr auto; align-items: center; }
@media (max-width: 760px) { .sched-row { grid-template-columns: 1fr 1fr; } }

/* --- Inicio del invitado --- */
.welcome { white-space: pre-wrap; }
.quick { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.quick button { appearance: none; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 16px 12px; text-align: left; cursor: pointer; color: var(--ink); font: 600 .95rem var(--sans); }
.quick button span { display: block; font-size: 1.6rem; margin-bottom: 4px; }
.quick button small { display: block; color: var(--ink-3); font-weight: 500; }
.timeline .ti { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.timeline .ti:last-child { border-bottom: 0; }
.timeline .tm { font-weight: 700; color: var(--accent-ink); }
.timeline .day-sep { padding: 14px 0 4px; font-weight: 700; color: var(--ink-2); }
.timeline .day-sep::first-letter { text-transform: uppercase; }
.sheet-back { position: fixed; inset: 0; z-index: 200; /* = .lightbox: gana la última abierta (p. ej. «¿Borrar?» sobre el visor) */ background: rgb(0 0 0 / 40%); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
.sheet { width: 100%; max-width: 520px; background: var(--surface); border-radius: 20px 20px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); animation: rise .25s; max-height: 90vh; overflow: auto; }
@keyframes fade { from { opacity: 0; } }

/* --- Personas --- */
.guest-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; }
.guest-row .meta { color: var(--ink-3); font-size: .85rem; }
.guest-row > div { min-width: 0; }
/* Celular: los botones bajan a su propia línea (sin scroll lateral). */
@media (max-width: 560px) {
  .guest-row { gap: 10px; padding: 10px 12px; }
}
.album-hero.has-cover { color: #fff; background: linear-gradient(rgb(0 0 0 / 20%), rgb(0 0 0 / 65%)), var(--cover) center / cover; padding: 120px 16px 40px; }
.album-hero.has-cover .muted { color: rgb(255 255 255 / 85%); }
.join.has-cover { background: linear-gradient(rgb(0 0 0 / 25%), rgb(0 0 0 / 55%)), var(--cover) center / cover; }
.view { display: contents; }

/* --- Participación --- */
.tile .heart { position: absolute; right: 5px; bottom: 5px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: rgb(0 0 0 / 55%); color: #fff; font: 600 .75rem var(--sans); cursor: pointer; }
.tile .heart.on { background: rgb(255 255 255 / 92%); color: #c53030; }
.tile .heart.static { cursor: default; }
.tile .who { padding-right: 56px; }
.tile .chal-tag { position: absolute; left: 6px; top: 6px; font-size: 1rem; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 50%)); }

/* Botón flotante para aportar desde cualquier pestaña */
.fab { position: fixed; right: 16px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 35; width: 62px; height: 62px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); font-size: 1.7rem; box-shadow: 0 8px 24px rgb(0 0 0 / 28%); cursor: pointer; transition: transform .12s; }
.fab:active { transform: scale(.94); }
.fab-label { position: fixed; right: 86px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 35; background: var(--ink); color: var(--bg); padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; animation: rise .3s, fade-out .6s 4s forwards; pointer-events: none; }
@keyframes fade-out { to { opacity: 0; } }

.capture-opts { display: grid; gap: 10px; }
.capture-opt { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: 16px; padding: 14px; cursor: pointer; color: var(--ink); font: 600 1rem var(--sans); }
.capture-opt .ico { font-size: 1.8rem; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); flex: none; }
.capture-opt small { display: block; font-weight: 500; color: var(--ink-3); font-size: .82rem; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 7px 12px; font: 500 .85rem var(--sans); cursor: pointer; }
.chip[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.chip.done { opacity: .6; }

/* Mini alertas de actividad (arriba, discretas) */
#activity { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 215; display: grid; gap: 6px; width: min(92vw, 380px); pointer-events: none; }
.act { justify-self: center; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 12px 7px 7px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 94%, transparent); color: var(--ink); box-shadow: 0 6px 20px rgb(0 0 0 / 18%); border: 1px solid var(--line); font-size: .85rem; font-weight: 500; animation: drop .3s ease; transition: opacity .4s, transform .4s; backdrop-filter: blur(8px); }
.act img, .act .avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; font-size: .7rem; }
.act span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act.out { opacity: 0; transform: translateY(-8px); }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }

/* Encabezado compacto fuera de Inicio: más espacio para el contenido */
.guest-head.compact { padding: 10px 56px 10px; }
.guest-head.compact.has-cover { padding: 14px 56px 12px; }
.guest-head.compact h1 { font-size: 1.15rem; }
.guest-head.compact .sub { display: none; }
.guest-head.compact .me { margin-top: 4px; padding: 2px 10px; font-size: .78rem; }
.guest-head.compact .menu-btn { top: 6px; width: 36px; height: 36px; }

.contrib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.contrib b { display: block; font: 700 1.5rem var(--serif); }
.contrib span { font-size: .78rem; color: var(--ink-3); }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.strip .tile .who, .strip .tile .heart { display: none; }
.chal-list { display: grid; gap: 8px; }
.chal-item { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 12px; cursor: pointer; color: var(--ink); font: 500 .92rem var(--sans); }
.chal-item .ck { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex: none; font-size: .85rem; }
.chal-item.done .ck { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.chal-item.done { color: var(--ink-3); }
.chal-item .pts { margin-left: auto; font-size: .78rem; color: var(--accent-ink); font-weight: 700; }
.progress-line { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.progress-line div { height: 100%; background: var(--accent); border-radius: 4px; transition: width .5s; }
.photo-filters { margin-bottom: 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.photo-filters::-webkit-scrollbar { display: none; }
.photo-filters .chip { white-space: nowrap; flex: none; }

.upload-dock { position: fixed; left: 12px; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 34; max-width: 520px; margin: 0 auto; max-height: 40vh; overflow-y: auto; }
.upload-dock .upload-row { box-shadow: 0 8px 24px rgb(0 0 0 / 18%); padding: 12px 14px; }

/* --- Reacciones y respuestas en mensajes (celular) --- */
.msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.reactions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: relative; }
.react-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 500 .9rem var(--sans); cursor: pointer; }
span.react-chip { cursor: default; }
.react-chip b { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.react-chip.on { border-color: var(--accent); background: var(--accent-soft); }
.react-chip.on b { color: var(--accent-ink); }
.react-chip.add { color: var(--ink-3); font-size: .85rem; }
.react-picker { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: rise .15s; }
.react-picker[hidden] { display: none; }
.react-opt { width: 42px; height: 42px; border: 0; border-radius: 50%; background: none; font-size: 1.5rem; cursor: pointer; transition: transform .1s; }
.react-opt:hover, .react-opt:focus-visible { transform: scale(1.25); background: var(--surface-2); }
.reply-btn { border: 0; background: none; color: var(--ink-2); font: 600 .85rem var(--sans); cursor: pointer; padding: 6px 4px; margin-left: auto; }
.thread { display: grid; gap: 6px; }
.replies { display: grid; gap: 6px; margin-left: 18px; padding-left: 12px; border-left: 2px solid var(--line); }
.msg-reply { padding: 10px 12px; background: var(--surface-2); }
.msg-reply .who { font-size: .9rem; }
.reply-banner { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); font-size: .88rem; }
.reply-banner[hidden] { display: none; }

.cheer-bar { padding: 10px 12px; }
.cheers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 6px; }
.cheer { aspect-ratio: 1; max-height: 52px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 1.6rem; cursor: pointer; transition: transform .08s; touch-action: manipulation; }
.cheer:active { transform: scale(.88); background: var(--accent-soft); }
.float-local { position: fixed; z-index: 95; pointer-events: none; font-size: 1.8rem; transform: translate(-50%, 0); animation: float-up-local 1.1s ease-out forwards; }
@keyframes float-up-local { to { transform: translate(-50%, -110px) scale(1.4); opacity: 0; } }

/* --- Pantalla: pop-ups y reacciones flotantes --- */
.sc-popups { position: absolute; left: 32px; bottom: 32px; z-index: 12; width: min(560px, 48%); }
.sc-bubble { background: #fff; color: #1d1a17; border-radius: 26px 26px 26px 6px; padding: 20px 24px; box-shadow: 0 24px 60px rgb(0 0 0 / 50%); animation: sc-pop .55s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .5s, transform .5s; }
.sc-bubble.out { opacity: 0; transform: translateY(20px) scale(.96); }
.sc-bubble-head { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; }
.sc-bubble-text { font: 600 1.9rem/1.25 var(--serif); font-style: var(--title-style); margin-top: 10px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sc-bubble-reacts { display: flex; gap: 10px; margin-top: 10px; font-size: 1.3rem; font-weight: 700; }
.sc-bubble-reacts:empty { display: none; }
.sc-bubble-reacts span { background: #f3eee6; border-radius: 999px; padding: 2px 12px; animation: sc-pop .4s; }
.sc-reply-to { font-size: 1rem; color: #8f877d; margin-bottom: 6px; }
.sc-av { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 700 1rem var(--sans); }
@keyframes sc-pop { from { opacity: 0; transform: translateY(30px) scale(.9); } }

.sc-notices { position: absolute; right: 24px; top: 24px; z-index: 12; display: grid; gap: 10px; justify-items: end; width: min(440px, 45%); }
.sc-notice { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 8px 18px 8px 8px; border-radius: 999px; background: rgb(20 17 14 / 82%); color: #fff; font-size: 1.15rem; font-weight: 600; box-shadow: 0 10px 30px rgb(0 0 0 / 40%); backdrop-filter: blur(8px); animation: sc-slide .45s cubic-bezier(.2, 1.3, .4, 1); transition: opacity .5s, transform .5s; }
.sc-notice span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-notice img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.sc-notice.gold { background: linear-gradient(90deg, #b7862a, #e3b04b); color: #2b1d00; }
.sc-notice.out { opacity: 0; transform: translateX(30px); }
@keyframes sc-slide { from { opacity: 0; transform: translateX(60px); } }

.sc-float { position: absolute; inset: 0; z-index: 14; pointer-events: none; overflow: hidden; }
.sc-emoji { position: absolute; bottom: -80px; line-height: 1; will-change: transform, opacity; animation: sc-rise linear forwards; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 35%)); }
@keyframes sc-rise {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  10% { opacity: 1; transform: translate(calc(var(--sway) * .2), -12vh) scale(1); }
  50% { transform: translate(var(--sway), -55vh) scale(1.05); }
  100% { transform: translate(calc(var(--sway) * -.5), -110vh) scale(1.1); opacity: 0; }
}
.sc-cheer-name { position: absolute; bottom: 80px; padding: 6px 16px; border-radius: 999px; background: rgb(255 255 255 / 92%); color: #1d1a17; font: 700 1.2rem var(--sans); animation: sc-name 3s ease forwards; }
@keyframes sc-name { 0% { opacity: 0; transform: translateY(20px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-30px); } }
.credit { display: inline-flex; gap: 12px; align-items: center; }
.credit-chal { background: rgb(227 176 75 / 90%); color: #2b1d00; border-radius: 999px; padding: 2px 10px; }
.credit-likes { opacity: .9; }
.sc-notices > * { max-width: 100%; min-width: 0; }
.sc-notice span:last-child { min-width: 0; }
.screen-stage { min-width: 0; }

/* Mensajes para compartir */
.share-box textarea { font: inherit; font-size: .92rem; line-height: 1.45; }

/* Panel del creador */
.admin-table { width: 100%; overflow-x: auto; }
.admin-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th, .admin-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2, inherit); opacity: .75; white-space: nowrap; }
.admin-table td:first-child { min-width: 190px; }
.admin-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-table tr.ended td { opacity: .6; }
.meter { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.meter > span { display: block; height: 100%; background: var(--accent); }

/* Fondos decorativos: una máscara SVG pintada con el color del evento (data-pattern en <html>). */
[data-pattern='dots'] { --pat: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2736%27 height=%2736%27 viewBox=%270 0 36 36%27%3E%3Ccircle cx=%276%27 cy=%276%27 r=%273%27/%3E%3Ccircle cx=%2724%27 cy=%2724%27 r=%272%27/%3E%3C/svg%3E"); --pat-size: 36px 36px; }
[data-pattern='hearts'] { --pat: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2790%27 height=%2790%27 viewBox=%270 0 90 90%27%3E%3Cg transform=%27translate(8 6)%27%3E%3Cpath d=%27M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z%27/%3E%3C/g%3E%3Cg transform=%27translate(56 52) scale(.7)%27%3E%3Cpath d=%27M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z%27/%3E%3C/g%3E%3Ccircle cx=%2770%27 cy=%2718%27 r=%272%27/%3E%3Ccircle cx=%2722%27 cy=%2770%27 r=%272%27/%3E%3C/svg%3E"); --pat-size: 90px 90px; }
[data-pattern='stars'] { --pat: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%27 height=%27100%27 viewBox=%270 0 100 100%27%3E%3Cg transform=%27translate(10 8)%27%3E%3Cpath d=%27M12 1l2.2 8.8L23 12l-8.8 2.2L12 23l-2.2-8.8L1 12l8.8-2.2z%27/%3E%3C/g%3E%3Cg transform=%27translate(62 58) scale(.6)%27%3E%3Cpath d=%27M12 1l2.2 8.8L23 12l-8.8 2.2L12 23l-2.2-8.8L1 12l8.8-2.2z%27/%3E%3C/g%3E%3Ccircle cx=%2776%27 cy=%2720%27 r=%272%27/%3E%3Ccircle cx=%2728%27 cy=%2776%27 r=%271.6%27/%3E%3Ccircle cx=%2788%27 cy=%2788%27 r=%271.4%27/%3E%3C/svg%3E"); --pat-size: 100px 100px; }
[data-pattern='floral'] { --pat: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27110%27 height=%27110%27 viewBox=%270 0 110 110%27%3E%3Cg transform=%27translate(26 26)%27%3E%3Ccircle cx=%270%27 cy=%27-7%27 r=%275%27/%3E%3Ccircle cx=%276.7%27 cy=%27-2.2%27 r=%275%27/%3E%3Ccircle cx=%274.1%27 cy=%275.7%27 r=%275%27/%3E%3Ccircle cx=%27-4.1%27 cy=%275.7%27 r=%275%27/%3E%3Ccircle cx=%27-6.7%27 cy=%27-2.2%27 r=%275%27/%3E%3C/g%3E%3Cg transform=%27translate(80 78) scale(.6)%27%3E%3Ccircle cx=%270%27 cy=%27-7%27 r=%275%27/%3E%3Ccircle cx=%276.7%27 cy=%27-2.2%27 r=%275%27/%3E%3Ccircle cx=%274.1%27 cy=%275.7%27 r=%275%27/%3E%3Ccircle cx=%27-4.1%27 cy=%275.7%27 r=%275%27/%3E%3Ccircle cx=%27-6.7%27 cy=%27-2.2%27 r=%275%27/%3E%3C/g%3E%3Cellipse cx=%2748%27 cy=%2744%27 rx=%276%27 ry=%272.6%27 transform=%27rotate(40 48 44)%27/%3E%3Cellipse cx=%2762%27 cy=%2790%27 rx=%275%27 ry=%272.2%27 transform=%27rotate(-30 62 90)%27/%3E%3C/svg%3E"); --pat-size: 110px 110px; }
[data-pattern='confetti'] { --pat: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%27120%27 viewBox=%270 0 120 120%27%3E%3Crect x=%2710%27 y=%2714%27 width=%2712%27 height=%274%27 rx=%272%27 transform=%27rotate(30 16 16)%27/%3E%3Crect x=%2770%27 y=%2720%27 width=%2710%27 height=%274%27 rx=%272%27 transform=%27rotate(-40 75 22)%27/%3E%3Crect x=%2740%27 y=%2770%27 width=%2712%27 height=%274%27 rx=%272%27 transform=%27rotate(60 46 72)%27/%3E%3Crect x=%2792%27 y=%2786%27 width=%2710%27 height=%274%27 rx=%272%27 transform=%27rotate(15 97 88)%27/%3E%3Ccircle cx=%2748%27 cy=%2730%27 r=%273%27/%3E%3Ccircle cx=%27100%27 cy=%2754%27 r=%272.5%27/%3E%3Ccircle cx=%2718%27 cy=%2796%27 r=%273%27/%3E%3Ccircle cx=%2776%27 cy=%27108%27 r=%272%27/%3E%3C/svg%3E"); --pat-size: 120px 120px; }
[data-pattern='waves'] { --pat: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%2736%27 viewBox=%270 0 120 36%27%3E%3Cpath d=%27M0 18 Q15 6 30 18 T60 18 T90 18 T120 18%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.5%27/%3E%3C/svg%3E"); --pat-size: 120px 36px; }
[data-pattern] body::before, .screen.patterned::before, .scr[data-pattern]::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--accent); opacity: .10;
  -webkit-mask: var(--pat) 0 0 / var(--pat-size) repeat; mask: var(--pat) 0 0 / var(--pat-size) repeat;
}
:root[data-theme='dark'][data-pattern] body::before, .screen.patterned::before { opacity: .16; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light'])[data-pattern] body::before { opacity: .16; } }
.scr[data-pattern] { position: relative; z-index: 0; }
.scr[data-pattern]::before { position: absolute; }

/* Fotos: conteo de comentarios en la miniatura */
.tile .cmt-count { position: absolute; left: 5px; bottom: 5px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; min-height: 26px; padding: 0 7px; border-radius: 999px; background: rgb(0 0 0 / 55%); color: #fff; font: 600 .72rem var(--sans); }
.tile:has(.cmt-count) .who { padding-left: 52px; }
.strip .tile .cmt-count { display: none; }

/* Visor con conversación */
.lightbox.with-panel { display: grid; grid-template-rows: auto 1fr; justify-content: stretch; align-items: start; padding: 56px 12px 12px; overflow: hidden; }
.lb-media { display: grid; justify-items: center; gap: 10px; min-height: 0; }
.lightbox.with-panel .lb-media img, .lightbox.with-panel .lb-media video { max-height: 46vh; }
.lb-panel { box-sizing: border-box; background: var(--surface); color: var(--ink); border-radius: 16px; padding: 14px; overflow-y: auto; min-height: 0; max-height: 100%; display: flex; flex-direction: column; gap: 12px; width: min(640px, 100%); justify-self: center; }
@media (min-width: 900px) {
  .lightbox.with-panel { grid-template-columns: 1fr 380px; grid-template-rows: 1fr; padding: 24px 64px 24px 24px; }
  .lightbox.with-panel .lb-media { align-self: center; }
  .lightbox.with-panel .lb-media img, .lightbox.with-panel .lb-media video { max-height: calc(100vh - 140px); }
  .lb-panel { height: calc(100vh - 48px); width: 100%; }
}
.cmt { display: flex; gap: 10px; align-items: flex-start; }
.cmt .avatar { flex: none; }
.cmt-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.cmt-list { display: flex; flex-direction: column; gap: 12px; }
.cmt-form { display: flex; gap: 8px; align-items: flex-end; position: relative; }
.cmt-form textarea { min-height: 44px; flex: 1; }

/* @menciones */
.mention { color: var(--accent-ink); font-weight: 600; background: var(--accent-soft); border-radius: 6px; padding: 0 3px; }
.mention.me { background: var(--accent); color: var(--on-accent); }
.mention-wrap { position: relative; }
.mention-list { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 4px; max-height: 260px; overflow-y: auto; }
.mention-opt { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 8px; color: var(--ink); font: 500 .95rem var(--sans); cursor: pointer; text-align: left; }
.mention-opt:hover, .mention-opt:focus { background: var(--accent-soft); }
.mention-opt .avatar { width: 28px; height: 28px; font-size: .75rem; }

/* Campanita de avisos */
.bell-btn { position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 18%); color: inherit; font-size: 1.1rem; cursor: pointer; }
.bell-btn .n { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e53e3e; color: #fff; font: 700 .72rem/20px var(--sans); }
.bell-btn.ring { animation: ring .8s ease 2; }
@keyframes ring { 20%, 60% { transform: rotate(14deg); } 40%, 80% { transform: rotate(-14deg); } }
.note-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 12px; color: var(--ink); font: inherit; cursor: pointer; }
.note-item.unseen { border-color: var(--accent); background: var(--accent-soft); }
.msg.flash, .thread.flash { animation: flash 2s ease; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } }

/* Juegos sugeridos */
.pill-warn { background: #fff4d6; color: #7a5200; }

/* Invitados y mensajes privados */
.dm-btn { position: absolute; top: 10px; left: 56px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 18%); color: inherit; font-size: 1.05rem; cursor: pointer; }
.dm-btn .n { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #e53e3e; color: #fff; font: 700 .72rem/20px var(--sans); }
.dm-btn.ring { animation: ring .8s ease 2; }
/* El título no queda bajo los botones (🔔 👥 a la izquierda, ☰ a la derecha), en todas las
   variantes del encabezado; la píldora del nombre va debajo y usa el ancho completo. */
.guest-head h1, .guest-head .sub { margin-inline: 48px; overflow-wrap: anywhere; }
.guest-head .me { max-width: 100%; min-width: 0; }
.guest-head .me-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; }
button.person { cursor: pointer; }
.person.unread { border-color: var(--accent); background: var(--accent-soft); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.people-sheet, .dm-sheet { max-height: 86vh; }
.people-sheet > .stack { overflow-y: auto; }
.dm-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 50vh; min-height: 120px; padding: 4px 2px; }
.dm { align-self: flex-start; max-width: 80%; background: var(--surface-2); border-radius: 14px 14px 14px 4px; padding: 8px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dm.mine { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-radius: 14px 14px 4px 14px; }
.dm small { display: block; opacity: .7; font-size: .7rem; margin-top: 2px; }

/* Invitar desde el celular */
.invite-card { display: flex; align-items: center; gap: 12px; }

/* Música: me gusta */
.song .song-pos { min-width: 28px; text-align: center; font-weight: 700; color: var(--ink-3); }
.song.top-song { border-color: var(--accent); background: var(--accent-soft); }
.like-song.on { background: #e53e3e; color: #fff; }
.like-song b { font-weight: 700; }

/* Entrada del invitado */
.join-preview { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 12px 0 6px; }
.join-preview img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.join-count { font-weight: 600; margin: 6px 0; }
.join-can { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 14px; }

/* Cabecera del invitado */
.guest-head .me { flex-wrap: nowrap; max-width: 100%; }
.guest-head .me-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.guest-head .me-pts { flex: none; background: rgb(255 255 255 / 22%); border-radius: 999px; padding: 0 8px; }

/* Saludo y misiones */
.hello { border-top: 4px solid var(--accent); }
.missions { display: grid; gap: 6px; }
.mission { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 12px; text-align: left; font: 500 .95rem var(--sans); color: var(--ink); cursor: pointer; }
.mission .ck { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); flex: none; }
.mission .go { color: var(--accent-ink); font-size: 1.3rem; font-weight: 700; }
.mission.done { opacity: .6; cursor: default; }
.mission.done .ck { background: var(--ok); color: #fff; }
.mission.done .grow { text-decoration: line-through; }

/* Ranking: mi posición */
.my-rank { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.my-rank .big { min-width: 64px; height: 64px; padding: 0 8px; display: grid; place-items: center; border-radius: 16px; background: var(--accent); color: var(--on-accent); font: 700 1.6rem var(--serif); }

.recent-events { margin: 0 0 18px; }

/* Navegación: capas y carga */
body.no-scroll { overflow: hidden; }
#app[aria-busy='true']::before { content: ''; position: fixed; top: 0; left: 0; z-index: 500; height: 3px; width: 40%; background: var(--accent); animation: loadbar 1s ease-in-out infinite; }
@keyframes loadbar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* Visor: anterior / siguiente */
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; max-width: 100%; touch-action: pan-y; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 45%); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lb-nav.prev { left: 6px; }
.lb-nav.next { right: 6px; }
.lb-pos { position: absolute; top: 20px; left: 16px; color: #fff; font: 600 .85rem var(--sans); opacity: .85; z-index: 2; }
.lb-pos:empty { display: none; }

/* Mensajes: frases rápidas y respuestas plegadas */
.quick-phrases { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.quick-phrases::-webkit-scrollbar { display: none; }
.quick-phrases .chip { white-space: nowrap; flex: none; }
.more-replies { margin: 0 0 6px; }

/* Música */
.song-matches:empty { display: none; }
.song-matches { border: 1px dashed var(--accent); border-radius: 12px; padding: 8px 10px; background: var(--accent-soft); }
.song-match { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.song .listen, .played .listen { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink); text-decoration: none; font-size: .85rem; }
.played-songs { margin-top: 18px; }
.played-songs summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.played { padding: 6px 2px; border-bottom: 1px solid var(--line); }

/* Plazo de 48 h para descargar los recuerdos */
.keep-card { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; border-left: 4px solid var(--accent); }
.keep-card.urgent { border-left-color: #d9480f; background: color-mix(in srgb, #d9480f 8%, var(--card, transparent)); }
.keep-note { font-size: .85rem; color: #d9480f; font-weight: 600; }
.btn-ok { background: #2b8a3e; color: #fff; border-color: #2b8a3e; }

/* Celular: nada se sale por el costado (enlaces largos en Inicio, selectores con textos largos). */
.overview > *, .links, .link-row, .link-row .grow { min-width: 0; }
select { max-width: 100%; }
@media (max-width: 520px) {
  .topbar .wrap { gap: 6px; }
  .topbar .brand { min-width: 0; overflow: hidden; letter-spacing: .03em; font-size: .95rem; gap: 6px; }
  /* Con 3 botones o más (panel, Mis eventos) solo el logo: el nombre no cabe. */
  .topbar .wrap:has(> :nth-child(5)) .brand { font-size: 0; gap: 0; }
  .topbar .btn-small { padding-inline: 10px; }
}

/* Editor de portada */
.cover-editor { max-width: 720px; }
.cover-frame { position: relative; border-radius: 14px; overflow: hidden; background: #111; }
.cover-canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; touch-action: none; cursor: grab; }
.cover-canvas:active { cursor: grabbing; }
.cover-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: rgb(0 0 0 / 55%); color: #fff; font-size: .75rem; padding: 3px 10px; border-radius: 99px; pointer-events: none; white-space: nowrap; }
.cover-zoom { flex-wrap: nowrap; }
.cover-zoom input { flex: 1; min-width: 0; accent-color: var(--accent); }
.cover-tools { gap: 6px; }

/* Elegir qué parte del video subir */
.trim-video { width: 100%; max-height: 46vh; border-radius: 12px; background: #000; }
.trim-track { position: relative; height: 10px; border-radius: 99px; background: var(--surface-2, #eee); overflow: hidden; }
.trim-sel { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 99px; }
.trim-range { font-weight: 600; font-size: .9rem; }

/* Avatares: color propio por persona (o su foto), con un anillo blanco */
.av { --h: 210; background: linear-gradient(135deg, hsl(var(--h) 78% 60%), hsl(calc(var(--h) + 40) 82% 46%)); color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 25%); box-shadow: 0 0 0 2px var(--surface, #fff), 0 2px 6px rgb(0 0 0 / 18%); overflow: hidden; letter-spacing: .02em; }
.av.has-photo { background: var(--surface-2, #ddd); }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.sc-av.av { box-shadow: 0 0 0 3px rgb(255 255 255 / 85%); }
.av-big { width: 96px; height: 96px; font-size: 2rem; }
.me-av { width: 26px; height: 26px; font-size: .7rem; margin-right: 6px; vertical-align: middle; display: inline-grid; }

/* Botón de invitados del encabezado: más visible (color del evento, anillo y brillo) */
.guest-head .dm-btn { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #ff3d77)); color: #fff;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 85%), 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent); }
.guest-head .dm-btn:hover { transform: scale(1.06); }
.guest-head .dm-btn::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  animation: dm-pulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes dm-pulse { 0% { transform: scale(.85); opacity: .9; } 80%, 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .guest-head .dm-btn::after { animation: none; } }

/* Quién reaccionó */
.fans-line { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.fans-faces { display: inline-flex; }
.fans-faces .av { width: 26px; height: 26px; font-size: .65rem; margin-left: -8px; }
.fans-faces .av:first-child { margin-left: 0; }
.fans-list { display: grid; gap: 8px; max-height: 240px; overflow: auto; padding: 4px 2px; }
.fan-row { display: flex; align-items: center; gap: 10px; }
.fan-row .avatar { width: 30px; height: 30px; font-size: .72rem; }
.fan-row .emo { margin-left: auto; letter-spacing: 2px; }

/* Foto de perfil en "Mi perfil" */
.profile-photo { display: flex; align-items: center; gap: 14px; }
/* Nombres largos en la lista de invitados: se cortan con "…" (no tapan el botón) */
.person > .grow, .person > strong, .person > span:not(.avatar):not(.pill) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person > .btn, .person > .pill { flex: none; }
.person .grow > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Encabezado compacto: 🔔 y 👥 del mismo tamaño que ☰, y la píldora del nombre debajo de ellos */
.guest-head.compact .bell-btn, .guest-head.compact .dm-btn { top: 6px; width: 36px; height: 36px; font-size: 1rem; }
.guest-head.compact .dm-btn { left: 50px; }
.guest-head.compact .me { margin-top: 9px; }

/* Sobre mí: ficha de la persona y formulario */
.person-open { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.person-open .grow { min-width: 0; }
.person-open strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-card { display: flex; align-items: center; gap: 14px; }
.person-name { font-size: 1.15rem; overflow-wrap: anywhere; }
.about-bio { margin: 0; font-style: italic; font-size: 1.02rem; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.about-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--surface-2, #f4f1ec); }
.about-item .ico { font-size: 1.2rem; line-height: 1.2; }
.about-item small { display: block; color: var(--ink-3); font-size: .72rem; }
.about-item b { font-weight: 600; overflow-wrap: anywhere; }
.about-form .field label { font-size: .85rem; }

.meet-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.meet-chips::-webkit-scrollbar { display: none; }
.meet-chips .chip { flex: none; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent-ink, var(--accent)); text-decoration: underline; font: inherit; cursor: pointer; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-card > div { display: flex; flex-direction: column; align-items: flex-start; }
.about-item.wide { grid-column: 1 / -1; }

/* Ranking: tocar a una persona abre su perfil */
button.rank-row.pickable { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; border: 0; }
button.rank-row.pickable:hover { filter: brightness(.97); }
.av-zoom { background: none; border: 0; padding: 0; border-radius: 50%; cursor: zoom-in; flex: none; }
.av-zoom:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.profile-like { align-self: flex-start; margin-top: 4px; background: var(--surface-2, #f4f1ec); color: var(--ink); border: 1px solid var(--line); }
.profile-like.on { background: #ffe3ea; border-color: #ff8fab; }

/* En el visor el panel se desplaza: el selector de emojis se abre hacia abajo para no quedar cortado. */
.lb-panel .react-picker { top: calc(100% + 6px); bottom: auto; }

/* Premio del ranking: destacado en dorado (se ve igual con cualquier color del evento). */
.prize-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border: 2px solid #e0b84a; border-radius: var(--radius); background: linear-gradient(135deg, #fff6d8 0%, #ffe9a8 55%, #f6d27a 100%); color: #3b2a05; font: inherit; box-shadow: 0 6px 20px rgb(200 150 30 / 25%); cursor: default; }
button.prize-card { cursor: pointer; }
.prize-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 55%) 45%, transparent 60%); transform: translateX(-100%); animation: prize-shine 4s ease-in-out infinite; pointer-events: none; }
.prize-ico { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 60%); font-size: 2rem; box-shadow: inset 0 0 0 2px #e0b84a; }
.prize-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a6510; }
.prize-main { font: 700 1.25rem/1.25 var(--serif); margin: 2px 0 4px; overflow-wrap: anywhere; }
.prize-more { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; margin-bottom: 4px; overflow-wrap: anywhere; }
.prize-status { font-size: .85rem; color: #5c4510; }
.prize-card .go { font-size: 1.6rem; color: #8a6510; }
.rank-prize { font-size: .78rem; font-weight: 600; color: #8a6510; overflow-wrap: anywhere; }
@keyframes prize-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .prize-card::after { animation: none; display: none; } }
.join-prize { margin: 4px 0 10px; padding: 8px 12px; border-radius: 12px; background: #fff3cc; border: 1px solid #e0b84a; color: #3b2a05; font-weight: 600; font-size: .9rem; }
.screen-prize { margin: -4px 0 8px; color: #f6d27a; font-weight: 600; font-size: 1rem; }
.install-card { display: flex; align-items: center; gap: 10px; border-left: 4px solid var(--accent); }
.install-ico { font-size: 1.6rem; flex: none; }
/* Inicio compacto: premio en dos líneas, instalar en una, retos en dos columnas. */
.prize-card.compact { padding: 10px 12px; gap: 10px; }
.prize-card.compact .prize-ico { width: 40px; height: 40px; font-size: 1.4rem; }
.prize-card.compact .prize-main { font-size: 1.05rem; margin: 0 0 2px; }
.prize-card.compact .prize-status { font-size: .8rem; }
.install-card { padding: 8px 10px 8px 12px; }
.install-card .install-ico { font-size: 1.3rem; }
.chal-list { gap: 6px; }
.chal-item { padding: 7px 10px; gap: 8px; }
.chal-item .ck { width: 24px; height: 24px; }
.cheers .cheer { min-width: 0; padding: 0; }
.mission { padding: 8px 12px; }
.how-points summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.how-points summary::-webkit-details-marker { display: none; }
.how-points summary::after { content: '›'; font-size: 1.3rem; color: var(--accent-ink); transition: transform .2s; }
.how-points[open] summary::after { transform: rotate(90deg); }
.composer-actions { flex-wrap: nowrap; } .composer-actions .btn { flex: 1; padding-left: 10px; padding-right: 10px; }
.song { gap: 10px; padding: 10px 12px; }
.song .song-pos { min-width: 20px; }
.song .grow { min-width: 0; }
.profile-photo .av-big { width: 76px; height: 76px; font-size: 1.6rem; flex: none; }
.event-card .ev-head { display: flex; align-items: center; gap: 10px; }
.event-card .ev-head h3 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.event-card .ev-head .emoji { font-size: 1.6rem; flex: none; }
.event-card .ev-head .grow { min-width: 0; }
.event-card .ev-foot { margin-top: 10px; gap: 12px; }
/* Tipos de evento: 3 por fila en el celular (16 tipos caben en una pantalla). */
@media (max-width: 520px) {
  .type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .type-opt { padding: 8px 4px; font-size: .78rem; line-height: 1.2; border-radius: 12px; }
  .type-opt span { font-size: 1.35rem; margin-bottom: 2px; }
}
@media (max-width: 520px) { .qr-box { max-width: 200px; } .panel-head h1 { font-size: 1.6rem !important; } }
.keep-card > .grow { flex: 1 1 200px; min-width: 0; }
@media (max-width: 520px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stats .stat { padding: 10px; }
  .stat b { font-size: 1.5rem; }
  .stat span { font-size: .75rem; line-height: 1.2; display: block; }
}
.poll-compact { margin: 8px 0 0; padding-left: 22px; color: var(--ink-2); font-size: .92rem; display: grid; gap: 2px; }
.poll-compact li::marker { color: var(--ink-3); font-weight: 600; }
.poll-compact .correct { color: var(--ok); font-weight: 600; }
.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
.save-bar .btn { flex: 1; min-width: 0; padding-inline: 10px; }
/* Celular: estilos listos en una fila deslizable (antes 4 filas de alto). */
@media (max-width: 520px) {
  .looks { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .looks::-webkit-scrollbar { display: none; }
  .looks .look { flex: 0 0 140px; scroll-snap-align: start; }
}
@media (max-width: 520px) {
  .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .choice { padding: 8px; font-size: .8rem; }
  .choice b { font-size: 1.25rem; }
}
@media (max-width: 520px) {
  .tile-tools { gap: 2px; padding: 4px; justify-content: space-between; }
  .tile-tools .tool { width: 26px; height: 26px; font-size: .75rem; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters > .grow { display: none; }
  .filters select { min-width: 0; }
}
/* Pantalla: si falta alto, se recortan las listas del ranking, nunca el QR. */
.screen-side > * { flex: none; }
.screen-side > .screen-rank { flex: 0 1 auto; min-height: 0; overflow: hidden; }

/* --- En vivo: momentos, bingo, sorteo, insignias, mosaico --- */
.moments-bar { display: grid; gap: 6px; }
.moment-chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color: var(--on-accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); animation: rise .3s; }
.moment-chip.mc-count { background: var(--ink); color: var(--bg); }
.moment-chip .m-ico { font-size: 1.4rem; }
.moment-chip .m-sub { font-size: .85rem; opacity: .9; }
.moment-chip .grow { min-width: 0; }
.moment-chip .btn { background: #fff; color: #111; border-color: #fff; }
.moment-chip .btn-ghost { background: rgb(255 255 255 / 20%); color: inherit; border-color: transparent; }
.clock { font-variant-numeric: tabular-nums; }

.bingo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bingo-cell { position: relative; min-height: 84px; hyphens: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: 500 .75rem/1.2 var(--sans); text-align: center; cursor: pointer; overflow-wrap: break-word; }
.bingo-cell .b-mark { font-size: 1.1rem; }
.bingo-cell.done { border-style: solid; border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--ink-2); cursor: default; }
.bingo-cell.done .b-mark { color: var(--ok); font-weight: 800; }
.bingo-cell.line { border-color: #e0b84a; background: #fff3cc; color: #3b2a05; }

.badge-icons { margin-left: 4px; font-size: .9em; letter-spacing: 1px; }

.raffle { position: fixed; inset: 0; z-index: 210; cursor: pointer; display: grid; place-items: center; background: rgb(0 0 0 / 70%); animation: fade .2s; padding: 16px; }
.raffle.out { animation: fade-out .5s forwards; }
.raffle-box { width: min(92vw, 460px); padding: 28px 20px; border-radius: 22px; text-align: center; background: linear-gradient(135deg, #fff6d8, #f6d27a); color: #3b2a05; box-shadow: 0 20px 60px rgb(0 0 0 / 40%); }
.raffle-head { font-weight: 700; font-size: 1.1rem; }
.raffle-name { margin: 18px 0; font: 700 2rem/1.15 var(--serif); min-height: 2.4em; display: grid; place-items: center; overflow-wrap: anywhere; }
.raffle-name.win { animation: raffle-pop .5s; color: #8a2a12; }
.raffle-foot { font-weight: 600; }
.raffle.big .raffle-box { width: min(80vw, 1000px); padding: 60px 40px; }
.raffle.big .raffle-head { font-size: 2.2rem; }
.raffle.big .raffle-name { font-size: 5rem; }
.raffle.big .raffle-foot { font-size: 1.8rem; }
@keyframes raffle-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

.mosaic { position: absolute; inset: 0; z-index: 13; background: #000; animation: fade .6s; overflow: hidden; }
.mosaic-grid { position: absolute; inset: 0; display: grid; }
.mosaic-grid img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto; min-height: 0; }
.mosaic-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; mix-blend-mode: normal; }
.mosaic-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 32px; background: linear-gradient(transparent, rgb(0 0 0 / 70%)); color: #fff; font: 700 2.4rem var(--serif); }

.capsule-card textarea { min-height: 80px; }
.summary-card .stats-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.summary-card .stats-mini b { display: block; font: 700 1.4rem var(--serif); }
.summary-card .stats-mini span { font-size: .75rem; color: var(--ink-3); }
.capsule-card summary { cursor: pointer; list-style: none; } .capsule-card summary::-webkit-details-marker { display: none; } .capsule-card { margin-top: 12px; }
.live-actions { display: flex; flex-wrap: wrap; gap: 6px; } .live-card { border-top: 4px solid var(--accent); }
.screen .sound-btn { right: 190px; }
.sc-moments { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); z-index: 12; display: grid; gap: 10px; justify-items: center; width: min(90%, 900px); pointer-events: none; }
.sc-moment { display: flex; align-items: center; gap: 18px; padding: 16px 28px; border-radius: 22px; background: var(--accent); color: var(--on-accent); box-shadow: 0 12px 40px rgb(0 0 0 / 45%); animation: rise .4s; }
.sc-moment.sc-count { background: #111; color: #fff; border: 2px solid var(--accent); }
.sc-m-ico { font-size: 3rem; }
.sc-m-title { font: 700 2.4rem/1.1 var(--serif); }
.sc-m-sub { font-size: 1.4rem; opacity: .95; }
.sc-moment .clock { font-size: 1.8rem; }
.mosaic.out { animation: fade-out .7s forwards; }
/* Libro de firmas (pantalla e impresión) */
.guestbook { max-width: 860px; }
.gb-cover { text-align: center; padding: 20px 0 10px; }
.gb-cover img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 18px; }
.gb-emoji { font-size: 4rem; }
.gb-cover h1 { font-size: 2.4rem; margin: 14px 0 4px; }
.gb-sub { font-size: 1.15rem; color: var(--ink-2); margin: 0; }
.gb-intro { margin-top: 16px; font-style: italic; color: var(--ink-2); }
.gb-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 18px 0; }
.gb-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.gb-messages { columns: 2 260px; column-gap: 16px; }
.gb-msg { break-inside: avoid; margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.gb-msg p { margin: 0 0 8px; font: 500 1.05rem/1.45 var(--serif); white-space: pre-wrap; }
.gb-msg footer { color: var(--ink-3); font-size: .9rem; text-align: right; }
.gb-foot { text-align: center; color: var(--ink-3); margin: 30px 0 10px; font-size: .85rem; }
@media print {
  .guestbook { max-width: none; }
  .gb-msg { border-color: #ddd; background: #fff; }
  .gb-photos img, .gb-cover img { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
/* Página de ejemplo */
.demo-phone { max-width: 420px; margin: 0 auto; border: 10px solid #1d1a17; border-radius: 36px; overflow: hidden; background: var(--bg); box-shadow: 0 20px 60px rgb(0 0 0 / 25%); }
.demo-head { display: grid; justify-items: center; gap: 2px; padding: 18px 14px; background: var(--accent); color: var(--on-accent); }
.demo-head b { font: 700 1.4rem var(--serif); }
.demo-body { padding: 12px; }
.demo-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.demo-strip img { width: 84px; height: 84px; border-radius: 10px; flex: none; }
.awards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.award { display: flex; gap: 10px; align-items: center; }
.award-ico { font-size: 1.8rem; }

/* Franja de momentos con el mismo margen que el resto (no de borde a borde). */
.live-slot:not(:empty) { padding: 10px 16px 0; max-width: 640px; margin: 0 auto; }
/* Cápsula: flecha del pliegue como en «¿Cómo sumar puntos?». */
.capsule-card summary { display: flex; justify-content: space-between; align-items: center; }
.capsule-card summary::after { content: '›'; font-size: 1.3rem; color: var(--accent-ink); transition: transform .2s; }
.capsule-card[open] summary::after { transform: rotate(90deg); }
/* Áreas de toque más cómodas. */
.reply-btn { min-height: 36px; padding: 6px 10px; }
.linkish { padding: 6px 2px; }

/* --- Planes y cobros --- */
.lock-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .72rem; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.is-locked { opacity: .78; }
.lock-hero { display: flex; gap: 12px; align-items: center; }
.lock-icon { font-size: 2rem; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); flex: none; }
.plan-pill.plan-free { background: var(--surface-2); }
.plan-pill.plan-fiesta { background: var(--accent-soft); color: var(--accent-ink); }
.plan-pill.plan-gala { background: #2d2417; color: #f3d58b; }
.plan-card-host { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.plan-card-host .grow { min-width: 200px; }
.plan-full { border-color: #d9480f; background: color-mix(in srgb, #d9480f 8%, var(--surface)); }
.plan-list { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 4px; font-size: .9rem; }
.plan-list li.no { color: var(--ink-3); }
.plan-minis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.plan-mini { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.plan-mini.best { border: 2px solid var(--accent); }
.plan-mini .btn { margin-top: auto; }
.extra-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.extra-row.focus { background: var(--accent-soft); border-radius: 12px; padding: 10px; }
.extra-ico { font-size: 1.4rem; }
.extra-row .grow { min-width: 160px; }
.extra-row .qty { width: 64px; min-height: 36px; padding: 0 8px; }
.vaca-bar { position: relative; height: 28px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vaca-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff)); transition: width .6s; }
.vaca-bar span { position: relative; display: block; text-align: center; line-height: 28px; font-size: .82rem; font-weight: 700; color: var(--ink); }
.vaca-terms { font-size: .85rem; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.vaca-terms ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.referral-card { border: 2px dashed var(--accent); }
/* Página /planes */
.plans-hero { text-align: center; padding: 28px 0 8px; }
.plans-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; }
.plan-box { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); position: relative; }
.plan-box.best { border: 2px solid var(--accent); transform: translateY(-4px); }
.plan-box .badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--on-accent); padding: 3px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.plan-price { font-family: var(--serif); font-size: 2rem; font-weight: 700; }
.plan-price small { font-size: .9rem; font-weight: 500; color: var(--ink-3); font-family: var(--sans); }
.plan-box .btn { margin-top: auto; }
.faq details { border-top: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { margin: 8px 0 0; color: var(--ink-2); }
.pay-box { max-width: 460px; margin: 40px auto; text-align: center; }
.pay-big { font-size: 3rem; }
.test-banner { background: #fff4d6; color: #7a5200; border-radius: 12px; padding: 8px 12px; font-size: .85rem; font-weight: 600; }
.screen-upsell { position: fixed; inset: auto 16px 16px auto; max-width: 380px; z-index: 50; background: var(--surface); color: var(--ink); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }