@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fuentes/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fuentes/bricolage-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fuentes/ibm-plex-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Escala: igual para los dos temas */
:root {
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --cartel: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --t-13: 0.8125rem;
  --t-15: 0.9375rem;
  --t-17: 1.0625rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-32: 2rem;
  --t-44: 2.75rem;
  --t-evento: clamp(2.75rem, 15vw, 4rem);
  --t-contador: clamp(3.5rem, 17vw, 4.5rem);
  --t-puerta: clamp(4.5rem, 27vw, 12rem);
  --t-puerta-larga: clamp(2.75rem, 13.5vw, 7rem);
  --peso-normal: 400;
  --peso-medio: 600;
  --peso-fuerte: 800;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 72px;

  --r-chico: 4px;
  --r-control: 8px;
  --r-boleta: 10px;
  --r-panel: 16px;
  --r-redondo: 999px;

  --d-1: 90ms;
  --d-2: 180ms;
  --d-3: 320ms;
  --d-4: 620ms;
  --curva-sale: cubic-bezier(0.2, 0.7, 0.2, 1);
  --curva-entra: cubic-bezier(0.55, 0, 0.75, 0.2);

  --toque: 44px;
  --alto-control: 48px;
  --icono: 20px;
  --forma: 44px;
  --columna: 480px;
  --ancho-max: 1200px;
  --ancho-boleta: 320px;
  --lado: var(--e-4);
  --muesca: 11px;
  --glifo-puerta: clamp(64px, 18vw, 120px);
}

/* Presets de tema: solo tokens */
[data-tema="halloween"] {
  --fondo: #110e14;
  --papel: #1b1720;
  --papel-alto: #252029;
  --campo-fondo: #15111a;
  --tinta: #efe6d4;
  --tinta-suave: #bcb0a0;
  --filete: #3a3240;
  --linea: #8a7e90;
  --acento: #f08a2c;
  --acento-hondo: #ffa557;
  --sobre-acento: #1b1210;
  --contador: #f08a2c;
  --error: #ff9d88;
  --foco: #f08a2c;
  --seleccion: #5b3a66;
  --velo: rgb(5 3 8 / 0.66);
  --ranura: #3a3141;
  --ranura-boca: #050407;

  --boleta: #3b2242;
  --boleta-talon: #331d3a;
  --boleta-mate: #2c2731;
  --boleta-talon-mate: #27232b;
  --boleta-tinta: #f1e8d6;
  --boleta-tinta-suave: #cdbfb2;
  --boleta-acento: #f2913a;
  --sello: #f2913a;
  --sello-mezcla: normal;
  --reflejo: rgb(255 226 190 / 0.14);
  --destello: rgb(255 236 214 / 0.32);
  --adorno: block;
  --num-cuerpo: none;
  --sello-clasico: none;
  --sello-colmillos: inline;
  --sombra-boleta: drop-shadow(0 1px 1px rgb(0 0 0 / 0.45)) drop-shadow(0 10px 16px rgb(0 0 0 / 0.4));
  --sombra-panel: 0 18px 48px rgb(0 0 0 / 0.55);

  --puerta-pasa: #5ccf6a;
  --puerta-nopasa: #ef4b3f;
  --puerta-usado: #f2b630;
  --puerta-horario: #9a88f5;
  --tinta-a: #2c1950;
  --tinta-b: #e6792c;
  --tinta-fantasma: #f3ead8;
  --tinta-sobre: #1c0f26;
  --visor-a: #2a2230;
  --visor-b: #1b1720;
  --visor-marco: #f08a2c;

  --punto-adentro: #f08a2c;
  --punto-qr-fondo: #1b1720;
  --punto-qr-borde: #efe6d4;
  --punto-fila: #a184e6;
  --punto-fila-borde: #d9cbff;
  --punto-libre: #71687a;
  --forma-fila-tinta: #1c0f26;

  --peligro: #ff9d88;
  --sobre-peligro: #1b1210;
  --estado-pasa: #5ccf6a;
  --estado-nopasa: #ff6a5c;
  --estado-usado: #f2b630;
  --estado-horario: #a998ff;
  --pasada-1: #e6792c;
  --pasada-2: #a184e6;
  --pasada-3: #efe6d4;
  --pasada-mezcla: screen;
  --brasa-viva: #ffd27a;
  --brasa: #f08a2c;
  --brasa-hollin: #140a08;
  --humo: #8a7e90;
  --compuerta: #2c1950;
  --compuerta-junta: #f08a2c;
  --compuerta-tinta: #f08a2c;
  --seda: rgb(239 230 212 / 0.75);
  --arana: #efe6d4;
  color-scheme: dark;
}

[data-tema="clasico"] {
  --fondo: #c3cfd0;
  --papel: #e6eeec;
  --papel-alto: #f4f8f7;
  --campo-fondo: #f4f8f7;
  --tinta: #142228;
  --tinta-suave: #3b4f56;
  --filete: #a9bcbc;
  --linea: #5f767d;
  --acento: #142228;
  --acento-hondo: #3b4f56;
  --sobre-acento: #e6eeec;
  --contador: #2a45a8;
  --error: #962f1a;
  --foco: #142228;
  --seleccion: #b9d9cf;
  --velo: rgb(20 34 40 / 0.5);
  --ranura: #142228;
  --ranura-boca: #000000;

  --boleta: #b9d9cf;
  --boleta-talon: #accfc4;
  --boleta-mate: #ced5d3;
  --boleta-talon-mate: #c4cbc9;
  --boleta-tinta: #142228;
  --boleta-tinta-suave: #3b4f56;
  --boleta-acento: #142228;
  --sello: #962f1a;
  --sello-mezcla: multiply;
  --reflejo: rgb(255 255 255 / 0.55);
  --destello: rgb(255 255 255 / 0.7);
  --adorno: none;
  --num-cuerpo: inline;
  --sello-clasico: inline;
  --sello-colmillos: none;
  --sombra-boleta: drop-shadow(0 1px 1px rgb(20 34 40 / 0.18)) drop-shadow(0 6px 10px rgb(20 34 40 / 0.14));
  --sombra-panel: 0 18px 48px rgb(20 34 40 / 0.22);

  --puerta-pasa: #00a95c;
  --puerta-nopasa: #ff5a5f;
  --puerta-usado: #ffb000;
  --puerta-horario: #5b8cff;
  --tinta-a: #2a45a8;
  --tinta-b: #ff4fa7;
  --tinta-fantasma: #ffffff;
  --tinta-sobre: #1e1458;
  --visor-a: #ffe3f1;
  --visor-b: #ffffff;
  --visor-marco: #2a45a8;

  --punto-adentro: #142228;
  --punto-qr-fondo: #ffffff;
  --punto-qr-borde: #142228;
  --punto-fila: #962f1a;
  --punto-fila-borde: #962f1a;
  --punto-libre: #6f8487;
  --forma-fila-tinta: #ffffff;

  --peligro: #962f1a;
  --sobre-peligro: #ffffff;
  --estado-pasa: #0b6b3a;
  --estado-nopasa: #b3172b;
  --estado-usado: #8a5a00;
  --estado-horario: #2f50c8;
  --pasada-1: #ff4fa7;
  --pasada-2: #2a45a8;
  --pasada-3: #142228;
  --pasada-mezcla: multiply;
  --brasa-viva: #ffd27a;
  --brasa: #e6792c;
  --brasa-hollin: #3a2414;
  --humo: #5f767d;
  --compuerta: #2a45a8;
  --compuerta-junta: #142228;
  --compuerta-tinta: #ffffff;
  --seda: rgb(20 34 40 / 0.6);
  --arana: #142228;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-padding-top: var(--e-8);
  scrollbar-color: var(--linea) var(--fondo);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-17);
  font-weight: var(--peso-normal);
  line-height: 1.5;
}

body.con-hoja { overflow: hidden; }

/* El cambio de tema se funde, no salta */
html.tema-cambia *,
html.tema-cambia *::before,
html.tema-cambia *::after {
  transition:
    background-color var(--d-4) var(--curva-sale),
    color var(--d-4) var(--curva-sale),
    border-color var(--d-4) var(--curva-sale),
    fill var(--d-4) var(--curva-sale),
    stroke var(--d-4) var(--curva-sale),
    box-shadow var(--d-4) var(--curva-sale) !important;
}
html.tema-cambia body { transition: background-color var(--d-4) var(--curva-sale), color var(--d-4) var(--curva-sale); }

::selection { background: var(--seleccion); color: var(--tinta); }
input { caret-color: var(--acento); }

h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; font-weight: var(--peso-fuerte); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mono { font-family: var(--mono); font-weight: var(--peso-normal); }
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icono {
  width: var(--icono);
  height: var(--icono);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Cabecera de sesión: admin y puerta */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--e-2) var(--lado);
  background: var(--papel);
  border-bottom: 1px solid var(--filete);
}

.cabecera-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-3);
}

.cabecera-quien { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-2); min-width: 0; font-size: var(--t-15); }
.cabecera-rol { font-weight: var(--peso-fuerte); }
.cabecera-nombre { color: var(--tinta-suave); overflow-wrap: anywhere; }
.cabecera-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Columna */

.columna {
  max-width: var(--ancho-max);
  min-height: calc(100vh - 70px);
  min-height: calc(100dvh - 70px);
  margin: 0 auto;
  background: var(--papel);
  overflow-x: clip;
}
.columna:focus { outline: none; }
.cabecera[hidden] + .columna { min-height: 100vh; min-height: 100dvh; }

@media (min-width: 1201px) {
  .columna, .cabecera { box-shadow: 0 0 0 1px var(--filete); }
}

.vista {
  padding: var(--e-5) var(--lado) var(--e-7);
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

@media (min-width: 600px) {
  .cabecera-fila { flex-wrap: nowrap; gap: var(--e-5); }
}
@media (min-width: 768px) {
  :root { --lado: var(--e-6); }
  .vista { padding-top: var(--e-6); }
}
@media (min-width: 1024px) {
  :root { --lado: var(--e-7); }
  .vista { padding-top: var(--e-7); }
}

/* Botones */

.boton {
  min-height: var(--alto-control);
  padding: var(--e-2) var(--e-5);
  border-radius: var(--r-control);
  border: 2px solid var(--acento);
  font-size: var(--t-17);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  text-align: center;
  transition: background-color var(--d-2) var(--curva-sale), border-color var(--d-2) var(--curva-sale), transform var(--d-1) var(--curva-sale);
}
.boton:active:not(:disabled) { transform: translateY(1px); }
.boton:disabled { cursor: not-allowed; border-style: dashed; opacity: 0.6; }

.boton-principal { background: var(--acento); color: var(--sobre-acento); }
.boton-principal:hover:not(:disabled) { background: var(--acento-hondo); border-color: var(--acento-hondo); }

.boton-linea { background: transparent; border-color: var(--linea); color: var(--tinta); }
.boton-linea:hover:not(:disabled) { border-color: var(--tinta); background: var(--papel-alto); }
.boton-linea[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }

.boton-ancho { width: 100%; }

.boton-chico { min-height: var(--toque); padding: var(--e-1) var(--e-4); font-size: var(--t-15); }
a.boton { text-decoration: none; }

.boton-icono {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  border: 0;
  border-radius: var(--r-control);
  background: none;
  color: var(--tinta);
}
.boton-icono:hover { background: var(--papel-alto); }

.enlace-texto {
  align-self: flex-start;
  min-height: var(--toque);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--t-15);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.enlace-texto:hover { text-decoration-thickness: 2px; }

/* Encabezado del evento */

.evento { display: flex; flex-direction: column; gap: var(--e-2); }
.evento-nombre {
  font-family: var(--cartel);
  font-weight: var(--peso-medio);
  font-size: var(--t-evento);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--acento);
}
[data-tema="clasico"] .evento-nombre { color: var(--tinta); }
.evento-fecha, .evento-lugar { color: var(--tinta-suave); font-size: var(--t-15); overflow-wrap: anywhere; }
.evento-nombre { overflow-wrap: anywhere; }
.evento-nota { margin-top: var(--e-2); font-size: var(--t-15); font-weight: var(--peso-medio); max-width: 60ch; }

/* Asistente por tamaño: celular en una columna; tablet con el texto arriba y la boleta grande;
   PC en dos columnas, el evento y lo que hay que hacer a la izquierda y la boleta a la derecha */
@media (max-width: 1023px) {
  .vista-asistente[data-momento="registro"] .escena { display: none; }
}
/* Con la boleta lista, en celular y tablet el QR va justo después de su título: es lo que se viene a buscar */
@media (max-width: 1023px) {
  .vista-asistente:not([data-momento="registro"]):not([data-momento="espera"]) > .pantalla:not([hidden]) { display: contents; }
  .vista-asistente:not([data-momento="registro"]):not([data-momento="espera"]) > .pantalla > * { order: 3; }
  .vista-asistente:not([data-momento="registro"]):not([data-momento="espera"]) > .pantalla > .estado-cabeza { order: 1; }
  .vista-asistente:not([data-momento="registro"]):not([data-momento="espera"]) > .escena { order: 2; }
  .vista-asistente:not([data-momento="registro"]):not([data-momento="espera"]) > .asis-pie { order: 2; }
}
@media (min-width: 600px) {
  :root { --ancho-boleta: 420px; }
  .vista-asistente > .evento,
  .vista-asistente > .pantalla,
  .vista-asistente > .asis-pie { width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (min-width: 1024px) {
  :root { --ancho-boleta: 440px; }
  .vista-asistente {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ancho-boleta);
    grid-template-areas: "evento evento" "pantalla escena" "pie escena";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--e-8);
    row-gap: var(--e-5);
    align-items: start;
  }
  .vista-asistente > .evento,
  .vista-asistente > .pantalla,
  .vista-asistente > .asis-pie { max-width: 600px; margin-inline: 0; }
  .vista-asistente > .evento { grid-area: evento; }
  .vista-asistente > .pantalla { grid-area: pantalla; }
  .vista-asistente > .asis-pie { grid-area: pie; }
  .vista-asistente > .escena { grid-area: escena; position: sticky; top: calc(var(--e-8) + var(--e-5)); }
  .vista-asistente > .escena .escenario { padding-top: 0; }
  /* En el registro, el hueco de la boleta mide lo mismo que la tarjeta de al lado */
  .vista-asistente[data-momento="registro"] > .escena { grid-row: 2 / 3; align-self: stretch; position: static; }
  .vista-asistente[data-momento="registro"] .escenario { height: 100%; padding-top: 0; }
  .vista-asistente[data-momento="registro"] .fantasma { inset: 0; }
  .vista-asistente[data-momento="registro"] .boleta-reserva { display: none; }
  .asis-pie .boleta-pie { max-width: 360px; margin: 0; }
  .asis-pie .boleta-pie-texto { text-align: left; }
}
@media (min-width: 1280px) {
  :root { --ancho-boleta: 480px; }
}

.pantalla { display: flex; flex-direction: column; gap: var(--e-5); }

/* Formulario como talón por llenar */

.talonario {
  position: relative;
  padding: var(--e-6) var(--e-5) var(--e-5);
  background: var(--boleta);
  color: var(--boleta-tinta);
  border-radius: var(--r-boleta);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  filter: var(--sombra-boleta);
  -webkit-mask: radial-gradient(circle 3px at 50% 0, #0000 96%, #000) 0 0 / 12px 100% repeat-x;
  mask: radial-gradient(circle 3px at 50% 0, #0000 96%, #000) 0 0 / 12px 100% repeat-x;
  --tinta-suave: var(--boleta-tinta-suave);
}
.talonario-titulo { font-size: var(--t-24); }
.talonario-nota { font-size: var(--t-15); color: var(--boleta-tinta-suave); max-width: 60ch; }

.campo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.campo-etiqueta { font-size: var(--t-15); font-weight: var(--peso-medio); }
.campo-entrada {
  width: 100%;
  min-height: var(--alto-control);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linea);
  border-radius: var(--r-control);
  background: var(--campo-fondo);
  color: var(--tinta);
  font-size: var(--t-17);
  transition: border-color var(--d-1) var(--curva-sale);
}
.talonario .campo-entrada { color: var(--boleta-tinta); }
.campo-entrada:hover { border-color: var(--tinta); }
.campo-entrada:focus-visible { outline-offset: 1px; border-color: var(--tinta); }
.campo-entrada[aria-invalid="true"] { border: 2px solid var(--error); }
.campo-ayuda { font-size: var(--t-13); color: var(--tinta-suave); }
.campo-error {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  font-size: var(--t-15);
  font-weight: var(--peso-medio);
  color: var(--error);
}
.campo-error .icono { width: 18px; height: 18px; margin-top: 2px; }

.casilla {
  position: relative;
  display: grid;
  grid-template-columns: var(--toque) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--e-2);
  cursor: pointer;
  font-size: var(--t-15);
}
.casilla-input {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--toque);
  height: var(--toque);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.casilla-caja { width: var(--toque); height: var(--toque); display: grid; place-items: center; }
.casilla-caja svg {
  width: 26px;
  height: 26px;
  padding: 2px;
  border: 2px solid var(--linea);
  border-radius: var(--r-chico);
  background: var(--campo-fondo);
  fill: none;
  stroke: var(--sobre-acento);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: background-color var(--d-2) var(--curva-sale), border-color var(--d-2) var(--curva-sale), stroke-dashoffset var(--d-2) var(--curva-sale);
}
.casilla-input:hover + .casilla-caja svg { border-color: var(--tinta); }
.casilla-input:checked + .casilla-caja svg { background: var(--acento); border-color: var(--acento); stroke-dashoffset: 0; }
.casilla-input:focus-visible + .casilla-caja svg { outline: 3px solid var(--foco); outline-offset: 2px; }
.casilla-input[aria-invalid="true"] + .casilla-caja svg { border-color: var(--error); }
.casilla-texto { padding-top: var(--e-2); }

/* Estado del asistente */

.estado-cabeza { display: flex; flex-direction: column; gap: var(--e-1); }
.estado-titulo { font-size: var(--t-32); letter-spacing: -0.01em; }
.estado-titulo:focus { outline: none; }
.estado-nombre { font-size: var(--t-20); font-weight: var(--peso-medio); overflow-wrap: anywhere; }
.estado-linea {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-15);
  color: var(--tinta-suave);
}
.estado-linea .icono { color: var(--acento); }
[data-tema="clasico"] .estado-linea .icono { color: var(--tinta); }

/* Cómo pagar por Nequi */

.pago {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-panel);
}
.pago-titulo { font-size: var(--t-20); }
.pago-datos { display: flex; flex-direction: column; }
.pago-dato {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--filete);
}
.pago-dato dt { font-size: var(--t-15); color: var(--tinta-suave); min-width: 0; }
.pago-dato dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-3); min-width: 0; }
.pago-cifra { font-size: var(--t-20); font-weight: var(--peso-fuerte); white-space: nowrap; }
.hueco { font-size: var(--t-13); color: var(--tinta-suave); }
.pago-dato-codigo { border-bottom: 0; padding-bottom: 0; }
.pago-codigo {
  font-family: var(--mono);
  font-size: var(--t-44);
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: var(--acento);
}
[data-tema="clasico"] .pago-codigo { color: var(--tinta); }
.pago-nota { font-size: var(--t-15); color: var(--tinta-suave); }
.pago-titular { font-size: var(--t-17); font-weight: var(--peso-medio); overflow-wrap: anywhere; }
/* Contactos del evento en la boleta: cada fila abre WhatsApp */
.contacto { display: flex; flex-direction: column; gap: var(--e-2); }
.contacto-titulo { font-size: var(--t-15); font-weight: var(--peso-medio); color: var(--tinta-suave); }
.contacto-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e-2); }
.contacto-enlace {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--toque);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--filete);
  border-radius: var(--r-control);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color var(--d-1) var(--curva-sale), background-color var(--d-1) var(--curva-sale);
}
.contacto-enlace:hover { border-color: var(--linea); background: var(--papel-alto); }
.contacto-enlace .icono { color: var(--acento); }
.contacto-texto { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--e-2); min-width: 0; }
.contacto-rotulo { font-weight: var(--peso-fuerte); }
.contacto-cifra { color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.contacto .hueco { flex-basis: 100%; }

.guardar-enlace {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) 0;
  border-top: 1px solid var(--filete);
  border-bottom: 1px solid var(--filete);
}
.guardar-enlace-texto { flex: 1 1 100%; font-size: var(--t-15); color: var(--tinta-suave); }
.guardar-enlace-texto strong { display: block; color: var(--tinta); font-weight: var(--peso-medio); }
.guardar-enlace-url {
  flex: 1 1 100%;
  min-width: 0;
  font-size: var(--t-15);
  font-weight: var(--peso-medio);
  overflow-wrap: anywhere;
}

/* El escenario: donde aparece la boleta, con el método que eligió el admin */

.escena { display: flex; justify-content: center; min-width: 0; }
.escenario {
  position: relative;
  width: 100%;
  max-width: var(--ancho-boleta);
  padding-top: var(--e-3);
}
.escenario > .boleta { position: relative; }
.boleta-reserva { visibility: hidden; }

.fantasma {
  position: absolute;
  inset: var(--e-3) 0 0;
  z-index: 1;
  border: 2px dashed var(--linea);
  border-radius: var(--r-boleta);
  display: grid;
  place-items: center;
  padding: var(--e-5);
  text-align: center;
  color: var(--tinta-suave);
}
.fantasma p { max-width: 24ch; }

.asis-pie { display: flex; flex-direction: column; gap: var(--e-5); }
.boleta-pie { display: flex; flex-direction: column; gap: var(--e-3); align-items: stretch; max-width: var(--ancho-boleta); width: 100%; margin: 0 auto; }
.boleta-pie-texto { font-weight: var(--peso-medio); text-align: center; }

/* Impresora: la barra con su ranura, el carril que recorta y la tira que queda en la boca */
.impresora-carril { clip-path: inset(0 -60px -80px -60px); }
.impresora-carril.suelto { clip-path: none; }
.impresora-barra {
  position: absolute;
  z-index: 3;
  top: 1px;
  left: calc(var(--e-3) * -1);
  right: calc(var(--e-3) * -1);
  height: 22px;
  padding: 0 var(--e-2);
  border-radius: var(--r-redondo);
  background: var(--ranura);
  display: flex;
  align-items: center;
}
.impresora-boca { display: block; width: 100%; height: 4px; border-radius: var(--r-redondo); background: var(--ranura-boca); }
.impresora-tira {
  position: absolute;
  z-index: 2;
  top: var(--e-3);
  left: 0;
  right: 0;
  height: var(--e-3);
  background: var(--boleta);
  transform-origin: top;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 6px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 6px repeat-x;
}

/* Salto de la fila */
.salto-fila { position: absolute; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: var(--e-2); pointer-events: none; }
.salto-vuelo { position: absolute; z-index: 3; pointer-events: none; }

/* Pasadas de tinta */
.pasada-capa { position: absolute; z-index: 0; mix-blend-mode: var(--pasada-mezcla); pointer-events: none; }
.pasada-rodillo { position: absolute; z-index: 4; height: var(--e-1); border-radius: var(--r-redondo); pointer-events: none; opacity: 0; }

/* Compuerta */
.compuerta-marco { position: absolute; z-index: 3; overflow: hidden; border-radius: var(--r-boleta); pointer-events: none; }
.compuerta-hoja { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: var(--compuerta); }
.compuerta-hoja--izq { left: 0; box-shadow: inset -2px 0 0 var(--compuerta-junta); }
.compuerta-hoja--der { right: 0; box-shadow: inset 2px 0 0 var(--compuerta-junta); }
.compuerta-lienzo { position: absolute; top: 0; bottom: 0; width: 200%; display: grid; place-items: center; }
.compuerta-hoja--izq .compuerta-lienzo { left: 0; }
.compuerta-hoja--der .compuerta-lienzo { right: 0; }
.compuerta-numero { font-family: var(--cartel); font-weight: var(--peso-medio); font-size: var(--t-44); line-height: 1; white-space: nowrap; color: var(--compuerta-tinta); }

/* Brasa */
.brasa-lienzo { position: absolute; z-index: 4; pointer-events: none; }

/* La boleta */

.boleta {
  --mx: 0.5;
  --my: 0.35;
  --rx: 0deg;
  --ry: 0deg;
  width: 100%;
  perspective: 900px;
  filter: var(--sombra-boleta);
  color: var(--boleta-tinta);
  text-align: left;
}
.boleta-giro {
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform var(--d-1) var(--curva-sale);
}
.boleta.suelta .boleta-giro { transition: transform var(--d-3) var(--curva-sale); }

.boleta-cuerpo,
.boleta-talon {
  position: relative;
  background: var(--boleta);
  transition: background-color var(--d-4) var(--curva-sale);
}
.boleta-cuerpo {
  padding: var(--e-5) var(--e-5) var(--e-4);
  border-radius: var(--r-boleta) var(--r-boleta) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  -webkit-mask:
    radial-gradient(circle var(--muesca) at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--muesca) at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--muesca) at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--muesca) at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
}
/* Perforación: medio agujero en cada lado de la línea */
.boleta-cuerpo::after,
.boleta-talon::before {
  content: "";
  position: absolute;
  left: var(--muesca);
  right: var(--muesca);
  height: 3px;
  background-size: 10px 3px;
  background-repeat: repeat-x;
  background-position: center 0;
}
.boleta-cuerpo::after { bottom: 0; background-image: radial-gradient(circle 3px at 50% 100%, var(--papel) 92%, #0000); }
.boleta-talon::before { top: 0; background-image: radial-gradient(circle 3px at 50% 0, var(--papel) 92%, #0000); }

/* Reflejo mate que se desplaza con la inclinación */
.boleta-reflejo,
.boleta-destello {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.boleta-reflejo {
  background:
    radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), var(--reflejo), #0000 46%),
    linear-gradient(112deg, #0000 38%, var(--reflejo) 50%, #0000 62%);
  background-size: 100% 100%, 260% 100%;
  background-position: center, calc(var(--mx) * 100%) 0;
  transition: opacity var(--d-4) var(--curva-sale);
}
.boleta-destello {
  background: linear-gradient(105deg, #0000 30%, var(--destello) 48%, #0000 66%);
  transform: translateX(-110%);
}

.boleta-cabeza { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-3); }
.boleta-evento {
  min-width: 0;
  font-family: var(--cartel);
  font-weight: var(--peso-medio);
  font-size: var(--t-24);
  line-height: 1.05;
  color: var(--boleta-acento);
}
.boleta-num { display: var(--num-cuerpo); font-family: var(--mono); font-size: var(--t-15); white-space: nowrap; padding-top: var(--e-1); }
.boleta-adorno {
  display: var(--adorno);
  flex: none;
  width: 72px;
  height: 50px;
  margin: calc(var(--e-3) * -1) calc(var(--e-2) * -1) 0 0;
  overflow: visible;
}
/* El adorno de Halloween: se mueve solo con transform y opacity; con menos movimiento queda quieto y completo */
.adorno-z .z-halo { fill: none; stroke: var(--boleta-acento); stroke-width: 1.2; opacity: 0.22; transform-box: fill-box; transform-origin: center; animation: z-respira 5.6s ease-in-out infinite; }
.adorno-z .z-luna { fill: var(--boleta-acento); }
.adorno-z .z-crater { fill: var(--boleta); opacity: 0.22; }
.adorno-z .z-estrella { fill: var(--boleta-tinta); transform-box: fill-box; transform-origin: center; animation: z-titila 3.4s ease-in-out infinite; }
.adorno-z .z-e2 { animation-duration: 4.6s; animation-delay: -1.7s; }
.adorno-z .z-cuerpo, .adorno-z .z-ala { fill: var(--boleta-tinta); }
.adorno-z .z-ala { transform-box: fill-box; animation: z-aletea 0.9s ease-in-out infinite alternate; }
.adorno-z .z-izq { transform-origin: 100% 15%; }
.adorno-z .z-der { transform-origin: 0 15%; animation-name: z-aletea-der; }
.adorno-z .z-mur { animation: z-flota 4.8s ease-in-out infinite; }
.adorno-z .z-m2 { animation-duration: 5.6s; animation-delay: -2.1s; }
.adorno-z .z-m2 .z-ala { animation-duration: 1.05s; animation-delay: -.4s; }
.adorno-z .z-m3 { animation-duration: 4.1s; animation-delay: -1.2s; }
.adorno-z .z-m3 .z-ala { animation-duration: 0.75s; animation-delay: -.2s; }

@keyframes z-aletea { from { transform: rotate(16deg); } to { transform: rotate(-20deg); } }
@keyframes z-aletea-der { from { transform: rotate(-16deg); } to { transform: rotate(20deg); } }
@keyframes z-flota { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(1.2px, -1.4px); } 66% { transform: translate(-0.9px, 0.8px); } }
@keyframes z-respira { 0%, 100% { opacity: 0.12; transform: scale(0.97); } 50% { opacity: 0.3; transform: scale(1.03); } }
@keyframes z-titila { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }

/* Una boleta usada: la luna se apaga como antes, y todo se queda quieto */
.boleta.usada .adorno-z .z-luna { fill: var(--boleta-tinta-suave); }
.boleta.usada .adorno-z * { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .adorno-z * { animation: none !important; }
  .adorno-z .z-halo { opacity: 0.2; }
}
.boleta-fecha { position: relative; z-index: 2; font-size: var(--t-15); color: var(--boleta-tinta-suave); margin-top: calc(var(--e-2) * -1); }
.boleta-lugar { position: relative; z-index: 2; font-size: var(--t-15); color: var(--boleta-tinta-suave); margin-top: calc(var(--e-3) * -1); overflow-wrap: anywhere; }
.boleta-qr {
  position: relative;
  z-index: 2;
  align-self: center;
  background: #ffffff;
  line-height: 0;
  border-radius: var(--r-chico);
  overflow: hidden;
  transition: opacity var(--d-4) var(--curva-sale);
}
.boleta-qr canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

.boleta-talon {
  padding: var(--e-4) var(--e-5) var(--e-5);
  border-radius: 0 0 var(--r-boleta) var(--r-boleta);
  background: var(--boleta-talon);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-1) var(--e-3);
  align-items: end;
  -webkit-mask:
    radial-gradient(circle var(--muesca) at 0 0, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--muesca) at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--muesca) at 0 0, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--muesca) at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
  transform-origin: 85% 0;
}
.talon-rotulo { position: relative; z-index: 2; grid-column: 1 / -1; font-size: var(--t-13); color: var(--boleta-tinta-suave); }
.talon-nombre { position: relative; z-index: 2; font-size: var(--t-20); font-weight: var(--peso-fuerte); line-height: 1.15; overflow-wrap: anywhere; }
.talon-num { position: relative; z-index: 2; font-family: var(--mono); font-size: var(--t-15); white-space: nowrap; }

.boleta.arrancada .boleta-talon { visibility: hidden; }
.escenario .boleta.arrancada .boleta-talon { display: none; }

/* Usada: se apaga a mate y recibe el sello */
.boleta.usada .boleta-cuerpo { background: var(--boleta-mate); }
.boleta.usada .boleta-talon { background: var(--boleta-talon-mate); }
.boleta.usada .boleta-reflejo { opacity: 0; }
.boleta.usada .boleta-qr { opacity: 0.35; }
.boleta.usada .boleta-evento { color: var(--boleta-tinta-suave); }

.sello {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 46%;
  width: 82%;
  max-width: 250px;
  height: auto;
  color: var(--sello);
  mix-blend-mode: var(--sello-mezcla);
  transform: translate(-50%, -50%) rotate(-9deg);
  opacity: 0;
  pointer-events: none;
  overflow: visible;
}
.boleta.sellada .sello { opacity: 0.94; }
.sello-clasico { display: var(--sello-clasico); }
.sello-colmillos { display: var(--sello-colmillos); }
.sello rect { fill: none; stroke: currentColor; }
.sello-dientes { fill: currentColor; }
.sello-palabra { font-family: var(--sans); font-weight: 900; letter-spacing: 0.04em; fill: currentColor; }
.sello-hora { font-family: var(--mono); fill: currentColor; }

/* Puerta */

.vista-puerta { gap: var(--e-5); }
.contador {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 var(--e-3);
}
.contador-rotulo { font-size: var(--t-24); font-weight: var(--peso-fuerte); }
.contador-numero {
  display: inline-block;
  font-family: var(--cartel);
  font-weight: var(--peso-medio);
  font-size: var(--t-contador);
  line-height: 1;
  color: var(--contador);
  font-variant-numeric: tabular-nums;
}

.visor {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  max-width: 340px;
  max-height: 46vh;
  margin: 0 auto;
  background: repeating-linear-gradient(135deg, var(--visor-a) 0 10px, var(--visor-b) 10px 20px);
  border: 2px solid var(--visor-marco);
  border-radius: var(--r-chico);
}
.visor-marco {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  fill: none;
  stroke: var(--visor-marco);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-linecap: square;
}
.visor { overflow: hidden; }
/* El visor es una grilla: sin «stretch», Safari centra el video con su propia proporción y deja franjas */
.visor-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  justify-self: stretch;
  align-self: stretch;
  object-fit: cover;
  opacity: 0;
}
.visor-video.viva { opacity: 1; }
.visor-marco { z-index: 1; }
.visor-texto {
  position: relative;
  z-index: 2;
  max-width: 80%;
  padding: var(--e-2) var(--e-3);
  background: var(--papel);
  text-align: center;
  font-size: var(--t-13);
  font-weight: var(--peso-medio);
  color: var(--tinta-suave);
}

.puerta-titulo { font-size: var(--t-17); }
.manual { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.manual-nota { font-size: var(--t-15); color: var(--tinta-suave); max-width: 60ch; }
.manual-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
.manual-entrada { font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
@media (min-width: 440px) {
  .manual-fila { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

.puerta-evento { display: none; flex-direction: column; gap: var(--e-1); }
.puerta-evento-nombre { font-family: var(--cartel); font-weight: var(--peso-medio); font-size: var(--t-32); line-height: 1.05; color: var(--acento); overflow-wrap: anywhere; }
[data-tema="clasico"] .puerta-evento-nombre { color: var(--tinta); }
.puerta-evento-linea { font-size: var(--t-15); color: var(--tinta-suave); }

/* Últimos escaneos: palabra, glifo y color, nunca solo el color */
.escaneos { display: none; flex-direction: column; gap: var(--e-2); min-width: 0; }
.escaneos-titulo { font-size: var(--t-17); }
.escaneos-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filete); }
.escaneo {
  display: grid;
  grid-template-columns: var(--e-6) minmax(0, 1fr) auto;
  gap: var(--e-3);
  align-items: center;
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--filete);
}
.escaneo-glifo { width: var(--e-6); height: var(--e-6); fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.escaneo--pasa .escaneo-glifo { stroke: var(--estado-pasa); }
.escaneo--no-pasa .escaneo-glifo { stroke: var(--estado-nopasa); }
.escaneo--usado .escaneo-glifo { stroke: var(--estado-usado); }
.escaneo--horario .escaneo-glifo { stroke: var(--estado-horario); }
.escaneo-texto { min-width: 0; }
.escaneo-palabra { font-weight: var(--peso-fuerte); line-height: 1.2; }
.escaneo-nombre { font-size: var(--t-15); color: var(--tinta-suave); overflow-wrap: anywhere; }
.escaneo-hora { font-family: var(--mono); font-size: var(--t-15); color: var(--tinta-suave); }
.escaneos-vacio { padding: var(--e-3) 0; font-size: var(--t-15); color: var(--tinta-suave); }

/* Desde tablet se ven el evento y los últimos escaneos */
@media (min-width: 600px) {
  .puerta-evento, .escaneos { display: flex; }
}

/* Resultado: cartel a dos tintas que se sobreimprimen */

.resultado {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  cursor: pointer;
  outline: none;
  isolation: isolate;
  overflow: hidden;
}
.resultado-tinta { position: absolute; inset: 0; background: var(--puerta-pasa); }
/* Cada resultado con su color, bien distinto de los demás: pasa verde, ya entró ámbar, no válido rojo y fuera de horario violeta */
.resultado.no-pasa .resultado-tinta { background: var(--puerta-nopasa); }
.resultado[data-tipo="usado"] .resultado-tinta { background: var(--puerta-usado); }
.resultado[data-tipo="horario"] .resultado-tinta { background: var(--puerta-horario); }
.resultado-contenido {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  width: 100%;
  max-width: 960px;
  padding: var(--e-5) var(--e-4);
  text-align: center;
  color: var(--tinta-sobre);
}
.resultado-glifo {
  width: var(--glifo-puerta);
  height: var(--glifo-puerta);
  fill: none;
  stroke: var(--tinta-sobre);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.riso { display: grid; font-family: var(--cartel); font-weight: var(--peso-medio); line-height: 1; letter-spacing: -0.02em; }
.riso > span { grid-area: 1 / 1; mix-blend-mode: multiply; }
.riso-a { color: var(--tinta-a); }
.riso-b { color: var(--tinta-b); }

.resultado-palabra { font-size: var(--t-puerta); line-height: 0.9; letter-spacing: -0.03em; text-align: center; max-width: 100%; }
.resultado-palabra.larga { font-size: var(--t-puerta-larga); line-height: 0.95; }
.resultado.no-pasa .resultado-palabra .riso-b { color: var(--tinta-fantasma); mix-blend-mode: normal; }
.resultado-nombre {
  font-family: var(--sans);
  font-weight: var(--peso-fuerte);
  font-size: var(--t-44);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.resultado-motivo { font-size: var(--t-20); font-weight: var(--peso-medio); max-width: 30ch; }
.resultado-volver { margin-top: var(--e-4); font-size: var(--t-15); font-weight: var(--peso-medio); }

/* Admin */

.admin-arriba { display: grid; gap: var(--e-6); }
.admin-cabeza { display: flex; flex-direction: column; gap: var(--e-2); }
.admin-titulo {
  font-family: var(--cartel);
  font-weight: var(--peso-medio);
  font-size: var(--t-44);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--acento);
}
[data-tema="clasico"] .admin-titulo { color: var(--tinta); }
.admin-fecha { color: var(--tinta-suave); font-size: var(--t-15); }
.muestra-nota { font-size: var(--t-13); color: var(--tinta-suave); }
.admin-titulo { overflow-wrap: anywhere; }
.admin-botones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.admin-botones .boton { flex: 1 1 100%; }
@media (min-width: 420px) {
  .admin-botones .boton { flex: 1 1 auto; }
}
.recipiente-nota { margin-top: var(--e-2); font-size: var(--t-13); color: var(--tinta-suave); }

.pulso-titulo { margin-bottom: var(--e-4); font-size: var(--t-20); }

.recipiente { display: block; width: 100%; height: auto; overflow: visible; }
.recipiente-borde { fill: none; stroke: var(--tinta-suave); stroke-width: 3; stroke-linecap: round; }
.punto { transform-box: fill-box; transform-origin: center; }
.punto--adentro { fill: var(--punto-adentro); }
.punto--qr { fill: var(--punto-qr-fondo); stroke: var(--punto-qr-borde); stroke-width: 1.6; }
.punto--fila { fill: var(--punto-fila); stroke: var(--punto-fila-borde); stroke-width: 1.2; }
.punto--libre { fill: var(--punto-libre); }

.leyenda {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-4);
  margin-top: var(--e-4);
}
.leyenda-item { min-width: 0; }
.leyenda-item dt {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--tinta-suave);
  font-size: var(--t-15);
  font-weight: var(--peso-medio);
}
.leyenda-item dt svg { width: var(--e-4); height: var(--e-4); flex: none; }
.leyenda-item dd {
  overflow: hidden;
  font-size: var(--t-24);
  font-weight: var(--peso-fuerte);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.cifra { display: inline-block; }
.leyenda-libres { color: var(--tinta-suave); font-size: var(--t-15); font-weight: var(--peso-medio); }

/* Búsqueda propia */
.buscar { display: flex; flex-direction: column; gap: var(--e-1); max-width: 560px; }
.buscar-caja { position: relative; display: flex; align-items: center; }
.buscar-lupa { position: absolute; left: var(--e-3); color: var(--tinta-suave); pointer-events: none; }
.buscar-entrada { padding-left: calc(var(--e-3) + var(--icono) + var(--e-2)); padding-right: calc(var(--toque) + var(--e-1)); }
.buscar-borrar {
  position: absolute;
  right: 2px;
  display: grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  border: 0;
  border-radius: var(--r-control);
  background: none;
  color: var(--tinta);
}
.buscar-borrar:hover { background: var(--papel-alto); }
.buscar-resumen { font-size: var(--t-13); color: var(--tinta-suave); min-height: 1.5em; }

.pestanas { position: relative; display: flex; border-bottom: 2px solid var(--filete); margin-top: calc(var(--e-3) * -1); }
.pestana {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--toque);
  padding: var(--e-2) var(--e-1);
  border: 0;
  background: none;
  color: var(--tinta-suave);
  font-size: var(--t-15);
  font-weight: var(--peso-fuerte);
  transition: color var(--d-2) var(--curva-sale);
}
.pestana[aria-selected="true"] { color: var(--tinta); }
.pestana:focus-visible { outline-offset: -4px; }
.pestana-texto { display: inline-block; }
.pestanas-marca {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: calc(100% / 3);
  height: var(--e-1);
  border-radius: var(--r-redondo);
  background: var(--acento);
  transition: transform var(--d-3) var(--curva-sale);
}
.pestanas[data-i="1"] .pestanas-marca { transform: translateX(100%); }
.pestanas[data-i="2"] .pestanas-marca { transform: translateX(200%); }

.admin-col { display: none; min-width: 0; }
.admin-col.activa { display: block; }
.col-titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.personas { margin: 0; padding: 0; list-style: none; }
.persona {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: var(--e-3);
  row-gap: var(--e-2);
  align-items: center;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--filete);
}
.persona > .forma { grid-column: 1; grid-row: 1; }
.persona-datos { grid-column: 2; grid-row: 1; min-width: 0; }
.persona-codigo { grid-column: 3; grid-row: 1; }
.persona-mas { grid-column: 4; grid-row: 1; margin-right: calc(var(--e-2) * -1); color: var(--tinta-suave); }
.persona-mas:hover, .persona-mas[aria-expanded="true"] { color: var(--tinta); }
.icono-puntos { stroke-width: 3.2; }
.persona-nota { margin-top: var(--e-1); font-size: var(--t-13); font-weight: var(--peso-medio); color: var(--tinta-suave); }
.persona-nombre { font-weight: var(--peso-fuerte); line-height: 1.15; overflow-wrap: anywhere; }
.persona-meta {
  margin-top: var(--e-1);
  color: var(--tinta-suave);
  font-size: var(--t-15);
  font-variant-numeric: tabular-nums;
}
.persona-codigo { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.persona-codigo-rotulo { font-size: var(--t-13); color: var(--tinta-suave); margin-bottom: var(--e-1); }
.persona-codigo-valor { font-family: var(--mono); font-size: var(--t-24); letter-spacing: 0.06em; }
.persona-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  margin-top: var(--e-1);
  padding: 0 var(--e-1);
  border: 2px solid var(--sello);
  border-radius: var(--r-chico);
  color: var(--sello);
  font-size: var(--t-13);
  font-weight: var(--peso-fuerte);
  transform: rotate(-2deg);
}
.persona .persona-accion { grid-column: 2 / -1; grid-row: 2; justify-self: start; min-height: var(--toque); padding: var(--e-1) var(--e-4); font-size: var(--t-15); }

/* Menú propio de cada persona */
.menu {
  position: fixed;
  z-index: 30;
  min-width: 220px;
  padding: var(--e-1);
  border: 1px solid var(--linea);
  border-radius: var(--r-control);
  background: var(--papel-alto);
  box-shadow: var(--sombra-panel);
  display: flex;
  flex-direction: column;
}
.menu-item {
  min-height: var(--toque);
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--r-chico);
  background: none;
  color: var(--tinta);
  font-size: var(--t-15);
  font-weight: var(--peso-medio);
  text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--papel); }
.menu-item:focus-visible { outline-offset: -3px; }
.menu-item--peligro { color: var(--error); }
.persona-resto,
.personas-vacio { padding: var(--e-4) 0; color: var(--tinta-suave); font-size: var(--t-15); }
.mono-hora { white-space: nowrap; font-variant-numeric: normal; }

/* Formas: cada persona es una */
.forma {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--forma);
  height: var(--forma);
  border-radius: var(--r-redondo);
  font-size: var(--t-15);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  list-style: none;
}
.forma--fila { background: var(--punto-fila); color: var(--forma-fila-tinta); box-shadow: inset 0 0 0 2px var(--punto-fila-borde); border-radius: var(--r-control); }
.forma--qr { background: var(--punto-qr-fondo); color: var(--tinta); box-shadow: inset 0 0 0 3px var(--punto-qr-borde); }
.forma--adentro { background: var(--punto-adentro); color: var(--sobre-acento); }
[data-tema="clasico"] .forma--adentro { color: var(--papel); }

/* Tema del evento */
.ajustes { display: grid; gap: var(--e-6); margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid var(--filete); }
.temas { margin: 0; padding: 0; border: 0; min-width: 0; }
.temas-titulo { float: left; width: 100%; padding: 0; font-size: var(--t-20); font-weight: var(--peso-fuerte); }
.temas-nota { clear: both; padding-top: var(--e-1); font-size: var(--t-15); color: var(--tinta-suave); max-width: 60ch; }
.temas-opciones,
.apariciones-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--e-3); margin-top: var(--e-4); }
.tema {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--e-4);
  align-items: center;
  min-height: var(--toque);
  padding: var(--e-3);
  border: 2px solid var(--filete);
  border-radius: var(--r-panel);
  cursor: pointer;
  transition: border-color var(--d-2) var(--curva-sale);
}
.tema:hover { border-color: var(--linea); }
.tema-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tema:has(.tema-radio:checked) { border-color: var(--acento); }
.tema:has(.tema-radio:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.tema-texto { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.tema-nombre { font-weight: var(--peso-fuerte); }
.tema-detalle { font-size: var(--t-13); color: var(--tinta-suave); }
.tema-estado { display: none; align-items: center; gap: var(--e-1); font-size: var(--t-13); font-weight: var(--peso-medio); }
.tema-estado .icono { width: var(--e-4); height: var(--e-4); }
.tema:has(.tema-radio:checked) .tema-estado { display: inline-flex; }

/* Cómo aparece la entrada: una boleta en miniatura que repite su aparición */
.aparicion { grid-template-columns: 104px minmax(0, 1fr); }
.aparicion-escena {
  position: relative;
  width: 104px;
  height: 200px;
  overflow: hidden;
  border-radius: var(--r-control);
  pointer-events: none;
}
.escenario-mini {
  position: absolute;
  left: 4px;
  top: 0;
  width: 240px;
  max-width: none;
  transform: scale(0.4);
  transform-origin: 0 0;
}
.aparicion-defecto { font-weight: var(--peso-medio); }

/* Boleta en miniatura: lleva su propio tema */
.tema-muestra { display: flex; flex-direction: column; width: 76px; color: var(--boleta-tinta); filter: var(--sombra-boleta); }
.muestra-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-1);
  border-radius: var(--r-chico) var(--r-chico) 0 0;
  background: var(--boleta);
  border-bottom: 2px dotted var(--papel);
}
.muestra-titulo { font-family: var(--cartel); font-weight: var(--peso-medio); font-size: var(--t-13); line-height: 1; color: var(--boleta-acento); }
.muestra-qr { width: 36px; height: 36px; }
.muestra-talon { height: 16px; border-radius: 0 0 var(--r-chico) var(--r-chico); background: var(--boleta-talon); }

/* Hoja que sube desde su botón */

.hoja-fondo { position: fixed; inset: 0; z-index: 20; background: var(--velo); }
.hoja {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  max-width: var(--columna);
  max-height: 92vh;
  margin: 0 auto;
  padding: var(--e-4) var(--e-4) var(--e-6);
  overflow-y: auto;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra-panel);
  transform-origin: 0 0;
}
@media (min-width: 768px) { .hoja { padding: var(--e-6); } }
@media (min-width: 1024px) {
  .hoja {
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    width: min(540px, 100%);
    max-width: none;
    max-height: none;
    border-radius: var(--r-panel) 0 0 var(--r-panel);
  }
}
@media (min-width: 600px) {
  .hoja.hoja-corta {
    inset: 0;
    width: min(480px, calc(100% - 2 * var(--e-4)));
    height: fit-content;
    max-height: 80vh;
    margin: auto;
    border-radius: var(--r-panel);
  }
}
.hoja-texto-corto { font-size: var(--t-17); max-width: 52ch; }
.hoja-acciones { display: flex; flex-wrap: wrap-reverse; gap: var(--e-2); justify-content: flex-end; margin-top: var(--e-2); }
.hoja-acciones .boton { flex: 1 1 180px; }
.boton-peligro { background: var(--peligro); border-color: var(--peligro); color: var(--sobre-peligro); }
.boton-peligro:hover:not(:disabled) { filter: brightness(1.08); }

.historial { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filete); }
.historial-item { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--filete); font-size: var(--t-15); }
.historial-hora { font-family: var(--mono); color: var(--tinta-suave); }

/* Datos del evento: pares de campos y controles propios de fecha y hora */
.campos-par { display: grid; gap: var(--e-4); }
@media (min-width: 440px) {
  .campos-par { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.campo-area { min-height: 96px; resize: vertical; line-height: 1.5; }
.campo-cuenta { text-align: right; }
.control-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  text-align: left;
  cursor: pointer;
}
.control-boton[aria-expanded="true"] { border-color: var(--tinta); }
.control-valor { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.calendario {
  margin-top: var(--e-1);
  padding: var(--e-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-control);
  background: var(--papel-alto);
}
.cal-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.cal-mes { font-weight: var(--peso-fuerte); }
.cal-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-tabla th { padding: var(--e-1) 0; font-size: var(--t-13); font-weight: var(--peso-medio); color: var(--tinta-suave); }
.cal-tabla td { padding: 0; text-align: center; }
.cal-dia {
  width: 100%;
  min-width: var(--toque);
  height: var(--toque);
  border: 0;
  border-radius: var(--r-chico);
  background: none;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.cal-dia:hover:not(:disabled) { background: var(--papel); }
.cal-dia:focus-visible { outline-offset: -3px; }
.cal-dia.cal-hoy { box-shadow: inset 0 0 0 1px var(--linea); }
.cal-dia[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); font-weight: var(--peso-fuerte); }
.cal-dia[aria-pressed="true"]:focus-visible { outline-color: var(--tinta); }
.cal-dia:disabled { color: var(--tinta-suave); opacity: 0.5; cursor: not-allowed; }
@media (max-width: 359px) {
  .calendario { margin-inline: calc(var(--e-3) * -1); padding-inline: var(--e-1); }
}

.lista-horas {
  margin: var(--e-1) 0 0;
  padding: var(--e-1);
  max-height: 232px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--linea);
  border-radius: var(--r-control);
  background: var(--papel-alto);
  scrollbar-color: var(--linea) var(--papel-alto);
}
.lista-horas:focus-visible { outline-offset: 2px; }
.hora-opcion {
  display: flex;
  align-items: center;
  min-height: var(--toque);
  padding: 0 var(--e-3);
  border-radius: var(--r-chico);
  cursor: pointer;
}
.hora-opcion:hover { background: var(--papel); }
.hora-opcion.activa { box-shadow: inset 0 0 0 2px var(--tinta); }
.hora-opcion[aria-selected="true"] { background: var(--acento); color: var(--sobre-acento); font-weight: var(--peso-fuerte); }
.hoja-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.hoja-titulo { font-size: var(--t-24); }
.hoja-ayuda { font-size: var(--t-15); color: var(--tinta-suave); }
.hoja-texto { display: flex; flex-direction: column; gap: var(--e-3); font-size: var(--t-15); max-width: 62ch; }
.hoja-formulario { display: flex; flex-direction: column; gap: var(--e-4); }
.borrador {
  align-self: flex-start;
  padding: 0 var(--e-2);
  border: 2px solid var(--sello);
  border-radius: var(--r-chico);
  color: var(--sello);
  font-size: var(--t-13);
  font-weight: var(--peso-fuerte);
  transform: rotate(-1.5deg);
}
.entrega { font-size: var(--t-13); font-weight: var(--peso-medio); color: var(--error); }

/* Vuelos y avisos */

.capa-vuelo { position: fixed; inset: 0; z-index: 25; pointer-events: none; overflow: hidden; }
.vuelo { position: fixed; display: grid; place-items: center; }
.vuelo-salto { display: grid; place-items: center; }
.vuelo-salto > .forma { grid-area: 1 / 1; }

.aviso {
  position: fixed;
  left: var(--e-4);
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: 35;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  border-radius: var(--r-control);
  background: var(--tinta);
  color: var(--papel);
  font-size: var(--t-15);
  font-weight: var(--peso-medio);
  box-shadow: var(--sombra-panel);
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.aviso-texto { flex: 1 1 auto; min-width: 0; padding: var(--e-1) 0; }
.aviso-deshacer {
  flex: none;
  min-height: var(--toque);
  padding: 0 var(--e-4);
  border: 2px solid var(--papel);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--papel);
  font-weight: var(--peso-fuerte);
}
.aviso-deshacer:hover { background: var(--papel); color: var(--tinta); }
.aviso :focus-visible { outline-color: var(--papel); }

/* Tamaños */

@media (max-width: 359px) {
  .persona { grid-template-columns: auto minmax(0, 1fr) auto; }
  .persona-mas { grid-column: 3; }
  .persona-codigo { grid-column: 2 / -1; grid-row: 2; flex-direction: row; gap: var(--e-2); align-items: baseline; }
  .persona .persona-accion { grid-row: 3; }
  .boleta-cuerpo { padding-left: var(--e-4); padding-right: var(--e-4); }
  .boleta-talon { padding-left: var(--e-4); padding-right: var(--e-4); }
  .talonario { padding-left: var(--e-4); padding-right: var(--e-4); }
  .pestana { font-size: var(--t-13); }
}

@media (min-width: 600px) {
  .admin-arriba { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; gap: var(--e-6); }
}
@media (min-width: 1024px) {
  .admin-arriba { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; gap: var(--e-8); }
  .leyenda { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pestanas { display: none; }
  .admin-listas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); }
  .admin-col, .admin-col.activa { display: block; }
  .col-titulo {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    padding-bottom: var(--e-2);
    border-bottom: 2px solid var(--tinta);
    font-size: var(--t-20);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
  .boleta-giro { transform: none !important; }
}

/* Mensajes de página: enlace que no existe, sin sesión, cargando */

.vista-mensaje { min-height: 60vh; justify-content: center; }
.mensaje {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.mensaje-glifo { width: var(--e-7); height: var(--e-7); color: var(--acento); stroke-width: 1.6; }
[data-tema="clasico"] .mensaje-glifo { color: var(--tinta); }
.mensaje-titulo { font-size: var(--t-32); letter-spacing: -0.01em; }
.mensaje-titulo:focus { outline: none; }
.mensaje-texto { color: var(--tinta-suave); max-width: 52ch; }
.mensaje-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }

/* Interruptor propio: un botón con role="switch" */

.interruptor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--e-3);
  min-height: var(--toque);
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  text-align: left;
  font-weight: var(--peso-medio);
}
.interruptor-riel {
  position: relative;
  width: var(--e-7);
  height: 28px;
  border: 2px solid var(--linea);
  border-radius: var(--r-redondo);
  background: var(--campo-fondo);
  transition: background-color var(--d-2) var(--curva-sale), border-color var(--d-2) var(--curva-sale);
}
.interruptor-bola {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-redondo);
  background: var(--linea);
  transition: transform var(--d-2) var(--curva-sale), background-color var(--d-2) var(--curva-sale);
}
.interruptor:hover .interruptor-riel { border-color: var(--tinta); }
.interruptor[aria-checked="true"] .interruptor-riel { background: var(--acento); border-color: var(--acento); }
.interruptor[aria-checked="true"] .interruptor-bola { background: var(--sobre-acento); transform: translateX(20px); }
.interruptor:focus-visible { outline: none; }
.interruptor:focus-visible .interruptor-riel { outline: 3px solid var(--foco); outline-offset: 3px; }
.ensayo-nota { font-size: var(--t-13); font-weight: var(--peso-fuerte); color: var(--error); }

/* Accesos: enlaces de un solo uso para porteros y admins */

.accesos { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.accesos .temas-titulo { float: none; }
.accesos .temas-nota { padding-top: 0; margin-top: calc(var(--e-3) * -1); }
.accesos-formulario { display: flex; flex-direction: column; gap: var(--e-4); max-width: 560px; }
.accesos-formulario .boton { align-self: flex-start; }
.rol { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.rol-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--e-2); }
.rol-opcion {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  min-height: var(--toque);
  padding: var(--e-3);
  border: 2px solid var(--filete);
  border-radius: var(--r-control);
  cursor: pointer;
  transition: border-color var(--d-2) var(--curva-sale);
}
.rol-opcion:hover { border-color: var(--linea); }
.rol-opcion:has(.rol-radio:checked) { border-color: var(--acento); }
.rol-opcion:has(.rol-radio:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.rol-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rol-nombre { font-weight: var(--peso-fuerte); }
.rol-detalle { font-size: var(--t-13); color: var(--tinta-suave); }
.rol-estado { display: none; align-items: center; gap: var(--e-1); font-size: var(--t-13); font-weight: var(--peso-medio); }
.rol-estado .icono { width: var(--e-4); height: var(--e-4); }
.rol-opcion:has(.rol-radio:checked) .rol-estado { display: inline-flex; }

.acceso-nuevo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  max-width: 560px;
  padding: var(--e-4);
  border: 2px solid var(--acento);
  border-radius: var(--r-panel);
}
.acceso-nuevo-titulo { font-weight: var(--peso-medio); overflow-wrap: anywhere; }
.acceso-nuevo-url {
  font-family: var(--mono);
  font-size: var(--t-15);
  overflow-wrap: anywhere;
  user-select: all;
}
.acceso-nuevo-aviso { display: flex; gap: var(--e-2); align-items: flex-start; font-size: var(--t-15); font-weight: var(--peso-medio); color: var(--error); }
.acceso-nuevo-aviso .icono { width: 18px; height: 18px; margin-top: 2px; }
.acceso-botones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.acceso-botones .boton { flex: 1 1 auto; }

/* Carga: desde el primer instante, sin esperar al código. Una boleta sale de la ranura mientras se abre la página */
.carga {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e-5);
  padding: var(--e-5);
  background: var(--fondo);
  color: var(--tinta);
  text-align: center;
}
.carga-evento {
  margin: 0;
  max-width: 14ch;
  font-family: var(--cartel);
  font-weight: var(--peso-medio);
  font-size: clamp(2rem, 9vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--acento);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.carga-dibujo { width: clamp(180px, 52vw, 240px); height: auto; overflow: visible; }
.carga-ranura { fill: var(--acento); }
.carga-ranura-sombra { fill: var(--fondo); opacity: 0.55; }
.carga-papel { fill: var(--boleta); stroke: var(--boleta-tinta); stroke-opacity: 0.18; stroke-width: 1; }
.carga-perfo { stroke: var(--boleta-tinta); stroke-width: 1.5; stroke-dasharray: 2 3; opacity: 0.55; }
.carga-qr { fill: var(--boleta-tinta); }
.carga-qr-hueco { fill: var(--boleta); }
.carga-renglon { stroke: var(--boleta-tinta); stroke-width: 3; stroke-linecap: round; opacity: 0.5; }
/* Cada vuelta: la boleta sale a tirones, se queda un momento y se suelta */
.carga-boleta { animation: carga-imprime 2s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; }
@keyframes carga-imprime {
  0% { transform: translateY(-74px); opacity: 1; }
  18% { transform: translateY(-52px); }
  26% { transform: translateY(-50px); }
  44% { transform: translateY(-24px); }
  52% { transform: translateY(-22px); }
  70% { transform: translateY(0); }
  86% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}
.carga-texto { margin: 0; font-size: var(--t-20); font-weight: var(--peso-medio); }
.carga-texto span { display: none; }
html[data-ruta="registro"] .carga-texto [data-para="registro"],
html[data-ruta="entrada"] .carga-texto [data-para="entrada"],
html[data-ruta="puerta"] .carga-texto [data-para="puerta"],
html[data-ruta="admin"] .carga-texto [data-para="admin"],
html[data-ruta="entrar"] .carga-texto [data-para="entrar"],
html[data-ruta="super"] .carga-texto [data-para="super"] { display: inline; }
/* Solo si de verdad tarda: aparece despacio a los 8 s */
.carga-lenta {
  margin: 0;
  max-width: 28ch;
  font-size: var(--t-15);
  color: var(--tinta-suave);
  opacity: 0;
  animation: carga-lenta var(--d-4) ease-out 8s forwards;
}
@keyframes carga-lenta { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .carga-boleta { animation: none; }
  .carga-lenta { animation-duration: 1ms; }
}

/* Tacto: en celular y tablet nada se selecciona, se arrastra ni se agranda por accidente */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, label, summary, [role="tab"], .resultado { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, [role="tab"], .boton, .carga, .resultado, .contador, .visor, .cabecera { -webkit-user-select: none; user-select: none; }
img, svg { -webkit-user-drag: none; }
.cabecera { padding-left: max(var(--lado), env(safe-area-inset-left)); padding-right: max(var(--lado), env(safe-area-inset-right)); }
.hoja { overscroll-behavior: contain; max-height: 92dvh; padding-bottom: calc(var(--e-6) + env(safe-area-inset-bottom)); }
/* Mientras hay una hoja o un resultado encima, el fondo no se mueve, tampoco en el iPhone */
body.fondo-quieto { position: fixed; left: 0; right: 0; overflow: hidden; }

/* Puerta: una sola pantalla fija en celular, iPad y PC. Nada se desplaza; el visor toma el alto que sobra */
body[data-vista="puerta"] { display: flex; flex-direction: column; height: 100dvh; min-height: 0; overflow: hidden; overscroll-behavior: none; }
body[data-vista="puerta"] .cabecera { flex: none; width: 100%; }
body[data-vista="puerta"] .columna { flex: 1 1 auto; min-height: 0; width: 100%; }
.vista-puerta:not([hidden]) {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-top: var(--e-4);
  padding-bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
  -webkit-user-select: none;
  user-select: none;
}
.vista-puerta .contador-caja, .vista-puerta .puerta-evento, .vista-puerta .manual, .vista-puerta .puerta-escribir { flex: none; }
.vista-puerta .visor-caja { flex: 1 1 0; min-height: 160px; display: grid; place-items: center; container-type: size; }
.vista-puerta .visor { width: min(100cqw, 100cqh); max-width: none; max-height: none; margin: 0; }
.vista-puerta .manual-entrada { -webkit-user-select: text; user-select: text; }
.vista-puerta .escaneos { flex: none; max-height: 30dvh; overflow-y: auto; overscroll-behavior: contain; }

/* Celular: lo mínimo alrededor del visor */
@media (max-width: 599px), (max-height: 520px) and (orientation: landscape) {
  .vista-puerta:not([hidden]) { padding-top: var(--e-3); padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom)); }
  .vista-puerta .manual { gap: var(--e-2); }
  .vista-puerta .manual .puerta-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vista-puerta .manual-nota { display: none; }
  .vista-puerta .manual-fila { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
/* Celular acostado: el visor a la izquierda y el resto a la derecha */
@media (max-height: 520px) and (orientation: landscape) and (min-width: 600px) {
  .vista-puerta:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "visor contador" "visor ." "visor manual";
    column-gap: var(--e-5);
  }
  .vista-puerta .visor-caja { grid-area: visor; min-height: 0; }
  .vista-puerta .contador-caja { grid-area: contador; justify-content: flex-start; }
  .vista-puerta .manual { grid-area: manual; }
  .vista-puerta .puerta-evento, .vista-puerta .escaneos { display: none; }
}
/* iPad acostado y PC: visor grande a la izquierda; a la derecha el evento, el contador, el campo y los escaneos */
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 521px) {
  .vista-puerta:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "visor evento" "visor contador" "visor manual" "visor escaneos";
    column-gap: var(--e-8);
    row-gap: var(--e-4);
  }
  .vista-puerta .visor-caja { grid-area: visor; min-height: 0; align-self: stretch; place-items: start center; }
  .vista-puerta .escaneos { grid-area: escaneos; max-height: none; min-height: 0; }
  .vista-puerta .puerta-evento { grid-area: evento; }
  .vista-puerta .contador-caja { grid-area: contador; justify-content: flex-start; }
  .vista-puerta .manual { grid-area: manual; }
}


/* Campo trampa del registro: fuera de la vista y del teclado; solo un robot lo llena */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Campo con su unidad al lado: «15 días después del cierre» */
.campo-con-unidad { display: flex; align-items: center; gap: var(--e-3); }
.campo-con-unidad .campo-entrada { width: 6em; flex: none; text-align: center; font-variant-numeric: tabular-nums; }
.campo-unidad { font-size: var(--t-17); color: var(--tinta-suave); }

/* Cómo llegar */
.llegar-opciones { display: flex; flex-direction: column; gap: var(--e-3); }
#b-llegar { margin-top: var(--e-1); }

/* Datos de los asistentes en el admin: descargar y borrar */
.datos-evento { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.datos-evento .temas-titulo { float: none; }
.datos-evento .temas-nota { padding-top: 0; }
.datos-botones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.boton-peligro-linea { color: var(--peligro); border-color: var(--peligro); }
.boton-peligro-linea:hover:not(:disabled) { background: var(--peligro); color: var(--sobre-peligro); }
.br-nombre-evento { font-weight: var(--peso-fuerte); }

/* Cortesías con Excel: el archivo y lo que va a cambiar */
.cortesias-archivo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.cortesias-nombre { min-width: 0; overflow-wrap: anywhere; }
.cortesias-cifras { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filete); }
.cortesias-cifra { padding: var(--e-3) 0; border-bottom: 1px solid var(--filete); }
.cortesias-fila { display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--t-15); }
.cortesias-n { font-variant-numeric: tabular-nums; }
.cortesias-detalle { margin-top: var(--e-1); font-size: var(--t-13); color: var(--tinta-suave); overflow-wrap: anywhere; }

/* Enlaces de texto que navegan: el mismo sitio para el dedo que un botón */
a.enlace-texto { display: inline-flex; align-items: center; }

/* Del evento en el tablero: su enlace de registro y, con varios, volver al selector */
.admin-enlace { font-size: var(--t-13); color: var(--tinta-suave); }
.admin-enlace-url { display: block; font-family: var(--mono); color: var(--tinta); overflow-wrap: anywhere; }

/* Entrar con correo y clave, y el selector de eventos */
.vista-entrar, .vista-eventos { min-height: 70vh; }
.vista-entrar { justify-content: center; }
.entrar, .eventos { display: flex; flex-direction: column; gap: var(--e-4); width: 100%; margin: 0 auto; }
.entrar { max-width: var(--columna); }
/* El selector arranca en la misma vertical que la cabecera y que el tablero */
.eventos { max-width: 720px; margin: 0; }
.entrar-titulo, .eventos-titulo {
  font-family: var(--cartel);
  font-weight: var(--peso-medio);
  font-size: var(--t-44);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--acento);
  text-wrap: balance;
}
[data-tema="clasico"] .entrar-titulo, [data-tema="clasico"] .eventos-titulo { color: var(--tinta); }
.entrar-titulo:focus, .eventos-titulo:focus { outline: none; }
.entrar-nota, .eventos-nota { color: var(--tinta-suave); font-size: var(--t-15); max-width: 52ch; }
.entrar-formulario { margin-top: var(--e-2); }
.entrar-clave { font-family: var(--mono); letter-spacing: 0.04em; }

.eventos-lista { margin: var(--e-2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--filete); }
.evento-opcion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--e-3);
  row-gap: var(--e-1);
  align-items: center;
  min-height: var(--toque);
  padding: var(--e-4) var(--e-2);
  border-bottom: 1px solid var(--filete);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color var(--d-1) var(--curva-sale);
}
.evento-opcion:hover { background: var(--papel-alto); }
.evento-opcion:focus-visible { outline-offset: -3px; }
.evento-opcion > span { grid-column: 1; }
.evento-opcion-nombre { font-weight: var(--peso-fuerte); font-size: var(--t-20); line-height: 1.2; overflow-wrap: anywhere; }
.evento-opcion-linea, .evento-opcion-cifras { font-size: var(--t-15); color: var(--tinta-suave); }
.evento-opcion-cerrado { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-13); font-weight: var(--peso-medio); }
.evento-opcion-cerrado .icono { width: 16px; height: 16px; }
.evento-opcion-ir { grid-column: 2; grid-row: 1 / span 4; color: var(--tinta-suave); transition: transform var(--d-1) var(--curva-sale); }
.evento-opcion:hover .evento-opcion-ir { transform: translateX(2px); color: var(--tinta); }

/* Panel del superadmin */
.super-cabeza { display: flex; flex-direction: column; gap: var(--e-2); }
.super-titulo {
  font-family: var(--cartel);
  font-weight: var(--peso-medio);
  font-size: var(--t-44);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--acento);
  text-wrap: balance;
}
[data-tema="clasico"] .super-titulo { color: var(--tinta); }
.super-titulo:focus { outline: none; }
.super-resumen { color: var(--tinta-suave); font-size: var(--t-15); font-variant-numeric: tabular-nums; }

.super-pestanas {
  display: flex;
  gap: var(--e-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 2px solid var(--filete);
}
.super-pestanas::-webkit-scrollbar { display: none; }
.super-pestana {
  flex: none;
  min-height: var(--toque);
  padding: var(--e-2) var(--e-4);
  border: 0;
  background: none;
  color: var(--tinta-suave);
  font-size: var(--t-15);
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
  box-shadow: inset 0 0 0 transparent;
  transition: color var(--d-2) var(--curva-sale), box-shadow var(--d-2) var(--curva-sale);
}
.super-pestana:hover { color: var(--tinta); }
.super-pestana[aria-selected="true"] { color: var(--tinta); box-shadow: inset 0 calc(var(--e-1) * -1) 0 var(--acento); }
.super-pestana:focus-visible { outline-offset: -4px; }

.super-seccion { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.super-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.super-barra-aparte { margin-top: var(--e-5); }
.super-subtitulo { font-size: var(--t-20); }
.super-nota { color: var(--tinta-suave); font-size: var(--t-15); max-width: 60ch; }

.super-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filete); }
.super-vacio { padding: var(--e-4) 0; color: var(--tinta-suave); font-size: var(--t-15); }
.super-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--e-3);
  row-gap: var(--e-3);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--filete);
}
.super-fila-datos { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.super-fila-nombre { font-weight: var(--peso-fuerte); font-size: var(--t-20); line-height: 1.2; overflow-wrap: anywhere; }
.super-fila-linea { font-size: var(--t-15); color: var(--tinta-suave); overflow-wrap: anywhere; }
.super-fila-enlace { font-family: var(--mono); font-size: var(--t-13); }
.super-fila-cifras { color: var(--tinta); font-variant-numeric: tabular-nums; }
.super-estado { display: inline-flex; align-items: center; gap: var(--e-1); align-self: start; font-size: var(--t-15); font-weight: var(--peso-medio); white-space: nowrap; }
.super-estado .icono { width: 18px; height: 18px; }
.super-estado[data-estado="abierto"] { color: var(--tinta); }
.super-estado[data-estado="abierto"] .icono { color: var(--acento); }
.super-estado[data-estado="cerrado"] { color: var(--tinta-suave); }
.super-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.super-propia { margin-left: var(--e-1); font-size: var(--t-13); font-weight: var(--peso-medio); color: var(--acento); }
[data-tema="clasico"] .super-propia { color: var(--tinta); text-decoration: underline; }

.super-ajustes { display: flex; flex-direction: column; gap: var(--e-4); max-width: var(--columna); }
.super-ajustes .boton[type="submit"] { align-self: flex-start; }
.super-filtro { position: relative; max-width: var(--columna); }
.super-elegir { justify-content: space-between; }
.super-opciones {
  position: absolute;
  z-index: 5;
  top: calc(100% + var(--e-1));
  left: 0;
  right: 0;
  max-height: min(50vh, 360px);
  overflow-y: auto;
  margin: 0;
  padding: var(--e-1);
  list-style: none;
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--r-control);
  box-shadow: var(--sombra-panel);
}
.super-opcion {
  width: 100%;
  min-height: var(--toque);
  padding: var(--e-2) var(--e-3);
  border: 0;
  border-radius: var(--r-chico);
  background: none;
  color: var(--tinta);
  font-size: var(--t-15);
  text-align: left;
}
.super-opcion:hover { background: var(--papel); }
.super-opcion:focus-visible { outline-offset: -3px; }
.super-opcion[aria-pressed="true"] { font-weight: var(--peso-fuerte); text-decoration: underline; text-underline-offset: 3px; }

.super-actividad { padding: var(--e-3) 0; border-bottom: 1px solid var(--filete); display: flex; flex-direction: column; gap: var(--e-1); }
.super-actividad-frase { overflow-wrap: anywhere; }
.super-actividad-rol { font-size: var(--t-13); font-weight: var(--peso-medio); color: var(--tinta-suave); }

.super-clave {
  font-family: var(--mono);
  font-size: var(--t-24);
  letter-spacing: 0.04em;
  line-height: 1.4;
  overflow-wrap: anywhere;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-control);
  background: var(--campo-fondo);
  -webkit-user-select: all;
  user-select: all;
}
.super-casillas { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.super-casillas-lista { display: flex; flex-direction: column; gap: var(--e-2); }

@media (min-width: 1024px) {
  .super-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .super-titulo { font-size: var(--t-evento); }
}

/* Nombre del producto */
.marca-producto { font-family: var(--cartel); font-weight: var(--peso-medio); font-size: var(--t-17); letter-spacing: -0.01em; color: var(--tinta); }
.carga-marca { margin: 0; font-family: var(--cartel); font-weight: var(--peso-medio); font-size: var(--t-15); color: var(--tinta-suave); }

/* Contactos en Editar evento: una fila por contacto */
.contactos-editar { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.contactos-editar > .boton { align-self: flex-start; }
.contactos-editar > legend { padding: 0; }
.contactos-filas { display: flex; flex-direction: column; gap: var(--e-3); }
.contacto-editar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--toque);
  gap: var(--e-2) var(--e-2);
  padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--filete);
}
.contacto-editar > .campo { grid-column: 1; }
.contacto-quitar { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--tinta-suave); }
@media (min-width: 600px) {
  .contacto-editar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--toque); align-items: start; }
  .contacto-editar > .campo:nth-child(2) { grid-column: 2; grid-row: 1; }
  .contacto-quitar { grid-column: 3; grid-row: 1; align-self: end; }
}

/* Checklist del equipo */
.checklist { display: flex; flex-direction: column; gap: var(--e-3); }
.checklist-nueva { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-2); }
.checklist-nueva .campo { flex: 1 1 240px; }
.checklist-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filete); }
.tarea-vacia { padding: var(--e-3) 0; color: var(--tinta-suave); font-size: var(--t-15); }
.tarea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--e-2);
  align-items: center;
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--filete);
}
.tarea-casilla { grid-column: 1; font-size: var(--t-17); align-items: center; }
.tarea-texto { overflow-wrap: anywhere; transition: color var(--d-2) var(--curva-sale); }
.tarea-hecha .tarea-texto { color: var(--tinta-suave); text-decoration: line-through; text-decoration-thickness: 1px; }
.tarea-meta { grid-column: 1; margin: 0 0 0 calc(var(--toque) + var(--e-2)); font-size: var(--t-13); color: var(--tinta-suave); }
.tarea-acciones { grid-column: 2; grid-row: 1 / span 2; display: flex; color: var(--tinta-suave); }
.tarea-acciones .boton-icono { color: var(--tinta-suave); }
.tarea-acciones .boton-icono:hover { color: var(--tinta); }
.tarea-editando { display: block; }
.tarea-editar { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-1) 0; }
.tarea-editar-botones { display: flex; gap: var(--e-2); }

/* Telaraña: mientras cuelga, la boleta va sin la sombra con filtro, así no se repinta entera en cada cuadro */
.boleta.boleta-colgando { filter: none; will-change: transform, opacity; }
.telarana-hilo {
  position: absolute;
  z-index: 2;
  width: 1.5px;
  margin-left: -0.75px;
  transform-origin: 50% 0;
  background: linear-gradient(to bottom, transparent, var(--seda) 60%);
  pointer-events: none;
  will-change: transform, opacity;
}
.telarana-lienzo { position: absolute; z-index: 4; pointer-events: none; }
.telarana-arana { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; color: var(--arana); pointer-events: none; will-change: transform, opacity; }
.telarana-arana svg { display: block; width: 100%; height: 100%; }

/* La paleta: botón de solo ícono junto a Editar evento, y su hoja */
.admin-botones .boton-paleta { flex: 0 0 var(--alto-control); width: var(--alto-control); padding: 0; }
.admin-botones #a-editar { flex: 1 1 calc(100% - var(--alto-control) - var(--e-2)); }
/* En todos los tamaños: Registrar en puerta arriba, y Editar evento con la paleta al lado */
.admin-botones #a-registrar { flex: 1 1 100%; }
@media (min-width: 420px) { .admin-botones #a-editar { flex: 1 1 calc(100% - var(--alto-control) - var(--e-2)); } }
.personalizar { display: flex; flex-direction: column; gap: var(--e-6); }

/* Correo de la cuenta para que el gestor de claves sepa de quién es la clave nueva */
.campo-oculto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; font-size: 16px; }

/* Registros hechos desde este celular */
.otros-registros { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.otros-registros .boton { flex: 1 1 14rem; }
.mias-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--filete); }
.mias-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--toque);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--filete);
  color: var(--tinta);
  text-decoration: none;
}
.mias-item:hover .mias-nombre { text-decoration: underline; text-underline-offset: 0.2em; }
.mias-nombre { font-weight: var(--peso-medio); overflow-wrap: anywhere; min-width: 0; }
.mias-item .icono { color: var(--tinta-suave); flex: none; }

/* Parqueadero en el registro */
.parqueadero-campo { gap: var(--e-2); }
.parqueadero-condiciones {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-1);
  padding: var(--e-3) var(--e-4);
  border-left: 3px solid var(--sello);
  border-radius: 0 var(--r-control) var(--r-control) 0;
  background: color-mix(in srgb, var(--boleta-tinta) 6%, transparent);
}
.parqueadero-texto { font-size: var(--t-15); max-width: 60ch; }
.parqueadero-condiciones .enlace-texto { align-self: flex-start; }

/* Lo que trae la persona además de la entrada */
.beneficios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.beneficio { display: flex; align-items: flex-start; gap: var(--e-2); font-size: var(--t-15); }
.beneficio .icono { flex: none; color: var(--acento); margin-top: 1px; }
.beneficio-texto { min-width: 0; overflow-wrap: anywhere; }

/* La boleta con la cortesía pendiente: el QR vuelve a verse entero y lleva su rótulo */
.boleta-cortesia {
  display: none;
  position: relative;
  z-index: 2;
  align-self: center;
  align-items: baseline;
  gap: var(--e-2);
  font-size: var(--t-15);
  font-weight: var(--peso-fuerte);
  text-align: center;
  overflow-wrap: anywhere;
}
.boleta-cortesia-rotulo {
  padding: 0 var(--e-1);
  border: 2px solid var(--sello);
  border-radius: var(--r-chico);
  color: var(--sello);
  font-size: var(--t-13);
  transform: rotate(-2deg);
}
.boleta.cortesia .boleta-cortesia { display: flex; }
.boleta.cortesia .boleta-qr { opacity: 1; }
.boleta.cortesia .sello { opacity: 0; }
.boleta-qr { transform-style: preserve-3d; }

/* Tablero: el bar */
.bar-admin { display: flex; flex-direction: column; gap: var(--e-4); margin-top: var(--e-5); padding-top: var(--e-5); border-top: 1px solid var(--filete); }
.bar-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); margin: 0; }
.bar-cifra { min-width: 0; }
.bar-cifra dt { color: var(--tinta-suave); font-size: var(--t-15); font-weight: var(--peso-medio); }
.bar-cifra dd { margin: 0; font-size: var(--t-24); font-weight: var(--peso-fuerte); line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bar-admin-cuerpo { display: grid; gap: var(--e-5); }
.bar-bloque { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.bar-bloque-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); }
.bar-bloque-titulo { font-size: var(--t-17); font-weight: var(--peso-fuerte); }
.bar-productos, .bar-vendido, .bar-ultimas, .bar-mias-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filete); }
.bar-producto-fila, .bar-venta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-3);
  align-items: center;
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--filete);
}
.bar-producto-fila--apagado .bar-producto-nombre { color: var(--tinta-suave); }
.bar-producto-texto, .bar-venta-texto { min-width: 0; }
.bar-producto-nombre { font-weight: var(--peso-medio); overflow-wrap: anywhere; }
.bar-producto-meta, .bar-venta-quien { font-size: var(--t-15); color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.bar-stock--bajo { color: var(--sello); font-weight: var(--peso-fuerte); }
.bar-vendido-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--e-3);
  align-items: baseline;
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--filete);
  font-variant-numeric: tabular-nums;
}
.bar-vendido-nombre { overflow-wrap: anywhere; }
.bar-vendido-unidades { color: var(--tinta-suave); font-size: var(--t-15); }
.bar-vendido-total { font-weight: var(--peso-fuerte); }
.bar-venta-que { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bar-venta--anulada .bar-venta-que { color: var(--tinta-suave); text-decoration: line-through; text-decoration-thickness: 1px; }
.bar-vacio { padding: var(--e-3) 0; font-size: var(--t-15); color: var(--tinta-suave); }
#t-ultimas { margin-top: var(--e-3); }
@media (min-width: 600px) {
  .bar-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bar-admin-cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: var(--e-7); }
}

/* Accesos: portero o barman */
.acceso-roles { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.accesos-formulario .acceso-roles .boton { align-self: auto; }

/* Editar evento: la cortesía */
.cortesia-editar { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.cortesia-editar > legend { padding: 0; }

/* Vista del barman */
.vista-bar { gap: var(--e-5); }
.bar-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.bar-titulo { display: flex; flex-direction: column; font-size: var(--t-32); line-height: 1.1; }
.bar-titulo-evento { font-size: var(--t-17); font-weight: var(--peso-medio); color: var(--tinta-suave); overflow-wrap: anywhere; }
.bar-nota { font-size: var(--t-15); color: var(--tinta-suave); }
.bar-grilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--e-3); }
.bar-producto {
  width: 100%;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-1);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-panel);
  background: var(--papel-alto);
  color: var(--tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--d-2) var(--curva-sale), transform var(--d-2) var(--curva-sale);
}
.bar-producto:hover:not(:disabled) { border-color: var(--tinta); }
.bar-producto:active:not(:disabled) { transform: scale(0.98); }
.bar-producto:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.bar-producto .bar-producto-nombre { font-size: var(--t-17); font-weight: var(--peso-fuerte); }
.bar-producto-precio { font-variant-numeric: tabular-nums; }
.bar-producto .bar-stock { font-size: var(--t-15); color: var(--tinta-suave); }
.bar-producto .bar-stock--bajo { color: var(--sello); }
.bar-producto--agotado { opacity: 0.55; cursor: default; }
.bar-mias { display: flex; flex-direction: column; gap: var(--e-2); }

/* Cantidad a vender */
.cantidad { display: grid; grid-template-columns: var(--alto-control) minmax(0, 1fr) var(--alto-control); gap: var(--e-2); max-width: 260px; }
.cantidad-boton { min-width: var(--alto-control); padding: 0; justify-content: center; }
.cantidad-entrada { text-align: center; font-size: var(--t-20); font-variant-numeric: tabular-nums; }
.vender-total { font-size: var(--t-20); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; min-height: 1.4em; }

/* Editar evento: etapas de precio */
.etapas-editar { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.etapas-editar > legend { padding: 0; }
.etapas-editar > .boton { align-self: flex-start; }
.etapas-filas { display: flex; flex-direction: column; gap: var(--e-3); }
.etapa-editar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--toque); gap: var(--e-2); align-items: start; }
.etapa-editar .contacto-quitar { margin-top: calc(var(--t-15) * 1.5 + var(--e-1)); }
@media (max-width: 439px) {
  .etapa-editar { grid-template-columns: minmax(0, 1fr) var(--toque); }
  .etapa-editar > .campo:nth-child(2) { grid-column: 1; }
  .etapa-editar .contacto-quitar { grid-column: 2; grid-row: 1; }
}
.bar-cifra--total dd { color: var(--acento); }

/* Teclado del celular: la hoja se apoya encima y no se esconde detrás */
@media (max-width: 1023px) {
  .hoja { bottom: var(--teclado, 0px); max-height: min(92dvh, calc(var(--alto-visible, 100dvh) - 12px)); }
}
html.con-teclado .hoja { padding-bottom: var(--e-4); }
html.con-teclado .aviso { bottom: calc(var(--teclado, 0px) + var(--e-4)); }

/* Puerta: el contador con su lista; en celular el código a mano va en una hoja */
.contador-caja { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-2) var(--e-4); }
.puerta-escribir { display: none; }
@media (max-width: 599px) {
  .vista-puerta .manual { display: none; }
  .vista-puerta .puerta-escribir { display: inline-flex; }
  .vista-puerta .contador-caja { justify-content: space-between; }
  .vista-puerta .contador { justify-content: flex-start; }
}
.adentro-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filete); }
.adentro-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--e-3);
  align-items: baseline;
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--filete);
}
.adentro-nombre { font-weight: var(--peso-medio); overflow-wrap: anywhere; }
.adentro-num, .adentro-hora { font-size: var(--t-15); color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Editar evento: el mensaje de cada contacto va a lo ancho */
.contacto-editar > .contacto-mensaje { grid-column: 1; }
@media (min-width: 600px) {
  .contacto-editar > .contacto-mensaje { grid-column: 1 / span 2; grid-row: 2; }
}

/* Condiciones del parqueadero */
.condiciones strong { font-weight: var(--peso-fuerte); }
.bar-imprimir { align-self: flex-start; }

/* El aviso impreso del parqueadero: solo él, en blanco y negro y letra grande */
@media print {
  @page { margin: 18mm; }
  body.imprimiendo { background: #ffffff; }
  body.imprimiendo > *:not(.aviso-imprimible) { display: none !important; }
  body.imprimiendo .aviso-imprimible[hidden] { display: block !important; }
  .aviso-imprimible { color: #000000; font-family: var(--sans); }
  .aviso-imprimible-evento { font-size: 18pt; margin: 0 0 6mm; }
  .aviso-imprimible-titulo { font-size: 64pt; line-height: 1; margin: 0 0 10mm; }
  .aviso-imprimible-texto { font-size: 20pt; line-height: 1.4; margin: 0 0 10mm; }
  .aviso-imprimible-alcohol { font-size: 26pt; font-weight: 800; margin: 0 0 14mm; }
  .aviso-imprimible-version { font-size: 11pt; }
}

/* Puerta en el celular de pie: la cámara llena el alto que queda, como la del teléfono; el marco sigue cuadrado */
@media (max-width: 599px) {
  .vista-puerta .visor { width: 100cqw; height: 100cqh; max-width: none; max-height: none; aspect-ratio: auto; }
  .vista-puerta .visor-marco { inset: 0; margin: auto; width: 76%; height: auto; aspect-ratio: 1; }
}

/* Bar: cómo paga y el cambio */
.metodos-caja { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.metodos-caja > legend { padding: 0; margin-bottom: var(--e-2); }
.metodos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.metodo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: 76px;
  padding: var(--e-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-control);
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: border-color var(--d-2) var(--curva-sale), background-color var(--d-2) var(--curva-sale);
}
.metodo .metodo-icono { width: 28px; height: 28px; }
.metodo:hover { border-color: var(--tinta); }
.metodo[aria-checked="true"] { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 14%, transparent); }
.metodo[aria-checked="true"] .metodo-icono { color: var(--acento); }
.metodo:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.atajos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1); }
.atajos .boton { font-variant-numeric: tabular-nums; }
.vuelto { min-height: 1.4em; font-size: var(--t-20); font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
.vuelto--falta { color: var(--error); }

/* Cabecera: en el celular «Menú» reúne los caminos, la clave y la salida; desde tablet van sueltos */
@media (min-width: 600px) { #cab-cuenta { display: none; } }
@media (max-width: 599px) {
  .cabecera-acciones:has(#cab-cuenta:not([hidden])) :is(#cab-panel, #cab-ir, #cab-bar, #cab-clave, #cab-salir) { display: none; }
}

/* Atajos de lo recibido: los cinco billetes, Exacto y Borrar en dos filas de cuatro */
.atajos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.atajos .boton { padding: 0 var(--e-1); font-size: var(--t-15); white-space: nowrap; }
.metodo .metodo-icono { width: 30px; height: 30px; }

/* Datos personales: el aviso corto del registro, el responsable en Editar evento y lo que falta para abrir */
.aviso-datos { display: flex; flex-direction: column; gap: var(--e-1); margin-top: var(--e-2); }
.aviso-datos-texto { font-size: var(--t-13); color: var(--boleta-tinta-suave); max-width: 60ch; }
.aviso-datos .enlace-texto { align-self: flex-start; }
.responsable-editar { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.responsable-editar > legend { padding: 0; }
.responsable-editar .enlace-texto { align-self: flex-start; }
.condiciones-en-linea { gap: var(--e-3); }
.condiciones-lista { margin: 0; padding-left: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
.pendiente-nota { font-size: var(--t-13); font-weight: var(--peso-fuerte); color: var(--error); }
.tarea-sistema .tarea-texto { margin: 0; font-size: var(--t-17); font-weight: var(--peso-medio); }
.tarea-sistema .tarea-meta { margin: 0; }