/* ZYVO Comandas · Pantalla de cobro y ticket · v1 · 22/10/2026 (BORRADOR, sin publicar)
   Usa los tokens del comandero («Estética v2»: --navy, --ink, --bg, --soft, --line, --rojo…). Sirve para el móvil y para la caja. */
.zc-velo{position:fixed;inset:0;z-index:80;background:rgba(14,42,53,.45);display:grid;place-items:stretch}
.zc-pant{background:var(--bg);display:grid;grid-template-rows:auto 1fr;min-height:0;height:100%;overflow:hidden}
.zc-cab{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px}
.zc-cab h2{margin:0;font-size:1.1rem;font-weight:700;flex:1}
.zc-cab button{color:var(--ink);background:var(--soft);border-radius:8px;padding:8px 14px;font-weight:600}
.zc-cuerpo{overflow:auto;padding:12px 14px 120px;display:grid;gap:12px;align-content:start;grid-auto-rows:max-content}
.zc-col{display:grid;gap:12px;align-content:start;grid-auto-rows:max-content}
.zc-tarj{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px}
.zc-tarj h3{margin:0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.zc-lin{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.zc-lin:last-child{border-bottom:0}
.zc-lin .q{font-weight:800;color:var(--navy);min-width:28px}
.zc-lin small{display:block;color:var(--muted);font-size:.78rem}
.zc-lin.pagada{opacity:.5}
.zc-lin.sel{background:var(--azul-bg);border-radius:10px}
.zc-step{display:flex;align-items:center;gap:6px}
.zc-step button{width:36px;height:36px;border-radius:12px;background:var(--soft);font-weight:800;color:var(--navy);font-size:1.1rem}
.zc-tot{display:flex;justify-content:space-between;font-weight:700}
.zc-tot.grande{font-size:1.5rem;font-weight:800;color:var(--ink)}
.zc-tot.pend{color:var(--rojo)}
.zc-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--soft);padding:4px;border-radius:14px}
.zc-seg button{padding:10px 4px;border-radius:10px;font-weight:800;color:var(--muted);font-size:.9rem;min-height:44px}
.zc-seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px -4px rgba(4,68,89,.4)}
.zc-ops{display:flex;flex-wrap:wrap;gap:8px}
.zc-met{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.zc-met button{min-height:64px;border-radius:16px;background:var(--soft);font-weight:800;color:var(--navy);display:grid;place-items:center;gap:2px;font-size:.95rem}
.zc-met button span{font-size:1.3rem}
.zc-met button.on{background:var(--navy);color:#fff}
.zc-importe{font-size:2.2rem;font-weight:800;color:var(--ink);text-align:center;letter-spacing:-.02em}
.zc-cambio{background:var(--verde-bg);color:var(--verde);border-radius:14px;padding:10px 14px;font-weight:800;font-size:1.3rem;display:flex;justify-content:space-between}
.zc-cambio.mal{background:var(--rojo-bg);color:var(--rojo)}
.zc-in{padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font-size:1.1rem;width:100%}
.zc-mix{display:grid;grid-template-columns:1fr 120px auto;gap:6px;align-items:center}
.zc-nota{font-size:.82rem;color:var(--muted)}
.zc-aviso{background:var(--naranja-bg);color:var(--naranja);border-radius:14px;padding:10px 12px;font-weight:700;font-size:.9rem}
.zc-error{background:var(--rojo-bg);color:var(--rojo);border-radius:14px;padding:10px 12px;font-weight:800}
.zc-pie{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:10px 14px calc(env(safe-area-inset-bottom) + 10px);display:grid;gap:8px}
.zc-cobrar{background:var(--verde);color:#fff;border-radius:18px;min-height:64px;font-weight:800;font-size:1.25rem;width:100%}
.zc-cobrar:disabled{opacity:.4}
.zc-acc{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.zc-chipest{font-size:.7rem;font-weight:800;padding:4px 8px;border-radius:999px;background:var(--soft);color:var(--muted);white-space:nowrap}
.zc-chipest.EMITIDO{background:var(--verde-bg);color:var(--verde)}
.zc-chipest.PENDIENTE,.zc-chipest.ENVIANDO{background:#FFF7D6;color:#7A5B00}
.zc-chipest.RECHAZADO{background:var(--rojo-bg);color:var(--rojo)}
.zc-chipest.ANULADO,.zc-chipest.ANULACION_PENDIENTE,.zc-chipest.ANULANDO{background:#EDEDED;color:#555}
.zc-giro{width:42px;height:42px;border-radius:50%;border:4px solid var(--soft);border-top-color:var(--navy);animation:zcg 1s linear infinite;margin:10px auto}
@keyframes zcg{to{transform:rotate(360deg)}}
/* Ticket (vista previa en pantalla, papel de 80 mm) */
.zc-ticket{background:#fff;color:#111;width:min(340px,100%);margin:0 auto;padding:16px 14px;border-radius:6px;box-shadow:0 10px 30px -18px rgba(0,0,0,.5);
  font:500 13px/1.35 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;user-select:text}
.zc-ticket .c{text-align:center}.zc-ticket .b{font-weight:800}
.zc-ticket hr{border:0;border-top:1px dashed #999;margin:8px 0}
.zc-ticket .f{display:flex;justify-content:space-between;gap:8px}
.zc-ticket .qr{display:grid;place-items:center;margin:10px 0 4px}
.zc-ticket .qr svg{width:150px;height:150px}
.zc-ticket .marca{border:2px solid #111;font-weight:800;text-align:center;padding:2px;margin:6px 0}
.zc-ticket .prueba{background:#111;color:#fff;font-weight:800;text-align:center;padding:3px;margin-bottom:8px}
/* PIN del encargado */
.zc-pin{display:grid;gap:10px;max-width:340px;margin:0 auto}
.zc-pin .pinv{display:flex;justify-content:center;gap:14px}
.zc-pin .pinv i{width:18px;height:18px;border-radius:50%;border:2px solid var(--navy)}
.zc-pin .pinv i.on{background:var(--navy)}
.zc-pin .teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.zc-pin .teclado button{height:62px;border-radius:16px;background:var(--soft);font-size:1.5rem;font-weight:800;color:var(--navy)}
/* Escritorio y tablet horizontal: cobro en dos columnas, como una pantalla de pago de TPV */
@media (min-width:900px){
  .zc-velo{place-items:center;padding:24px}
  .zc-pant{width:min(1180px,100%);height:min(860px,100%);border-radius:24px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
  .zc-cab{padding:12px 18px}
  .zc-cuerpo{grid-template-columns:1.1fr 1fr;gap:16px;padding:16px 18px 18px}
  .zc-cuerpo.una{grid-template-columns:1fr}
  .zc-pie{border-radius:18px;border:1px solid var(--line)}
}
@media print{body *{visibility:hidden}.zc-ticket,.zc-ticket *{visibility:visible}.zc-ticket{position:absolute;left:0;top:0;box-shadow:none}}