/* /static/style.css */

/* ===== Base ===== */
:root{
  --bg: #f2f3f7;
  --panel: #f6f7fb;
  --card: #ffffff;
  --line: #d6dbe7;
  --line-soft: #e8ebf3;
  --text: #1c2330;
  --muted: #5f6b7a;
  --blue: #2b6fda;
  --blue-soft: #e7f0ff;
  --gold: #f6e8cc;
  --red-soft: #f4d6d9;
  --shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -200px, #ffffff, var(--bg));
  color:var(--text);
}

/* ===== Topbar ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:linear-gradient(180deg, #f5f6fb, #f0f2f8);
  border-bottom:1px solid var(--line);
  padding:14px 18px 10px;
  box-shadow:0 6px 18px rgba(19, 30, 58, 0.06);
}
.title{
  font-weight:900;
  font-size:18px;
  color:#1b2433;
}
.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.brandTitle{
  font-weight:900;
  font-size:20px;
  color:#1b2433;
  letter-spacing:0.4px;
}
.brandSubtitle{
  display:none;
  font-weight:800;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.6px;
  color:#50607a;
}
.topInputs{
  margin-top:12px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.field{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:linear-gradient(180deg, #f9fbff, #f1f3f9);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.field span{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  white-space:nowrap;
}
.field input{
  border:none;
  outline:none;
  background:transparent;
  font-size:15px;
  min-width:220px;
}
#modeLabel{
  font-size:14px;
}

/* ===== Tabs ===== */
.tabs{
  display:flex;
  gap:8px;
  padding:12px 14px 8px;
  background:transparent;
}
.tab{
  border:1px solid var(--line);
  background:linear-gradient(180deg, #ffffff, #f3f4f8);
  color:#1e2a3c;
  font-weight:900;
  padding:9px 14px;
  border-radius:14px;
  cursor:pointer;
  min-width:120px;
  box-shadow:0 4px 10px rgba(16, 24, 40, 0.06);
}
.tab.active{
  border-color:#9db7e9;
  background:linear-gradient(180deg, #eef5ff, #dbe8ff);
  color:#15325f;
}

/* ===== Panel ===== */
.panel{
  padding:14px 16px 22px;
}
#status{
  margin:8px 0 12px;
  padding:12px 14px;
  background:linear-gradient(180deg, #f7f9ff, #eef2f8);
  border:1px solid var(--line);
  border-radius:14px;
  color:#1f2b3d;
  font-weight:700;
}
#status:empty{
  display:none;
}
.pricePreview{
  margin:8px 0 12px;
  padding:12px;
  background:linear-gradient(180deg, #ffffff, #f6f8fd);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  position:sticky;
  top:8px;
  z-index:5;
}
.pricePreview .row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.pricePreview .title{
  font-weight:900;
  color:#123;
  font-size:14px;
}
.pricePreview .sub{
  font-size:12px;
  color:#567;
  font-weight:800;
  margin-top:4px;
}
.pricePreview .prices{
  font-weight:900;
  color:#123;
  text-align:right;
  white-space:nowrap;
}
.pricePreview .closeBtn{
  border:1px solid var(--line);
  background:linear-gradient(180deg, #ffffff, #f2f4f9);
  border-radius:12px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:900;
  color:#1e2a3c;
}
.priceModal{
  position:fixed;
  inset:0;
  background:rgba(12,20,40,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:120;
}
.priceModalCard{
  width:min(520px, 96vw);
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  box-shadow:0 20px 60px rgba(10,25,60,.2);
}
.priceModalHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.priceModalTitle{
  font-weight:900;
  color:#123;
  font-size:15px;
}
.priceModalBody label{
  display:block;
  font-size:12px;
  font-weight:900;
  color:#345;
  margin-bottom:6px;
}
.priceModalBody input{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  font-size:16px;
  background:#fff;
}
.priceModalPreview{
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:#f8f9fd;
  min-height:44px;
}
.priceModalList{
  margin-top:8px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#ffffff;
  max-height:260px;
  overflow-y:auto;
}
.priceModalItem{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid #eef2fa;
}
.priceModalItem:last-child{ border-bottom:none; }
.priceModalItem .name{
  font-weight:900;
  color:#123;
  font-size:13px;
}
.priceModalItem .code{
  font-size:12px;
  color:#678;
  font-weight:800;
  margin-top:2px;
}
.priceModalPreview .row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.priceModalPreview .title{
  font-weight:900;
  color:#123;
  font-size:14px;
}
.priceModalPreview .sub{
  font-size:12px;
  color:#567;
  font-weight:800;
  margin-top:4px;
}
.priceModalPreview .prices{
  font-weight:900;
  color:#123;
  text-align:right;
  white-space:nowrap;
}
.ticketModal{
  position:fixed;
  inset:0;
  background:rgba(12,20,40,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:130;
}
.ticketModalCard{
  width:min(760px, 96vw);
  max-height:90vh;
  overflow:auto;
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  box-shadow:0 20px 60px rgba(10,25,60,.2);
}
.ticketModalHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.ticketModalTitle{
  font-weight:900;
  color:#123;
  font-size:15px;
}
.ticketModalBody table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.ticketModalBody th,
.ticketModalBody td{
  border-bottom:1px solid #eef2fa;
  padding:6px 4px;
  text-align:left;
}
.ticketModalBody th{
  background:#f3f6fc;
}
.ticketActions{
  margin-top:12px;
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.discountModal{
  position:fixed;
  inset:0;
  background:rgba(12,20,40,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:140;
}
.discountModalCard{
  width:min(520px, 96vw);
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  box-shadow:0 20px 60px rgba(10,25,60,.2);
}
.discountModalHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.discountModalTitle{
  font-weight:900;
  color:#123;
  font-size:15px;
}
.discountModalBody{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.confirmModal{
  position:fixed;
  inset:0;
  background:rgba(12,20,40,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:150;
}
.confirmModalCard{
  width:min(520px, 96vw);
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:0 20px 60px rgba(10,25,60,.2);
}
.confirmModalHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.confirmModalTitle{
  font-weight:900;
  color:#123;
  font-size:15px;
}
.confirmModalBody{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.confirmModalMessage{
  font-size:14px;
  color:#234;
  font-weight:700;
  line-height:1.35;
}
.confirmModalActions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.specialModal{
  position:fixed;
  inset:0;
  background:rgba(12,20,40,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:160;
}
.specialModalCard{
  width:min(520px, 96vw);
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:0 20px 60px rgba(10,25,60,.2);
}
.specialModalHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.specialModalTitle{
  font-weight:900;
  color:#123;
  font-size:15px;
}
.specialModalBody{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.specialModalBody label{
  font-size:12px;
  font-weight:900;
  color:#345;
}
.specialModalBody input{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  font-size:16px;
  background:#fff;
}
.specialModalActions{
  display:flex;
  justify-content:flex-end;
  margin-top:4px;
}
.qrModal{
  position:fixed;
  inset:0;
  background:rgba(12,20,40,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:170;
}
.qrModalCard{
  width:min(820px, 96vw);
  max-height:90vh;
  overflow:auto;
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:0 20px 60px rgba(10,25,60,.2);
}
.qrModalHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.qrModalTitle{
  font-weight:900;
  color:#123;
  font-size:15px;
}
.qrModalBody{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:16px;
  align-items:start;
}
.qrScanBody{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:16px;
  align-items:start;
}
.qrVideoWrap{
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px;
  background:#0f1220;
  min-height:260px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
#qrVideo{
  width:100%;
  height:100%;
  min-height:220px;
  border-radius:12px;
  object-fit:cover;
  background:#0b0d14;
}
.qrScanStatus{
  color:#cdd7ff;
  font-size:12px;
  font-weight:700;
  text-align:center;
}
.qrScanTools{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.qrScanTools textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  font-size:13px;
  resize:vertical;
}
.qrScanHint{
  font-size:12px;
  color:#456;
}
.qrScanActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.qrTicketPreview{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:#f7f9fd;
}
.qrTicketPreview table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.qrTicketPreview th,
.qrTicketPreview td{
  border-bottom:1px solid #eef2fa;
  padding:6px 4px;
  text-align:left;
}
.qrTicketPreview th{
  background:#f3f6fc;
}
.qrCodeWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px dashed #d4dbea;
  border-radius:16px;
  background:#ffffff;
}
.qrHint{
  font-size:12px;
  color:#456;
  font-weight:800;
  text-align:center;
}
.qrLink{
  font-size:11px;
  color:#3b4b63;
  word-break:break-all;
  text-align:center;
  max-width:220px;
}
@media (max-width: 720px){
  .qrModalBody{
    grid-template-columns:1fr;
  }
  .qrScanBody{
    grid-template-columns:1fr;
  }
}
.qrStandalone{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(180deg, #f6f7fb, #eef1f7);
}
.qrStandaloneActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.qrStandaloneActions .btn{
  text-decoration:none;
}
.qrStandaloneCard{
  width:min(720px, 96vw);
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:0 12px 40px rgba(10,25,60,.15);
}
.qrStandaloneTitle{
  font-weight:900;
  font-size:16px;
  color:#123;
  margin-bottom:10px;
}
.qrStandaloneCard table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.qrStandaloneCard th,
.qrStandaloneCard td{
  border-bottom:1px solid #eef2fa;
  padding:6px 4px;
  text-align:left;
}
.qrStandaloneCard th{
  background:#f3f6fc;
}
.discountTotal{
  font-size:12px;
  font-weight:900;
  color:#345;
}
.discountType{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:13px;
  font-weight:800;
  color:#234;
}
#discountValue{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  font-size:16px;
  background:#fff;
}
.discountSummary{
  margin-top:10px;
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:16px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.discountSummaryText{
  font-weight:900;
  color:#123;
}
.discountSummaryActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
#ordersHistoryWrap select,
#salesHistoryWrap select{
  padding:6px 8px;
  border:1px solid #dbe3f3;
  border-radius:10px;
  font-weight:700;
  background:#fff;
}
#ordersHistoryWrap input,
#salesHistoryWrap input{
  padding:6px 8px;
  border:1px solid #dbe3f3;
  border-radius:10px;
  font-weight:700;
  background:#fff;
}
.filtersRow{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.filterToggle{
  border:1px solid #dbe3f3;
  background:#ffffff;
  border-radius:8px;
  padding:2px 6px;
  font-weight:900;
  margin-left:6px;
  cursor:pointer;
}
.filterRow input,
.filterRow select{
  width:100%;
  padding:6px 8px;
  border:1px solid #dbe3f3;
  border-radius:10px;
  font-weight:700;
  background:#fff;
}

/* ===== Generic card ===== */
.card{
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
}

/* ===== Tables ===== */
#tableWrap{
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
#ordersTableWrap{
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
table{
  width:100%;
  border-collapse:collapse;
}
thead th{
  background:linear-gradient(180deg, #f5f7fc, #eef2f9);
  color:#1f2b3d;
  text-align:left;
  font-size:12px;
  font-weight:900;
  padding:10px 10px;
  border-bottom:1px solid var(--line);
}
tbody td{
  padding:10px 10px;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
}
tbody tr:last-child td{ border-bottom:none; }

.center{ text-align:center; }
.right{ text-align:right; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* ===== Row cell helpers ===== */
.cellFlex{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.cellFlexCenter{
  justify-content:center;
}

/* ===== Mini buttons / caret ===== */
.miniCaret{
  border:1px solid var(--line);
  background:linear-gradient(180deg, #ffffff, #f2f4f9);
  border-radius:10px;
  padding:4px 8px;
  cursor:pointer;
  font-weight:900;
  color:#2b3546;
}
.miniCaret:hover{ background:#eef2fb; }

.miniBtn{
  border:1px solid var(--line);
  background:linear-gradient(180deg, #ffffff, #f2f4f9);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:900;
  color:#2b3546;
}
.miniBtn:hover{ background:#eef2fb; }

/* ===== Barcode area ===== */
.bottomRow{
  margin-top:12px;
}
.barcodeWrap{
  position:relative; /* IMPORTANT: para posicionar suggestBox debajo */
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow);
}
.barcodeWrap label{
  display:block;
  font-size:13px;
  font-weight:900;
  color:#1f2b3d;
  margin-bottom:6px;
}

/* ===== Ghost input wrap ===== */
.ghostWrap{
  position:relative;
  width:100%;
}
#barcode, #ordersBarcode{
  width:100%;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  outline:none;
  font-size:16px; /* iPhone: evita zoom */
  background:#ffffff;
  position:relative;
  z-index:2;
}

/* Ghost overlays */
#ghostText, #ordersGhostText{
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  font-size:16px;
  z-index:1;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  max-width:calc(100% - 24px);
}
.ghostTyped{ color:transparent; } /* typed parte invisible para que se alinee */
.ghostRest{ color:#9aa7bd; font-weight:800; }

/* ===== Suggest boxes (Ventas + Pedidos) ===== */
#suggestBox, #ordersSuggestBox{
  position:absolute;
  left:12px;
  right:12px;
  top:100%;
  margin-top:8px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(10,25,60,.12);
  overflow:hidden;
  display:none;      /* JS lo prende */
  z-index:50;
  max-height:320px;
  overflow-y:auto;
}

.suggestItem{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  cursor:pointer;
  border-bottom:1px solid #eef2fa;
}
.suggestItem:last-child{ border-bottom:none; }
.suggestItem .name{
  font-weight:900;
  color:#123;
  font-size:13px;
}
.suggestItem .code{
  font-size:12px;
  color:#678;
  font-weight:800;
}
.suggestItem .prices{
  font-size:12px;
  color:#234;
  font-weight:900;
  min-width:110px;
}
.suggestItem.active,
.suggestItem:hover{
  background:#f3f7ff;
}

/* ===== Buttons row ===== */
.btnRow{
  margin-top:12px;
  display:flex;
  gap:12px;
  align-items:stretch;
  justify-content:space-between;
  flex-wrap:wrap;
  background:linear-gradient(180deg, #fbfcff, #f1f3f9);
  border:1px solid var(--line);
  border-radius:18px;
  padding:10px;
}
.syncRow{
  margin-top:12px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  background:linear-gradient(180deg, #fbfcff, #f1f3f9);
  border:1px solid var(--line);
  border-radius:18px;
  padding:10px 12px;
}
.syncStatus{
  font-weight:900;
  color:#1f2b3d;
}
.syncStatus.pending{ color:#7a5a1a; }
.syncStatus.error{ color:#7a1f27; }
.syncStatus.synced{ color:#1f3a2e; }
.btnGroup{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.btn{
  border:1px solid #d5dbe7;
  background:linear-gradient(180deg, #ffffff, #f3f5fa);
  color:#1f2b3d;
  font-weight:900;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(16, 24, 40, 0.08);
}
.btn:hover{ background:linear-gradient(180deg, #ffffff, #e9edf7); }
.btn.disabled{
  opacity:0.6;
  cursor:not-allowed;
  box-shadow:none;
}
.btn.orange{
  border-color:#d08a4a;
  background:linear-gradient(180deg, #ffe5c6, #f2b778);
  color:#5a2e00;
}
.btn.red{
  border-color:#c46a74;
  background:linear-gradient(180deg, #f7c9d1, #e78f9c);
  color:#5a0f1b;
}
.btn.blue{
  border-color:#4f79c9;
  background:linear-gradient(180deg, #4a7fe3, #2f60c0);
  color:#ffffff;
}
.btn.yellow{
  border-color:#d3b45a;
  background:linear-gradient(180deg, #ffe8a8, #efc86a);
  color:#4a3200;
}
.btn.green{
  border-color:#d5dbe7;
  background:linear-gradient(180deg, #ffffff, #f3f5fa);
  color:#1f2b3d;
}

/* total boxes */
.totalBox{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:linear-gradient(180deg, #ffffff, #f3f4f8);
  border:1px solid var(--line);
  border-radius:16px;
  font-weight:900;
  color:#1b2433;
}
.totalBox span:first-child{ color:#345; }

/* ===== Floating menu ===== */
#floatingMenu{
  position:fixed;
  z-index:80;
  display:none;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(10,25,60,.14);
  overflow:hidden;
  min-width:220px;
}
#floatingMenu button{
  width:100%;
  text-align:left;
  border:none;
  background:transparent;
  padding:12px 12px;
  cursor:pointer;
  font-weight:900;
  color:#234;
  border-bottom:1px solid #eef2fa;
}
#floatingMenu button:last-child{ border-bottom:none; }
#floatingMenu button:hover{ background:#f3f7ff; }
#floatingMenu .danger{ color:#b21; }

/* ===== Toast ===== */
.toast{
  position:fixed;
  right:16px;
  bottom:16px;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(180deg, #ffffff, #f3f4f8);
  border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(16, 24, 40, 0.12);
  font-weight:900;
  color:#1f2b3d;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:200;
}
.toast.show{
  opacity:1;
  transform:translateY(0);
}
.toast.success{
  border-color:#b8d1c3;
  background:linear-gradient(180deg, #e7f0ea, #d5e5dd);
  color:#1f3a2e;
}
.toast.error{
  border-color:#d8a4aa;
  background:linear-gradient(180deg, #f6e1e3, #edc9cd);
  color:#5c1f27;
}
/* ===== Pedidos list ===== */
.ordersHeader{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.secondaryPanel{
  margin-top:10px;
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:18px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.secondaryPanel{
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding-top:0;
  padding-bottom:0;
  margin-top:0;
  transition:max-height .25s ease, opacity .2s ease, margin .2s ease, padding .2s ease;
}
.secondaryPanel.open{
  max-height:420px;
  opacity:1;
  margin-top:10px;
  padding-top:10px;
  padding-bottom:10px;
}
.secondaryPanel .btnGroup{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
#ordersListWrap{
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
#salesListWrap{
  background:linear-gradient(180deg, #ffffff, #f7f8fc);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.actionBtns{
  display:grid;
  grid-template-columns:repeat(2, minmax(120px, 1fr));
  gap:6px;
  justify-content:flex-end;
}
.actionBtns .btn{
  padding:6px 10px;
  min-width:120px;
}
.statusBadge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid transparent;
}
.status-guardado{
  color:#2f3b4f;
  background:#eef1f8;
  border-color:#dbe1ee;
}
.status-impreso{
  color:#1b3a2b;
  background:#e6f2ec;
  border-color:#bfe0cf;
}
.status-cancelado{
  color:#6b2430;
  background:#f4d7db;
  border-color:#e1a8ad;
}
.syncBadge{
  display:inline-block;
  margin-left:6px;
  padding:3px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  border:1px solid transparent;
}
.sync-pending{
  color:#7a5a1a;
  background:#f6ecd2;
  border-color:#e1caa2;
}
.sync-error{
  color:#7a1f27;
  background:#f6e1e3;
  border-color:#d8a4aa;
}
.sync-synced{
  color:#1f3a2e;
  background:#e7f0ea;
  border-color:#b8d1c3;
}

/* ===== Primary pay buttons ===== */
#btnCobrar,
#btnOrdersCobrar{
  background:linear-gradient(180deg, #4b5563, #2f3a49);
  border-color:#2b3544;
  color:#ffffff;
  min-width:200px;
}
#btnCobrar:hover,
#btnOrdersCobrar:hover{
  background:linear-gradient(180deg, #556170, #344151);
}

/* ===== Button colors to match mock ===== */
#btnAdd{
  background:linear-gradient(180deg, #4b86dd, #2f6ec6);
  border-color:#2c63b0;
  color:#ffffff;
  padding:9px 16px;
}
#btnAdd:hover{ background:linear-gradient(180deg, #4f8fe8, #2f6fcf); }

#btnOrdersAdd{
  background:linear-gradient(180deg, #4b86dd, #2f6ec6);
  border-color:#2c63b0;
  color:#ffffff;
  padding:9px 16px;
}
#btnOrdersAdd:hover{ background:linear-gradient(180deg, #4f8fe8, #2f6fcf); }

#btnPrecio{
  background:linear-gradient(180deg, #f5f7fb, #eceff6);
  border-color:#cfd7e7;
  color:#1f2b3d;
}
#btnOrdersPrecio{
  background:linear-gradient(180deg, #f5f7fb, #eceff6);
  border-color:#cfd7e7;
  color:#1f2b3d;
}
#btnDesc{
  background:linear-gradient(180deg, #f6ecd2, #efddb7);
  border-color:#e1caa2;
  color:#3a2b17;
}
#btnOrdersDesc{
  background:linear-gradient(180deg, #f6ecd2, #efddb7);
  border-color:#e1caa2;
  color:#3a2b17;
}
#btnSalesHistory{
  background:linear-gradient(180deg, #ffffff, #eef2f8);
  border-color:#cfd7e7;
  color:#1f2b3d;
}
#btnOrdersHistory{
  background:linear-gradient(180deg, #ffffff, #eef2f8);
  border-color:#cfd7e7;
  color:#1f2b3d;
}
#btnLimpiar{
  background:linear-gradient(180deg, #f6e1e3, #edc9cd);
  border-color:#d8a4aa;
  color:#5c1f27;
}
#btnOrdersLimpiar{
  background:linear-gradient(180deg, #f6e1e3, #edc9cd);
  border-color:#d8a4aa;
  color:#5c1f27;
}
#btnOrdersSave{
  background:linear-gradient(180deg, #4b86dd, #2f6ec6);
  border-color:#2c63b0;
  color:#ffffff;
}
#btnOrdersSave:hover{ background:linear-gradient(180deg, #4f8fe8, #2f6fcf); }

#btnOrdersMore{
  background:linear-gradient(180deg, #ffffff, #eef2f8);
  border-color:#cfd7e7;
  color:#1f2b3d;
}

#viewOrders #btnOrdersCobrar{
  display:none;
}

/* ===== Button icons ===== */
#btnPrecio,
#btnOrdersPrecio,
#btnDesc,
#btnOrdersDesc,
#btnSalesHistory,
#btnOrdersHistory,
#btnLimpiar,
#btnOrdersLimpiar{
  position:relative;
  padding-left:36px;
}
#btnPrecio::before,
#btnOrdersPrecio::before,
#btnDesc::before,
#btnOrdersDesc::before,
#btnSalesHistory::before,
#btnOrdersHistory::before,
#btnLimpiar::before,
#btnOrdersLimpiar::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  width:16px;
  height:16px;
  transform:translateY(-50%);
  background-repeat:no-repeat;
  background-size:16px 16px;
  opacity:.9;
}
#btnPrecio::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}
#btnOrdersPrecio::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
}
#btnDesc::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%233a2b17\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"5\" x2=\"5\" y2=\"19\"/><circle cx=\"7\" cy=\"7\" r=\"2\"/><circle cx=\"17\" cy=\"17\" r=\"2\"/></svg>');
}
#btnOrdersDesc::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%233a2b17\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" y1=\"5\" x2=\"5\" y2=\"19\"/><circle cx=\"7\" cy=\"7\" r=\"2\"/><circle cx=\"17\" cy=\"17\" r=\"2\"/></svg>');
}
#btnSalesHistory::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%231f3a2e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"3\" width=\"16\" height=\"18\" rx=\"2\"/><line x1=\"8\" y1=\"7\" x2=\"16\" y2=\"7\"/><line x1=\"8\" y1=\"11\" x2=\"16\" y2=\"11\"/><line x1=\"8\" y1=\"15\" x2=\"13\" y2=\"15\"/></svg>');
}
#btnOrdersHistory::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%231f3a2e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"3\" width=\"16\" height=\"18\" rx=\"2\"/><line x1=\"8\" y1=\"7\" x2=\"16\" y2=\"7\"/><line x1=\"8\" y1=\"11\" x2=\"16\" y2=\"11\"/><line x1=\"8\" y1=\"15\" x2=\"13\" y2=\"15\"/></svg>');
}
#btnLimpiar::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%235c1f27\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M8 6V4h8v2\"/><path d=\"M19 6l-1 14H6L5 6\"/></svg>');
}
#btnOrdersLimpiar::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%235c1f27\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M8 6V4h8v2\"/><path d=\"M19 6l-1 14H6L5 6\"/></svg>');
}

/* ===== Mobile layout ===== */
.mobileList{ display:none; }

@media (max-width: 768px){
  .field input{ min-width:160px; }
  .tabs{ display:none; }
  .brand{
    align-items:center;
    text-align:center;
  }
  .brandTitle{
    font-size:22px;
  }
  .brandSubtitle{
    display:block;
  }
  #tableWrap{ display:none; }
  #ordersTableWrap{ display:none; }
  #ordersListWrap{ display:none; }
  #salesListWrap{ display:none; }
  .mobileList{ display:block; }

  .btnRow{
    flex-direction:column;
    align-items:center;
  }
  .syncRow{
    flex-direction:column;
    align-items:stretch;
  }
  .totalBox{
    justify-content:space-between;
    width:100%;
    max-width:420px;
    margin:0 auto;
  }

  .mobileCard{
    background:#ffffff;
    border:1px solid #e6ebf2;
    border-radius:14px;
    padding:12px;
    margin-top:10px;
  }
  .mobileTop{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
  }
  .mobileName{
    font-weight:900;
    color:#123;
    font-size:14px;
  }
  .mobileCode{
    font-size:12px;
    color:#678;
    font-weight:800;
    margin-top:2px;
  }
  .mobilePrices{
    font-weight:900;
    color:#123;
    text-align:right;
    white-space:nowrap;
  }
  .mobileMeta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:10px;
  }
  .mobileMeta .box{
    border:1px solid #eef2fa;
    border-radius:14px;
    padding:10px;
    background:#fbfcff;
  }
  .mobileMeta .lbl{
    font-size:12px;
    color:#567;
    font-weight:900;
    margin-bottom:6px;
  }
  .mobileMeta .val{
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
    font-weight:900;
    color:#123;
  }

  /* Suggest en mobile: mǭs alto y usable */
  #suggestBox, #ordersSuggestBox{
    max-height:45vh;
  }

  /* Mobile simplification: Pedidos */
  #viewOrders{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-bottom:96px;
  }
  #viewOrders .barcodeWrap{
    position:sticky;
    bottom:0;
    z-index:30;
  }
  #viewOrders.options-open .barcodeWrap{
    position:static;
  }
  #viewOrders .bottomRow{
    margin-top:6px;
  }
  #viewOrders .btnRow .btnGroup{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    width:100%;
    max-width:420px;
    margin:0 auto;
  }
  #btnOrdersSave,
  #btnOrdersMore{
    font-size:16px;
    padding:12px 14px;
  }
  #btnOrdersSave{
    font-size:18px;
    padding:14px 16px;
    box-shadow:0 10px 22px rgba(27, 79, 160, 0.25);
  }
  #viewOrders .totalBox{
    order:-1;
  }
  #viewOrders #ordersMobileList{
    margin-bottom:28px;
  }
  #ordersSecondaryPanel{
    display:none;
  }
  #ordersSecondaryPanel.open{
    display:block;
  }
  #ordersSecondaryPanel{
    max-width:420px;
    margin:0 auto;
  }
  #ordersSecondaryPanel .btnGroup{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  #ordersSecondaryPanel .btn{
    width:100%;
    text-align:center;
  }
}