/* ==========================================================================
   Quickpaypos — maquetas animadas de las pantallas reales del sistema
   Recreadas en HTML/CSS con los tokens del producto (kiosco, KDS, monitor,
   signage, admin, mesa por QR, impresión térmica).
   ========================================================================== */

/* ============================================================ 1. KIOSCO === */
.k{
  --k-bg:#F4F5F7;--k-panel:#fff;--k-panel2:#fafafa;--k-line:#e5e5ea;--k-chip:#eef0f2;
  --k-ink:#292929;--k-muted:#6b6b6b;--k-acc:#E5692C;
  background:var(--k-bg);color:var(--k-ink);font-family:var(--fuente);
  position:relative;overflow:hidden;user-select:none;
  height:520px;display:flex;flex-direction:column;font-size:13px;
}
.k *{box-sizing:border-box}

.k-top{
  background:#292929;color:#fff;height:44px;display:flex;align-items:center;
  padding:0 16px;justify-content:space-between;position:relative;flex-shrink:0;
}
.k-marca{display:flex;align-items:center;gap:8px;font-family:var(--titulo);font-weight:800;
  text-transform:uppercase;font-size:13.5px;letter-spacing:.4px}
.k-marca .rombo{color:var(--k-acc);font-size:12px}
.k-reloj{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:var(--titulo);font-weight:800;font-size:12.5px;letter-spacing:1.3px;
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px;
}
.k-reloj .pt{width:7px;height:7px;border-radius:50%;background:#5fd39b;animation:latir 1s infinite}
.k-estado{font-size:11px;color:#8f9298}
.k-estado b{color:#5fd39b;font-weight:700}

.k-cuerpo{display:flex;flex:1;min-height:0}
.k-menu{flex:1;display:flex;flex-direction:column;min-width:0}
.k-chips{
  background:#fff;border-bottom:1px solid var(--k-line);padding:10px 14px;
  display:flex;gap:8px;overflow-x:auto;flex-shrink:0;scrollbar-width:none;
}
.k-chips::-webkit-scrollbar{display:none}
.k-chip{
  background:var(--k-chip);border:1px solid var(--k-line);color:var(--k-muted);
  text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.4px;
  padding:8px 16px;border-radius:999px;white-space:nowrap;cursor:pointer;
  transition:background .22s,color .22s,border-color .22s,transform .15s;
}
.k-chip.on{background:var(--k-acc);color:#fff;border-color:var(--k-acc)}
.k-chip.tap{transform:scale(.94)}

.k-grid{
  flex:1;overflow-y:auto;padding:14px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr));align-content:start;
}
.k-grid::-webkit-scrollbar{width:5px}
.k-grid::-webkit-scrollbar-thumb{background:#d4d4dc;border-radius:9px}
.k-prod{
  background:#fff;border:1px solid var(--k-line);border-radius:12px;padding:9px;
  box-shadow:0 2px 8px rgba(41,41,41,.05);cursor:pointer;display:flex;flex-direction:column;
  transition:transform .16s,border-color .16s;min-height:124px;
}
.k-prod.tap{transform:scale(.955);border-color:var(--k-acc)}
.k-prod .foto{
  background:var(--k-panel2);border-radius:9px;height:72px;display:flex;
  align-items:center;justify-content:center;font-size:29px;margin-bottom:8px;
  overflow:hidden;flex-shrink:0;
}
/* Fotos reales de producto; el emoji sólo aparece si falta el archivo. */
.k-prod .foto img{width:100%;height:100%;object-fit:cover;display:block}
.k-vuelo img{width:38px;height:38px;object-fit:cover;border-radius:8px;display:block;
  box-shadow:0 6px 16px rgba(41,41,41,.3)}
.k-prod .nom{font-weight:700;font-size:12px;line-height:1.25;flex:1}
.k-prod .pre{color:var(--k-acc);font-family:var(--titulo);font-weight:800;font-size:15px;margin-top:5px}
.k-prod .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.k-tag{background:rgba(229,105,44,.12);color:#b8501f;font-size:8.5px;font-weight:700;
  padding:2px 7px;border-radius:999px;letter-spacing:.2px}
.k-tag.al{background:rgba(216,67,67,.12);color:#c03636}
.k-prod.agotado{opacity:.45}

.k-carrito{
  width:210px;flex-shrink:0;background:#fff;border-left:1px solid var(--k-line);
  display:flex;flex-direction:column;min-height:0;
}
.k-carrito-h{
  padding:12px 14px;border-bottom:1px solid var(--k-line);
  font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:12.5px;letter-spacing:.5px;
  display:flex;justify-content:space-between;align-items:center;transition:transform .45s;
}
.k-carrito-h.bump{transform:scale(1.16)}
.k-carrito-h span{font-family:var(--fuente);font-weight:600;font-size:10px;color:var(--k-muted);text-transform:none;letter-spacing:0}
.k-lineas{flex:1;overflow-y:auto;padding:8px 12px}
.k-lineas::-webkit-scrollbar{width:5px}
.k-lineas::-webkit-scrollbar-thumb{background:#d4d4dc;border-radius:9px}
.k-vacio{color:#b0b0b8;font-size:11.5px;text-align:center;padding:34px 8px;line-height:1.6}
.k-linea{
  border-bottom:1px solid #f0f0f4;padding:9px 0;animation:kEntra .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes kEntra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.k-linea .n{font-weight:700;font-size:11.5px;display:flex;justify-content:space-between;gap:8px}
.k-linea .n b{font-family:var(--titulo);font-weight:800;font-size:12px}
.k-linea .m{color:var(--k-muted);font-size:9.5px;margin-top:2px}
.k-linea .st{display:flex;align-items:center;gap:6px;margin-top:6px}
.k-linea .st i{
  width:22px;height:22px;border-radius:7px;background:var(--k-chip);display:flex;
  align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:700;color:var(--k-ink);
}
.k-linea .st b{font-family:var(--titulo);font-weight:800;font-size:11.5px;min-width:12px;text-align:center}
.k-linea .mod{margin-left:auto;color:#c26236;font-size:9px;font-weight:700}
.k-pie{background:var(--k-panel2);border-top:1px solid var(--k-line);padding:11px 13px}
.k-fila{display:flex;justify-content:space-between;font-size:10.5px;color:var(--k-muted);margin-bottom:3px}
.k-fila.tot{color:var(--k-ink);font-family:var(--titulo);font-weight:800;font-size:14.5px;margin:6px 0 9px}
.k-pagar{
  width:100%;background:var(--k-acc);color:#fff;border:0;border-radius:999px;
  padding:12px;font-family:var(--titulo);font-weight:800;text-transform:uppercase;
  font-size:12px;letter-spacing:.6px;cursor:pointer;box-shadow:0 6px 15px rgba(229,105,44,.32);
  transition:opacity .2s,transform .15s;
}
.k-pagar:disabled{opacity:.4;box-shadow:none;cursor:default}
.k-pagar.tap{transform:scale(.96)}

/* Vuelo al carrito */
.k-vuelo{
  position:absolute;font-size:28px;pointer-events:none;z-index:40;line-height:1;
  transition:transform .7s cubic-bezier(.2,.7,.3,1),opacity .7s;
}

/* Overlays del kiosco */
/* La capa de fondo aparece una sola vez al entrar al cobro y ya no se mueve. */
.k-ov{
  position:absolute;inset:0;background:var(--k-bg);z-index:30;
  animation:kFade .3s;
}
/* Cada paso es un contenido que entra mientras el anterior sale: sin hueco. */
.k-ov-cont{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:22px;text-align:center;
  animation:kEntraCont .28s ease both;
}
.k-ov-cont.saliendo{animation:kSaleCont .26s ease both;pointer-events:none}
@keyframes kFade{from{opacity:0}to{opacity:1}}
@keyframes kEntraCont{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kSaleCont{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}
.k-ov-cont .tit{font-family:var(--titulo);font-weight:800;font-size:22px;line-height:32px;margin:0;color:var(--charcoal);text-transform:uppercase;letter-spacing:.4px}
.k-ov-cont p{margin:0;color:var(--k-muted);font-size:12.5px}
.k-ops{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.k-op{
  background:#fff;border:2px solid var(--k-line);border-radius:18px;padding:20px 26px;
  min-width:128px;cursor:pointer;transition:border-color .2s,background .2s,transform .16s;
}
.k-op .e{font-size:36px;margin-bottom:7px}
.k-op .t{font-family:var(--titulo);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px}
.k-op.on{border-color:var(--k-acc);background:rgba(229,105,44,.09)}
.k-op.tap{transform:scale(.95)}
.k-propinas{display:flex;gap:10px}
.k-propina{
  background:#fff;border:2px solid var(--k-line);border-radius:16px;padding:14px 20px;
  font-family:var(--titulo);font-weight:800;font-size:17px;cursor:pointer;transition:.2s;
}
.k-propina.on{border-color:var(--k-acc);background:rgba(229,105,44,.09);color:var(--k-acc)}
.k-desglose{background:#fff;border:1px solid var(--k-line);border-radius:12px;padding:12px 18px;min-width:200px}
.k-desglose div{display:flex;justify-content:space-between;font-size:11.5px;color:var(--k-muted);margin-bottom:4px}
.k-desglose div.t{color:var(--k-ink);font-family:var(--titulo);font-weight:800;font-size:16px;margin:6px 0 0}

.k-spin{width:46px;height:46px;border-radius:50%;border:5px solid var(--k-chip);border-top-color:var(--k-acc);animation:kGira 1s linear infinite}
@keyframes kGira{to{transform:rotate(360deg)}}
.k-barra{width:230px;height:11px;background:var(--k-chip);border-radius:999px;overflow:hidden}
.k-barra i{display:block;height:100%;background:var(--k-acc);width:0;border-radius:999px;transition:width .45s ease}

.k-ticket{
  background:#fff;border:1px solid var(--k-line);border-radius:10px;padding:14px 16px;
  width:230px;font-family:"SFMono-Regular",Consolas,monospace;font-size:10px;text-align:left;
  box-shadow:0 8px 22px rgba(41,41,41,.1);line-height:1.55;
}
.k-ticket .c{text-align:center;font-weight:700}
.k-ticket hr{border:0;border-top:1px dashed #c9c9d2;margin:7px 0}
.k-ticket .r{display:flex;justify-content:space-between;gap:8px}
.k-ticket .r.b{font-weight:700;font-size:11.5px}

/* Modal de producto (modificadores) */
.k-modal{
  position:absolute;inset:0;background:rgba(41,41,41,.55);z-index:35;
  display:flex;align-items:center;justify-content:center;padding:16px;animation:kFade .22s;
}
.k-hoja{
  background:#fff;border-radius:18px;width:min(330px,94%);max-height:92%;overflow:auto;
  padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.3);animation:kSube .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes kSube{from{transform:translateY(22px);opacity:0}to{transform:none;opacity:1}}
.k-hoja .tit{font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:16px;line-height:24px;margin:0 0 3px;color:var(--charcoal)}
.k-hoja .pr{color:var(--k-acc);font-family:var(--titulo);font-weight:800;font-size:14px;margin-bottom:12px}
.k-grupo{margin-bottom:12px}
.k-grupo .gl{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;margin-bottom:6px}
.k-grupo .gl .ob{background:rgba(216,67,67,.12);color:#c03636;font-size:8.5px;padding:2px 7px;border-radius:999px}
.k-grupo .gl .op{color:var(--k-muted);font-weight:600;font-size:9.5px}
.k-opc{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--k-line);border-radius:11px;padding:8px 11px;margin-bottom:5px;
  font-size:11.5px;cursor:pointer;transition:.18s;
}
.k-opc .rd{width:17px;height:17px;border-radius:50%;border:2px solid var(--k-line);flex-shrink:0;transition:.18s}
.k-opc.on{background:rgba(229,105,44,.09);border-color:var(--k-acc)}
.k-opc.on .rd{border-color:var(--k-acc);background:var(--k-acc);box-shadow:inset 0 0 0 3px #fff}
.k-hoja-pie{display:flex;gap:9px;margin-top:14px}
.k-hoja-pie button{
  border-radius:999px;padding:11px;font-family:var(--titulo);font-weight:800;font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;cursor:pointer;border:2px solid var(--k-line);
  background:#fff;color:var(--k-muted);flex:1;transition:transform .15s;
}
.k-hoja-pie button.pri{background:var(--k-acc);border-color:var(--k-acc);color:#fff;flex:2}
.k-hoja-pie button.tap{transform:scale(.96)}

/* Reel de atracción */
.k-reel{position:absolute;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#3a2a22,#1f1b1a);overflow:hidden}
.k-reel .bg{position:absolute;inset:0;opacity:.35;background-size:cover;background-position:center;
  filter:saturate(1.1)}
.k-reel .card{
  position:relative;background:rgba(41,41,41,.55);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:28px 34px;text-align:center;color:#fff;
}
.k-reel .card .tit{font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:26px;line-height:32px;margin:0 0 8px;color:#fff}
.k-reel .card p{color:rgba(255,255,255,.72);font-size:12px;margin:0 0 16px}
.k-reel .card button{
  background:var(--k-acc);color:#fff;border:0;border-radius:999px;padding:12px 30px;
  font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.7px;
  cursor:pointer;box-shadow:0 8px 20px rgba(229,105,44,.5);
}
.k-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.k-dots i{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.4);transition:.3s}
.k-dots i.on{width:22px;background:var(--k-acc)}

.k-toast{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  background:#292929;color:#fff;padding:8px 18px;border-radius:11px;font-size:11.5px;
  z-index:50;box-shadow:0 10px 24px rgba(0,0,0,.3);animation:kFade .2s;
}

/* Mano simulada que toca la pantalla durante la reproducción automática.
   El punto de contacto es la yema del índice: coordenada (15,4) dentro del SVG. */
.k-mano{
  position:absolute;left:0;top:0;z-index:46;pointer-events:none;
  width:54px;height:72px;opacity:0;
  transform:translate(220px,420px);
  transition:transform .75s cubic-bezier(.34,.62,.24,1),opacity .45s ease;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.3));
}
.k-mano svg{width:100%;height:100%;display:block;transition:transform .17s ease}
.k-mano.toca svg{transform:translate(2px,4px) scale(.93)}

.k-onda,.k-onda2{
  position:absolute;left:15px;top:4px;border-radius:50%;
  opacity:0;pointer-events:none;
}
.k-onda{width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid var(--k-acc)}
.k-onda2{width:16px;height:16px;margin:-8px 0 0 -8px;background:rgba(229,105,44,.35)}
.k-mano.toca .k-onda{animation:kOnda .6s ease-out}
.k-mano.toca .k-onda2{animation:kOnda2 .45s ease-out}
@keyframes kOnda{0%{transform:scale(.35);opacity:.95}100%{transform:scale(4.4);opacity:0}}
@keyframes kOnda2{0%{transform:scale(.3);opacity:.8}100%{transform:scale(2.4);opacity:0}}

/* =============================================================== 2. KDS === */
.kds{
  background:#1b1b1d;color:#f2f2f4;font-family:var(--fuente);height:660px;
  display:flex;flex-direction:column;font-size:12px;overflow:hidden;user-select:none;
  position:relative;   /* la mano simulada se posiciona contra este contenedor */
}
.kds *{box-sizing:border-box}
.kds-top{
  background:#232326;border-bottom:1px solid #3a3a40;padding:0 14px;height:46px;
  display:flex;align-items:center;justify-content:space-between;position:relative;flex-shrink:0;
}
.kds-top .tit{font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.5px}
.kds-top .tit small{color:#a6a6ae;font-family:var(--fuente);font-weight:600;font-size:10px;text-transform:none;letter-spacing:0;margin-left:6px}
.kds-reloj{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--titulo);font-weight:800;
  font-size:15px;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px}
.kds-reloj .pt{width:7px;height:7px;border-radius:50%;background:#3ddc97;animation:latir 1s infinite}
.kds-der{display:flex;align-items:center;gap:9px;font-size:10.5px;color:#a6a6ae}
.kds-btn{background:#33333a;border:0;color:#f2f2f4;border-radius:8px;padding:6px 12px;font-size:10px;
  font-family:var(--titulo);font-weight:800;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;transition:.2s}
.kds-btn.on{background:#E5692C;color:#fff}
.kds-online{color:#3ddc97;font-weight:700}
.kds-latido{height:2px;background:#232326;overflow:hidden;flex-shrink:0}
.kds-latido i{display:block;height:100%;width:34%;background:linear-gradient(90deg,transparent,#E5692C,transparent);
  animation:kdsLat 2.6s linear infinite}
@keyframes kdsLat{from{transform:translateX(-100%)}to{transform:translateX(360%)}}

.kds-cuerpo{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px;min-height:0}
.kds-col{background:#232326;border-radius:12px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.kds-col-h{
  padding:9px 12px;border-bottom:1px solid #3a3a40;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.5px;flex-shrink:0;
}
.kds-col-h b{color:#E5692C;font-size:13px}
.kds-lista{flex:1;overflow-y:auto;padding:9px;display:flex;flex-direction:column;gap:9px}
.kds-lista::-webkit-scrollbar{width:5px}
.kds-lista::-webkit-scrollbar-thumb{background:#3a3a40;border-radius:9px}
.kds-vacio{color:#6d6d78;text-align:center;font-size:11px;padding:22px 6px}

.kds-card{
  background:#2a2a2e;border-radius:10px;padding:10px;border-left:5px solid #3ddc97;
  animation:kdsEntra .34s cubic-bezier(.2,.7,.3,1);
}
@keyframes kdsEntra{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
.kds-card.amb{border-left-color:#f5c451}
.kds-card.rojo{border-left-color:#ff6b6b}
.kds-card-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}
.kds-folio{font-family:var(--titulo);font-weight:800;font-size:15px}
.kds-crono{font-family:var(--titulo);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums;color:#3ddc97}
.kds-card.amb .kds-crono{color:#f5c451}
.kds-card.rojo .kds-crono{color:#ff6b6b}
.kds-alergia{
  background:rgba(255,107,107,.18);color:#ff8a8a;border-radius:6px;padding:3px 8px;
  font-size:8.5px;font-weight:800;letter-spacing:.4px;animation:kdsPulso 1.1s infinite;
}
@keyframes kdsPulso{0%,100%{opacity:1}50%{opacity:.42}}
.kds-part{display:flex;align-items:flex-start;gap:7px;margin-bottom:5px;font-size:11px;line-height:1.35}
.kds-cb{
  width:16px;height:16px;border-radius:4px;border:2px solid #4a4a52;flex-shrink:0;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:#1b1b1d;transition:.22s;cursor:pointer;
}
.kds-cb.on{background:#3ddc97;border-color:#3ddc97}
.kds-part.hecho .txt{text-decoration:line-through;color:#7a7a84}
.kds-part .qty{color:#E5692C;font-family:var(--titulo);font-weight:800;margin-right:3px}
.kds-part .mods{color:#8f8f9a;font-size:9.5px;display:block}
.kds-part .nota{color:#e0b04a;font-size:9.5px;display:block}
.kds-part .nota.al{color:#ff7a7a}
.kds-acc{display:flex;gap:6px;margin-top:8px}
.kds-acc button{
  flex:1;background:#33333a;border:0;color:#f2f2f4;border-radius:8px;padding:8px;
  font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:9.5px;letter-spacing:.5px;
  cursor:pointer;transition:transform .15s,background .2s;
}
.kds-acc button.pri{background:#E5692C;color:#fff}
.kds-acc button.rec{flex:0 0 34px}
.kds-acc button.tap{transform:scale(.94)}
.kds-chip-serv{background:#33333a;color:#a6a6ae;font-size:8.5px;padding:2px 8px;border-radius:999px;display:inline-block;margin-top:6px}

/* Columna Pulso */
.kds-pulso{padding:10px;display:flex;flex-direction:column;gap:9px;overflow-y:auto}
.kds-heroe{border-radius:10px;padding:12px;text-align:center;background:rgba(61,220,151,.14);border:1px solid rgba(61,220,151,.32)}
.kds-heroe.amb{background:rgba(245,196,81,.14);border-color:rgba(245,196,81,.34)}
.kds-heroe.rojo{background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.34)}
.kds-heroe .et{font-family:var(--titulo);font-weight:800;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:#3ddc97}
.kds-heroe.amb .et{color:#f5c451}.kds-heroe.rojo .et{color:#ff6b6b}
.kds-heroe .n{font-family:var(--titulo);font-weight:800;font-size:42px;line-height:1;margin:5px 0}
.kds-heroe .s{font-size:9.5px;color:#a6a6ae}
.kds-bloque{background:#2a2a2e;border-radius:10px;padding:11px}
.kds-bloque .lb{font-size:9.5px;color:#a6a6ae;text-transform:uppercase;letter-spacing:.7px;font-weight:700;margin-bottom:6px}
.kds-pct{font-family:var(--titulo);font-weight:800;font-size:34px;line-height:1}
.kds-pct small{font-size:10px;color:#a6a6ae;font-family:var(--fuente);font-weight:600;margin-left:6px}
.kds-semaforo{display:flex;height:11px;border-radius:99px;overflow:hidden;margin-top:8px;background:#33333a}
.kds-semaforo i{display:block;height:100%;transition:width .6s}
.kds-gauge{margin-top:9px}
.kds-gauge .g1{display:flex;justify-content:space-between;font-size:9.5px;color:#a6a6ae;margin-bottom:4px}
.kds-gauge .g1 b{color:#f2f2f4;font-variant-numeric:tabular-nums}
.kds-gauge .bar{height:9px;background:#33333a;border-radius:99px;position:relative;overflow:hidden}
.kds-gauge .bar i{display:block;height:100%;border-radius:99px;transition:width .6s}
.kds-gauge .bar .meta{position:absolute;top:-2px;bottom:-2px;width:2px;background:#f2f2f4;opacity:.55}

.kds-leyenda{
  border-top:1px solid #3a3a40;padding:7px 14px;display:flex;gap:16px;flex-wrap:wrap;
  font-size:9.5px;color:#8f8f9a;flex-shrink:0;
}
.kds-leyenda span{display:flex;align-items:center;gap:5px}
.kds-leyenda i{width:8px;height:8px;border-radius:50%;display:block}

@media (max-width:760px){
  .kds-cuerpo{grid-template-columns:repeat(2,1fr)}
  .k-carrito{width:160px}
}


/* ============================================== 3. MONITOR de recolección === */
.mon{
  background:#1b1b1d;color:#f2f2f4;height:400px;display:flex;flex-direction:column;
  font-family:var(--fuente);overflow:hidden;
}
.mon-top{padding:12px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #3a3a40}
.mon-top .m{font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.5px}
.mon-top .m i{color:#E5692C;font-style:normal}
.mon-top .r{font-family:var(--titulo);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px}
.mon-top .r .pt{width:7px;height:7px;border-radius:50%;background:#3ddc97;animation:latir 1s infinite}
.mon-cuerpo{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px;min-height:0}
.mon-col{background:#232326;border-radius:14px;padding:14px;display:flex;flex-direction:column;min-height:0}
.mon-col.listo{background:rgba(61,220,151,.1);border:1px solid rgba(61,220,151,.28)}
.mon-col .tit{
  font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:12px;line-height:24px;letter-spacing:1.2px;
  margin:0 0 12px;color:#a6a6ae;text-align:center;
}
.mon-col.listo .tit{color:#3ddc97}
.mon-nums{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;justify-content:center;overflow-y:auto;flex:1}
/* Sin animación de base: si la lleva el elemento, se reproduce cada vez que el
   nodo se toca y toda la pantalla parpadea. Sólo animan las clases de evento. */
.mon-num{
  font-family:var(--titulo);font-weight:800;font-size:28px;background:#2a2a2e;border-radius:12px;
  padding:11px 16px;letter-spacing:.5px;
}
.mon-col.listo .mon-num{background:rgba(61,220,151,.18);color:#8ff0c6}
.mon-num.entra{animation:monEntra .45s cubic-bezier(.2,.7,.3,1)}
.mon-num.nuevo{animation:monLlega .9s cubic-bezier(.2,.7,.3,1)}
.mon-num.sale{animation:monSale .4s ease forwards;pointer-events:none}
@keyframes monEntra{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes monLlega{0%{opacity:0;transform:scale(.6)}45%{transform:scale(1.16)}100%{opacity:1;transform:none}}
@keyframes monSale{to{opacity:0;transform:scale(.8)}}

/* ============================================================ 4. SIGNAGE === */
/* Monitor de sala en horizontal 16:9, a todo el ancho del bloque. Cada vista
   muestra una categoría completa: un destacado grande a la izquierda y el resto
   en rejilla, para que se lea de un vistazo desde la fila. */
.sig{
  background:#141414;color:#f4f4f4;overflow:hidden;position:relative;font-family:var(--fuente);
  width:100%;aspect-ratio:16/9;display:flex;flex-direction:column;
}
.sig-top{padding:14px 22px;display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;border-bottom:1px solid #2a2a2a;flex-shrink:0}
.sig-top .m{font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.6px}
.sig-top .m i{color:#E5692C;font-style:normal}
.sig-top .p{font-size:10px;color:#8a8a8a;text-transform:uppercase;letter-spacing:1.4px}
.sig-lienzo{position:relative;flex:1;min-height:0}
.sig-pantalla{position:absolute;inset:0;padding:16px 18px 18px;display:none;animation:sigFade .55s;
  flex-direction:column}
.sig-pantalla.on{display:flex}
@keyframes sigFade{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.sig-cat{
  font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:16px;
  letter-spacing:2.5px;color:#E5692C;margin:0 2px 12px;flex-shrink:0;
  display:flex;align-items:center;gap:14px;
}
.sig-cat::after{content:"";flex:1;height:1px;background:#333}
/* El destacado ocupa la columna izquierda completa; el resto va en dos columnas. */
.sig-grid{
  display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:1fr 1fr;
  gap:12px;flex:1;min-height:0;
}
.sig-item{
  background:#2b2b2b;border-radius:14px;padding:12px;display:flex;flex-direction:column;
  justify-content:space-between;border:1px solid #363636;min-height:0;overflow:hidden;position:relative;
}
.sig-item.destacado{
  grid-row:1/-1;background:linear-gradient(160deg,#332821,#2b2b2b);
  border-color:rgba(229,105,44,.45);padding:14px;
}
/* Si sobra un producto impar, se estira a lo ancho de las dos columnas. */
.sig-item.ancho{grid-column:2/-1}
.sig-sello{
  position:absolute;top:11px;right:11px;z-index:2;background:#E5692C;color:#fff;
  font-family:var(--titulo);font-weight:800;font-size:9.5px;text-transform:uppercase;
  letter-spacing:1px;padding:4px 11px;border-radius:999px;
}
.sig-item .e{font-size:34px;margin-bottom:9px;border-radius:11px;overflow:hidden;
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#232323}
.sig-item .e img{width:100%;height:100%;object-fit:cover;display:block}
.sig-item .n{font-family:var(--titulo);font-weight:800;font-size:14.5px;text-transform:uppercase;line-height:1.15}
.sig-item.destacado .n{font-size:26px}
.sig-item .d{font-size:11px;color:#9a9a9a;margin-top:3px;line-height:1.4}
.sig-item .p{font-family:var(--titulo);font-weight:800;font-size:20px;color:#E5692C;margin-top:4px}
.sig-item.destacado .p{font-size:40px}
.sig-item .tg{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.sig-item .tg span{font-size:9px;padding:2px 8px;border-radius:999px;background:rgba(229,105,44,.18);color:#f0a377}
.sig-item .tg span.al{background:rgba(255,107,107,.18);color:#ff9a9a}
.sig-pie{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-shrink:0}
.sig-item.destacado .sig-pie{align-items:center}
.sig-promo{
  grid-row:1/-1;grid-column:1/-1;background:linear-gradient(140deg,#E5692C,#c9551d);border:0;
  display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;
}
.sig-promo .t{font-family:var(--titulo);font-weight:800;font-size:52px;text-transform:uppercase;line-height:1.03}
.sig-promo .s{font-size:17px;color:rgba(255,255,255,.88);margin-top:12px}
.sig-progreso{position:absolute;bottom:0;left:0;height:4px;background:#E5692C;width:0;z-index:3}

/* ============================================================== 5. ADMIN === */
.adm{background:#F4F5F7;height:620px;display:flex;font-family:var(--fuente);font-size:12px;color:#292929;overflow:hidden;position:relative}
.adm-lat{width:186px;background:#fff;border-right:1px solid #e5e5ea;flex-shrink:0;padding:12px 0;overflow-y:auto}
.adm-lat .g{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#a0a0a8;font-weight:700;padding:12px 16px 6px}
.adm-lat span:not(.g){display:flex;align-items:center;gap:8px;padding:8px 16px;color:#5a5a62;font-size:11.5px;font-weight:600}
.adm-lat span.on{background:rgba(229,105,44,.1);color:#c9551d;border-right:3px solid #E5692C}
.adm-main{flex:1;display:flex;flex-direction:column;min-width:0}
.adm-top{
  background:#fff;border-bottom:1px solid #e5e5ea;padding:0 16px;height:46px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.adm-top .t{font-family:var(--titulo);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.4px}
.adm-top .u{display:flex;align-items:center;gap:9px;font-size:10.5px;color:#6b6b6b}
.adm-top .u .av{width:26px;height:26px;border-radius:50%;background:#E5692C;color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--titulo);font-weight:800;font-size:11px}
.adm-cuerpo{flex:1;overflow-y:auto;padding:14px}
.adm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.adm-kpi{background:#fff;border:1px solid #e5e5ea;border-radius:12px;padding:12px}
.adm-kpi .l{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:#8a8a92;font-weight:700}
.adm-kpi .v{font-family:var(--titulo);font-weight:800;font-size:22px;margin-top:4px;font-variant-numeric:tabular-nums}
.adm-kpi .d{font-size:9.5px;color:#2e9e6b;font-weight:700;margin-top:2px}
.adm-panel{background:#fff;border:1px solid #e5e5ea;border-radius:12px;overflow:hidden;margin-bottom:12px}
.adm-panel-h{padding:10px 14px;border-bottom:1px solid #e5e5ea;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--titulo);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.adm-arbol{padding:8px 6px;font-size:11.5px}
.adm-nodo{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;cursor:pointer}
.adm-nodo:hover{background:#fafafa}
.adm-nodo.n1{padding-left:10px;font-weight:700}
.adm-nodo.n2{padding-left:30px;font-weight:600;color:#5a5a62}
.adm-nodo.n3{padding-left:50px;color:#6b6b6b}
.adm-nodo .sel{width:14px;height:14px;border:1.5px solid #ccc;border-radius:4px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;transition:.2s}
.adm-nodo .sel.on{background:#E5692C;border-color:#E5692C}
.adm-nodo .pr{margin-left:auto;font-family:var(--titulo);font-weight:800;color:#E5692C}
.adm-nodo .badge{background:#eef0f2;color:#6b6b6b;font-size:8.5px;padding:1px 7px;border-radius:999px}
.adm-masiva{visibility:visible;
  background:#292929;color:#fff;border-radius:999px;padding:8px 14px;display:flex;align-items:center;gap:10px;
  font-size:10.5px;margin:8px 10px;box-shadow:0 8px 20px rgba(41,41,41,.24);
}
.adm-masiva b{font-family:var(--titulo);font-weight:800}
.adm-masiva button{background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:999px;
  padding:5px 11px;font-size:9.5px;font-weight:700;cursor:pointer}
.adm-masiva button.pri{background:#E5692C}
.adm-consola-pane{
  flex-shrink:0;background:#fff;border-top:1px solid #e5e5ea;
  display:flex;flex-direction:column;height:212px;
}
.adm-consola-pane .adm-panel-h{flex-shrink:0}
.adm-consola{
  background:#17171a;color:#c8c8d0;font-family:"SFMono-Regular",Consolas,monospace;font-size:11px;
  padding:12px 14px;line-height:1.8;flex:1;overflow-y:auto;
}
.adm-consola::-webkit-scrollbar{width:5px}
.adm-consola::-webkit-scrollbar-thumb{background:#3a3a42;border-radius:9px}
.adm-consola .ok{color:#3ddc97}
.adm-consola .wr{color:#f5c451}
.adm-consola .dim{color:#6d6d78}
.adm-consola .ac{color:#E5692C}

/* ============================================ 6. MESA POR QR (teléfono) === */
.mq{height:100%;display:flex;flex-direction:column;background:#F4F5F7;font-size:12.5px;color:#292929;overflow:hidden;position:relative}
.mq-top{background:#292929;color:#fff;padding:12px 14px;flex-shrink:0}
.mq-top .m{font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:13px}
.mq-top .m i{color:#E5692C;font-style:normal}
.mq-top .s{font-size:10px;color:#9a9aa2;margin-top:2px}
.mq-estado{background:rgba(61,220,151,.14);color:#1f7a51;font-size:10px;font-weight:700;padding:7px 14px;
  display:flex;justify-content:space-between;flex-shrink:0}
.mq-busca{padding:10px 12px 8px;background:#fff;border-bottom:1px solid #e5e5ea;flex-shrink:0}
.mq-busca input{width:100%;border:1px solid #e5e5ea;border-radius:999px;padding:8px 14px;font-size:11.5px;font-family:inherit}
.mq-chips{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:none}
.mq-chips::-webkit-scrollbar{display:none}
.mq-chips span{background:#eef0f2;border-radius:999px;padding:5px 12px;font-size:10px;font-weight:700;
  text-transform:uppercase;color:#6b6b6b;white-space:nowrap}
.mq-chips span.on{background:#E5692C;color:#fff}
.mq-cuerpo{flex:1;overflow-y:auto;padding:10px 12px}
.mq-cuerpo::-webkit-scrollbar{width:4px}
.mq-cuerpo::-webkit-scrollbar-thumb{background:#d4d4dc;border-radius:9px}
.mq-tile{background:#fff;border-radius:12px;padding:10px;display:flex;gap:10px;align-items:center;
  margin-bottom:8px;box-shadow:0 2px 8px rgba(41,41,41,.06)}
.mq-tile .e{font-size:26px;width:46px;height:46px;border-radius:9px;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:#f2f2f6}
.mq-tile .e img{width:100%;height:100%;object-fit:cover;display:block}
.mq-tile .n{font-weight:700;font-size:12px;flex:1}
.mq-tile .n small{display:block;color:#8a8a92;font-weight:600;font-size:10px;margin-top:1px}
.mq-tile .p{font-family:var(--titulo);font-weight:800;color:#E5692C;font-size:14px}
/* Al tocar un producto: el mosaico confirma y el aviso dice que ya salió a cocina.
   Lo que se toca es lo que aparece en «Mi cuenta»; antes eran dos listas distintas. */
.mq-tile{transition:box-shadow .25s ease,transform .25s ease,background .25s ease}
.mq-tile.puesto{background:#fff6f1;box-shadow:0 0 0 2px #E5692C inset;transform:scale(.97)}
.mq-toast{
  position:absolute;left:12px;right:12px;bottom:60px;z-index:6;
  background:rgba(41,41,41,.94);color:#fff;border-radius:10px;padding:9px 12px;
  font-size:11px;font-weight:700;text-align:center;
  opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;
}
.mq-toast.ver{opacity:1;transform:none}
.mq-item.nuevo{background:rgba(229,105,44,.07);border-radius:7px;padding-left:7px;padding-right:7px}
.mq-cuenta{background:#fff;border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:0 2px 8px rgba(41,41,41,.06)}
.mq-cuenta h6{font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:11px;margin:0 0 8px;letter-spacing:.5px}
.mq-item{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #f2f2f6;font-size:11.5px}
.mq-item:last-child{border:0}
.mq-item .est{font-size:9px;font-weight:700;padding:2px 8px;border-radius:999px}
.mq-item .est.rec{background:#eef0f2;color:#6b6b6b}
.mq-item .est.prep{background:rgba(245,196,81,.2);color:#8a6a12}
.mq-item .est.listo{background:rgba(46,158,107,.16);color:#1f7a51}
.mq-item .est.serv{background:rgba(229,105,44,.14);color:#b8501f}
.mq-tot{display:flex;justify-content:space-between;font-family:var(--titulo);font-weight:800;font-size:15px;margin-top:8px}
.mq-nav{background:#fff;border-top:1px solid #e5e5ea;display:flex;flex-shrink:0}
.mq-nav button{flex:1;background:none;border:0;padding:10px 4px;font-size:9.5px;font-weight:700;color:#8a8a92;
  cursor:pointer;font-family:inherit;text-transform:uppercase;letter-spacing:.4px}
.mq-nav button .i{display:block;font-size:16px;margin-bottom:2px}
.mq-nav button.on{color:#E5692C}

/* División de cuenta */
.divi{display:grid;gap:10px}
.divi-fila{
  background:#fff;border:1px solid var(--linea);border-radius:12px;padding:14px 16px;
  display:flex;align-items:center;gap:14px;
}
.divi-fila .av{width:36px;height:36px;border-radius:50%;background:var(--naranja-tint);color:#a3400f;
  display:flex;align-items:center;justify-content:center;font-family:var(--titulo);font-weight:800;flex-shrink:0}
.divi-fila .nm{font-weight:700;font-size:15px}
.divi-fila .nm small{display:block;color:var(--gris);font-weight:600;font-size:12.5px}
.divi-fila .mt{margin-left:auto;text-align:right;flex-shrink:0}
.divi-fila .mt b{font-family:var(--titulo);font-weight:800;font-size:17px;display:block}
.divi-fila .mt span{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;display:inline-block;margin-top:3px}
.divi-fila .mt span.pag{background:rgba(46,158,107,.14);color:#1f7a51}
.divi-fila .mt span.pen{background:rgba(245,196,81,.2);color:#8a6a12}
.divi-barra{height:9px;background:var(--chip);border-radius:999px;overflow:hidden;margin-top:6px}
.divi-barra i{display:block;height:100%;background:var(--verde);border-radius:999px;transition:width .8s cubic-bezier(.2,.7,.3,1)}

/* ========================================================= 7. IMPRESIÓN === */
.imp-escena{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.imp-slot{text-align:center}
.imp-slot .tit{
  font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:12px;line-height:24px;letter-spacing:1px;
  color:var(--gris);margin-bottom:14px;
}
.impresora{
  background:linear-gradient(180deg,#3a3a40,#2a2a2e);border-radius:12px 12px 5px 5px;
  padding:14px 16px 8px;position:relative;box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.impresora .led{width:7px;height:7px;border-radius:50%;background:#3ddc97;position:absolute;top:10px;right:12px;
  animation:latir 1.4s infinite}
.impresora .nombre{color:#c8c8d0;font-size:9.5px;text-transform:uppercase;letter-spacing:1.1px;font-weight:700;margin-bottom:10px}
.impresora .ranura{height:7px;background:#141416;border-radius:99px;box-shadow:inset 0 2px 5px rgba(0,0,0,.7)}
.papel-envoltura{position:relative;overflow:hidden;height:0;transition:height 1.6s cubic-bezier(.2,.7,.3,1);margin-top:-3px}
.papel-envoltura.saliendo{height:250px}
.papel{
  background:#fff;color:#292929;font-family:"SFMono-Regular",Consolas,monospace;font-size:9.5px;
  line-height:1.6;padding:14px 15px 22px;text-align:left;
  box-shadow:0 12px 30px rgba(41,41,41,.22);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 6px),94% 100%,88% calc(100% - 6px),82% 100%,76% calc(100% - 6px),
    70% 100%,64% calc(100% - 6px),58% 100%,52% calc(100% - 6px),46% 100%,40% calc(100% - 6px),34% 100%,
    28% calc(100% - 6px),22% 100%,16% calc(100% - 6px),10% 100%,4% calc(100% - 6px),0 100%);
}
.papel .c{text-align:center}
.papel .b{font-weight:700}
.papel hr{border:0;border-top:1px dashed #c9c9d2;margin:6px 0}
.papel .r{display:flex;justify-content:space-between;gap:8px}
.papel .grande{font-family:var(--titulo);font-weight:800;font-size:19px;text-align:center;letter-spacing:1px;margin:4px 0}
.papel .cb{
  height:30px;margin:8px auto 3px;width:82%;
  background:repeating-linear-gradient(90deg,#292929 0 2px,#fff 2px 4px,#292929 4px 5px,#fff 5px 9px);
}
.papel .qr{width:56px;height:56px;margin:6px auto;background:
  repeating-conic-gradient(#292929 0% 25%,#fff 0% 50%) 0 0/12px 12px;border:3px solid #fff;outline:1px solid #292929}
.papel .r.sub{color:#6b6b74}

/* Ticket largo de la sección de autofactura: acompaña al texto de al lado y
   lleva un QR de verdad, no una textura. */
.ticket-col{display:flex;flex-direction:column;justify-content:flex-start}
.papel.ticket-largo{
  max-width:330px;width:100%;margin-inline:auto;font-size:11px;line-height:1.7;
  padding:20px 22px 30px;
}
.papel.ticket-largo .grande{font-size:22px;margin:8px 0}
.papel.ticket-largo .cb{height:36px}
.qr-caja{
  display:block;width:132px;margin:10px auto 6px;padding:8px;background:#fff;
  border:1px solid #e2e2e8;border-radius:6px;line-height:0;
}
.qr-caja svg{width:100%;height:auto;display:block;shape-rendering:crispEdges}
.qr-caja:hover{border-color:#E5692C}

/* =================================================== 8. PUNTO DE VENTA === */
.pos{
  background:#F4F5F7;color:#292929;font-family:var(--fuente);font-size:12.5px;
  height:470px;display:flex;flex-direction:column;overflow:hidden;position:relative;user-select:none;
}
.pos *{box-sizing:border-box}
.pos-top{
  background:#292929;color:#fff;height:44px;flex-shrink:0;display:flex;align-items:center;
  justify-content:space-between;padding:0 16px;
}
.pos-top .m{font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.4px}
.pos-top .m i{color:#E5692C;font-style:normal}
.pos-top .t{font-size:10.5px;color:#9a9aa2;display:flex;align-items:center;gap:7px}
.pos-top .t b{color:#fff;font-family:var(--titulo);font-weight:800;font-variant-numeric:tabular-nums}
.pos-top .pt{width:7px;height:7px;border-radius:50%;background:#3ddc97;animation:latir 1.1s infinite}

.pos-cuerpo{flex:1;display:grid;grid-template-columns:1.25fr 1fr;min-height:0}
.pos-izq{display:flex;flex-direction:column;min-height:0;min-width:0}
.pos-chips{display:flex;gap:7px;padding:10px 12px;background:#fff;border-bottom:1px solid #e5e5ea;
  overflow-x:auto;flex-shrink:0;scrollbar-width:none}
.pos-chips::-webkit-scrollbar{display:none}
.pos-chip{
  background:#eef0f2;border:1px solid #e5e5ea;color:#6b6b6b;border-radius:999px;padding:7px 14px;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;
  cursor:pointer;font-family:inherit;transition:.2s;
}
.pos-chip.on{background:#E5692C;border-color:#E5692C;color:#fff}
.pos-grid{
  flex:1;overflow-y:auto;padding:12px;display:grid;gap:9px;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
}
.pos-grid::-webkit-scrollbar{width:5px}
.pos-grid::-webkit-scrollbar-thumb{background:#d4d4dc;border-radius:9px}
.pos-prod{
  background:#fff;border:1px solid #e5e5ea;border-radius:11px;padding:11px 10px;cursor:pointer;
  text-align:left;font-family:inherit;display:flex;flex-direction:column;gap:6px;min-height:74px;
  box-shadow:0 2px 7px rgba(41,41,41,.05);transition:transform .15s,border-color .15s;
}
.pos-prod:hover{border-color:#E5692C}
.pos-prod:active{transform:scale(.96)}
.pos-prod .n{font-weight:700;font-size:11.5px;line-height:1.25;flex:1}
.pos-prod .p{font-family:var(--titulo);font-weight:800;font-size:14px;color:var(--naranja-texto,#c04f18)}

.pos-der{background:#fff;border-left:1px solid #e5e5ea;display:flex;flex-direction:column;min-height:0}
.pos-tick-h{
  padding:11px 14px;border-bottom:1px solid #e5e5ea;flex-shrink:0;
  font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.5px;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
}
.pos-tick-h span{font-family:var(--fuente);font-weight:600;font-size:10px;color:#8a8a92;
  text-transform:none;letter-spacing:0}
.pos-lineas{flex:1;overflow-y:auto;padding:6px 12px;min-height:0}
.pos-lineas::-webkit-scrollbar{width:5px}
.pos-lineas::-webkit-scrollbar-thumb{background:#d4d4dc;border-radius:9px}
.pos-vacio{color:#a8a8b0;font-size:11px;text-align:center;padding:30px 10px;line-height:1.6}
.pos-linea{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid #f2f2f6;font-size:11.5px}
.pos-linea.nueva{animation:posEntra .35s cubic-bezier(.2,.7,.3,1)}
@keyframes posEntra{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.pos-linea .c{
  width:21px;height:21px;border-radius:7px;background:#eef0f2;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--titulo);font-weight:800;font-size:11px;
}
.pos-linea .n{flex:1;font-weight:700}
.pos-linea .p{font-family:var(--titulo);font-weight:800;font-size:12.5px}
.pos-extras{display:flex;gap:8px;padding:8px 12px 0;flex-shrink:0}
.pos-mini{
  flex:1;background:#fff;border:1.5px solid #e5e5ea;border-radius:999px;padding:7px;
  font-family:var(--titulo);font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.6px;
  color:#6b6b6b;cursor:pointer;transition:.2s;
}
.pos-mini.on{background:rgba(229,105,44,.1);border-color:#E5692C;color:#c04f18}
.pos-tot{padding:10px 14px 6px;flex-shrink:0}
.pos-tot .f{display:flex;justify-content:space-between;font-size:11px;color:#6b6b6b;margin-bottom:3px}
.pos-tot .f.des{color:#1f7a51;font-weight:700}
.pos-tot .f.gr{
  color:#292929;font-family:var(--titulo);font-weight:800;font-size:19px;
  margin-top:7px;padding-top:7px;border-top:1px solid #e5e5ea;
}
.pos-pagos{display:flex;flex-direction:column;gap:8px;padding:0 14px 14px;flex-shrink:0}
.pos-btn{
  border:0;border-radius:999px;padding:11px;font-family:var(--titulo);font-weight:800;
  text-transform:uppercase;font-size:11px;letter-spacing:.6px;cursor:pointer;transition:.2s;
}
.pos-btn.manual{background:#fff;border:2px solid #292929;color:#292929}
.pos-btn.mini{background:#E5692C;color:#fff;box-shadow:0 6px 15px rgba(229,105,44,.3)}
.pos-btn:disabled{opacity:.35;box-shadow:none;cursor:default}

.pos-ov{position:absolute;inset:0;background:#F4F5F7;z-index:30;animation:kFade .3s}
.pos-ov-cont{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:24px;text-align:center;animation:kEntraCont .3s ease both;
}
.pos-ov-cont.saliendo{animation:kSaleCont .28s ease both;pointer-events:none}
.pos-ov-cont .tit{font-family:var(--titulo);font-weight:800;font-size:21px;line-height:32px;margin:0;color:var(--charcoal);
  text-transform:uppercase;letter-spacing:.4px}
.pos-ov-cont p{margin:0;color:#6b6b6b;font-size:12.5px;max-width:320px}
.pos-ov-cont .cifra{font-family:var(--titulo);font-weight:800;font-size:38px;color:#c04f18}
.pos-ov-cont .cambio{
  background:#fff;border:1px solid #e5e5ea;border-radius:999px;padding:8px 18px;font-size:12px;color:#6b6b6b;
}
.pos-ov-cont .cambio b{font-family:var(--titulo);font-weight:800;color:#292929;font-size:15px}
.pos-ov-cont .ic{
  width:62px;height:62px;border-radius:50%;background:#292929;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--titulo);font-weight:800;font-size:29px;
}
.pos-ov-cont .ic.ok{background:#2e9e6b}
.pos-ov-cont .spin{
  width:52px;height:52px;border-radius:50%;border:5px solid #e0e0e6;border-top-color:#E5692C;
  animation:posGira .9s linear infinite;
}
@keyframes posGira{to{transform:rotate(360deg)}}

/* ================================================= 9. VISTA DEL MESERO === */
.msr{
  background:#F4F5F7;color:#292929;font-family:var(--fuente);font-size:12.5px;
  height:430px;display:flex;flex-direction:column;overflow:hidden;position:relative;user-select:none;
}
.msr *{box-sizing:border-box}
.msr-top{
  background:#292929;color:#fff;height:44px;flex-shrink:0;display:flex;align-items:center;
  justify-content:space-between;padding:0 16px;
}
.msr-top .m{font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.4px}
.msr-top .m i{color:#E5692C;font-style:normal}
.msr-top .t{font-size:10px;color:#9a9aa2;display:flex;align-items:center;gap:7px}
.msr-top .pt{width:7px;height:7px;border-radius:50%;background:#3ddc97;animation:latir 1.1s infinite}
.msr-cuerpo{flex:1;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:10px;padding:12px;min-height:0}
.msr-col{background:#fff;border:1px solid #e5e5ea;border-radius:13px;padding:11px;
  display:flex;flex-direction:column;min-height:0}
.msr-col.listo{background:rgba(46,158,107,.07);border-color:rgba(46,158,107,.3)}
.msr-col.llaman{background:rgba(245,196,81,.1);border-color:rgba(245,196,81,.42)}
.msr-col .tit{
  font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:10.5px;line-height:24px;letter-spacing:1px;
  margin:0 0 9px;color:#8a8a92;display:flex;justify-content:space-between;align-items:center;gap:6px;flex-shrink:0;
}
.msr-col .tit b{background:#eef0f2;color:#5a5a62;border-radius:999px;padding:1px 8px;font-size:10px}
.msr-col.listo .tit{color:#1f7a51}
.msr-col.listo .tit b{background:rgba(46,158,107,.18);color:#1f7a51}
.msr-col.llaman .tit{color:#8a6a12}
.msr-col.llaman .tit b{background:rgba(245,196,81,.28);color:#8a6a12}
.msr-col .lista{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:8px}
.msr-col .lista::-webkit-scrollbar{width:4px}
.msr-col .lista::-webkit-scrollbar-thumb{background:#d4d4dc;border-radius:9px}
.msr-vacio{color:#a8a8b0;font-size:10.5px;text-align:center;padding:20px 6px;line-height:1.6}
/* Sin animación de base: si la lleva la tarjeta, se reproduce en cada repintado
   y el tablero entero parpadea. Sólo animan las que acaban de aparecer. */
.msr-card{
  background:#fff;border:1px solid #e5e5ea;border-radius:11px;padding:10px;flex-shrink:0;
  box-shadow:0 2px 7px rgba(41,41,41,.05);
}
.msr-card.entra{animation:msrEntra .4s cubic-bezier(.2,.7,.3,1)}
@keyframes msrEntra{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
.msr-card.sec{background:#fafafa;box-shadow:none}
.msr-card.av{border-color:rgba(245,196,81,.6)}
.msr-card.av.voy{border-color:rgba(46,158,107,.5);background:rgba(46,158,107,.07)}
.msr-card .mesa{font-family:var(--titulo);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.4px}
.msr-card .plato{font-weight:700;font-size:11.5px;margin-top:3px;line-height:1.3}
.msr-card .quien{font-size:10px;color:#8a8a92;margin-top:2px}
.msr-ok,.msr-voy{
  width:100%;margin-top:8px;border:0;border-radius:999px;padding:7px;cursor:pointer;
  font-family:var(--titulo);font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.6px;
  transition:transform .15s;
}
.msr-ok{background:#2e9e6b;color:#fff}
.msr-voy{background:#292929;color:#fff}
.msr-ok:active,.msr-voy:active{transform:scale(.96)}

/* ============================================ 8. FLUJO / DIAGRAMA de red === */
.flujo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;align-items:stretch}
/* Mapa de conexión: el eje arriba a todo lo ancho y los equipos colgando,
   centrados. Con grid quedaban recorridos a la izquierda cuando el último
   renglón no se llenaba. */
.flujo-mapa{display:flex;flex-direction:column;gap:14px}
.flujo-hijos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.flujo-hijos .flujo-nodo{flex:1 1 168px;max-width:238px}
.flujo-nodo{
  background:#fff;border:1px solid var(--linea);border-radius:14px;padding:18px 16px;text-align:center;
  position:relative;box-shadow:var(--sombra);
}
.flujo-nodo .ic{margin-bottom:10px}
.flujo-nodo .tit{font-family:var(--titulo);font-weight:800;font-size:12.5px;line-height:24px;text-transform:uppercase;margin:0 0 4px;letter-spacing:.5px;color:var(--charcoal)}
.flujo-nodo p{font-size:11.5px;color:var(--gris);margin:0;line-height:1.45}
.flujo-nodo.eje{border-color:var(--naranja);box-shadow:0 10px 26px rgba(229,105,44,.16)}
.flujo-nodo.eje .tit{color:var(--naranja-texto)}

/* Tabla técnica compacta */
.tabla-tec{width:100%;border-collapse:collapse;font-size:14.5px}
.tabla-tec th,.tabla-tec td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla-tec thead th{font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:11.5px;
  letter-spacing:.8px;color:var(--gris);background:var(--panel-2)}
.tabla-tec td:first-child{font-weight:700;white-space:nowrap}
.tabla-tec tbody tr:hover{background:var(--panel-2)}

/* Tabla de equipo de instalación: icono por renglón y etiqueta de respaldo.
   Se lee de un vistazo en vez de párrafo por celda. */
.tabla-equipo td{vertical-align:middle;padding:14px}
/* Nada de display:flex en un <td>: rompe la línea separadora de la fila. */
.tabla-equipo td.pt{white-space:nowrap}
.tabla-equipo td.pt i{color:var(--naranja);font-size:19px;line-height:1;vertical-align:-3px;margin-right:9px}
.tabla-equipo td.centro{text-align:center;white-space:nowrap}
.etq{
  display:inline-block;font-family:var(--titulo);font-weight:800;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.8px;padding:5px 13px;border-radius:999px;
}
.etq.si{background:rgba(229,105,44,.14);color:#a3400f}
.etq.pa{background:rgba(46,158,107,.14);color:#17734a}
.etq.no{background:var(--chip,#eef0f2);color:#5c5e66}
@media (max-width:560px){
  .tabla-equipo td{padding:11px 10px;font-size:13px}
  .tabla-equipo td.pt i{font-size:17px}
}

/* ==================================================== 9. MÓVIL ======== */
/* Va al final a propósito: debe ganar a las reglas de las secciones de arriba. */
@media (max-width:560px){
  /* Kiosco */
  .k{height:480px;font-size:12px}
  .k-carrito{width:126px}
  .k-carrito-h{padding:10px;font-size:10.5px}
  .k-carrito-h span{display:none}
  .k-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;padding:9px}
  .k-prod{min-height:104px;padding:7px}
  .k-prod .foto{height:56px;font-size:22px}
  .k-prod .nom{font-size:10.5px}
  .k-prod .pre{font-size:12.5px}
  .k-marca{font-size:11px}
  .k-reloj{font-size:10.5px}
  .k-estado{display:none}
  .k-lineas{padding:6px 8px}
  .k-linea .n{font-size:10px}
  .k-linea .mod{display:none}
  .k-pie{padding:9px}
  .k-fila{font-size:9.5px}
  .k-fila.tot{font-size:12.5px}
  .k-pagar{font-size:10px;padding:10px}
  .k-ov-cont .tit{font-size:17px;line-height:26px}
  .k-op{min-width:104px;padding:15px 18px}
  .k-op .e{font-size:28px}
  .k-propina{padding:11px 15px;font-size:14px}
  .k-ticket{width:200px;font-size:9px}
  .k-reel .card{padding:20px 22px}
  .k-reel .card .tit{font-size:19px;line-height:26px}
  .k-mano{width:42px;height:56px}
  .k-onda,.k-onda2{left:11.5px;top:3px}

  /* KDS */
  .kds{height:560px;font-size:11px}
  .kds-cuerpo{grid-template-columns:1fr;overflow-y:auto}
  .kds-col{min-height:190px}
  .kds-top .tit small,.kds-der .act{display:none}
  .kds-reloj{font-size:12px}
  .kds-leyenda{font-size:8.5px;gap:9px}

  /* Monitor y signage */
  .mon{height:330px}
  .mon-num{font-size:22px;padding:9px 13px}
  /* En móvil el 16:9 queda diminuto: se pasa a vertical 3:4 con dos columnas. */
  .sig{aspect-ratio:3/4}
  .sig-top{padding:10px 12px}
  .sig-top .m{font-size:12px}
  .sig-top .p{font-size:8px}
  .sig-cat{font-size:11px;letter-spacing:1.4px;margin-bottom:8px}
  .sig-pantalla{padding:10px}
  .sig-grid{grid-template-columns:1fr 1fr;grid-template-rows:1.25fr 1fr 1fr;gap:8px}
  .sig-item{padding:8px;border-radius:10px}
  .sig-item.destacado{grid-row:1;grid-column:1/-1}
  .sig-item.ancho{grid-column:1/-1}
  .sig-item .n{font-size:10.5px}
  .sig-item.destacado .n{font-size:16px}
  .sig-item .p{font-size:14px}
  .sig-item.destacado .p{font-size:24px}
  .sig-sello{font-size:8px;padding:3px 8px;top:8px;right:8px}
  .sig-item .tg span{font-size:8px;padding:2px 6px}
  .sig-promo .t{font-size:28px}
  .sig-promo .s{font-size:12px}

  /* Admin */
  .adm{height:440px}
  .adm-lat{display:none}
  .adm-kpis{grid-template-columns:repeat(2,1fr)}
  .adm-nodo.n3{padding-left:32px}
  .adm-masiva{visibility:visible;flex-wrap:wrap;border-radius:14px}

  /* Impresión */
  .imp-escena{grid-template-columns:1fr;gap:28px}
  .papel-envoltura.saliendo{height:230px}

  /* Cuenta dividida */
  .divi-fila{flex-wrap:wrap;gap:10px;padding:13px}
  .divi-fila .mt{margin-left:0;width:100%;text-align:left;display:flex;align-items:center;gap:10px}
  .divi-fila .mt span{margin-top:0}
}

/* ============================================ 9. SINCRONIZADOR DE MENÚ === */
.sync{
  background:#1b1b1d;color:#f2f2f4;font-family:var(--fuente);font-size:12px;
  height:600px;display:flex;flex-direction:column;overflow:hidden;position:relative;user-select:none;
}
.sync *{box-sizing:border-box}
.sync-top{
  background:#232326;border-bottom:1px solid #3a3a40;padding:11px 16px;flex-shrink:0;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.sync-top .tit{font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.5px}
.sync-plat{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  padding:4px 10px;border-radius:999px;border:1px solid #3a3a40;color:#8f8f9a;
}
.sync-plat.on{background:rgba(229,105,44,.16);border-color:rgba(229,105,44,.45);color:#f0a377}
.sync-top .der{margin-left:auto;font-size:9.5px;color:#6d6d78}

.sync-url{padding:16px;border-bottom:1px solid #2a2a2e;flex-shrink:0}
.sync-url .lb{font-size:9.5px;text-transform:uppercase;letter-spacing:1.2px;color:#8f8f9a;font-weight:700;display:block;margin-bottom:8px}
.sync-url .fila{display:flex;gap:9px}
.sync-campo{
  flex:1;background:#131315;border:1px solid #3a3a40;border-radius:8px;padding:11px 13px;
  font-family:"SFMono-Regular",Consolas,monospace;font-size:11.5px;color:#d6d6dc;
  display:flex;align-items:center;min-width:0;white-space:nowrap;
  overflow-x:auto;scrollbar-width:none;
}
.sync-campo::-webkit-scrollbar{display:none}
.sync-campo.activo{border-color:#E5692C}
.sync-campo .cursor{width:7px;height:15px;background:#E5692C;margin-left:2px;flex-shrink:0;animation:syncCur .9s step-end infinite}
@keyframes syncCur{0%,50%{opacity:1}51%,100%{opacity:0}}
.sync-btn{
  background:#E5692C;color:#fff;border:0;border-radius:8px;padding:0 20px;flex-shrink:0;
  font-family:var(--titulo);font-weight:800;text-transform:uppercase;font-size:10.5px;letter-spacing:.8px;
  cursor:pointer;transition:transform .15s,opacity .2s;
}
.sync-btn:disabled{opacity:.4;cursor:default}
.sync-btn.tap{transform:scale(.95)}

.sync-cuerpo{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px;min-height:0}
.sync-izq,.sync-der{display:flex;flex-direction:column;min-height:0}
.sync-lb{font-size:9.5px;text-transform:uppercase;letter-spacing:1.2px;color:#8f8f9a;font-weight:700;margin-bottom:9px;
  display:flex;justify-content:space-between;align-items:center}
.sync-lb b{color:#E5692C;font-size:11px}

.sync-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px;flex-shrink:0}
.sync-kpi{background:#232326;border-radius:9px;padding:9px 11px}
.sync-kpi .l{font-size:8.5px;text-transform:uppercase;letter-spacing:.8px;color:#8f8f9a;font-weight:700}
.sync-kpi .v{font-family:var(--titulo);font-weight:800;font-size:21px;line-height:1.2;font-variant-numeric:tabular-nums}
.sync-kpi.ok .v{color:#3ddc97}

.sync-barra{height:6px;background:#2a2a2e;border-radius:99px;overflow:hidden;margin-bottom:11px;flex-shrink:0}
.sync-barra i{display:block;height:100%;width:0;background:#E5692C;border-radius:99px;transition:width .5s ease}

.sync-consola{
  flex:1;background:#131315;border-radius:9px;padding:10px 12px;overflow:hidden;
  font-family:"SFMono-Regular",Consolas,monospace;font-size:9.5px;line-height:1.75;color:#c8c8d0;
}
.sync-consola div{animation:syncLinea .25s ease both}
@keyframes syncLinea{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.sync-consola .ok{color:#3ddc97}
.sync-consola .wr{color:#f5c451}
.sync-consola .dim{color:#6d6d78}
.sync-consola .ac{color:#E5692C}

.sync-fotos{
  flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:min-content;
  gap:7px;overflow:hidden;align-content:start;
}
.sync-foto{
  aspect-ratio:1;border-radius:7px;overflow:hidden;background:#232326;
  opacity:0;transform:scale(.7);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
.sync-foto.on{opacity:1;transform:none}
.sync-foto img{width:100%;height:100%;object-fit:cover;display:block}

.sync-canales{
  border-top:1px solid #2a2a2e;padding:13px 16px;flex-shrink:0;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.sync-canal{
  display:flex;align-items:center;gap:7px;background:#232326;border:1px solid #3a3a40;
  border-radius:8px;padding:8px 12px;font-size:10.5px;font-weight:600;color:#8f8f9a;
  transition:all .3s ease;
}
.sync-canal .pt{width:14px;height:14px;border-radius:4px;border:2px solid #4a4a52;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:9px;color:#1b1b1d;transition:all .25s}
.sync-canal.on{border-color:rgba(61,220,151,.45);background:rgba(61,220,151,.1);color:#a9f0cf}
.sync-canal.on .pt{background:#3ddc97;border-color:#3ddc97}
.sync-canales .btn-pub{margin-left:auto}

.sync.pub .sync-canales{visibility:hidden}
.sync-listo{
  position:absolute;inset:auto 16px 13px 16px;background:rgba(61,220,151,.14);
  border:1px solid rgba(61,220,151,.4);border-radius:10px;padding:13px 16px;
  display:flex;align-items:center;gap:12px;animation:syncSube .4s cubic-bezier(.2,.7,.3,1);
}
@keyframes syncSube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sync-listo .ico{font-size:22px}
.sync-listo .t{font-family:var(--titulo);font-weight:800;font-size:14px;color:#a9f0cf}
.sync-listo .s{font-size:10px;color:#8fd9b8}

@media (max-width:760px){
  .sync{height:640px;font-size:11px}
  .sync-cuerpo{grid-template-columns:1fr;gap:10px}
  .sync-der{display:none}
  .sync-canales{gap:6px}
  .sync-canal{padding:7px 10px;font-size:9.5px}
}