*{box-sizing:border-box}
body.spf{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:linear-gradient(135deg,#6a7be7,#7b55b7);min-height:100vh}
.container{display:flex;flex-wrap:wrap;gap:25px;padding:30px;max-width:1000px;margin:auto;align-items:flex-start;justify-content:center}
.panel{background:#f7f8fc;border-radius:18px;padding:25px;width:420px;max-width:100%}
.panel h2{margin:0 0 15px}
.panel label{font-size:13px;display:block;margin-top:10px}
.panel input[type=text],.panel input[type=password],.panel input[type=number],.panel input[type=date],.panel input:not([type]),.panel select{width:100%;padding:10px;border-radius:10px;border:1px solid #dcdcdc;margin-top:4px;font:inherit}
.panel .login-submit input{margin-top:12px;padding:10px 16px;border:0;border-radius:10px;background:#6a7be7;color:#fff;font-weight:600;cursor:pointer}
.panel textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #dcdcdc;margin-top:4px;font:inherit;resize:vertical}
.prefijo{display:flex;margin-top:4px}
.prefijo span{display:flex;align-items:center;padding:0 12px;background:#e6e8f5;border:1px solid #dcdcdc;border-right:0;border-radius:10px 0 0 10px;font-weight:700;color:#444;user-select:none}
.panel .prefijo input{margin-top:0;border-radius:0 10px 10px 0}
.cuenta{font-size:12px;color:#555;margin:4px 0 0}
[hidden]{display:none!important}
.nota{font-size:12px;color:#c0392b;margin:6px 0 0}
.enlace{display:block;margin-top:8px;font-size:13px;color:#5b6bd0}
.btn{width:100%;padding:14px;border:none;border-radius:12px;font-weight:600;color:#fff;margin-top:15px;cursor:pointer}
.btn-generate{background:#6a7be7}.btn-clear{background:#ff7a1a}
.producto-box{border:1px dashed #ccc;padding:10px;border-radius:10px;margin-top:10px}

.result{display:none;width:400px;max-width:100%}
.result .bar{background:#fff;border-radius:18px 18px 0 0;color:#6a7be7;text-align:center;padding:10px;font-weight:600}
.ticket-wrap{background:#fff;padding:5px 0 10px}
.result-buttons{display:flex;gap:10px;background:#fff;padding:0 15px 15px;border-radius:0 0 18px 18px}
.btn-print{background:#28b463}.btn-pdf{background:#17a2b8}.btn-new{background:#6f42c1}
.result-buttons .btn{margin-top:10px}

#ticket{width:370px;max-width:100%;background:#fff;color:#000;padding:18px 10px 10px;margin:0 auto;font-family:"Segoe UI",Tahoma,Arial,sans-serif}
#ticket .logo{display:block;margin:0 auto 8px;max-width:130px;max-height:80px;width:auto;height:auto;object-fit:contain}
#ticket .emp{font-size:22px;font-weight:800;text-align:center;margin:0 0 4px;letter-spacing:.3px}
#ticket .dato{font-size:14px;text-align:center;line-height:1.55;color:#222}
#ticket .fac{background:#000;color:#fff;text-align:center;font-size:18px;font-weight:800;letter-spacing:.8px;padding:7px 4px;margin:14px -10px 10px}
#ticket .fecha{text-align:center;font-size:14px;color:#222;padding-bottom:8px}
#ticket .dash{border:0;border-top:1px dashed #888;margin:0}
#ticket .solid{border:0;border-top:2px solid #000;margin:0}
#ticket .cli{padding:8px 0 6px;font-size:14.5px;line-height:1.5}
#ticket .cli b{font-size:15.5px;font-weight:800}
#ticket .det{text-align:center;font-weight:800;font-size:14px;letter-spacing:1.2px;padding:8px 0 6px}
#ticket .prod{padding:8px 0 10px}
#ticket .prod .n{font-weight:800;font-size:15px;text-transform:uppercase;margin-bottom:3px}
#ticket .prod .s{font-size:12.5px;color:#333;line-height:1.5}
#ticket .prod .r{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;margin-top:6px}
#ticket .prod .r b{font-weight:800;font-size:17px}
#ticket .tot{background:#eee;text-align:center;padding:12px 0 10px;margin:6px 0 0}
#ticket .tot small{display:block;font-size:15px;font-weight:700;letter-spacing:.4px;color:#222}
#ticket .tot strong{display:block;font-size:30px;font-weight:800;margin-top:2px}
#ticket .pago{display:flex;justify-content:space-between;font-size:16px;padding:9px 0}
#ticket .ases{font-size:16.5px;line-height:1.55;padding:8px 0}
#ticket .gar{border:1px solid #888;font-size:13px;line-height:1.45;padding:8px 9px;margin:4px 0 8px;color:#111}
#ticket .gracias{text-align:center;font-weight:800;font-size:14.5px;padding:2px 0 8px}
#ticket .pie{text-align:center;font-size:11px;line-height:1.6;color:#777;padding-top:6px}

@media print{
  @page{margin:0}
  body.spf{background:#fff}
  body.spf *{visibility:hidden}
  #ticket,#ticket *{visibility:visible}
  #ticket{position:absolute;left:0;top:0;width:100%}
}