body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto}
.bar{display:flex;gap:8px;align-items:center;padding:10px;background:#2f4f4f;color:#fff}
.bar input{flex:1;padding:8px;border-radius:4px;border:1px solid #ccc}
.layout{display:grid;grid-template-columns:60% 40%;gap:0;height:calc(100vh - 50px)}
.grid{overflow:auto;padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;background:#f5f5f5}
.tile{background:#fff;border:1px solid #ddd;border-radius:6px;display:flex;flex-direction:column}
.tile img{width:100%;height:140px;object-fit:cover;border-bottom:1px solid #eee}
.tile .info{padding:8px;display:flex;flex-direction:column;gap:6px}
.tile .name{font-size:14px;line-height:1.2}
.tile .meta{display:flex;justify-content:space-between;font-size:12px;color:#555}
.tile .controls{display:flex;gap:8px;padding:8px}
.tile .controls input{width:64px;padding:6px}
.tile button{padding:8px;border:none;background:#00897b;color:#fff;border-radius:0 0 6px 6px;cursor:pointer}
.cart{border-left:1px solid #ddd;padding:10px;display:flex;flex-direction:column;gap:12px}
.cart h3{margin:0 0 8px 0}
.lines{flex:1;overflow:auto;border:1px solid #eee}
.lines:empty{display:flex;align-items:center;justify-content:center;color:#777;min-height:180px}
.lines:empty::before{content:'El carrito está vacío'}
.line{display:grid;grid-template-columns:24px 64px 1fr 180px 160px;gap:8px;padding:10px;border-bottom:1px solid #f0f0f0;align-items:center}
.line input{width:80px;padding:6px}
.remove{width:24px;height:24px;background:#eee;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
.thumb{width:64px;height:64px;object-fit:cover;border:1px solid #eee;border-radius:6px}
.name{font-size:14px}
.qty{display:flex;gap:6px;align-items:center}
.qty .btn{width:32px;height:32px;border:none;border-radius:4px;background:#00897b;color:#fff;cursor:pointer}
.unit{color:#777}
.line-total{display:none}
.price-controls{display:flex;gap:6px;align-items:center}
.price-controls select{padding:6px}
.price-controls input{width:80px;padding:6px}
.price-controls button{padding:8px;border:none;background:#00695c;color:#fff;border-radius:4px;cursor:pointer}
.discount-row{background:#fffbe6}
.quick{display:flex;gap:4px}
.quick button{padding:6px;background:#00897b;color:#fff;border:none;border-radius:4px;cursor:pointer}
.summary{display:flex;justify-content:space-between;padding:6px 0}
.grand{display:flex;justify-content:space-between;font-size:20px;color:#00897b;font-weight:800}
.admin{border:1px solid #ddd;padding:10px;margin:10px 0;display:none}
.admin h4{margin:0 0 8px 0}
.admin .list{margin:8px 0}
.admin .row{display:flex;gap:8px;margin-bottom:6px}
.admin .row input{flex:1;padding:6px}
.admin .row button{padding:6px;border:none;background:#e53935;color:#fff;border-radius:4px;cursor:pointer}
.admin .actions{display:flex;gap:8px}
.admin .actions button{padding:8px;border:none;background:#00695c;color:#fff;border-radius:4px;cursor:pointer}
.totals{display:flex;justify-content:space-between;font-weight:600}
.actions{display:flex;gap:8px}
.actions button{padding:10px;border:none;border-radius:4px;background:#00695c;color:#fff;cursor:pointer}
.note-controls{display:flex;gap:8px;align-items:center;padding:6px 10px}
.payments{margin-top:10px}
.payment-row{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.payment-row select{width:100%;padding:8px}
.payment-row input{width:100%;padding:8px}
.payment-row .mini{align-self:flex-end;padding:6px;border:none;background:#00897b;color:#fff;border-radius:4px;cursor:pointer}
.payment-actions{display:flex;gap:8px}
.payment-actions button{padding:8px;border:none;background:#00695c;color:#fff;border-radius:4px;cursor:pointer}
.note-backdrop{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}
.note-card{background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.2);width:clamp(320px,92vw,720px);max-height:90vh;display:flex;flex-direction:column}
.note-header{padding:12px 16px;border-bottom:1px solid #eee;font-weight:600}
.note-body{padding:12px 16px;flex:1;overflow-y:auto}
.note-footer{padding:12px 16px;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.note-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.note-suggestions button{padding:6px 8px;border:none;background:#e0f2f1;color:#00695c;border-radius:16px;cursor:pointer}
.note-controls{display:flex;gap:8px;align-items:center;padding:6px 10px}
.note-preview{font-size:12px;color:#555;max-width:60ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-base{text-decoration:line-through;color:#888;margin-left:6px}
.unit strong{font-weight:700}
.loader{width:16px;height:16px;border:2px solid rgba(255,255,255,0.7);border-top-color:transparent;border-radius:50%;display:inline-block;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}