*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f4f6;color:#111827}
.topbar{height:64px;background:#111827;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.topbar small{display:block;color:#cbd5e1}
.topbar a{color:white;text-decoration:none;margin-left:15px;background:#374151;padding:10px 14px;border-radius:10px}
main{padding:14px}
.venta-grid{display:grid;grid-template-columns:180px 1fr 395px;gap:14px;height:calc(100vh - 92px)}
.categorias,.carrito,.productos{background:white;border-radius:16px;padding:12px;box-shadow:0 2px 10px rgba(0,0,0,.08);overflow:auto}
.cat-btn{width:100%;padding:18px 10px;margin-bottom:10px;border:0;border-radius:14px;background:#e5e7eb;font-size:17px;font-weight:bold;cursor:pointer}
.cat-btn.active,.cat-btn:hover{background:#111827;color:white}
.productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;align-content:start}
.producto-card{background:#f9fafb;border:1px solid #e5e7eb;border-radius:16px;padding:10px;cursor:pointer;transition:.15s}
.producto-card:hover{transform:scale(1.03);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.producto-card .foto{height:110px;background:#e5e7eb;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#6b7280}
.producto-card img{width:100%;height:100%;object-fit:cover}
.producto-card h3{font-size:15px;margin:8px 0 4px}
.producto-card p{margin:0;color:#6b7280;font-size:12px}
.producto-card strong{display:block;font-size:18px;margin-top:6px}
.producto-card small{color:#6b7280}
.carrito h2{margin-top:0}
.carrito label{font-size:13px;font-weight:bold;margin-top:9px;display:block}
.carrito input,.carrito select{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:10px;font-size:16px}
.doc-row{display:grid;grid-template-columns:1fr 90px;gap:6px}
.doc-row button{border:0;border-radius:10px;background:#374151;color:white;font-weight:bold}
.cliente-extra{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.item-carrito{display:grid;grid-template-columns:1fr 75px 40px;gap:6px;align-items:center;border-bottom:1px solid #e5e7eb;padding:8px 0}
.item-carrito strong{display:block;font-size:13px}
.item-carrito small{color:#6b7280}
.item-carrito button{background:#ef4444;color:white;border:0;border-radius:8px;height:36px}
.total-box{display:flex;justify-content:space-between;align-items:center;background:#111827;color:white;padding:16px;border-radius:14px;margin-top:12px}
.total-box strong{font-size:26px}
.btn-cobrar,.btn-primary{width:100%;border:0;border-radius:14px;padding:18px;background:#16a34a;color:white;font-size:20px;font-weight:bold;margin-top:12px;cursor:pointer}
.btn-limpiar{width:100%;border:0;border-radius:14px;padding:13px;background:#6b7280;color:white;font-size:16px;font-weight:bold;margin-top:8px;cursor:pointer}
.msg{margin-top:10px;padding:10px;border-radius:10px;font-weight:bold}
.msg.ok,.alert-ok{background:#dcfce7;color:#166534}
.msg.error{background:#fee2e2;color:#991b1b}
.form-card{max-width:1000px;margin:auto;background:white;border-radius:16px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.form-grid label{font-weight:bold}
.form-grid input,.form-grid select{display:block;width:100%;padding:12px;margin-top:6px;border:1px solid #d1d5db;border-radius:10px}
@media(max-width:1000px){.venta-grid{grid-template-columns:1fr;height:auto}.categorias{display:flex;gap:8px}.cat-btn{min-width:140px}.carrito{order:-1}.form-grid{grid-template-columns:1fr}}