/* Tres Tickets — hoja de estilos única.
   Sin framework: variables de color, un poco de layout y componentes chicos.
   Todo el diseño arranca del contenido, no al revés. */

:root {
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-2: #f3efe9;
  --ink: #1b1a18;
  --ink-soft: #5f5a53;
  --ink-faint: #8f8880;
  --line: #e3ddd4;
  --brand: #b23327;
  --brand-ink: #ffffff;
  /* El violeta del logo (R166 G101 B169): íconos de redes sociales. */
  --violet: #a665a9;
  --ok: #2f6f4f;
  --warn: #a5641a;
  --danger: #a52822;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(27, 26, 24, 0.05), 0 8px 24px -12px rgba(27, 26, 24, 0.18);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

/* Modo oscuro: gris cálido, no negro (más descansado para leer y para mirar
   un mapa de butacas un rato largo). Se activa con data-theme="dark" en <html>,
   que pone el script del <head> solo si la persona lo eligió con el botón de
   la barra. Por defecto las páginas arrancan en claro (ver app/theme.js). */
:root[data-theme="dark"] {
  --bg: #262624;
  --surface: #30302e;
  --surface-2: #3a3936;
  --ink: #f5f4ef;
  --ink-soft: #c3c0b6;
  --ink-faint: #9d9a90;
  --line: #45443f;
  --brand: #e0574a;
  --brand-ink: #1a0f0d;
  --ok: #6cc297;
  --warn: #dfa862;
  --danger: #ea7d74;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px -12px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* `hidden` tiene que ganarle a cualquier `display` que pongamos nosotros:
   varios componentes se muestran y esconden con el atributo. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

button, input, select {
  font: inherit;
  color: inherit;
}

h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 0.75em; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.narrow { max-width: 680px; }
.stack > * + * { margin-top: var(--gap, 14px); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); font-size: 0.85rem; }
.right { text-align: right; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

/* ─── Barra superior ─────────────────────────────────────────────────────── */

header.top {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
  /* Instalada como app (o en la app nativa), la página llega hasta arriba de
     todo: se deja libre la zona del reloj y del notch. En el navegador vale 0. */
  padding-top: env(safe-area-inset-top);
}
header.top .inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-size: 1.18rem;
  text-decoration: none;
}
.logo .brand-logo { display: block; width: auto; flex-shrink: 0; }
nav.links { display: flex; gap: 4px; margin-left: auto; align-items: center; }
nav.links a {
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
nav.links a:hover { background: var(--surface-2); color: var(--ink); }
nav.links a[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 550; }

/* Botón de modo claro / oscuro (app/theme.js). */
.theme-toggle {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-toggle svg { display: block; }
.theme-toggle.floating { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 30; }

/* ─── Botones ────────────────────────────────────────────────────────────── */

.btn {
  appearance: none;
  border: 1px solid transparent;
  background: var(--brand);
  color: var(--brand-ink);
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 580;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.06s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.quiet { background: var(--surface-2); color: var(--ink); }
/* Estado elegido de un grupo de botones tipo pestaña o filtro. */
.btn.solid { background: var(--brand); color: var(--brand-ink); }
.btn.small { padding: 7px 13px; font-size: 0.86rem; }
.btn.block { width: 100%; }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--line); }

.link-btn {
  background: none; border: 0; padding: 0;
  color: var(--ink-soft); text-decoration: underline;
  cursor: pointer; font-size: 0.88rem;
}

/* ─── Campos ─────────────────────────────────────────────────────────────── */

.field { display: block; }
.field > span { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 5px; }
input[type="text"], input[type="email"], input[type="number"], input[type="search"],
input[type="password"], input[type="tel"], input[type="datetime-local"], select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  outline: none;
}
textarea { font: inherit; color: inherit; resize: vertical; min-height: 96px; line-height: 1.45; }
input[type="color"] {
  width: 44px; height: 42px; padding: 3px; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer;
}
input[type="range"] { flex: 1; accent-color: var(--brand); }
input:disabled, select:disabled { opacity: 0.6; cursor: not-allowed; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }

/* ─── Tarjetas ───────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.card.flat { box-shadow: none; }

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.event-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.event-card .cover {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: -0.04em;
  opacity: 0.96;
}
.event-card .body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.event-card .price { margin-top: auto; padding-top: 10px; font-weight: 620; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.76rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.chip.solid { background: var(--brand); color: var(--brand-ink); }
.chip.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.chip.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ─── Mapa de asientos ───────────────────────────────────────────────────── */

.seatmap-shell {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  /* La proporción de la sala la pone seatmap.js (aspect-ratio). El tope de alto
     es lo que hace que el mapa entero —con los botones de zoom, justo arriba— entren siempre
     en la pantalla, sin tener que desplazar la página para encontrarlos. */
  width: 100%;
  max-height: min(74vh, 720px);
  min-height: 260px;
}
.seatmap-shell svg { display: block; width: 100%; height: 100%; cursor: default; }
.seatmap-shell.zoomed svg { cursor: grab; }
.seatmap-shell.dragging svg { cursor: grabbing; }
.seat { cursor: pointer; }
.seat.taken { cursor: not-allowed; }
/* Botones de zoom: una tira horizontal chica arriba del mapa, a la derecha.
   Va afuera del dibujo para no tapar ninguna butaca. */
.seatmap-wrap { display: flex; flex-direction: column; gap: 6px; }
.zoom-controls {
  align-self: flex-end;
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.zoom-controls button {
  min-width: 30px; height: 28px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.zoom-controls button.zoom-all { font-size: 0.78rem; }
.zoom-controls button + button { border-left: 1px solid var(--line); }
.zoom-controls button:hover:not(:disabled) { background: var(--surface-2); }
.zoom-controls button:disabled { opacity: 0.35; cursor: default; }
.seat-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--ink);
  color: var(--bg);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: nowrap;
  transform: translate(-50%, -125%);
  z-index: 5;
  box-shadow: var(--shadow);
}

.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 0.84rem; }
.legend .item { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); }

/* ─── Barra de selección fija ────────────────────────────────────────────── */

.sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px;
  box-shadow: var(--shadow);
  margin-top: 16px;
  /* La barra de gestos del iPhone no tapa el botón de pagar. */
  margin-bottom: env(safe-area-inset-bottom);
}

/* ─── Cola virtual ───────────────────────────────────────────────────────── */

.queue-hero { text-align: center; padding: 34px 18px; }
.queue-number { font-size: clamp(3rem, 12vw, 5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.progress { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--brand); transition: width 0.5s ease; }

/* ─── Entradas ───────────────────────────────────────────────────────────── */

.ticket {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.ticket .head { padding: 15px 17px; color: #fff; }
.ticket .qr { display: grid; place-items: center; padding: 18px; background: #fff; }
.ticket .qr svg { width: min(230px, 60vw); height: auto; }
.ticket .meta { padding: 0 17px 16px; }
.perf {
  border-top: 1px dashed var(--line);
  position: relative;
}

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-size: 0.9rem; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; text-align: right; }

table.simple { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.simple th, table.simple td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
table.simple th { color: var(--ink-soft); font-weight: 550; font-size: 0.8rem; }
table.simple td.num, table.simple th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Lista de casillas (eventos asignados a una cuenta de la intranet) */
.check-list {
  display: grid; gap: 2px;
  max-height: 190px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.check { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; font-size: 0.92rem; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--brand); }
.kv.credentials { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; }
.kv.credentials dd { user-select: all; overflow-wrap: anywhere; }

/* ─── Avisos ─────────────────────────────────────────────────────────────── */

.notice {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.9rem;
}
.notice.bad { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.notice.good { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }

.toast-host { position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; z-index: 60; pointer-events: none; }
.toast {
  background: var(--ink); color: var(--bg);
  padding: 11px 16px; border-radius: 999px;
  font-size: 0.9rem; box-shadow: var(--shadow);
  max-width: min(560px, 92vw);
}

/* ─── Modal ──────────────────────────────────────────────────────────────── */

.modal-host {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.42);
  display: grid; place-items: center;
  padding: 18px;
}
.modal {
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 22px;
  width: min(430px, 100%);
  box-shadow: var(--shadow);
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ─── Gráficos del reporte ───────────────────────────────────────────────────
   Paleta verificada con el validador de contraste y daltonismo, en los dos
   temas: separación mínima ΔE 9,2 en deuteranopía y 27,6 en visión normal.
   Los canales son categóricos (identidad); los sectores usan una sola escala
   de claro a oscuro, porque su identidad ya la dan las etiquetas. */

:root {
  --ch-web: #2a78d6;
  --ch-boleteria: #eb6834;
  --ch-cortesia: #1baf7a;
  /* Tinta del número que va adentro del segmento: se elige por color de relleno,
     no por tema, para que siempre supere 4,5:1 contra su propio fondo. */
  --ch-web-ink: #ffffff;
  --ch-boleteria-ink: #26100a;
  --ch-cortesia-ink: #04291b;

  /* Escala secuencial: 1 = el sector más grande. En claro, más grande = más oscuro. */
  --ramp-1: #0d366b;
  --ramp-2: #104281;
  --ramp-3: #1c5cab;
  --ramp-4: #2a78d6;
  --ramp-5: #3987e5;
  --ramp-6: #5598e7;
  --ramp-7: #86b6ef;
  --ramp-1-ink: #ffffff;
  --ramp-2-ink: #ffffff;
  --ramp-3-ink: #ffffff;
  --ramp-4-ink: #ffffff;
  --ramp-5-ink: #ffffff;
  --ramp-6-ink: #0b1a2e;
  --ramp-7-ink: #0b1a2e;
}

:root[data-theme="dark"] {
  --ch-web: #3987e5;
  --ch-boleteria: #d95926;
  --ch-cortesia: #199e70;
  --ch-web-ink: #06182e;
  --ch-boleteria-ink: #260d04;
  --ch-cortesia-ink: #04291b;

  /* En oscuro se invierte: más grande = más claro. */
  --ramp-1: #cde2fb;
  --ramp-2: #9ec5f4;
  --ramp-3: #6da7ec;
  --ramp-4: #3987e5;
  --ramp-5: #256abf;
  --ramp-6: #1c5cab;
  --ramp-7: #184f95;
  --ramp-1-ink: #0b1a2e;
  --ramp-2-ink: #0b1a2e;
  --ramp-3-ink: #0b1a2e;
  --ramp-4-ink: #ffffff;
  --ramp-5-ink: #ffffff;
  --ramp-6-ink: #ffffff;
  --ramp-7-ink: #ffffff;
}

.share-bar {
  display: flex;
  gap: 2px;                /* el fondo se ve entre segmentos: nunca se tocan */
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface-2);
}
.share-slice {
  min-width: 3px;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: filter 0.12s ease;
  outline: none;
}
.share-slice:first-child { border-radius: 5px 0 0 5px; }
.share-slice:last-child { border-radius: 0 5px 5px 0; }
.share-slice:hover, .share-slice:focus-visible { filter: brightness(1.12); }
.share-slice:focus-visible { box-shadow: inset 0 0 0 2px var(--surface); }
.share-slice span {
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 4px;
}
.share-empty {
  display: grid;
  place-items: center;
  width: 100%;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 0.86rem;
}
.chart-legend li { display: inline-flex; align-items: center; gap: 8px; }
.chart-legend .swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.chart-legend .name { color: var(--ink); }
.chart-legend .value { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chart-legend .share { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.stacked-rows { display: flex; flex-direction: column; gap: 12px; }
.stacked-row { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; }
.stacked-label { display: flex; justify-content: space-between; gap: 8px; font-size: 0.88rem; }

.chart-tip {
  position: absolute;
  transform: translate(-50%, -120%);
  background: var(--ink);
  color: var(--bg);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  box-shadow: var(--shadow);
}

@media (max-width: 620px) {
  .stacked-row { grid-template-columns: 1fr; gap: 5px; }
}

footer.foot {
  margin-top: 56px;
  padding: 26px 0 calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.84rem;
}
/* Acceso del personal: tenue como el resto del pie, pero reconocible. */
footer.foot .foot-end { margin-top: 18px; flex-wrap: wrap; }
footer.foot .staff-access {
  color: var(--ink-faint);
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ink-faint) 50%, transparent);
}
footer.foot .staff-access:hover { color: var(--ink-soft); }
footer.foot .staff-access:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (max-width: 620px) {
  nav.links a { padding: 7px 9px; font-size: 0.86rem; }
  .card { padding: 15px; }
  /* Lo accesorio de la barra superior (nombre, etiqueta "Intranet") se cae
     primero para que los enlaces y "Salir" entren en un celular. */
  .hide-narrow { display: none; }
}

/* ─── Intranet: App de puerta ────────────────────────────────────────────── */

.door-download {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 620px) {
  .door-download { grid-template-columns: 1fr; }
}
.door-qr { display: grid; gap: 10px; }
.door-qr-code {
  width: min(220px, 100%);
  background: #fff;
  border-radius: 12px;
  padding: 8px;
}
.door-qr-code svg { display: block; width: 100%; height: auto; }
.door-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; }

/* ─── Imágenes de los eventos ────────────────────────────────────────────── */

/* La imagen ya llega recortada a la proporción de cada lugar (16:9 la
   tarjeta, 8:3 el banner); object-fit es solo por si el cuadro se estira. */
.event-card .cover img,
.event-banner img,
.panel-thumb img,
.image-picker .frame img.fill {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.event-banner {
  position: relative;
  aspect-ratio: 8 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
/* Sin banner se usa la imagen de la tarjeta, en su proporción y no tan grande. */
.event-banner.from-card { aspect-ratio: 16 / 9; max-width: 560px; }
@media (max-width: 620px) {
  .event-banner { aspect-ratio: 2 / 1; border-radius: var(--radius-sm); }
}

/* ─── Intranet: alta y edición de eventos ────────────────────────────────── */

.form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
}
.form-grid .span-2 { grid-column: span 2; }
@media (max-width: 620px) {
  .form-grid .span-2 { grid-column: auto; }
}
.form-actions { gap: 10px; }
.bad-text { color: var(--danger); }
.btn.danger-text { color: var(--danger); }

.panel-thumb {
  position: relative; flex: none;
  width: 72px; aspect-ratio: 16 / 9;
  border-radius: 8px; overflow: hidden;
}
@media (max-width: 620px) {
  .panel-thumb { display: none; }
}

.image-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 22px;
  align-items: start;
}
@media (max-width: 720px) {
  .image-grid { grid-template-columns: 1fr; }
}
.card-preview .event-card { pointer-events: none; box-shadow: var(--shadow); }

.image-picker { display: grid; gap: 8px; }
.image-picker > span { margin-bottom: 0; }
.image-picker .frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px dashed var(--line);
}
.image-picker .frame.editing {
  border: 2px solid var(--brand);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.image-picker .frame.editing.dragging { cursor: grabbing; }
.image-picker .frame.editing img { position: absolute; max-width: none; pointer-events: none; }
.image-picker .frame-hint {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 0.78rem; padding: 3px 10px; border-radius: 999px;
  pointer-events: none; white-space: nowrap;
}
.image-picker .placeholder {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 2px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink-soft); text-align: center; font-size: 0.9rem;
}
.image-picker .placeholder span { color: var(--ink-faint); font-size: 0.8rem; }
.image-picker .placeholder:hover { color: var(--brand); }

.choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.choice {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 0.92rem;
}
.choice input { margin-top: 4px; accent-color: var(--brand); flex: none; }
.choice:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
}
.choice:has(input:disabled) { cursor: not-allowed; }
.choice .faint { font-size: 0.85rem; margin-top: 2px; }

.tier-list { display: grid; gap: 12px; }
.tier-row {
  display: grid; gap: 12px;
  padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg);
}
.tier-head { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.tier-head .field.grow { min-width: 180px; }
.tier-head select { width: auto; min-width: 150px; }
.tier-tools { margin-left: auto; }
.icon-btn { min-width: 38px; justify-content: center; }
.tier-numbers { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.tier-row .final { display: grid; padding-bottom: 6px; }
.tier-row .final .faint { font-size: 0.82rem; }
@media (max-width: 620px) {
  .tier-head .field { flex: 1 1 100%; }
  .tier-head select { width: 100%; }
  .tier-tools { margin-left: 0; }
}

/* ─── Intranet: editor de la distribución de la sala ─────────────────────── */

.layout-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.layout-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  min-height: 260px;
  outline: none;
  color: var(--ink);
}
.layout-svg:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
.layout-block { cursor: grab; touch-action: none; }
.layout-block circle { fill-opacity: 0.85; }
.layout-block.selected circle { fill-opacity: 1; stroke: var(--ink); stroke-width: 3; }
.layout-block.clash circle { stroke: var(--danger); stroke-width: 4; }
.layout-stage { fill: currentColor; fill-opacity: 0.14; }
.layout-block.selected .layout-stage { fill-opacity: 0.24; stroke: var(--ink); stroke-width: 3; }
.layout-stage-label { fill: currentColor; opacity: 0.6; pointer-events: none; }
.layout-label { fill: currentColor; opacity: 0.55; pointer-events: none; user-select: none; }
.layout-controls {
  display: grid; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg);
}
.layout-controls-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.layout-grid { display: grid; gap: 10px 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.layout-slider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 0.88rem; }
.layout-slider > span:first-child { color: var(--ink-soft); }
.layout-slider input[type="text"] { grid-column: 2 / 4; padding: 7px 10px; }
.layout-value { min-width: 4ch; text-align: right; font-size: 0.85rem; }
/* Fondo de la imagen achicada: la misma imagen en miniatura, agrandada (se ve
   desenfocada), o un color. La imagen que se guarda se arma igual. */
.image-picker .frame-backdrop {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.image-picker .fill-row { font-size: 0.85rem; }
.image-picker .fill-row input[type="color"] { width: 34px; height: 30px; padding: 2px; }

/* ─── Redes sociales ─────────────────────────────────────────────────────── */

/* Por ahora solo los logos (no hay cuentas creadas): no son enlaces. */
.social-icons {
  display: flex; justify-content: center; gap: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--violet);
}
.social-icon { display: inline-flex; line-height: 0; cursor: default; }
.social-icon svg { display: block; }
/* En la barra superior las redes cuelgan debajo de la línea, centradas bajo el
   botón de tema, como una pestaña pegada a la barra. Tienen el mismo fondo
   que la barra porque la barra queda fija arriba: al bajar por la página la
   pestaña pasa por encima del contenido y tiene que seguir leyéndose.
   El botón queda centrado en los 60 px de la barra, así que la línea está 12 px
   debajo de él (y 1 px de borde). */
.theme-social { position: relative; display: flex; }
.social-icons.compact {
  position: absolute;
  top: calc(100% + 13px);
  left: 50%;
  transform: translateX(-50%);
  gap: 11px;
  padding: 6px 11px 7px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
}

/* ─── Intranet: entradas emitidas en la ventanilla ───────────────────────── */
/* El cartel que se abre al emitir, con el QR de cada entrada para mostrarlo o
   imprimirlo. El QR va siempre sobre blanco, como en la billetera: un lector
   no lee módulos claros sobre fondo oscuro. */
.issued-grid { display: grid; gap: 12px; }
.issued-ticket {
  display: grid; justify-items: center; gap: 3px;
  padding: 14px; text-align: center; font-size: 0.9rem;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
}
.issued-qr { background: #fff; padding: 8px; border-radius: 8px; line-height: 0; margin-bottom: 6px; }
.issued-qr svg { width: 180px; height: auto; }

/* Al imprimir sale solo el cartel, sin la página de atrás, y en papel siempre
   negro sobre blanco aunque la pantalla esté en tema oscuro. */
@media print {
  html, body { background: #fff !important; }
  body > *:not(.modal-host) { display: none !important; }
  .modal-host { position: static; display: block; padding: 0; background: none; }
  .modal { width: auto; max-height: none; overflow: visible; padding: 0; border: 0; box-shadow: none; background: #fff; color: #000; }
  .no-print { display: none !important; }
  .issued-grid { grid-template-columns: repeat(2, 1fr); }
  .issued-ticket { break-inside: avoid; border-color: #000; color: #000; }
  .issued-ticket .faint { color: #000; }
}