/* 3.42 · Sistemas propios: demos (POS, salón, restaurante) y oferta de pago único.
   Usa las variables de color de site.css, así que funciona igual en tema claro y oscuro. */
.sx-escena{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.sx-vacio{margin:0;padding:22px;border:1px dashed var(--bd);border-radius:16px;color:var(--mu);font-size:.9rem}
.sx-pant,.sx-panel{border:1px solid var(--bd);border-radius:18px;background:var(--sf);box-shadow:0 14px 40px var(--sombra);padding:16px;display:grid;gap:12px}
.sx-mu{margin:0;color:var(--mu);font-size:.86rem;line-height:1.5}
.sx-sub{margin:4px 0 0;font:600 .84rem/1.3 var(--f-tx);color:var(--mu);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sx-fila{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.sx-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sx-btn{min-height:44px;padding:0 14px;border-radius:11px;border:1px solid var(--bd2);background:var(--sf);color:var(--tx);font:600 .88rem/1 var(--f-tx);cursor:pointer}
.sx-btn:hover:not(:disabled){border-color:var(--c1);background:var(--t2)}
.sx-btn:disabled{opacity:.45;cursor:not-allowed}
.sx-btn.on{border-color:var(--c2);background:var(--t3);color:var(--c2)}
.sx-pri{background:var(--c2);border-color:var(--c2);color:var(--sobre-c)}
.sx-pri:hover:not(:disabled){background:var(--c2h);border-color:var(--c2h);color:var(--sobre-c)}
.sx-tx{border-color:transparent;background:transparent;color:var(--mu);text-decoration:underline}
.sx-ancho{width:100%}
.sx-mini{min-height:34px;padding:0 10px;font-size:.8rem}
.sx-campo{display:grid;gap:5px;font:600 .78rem/1.3 var(--f-tx);color:var(--mu)}
.sx-campo input{min-height:44px;border:1px solid var(--bd);border-radius:10px;padding:0 12px;font:500 1rem var(--f-tx);color:var(--tx);background:var(--sf);width:100%}
.sx-campo input:focus-visible,.sx-btn:focus-visible,.sx-prod:focus-visible,.sx-opts button:focus-visible,.sx-mesa:focus-visible,.sx-carta button:focus-visible,.sx-horas button:focus-visible,.sx-met:focus-visible,.sx-chip:focus-visible{outline:3px solid var(--tx);outline-offset:2px}
.sx-chk{display:flex;gap:8px;align-items:center;font-size:.86rem;color:var(--tx)}
.sx-msg{margin:0;color:var(--er-fg);font-size:.86rem}

/* POS: categorías, productos, carrito y cobro */
.sx-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.sx-chip{flex:none;min-height:36px;padding:0 13px;border-radius:99px;border:1px solid var(--bd2);background:var(--sf);color:var(--tx);font:600 .8rem/1 var(--f-tx);cursor:pointer}
.sx-chip.on{background:var(--c2);border-color:var(--c2);color:var(--sobre-c)}
.sx-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.sx-prod{display:grid;gap:3px;text-align:left;padding:11px 12px;border:1px solid var(--bd);border-radius:13px;background:var(--b0);color:var(--tx);cursor:pointer;min-height:86px;align-content:start}
.sx-prod b{font-size:.86rem;line-height:1.25}
.sx-prod span{font:700 .84rem/1.2 var(--f-num);color:var(--c2)}
.sx-prod small{color:var(--mu);font-size:.74rem}
.sx-prod:hover:not(:disabled){border-color:var(--c1);background:var(--t2)}
.sx-prod.ag{opacity:.5}
.sx-peso{border:1px solid var(--c1);border-radius:13px;background:var(--t1);padding:12px;display:grid;gap:8px}
.sx-peso p{margin:0;font-size:.88rem}
.sx-carro{border-top:1px solid var(--bd);padding-top:10px;display:grid;gap:8px}
.sx-carro-t{margin:0;font:700 .9rem/1.2 var(--f-tx)}
.sx-lineas{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sx-lineas li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;font-size:.86rem}
.sx-lineas small{color:var(--mu)}
.sx-lineas b{font-family:var(--f-num);font-size:.84rem}
.sx-x{width:30px;height:30px;border-radius:8px;border:1px solid var(--bd);background:var(--sf);color:var(--mu);cursor:pointer}
.sx-tot{display:flex;justify-content:space-between;align-items:baseline}
.sx-tot b{font:800 1.4rem/1 var(--f-tit)}
.sx-cobro{display:grid;gap:10px}
.sx-cobro-t{margin:0;color:var(--mu);font-size:.84rem}
.sx-grande{margin:0;font:800 1.9rem/1 var(--f-tit);letter-spacing:-.02em}
.sx-metodos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sx-met{min-height:48px;border-radius:12px;border:1px solid var(--bd2);background:var(--sf);color:var(--tx);font:600 .86rem/1.2 var(--f-tx);cursor:pointer}
.sx-met.on{border-color:var(--c2);background:var(--t3);color:var(--c2);box-shadow:0 0 0 1px var(--c2) inset}
.sx-met:disabled{opacity:.5;cursor:not-allowed}
.sx-vueltas{margin:0;font-size:.95rem}
.sx-vueltas b{font:800 1.2rem var(--f-tit);color:var(--ok-fg)}
.sx-qrcaja{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;border:1px solid var(--bd);border-radius:14px;padding:12px;background:var(--b0)}
.sx-qrcaja p{margin:0 0 4px;font-size:.88rem}
.sx-qr{width:120px;height:120px;fill:#161a23;background:#fff;border-radius:8px;padding:4px}
.sx-qr-t{font-weight:700;color:var(--c2)}
.sx-espera{color:var(--wa-fg)}
.sx-espera i{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--wa-fg);margin-right:6px;vertical-align:middle;animation:sx-pulso 1.2s infinite}
@keyframes sx-pulso{50%{opacity:.25}}

/* El panel del dueño */
.sx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.sx-kpis div{border:1px solid var(--bd);border-radius:12px;padding:10px 12px;background:var(--b0)}
.sx-kpis small{display:block;color:var(--mu);font-size:.74rem}
.sx-kpis b{font:800 1.12rem/1.2 var(--f-tit);font-variant-numeric:tabular-nums}
.sx-medios,.sx-inv,.sx-ult,.sx-coms{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sx-medios li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.86rem;border-bottom:1px dashed var(--bd);padding-bottom:5px}
.sx-medios b{font-family:var(--f-num);font-size:.84rem}
.sx-inv li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:8px;align-items:center;font-size:.84rem}
.sx-inv i{display:block;height:7px;border-radius:99px;background:var(--bd);position:relative;overflow:hidden}
.sx-inv i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--c1);border-radius:99px}
.sx-inv li.bajo span,.sx-inv li.bajo b{color:var(--er-fg)}
.sx-inv li.bajo i::after{background:var(--er-fg)}
.sx-inv b{font:600 .78rem var(--f-num)}
.sx-tag-bajo,.sx-tag-ej{font:600 .72rem/1 var(--f-tx);border-radius:99px;padding:4px 8px}
.sx-tag-bajo{color:var(--er-fg);background:var(--er-bg)}
.sx-tag-ej{color:var(--wa-fg);background:var(--wa-bg);border:1px solid var(--wa-bd)}
.sx-ult li{display:grid;gap:2px;border:1px solid var(--bd);border-radius:11px;padding:8px 11px;font-size:.84rem}
.sx-ult li span{color:var(--mu);font-size:.78rem}
.sx-ult li.nueva,.sx-coms li.llega,.sx-agenda li.llega{border-color:var(--ok-bd);background:var(--ok-bg);animation:sx-llega .7s cubic-bezier(.22,.61,.36,1) both}
@keyframes sx-llega{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sx-ult li.vacio,.sx-coms li.vacio,.sx-medios li.vacio{color:var(--mu);border:1px dashed var(--bd);border-radius:11px;padding:10px;display:block}
.sx-pend{margin:0;padding:9px 12px;border-radius:11px;border:1px solid var(--wa-bd);background:var(--wa-bg);color:var(--wa-fg);font-size:.84rem}
.sx-panel .sx-pie{font-size:.78rem}

/* Salón: el teléfono de la clienta y la agenda por profesional */
.sx-tel{max-width:420px;padding:0;overflow:hidden;gap:12px}
.sx-tel>*:not(.sx-tel-h){margin-inline:16px}
.sx-tel>*:last-child{margin-bottom:16px}
.sx-tel-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--c2);color:var(--sobre-c);font-size:.86rem}
.sx-paso{margin:0;font:700 .9rem/1.3 var(--f-tx)}
.sx-opts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sx-opts button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;min-height:52px;padding:8px 14px;border:1px solid var(--bd);border-radius:12px;background:var(--sf);color:var(--tx);cursor:pointer;font:600 .9rem/1.3 var(--f-tx)}
.sx-opts button small{display:block;color:var(--mu);font-weight:500;font-size:.78rem}
.sx-opts button b{font:700 .86rem var(--f-num);color:var(--c2)}
.sx-opts button:hover{border-color:var(--c1);background:var(--t2)}
.sx-horas{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.sx-horas button{min-height:42px;border:1px solid var(--bd2);border-radius:10px;background:var(--sf);color:var(--tx);font:600 .82rem var(--f-tx);cursor:pointer}
.sx-horas button:hover{border-color:var(--c1);background:var(--t2)}
.sx-listo{text-align:center;display:grid;gap:6px;padding:10px 0}
.sx-listo p{margin:0}
.sx-ok-i{width:52px;height:52px;margin:0 auto!important;border-radius:99px;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok-fg);font-size:1.5rem;font-weight:800}
.sx-agenda{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sx-pro{margin:0 0 6px;font:700 .9rem var(--f-tx)}
.sx-colpro ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sx-agenda li{border:1px solid var(--bd);border-radius:11px;padding:8px 10px;font-size:.8rem;display:grid;gap:3px}
.sx-agenda li span{font:600 .74rem var(--f-num);color:var(--mu)}
.sx-agenda li.ej{background:var(--b1);color:var(--mu)}
.sx-agenda li.nueva{border-color:var(--c1);background:var(--t1)}
.sx-agenda li em{font-style:normal;font-size:.72rem;color:var(--c2);font-weight:600}
.sx-agenda li em.sx-pagada{color:var(--ok-fg)}
.sx-agenda .sx-btn{justify-self:start}
.sx-cobro-mini{border:1px solid var(--c1);border-radius:13px;background:var(--t1);padding:12px}
.sx-cobro-mini p{margin:0}

/* Restaurante: mesas, carta y comandas */
.sx-mesas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sx-mesa{display:grid;gap:2px;min-height:64px;border:1px solid var(--bd);border-radius:13px;background:var(--b0);color:var(--tx);cursor:pointer;padding:8px;font-family:var(--f-tx)}
.sx-mesa span{font-size:.76rem;color:var(--mu)}
.sx-mesa.oc{border-color:var(--wa-bd);background:var(--wa-bg)}
.sx-mesa.oc span{color:var(--wa-fg)}
.sx-mesa.on{box-shadow:0 0 0 2px var(--c2) inset}
.sx-carta{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.sx-carta button{display:flex;justify-content:space-between;gap:6px;align-items:center;min-height:46px;padding:6px 11px;border:1px solid var(--bd);border-radius:11px;background:var(--sf);color:var(--tx);cursor:pointer;font:600 .82rem/1.25 var(--f-tx);text-align:left}
.sx-carta button b{font:700 .78rem var(--f-num);color:var(--c2)}
.sx-coms li{border:1px solid var(--bd);border-radius:12px;padding:9px 11px;display:grid;gap:4px;font-size:.84rem}
.sx-coms li p{margin:0}
.sx-coms li em{font-style:normal;font:600 .72rem/1 var(--f-tx);border-radius:99px;padding:3px 8px;margin-left:4px}
.sx-coms li.nuevo em{background:var(--er-bg);color:var(--er-fg)}
.sx-coms li.prep em{background:var(--wa-bg);color:var(--wa-fg)}
.sx-coms li.listo em{background:var(--ok-bg);color:var(--ok-fg)}
.sx-coms .sx-btn{justify-self:start}

/* La oferta de pago único */
.sx-sec{background:linear-gradient(180deg,var(--t1),transparent 70%)}
.sx-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 40px;align-items:end;margin-bottom:22px}
.sx-cab .bo-h2-s{margin:0}
.sx-card{border-color:var(--c1)}
.sx-para{margin:2px 0 10px;color:var(--mu);font-size:.86rem;line-height:1.45}
.sx-unico{margin:6px 0 0;font:700 .74rem/1 var(--f-num);letter-spacing:.08em;text-transform:uppercase;color:var(--c2)}
.sx-no-t{margin:0 0 6px;font:600 .78rem/1.3 var(--f-tx);color:var(--mu)}
.sx-no{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:4px;font-size:.82rem;color:var(--mu)}
.sx-no li::before{content:"\00B7  "}
.sx-sec .sx-pie{margin-top:22px;display:grid;gap:8px;max-width:62em}
.sx-sec .sx-pie p{margin:0;color:var(--mu);font-size:.9rem;line-height:1.6}
.sx-sec .sx-pie b{color:var(--tx)}

@media (max-width:1000px){ .sx-escena{grid-template-columns:1fr} .sx-cab{grid-template-columns:1fr} }
@media (max-width:640px){
  .sx-pant,.sx-panel{padding:12px}
  .sx-dos,.sx-agenda{grid-template-columns:1fr}
  .sx-qrcaja{grid-template-columns:1fr;justify-items:center;text-align:center}
  .sx-mesas{grid-template-columns:repeat(2,1fr)}
  .sx-carta{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .sx-espera i,.sx-ult li.nueva,.sx-coms li.llega,.sx-agenda li.llega{animation:none} }