:root{ --negro:#0a0a0a; --naranja:#e9a23b; --naranja-soft:#2a2113; }
body{font-family:system-ui, -apple-system;background:var(--negro);color:#fff;margin:0;padding:20px;max-width:480px;margin:auto}
input,button,select{width:100%;padding:16px;border-radius:14px;border:1.5px solid transparent;margin-top:12px;font-size:16px;box-sizing:border-box}
input,select{background:#161616;color:#fff;border-color:#2a2a2a} input:focus,select:focus{outline:none;border-color:var(--naranja)}
button{background:var(--naranja);color:#000;font-weight:900;letter-spacing:.5px;cursor:pointer}
.card{background:#161616;border:1px solid #232323;padding:14px;border-radius:14px;margin-top:10px;display:flex;justify-content:space-between;align-items:center}
.card b{color:var(--naranja)}
.logo{width:110px;height:110px;border-radius:50%;border:3px solid var(--naranja);margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:50px;background:#000}
.linea{height:2px;background:var(--naranja);width:80px;margin:12px auto;opacity:.8}
.prod-btn{white-space:pre-line;height:78px;font-size:13px;font-weight:800;background:#161616;color:#fff;border:1.5px solid #2a2a2a}
.prod-btn.active{border-color:var(--naranja);background:var(--naranja-soft);color:var(--naranja)}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-top:10px;background:#161616;border:1px solid #232323;border-radius:14px;padding:12px 14px}
.brand-sub{font-size:18px;font-weight:900;letter-spacing:1px;color:var(--naranja);text-transform:uppercase;line-height:1.1}
.btn-salir{display:flex;align-items:center;gap:6px;background:#1c1c1c;border:1px solid #2a2a2a;color:#888;padding:8px 14px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.5px;width:auto;margin:0}
.carrito-item{display:flex;justify-content:space-between;align-items:center;background:#161616;border:1px solid #2a2a2a;border-radius:12px;padding:10px 12px;margin-top:8px}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:34px;height:34px;padding:0;margin:0;border-radius:9px;background:#222;color:#fff;border:1px solid #333;font-size:18px;line-height:1}
.qty button.plus{background:var(--naranja);color:#000;border-color:var(--naranja);font-weight:900}
.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pay-btn{padding:20px 10px;border-radius:16px;font-weight:900;font-size:14px;letter-spacing:.5px;border:1.5px solid transparent}
.pay-btn:active{transform:scale(.97)}
.pay-efectivo{background:#22c55e;color:#000}
.pay-mp{background:#009EE3;color:#fff}
.pay-trans{background:#27272a;color:#fff;border-color:#333}
.pay-py{background:#dc2626;color:#fff;animation:pulse 1.5s infinite}
.detalle-ventas{margin-top:22px;background:#111;border:1px solid #232323;border-radius:14px;overflow:hidden}
.detalle-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer;user-select:none}
.detalle-head b{font-size:12px;letter-spacing:1px;opacity:.8}
.detalle-head span{font-size:11px;color:var(--naranja);border:1px solid #2a2a2a;padding:4px 10px;border-radius:20px;background:#161616}
.detalle-body{display:none;max-height:360px;overflow-y:auto;border-top:1px solid #222}
.detalle-body.open{display:block}
#lista{margin-top:0;padding:10px}
.precio-row{display:flex;gap:10px;align-items:center;margin-top:10px;background:#161616;border:1px solid #232323;border-radius:12px;padding:10px 12px}
.precio-row label{flex:1;text-align:left;font-size:13px;font-weight:700;opacity:.8}
.precio-row input{width:110px;margin:0;text-align:right;font-weight:900}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:99;padding:20px}
.modal.open{display:flex}
.modal-box{background:#161616;border:1px solid #2a2a2a;border-radius:18px;padding:18px;width:100%;max-width:420px;max-height:85vh;overflow-y:auto}
#bienvenida{
  min-height: 100dvh;
  height: auto;
  display:flex;
  flex-direction:column;
  justify-content: flex-start;
  text-align:center;
  overflow-y: visible;
  padding: 20px 0 40px;
  box-sizing: border-box;
}
.nalu-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 auto 20px;
  background:#161616;
  border:1px solid #2a2a2a;
  color:#e9a23b;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.5px;
  padding:6px 12px;
  border-radius:100px;
}
.nalu-badge .dot{
  width:6px;height:6px;background:#22c55e;border-radius:50%;
  box-shadow:0 0 8px #22c55e; animation:pulse 2s infinite;
}
.paso-card{
  background:linear-gradient(180deg,#161616 0%, #111 100%);
  border:1px solid #232323;
  border-radius:20px;
  padding:20px;
  margin-top:24px;
  text-align:left;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.paso-label{opacity:.6;margin:0 0 4px;font-size:13px;letter-spacing:.3px}
.link-muted{display:block;margin-top:16px;font-size:12px;color:#666;text-decoration:underline;text-align:center;cursor:pointer}

.footer-nalu{
  margin-top: 40px;
  padding-top: 20px;
  padding-bottom: 30px;
  opacity: .9;
  flex-shrink: 0;
  width: 100%;
}
.footer-nalu a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  background:#111;
  border:1px solid #1e1e1e;
  border-radius:14px;
  padding:10px 14px;
  width:fit-content;
  margin:0 auto;
}
.footer-nalu img{
  width:28px;height:28px;border-radius:50%;object-fit:cover;
  border:1px solid #2a2a2a;
}
.footer-nalu b{color:#fff;font-size:12px;letter-spacing:.5px;display:block;text-align:left;line-height:1}
.footer-nalu span{color:#666;font-size:10px;text-align:left;display:block}
.footer-nalu .version{font-size:9px;color:#333;margin-top:10px;letter-spacing:1px}
@keyframes pulse{0%{opacity:1}50%{opacity:.85}100%{opacity:1}}