/* Punto de venta · diseño táctil (botones de 44 px o más), tema claro y oscuro con los mismos tokens.
   --pri es el color de la marca del restaurante (Configuración → Marca y apariencia); --c y --mesero los pone cada botón. */
:root{
  --fondo:#f3f4f8; --panel:#ffffff; --panel-2:#f6f7fb; --hover:#eef0f6; --linea:#e4e7ef; --linea-2:#d5d9e4;
  --tinta:#0b1220; --suave:#64708a; --tenue:#98a1b5;
  --pri:#4f46e5; --pri-2:#8b5cf6;
  --ok:#16a34a; --mal:#e11d48; --av:#f59e0b; --res:#9333ea; --info:#0ea5e9;
  --ok-t:#15803d; --mal-t:#be123c; --av-t:#b45309; --res-t:#7e22ce; --pri-t:color-mix(in srgb,var(--pri) 80%,#000);
  --radio:16px; --radio-s:12px;
  --sombra:0 1px 2px rgba(16,24,40,.04),0 2px 8px rgba(16,24,40,.05);
  --sombra-2:0 12px 32px rgba(16,24,40,.12),0 2px 6px rgba(16,24,40,.06);
  --barra:rgba(255,255,255,.86);
  font-family:"Inter","SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--tinta); font-size:15px; color-scheme:light;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --fondo:#0a0d14; --panel:#121722; --panel-2:#171d2a; --hover:#1d2433; --linea:#232b3b; --linea-2:#2e3749;
    --tinta:#e8ebf2; --suave:#9aa3b7; --tenue:#6b7489;
    --ok-t:#86efac; --mal-t:#fda4af; --av-t:#fcd34d; --res-t:#d8b4fe; --pri-t:color-mix(in srgb,var(--pri) 55%,#fff);
    --sombra:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.25); --sombra-2:0 18px 40px rgba(0,0,0,.55);
    --barra:rgba(18,23,34,.86); color-scheme:dark;
  }
}
:root[data-tema="oscuro"]{
  --fondo:#0a0d14; --panel:#121722; --panel-2:#171d2a; --hover:#1d2433; --linea:#232b3b; --linea-2:#2e3749;
  --tinta:#e8ebf2; --suave:#9aa3b7; --tenue:#6b7489;
  --ok-t:#86efac; --mal-t:#fda4af; --av-t:#fcd34d; --res-t:#d8b4fe; --pri-t:color-mix(in srgb,var(--pri) 55%,#fff);
  --sombra:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.25); --sombra-2:0 18px 40px rgba(0,0,0,.55);
  --barra:rgba(18,23,34,.86); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fondo)}
body{overflow:hidden;-webkit-tap-highlight-color:transparent;color:var(--tinta)}
button,input,select,textarea{font:inherit;color:inherit}
svg.lucide{width:18px;height:18px;flex:none;vertical-align:-3px;stroke-width:2}
:focus-visible{outline:3px solid color-mix(in srgb,var(--pri) 45%,transparent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--pri) 25%,transparent)}
.p-cargando{padding:40px;text-align:center;color:var(--suave)}
#pos-app{height:100%;display:flex;flex-direction:column}
.verde{color:var(--ok-t)} .rojo{color:var(--mal-t)} .sub{color:var(--suave)} .der{text-align:right}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 16px;border-radius:var(--radio-s);border:1px solid var(--linea);background:var(--panel);cursor:pointer;font-weight:600;white-space:nowrap;text-decoration:none;user-select:none;transition:background .15s,border-color .15s,transform .05s,box-shadow .15s;box-shadow:var(--sombra)}
.btn:hover{background:var(--hover)} .btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.primario{background:var(--pri);border-color:transparent;color:var(--pri-tx);box-shadow:0 4px 14px color-mix(in srgb,var(--pri) 35%,transparent)}
.btn.primario:hover{background:color-mix(in srgb,var(--pri) 88%,#000)}
.btn.primario-2{background:color-mix(in srgb,var(--pri) 55%,#111827);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(17,24,39,.25)}
.btn.peligro{background:var(--panel);border-color:color-mix(in srgb,var(--mal) 35%,var(--linea));color:var(--mal-t)} .btn.peligro:hover{background:color-mix(in srgb,var(--mal) 9%,var(--panel))}
.btn.ghost{background:transparent;box-shadow:none} .btn.ghost:hover{background:var(--hover)}
.btn.chico{min-height:36px;padding:0 11px;font-size:13px;border-radius:10px}
.btn.grande{min-height:56px;font-size:17px;padding:0 24px;border-radius:14px}

/* Piezas comunes */
.p-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;background:var(--hover);color:var(--suave);white-space:nowrap}
.p-chip.verde{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok-t)} .p-chip.rojo{background:color-mix(in srgb,var(--mal) 14%,transparent);color:var(--mal-t)}
.p-chip.azul{background:color-mix(in srgb,var(--pri) 14%,transparent);color:var(--pri-t)} .p-chip.amarillo{background:color-mix(in srgb,var(--av) 18%,transparent);color:var(--av-t)} .p-chip.gris{background:var(--hover);color:var(--suave)}
.p-badge{display:inline-flex;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--mal);color:#fff;font-size:11.5px;font-weight:700;align-items:center;justify-content:center}
.p-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:0}
.p-vacio{color:var(--suave);text-align:center;padding:32px 12px;list-style:none}
.p-nota{color:var(--suave);font-size:13.5px;margin:6px 0 12px;line-height:1.5}
.p-aviso{display:flex;gap:8px;align-items:flex-start;background:color-mix(in srgb, #f59e0b 12%, transparent);border:1px solid color-mix(in srgb, #f59e0b 40%, transparent);border-radius:10px;padding:10px 12px;font-size:13.5px;margin:0 0 12px;line-height:1.45}
.p-aviso svg{flex:none;color:#d97706;width:18px;height:18px}
.p-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:0 0 16px}
.p-kpi{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--sombra)}
.p-kpi span{font-size:12.5px;color:var(--suave);font-weight:600} .p-kpi b{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .p-kpi small{color:var(--suave);font-size:12px}
.p-kpi.rojo b{color:var(--mal-t)} .p-kpi.amarillo b{color:var(--av-t)}
.p-card{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:16px;box-shadow:var(--sombra)}
.p-card h3{margin:0 0 10px;font-size:15px;display:flex;gap:8px;align-items:center}
.u-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin-bottom:16px}

/* Firma «Desarrollado por 2Ø2 Technologies» (logo blanco; en fondo claro se invierte) */
.p-202{display:inline-flex;align-items:center;gap:8px;color:var(--suave);font-size:11px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.p-202 img{height:22px;width:auto;filter:invert(1) brightness(.35);opacity:.9}
:root[data-tema="oscuro"] .p-202 img{filter:none;opacity:.85}
@media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]) .p-202 img{filter:none;opacity:.85} }
.p-202.claro{color:rgba(255,255,255,.7)} .p-202.claro img{filter:none;opacity:.95}

/* Aviso de versión nueva */
.pv-aviso{position:fixed;right:16px;bottom:16px;z-index:150;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:18px;color:#fff;font-weight:600;font-size:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0)),rgba(10,12,18,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 50px rgba(0,0,0,.4);animation:tIn .25s ease-out}
.pv-aviso svg.lucide{color:var(--pri)}
/* Pila de avisos abajo a la izquierda (traspasos entre tiendas y avisos del servidor) */
#pos-avisos{position:fixed;left:16px;bottom:16px;z-index:150;display:flex;flex-direction:column;gap:8px;max-width:min(560px,calc(100vw - 32px))}
#pos-avisos .pv-aviso{position:static;align-items:flex-start;line-height:1.4} #pos-avisos .pv-aviso span{flex:1;min-width:0} #pos-avisos .btn.ghost{color:#fff}
/* Avisos */
#pos-toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none}
.pt-toast{background:#111827;color:#fff;padding:12px 18px;border-radius:12px;box-shadow:var(--sombra-2);font-weight:600;transition:opacity .4s,transform .4s;max-width:92vw;animation:tIn .2s ease-out}
@keyframes tIn{from{opacity:0;transform:translateY(8px)}}
.pt-toast.error{background:var(--mal)} .pt-toast.sale{opacity:0;transform:translateY(8px)}

/* Ventanas */
.pm-fondo{position:fixed;inset:0;background:rgba(8,11,20,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100;animation:pmIn .15s}
@keyframes pmIn{from{opacity:0}}
.pm-caja{background:var(--panel);border:1px solid var(--linea);border-radius:22px;width:100%;max-width:560px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:var(--sombra-2);animation:pmUp .18s ease-out}
@keyframes pmUp{from{transform:translateY(10px) scale(.985);opacity:.6}}
.pm-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 20px 12px}
.pm-cab h2{margin:0;font-size:19px;letter-spacing:-.01em} .pm-cab p{margin:4px 0 0;color:var(--suave);font-size:13.5px}
.pm-x{border:0;background:var(--hover);cursor:pointer;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.pm-x:hover{background:var(--linea)}
.pm-cuerpo{padding:6px 20px 20px;overflow:auto}
.pm-pie{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.pm-num{max-width:390px}

/* Teclado numérico */
.pk-display{font-size:32px;font-weight:700;text-align:right;padding:14px 16px;border:1px solid var(--linea);border-radius:14px;background:var(--panel-2);margin-bottom:12px;min-height:66px;font-variant-numeric:tabular-nums;letter-spacing:.01em;overflow:hidden}
.pk-display.oculto{text-align:center;letter-spacing:.35em}
.pk-teclas{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pk-t{min-height:60px;border-radius:14px;border:1px solid var(--linea);background:var(--panel);font-size:23px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sombra);transition:background .1s,transform .05s}
.pk-t:hover{background:var(--hover)} .pk-t:active{background:var(--linea);transform:scale(.97)} .pk-t:disabled{opacity:.25;box-shadow:none}
.pk-err{color:var(--mal-t);font-weight:600;margin:8px 0;text-align:center}
.pk-rapidos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px} .pk-rapidos .btn{flex:1 1 60px}

/* Elegir */
.pe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.pe-op{position:relative;min-height:68px;border:1px solid var(--linea);border-radius:14px;background:var(--panel);cursor:pointer;padding:10px 14px 10px 18px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:2px;box-shadow:var(--sombra);overflow:hidden;transition:background .12s}
.pe-op::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--c,var(--pri))}
.pe-op:hover{background:var(--hover)} .pe-op span{font-size:12.5px;color:var(--suave)} .pe-op:disabled{opacity:.4}

/* Formularios */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 16px}
.pf-campo{display:flex;flex-direction:column;gap:5px;min-width:0} .pf-campo.full{grid-column:1/-1}
.pf-campo label{font-size:13px;font-weight:600;color:var(--suave)} .pf-campo small{color:var(--tenue);font-size:12px}
.pf-campo input,.pf-campo select,.pf-campo textarea,.pi-alm,.pco-ref,.pc-busca input,.pt-buscar,.pr-fil input{min-height:46px;border:1px solid var(--linea);border-radius:12px;padding:9px 12px;background:var(--panel-2);width:100%;transition:border-color .15s,box-shadow .15s,background .15s}
.pf-campo input:focus,.pf-campo select:focus,.pf-campo textarea:focus,.pi-alm:focus,.pco-ref:focus,.pc-busca input:focus,.pt-buscar:focus,.pr-fil input:focus{outline:none;border-color:var(--pri);background:var(--panel);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 16%,transparent)}
.pf-campo input[type=color]{padding:4px;width:84px;cursor:pointer}
.pf-check{justify-content:flex-end} .pf-check label{display:flex;gap:9px;align-items:center;font-weight:500;color:var(--tinta);min-height:46px}
.pf-check input,.pf-checks input,.pp-perm input,.ps-sw input{width:20px;height:20px;accent-color:var(--pri)}
.pf-sec{grid-column:1/-1;margin:12px 0 0;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue);border-bottom:1px solid var(--linea);padding-bottom:8px}
.pf-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 10px;border:1px solid var(--linea);border-radius:12px;padding:8px 12px;background:var(--panel-2)}
.pf-checks label{font-weight:500;color:var(--tinta);display:flex;gap:7px;align-items:center;min-height:34px}
.pf-tabla{width:100%;border-collapse:collapse;margin-bottom:6px} .pf-tabla th{font-size:12px;color:var(--suave);text-align:left;padding:4px}
.pf-tabla td{padding:3px 4px} .pf-tabla input,.pf-tabla select{width:100%;min-height:40px;border:1px solid var(--linea);border-radius:10px;padding:4px 8px;background:var(--panel-2)}
.pf-lista-pie{margin-top:6px;color:var(--suave)}

/* Tablas */
.pt-barra{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.pt-buscar{max-width:320px} .pt-info{color:var(--suave);font-size:13px;margin-right:auto} .pt-pag{display:flex;gap:4px}
.pt-scroll{overflow:auto;background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
.pt{width:100%;border-collapse:collapse;font-size:14px}
.pt th{position:sticky;top:0;background:var(--panel-2);text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);padding:11px 12px;border-bottom:1px solid var(--linea);cursor:pointer;white-space:nowrap;font-weight:600}
.pt th[aria-sort=ascending]::after{content:" ▲";font-size:9px} .pt th[aria-sort=descending]::after{content:" ▼";font-size:9px}
.pt td{padding:11px 12px;border-bottom:1px solid var(--linea);vertical-align:top}
.pt tbody tr:last-child td{border-bottom:0}
.pt th.der,.pt td.der{text-align:right;font-variant-numeric:tabular-nums}
.pt tfoot td{background:var(--panel-2);border-top:1px solid var(--linea-2)}
.pt tr.clic{cursor:pointer} .pt tr.clic:hover td{background:var(--hover)}
.pt small{color:var(--suave)} .pt-acc{white-space:nowrap}
.p-card .pt td{padding:8px 4px}
.pc-cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px} .pc-cab h2{margin:0 auto 0 0;font-size:21px;letter-spacing:-.01em}
.pi-alm{max-width:280px}

/* Impresión */
.pi-frame{position:fixed;width:0;height:0;border:0;right:0;bottom:0}
.pi-hoja{background:var(--panel-2);border:1px solid var(--linea);padding:16px;border-radius:16px;display:flex;justify-content:center}
.pi-hoja iframe{width:310px;min-height:300px;border:0;background:#fff;border-radius:6px;box-shadow:var(--sombra-2)}


/* Barra superior */
.pb{position:relative;z-index:5;display:flex;align-items:center;gap:12px;background:var(--barra);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--linea);padding:8px 14px;min-height:66px;flex:none}
.pb-marca{display:flex;gap:10px;align-items:center;color:var(--tinta);text-decoration:none;flex:none;min-width:0}
.pb-marca img{border-radius:11px}
.pb-marca span{display:flex;flex-direction:column;line-height:1.15;min-width:0} .pb-marca b{font-size:15px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pb-marca small{color:var(--suave);font-size:11.5px;font-weight:600}
.pb-nav{display:flex;gap:4px;overflow-x:auto;flex:1;scrollbar-width:none;padding:2px} .pb-nav::-webkit-scrollbar{display:none}
.pb-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 8px;border-radius:12px;color:var(--suave);text-decoration:none;font-size:11.5px;font-weight:600;min-width:64px;white-space:nowrap;transition:background .15s,color .15s}
.pb-nav a svg.lucide{width:20px;height:20px}
.pb-nav a:hover{background:var(--hover);color:var(--tinta)} .pb-nav a.on{background:color-mix(in srgb,var(--pri) 13%,transparent);color:var(--pri-t)}
.pb-turno,.pb-sync{display:flex;gap:6px;align-items:center;text-decoration:none;font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:99px;flex:none;border:1px solid transparent}
.pb-turno.ok{color:var(--ok-t);background:color-mix(in srgb,var(--ok) 12%,transparent)} .pb-turno.no{color:var(--mal-t);background:color-mix(in srgb,var(--mal) 12%,transparent)}
.pb-sync{color:var(--suave);background:var(--hover)}
.pb-sync.verde{color:var(--ok-t);background:color-mix(in srgb,var(--ok) 12%,transparent)} .pb-sync.amarillo{color:var(--av-t);background:color-mix(in srgb,var(--av) 16%,transparent)}
.pb-sync.rojo{color:var(--mal-t);background:color-mix(in srgb,var(--mal) 12%,transparent)} .pb-sync.azul{color:var(--pri-t);background:color-mix(in srgb,var(--pri) 12%,transparent)}
.pb-user{display:flex;gap:6px;align-items:center;flex:none}
.pb-yo{display:flex;gap:9px;align-items:center;padding:0 4px} .pb-yo > span{display:flex;flex-direction:column;line-height:1.15;font-weight:600;font-size:13.5px} .pb-yo small{color:var(--suave);font-weight:500;font-size:11.5px}
.pb-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:13px;color:var(--pri-tx);background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 60%,#000))}
.pb-ico{width:40px;height:40px;border-radius:12px;border:1px solid var(--linea);background:var(--panel);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--suave)}
.pb-ico:hover{background:var(--hover);color:var(--tinta)}
.pb-202{flex:none;padding-left:10px;border-left:1px solid var(--linea)} .pb-202 small{font-size:9.5px;line-height:1.1;max-width:62px;white-space:normal} .pb-202 img{height:18px}
.pm-main{flex:1;overflow:auto;padding:18px;min-height:0}

/* Pestañas internas */
.pp{display:flex;flex-direction:column;gap:14px}
.pp-tabs{display:flex;gap:4px;overflow-x:auto;background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:5px;box-shadow:var(--sombra);scrollbar-width:none}
.pp-tabs::-webkit-scrollbar{display:none}
.pp-tabs a{display:flex;gap:7px;align-items:center;padding:9px 13px;border-radius:11px;text-decoration:none;color:var(--suave);font-weight:600;font-size:14px;white-space:nowrap;min-height:42px}
.pp-tabs a:hover{background:var(--hover);color:var(--tinta)} .pp-tabs a.on{background:var(--tinta);color:var(--panel)}

/* Servicio: comedor y tarjetas */
.ps-cab{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .ps-cab h1{margin:0 auto 0 0;font-size:24px;letter-spacing:-.02em}
.ps-areas{display:flex;gap:4px;flex-wrap:wrap;margin-right:auto;background:var(--panel);border:1px solid var(--linea);border-radius:14px;padding:4px;box-shadow:var(--sombra)}
.ps-areas button{min-height:44px;padding:0 18px;border-radius:11px;border:0;background:transparent;font-weight:700;cursor:pointer;display:flex;gap:7px;align-items:center;color:var(--suave)}
.ps-areas button:hover{background:var(--hover);color:var(--tinta)} .ps-areas button.on{background:var(--tinta);color:var(--panel)}
.ps-acc{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ps-sw{display:flex;gap:7px;align-items:center;font-weight:600;min-height:44px;padding:0 8px}
.ps-leyenda{display:flex;gap:6px 14px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--suave);margin-bottom:14px}
.lg{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:-6px} .lg.libre{background:var(--ok)} .lg.ocupada{background:var(--pri)}
.lg.impresa{background:var(--av)} .lg.reservada{background:var(--res)} .ps-res{margin-left:auto;font-weight:600;color:var(--tinta)}
.ps-mapa{display:grid;gap:14px}
.ps-mesa{--e:var(--ok);position:relative;min-height:118px;border-radius:20px;border:1px solid var(--linea);background:var(--panel);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px;box-shadow:var(--sombra);transition:transform .08s,box-shadow .15s}
.ps-mesa::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:28px;height:4px;border-radius:4px;background:var(--e);opacity:.9}
.ps-mesa:hover{box-shadow:var(--sombra-2)} .ps-mesa:active{transform:scale(.98)}
.ps-mesa b{font-size:26px;line-height:1;letter-spacing:-.02em} .ps-mesa.redonda{border-radius:60px}
.ps-mesa.ocupada{--e:var(--mesero,var(--pri));background:color-mix(in srgb,var(--pri) 8%,var(--panel));border-color:color-mix(in srgb,var(--pri) 30%,var(--linea))}
.ps-mesa.impresa{--e:var(--av);background:color-mix(in srgb,var(--av) 10%,var(--panel));border-color:color-mix(in srgb,var(--av) 40%,var(--linea))}
.ps-mesa.reservada{--e:var(--res);background:color-mix(in srgb,var(--res) 8%,var(--panel));border-color:color-mix(in srgb,var(--res) 30%,var(--linea))}
.ps-mesa.tenue{opacity:.35}
.ps-mesa .p-badge{position:absolute;top:8px;right:10px;background:var(--tinta);color:var(--panel)}
.ps-tot{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums} .ps-det{font-size:12px;color:var(--suave);display:flex;gap:4px;align-items:center} .ps-det svg.lucide{width:14px;height:14px}
.ps-mes{font-size:11.5px;font-weight:700;color:var(--mesero,var(--suave));background:color-mix(in srgb,var(--mesero,var(--pri)) 12%,transparent);padding:1px 8px;border-radius:99px}
.ps-listo,.ps-pend{position:absolute;top:8px;left:12px;color:var(--ok)} .ps-pend{left:auto;right:12px;bottom:8px;top:auto;color:var(--pri-2)}
.ps-listo{animation:latir 1.2s infinite} @keyframes latir{50%{opacity:.3}}
.ps-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ps-card{position:relative;background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:14px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--sombra)}
.ps-card.impresa{border-color:color-mix(in srgb,var(--av) 50%,var(--linea))}
.ps-card header{display:flex;justify-content:space-between;gap:8px} .ps-card header span{color:var(--suave);font-size:12.5px;white-space:nowrap}
.ps-card-l{font-size:13.5px;display:flex;flex-direction:column;gap:2px;color:var(--suave)}
.ps-card footer{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--suave);border-top:1px dashed var(--linea);padding-top:9px} .ps-card footer b{font-size:18px;color:var(--tinta)}
.ps-card-abrir{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;border-radius:var(--radio);z-index:0}
.ps-card-acc{position:relative;z-index:1;display:flex;gap:6px} .ps-card-acc .btn{flex:1}
.ps-dom{display:flex;gap:6px;font-size:13px;color:var(--suave);align-items:flex-start}
.ps-kanban{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:14px;align-items:start}
.ps-kanban section{background:var(--panel-2);border:1px solid var(--linea);border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:220px}
.ps-kanban h2{margin:2px 4px;font-size:14px;display:flex;gap:7px;align-items:center;text-transform:uppercase;letter-spacing:.05em;color:var(--suave)}

/* Venta de mostrador (comida rápida) */
.po{display:grid;grid-template-columns:1fr 340px;gap:18px;min-height:100%}
.po-flujo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:20px 10px}
.po-flujo h1{margin:0;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;text-align:center}
.po-pasos{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap;justify-content:center}
.po-pasos li{display:flex;gap:7px;align-items:center;font-weight:600;font-size:13px;color:var(--tenue);padding:6px 12px 6px 6px;border-radius:99px;background:var(--panel);border:1px solid var(--linea)}
.po-pasos li span{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--hover);font-size:12px}
.po-pasos li.on{color:var(--tinta);border-color:var(--pri)} .po-pasos li.on span{background:var(--pri);color:var(--pri-tx)}
.po-pasos li.ok span{background:var(--ok);color:#fff}
.po-ops{display:grid;grid-template-columns:repeat(2,minmax(180px,320px));gap:18px;width:100%;justify-content:center}
.po-op{--c:var(--pri);aspect-ratio:1/1;max-height:340px;border-radius:28px;border:1px solid color-mix(in srgb,var(--c) 30%,var(--linea));cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--c);
  background:radial-gradient(120% 120% at 30% 0%,color-mix(in srgb,var(--c) 16%,var(--panel)),var(--panel) 70%);box-shadow:var(--sombra);transition:transform .08s,box-shadow .15s}
.po-op:hover{box-shadow:0 14px 34px color-mix(in srgb,var(--c) 25%,transparent)} .po-op:active{transform:scale(.97)}
.po-op svg{width:96px;height:96px} .po-op svg.lucide{width:88px;height:88px;stroke-width:1.6}
.po-op b{font-size:clamp(22px,2.4vw,30px);color:var(--tinta);letter-spacing:-.01em}
.po-op.hombre{--c:#2563eb} .po-op.mujer{--c:#db2777} .po-op.aqui{--c:#ea580c} .po-op.llevar{--c:#16a34a} .po-op.drive{--c:#7c3aed} .po-op.catering{--c:#0891b2}
/* Servicio: «Directo en tienda» (Comer aquí / Para llevar) y, si la tienda lo tiene, Drive thru aparte */
.po-svc{display:flex;gap:18px;justify-content:center;width:100%;align-items:flex-start}
.po-grupo{display:flex;flex-direction:column;gap:10px;min-width:0} .po-grupo .po-ops{width:auto}   /* la etiqueta va de un extremo al otro de sus cajas */
.po-cat{display:flex;align-items:center;justify-content:center;gap:6px;align-self:stretch;padding:6px 14px;border-radius:99px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--suave);background:var(--panel-2);border:1px solid var(--linea)}
.po-cat svg.lucide{width:15px;height:15px}
.po-svc.con-drive .po-ops{grid-template-columns:repeat(2,minmax(150px,280px))} .po-svc .po-ops:has(.po-op.drive){grid-template-columns:repeat(3,minmax(150px,280px))} .po-svc .po-ops.uno{grid-template-columns:minmax(150px,280px)}
.po-abiertas{background:var(--panel);border:1px solid var(--linea);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sombra);align-self:start;max-height:calc(100vh - 120px);overflow:auto}
.po-abiertas h2{margin:2px 4px 6px;font-size:15px;display:flex;gap:8px;align-items:center}
.po-ab{display:flex;justify-content:space-between;gap:10px;text-align:left;border:1px solid var(--linea);border-left:4px solid #16a34a;background:var(--panel-2);border-radius:12px;padding:10px 12px;cursor:pointer;min-height:56px}
.po-ab.aqui{border-left-color:#ea580c} .po-ab.drive{border-left-color:#7c3aed} .po-ab.catering{border-left-color:#0891b2} .po-ab:hover{background:var(--hover)}
.po-ab span{display:flex;flex-direction:column} .po-ab span:last-child{text-align:right} .po-ab small{color:var(--suave);font-size:12px}
.pc-tag{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--linea);background:var(--panel-2);border-radius:99px;padding:3px 10px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--tinta)}
.pc-tag svg.lucide{width:14px;height:14px} .pc-tag.llevar{color:var(--ok-t);border-color:color-mix(in srgb,var(--ok) 40%,var(--linea))} .pc-tag.aqui{color:#ea580c;border-color:color-mix(in srgb,#ea580c 40%,var(--linea))} .pc-tag.drive{color:#7c3aed;border-color:color-mix(in srgb,#7c3aed 40%,var(--linea))} .pc-tag.catering{color:#0891b2;border-color:color-mix(in srgb,#0891b2 40%,var(--linea))} .pc-tag.pago.ok{color:var(--ok-t);border-color:color-mix(in srgb,var(--ok) 45%,var(--linea));background:color-mix(in srgb,var(--ok) 10%,var(--panel-2))} .pc-tag.pago.av{color:var(--av-t);border-color:color-mix(in srgb,var(--av) 45%,var(--linea))} .pc-tag.pago.env{color:#0891b2;border-color:color-mix(in srgb,#0891b2 40%,var(--linea))}
.pc-pago-op{margin-bottom:12px} .pc-pago-ok{background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:color-mix(in srgb,var(--ok) 35%,transparent)} .pm-cuerpo .btn.full{width:100%;justify-content:center;margin-top:6px}

/* Cuenta */
.pm-main:has(.pc){padding:0;overflow:hidden}
.pc{display:grid;grid-template-columns:minmax(330px,410px) 1fr;grid-template-rows:1fr auto;height:100%;min-height:0}
.pc-ticket{grid-row:1;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--linea);min-height:0}
.pc-cab{display:flex;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--linea);align-items:flex-start}
.pc-cab h1{margin:0;font-size:21px;letter-spacing:-.02em} .pc-cab p{margin:3px 0 0;font-size:13px;color:var(--suave);display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.pc-notas{color:var(--av-t) !important}
.pc-lineas{list-style:none;margin:0;padding:8px;overflow:auto;flex:1;min-height:80px}
.pl{display:grid;grid-template-columns:40px 1fr auto;gap:8px;padding:10px;border-radius:12px;cursor:pointer;border:1.5px solid transparent;align-items:start;transition:background .1s}
.pl:hover{background:var(--hover)} .pl.sel{border-color:var(--pri);background:color-mix(in srgb,var(--pri) 8%,var(--panel))}
.pl-c{font-weight:700;font-size:15px;text-align:center;background:var(--hover);border-radius:9px;padding:3px 0}
.pl-n{display:flex;flex-direction:column;font-weight:600;min-width:0} .pl-n small{font-weight:500;color:var(--suave);font-size:12.5px}
.pl-n small.nota{color:var(--av-t);font-style:italic} .pl-n small.desc{color:var(--ok-t)} .pl-n em{font-style:normal;font-size:11px;background:color-mix(in srgb,var(--pri) 14%,transparent);color:var(--pri-t);border-radius:6px;padding:0 6px;margin-left:4px}
.pl-i{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.pl-e{display:flex;gap:3px;align-items:center;font-size:11px;font-weight:600;color:var(--suave)} .pl-e svg.lucide{width:12px;height:12px}
.pl.nuevo .pl-e{color:var(--pri-2)} .pl.listo .pl-e{color:var(--ok-t)} .pl.prep .pl-e{color:var(--av-t)}
.pl.nuevo .pl-c{background:color-mix(in srgb,var(--pri-2) 16%,transparent);color:var(--pri-2)}
.pl.can{opacity:.55;cursor:default} .pl.can .pl-n{text-decoration:line-through} .pl.can small{text-decoration:none;color:var(--mal-t)}
.pl-t{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tenue);padding:10px 10px 2px}
.pc-sel{display:flex;flex-wrap:wrap;gap:5px;padding:10px;border-top:1px solid var(--linea);background:var(--panel-2)}
.pc-sel .btn{flex:1 1 auto;flex-direction:column;gap:2px;min-height:52px;font-size:11.5px;padding:2px 8px;box-shadow:none;background:var(--panel)}
.pc-sel .btn.peligro{background:var(--panel)}
.pc-tot{display:grid;grid-template-columns:1fr auto;gap:3px 10px;margin:0;padding:12px 16px 14px;border-top:1px solid var(--linea);font-variant-numeric:tabular-nums}
.pc-tot dt{color:var(--suave)} .pc-tot dd{margin:0;text-align:right;font-weight:600} .pc-tot .g{font-size:24px;font-weight:800;color:var(--tinta);letter-spacing:-.02em;margin-top:4px}
.pc-menu{grid-row:1;display:flex;flex-direction:column;min-height:0;min-width:0;padding:14px;gap:10px}
.pc-busca{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .pc-busca input{flex:1;min-width:160px}
.pc-tiempos{display:flex;border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:var(--panel)}
.pc-tiempos button{min-height:44px;min-width:46px;border:0;background:transparent;font-weight:700;cursor:pointer;color:var(--suave)} .pc-tiempos button.on{background:var(--tinta);color:var(--panel)}
.pc-grupos{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 4px;flex:none;scrollbar-width:none} .pc-grupos::-webkit-scrollbar{display:none}
.pc-grupos button{flex:none;display:flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:99px;border:1px solid var(--linea);background:var(--panel);font-weight:700;cursor:pointer;box-shadow:var(--sombra);color:var(--tinta)}
.pc-grupos button::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.pc-grupos button.on{background:var(--c);border-color:transparent;color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--c) 40%,transparent)}
.pc-grupos button.on::before{background:rgba(255,255,255,.85)}
.pc-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-auto-rows:max-content;gap:10px;overflow:auto;align-content:start;flex:1;min-height:0;padding:2px}
.pc-p{position:relative;min-height:96px;border-radius:16px;border:1px solid color-mix(in srgb,var(--c) 22%,var(--linea));background:linear-gradient(160deg,color-mix(in srgb,var(--c) 11%,var(--panel)),var(--panel) 70%);cursor:pointer;padding:11px 12px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:6px;box-shadow:var(--sombra);transition:transform .06s,box-shadow .15s}
.pc-p:hover{box-shadow:var(--sombra-2)} .pc-p:active{transform:scale(.97)}
.pc-p span{font-weight:650;line-height:1.2} .pc-p b{color:var(--c);font-size:14.5px;filter:saturate(1.1)}
.pc-p.agotado{opacity:.45;filter:grayscale(.8)}
.pc-p em{position:absolute;top:8px;right:8px;font-style:normal;font-size:10.5px;font-weight:700;background:var(--mal);color:#fff;border-radius:99px;padding:2px 8px}
.pc-mod{position:absolute;bottom:9px;right:10px;color:var(--tenue)} .pc-mod svg.lucide{width:15px;height:15px}
.pc-acc{grid-column:1/-1;display:flex;gap:7px;padding:10px 12px;background:var(--barra);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linea);overflow-x:auto}
.pc-acc .btn{flex:1 0 auto;flex-direction:column;gap:3px;min-height:60px;font-size:12px;padding:4px 12px;box-shadow:none}
.pc-acc .btn.primario,.pc-acc .btn.primario-2{font-size:14px;min-width:130px}

/* Productos con foto */
.pc-prods.con-foto{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.pc-p.foto{padding:0;overflow:hidden;justify-content:flex-start;gap:0;min-height:0;background:var(--panel);border-color:var(--linea)}
.pc-p.foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;padding:8px;border-bottom:1px solid var(--linea)}
.pc-p.foto span{padding:10px 12px 0;font-size:14px;min-height:38px}
.pc-p.foto b{padding:4px 12px 12px;font-size:16px;font-weight:800;color:var(--tinta);filter:none}
.pc-p.foto .pc-mod{bottom:12px}
.pc-p.promo{border-color:color-mix(in srgb,var(--mal) 45%,var(--linea));box-shadow:0 0 0 2px color-mix(in srgb,var(--mal) 18%,transparent),var(--sombra)}
.pc-p.promo::after{content:"PROMO";position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--mal);border-radius:99px;padding:3px 8px}
.pc-mini{width:44px;height:33px;object-fit:contain;background:#fff;border-radius:8px;border:1px solid var(--linea);display:block}
.pl-n small.comp,.pkd-card li small.comp{color:var(--tinta);opacity:.8;font-weight:600}
.pmd-prod{display:flex;gap:16px;align-items:center;margin-bottom:14px;padding:12px;border-radius:16px;background:var(--panel-2);border:1px solid var(--linea)}
.pmd-prod img{width:150px;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:12px;padding:6px;flex:none}
.pmd-prod b{font-size:22px} .pmd-prod ul{margin:6px 0 0;padding-left:18px;color:var(--suave);font-size:14px}
.pb-logo{display:flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:12px;background:#111827;flex:none}
.pb-logo img{height:26px;width:auto;display:block}

/* Modificadores */
.pmd-g{border:1px solid var(--linea);border-radius:16px;margin:0 0 12px;padding:10px 12px;background:var(--panel-2)}
.pmd-g legend{font-weight:700;padding:0 6px} .pmd-g legend small{font-weight:500;color:var(--suave)}
.pmd-ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.pmd-op{min-height:54px;border:1.5px solid var(--linea);border-radius:12px;background:var(--panel);cursor:pointer;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .12s}
.pmd-op small{color:var(--suave);font-weight:500} .pmd-op.on{border-color:var(--pri);background:color-mix(in srgb,var(--pri) 10%,var(--panel));color:var(--pri-t)}

.pmd-op.ing{flex-direction:row;gap:7px;justify-content:flex-start;padding:0 12px;border-color:color-mix(in srgb,var(--ok) 45%,var(--linea));background:color-mix(in srgb,var(--ok) 7%,var(--panel))}
.pmd-op.ing svg.lucide{color:var(--ok);width:17px;height:17px}
.pmd-op.ing.fuera{border-color:color-mix(in srgb,var(--mal) 55%,var(--linea));background:color-mix(in srgb,var(--mal) 8%,var(--panel));color:var(--mal-t)}
.pmd-op.ing.fuera span{text-decoration:line-through;text-decoration-thickness:2px} .pmd-op.ing.fuera svg.lucide{color:var(--mal)}
.pmd-op.ing small{margin-left:auto;font-weight:800;color:var(--mal-t);text-transform:uppercase;font-size:11px}
.pmd-extra .pmd-op.on{border-color:var(--pri);background:color-mix(in srgb,var(--pri) 12%,var(--panel))}
.pmd-extra .pmd-op{flex-direction:row;gap:6px} .pmd-extra .pmd-op small{margin-left:4px}
.pmd-mas{display:block;color:var(--suave);font-size:13px;margin-top:2px}
.pl-n small.sin,.pkd-card li small.sin{color:var(--mal-t);font-weight:700}
.pl-n small.mas,.pkd-card li small.mas{color:var(--ok-t);font-weight:700}

/* Dividir */
.pdv{display:flex;flex-direction:column;gap:7px}
.pdv-f{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--linea);border-radius:12px;background:var(--panel-2)}
.pdv-f span:first-child{display:flex;flex-direction:column} .pdv-f small{color:var(--suave)}
.pdv-n{display:flex;align-items:center;gap:6px} .pdv-n b{min-width:36px;text-align:center;font-size:18px}
.pdv-asi{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* Cobro */
.pm-cobro{max-width:1080px}
.pco{display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:16px}
.pco-res{display:flex;flex-direction:column;gap:12px}
.pco-res .pc-tot{border:1px solid var(--linea);border-radius:16px;background:var(--panel-2)}
.pco-pagos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.pco-pagos li{display:flex;gap:8px;justify-content:space-between;align-items:center;border:1px solid var(--linea);border-radius:12px;padding:8px 10px}
.pco-pagos li > span{display:flex;flex-direction:column} .pco-pagos li > span:nth-child(2){text-align:right;font-weight:700;margin-left:auto} .pco-pagos small{color:var(--suave);font-weight:500}
.pco-cli{display:flex;gap:6px;align-items:center;font-size:13.5px;color:var(--suave);flex-wrap:wrap}
.pco-formas{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.pco-f{min-height:68px;border:1.5px solid var(--linea);border-radius:14px;background:var(--panel);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:600;font-size:13px;color:var(--suave);text-align:center;padding:6px;transition:all .12s}
.pco-f svg.lucide{color:var(--c);width:22px;height:22px} .pco-f.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--panel));color:var(--tinta);box-shadow:0 4px 14px color-mix(in srgb,var(--c) 22%,transparent)}
.pco-monto{display:flex;flex-direction:column;gap:9px}
.pco-rap{display:flex;flex-wrap:wrap;gap:5px} .pco-rap .btn{flex:1 1 70px;min-height:40px;font-size:13px;padding:0 6px}
.pco-monto .pk-t{min-height:52px}
.pco-prop{display:flex;gap:4px;align-items:center;flex-wrap:wrap} .pco-prop span{font-weight:700;font-size:13px;margin-right:4px}
.pco-fin{text-align:center;padding:14px 0} .pco-fin span{display:block;color:var(--suave);font-weight:600} .pco-fin b{font-size:52px;color:var(--ok-t);letter-spacing:-.03em}

/* Caja */
.pcj-vacio{text-align:center;padding:60px 16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.pcj-vacio svg.lucide{width:52px;height:52px;color:var(--tenue)} .pcj-vacio h2{margin:0}
.pcj-cab{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px} .pcj-cab h2{margin:0;letter-spacing:-.01em} .pcj-cab p{margin:3px 0 0;color:var(--suave);font-size:13.5px}
.pcj-acc{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}
.pcz{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pcz-den{display:flex;flex-direction:column;gap:6px}
.pcz-den label{display:grid;grid-template-columns:1fr 90px 100px;gap:8px;align-items:center;font-size:14px}
.pcz-den input,.pcz-o input{min-height:42px;border:1px solid var(--linea);border-radius:10px;padding:4px 8px;text-align:right;width:100%;background:var(--panel-2)}
.pcz-den b{text-align:right;font-variant-numeric:tabular-nums}
.pcz-res h3{font-size:14px;margin:14px 0 6px}
.pcz-res .pc-tot{border:1px solid var(--linea);border-radius:14px;background:var(--panel-2)}
.pcz-o{display:grid;grid-template-columns:1fr 120px;gap:8px;align-items:center;margin-bottom:6px;font-size:14px} .pcz-o small{color:var(--suave)}

/* Monitor de producción */
.pkd-cab{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.pkd-res{color:var(--suave);font-weight:600;font-size:13.5px}
.pkd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;align-items:start}
.pkd-card{--k:var(--ok);background:var(--panel);border:1px solid var(--linea);border-radius:18px;box-shadow:var(--sombra);display:flex;flex-direction:column;overflow:hidden}
.pkd-card.k-amarillo{--k:var(--av)} .pkd-card.k-rojo{--k:var(--mal);animation:alerta 2s infinite} .pkd-card.k-lista{--k:var(--tenue);opacity:.8} .pkd-card.k-catering{--k:#0891b2} .pkd-card.k-catering .pkd-t{color:#0891b2;display:inline-flex;gap:4px;align-items:center} .pkd-card.k-catering .pkd-t svg.lucide{width:16px;height:16px}
@keyframes alerta{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--mal) 30%,transparent)}}
.pkd-card header{padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;border-bottom:1px solid var(--linea);background:color-mix(in srgb,var(--k) 12%,var(--panel));box-shadow:inset 0 4px 0 var(--k)}
.pkd-card header b{font-size:17px} .pkd-card header small{grid-column:1/-1;color:var(--suave);font-size:12.5px}
.pkd-t{font-weight:800;font-variant-numeric:tabular-nums;color:var(--k);filter:brightness(.9)}
.pkd-card ul{list-style:none;margin:0;padding:6px}
.pkd-card li button{width:100%;display:grid;grid-template-columns:34px 1fr auto;gap:6px;text-align:left;border:0;background:transparent;padding:9px 8px;border-radius:12px;cursor:pointer;font-size:15px;align-items:start;min-height:46px}
.pkd-card li button:hover{background:var(--hover)} .pkd-card li button b{font-size:18px}
.pkd-card li button span{display:flex;flex-direction:column;font-weight:600} .pkd-card li small{font-weight:500;color:var(--suave)} .pkd-card li small.nota{color:var(--av-t);font-style:italic}
.pkd-card li em{font-style:normal;font-size:11px;background:color-mix(in srgb,var(--pri) 14%,transparent);color:var(--pri-t);border-radius:6px;padding:0 6px}
.pkd-card li.ok button{opacity:.5;text-decoration:line-through} .pkd-card li.ok svg.lucide{color:var(--ok)}
.pkd-card li.can{padding:9px 8px;color:var(--mal-t);text-decoration:line-through} .pkd-card li.can em{background:color-mix(in srgb,var(--mal) 14%,transparent);color:var(--mal-t);text-decoration:none}
.pkd-card footer{padding:10px;border-top:1px solid var(--linea)} .pkd-card footer .btn{width:100%}

/* Catálogos */
.pd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:9px;margin-bottom:10px}
.pd-p{min-height:62px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--ok) 40%,var(--linea));background:var(--panel);cursor:pointer;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;text-align:center}
.pd-p small{font-weight:600;color:var(--ok-t)} .pd-p.agotado{border-color:color-mix(in srgb,var(--mal) 45%,var(--linea));background:color-mix(in srgb,var(--mal) 7%,var(--panel))} .pd-p.agotado small{color:var(--mal-t)}
.pi-c{width:110px;min-height:40px;border:1px solid var(--linea);border-radius:10px;padding:4px 8px;text-align:right;background:var(--panel-2)}

/* Reportes */
.pr-fil{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.pr-fil label{display:flex;flex-direction:column;font-size:12.5px;font-weight:600;color:var(--suave);gap:4px} .pr-fil input{width:170px}
.pr-barras{display:flex;flex-direction:column;gap:7px}
.pr-b{display:grid;grid-template-columns:130px 1fr 110px;gap:10px;align-items:center;font-size:13px}
.pr-b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--suave)} .pr-b i{display:block;height:12px;border-radius:99px;background:linear-gradient(90deg,var(--pri),var(--pri-2));min-width:4px} .pr-b b{text-align:right;font-variant-numeric:tabular-nums}

/* Administración */
.pp-perm{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:14px}
.pp-perm fieldset{border:1px solid var(--linea);border-radius:16px;padding:8px 14px 12px;margin:0;background:var(--panel-2)}
.pp-perm legend{font-weight:700;padding:0 4px} .pp-perm legend label{display:flex;gap:7px;align-items:center}
.pp-perm label{display:flex;gap:9px;align-items:center;min-height:34px;font-size:14px}
.pa-json{background:#0b1220;color:#e2e8f0;border-radius:14px;padding:14px;max-height:50vh;overflow:auto;font-size:12px}

/* Conexión */
.pcx-prog{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0;text-align:center}
.pcx-giro{width:36px;height:36px;border-radius:50%;border:4px solid color-mix(in srgb,var(--pri) 20%,transparent);border-top-color:var(--pri);animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.pcx-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0} .pcx-dl dt{color:var(--suave)} .pcx-dl dd{margin:0;font-weight:600} .pcx-dl small{color:var(--suave);font-weight:500}

/* ===================== Interior moderno =====================
   Barra superior de cristal oscuro (igual que el acceso), fondo con brillo de la marca, paneles flotantes,
   botones con brillo, mosaicos que se levantan al tocar. Va antes de las reglas de pantallas chicas. */
#pos-app{background:radial-gradient(70% 60% at 0% 0%,color-mix(in srgb,var(--pri) 10%,transparent),transparent 60%),radial-gradient(60% 50% at 100% 100%,color-mix(in srgb,var(--pri) 7%,transparent),transparent 60%),var(--fondo)}
.pm-main{background-image:radial-gradient(color-mix(in srgb,var(--tinta) 6%,transparent) 1px,transparent 1px);background-size:24px 24px}
/* Barra superior */
.pb{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),rgba(9,11,16,.92);color:#e8ebf2;border-bottom:1px solid rgba(255,255,255,.07);box-shadow:0 8px 30px rgba(0,0,0,.18);min-height:68px}
.pb::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--pri) 70%,transparent),transparent);opacity:.7}
.pb-marca{color:#fff} .pb-marca small{color:rgba(255,255,255,.5)}
.pb-logo{background:transparent;padding:0 4px}
.pb-nav{gap:4px}
.pb-nav a{color:rgba(255,255,255,.58);border:1px solid transparent}
.pb-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.pb-nav a.on{color:var(--pri-tx);background:linear-gradient(135deg,color-mix(in srgb,var(--pri) 85%,#fff 0%),color-mix(in srgb,var(--pri) 70%,#000));border-color:rgba(255,255,255,.14);box-shadow:0 6px 20px color-mix(in srgb,var(--pri) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.pb-turno.ok{color:#86efac;background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25)} .pb-turno.no{color:#fda4af;background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.25)}
.pb-sync{color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)} .pb-sync.verde{color:#86efac;background:rgba(34,197,94,.12)} .pb-sync.amarillo{color:#fcd34d;background:rgba(245,158,11,.14)} .pb-sync.rojo{color:#fda4af;background:rgba(244,63,94,.14)}
/* Menú (decisión del dueño 2026-11-03: «tecnológico» y luego «más elegante»): íconos de línea fina sin mosaico, en tono neutro; el color de la
   sección (--c, js/secciones.js) aparece solo al pasar el mouse y en la activa, que lleva una píldora de cristal tenue y una línea fina de luz.
   Si el menú no cabe en una fila pasa a la barra compacta (abajo); ya no se desplaza (decisión del dueño 2026-11-10). */
.pb-nav{gap:2px;align-items:stretch;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent);padding:2px 10px}
.pb-nav a{position:relative;gap:6px;padding:9px 10px 10px;min-width:70px;border-radius:13px;border:1px solid transparent;color:rgba(255,255,255,.5);font-size:11px;font-weight:600;letter-spacing:.02em;transition:color .2s,background .2s,border-color .2s}
.pb-nav a .pb-ic{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-style:normal;color:rgba(255,255,255,.62);transition:color .2s,transform .2s,filter .2s}
.pb-nav a .pb-ic svg.lucide{width:20px;height:20px;stroke-width:1.6}
.pb-nav a:hover{background:rgba(255,255,255,.035);color:rgba(255,255,255,.9)} .pb-nav a:hover .pb-ic{color:color-mix(in srgb,var(--c) 55%,#fff);transform:translateY(-1px)}
.pb-nav a.on{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.25)}
.pb-nav a.on .pb-ic{color:color-mix(in srgb,var(--c) 45%,#fff);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 70%,transparent))}
.pb-nav a.on::after{content:"";position:absolute;left:30%;right:30%;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--c),transparent);box-shadow:0 0 10px var(--c)}
.pb-nav a:focus-visible{outline:2px solid var(--c);outline-offset:-2px}
/* Barra compacta (ajustarNav en js/app.js): cuando el menú no cabe en una fila, ícono al lado del nombre y en varias filas; todo a la vista */
.pb-nav.compacta{display:grid;justify-content:start;align-content:center;overflow:hidden;min-width:0;-webkit-mask-image:none;mask-image:none;padding:2px 4px;gap:2px}
.pb-nav.compacta a{flex-direction:row;justify-content:flex-start;gap:6px;padding:6px 9px;min-width:max-content;border-radius:10px}
.pb-nav.compacta a .pb-ic{width:16px;height:16px} .pb-nav.compacta a .pb-ic svg.lucide{width:16px;height:16px}
.pb-nav.compacta a.on::after{left:20%;right:20%}
/* Tarjeta «qué es esta sección» */
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 20%,transparent),transparent 55%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 18px,rgba(12,15,22,.96);
  border:1px solid color-mix(in srgb,var(--c) 40%,rgba(255,255,255,.1));box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.3),0 0 40px color-mix(in srgb,var(--c) 18%,transparent);backdrop-filter:blur(14px)}
/* Encabezado explicativo de las pantallas con pestañas */
.ps-intro{position:relative;overflow:hidden;display:flex;gap:16px;align-items:flex-start;margin:0 0 12px;padding:16px 18px;border-radius:var(--radio);border:1px solid color-mix(in srgb,var(--c) 30%,var(--linea));
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 60%),linear-gradient(90deg,color-mix(in srgb,var(--c) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(color-mix(in srgb,var(--c) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,var(--panel);box-shadow:var(--sombra)}
.ps-intro::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 30%,transparent));box-shadow:0 0 14px var(--c)}
.ps-intro .pb-ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-style:normal;color:#fff;flex:none;background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 50%,#000));box-shadow:0 10px 26px color-mix(in srgb,var(--c) 35%,transparent)}
.ps-intro .pb-ic svg.lucide{width:24px;height:24px}
.ps-intro-t{flex:1;min-width:0} .ps-intro-k{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 75%,var(--tinta));margin-bottom:4px}
.ps-intro p{margin:0;font-size:14px;line-height:1.55;color:var(--tinta)} .ps-intro p + p{margin-top:8px}
.ps-intro-p{display:block;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--c) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--c) 20%,var(--linea));font-size:13.5px!important}
.ps-intro-p svg.lucide{width:15px;height:15px;vertical-align:-2px;margin-right:4px;color:var(--c)}
.ps-intro [data-intro]{flex:none;white-space:nowrap}
.ps-intro.min{padding:8px 12px;align-items:center} .ps-intro.min .pb-ic{width:30px;height:30px;border-radius:9px;box-shadow:none} .ps-intro.min .pb-ic svg.lucide{width:16px;height:16px}
.ps-intro.min p{display:none} .ps-intro.min .ps-intro-k{margin:0}
@media (max-width:640px){ .ps-intro{flex-wrap:wrap;gap:10px;padding:12px} .ps-intro .pb-ic{width:38px;height:38px} .ps-intro-t{flex-basis:calc(100% - 56px)} .ps-intro [data-intro]{margin-left:auto} .pb-nav a{min-width:60px;padding:8px 6px} }
@media (prefers-reduced-motion:reduce){ .pb-nav a,.pb-nav a .pb-ic{transition:none} }
.pb-ico{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.75)} .pb-ico:hover{background:rgba(255,255,255,.12);color:#fff}
.pb-yo > span{color:#fff} .pb-yo small{color:rgba(255,255,255,.5)}
.pb-av{box-shadow:0 0 0 2px rgba(255,255,255,.12),0 4px 14px color-mix(in srgb,var(--pri) 35%,transparent)}
.pb-202{border-left-color:rgba(255,255,255,.1)} .pb .p-202 img{filter:none;opacity:.85} .pb .p-202{color:rgba(255,255,255,.45)}
/* Botones */
.btn{border-radius:14px}
.btn.primario{background:linear-gradient(135deg,color-mix(in srgb,var(--pri) 92%,#fff),color-mix(in srgb,var(--pri) 80%,#000));box-shadow:0 8px 22px color-mix(in srgb,var(--pri) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primario:hover{filter:brightness(1.06)}
.btn.primario-2{background:linear-gradient(135deg,#1f2433,#0e1118);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12)}
/* Tarjetas y pestañas */
.p-card,.p-kpi,.pt-scroll,.pp-tabs,.ps-areas,.po-abiertas,.ps-card{border-color:color-mix(in srgb,var(--linea) 80%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,var(--sombra)}
.p-kpi{position:relative;overflow:hidden} .p-kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--pri),transparent);opacity:.8}
.pp-tabs a.on,.ps-areas button.on{background:linear-gradient(135deg,color-mix(in srgb,var(--pri) 92%,#fff),color-mix(in srgb,var(--pri) 78%,#000));color:var(--pri-tx);box-shadow:0 6px 18px color-mix(in srgb,var(--pri) 30%,transparent)}
.pc-tiempos button.on{background:var(--pri);color:var(--pri-tx)}
/* Venta: pasos y opciones grandes */
.po-flujo h1{font-weight:800;letter-spacing:-.03em}
.po-pasos li{backdrop-filter:blur(8px)} .po-pasos li.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 18%,transparent)}
.po-op{position:relative;overflow:hidden;border-radius:32px;background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--c) 22%,var(--panel)),var(--panel) 72%);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px rgba(0,0,0,.12)}
.po-op::after{content:"";position:absolute;inset:auto 18% -40% 18%;height:60%;border-radius:50%;background:var(--c);opacity:.14;filter:blur(30px);transition:opacity .2s}
.po-op:hover{transform:translateY(-3px)} .po-op:hover::after{opacity:.28}
.po-op svg{filter:drop-shadow(0 8px 18px color-mix(in srgb,var(--c) 35%,transparent))}
/* Cuenta: paneles flotantes */
.pc{gap:12px;padding:12px 12px 0;background:transparent}
.pc-ticket{border:1px solid var(--linea);border-radius:22px;overflow:hidden;box-shadow:var(--sombra-2)}
.pc-cab{background:linear-gradient(180deg,color-mix(in srgb,var(--pri) 8%,var(--panel)),var(--panel))}
.pc-tot{background:var(--panel-2)}
.pc-tot dt.g,.pc-tot dd.g{padding-top:8px;border-top:1px dashed var(--linea-2)}
.pc-tot dd.g{background:linear-gradient(90deg,var(--tinta),color-mix(in srgb,var(--pri) 70%,var(--tinta)));-webkit-background-clip:text;background-clip:text;color:transparent}
.pc-menu{padding:2px 2px 0}
.pc-busca input{border-radius:14px}
.pc-grupos button{border-radius:14px}
.pc-p{border-radius:18px;transition:transform .12s,box-shadow .2s}
.pc-p:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.16)}
.pc-p.foto img{transition:transform .35s} .pc-p.foto:hover img{transform:scale(1.06)}
.pl.sel{box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 12%,transparent)}
.pc-acc{margin:0 -12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),color-mix(in srgb,var(--panel) 82%,transparent);box-shadow:0 -10px 30px rgba(0,0,0,.08)}
/* Ventanas */
.pm-fondo{background:rgba(6,8,14,.55);backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2)}
.pm-caja{border-radius:26px;box-shadow:0 30px 80px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.06) inset}
.pmd-g{border-radius:18px}
.pco-f{border-radius:16px} .pco-f.on{transform:translateY(-1px)}
.pco-fin b{background:linear-gradient(90deg,var(--ok),color-mix(in srgb,var(--ok) 60%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent}
/* Extras con cantidad */
.pmd-extra .pmd-ops{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.pmd-x{display:flex;gap:6px;min-width:0}
.pmd-x .pmd-op{flex:1;min-width:0;flex-direction:row;gap:8px;justify-content:flex-start;padding:0 12px;text-align:left}
.pmd-x .pmd-op span{flex:1;min-width:0;line-height:1.15}
.pmd-x .pmd-op small{margin-left:auto;white-space:nowrap}
.pmd-x .pmd-op svg.lucide{width:16px;height:16px;color:var(--suave);flex:none}
.pmd-x.on .pmd-op{border-color:var(--pri);background:color-mix(in srgb,var(--pri) 12%,var(--panel))}
.pmd-n{flex:none;min-width:30px;height:24px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;background:var(--pri);color:var(--pri-tx);font-size:12.5px}
.pmd-menos{flex:none;width:44px;border-radius:12px;border:1.5px solid var(--linea);background:var(--panel);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tinta)}
.pmd-menos:hover{background:var(--hover)}
/* Monitor de cocina */
.pkd-card{border-radius:22px;box-shadow:var(--sombra-2)}
.pkd-card header{backdrop-filter:blur(6px)}

/* Pantallas medianas */
@media (max-width:1480px){
  .pb-202 small,.pb-yo > span{display:none}
}
@media (max-width:1180px){
  .pb-marca span{display:none}
}
/* Pantallas angostas */
@media (max-width:900px){
  body{overflow:auto} #pos-app{height:auto;min-height:100%}
  .pb{flex-wrap:wrap} .pb-nav{order:3;flex-basis:100%} .pb-202{display:none}
  .pc{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto}
  .pm-main:has(.pc){overflow:visible}
  .pc-ticket,.pc-menu{grid-row:auto;min-width:0} .pc-ticket{border-right:0;border-bottom:1px solid var(--linea)} .pc-lineas{max-height:42vh}
  .pc-prods{grid-template-columns:repeat(auto-fill,minmax(115px,1fr));max-height:none;overflow:visible}
  .pc-acc{position:sticky;bottom:0;flex-wrap:nowrap}
  .pco{grid-template-columns:1fr} .pcz{grid-template-columns:1fr}
  .ps-kanban{grid-template-columns:1fr}
  .po-svc{flex-direction:column;align-items:stretch} .po-svc.con-drive .po-ops{grid-template-columns:1fr 1fr} .po-svc .po-ops.uno{grid-template-columns:1fr} .po-svc .po-ops.uno .po-op{aspect-ratio:auto;min-height:110px;flex-direction:row;gap:14px}
  .po{grid-template-columns:1fr} .po-ops{grid-template-columns:1fr 1fr;gap:12px} .po-op svg{width:64px;height:64px} .po-op svg.lucide{width:60px;height:60px}
  .ps-mapa{grid-template-columns:repeat(auto-fill,minmax(100px,1fr)) !important;grid-template-rows:none !important}
  .ps-mapa .ps-mesa{grid-column:auto !important;grid-row:auto !important}
}
@media (max-width:480px){
  .pm-main{padding:12px} .pm-fondo{padding:0;align-items:flex-end} .pm-caja{max-height:100vh;border-radius:22px 22px 0 0}
  .pb-marca span{display:none}
  .pr-b{grid-template-columns:90px 1fr 90px}
  .pcz-den label{grid-template-columns:1fr 70px 80px}
}
}


@media print{
  body{overflow:visible;background:#fff} #pos-app{height:auto} .pb,.pp-tabs,.pr-fil,.pt-barra,#pos-toasts{display:none !important}
  .pm-main{overflow:visible} .p-card,.p-kpi{box-shadow:none}
}

/* ---------- Planeación (proyección, pedido sugerido, entregas) ---------- */
.pn-aviso{display:flex;gap:8px;align-items:flex-start;background:color-mix(in srgb,var(--info) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--info) 30%,transparent);border-radius:var(--radio-s);padding:10px 14px;font-size:13.5px;color:var(--tinta);margin:0 0 14px}
.pn-aviso svg{flex:none;width:18px;height:18px;color:var(--info);margin-top:1px}
.pn-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin:0 0 16px}
.pn-card{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);padding:16px 18px;box-shadow:var(--sombra);min-width:0;margin:0 0 16px}
.pn-grid .pn-card{margin:0}
.pn-card h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:16px} .pn-card h3 svg{width:18px;height:18px;color:var(--pri)}
.pn-card h3:not(:first-child){margin-top:20px}
.pn-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.pn-cal-c{font-size:12px;font-weight:700;color:var(--suave);text-align:center;padding:2px 0}
.pn-dia{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:76px;padding:7px 8px;border-radius:12px;border:1px solid var(--linea);text-align:left;cursor:pointer;font:inherit;color:var(--tinta);
  background:color-mix(in srgb,var(--pri) calc(var(--k) * 100%),var(--panel));transition:transform .12s,box-shadow .12s}
.pn-dia:hover{transform:translateY(-1px);box-shadow:var(--sombra-2)}
.pn-dia .n{font-weight:800;font-size:15px} .pn-dia b{font-size:12.5px;font-variant-numeric:tabular-nums;margin-top:auto}
.pn-dia b.c{display:none}
.pn-dia small{font-size:10.5px;line-height:1.15;color:var(--av-t);font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pn-dia .q,.pn-ley b.q{position:absolute;top:6px;right:7px;font-size:10px;font-weight:800;background:var(--ok);color:#fff;border-radius:6px;padding:1px 5px}
/* Pedidos programados (catering) en el calendario de la proyección */
.pn-dia .pg,.pn-pg{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:#0891b2;color:#fff;vertical-align:middle}
.pn-dia .pg{position:absolute;top:6px;right:34px} .pn-dia .pg svg.lucide,.pn-pg svg.lucide{width:13px;height:13px}
.pn-dia:not(:has(.q)) .pg{right:7px}
.pn-ley b.q{position:static}
.pn-dia.esp{border:2px solid var(--av)} .pn-dia.hoy{outline:2px solid var(--pri);outline-offset:1px}
.pn-ley{font-size:12.5px;color:var(--suave);margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pn-ley svg{width:15px;height:15px;vertical-align:-3px}
.pn-sw{display:inline-block;width:14px;height:14px;border-radius:4px;background:color-mix(in srgb,var(--pri) 45%,var(--panel));border:1px solid var(--linea)} .pn-sw.esp{background:var(--panel);border:2px solid var(--av)}
.pn-dow{display:flex;flex-direction:column;gap:8px}
.pn-dow-f{display:grid;grid-template-columns:86px 30px minmax(0,1fr) 48px 92px;align-items:center;gap:8px;font-size:13.5px}
.pn-dow-f .c{color:var(--suave);font-weight:700} .pn-dow-f .f{text-align:right;font-weight:700;font-variant-numeric:tabular-nums} .pn-dow-f .v{text-align:right;color:var(--suave);font-variant-numeric:tabular-nums}
.pn-dow-f .b{height:10px;border-radius:6px;background:var(--hover);overflow:hidden} .pn-dow-f .b i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--pri),var(--pri-2))}
.pn-ev{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pn-ev li{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:baseline;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--linea);font-size:13.5px}
.pn-ev li:last-child{border-bottom:0} .pn-ev li span{color:var(--suave);font-weight:600} .pn-ev li em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.pn-ev li small{grid-column:2/4;color:var(--tenue);font-size:11.5px} .pn-ev li.clic{cursor:pointer} .pn-ev li.clic:hover{background:var(--hover)}
.pn-desg td{padding:8px 10px} .pn-desg tr.tot td{font-weight:800;border-top:2px solid var(--linea-2)}
.pn-top{list-style:none;margin:0;padding:0;columns:2;column-gap:20px} .pn-top li{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--linea);font-size:13.5px;break-inside:avoid}
.pn-prov header{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 10px} .pn-prov header h3{margin:0 0 4px} .pn-prov header p{margin:0;color:var(--suave);font-size:13.5px}
.pn-prov-t{display:flex;align-items:center;gap:10px} .pn-prov-t span{color:var(--suave);font-size:12.5px;font-weight:600} .pn-prov-t b{font-size:20px;font-variant-numeric:tabular-nums}
.pn-prov td.der,.pn-prov th{white-space:nowrap}
.pn-riesgo td{background:color-mix(in srgb,var(--mal) 6%,transparent)}
.pn-tl th,.pn-tl td{text-align:center;padding:6px 4px;min-width:42px}
.pn-tl th:first-child,.pn-tl td:first-child{text-align:left;min-width:190px;position:sticky;left:0;background:var(--panel);z-index:1}
.pn-tl td:first-child small{display:block;color:var(--suave);font-size:11.5px;font-weight:400}
.pn-tl th span{display:block;font-size:11px;color:var(--suave);font-weight:600} .pn-tl th b{font-size:15px}
.pn-tl th.fin{background:var(--panel-2)} .pn-tl .hoy{background:color-mix(in srgb,var(--pri) 10%,transparent)}
.pn-tl-v td{vertical-align:bottom;height:44px} .pn-tl-v td:first-child{font-size:12px;color:var(--suave);vertical-align:middle}
.pn-tl-v i{display:block;width:18px;margin:0 auto;border-radius:5px 5px 2px 2px;background:color-mix(in srgb,var(--pri) 60%,transparent)} .pn-tl-v i.esp{background:var(--av)}
.pn-m{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;margin:1px} .pn-m svg{width:16px;height:16px}
.pn-m.ent{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok-t)} .pn-m.ent.con{background:var(--ok);color:#fff}
.pn-m.ped{background:color-mix(in srgb,var(--pri) 14%,transparent);color:var(--pri-t)}
.pn-m.ago{background:color-mix(in srgb,var(--mal) 16%,transparent);color:var(--mal-t)}
@media (max-width:1100px){ .pn-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){ .pn-dia{min-height:58px;padding:5px} .pn-dia b{font-size:10.5px} .pn-dia b.g{display:none} .pn-dia b.c{display:block} .pn-dia .n{font-size:13px} .pn-dia .q{top:3px;right:3px;font-size:8px;padding:0 3px;border-radius:4px} .pn-dia small{display:none} .pn-cal{gap:4px} .pn-dow-f{grid-template-columns:72px 26px minmax(0,1fr) 44px} .pn-dow-f .v{display:none} .pn-top{columns:1} }

/* ---------- Pedir a proveedor ---------- */
.pd-provs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:0 0 16px}
.pd-prov{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px 14px;border-radius:var(--radio-s);border:1px solid var(--linea);background:var(--panel);color:var(--tinta);font:inherit;cursor:pointer;box-shadow:var(--sombra)}
.pd-prov b{font-size:14.5px} .pd-prov small{color:var(--suave);font-size:12px;display:flex;align-items:center;gap:4px} .pd-prov small svg{width:13px;height:13px} .pd-prov em{font-style:normal;font-weight:700}
.pd-prov.on{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 22%,transparent)}
.pd-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap} .pd-cab h3{margin:0 0 4px}
.pd-campo{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--suave)}
.pd-campo input{font:inherit;font-size:14.5px;color:var(--tinta);background:var(--panel-2);border:1px solid var(--linea);border-radius:10px;padding:9px 11px;min-height:42px}
.pd-campo.full{margin:14px 0 0}
.pd-herr{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 12px}
.pd-todos{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--suave);margin-left:auto} .pd-todos input{width:18px;height:18px;accent-color:var(--pri)}
.pd-tabla td{vertical-align:middle} .pd-tabla td.der small{display:block;font-size:11px}
.pd-tabla tr.pd-on td{background:color-mix(in srgb,var(--pri) 7%,transparent)}
.pd-q{display:inline-flex;align-items:center;gap:4px}
.pd-q input{width:84px;text-align:right;font:inherit;font-weight:700;color:var(--tinta);background:var(--panel-2);border:1px solid var(--linea);border-radius:9px;padding:7px 8px;min-height:38px}
.pd-q input:focus{outline:none;border-color:var(--pri)}
.pd-b{width:38px;height:38px;border-radius:9px;border:1px solid var(--linea);background:var(--panel);color:var(--tinta);font-size:19px;font-weight:700;cursor:pointer;line-height:1}
.pd-b:hover{background:var(--hover)}
.pd-pie{display:flex;justify-content:flex-end;align-items:center;gap:16px;flex-wrap:wrap;margin:16px 0 0;font-size:14px;color:var(--suave)} .pd-pie b{color:var(--tinta)}
.pd-acc{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin:14px 0 0}
@media (max-width:640px){ .pd-todos{margin-left:0} .pd-q input{width:62px} .pd-b{width:34px;height:34px} .pd-pie .btn{width:100%} }

/* Producción: monitor / insumos usados */
.pkd-vistas{margin-right:0} .pkd-vistas button svg{width:17px;height:17px}
.pkd-vistas button.on{background:var(--pri);color:var(--pri-tx)}

/* Desperdicio de fin de día */
.pds{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.pds-buscar{width:100%;font:inherit;font-size:14.5px;color:var(--tinta);background:var(--panel-2);border:1px solid var(--linea);border-radius:10px;padding:9px 12px;margin:0 0 6px}
.pds h4{margin:16px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);display:flex;align-items:center;gap:8px}
.pds h4::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.pds-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px}
.pds-p{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--linea);border-radius:12px;background:var(--panel)}
.pds-p.on{border-color:var(--mal);background:color-mix(in srgb,var(--mal) 6%,var(--panel))}
.pds-p img,.pds-ini{width:40px;height:40px;border-radius:9px;object-fit:cover;flex:none;background:#fff}
.pds-ini{display:grid;place-items:center;background:var(--hover);font-weight:800;color:var(--suave)}
.pds-p>span{flex:1;min-width:0} .pds-p b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pds-p small{color:var(--suave);font-size:11.5px}
.pds-p .pd-q input{width:52px}
.pds-res{position:sticky;top:12px;display:flex;flex-direction:column;gap:10px}
.pds-res h4{margin:6px 0 0}
.pds-sel,.pds-ins{list-style:none;margin:0;padding:0} .pds-sel li,.pds-ins li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--linea);font-size:13.5px}
.pds-ins li{font-size:12.5px;color:var(--suave)} .pds-ins li b{color:var(--tinta);font-weight:600}
.pds-tot{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-top:2px solid var(--linea-2)} .pds-tot b{font-size:22px;color:var(--mal-t)}
.pds-tabs,.pds-prods,.pds-mp{grid-column:1} .pds:has(.pds-tabs) > .pds-res{grid-column:2;grid-row:1 / span 3}
@media (max-width:1000px){ .pds:has(.pds-tabs) > .pds-res{grid-column:auto;grid-row:auto} }
.pds-tabs{display:flex;gap:6px;flex-wrap:wrap}
.pds-tabs button{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;font-weight:700;padding:9px 14px;border-radius:12px;border:1px solid var(--linea);background:var(--panel);color:var(--tinta);cursor:pointer;min-height:44px}
.pds-tabs button.on{background:var(--pri);border-color:var(--pri);color:var(--pri-tx)} .pds-tabs button svg{width:17px;height:17px}
.pds-tabs b{background:var(--mal);color:#fff;border-radius:99px;font-size:11.5px;padding:1px 7px}
.pds-mp-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.pds-i{display:grid;grid-template-columns:minmax(0,1fr) 78px auto;gap:6px 8px;align-items:center;padding:8px 10px;border:1px solid var(--linea);border-radius:12px;background:var(--panel)}
.pds-i.on{border-color:var(--mal);background:color-mix(in srgb,var(--mal) 6%,var(--panel))}
.pds-i b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pds-i small{color:var(--suave);font-size:11.5px}
.pds-i input,.pds-i select,.pds-mot select{font:inherit;font-size:13.5px;color:var(--tinta);background:var(--panel-2);border:1px solid var(--linea);border-radius:8px;padding:7px 8px;min-height:38px}
.pds-i input{width:78px;text-align:right} .pds-i em{font-style:normal;color:var(--suave);font-size:13px}
.pds-i select[data-im]{grid-column:1 / -1}
.pds-mot{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:var(--suave)}
@media (max-width:480px){ .pds-mp-lista{grid-template-columns:minmax(0,1fr)} }
.pds-nota{font:inherit;font-size:13.5px;color:var(--tinta);background:var(--panel-2);border:1px solid var(--linea);border-radius:10px;padding:9px 11px}
@media (max-width:1000px){ .pds{grid-template-columns:minmax(0,1fr)} .pds-res{position:static} }

/* Inventario preparado para venta */
.pkl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:0 0 16px}
.pkl{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid color-mix(in srgb,var(--ok) 35%,var(--linea));border-radius:var(--radio-s);padding:10px 12px;box-shadow:var(--sombra)}
.pkl img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#fff;flex:none} .pkl div{flex:1;min-width:0}
.pkl b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pkl small{color:var(--suave);font-size:11.5px}
.pkl strong{font-size:26px;letter-spacing:-.02em;color:var(--ok-t);font-variant-numeric:tabular-nums}
.pds-p.on.prep{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 7%,var(--panel))}
.pds-prep{font-style:normal;color:var(--ok-t);font-weight:700}
.pds-sel li small{display:block;color:var(--suave);font-size:11.5px}
.pds-ins li.rojo,.pds-ins li.rojo b{color:var(--mal-t)}
.pds-tot.ok b{color:var(--ok-t)}
.pc-p em.pc-listos{background:color-mix(in srgb,var(--ok) 90%,#000);color:#fff}

/* ================= Pantalla de acceso (bloqueo) =================
   Siempre oscura, como la pantalla de bloqueo de un teléfono. Cabe exacta: position:fixed + 100dvh, medidas con vh.
   Capas: .lk-fondo (brillos del color de la marca que se mueven lento + puntos finos + viñeta) → columnas
   .lk-izq (marca, estado, reloj, lema e imagen de la marca) y .lk-der (tarjeta de cristal con la clave) → .lk-franja (cristal negro, 2Ø2). */
html:has(.lk),body:has(.lk){overflow:hidden;overscroll-behavior:none;height:100%}
.lk{--franja:clamp(44px,6.6vh,62px);--tecla:clamp(52px,8.4vh,78px);position:fixed;inset:0;z-index:1;height:100dvh;max-height:100dvh;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:clamp(16px,3vw,48px);padding:clamp(18px,3.4vh,40px) clamp(20px,3.6vw,56px) calc(var(--franja) + clamp(14px,3vh,32px));
  color:#fff;background:#06060a;isolation:isolate;font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased}
/* Fondo */
.lk-fondo{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 90% at 50% 120%,#000 0%,transparent 60%),#07070c}
.lk-fondo::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px) 0 0/24px 24px;mask-image:radial-gradient(80% 70% at 35% 45%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(80% 70% at 35% 45%,#000 30%,transparent 80%)}
.lk-fondo::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 100% at 50% 40%,transparent 55%,rgba(0,0,0,.65) 100%)}
.lk-fondo i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.lk-b1{width:62vmax;height:62vmax;left:-14vmax;top:-22vmax;background:radial-gradient(circle,var(--pri) 0%,transparent 66%);animation:lkDeriva1 22s ease-in-out infinite alternate}
.lk-b2{width:48vmax;height:48vmax;right:-12vmax;bottom:-20vmax;background:radial-gradient(circle,color-mix(in srgb,var(--pri-2) 85%,#ec4899) 0%,transparent 64%);opacity:.42 !important;animation:lkDeriva2 26s ease-in-out infinite alternate}
.lk-b3{width:34vmax;height:34vmax;left:30%;top:42%;background:radial-gradient(circle,var(--pri-3,color-mix(in srgb,var(--pri) 40%,#22d3ee)) 0%,transparent 62%);opacity:.22 !important;animation:lkDeriva3 30s ease-in-out infinite alternate}
@keyframes lkDeriva1{to{transform:translate(9vmax,7vmax) scale(1.08)}}
@keyframes lkDeriva2{to{transform:translate(-8vmax,-6vmax) scale(1.12)}}
@keyframes lkDeriva3{to{transform:translate(-10vmax,5vmax) scale(.9)}}
.lk.con-foto .lk-fondo{background:linear-gradient(90deg,rgba(6,6,10,.35) 0%,rgba(6,6,10,.55) 55%,rgba(6,6,10,.92) 100%),var(--foto) center/cover no-repeat}
.lk.con-foto .lk-fondo i{opacity:.25}
/* Columna izquierda */
.lk-izq{position:relative;min-height:0;display:flex;flex-direction:column;gap:clamp(10px,2.4vh,26px)}
.lk-cab{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.lk-logo{height:clamp(40px,6.6vh,64px);width:auto;max-width:60%;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}
.lk-marca{display:flex;align-items:center;gap:12px;font-size:clamp(17px,2.4vh,22px);letter-spacing:-.01em} .lk-marca img{border-radius:12px}
.lk-estado{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lk-estado i{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.18),0 0 12px #34d399}
.lk-estado.local i{background:rgba(255,255,255,.55);box-shadow:none}
.lk-reloj{position:relative;z-index:3;display:flex;flex-direction:column;margin-top:clamp(4px,4vh,48px)}
.lk-reloj > span{font-size:clamp(13px,2vh,17px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.lk-reloj > b{font-size:clamp(64px,15vh,168px);font-weight:200;letter-spacing:-.055em;line-height:.92;font-variant-numeric:tabular-nums;margin-left:-.04em;
  background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;color:transparent}
.lk-lema{position:relative;z-index:3;margin:auto 0 0;display:flex;flex-direction:column;line-height:1.02;font-size:clamp(28px,5.4vh,60px);letter-spacing:-.035em;max-width:62%}
.lk-lema span{font-weight:300;color:#fff} .lk-lema span.acento{font-weight:800;background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--pri) 55%,#fff) 35%,var(--pri-2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
/* Imagen de la marca: flota a la derecha de la columna, con halo y anillos finos */
.lk-escena{position:absolute;z-index:1;right:-2%;bottom:2%;width:min(62%,58vh);aspect-ratio:1;display:grid;place-items:center;pointer-events:none}
.lk-escena img{position:relative;z-index:2;width:100%;height:auto;filter:drop-shadow(0 40px 46px rgba(0,0,0,.6));animation:lkFlota 8s ease-in-out infinite;user-select:none}
.lk-halo{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--pri) 55%,transparent) 0%,color-mix(in srgb,var(--pri) 14%,transparent) 42%,transparent 68%);filter:blur(12px)}
.lk-anillos{position:absolute;inset:-18%;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 44px,rgba(255,255,255,.07) 44px 45px);
  mask-image:radial-gradient(circle,#000 40%,transparent 72%);-webkit-mask-image:radial-gradient(circle,#000 40%,transparent 72%);animation:lkGira 90s linear infinite}
.lk-chip{position:absolute;z-index:3;left:50%;bottom:-2%;transform:translateX(-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:99px;font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.lk-chip i{width:7px;height:7px;border-radius:50%;background:var(--pri);box-shadow:0 0 12px var(--pri)}
@keyframes lkFlota{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(-2deg)}}
@keyframes lkGira{to{transform:rotate(360deg)}}
/* Tarjeta de cristal */
.lk-der{min-height:0;display:flex;align-items:center;justify-content:center}
.lk-card{position:relative;width:100%;max-width:420px;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.3vh,14px);
  padding:clamp(18px,3.4vh,36px) clamp(18px,2.4vw,32px);border-radius:32px;text-align:center;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.035) 45%,rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.lk-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,color-mix(in srgb,var(--pri) 70%,#fff),transparent 35%,transparent 70%,color-mix(in srgb,var(--pri-2) 60%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55}
.lk-candado{display:grid;place-items:center;width:clamp(42px,6.6vh,58px);height:clamp(42px,6.6vh,58px);border-radius:50%;color:var(--pri-tx);
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--pri) 60%,#fff),var(--pri) 55%,color-mix(in srgb,var(--pri) 60%,#000));box-shadow:0 10px 30px color-mix(in srgb,var(--pri) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.lk-candado svg{width:44%;height:44%}
.lk-card h1{margin:0;font-size:clamp(18px,2.8vh,24px);font-weight:700;letter-spacing:-.02em}
.lk-sub{margin:-4px 0 0;font-size:13px;color:rgba(255,255,255,.6)}
.lk-puntos{display:flex;gap:14px;justify-content:center;min-height:16px;margin:clamp(2px,.8vh,8px) 0}
.lk-puntos i{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.lk-puntos i.on{background:#fff;border-color:#fff;transform:scale(1.08);box-shadow:0 0 14px color-mix(in srgb,var(--pri) 80%,#fff)}
.lk-err{margin:0;min-height:1.2em;font-size:13.5px;font-weight:600;color:#fda4af}
.lk-card.mal{animation:lkSacude .4s cubic-bezier(.36,.07,.19,.97)} .lk-card.mal .lk-puntos i{border-color:#fb7185;background:transparent}
.lk-card.ok .lk-puntos i{background:#34d399;border-color:#34d399;box-shadow:0 0 14px #34d399}
.lk-card.ok{transition:transform .2s,opacity .2s;transform:scale(.98);opacity:.6}
@keyframes lkSacude{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
/* Teclado redondo */
.lk-teclas{display:grid;grid-template-columns:repeat(3,var(--tecla));gap:clamp(8px,1.6vh,16px) clamp(16px,2.2vw,26px);justify-content:center;margin-top:clamp(2px,.8vh,8px)}
.lk-t{position:relative;width:var(--tecla);height:var(--tecla);border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.075);color:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font:inherit;overflow:hidden;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background .15s,transform .08s,border-color .15s}
.lk-t b{font-size:calc(var(--tecla) * .4);font-weight:400;line-height:1;font-variant-numeric:tabular-nums}
.lk-t small{font-size:calc(var(--tecla) * .13);font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.5);line-height:1.4;margin-left:.18em}
.lk-t:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)} .lk-t:active{transform:scale(.93)}
.lk-t:focus-visible{outline:2px solid color-mix(in srgb,var(--pri) 70%,#fff);outline-offset:3px}
.lk-t.pulso::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.45),transparent 70%);animation:lkPulso .35s ease-out forwards}
@keyframes lkPulso{from{transform:scale(.2);opacity:1}to{transform:scale(1.4);opacity:0}}
.lk-borrar{background:transparent;border-color:transparent;box-shadow:none} .lk-borrar svg{width:34%;height:34%;opacity:.85}
.lk-hueco{width:var(--tecla);height:var(--tecla)}
.lk-link{display:inline-flex;align-items:center;gap:7px;margin-top:clamp(2px,.6vh,6px);padding:8px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:transparent;color:rgba(255,255,255,.82);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.lk-link:hover{background:rgba(255,255,255,.08)} .lk-link svg{width:15px;height:15px}
.lk-demo{margin:0;font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.5);max-width:340px}
/* Pantallas de conexión / sin datos */
.lk.lk-mini{grid-template-columns:1fr;place-items:center;padding:24px} .lk.lk-mini .lk-card{max-width:440px;color:#fff} .lk.lk-mini .p-nota{color:rgba(255,255,255,.7)}
/* Franja de cristal negro con la firma de 2Ø2 */
.lk-franja{position:absolute;left:0;right:0;bottom:0;z-index:6;height:var(--franja);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(18,18,24,.55),rgba(4,4,8,.82));border-top:1px solid rgba(255,255,255,.1);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.lk-franja::before{content:"";position:absolute;left:15%;right:15%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
.lk-franja .p-202{gap:16px;color:rgba(255,255,255,.58);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.lk-franja .p-202 small{display:flex;align-items:center;gap:16px} .lk-franja .p-202 small::after{content:"";width:1px;height:18px;background:rgba(255,255,255,.2)}
.lk-franja .p-202 img{height:clamp(22px,3.6vh,32px);filter:none;opacity:.95}
/* Escena interactiva (lkEscena en app.js): partículas en canvas, luz que sigue al puntero, tarjeta 3D con reflejo y borde de luz que gira */
.lk-cv{position:absolute;inset:0;width:100%;height:100%;z-index:1;filter:none !important;opacity:1 !important;border-radius:0 !important;animation:none !important}
.lk-fondo i.lk-luz{z-index:0;inset:0;width:auto;height:auto;border-radius:0;filter:none;opacity:1;transition:background .25s;
  background:radial-gradient(520px circle at var(--mx,30%) var(--my,30%),color-mix(in srgb,var(--pri) 38%,transparent),transparent 62%)}
.lk-izq,.lk-der{position:relative;z-index:2}
.lk-der{perspective:1100px}
@property --lkAng{syntax:"<angle>";initial-value:0deg;inherits:false}
.lk-card{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04),0 0 90px -20px color-mix(in srgb,var(--pri) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.lk-card::before{background:conic-gradient(from var(--lkAng),transparent 0deg,color-mix(in srgb,var(--pri) 80%,#fff) 40deg,transparent 110deg,transparent 180deg,color-mix(in srgb,var(--pri-2) 75%,#22d3ee) 230deg,transparent 300deg);
  opacity:.9;animation:lkBorde 7s linear infinite}
.lk-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.13),transparent 45%);mix-blend-mode:screen}
.lk-card.escribiendo{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06),0 0 120px -18px color-mix(in srgb,var(--pri) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.2)}
.lk-card.ok{transform:scale(.96) translateZ(0);opacity:.0;transition:transform .35s,opacity .35s .05s}
@keyframes lkBorde{to{--lkAng:360deg}}
.lk-candado{animation:lkLatido 3.2s ease-in-out infinite}
@keyframes lkLatido{0%,100%{box-shadow:0 10px 30px color-mix(in srgb,var(--pri) 55%,transparent),0 0 0 0 color-mix(in srgb,var(--pri) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
  50%{box-shadow:0 10px 30px color-mix(in srgb,var(--pri) 55%,transparent),0 0 0 12px transparent,inset 0 1px 0 rgba(255,255,255,.35)}}
.lk-sub{text-transform:none}
/* Puntos de la clave: el nuevo aparece con un rebote y brillo */
.lk-puntos i.on{background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--pri) 45%,#fff))}
.lk-puntos i.nuevo{animation:lkPunto .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes lkPunto{0%{transform:scale(.3)}100%{transform:scale(1.08)}}
/* Teclas: brillo interior al pasar el mouse */
.lk-t::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .2s;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--pri) 55%,transparent),transparent 70%)}
.lk-t:hover::before{opacity:1} .lk-t b,.lk-t small{position:relative}
.lk-t:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 26px -8px color-mix(in srgb,var(--pri) 70%,transparent)}
.lk-borrar::before{display:none}
/* Reloj: cada dígito se desliza al cambiar; los dos puntos laten */
.lk-reloj > b{display:flex;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff}
.lk-reloj > b i{font-style:normal;display:inline-block;background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;color:transparent}
.lk-reloj > b i.cambia{animation:lkDigito .7s cubic-bezier(.2,.8,.2,1)}
.lk-reloj > b i.lk-dp{animation:lkDp 2s ease-in-out infinite;margin:0 -.02em}
@keyframes lkDigito{from{transform:translateY(-.35em);opacity:0;filter:blur(8px)}to{transform:none;opacity:1;filter:none}}
@keyframes lkDp{0%,100%{opacity:1}50%{opacity:.35}}
/* Clima (bajo el reloj) y ranking de ventas de hoy */
.lk-clima[hidden]{display:none !important}
.lk-clima{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(8px,1.6vh,16px);padding:8px 16px 8px 12px;border-radius:18px;align-self:flex-start;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:lkSube .6s cubic-bezier(.2,.8,.2,1) both}
.lk-clima svg{width:30px;height:30px;color:#fde68a;filter:drop-shadow(0 0 10px rgba(253,230,138,.45))}
.lk-clima b{font-size:28px;font-weight:300;letter-spacing:-.03em;line-height:1}
.lk-clima span{display:flex;flex-direction:column;line-height:1.25} .lk-clima strong{font-size:13.5px;font-weight:600}
.lk-clima small{font-size:11.5px;color:rgba(255,255,255,.6)}
.lk-rank{position:relative;z-index:3;width:min(400px,100%);padding:14px 14px 10px;border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);animation:lkSube .7s .1s cubic-bezier(.2,.8,.2,1) both}
.lk-rank header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px 8px}
.lk-rank header span{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.lk-rank header svg{width:16px;height:16px;color:#fbbf24} .lk-rank header b{font-size:13px;font-weight:700;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.lk-rank ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.lk-rank li{position:relative;display:grid;grid-template-columns:22px 34px 1fr auto;align-items:center;gap:10px;padding:7px 10px;border-radius:14px;overflow:hidden;animation:lkSube .5s var(--d) cubic-bezier(.2,.8,.2,1) both}
.lk-rank li em{position:absolute;left:0;top:0;bottom:0;width:var(--p);z-index:-1;border-radius:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--pri) 30%,transparent),color-mix(in srgb,var(--pri) 8%,transparent));
  transform-origin:left;animation:lkBarra 1s calc(var(--d) + .25s) cubic-bezier(.2,.8,.2,1) both}
.lk-pos{font-style:normal;font-size:13px;font-weight:800;text-align:center;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.lk-av{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:12px;font-weight:700;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)}
.lk-nom{display:flex;flex-direction:column;min-width:0;font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-nom small{font-size:11px;font-weight:500;color:rgba(255,255,255,.55)}
.lk-rank li b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.lk-rank li.m1 .lk-av{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#3b2300;border-color:transparent;box-shadow:0 0 18px rgba(251,191,36,.55)}
.lk-rank li.m2 .lk-av{background:linear-gradient(135deg,#f1f5f9,#94a3b8);color:#1e293b;border-color:transparent}
.lk-rank li.m3 .lk-av{background:linear-gradient(135deg,#fdba74,#c2410c);color:#2a0f00;border-color:transparent}
.lk-rank li.m1 .lk-pos{color:#fbbf24} .lk-rank li.m1 em{background:linear-gradient(90deg,rgba(251,191,36,.32),rgba(251,191,36,.06))}
.lk-rank-vacio{margin:4px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.62)}
.lk-rank.sin-anim,.lk-rank.sin-anim li,.lk-rank.sin-anim li em{animation:none}
@keyframes lkSube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lkBarra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Paneles bajo el reloj: ranking y actividades lado a lado (o uno sobre otro si no caben) */
.lk-paneles{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;max-width:880px;min-height:0}
.lk-paneles .lk-rank{width:auto;flex:1 1 270px;max-width:380px} .lk-paneles .lk-act{flex:1.5 1 340px}
.lk-paneles:empty{display:none}
.lk-act{position:relative;display:flex;flex-direction:column;min-height:0;padding:14px 10px 10px;border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);animation:lkSube .7s .2s cubic-bezier(.2,.8,.2,1) both}
.lk-act header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 8px 8px}
.lk-act header span{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.lk-act header svg{width:16px;height:16px;color:#5eead4} .lk-act header b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85)}
.lk-act-barra{display:block;height:4px;margin:0 8px 8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;position:relative}
.lk-act-barra::after{content:"";position:absolute;inset:0;width:var(--p);border-radius:inherit;background:linear-gradient(90deg,#2dd4bf,#34d399);box-shadow:0 0 12px rgba(52,211,153,.6);transition:width .6s}
.lk-act ol{list-style:none;margin:0;padding:0 2px;display:flex;flex-direction:column;gap:3px;max-height:clamp(150px,30vh,300px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
  mask-image:linear-gradient(180deg,transparent 0,#000 8px,#000 calc(100% - 14px),transparent);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8px,#000 calc(100% - 14px),transparent)}
.lk-act li{animation:lkSube .45s var(--d) cubic-bezier(.2,.8,.2,1) both}
.lk-act li button{width:100%;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:1px solid transparent;background:transparent;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.lk-act li button:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
.lk-act time{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.7)}
.lk-act-n{display:flex;flex-direction:column;min-width:0;font-size:13.5px;font-weight:600;line-height:1.25;overflow:hidden}
.lk-act-n > span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .lk-act-n small{font-size:11px;font-weight:500;color:rgba(255,255,255,.5)}
.lk-act em{font-style:normal;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.07)}
.lk-act em svg{width:13px;height:13px}
.lk-act li.hecha .lk-act-n{color:rgba(255,255,255,.5);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)} .lk-act li.hecha time{color:rgba(255,255,255,.4)}
.lk-act li.hecha em{color:#6ee7b7;background:rgba(52,211,153,.12)}
.lk-act li.ahora button{background:linear-gradient(90deg,color-mix(in srgb,var(--pri) 34%,transparent),color-mix(in srgb,var(--pri) 8%,transparent));border-color:color-mix(in srgb,var(--pri) 45%,transparent);box-shadow:0 0 30px -8px color-mix(in srgb,var(--pri) 70%,transparent)}
.lk-act li.ahora em{color:var(--pri-tx);background:var(--pri)} .lk-act li.ahora time{color:#fff}
.lk-vivo{width:7px;height:7px;border-radius:50%;background:#fff;animation:lkVivo 1.4s ease-in-out infinite}
@keyframes lkVivo{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}50%{box-shadow:0 0 0 5px rgba(255,255,255,0)}}
.lk-act li.atrasada em{color:#fecdd3;background:rgba(244,63,94,.22)} .lk-act li.atrasada time{color:#fda4af}
.lk-act.sin-anim,.lk-act.sin-anim li{animation:none}
.lk-act-modal{margin:0 0 12px;line-height:1.5;color:var(--tinta-2,inherit)}
.lk-izq:has(.lk-act) .lk-escena{display:none}
/* Con ranking, la imagen de la marca y el lema dejan espacio */
.lk-izq:has(.lk-rank) .lk-escena{width:min(46%,46vh);right:-4%;bottom:6%}
.lk-izq:has(.lk-rank) .lk-lema{display:none}
@media (max-width:1150px){ .lk-rank li:nth-child(n+4){display:none} .lk-act ol{max-height:clamp(120px,22vh,220px)} }
@media (max-width:900px){ .lk-paneles{display:none} .lk-clima{align-self:center} }
@media (max-width:600px){ .lk-clima{margin-top:6px;padding:5px 12px 5px 9px;gap:8px;border-radius:14px} .lk-clima svg{width:20px;height:20px} .lk-clima b{font-size:19px} .lk-clima small{display:none} .lk-clima strong{font-size:12.5px} }
@media (max-width:600px) and (max-height:880px){ .lk:has(.lk-clima:not([hidden])) .lk-demo{display:none} }
@media (max-height:640px){ .lk-rank li:nth-child(n+4){display:none} }
@media (max-height:520px) and (orientation:landscape){ .lk-clima{display:none} }
@media (prefers-reduced-motion:reduce){ .lk-fondo i,.lk-escena img,.lk-anillos,.lk-card::before,.lk-clima,.lk-rank,.lk-rank li,.lk-rank li em,.lk-act,.lk-act li,.lk-vivo,.lk-candado,.lk-reloj > b i{animation:none !important} .lk-card{transform:none} }
/* Tableta vertical y celular: una columna; el reloj arriba, la tarjeta abajo */
@media (max-width:900px){
  .lk{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:clamp(8px,1.6vh,18px);--tecla:clamp(50px,8vh,74px)}
  .lk-izq{gap:clamp(6px,1.2vh,14px)} .lk-lema,.lk-chip{display:none}
  .lk-reloj{margin-top:clamp(2px,1.6vh,18px);align-items:center;text-align:center} .lk-reloj > b{font-size:clamp(52px,10vh,104px)}
  .lk-escena{width:auto;height:clamp(90px,17vh,190px);right:2%;bottom:auto;top:clamp(54px,8vh,80px);opacity:.9}
  .lk-der{align-items:flex-start}
  .lk-card{max-width:440px;padding:clamp(14px,2.4vh,28px) 18px}
}
@media (max-width:600px){
  .lk{padding:clamp(12px,2vh,20px) 16px calc(var(--franja) + 10px);--tecla:clamp(48px,8.6vh,72px)}
  .lk-escena{display:none} .lk-estado{font-size:11.5px;padding:5px 11px} .lk-logo{height:clamp(34px,5.4vh,48px)}
  .lk-reloj > b{font-size:clamp(44px,9vh,80px)} .lk-reloj > span{font-size:12px}
  .lk-card{border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03))} .lk-candado{display:none}
  .lk-franja .p-202{letter-spacing:.16em}
}
@media (max-height:700px) and (max-width:600px){ .lk-demo{display:none} .lk-reloj > span{display:none} }
/* Celular horizontal: reloj a la izquierda, teclado a la derecha, solo lo indispensable */
@media (max-height:520px) and (orientation:landscape){
  .lk{grid-template-columns:minmax(0,1fr) minmax(300px,1fr);grid-template-rows:1fr;--franja:38px;--tecla:clamp(34px,13vh,54px);padding:12px 20px calc(var(--franja) + 8px)}
  .lk-izq{display:flex} .lk-escena,.lk-lema,.lk-chip,.lk-candado,.lk-sub,.lk-demo,.lk-card h1{display:none}
  .lk-reloj{align-items:flex-start;text-align:left;margin-top:auto;margin-bottom:auto} .lk-reloj > b{font-size:clamp(40px,18vh,84px)}
  .lk-der{align-items:center} .lk-card{padding:10px 14px;gap:4px;border-radius:22px} .lk-teclas{gap:6px 14px} .lk-puntos{margin:0} .lk-err{min-height:0}
  .lk-franja .p-202 img{height:20px}
}

/* ================= Captura de la orden (rediseño) =================
   Ticket como tarjeta flotante, buscador con ícono, grupos en píldoras con brillo, mosaicos con foto enmarcada y botón «+»,
   barra inferior en dos partes: acciones secundarias (dock) y Comandar + Cobrar (con el total). Usa solo tokens: claro y oscuro. */
.pc{gap:14px;padding:14px 14px 0;grid-template-columns:minmax(340px,420px) 1fr}
.pc-ticket{border-radius:26px;border:1px solid var(--linea);background:linear-gradient(180deg,color-mix(in srgb,var(--pri) 6%,var(--panel)),var(--panel) 160px);box-shadow:0 20px 50px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04)}
.pc-cab{padding:16px 16px 14px;gap:12px;background:transparent;border-bottom:1px solid var(--linea);align-items:center}
.pc-cab [data-volver]{width:44px;height:44px;min-height:44px;padding:0;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--panel-2);border:1px solid var(--linea)}
.pc-cab h1{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.pc-cab p{margin-top:6px;gap:6px}
.pc-tag{padding:4px 11px;font-size:12.5px;border-radius:99px}
/* Renglones */
.pc-lineas{padding:10px}
.pl{grid-template-columns:42px 1fr auto;gap:10px;padding:11px 12px;border-radius:16px;border:1px solid transparent;transition:background .15s,border-color .15s,box-shadow .15s}
.pl + .pl{margin-top:4px}
.pl:hover{background:var(--hover)}
.pl.sel{background:color-mix(in srgb,var(--pri) 10%,var(--panel));border-color:color-mix(in srgb,var(--pri) 45%,transparent);box-shadow:0 6px 20px color-mix(in srgb,var(--pri) 18%,transparent)}
.pl-c{display:grid;place-items:center;height:34px;border-radius:11px;font-size:15px;font-weight:800;padding:0;background:color-mix(in srgb,var(--pri) 13%,var(--panel-2));color:var(--pri-t)}
.pl.sel .pl-c{background:var(--pri);color:var(--pri-tx)}
.pl-n{font-size:14.5px;line-height:1.25;padding-top:1px} .pl-i{font-size:15px}
.pc-vacio{list-style:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;min-height:180px;text-align:center;color:var(--suave)}
.pc-vacio span{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;margin-bottom:8px;color:var(--pri-t);
  background:radial-gradient(circle,color-mix(in srgb,var(--pri) 18%,transparent),transparent 70%);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pri) 35%,transparent);outline:1.5px dashed color-mix(in srgb,var(--pri) 25%,transparent);outline-offset:8px}
.pc-vacio span svg{width:32px;height:32px} .pc-vacio b{color:var(--tinta);font-size:16px} .pc-vacio small{font-size:13px}
.pc-sel{gap:6px;padding:10px;background:color-mix(in srgb,var(--pri) 5%,var(--panel-2))}
.pc-sel .btn{border-radius:14px;min-height:54px;border:1px solid var(--linea)}
/* Totales */
.pc-tot{padding:14px 20px 18px;background:color-mix(in srgb,var(--panel-2) 70%,transparent);gap:4px 10px}
.pc-tot dt{font-size:14px} .pc-tot dd{font-size:14px}
.pc-tot dt.g,.pc-tot dd.g{padding-top:10px;margin-top:6px;border-top:1px dashed var(--linea-2);align-self:end}
.pc-tot dt.g{display:flex;flex-direction:column;font-size:20px;font-weight:800;color:var(--tinta);line-height:1.1} .pc-tot dt.g small{font-size:12px;font-weight:600;color:var(--suave);margin-top:3px}
.pc-tot dd.g{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1}
/* Buscador y grupos */
.pc-menu{gap:12px;padding:0}
.pc-busca{gap:10px}
.pc-q{flex:1;min-width:180px;display:flex;align-items:center;gap:10px;height:54px;padding:0 16px;border-radius:18px;border:1px solid var(--linea);background:var(--panel);box-shadow:var(--sombra);color:var(--suave);transition:border-color .15s,box-shadow .15s}
.pc-q:focus-within{border-color:var(--pri);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 16%,transparent)}
.pc-q svg{width:20px;height:20px;flex:none}
.pc-busca .pc-q input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;box-shadow:none;font:inherit;font-size:16px;color:var(--tinta);padding:0;border-radius:0}
.pc-busca > .btn{height:54px;min-height:54px;border-radius:18px;padding:0 18px}
.pc-grupos{gap:8px;padding:2px 2px 6px}
.pc-grupos button{min-height:48px;padding:0 18px;border-radius:99px;font-size:15px;background:var(--panel);border:1px solid var(--linea);transition:transform .1s,box-shadow .2s,background .2s}
.pc-grupos button:hover{border-color:color-mix(in srgb,var(--c) 50%,var(--linea))}
.pc-grupos button.on{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c));box-shadow:0 8px 22px color-mix(in srgb,var(--c) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
/* Mosaicos */
.pc-prods,.pc-prods.con-foto{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px;padding:4px 4px 14px}
.pc-p{border-radius:22px;padding:0;gap:0;min-height:112px;justify-content:space-between;overflow:hidden;background:var(--panel);border:1px solid var(--linea);box-shadow:var(--sombra);
  transition:transform .15s,box-shadow .2s,border-color .2s}
.pc-p:not(.foto){background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,var(--panel)),var(--panel) 75%);border-color:color-mix(in srgb,var(--c) 25%,var(--linea))}
.pc-p:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,var(--linea));box-shadow:0 18px 40px rgba(0,0,0,.22),0 0 0 1px color-mix(in srgb,var(--c) 25%,transparent)}
.pc-p:active{transform:scale(.97)}
.pc-p.foto{background:var(--panel);border-color:var(--linea)}
.pc-img{display:block;margin:8px 8px 0;border-radius:16px;overflow:hidden;background:#fff;aspect-ratio:4/3}
.pc-p.foto .pc-img img,.pc-img img{display:block;width:100%;height:100%;object-fit:contain;padding:6px;background:#fff;border:0;aspect-ratio:auto;transition:transform .4s}
.pc-p.foto:hover .pc-img img{transform:scale(1.07)}
.pc-p .pc-nom{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:12px 14px 0;font-size:14.5px;font-weight:650;line-height:1.25;min-height:0}
.pc-p:not(.foto) .pc-nom{padding-top:14px;font-size:15px}
.pc-p .pc-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 12px 14px;font-weight:inherit}
.pc-p .pc-pie b{padding:0;font-size:17px;font-weight:800;color:var(--tinta);filter:none;letter-spacing:-.01em}
.pc-add{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;flex:none;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);transition:background .15s,color .15s,transform .15s}
.pc-add svg{width:18px;height:18px}
.pc-p:hover .pc-add{background:var(--c);color:#fff;transform:rotate(90deg)}
.pc-mod{bottom:16px;right:52px}
.pc-p.promo{border-color:color-mix(in srgb,var(--mal) 45%,var(--linea));box-shadow:0 0 0 1px color-mix(in srgb,var(--mal) 25%,transparent),var(--sombra)}
.pc-p.promo::after{top:14px;left:14px;padding:4px 10px;box-shadow:0 4px 12px color-mix(in srgb,var(--mal) 40%,transparent)}
.pc-p em{top:14px;right:14px;padding:3px 9px}
/* Barra inferior: dock + Comandar / Cobrar */
.pc-acc{display:flex;align-items:stretch;gap:12px;margin:0 -14px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));overflow:visible;border-radius:24px 24px 0 0;
  background:color-mix(in srgb,var(--panel) 86%,transparent);border-top:1px solid var(--linea);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 -12px 34px rgba(0,0,0,.12)}
.pc-dock{flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:2px;border-radius:20px;background:var(--panel-2);border:1px solid var(--linea)}
.pc-dock::-webkit-scrollbar{display:none}
.pc-a{flex:1 0 auto;min-width:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;padding:6px 10px;border:0;border-radius:16px;background:transparent;color:var(--suave);font:inherit;font-size:12px;font-weight:650;cursor:pointer;transition:background .15s,color .15s}
.pc-a svg{width:20px;height:20px}
.pc-a:hover{background:var(--panel);color:var(--tinta);box-shadow:var(--sombra)}
.pc-a.peligro{color:var(--mal-t)} .pc-a.peligro:hover{background:color-mix(in srgb,var(--mal) 12%,var(--panel))}
.pc-main{flex:none;display:flex;gap:10px}
.pc-comandar,.pc-cobrar{display:flex;align-items:center;gap:10px;min-height:64px;border-radius:20px;font:inherit;cursor:pointer;transition:transform .12s,box-shadow .2s,filter .2s}
.pc-comandar{position:relative;padding:0 22px;font-size:15px;font-weight:750;color:var(--tinta);background:var(--panel);border:1px solid var(--linea-2)}
.pc-comandar svg{width:20px;height:20px}
.pc-comandar.hay{border-color:color-mix(in srgb,var(--pri) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 18%,transparent)}
.pc-comandar em{position:absolute;top:-8px;right:-8px;min-width:24px;height:24px;display:grid;place-items:center;padding:0 6px;border-radius:99px;font-style:normal;font-size:12px;font-weight:800;color:var(--pri-tx);background:var(--pri);box-shadow:0 4px 12px color-mix(in srgb,var(--pri) 50%,transparent)}
.pc-comandar:hover{transform:translateY(-2px)}
.pc-cobrar{min-width:230px;padding:0 18px 0 20px;justify-content:space-between;border:0;color:var(--pri-tx);
  background:linear-gradient(135deg,color-mix(in srgb,var(--pri) 80%,#fff),var(--pri) 45%,color-mix(in srgb,var(--pri-2) 85%,var(--pri)));box-shadow:0 12px 30px color-mix(in srgb,var(--pri) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.pc-cobrar > svg{width:22px;height:22px;opacity:.9} .pc-cobrar > svg:last-child{transition:transform .2s}
.pc-cobrar span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;margin-right:auto}
.pc-cobrar small{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.pc-cobrar b{font-size:23px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pc-cobrar:hover{transform:translateY(-2px);filter:brightness(1.06)} .pc-cobrar:hover > svg:last-child{transform:translateX(3px)}
.pc-cobrar:active,.pc-comandar:active{transform:scale(.97)}
@media (max-width:1180px){ .pc-a span{font-size:11px} .pc-a{min-width:70px} .pc-cobrar{min-width:190px} }
@media (max-width:900px){
  .pc{padding:10px 10px 0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .pc-ticket,.pc-menu{min-width:0} .pc-lineas{max-height:38vh}
  .pc-acc{flex-wrap:wrap;margin:0 -10px;padding:10px}
  .pc-dock{flex-basis:100%;order:2} .pc-main{flex-basis:100%;order:1} .pc-cobrar{flex:1;min-width:0} .pc-comandar{padding:0 16px}
}
@media (max-width:480px){ .pc-prods,.pc-prods.con-foto{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .pc-p .pc-nom{font-size:13.5px} .pc-p .pc-pie b{font-size:15px} .pc-comandar span{display:none} }

/* ================= Lealtad: tarjeta QR, escáner, ficha ================= */
.ly-tarjeta{position:relative;width:100%;max-width:380px;aspect-ratio:85.6/54;border-radius:20px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;color:var(--pri-tx);overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--pri) 75%,transparent),transparent 60%),radial-gradient(90% 80% at 100% 100%,color-mix(in srgb,var(--pri-2) 55%,transparent),transparent 60%),#0b0b10;
  box-shadow:0 20px 50px color-mix(in srgb,var(--pri) 30%,rgba(0,0,0,.4)),inset 0 1px 0 rgba(255,255,255,.18)}
.ly-tarjeta::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/16px 16px}
.ly-t-cab{display:flex;justify-content:space-between;align-items:center;gap:10px} .ly-t-cab img{height:30px;width:auto;max-width:55%;object-fit:contain} .ly-t-cab b{font-size:15px}
.ly-t-cab span{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.ly-t-cuerpo{flex:1;display:flex;align-items:center;gap:14px;min-height:0}
.ly-t-qr{height:100%;max-height:130px;aspect-ratio:1;background:#fff;border-radius:12px;padding:5px;box-shadow:0 8px 20px rgba(0,0,0,.35)} .ly-t-qr svg{width:100%;height:100%;display:block}
.ly-t-sinqr{display:grid;place-items:center;height:100%;color:#111;font:700 11px ui-monospace,monospace;text-align:center;word-break:break-all}
.ly-t-dat{display:flex;flex-direction:column;gap:2px;min-width:0} .ly-t-dat small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-top:4px}
.ly-t-dat b{font-size:17px;line-height:1.15;overflow:hidden;text-overflow:ellipsis} .ly-t-dat code{font-size:13px;letter-spacing:.08em;opacity:.95}
.ly-t-pie{font-size:10.5px;opacity:.6}
.ly-ficha{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:18px;align-items:center;margin:0 0 14px}
.ly-saldos{display:grid;gap:12px}
.ly-saldos div{border:1px solid var(--linea);border-radius:18px;padding:14px 16px;background:linear-gradient(160deg,color-mix(in srgb,var(--pri) 8%,var(--panel)),var(--panel))}
.ly-saldos span{display:block;font-size:12.5px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.08em}
.ly-saldos b{display:block;font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:2px 0} .ly-saldos small{color:var(--suave);font-size:12.5px}
.ly-busca{margin:0 0 12px;max-width:620px}
.ly-cam{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#000;margin:0 0 12px}
.ly-cam video{width:100%;height:100%;object-fit:cover;display:block}
.ly-mira{position:absolute;inset:18% 24%;border-radius:18px;box-shadow:0 0 0 2000px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.85)}
.ly-mira::after{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;background:var(--pri);box-shadow:0 0 12px var(--pri);animation:lyBarre 1.8s ease-in-out infinite alternate}
@keyframes lyBarre{from{transform:translateY(-60px)}to{transform:translateY(60px)}}
.ly-cam-msg{position:absolute;left:0;right:0;bottom:10px;margin:0;text-align:center;color:#fff;font-size:13px;text-shadow:0 1px 6px #000}
.ly-err{min-height:1.2em;margin:6px 0;color:var(--mal-t);font-weight:600;font-size:13.5px}
.pc-tag.ly{color:var(--suave)} .pc-tag.ly.on{color:#b45309;border-color:color-mix(in srgb,#f59e0b 45%,var(--linea));background:color-mix(in srgb,#f59e0b 12%,var(--panel-2))}
:root[data-tema="oscuro"] .pc-tag.ly.on{color:#fcd34d}
.pco-cli{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .pco-cli svg{width:16px;height:16px}
.pco-pts{display:flex;align-items:center;justify-content:center;gap:6px;color:#b45309} .pco-pts svg{width:18px;height:18px}
@media (max-width:760px){ .ly-ficha{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .ly-mira::after{animation:none} }
.pc-ticket .pc-cab{flex-wrap:nowrap} .pc-ticket .pc-cab > div{min-width:0;flex:1}
.ly-wa{background:#16a34a;border-color:transparent;color:#fff} .ly-wa:hover{background:#15803d}

/* Auditoría de inventario */
.au-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap} .au-cab h3{margin-bottom:8px}
.au-t td{vertical-align:middle} .au-t td small{display:block;color:var(--suave);font-size:11.5px}
.au-n{border:0;background:none;padding:0;font:inherit;font-weight:650;color:var(--tinta);cursor:pointer;text-align:left} .au-n:hover{color:var(--pri-t);text-decoration:underline}
.au-c{width:110px;text-align:right;font:inherit;font-weight:700;color:var(--tinta);background:var(--panel-2);border:1px solid var(--linea);border-radius:10px;padding:8px 10px;min-height:40px}
.au-c:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 16%,transparent)}
.au-faltante td{background:color-mix(in srgb,var(--mal) 6%,transparent)} .au-faltante .au-d{color:var(--mal-t);font-weight:800}
.au-sobrante td{background:color-mix(in srgb,var(--av) 7%,transparent)} .au-sobrante .au-d{color:var(--av-t);font-weight:800}
.au-cuadra .au-d{color:var(--ok-t)}
.au-top ul{list-style:none;margin:0;padding:0} .au-top li{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:8px 0;border-bottom:1px solid var(--linea);align-items:baseline}
.au-top li:last-child{border-bottom:0} .au-top em{font-style:normal;color:var(--suave)} .au-top b{color:var(--mal-t);font-variant-numeric:tabular-nums}

/* Cobro: Efectivo / Tarjeta (débito-crédito + marca) */
.pco-formas2{display:flex;flex-direction:column;gap:12px;align-content:start}
.pco-main{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pco-big{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:92px;border-radius:18px;border:1.5px solid var(--linea);background:var(--panel);color:var(--suave);font:inherit;cursor:pointer;transition:all .15s}
.pco-big svg{width:30px;height:30px} .pco-big b{font-size:16px}
.pco-big.ef{--c:#16a34a} .pco-big.tj{--c:var(--pri)}
.pco-big svg{color:var(--c)}
.pco-big.on{border-color:var(--c);color:var(--tinta);background:color-mix(in srgb,var(--c) 12%,var(--panel));box-shadow:0 8px 22px color-mix(in srgb,var(--c) 25%,transparent);transform:translateY(-1px)}
.pco-sub{display:flex;flex-direction:column;gap:6px} .pco-sub > span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.pco-seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;gap:4px;border-radius:14px;background:var(--panel-2);border:1px solid var(--linea)}
.pco-seg button{min-height:44px;border:0;border-radius:11px;background:transparent;font:inherit;font-weight:700;color:var(--suave);cursor:pointer}
.pco-seg button.on{background:var(--panel);color:var(--tinta);box-shadow:var(--sombra),0 0 0 2px color-mix(in srgb,var(--pri) 45%,transparent)}
.pco-marcas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pco-marca{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:62px;padding:6px;border-radius:14px;border:1.5px solid var(--linea);background:var(--panel);cursor:pointer;font:inherit;font-size:11px;font-weight:650;color:var(--suave)}
.pco-marca.on{border-color:var(--pri);color:var(--tinta);background:color-mix(in srgb,var(--pri) 8%,var(--panel));box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 18%,transparent)}
.pco-marca i{display:grid;place-items:center;width:46px;height:28px;border-radius:6px;font-style:normal;position:relative}
.mk-visa{background:#1a1f71} .mk-visa::before{content:"VISA";color:#fff;font:italic 900 13px/1 Arial,sans-serif;letter-spacing:.02em}
.mk-mastercard{background:#111} .mk-mastercard::before,.mk-mastercard::after{content:"";position:absolute;top:5px;width:18px;height:18px;border-radius:50%}
.mk-mastercard::before{left:8px;background:#eb001b} .mk-mastercard::after{right:8px;background:#f79e1b;mix-blend-mode:screen;opacity:.95}
.mk-amex{background:#2e77bc} .mk-amex::before{content:"AMEX";color:#fff;font:900 11px/1 Arial,sans-serif;letter-spacing:.04em}
.mk-carnet{background:#fff;border:1px solid #d6dae3} .mk-carnet::before{content:"carnet";color:#c8102e;font:800 11px/1 Arial,sans-serif}
.mk-otra{background:var(--hover)} .mk-otra::before{content:"···";color:var(--suave);font:900 16px/1 Arial,sans-serif;letter-spacing:.1em}
.pco-otras{display:grid;grid-template-columns:1fr 1fr;gap:8px} .pco-otras .pco-f{min-height:58px} .pco-otras small{display:block;font-weight:600;color:var(--suave)}
.au-tj{margin:0 0 12px}
.pn-ns{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--suave)}
.pn-ns select{min-height:42px;border-radius:12px;border:1px solid var(--linea);background:var(--panel);color:var(--tinta);font:inherit;font-weight:700;padding:0 10px}

/* Horarios */
.hr-nav{display:flex;align-items:center;gap:6px} .hr-nav b{font-size:15px;min-width:150px;text-align:center}
.hr-sem th{text-align:center;vertical-align:bottom} .hr-sem th span{display:block;font-size:13px} .hr-sem th small{display:block;font-weight:500;color:var(--suave);font-size:11px;text-transform:none;letter-spacing:0}
.hr-sem td{vertical-align:middle;text-align:center;padding:5px} .hr-sem td:first-child{text-align:left;white-space:nowrap} .hr-sem td small{display:block}
.hr-sem td.der small{color:var(--suave);font-size:11px}
/* Catering en Horarios: aviso en el día, fila de la semana y franja de preparación en la línea de tiempo */
.hr-sem th small.hr-catc{display:inline-flex;align-items:center;gap:3px;margin-top:3px;padding:1px 7px;border-radius:99px;background:color-mix(in srgb,#0891b2 14%,transparent);color:#0891b2;font-weight:700} .hr-catc svg.lucide{width:12px;height:12px}
.hr-catf td{background:color-mix(in srgb,#0891b2 5%,transparent)} .hr-catf td:first-child svg.lucide{width:15px;height:15px;color:#0891b2;vertical-align:-2px}
.hr-cat{display:block;font-size:11.5px;line-height:1.3;padding:3px 6px;margin:2px 0;border-radius:7px;border:1px solid color-mix(in srgb,#0891b2 35%,var(--linea));background:var(--panel);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px} .hr-cat b{color:#0891b2}
.hg-catbar{cursor:default;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 85%,#fff 0%),color-mix(in srgb,var(--c) 85%,#fff 0%) 8px,color-mix(in srgb,var(--c) 65%,#000) 8px,color-mix(in srgb,var(--c) 65%,#000) 16px)!important}
.hg-entrega{position:absolute;top:2px;bottom:2px;width:3px;margin-left:-1px;border-radius:2px;background:#0891b2;box-shadow:0 0 8px #0891b2}
.hr-p{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--c)} .hr-p::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.hr-c{width:100%;min-width:92px;min-height:46px;border-radius:12px;border:1px dashed var(--linea-2);background:transparent;cursor:pointer;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;font:inherit;color:var(--tenue);padding:4px}
.hr-c:hover:not(:disabled){border-style:solid;border-color:var(--pri);background:color-mix(in srgb,var(--pri) 6%,transparent)}
.hr-c:disabled{cursor:default;border-color:transparent} .hr-c i{font-style:normal;font-size:18px} .hr-c.no{background:repeating-linear-gradient(45deg,transparent 0 6px,var(--hover) 6px 12px);font-size:11px}
.hr-t{display:block;width:100%;padding:5px 6px;border-radius:9px;font-size:12.5px;font-weight:750;color:var(--tinta);background:color-mix(in srgb,var(--c) 16%,var(--panel));border-left:3px solid var(--c);font-variant-numeric:tabular-nums}
.hr-dias{margin:0 0 10px;flex-wrap:nowrap;overflow-x:auto}
.hr-cob th,.hr-cob td{text-align:center;padding:5px 4px;min-width:42px;font-variant-numeric:tabular-nums} .hr-cob td:first-child,.hr-cob th:first-child{text-align:left;min-width:110px}
.hr-cob td.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok-t);font-weight:700} .hr-cob td.falta{background:color-mix(in srgb,var(--mal) 16%,transparent);color:var(--mal-t);font-weight:800} .hr-cob td.sobra{background:color-mix(in srgb,var(--av) 14%,transparent);color:var(--av-t);font-weight:700}
.hr-ord td{color:var(--suave);font-size:12px}
.hr-l{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px} .hr-l.ok{background:color-mix(in srgb,var(--ok) 35%,transparent)} .hr-l.falta{background:color-mix(in srgb,var(--mal) 40%,transparent)} .hr-l.sobra{background:color-mix(in srgb,var(--av) 40%,transparent)}
.hr-avisos{margin:0 0 14px;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--av) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--av) 30%,var(--linea));font-size:13.5px}
.hr-avisos summary{cursor:pointer;font-weight:700;color:var(--av-t)} .hr-avisos ul{margin:8px 0 0;padding-left:18px}
.hr-env{list-style:none;margin:0;padding:0} .hr-env li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--linea)} .hr-env small{display:block;color:var(--suave)}
.hr-reglas .pf-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* Horarios: línea de tiempo (Gantt) del día */
.hg{--nom:170px;position:relative;margin:4px 0 6px;overflow-x:auto}
.hg-fila{display:grid;grid-template-columns:var(--nom) minmax(560px,1fr);align-items:center;min-height:42px}
.hg-nom{font-size:13.5px;font-weight:650;padding-right:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hg-nom small{display:block;font-size:11px;font-weight:500;color:var(--suave)}
.hg-pista{position:relative;height:100%;min-height:42px}
.hg-eje{min-height:26px} .hg-eje .hg-pista{min-height:26px} .hg-eje i{position:absolute;top:4px;transform:translateX(-50%);font-style:normal;font-size:11px;font-weight:700;color:var(--suave);font-variant-numeric:tabular-nums}
.hg-eje i:last-child{transform:translateX(-100%)} .hg-eje i:first-child{transform:none}
.hg-tot{border-bottom:1px solid var(--linea);margin-bottom:4px}
.hg-h{position:absolute;top:7px;bottom:7px;display:grid;place-items:center;font-size:11.5px;font-weight:800;border-radius:6px;font-variant-numeric:tabular-nums;border:2px solid var(--panel)}
.hg-h.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok-t)} .hg-h.falta{background:color-mix(in srgb,var(--mal) 22%,transparent);color:var(--mal-t)} .hg-h.sobra{background:color-mix(in srgb,var(--av) 20%,transparent);color:var(--av-t)} .hg-h.cerrado{background:transparent}
.hg-cuerpo .hg-pista{background-image:repeating-linear-gradient(to right,var(--linea) 0 1px,transparent 1px calc(100% / var(--n)));border-bottom:1px dashed var(--linea)}
.hg-abierto{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--pri) 6%,transparent);pointer-events:none}
.hg-ahora{position:absolute;top:0;bottom:0;width:2px;background:var(--mal);z-index:3;pointer-events:none}
.hg-grupo{display:flex;align-items:center;gap:7px;margin:10px 0 2px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c)} .hg-grupo::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.hg-bar{position:absolute;top:6px;bottom:6px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 10px;border-radius:10px;border:0;cursor:pointer;color:#fff;font:inherit;overflow:hidden;white-space:nowrap;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c));box-shadow:0 4px 12px color-mix(in srgb,var(--c) 35%,transparent);transition:transform .12s,box-shadow .15s}
.hg-bar b{font-size:12.5px;font-variant-numeric:tabular-nums} .hg-bar small{font-size:11px;opacity:.85}
.hg-bar:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--c) 45%,transparent)} .hg-bar:disabled{cursor:default}
.hg-desc{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--tenue)}
.hg-add{position:absolute;right:6px;top:50%;transform:translateY(-50%);z-index:2;border:1px dashed var(--linea-2);background:var(--panel);color:var(--suave);border-radius:8px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer} .hg-add:hover{border-color:var(--pri);color:var(--pri-t)}
@media (max-width:700px){ .hg{--nom:110px} }

/* Venta: inventario preparado (entregar sin cocina) */
.pc-grupos .pc-g-listos{border-color:color-mix(in srgb,#16a34a 45%,var(--linea));color:#15803d}
.pc-grupos .pc-g-listos::before{display:none} .pc-grupos .pc-g-listos svg{width:17px;height:17px}
.pc-grupos .pc-g-listos em{font-style:normal;font-size:12px;font-weight:800;background:#16a34a;color:#fff;border-radius:99px;padding:1px 8px}
.pc-grupos .pc-g-listos.on{color:#fff} .pc-grupos .pc-g-listos.on em{background:rgba(255,255,255,.25)}
:root[data-tema="oscuro"] .pc-grupos .pc-g-listos:not(.on){color:#86efac}
.pl.deListo .pl-e{color:#15803d;font-weight:800} :root[data-tema="oscuro"] .pl.deListo .pl-e{color:#86efac}
.pl.deListo .pl-c{background:color-mix(in srgb,#16a34a 18%,var(--panel-2));color:#15803d}
.pc-p em.pc-listos{font-size:11.5px;padding:3px 9px;box-shadow:0 4px 10px rgba(22,163,74,.35)}

/* Venta: sin insumos para preparar */
.pc-p.sininsumos{opacity:.55;filter:grayscale(.85)} .pc-p.sininsumos:hover{transform:none}
.pc-p em.pc-sinins{background:var(--mal);color:#fff}
.pc-falta{list-style:none;margin:0 0 12px;padding:0} .pc-falta li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;margin:0 0 6px;border-radius:12px;background:color-mix(in srgb,var(--mal) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--mal) 25%,var(--linea))}
.pc-falta li span{color:var(--mal-t);font-weight:600;font-size:13.5px;text-align:right}

/* ================= Asistente con IA (Administración → Asistente, js/p-asistente.js) ================= */
.as{display:flex;flex-direction:column;height:calc(100dvh - 210px);min-height:420px;max-width:920px}
.as .pc-cab h2{display:inline-flex;align-items:center;gap:10px} .as .pc-cab h2 svg{color:var(--pri)}
.as-hilo{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:18px 4px 18px}
.as-m{display:flex;gap:10px;align-items:flex-start;max-width:100%;animation:asEntra .3s cubic-bezier(.2,.8,.2,1)}
.as-m.yo{justify-content:flex-end}
.as-av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;color:var(--pri-tx);font-style:normal;
  background:linear-gradient(135deg,var(--pri),var(--pri-2));box-shadow:0 8px 20px -6px color-mix(in srgb,var(--pri) 70%,transparent)}
.as-av svg{width:17px;height:17px} .as-av.grande{width:56px;height:56px;border-radius:18px} .as-av.grande svg{width:26px;height:26px}
.as-b{max-width:min(680px,85%);padding:12px 16px;border-radius:18px;line-height:1.55;font-size:14.5px;overflow-wrap:anywhere}
.as-m.ia .as-b{background:var(--panel);border:1px solid var(--linea);border-top-left-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.as-m.yo .as-b{background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 70%,var(--pri-2)));color:var(--pri-tx);border-top-right-radius:6px}
.as-m.err .as-b{border-color:color-mix(in srgb,var(--mal) 40%,var(--linea));background:color-mix(in srgb,var(--mal) 7%,var(--panel))}
.as-b p{margin:0 0 8px} .as-b p:last-child{margin-bottom:0} .as-b ul,.as-b ol{margin:4px 0 10px;padding-left:22px} .as-b li{margin:3px 0} .as-b ol li::marker{font-weight:700;color:var(--pri)}
.as-b code{font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace;padding:1px 6px;border-radius:6px;background:var(--panel-2)}
.as-pensando{display:inline-flex;gap:5px;padding:4px 0} .as-pensando i{width:7px;height:7px;border-radius:50%;background:var(--suave);animation:asPunto 1.2s infinite ease-in-out}
.as-pensando i:nth-child(2){animation-delay:.15s} .as-pensando i:nth-child(3){animation-delay:.3s}
@keyframes asPunto{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@keyframes asEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.as-vacio{margin:auto;max-width:560px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px}
.as-vacio h3{margin:8px 0 0;font-size:22px;letter-spacing:-.02em} .as-vacio p{margin:0;color:var(--suave)}
.as-sug{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.as-sug .chip{cursor:pointer;padding:8px 14px;border-radius:99px;border:1px solid var(--linea);background:var(--panel);color:var(--tinta);font:inherit;font-size:13px;font-weight:600;transition:border-color .15s,background .15s}
.as-sug .chip:hover{border-color:var(--pri);background:color-mix(in srgb,var(--pri) 7%,var(--panel))}
.as-caja{display:flex;gap:10px;align-items:flex-end;padding:10px;border-radius:20px;background:var(--panel);border:1px solid var(--linea);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.as-caja:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px color-mix(in srgb,var(--pri) 18%,transparent)}
.as-caja textarea{flex:1;border:0;outline:0;resize:none;background:transparent;color:var(--tinta);font:inherit;font-size:15px;line-height:1.45;padding:8px 6px;max-height:160px}
.as-caja .btn{width:44px;height:44px;min-height:44px;padding:0;border-radius:14px;display:grid;place-items:center}
.as-caja.ocupado .btn{opacity:.5;pointer-events:none}
.as-nota{margin:8px 4px 0;font-size:12px;color:var(--tenue);text-align:center}
@media (max-width:900px){ .as{height:calc(100dvh - 230px)} .as-b{max-width:90%} }

/* Pago primero: sin botón Comandar, Cobrar más ancho */
.pc-main.solo-cobrar .pc-cobrar{min-width:min(340px,100%)}

/* Venta paso 3: nombre del cliente (la orden va «a nombre de») */
.po-nombre{display:flex;flex-direction:column;align-items:stretch;gap:14px;width:min(560px,100%)}
.po-nombre input{height:76px;padding:0 26px;border-radius:24px;border:1.5px solid var(--linea);background:var(--panel);color:var(--tinta);font:inherit;font-size:28px;font-weight:700;letter-spacing:-.02em;text-align:center;
  box-shadow:0 14px 40px rgba(0,0,0,.08);transition:border-color .15s,box-shadow .15s}
.po-nombre input:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 18%,transparent),0 14px 40px rgba(0,0,0,.08)}
.po-nombre input::placeholder{color:var(--tenue);font-weight:500}
.po-nombre .btn{min-height:64px;border-radius:20px;font-size:18px;justify-content:center;gap:10px}
/* Catering: datos de entrega en dos columnas */
.po-nombre.po-cat-f{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(640px,100%)} .po-cat-f .full{grid-column:1/-1}
.po-cat-f label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--suave);text-align:left}
.po-cat-f [hidden]{display:none} .po-cat-f input{height:54px;padding:0 16px;border-radius:16px;font-size:18px;text-align:left}
.po-cli{margin:-2px 0 0;padding:8px 12px;border-radius:12px;font-size:13.5px;color:var(--ok-t);background:color-mix(in srgb,var(--ok) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--ok) 30%,var(--linea))} .po-cli svg.lucide{width:16px;height:16px;vertical-align:-3px}
.po-dom{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;border-radius:18px;border:1.5px dashed color-mix(in srgb,#0891b2 45%,var(--linea));background:color-mix(in srgb,#0891b2 5%,transparent)} .po-dom .full{grid-column:1/-1}
@media (max-width:560px){ .po-dom{grid-template-columns:1fr} }
.po-entrega{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:0;margin:0;padding:0} .po-entrega legend{font-size:13px;font-weight:700;color:var(--suave);margin-bottom:6px;padding:0}
.po-entrega label{flex-direction:row;align-items:center;justify-content:center;gap:8px;height:54px;border:1.5px solid var(--linea);border-radius:16px;background:var(--panel);color:var(--tinta);font-size:17px;cursor:pointer}
.po-entrega input{position:absolute;opacity:0;width:1px;height:1px} .po-entrega label:has(input:checked){border-color:#0891b2;background:color-mix(in srgb,#0891b2 10%,var(--panel));color:#0891b2}
.po-entrega label:has(input:focus-visible){outline:2px solid var(--pri);outline-offset:2px} .po-entrega svg.lucide{width:20px;height:20px}
@media (max-width:560px){ .po-nombre.po-cat-f{grid-template-columns:1fr} }
/* Cuenta: «Orden a nombre de» */
.pc-anombre{cursor:pointer;display:flex;flex-direction:column;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-anombre small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--suave);line-height:1.3}
.pc-anombre:hover{color:var(--pri)}
.pc-cab > div{min-width:0}

/* Idioma ES / EN: botón de la barra y de la pantalla de acceso (js/i18n.js) */
.pb-idioma{display:inline-flex;align-items:center;gap:2px;height:40px;padding:3px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);cursor:pointer;font:inherit}
.pb-idioma span{display:grid;place-items:center;min-width:30px;height:32px;padding:0 6px;border-radius:9px;font-size:12px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.55)}
.pb-idioma span.on{background:var(--pri);color:var(--pri-tx);box-shadow:0 4px 14px color-mix(in srgb,var(--pri) 45%,transparent)}
.lk-cab-der{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.lk-idioma{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;font:inherit;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lk-idioma:hover{background:rgba(255,255,255,.14)} .lk-idioma svg{width:15px;height:15px}

/* 2Ø2 DEMO (vitrina): distintivo discreto «Demo · Demostración» en la barra y en la pantalla de acceso */
.p-demo{display:inline-flex;align-items:center;align-self:center;margin-left:10px;padding:3px 9px;border-radius:99px;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  color:#fde68a;background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.35)}
.lk .p-demo{margin:0;padding:6px 12px;font-size:11px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@media (max-width:900px){ .pb-marca .p-demo{margin-left:6px;padding:2px 7px;font-size:9.5px;letter-spacing:.04em} }
/* Portal de proveedores (js/p-portal.js) */
.pp-enlace{width:100%;min-height:44px;border:1px solid var(--linea);border-radius:8px;padding:8px 10px;font:13px ui-monospace,monospace;background:var(--panel-2);color:var(--tinta)}
.pp-banco{display:block;margin:8px 0 14px} .pp-banco .btn{margin-top:6px}
/* Pedido automático (js/p-pedidos.js) */
.pd-auto{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:13.5px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--linea);border-radius:10px;background:var(--panel)}
.pd-auto .pd-todos{margin-left:0;color:var(--tinta)} .pd-auto input[type=time]{min-height:36px;border:1px solid var(--linea);border-radius:8px;padding:2px 8px;font:inherit;background:var(--panel-2);color:var(--tinta)}
/* Entrega de emergencia (catering o demanda que no llega al reparto) */
.pd-em{border-color:color-mix(in srgb,var(--mal) 40%,var(--linea));background:color-mix(in srgb,var(--mal) 7%,var(--panel))} .pd-em > svg.lucide{color:var(--mal-t)} .pd-em > div{flex:1}
.pd-em .pd-hoy-f span{font-weight:700;margin-right:auto}
.pd-hoy > div{flex:1} .pd-hoy-f{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px} .pd-hoy-f span{font-weight:700;margin-right:auto}
/* Checador en la pantalla de acceso (js/app.js checadorHTML) */
.lk-paneles .lk-chec{flex:1 1 260px;max-width:340px} .lk-chec-b{margin:8px 6px 2px;justify-content:center}
.lk-chec li.enturno em{color:#86efac}

/* Sección Catering (js/p-catering.js) */
.ct-lista{display:grid;gap:10px}
.ct-card{display:grid;grid-template-columns:170px 1fr auto;gap:16px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--linea);border-left:4px solid #0891b2;box-shadow:var(--sombra)}
.ct-card.ent{border-left-color:var(--ok);opacity:.85}
.ct-fecha{display:flex;flex-direction:column;gap:6px;align-items:flex-start} .ct-fecha b{font-size:15px} .ct-fecha small{color:var(--suave);font-size:12px}
.ct-info{display:flex;flex-direction:column;gap:3px;min-width:0} .ct-info small{color:var(--suave);font-size:12.5px} .ct-info small svg.lucide{width:13px;height:13px;vertical-align:-2px}
.ct-prods{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-der{display:flex;flex-direction:column;align-items:flex-end;gap:6px} .ct-der > b{font-size:17px} .ct-acc{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ct-dirs{margin:0 0 6px;padding:0;list-style:none;display:grid;gap:6px} .ct-dirs li{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .ct-dirs small{flex-basis:100%;color:var(--suave);padding-left:22px} .ct-dirs svg.lucide{width:15px;height:15px;color:#0891b2}
@media (max-width:720px){ .ct-card{grid-template-columns:1fr} .ct-der{align-items:flex-start} .ct-acc{justify-content:flex-start} }

/* Plano de piso (js/p-plano.js): comedor sobre el plano y editor */
.ps-plano{position:relative;width:100%;max-width:1400px;margin:0 auto 14px;border-radius:18px;overflow:hidden;border:1px solid var(--linea);background:#fff;box-shadow:var(--sombra)}
.ps-plano > img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:.85;pointer-events:none;user-select:none}
.ps-mesa.en-plano{position:absolute;min-height:0;padding:2px;gap:0;border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.18);container-type:size}
.ps-mesa.en-plano.redonda{border-radius:50%} .ps-mesa.en-plano::before{top:3px;width:40%;height:3px}
.ps-mesa.en-plano b{font-size:clamp(11px,30cqmin,24px)} .ps-mesa.en-plano .ps-det,.ps-mesa.en-plano .ps-mes{display:none} .ps-mesa.en-plano .ps-tot{font-size:clamp(9px,16cqmin,14px)}
.ps-mesa.en-plano .p-badge{top:2px;right:2px;font-size:10px;padding:0 5px} .ps-mesa.en-plano .ps-listo{position:absolute;bottom:2px;right:3px} .ps-mesa.en-plano .ps-listo svg.lucide{width:12px;height:12px}
@container (min-height:70px){ .ps-mesa.en-plano .ps-det{display:flex} }
.ps-sinplano{margin:6px 2px 8px;font-size:13px;font-weight:700;color:var(--suave)}
.pp-herr{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px} .pp-cuenta{margin-left:auto;font-size:13px;color:var(--suave)}
.pp-lienzo{position:relative;width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--linea);background:#fff;touch-action:none;user-select:none}
.pp-lienzo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none} .pp-lienzo.agregando{cursor:crosshair;outline:3px dashed var(--pri);outline-offset:-3px}
.pp-m{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:9px;background:color-mix(in srgb,var(--pri) 78%,transparent);color:var(--pri-tx);border:2px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:grab;touch-action:none}
.pp-m.redonda{border-radius:50%} .pp-m.sin{background:color-mix(in srgb,var(--av) 80%,transparent)} .pp-m:active{cursor:grabbing}
.pp-m b{font-size:15px;line-height:1} .pp-m small{display:flex;gap:2px;align-items:center;font-size:11px;opacity:.9} .pp-m small svg.lucide{width:11px;height:11px}
.pp-rs{position:absolute;right:-6px;bottom:-6px;width:16px;height:16px;border-radius:5px;background:#fff;border:2px solid var(--pri);cursor:nwse-resize}
.pp-vacio{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:50px 20px;border:2px dashed var(--linea);border-radius:16px;color:var(--suave)} .pp-vacio svg.lucide{width:40px;height:40px;color:var(--pri)} .pp-vacio b{color:var(--tinta);font-size:17px} .pp-vacio span{max-width:520px;font-size:14px}
.pp-pie{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
/* Asientos de la cuenta (comedor): botones por persona sentada y orden agrupada por asiento */
.pc-asientos{display:flex;gap:4px;flex-wrap:wrap;align-items:center} .pc-asientos > span{font-size:12px;font-weight:700;color:var(--suave);display:flex;gap:4px;align-items:center;margin-right:2px} .pc-asientos > span svg.lucide{width:15px;height:15px}
.pc-asientos button{min-width:38px;height:38px;border-radius:12px;border:1px solid var(--linea);background:var(--panel);color:var(--tinta);font:inherit;font-weight:800;cursor:pointer;padding:0 10px}
.pc-asientos button.on{background:var(--pri);border-color:var(--pri);color:var(--pri-tx)} .pc-asientos button.usado:not(.on){border-color:color-mix(in srgb,var(--pri) 45%,var(--linea));color:var(--pri-t)}
.pl-asi{display:flex;justify-content:space-between;cursor:pointer} .pl-asi.on{color:var(--pri-t)}
.pc-planos{margin-bottom:14px} .pc-planos h3{display:flex;gap:8px;align-items:center;margin:0 0 4px} .pc-planos-l{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .pc-planos-l small{margin-left:4px}
.pc-lineas:has(.pl-asi) .pl-n > em{display:none}   /* agrupada por asiento: la etiqueta A# sobra */

/* ===================== Marca 2Ø2 Technologies =====================
   Decisión del dueño 2026-11-03: el sistema lleva la identidad de 2Ø2 (la misma del Estado de resultados del portal corporativo):
   Unbounded en títulos, reloj y cifras grandes; Geist en el texto; Geist Mono en etiquetas en mayúsculas espaciadas; grises neutros (sin tinte azul).
   Sin color de marca (la plantilla «202», cfg.colorMarca vacío) el primario es monocromo: negro con texto blanco en tema claro y blanco con texto
   negro en tema oscuro (--pri-tx), y la clase .marca-mono en <html>. Un restaurante con su propia marca conserva su color (aplicarMarca pone
   --pri y --pri-tx en línea). La barra superior y la pantalla de acceso son oscuras en los dos temas, así que ahí el primario monocromo es blanco.
   Las fuentes vienen de Google Fonts (index.html); sin internet se usan las del sistema. */
:root{
  --f-d:"Unbounded","Helvetica Neue",Arial,sans-serif; --f-b:"Geist","Inter","SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-m:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --fondo:#f5f5f4; --panel:#ffffff; --panel-2:#f7f7f6; --hover:#efefed; --linea:#e7e7e4; --linea-2:#d7d7d3;
  --tinta:#0a0a0b; --suave:#6e6e73; --tenue:#a1a1a6;
  --pri:#0a0a0b; --pri-2:#52525b; --pri-tx:#fff;
  --sombra:0 1px 2px rgba(10,10,11,.04),0 2px 8px rgba(10,10,11,.05); --sombra-2:0 12px 32px rgba(10,10,11,.12),0 2px 6px rgba(10,10,11,.06);
  font-family:var(--f-b); font-feature-settings:"ss01" off;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --fondo:#050506; --panel:#0f0f10; --panel-2:#141416; --hover:#1c1c1e; --linea:#232325; --linea-2:#303033;
    --tinta:#f5f5f4; --suave:#a1a1a6; --tenue:#6e6e73; --pri:#f5f5f4; --pri-2:#a1a1aa; --pri-tx:#0a0a0b; --barra:rgba(15,15,16,.86);
  }
}
:root[data-tema="oscuro"]{
  --fondo:#050506; --panel:#0f0f10; --panel-2:#141416; --hover:#1c1c1e; --linea:#232325; --linea-2:#303033;
  --tinta:#f5f5f4; --suave:#a1a1a6; --tenue:#6e6e73; --pri:#f5f5f4; --pri-2:#a1a1aa; --pri-tx:#0a0a0b; --barra:rgba(15,15,16,.86);
}
.marca-mono .pb,.marca-mono .lk{--pri:#f5f5f4;--pri-2:#a1a1aa;--pri-tx:#0a0a0b}
.marca-mono .btn.primario{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 18px rgba(10,10,11,.16)}
.marca-mono .btn.primario:hover{background:color-mix(in srgb,var(--pri) 86%,var(--panel))}
.marca-mono .btn.primario-2{background:#3a3a3c;color:#fff}
/* Barra superior: negro puro como el logotipo, firma con la línea de luz blanca */
.pb{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),rgba(0,0,0,.94);color:#f5f5f4}
.pb-logo{background:#000}
.pb-marca b{font-family:var(--f-d);font-weight:400;font-size:14px;letter-spacing:.01em}
.pb-marca small,.pb-nav a{font-family:var(--f-m);letter-spacing:.06em;text-transform:uppercase}
.pb-marca small{font-size:9.5px;font-weight:500} .pb-nav a{font-size:9.5px;font-weight:500}
/* Títulos y cifras */
.ps-cab h1,.pc-cab h1,.pc-cab h2,.pcj-cab h2,.pm-cab h2,.po-flujo h1,.lk-card h1{font-family:var(--f-d);font-weight:400;letter-spacing:-.02em}
.ps-cab h1,.pc-cab h1{font-size:22px} .pc-cab h2{font-size:19px} .po-flujo h1{font-size:clamp(22px,2.6vw,30px)}
.p-kpi span{font-family:var(--f-m);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.p-kpi b{font-family:var(--f-d);font-weight:300;font-size:22px;letter-spacing:-.02em}
.p-card h3{letter-spacing:-.005em}
.p-chip,.p-badge{font-family:var(--f-b)}
/* Pantalla de acceso */
.lk-fondo{background:radial-gradient(120% 90% at 50% 120%,#000 0%,transparent 60%),#050506}
.lk-reloj > span{font-family:var(--f-m);font-weight:500;letter-spacing:.24em}
.lk-reloj > b{font-family:var(--f-d);font-weight:200;letter-spacing:-.04em}
.lk-lema{font-family:var(--f-d);letter-spacing:-.03em} .lk-lema span{font-weight:200} .lk-lema span.acento{font-weight:500}
.marca-mono .lk-lema span.acento{background:linear-gradient(90deg,#fff 20%,#8e8e93)}
.marca-mono .lk-b2{background:radial-gradient(circle,#71717a 0%,transparent 64%)}
.marca-mono .lk-b3{background:radial-gradient(circle,#d4d4d8 0%,transparent 62%)}
.lk-marca b{font-family:var(--f-d);font-weight:400}
.marca-mono .lk-b1{opacity:.3}
/* Plantillas de plano de piso (js/p-plano.js: gestor) y selector del comedor */
.pp-plantillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pp-pl{display:flex;flex-direction:column;border:1px solid var(--linea);border-radius:16px;overflow:hidden;background:var(--panel)} .pp-pl.on{border-color:var(--pri);box-shadow:0 0 0 2px color-mix(in srgb,var(--pri) 25%,transparent)}
.pp-pl-img{position:relative;background:#fff;border-bottom:1px solid var(--linea)} .pp-pl-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.pp-pl-img i{position:absolute;border-radius:4px;background:color-mix(in srgb,var(--pri) 55%,transparent);border:1px solid #fff} .pp-pl-img i.redonda{border-radius:50%}
.pp-pl-t{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:10px 12px 4px} .pp-pl-t b{font-size:14px} .pp-pl-t small{flex-basis:100%;color:var(--suave);font-size:12px}
.pp-pl-acc{display:flex;gap:6px;flex-wrap:wrap;padding:8px 12px 12px;margin-top:auto}
.ps-plsel{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:1px solid var(--linea);border-radius:var(--radio-s);background:var(--panel)}
.ps-plsel select{border:0;background:transparent;font-weight:600;min-height:40px;max-width:200px}
/* El plano siempre es una imagen clara: con el primario monocromo las mesas sobre él van en negro en los dos temas */
.marca-mono .pp-pl-img i{background:rgba(10,10,11,.55)} .marca-mono .pp-m:not(.sin){background:rgba(10,10,11,.82);color:#fff}

/* «Express» sobre la caja de Drive thru, dentro de «Directo en tienda» (decisión del dueño 2026-11-04: los tres son cómo llegó la venta a la tienda) */
.po-tag{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);background:var(--panel-2);border:1px solid var(--linea)}
.po-op .po-tag svg.lucide{width:12px;height:12px;stroke-width:2}
/* Terminal bancaria integrada (js/terminal.js): espera del cobro y opciones bajo «Cobrar en terminal» */
.pco-man{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px}
.tm-caja{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:12px 6px 4px}
.tm-caja p{margin:8px 0 0;color:var(--suave);font-size:14.5px;line-height:1.45;max-width:340px}
.tm-ic{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--panel-2);border:1px solid var(--linea);font-style:normal;margin-bottom:6px}
.tm-ic svg.lucide{width:38px;height:38px;stroke-width:1.6}
.tm-monto{font-family:var(--f-d);font-weight:300;font-size:38px;letter-spacing:-.02em}
.tm-caja.espera .tm-ic{animation:tmLatido 1.6s ease-in-out infinite} .tm-caja.envio .tm-ic svg{animation:giro 1s linear infinite}
.tm-caja.ok .tm-ic{color:var(--ok-t);border-color:color-mix(in srgb,var(--ok) 40%,var(--linea))} .tm-caja.mal .tm-ic{color:var(--mal-t);border-color:color-mix(in srgb,var(--mal) 40%,var(--linea))} .tm-caja.lento .tm-ic{color:var(--av-t)}
@keyframes tmLatido{0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--pri) 30%,transparent)}50%{transform:scale(1.04);box-shadow:0 0 0 14px transparent}}
@media (prefers-reduced-motion:reduce){ .tm-caja .tm-ic,.tm-caja .tm-ic svg{animation:none} }
/* Pedidos de apps de reparto (js/apps.js): aviso fijo y revisión de lo que falta */
.ap-aviso{border-color:color-mix(in srgb,var(--av) 45%,var(--linea))} .ap-aviso > svg.lucide{color:var(--av-t)}
.ap-falt{margin:6px 0 0;padding-left:18px;font-size:13.5px;line-height:1.5}
.ap-items{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px} .ap-items td{padding:7px 4px;border-bottom:1px solid var(--linea);vertical-align:top}
.ap-items td:first-child{width:44px;color:var(--suave);white-space:nowrap} .ap-items small{display:block;color:var(--suave);font-size:12px}

/* Demo de presentación: el aviso «cualquier contraseña funciona» siempre se ve (js/app.js demoPresentacion) */
.lk .lk-card .lk-demo.lk-demo-libre{display:block;color:rgba(255,255,255,.82);font-weight:600}

/* Órdenes (js/p-ordenes.js): filtro por estado, historial de la orden y reembolso */
.po-est{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.po-est button{display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:99px;border:1px solid var(--linea);background:var(--panel);color:var(--tinta);font:inherit;font-weight:600;font-size:13px;cursor:pointer}
.po-est button b{font-size:12px;min-width:22px;padding:1px 7px;border-radius:99px;background:var(--hover);text-align:center}
.po-est button.on{background:var(--pri);color:var(--pri-tx);border-color:transparent} .po-est button.on b{background:rgba(255,255,255,.22)}
.po-prods{display:inline-block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;color:var(--suave)}
.po-hist{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--linea)}
.po-hist li{position:relative;display:grid;grid-template-columns:96px 1fr;gap:10px;padding:8px 0}
.po-hist li::before{content:"";position:absolute;left:-21px;top:13px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--suave)}
.po-hist li.verde::before{border-color:var(--ok)} .po-hist li.rojo::before{border-color:var(--mal)} .po-hist li.amarillo::before{border-color:var(--av)}
.po-hist time{color:var(--suave);font-size:12.5px;font-variant-numeric:tabular-nums} .po-hist b{display:block;font-weight:600;font-size:14px} .po-hist small{color:var(--suave);font-size:12.5px}
.po-reem{display:flex;flex-direction:column;gap:12px} .po-reem-cab{display:flex;justify-content:space-between;align-items:center}
.po-reem ul{list-style:none;margin:0;padding:0;border:1px solid var(--linea);border-radius:12px;max-height:40vh;overflow:auto}
.po-reem li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--linea)} .po-reem li:last-child{border-bottom:0}
.po-reem li > span:first-child{display:flex;flex-direction:column} .po-reem li small{color:var(--suave);font-size:12px}
.po-q{display:flex;align-items:center;gap:8px} .po-q b{min-width:28px;text-align:center;font-size:16px}
.po-chk{display:flex;gap:8px;align-items:center;font-size:14px}
.po-reem-tot{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;background:var(--hover)} .po-reem-tot b{font-size:22px}
@media (max-width:640px){ .po-hist li{grid-template-columns:1fr;gap:2px} }