/* ══════════════════════════════════════════════════════════════════════════
 * PowerAdmin · SHOWCASE ENGINE · boletería del show · Ronda 149
 * ──────────────────────────────────────────────────────────────────────────
 * Hoja compartida por la consola de SEM (showcase.html) y la página pública
 * del link express (show.html). Colores de butaca = estado de pago:
 *   🟢 pagado · 🟡 parcial (abono pendiente) · 🔴 reservado / sin pagar
 *   ⚪ disponible (cristal oscuro cyber, borde dorado si es VIP)
 * Movimiento: solo transform / opacity / filter, curvas oficiales (§6.1/6.2).
 * ════════════════════════════════════════════════════════════════════════ */
:root {
  --sc-verde: 16, 185, 129;
  --sc-rojo: 244, 63, 94;
  --sc-ambar: 245, 158, 11;
  --sc-cian: 34, 211, 238;
  --sc-oro: 251, 191, 36;
  --sc-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sc-suave: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Mapa ─────────────────────────────────────────────────────────────── */
.sc-mapa-wrap { position: relative; min-width: 0; max-width: 100%; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  border-radius: 1.1rem; padding: 0.75rem 0.5rem; background: linear-gradient(180deg, rgba(var(--sc-cian), 0.05), rgba(8, 8, 12, 0.92) 30%), #08080c;
  border: 1px solid rgba(var(--sc-cian), 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.sc-mapa { display: block; margin: 0 auto; height: auto; max-width: none; user-select: none; -webkit-user-select: none; }
.sc-escenario polygon, .sc-escenario path { fill: rgba(var(--sc-oro), 0.14); stroke: rgba(var(--sc-oro), 0.7); stroke-width: 1.2; }
/* RONDA 156 · silueta del plano: marco VIP rojo, su rótulo y las secciones al pie. */
.sc-marco-vip { fill: rgba(var(--sc-rojo), 0.05); stroke: rgba(var(--sc-rojo), 0.85); stroke-width: 2; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(var(--sc-rojo), 0.55)); pointer-events: none; }
.sc-vip-rotulo { fill: rgb(var(--sc-rojo)); font: 900 13px/1 Rajdhani, system-ui, sans-serif; letter-spacing: 0.18em; pointer-events: none; }
.sc-seccion { fill: #a1a1aa; font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.32em; pointer-events: none; }
.sc-escenario text { fill: #fde68a; font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.3em; }
.sc-rotulo { fill: #71717a; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
/* RONDA 155 · número físico pintado en la butaca (13…1 · 101…113 · 2…14).
   No intercepta el toque: el <rect> de abajo sigue siendo el botón. */
.sc-num { fill: rgba(228, 228, 231, 0.55); font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; pointer-events: none; user-select: none; }
.sc-butaca { cursor: pointer; stroke-width: 1.4; transform-box: fill-box; transform-origin: center;
  transition: transform 120ms var(--sc-pop), filter 140ms var(--sc-suave); }
.sc-butaca:hover { filter: brightness(1.35); }
.sc-butaca:active { transform: scale(0.88); }
.sc-butaca:focus-visible { outline: none; stroke: #fff; stroke-width: 2.4; }
.sc-butaca[data-estado="disponible"] { fill: #0f1419; stroke: rgba(var(--sc-cian), 0.55); }
.sc-butaca.sc-vip[data-estado="disponible"] { fill: #15120a; stroke: rgba(var(--sc-oro), 0.85); }
.sc-butaca[data-estado="seleccionada"] { fill: rgb(var(--sc-cian)); stroke: #ecfeff; filter: drop-shadow(0 0 5px rgba(var(--sc-cian), 0.9)); }
.sc-butaca[data-estado="pagado"] { fill: rgb(var(--sc-verde)); stroke: #a7f3d0; }
.sc-butaca[data-estado="parcial"] { fill: rgb(var(--sc-ambar)); stroke: #fde68a; }
.sc-butaca[data-estado="reservado"] { fill: rgb(var(--sc-rojo)); stroke: #fecdd3; }
.sc-butaca[data-estado="solicitud"] { fill: rgba(var(--sc-rojo), 0.35); stroke: rgb(var(--sc-rojo)); stroke-dasharray: 3 2; animation: scLate 1.6s var(--sc-suave) infinite alternate; }
@keyframes scLate {
  from { opacity: 0.55; }
  to { opacity: 1; }
}
/* En la página pública lo ocupado no se toca. */
.sc-publico .sc-butaca:not([data-estado="disponible"]):not([data-estado="seleccionada"]) { cursor: not-allowed; }

/* ── Leyenda ──────────────────────────────────────────────────────────── */
.sc-leyenda { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0.6rem 0; font-size: 0.75rem; color: #a1a1aa; }
.sc-leyenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sc-leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid transparent; }
.sc-l-pagado { background: rgb(var(--sc-verde)); }
.sc-l-parcial { background: rgb(var(--sc-ambar)); }
.sc-l-reservado { background: rgb(var(--sc-rojo)); }
.sc-l-disponible { background: #0f1419; border-color: rgba(var(--sc-cian), 0.6) !important; }
.sc-l-vip { background: #15120a; border-color: rgba(var(--sc-oro), 0.9) !important; }
.sc-l-sel { background: rgb(var(--sc-cian)); }

/* ── Controles comunes ────────────────────────────────────────────────── */
.sc-btn { min-height: 44px; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 0.95rem;
  border-radius: 0.85rem; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.02em; cursor: pointer; user-select: none; -webkit-user-select: none;
  color: #e4e4e7; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 120ms var(--sc-pop), filter 120ms var(--sc-suave); }
.sc-btn:active:not(:disabled) { transform: scale(0.95); }
.sc-btn:disabled { filter: grayscale(0.6) brightness(0.7); cursor: not-allowed; }
.sc-btn--oro { color: #1a1204; background: linear-gradient(90deg, #fde68a, #f59e0b); border-color: transparent; box-shadow: 0 0 16px rgba(var(--sc-oro), 0.45); }
.sc-btn--cian { color: #ecfeff; background: rgba(var(--sc-cian), 0.14); border-color: rgba(var(--sc-cian), 0.6); box-shadow: 0 0 14px rgba(var(--sc-cian), 0.3); }
.sc-btn--verde { color: #d1fae5; background: rgba(var(--sc-verde), 0.15); border-color: rgba(var(--sc-verde), 0.6); }
.sc-btn--rojo { color: #ffe4e6; background: rgba(var(--sc-rojo), 0.12); border-color: rgba(var(--sc-rojo), 0.55); }
.sc-btn--chico { min-width: 44px; padding: 0 0.6rem; }
.sc-campo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; font-size: 0.75rem; color: #a1a1aa; }
.sc-campo input, .sc-campo select, .sc-campo textarea { min-height: 46px; min-width: 0; border-radius: 0.75rem; padding: 0.55rem 0.75rem; font-size: 1rem;
  color: #f4f4f5; background: #060609; border: 1px solid rgba(255, 255, 255, 0.14); color-scheme: dark; }
.sc-campo input:focus, .sc-campo select:focus, .sc-campo textarea:focus { outline: 2px solid rgba(var(--sc-cian), 0.55); outline-offset: 1px; }
.sc-fila2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0.6rem; min-width: 0; }

/* ── Pestañas de función ──────────────────────────────────────────────── */
.sc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.75rem 0; }
.sc-tab { min-height: 56px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0.4rem;
  border-radius: 1rem; cursor: pointer; color: #a1a1aa; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 120ms var(--sc-pop), filter 120ms var(--sc-suave); }
.sc-tab:active { transform: scale(0.97); }
.sc-tab b { font-size: 0.95rem; color: #fafafa; }
.sc-tab small { font-size: 0.7rem; }
.sc-tab[aria-selected="true"] { color: #fde68a; border-color: rgba(var(--sc-oro), 0.7); background: rgba(var(--sc-oro), 0.08); box-shadow: 0 0 18px rgba(var(--sc-oro), 0.25); }

/* ── Barra de selección ───────────────────────────────────────────────── */
.sc-barra { position: sticky; bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); z-index: 30; margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.6rem; padding: 0.7rem 0.8rem; border-radius: 1.1rem; background: rgba(8, 8, 12, 0.94); border: 1px solid rgba(var(--sc-cian), 0.4);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(var(--sc-cian), 0.18); }
.sc-barra[hidden] { display: none; }
.sc-barra-info { flex: 1 1 12rem; min-width: 0; }
.sc-barra-info b { display: block; color: #fff; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.sc-barra-info small { display: block; color: #a1a1aa; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-barra-acc { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ── Tarjetas y estadísticas ──────────────────────────────────────────── */
.sc-panel { min-width: 0; margin-top: 0.9rem; padding: 0.9rem 1rem; border-radius: 1.1rem; background: rgba(13, 13, 18, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.sc-panel h3 { margin: 0 0 0.6rem; font-size: 0.95rem; color: #fafafa; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-width: 0; }
.sc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.6rem; }
.sc-stat { --c: var(--sc-cian); min-width: 0; padding: 0.7rem 0.8rem; border-radius: 0.95rem; background: linear-gradient(140deg, rgba(var(--c), 0.10), rgba(13, 13, 18, 0.9) 60%);
  border: 1px solid rgba(var(--c), 0.38); }
.sc-stat p { margin: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--c)); }
.sc-stat b { display: block; margin-top: 0.25rem; font-size: 1.25rem; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sc-stat small { color: #a1a1aa; font-size: 0.72rem; }
.sc-stat--oro { --c: var(--sc-oro); } .sc-stat--verde { --c: var(--sc-verde); } .sc-stat--rojo { --c: var(--sc-rojo); } .sc-stat--ambar { --c: var(--sc-ambar); }
.sc-solicitud { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 0.75rem; border-radius: 0.95rem; margin-top: 0.5rem;
  background: rgba(var(--sc-rojo), 0.06); border: 1px dashed rgba(var(--sc-rojo), 0.55); animation: scEntra 220ms var(--sc-pop) both; }
.sc-solicitud p { margin: 0; color: #e4e4e7; font-size: 0.85rem; overflow-wrap: anywhere; }
.sc-solicitud .sc-fila2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
.sc-aviso { margin: 0.75rem 0 0; padding: 0.75rem 0.9rem; border-radius: 0.95rem; font-size: 0.85rem; line-height: 1.45;
  color: #fde68a; background: rgba(var(--sc-ambar), 0.08); border: 1px solid rgba(var(--sc-ambar), 0.45); }
.sc-aviso[hidden] { display: none; }
/* RONDA 155 · SINPE de Power Link en espera de butacas. Oro = pases. */
.sc-sinpe { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.75rem 0 0; padding: 0.75rem 0.9rem; border-radius: 0.95rem;
  font-size: 0.85rem; line-height: 1.45; color: #fde68a; background: linear-gradient(180deg, rgba(var(--sc-oro), 0.14), rgba(13, 13, 18, 0.9));
  border: 1px solid rgba(var(--sc-oro), 0.55); box-shadow: 0 0 14px rgba(var(--sc-oro), 0.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sc-sinpe > p { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sc-sinpe small { color: #d4d4d8; }
.sc-sinpe[hidden] { display: none; }
/* RONDA 166 · saldo del SINPE repartido entre funciones (multi-día). */
.sc-sinpe-saldo { display: inline-block; margin-top: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px; color: #fde68a;
  background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(251, 191, 36, 0.5); box-shadow: 0 0 14px rgba(251, 191, 36, 0.3); }

/* ── Modales ──────────────────────────────────────────────────────────── */
.sc-modal { position: fixed; inset: 0; z-index: 100004; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.78); }
.sc-modal[hidden] { display: none; }
.sc-modal-panel { width: 100%; max-width: 30rem; max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; min-width: 0;
  display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem; border-radius: 1.25rem; background: #0b0b10;
  border: 1px solid rgba(var(--sc-cian), 0.45); box-shadow: 0 0 26px rgba(var(--sc-cian), 0.2), 0 30px 80px rgba(0, 0, 0, 0.7);
  animation: scEntra 220ms var(--sc-pop) both; }
.sc-modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sc-modal-cab h3 { margin: 0; font-size: 1.02rem; color: #fff; min-width: 0; }
.sc-modal-acc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.5rem; }
.sc-detalle { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem 0.75rem; font-size: 0.88rem; }
.sc-detalle dt { color: #a1a1aa; }
.sc-detalle dd { margin: 0; color: #fafafa; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sc-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid; }
.sc-chip[data-estado="pagado"] { color: #6ee7b7; border-color: rgba(var(--sc-verde), 0.6); background: rgba(var(--sc-verde), 0.12); }
.sc-chip[data-estado="parcial"] { color: #fcd34d; border-color: rgba(var(--sc-ambar), 0.6); background: rgba(var(--sc-ambar), 0.12); }
.sc-chip[data-estado="reservado"], .sc-chip[data-estado="solicitud"] { color: #fda4af; border-color: rgba(var(--sc-rojo), 0.6); background: rgba(var(--sc-rojo), 0.12); }
.sc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.6rem 0.8rem; border-radius: 0.85rem;
  background: rgba(var(--sc-oro), 0.07); border: 1px solid rgba(var(--sc-oro), 0.4); color: #fde68a; font-weight: 700; }
.sc-total b { font-size: 1.3rem; color: #fff; font-variant-numeric: tabular-nums; }
.sc-link-caja { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem; border-radius: 0.95rem; background: rgba(var(--sc-cian), 0.06); border: 1px solid rgba(var(--sc-cian), 0.45); }
.sc-link-caja code { overflow-wrap: anywhere; font-size: 0.75rem; color: #a5f3fc; }
.sc-reloj { font: 900 2rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; text-align: center; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(var(--sc-cian), 0.6); }
.sc-reloj[data-urgente="1"] { color: #fda4af; text-shadow: 0 0 16px rgba(var(--sc-rojo), 0.7); }
@keyframes scEntra {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-butaca, .sc-solicitud, .sc-modal-panel { animation: none !important; transition: none !important; }
}

/* ── RONDA 156 / 166 · Tiquete digital «CONEXIONES» ───────────────────────
   Talón rojo «ADMIT ONE» con barras,
   dos muescas en la línea de corte y «ENTRADA #003». El brillo de neón va en
   un `filter: drop-shadow()` del contenedor —sigue la silueta YA recortada
   por la máscara, muescas incluidas— y es lo único que late: `filter`,
   `transform` y `opacity`, nunca layout (AGENTS §6.1).
   Tamaños en cqi: el tiquete escala con su ancho, de 300 a 560 px. */
.sc-modal-panel--tiquetes { max-width: 38rem; }
.sc-tiquetes { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sc-tiq {
  --tiq-a: 251, 191, 36; --tiq-b: 244, 63, 94;   /* VIP: oro / rojo */
  --corte: 24%;
  container-type: inline-size; position: relative; width: 100%; max-width: 560px; margin: 0 auto; min-width: 0;
  filter: drop-shadow(0 0 1px rgba(var(--tiq-a), 0.95)) drop-shadow(0 0 9px rgba(var(--tiq-a), 0.55));
  animation: scTiqEntra 240ms cubic-bezier(0.34, 1.56, 0.64, 1) both, scTiqLatido 2.6s cubic-bezier(0.16, 1, 0.3, 1) 240ms infinite alternate;
  transition: transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sc-tiq--general { --tiq-a: 34, 211, 238; --tiq-b: 244, 63, 94; }   /* General: cian / rojo */
.sc-tiq:hover { transform: translate3d(0, -2px, 0) scale(1.01); }
.sc-tiq:active { transform: scale(0.98); }
.sc-tiq-papel {
  position: relative; display: grid; grid-template-columns: var(--corte) minmax(0, 1fr); min-height: max(9.5rem, 34cqi);
  border-radius: 0.9rem; overflow: hidden;
  /* RONDA 167 · fuera el negro plano (#07070b): base de cristal en gradiente. */
  background: linear-gradient(150deg, #1b1e2e 0%, #0f111a 46%, #0b0911 100%);
  box-shadow: inset 0 0 0 1.5px rgba(var(--tiq-a), 0.9), inset 0 0 22px rgba(var(--tiq-b), 0.25);
  /* Muescas: medio círculo arriba y abajo justo en la línea de corte. */
  -webkit-mask: radial-gradient(circle at var(--corte) 0, #0000 0.8rem, #000 calc(0.8rem + 0.5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--corte) 100%, #0000 0.8rem, #000 calc(0.8rem + 0.5px)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--corte) 0, #0000 0.8rem, #000 calc(0.8rem + 0.5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--corte) 100%, #0000 0.8rem, #000 calc(0.8rem + 0.5px)) bottom / 100% 51% no-repeat;
}
/* Talón: rojo Power, «ADMIT ONE» en vertical y el código de barras. */
.sc-tiq-talon {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 4cqi; min-width: 0; padding: 0.6rem 0.4rem;
  background: linear-gradient(160deg, #f43f4e 0%, #c8102e 55%, #8f0b1f 100%); color: #14070a;
  border-right: 2px dashed rgba(10, 10, 14, 0.75);
}
.sc-tiq--vip .sc-tiq-talon { background: linear-gradient(160deg, #fbbf24 0%, #e11d48 48%, #8f0b1f 100%); }
.sc-tiq-admit { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font: 900 clamp(0.7rem, 4.2cqw, 1.45rem)/1 Rajdhani, 'Arial Narrow', system-ui, sans-serif; letter-spacing: 0.08em; }
.sc-tiq-barras { width: clamp(1rem, 4.4cqi, 1.6rem); height: 82%; fill: #0b0b0f; }
.sc-tiq-serie { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 clamp(0.42rem, 1.6cqw, 0.58rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; opacity: 0.85; }
/* RONDA 167 · CUERPO «CYBER GLASS».
   ANTES: un gradiente casi negro (#111118 → #08080c) con rayas de escáner: a
   la vista, un rectángulo negro plano.
   AHORA: cristal ahumado en capas, solo CSS —
     1. brillo de canto superior (la luz que pega en el bisel),
     2. reflejo diagonal del vidrio,
     3. dos focos emisivos con los colores del pase (oro/rojo o cian/rojo),
     4. base en gradiente azul-noche, nunca #000;
   encima, una cuadrícula fina que se apaga hacia los bordes (.sc-tiq-rejilla),
   grano de película (ruido SVG en data-URI: cero peticiones de red) y un
   marco interior de 1 px con luz propia (::before). El bisel va en
   box-shadow inset: canto claro arriba, sombra abajo. Nada de esto se anima. */
.sc-tiq-cuerpo {
  position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 2cqi;
  padding: 4.4cqi 5.4cqi 4cqi 6cqi; overflow: hidden; color: #f4f4f5; isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 14%, transparent 30%),
    linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.07) 43%, rgba(255, 255, 255, 0.02) 50%, transparent 58%),
    radial-gradient(110% 95% at 92% 0%, rgba(var(--tiq-a), 0.30), transparent 58%),
    radial-gradient(95% 90% at 0% 100%, rgba(var(--tiq-b), 0.30), transparent 62%),
    linear-gradient(150deg, #1d2134 0%, #11131d 45%, #0c0a13 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 1px 0 0 rgba(255, 255, 255, 0.07),
              inset 0 -1px 0 rgba(0, 0, 0, 0.7), inset 0 0 34px rgba(var(--tiq-a), 0.10);
}
/* Marco interior emisivo: un filo de luz a 1 px del canto, como el bisel de
   una tarjeta de vidrio. */
.sc-tiq-cuerpo::before { content: ''; position: absolute; inset: 1.6cqi; z-index: -1; pointer-events: none; border-radius: 0.55rem;
  border: 1px solid rgba(var(--tiq-a), 0.34);
  box-shadow: 0 0 12px rgba(var(--tiq-a), 0.16), inset 0 0 14px rgba(var(--tiq-a), 0.07); }
/* Grano de película: quita lo «plástico» al gradiente. */
.sc-tiq-cuerpo::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sc-tiq-rejilla { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background:
    linear-gradient(rgba(var(--tiq-a), 0.10) 1px, transparent 1px) 0 0 / 100% 3.4cqi,
    linear-gradient(90deg, rgba(var(--tiq-a), 0.10) 1px, transparent 1px) 0 0 / 3.4cqi 100%;
  -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 78%);
          mask-image: radial-gradient(120% 110% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 78%); }
/* Brillo holográfico: una franja iridiscente que cruza (solo transform). */
.sc-tiq-holo { position: absolute; inset: -40% -60%; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 0, 128, 0.35) 44%, rgba(255, 220, 90, 0.45) 48%, rgba(0, 255, 210, 0.38) 52%, rgba(120, 90, 255, 0.35) 56%, transparent 62%);
  transform: translate3d(-45%, 0, 0); }
.sc-tiq--vip .sc-tiq-holo { opacity: 0.9; animation: scTiqHolo 3.4s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.sc-tiq--general .sc-tiq-holo { opacity: 0.35; animation: scTiqHolo 5.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
/* RONDA 166 · Cabecera: «CONEXIONES» es el texto principal (grande, glitch
   cian/rojo y halo del color del pase) y «Power Dance Studio» va debajo,
   pequeño. Columna: el nombre nunca comparte renglón con la firma.
   RONDA 167 · LETRA DEL AFICHE Y LOGO.
   ANTES: Rajdhani 900 — que además showcase.html NO cargaba, así que el
   título salía en la sans del sistema (Arial Narrow / system-ui).
   AHORA: Orbitron 900, la misma rotulación con la que show.html presenta
   «CONEXIONES» al público: geométrica, ancha, de trazo uniforme, con mucho
   aire entre letras. Relleno blanco frío, aberración cian/rojo fina (1 px,
   no los 2 px de antes, que la ensuciaban) y un halo del color del pase.
   Debajo, una línea de «conexión» —dos nodos unidos por un filo de luz— y la
   firma: el logo de la batería con el rayo + «Power Dance Studio» en versales
   chicas. Sin ningún otro rótulo. */
.sc-tiq-cab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.6cqi; row-gap: 1.5cqi; min-width: 0; }
.sc-tiq-show { position: relative; grid-column: 1 / -1; margin: 0; padding-bottom: 1.9cqi; min-width: 0; max-width: 100%; font: 900 clamp(0.95rem, 6.1cqi, 2.4rem)/1 Orbitron, Rajdhani, 'Arial Narrow', system-ui, sans-serif; letter-spacing: 0.15em;
  color: #f8fbff; text-shadow: -1px 0 rgba(34, 211, 238, 0.9), 1px 0 rgba(244, 63, 94, 0.9), 0 0 14px rgba(var(--tiq-a), 0.6), 0 0 34px rgba(var(--tiq-a), 0.28); overflow-wrap: anywhere; }
/* Línea de conexión bajo el título: filo de luz con un nodo en cada punta. */
.sc-tiq-show::before { content: ''; position: absolute; left: 0; bottom: 0; width: min(100%, 62cqi); height: 0.9cqi; min-height: 4px; pointer-events: none;
  background:
    radial-gradient(circle at 0.45cqi 50%, rgb(var(--tiq-a)) 0 0.4cqi, transparent 0.5cqi),
    radial-gradient(circle at calc(100% - 0.45cqi) 50%, rgb(var(--tiq-b)) 0 0.4cqi, transparent 0.5cqi),
    linear-gradient(90deg, rgba(var(--tiq-a), 0.95), rgba(255, 255, 255, 0.5) 50%, rgba(var(--tiq-b), 0.95)) 50% 50% / calc(100% - 1cqi) 1px no-repeat;
  filter: drop-shadow(0 0 3px rgba(var(--tiq-a), 0.8)); }
.sc-tiq-estudio { grid-column: 2; grid-row: 2; margin: 0; min-width: 0; font: 700 clamp(0.5rem, 2.2cqi, 0.76rem)/1 Orbitron, Rajdhani, system-ui, sans-serif; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgb(var(--tiq-a)); opacity: 0.95; text-shadow: 0 0 8px rgba(var(--tiq-a), 0.55); }
/* Logo de Power Dance Studio (batería + rayo), SVG en línea: nítido a
   cualquier tamaño y sin pedir ninguna imagen. */
.sc-tiq-logo { grid-column: 1; grid-row: 2; display: block; width: clamp(0.62rem, 2.9cqi, 1rem); height: auto; aspect-ratio: 24 / 40; flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35)); }
.sc-tiq-show::after { content: attr(data-texto); position: absolute; inset: 0; color: rgb(var(--tiq-b)); opacity: 0;
  clip-path: inset(40% 0 35% 0); animation: scTiqGlitch 4.2s steps(1) infinite; pointer-events: none; }
.sc-tiq-datos { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 1cqi 4cqi; min-width: 0;
  border-left: 2px solid rgba(var(--tiq-a), 0.8); padding-left: 2.4cqi; }
.sc-tiq-datos > div { min-width: 0; display: flex; flex-direction: column; }
.sc-tiq-datos b { font: 800 clamp(0.62rem, 2.9cqi, 0.95rem)/1.15 Rajdhani, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.sc-tiq-datos small { font-size: clamp(0.5rem, 2.2cqi, 0.72rem); color: #a1a1aa; overflow-wrap: anywhere; }
.sc-tiq-pie { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqi; min-width: 0; }
.sc-tiq-titular { min-width: 0; font-size: clamp(0.55rem, 2.5cqi, 0.82rem); color: #e4e4e7; overflow-wrap: anywhere; }
.sc-tiq-pase { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; text-align: right; }
.sc-tiq-pase b { font: 900 clamp(0.55rem, 2.6cqi, 0.85rem)/1 Rajdhani, system-ui, sans-serif; letter-spacing: 0.24em; color: rgb(var(--tiq-a)); }
.sc-tiq-num { font: 900 clamp(0.75rem, 3.8cqi, 1.3rem)/1.1 Rajdhani, system-ui, sans-serif; letter-spacing: 0.08em; color: #fff; font-variant-numeric: tabular-nums; }
.sc-tiq-izq { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqi; }
.sc-tiq-sello { display: inline-block; padding: 0.2em 0.6em; border-radius: 0.4rem; transform: rotate(-3deg);
  font: 900 clamp(0.5rem, 2.2cqi, 0.7rem)/1.2 Rajdhani, system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fde68a; border: 1.5px solid rgba(245, 158, 11, 0.9); background: rgba(120, 53, 15, 0.55); }
/* Ojo: dentro de writing-mode vertical, cqi mide el eje VERTICAL (que no es
   contenedor de tamaño) y cae al alto del viewport: el talón usa cqw.
   Tiquete angosto (teléfono): talón más fino para que el cuerpo respire. */
@container (max-width: 420px) {
  .sc-tiq-papel { --corte: 21%; }
  .sc-tiq-talon { gap: 2.6cqi; }
  .sc-tiq-admit { font-size: 3.6cqw; }
  .sc-tiq-cuerpo { padding: 3.6cqi 4cqi 3.4cqi 5cqi; }
}
@keyframes scTiqEntra { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes scTiqLatido {
  from { filter: drop-shadow(0 0 1px rgba(var(--tiq-a), 0.95)) drop-shadow(0 0 7px rgba(var(--tiq-a), 0.5)); }
  to   { filter: drop-shadow(0 0 1px rgba(var(--tiq-b), 0.95)) drop-shadow(0 0 14px rgba(var(--tiq-b), 0.6)); }
}
@keyframes scTiqHolo { 0% { transform: translate3d(-45%, 0, 0); } 60%, 100% { transform: translate3d(45%, 0, 0); } }
@keyframes scTiqGlitch { 0%, 91%, 100% { opacity: 0; transform: none; } 92% { opacity: 0.85; transform: translate3d(-3px, 0, 0); } 95% { opacity: 0.85; transform: translate3d(3px, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .sc-tiq, .sc-tiq-holo, .sc-tiq-show::after { animation: none !important; transition: none !important; }
}
/* RONDA 167 · El tiquete es DOM (no hay canvas ni descarga): se comparte con
   captura de pantalla o imprimiendo la página. Al imprimir, el navegador
   descarta fondos por defecto y el cristal quedaría en blanco: se le pide
   que respete los colores y se apagan las animaciones. */
@media print {
  .sc-tiq, .sc-tiq * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sc-tiq, .sc-tiq-holo, .sc-tiq-show::after { animation: none !important; }
  .sc-tiq { break-inside: avoid; }
}
/* Cliente de la compra (alumna / tercero) en el modal de venta. */
.sc-cliente { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; min-width: 0; }
.sc-cliente[hidden] { display: none; }
@media (max-width: 420px) { .sc-cliente { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════
 * RONDA 172 · Volver a Power Link · días guardados · Editar butaca
 * Solo transform / opacity / filter en la interacción (§6.1), curvas
 * oficiales (§6.2), 44 px en la regla base (§6.4).
 * ══════════════════════════════════════════════════════════════════════ */
.sc-btn--plink { color: #fde68a; background: rgba(13, 13, 18, 0.72); border-color: rgba(var(--sc-oro), 0.6);
  box-shadow: 0 0 14px rgba(var(--sc-oro), 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); text-decoration: none; white-space: nowrap; }
.sc-sel-dias { display: block; color: #fde68a; font-size: 0.72rem; }
.sc-tab { position: relative; }
.sc-tab[data-guardadas]:not([data-guardadas="0"])::after {
  content: attr(data-guardadas); position: absolute; top: 0.3rem; right: 0.35rem; min-width: 1.15rem; height: 1.15rem;
  display: flex; align-items: center; justify-content: center; padding: 0 0.3rem; border-radius: 999px;
  font-size: 0.65rem; font-weight: 800; color: #1a1204; background: linear-gradient(90deg, #fde68a, #f59e0b);
  box-shadow: 0 0 10px rgba(var(--sc-oro), 0.55);
}
.sc-reubicar { position: sticky; top: 0.5rem; z-index: 35; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin: 0.5rem 0; padding: 0.6rem 0.8rem; border-radius: 0.9rem; color: #ecfeff;
  background: rgba(13, 13, 18, 0.85); border: 1px solid rgba(var(--sc-cian), 0.6); box-shadow: 0 0 16px rgba(var(--sc-cian), 0.3); }
.sc-reubicar > * { min-width: 0; }
.sc-reubicar p { flex: 1 1 14rem; font-size: 0.85rem; }
html.sc-modo-reubicar .sc-barra { opacity: 0.35; pointer-events: none; }


/* ══════════════════════════════════════════════════════════════════════
 * RONDA 174 · Estabilidad, multi-día y Mini Power Link
 * El plano vive en una caja de alto FIJO (svh: no cambia cuando la barra
 * del navegador aparece o se esconde); las estadísticas y las pestañas
 * reservan su alto para no empujar la página al llegar los datos.
 * ══════════════════════════════════════════════════════════════════════ */
.sc-mapa-wrap { height: clamp(300px, 58vh, 640px); }
@supports (height: 1svh) { .sc-mapa-wrap { height: clamp(300px, 58svh, 640px); } }
.sc-stats { min-height: 9.5rem; align-content: start; }
.sc-tab { min-height: 56px; }
.sc-tab small { display: block; min-height: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sc-mini-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.sc-mini-cab > * { min-width: 0; }
.sc-mini-cuenta { display: block; font-size: 0.7rem; font-weight: 600; color: #a1a1aa; margin-top: 0.15rem; }
.sc-mini-buscar { width: 100%; min-height: 44px; margin: 0.55rem 0; padding: 0 0.8rem; border-radius: 0.8rem; font-size: 16px; color: #f4f4f5;
  background: rgba(13, 13, 18, 0.8); border: 1px solid rgba(var(--sc-cian), 0.35); }
.sc-mini-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 0.5rem; max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; }
.sc-mini-carta { min-height: 64px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; text-align: left; cursor: pointer;
  padding: 0.5rem 0.65rem; border-radius: 0.85rem; color: #f4f4f5; background: rgba(13, 13, 18, 0.78);
  border: 1px solid rgba(var(--sc-oro), 0.4); box-shadow: 0 0 12px rgba(var(--sc-oro), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 120ms var(--sc-pop), filter 120ms var(--sc-suave); }
.sc-mini-carta:hover { filter: brightness(1.15); }
.sc-mini-carta:active { transform: scale(0.96); }
.sc-mini-top { display: flex; justify-content: space-between; gap: 0.4rem; min-width: 0; }
.sc-mini-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
.sc-mini-top em { font-style: normal; font-weight: 800; color: #fde68a; white-space: nowrap; }
.sc-mini-carta small { font-size: 0.68rem; color: #a1a1aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-mini-carta .sc-mini-lect { color: #67e8f9; }
.sc-mini-vacio { margin: 0; font-size: 0.8rem; color: #71717a; }

/* ══════════════════════════════════════════════════════════════════════
 * RONDA 190 · Buscador de butacas por comprador y «Reservar butaca»
 * Paleta magenta del show (§4.5: rgba(255, 46, 196, …)) sobre cristal
 * obsidiana con borde neón de 1px y halo de 14px. El resaltado de las
 * butacas parpadea solo con opacity / filter / transform y las curvas
 * oficiales (§6.1/§6.2); el plano no se mueve ni se re-encuadra (R174) y
 * .sc-mapa-wrap conserva su alto fijo. 44 px en la regla base (§6.4).
 * ══════════════════════════════════════════════════════════════════════ */
:root { --sc-magenta: 255, 46, 196; --sc-violeta: 167, 139, 250; }
.sc-buscador { margin: 0 0 0.6rem; min-width: 0; }
.sc-buscador-fila { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; min-width: 0; }
.sc-buscador-fila > * { min-width: 0; }
.sc-buscador-campo { flex: 1 1 8rem; display: flex; min-width: 0; }
.sc-buscador-campo input { width: 100%; min-width: 0; min-height: 44px; padding: 0 0.85rem; border-radius: 0.85rem; font-size: 16px; color: #fdf4ff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(13, 13, 18, 0.86) 70%), #0d0d12;
  border: 1px solid rgba(var(--sc-magenta), 0.5); box-shadow: 0 0 14px rgba(var(--sc-magenta), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: filter 140ms var(--sc-suave); }
.sc-buscador-campo input::placeholder { color: rgba(245, 208, 254, 0.55); }
.sc-buscador-campo input:focus { outline: none; border-color: rgba(var(--sc-magenta), 0.9); box-shadow: 0 0 14px rgba(var(--sc-magenta), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07); filter: brightness(1.08); }
.sc-btn--magenta { color: #fdf4ff; background: rgba(var(--sc-magenta), 0.14); border-color: rgba(var(--sc-magenta), 0.6);
  box-shadow: 0 0 14px rgba(var(--sc-magenta), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); white-space: nowrap; }
.sc-btn--magenta[aria-pressed="true"] { background: rgba(var(--sc-magenta), 0.28); filter: brightness(1.12); }
/* `hidden` tiene que ganar siempre (R187/R189: display de componente > atributo). */
#sc-reservar-btn[hidden], .sc-buscar-res[hidden], .sc-reservar-modo[hidden], #sc-reubicar[hidden] { display: none !important; }

.sc-buscar-res { display: grid; gap: 0.4rem; margin-top: 0.5rem; min-width: 0; }
.sc-buscar-res > * { min-width: 0; }
.sc-buscar-resumen { margin: 0; font-size: 0.78rem; color: #f5d0fe; }
.sc-buscar-resumen b { color: #fff; font-variant-numeric: tabular-nums; }
.sc-buscar-funciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0.4rem; min-width: 0; }
.sc-buscar-fn { min-height: 44px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem;
  padding: 0.35rem 0.7rem; border-radius: 0.8rem; text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none; color: #fdf4ff;
  background: rgba(13, 13, 18, 0.82); border: 1px solid rgba(var(--sc-magenta), 0.35);
  box-shadow: 0 0 14px rgba(var(--sc-magenta), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 120ms var(--sc-pop), filter 120ms var(--sc-suave); }
.sc-buscar-fn:hover { filter: brightness(1.15); }
.sc-buscar-fn:active { transform: scale(0.95); }
.sc-buscar-fn[aria-current="true"] { border-color: rgba(var(--sc-magenta), 0.85); box-shadow: 0 0 14px rgba(var(--sc-magenta), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.sc-buscar-fn[data-n="0"] { filter: saturate(0.35) brightness(0.8); }
.sc-buscar-fn b, .sc-buscar-fn span { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-buscar-fn b { font-size: 0.78rem; }
.sc-buscar-fn span { font-size: 0.7rem; color: #f0abfc; }
.sc-buscar-nombres { margin: 0; font-size: 0.72rem; color: #a1a1aa; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.sc-tag-reserva { color: rgb(var(--sc-violeta)); font-weight: 700; white-space: nowrap; }
.sc-tag-venta { color: #f0abfc; white-space: nowrap; }

/* Butacas halladas: parpadeo (3 veces) y halo neón magenta que se queda. */
.sc-mapa .sc-butaca { transition: transform 120ms var(--sc-pop), filter 140ms var(--sc-suave), opacity 200ms var(--sc-suave); }
.sc-mapa.is-buscando .sc-butaca:not(.sc-hallada) { opacity: 0.38; }
.sc-butaca.sc-hallada { stroke: rgb(var(--sc-magenta)); stroke-width: 2.4;
  filter: drop-shadow(0 0 3px rgba(var(--sc-magenta), 0.95)) drop-shadow(0 0 9px rgba(var(--sc-magenta), 0.55));
  animation: scHallada 560ms var(--sc-pop) 3 backwards; }
.sc-butaca.sc-hallada[data-estado="reserva"] { filter: drop-shadow(0 0 3px rgba(var(--sc-magenta), 0.95)) drop-shadow(0 0 9px rgba(var(--sc-violeta), 0.6)); }
@keyframes scHallada {
  0% { opacity: 0.3; transform: scale(0.86); filter: drop-shadow(0 0 0 rgba(var(--sc-magenta), 0)) drop-shadow(0 0 0 rgba(var(--sc-magenta), 0)); }
  55% { opacity: 1; transform: scale(1.14); filter: drop-shadow(0 0 4px rgba(var(--sc-magenta), 1)) drop-shadow(0 0 14px rgba(var(--sc-magenta), 0.75)); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 3px rgba(var(--sc-magenta), 0.95)) drop-shadow(0 0 9px rgba(var(--sc-magenta), 0.55)); }
}

/* Reserva manual de Dirección: violeta, distinta de «Reservado» (venta sin pagar). */
.sc-butaca[data-estado="reserva"] { fill: rgba(var(--sc-violeta), 0.82); stroke: #ede9fe; }
.sc-l-reserva { background: rgba(var(--sc-violeta), 0.82); }
.sc-chip[data-estado="reserva"] { color: #ede9fe; border-color: rgba(var(--sc-violeta), 0.6); background: rgba(var(--sc-violeta), 0.14); }
.sc-reservar-modo { color: #fdf4ff; border-color: rgba(var(--sc-magenta), 0.6); box-shadow: 0 0 14px rgba(var(--sc-magenta), 0.3); }
html.sc-modo-reservar .sc-barra { opacity: 0.35; pointer-events: none; }
html.sc-modo-reservar .sc-butaca:not([data-estado="disponible"]):not([data-estado="seleccionada"]) { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
  .sc-butaca.sc-hallada { animation: none !important; }
}