/* ====== Variables ====== */
:root{
  /* Colores de marca */
  --brand-orange:#f26c00;
  --brand-orange-dark:#e05e00;

  /* Superficies */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --border:#e8edf4;

  /* Texto */
  --text:#0f172a;      /* gris azulado profundo */
  --muted:#66768b;

  /* Estados */
  --success:#10b981;
  --danger:#dc2626;
}

*{box-sizing:border-box}
html{
  height:100%;
  font-size:clamp(0.875rem,0.5vw+0.75rem,1rem);
}
body{
  min-height:calc(var(--vh,1vh)*100);
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}

img,video{max-width:100%;height:auto;object-fit:cover;display:block}

/* ====== Appbar ====== */
.appbar{
  position:sticky; top:0; z-index:30;
  display:flex; justify-content:space-between; align-items:center;
  padding:0.625rem 0.75rem;
  background:var(--brand-orange); color:#fff;
  box-shadow:0 0.0625rem 0 rgba(0,0,0,.06);
}
.logo{width:2.5rem; height:2.5rem; object-fit:contain}
.titles{line-height:1.05}
.titles .title{font-weight:900; letter-spacing:0.00625rem}
.titles .subtitle{font-size:0.75rem; opacity:.95; margin-top:0.125rem}
.appbar-left{display:flex; align-items:center; gap:0.625rem}
.appbar-right{display:flex; align-items:center; gap:0.375rem}
.icon-btn{
  appearance:none; border:0; background:rgba(255,255,255,.16); color:#fff;
  width:3rem; height:3rem; border-radius:0.625rem; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; position:relative; touch-action:manipulation; transition:transform .2s ease;
}
.icon-btn:active{transform:scale(.96)}
.badge-count{
  position:absolute; right:-0.375rem; top:-0.375rem;
  background:#fff; color:var(--brand-orange); font-weight:900;
  border-radius:100vmax; padding:0 0.375rem; font-size:0.75rem; min-width:1.125rem; text-align:center;
}

/* ====== Layout ====== */
.page{padding:0.75rem; max-width:54rem; margin:0 auto}
.section{background:var(--surface); border:1px solid var(--border); border-radius:0.875rem; padding:0.75rem; margin-bottom:0.75rem}
.section-header{display:flex; align-items:center; justify-content:space-between; gap:0.625rem; margin-bottom:0.25rem}
.section-title{margin:0; font-size:clamp(1.0625rem,2.2vw,1.25rem); font-weight:900; letter-spacing:0.00625rem}
.branch-chip{background:#fff1e6; color:#7a3d00; border:1px solid #ffd4ad; padding:0.375rem 0.625rem; border-radius:100vmax; font-size:0.75rem}
.scan-cta{margin-top:0.5rem; display:flex; flex-direction:column; gap:0.375rem}
.hint{color:var(--muted); font-size:0.75rem}
.mt8{margin-top:0.5rem} .mt12{margin-top:0.75rem}

/* ====== Controles ====== */
.row{display:flex; align-items:center}
.wrap{flex-wrap:wrap}
.gap8{gap:0.5rem}
.input{
  flex:1; min-width:0; padding:0.625rem 0.75rem; border-radius:0.75rem; outline:none;
  border:1px solid var(--border); background:#fff; color:var(--text)
}
.input.slim{padding:0.5rem 0.625rem}
.w120{width:7.5rem}

.btn{
  appearance:none; border:1px solid var(--border); background:#fff; color:var(--text);
  border-radius:0.75rem; padding:0.625rem 0.875rem; cursor:pointer; font-weight:700;
  min-width:3rem; min-height:3rem; touch-action:manipulation; transition:transform .2s ease;
}
.btn.ghost{background:#fff}
.btn.primary{background:var(--brand-orange); color:#fff; border-color:transparent}
.btn.primary:hover{background:var(--brand-orange-dark)}
.btn.success{background:var(--success); color:#fff; border-color:transparent}
.btn.success.xl{padding:0 1.125rem; border-radius:0.75rem; font-weight:900}
.btn.lg{font-size:1rem}
.btn.sm{padding:0.375rem 0.625rem; border-radius:0.625rem}
.btn:disabled{opacity:.6; cursor:not-allowed}

.pill{padding:0.375rem 0.625rem; border-radius:100vmax; font-size:0.75rem; border:1px solid var(--border)}
.pill.neutral{background:#eef2f6; color:#223}
.pill.success{background:#e6fbf5; color:#035b3e; border-color:#b9f3e1}
.pill.danger{background:#fee2e2; color:#7f1d1d; border-color:#fecaca}

/* ====== Láminas (sheets) ====== */
.sheet{
  position:fixed; left:0; right:0; bottom:-100%;
  background:var(--surface); border-top:1px solid var(--border);
  box-shadow:0 -0.625rem 2.5rem rgba(0,0,0,.12); z-index:40;
  padding:0.75rem; border-radius:1.125rem 1.125rem 0 0;
  transition:bottom .22s ease;
}
.sheet.open{ bottom:0 }
.sheet-header{display:flex; align-items:center; justify-content:space-between; gap:0.5rem}
.sheet-title{font-weight:900}
.sheet-actions{display:flex; align-items:center; gap:0.5rem}

.scanner-panel{position:relative; border-radius:0.75rem; overflow:hidden; border:1px solid var(--border); margin-top:0.5rem}
.video{width:100%; height:auto; max-height:40vh; background:#000; display:block}
.overlay{position:absolute; inset:0}
/* ====== Barra inferior ====== */

.bottombar{
  position:fixed; left:0; right:0; bottom:0; z-index:35;
  display:flex; align-items:center; justify-content:space-between; gap:0.625rem;
  background:#fff; border-top:1px solid var(--border); padding:0.625rem 0.75rem; padding-bottom:calc(0.625rem + env(safe-area-inset-bottom));
}
.bottom-actions-spacer{height:4rem}
.totals{display:flex; align-items:center; gap:0.5rem; font-weight:700}
.sep{width:0.0625rem; height:1rem; background:#d6dde7; display:inline-block}

/* ====== Log ====== */
.wslog{
  background:#0b1220; color:#d0def8; border:1px solid #142038; border-radius:0.75rem;
  padding:0.625rem; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:0.75rem; line-height:1.35; max-height:13.75rem; overflow:auto;
}

/* ====== Footer ====== */
.footer{padding:1rem; text-align:center; color:#7c8a99}

/* ====== Micro-responsivo ====== */
@media (max-width:22.5rem){
  .line2{-webkit-line-clamp:1}
}

/* ====== Breakpoints ====== */
@media (max-width:30rem){ /* 480px */
  .bottombar{flex-direction:column; align-items:stretch;}
  .bottombar .totals{width:100%; justify-content:space-between; margin-bottom:0.5rem;}
  .btn.success.xl{width:100%;}
}
@media (max-width:48rem){ /* 768px */
  .row.wrap{flex-direction:column; align-items:stretch;}
  .scan-cta{align-items:stretch;}
}
@media (max-width:64rem){ /* 1024px */
  .page{max-width:90%;}
}
@media (min-width:75rem){ /* 1200px */
  .page{max-width:70rem;}
}

/* ====== JS-injected styles (moved from app.js & ui.js) ====== */
.flash-green { animation: dpFlashGreen .25s linear; }
.flash-yellow{ animation: dpFlashYellow .25s linear; }
@keyframes dpFlashGreen  { 0%{background:rgba(7,156,80,.16)} 100%{background:transparent} }
@keyframes dpFlashYellow { 0%{background:rgba(245,158,11,.16)} 100%{background:transparent} }
.fly-clone { position:fixed; pointer-events:none; z-index:9999; border-radius:0.75rem; object-fit:cover; box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.18); }
.sheet-open { transform:translateY(0)!important; }

/* SLOT inline del video: entre “Detección rápida…” y el bloque Carrito */
#inlineScannerSlot {
  height: clamp(10rem, 22vh, 15rem);
  border-radius: 0.875rem;
  background: #000;
  overflow: hidden;
  display: none;
  margin: 0.5rem 0.375rem 0.875rem 0.375rem;
  position: relative;
}
#inlineScannerSlot video, #inlineScannerSlot canvas{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block !important; visibility:visible !important;
}

/* Fila de producto */
.list{display:flex; flex-direction:column; gap:0.5rem}
.row-item {
  display:grid;
  grid-template-columns: 5.9375rem 1fr;
  grid-template-rows: auto auto;
  gap:0.625rem 0.75rem; align-items:center;
  margin-right:0.5rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:0.875rem;
  padding:0.5rem 0.625rem;
  transition:box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.row-item .thumb { grid-column:1/2; grid-row:1/3; width:5.9375rem; height:5.9375rem; border-radius:0.875rem; object-fit:cover; background:#fff; }
.row-item .info  { grid-column:2/3; grid-row:1/2; display:flex; flex-direction:column; min-width:0; }
.row-item .info .line1{ display:flex; align-items:baseline; gap:0.5rem; }
.row-item .info .ref   { font-weight:800; font-size:120%; }
.row-item .info .status { font-size:0.6875rem; font-weight:700; opacity:.85; }
.row-item .info .line2{ font-size:0.625rem; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.row-item .info .line3{ font-size:0.6875rem; opacity:.6; }

.row-item .ctrlbar{ grid-column:2/3; grid-row:2/3; display:flex; align-items:center; gap:0.5rem; touch-action:manipulation; margin-right:0.375rem; }
.row-item .stepper{ display:flex; align-items:center; gap:0.375rem; }
.row-item .ctrlbar .btn-circle{
  width:2.75rem; height:2.75rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:0.75rem; border:1px solid var(--border); background:#fff;
  font-weight:900; cursor:pointer; font-size:1.25rem;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.row-item .ctrlbar .qty-container{ display:flex; }
.row-item .ctrlbar .qty{ min-width:4rem; height:2.75rem; border-radius:0.75rem; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.125rem; background:#fff; border:1px solid rgba(0,0,0,.08); user-select:none; }
.row-item .ctrlbar .trash{
  width:2.75rem; height:2.75rem; border-radius:0.75rem;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.08); background:#fff;
  margin-left:0.375rem; margin-right:0.375rem;
  cursor:pointer; touch-action:manipulation;
}

.qty-editor{ width:4rem; height:2.75rem; border-radius:0.75rem; text-align:center; font-weight:700; font-size:1.125rem; border:1px solid rgba(0,0,0,.15); outline:none; }

.btn-kiosk-orange{ background:#FF7A00 !important; color:#fff !important; border-color:#FF7A00 !important; }
.btn-kiosk-orange:active{ filter:brightness(.95); }