/* Pantallas de ejemplo dibujadas en HTML. Sala ficticia: "Ultravioleta Club", con su propia marca (naranja),
   para enseñar que cada sala vende con sus colores. Todo se mide en em sobre un tamaño que depende del ancho del móvil. */

.scr { --s-bg: #100E18; --s-card: #1C1928; --s-line: #2C2840; --s-fg: #F5F3FF; --s-mut: #A29CBB; --s-acc: #FF7A1A; --s-ok: #17B26A;
  container-type: inline-size; aspect-ratio: 9 / 19.5; width: 100%; overflow: hidden; background: var(--s-bg); color: var(--s-fg);
  font-family: var(--text); position: relative; display: flex; flex-direction: column; }
.scr__in { font-size: 4.3cqw; line-height: 1.3; display: flex; flex-direction: column; gap: .7em; padding: 0 1.1em 1.2em; flex: 1; }
.ui-status { display: flex; justify-content: space-between; font-size: 3.4cqw; padding: 3.2cqw 5cqw 1cqw; color: var(--s-fg); font-weight: 600; }
.ui-status i { display: inline-block; width: 1.6em; height: .7em; border: 1.5px solid currentColor; border-radius: 3px; position: relative; top: .1em; }
.ui-status i::after { content: ""; position: absolute; inset: 1px 30% 1px 1px; background: currentColor; border-radius: 1px; }
.ui-bar { display: flex; align-items: center; justify-content: space-between; padding: .6em 0 .5em; border-bottom: 1px solid var(--s-line); }
.ui-logo { font: 800 1em/1 var(--display); letter-spacing: -.02em; }
.ui-logo span { color: var(--s-acc); }
.ui-burger { width: 1.2em; height: .8em; border-block: 2px solid var(--s-fg); position: relative; }
.ui-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--s-fg); margin-top: -1px; }
.ui-poster { border-radius: .8em; padding: 1em; min-height: 8.5em; display: flex; flex-direction: column; justify-content: flex-end; gap: .2em;
  background: radial-gradient(120% 90% at 85% 10%, #FF7A1A 0%, #C2185B 45%, #3A1078 100%); }
.ui-poster small { font-size: .78em; opacity: .9; font-weight: 600; }
.ui-poster strong { font: 800 1.7em/1 var(--display); letter-spacing: -.03em; }
.ui-h { font: 800 1.05em/1.2 var(--display); margin-top: .3em; }
.ui-row { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .7em .8em; background: var(--s-card); border-radius: .7em; }
.ui-row b { display: block; font-size: .95em; }
.ui-row small { display: block; font-size: .75em; color: var(--s-mut); }
.ui-price { font-weight: 700; font-size: .95em; white-space: nowrap; }
.ui-qty { display: flex; align-items: center; gap: .55em; border: 1px solid var(--s-line); border-radius: 99px; padding: .25em .5em; font-weight: 700; }
.ui-qty i { font-style: normal; color: var(--s-mut); width: 1em; text-align: center; }
.ui-qty b { min-width: .8em; text-align: center; }
.ui-qty--on { border-color: var(--s-acc); }
.ui-field { display: grid; gap: .15em; padding: .55em .8em; border: 1px solid var(--s-line); border-radius: .6em; }
.ui-field small { font-size: .7em; color: var(--s-mut); }
.ui-field span { font-size: .92em; }
.ui-spacer { flex: 1; }
.ui-btn { background: var(--s-acc); color: #1A0D00; font-weight: 700; text-align: center; padding: .85em; border-radius: 99px; font-size: .95em; }
.ui-btn--ghost { background: transparent; color: var(--s-fg); border: 1px solid var(--s-line); }
.ui-note { font-size: .72em; color: var(--s-mut); text-align: center; }
.ui-card { background: var(--s-card); border-radius: .8em; padding: .8em; display: grid; gap: .55em; }
.ui-card > b { font-size: .95em; }
.ui-opt { display: flex; justify-content: space-between; align-items: center; font-size: .85em; }
.ui-opt span:first-child { color: var(--s-fg); }
.ui-opt em { font-style: normal; color: var(--s-mut); margin-left: auto; margin-right: .6em; }
.ui-tog { width: 2.1em; height: 1.2em; border-radius: 99px; background: var(--s-line); position: relative; flex: none; }
.ui-tog::after { content: ""; position: absolute; top: .15em; left: .15em; width: .9em; height: .9em; border-radius: 50%; background: #fff; transition: transform .3s; }
.ui-tog--on { background: var(--s-acc); }
.ui-tog--on::after { transform: translateX(.9em); }
.ui-sum { display: grid; gap: .3em; font-size: .85em; padding-top: .3em; }
.ui-sum div { display: flex; justify-content: space-between; color: var(--s-mut); }
.ui-sum div:last-child { color: var(--s-fg); font-weight: 700; font-size: 1.1em; padding-top: .3em; border-top: 1px solid var(--s-line); }
.ui-ok { color: var(--s-ok); font-size: .8em; font-weight: 700; display: flex; align-items: center; gap: .4em; margin-top: .4em; }
.ui-ok::before { content: ""; width: .5em; height: .9em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-.15em); }
.ui-big { font: 800 1.6em/1.05 var(--display); letter-spacing: -.03em; }
.ui-tk { background: #fff; color: #120F1C; border-radius: .9em; padding: 1em; display: grid; gap: .6em; justify-items: center; text-align: center; }
.ui-tk svg { width: 62%; height: auto; display: block; }
.ui-tk b { font-size: 1em; }
.ui-tk small { font-size: .75em; color: #5B5670; }
.ui-tk code { font: 700 .8em/1 var(--text); letter-spacing: .18em; }
.ui-pill { display: inline-block; background: var(--s-acc); color: #1A0D00; font-weight: 700; font-size: .72em; padding: .25em .7em; border-radius: 99px; }

/* Validador */
.scr--ok { --s-bg: #12A15E; }
.scr--ok .scr__in { align-items: center; justify-content: center; text-align: center; gap: .5em; }
.ui-check { width: 4.2em; height: 4.2em; border-radius: 50%; background: rgb(255 255 255 / .18); display: grid; place-items: center; margin-bottom: .4em; }
.ui-check::before { content: ""; width: 1.1em; height: 2em; border-right: .35em solid #fff; border-bottom: .35em solid #fff; transform: rotate(45deg) translate(-.15em, -.2em); }
.ui-ok-t { font: 800 1.45em/1.05 var(--display); letter-spacing: -.02em; }
.ui-ok-n { font-size: 1.05em; font-weight: 700; }
.ui-ok-s { font-size: .82em; opacity: .85; }
.ui-hand { margin-top: .6em; background: rgb(0 0 0 / .18); border-radius: .8em; padding: .7em 1em; display: grid; gap: .4em; justify-items: center; font-size: .78em; }
.ui-hand b { background: #fff; color: #0E5A35; padding: .25em .8em; border-radius: 99px; font-size: 1.1em; }
.ui-count { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: .9em 1.1em; font-size: 4cqw; background: rgb(0 0 0 / .2); }
.ui-count b { font-family: var(--display); }

/* Taquilla */
.ui-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.ui-seg span { border: 1px solid var(--s-line); border-radius: .6em; padding: .55em; font-size: .8em; text-align: center; }
.ui-seg span.on { border-color: var(--s-acc); color: var(--s-acc); font-weight: 700; }
.ui-total { display: flex; justify-content: space-between; align-items: baseline; padding: .4em 0; }
.ui-total b { font: 800 1.5em/1 var(--display); }

/* Panel de escritorio */
.dash { --d-bg: #100E18; --d-card: #1B1827; --d-line: #2C2840; --d-fg: #F5F3FF; --d-mut: #A29CBB; --d-acc: #FF7A1A; --d-vio: #8E7BFF;
  container-type: inline-size; aspect-ratio: 16 / 10; width: 100%; background: var(--d-bg); color: var(--d-fg); border-radius: 14px; overflow: hidden;
  border: 6px solid var(--ink); font-family: var(--text); }
.dash__in { font-size: 1.45cqw; line-height: 1.35; height: 100%; display: grid; grid-template-rows: auto auto 1fr; gap: 1.1em; padding: 0 2em 2em; }
.d-top { display: flex; align-items: center; gap: 2em; padding: 1em 0; border-bottom: 1px solid var(--d-line); }
.d-top nav { display: flex; gap: 1.4em; color: var(--d-mut); font-size: .9em; }
.d-top nav b { color: var(--d-fg); }
.d-top .d-live { margin-left: auto; display: flex; align-items: center; gap: .5em; font-size: .85em; color: var(--d-mut); }
.d-top .d-live::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #17B26A; box-shadow: 0 0 0 .25em rgb(23 178 106 / .25); }
.d-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.d-kpi { background: var(--d-card); border-radius: .8em; padding: 1em 1.1em; display: grid; gap: .3em; }
.d-kpi small { color: var(--d-mut); font-size: .8em; }
.d-kpi b { font: 800 2em/1 var(--display); letter-spacing: -.02em; }
.d-kpi i { font-style: normal; font-size: .8em; color: var(--d-mut); }
.d-bar { height: .45em; border-radius: 99px; background: var(--d-line); overflow: hidden; margin-top: .3em; }
.d-bar span { display: block; height: 100%; background: var(--d-acc); border-radius: 99px; }
.d-main { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1em; min-height: 0; }
.d-box { background: var(--d-card); border-radius: .8em; padding: 1.1em; display: flex; flex-direction: column; gap: .8em; min-height: 0; }
.d-box h4 { margin: 0; font-size: .95em; }
.d-chart { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: .8em; min-height: 0; }
.d-chart div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .4em; height: 100%; font-size: .75em; color: var(--d-mut); }
.d-chart span { width: 100%; border-radius: .4em .4em 0 0; background: var(--d-vio); transform-origin: bottom; }
.d-chart div:last-child span { background: var(--d-acc); }
.d-tbl { display: grid; gap: .1em; font-size: .85em; }
.d-tbl div { display: grid; grid-template-columns: 1.4fr .7fr 1fr; padding: .55em 0; border-bottom: 1px solid var(--d-line); }
.d-tbl div:first-child { color: var(--d-mut); font-size: .9em; }
.d-tbl span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.d-note { font-size: .75em; color: var(--d-mut); }

.mock-note { margin-top: 14px; font-size: 14px; color: var(--muted); }
.section--ink .mock-note { color: #A29CBB; }
.steps-sec .steps { padding-inline: max(16px, calc((100% - var(--wrap)) / 2)); }
.steps-sec .mock-note { padding-inline: 0; }
@media (max-width: 960px) { .steps-sec { overflow-x: clip; } }
@media (min-width: 961px) { .js .steps-sec .steps { padding-left: max(16px, calc((100vw - var(--wrap)) / 2)); padding-right: 30vw; } }