/* ============ Base ============ */
:root {
  --bg: #faf6f0;
  --paper: #ffffff;
  --ink: #2b231e;
  --muted: #8a7b6e;
  --line: #ebe2d6;
  --accent: #a97455;        /* cambia según categoría */
  --accent-soft: #f3e6dc;
  --danger: #b4483c;
  --ok: #4f7d5c;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(60, 40, 20, .05), 0 8px 28px rgba(60, 40, 20, .07);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --quote: #5a4c41;          /* color de las dedicatorias */
  --heart: #d0435c;
}
body[data-cat="matrimonio"] { --accent: #a97455; --accent-soft: #f3e6dc; }
body[data-cat="bautizo"]    { --accent: #5d82a6; --accent-soft: #e3ecf4; }
body[data-cat="quince"]     { --accent: #b0587c; --accent-soft: #f6e2ea; }
body[data-cat="deporte"]    { --accent: #c95a24; --accent-soft: #fbe5d8; }
body[data-cat="moda"]       { --accent: #9c2f5e; --accent-soft: #f6e0ea; }
body[data-cat="animales"]   { --accent: #2f8a84; --accent-soft: #dff1ef; }
body[data-cat="cumple"] { --accent: #7048e8; --accent-soft: #ebe5fd; }
body[data-cat="graduacion"] { --accent: #1f3a6e; --accent-soft: #e1e7f2; }
body[data-cat="empresa"] { --accent: #2b5d9e; --accent-soft: #e1eaf5; }
body[data-cat="babyshower"] { --accent: #b0609a; --accent-soft: #f6e3f0; }
body[data-cat="aniversario"] { --accent: #a8843f; --accent-soft: #f3ead8; }
body[data-cat="desfile"]    { --accent: #8a1538; --accent-soft: #f4e1e6; }
body[data-cat="nightclub"]  { --accent: #8b2cf5; --accent-soft: #ece0fe; }
body[data-cat="evento"]     { --accent: #4f7f68; --accent-soft: #e2eee7; }

/* ============ Plantillas por evento ============
   "Clásico" usa los colores de la categoría (arriba).
   Las demás definen su propia paleta y tipografía.            */
body[data-tpl="noche"], body[data-tpl="neon"] {
  --bg: #17130f; --paper: #221c17; --ink: #f3ebe1; --muted: #b0a291; --line: #3b322b;
  --accent: #d2ab68; --accent-soft: #3a2f22; --quote: #e2d5c4; --heart: #f07a8c;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  --serif: 'Cormorant Garamond', Georgia, serif;
  color-scheme: dark;
}
body[data-tpl="noche"] .btn:not(.btn-ghost):not(.btn-danger), body[data-tpl="neon"] .btn:not(.btn-ghost):not(.btn-danger) { color: #17130f; }
body[data-tpl="noche"] .display, body[data-tpl="neon"] .display { font-weight: 500; letter-spacing: .01em; }
body[data-tpl="noche"] .tabs a.on, body[data-tpl="neon"] .tabs a.on { color: #17130f; }

body[data-tpl="romantico"] {
  --bg: #fbf0ee; --paper: #ffffff; --ink: #4a2f33; --muted: #9a7a7d; --line: #f0dcda;
  --accent: #b9707a; --accent-soft: #f7e1e1; --quote: #6e4a50;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --display: 'Great Vibes', 'Cormorant Garamond', cursive;
  --radius: 24px;
}
body[data-tpl="romantico"] .display { font-size: clamp(2.8rem, 13vw, 4.8rem); letter-spacing: 0; line-height: 1.05; }
body[data-tpl="romantico"] .display.sm { font-size: clamp(2rem, 8vw, 3rem); }
body[data-tpl="romantico"] h2 { font-weight: 600; font-size: 1.5rem; }

body[data-tpl="moderno"] {
  --bg: #f4f3ef; --paper: #ffffff; --ink: #111111; --muted: #6b6b6b; --line: #dcdad3;
  --accent: #1f1f1f; --accent-soft: #e8e6df; --quote: #333333;
  --serif: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --radius: 4px; --shadow: 0 0 0 1px #e2e0d9;
}
body[data-tpl="moderno"] .display { font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; }
body[data-tpl="moderno"] .ev-date, body[data-tpl="moderno"] .who p, body[data-tpl="moderno"] .poster-call { font-style: normal; }
body[data-tpl="moderno"] .btn, body[data-tpl="moderno"] .tabs, body[data-tpl="moderno"] .tabs a,
body[data-tpl="moderno"] .tile, body[data-tpl="moderno"] .picker, body[data-tpl="moderno"] .vote { border-radius: 4px; }
body[data-tpl="moderno"] .ornament { display: none; }

body[data-tpl="fiesta"] {
  --bg: #fff6e5; --paper: #ffffff; --ink: #2a1a2e; --muted: #85708a; --line: #f3e3c6;
  --accent: #e5484d; --accent-soft: #ffe3d6; --quote: #4b3350;
  --serif: 'Fredoka', 'DM Sans', system-ui, sans-serif;
  --radius: 22px;
}
body[data-tpl="fiesta"] .display { font-weight: 700; letter-spacing: -.01em; }
body[data-tpl="fiesta"] .ev-hero {
  background:
    radial-gradient(circle at 12% 30%, #ffd23f 0 7px, transparent 8px),
    radial-gradient(circle at 85% 22%, #3ec7c2 0 6px, transparent 7px),
    radial-gradient(circle at 72% 78%, #e5484d 0 5px, transparent 6px),
    radial-gradient(circle at 25% 82%, #8c5cf6 0 6px, transparent 7px),
    radial-gradient(120% 90% at 50% 0%, var(--accent-soft) 0%, var(--bg) 70%);
}
body[data-tpl="fiesta"] .ev-date, body[data-tpl="fiesta"] .who p, body[data-tpl="fiesta"] .poster-call { font-style: normal; }

body[data-tpl="tierno"] {
  --bg: #f1f6fb; --paper: #ffffff; --ink: #2c3e50; --muted: #7d8fa1; --line: #dde7f1;
  --accent: #6f9bc8; --accent-soft: #e1ecf7; --quote: #46607a;
  --serif: 'Quicksand', 'DM Sans', system-ui, sans-serif;
  --radius: 26px;
}
body[data-tpl="tierno"] .display { font-weight: 700; }
body[data-tpl="tierno"] .ev-date, body[data-tpl="tierno"] .who p, body[data-tpl="tierno"] .poster-call { font-style: normal; }
body[data-tpl="tierno"] .ornament { font-size: 1rem; }

body[data-tpl="deportivo"] {
  --bg: #eef1f5; --paper: #ffffff; --ink: #13202f; --muted: #66748a; --line: #d9dfe8;
  --accent: #e2552b; --accent-soft: #fde4da; --quote: #2e3d52;
  --serif: 'Barlow Condensed', 'DM Sans', system-ui, sans-serif;
  --radius: 10px;
}
body[data-tpl="deportivo"] .display { font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(2.6rem, 12vw, 4.4rem); line-height: .95; }
body[data-tpl="deportivo"] .display.sm { font-size: clamp(1.8rem, 7vw, 2.6rem); }
body[data-tpl="deportivo"] h2 { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
body[data-tpl="deportivo"] .ev-date, body[data-tpl="deportivo"] .who p, body[data-tpl="deportivo"] .poster-call { font-style: normal; }
body[data-tpl="deportivo"] .ev-hero {
  background:
    repeating-linear-gradient(-55deg, transparent 0 22px, color-mix(in srgb, var(--accent) 9%, transparent) 22px 30px),
    radial-gradient(120% 90% at 50% 0%, var(--accent-soft) 0%, var(--bg) 70%);
}
body[data-tpl="deportivo"] .ornament span { height: 3px; }

body[data-tpl="champagne"] {
  --bg: #f7f1e6; --paper: #fffdf8; --ink: #3a2f22; --muted: #8f7f68; --line: #eadfca;
  --accent: #a8843f; --accent-soft: #f1e6cf; --quote: #5b4a33;
  --serif: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --radius: 14px;
}
body[data-tpl="champagne"] .display { letter-spacing: .06em; text-transform: uppercase; font-size: clamp(1.9rem, 8vw, 3rem); }
body[data-tpl="champagne"] .display.sm { font-size: clamp(1.4rem, 5vw, 2rem); }
body[data-tpl="champagne"] .ev-hero {
  background: radial-gradient(120% 90% at 50% 0%, #efe0bf 0%, var(--bg) 70%);
  border-bottom: 1px solid var(--line);
}
body[data-tpl="champagne"] .ornament span { width: 70px; }
body[data-tpl="champagne"] .ev-date, body[data-tpl="champagne"] .who p { font-style: normal; }

body[data-tpl="boho"] {
  --bg: #f3ece2; --paper: #fbf8f3; --ink: #3b3a30; --muted: #857e6c; --line: #e2d8c8;
  --accent: #b5643c; --accent-soft: #ecdccd; --quote: #5d5546;
  --serif: 'Josefin Sans', 'DM Sans', system-ui, sans-serif;
  --radius: 4px 22px 4px 22px;
}
body[data-tpl="boho"] .display { font-weight: 300; letter-spacing: .12em; text-transform: uppercase; }
body[data-tpl="boho"] h2 { font-weight: 600; letter-spacing: .04em; }
body[data-tpl="boho"] .ev-hero {
  background:
    radial-gradient(circle at 8% 100%, #c9d3b8 0 90px, transparent 91px),
    radial-gradient(circle at 96% 10%, #e8c9b2 0 70px, transparent 71px),
    var(--bg);
}
body[data-tpl="boho"] .ev-date, body[data-tpl="boho"] .who p, body[data-tpl="boho"] .poster-call { font-style: normal; }
body[data-tpl="boho"] .btn, body[data-tpl="boho"] .tabs a.on { border-radius: 4px 16px 4px 16px; }

body[data-tpl="academico"] {
  --bg: #eef1f7; --paper: #ffffff; --ink: #141c2b; --muted: #687489; --line: #d8deea;
  --accent: #1f3a6e; --accent-soft: #e0e6f1; --quote: #2c3a55;
  --serif: 'Playfair Display', Georgia, serif;
  --radius: 8px;
}
body[data-tpl="academico"] .display { font-weight: 700; }
body[data-tpl="academico"] .ev-hero { background: #1f3a6e; color: #fff; margin-bottom: 1.6rem; }
body[data-tpl="academico"] .ev-hero .eyebrow, body[data-tpl="academico"] .ev-hero .ornament { color: #d9b862; }
body[data-tpl="academico"] .ev-hero .ev-date { color: rgba(255,255,255,.8); }

body[data-tpl="corporativo"] {
  --bg: #f4f6f9; --paper: #ffffff; --ink: #18212e; --muted: #67728a; --line: #dfe4ec;
  --accent: #2b5d9e; --accent-soft: #e3ebf6; --quote: #33415a;
  --serif: 'Manrope', 'DM Sans', system-ui, sans-serif;
  --radius: 10px; --shadow: 0 1px 2px rgba(20,30,50,.06), 0 6px 18px rgba(20,30,50,.06);
}
body[data-tpl="corporativo"] .display { font-weight: 800; letter-spacing: -.02em; }
body[data-tpl="corporativo"] .ev-hero { text-align: left; max-width: 980px; margin: 0 auto; }
body[data-tpl="corporativo"] .ornament { justify-content: flex-start; }
body[data-tpl="corporativo"] .ev-date, body[data-tpl="corporativo"] .who p, body[data-tpl="corporativo"] .poster-call { font-style: normal; }
body[data-tpl="corporativo"] .btn, body[data-tpl="corporativo"] .tabs, body[data-tpl="corporativo"] .tabs a { border-radius: 10px; }

body[data-tpl="infantil"] {
  --bg: #fff8e8; --paper: #ffffff; --ink: #2d2a4a; --muted: #7c7896; --line: #f3e6c4;
  --accent: #ff7a45; --accent-soft: #ffe8db; --quote: #45406b;
  --serif: 'Baloo 2', 'DM Sans', system-ui, sans-serif;
  --radius: 26px;
}
body[data-tpl="infantil"] .display { font-weight: 800; letter-spacing: 0; }
body[data-tpl="infantil"] .ev-hero {
  background:
    radial-gradient(circle at 10% 25%, #ffd43b 0 14px, transparent 15px),
    radial-gradient(circle at 88% 18%, #74c0fc 0 18px, transparent 19px),
    radial-gradient(circle at 80% 82%, #63e6be 0 12px, transparent 13px),
    radial-gradient(circle at 18% 80%, #f783ac 0 10px, transparent 11px),
    radial-gradient(120% 90% at 50% 0%, var(--accent-soft) 0%, var(--bg) 70%);
}
body[data-tpl="infantil"] .ev-date, body[data-tpl="infantil"] .who p, body[data-tpl="infantil"] .poster-call { font-style: normal; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
[hidden] { display: none !important; }

.display { font-family: var(--display, var(--serif)); text-wrap: balance; font-weight: 400; font-size: clamp(2.1rem, 9vw, 3.4rem); letter-spacing: -.01em; }
.display.sm { font-size: clamp(1.6rem, 6vw, 2.2rem); margin: .3rem 0; }
.eyebrow { margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; font-weight: 700; color: var(--accent); }
.lead { color: var(--muted); font-size: 1.05rem; }

.ornament { display: flex; align-items: center; justify-content: center; gap: .75rem; color: var(--accent); margin-top: 1.1rem; font-size: .8rem; }
.ornament span { width: 46px; height: 1px; background: currentColor; opacity: .5; }

/* ============ Botones y campos ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.4rem; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .15s, opacity .15s, background .15s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn-sm { min-height: 36px; padding: .4rem .95rem; font-size: .88rem; }
.btn-danger { background: var(--danger); }
.btn-danger.btn-ghost { background: transparent; color: var(--danger); }
.link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }

.field { display: block; margin-top: 1rem; position: relative; }
.field > span { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .35rem; }
.field input, .field textarea, .field select, .code-row input {
  width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--paper); font-size: 16px; /* evita zoom en iPhone */
  transition: border-color .15s;
}
.field input:focus, .field textarea:focus, .field select:focus, .code-row input:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 84px; }
.field .count { position: absolute; right: .8rem; bottom: .55rem; color: var(--muted); font-size: .75rem; }
.check { display: flex; gap: .55rem; align-items: center; margin-top: 1rem; font-size: .92rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.form-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--paper)); padding: .7rem .9rem; border-radius: 10px; font-size: .9rem; }

.card { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem; }

/* ============ Portada / páginas simples ============ */
.home-wrap { min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; }
.home-card { width: 100%; max-width: 460px; text-align: center; background: var(--paper); border-radius: 24px; box-shadow: var(--shadow); padding: 2.2rem 1.5rem; }
.home-card .display { font-size: clamp(1.9rem, 8vw, 2.6rem); margin-bottom: .6rem; }
.home-card .field { text-align: left; }
.home-card .btn { margin-top: 1rem; }
.code-form { margin-top: 1.5rem; text-align: left; }
.code-form label { font-size: .85rem; font-weight: 700; }
.code-row { display: flex; gap: .5rem; margin-top: .4rem; }
.code-row .btn { margin: 0; }

/* ============ Evento ============ */
.ev-hero {
  text-align: center; padding: 3rem 16px 2.2rem;
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft) 0%, var(--bg) 70%);
}
.ev-date { margin: .5rem 0 0; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 1.1rem; }
.ev-main { max-width: 980px; margin: 0 auto; padding: 0 16px 3rem; }

.upload { max-width: 560px; margin: 0 auto 2.5rem; }
.upload > .muted { margin: .4rem 0 1.1rem; }
.picker {
  position: relative; display: flex; align-items: center; gap: 1rem; padding: 1.15rem;
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 16px;
  background: var(--accent-soft); cursor: pointer; transition: background .15s;
}
.picker:active { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent)); }
.picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.picker-icon { flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--paper); color: var(--accent); display: grid; place-items: center; }
.picker-text { display: flex; flex-direction: column; }
.picker-text small { color: var(--muted); }

.file-list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; }
.file-list li { display: flex; align-items: center; gap: .7rem; padding: .45rem .6rem; background: var(--bg); border-radius: 10px; font-size: .9rem; }
.file-list .fi { flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--line); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.file-list .fi img { width: 100%; height: 100%; object-fit: cover; }
.file-list .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .fs { color: var(--muted); font-size: .8rem; }

#sendBtn { margin-top: 1.3rem; }
.progress { margin-top: 1rem; }
.progress .track { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress .bar { height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width .2s; }
.progress p { margin: .5rem 0 0; font-size: .88rem; color: var(--muted); text-align: center; }
.form-error#upError { margin: 1rem 0 0; }

.thanks { text-align: center; padding: 1rem 0 .4rem; }
.thanks-mark { width: 64px; height: 64px; margin: 0 auto .8rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 1.7rem; animation: beat 1.2s ease 1; }
.thanks h3 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; }
.thanks p { color: var(--muted); }
@keyframes beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(.95); } }

.closed { max-width: 560px; margin: 0 auto 2.5rem; text-align: center; }
.closed .btn { margin-top: 1rem; }

/* ============ Galería ============ */
.gal-head { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.tabs { display: inline-flex; background: var(--paper); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.tabs a { padding: .45rem 1rem; border-radius: 999px; text-decoration: none; font-size: .9rem; font-weight: 500; color: var(--muted); }
.tabs a.on { background: var(--accent); color: #fff; }
.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; background: var(--paper); border-radius: var(--radius); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tile { background: var(--paper); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; position: relative; }
.tile-media { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: var(--line); cursor: zoom-in; overflow: hidden; }
.tile-media img, .tile-media video { width: 100%; height: 100%; object-fit: cover; }
.tile-media .play { position: absolute; inset: auto auto 8px 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: .7rem; padding-left: 2px; }
.noprev { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: .85rem; }
.rank { position: absolute; top: 8px; left: 8px; padding: .2rem .55rem; border-radius: 99px; font-weight: 700; font-size: .8rem; background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.rank-1 { background: #e8c463; } .rank-2 { background: #d9dde2; } .rank-3 { background: #e1b08b; }

.tile-foot { display: flex; gap: .4rem; align-items: flex-start; padding: .65rem .7rem .75rem; flex: 1; }
.tile-foot.col { flex-direction: column; align-items: stretch; }
.who { flex: 1; min-width: 0; }
.who strong { display: block; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who p { margin: .15rem 0 0; font-family: var(--serif); font-style: italic; font-size: .88rem; color: var(--quote); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

.vote { flex: none; display: inline-flex; align-items: center; gap: .25rem; border: 0; background: var(--bg); border-radius: 999px; padding: .35rem .6rem; cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--muted); min-height: 36px; }
.vote svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.vote.on { color: var(--heart); background: color-mix(in srgb, var(--heart) 14%, var(--paper)); }
.vote.on svg { fill: currentColor; }
.vote.pop svg { animation: beat .3s ease; }

.share-row { text-align: center; margin-top: 2.5rem; }

/* ============ Visor ============ */
.lb { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(18, 13, 10, .96); color: #fff; }
.lb[open] { display: flex; flex-direction: column; }
.lb::backdrop { background: rgba(18, 13, 10, .9); }
.lb-media { flex: 1; min-height: 0; display: grid; place-items: center; padding: 56px 8px 8px; }
.lb-media img, .lb-media video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lb-info { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 18px calc(1.2rem + env(safe-area-inset-bottom)); max-width: 760px; width: 100%; margin: 0 auto; }
.lb-info .who strong { font-size: 1rem; white-space: normal; }
.lb-info .who p { color: #e9dfd5; font-size: 1.05rem; -webkit-line-clamp: unset; }
.lb-info .vote { background: rgba(255,255,255,.12); color: #fff; min-height: 44px; padding: .5rem .9rem; }
.lb-info .vote.on { background: #fff; color: #d0435c; }
.lb-close { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.6rem; cursor: pointer; z-index: 2; }
.lb-nav { position: absolute; top: 45%; width: 44px; height: 60px; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 2rem; cursor: pointer; z-index: 2; border-radius: 10px; }
.lb-nav.prev { left: 6px; } .lb-nav.next { right: 6px; }
@media (hover: none) { .lb-nav { display: none; } }

/* ============ Admin ============ */
body.admin { --accent-soft: #f0e9e1; }
.adm-bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.adm-brand { font-family: var(--serif); font-weight: 600; text-decoration: none; font-size: 1.1rem; }
.adm-main { max-width: 1080px; margin: 0 auto; padding: 1.2rem 16px 4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.adm-h { margin-bottom: .8rem; }
.notice { margin: 0; padding: .8rem 1rem; border-radius: 12px; background: #fdf1e3; color: #7a4a14; font-size: .92rem; }
.notice.ok { background: #e6f1ea; color: #2f5a3b; }
.chip { display: inline-block; padding: .2rem .65rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .span2 { grid-column: span 2; } }
.form-grid .btn { margin-top: 1.2rem; }
.form-grid small { display: block; margin-top: .3rem; }

.ev-list { display: grid; gap: .6rem; }
.ev-row { display: grid; gap: .2rem; padding: 1rem 1.1rem; background: var(--paper); border-radius: 14px; box-shadow: var(--shadow); text-decoration: none; border-left: 4px solid var(--accent); }
.ev-row[data-cat="matrimonio"] { --accent: #a97455; --accent-soft: #f3e6dc; }
.ev-row[data-cat="bautizo"] { --accent: #5d82a6; --accent-soft: #e3ecf4; }
.ev-row[data-cat="quince"] { --accent: #b0587c; --accent-soft: #f6e2ea; }
.ev-row[data-cat="deporte"] { --accent: #c95a24; --accent-soft: #fbe5d8; }
.ev-row[data-cat="moda"] { --accent: #9c2f5e; --accent-soft: #f6e0ea; }
.ev-row[data-cat="animales"] { --accent: #2f8a84; --accent-soft: #dff1ef; }
.ev-row[data-cat="cumple"] { --accent: #7048e8; --accent-soft: #ebe5fd; }
.ev-row[data-cat="graduacion"] { --accent: #1f3a6e; --accent-soft: #e1e7f2; }
.ev-row[data-cat="empresa"] { --accent: #2b5d9e; --accent-soft: #e1eaf5; }
.ev-row[data-cat="babyshower"] { --accent: #b0609a; --accent-soft: #f6e3f0; }
.ev-row[data-cat="aniversario"] { --accent: #a8843f; --accent-soft: #f3ead8; }
.ev-row[data-cat="desfile"] { --accent: #8a1538; --accent-soft: #f4e1e6; }
.ev-row[data-cat="nightclub"] { --accent: #8b2cf5; --accent-soft: #ece0fe; }
.ev-row[data-cat="evento"] { --accent: #4f7f68; --accent-soft: #e2eee7; }
.ev-row .chip { justify-self: start; }
.ev-row strong { font-size: 1.05rem; }
.ev-stats { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .3rem; }
.status { font-size: .78rem; font-weight: 700; padding: .15rem .6rem; border-radius: 99px; }
.status.open { background: #e2f0e6; color: var(--ok); }
.status.shut { background: #efe9e3; color: var(--muted); }
.status.big { font-size: .85rem; padding: .45rem .9rem; }
.badge { background: #d0435c; color: #fff; font-size: .78rem; font-weight: 700; padding: .15rem .6rem; border-radius: 99px; }

.adm-head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end; }
.adm-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.adm-actions form { margin: 0; }
.adm-cols { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .adm-cols { grid-template-columns: 340px 1fr; } }
.qr-card { text-align: center; }
.qr-box { display: grid; place-items: center; margin: 1rem auto; padding: 14px; background: #fff; border-radius: 12px; width: max-content; max-width: 100%; }
.qr-box img, .qr-box canvas { max-width: 100%; height: auto; }
.url-input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; font-size: .82rem; color: var(--muted); background: var(--bg); }
.row-btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .8rem; }
.tile-foot .row-btns { justify-content: flex-start; margin-top: .6rem; }

.top { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; counter-reset: r; }
.top li { display: flex; gap: .8rem; align-items: center; counter-increment: r; }
.top li::before { content: counter(r); width: 1.4rem; font-family: var(--serif); font-size: 1.2rem; color: var(--accent); }
.top-thumb { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--line); display: grid; place-items: center; flex: none; text-decoration: none; }
.top-thumb img { width: 100%; height: 100%; object-fit: cover; }
.top li > span:nth-child(2) { flex: 1; }
.votes-n { font-weight: 700; color: #d0435c; }

.bulk-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.bulk-bar .check { margin: 0 auto 0 0; }
.adm-grid .tile-media { cursor: pointer; }
.sel { position: absolute; top: 8px; right: 8px; z-index: 2; background: #fff; border-radius: 8px; padding: 6px; display: flex; box-shadow: var(--shadow); }
.sel input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.danger-zone { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

/* ============ Cartel imprimible ============ */
.poster-page { background: var(--bg); }
.poster-tools { display: flex; gap: 1rem; align-items: center; justify-content: center; padding: 1rem; flex-wrap: wrap; }
.poster { max-width: 680px; margin: 0 auto; padding: 2rem 24px 3rem; text-align: center; }
.poster .display { font-size: clamp(2.2rem, 7vw, 3.6rem); }
.poster-call { font-family: var(--serif); font-style: italic; font-size: 1.6rem; margin: 1.6rem 0 0; }
.qr-box.big { padding: 18px; border: 2px solid var(--accent-soft); border-radius: 20px; }
.poster-steps { list-style: none; counter-reset: s; padding: 0; margin: 1.2rem auto 0; display: grid; gap: .5rem; max-width: 360px; text-align: left; }
.poster-steps li { counter-increment: s; display: flex; gap: .8rem; align-items: center; font-size: 1.05rem; }
.poster-steps li::before { content: counter(s); flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem; }
.poster-url { margin-top: 1.6rem; color: var(--muted); font-size: .95rem; word-break: break-all; }
@media print {
  .no-print { display: none !important; }
  .poster { padding-top: 0; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 14mm; }
}

/* ============ Selector de plantilla (panel) ============ */
.tpl-field { grid-column: 1 / -1; margin-top: 1rem; border: 0; padding: 0; min-width: 0; }
.tpl-field legend { font-size: .85rem; font-weight: 700; margin-bottom: .5rem; padding: 0; }
.tpl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 640px) { .tpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tpl-opt { position: relative; cursor: pointer; }
.tpl-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-card { display: block; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); transition: border-color .15s, transform .15s; }
.tpl-opt input:checked + .tpl-card { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.tpl-opt input:focus-visible + .tpl-card { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-sample { display: grid; place-items: center; gap: .3rem; height: 84px; padding: .6rem; text-align: center; }
.tpl-sample b { font-size: 1.35rem; font-weight: 600; line-height: 1; }
.tpl-sample i { display: block; width: 46px; height: 6px; border-radius: 99px; }
.tpl-meta { display: block; padding: .5rem .65rem .6rem; border-top: 1px solid var(--line); }
.tpl-meta strong { display: block; font-size: .88rem; }
.tpl-meta small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.3; }
.color-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; grid-column: 1 / -1; margin-top: 1rem; }
.color-row input[type="color"] { width: 48px; height: 40px; padding: 2px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; }
.color-row input[type="color"]:disabled { opacity: .35; cursor: not-allowed; }
.color-row .check { margin: 0; }
.tpl-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); }
.tpl-badge i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.tpl-rec { display: none; margin-top: .3rem; font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); }
.tpl-opt.is-rec .tpl-rec { display: block; }

/* ============ Pantalla en vivo (proyector) ============ */
body.screen { background: #0b0908; color: #fff; overflow: hidden; height: 100vh; padding: 0; }
.scr { position: fixed; inset: 0; overflow: hidden; background: #0b0908; cursor: default; }
body.idle .scr { cursor: none; }
.scr-stage { position: absolute; inset: 0; }
.scr-slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 1.1s ease; }
.scr-slide.in { opacity: 1; }
.scr-slide.out { opacity: 0; }
.scr-bg { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(38px) brightness(.45) saturate(1.2); transform: scale(1.1); }
.scr-bg.is-video { background-color: #0b0908; background-image: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 35%, #0b0908), #0b0908 70%); filter: none; }
.scr-bg.is-video.has-frame { filter: blur(38px) brightness(.45) saturate(1.2); }
/* Fotos y videos siempre centrados y ajustados a la pantalla, sean horizontales o verticales */
.scr-slide img, .scr-slide video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: contain; /* se ve completa, ajustada a la pantalla, sin recortes ni zoom */
}

.scr-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 9vh 5vw 5vh 5vw; padding-right: calc(5vw + 260px);
  background: linear-gradient(to top, rgba(8,6,5,.92) 0%, rgba(8,6,5,.7) 45%, transparent 100%);
}
.scr-caption.pop { animation: capIn .9s ease both; }
@keyframes capIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.scr-msg { margin: 0; max-width: 32ch; font-family: var(--display, var(--serif)); font-size: clamp(1.8rem, 4.2vw, 4.2rem); line-height: 1.12; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.scr-msg.mid { font-size: clamp(1.5rem, 3.3vw, 3.2rem); max-width: 38ch; }
.scr-msg.long { font-size: clamp(1.25rem, 2.5vw, 2.4rem); max-width: 46ch; }
.scr-author { margin: 1.2vh 0 0; display: flex; gap: 1.2rem; align-items: center; font-size: clamp(1.05rem, 1.8vw, 1.8rem); font-weight: 700; color: color-mix(in srgb, var(--accent) 45%, #fff); }
.scr-votes { color: #ff8fa0; font-weight: 700; }
.scr-new { display: inline-block; margin-bottom: 1.4vh; padding: .35em .9em; border-radius: 99px; background: var(--accent); color: #fff; font-weight: 700; font-size: clamp(.85rem, 1.3vw, 1.3rem); letter-spacing: .06em; text-transform: uppercase; animation: beat 1.2s ease 2; }
body[data-tpl="noche"] .scr-new, body[data-tpl="moderno"] .scr-new, body[data-tpl="neon"] .scr-new { color: #111; background: color-mix(in srgb, var(--accent) 60%, #fff); }

.scr-corner {
  position: absolute; right: 2.2vw; bottom: 3.5vh; z-index: 4; width: 220px;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: 14px; border-radius: 18px; background: rgba(255,255,255,.96); color: #1a1410; text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.scr-corner .scr-qr img, .scr-corner .scr-qr canvas { width: 150px; height: 150px; }
.scr-corner-text strong { display: block; font-family: var(--display, var(--serif)); font-size: 1.05rem; line-height: 1.15; }
.scr-corner-text span { display: block; margin-top: .2rem; font-size: .9rem; font-weight: 700; color: var(--accent); }
body.is-closed .scr-corner .scr-qr { display: none; }
body.is-empty .scr-corner { display: none; }
body[data-tpl="noche"] .scr-corner-text span, body[data-tpl="moderno"] .scr-corner-text span, body[data-tpl="neon"] .scr-corner-text span { color: #111; }

.scr-empty {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  text-align: center; padding: 4vh 6vw;
  background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--accent) 28%, #0b0908), #0b0908 75%);
}
.scr-empty .display { font-size: clamp(2.6rem, 6.5vw, 6rem); color: #fff; }
.scr-empty .eyebrow { color: color-mix(in srgb, var(--accent) 55%, #fff); }
.scr-empty-call { margin: 0; font-size: clamp(1.1rem, 2vw, 1.9rem); color: rgba(255,255,255,.8); }
.scr-qr.big { margin-top: 1.5vh; padding: 18px; background: #fff; border-radius: 20px; }
.scr-qr.big img, .scr-qr.big canvas { width: min(300px, 36vh); height: min(300px, 36vh); }

.scr-rank {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh;
  padding: 4vh 5vw 14vh;
  background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--accent) 30%, #0b0908), #0b0908 75%);
  animation: capIn .9s ease both;
}
.scr-rank .eyebrow { font-size: clamp(1rem, 1.8vw, 1.7rem); color: color-mix(in srgb, var(--accent) 55%, #fff); }
.scr-rank ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 3vw; align-items: flex-end; }
.scr-rank li { display: flex; flex-direction: column; align-items: center; gap: 1.2vh; position: relative; }
.scr-rank li img, .scr-rank li video { width: 22vw; max-width: 340px; aspect-ratio: 1; object-fit: cover; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.scr-rank li.r1 img, .scr-rank li.r1 video { width: 26vw; max-width: 400px; border: 5px solid #e8c463; }
.scr-rank li.r2 img, .scr-rank li.r2 video { border: 4px solid #d9dde2; }
.scr-rank li.r3 img, .scr-rank li.r3 video { border: 4px solid #e1b08b; }
.scr-rank li.r1 { order: 2; } .scr-rank li.r2 { order: 1; } .scr-rank li.r3 { order: 3; }
.scr-rank li::before { position: absolute; top: -18px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; color: #1a1410; }
.scr-rank li.r1::before { content: '1'; background: #e8c463; } .scr-rank li.r2::before { content: '2'; background: #d9dde2; } .scr-rank li.r3::before { content: '3'; background: #e1b08b; }
.scr-rank li span { text-align: center; }
.scr-rank li b { display: block; font-size: clamp(1rem, 1.7vw, 1.6rem); }
.scr-rank li small { color: #ff8fa0; font-weight: 700; font-size: clamp(.9rem, 1.4vw, 1.3rem); }

.scr-tools { position: absolute; top: 14px; left: 14px; z-index: 5; display: flex; gap: .8rem; align-items: center; font-size: .85rem; color: rgba(255,255,255,.7); transition: opacity .4s; }
.scr-tools button { border: 0; border-radius: 99px; padding: .55rem 1rem; background: rgba(255,255,255,.14); color: #fff; font-weight: 700; cursor: pointer; }
.scr-tools button:hover { background: rgba(255,255,255,.24); }
body.idle .scr-tools { opacity: 0; pointer-events: none; }

@media (max-width: 760px), (max-height: 480px) {
  .scr-corner { width: 150px; padding: 10px; } .scr-corner .scr-qr img, .scr-corner .scr-qr canvas { width: 100px; height: 100px; }
  .scr-caption { padding-right: calc(5vw + 170px); }
  .scr-rank { padding-right: 5vw; } .scr-rank ol { gap: 2vw; }
  .scr-tools span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .scr-caption.pop, .scr-new { animation: none; } }

/* ============ Retos fotográficos ============ */
.challenge-pick { border: 0; padding: 0; min-width: 0; }
.challenge-pick legend { font-size: .85rem; font-weight: 700; margin-bottom: .45rem; padding: 0; }
.challenge-pick legend small { font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip-opt { position: relative; cursor: pointer; }
.chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
.chip-opt span { display: inline-block; padding: .5rem .9rem; border-radius: 99px; border: 1.5px solid var(--line); background: var(--paper); font-size: .88rem; line-height: 1.25; transition: background .15s, border-color .15s; }
.chip-opt input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.chip-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
body[data-tpl="noche"] .chip-opt input:checked + span, body[data-tpl="moderno"] .chip-opt input:checked + span, body[data-tpl="neon"] .chip-opt input:checked + span { color: var(--bg); }
.chips.static { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.chips.static li { padding: .35rem .75rem; border-radius: 99px; background: var(--accent-soft); color: var(--ink); font-size: .85rem; }

.reto-filter { display: flex; gap: .45rem; overflow-x: auto; padding: 2px 2px .6rem; margin: -.2rem 0 .8rem; scrollbar-width: thin; }
.reto-filter a { flex: none; padding: .4rem .85rem; border-radius: 99px; background: var(--paper); box-shadow: var(--shadow); text-decoration: none; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.reto-filter a span { margin-left: .25rem; font-size: .75rem; opacity: .7; }
.reto-filter a.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--accent); }
.reto-note { margin: -.3rem 0 .9rem; }
.reto-tag { display: inline-block; max-width: 100%; margin: .2rem 0 0; padding: .1rem .5rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-info .reto-tag { background: rgba(255,255,255,.14); color: #fff; }

.winners { margin: 0 auto 2.5rem; }
.winners-head { text-align: center; margin-bottom: 1.1rem; }
.winners-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 640px) { .winners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.winner { background: var(--paper); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.winner-media { position: relative; display: block; aspect-ratio: 1; background: var(--line); }
.winner-media img, .winner-media video { width: 100%; height: 100%; object-fit: cover; }
.winner-badge { position: absolute; top: 8px; left: 8px; padding: .2rem .6rem; border-radius: 99px; background: #e8c463; color: #2b231e; font-size: .75rem; font-weight: 700; }
.winner-title { margin: .6rem .75rem 0; font-weight: 700; font-size: .92rem; line-height: 1.25; }
.winner-who { margin: .2rem .75rem .75rem; font-size: .85rem; color: var(--muted); }

.retos-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.retos-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .75rem .9rem; border-radius: 12px; background: var(--bg); }
.retos-list form { margin: 0; grid-column: 2; grid-row: 1 / span 2; }
.reto-main strong { display: block; }
.reto-win { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.reto-win .top-thumb { width: 38px; height: 38px; }
.retos-empty { margin-top: .8rem; }
.reto-add { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-top: 1rem; }
.reto-add .field { flex: 1 1 240px; margin: 0; }

.scr-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.4vh; }
.scr-tags .scr-new { margin: 0; }
.scr-reto { display: inline-block; padding: .35em .9em; border-radius: 99px; background: rgba(255,255,255,.16); color: #fff; font-weight: 700; font-size: clamp(.85rem, 1.3vw, 1.3rem); }

/* ============ Top 3 en vivo (pantalla) ============ */
.scr-live {
  position: absolute; top: 2.5vh; right: 2.2vw; z-index: 4; width: min(330px, 30vw);
  padding: 12px 12px 8px; border-radius: 18px;
  background: rgba(12, 9, 7, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,.4); color: #fff;
}
.scr-live-title { margin: 0 0 8px; display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.scr-live-title .dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 0 0 rgba(255,77,94,.7); animation: livePulse 1.8s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 9px rgba(255,77,94,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,94,0); } }
.scr-live ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.scr-live li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 12px; background: rgba(255,255,255,.07); position: relative; }
.scr-live li::before { content: ''; position: absolute; left: -2px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; }
.scr-live li.p1::before { background: #e8c463; } .scr-live li.p2::before { background: #d9dde2; } .scr-live li.p3::before { background: #e1b08b; }
.scr-live li.up { animation: liveUp 1.4s ease; }
@keyframes liveUp { 0% { background: color-mix(in srgb, var(--accent) 70%, transparent); transform: translateY(8px); } 100% { background: rgba(255,255,255,.07); transform: none; } }
.lv-thumb { width: 46px; height: 46px; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.1); }
.lv-thumb img, .lv-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-text { min-width: 0; }
.lv-text b { display: block; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-text small { display: block; font-size: .75rem; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-votes { font-weight: 700; color: #ff8fa0; font-size: 1rem; font-variant-numeric: tabular-nums; }
body.show-rank .scr-live, body.in-awards .scr-live, body.is-empty .scr-live { display: none; }
body.in-awards .scr-corner { display: none; }

/* ============ Premiación (pantalla) ============ */
.scr-awards {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; text-align: center; padding: 4vh 4vw;
  background: radial-gradient(80% 70% at 50% 35%, color-mix(in srgb, var(--accent) 38%, #0b0908), #0b0908 78%);
}
.scr-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.aw-intro .eyebrow, .aw-podium .eyebrow, .aw-reto .eyebrow { font-size: clamp(1rem, 1.8vw, 1.7rem); color: color-mix(in srgb, var(--accent) 50%, #fff); }
.aw-intro .display { color: #fff; font-size: clamp(3rem, 8vw, 7.5rem); }
.aw-intro.go { animation: awZoom 1.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes awZoom { from { opacity: 0; transform: scale(.85); letter-spacing: .1em; } to { opacity: 1; transform: none; } }
.aw-podium { width: 100%; }
.aw-places { list-style: none; margin: 4vh 0 0; padding: 0; display: flex; justify-content: center; align-items: flex-end; gap: 3vw; }
.aw-slot { display: flex; flex-direction: column; align-items: center; width: 24vw; max-width: 380px; }
.aw-slot.p1 { width: 29vw; max-width: 450px; }
.aw-slot.empty { visibility: hidden; }
.aw-card {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 20px; overflow: hidden;
  background: rgba(255,255,255,.08); border: 3px dashed rgba(255,255,255,.22);
  display: grid; place-items: center;
}
.aw-q { font-family: var(--display, var(--serif)); font-size: clamp(3rem, 7vw, 7rem); color: rgba(255,255,255,.35); }
.aw-slot.shown .aw-card { border: 5px solid #e1b08b; animation: awFlip .9s cubic-bezier(.2,.8,.2,1) both; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.aw-slot.p2.shown .aw-card { border-color: #d9dde2; }
.aw-slot.p1.shown .aw-card { border-color: #e8c463; box-shadow: 0 0 0 8px rgba(232,196,99,.18), 0 30px 90px rgba(0,0,0,.55); }
@keyframes awFlip { from { transform: rotateY(90deg) scale(.9); opacity: .3; } to { transform: none; opacity: 1; } }
.aw-card img, .aw-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aw-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 14px; background: linear-gradient(to top, rgba(0,0,0,.85), transparent); color: #fff; }
.aw-cap b { display: block; font-size: clamp(1.1rem, 2vw, 2rem); }
.aw-cap small { display: block; color: #ffb3bf; font-weight: 700; font-size: clamp(.9rem, 1.3vw, 1.3rem); }
.aw-step { margin-top: 1.4vh; width: 100%; padding: 1.4vh 0; border-radius: 12px 12px 0 0; font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.6rem); color: #1a1410; }
.aw-slot.p1 .aw-step { background: #e8c463; padding-block: 3.2vh; }
.aw-slot.p2 .aw-step { background: #d9dde2; padding-block: 2.2vh; }
.aw-slot.p3 .aw-step { background: #e1b08b; }
.aw-reto { display: flex; flex-direction: column; align-items: center; gap: 1.8vh; }
.aw-reto.go { animation: awZoom 1.1s cubic-bezier(.2,.8,.2,1) both; }
.aw-reto-title { margin: 0; font-family: var(--display, var(--serif)); font-size: clamp(2rem, 4.5vw, 4.4rem); color: #fff; text-wrap: balance; }
.aw-reto-media { position: relative; width: min(60vh, 46vw); aspect-ratio: 1; border-radius: 22px; overflow: hidden; border: 5px solid #e8c463; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.aw-reto-media img, .aw-reto-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-reto-who { margin: 0; font-size: clamp(1.3rem, 2.4vw, 2.4rem); font-weight: 700; color: #fff; }
@media (prefers-reduced-motion: reduce) { .aw-intro.go, .aw-reto.go, .aw-slot.shown .aw-card, .scr-live li.up, .scr-live-title .dot { animation: none; } }

/* Panel: controles de la pantalla */
.screen-ctrl { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .9rem; }
.screen-ctrl form { margin: 0; }
.screen-live-state { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: #d0435c; }

/* ============ Mensajes de voz ============ */
.voice-rec { margin-top: 1rem; display: grid; gap: .5rem; }
.voice-btn {
  width: 100%; display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; text-align: left;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); cursor: pointer; transition: border-color .15s, background .15s;
}
.voice-btn:hover { border-color: var(--accent); }
.voice-btn:disabled { opacity: .5; cursor: not-allowed; }
.voice-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.voice-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.voice-txt small { color: var(--muted); }
.voice-time { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: #d0435c; }
.voice-btn.is-rec { border-color: #d0435c; background: color-mix(in srgb, #d0435c 8%, var(--paper)); }
.voice-btn.is-rec .voice-ico { background: #d0435c; color: #fff; animation: recPulse 1.4s infinite; }
@keyframes recPulse { 0% { box-shadow: 0 0 0 0 rgba(208,67,92,.5); } 70% { box-shadow: 0 0 0 12px rgba(208,67,92,0); } 100% { box-shadow: 0 0 0 0 rgba(208,67,92,0); } }
.voice-done { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem .8rem; border-radius: 14px; background: var(--accent-soft); }
.voice-done audio { flex: 1 1 220px; min-width: 0; height: 40px; }
.voice-rec .form-error { margin: 0; }

.voice-tile {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
  background: linear-gradient(160deg, var(--accent-soft), color-mix(in srgb, var(--accent) 35%, var(--paper)));
  color: var(--accent);
}
.voice-tile small { font-size: .78rem; font-weight: 700; color: var(--ink); }
.voice-tile-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--accent); box-shadow: var(--shadow); }
.voice-tile-ico.lg { width: 96px; height: 96px; }
.voice-bars { display: flex; align-items: center; gap: 4px; height: 26px; }
.voice-bars i { width: 4px; border-radius: 4px; background: var(--accent); opacity: .7; }
.voice-bars i:nth-child(1) { height: 30%; } .voice-bars i:nth-child(2) { height: 70%; } .voice-bars i:nth-child(3) { height: 100%; }
.voice-bars i:nth-child(4) { height: 55%; } .voice-bars i:nth-child(5) { height: 85%; } .voice-bars i:nth-child(6) { height: 45%; } .voice-bars i:nth-child(7) { height: 25%; }
.winner-media .voice-tile { position: absolute; }
.lb-voice { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: min(520px, 100%); padding: 1rem; text-align: center; color: #fff; }
.lb-voice p { margin: 0; font-size: 1.05rem; }
.lb-voice audio { width: 100%; }
.adm-audio { width: 100%; height: 36px; margin: .4rem 0 .2rem; }
@media (prefers-reduced-motion: reduce) { .voice-btn.is-rec .voice-ico { animation: none; } }
.tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs a { white-space: nowrap; }
.t-short { display: none; }
@media (max-width: 480px) { .t-long { display: none; } .t-short { display: inline; } .tabs a { padding-inline: .8rem; } }

/* ============ Video resumen ============ */
.rs-main { max-width: 900px; }
.rs-opt { border: 0; padding: 0; margin-top: 1rem; min-width: 0; }
.rs-opt legend { font-size: .85rem; font-weight: 700; margin-bottom: .45rem; padding: 0; }
.rs-song input[type="file"] { padding: .6rem; }
.rs-song small { display: block; margin-top: .35rem; }
.rs-stage-card { display: grid; gap: 1rem; }
.rs-status { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; justify-content: space-between; }
.rs-status strong { font-size: 1.1rem; }
.rs-canvas-wrap { display: grid; place-items: center; background: #0b0908; border-radius: 14px; padding: 12px; }
.rs-canvas-wrap canvas { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 8px; }
.rs-canvas-wrap.is-v canvas { width: auto; max-height: 62vh; }
.rs-result { display: grid; gap: .8rem; }
.rs-result video { width: 100%; max-height: 70vh; background: #000; border-radius: 12px; }
.rs-result .row-btns { justify-content: flex-start; margin: 0; }
.rs-card.is-hl { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.rs-admin-video { width: 100%; max-height: 420px; margin-top: .8rem; background: #000; border-radius: 12px; }

.summary { max-width: 560px; margin: 0 auto 2.5rem; text-align: center; display: grid; gap: .7rem; }
.summary .eyebrow { margin: 0; }
.summary video { width: 100%; max-height: 72vh; background: #000; border-radius: 14px; }
.summary .row-btns { margin: 0; }
.summary .small { margin: 0; }

/* ============ Borrado automático ============ */
.purge-note { display: grid; gap: .6rem; }
.purge-note p { margin: 0; }
.purge-note .screen-ctrl { margin: 0; }
.del-chip { font-size: .75rem; font-weight: 700; padding: .15rem .6rem; border-radius: 99px; background: #fdf1e3; color: #7a4a14; }
.keep-warn { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 12px; background: color-mix(in srgb, #e0a030 16%, var(--paper)); color: var(--ink); font-size: .92rem; text-align: left; }

/* ============ Instagram ============ */
.ev-social { margin: 1rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.ev-social a { padding: .35rem .85rem; border-radius: 99px; background: var(--paper); box-shadow: var(--shadow); color: var(--accent); font-weight: 700; font-size: .9rem; text-decoration: none; }
.ev-social-hint { margin: .45rem 0 0; font-size: .78rem; color: var(--muted); }
body[data-tpl="academico"] .ev-social-hint { color: rgba(255,255,255,.7); }
body[data-tpl="corporativo"] .ev-social { justify-content: flex-start; }
.brand-foot { margin: 2.5rem auto 0; padding-top: 1.2rem; border-top: 1px solid var(--line); max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; font-size: .85rem; color: var(--muted); }
.brand-foot a { color: var(--ink); text-decoration: none; }
.brand-foot a small { color: var(--muted); font-weight: 400; }
.home-wrap .brand-foot { border-top: 0; margin-top: 1.2rem; }
.home-wrap { grid-auto-rows: min-content; align-content: center; }
.poster-ig { margin: 1.2rem 0 0; font-size: 1.05rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .7rem; }
.poster-ig strong { color: var(--accent); }
.poster-brand { margin: .6rem 0 0; font-size: .85rem; color: var(--muted); }
.scr-tag { display: block; margin-top: .25rem; font-style: normal; font-weight: 700; font-size: .85rem; color: #1a1410; }

/* ============ Logo ============ */
.logo-on-dark { display: none !important; }
body[data-tpl="noche"] .logo-on-light, body[data-tpl="neon"] .logo-on-light { display: none !important; }
body[data-tpl="noche"] .logo-on-dark, body[data-tpl="neon"] .logo-on-dark { display: block !important; }
.home-logo { display: flex; justify-content: center; margin-bottom: 1.2rem; }
.home-logo-img { width: min(300px, 80%); height: auto; }
.brand-link { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.brand-logo { width: 190px; max-width: 70%; height: auto; }
.adm-brand { display: inline-flex; align-items: center; }
.adm-logo { height: 30px; width: auto; }
.adm-bar .adm-marca { margin-left: auto; margin-right: 1rem; }
.poster-brand { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.poster-logo { width: 220px; height: auto; }
.scr-logo { width: 150px; height: auto; margin-top: .2rem; }
.brand-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 1rem; }
.brand-preview > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.4rem 1rem; border-radius: 12px; min-height: 120px; }
.brand-preview img { max-width: 100%; max-height: 70px; width: auto; height: auto; }
.bp-light { background: #faf6f0; box-shadow: inset 0 0 0 1px var(--line); }
.bp-dark { background: #17130f; }
.bp-light small { color: #8a7b6e; } .bp-dark small { color: #b0a291; }
/* Portada y panel con el color de tu marca */
body.brand { --accent: #d9634f; --accent-soft: #fbe6e1; }
.adm-bar .link { white-space: nowrap; }

/* ============ Modo fotógrafo ============ */
.ph-main { max-width: 900px; }
.ph-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; margin-bottom: 1rem; }
.ph-settings .check { grid-column: 1 / -1; }
.ph-picker { padding: 1.6rem 1.2rem; }
.ph-queue-card { display: grid; gap: .8rem; }
.ph-summary { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.ph-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ph-item { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--line); }
.ph-thumb { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .8rem; }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ph-item.is-wait .ph-thumb { opacity: .45; }
.ph-track { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 5px; border-radius: 9px; background: rgba(0,0,0,.35); overflow: hidden; }
.ph-bar { display: block; height: 100%; width: 0; background: #fff; transition: width .2s; }
.ph-item.is-ok .ph-track, .ph-item.is-err .ph-track { display: none; }
.ph-st { position: absolute; top: 6px; right: 6px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: none; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; }
.ph-item.is-ok .ph-st { display: grid; background: var(--ok); }
.ph-item.is-err .ph-st { display: grid; background: var(--danger); }
.ph-item.is-err { box-shadow: inset 0 0 0 2px var(--danger); }
.pro-tag { display: inline-block; white-space: nowrap; margin: .2rem .3rem 0 0; padding: .1rem .5rem; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: .7rem; font-weight: 700; letter-spacing: .02em; }

/* ============ Descargas ============ */
.dl-box { display: grid; gap: .6rem; margin-top: 1.2rem; text-align: left; }
.dl-box .btn svg, .sel-toggle svg { flex: none; }
.dl-box > .small { margin: 0; text-align: center; }
.dl-sub { margin: .6rem 0 0; font-size: .85rem; font-weight: 700; }
.dl-opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.dl-opts a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 99px; background: var(--accent-soft); color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 500; }
.dl-opts a span { font-size: .75rem; font-weight: 700; color: var(--accent); }
.dl-opts a:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.gal-head .sel-toggle { order: 3; }
.lb-dl { flex: none; display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .5rem .9rem; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; font-size: .85rem; font-weight: 700; }
.lb-dl:hover { background: rgba(255,255,255,.22); }
@media (max-width: 480px) { .lb-dl span { display: none; } }

body.selecting .grid .tile { cursor: pointer; }
body.selecting .grid .tile .tile-media { cursor: pointer; }
body.selecting .grid .tile::after {
  content: ''; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0,0,0,.25); box-shadow: 0 1px 4px rgba(0,0,0,.3); pointer-events: none;
}
body.selecting .grid .tile.picked { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
body.selecting .grid .tile.picked::after {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.sel-bar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem .55rem 1rem; border-radius: 999px;
  background: var(--ink); color: var(--paper); box-shadow: 0 12px 34px rgba(0,0,0,.3); max-width: calc(100% - 24px);
}
.sel-bar #selCount { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.sel-bar .btn-ghost { color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
.sel-bar .link { color: var(--paper); opacity: .8; }
.sel-bar [aria-disabled="true"] { opacity: .45; pointer-events: none; }
.sel-bar .btn { white-space: nowrap; }

/* ============ Huincha superior ============ */
.strip { background: var(--accent); color: #fff; padding-top: env(safe-area-inset-top, 0px); }
.strip-in {
  max-width: 980px; margin: 0 auto; min-height: 52px; display: flex; align-items: center; gap: .8rem;
  padding: .45rem max(16px, env(safe-area-inset-right, 0px)) .45rem max(16px, env(safe-area-inset-left, 0px));
}
.strip-logo { display: inline-flex; align-items: center; color: inherit; text-decoration: none; margin-right: auto; min-width: 0; }
.strip-img { height: 26px; width: auto; max-width: 100%; filter: brightness(0) invert(1); } /* logo de un solo color para que se lea sobre cualquier tono */
.strip-img-d { display: none; }
.strip-tag, .strip-ig { font-size: .82rem; font-weight: 700; color: inherit; text-decoration: none; white-space: nowrap; }
.strip-tag { opacity: .85; }
.strip-ig { padding: .3rem .75rem; border-radius: 99px; background: rgba(255,255,255,.18); }
.strip-ig:hover { background: rgba(255,255,255,.28); }
@media (max-width: 420px) { .strip-tag { display: none; } .strip-img { height: 22px; } }
/* Diseños de color claro: texto y logo oscuros sobre la huincha */
body[data-tpl="noche"] .strip, body[data-tpl="neon"] .strip { color: #17130f; }
body[data-tpl="noche"] .strip-img-w, body[data-tpl="neon"] .strip-img-w { display: none; }
body[data-tpl="noche"] .strip-img-d, body[data-tpl="neon"] .strip-img-d { display: block; filter: brightness(0); opacity: .85; }
body[data-tpl="noche"] .strip-ig, body[data-tpl="neon"] .strip-ig { background: rgba(0,0,0,.12); }
.home-wrap { min-height: calc(100svh - 52px); }

/* ============ Código del evento ============ */
.strip-code { font-size: .8rem; white-space: nowrap; opacity: .95; }
.strip-code b { margin-left: .25rem; padding: .15rem .45rem; border-radius: 6px; background: rgba(255,255,255,.2); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
body[data-tpl="noche"] .strip-code b, body[data-tpl="neon"] .strip-code b { background: rgba(0,0,0,.12); }
@media (max-width: 420px) { .strip-code { font-size: .72rem; } .strip-ig { display: none; } }
.code-line { margin: .3rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .92rem; }
.code-pill { border: 0; cursor: pointer; padding: .3rem .7rem; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 700; letter-spacing: .14em; font-size: 1rem; font-variant-numeric: tabular-nums; }
.code-mini { margin-left: .35rem; padding: .05rem .4rem; border-radius: 5px; background: var(--bg); color: var(--muted); font-size: .72rem; letter-spacing: .1em; font-weight: 700; vertical-align: middle; }
.poster-code { margin: 1.4rem auto 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; font-size: .95rem; color: var(--muted); }
.poster-code strong { font-size: 2.2rem; letter-spacing: .25em; padding: .3rem 1rem .3rem 1.25rem; border-radius: 12px; border: 2px dashed var(--accent); color: var(--ink); font-family: var(--sans); }
.scr-code { display: block; margin-top: .2rem; font-size: .8rem; color: #4a3f36; }
.scr-code b { letter-spacing: .12em; color: #1a1410; }

/* ============ Editar evento ============ */
.ev-item { position: relative; }
.ev-edit { position: absolute; top: .8rem; right: .9rem; z-index: 1; padding: .3rem .75rem; border-radius: 99px; background: var(--bg); color: var(--ink); font-size: .8rem; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.ev-edit:hover { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.edit-card { scroll-margin-top: 80px; }
.edit-card:target { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.edit-card > .small { margin: .3rem 0 0; }
.code-big { display: flex; flex-direction: column; align-items: center; gap: .25rem; margin: .4rem 0 .2rem; }
.code-big strong { font-size: 2rem; letter-spacing: .22em; padding: .35rem .9rem .35rem 1.1rem; border-radius: 12px; border: 2px dashed var(--accent); font-variant-numeric: tabular-nums; }
.qr-card .regen { margin: .5rem 0 .8rem; }
.qr-card .regen .link { font-size: .85rem; }
.qr-card .row-btns .btn-sm { font-size: .82rem; }

/* ============ Botón SUBIR y página de subida ============ */
.btn-up { margin-top: 1.4rem; min-height: 58px; padding: .9rem 2.6rem; font-size: 1.15rem; letter-spacing: .14em; box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent); }
.btn-up:hover { transform: translateY(-1px); }
.up-hint { margin: .6rem 0 0; font-size: .82rem; color: var(--muted); }
body[data-tpl="academico"] .up-hint { color: rgba(255,255,255,.75); }
body[data-tpl="noche"] .btn-up, body[data-tpl="neon"] .btn-up { color: #17130f; }
.fab-up {
  position: fixed; z-index: 25; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 64px; padding: 0 1.3rem;
  border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .12em; font-size: .95rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .25s, transform .25s;
}
body.scrolled .fab-up { opacity: 1; transform: none; pointer-events: auto; }
body.selecting .fab-up { display: none; }
body[data-tpl="noche"] .fab-up, body[data-tpl="neon"] .fab-up { color: #17130f; }
.up-hero { padding-top: 1.4rem; padding-bottom: 1.6rem; }
.back-gal { display: inline-block; margin-bottom: 1rem; padding: .4rem .9rem; border-radius: 99px; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 700; }
body[data-tpl="academico"] .back-gal { color: #1f3a6e; }
.upload-page .upload { margin-top: 0; }
.thanks .row-btns { justify-content: center; }

/* ============ Slide de las más vistas ============ */
.hl { max-width: 520px; margin: 1.4rem auto 0; }
.hl-track { position: relative; aspect-ratio: 1 / 1; max-width: 100%; border-radius: var(--radius); overflow: hidden; background: #0b0908; box-shadow: var(--shadow); }
@media (min-width: 700px) { .hl { max-width: 760px; } .hl-track { aspect-ratio: 16 / 10; } }
.hl-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; cursor: zoom-in; }
.hl-slide.on { opacity: 1; z-index: 1; }
.hl-bg { position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(26px) brightness(.55); }
.hl-slide img, .hl-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hl-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding: 2.4rem 1rem .9rem; text-align: left; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.72), transparent);
}
.hl-slide figcaption strong { font-size: .95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-slide figcaption span { flex: none; font-size: .82rem; font-weight: 700; color: #ffd0d8; }
.hl-label { position: absolute; top: 10px; left: 10px; z-index: 2; padding: .25rem .65rem; border-radius: 99px; background: rgba(0,0,0,.5); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.hl-dots { display: flex; justify-content: center; gap: 7px; margin-top: .7rem; }
.hl-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--ink) 22%, transparent); cursor: pointer; transition: width .3s, background .3s; }
.hl-dots button.on { width: 22px; background: var(--accent); }
body[data-tpl="academico"] .hl-dots button { background: rgba(255,255,255,.35); }
body[data-tpl="academico"] .hl-dots button.on { background: #d9b862; }
@media (prefers-reduced-motion: reduce) { .hl-slide { transition: none; } }

/* Slide a ancho completo, con alto adaptado a cada pantalla */
html, body { overflow-x: clip; }
.hl { max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.hl-track, .hl .hl-track {
  width: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none;
  /* celular vertical: casi cuadrado · tablet/computador: panorámico · celular horizontal: casi toda la pantalla */
  height: clamp(260px, min(100vw, 62vh), 720px);
}
@media (orientation: landscape) and (max-height: 500px) { .hl .hl-track { height: 78vh; } }
.hl-slide figcaption { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 700px) { .hl-slide figcaption { padding-left: max(5vw, 16px); padding-right: max(5vw, 16px); } .hl-slide figcaption strong { font-size: 1.1rem; } }
.hl-label { left: max(12px, env(safe-area-inset-left, 0px)); }

/* SUBIR y Compartir, uno al lado del otro */
.act-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7rem; margin-top: 1.4rem; }
.act-row .btn-up { margin-top: 0; }
.act-row .btn-share { min-height: 58px; padding: .9rem 1.4rem; font-size: 1rem; background: var(--paper); }
.act-row .btn-share svg { flex: none; }
.share-row { margin-top: 2.5rem; }
body[data-tpl="corporativo"] .ev-hero .act-row { justify-content: flex-start; }
body[data-tpl="academico"] .ev-hero .btn-share { color: #1f3a6e; box-shadow: none; }
@media (max-width: 400px) { .act-row .btn-up { padding-inline: 1.6rem; } .act-row .btn-share { padding-inline: 1rem; } }

/* Botón flotante de contacto */
.fab-contact {
  position: fixed; z-index: 25; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .5rem; height: 54px; padding: 0 1.15rem 0 1rem;
  border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 700; font-size: .92rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: transform .2s;
}
.fab-contact:hover { transform: translateY(-2px); }
.fab-contact svg { flex: none; }
body.selecting .fab-contact { display: none; }
@media (max-width: 380px) { .fab-contact span { display: none; } .fab-contact { width: 54px; padding: 0; justify-content: center; } }

/* ============ Carrusel de las mejores fotos (ancho completo) ============ */
.hl { display: none; }
.cr { width: 100vw; margin: 1.4rem calc(50% - 50vw) 0; }
.cr-view { position: relative; overflow: hidden; background: #0b0908; touch-action: pan-y; }
.cr-track { display: flex; transition: transform .8s cubic-bezier(.4, .1, .2, 1); will-change: transform; }
.cr-slide {
  position: relative; flex: 0 0 100%; margin: 0; cursor: zoom-in;
  /* formato horizontal a pantalla completa: 3:2 en celular, 16:9 en pantallas grandes, sin pasar del 82% del alto */
  aspect-ratio: 3 / 2; max-height: 82vh; max-height: 82svh;
}
@media (min-width: 900px) { .cr-slide { aspect-ratio: 16 / 9; } }
@media (orientation: landscape) and (max-height: 500px) { .cr-slide { aspect-ratio: auto; height: 82vh; height: 82svh; } }
.cr-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.cr-slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding: 2.6rem max(16px, 5vw) 1rem; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}
.cr-slide figcaption strong { font-size: clamp(.95rem, 1.6vw, 1.25rem); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-slide figcaption span { flex: none; font-weight: 700; font-size: .9rem; color: #ffd0d8; }
.cr-label { position: absolute; top: 12px; left: max(12px, env(safe-area-inset-left, 0px)); padding: .28rem .7rem; border-radius: 99px; background: rgba(0,0,0,.5); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.cr-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(0,0,0,.38); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.cr-nav:hover { background: rgba(0,0,0,.6); }
.cr-nav.prev { left: max(12px, env(safe-area-inset-left, 0px)); } .cr-nav.next { right: max(12px, env(safe-area-inset-right, 0px)); }
@media (hover: none) { .cr-nav { display: none; } }
.cr-dots { display: flex; justify-content: center; gap: 7px; margin-top: .75rem; }
.cr-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--ink) 22%, transparent); cursor: pointer; transition: width .3s, background .3s; }
.cr-dots button.on { width: 22px; background: var(--accent); }
body[data-tpl="academico"] .cr-dots button { background: rgba(255,255,255,.35); }
body[data-tpl="academico"] .cr-dots button.on { background: #d9b862; }
@media (prefers-reduced-motion: reduce) { .cr-track { transition: none; } }

/* ============ Las 10 mejores para Instagram ============ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ig-main { max-width: 980px; }
.ig-form { display: grid; gap: 1.2rem; }
.ig-bar { position: sticky; top: 64px; z-index: 4; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; padding: .8rem 1.1rem; }
.ig-bar .check { margin: 0; }
.ig-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .ig-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ig-pick { position: relative; display: block; cursor: pointer; border-radius: 12px; overflow: hidden; background: var(--line); aspect-ratio: 4 / 5; max-width: 100%; }
.ig-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ig-pick img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s; }
.ig-pick input:not(:checked) ~ img { opacity: .4; }
.ig-pick input:checked ~ img { outline: 3px solid var(--accent); outline-offset: -3px; }
.ig-pick input:disabled ~ img { cursor: not-allowed; }
.ig-pick input:focus-visible ~ img { outline: 3px solid var(--ink); outline-offset: -3px; }
.ig-num { position: absolute; top: 8px; left: 8px; min-width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; padding: 0 .4rem; font-weight: 800; font-size: .85rem; color: #fff; background: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.ig-num:empty { background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px #fff; }
.ig-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .6rem .5rem; font-size: .78rem; font-weight: 700; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-actions { justify-content: flex-start; }
#igCaption { min-height: 180px; font-size: 15px; }

/* ============ Términos y condiciones ============ */
.terms-ok { display: flex; gap: .65rem; align-items: flex-start; margin-top: 1.2rem; padding: .85rem .95rem; border-radius: 12px; background: var(--bg); font-size: .88rem; line-height: 1.45; cursor: pointer; transition: box-shadow .2s; }
.terms-ok input { flex: none; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--accent); }
.terms-ok a { color: var(--accent); font-weight: 700; }
.terms-ok.need { box-shadow: inset 0 0 0 2px var(--accent); }
.terms { max-width: 720px; margin: 0 auto; padding: 1.6rem max(16px, env(safe-area-inset-right, 0px)) 3rem max(16px, env(safe-area-inset-left, 0px)); }
.terms h1 { margin: .2rem 0 .6rem; }
.terms h2 { margin: 1.8rem 0 .5rem; font-size: 1.15rem; }
.terms p, .terms li { color: var(--ink); line-height: 1.65; max-width: 65ch; }
.terms ul { padding-left: 1.2rem; }
.terms .lead { font-size: 1.05rem; }
.terms-link { font-size: .8rem; color: var(--muted); }

/* ============ Contratar: packs, calendario y reserva ============ */
.home-hire { margin-top: 1rem; }
.hire-link { font-size: .88rem; color: var(--ink); text-decoration: none; margin-bottom: .4rem; }
.hire-link b { color: var(--accent); }
.book-hero { text-align: center; padding: 3rem max(16px, env(safe-area-inset-right, 0px)) 2rem max(16px, env(safe-area-inset-left, 0px)); background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft) 0%, var(--bg) 70%); }
.book-hero .display { max-width: 18ch; margin: 0 auto; }
.book-hero .lead { max-width: 58ch; margin: 1rem auto 1.4rem; }
.book-main { max-width: 1080px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 3rem max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 2rem; }
.packs { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pack { position: relative; display: flex; flex-direction: column; gap: .5rem; background: var(--paper); border-radius: var(--radius); padding: 1.6rem 1.4rem; box-shadow: var(--shadow); border: 1px solid var(--line); }
.pack.is-hl { border: 2px solid var(--accent); }
@media (min-width: 860px) { .pack.is-hl { transform: translateY(-10px); } }
.pack-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: .25rem .8rem; border-radius: 99px; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.pack h2 { font-size: 1.4rem; }
.pack-price { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pack-price small { font-size: .85rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pack-desc { margin: 0 0 .4rem; }
.pack ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; flex: 1; }
.pack li { position: relative; padding-left: 1.6rem; font-size: .93rem; line-height: 1.4; }
.pack li::before { content: ''; position: absolute; left: 0; top: .15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9634f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat; }
.book-card { scroll-margin-top: 20px; }
.book-grid { display: grid; gap: 1.6rem; margin-top: 1rem; }
@media (min-width: 860px) { .book-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.book-form .field:first-of-type { margin-top: 0; }
.book-two { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.book-date { margin: 0 0 .6rem; padding: .7rem .9rem; border-radius: 12px; background: var(--accent-soft); font-size: .95rem; }
.book-date.need { box-shadow: inset 0 0 0 2px var(--accent); }
.book-form .btn-block { margin-top: 1.2rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cal { background: var(--bg); border-radius: 16px; padding: 1rem; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.cal-head strong { font-size: 1.05rem; }
.cal-nav { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow); font-size: 1.4rem; cursor: pointer; color: var(--ink); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-week, .cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.cal-week span { font-size: .72rem; font-weight: 700; color: var(--muted); padding: .3rem 0; }
.cal-day { aspect-ratio: 1; max-width: 100%; border: 0; border-radius: 10px; font-size: .92rem; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--paper); }
.cal-day.free { background: #e4f3e8; color: #24663a; }
.cal-day.free:hover { box-shadow: inset 0 0 0 2px #2f8a4c; }
.cal-day.busy, .cal-day.mk-evento, .cal-day.mk-reserva { background: #f6dede; color: #a33b3b; text-decoration: line-through; cursor: not-allowed; }
.cal-day.mk-reserva { background: #fde9cf; color: #8a5a12; text-decoration: none; }
.cal-day.mk-evento { text-decoration: none; }
.cal-day.mk-bloqueada { background: #e4e1dc; color: #6b6259; text-decoration: line-through; }
.cal-day.past { background: transparent; color: color-mix(in srgb, var(--ink) 30%, transparent); cursor: default; }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cal-day.sel { background: var(--accent); color: #fff; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .8rem; font-size: .78rem; color: var(--muted); }
.cal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: .35rem; vertical-align: -1px; }
.lg-free { background: #e4f3e8; box-shadow: inset 0 0 0 1px #9fd1ae; } .lg-busy, .lg-evento { background: #f6dede; } .lg-sel { background: var(--accent); }
.lg-reserva { background: #fde9cf; } .lg-bloq { background: #e4e1dc; }
.adm-cal { max-width: 440px; }

.bk-list { display: grid; gap: .8rem; margin-top: 1rem; }
.bk-item { padding: 1rem 1.1rem; border-radius: 14px; background: var(--bg); border-left: 4px solid var(--line); display: grid; gap: .35rem; }
.bk-item.st-nueva { border-left-color: var(--accent); } .bk-item.st-confirmada { border-left-color: var(--ok); } .bk-item.st-rechazada { opacity: .6; }
.bk-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.bk-status { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .55rem; border-radius: 99px; background: var(--paper); }
.st-nueva .bk-status { background: var(--accent); color: #fff; } .st-confirmada .bk-status { background: #e2f0e6; color: var(--ok); }
.bk-pack { font-size: .85rem; color: var(--muted); }
.bk-who, .bk-msg { margin: 0; }
.bk-msg { font-size: .9rem; color: var(--quote); }
.bk-contact { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .88rem; }
.bk-contact a { color: var(--accent); font-weight: 700; }
.bk-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 0; }
.bk-create { margin: 0; }
.pk-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 1rem 0; }
.pk-card { border: 1px solid var(--line); border-radius: 14px; padding: 1rem; min-width: 0; }
.pk-card legend { font-weight: 700; padding: 0 .4rem; }
.pk-card .field:first-of-type { margin-top: .2rem; }
.book-page .hire-link { display: none; }

/* ---------- Panel del organizador ---------- */
.ow-card .ow-tabs { margin: .6rem 0 1rem; }
.ow-form { display: grid; gap: .8rem; text-align: left; }
.center { text-align: center; }
.home-card .muted.small.center { margin-top: 1rem; }
.ow-welcome { border-left: 4px solid var(--accent); }
.ow-welcome h2 { margin: .1rem 0 .3rem; }
.plan-chip { background: var(--accent); color: #fff; }
.plan-mini { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border: 1px solid currentColor; border-radius: 99px; padding: .05rem .5rem; }
.locked-card { opacity: .75; border: 1.5px dashed rgba(0,0,0,.18); box-shadow: none; background: transparent; }
.locked-card h2 { font-size: 1rem; margin: 0 0 .2rem; }
.locked-card h2::before { content: "🔒 "; }
.locked-card p { margin: 0; }
.ow-admin .plan-pick { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 .4rem; }
.plan-has { margin-top: .2rem; }
.ow-pass { margin: 1rem 0; }
.ow-pass pre { white-space: pre-wrap; background: rgba(0,0,0,.05); padding: .7rem .9rem; border-radius: 10px; font-size: .9rem; margin: .5rem 0; }
.ow-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; }
.ow-list li { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-radius: 12px; background: rgba(0,0,0,.035); }
.ow-list .row-btns { display: flex; flex-wrap: wrap; gap: .35rem; }
.ow-status { font-size: .8rem; font-weight: 600; }
.ow-st-pendiente { background: #fff4d6 !important; }
.ow-st-pendiente .ow-status { color: #9a6a00; }
.ow-st-aprobado .ow-status { color: #2f7d4f; }
.ow-st-bloqueado { opacity: .6; }
.ow-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: end; margin-top: .6rem; }
@media (max-width: 640px) { .ow-add { grid-template-columns: 1fr; } }
.adm-head > * { min-width: 0; max-width: 100%; }
.adm-head .muted, .adm-head .code-line span { overflow-wrap: anywhere; }
@media (max-width: 640px) { .adm-actions .btn { padding-left: .9rem; padding-right: .9rem; } .adm-main .btn { white-space: normal; max-width: 100%; } .adm-main .card { min-width: 0; } }

/* ---------- Pagos con Mercado Pago ---------- */
.pay-box { display: grid; gap: .15rem; padding: .8rem 1rem; border-radius: 12px; background: var(--accent-soft); }
.pay-box p { margin: 0; }
.pay-total { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .95rem; }
.pay-total b { font-size: 1.35rem; font-family: var(--display, var(--serif)); }
.btn-mp { background: #009ee3; border-color: #009ee3; color: #fff; }
.btn-mp:hover { background: #0089c7; border-color: #0089c7; }
.pay-legal { margin: .2rem 0 0; line-height: 1.45; }
.pay-page { max-width: 640px; }
.pay-page .thanks form { margin: .4rem 0 .8rem; }
.thanks-mark.warn { background: #fff4d6; color: #9a6a00; animation: none; }
.bk-pay { margin: 0; font-size: .9rem; }
.bk-note { margin: 0; font-size: .85rem; color: #9a6a00; font-weight: 600; }
.bk-item.st-por_pagar { border-left-color: #009ee3; } .st-por_pagar .bk-status { background: #e0f3fc; color: #00679a; }
.bk-item.st-sin_pago { opacity: .55; }
.mp-form { display: grid; gap: .9rem; max-width: 560px; }
.mp-mode { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.mp-mode legend { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.mp-pct { width: 110px; }

/* ---------- App instalable y modo sin señal ---------- */
.install-btn { margin-top: .6rem; }
.last-event { margin: .8rem 0 0; text-align: center; }
.last-event a { display: inline-block; padding: .55rem 1rem; border-radius: 999px; background: var(--accent-soft); color: var(--ink); text-decoration: none; font-size: .92rem; }
.install-help { border: 0; border-radius: 22px; padding: 1.6rem 1.4rem 1.2rem; max-width: min(360px, calc(100vw - 32px)); text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25); color: var(--ink); background: var(--paper); }
.install-help::backdrop { background: rgba(20, 14, 10, .45); }
.install-help img { border-radius: 16px; }
.install-help h2 { margin: .5rem 0 .6rem; font-family: var(--display, var(--serif)); }
.install-help ol { text-align: left; margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .45rem; }
.ih-ico { display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 6px; background: var(--accent-soft); font-size: .85em; }
.upq-pill { position: fixed; left: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 60; border: 0; border-radius: 999px; padding: .6rem 1rem; background: #2b2420; color: #fff; font: 600 .85rem/1.2 inherit; box-shadow: 0 8px 24px rgba(0,0,0,.25); cursor: pointer; max-width: calc(100vw - 32px); }
.upq-pill.err { background: #b3412e; }
.upq-dlg { text-align: left; }
.upq-dlg h2 { font-size: 1.15rem; }
.upq-list { list-style: none; padding: 0; margin: .8rem 0 1rem; display: grid; gap: .5rem; max-height: 45vh; overflow: auto; }
.upq-list li { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; padding: .55rem .7rem; border-radius: 10px; background: var(--bg); font-size: .88rem; }
.upq-list .ql { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.upq-list small { grid-column: 1; color: var(--muted); }
.upq-list button { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
body.screen.is-offline::after { content: "Sin internet · mostrando las fotos guardadas"; position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 99; padding: .35rem .9rem; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font: 600 .8rem system-ui, sans-serif; }
.is-app .home-hire + .install-btn { display: none; }

/* ---------- Transmisión en vivo ---------- */
.live-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: #e53935; box-shadow: 0 0 0 0 rgba(229,57,53,.6); animation: livePulse 1.6s infinite; vertical-align: .05em; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(229,57,53,.6); } 70% { box-shadow: 0 0 0 .55em rgba(229,57,53,0); } 100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.live-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 999px; background: #e53935; color: #fff; font: 700 .78rem/1 system-ui, sans-serif; letter-spacing: .08em; }
.live-badge .live-dot { background: #fff; box-shadow: none; animation: none; }
.live-badge.big { font-size: .9rem; margin: 0 0 .8rem; }
.live-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: var(--shadow); }
.live-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-box { width: min(100%, 860px); margin: 1rem auto .4rem; }
.live-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .55rem; }
.live-full { font-size: .85rem; color: inherit; opacity: .8; }
.live-note { margin: .5rem 0 0; font-size: .82rem; color: var(--muted); text-align: center; }
.live-replay .live-frame { margin-top: .6rem; }
.live-page .live-main { max-width: 1000px; margin: 0 auto; padding: 1.2rem 16px 3rem; text-align: center; }
.live-top { margin-bottom: 1rem; }
.live-top h1 { margin: .2rem 0 0; }
.live-wait { padding: 2.2rem 1.4rem; }
.live-wait .thanks-mark { color: #e53935; }
.live-gal { margin-top: 1.4rem; }
/* Panel */
.live-card.is-live { border: 2px solid #e53935; }
.live-card h2 { display: flex; align-items: center; gap: .5rem; }
.live-form { display: grid; gap: .7rem; margin: .8rem 0; }
.live-btns { justify-content: flex-start; margin-top: 0; }
.btn-live { background: #e53935; border-color: #e53935; color: #fff; }
.btn-live:hover { background: #c62828; border-color: #c62828; }
.live-preview { position: relative; aspect-ratio: 16 / 9; max-width: 520px; border-radius: 12px; overflow: hidden; background: #000; margin: .4rem 0 1rem; }
.live-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.live-share { padding: .8rem 1rem; border-radius: 12px; background: var(--bg); margin-bottom: .8rem; }
.live-share p { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.live-help summary { cursor: pointer; font-weight: 600; }
.live-help ol { padding-left: 1.2rem; display: grid; gap: .4rem; font-size: .92rem; }
.live-two { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 560px) { .live-two { grid-template-columns: 1fr; } }
.live-apps { display: grid; gap: .55rem; margin-top: .8rem; }
.live-app { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: 14px; color: #fff; text-decoration: none; text-align: left; box-shadow: var(--shadow); position: relative; }
.live-app svg { width: 28px; height: 28px; flex: none; }
.live-app span { display: grid; line-height: 1.25; }
.live-app small { opacity: .85; font-size: .82rem; }
.live-app::after { content: "EN VIVO"; margin-left: auto; padding: .2rem .5rem; border-radius: 6px; background: #e53935; font: 700 .7rem/1 system-ui, sans-serif; letter-spacing: .06em; }
.live-tiktok { background: #111; }
.live-instagram { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }
.live-preview-apps { max-width: 520px; margin-bottom: 1rem; }
.live-page .live-apps { max-width: 420px; margin: 1rem auto 0; }

/* ---------- Botones para empezar a transmitir ---------- */
.live-step { margin: .9rem 0 .5rem; font-size: .95rem; }
.live-go { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
@media (max-width: 720px) { .live-go { grid-template-columns: 1fr 1fr; } }
.live-go-btn { display: flex; align-items: center; gap: .6rem; padding: .75rem .8rem; border-radius: 14px; color: #fff; text-decoration: none; box-shadow: var(--shadow); transition: transform .12s; }
.live-go-btn:active { transform: scale(.97); }
.live-go-btn svg { width: 26px; height: 26px; flex: none; }
.live-go-btn span { display: grid; line-height: 1.2; min-width: 0; }
.live-go-btn b { font-size: .95rem; }
.live-go-btn small { font-size: .75rem; opacity: .9; }
.go-youtube { background: #ff0000; }
.go-facebook { background: #1877f2; }
.go-instagram { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }
.go-tiktok { background: #111; }
.live-go-tip { margin: .5rem 0 0; }

/* ---------- Contadores y votos ---------- */
.stats-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: .9rem auto .2rem; }
.adm-head .stats-bar { justify-content: flex-start; margin: .5rem 0 0; }
.st-item { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .75rem; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); font-size: .85rem; color: var(--ink); white-space: nowrap; }
.st-item b { font-variant-numeric: tabular-nums; }
.st-item small { color: var(--muted); font-size: .8rem; }
.st-item.bump b { animation: stBump .6s ease; }
@keyframes stBump { 40% { transform: scale(1.25); color: var(--accent); } }
.on-dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: #2fb36b; box-shadow: 0 0 0 0 rgba(47,179,107,.55); animation: onPulse 2s infinite; }
@keyframes onPulse { 70% { box-shadow: 0 0 0 .45em rgba(47,179,107,0); } 100% { box-shadow: 0 0 0 0 rgba(47,179,107,0); } }
@media (prefers-reduced-motion: reduce) { .on-dot, .st-item.bump b { animation: none; } }
.votes-hint { margin: .5rem 0 0; font-size: .85rem; color: var(--muted); }
.votes-hint b { color: var(--accent); }
.cm-toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 90; max-width: min(420px, calc(100vw - 32px)); padding: .7rem 1.1rem; border-radius: 14px; background: #2b2420; color: #fff; font-size: .9rem; line-height: 1.35; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.cm-toast.on { opacity: 1; transform: translate(-50%, 0); }
.cm-toast.warn { background: #b3412e; }
.scr-stats .on-dot { vertical-align: .05em; }

/* ---------- Huincha inferior de la pantalla en vivo ---------- */
:root { --band-h: clamp(64px, 10.5vh, 118px); }
.scr-band {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; height: var(--band-h);
  display: flex; align-items: center; gap: clamp(.8rem, 2vw, 2.4rem); padding: 0 2.2vw;
  background: var(--accent); color: #fff; box-shadow: 0 -10px 40px rgba(0,0,0,.35);
  border-top: 3px solid color-mix(in srgb, var(--accent) 70%, #fff);
}
.band-logo { height: calc(var(--band-h) * .34); width: auto; max-width: 18vw; flex: none; filter: brightness(0) invert(1); }
.band-count { display: flex; align-items: baseline; gap: .55rem; flex: none; padding-right: clamp(.8rem, 2vw, 2.4rem); border-right: 2px solid rgba(255,255,255,.35); line-height: 1; }
.band-num { font-family: var(--display, var(--serif)); font-weight: 700; font-size: calc(var(--band-h) * .52); font-variant-numeric: tabular-nums; }
.band-num.tick { animation: bandTick .35s ease; }
@keyframes bandTick { 50% { transform: scale(1.12); } }
.band-lbl { font-size: calc(var(--band-h) * .2); font-weight: 700; opacity: .92; max-width: 8em; line-height: 1.05; }
.band-msg { flex: 1; min-width: 0; font-size: calc(var(--band-h) * .24); font-weight: 600; overflow: hidden; }
.band-msg > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band-thanks { font-weight: 800; }
.band-thanks.in { animation: bandIn .7s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes bandIn { from { opacity: 0; transform: translateY(60%) scale(.96); } to { opacity: 1; transform: none; } }
.band-side { display: flex; align-items: center; gap: .6rem; flex: none; }
.band-pill { padding: .45em .85em; border-radius: 999px; background: rgba(0,0,0,.18); font-size: calc(var(--band-h) * .17); font-weight: 700; white-space: nowrap; }
.band-pill .on-dot { vertical-align: .05em; }
.band-btn { border: 0; border-radius: 999px; padding: .6em 1.1em; background: #fff; color: #1a1410; font: 700 calc(var(--band-h) * .16)/1 inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2); white-space: nowrap; }
.band-btn:hover { transform: translateY(-1px); }
body.idle.is-fs .band-btn { display: none; }
/* Diseños claros: texto oscuro sobre la huincha */
body[data-tpl="noche"] .scr-band, body[data-tpl="moderno"] .scr-band, body[data-tpl="neon"] .scr-band { color: #17130f; }
body[data-tpl="noche"] .band-logo, body[data-tpl="moderno"] .band-logo, body[data-tpl="neon"] .band-logo { filter: brightness(0); opacity: .85; }
body[data-tpl="noche"] .band-count, body[data-tpl="moderno"] .band-count, body[data-tpl="neon"] .band-count { border-color: rgba(0,0,0,.2); }
body[data-tpl="noche"] .band-pill, body[data-tpl="moderno"] .band-pill, body[data-tpl="neon"] .band-pill { background: rgba(0,0,0,.1); }
/* El resto de la pantalla se acomoda sobre la huincha */
.scr-caption { bottom: var(--band-h); padding-bottom: 3.5vh; }
.scr-corner { bottom: calc(var(--band-h) + 2.5vh); }
.scr-rank { padding-bottom: calc(var(--band-h) + 6vh); }
.scr-empty { padding-bottom: calc(var(--band-h) + 4vh); }
#awards:not([hidden]) ~ .scr-band { display: none; }
@media (max-width: 1500px) { .band-logo { display: none; } }
@media (max-width: 900px) { .band-side .band-pill { display: none; } }
@media (max-width: 600px) { .band-msg { font-size: .8rem; } .band-btn { font-size: .75rem; } }

/* Contador destacado de la galería */
.st-item.st-main { padding: .45rem 1rem; background: var(--accent); color: #fff; font-size: .95rem; }
.st-item.st-main small { color: rgba(255,255,255,.9); font-size: .85rem; }
.st-item.st-main b { font-size: 1.25rem; }
body[data-tpl="noche"] .st-item.st-main, body[data-tpl="moderno"] .st-item.st-main, body[data-tpl="neon"] .st-item.st-main { color: #17130f; }
body[data-tpl="noche"] .st-item.st-main small, body[data-tpl="moderno"] .st-item.st-main small, body[data-tpl="neon"] .st-item.st-main small { color: rgba(0,0,0,.7); }
.thanks-count { margin: .6rem auto 0; display: inline-flex; align-items: baseline; gap: .4rem; padding: .5rem 1rem; border-radius: 999px; background: var(--accent-soft); font-size: .92rem; }
.thanks-count b { font-size: 1.3rem; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- Stickers ---------- */
.stk-fab { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: inline-flex; align-items: center; gap: .45rem; border: 0; border-radius: 999px; padding: .75rem 1.15rem .75rem .9rem; background: var(--paper); color: var(--ink); font: 700 .95rem/1 inherit; box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 2px var(--accent) inset; cursor: pointer; }
.stk-fab span { font-size: 1.45rem; line-height: 1; animation: stkWiggle 3.5s ease-in-out infinite; }
@keyframes stkWiggle { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-14deg) scale(1.15); } 95% { transform: rotate(12deg) scale(1.15); } }
.stk-box { border: 0; border-radius: 24px 24px 0 0; padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 560px; margin: auto auto 0; background: var(--paper); color: var(--ink); box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
.stk-box[open] { animation: stkUp .3s ease both; }
@keyframes stkUp { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.stk-box::backdrop { background: rgba(20,14,10,.4); }
@media (min-width: 600px) { .stk-box { border-radius: 24px; margin: auto; } }
.stk-head { display: flex; justify-content: space-between; align-items: center; }
.stk-head h2 { margin: 0; font-family: var(--display, var(--serif)); font-size: 1.3rem; }
.stk-x { border: 0; background: none; font-size: 1.8rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 .3rem; }
.stk-box > p { margin: .3rem 0 .8rem; }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; max-height: 52vh; overflow: auto; padding: 2px; }
.stk-opt { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .4rem; border: 1.5px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--ink); font: 600 .8rem/1.2 inherit; cursor: pointer; text-align: center; transition: transform .12s, border-color .12s; }
.stk-opt:hover { border-color: var(--accent); }
.stk-opt:active, .stk-opt.sent { transform: scale(.92); border-color: var(--accent); background: var(--accent-soft); }
.stk-oe { font-size: 2rem; line-height: 1; }
.stk-name { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; font-size: .85rem; color: var(--muted); }
.stk-name input { flex: 1; min-width: 0; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: var(--ink); background: var(--bg); }
/* Capa donde flotan los stickers */
.stk-layer { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.stk { position: absolute; bottom: 90px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; max-width: 46vw; transform-origin: bottom center; animation: stkFloat 5s ease-out both; }
.stk-e { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.stk-b { display: grid; justify-items: center; padding: .4rem .75rem; border-radius: 14px; background: #fff; color: #1a1410; box-shadow: 0 8px 24px rgba(0,0,0,.25); text-align: center; line-height: 1.2; }
.stk-b b { font-size: .88rem; }
.stk-b small { font-size: .72rem; color: #7a6c63; }
@keyframes stkFloat {
  0% { opacity: 0; transform: translate(0, 40px) scale(.4) rotate(var(--tilt)); }
  12% { opacity: 1; transform: translate(0, 0) scale(1.08) rotate(var(--tilt)); }
  20% { transform: translate(0, -10px) scale(1) rotate(var(--tilt)); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift), -42vh) scale(.95) rotate(calc(var(--tilt) * -1)); }
}
/* En la pantalla grande: más grandes y sobre la huincha */
.stk-layer.is-screen .stk { bottom: calc(var(--band-h, 90px) + 4vh); max-width: 30vw; }
.stk-layer.is-screen .stk-e { font-size: clamp(3rem, 6vw, 6.5rem); }
.stk-layer.is-screen .stk-b { padding: .6rem 1.2rem; border-radius: 22px; }
.stk-layer.is-screen .stk-b b { font-size: clamp(1.1rem, 1.9vw, 2rem); }
.stk-layer.is-screen .stk-b small { font-size: clamp(.85rem, 1.2vw, 1.2rem); }
.stk-layer.is-screen .stk { animation-name: stkFloatBig; }
@keyframes stkFloatBig {
  0% { opacity: 0; transform: translate(0, 60px) scale(.3) rotate(var(--tilt)); }
  10% { opacity: 1; transform: translate(0, 0) scale(1.12) rotate(var(--tilt)); }
  18% { transform: translate(0, -12px) scale(1) rotate(var(--tilt)); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift), -55vh) scale(.95) rotate(calc(var(--tilt) * -1)); }
}
@media (prefers-reduced-motion: reduce) { .stk, .stk-layer.is-screen .stk { animation: stkFade 5s ease both; } .stk-fab span { animation: none; } }
@keyframes stkFade { 0%, 100% { opacity: 0; } 10%, 85% { opacity: 1; } }
/* que el botón de stickers no tape el aviso de subidas pendientes ni el cartel de votos */
.cm-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Modo cámara: página del celular ---------- */
body.cam-page { background: #0b0908; color: #fff; }
.cam-bar { display: flex; align-items: center; gap: .8rem; padding: max(10px, env(safe-area-inset-top, 0px)) 16px 10px; background: #15110e; }
.cam-bar strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.cam-back { color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.cam-status { padding: .3rem .7rem; border-radius: 999px; background: rgba(255,255,255,.12); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.cam-status.on { background: #e53935; }
.cam-status.warn { background: #b26a00; }
.cam-main { max-width: 720px; margin: 0 auto; padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; }
.cam-view { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #1d1814; }
@media (orientation: portrait) and (max-width: 600px) { .cam-view { aspect-ratio: 3 / 4; } }
.cam-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-view video.mirror { transform: scaleX(-1); }
.cam-off { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .4rem; padding: 1.4rem; text-align: center; color: rgba(255,255,255,.85); }
.cam-off[hidden] { display: none; }
.cam-off-ico { font-size: 2.6rem; }
.cam-off p { margin: 0; max-width: 34ch; }
.cam-off .btn { margin-top: .7rem; }
.cam-live-tag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px; background: #e53935; font: 700 .75rem/1 system-ui, sans-serif; letter-spacing: .06em; }
.cam-live-tag .live-dot { background: #fff; box-shadow: none; }
.cam-screens { position: absolute; left: 12px; bottom: 12px; right: 12px; padding: .4rem .75rem; border-radius: 10px; background: rgba(0,0,0,.6); font-size: .82rem; }
.cam-controls { display: grid; gap: .8rem; }
.cam-controls[hidden] { display: none; }
.cam-go { min-height: 58px; font-size: 1.05rem; }
.cam-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; }
.cam-page .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; }
.cam-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.1); }
.cam-seg button { border: 0; background: none; color: rgba(255,255,255,.75); padding: .5rem .85rem; border-radius: 999px; font: 600 .82rem/1 inherit; cursor: pointer; }
.cam-seg button.on { background: #fff; color: #1a1410; }
.cam-page .check.cam-audio { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: center; color: rgba(255,255,255,.85); font-size: .92rem; }
.cam-audio small { grid-column: 2; font-size: .78rem; }
.cam-tip { color: rgba(255,255,255,.6) !important; margin: 0; }
.cam-on-note { color: #e53935; }

/* ---------- Modo cámara: en la pantalla en vivo ---------- */
.scr-cam { position: absolute; inset: 0; z-index: 3; background: #000; display: grid; place-items: center; }
.scr-cam[hidden] { display: none; }
.scr-cam video, .scr-cam img { width: 100%; height: 100%; object-fit: contain; display: block; }
.scr-cam-badge { position: absolute; top: 3vh; left: 2.2vw; display: inline-flex; align-items: center; gap: .5rem; padding: .45em 1em; border-radius: 999px; background: #e53935; color: #fff; font: 800 clamp(.9rem, 1.4vw, 1.4rem)/1 system-ui, sans-serif; letter-spacing: .08em; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.scr-cam-badge .live-dot { background: #fff; box-shadow: none; }
.scr-cam-wait { position: absolute; inset: auto 0 calc(var(--band-h, 90px) + 6vh); margin: 0; text-align: center; font-size: clamp(1rem, 1.8vw, 1.8rem); color: rgba(255,255,255,.8); }
.scr-cam-wait[hidden] { display: none; }
.scr-cam-sound { position: absolute; top: 3vh; right: 2.2vw; border: 0; border-radius: 999px; padding: .6em 1.1em; background: #fff; color: #1a1410; font: 700 1rem/1 inherit; cursor: pointer; }
/* Pantalla completa: el video ocupa todo (sobre la huincha queda espacio); se ocultan pie de foto y Top 3 */
body.cam-full .scr-cam { bottom: var(--band-h, 90px); }
body.cam-full .scr-caption, body.cam-full .scr-live { display: none; }
/* En un recuadro: las fotos siguen pasando y la cámara va en una esquina */
.scr-cam.pip { inset: auto auto calc(var(--band-h, 90px) + 3vh) 2.2vw; width: 36vw; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 20px 60px rgba(0,0,0,.55); z-index: 5; }
.scr-cam.pip .scr-cam-badge { top: 10px; left: 10px; font-size: .85rem; }
.scr-cam.pip .scr-cam-wait { bottom: 10px; font-size: .95rem; }
body.cam-on.cam-pip .scr-caption { padding-left: calc(36vw + 5vw); }
.cam-err { padding: .9rem 1rem; border-radius: 14px; background: #4a1d17; border: 1px solid #b3412e; color: #ffd9d2; font-size: .92rem; line-height: 1.45; }
.cam-err[hidden] { display: none; }
.cam-err b { color: #fff; }
.cam-err .btn { margin-top: .6rem; display: inline-flex; }
.cam-start { min-height: 56px; font-size: 1.02rem; padding-inline: 1.4rem; }

/* ---------- Pedidos de canciones al DJ ---------- */
.song-fab { position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: inline-flex; align-items: center; gap: .45rem; border: 0; border-radius: 999px; padding: .75rem 1.15rem .75rem .9rem; background: #1a1410; color: #fff; font: 700 .95rem/1 inherit; box-shadow: 0 10px 30px rgba(0,0,0,.25); cursor: pointer; }
.song-fab span { font-size: 1.3rem; line-height: 1; }
.song-box form { display: grid; gap: .7rem; }
.song-box .stk-head h2 { font-size: 1.2rem; }
.song-box > form > p.muted { margin: 0; }
.dj-card.is-on { border: 2px solid var(--accent); }
.dj-form { margin-top: .6rem; }
.dj-share { margin: .9rem 0; padding: .8rem 1rem; border-radius: 12px; background: var(--bg); }
.dj-share p { margin: 0 0 .3rem; }
.dj-share ol { margin: 0 0 .7rem; padding-left: 1.2rem; display: grid; gap: .25rem; overflow-wrap: anywhere; }
.dj-h { margin: 1rem 0 .4rem; font-size: 1rem; }
.dj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.dj-list li { display: flex; justify-content: space-between; gap: .6rem; align-items: center; padding: .6rem .8rem; border-radius: 12px; background: var(--bg); }
.dj-list li.played { opacity: .5; }
.dj-list li.played b { text-decoration: line-through; }
.dj-count { display: inline-block; margin-left: .3rem; padding: .05rem .45rem; border-radius: 999px; background: #fde3d7; color: #b3412e; font-size: .75rem; font-weight: 700; font-style: normal; }
.dj-err { color: #b3412e; cursor: help; }
.wa-steps { padding-left: 1.2rem; display: grid; gap: .6rem; font-size: .93rem; }
.wa-tpl { background: rgba(0,0,0,.05); padding: .6rem .8rem; border-radius: 10px; font-size: .85rem; white-space: pre-wrap; margin: .4rem 0; }
.wa-test { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }
/* Página del DJ */
body.dj-page { background: #0e0b09; color: #fff; }
.dj-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: max(14px, env(safe-area-inset-top, 0px)) 16px 12px; background: var(--accent); }
.dj-top .eyebrow { color: rgba(255,255,255,.85); margin: 0; }
.dj-top h1 { margin: .1rem 0 0; font-family: var(--display, var(--serif)); font-size: 1.35rem; }
.dj-live { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(0,0,0,.25); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.dj-live .live-dot { background: #fff; box-shadow: none; }
.dj-main { max-width: 720px; margin: 0 auto; padding: 12px 16px 40px; }
.dj-tabs { display: flex; gap: .4rem; margin-bottom: .8rem; }
.dj-tabs button { flex: 1; border: 0; border-radius: 12px; padding: .7rem; background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); font: 600 .92rem/1 inherit; cursor: pointer; }
.dj-tabs button.on { background: #fff; color: #1a1410; }
.dj-tabs b { margin-left: .3rem; }
.dj-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dj-feed li { display: flex; gap: .8rem; align-items: center; padding: .8rem .9rem; border-radius: 14px; background: #1c1713; }
.dj-feed li.nuevo { animation: djNew 2s ease; }
@keyframes djNew { 0% { background: var(--accent); } 100% { background: #1c1713; } }
.dj-feed li.played { opacity: .45; }
.dj-feed li.played b { text-decoration: line-through; }
.dj-feed b { font-size: 1.12rem; }
.dj-feed span { color: rgba(255,255,255,.7); }
.dj-feed small { display: block; margin-top: .2rem; color: rgba(255,255,255,.55); font-size: .82rem; }
.dj-feed .dj-note { color: rgba(255,255,255,.85); }
.dj-check { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer; }
.dj-check:hover { border-color: #2fb36b; color: #2fb36b; }
.dj-empty { text-align: center; color: rgba(255,255,255,.6); padding: 2rem 0; }
.dj-foot { text-align: center; margin-top: 1.4rem; color: rgba(255,255,255,.45) !important; }

/* ---------- Botones flotantes agrupados (Mensajes · Pedir canción · Stickers) ---------- */
.fab-stack { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.fab-stack > * { pointer-events: auto; }
.fab-stack .stk-fab, .fab-stack .song-fab { position: static; }
.msg-fab { display: inline-flex; align-items: center; gap: .45rem; border: 0; border-radius: 999px; padding: .75rem 1.15rem .75rem .9rem; background: var(--accent); color: #fff; font: 700 .95rem/1 inherit; box-shadow: 0 10px 30px rgba(0,0,0,.22); cursor: pointer; }
.msg-fab span { font-size: 1.3rem; line-height: 1; }
body[data-tpl="noche"] .msg-fab, body[data-tpl="moderno"] .msg-fab, body[data-tpl="neon"] .msg-fab { color: #17130f; }
.upq-pill { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Mensajes para el animador ---------- */
.msg-box form { display: grid; gap: .75rem; }
.msg-box > form > p.muted { margin: 0; }
.msg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bg); }
.msg-tabs button { border: 0; border-radius: 10px; padding: .6rem; background: none; color: var(--muted); font: 600 .9rem/1 inherit; cursor: pointer; }
.msg-tabs button.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.msg-pane[hidden] { display: none; }
.msg-pane textarea { resize: vertical; }
.msg-rec { display: flex; align-items: center; gap: 1rem; padding: .8rem; border-radius: 16px; background: var(--bg); }
.msg-rec-btn { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #e53935; background: #fff; display: grid; place-items: center; cursor: pointer; }
.msg-rec-btn[hidden] { display: none; }
.msg-rec-dot { width: 26px; height: 26px; border-radius: 50%; background: #e53935; transition: border-radius .2s, width .2s, height .2s; }
.msg-rec-btn.is-rec .msg-rec-dot { width: 22px; height: 22px; border-radius: 5px; animation: recPulse 1s ease-in-out infinite; }
@keyframes recPulse { 50% { opacity: .55; } }
.msg-rec-info { flex: 1; display: grid; gap: .25rem; }
.msg-rec-bar { height: 6px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; }
.msg-rec-bar span { display: block; height: 100%; width: 0; background: #e53935; transition: width .2s linear; }
.msg-rec-done { display: grid; gap: .3rem; justify-items: start; margin-top: .5rem; }
.msg-rec-done[hidden] { display: none; }
.msg-rec-done audio { width: 100%; }
/* En la galería */
.msg-sec { margin: 1.6rem 0; }
.msg-sec-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.msg-sec-head h2 { margin: 0; font-family: var(--display, var(--serif)); }
.msg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; }
.msg-card { position: relative; padding: 1rem 1.1rem .8rem; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); }
.msg-card.msg-k-text::before { content: "“"; position: absolute; top: -.35rem; left: .7rem; font: 700 3rem/1 Georgia, serif; color: var(--accent); opacity: .35; }
.msg-text { margin: .2rem 0 .5rem; font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.msg-text.small { font-size: .9rem; }
.msg-who { margin: 0; font-weight: 600; font-size: .85rem; color: var(--accent); }
.msg-who span { color: var(--muted); font-weight: 400; }
.msg-audio { display: flex; align-items: center; gap: .5rem; }
.msg-audio audio { flex: 1; min-width: 0; width: 100%; height: 40px; }
.msg-ico { font-size: 1.3rem; }
.msg-secs { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.msg-more summary { cursor: pointer; margin: .8rem 0; font-weight: 600; color: var(--accent); }
/* En el panel */
.msg-admin.is-on { border: 2px solid var(--accent); }
.msg-adm-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: 1rem; }
.msg-adm-head .dj-h { margin: 0; }
.msg-adm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; margin-top: .6rem; }
.msg-adm-list .msg-card { box-shadow: none; background: var(--bg); }
.msg-adm-list .msg-card.st-pending { outline: 2px solid #f0c25a; }
.msg-adm-list .msg-card.st-hidden { opacity: .55; }
.msg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .6rem; }
.msg-st { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .5rem; border-radius: 99px; }
.st-p { background: #fff4d6; color: #9a6a00; } .st-a { background: #e2f0e6; color: #2f7d4f; } .st-h { background: #eee; color: #666; }
.msg-btns { margin: 0 0 0 auto; }
/* Página del animador */
.mc-feed { display: grid; gap: .55rem; }
.mc-item { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem .9rem; border-radius: 14px; background: #1c1713; }
.mc-item.nuevo { animation: djNew 2s ease; }
.mc-item.focus { outline: 2px solid var(--accent); }
.mc-item.seen { opacity: .5; }
.mc-body { flex: 1; min-width: 0; display: grid; gap: .3rem; }
.mc-text { margin: 0; font-size: 1.15rem; line-height: 1.4; overflow-wrap: anywhere; }
.mc-audio { display: flex; align-items: center; gap: .5rem; }
.mc-audio audio { flex: 1; min-width: 0; }
.mc-audio span { font-size: .8rem; color: rgba(255,255,255,.6); }
.mc-item small { color: rgba(255,255,255,.55); font-size: .82rem; }
.mc-ok { color: #6fd39a; }

/* Botones flotantes compactos al bajar por la galería */
.fab-stack button { transition: padding .2s ease, gap .2s ease; }
.fab-stack .fab-l { font-weight: 700; white-space: nowrap; overflow: hidden; max-width: 12em; transition: max-width .25s ease, opacity .2s ease; }
.fab-stack.mini button { padding: .8rem; gap: 0; }
.fab-stack.mini .fab-l { max-width: 0; opacity: 0; }
.fab-stack.mini button span { font-size: 1.45rem; }
/* Página del animador: que nada se salga por el costado */
.mc-feed { grid-template-columns: minmax(0, 1fr); }
.mc-item { min-width: 0; }
.mc-audio audio { width: 100%; }

/* ---- Mejoras oct-2026: ver más, privacidad, links nuevos ---- */
.more-row{display:flex;justify-content:center;margin:18px 0 6px}
.more-row .btn{min-width:180px}
.linkish{background:none;border:0;padding:4px 0;color:inherit;opacity:.7;text-decoration:underline;cursor:pointer;font:inherit}
.linkish:hover{opacity:1}
.priv-card.is-on{border-color:color-mix(in srgb,currentColor 35%,transparent)}
.priv-card p{overflow-wrap:anywhere}
.up-tip{margin:8px 2px 0}
.lb-novid{padding:24px;text-align:center}

/* ---- Buscador de fotos por rostro ---- */
.face-cta { display: flex; align-items: center; gap: .85rem; width: 100%; margin: 0 0 1.2rem; padding: .9rem 1rem; border: 0; border-radius: var(--radius); background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color: #fff; text-align: left; font: inherit; cursor: pointer; box-shadow: var(--shadow); }
body[data-tpl="noche"] .face-cta, body[data-tpl="moderno"] .face-cta, body[data-tpl="neon"] .face-cta { color: #17130f; background: var(--accent); }
.face-cta-ico { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: rgba(255,255,255,.2); }
.face-cta b { display: block; font-size: 1.05rem; }
.face-cta small { display: block; opacity: .9; font-size: .85rem; line-height: 1.3; margin-top: .15rem; }
.face-cta > span:nth-child(2) { flex: 1; min-width: 0; }
.face-cta-go { font-size: 1.8rem; line-height: 1; opacity: .8; }
.face-box { max-height: 92vh; overflow-y: auto; }
.face-hero { display: grid; place-items: center; margin: .3rem 0 .6rem; }
.face-hero span { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem; background: var(--accent-soft); }
.face-ok { margin: .8rem 0; font-size: .9rem; line-height: 1.4; align-items: flex-start; }
.face-ok .muted { display: block; font-size: .82rem; }
.face-pick { margin-top: .55rem; cursor: pointer; }
.face-me { position: relative; width: 150px; height: 150px; margin: .6rem auto 1rem; border-radius: 50%; overflow: hidden; background: var(--accent-soft); }
.face-me img { width: 100%; height: 100%; object-fit: cover; }
.face-scan { position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent); animation: faceScan 1.6s ease-in-out infinite alternate; }
@keyframes faceScan { from { top: -30%; } to { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .face-scan { animation: none; top: 35%; } }
.face-title { font: 700 1.15rem/1.3 var(--sans); margin: .2rem 0 .8rem; }
.face-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.face-tile { padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--accent-soft); cursor: pointer; }
.face-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-maybe { margin-top: .9rem; }
.face-maybe summary { cursor: pointer; font-weight: 600; margin-bottom: .5rem; }
.face-actions { margin-top: 1rem; justify-content: flex-start; flex-wrap: wrap; }
.face-card.is-on { border: 2px solid var(--accent); }
.face-bar { height: 8px; border-radius: 99px; background: var(--accent-soft); overflow: hidden; margin: .4rem 0 .7rem; }
.face-bar i { display: block; height: 100%; background: var(--accent); transition: width .4s; }

/* ---- Logo de fondo (marca de agua) de la galería ---- */
.ev-wall { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-position: center; }
.ev-wall-mosaico { background-repeat: space; background-size: clamp(110px, 24vmin, 220px) auto; transform: rotate(-12deg) scale(1.4); }
.ev-wall-centro { background-size: min(78vw, 560px) auto; }
.ev-wall-esquina { inset: auto 4vw 4vh auto; width: min(42vw, 300px); height: min(42vw, 300px); background-position: right bottom; background-size: contain; }
@media print { .ev-wall { display: none; } }
.wall-wrap { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 640px) { .wall-wrap { grid-template-columns: minmax(0, 1fr); } }
.wall-prev { position: relative; isolation: isolate; height: 300px; border-radius: 14px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.wall-prev .ev-wall { position: absolute; z-index: 0; }
.wall-prev .ev-wall-mosaico { background-size: 54px auto; }
.wall-prev .ev-wall-centro { background-size: 70% auto; }
.wall-prev .ev-wall-esquina { width: 38%; height: 38%; right: 8px; bottom: 8px; }
.wall-prev-ui { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; }
.wall-prev-ui b { grid-column: 1 / -1; text-align: center; font: 600 .95rem/1.2 var(--serif); padding: 6px 0 4px; }
.wall-prev-ui span { height: 70px; border-radius: 8px; background: var(--paper); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.wall-empty { position: absolute; inset: auto 0 10px; z-index: 1; margin: 0; text-align: center; font-size: .8rem; color: var(--muted); }
.wall-card.is-on { border: 2px solid var(--accent); }
.wall-form .field { margin-bottom: .7rem; }
/* Con logo de fondo: la marca de agua queda sobre el fondo de la cabecera, pero debajo del contenido */
body.has-wall .ev-wall { z-index: 0; }
body.has-wall .ev-hero > *, body.has-wall > main, body.has-wall > .strip { position: relative; z-index: 1; }
/* Fondo con foto a pantalla completa */
.ev-wall-cubrir { background-size: cover; background-position: center; }
.ev-wall-blur { filter: blur(6px); transform: scale(1.06); }
.ev-wall-mosaico.ev-wall-blur { transform: rotate(-12deg) scale(1.45); }
.wall-prev .ev-wall-cubrir { background-size: cover; }
.wall-prev .ev-wall-blur { filter: blur(3px); }

/* ============ Plantilla "Pasarela" (desfiles y moda) ============ */
body[data-tpl="pasarela"] {
  --bg: #f5f3f0; --paper: #ffffff; --ink: #0d0d0d; --muted: #6f6a66; --line: #e3dfda;
  --accent: #8a1538; --accent-soft: #f2e2e6; --quote: #2a2224;
  --serif: 'Bodoni Moda', 'Didot', Georgia, serif;
  --radius: 2px;
}
body[data-tpl="pasarela"] .display { font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(2rem, 9vw, 3.6rem); line-height: 1.05; }
body[data-tpl="pasarela"] .display.sm { font-size: clamp(1.4rem, 6vw, 2.2rem); }
body[data-tpl="pasarela"] h2 { font-weight: 700; letter-spacing: .03em; }
body[data-tpl="pasarela"] .ev-hero {
  background:
    radial-gradient(60% 75% at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #e9e6e2 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--ink);
}
body[data-tpl="pasarela"] .eyebrow { letter-spacing: .4em; }
body[data-tpl="pasarela"] .ornament span { width: 90px; background: var(--ink); opacity: 1; }
body[data-tpl="pasarela"] .btn, body[data-tpl="pasarela"] .tabs, body[data-tpl="pasarela"] .tabs a { border-radius: 0; }
body[data-tpl="pasarela"] .btn { letter-spacing: .08em; text-transform: uppercase; font-size: .9rem; }
body[data-tpl="pasarela"] .ev-date, body[data-tpl="pasarela"] .who p { font-style: italic; }

/* ============ Plantilla "Neón" (night club) ============ */
body[data-tpl="neon"] {
  --bg: #0b0614; --paper: #170d26; --ink: #f4ecff; --muted: #a99bc4; --line: #2d1d47;
  --accent: #ff2fb9; --accent-soft: #2c1240; --quote: #e6d6ff; --heart: #ff5d8f;
  --neon2: #29e0ff;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.5);
  --serif: 'Unbounded', 'DM Sans', system-ui, sans-serif;
  --radius: 16px;
  color-scheme: dark;
}
body[data-tpl="neon"] .display {
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(2rem, 9vw, 3.6rem); line-height: 1.05;
  color: #fff; text-shadow: 0 0 6px var(--accent), 0 0 18px var(--accent), 0 0 38px color-mix(in srgb, var(--accent) 60%, transparent);
}
body[data-tpl="neon"] .display.sm { font-size: clamp(1.4rem, 6vw, 2.2rem); }
body[data-tpl="neon"] h2 { font-weight: 700; color: #fff; text-shadow: 0 0 10px color-mix(in srgb, var(--neon2) 70%, transparent); }
body[data-tpl="neon"] .ev-hero {
  background:
    radial-gradient(40% 60% at 15% 20%, color-mix(in srgb, var(--accent) 35%, transparent) 0%, transparent 70%),
    radial-gradient(40% 60% at 85% 30%, color-mix(in srgb, var(--neon2) 30%, transparent) 0%, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.035) 46px 47px),
    var(--bg);
  border-bottom: 1px solid color-mix(in srgb, var(--neon2) 45%, transparent);
  box-shadow: 0 1px 18px color-mix(in srgb, var(--neon2) 35%, transparent);
}
body[data-tpl="neon"] .ornament { color: var(--neon2); }
body[data-tpl="neon"] .ornament span { background: var(--neon2); opacity: 1; box-shadow: 0 0 8px var(--neon2); }
body[data-tpl="neon"] .btn:not(.btn-ghost):not(.btn-danger) { box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent); }
body[data-tpl="neon"] .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent); }
body[data-tpl="neon"] .tile, body[data-tpl="neon"] .card { box-shadow: 0 0 0 1px var(--line), 0 8px 26px rgba(0,0,0,.45); }

/* ============ Modo impresión (panel) ============ */
.pr-main { max-width: 1180px; }
.pr-total { margin: .6rem 0 0; font-size: 1.05rem; }
.pr-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 860px) { .pr-layout { grid-template-columns: minmax(0, 1fr); } }
.pr-setup { position: sticky; top: 12px; }
@media (max-width: 860px) { .pr-setup { position: static; } }
.pr-setup h2 { font-size: 1.05rem; margin: 1.1rem 0 .5rem; }
.pr-setup .pr-prev { margin-bottom: 1rem; }
.pr-printers { display: grid; gap: .5rem; margin-bottom: .7rem; }
.pr-printer { display: flex; gap: .7rem; align-items: center; padding: .7rem .8rem; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.pr-printer:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pr-printer input { accent-color: var(--accent); width: 18px; height: 18px; }
.pr-printer b { display: block; } .pr-printer small { color: var(--muted); }
.pr-prev { display: grid; place-items: center; min-height: 180px; padding: 14px; border-radius: 12px; background: repeating-conic-gradient(#eee 0 25%, #f7f7f7 0 50%) 0 0 / 16px 16px; }
.pr-prev canvas { max-width: 100%; max-height: 360px; box-shadow: 0 4px 18px rgba(0,0,0,.25); background: #fff; }
.pr-sel { margin: .7rem 0 .4rem; }
.pr-actions { display: grid; gap: .5rem; }
.pr-actions .btn { margin: 0; }
.pr-busy { margin: .6rem 0 0; color: var(--accent); }
.pr-help { margin-top: 1rem; font-size: .88rem; }
.pr-help summary { cursor: pointer; font-weight: 700; }
.pr-help ol { padding-left: 1.2rem; margin: .5rem 0 0; } .pr-help li { margin-bottom: .4rem; }
.pr-head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.pr-head h2 { margin: 0; }
.pr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pr-tile { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--accent-soft); }
.pr-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.pr-tile.on { outline: 3px solid var(--accent); outline-offset: -3px; }
.pr-tile.on img { transform: scale(.92); border-radius: 6px; }
.pr-check { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.85); color: transparent; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.pr-tile.on .pr-check { background: var(--accent); color: #fff; }
.pr-n, .pr-v { position: absolute; bottom: 6px; padding: 1px 6px; border-radius: 99px; font-size: .72rem; font-weight: 700; background: rgba(0,0,0,.6); color: #fff; }
.pr-n { left: 6px; } .pr-v { right: 6px; }
.pr-print-area { display: none; }
@media print {
  body.print-page > *:not(.pr-print-area) { display: none !important; }
  body.print-page { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  .pr-print-area { display: block !important; }
  .pr-print-area img { display: block; margin: 0; page-break-after: always; break-after: page; object-fit: cover; }
  .pr-print-area img:last-child { page-break-after: auto; break-after: auto; }
}
.pr-go { display: none; }
@media (max-width: 860px) {
  .pr-photos { order: -1; }
  .pr-go:not([hidden]) { display: block; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 50; padding: .85rem 1rem; border-radius: 99px; background: var(--accent); color: #fff; text-align: center; font-weight: 700; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
  .pr-main { padding-bottom: 80px; }
}

/* ============ Marcos para las fotos (página de subir) ============ */
.picker-cam { margin-top: .6rem; background: color-mix(in srgb, var(--accent) 12%, var(--paper)); border-style: solid; }
.picker-cam .picker-icon { font-size: 1.5rem; }
.file-list .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-frame { flex: none; border: 0; border-radius: 99px; padding: .35rem .7rem; background: var(--accent); color: #fff; font: 700 .8rem/1 var(--sans); cursor: pointer; }
.fl-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.fl-x:hover { background: var(--line); }
.mk-box { border: 0; padding: 0; width: min(100vw, 560px); max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0 auto; background: #0e0c0b; color: #fff; display: none; }
.mk-box[open] { display: flex; flex-direction: column; }
@media (min-width: 600px) { .mk-box { height: auto; max-height: 94vh; margin: auto; border-radius: 22px; } }
.mk-box::backdrop { background: rgba(0,0,0,.75); }
.mk-head { display: flex; justify-content: space-between; align-items: center; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 6px; }
.mk-head b { font-size: 1.1rem; }
.mk-head .stk-x { color: #fff; }
.mk-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 6px 16px; }
.mk-prev { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
@media (min-width: 600px) { .mk-prev { max-height: 56vh; } }
.mk-wait { position: absolute; color: rgba(255,255,255,.75); }
.mk-strip { display: flex; gap: 10px; overflow-x: auto; padding: 10px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mk-strip::-webkit-scrollbar { display: none; }
.mk-strip button { flex: none; scroll-snap-align: start; display: grid; gap: 4px; justify-items: center; padding: 0; border: 0; background: none; color: rgba(255,255,255,.75); font: 600 .75rem var(--sans); cursor: pointer; }
.mk-th { width: 72px; height: 72px; object-fit: contain; background: #2a2622; border-radius: 12px; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s; }
.mk-strip button[aria-selected="true"] { color: #fff; }
.mk-strip button[aria-selected="true"] .mk-th { outline-color: var(--accent); }
.mk-fields { display: flex; gap: 10px; align-items: center; padding: 0 16px; }
.mk-title { flex: 1; min-width: 0; padding: .65rem .8rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font: inherit; }
.mk-date { display: flex; gap: 6px; align-items: center; font-size: .85rem; white-space: nowrap; }
.mk-btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.mk-btns .btn { margin: 0; }
.mk-btns .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }

/* ============ Sorteo en vivo (pantalla) ============ */
.scr-raffle { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; padding-bottom: var(--band-h, 90px);
  background: radial-gradient(80% 70% at 50% 40%, color-mix(in srgb, var(--accent) 55%, #120a1c) 0%, #0b0712 75%); }
.scr-raffle[hidden] { display: none; }
.rf-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rf-inner { position: relative; width: min(92vw, 1100px); }
.rf-kicker { margin: 0; font: 800 clamp(1rem, 2.4vw, 1.6rem)/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #ffd23f; }
.rf-prize { margin: 1.4vh 0 4vh; transition: margin .4s, font-size .4s; font: 700 clamp(2rem, 5.5vw, 4.4rem)/1.08 var(--display, var(--serif)); text-shadow: 0 4px 30px rgba(0,0,0,.4); }
.rf-slot { display: grid; place-items: center; height: clamp(110px, 20vh, 220px); margin: 0 auto; width: min(86vw, 900px); border-radius: 28px;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 0 60px color-mix(in srgb, var(--accent) 60%, transparent); overflow: hidden; }
.rf-slot span { font: 800 clamp(2.4rem, 7vw, 6rem)/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 94%; }
.rf-slot.tick span { animation: rfTick .12s ease-out; }
@keyframes rfTick { from { transform: translateY(-38%); opacity: .2; } to { transform: none; opacity: 1; } }
.rf-slot.stop { animation: rfStop .9s ease-in-out; box-shadow: inset 0 0 0 4px #ffd23f, 0 0 90px #ffd23f; }
@keyframes rfStop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.08); } }
.rf-count { margin: 3vh 0 0; font-size: clamp(1rem, 2vw, 1.4rem); opacity: .8; }
.rf-win { animation: rfIn .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes rfIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.rf-photo { width: clamp(110px, 24vh, 300px); aspect-ratio: 1; margin: 0 auto 2.4vh; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 8px #ffd23f, 0 0 80px rgba(255,210,63,.7); }
.rf-photo:empty { display: none; }
.rf-photo img { width: 100%; height: 100%; object-fit: cover; }
.rf-label { margin: 0; font: 800 clamp(1rem, 2.2vw, 1.5rem)/1 var(--sans); letter-spacing: .25em; text-transform: uppercase; color: #ffd23f; }
.rf-winner { margin: 1vh 0; font: 800 clamp(2.6rem, min(8vw, 13vh), 7rem)/1 var(--sans); text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 80%, transparent); }
.rf-meta { margin: 0; font-size: clamp(1rem, 2vw, 1.5rem); opacity: .85; }
body.in-raffle .scr-band { z-index: 95; }
.raffle-card.is-on { border: 2px solid var(--accent); }
.raffle-list { list-style: none; padding: 0; margin: .4rem 0 .8rem; display: grid; gap: .35rem; }
.raffle-list li { padding: .5rem .7rem; border-radius: 10px; background: var(--bg); }

.scr-raffle.done .rf-prize { margin-bottom: 2.4vh; font-size: clamp(1.6rem, min(4.4vw, 7vh), 3.4rem); }
.other-ev { text-align: center; margin: 1.2rem 0 0; font-size: .88rem; }
.other-ev a { color: var(--muted); }

/* ============ Portada: galerías en vivo ============ */
body.has-live .home-wrap { min-height: auto; padding-top: 28px; padding-bottom: 36px; }
.mine-ev { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0 .4rem; padding: .8rem 1rem; border-radius: 16px; text-align: left; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #000)); box-shadow: var(--shadow); }
.mine-ev > span:first-child { font-size: 1.6rem; }
.mine-ev > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.mine-ev small { opacity: .85; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.mine-ev b { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-ev i { font-style: normal; font-size: 1.3rem; }
.hv { position: relative; overflow: hidden; padding: 56px 0 64px; color: #fff; background: #110c18; isolation: isolate; }
.hv-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hv-glow i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .45; animation: hvBlob 18s ease-in-out infinite alternate; }
.hv-glow i:nth-child(1) { background: #ff2fb9; left: -12vmax; top: -18vmax; }
.hv-glow i:nth-child(2) { background: #29b6ff; right: -14vmax; top: 10%; animation-delay: -6s; }
.hv-glow i:nth-child(3) { background: #ffb02e; left: 30%; bottom: -26vmax; animation-delay: -12s; opacity: .3; }
@keyframes hvBlob { to { transform: translate(6vmax, 4vmax) scale(1.15); } }
.hv-head { max-width: 1180px; margin: 0 auto 26px; padding: 0 16px; text-align: center; }
.hv-kicker { margin: 0 0 .4rem; font: 700 .8rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: #ffd23f; display: inline-flex; gap: .5rem; align-items: center; }
.hv-dot, .hv-live i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 0 0 rgba(255,59,92,.7); animation: hvPulse 1.6s infinite; display: inline-block; }
@keyframes hvPulse { 70% { box-shadow: 0 0 0 10px rgba(255,59,92,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,92,0); } }
.hv-head h2 { margin: 0; font: 700 clamp(2rem, 7vw, 3.4rem)/1.05 var(--serif); }
.hv-sub { margin: .6rem 0 0; color: rgba(255,255,255,.7); }
.hv-grid { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 16px; overflow-x: auto; padding: 8px 16px 18px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hv-grid::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .hv-grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); max-width: 1180px; margin: 0 auto; overflow: visible; gap: 22px; } }
.hv-card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; scroll-snap-align: center; color: #fff; text-decoration: none; background: #1d1626;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.45), 0 0 34px color-mix(in srgb, var(--c) 35%, transparent);
  transition: transform .25s ease, box-shadow .25s ease; transform-style: preserve-3d; will-change: transform; }
.hv-card:hover { box-shadow: 0 0 0 2px var(--c), 0 24px 50px rgba(0,0,0,.5), 0 0 50px color-mix(in srgb, var(--c) 55%, transparent); }
.hv-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.18), transparent 45%); opacity: 0; transition: opacity .25s; }
.hv-card:hover::after { opacity: 1; }
.hv-deck { position: absolute; inset: 0; }
.hv-deck img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; transform: scale(1.02); }
.hv-deck img.on { opacity: 1; animation: hvKen 7s ease-out both; }
@keyframes hvKen { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.hv-empty { position: absolute; inset: 0; display: grid; place-content: start center; padding-top: 22%; gap: .5rem; text-align: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 40%, #000) 100%); }
.hv-empty b { font-size: 4.4rem; animation: hvFloat 3s ease-in-out infinite; }
.hv-empty small { font-weight: 600; opacity: .9; }
@keyframes hvFloat { 50% { transform: translateY(-8px) rotate(-4deg); } }
.hv-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 48%, rgba(0,0,0,.82) 100%); pointer-events: none; }
.hv-top { position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; }
.hv-chip, .hv-live, .hv-open { padding: .32rem .65rem; border-radius: 99px; font: 700 .74rem/1 var(--sans); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; }
.hv-chip { background: rgba(0,0,0,.35); overflow: hidden; text-overflow: ellipsis; }
.hv-live { display: inline-flex; gap: .4rem; align-items: center; background: rgba(255,59,92,.9); text-transform: uppercase; letter-spacing: .08em; }
.hv-live i { background: #fff; width: 7px; height: 7px; }
.hv-open { background: rgba(255,255,255,.22); }
.hv-info { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: grid; gap: .25rem; }
.hv-name { font: 700 1.35rem/1.15 var(--serif); text-shadow: 0 2px 12px rgba(0,0,0,.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hv-info small { opacity: .8; font-size: .82rem; }
.hv-stats { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-top: .3rem; font-size: .85rem; }
.hv-stats > span { transition: transform .3s; }
.hv-stats > span.bump { animation: hvBump .6s ease; }
@keyframes hvBump { 40% { transform: scale(1.25); color: #ffd23f; } }
.hv-go { margin-top: .55rem; justify-self: start; padding: .45rem .9rem; border-radius: 99px; background: var(--c); font: 700 .85rem/1 var(--sans); box-shadow: 0 4px 14px rgba(0,0,0,.3); transition: transform .2s; }
.hv-card:hover .hv-go { transform: translateX(4px); }
.hv-card.newpic::before { animation: hvFlash 1s ease; }
@keyframes hvFlash { 0% { background-color: rgba(255,255,255,.55); } 100% { background-color: transparent; } }
.hv-card.hello { animation: hvHello .7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes hvHello { from { transform: scale(.7); opacity: 0; } }
.hv-card.bye { transition: transform .5s, opacity .5s; transform: scale(.85); opacity: 0; }
.home-foot { padding: 10px 16px 24px; }
@media (prefers-reduced-motion: reduce) { .hv-glow i, .hv-deck img.on, .hv-empty b, .hv-dot, .hv-live i { animation: none; } }
.hv-wait { color: #ffd23f; font-weight: 600; opacity: 1 !important; }

/* ============ Cabina 360 ============ */
body.booth-cam, body.booth-kiosk { background: #0d0a12; color: #fff; }
body.booth-cam .strip, body.booth-kiosk .strip { display: none; }
/* Cámara (iPhone en el brazo) */
.bc-main { position: fixed; inset: 0; background: #000; overflow: hidden; }
.bc-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-video.mirror { transform: scaleX(-1); }
.bc-over { position: absolute; inset: 0; display: grid; place-items: center; }
.bc-top { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; }
.bc-badge { padding: .35rem .7rem; border-radius: 99px; background: var(--accent); font-weight: 800; }
.bc-conn { padding: .35rem .7rem; border-radius: 99px; background: rgba(0,0,0,.5); font-size: .8rem; }
.bc-conn.ok { background: rgba(30,160,90,.85); }
.bc-count { font: 800 min(60vw, 40vh)/1 var(--sans); text-shadow: 0 0 40px rgba(0,0,0,.6); }
.bc-count.pop { animation: bcPop .9s ease-out; }
@keyframes bcPop { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); } }
.bc-rec { position: absolute; top: calc(64px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); padding: .5rem 1rem; border-radius: 99px; background: rgba(220,30,50,.9); font-weight: 800; display: flex; gap: .5rem; align-items: center; }
.bc-rec i { width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: hvPulse 1s infinite; }
.bc-work { width: min(80vw, 420px); padding: 1.2rem; border-radius: 20px; background: rgba(0,0,0,.65); text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bc-work p { margin: 0 0 .8rem; font-weight: 700; font-size: 1.2rem; }
.bc-bar, .bk-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.2); overflow: hidden; }
.bc-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.bc-start { width: min(88vw, 440px); padding: 1.6rem; border-radius: 24px; background: rgba(0,0,0,.72); text-align: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bc-start h1 { margin: 0 0 .5rem; font: 700 1.6rem/1.2 var(--serif); }
.bc-start p { color: rgba(255,255,255,.8); }
.bc-err { color: #ffb4b4 !important; }
.bc-test { position: absolute; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: .5rem .9rem; border: 0; border-radius: 99px; background: rgba(0,0,0,.5); color: #fff; font: 600 .85rem var(--sans); }
/* Pantalla de la cabina */
.bk-main { min-height: 100svh; padding: 18px clamp(16px, 3vw, 40px) 24px; display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
  background: radial-gradient(70% 60% at 20% 0%, color-mix(in srgb, var(--accent) 40%, transparent), transparent), #0d0a12; }
.bk-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.bk-head .eyebrow { color: #ffd23f; margin: 0; }
.bk-head h1 { margin: .2rem 0 0; font: 700 clamp(1.4rem, 3vw, 2.2rem)/1.1 var(--serif); }
.bk-cam { display: inline-flex; gap: .5rem; align-items: center; padding: .45rem .9rem; border-radius: 99px; background: rgba(255,255,255,.1); font-size: .9rem; white-space: nowrap; }
.bk-cam i { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; }
.bk-cam.ok i { background: #3ddc84; box-shadow: 0 0 10px #3ddc84; }
.bk-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: clamp(16px, 3vw, 40px); align-items: center; min-height: 0; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1000px) { .bk-stage { grid-template-columns: minmax(0, 1fr); } }
.bk-player { position: relative; height: min(70svh, 820px); aspect-ratio: 9 / 16; max-width: 100%; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.6), 0 0 80px color-mix(in srgb, var(--accent) 35%, transparent); }
.bk-player video { width: 100%; height: 100%; object-fit: cover; }
.bk-msg { position: absolute; inset: 0; display: grid; place-content: center; gap: .5rem; padding: 1.2rem; text-align: center; background: rgba(10,6,16,.72); }
.bk-msg[hidden] { display: none; }
.bk-msg b { font: 800 clamp(1.4rem, 3.4vw, 2.4rem)/1.1 var(--sans); }
.bk-msg span { opacity: .8; }
.bk-msg.count b { font-size: clamp(6rem, 20vh, 12rem); }
.bk-side { display: grid; gap: 14px; justify-items: center; text-align: center; }
.bk-qr-box { width: 100%; padding: 18px; border-radius: 22px; background: #fff; color: #111; }
.bk-qr-t { margin: 0 0 10px; font-weight: 800; font-size: 1.15rem; }
.bk-qr { display: grid; place-items: center; }
.bk-qr img, .bk-qr canvas { width: min(220px, 60vw) !important; height: auto !important; }
.bk-wa { margin-top: 12px; text-align: left; font-size: .9rem; }
.bk-wa label { font-weight: 700; }
.bk-wa-row { display: flex; gap: 8px; margin-top: 6px; }
.bk-wa-row input { flex: 1; min-width: 0; padding: .6rem .7rem; border: 1px solid #ccc; border-radius: 10px; font: inherit; }
.bk-wa-row .btn { margin: 0; }
.bk-go { width: min(100%, 320px); padding: 1.1rem; border: 0; border-radius: 99px; background: #e5484d; color: #fff; font: 800 1.6rem/1 var(--sans); letter-spacing: .06em; cursor: pointer; box-shadow: 0 10px 30px rgba(229,72,77,.45); transition: transform .15s, opacity .2s; }
.bk-go:not(:disabled):active { transform: scale(.96); }
.bk-go:disabled { opacity: .35; cursor: default; }
.bk-hint { margin: 0; font-size: .85rem; opacity: .7; }
.bk-recent h2 { margin: 0 0 8px; font-size: 1rem; opacity: .8; }
.bk-thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.bk-thumb { flex: none; width: 74px; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #222; cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; }
.bk-thumb.on { outline-color: var(--accent); }
.bk-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Página del invitado */
.bg-main { max-width: 520px; margin: 0 auto; padding: 18px 16px 30px; }
.bg-video { margin: .6rem auto 1rem; border-radius: 22px; overflow: hidden; background: #000; box-shadow: var(--shadow); aspect-ratio: 9 / 16; max-height: 72svh; }
.bg-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.bg-actions { display: grid; gap: .55rem; }
.bg-actions .btn { margin: 0; }
.booth-card.is-on { border: 2px solid var(--accent); }
.booth-fx { display: grid; gap: .3rem; border: 0; padding: 0; }
.booth-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 1rem 0 .6rem; }
.booth-link { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--bg); }
.booth-link > div:last-child { display: grid; gap: .3rem; }
.booth-qr { flex: none; background: #fff; padding: 6px; border-radius: 8px; }
.booth-qr img, .booth-qr canvas { display: block; width: 100px !important; height: 100px !important; }
.booth-audio { height: 30px; vertical-align: middle; max-width: 100%; }
.bc-light { position: absolute; inset: 0; z-index: 5; background: #fff; }
.bc-light[hidden] { display: none; }
.bc-auto { position: absolute; left: 12px; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); margin: 0; padding: .55rem .8rem; border-radius: 14px; background: rgba(0,0,0,.55); text-align: center; font-weight: 700; font-size: .9rem; }
.bc-auto.on { background: rgba(30,160,90,.85); }
.bc-auto:empty { display: none; }
.bk-auto { margin: 0; padding: .5rem 1rem; border-radius: 99px; background: rgba(255,255,255,.12); font-weight: 700; }
.bk-auto.on { background: rgba(61,220,132,.25); color: #b7ffd6; }
.booth-prev-wrap { float: right; display: grid; gap: .3rem; justify-items: center; margin: 0 0 1rem 1.2rem; }
.booth-prev { width: 150px; height: auto; aspect-ratio: 9 / 16; border-radius: 14px; box-shadow: var(--shadow); background: #222; }
@media (max-width: 640px) { .booth-prev-wrap { float: none; margin: 0 auto 1rem; } }
.booth-card form { clear: none; }
.booth-links { clear: both; }

/* ---------- Cabina 360: plantilla Slow Motion ---------- */
.booth-tpl-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.booth-tpl-opt { display: flex; gap: .55rem; align-items: flex-start; padding: .65rem .75rem; border: 1px solid var(--line, rgba(0,0,0,.14)); border-radius: 12px; cursor: pointer; background: var(--card, transparent); }
.booth-tpl-opt input { margin-top: .2rem; accent-color: var(--accent); }
.booth-tpl-opt span { display: grid; gap: .15rem; }
.booth-tpl-opt small { opacity: .7; font-size: .78rem; line-height: 1.3; }
.booth-tpl-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.booth-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.booth-caps-info { margin: .6rem 0 0; }
.booth-est { margin: .45rem 0 0; padding: .6rem .8rem; border-radius: 10px; background: rgba(30,160,90,.1); font-size: .88rem; line-height: 1.45; }
.booth-est.warn { background: rgba(230,150,20,.14); }
.booth-est:empty { display: none; }
.booth-jobs { margin: .8rem 0; }
.booth-jobs summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.booth-jobs .table-wrap { overflow-x: auto; margin-top: .5rem; }
.booth-jobs-t { width: 100%; border-collapse: collapse; font-size: .82rem; }
.booth-jobs-t th, .booth-jobs-t td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line, rgba(0,0,0,.1)); vertical-align: top; }
.job-st { font-weight: 700; }
.job-listo { color: #1e9a5a; }
.job-error { color: #c4402f; }
.bc-caps { position: absolute; top: calc(52px + env(safe-area-inset-top, 0px)); left: 12px; margin: 0; padding: .3rem .65rem; border-radius: 99px; background: rgba(0,0,0,.5); font-size: .75rem; max-width: calc(100% - 24px); }
.bc-caps:empty { display: none; }
.bc-pend { position: absolute; left: 12px; right: 12px; top: 50%; transform: translateY(-50%); display: grid; gap: .45rem; justify-items: center; padding: 1rem; border-radius: 16px; background: rgba(0,0,0,.72); text-align: center; }
.bc-pend span { font-size: .85rem; opacity: .85; }
.bk-retry { margin-top: .3rem; }
.booth-tpl-opt input[type=radio] { width: 18px; height: 18px; flex: 0 0 18px; padding: 0; margin: .15rem 0 0; }

/* ---------- Cabina 360: QR por video, detener, marcos y música ---------- */
.bk-thumb { width: auto; aspect-ratio: auto; display: grid; grid-template-columns: 74px 104px; grid-template-rows: auto auto; gap: 4px 8px; padding: 8px; background: rgba(255,255,255,.08); color: #fff; text-align: left; border-radius: 14px; }
.bk-thumb video { grid-row: 1 / 3; width: 74px; height: auto; aspect-ratio: 9 / 16; border-radius: 8px; }
.bk-thumb-qr { display: block; width: 104px; height: 104px; border-radius: 6px; overflow: hidden; background: #fff; }
.bk-thumb-qr svg, .bk-thumb-qr img, .bk-thumb-qr canvas { display: block; width: 100% !important; height: 100% !important; }
.bk-thumb small { font-size: .78rem; opacity: .8; align-self: start; }
.bk-recent h2 small { font-weight: 500; opacity: .75; }
.bk-qr svg { display: block; width: 220px; height: 220px; }
#bkCancel { border-color: rgba(255,90,90,.6); color: #fff; background: rgba(200,40,40,.35); }
#bkCancel.sure { background: #c62828; border-color: #c62828; }
.bc-stop { margin-top: .9rem; padding: .5rem 1rem; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; background: rgba(200,40,40,.55); color: #fff; font: 700 .9rem var(--sans); }
.bc-stop:disabled { opacity: .5; }
.bc-pend .row-btns { display: flex; gap: .5rem; justify-content: center; }
.bc-pend .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.booth-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .55rem; }
.booth-frame-opt { position: relative; display: grid; gap: .3rem; justify-items: center; padding: .4rem; border: 1px solid var(--line, rgba(0,0,0,.14)); border-radius: 12px; cursor: pointer; text-align: center; }
.booth-frame-opt input { position: absolute; opacity: 0; pointer-events: none; }
.booth-frame-opt canvas { width: 100%; max-width: 108px; height: auto; aspect-ratio: 9 / 16; border-radius: 8px; background: #333; }
.booth-frame-opt span { font-size: .74rem; line-height: 1.2; }
.booth-frame-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.booth-frame-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.booth-music { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; }
.booth-music-opt { display: flex; align-items: center; gap: .4rem; padding: .5rem .55rem; border: 1px solid var(--line, rgba(0,0,0,.14)); border-radius: 12px; }
.booth-music-opt label { flex: 1; display: flex; gap: .45rem; align-items: flex-start; cursor: pointer; min-width: 0; }
.booth-music-opt input[type=radio] { width: 18px; height: 18px; flex: 0 0 18px; padding: 0; margin: .15rem 0 0; accent-color: var(--accent); }
.booth-music-opt span { display: grid; min-width: 0; }
.booth-music-opt small { opacity: .65; font-size: .74rem; }
.booth-music-opt:has(input:checked) { border-color: var(--accent); }
.booth-music-opt:has(input:disabled) { opacity: .55; }
.booth-play { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: .9rem; cursor: pointer; }
.booth-play.on { background: #222; }

/* ---------- AI Portraits ---------- */
.ai-main { max-width: 1100px; margin: 0 auto; padding: 18px 16px 40px; display: grid; gap: 18px; }
.ai-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ai-head h1 { margin: 0; font-size: clamp(1.4rem, 4vw, 2.1rem); }
.ai-left { margin: 0; padding: .35rem .8rem; border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 700; font-size: .85rem; }
.ai-left.none { background: rgba(200,60,40,.15); }
.ai-step { background: var(--card, #fff); border-radius: var(--radius, 18px); padding: 16px; box-shadow: var(--shadow, 0 2px 12px rgba(0,0,0,.06)); }
.ai-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 12px; font-size: 1.1rem; }
.ai-h span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: .9rem; }
.ai-cam { position: relative; width: 100%; max-width: 560px; margin: 0 auto 12px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #1c1a22; display: grid; place-items: center; }
.ai-cam video, .ai-cam img { width: 100%; height: 100%; object-fit: cover; }
.ai-cam video.mirror { transform: scaleX(-1); }
.ai-cam-empty { color: #fff; text-align: center; padding: 1rem; opacity: .85; }
.ai-cam-empty span { font-size: 2.6rem; }
.ai-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 7rem; font-weight: 800; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.ai-count.pop { animation: aiPop .9s ease-out; }
@keyframes aiPop { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); } }
.ai-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ai-file { position: relative; overflow: hidden; }
.ai-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ai-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.ai-style { display: grid; gap: 6px; padding: 6px; border: 2px solid transparent; border-radius: 16px; background: rgba(0,0,0,.04); cursor: pointer; font: inherit; color: inherit; text-align: center; }
.ai-style.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ai-style-art { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; font-size: 2.6rem; }
.ai-style-art img { width: 100%; height: 100%; object-fit: cover; }
.ai-style b { font-size: .85rem; line-height: 1.2; }
.ai-opts { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 14px 0 6px; }
.ai-formats { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-fmt { display: flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border: 1px solid var(--line, rgba(0,0,0,.15)); border-radius: 12px; background: transparent; font: inherit; font-size: .85rem; color: inherit; cursor: pointer; }
.ai-fmt i { display: block; height: 22px; border: 2px solid currentColor; border-radius: 3px; opacity: .7; }
.ai-fmt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 700; }
.ai-name { display: grid; gap: .25rem; flex: 1; min-width: 180px; font-size: .85rem; }
.ai-name input { width: 100%; }
.ai-consent { margin: 10px 0 12px; font-size: .85rem; line-height: 1.4; }
.ai-go { font-size: 1.1rem; padding: .9rem; }
.ai-status { text-align: center; padding: 10px 0; }
.ai-spinner { width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; border: 5px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: aiSpin 1s linear infinite; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
.ai-st-label { font-size: 1.15rem; margin: 0 0 8px; }
.ai-states { display: flex; justify-content: center; gap: 6px; padding: 0; margin: 0 0 6px; list-style: none; flex-wrap: wrap; }
.ai-states li { padding: .25rem .65rem; border-radius: 99px; background: rgba(0,0,0,.06); font-size: .78rem; }
.ai-states li.now { background: var(--accent); color: #fff; }
.ai-states li.done { background: rgba(30,160,90,.18); }
.ai-done { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; align-items: center; }
.ai-out { margin: 0; text-align: center; }
.ai-out img { max-width: 100%; max-height: 70vh; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ai-out figcaption { font-size: .85rem; opacity: .75; margin-top: 6px; }
.ai-share { text-align: center; display: grid; gap: 8px; justify-items: center; }
.ai-qr { background: #fff; padding: 8px; border-radius: 12px; line-height: 0; }
.ai-qr svg { width: 200px; height: 200px; }
.ai-guest .ai-qr svg { width: 140px; height: 140px; }
.ai-recent h2 { font-size: 1rem; margin: 0 0 8px; }
.ai-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.ai-thumb { flex: none; display: grid; grid-template-columns: auto auto; gap: 4px 8px; padding: 8px; border-radius: 14px; background: var(--card, #fff); box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,.06)); color: inherit; text-decoration: none; }
.ai-thumb img { width: 88px; height: 110px; object-fit: cover; border-radius: 8px; grid-row: 1; }
.ai-thumb-qr { width: 110px; height: 110px; background: #fff; border-radius: 6px; overflow: hidden; line-height: 0; }
.ai-thumb-qr svg { width: 100%; height: 100%; }
.ai-thumb small { grid-column: 1 / -1; font-size: .74rem; opacity: .75; max-width: 210px; }
.ai-guest .ai-thumb { grid-template-columns: auto; }
.ai-guest .ai-thumb small { max-width: 88px; }
@media (max-width: 720px) { .ai-done { grid-template-columns: 1fr; } .ai-styles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .ai-cam { aspect-ratio: 3 / 4; } }
/* página del invitado con su retrato */
.aig-main { max-width: 560px; margin: 0 auto; padding: 18px 16px 40px; display: grid; gap: 14px; }
.aig-img { margin: 0; text-align: center; }
.aig-img img { width: 100%; border-radius: 16px; box-shadow: 0 12px 34px rgba(0,0,0,.2); }
.aig-img figcaption { font-size: .85rem; opacity: .75; margin-top: 6px; }
.aig-del { text-align: center; }
/* panel */
.ai-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.ai-kpis div { padding: .6rem .7rem; border-radius: 12px; background: rgba(0,0,0,.04); display: grid; }
.ai-kpis b { font-size: 1.2rem; }
.ai-kpis small { opacity: .7; font-size: .76rem; }
.ai-style-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 10px; }
.ai-style-stats { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.ai-style-stats li { display: grid; grid-template-columns: 1fr auto 90px; gap: 10px; padding: .3rem .5rem; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); font-size: .88rem; }
.ai-style-stats small { text-align: right; opacity: .7; }
.ai-mini { width: 40px; height: 50px; object-fit: cover; border-radius: 6px; display: block; }
.ai-jobs-t td { vertical-align: middle; }
.ai-job-acts { display: flex; gap: 8px; }
.ai-style-admin { display: grid; gap: 10px; }
.ai-sa summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.ai-sa summary::-webkit-details-marker { display: none; }
.ai-sa.off { opacity: .6; }
.ai-sa-art { flex: none; width: 56px; height: 70px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; font-size: 1.7rem; }
.ai-sa-art img { width: 100%; height: 100%; object-fit: cover; }
.ai-sa-name { flex: 1; display: grid; min-width: 0; }
.ai-sa-acts form { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ai-sa-form { margin-top: 12px; }
.ai-sa-form textarea, #ia textarea { width: 100%; }
.ai-name input { padding: .6rem .75rem; border: 1px solid var(--line, rgba(0,0,0,.18)); border-radius: 10px; font: inherit; background: var(--card, #fff); color: inherit; }

/* ---------- Photobooth: kiosco ---------- */
.pb-kiosk { overflow: hidden; background: #0f0e13; color: #fff; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.pb-kiosk .site-foot, .pb-kiosk .float-contact { display: none !important; }
.pbk { position: fixed; inset: 0; display: grid; }
.pbk-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; }
.pbk-attract { background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 45%, #0f0e13), #0f0e13 70%); text-align: center; }
.pbk-attract h1 { margin: .2rem 0; font-size: clamp(2rem, 6vw, 4.2rem); line-height: 1.05; }
.pbk-attract .eyebrow { color: #fff; opacity: .8; }
.pbk-welcome { font-size: clamp(1.1rem, 2.6vw, 1.6rem); opacity: .85; margin: 0 0 1rem; }
.pbk-big { padding: 1.3rem 3rem; border: 0; border-radius: 99px; background: var(--accent); color: #fff; font: 800 clamp(1.3rem, 3vw, 2rem) var(--sans); box-shadow: 0 10px 40px color-mix(in srgb, var(--accent) 55%, transparent); animation: pbkPulse 2.2s ease-in-out infinite; cursor: pointer; }
@keyframes pbkPulse { 50% { transform: scale(1.05); } }
.pbk-status { font-size: .9rem; opacity: .75; min-height: 1.2em; }
.pbk-recent { position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; gap: 10px; justify-content: center; overflow: hidden; }
.pbk-rc { display: flex; gap: 6px; padding: 6px; border-radius: 12px; background: rgba(255,255,255,.08); }
.pbk-rc img { height: 84px; width: auto; max-width: 120px; object-fit: cover; border-radius: 6px; }
.pbk-rc span { width: 84px; height: 84px; background: #fff; border-radius: 6px; overflow: hidden; line-height: 0; }
.pbk-rc span svg { width: 100%; height: 100%; }
.pbk-title { margin: 0; font-size: clamp(1.5rem, 4vw, 2.4rem); }
.pbk-tpls { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; max-height: 70vh; overflow: auto; padding: 6px; }
.pbk-tpl { display: grid; gap: 8px; justify-items: center; padding: 12px; border: 3px solid transparent; border-radius: 18px; background: rgba(255,255,255,.08); color: #fff; font: inherit; cursor: pointer; }
.pbk-tpl:active { border-color: var(--accent); }
.pbk-tpl canvas { max-width: 240px; max-height: 300px; width: auto; height: auto; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.pbk-tpl span { display: grid; text-align: center; } .pbk-tpl small { opacity: .7; }
.pbk-live { position: relative; width: min(92vw, 1100px); aspect-ratio: 4 / 3; max-height: 72vh; border-radius: 20px; overflow: hidden; background: #000; }
.pbk-live.small { width: min(70vw, 640px); max-height: 46vh; }
.pbk-live video, .pbk-live img { width: 100%; height: 100%; object-fit: cover; }
.pbk-live video.mirror { transform: scaleX(-1); }
.pbk-dslr { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; font-weight: 800; background: rgba(0,0,0,.35); }
.pbk-shoot .pbk-live { max-height: 78vh; }
.pbk-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pbk-flt { padding: .8rem 1.3rem; border: 2px solid rgba(255,255,255,.3); border-radius: 99px; background: rgba(255,255,255,.08); color: #fff; font: 700 1.05rem var(--sans); cursor: pointer; }
.pbk-flt.on { background: var(--accent); border-color: var(--accent); }
.pbk-count { position: absolute; inset: 0; display: grid; place-items: center; font: 900 min(40vw, 22rem) var(--sans); color: #fff; text-shadow: 0 10px 60px rgba(0,0,0,.6); pointer-events: none; }
.pbk-count.pop { animation: pbkCount .95s ease-out; }
@keyframes pbkCount { from { transform: scale(1.8); opacity: 0; } 25% { opacity: 1; } to { transform: scale(.9); opacity: .9; } }
.pbk-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.pbk-flash.go { animation: pbkFlash .6s ease-out; }
@keyframes pbkFlash { from { opacity: 1; } to { opacity: 0; } }
.pbk-shotno { margin: 0; font-size: 1.4rem; font-weight: 800; }
.pbk-dots { display: flex; gap: 8px; } .pbk-dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.25); } .pbk-dots i.ok { background: #4cd38a; } .pbk-dots i.now { background: var(--accent); transform: scale(1.3); }
.pbk-msg { margin: 0; padding: .6rem 1rem; border-radius: 12px; background: rgba(200,60,40,.35); }
.pbk-bar { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pbk-btn { min-height: 64px; padding: .9rem 2rem; border: 0; border-radius: 18px; background: var(--accent); color: #fff; font: 800 1.2rem var(--sans); cursor: pointer; }
.pbk-btn.ghost { background: rgba(255,255,255,.12); }
.pbk-btn:disabled { opacity: .5; }
.pbk-final, .pbk-done { display: flex; gap: 28px; align-items: center; justify-content: center; max-width: 96vw; max-height: 78vh; }
.pbk-comp { display: grid; place-items: center; }
.pbk-comp canvas, .pbk-comp img { max-height: 74vh; max-width: 56vw; width: auto; height: auto; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.5); background: #fff; }
.pbk-side { display: grid; gap: 14px; justify-items: center; min-width: 260px; text-align: center; }
.pbk-thumbs { display: grid; grid-template-columns: repeat(3, 96px); gap: 10px; }
.pbk-thumb { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: #000; }
.pbk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pbk-thumb span { position: absolute; inset: auto 0 0; padding: 3px; background: rgba(0,0,0,.6); color: #fff; font-weight: 700; font-size: .85rem; }
.pbk-qr-t { margin: 0; font-weight: 800; font-size: 1.15rem; }
.pbk .ai-qr svg { width: 220px; height: 220px; }
.pbk-copies { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pbk-cp { padding: .6rem 1rem; border: 2px solid rgba(255,255,255,.3); border-radius: 12px; background: transparent; color: #fff; font: 700 1rem var(--sans); cursor: pointer; }
.pbk-cp.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 35%, transparent); }
.pbk-pst { margin: 0; min-height: 1.2em; font-weight: 700; }
.pbk-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,.7); }
.pbk-modal-in { display: grid; gap: 14px; padding: 26px; border-radius: 22px; background: #1d1b24; min-width: min(420px, 90vw); text-align: center; }
.pbk-modal h3 { margin: 0; }
.pbk-sel { display: grid; gap: 6px; } .pbk-sel select { padding: .6rem; border-radius: 10px; font: inherit; }
.pbk-corner { position: fixed; top: 0; left: 0; width: 70px; height: 70px; z-index: 40; }
#printFrame { position: fixed; width: 0; height: 0; border: 0; }
@media (max-width: 820px) { .pbk-final, .pbk-done { flex-direction: column; gap: 14px; } .pbk-comp canvas, .pbk-comp img { max-width: 86vw; max-height: 48vh; } .pbk-thumbs { grid-template-columns: repeat(3, 72px); } .pbk-recent { display: none; } }

/* ---------- Photobooth: editor de plantillas ---------- */
.pbe-page .adm-main.pbe-main { max-width: 1500px; }
.pbe-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pbe-card { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 14px; }
.pbe-card.off { opacity: .6; }
.pbe-thumb { display: grid; place-items: center; min-height: 200px; background: #eceff3; border-radius: 10px; padding: 8px; }
.pbe-thumb canvas, .pbe-preset canvas { max-width: 100%; max-height: 220px; width: auto; height: auto; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.pbe-acts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pbe-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pbe-preset { display: grid; gap: 6px; justify-items: center; padding: 10px; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 12px; background: #f6f7f9; cursor: pointer; font: inherit; font-size: .8rem; }
.pbe-preset canvas { max-height: 150px; }
.pbe { display: grid; gap: 12px; }
.pbe-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 14px; }
.pbe-top input#eName { font-weight: 700; font-size: 1.05rem; min-width: 220px; }
.pbe-top-r { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pbe-body { display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; gap: 12px; align-items: start; }
.pbe-tools, .pbe-props { padding: 12px; display: grid; gap: 8px; position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow: auto; }
.pbe-h { margin: .4rem 0 0; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.pbe-file { position: relative; overflow: hidden; } .pbe-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pbe-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .85rem; }
.pbe-row.col { flex-direction: column; align-items: stretch; }
.pbe-row input[type=number] { width: 84px; } .pbe-row input[type=range] { flex: 1; } .pbe-row textarea { width: 100%; }
.pbe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.pbe-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pbe-btns .danger { color: #c4402f; }
.pbe-tip { margin-top: .6rem; }
.pbe-stage-wrap { padding: 12px; display: grid; place-items: center; background: repeating-conic-gradient(#e9ecf1 0% 25%, #f6f7f9 0% 50%) 50% / 24px 24px; }
.pbe-stage { position: relative; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.pbe-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pbe-boxes { position: absolute; inset: 0; touch-action: none; }
.pbe-box { position: absolute; border: 1.5px dashed rgba(40,110,255,.55); cursor: move; transform-origin: center; }
.pbe-box.sel { border: 2px solid #2a6bff; box-shadow: 0 0 0 9999px rgba(0,0,0,.04); }
.pbe-box .pbe-tag { position: absolute; top: -1px; left: -1px; padding: 1px 5px; background: rgba(40,110,255,.85); color: #fff; font-size: 11px; border-radius: 0 0 6px 0; pointer-events: none; }
.pbe-box .pbe-rs { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 4px; background: #2a6bff; border: 2px solid #fff; cursor: nwse-resize; display: none; }
.pbe-box.sel .pbe-rs { display: block; }
.pbe-guide { position: absolute; background: #ff2fb9; pointer-events: none; } .pbe-guide.v { top: 0; bottom: 0; left: 50%; width: 1px; } .pbe-guide.h { left: 0; right: 0; top: 50%; height: 1px; }
@media (max-width: 1100px) { .pbe-body { grid-template-columns: 1fr; } .pbe-tools, .pbe-props { position: static; max-height: none; } }
/* panel */
.pb-print-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; }
.pb-newagent { padding: 12px 14px; border-radius: 12px; background: rgba(30,160,90,.1); margin: 10px 0; }
.pb-token { word-break: break-all; user-select: all; }
.pb-agent-h { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; } .pb-agent-h h2 { margin: 0; }

/* ---------- Datos de los invitados ---------- */
.guest-box .guest-form { display: grid; gap: .7rem; }
.guest-box h2 { margin: 0; }
.guest-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.55); overflow: auto; }
.guest-modal .guest-form { width: min(440px, 100%); padding: 22px; border-radius: var(--radius, 18px); background: var(--card, #fff); color: var(--ink, #222); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.guest-skip { justify-self: center; }
body.guest-open { overflow: hidden; }
.guest-locked { opacity: .45; pointer-events: none; filter: grayscale(.3); }

/* Galerías en vivo: mismo fondo claro del inicio (continúa la página, sin bloque oscuro) */
.hv { background: transparent; color: var(--ink); padding: 8px 0 48px; }
.hv-glow { display: none; }
.hv-kicker { color: var(--accent); }
.hv-head h2 { color: var(--ink); }
.hv-sub { color: var(--muted); }
.hv-card { box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 14px 32px rgba(40,25,15,.18); }
.hv-card:hover { box-shadow: 0 0 0 2px var(--c), 0 20px 40px rgba(40,25,15,.25); }
body.has-live .home-wrap { padding-bottom: 20px; }

/* ---------- Moderadores ---------- */
.mod-row { border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 12px; padding: .6rem .8rem; margin-bottom: .6rem; }
.mod-row.is-new { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.mod-row summary { cursor: pointer; }
.mod-body { display: flex; gap: 14px; align-items: flex-start; margin-top: .6rem; flex-wrap: wrap; }
.mod-body .booth-qr { flex: none; }
.mod-info { flex: 1; min-width: 220px; display: grid; gap: .5rem; }
.mod-add { margin-top: .8rem; }
.md-main { max-width: 1100px; }
.md-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; }
.md-tabs a { white-space: nowrap; }
.md-tabs b { margin-left: .25rem; padding: 0 .45rem; border-radius: 99px; background: var(--accent); color: #fff; font-size: .78rem; }
.md-all { margin: 0 0 10px; }
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.md-item { background: var(--paper, #fff); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,.08)); display: grid; transition: opacity .25s; }
.md-item.busy, .md-m.busy { opacity: .5; } .md-item.gone, .md-m.gone { opacity: .45; }
.md-media { aspect-ratio: 1; background: #111; display: grid; place-items: center; }
.md-media img, .md-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-audio { color: #fff; display: grid; gap: 6px; place-items: center; padding: 8px; font-size: 1.6rem; } .md-audio audio { width: 100%; }
.md-meta { display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px 0; font-size: .82rem; }
.md-msg { margin: 2px 8px 0; font-size: .8rem; opacity: .8; }
.md-acts { display: flex; gap: 6px; padding: 8px; }
.md-btn { flex: 1; min-height: 44px; border: 1px solid var(--line, rgba(0,0,0,.15)); border-radius: 10px; background: transparent; color: inherit; font: 700 .9rem var(--sans); cursor: pointer; }
.md-btn.ok { background: #1e9a5a; border-color: #1e9a5a; color: #fff; }
.md-btn.del { flex: 0 0 48px; color: #c4402f; }
.md-done { flex: 1; text-align: center; font-weight: 700; padding: .6rem 0; }
.md-empty { text-align: center; padding: 2rem 1rem; opacity: .75; }
.md-msgs { display: grid; gap: 10px; }
.md-m { background: var(--paper, #fff); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,.06)); }
.md-m p { margin: .3rem 0; } .md-m audio { width: 100%; margin: .3rem 0; }
.md-m.hidden { opacity: .6; }
.md-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.md-tool { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: var(--paper, #fff); box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,.06)); color: inherit; text-decoration: none; font-size: 1.3rem; }
.md-tool b { font-size: 1rem; } .md-tool small { font-size: .8rem; opacity: .7; }
.md-item { grid-template-columns: minmax(0, 1fr); align-content: start; }
.md-acts { min-width: 0; margin: 0; }
.md-btn { min-width: 0; padding: 0 .4rem; }
@media (max-width: 420px) { .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* ===== ENTRETENIMIENTO INTERACTIVO (juegos) ===== */
.g-page { background: var(--bg); }
.g-main { max-width: 560px; margin: 0 auto; padding: 20px 16px 60px; display: grid; gap: 14px; }
.g-head { text-align: center; display: grid; gap: 4px; justify-items: center; }
.g-logo { max-height: 64px; max-width: 200px; object-fit: contain; }
.g-hello { font-size: .9rem; color: var(--muted); }
.g-form { display: grid; gap: 10px; }
.g-form input:not([type=checkbox]) { width: 100%; }
.g-list { display: grid; gap: 10px; }
.g-card { --gc: var(--accent); display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); color: inherit; text-decoration: none; border-left: 5px solid var(--gc); }
.g-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; flex: none; }
.g-ico { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 1.8rem; background: color-mix(in srgb, var(--gc) 16%, #fff); flex: none; }
.g-card-t { display: grid; gap: 2px; min-width: 0; }
.g-card-t small { color: var(--muted); font-size: .82rem; }
.g-card.g-eff-programado, .g-card.g-eff-pausado { opacity: .7; }
.g-mine h2 { font-size: 1.1rem; }
.g-aw { display: flex; align-items: center; gap: 8px; padding: 10px 2px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.g-aw b { flex: 1; } .g-aw small { color: var(--muted); } .g-aw i { font-style: normal; opacity: .5; }
.g-aw.g-st-canjeado, .g-aw.g-st-caducado, .g-aw.g-st-anulado { opacity: .55; }
.g-empty, .g-soon { text-align: center; }
.g-big { font-size: 2.6rem; margin: 0; }
.g-mod-page { --gc: var(--accent); border-top: 6px solid var(--gc); text-align: center; display: grid; gap: 10px; }
.g-banner { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; }
.g-sponsor { display: grid; justify-items: center; gap: 4px; color: var(--muted); }
.g-sponsor img { max-height: 48px; max-width: 160px; object-fit: contain; }
.g-bases-txt { white-space: normal; line-height: 1.55; }
.g-voucher { background: var(--paper); border-radius: 22px; box-shadow: var(--shadow); padding: 22px 18px; text-align: center; display: grid; gap: 8px; justify-items: center; border: 2px dashed var(--accent); }
.g-v-img { width: 120px; height: 120px; object-fit: cover; border-radius: 16px; }
.g-v-title { font-family: var(--serif); font-size: 1.6rem; margin: 0; }
.g-v-qr { background: #fff; padding: 8px; border-radius: 12px; }
.g-v-code { font: 700 1.6rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; margin: 4px 0; }
.g-v-status { font-weight: 600; }
.g-voucher.g-st-pendiente .g-v-status, .g-val.g-st-pendiente .g-val-state { color: var(--ok); }
.g-voucher.g-st-canjeado, .g-voucher.g-st-caducado, .g-voucher.g-st-anulado { border-color: var(--line); }
.g-voucher.g-st-canjeado .g-v-qr, .g-voucher.g-st-caducado .g-v-qr, .g-voucher.g-st-anulado .g-v-qr { opacity: .2; }
.g-val { text-align: center; display: grid; gap: 6px; border: 3px solid var(--line); }
.g-val.g-st-pendiente { border-color: var(--ok); }
.g-val.g-st-canjeado { border-color: var(--danger); }
.g-val.g-st-canjeado .g-val-state { color: var(--danger); }
.g-val-state { font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; margin: 0; }
.g-redeem { font-size: 1.1rem; padding: .9rem; background: var(--ok); border-color: var(--ok); }
.g-big-msg { font-size: 1.05rem; font-weight: 600; text-align: center; }
.g-recent { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.g-recent li { padding: 6px 0; border-top: 1px solid var(--line); }
/* panel */
.g-top { display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.g-top > div:first-child { flex: 1 1 300px; min-width: 0; }
.g-qrs { display: flex; gap: 12px; flex-wrap: wrap; }
.g-qrbox { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: .8rem; }
.g-switch { margin-top: 10px; }
.g-tabs { margin: 4px 0 14px; }
.g-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; height: 120px; align-items: end; }
.g-hours span { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; text-align: center; }
.g-hours i { display: block; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.g-hours small { font-size: .65rem; color: var(--muted); height: 1em; }
.g-mods { display: grid; gap: 10px; }
.g-mod summary { display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; }
.g-mod summary::-webkit-details-marker { display: none; }
.g-mod[open] summary { margin-bottom: 12px; }
.g-mod-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; background: var(--accent-soft); flex: none; }
.g-mod-t { display: grid; min-width: 0; } .g-mod-t small { color: var(--muted); }
.g-mod.g-eff-activo { box-shadow: 0 0 0 2px var(--ok), var(--shadow); }
.g-modqr { display: grid; gap: 6px; justify-items: start; }
.g-off { opacity: .55; }
.g-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.05); text-decoration: none; color: inherit; font-size: .82rem; margin: 2px 0; }
.g-chip.on { background: var(--accent); color: #fff; }
.g-evcard { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.g-evcard > div { flex: 1 1 260px; min-width: 0; }
.g-evcard.is-on { box-shadow: 0 0 0 2px var(--ok), var(--shadow); }

/* ===== Juegos fase 2: ruleta y sorteos ===== */
.g-wheel-wrap { position: relative; width: min(86vw, 380px); aspect-ratio: 1; margin: 6px auto 4px; }
.g-wheel { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.18); will-change: transform; }
.g-wheel-pin { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid var(--ink, #2b231e); z-index: 2; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.g-wheel-hub { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.9rem; box-shadow: 0 2px 10px rgba(0,0,0,.2); z-index: 2; }
.g-spin { font-size: 1.2rem; padding: .95rem; background: var(--gc, var(--accent)); border-color: var(--gc, var(--accent)); }
.g-result { position: fixed; inset: 0; background: rgba(20,14,10,.55); display: grid; place-items: center; z-index: 50; padding: 16px; }
.g-result[hidden] { display: none; }
.g-result-box { background: #fff; color: #2b231e; border-radius: 22px; padding: 24px 20px; max-width: 360px; width: 100%; text-align: center; animation: gPop .35s ease-out; }
.g-result-box h3 { font-size: 1.5rem; margin: 0 0 6px; }
@keyframes gPop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.g-raffles { display: grid; gap: 12px; text-align: left; }
.g-raffle { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(0,0,0,.035); }
.g-raffle img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; flex: none; }
.g-raffle h3 { margin: 0 0 4px; font-size: 1.05rem; }
.g-raffle p { margin: 3px 0; }
.g-in { color: var(--ok); font-weight: 600; font-size: .92rem; }
.g-won { font-weight: 800; color: var(--ok); font-size: 1.05rem; }
.g-segs input:not([type=color]) { width: 100%; min-width: 120px; }
.g-segs .g-w { width: 80px; min-width: 0; }
.g-segs select { max-width: 220px; }
.g-seg-extra { display: none; }
.g-rlist { display: grid; gap: 12px; }
.g-radm { border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.g-radm header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g-res { margin: 6px 0; padding-left: 1.2rem; display: grid; gap: 4px; font-size: .92rem; }
/* pantalla del sorteo */
.g-screen { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 35%, #17130f) 0%, #120e0b 70%); color: #fff; min-height: 100vh; }
.g-screen .brand-footer, .g-screen footer.site-foot { display: none; }
.gs { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: 3vh 4vw; gap: 2vh; text-align: center; }
.gs-head h1 { font-family: var(--serif); font-size: clamp(2rem, 6vw, 4.5rem); margin: .2em 0; }
.gs-head .eyebrow { color: rgba(255,255,255,.75); }
.gs-prize { font-size: clamp(1.1rem, 2.6vw, 2rem); opacity: .9; }
.gs-body { display: grid; place-items: center; }
.gs-join { display: grid; justify-items: center; gap: 1vh; font-size: clamp(1rem, 2.2vw, 1.6rem); }
.gs-join[hidden], .gs-stage[hidden] { display: none; }
.gs-qr { background: #fff; padding: 14px; border-radius: 18px; }
.gs-qr svg, .gs-qr canvas, .gs-qr img { display: block; width: min(34vh, 300px) !important; height: min(34vh, 300px) !important; }
.gs-count b { font-size: 1.8em; }
.gs-state { opacity: .7; }
.gs-stage { display: grid; justify-items: center; gap: 2vh; width: 100%; }
.gs-roll { font-size: clamp(2rem, 7vw, 5.5rem); font-weight: 800; min-height: 1.3em; margin: 0; }
.gs-roll.rolling { color: #ffd66b; filter: blur(.4px); }
.gs-winners { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2vh; }
.gs-winners li { font-size: clamp(1.6rem, 5vw, 3.6rem); font-weight: 800; background: rgba(255,255,255,.1); border-radius: 18px; padding: .25em .8em; opacity: 0; transform: translateY(20px) scale(.9); transition: all .6s cubic-bezier(.2,1.4,.4,1); }
.gs-winners li.in { opacity: 1; transform: none; }
.gs-alt { opacity: .75; font-size: clamp(1rem, 2vw, 1.4rem); }
.gs-proof { opacity: .5; font-size: .85rem; }
.gs-ctl { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; background: rgba(255,255,255,.08); border-radius: 14px; padding: 10px; }
.gs-ctl .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }

/* ===== Juegos fase 3: concursos y muro ===== */
.g-contest { text-align: left; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; display: grid; gap: 6px; }
.g-contest h3 { margin: 0; }
.g-cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.g-cph { margin: 0; position: relative; border-radius: 12px; overflow: hidden; background: #eee; }
.g-cph img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: zoom-in; }
.g-cph figcaption { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-size: .78rem; }
.g-cph figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-vote, .g-like { border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; background: rgba(255,255,255,.92); color: #b4483c; cursor: pointer; flex: none; }
.g-vote.on, .g-like.on { background: #e0465a; color: #fff; }
.g-vote i, .g-like i { font-style: normal; margin-left: 2px; }
.g-file { position: relative; cursor: pointer; }
.g-file.busy, button.busy { opacity: .6; pointer-events: none; }
.g-up { display: grid; gap: 4px; justify-items: start; }
.g-mythumb { display: inline-grid; justify-items: center; margin-right: 6px; vertical-align: middle; }
.g-mythumb img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; }
.g-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.g-pod { margin: 0; background: rgba(0,0,0,.04); border-radius: 12px; overflow: hidden; }
.g-pod img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.g-pod figcaption { padding: 6px; display: grid; font-size: .85rem; }
.g-pod-1 { box-shadow: 0 0 0 3px #e8b923; }
.g-wallform { display: grid; gap: 8px; text-align: left; }
.g-wallform textarea { width: 100%; resize: vertical; }
.g-wallform .row-btns { justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.g-wall { display: grid; gap: 10px; text-align: left; margin-top: 8px; }
.g-post { border-radius: 14px; background: rgba(0,0,0,.035); overflow: hidden; }
.g-post img { width: 100%; max-height: 360px; object-fit: cover; display: block; cursor: zoom-in; }
.g-post p { margin: 10px 12px 0; white-space: normal; }
.g-post footer { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: .88rem; }
.g-post .g-like { background: rgba(0,0,0,.06); }
.g-post .g-like.on { background: #e0465a; }
.g-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); background: #2b231e; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: .9rem; opacity: 0; transition: all .25s; z-index: 80; max-width: 90vw; text-align: center; pointer-events: none; }
.g-toast.on { opacity: 1; transform: translate(-50%, 0); }
.g-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: grid; place-items: center; z-index: 90; padding: 12px; }
.g-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.g-lightbox button { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.2); color: #fff; border: 0; border-radius: 50%; width: 40px; height: 40px; font-size: 1.1rem; }
/* panel */
.g-rk { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; }
.g-rk figure { margin: 0; flex: none; width: 110px; font-size: .75rem; }
.g-rk img { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; display: block; }
.g-wadm { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.g-wadm article { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 6px; align-content: start; }
.g-wadm article.g-flag { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, transparent); }
.g-wadm img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; }
.g-wadm p { margin: 0; }
.md-wimg { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; margin-top: 6px; }
/* pantalla del muro */
.gw { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 360px); gap: 3vw; padding: 4vh 3vw; color: #fff; position: relative; }
.gw-stage { position: relative; display: grid; place-items: center; min-height: 80vh; }
.gw-empty { font-size: clamp(1.4rem, 3vw, 2.4rem); opacity: .8; text-align: center; }
.gw-card { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; display: grid; place-items: center; align-content: center; gap: 2vh; text-align: center; opacity: 0; transform: scale(.94); transition: opacity .8s, transform .8s; }
.gw-card.in { opacity: 1; transform: none; }
.gw-card.out { opacity: 0; transform: scale(1.04); }
.gw-card img { max-width: 100%; max-height: 62vh; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.5); object-fit: contain; }
.gw-card.text-only .gw-body { font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1.15; font-weight: 700; max-width: 22ch; }
.gw-body { font-size: clamp(1.3rem, 2.6vw, 2.4rem); margin: 0; max-width: 40ch; }
.gw-name { font-size: clamp(1.1rem, 2vw, 1.8rem); opacity: .8; margin: 0; }
.gw-name span { color: #ff8fa0; margin-left: .5em; }
.gw-side { display: grid; align-content: center; justify-items: center; gap: 1.4vh; text-align: center; background: rgba(255,255,255,.06); border-radius: 22px; padding: 3vh 1.5vw; }
.gw-side h1 { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 2.2rem); margin: 0; }
.gw-side .eyebrow { color: rgba(255,255,255,.7); }
.gw-side .gs-qr svg, .gw-side .gs-qr canvas, .gw-side .gs-qr img { width: min(22vh, 200px) !important; height: min(22vh, 200px) !important; }
.gw-recent { list-style: none; padding: 0; margin: 1vh 0 0; display: grid; gap: 8px; text-align: left; width: 100%; font-size: .9rem; opacity: .85; }
.gw-recent li { background: rgba(255,255,255,.07); border-radius: 10px; padding: 6px 10px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gw-full { position: fixed; right: 10px; bottom: 10px; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 10px; width: 38px; height: 38px; opacity: .4; }
.gw-full:hover { opacity: 1; }
@media (max-width: 760px) { .gw { grid-template-columns: 1fr; } .gw-stage { min-height: 60vh; } }
.gw-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22vw, 240px), 1fr)); gap: 1.2vw; align-content: start; }
.gw-cgrid figure { margin: 0; position: relative; }
.gw-cgrid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; display: block; }
.gw-cgrid figcaption { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); border-radius: 999px; padding: 4px 12px; font-weight: 700; }
.gw-podium { display: flex; gap: 2vw; justify-content: center; align-items: flex-end; }
.gw-pod { margin: 0; text-align: center; }
.gw-pod img { width: min(28vw, 46vh); aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.gw-pod-1 img { width: min(34vw, 56vh); outline: 5px solid #e8b923; }
.gw-pod figcaption { font-size: clamp(1rem, 2vw, 1.7rem); font-weight: 700; margin-top: 1vh; }
.gw-foot { display: flex; align-items: center; justify-content: center; gap: 2vw; font-size: clamp(1rem, 2vw, 1.6rem); }
.gw-contest .gs-qr { padding: 8px; }
.gw-contest .gs-qr svg, .gw-contest .gs-qr canvas, .gw-contest .gs-qr img { width: 120px !important; height: 120px !important; }

/* ===== Juegos fase 4: raspa y gana, trivia ===== */
.g-scratch { position: relative; width: min(88vw, 360px); aspect-ratio: 3 / 2; margin: 8px auto; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.18); background: #fff; touch-action: none; user-select: none; -webkit-user-select: none; }
.g-scratch canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.g-scratch-res { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; padding: 14px; background: radial-gradient(circle, #fffaf0, #f3e6dc); }
.g-scratch-res.win { background: radial-gradient(circle, #fff7d6, #ffd66b); }
.g-scratch-res b { font-size: 1.25rem; } .g-scratch-res small { opacity: .75; }
.g-trivia { text-align: left; display: grid; gap: 8px; }
.g-tbox { min-height: 200px; }
.g-tq-n { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--muted); margin: 0; }
.g-tq-t { font-weight: 800; font-size: 1.3rem; color: var(--ink); min-width: 2.2em; text-align: center; background: var(--accent-soft); border-radius: 999px; padding: 2px 10px; }
.g-tq { font-size: 1.25rem; margin: 8px 0 12px; line-height: 1.3; }
.g-topts { display: grid; gap: 8px; }
.g-topt { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; border-radius: 14px; padding: 14px; font: inherit; font-weight: 600; font-size: 1.02rem; color: #fff; cursor: pointer; transition: transform .1s, opacity .2s; }
.g-topt b { background: rgba(255,255,255,.25); border-radius: 8px; width: 1.8em; height: 1.8em; display: grid; place-items: center; flex: none; }
.g-topt.o0, .gt-opt.o0 { background: #d9534f; } .g-topt.o1, .gt-opt.o1 { background: #3f7fd1; } .g-topt.o2, .gt-opt.o2 { background: #d9a21b; } .g-topt.o3, .gt-opt.o3 { background: #3e9a5b; }
.g-topt:active { transform: scale(.98); }
.g-topt:disabled { opacity: .55; cursor: default; }
.g-topt.sel { opacity: 1; box-shadow: 0 0 0 4px var(--ink) inset; }
.g-topt.ok { opacity: 1; box-shadow: 0 0 0 4px #1d7a3a inset; }
.g-topt.ok::after { content: '✓'; margin-left: auto; font-size: 1.3rem; }
.g-topt.bad { opacity: .9; text-decoration: line-through; }
.g-tmsg { text-align: center; font-weight: 600; min-height: 1.4em; }
.g-tme { text-align: center; font-size: .92rem; }
.g-twait { text-align: center; font-size: 1.1rem; padding: 30px 0; }
.g-trank { padding-left: 0; list-style: none; display: grid; gap: 4px; counter-reset: r; }
.g-trank li { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.04); counter-increment: r; }
.g-trank li span::before { content: counter(r) 'º '; font-weight: 700; }
.g-tqlist { display: grid; gap: 8px; padding-left: 1.2rem; font-size: .92rem; }
.g-tok { color: var(--ok); font-weight: 700; }
.g-topt-in span { display: flex; gap: 6px; align-items: center; }
/* pantalla de trivia */
.gt { grid-template-rows: auto 1fr auto; position: relative; }
.gt-body { display: grid; align-content: center; justify-items: center; gap: 2.5vh; text-align: center; }
.gt-big { font-size: clamp(1.6rem, 4vw, 3.4rem); font-weight: 800; margin: 0; }
.gt-sub { font-size: clamp(1rem, 2vw, 1.6rem); opacity: .75; }
.gt-n { opacity: .7; font-size: clamp(1rem, 1.8vw, 1.4rem); margin: 0; }
.gt-q { font-size: clamp(1.8rem, 4.4vw, 4rem); line-height: 1.15; margin: 0; max-width: 24ch; }
.gt-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vw; width: min(92vw, 1300px); }
.gt-opt { position: relative; display: flex; gap: 1vw; align-items: center; padding: 2.2vh 1.6vw; border-radius: 18px; font-size: clamp(1.1rem, 2.5vw, 2.3rem); font-weight: 700; text-align: left; overflow: hidden; transition: opacity .4s, transform .4s; }
.gt-opt b { background: rgba(255,255,255,.25); border-radius: 10px; width: 1.7em; height: 1.7em; display: grid; place-items: center; flex: none; }
.gt-opt.dim { opacity: .3; }
.gt-opt.ok { transform: scale(1.03); box-shadow: 0 0 0 6px #fff; }
.gt-opt i { position: absolute; left: 0; bottom: 0; height: 8px; width: var(--w); background: rgba(255,255,255,.75); font-style: normal; font-size: 0; }
.gt-opt i::after { content: attr(data-n); }
.gt-meta { display: flex; gap: 3vw; font-size: clamp(1.2rem, 2.6vw, 2.4rem); font-weight: 800; }
.gt-rank { list-style: none; padding: 0; margin: 0; width: min(90vw, 760px); display: grid; gap: 1vh; }
.gt-rank li { display: flex; justify-content: space-between; padding: 1.2vh 1.6vw; border-radius: 14px; background: rgba(255,255,255,.08); font-size: clamp(1.1rem, 2.4vw, 2.2rem); font-weight: 700; }
.gt-rank li.r0 { background: rgba(232,185,35,.35); }
.gt-join { position: absolute; right: 2vw; top: 2vh; display: grid; justify-items: center; gap: 4px; font-size: .85rem; opacity: .9; }
.gt-join .gs-qr { padding: 6px; border-radius: 12px; }
.gt-join .gs-qr svg, .gt-join .gs-qr canvas, .gt-join .gs-qr img { width: 110px !important; height: 110px !important; }
@media (max-width: 700px) { .gt-opts { grid-template-columns: 1fr; } .gt-join { position: static; } }

/* ===== Juegos fase 5: misiones y ranking ===== */
.g-mprog { position: relative; text-align: center; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.04); overflow: hidden; }
.g-mprog span { position: absolute; left: 0; bottom: 0; height: 5px; width: var(--p); background: var(--gc, var(--accent)); border-radius: 3px; }
.g-missions { display: grid; gap: 10px; text-align: left; }
.g-mis { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 6px; }
.g-mis header { display: flex; gap: 10px; align-items: center; }
.g-mis header div { display: grid; } .g-mis header small { color: var(--muted); }
.g-mis-ico { font-size: 1.6rem; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); flex: none; }
.g-ms-aprobada { background: color-mix(in srgb, var(--ok) 8%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.g-mform { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.g-mform input[name=code] { flex: 1; min-width: 120px; text-transform: uppercase; }
.g-mine-rank { text-align: center; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.04); }
.g-mine-rank p { margin: 2px 0; }
.g-trank li.me { background: color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 700; }
.g-podium-l { text-align: center; padding: 8px; border-radius: 14px; background: color-mix(in srgb, #e8b923 18%, transparent); }
.g-qrprint { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 20px; }
.g-qrprint h1 { font-family: var(--serif); font-size: 2.4rem; margin: 0; }
@media print { .no-print { display: none !important; } }

/* ===== Equipo: administradores de eventos ===== */
.st-ev { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; display: grid; gap: 8px; }
.st-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.st-list li { padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.035); }
.st-cred { white-space: pre-wrap; font-size: .85rem; background: rgba(255,255,255,.7); padding: 10px; border-radius: 10px; margin: 6px 0; }
.st-evs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 260px; overflow: auto; }
.st-evs legend { grid-column: 1 / -1; }