/* Esto venía en el envoltorio del archivo único y se perdió al partirlo en varios.
   Sin la regla global [hidden], cualquier aviso con display:flex o grid se muestra
   igual aunque esté oculto. */
:root{color-scheme:dark}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  /* paleta neutra: grafito + un acento azul. Cambiando estas variables cambia todo. */
  --black:#0B0D12; --wine:#2F6FED; --wine-dark:#1B2B4D;
  --cream:#ECEFF4; --red:#E5484D; --terracota:#4F7DF0; --gold:#8AB4F8;
  --green:#2d8659; --green-bright:#46c281; --amber:#e8b25c;
  --muted:rgba(236,239,244,.55); --dim:rgba(236,239,244,.36);
  --line:rgba(236,239,244,.12); --line-strong:rgba(236,239,244,.25);
  --surface:rgba(236,239,244,.045); --surface2:rgba(236,239,244,.08);
  --r:3px;

  /* Semánticas: son las que cambian entre modo oscuro y claro.
     --cream y --wine siguen siendo colores literales de la marca y NO cambian:
     el texto sobre el botón rojo tiene que ser crema en los dos modos. */
  --texto:var(--cream);        /* texto principal */
  --fondo:var(--black);        /* fondo de la página */
  --fondo2:var(--black);       /* fondo hundido: inputs, buscadores */
  --sobre-color:var(--cream); /* texto encima de rojo, vino o verde: crema en los dos modos */
  --techo:linear-gradient(180deg,#151a24,#0B0D12);
  --sombra:0 18px 40px rgba(0,0,0,.7);
  --flyer-fondo:#12151B;
  --flyer-tinta:rgba(236,239,244,.22);
  --red-texto:#F06A6E;  /* el rojo de marca como TEXTO: sobre negro hay que aclararlo */
  --foco:rgba(47,111,237,.25);  /* el campo grande cuando está activo */
  --brillo:
    radial-gradient(ellipse 1000px 560px at 50% -120px, rgba(47,111,237,.22), transparent 70%),
    radial-gradient(ellipse 700px 420px at 88% 105%, rgba(27,43,77,.35), transparent 72%);
  --candado-fondo:linear-gradient(180deg, #11141A 0%, #000 100%);
  --sobre:#14171D;      /* modal, lista del buscador: flotan sobre la página */
  --sobre-oro:#0B1A33;  /* texto encima del dorado */
  --sobre-techo:#0F1217;/* cabecera pegada de las tablas */
  color-scheme:dark;
}

/* ---------- modo claro: sigue la configuración del equipo ---------- */
@media (prefers-color-scheme: light) {
  :root{
    --tinta:#171B23;
    --texto:var(--tinta);
    --fondo:#F3F4F6;
    --fondo2:#FFFFFF;
    /* El texto gris pide más fuerza sobre claro que sobre negro: con la misma
       transparencia que en modo oscuro, las etiquetas chicas se pierden. */
    --muted:rgba(23,27,35,.72);   --dim:rgba(23,27,35,.66);
    --line:rgba(23,27,35,.14);    --line-strong:rgba(23,27,35,.26);
    --surface:rgba(23,27,35,.035); --surface2:rgba(23,27,35,.07);
    --gold:#2457C5;               /* el dorado claro no se lee sobre crema */
    --green-bright:#166b41;
    --amber:#85560d;
    --techo:linear-gradient(180deg,#E9ECF1,#F3F4F6);
    --sombra:0 14px 34px rgba(23,27,35,.16);
    --flyer-fondo:#E2E5EA;
    --flyer-tinta:rgba(23,27,35,.26);
    --red-texto:var(--red);
    --foco:#FFFFFF;
    --brillo:
      radial-gradient(ellipse 1000px 520px at 50% -140px, rgba(47,111,237,.10), transparent 68%),
      radial-gradient(ellipse 700px 420px at 88% 106%, rgba(27,43,77,.07), transparent 70%);
    --candado-fondo:linear-gradient(180deg, #F8F9FB 0%, #E6E9EE 100%);
    --sobre:#FFFFFF;
    --sobre-oro:#F8F9FB;
    --sobre-techo:#ECEEF2;
    color-scheme:light;
  }
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--texto); background:var(--fondo);
  font:300 15px/1.6 "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:var(--brillo);
}
h1,h2,h3{margin:0; font-family:"Oswald",Impact,"Helvetica Neue",Arial,sans-serif; font-weight:500; text-wrap:balance}
.disp{text-transform:uppercase; letter-spacing:.09em; line-height:1.05; font-weight:600}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer; border:0; background:none}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:var(--r)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.lbl{font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:11px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--dim); font-weight:400}

/* ---------- shell ---------- */
.top{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; max-width:100%;
  padding:12px clamp(16px,4vw,34px); border-bottom:1px solid var(--line);
  background:var(--techo); position:sticky; top:0; z-index:40;
}
.mark{display:flex; flex-direction:column; gap:5px; margin-right:auto; min-width:0}
.mark span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mark img{height:34px; width:auto; align-self:flex-start; object-fit:contain; display:block; margin-bottom:1px}
.mark span{font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold); font-weight:400}
.evchip{
  display:flex; align-items:center; gap:10px; padding:7px 13px; border:1px solid var(--line-strong);
  border-radius:100px; background:var(--surface2); font-size:13px; min-width:0; max-width:100%;
}
.evchip #evLabel{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.evchip .dot{width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(138,180,248,.14)}
.roles{display:flex; gap:2px; padding:3px; background:var(--fondo2); border:1px solid var(--line); border-radius:100px}
.roles button{position:relative; padding:8px 16px; padding-right:calc(16px - .14em); border-radius:100px;
  font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:12px; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.roles button:hover{color:var(--texto)}
.roles button:not([aria-current="true"]):focus:not(:focus-visible){color:var(--muted)}
.roles button[aria-current="true"]{background:var(--gold); color:var(--sobre-oro); font-weight:500}

main{padding:clamp(18px,3.4vw,32px) clamp(16px,4vw,34px) 80px; max-width:1180px; margin:0 auto}
.view[hidden]{display:none}
.head{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.head h2{font-size:clamp(24px,3.6vw,34px)}
.head p{margin:0; color:var(--muted); font-size:14px; max-width:56ch}

/* ---------- primitives ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:10px; min-width:0}
.panel > .ph{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:15px 18px;
  border-bottom:1px solid var(--line); min-width:0}
.panel > .ph > *{min-width:0}
#promCount{margin-left:auto; white-space:nowrap}
.panel > .pb{padding:18px}
.grid{display:grid; gap:16px; min-width:0}
.grid > *{min-width:0; max-width:100%}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.btn{padding:13px 20px; border-radius:var(--r); background:var(--wine); color:var(--sobre-color);
  font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-weight:500; font-size:13px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none}
.btn:hover{background:#2560D6}
.btn.ghost{background:transparent; border:1px solid var(--line-strong); color:var(--texto);
  font-weight:400; letter-spacing:.14em}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold)}
.btn.sm{padding:7px 12px; font-size:11px; letter-spacing:.12em}
.btn.wa{background:#1f8a4c; color:#ECEFF4; text-decoration:none; display:inline-flex; align-items:center; justify-content:center}
.btn.wa:hover{background:#25a35a}
.btn[disabled]{opacity:.4; cursor:not-allowed}
.fld{display:flex; flex-direction:column; gap:6px}
.fld > input,.fld > select{
  padding:12px 13px; background:var(--fondo2); border:1px solid var(--line-strong);
  border-radius:var(--r); font-size:16px; width:100%;
}
.fld > input:focus,.fld > select:focus{border-color:var(--gold); outline:none}
.fld small{font-size:12px; color:var(--red-texto); min-height:0}
.sugerencia{margin-top:2px; padding:9px 12px; width:100%; text-align:left; font-size:13px;
  background:rgba(232,178,92,.12); border:1px solid rgba(232,178,92,.4); border-radius:var(--r); color:var(--amber)}
.sugerencia b{color:var(--texto); font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.sugerencia:hover{background:rgba(232,178,92,.2)}
.fld.bad > input{border-color:var(--red)}

.chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:100px;
  font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:10.5px; font-weight:400; letter-spacing:.13em;
  text-transform:uppercase; white-space:nowrap}
.chip.pend{background:var(--surface2); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line-strong)}
.chip.reg{background:rgba(232,178,92,.15); color:var(--amber)}
.chip.ing{background:rgba(45,134,89,.22); color:var(--green-bright)}
.chip.anu{background:rgba(229,72,77,.2); color:var(--red-texto)}

/* metric strip: not cards — one ruled band */
.metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface);
  min-width:0; max-width:100%}
.metrics > div{padding:16px 18px; border-right:1px solid var(--line); min-width:0; overflow-wrap:anywhere}
.metrics > div:last-child{border-right:0}
.metrics .n{font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-weight:500;
  font-size:36px; line-height:1.05; font-variant-numeric:tabular-nums; display:block; margin-top:2px}
.metrics .sub{font-size:12px; color:var(--dim); margin-top:3px}

.selbox{display:flex; align-items:center; gap:10px; width:100%; padding:12px 13px; text-align:left;
  background:var(--fondo2); border:1px solid var(--line-strong); border-radius:var(--r); font-size:16px}
.selbox:hover{border-color:var(--gold)}
.selbox span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.selbox small{font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold)}
.resumen{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline; font-size:13.5px; color:var(--muted)}
.resumen b{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:19px; color:var(--texto); font-weight:700}
.resumen .aviso{color:var(--amber)}
.prog{position:relative; height:26px; border-radius:100px; background:var(--surface2); overflow:hidden}
.prog i{position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,var(--terracota),var(--gold)); transition:width .2s}
.prog span{position:absolute; inset:0; display:grid; place-items:center; font-family:"Oswald","Helvetica Neue",Arial,sans-serif;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--texto)}
.destlist{overflow-y:auto; flex:1; min-height:160px}
.destlist label{display:flex; gap:11px; align-items:center; padding:9px 18px; cursor:pointer;
  border-bottom:1px solid var(--line); font-size:14px}
.destlist label:hover{background:var(--surface2)}
.destlist input{accent-color:var(--gold); width:17px; height:17px; flex:none}
.destlist small{display:block; font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--dim)}
.destlist .vacio{padding:26px; text-align:center; color:var(--muted); font-size:13px}
.picker{position:relative}
.picker > input{padding:12px 13px; background:var(--fondo2); border:1px solid var(--line-strong);
  border-radius:var(--r); font-size:16px; width:100%; color:var(--texto)}
.picker > input:focus{border-color:var(--gold); outline:none}
.picklist{position:absolute; top:100%; left:0; right:0; margin-top:4px; z-index:30;
  background:var(--sobre); border:1px solid var(--line-strong); border-radius:var(--r);
  max-height:340px; overflow-y:auto; box-shadow:var(--sombra)}
.picklist button{display:block; width:100%; text-align:left; padding:9px 13px; font-size:14px;
  color:var(--texto); border-bottom:1px solid var(--line)}
.picklist button:last-child{border-bottom:0}
.picklist button:hover,.picklist button.sel{background:rgba(138,180,248,.16); color:var(--gold)}
.picklist button small{display:block; font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--dim)}
.picklist .vacio{padding:14px; font-size:13px; color:var(--muted); text-align:center}
.buscar{flex:1 1 240px; min-width:0; padding:9px 14px; background:var(--fondo2); border:1px solid var(--line-strong);
  border-radius:100px; font-size:16px; color:var(--texto)}
.buscar:focus{border-color:var(--gold); outline:none}
.buscar::placeholder{color:var(--dim)}
/* el mismo campo pero para elegir: sin la flecha fea del sistema */
select.buscar{appearance:none; cursor:pointer; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) 47%, calc(100% - 13px) 47%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
select.buscar option{background:var(--sobre); color:var(--texto)}
/* lo que solo tiene sentido en el teléfono, donde falta ancho */
.solomov{display:none}
.tbl-wrap{overflow-x:auto; max-height:560px; overflow-y:auto}
.tbl-wrap thead th{position:sticky; top:0; background:var(--sobre-techo); z-index:2}
table{border-collapse:collapse; width:100%; font-size:14px; min-width:560px}
th{text-align:left; padding:10px 14px; font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:11px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--dim); font-weight:400; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; font-weight:400}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface2)}
td.num{text-align:right; font-variant-numeric:tabular-nums}

.bar{height:5px; border-radius:100px; background:var(--line); overflow:hidden; min-width:56px}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--terracota),var(--gold)); border-radius:100px}

.note{font-size:13px; color:var(--muted); display:flex; gap:10px; align-items:flex-start;
  padding:12px 15px; border-left:2px solid var(--gold); background:rgba(138,180,248,.09); border-radius:0 var(--r) var(--r) 0}
.note.plain{border-left-color:var(--line-strong); background:var(--surface2); color:var(--muted)}

/* ---------- lifecycle steps (real sequence → numbered is meaningful) ---------- */
.flow{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:10px; overflow:hidden}
.flow > div{background:var(--surface); padding:15px 17px; display:grid; gap:5px; min-width:0; overflow-wrap:anywhere}
.flow .step{font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:11px; color:var(--gold); letter-spacing:.24em; font-weight:400}
.flow strong{font-size:14px; font-weight:600}
.flow p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.45}

/* ---------- QR ---------- */
.qr{background:#fff; border-radius:6px; padding:8px; display:block; line-height:0}
.qr svg{display:block; width:100%; height:auto}
.codecard{display:grid; grid-template-columns:78px minmax(0,1fr); gap:13px; padding:12px;
  border:1px solid var(--line); border-radius:8px; background:var(--surface2); align-items:start}
.codecard .code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; font-size:17px;
  letter-spacing:.07em; color:var(--texto); background:none; padding:0; text-align:left; cursor:copy}
.codecard .code:hover{color:var(--gold)}
.codecard .who{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.codecard > div{min-width:0}
.codecard .qr{padding:5px}
.codes{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:10px}

/* La tabla de códigos del promotor: invitado · código · ingreso.
   El que acaba de entrar queda arriba; los que faltan repartir, al final,
   con su botón de mandar por WhatsApp. */
#tCods{min-width:0}
#tCods td{padding:11px 12px}
#tCods th:first-child,#tCods td:first-child{padding-left:4px}
#tCods th:last-child,#tCods td:last-child{padding-right:4px; text-align:right; white-space:nowrap}
#tCods .nom{max-width:0; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#tCods .libre{color:var(--gold)}
#tCods .cod{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700; font-size:14.5px; letter-spacing:.04em; color:var(--texto);
  background:none; border:0; padding:3px 0; cursor:pointer; white-space:nowrap}
#tCods .cod:hover,#tCods .cod:focus-visible{color:var(--gold)}
#tCods .marca{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px; color:var(--dim); white-space:nowrap}
#tCods .marca.entro{color:var(--green-bright); font-weight:700}
#tCods tr.usado .cod{color:var(--muted)}
@media(max-width:430px){
  #tCods td{padding:10px 8px; font-size:13px}
  #tCods .cod{font-size:13.5px}
  #tCods .marca{font-size:12px}
  #tCods .btn.sm{padding:6px 10px; font-size:10.5px; letter-spacing:.1em}
}
}
.linkurl{margin:0; font-size:clamp(19px,2.8vw,25px); font-weight:700; color:var(--gold);
  letter-spacing:.01em; word-break:break-all}

/* ---------- guest ---------- */
.guest{max-width:430px; margin:0 auto; display:grid; gap:18px}
.ticket{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.ticket .tt{padding:20px; background:linear-gradient(135deg,var(--wine),var(--wine-dark));
  border-bottom:1px dashed rgba(236,239,244,.3)}
.ticket .tt img.logo{height:34px; width:auto; align-self:flex-start; object-fit:contain; display:block; margin-bottom:11px; opacity:.95}
.ticket .tt h3{font-size:23px; font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.ticket .tt p{margin:6px 0 0; font-size:13px; color:var(--muted)}
.ticket .tb{padding:18px; display:grid; gap:14px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13.5px}
.kv dt{color:var(--dim)}
.kv dd{margin:0; font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px}

/* ---------- islas que son oscuras en los dos modos ----------
   La cámara es negra, el encabezado del pase es vino y la etiqueta sobre el
   flyer es negra al 72%. Adentro de ellas las variables vuelven a sus valores
   oscuros; si no, en modo claro el texto se volvería tinta sobre negro. */
.scanner, .ticket .tt, .evtag{
  --texto:var(--cream);
  --muted:rgba(236,239,244,.62);   --dim:rgba(236,239,244,.42);
  --line:rgba(236,239,244,.14);    --line-strong:rgba(236,239,244,.25);
  --surface:rgba(236,239,244,.05); --surface2:rgba(236,239,244,.09);
  --gold:#8AB4F8;  --green-bright:#46c281;  --amber:#e8b25c;
  color:var(--cream);
  color-scheme:dark;
}
/* los campos del escáner siguen hundidos en negro, no en blanco */
.scanner{--fondo:var(--black); --fondo2:rgba(0,0,0,.55); --foco:rgba(47,111,237,.35)}

/* ---------- door ---------- */
.door{display:grid; gap:16px; grid-template-columns:minmax(0,1fr) minmax(0,340px)}
@media(max-width:860px){.door{grid-template-columns:1fr}.metrics > div{border-right:0;border-bottom:1px solid var(--line)}}
.scanner{position:relative; background:#000; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; aspect-ratio:4/3; min-height:340px}
@media(max-width:860px){.scanner{aspect-ratio:3/4}}
#cam{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:.3s}
#cam.on{opacity:1}
.mira{position:absolute; inset:0; display:none; place-items:center; pointer-events:none}
.mira.on{display:grid}
.mira i{position:absolute; width:34px; height:34px; border:3px solid var(--gold); border-radius:3px}
.mira i:nth-child(1){top:16%; left:12%; border-right:0; border-bottom:0}
.mira i:nth-child(2){top:16%; right:12%; border-left:0; border-bottom:0}
.mira i:nth-child(3){bottom:16%; left:12%; border-right:0; border-top:0}
.mira i:nth-child(4){bottom:16%; right:12%; border-left:0; border-top:0}
.camidle{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:14px;
  padding:24px; text-align:center; background:radial-gradient(ellipse at center,rgba(47,111,237,.35),#000 72%)}
.camidle[hidden]{display:none!important}
.camidle .ayuda{margin:0; font-size:12.5px; color:var(--dim); max-width:34ch}
.scanbar{position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; gap:8px; align-items:center;
  flex-wrap:wrap; padding:11px 13px; background:linear-gradient(0deg,rgba(0,0,0,.88),transparent)}
.bigin{padding:16px; font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; font-size:26px; letter-spacing:.08em;
  text-align:center; text-transform:uppercase; background:var(--fondo2);
  border:2px solid var(--line-strong); border-radius:8px; width:100%}
.bigin:focus{border-color:var(--gold); outline:none; background:var(--foco)}
.bigin.busca{font-size:19px; letter-spacing:.02em; text-transform:none; text-align:left}
.busqfila{display:flex; gap:11px; align-items:center; width:100%; padding:11px 15px; text-align:left;
  border-bottom:1px solid var(--line); font-size:14px; color:var(--texto)}
.busqfila:hover,.busqfila:focus-visible{background:var(--surface2)}
.busqfila > div{flex:1; min-width:0}
.busqfila small{display:block; font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--dim)}
.busqpista{padding:20px 16px; text-align:center; font-size:13px; color:var(--muted)}
.verdictwrap{position:absolute; inset:0; display:none; z-index:6}
.verdictwrap.on{display:block; animation:pop .18s ease-out}
@keyframes pop{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:none}}
.verdict{position:absolute; inset:0; display:grid; align-content:center; gap:12px;
  padding:24px 22px 68px; text-align:center; backdrop-filter:blur(7px); overflow:auto}
.verdict h3{font-size:clamp(38px,8vw,62px); font-weight:700; text-transform:uppercase; letter-spacing:.12em}
.verdict.ok{background:linear-gradient(180deg,rgba(45,134,89,.97),rgba(12,40,28,.98))}
.verdict.ok h3{color:#B9F5D6}
.verdict.no{background:linear-gradient(180deg,rgba(229,72,77,.97),rgba(58,12,16,.98))}
.verdict.no h3{color:#FFD9DA}
.verdict .cerrar{position:absolute; top:10px; right:12px; font-size:12px; color:rgba(236,239,244,.75);
  letter-spacing:.14em; text-transform:uppercase; font-family:"Oswald","Helvetica Neue",Arial,sans-serif}
.verdict .deshacer{position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  padding:9px 16px; border:1px solid rgba(255,255,255,.45); border-radius:100px; color:#fff;
  font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}
.verdict .deshacer:hover{background:rgba(255,255,255,.14)}
.verdict .why{font-size:17px; font-weight:600}

/* Los dos botones de la puerta. Grandes y separados: se aprietan con el pulgar,
   de noche, con el celular en una mano y la gente encima. Un toque equivocado
   deja afuera a alguien que sí venía en la lista. */
.enlista{display:inline-block; margin:0 auto 10px; padding:4px 12px; border-radius:100px;
  background:rgba(236,239,244,.16); font-family:"Oswald","Helvetica Neue",Arial,sans-serif;
  font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:#ECEFF4}
.verdict h3.quien{font-size:clamp(26px,6.4vw,38px); letter-spacing:.02em; line-height:1.1;
  text-transform:none; color:#fff; overflow-wrap:anywhere}
/* el puntito de "en vivo": late mientras la pantalla se está actualizando sola */
.acceso-fila.vencido{opacity:.55}
.acceso-fila.vencido b{text-decoration:line-through}

.vivo{display:inline-flex; align-items:center; gap:6px; font-family:"Oswald","Helvetica Neue",Arial,sans-serif;
  font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--green-bright)}
.vivo i{width:7px; height:7px; border-radius:50%; background:var(--green-bright); flex:none;
  animation:latido 2s ease-in-out infinite}
.vivo.dormido{color:var(--dim)} .vivo.dormido i{background:var(--dim); animation:none}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){ .vivo i{animation:none} }

.decide-botones{display:flex; gap:12px; margin-top:16px; padding:0 2px}
.dec{flex:1; min-height:62px; border-radius:8px; font-family:"Oswald","Helvetica Neue",Arial,sans-serif;
  font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
  border:2px solid transparent; transition:transform .06s ease}
.dec:active{transform:scale(.97)}
.dec[disabled]{opacity:.45}
.dec.si{background:#ECEFF4; color:#0F2A1C}
.dec.no{background:transparent; border-color:rgba(236,239,244,.55); color:#ECEFF4}
.verdict.decide{padding-bottom:24px}
@media(max-width:400px){ .dec{font-size:13.5px; letter-spacing:.1em} }
.verdict .meta{font-size:14px; color:rgba(236,239,244,.85)}
.rules{display:grid; gap:7px; text-align:left; max-width:330px; margin:2px auto 0; font-size:13px}
.rules div{display:flex; gap:9px; align-items:center; color:rgba(236,239,244,.8)}
.rules b{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; width:16px; text-align:center; flex:none}
.rules .y b{color:#B9F5D6} .rules .n b{color:#FFD9DA} .rules .n{color:#fff; font-weight:600}
.log{display:grid; gap:0; font-size:13px}
.log > div{display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line)}
.log > div:last-child{border-bottom:0}
.log .t{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--gold); font-size:12px; flex:none}
.log .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sw{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); cursor:pointer}
.sw input{accent-color:var(--wine); width:16px; height:16px}
/* VIP: lo marca la puerta (brazalete, zona) */
.tag-vip{display:inline-block; margin-left:6px; padding:1px 6px; border-radius:3px; background:var(--vip); color:#1d1404;
  font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:10.5px; letter-spacing:.14em; font-weight:600; vertical-align:middle}
.vipband{display:block; margin:0 0 12px; padding:12px 14px; border-radius:6px; background:var(--vip); color:#1d1404;
  font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:22px; font-weight:600; letter-spacing:.1em; text-align:center; text-transform:uppercase}
.vipband small{display:block; font-size:13px; letter-spacing:.16em; margin-top:2px}
.alerta{position:absolute; left:0; right:0; top:0; padding:7px 12px; text-align:center;
  background:var(--red); color:#fff; font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; z-index:4; pointer-events:none}
/* el aviso de prueba lleva un botón para salir: sin esto el pointer-events:none
   de arriba se lo come y no se puede tocar */
#avisoPrueba{display:flex; gap:10px; align-items:center; justify-content:center; pointer-events:auto}
#avisoPrueba .btn{padding:3px 10px; color:#fff; border-color:rgba(255,255,255,.55)}
/* "ya cerró" y "todavía no abren" no son errores: avisan, no alarman */
.alerta.suave{background:var(--amber); color:#1a0f02; letter-spacing:.08em; text-transform:none;
  font-size:12px; padding:8px 14px}

/* ---------- la puerta fuera de horario ----------
   No hay evento corriendo: no hay lista, no hay cámara. Solo cuál es la
   próxima fecha y a qué hora se arma sola. */
.fuera{display:grid; justify-items:center; gap:14px; text-align:center; min-width:0;
  padding:46px 22px 40px; border:1px solid var(--line); border-radius:12px;
  background:var(--candado-fondo)}
.fuera .reloj{font-size:32px; line-height:1; color:var(--gold)}
.fuera h3{font-size:22px}
.fuera > p{margin:0; max-width:42ch; font-size:14px; color:var(--muted); line-height:1.6}
.fuera-ev{display:grid; gap:5px; justify-items:center; min-width:0; padding:15px 24px;
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface)}
.fuera-ev b{font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:19px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.15}
.fuera-ev .mono{font-size:13px; color:var(--gold)}
.fuera .chico{margin:0; max-width:38ch; font-size:12.5px; color:var(--dim); line-height:1.55}

/* ---------- portal: la próxima fecha cuando todavía no corre ---------- */
.prox{display:flex; flex-wrap:wrap; overflow:hidden}
.prox-flyer{flex:0 0 214px; aspect-ratio:16/10; min-width:0; background:var(--flyer-fondo);
  display:grid; place-items:center; border-right:1px solid var(--line)}
.prox-flyer{position:relative; overflow:hidden}
.prox-flyer img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.prox-body{flex:1 1 250px; min-width:0; padding:15px 18px; display:grid; gap:7px; align-content:center}
.prox-body h3{margin:0; font-size:20px}
.prox-body .cuando{margin:0; font-size:13.5px; color:var(--gold)}
.prox-body .donde{margin:0; font-size:13px; color:var(--muted)}
/* balance: si no, la línea corta deja un "ES" solo en la segunda fila */
.prox-aviso{display:flex; align-items:flex-start; gap:8px; margin:0; line-height:1.5; text-wrap:balance;
  font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--amber)}
@media(max-width:560px){
  /* en el teléfono el flyer pasa arriba, pero con tope de alto: abajo están
     los códigos, que es a lo que el promotor entra de verdad */
  .prox-flyer{flex:1 1 100%; aspect-ratio:16/10; height:auto; border-right:0;
    border-bottom:1px solid var(--line)}
}

/* ---------- modal ---------- */
.scrim{position:fixed; inset:0; background:#07060Ccc; backdrop-filter:blur(3px); display:grid;
  place-items:center; padding:20px; z-index:60}
.scrim[hidden]{display:none}
.modal{background:var(--sobre); border:1px solid var(--line-strong); border-radius:12px; max-width:560px;
  width:100%; max-height:86vh; overflow:auto}
.mail{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:16px; font-size:13.5px; line-height:1.7}
.mail .h{border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px; display:grid; gap:3px;
  font-size:12.5px; color:var(--muted)}
.mail .h b{color:var(--texto); font-weight:500}
#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px); opacity:0;
  background:var(--texto); color:var(--fondo); padding:11px 20px; border-radius:100px;
  box-shadow:var(--sombra);
  font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; pointer-events:none; transition:.22s; z-index:80}
#toast.on{opacity:1; transform:translateX(-50%)}

/* ================= TELÉFONO ================= */
@media (max-width:760px){
  /* cabecera compacta */
  .top{padding:9px 14px; gap:9px}
  .mark img{height:26px}
  .mark span{font-size:9px; letter-spacing:.2em}
  .evchip{font-size:12px; padding:6px 11px; flex:1 1 100%; order:3}
  .buscar{order:3}

  /* el selector de vista baja al pie, como app */
  .roles{position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid;
    grid-template-columns:repeat(4,1fr); gap:0; padding:0; border:0; border-radius:0;
    border-top:1px solid var(--line-strong); background:var(--fondo);
    padding-bottom:env(safe-area-inset-bottom)}
  .roles button{border-radius:0; padding:15px 3px; padding-right:calc(3px - .05em);
    font-size:9.5px; letter-spacing:.05em; color:var(--muted)}
  .roles button[aria-current="true"]{background:transparent; color:var(--gold); font-weight:500}
  .roles button[aria-current="true"]::before{content:""; position:absolute; top:0; left:50%;
    width:26px; height:2px; margin-left:-13px; background:var(--gold); border-radius:0 0 3px 3px}
  main{padding:18px 14px calc(96px + env(safe-area-inset-bottom))}
  .row{gap:8px}
  .resumen{font-size:13px; gap:6px 12px}
  #toast{bottom:calc(80px + env(safe-area-inset-bottom))}

  .head{margin-bottom:16px; gap:8px}
  .head h2{font-size:24px}
  .head p{display:none}                 /* texto explicativo: sobra en pantalla chica */
  #v-puerta .head{display:none}          /* la cámara manda; la barra de abajo ya dice dónde está */
  .scanbar{gap:6px; padding:9px}
  .scanbar .btn.sm{padding:9px 11px; font-size:10.5px}
  .sw{font-size:12px}
  .head > .fld,.head > .picker{margin-left:0!important; width:100%; min-width:0!important}

  /* métricas de a dos */
  .metrics{grid-template-columns:1fr 1fr}
  .metrics > div{padding:13px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
  .metrics > div:nth-child(2n){border-right:0}
  .metrics .n{font-size:29px}
  #puertaKpis{grid-template-columns:1fr 1fr}

  /* tablas: fuera las columnas de relleno, nada de scroll lateral */
  table{min-width:0; font-size:13.5px}
  .tbl-wrap{max-height:none; overflow-x:auto; -webkit-overflow-scrolling:touch}
  /* promotores: la tabla pasa a tarjetas, la fila entera abre el portal */
  #tProm thead{display:none}
  #tProm,#tProm tbody{display:block}
  #tProm tbody tr{display:grid; grid-template-columns:minmax(0,1fr) auto auto auto;
    gap:0 14px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line); cursor:pointer}
  #tProm tbody tr:active{background:var(--surface2)}
  #tProm td{display:block; border:0; padding:0; text-align:center}
  #tProm td:first-child{text-align:left; min-width:0}
  #tProm td:first-child b{color:var(--gold)}
  #tProm td:nth-child(2),#tProm td:nth-child(6),#tProm td:nth-child(7){display:none}
  #tProm td.num::before{content:attr(data-l); display:block; font-family:"Oswald","Helvetica Neue",Arial,sans-serif;
    font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:1px}
  #tProm td.num{font-size:16px; font-weight:700}
  /* el ranking de la noche: lo va a mirar en el celular, parado en la puerta.
     Misma tarjeta, con los tres números arriba y el botón abajo, ancho. */
  #tRank thead{display:none}
  #tRank,#tRank tbody{display:block}
  #tRank tbody tr{display:grid; grid-template-columns:20px repeat(3,minmax(0,1fr));
    gap:9px 10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line)}
  #tRank td{display:block; border:0; padding:0; text-align:center}
  #tRank td:nth-child(1){grid-column:1; grid-row:1; text-align:left; font-size:12px}
  #tRank td:nth-child(1)::before{content:none}   /* el puesto no lleva rótulo */
  #tRank td:nth-child(2){grid-column:2/5; grid-row:1; text-align:left; min-width:0}
  #tRank td:nth-child(3){grid-column:2; grid-row:2}
  #tRank td:nth-child(4){grid-column:3; grid-row:2}
  #tRank td:nth-child(5){grid-column:4; grid-row:2}
  #tRank td:nth-child(6){display:none}           /* la hora va en el subtítulo */
  #tRank td:nth-child(7){grid-column:1/5; grid-row:3}
  #tRank td:nth-child(7) .btn{width:100%; justify-content:center}
  .solomov{display:inline}
  #tRank td.num::before{content:attr(data-l); display:block; font-family:"Oswald","Helvetica Neue",Arial,sans-serif;
    font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:1px}
  #tRank td.num{font-size:16px; font-weight:700}
  /* lotes: mismo trato de tarjeta */
  #tLotes thead{display:none}
  #tLotes,#tLotes tbody{display:block}
  #tLotes tbody tr{display:grid; grid-template-columns:minmax(0,1fr); gap:1px;
    padding:12px 14px; border-bottom:1px solid var(--line)}
  #tLotes td{display:block; border:0; padding:0; text-align:left}
  #tLotes td:nth-child(1){grid-column:1; grid-row:1; font-size:11px; color:var(--dim)}
  #tLotes td:nth-child(2){grid-column:1; grid-row:2; font-size:14.5px}
  #tLotes td:nth-child(3){grid-column:1; grid-row:3; font-size:12.5px; color:var(--muted)}
  #tLotes td:nth-child(3)::after{content:" códigos"; font-family:"Poppins",sans-serif}
  #tLotes td:nth-child(4){display:none}
  #tLotes td:nth-child(5){grid-column:1; grid-row:4; text-align:left; margin-top:9px}
  #tLotes td:nth-child(5) .row{justify-content:stretch; flex-wrap:wrap!important}
  #tLotes td:nth-child(5) .btn{flex:1 1 auto; justify-content:center; text-align:center}
  .panel > .ph{padding:13px 14px}
  .panel > .pb{padding:14px}
  .buscar{flex:1 1 100%; order:3}
  /* en el teléfono el botón se va abajo, después de los campos */
  #btnRkCopiar{order:4; flex:1 1 100%}

  /* dedos, no punteros */
  .btn{padding:14px 18px}
  .btn.sm{padding:10px 13px; font-size:11px}
  .row > .btn{flex:1 1 auto}
  #btnLote{width:100%}
  .flow{grid-template-columns:1fr}

  /* tarjetas de código a una columna */
  .codes{grid-template-columns:1fr}
  .codecard{grid-template-columns:88px minmax(0,1fr)}

  /* puerta: la cámara ocupa lo que pueda */
  .scanner{aspect-ratio:auto; height:min(62vh,540px); min-height:300px}
  .scanbar{padding:10px}
  .verdict h3{font-size:clamp(34px,11vw,52px)}
  .verdict{padding:18px 14px 66px}
  .rules{font-size:12.5px}

  /* modales como hoja inferior */
  .scrim{padding:0; place-items:end stretch}
  .modal{max-width:100%!important; width:100%; max-height:88dvh; border-radius:14px 14px 0 0;
    border-bottom:0; border-left:0; border-right:0}
  .modal > div:last-child{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .destlist label{padding:12px 16px}
  .bigin{font-size:24px}

  /* ticket del invitado a ancho completo */
  .guest{max-width:100%}
}

@media (max-width:380px){
  .roles button{font-size:8.5px; letter-spacing:.02em; padding:14px 2px; padding-right:calc(2px - .02em)}
  .metrics{grid-template-columns:1fr}
  .metrics > div{border-right:0}
  .codecard{grid-template-columns:72px minmax(0,1fr)}
}

/* pantallas táctiles: nada de estados hover pegados */
@media (hover:none){
  .btn.ghost:hover{border-color:var(--line-strong); color:var(--texto)}
  tbody tr:hover{background:transparent}
}


/* ---- cartelera de eventos ---- */
.cartelera{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:13px}
@media(min-width:620px){ .cartelera{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))} }
.evcard{min-width:0; padding:0; margin:0; text-align:left; font:inherit; color:inherit; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .16s ease, background .16s ease}
.evcard:hover{border-color:var(--line-strong); background:var(--surface2)}
.evcard.on{border-color:var(--wine); background:rgba(47,111,237,.10)}
.evflyer{position:relative; aspect-ratio:16/10; min-width:0; background:var(--flyer-fondo); overflow:hidden; display:grid; place-items:center}
.evflyer img{width:100%; height:100%; object-fit:cover; display:block}
.sinflyer{display:grid; gap:3px; place-items:center; color:var(--dim)}
.sinflyer span{font-family:Oswald,sans-serif; font-size:26px; font-weight:600; letter-spacing:.1em; color:var(--flyer-tinta)}
.sinflyer em{font-family:Oswald,sans-serif; font-style:normal; font-size:9px; letter-spacing:.18em; text-transform:uppercase}
/* cuando la tarjeta lleva la faja de "evento activo", el cartel de sin flyer
   se le montaba encima: se sube lo que mide la faja */
.evflyer:has(.evon) .sinflyer{transform:translateY(-13px)}
.evtag{position:absolute; top:7px; left:7px; font-family:Oswald,sans-serif; font-size:9.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; padding:3px 7px; border-radius:2px;
  background:rgba(0,0,0,.72); backdrop-filter:none}
.evon{position:absolute; bottom:7px; left:7px; right:7px; font-family:Oswald,sans-serif; font-size:9px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-align:center; padding:3px 6px; border-radius:2px;
  background:var(--wine); color:var(--sobre-color)}
.cartelera.borrando .evcard{border-color:rgba(229,72,77,.45)}
.cartelera.borrando .evcard:hover{border-color:var(--red); background:rgba(229,72,77,.14)}
.cartelera.borrando .evflyer{opacity:.5}
.cartelera.borrando .evcard.on{box-shadow:none}
.evmeta{padding:10px 11px 12px; display:grid; gap:4px; min-width:0}
.evmeta strong{font-size:13.5px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.evmeta .f{font-size:11.5px; color:var(--gold); letter-spacing:.04em}
.evmeta .n{font-size:11px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.redstat{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; margin:0 0 14px;
  padding:9px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.redstat .pt{flex:none; width:8px; height:8px; border-radius:50%; background:var(--green-bright);
  box-shadow:0 0 0 3px rgba(70,194,129,.16)}
.redstat.off .pt{background:var(--amber); box-shadow:0 0 0 3px rgba(232,178,92,.16)}
.redstat .tx{flex:1 1 200px; min-width:0; font-size:12.5px; color:var(--muted)}
.redstat.off .tx{color:var(--amber)}
.redstat .tx b{color:var(--texto)}
.redstat.off .tx b{color:var(--amber)}
.redstat button{flex:none}

.candado{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:24px;
  background:var(--candado-fondo)}
.candado-caja{width:100%; max-width:330px; display:grid; gap:13px; justify-items:center; text-align:center; min-width:0}
.candado-caja img{width:96px; height:auto; object-fit:contain; margin-bottom:4px}
.candado-caja h3{font-size:19px}
.candado-caja p{margin:0; font-size:13px; color:var(--muted); line-height:1.55}
.candado-caja .bigin{width:100%; text-align:center; letter-spacing:.34em}
.candado-caja small{min-height:16px; font-size:12.5px; color:var(--red-texto)}
.candado-caja .btn.ghost{border:0; color:var(--dim)}

.acceso-fila{display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0;
  padding:11px 0; border-bottom:1px solid var(--line)}
.acceso-fila:last-child{border-bottom:0}
.acceso-fila .qn{flex:1 1 130px; min-width:0}
.acceso-fila .qn b{display:block; font-size:14px}
.acceso-fila .qn span{font-size:12px; color:var(--dim)}
.acceso-fila input{flex:0 0 118px; width:118px}

.legal{margin:0; text-align:center; font-size:11.5px; line-height:1.65; color:var(--dim)}
.legal b{color:var(--muted); font-weight:600}
.acepta{display:flex; gap:10px; align-items:flex-start; cursor:pointer; min-width:0;
  padding:11px 13px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
.acepta input{flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--wine)}
.acepta span{flex:1 1 auto; min-width:0; font-size:13px; line-height:1.5; color:var(--muted)}
.acepta:has(input:checked){border-color:var(--gold)}
.acepta:has(input:checked) span{color:var(--texto)}

.volver{display:flex; align-items:center; gap:12px; flex-wrap:wrap; min-width:0}
.volver .lbl{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.btn.ghost.peligro{color:var(--red-texto); border-color:rgba(229,72,77,.4)}
.btn.ghost.peligro:hover{color:var(--texto); border-color:var(--red); background:rgba(229,72,77,.16)}
.btn.peligro-lleno{background:var(--red); border-color:var(--red); color:var(--sobre-color)}

/* ---- detalle del evento activo ---- */
.evdet{display:flex; flex-wrap:wrap; overflow:hidden}
.evdet-flyer{flex:0 0 258px; min-width:0; aspect-ratio:16/10; background:var(--flyer-fondo); overflow:hidden;
  display:grid; place-items:center; border-right:1px solid var(--line)}
.evdet-flyer img{width:100%; height:100%; object-fit:cover; display:block}
.evdet-body{flex:1 1 290px; min-width:0; padding:16px 18px 18px; display:grid; gap:13px; align-content:start}
.evdet-top{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap}
.evdet-body h3{font-size:21px; margin:4px 0 0; line-height:1.08; min-width:0}
.evdet-fecha{margin:6px 0 0; font-size:12.5px; color:var(--gold); letter-spacing:.03em}
.evdet-aforo{display:grid; gap:6px}
@media(max-width:619px){
  .evdet-flyer{flex:1 1 100%; border-right:0; border-bottom:1px solid var(--line)}
  .evdet-body{padding:14px}
  .evdet-body h3{font-size:18px}
}
.evprev{flex:0 0 104px; aspect-ratio:16/10; min-width:0; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--flyer-fondo); display:grid; place-items:center}
.evprev img{width:100%; height:100%; object-fit:cover; display:block}

.adjs{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px}
.adjs .lbl{flex:1 1 100%}
.adj{display:flex; flex-direction:column; gap:1px; min-width:0; cursor:pointer;
  border:1px solid var(--line-strong); border-radius:var(--r); padding:8px 11px;
  background:var(--surface); transition:border-color .15s ease, background .15s ease}
.adj:hover{border-color:var(--gold); background:var(--surface2)}
.adj b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; font-weight:600;
  color:var(--texto); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.adj em{font-style:normal; font-size:11px; color:var(--dim)}

@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
/* ---- pestañas de producción ---- */
.tabs{display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); min-width:0; overflow:auto}
/* min-width:max-content y no 0: con cinco pestañas en un teléfono se
   encogían hasta encimarse las palabras. Así nunca bajan de su texto y la
   fila se desliza de costado, que para eso el contenedor lleva overflow. */
.tabs button{flex:1 1 auto; min-width:max-content; padding:9px 14px; border:0; border-radius:2px; cursor:pointer;
  background:none; color:var(--muted); white-space:nowrap;
  font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:12px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; transition:background .15s ease, color .15s ease}
.tabs button:hover{color:var(--texto)}
.tabs button[aria-current="true"]{background:var(--texto); color:var(--fondo); font-weight:500}

/* ---- campo de clave: letras y números, con ojito ---- */
.clavecampo{position:relative; width:100%; min-width:0}
.clavecampo .bigin{width:100%; padding-right:74px}
.verclave{position:absolute; top:50%; right:8px; transform:translateY(-50%);
  border:0; background:none; cursor:pointer; padding:8px 10px;
  font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-size:11px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.candado-caja .bigin{letter-spacing:.08em; font-size:20px}


/* =====================================================================
   Piezas nuevas: nombre del local en vez de logo, sesión, mapa de boxes
   ===================================================================== */
:root{--vip:#E8B25C}
@media (prefers-color-scheme: light){ :root{--vip:#C98A1B} }

/* el nombre del local como marca, en texto: sin logos */
.wm{font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-weight:600; font-size:21px; line-height:1.05;
  letter-spacing:.14em; text-transform:uppercase; color:var(--texto); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:100%}
.mark span.wm{display:block; font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-weight:600; font-size:21px;
  letter-spacing:.14em; color:var(--texto); line-height:1.05}
.wm.grande{font-size:26px; margin-bottom:4px; white-space:normal; text-align:center}
.marca .wm{font-size:24px; text-align:center; white-space:normal}
.ticket .tt .wm{font-size:13px; letter-spacing:.24em; color:var(--muted); margin-bottom:10px; display:block}
@media (max-width:760px){ .mark span.wm{font-size:17px} }

/* selector de local y quién está adentro */
.localsel{flex:0 1 220px; padding:8px 34px 8px 14px; font-size:14px}
.yo{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); min-width:0}
.yo span{max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:760px){ .localsel{flex:1 1 100%; order:2} .yo{margin-left:auto} }
.badge{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px;
  border-radius:9px; background:var(--amber); color:#1a0f02; font-size:10.5px; font-weight:600; letter-spacing:0;
  font-family:"JetBrains Mono",ui-monospace,monospace; vertical-align:1px}
.tabs button[aria-current="true"] .badge{background:var(--amber)}

/* campos que no son hijos directos de .fld */
.clavecampo > input, .fld .row > input{padding:12px 13px; background:var(--fondo2); border:1px solid var(--line-strong);
  border-radius:var(--r); font-size:16px; width:100%; color:var(--texto)}
.clavecampo > input:focus, .fld .row > input:focus{border-color:var(--gold); outline:none}
.fld > input:disabled{opacity:.6}
.candado-caja .fld{width:100%}
.candado-caja .fld small{min-height:0}
.candado-caja > small{min-height:16px}

/* ---------- mapa de boxes ---------- */
.mapa{position:relative; width:100%; aspect-ratio:16/10; border:1px solid var(--line-strong); border-radius:10px;
  overflow:hidden; container-type:inline-size; touch-action:pan-x pan-y; user-select:none; -webkit-user-select:none;
  background-color:var(--surface);
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:5% 8%}
.mapa.editable .bx{touch-action:none}
.mapa.con-plano{background-size:100% 100%; background-repeat:no-repeat; background-position:center}
.mapa.con-plano::before{content:""; position:absolute; inset:0; background:rgba(11,13,18,.35); pointer-events:none}
.mapa-vacio{position:absolute; inset:0; display:grid; place-items:center; margin:0; padding:20px; text-align:center;
  font-size:13px; color:var(--muted)}
.bx{position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  padding:2px; border-radius:6px; text-align:center; overflow:hidden; cursor:pointer; line-height:1.05;
  background:rgba(236,239,244,.10); border:1.5px solid rgba(236,239,244,.45); color:var(--texto);
  backdrop-filter:blur(2px); transition:transform .08s ease, box-shadow .12s ease}
.bx.redondo{border-radius:50%}
.bx b{font-family:"Oswald","Helvetica Neue",Arial,sans-serif; font-weight:600; letter-spacing:.04em;
  font-size:clamp(9px, 1.9cqw, 16px); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bx small{font-size:clamp(7px, 1.3cqw, 11.5px); color:var(--muted); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bx:hover, .bx:focus-visible{box-shadow:0 0 0 2px var(--wine); outline:none}
.bx.libre{border-style:dashed}
.bx.pend{background:rgba(232,178,92,.22); border-color:var(--amber)}
.bx.conf{background:rgba(70,194,129,.22); border-color:var(--green-bright)}
.bx.tomado{background:rgba(236,239,244,.06); border-color:rgba(236,239,244,.18); color:var(--dim); cursor:not-allowed}
.bx.tomado small{color:var(--dim)}
.bx.sel{background:rgba(47,111,237,.35); border-color:var(--wine); box-shadow:0 0 0 2px var(--wine)}
.mapa.editable .bx{cursor:grab; border-style:solid; background:rgba(47,111,237,.14); border-color:rgba(138,180,248,.7)}
.mapa.editable .bx.agarrado{cursor:grabbing; transform:scale(1.03); box-shadow:0 8px 22px rgba(0,0,0,.45); z-index:3}
.bx .tir{position:absolute; right:0; bottom:0; width:14px; height:14px; cursor:nwse-resize;
  background:linear-gradient(135deg, transparent 50%, var(--gold) 50%); border-bottom-right-radius:5px}
.leyenda{display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; font-size:11.5px; color:var(--muted)}
.leyenda i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:-4px; vertical-align:-1px}
.leyenda .l-libre{border:1.5px dashed rgba(236,239,244,.5)}
.leyenda .l-pend{background:rgba(232,178,92,.5); border:1px solid var(--amber)}
.leyenda .l-conf{background:rgba(70,194,129,.5); border:1px solid var(--green-bright)}
@media (prefers-color-scheme: light){
  .bx{background:rgba(23,27,35,.04); border-color:rgba(23,27,35,.35)}
  .bx.tomado{background:rgba(23,27,35,.04); border-color:rgba(23,27,35,.15)}
  .mapa.con-plano::before{background:rgba(255,255,255,.25)}
  .leyenda .l-libre{border-color:rgba(23,27,35,.45)}
}

/* tablas nuevas como tarjetas en el teléfono */
@media (max-width:760px){
  #tPm thead, #tRv thead, #tBx thead{display:none}
  #tPm, #tPm tbody, #tRv, #tRv tbody{display:block}
  #tPm tbody tr{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 10px; padding:12px 14px; border-bottom:1px solid var(--line)}
  #tPm td{display:block; border:0; padding:0}
  #tPm td:nth-child(1){grid-column:1/4}
  #tPm td:nth-child(2){grid-column:1/4}
  #tPm td:nth-child(3), #tPm td:nth-child(7){display:none}
  #tPm td:nth-child(8){grid-column:1/4}
  #tPm td:nth-child(8) .btn{width:100%; justify-content:center}
  #tPm td.num, #tRv td.num{text-align:left; font-size:16px; font-weight:700}
  #tPm td.num::before, #tRv td.num::before{content:attr(data-l); display:block; font-family:"Oswald","Helvetica Neue",Arial,sans-serif;
    font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); font-weight:400; margin-bottom:1px}
  #tRv tbody tr{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px 12px; padding:12px 14px; border-bottom:1px solid var(--line)}
  #tRv td{display:block; border:0; padding:0}
  #tRv td:nth-child(1){grid-column:1; grid-row:1}
  #tRv td:nth-child(2){grid-column:1/4; grid-row:2}
  #tRv td:nth-child(3){grid-column:2; grid-row:1}
  #tRv td:nth-child(4){grid-column:3; grid-row:1}
  #tRv td:nth-child(5){grid-column:1/4; grid-row:3}
  #tRv td:nth-child(6){grid-column:1/3; grid-row:4; font-size:12.5px}
  #tRv td:nth-child(7){grid-column:3; grid-row:4}
  #tRv td:nth-child(8){grid-column:1/4; grid-row:5}
  #tRv td:nth-child(8) .row{flex-wrap:wrap!important}
  #tRv td:nth-child(8) .btn{flex:1 1 auto; justify-content:center}
  .acceso-fila .btn{flex:1 1 auto}
}
.bx.mio{background:rgba(47,111,237,.30); border-color:var(--wine)}
.leyenda .l-tom{background:rgba(236,239,244,.08); border:1px solid rgba(236,239,244,.25)}
.leyenda .l-mio{background:rgba(47,111,237,.5); border:1px solid var(--wine)}
/* los campos de solo lectura con un enlace para copiar */
input.mono[readonly]{padding:11px 13px; background:var(--fondo2); border:1px solid var(--line-strong);
  border-radius:var(--r); width:100%; color:var(--texto); font-size:14px}
.mapa-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px}
.mapa-scroll[hidden]{display:none}
@media (max-width:760px){ .mapa-scroll .mapa{min-width:660px} }

/* el símbolo de QRPass, a la izquierda del nombre del local */
.sis{height:34px; width:auto; flex:none; margin-right:-6px; display:block}
@media (max-width:760px){ .sis{height:28px; margin-right:0} }
.evchip[hidden]{display:none !important}

/* arriba a la izquierda: solo el logo de QRPass */
.logo-top{display:block; margin-right:auto; flex:none; line-height:0}
.logo-top img{height:34px; width:auto; display:block}
.localnom{font-size:13px; color:var(--muted); padding:7px 13px; border:1px solid var(--line-strong); border-radius:100px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px}
.localnom[hidden]{display:none}
@media (max-width:760px){ .logo-top img{height:28px} .localnom{max-width:120px; font-size:12px; padding:5px 10px} }

/* iPad y tablets en vertical: escáner al lado de los números, sin pasarse de alto */
@media (min-width:700px) and (max-width:860px){
  .door{grid-template-columns:minmax(0,1fr) minmax(0,260px)}
  .scanner{aspect-ratio:auto; height:min(70vh,760px)}
  .door .metrics{grid-template-columns:1fr !important}
}
/* la lista en tablets aprovecha el ancho */
@media (min-width:700px){ .lv-fila{padding:14px 8px} .lv-fila .q b{font-size:18px} }

/* banda de modo soporte (el administrador general viendo como otro usuario) */
/* modo soporte: una franja arriba, en el flujo de la página. No flota, así
   que nunca tapa botones, ventanas ni avisos (antes iba fija abajo y en el
   celular se montaba sobre todo). */
#bandaSoporte{position:relative; z-index:5; display:flex; gap:10px; align-items:center;
  padding:calc(7px + env(safe-area-inset-top,0px)) 12px 7px; background:#E8B25C; color:#1d1404; font-size:13px; line-height:1.3}
#bandaSoporte span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#bandaSoporte button{flex:none; font:inherit; font-weight:600; padding:6px 12px; border-radius:6px; border:0; background:#1d1404; color:#fff; cursor:pointer; white-space:nowrap}
@media (max-width:600px){ #bandaSoporte .largo{display:none} }