/* =========================================================
   CATALOGO - UI estilo POS CLEAN (tu estética)
   Mantiene el funcionamiento actual, solo cambia look & feel
========================================================= */
@font-face {
    font-family: "Inter";
    src: url("fonts/Inter/Inter_18pt-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Inter";
    src: url("fonts/Inter/Inter_18pt-Bold.ttf") format("truetype");
    font-weight: 700; /* Usa 700 para bold, no 900 */
    font-style: normal;
}

body.pos-ui{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e9eef6;
  --shadow:0 8px 24px rgba(15,23,42,.06);
  --shadow2:0 4px 14px rgba(15,23,42,.08);
  --r:18px;

  --brand:#ff8400;
  --brand-soft:#e9fbf8;
  --danger:#ff4d4f;
  --danger-soft:#fff1f1;

  background:var(--bg);
  color:var(--text);
  /*font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;*/
  font-family: 'Inter', sans-serif;
  margin:0;
}

*{ box-sizing:border-box; }

.wrap{max-width:1100px;margin:0 auto;padding:14px 16px;}
.row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;}

.title{font-weight:900;letter-spacing:.2px}
.small{color:var(--muted);font-size:13px}

/* ===== Header ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:8000;
  background:rgba(245,247,251,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  transition: opacity .18s ease, transform .18s ease;
}

.brand{display:flex;gap:10px;align-items:center;}
.logo{
  width:38px;height:38px;border-radius:14px;
  background:linear-gradient(135deg,var(--brand),#D56F02);
  box-shadow:var(--shadow2);
}

.search{flex:1;min-width:240px;display:flex;gap:10px;justify-content:flex-end;align-items:center;}

input{
  width:min(520px,100%);
  height:46px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f7f9fd;
  color:var(--text);
  outline:none;
}
input:focus{
  border-color:rgba(24,182,166,.35);
  box-shadow:0 0 0 4px rgba(24,182,166,.10);
}
#q {
  border: 2px solid rgba(255, 132, 0,.7);
  font-weight: 700;
  background: #fff;
}
#q:focus{
  border-color:rgba(255, 132, 0,1);
  box-shadow:0 0 0 4px rgba(255, 132, 0,.10);
  
}


/* ===== Botones ===== */
.btn{
  height:46px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.04);
  background:#ffffff;
  box-shadow:var(--shadow2);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn:hover{ filter:brightness(.99); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn.icon{ width:46px; padding:0; border-radius:14px; }

.btn.danger{
  background:var(--danger-soft);
  border-color:rgba(255,77,79,.35);
  color:var(--danger);
}

/* ===== Tag ===== */
.tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background:#fff;
}

/* ===== Categorías estilo pills SHEIN ===== */
.cats{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width:none;
  cursor:grab;
}
.cats::-webkit-scrollbar{display:none;}
.cats:active{cursor:grabbing;}

.chip{
  flex:0 0 auto;
  white-space:nowrap;
  scroll-snap-align:start;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#f3f6fb;
  color:var(--text);
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  font-weight:900;
}
.chip:hover{
  background:var(--brand-soft);
  border-color:rgba(24,182,166,.25);
}
.chip.active{
  background:rgba(24,182,166,.12);
  border-color:rgba(24,182,166,.35);
}

/* ===== Grid Productos ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:16px;
}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){
  .grid{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;              /* un poco menos de espacio */
  }

  .wrap{ padding:12px 10px; }   /* opcional: más espacio útil */
}
@media (max-width:440px){
  .p{ padding:10px 10px 12px; }
  .name{ font-size:14px; }
  .meta{ font-size:12px; }
  .qty button{ width:36px; height:36px; }
  .qtyInput{ width:52px; font-size:14px; }
}


.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow:0 14px 30px rgba(15,23,42,.10); }

.img{
  aspect-ratio:4/3;
  background:#fbfcff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;               /* ✅ evita que se salga */
}

.img img{
  width:100%;
  height:100%;
  object-fit:contain;            /* ✅ NO recorta */
  object-position:center;
  display:block;
  padding:10px;                 /* ✅ “echa hacia atrás” */
}


.p{padding:12px 12px 14px;}
.name{font-weight:900;line-height:1.15}
.meta{margin-top:6px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:8px}

.priceLine{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:10px}
.priceLine .tag:first-child{
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.25);
  color: #16a34a;
  font-weight:900;
}
.priceLine .tag:last-child{
  background: rgba(220,38,38,.10);
  border: 1px solid rgba(220,38,38,.22);
  color: #dc2626;
  font-weight:900;
}

/* Controles qty ( + - ) */
.actions{margin-top:12px;display:flex;gap:10px}
.qty{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid var(--line);
  flex:1;
}
.qty span{min-width:28px;text-align:center;font-weight:900}
.qty button{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  font-weight:900;
}
.qty button:hover{
  background:var(--brand-soft);
  border-color:rgba(24,182,166,.25);
}

/* ===== Overlay ===== */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.38);
  z-index:9000;
  display:none;
}
.overlay.show{display:block;}

/* ===== Drawer carrito PRO ===== */
.drawer{
  position:fixed;
  z-index:9500;
  display:none;
  flex-direction:column;

  background:rgba(255,255,255,.95);
  border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(15,23,42,.20);
  overflow:hidden;

  opacity:0;
  transition: opacity .18s ease, transform .18s ease;
}
.drawer.show{display:flex; opacity:1;}

.drawer .head{
  flex:0 0 auto;
  padding:14px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.drawer .body{
  flex:1 1 auto;
  overflow:auto;
  padding:10px 14px;
  min-height:0;
}

.drawerFooter{
  flex:0 0 auto;
  border-top:1px solid var(--line);
  background:#ffffff;
}

.item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}
.item:last-child{border-bottom:none}
.item b{ color:var(--text); }

.item .btn{
  height:40px;
  width:44px;
  padding:0;
  border-radius:12px;
  box-shadow:none;
  border:1px solid var(--line);
}
.item .btn:hover{ background:var(--brand-soft); border-color:rgba(24,182,166,.25); }

.totalsBox{
  padding:12px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.totalsBox .big{font-weight:1000;font-size:18px}
.totalsBox .ok{color: #16a34a;}

.foot{
  padding:12px 14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.foot .btn{flex:1}

/* PC: centrado */
@media (min-width:721px){
  .drawer{
    width:min(540px, calc(100% - 32px));
    height:min(78vh, 740px);
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    border-radius:18px;
  }
}

/* Móvil: full con margen */
@media (max-width:720px){
  .drawer{
    left:12px;
    right:12px;
    top:12px;
    bottom:12px;
    width:auto;
    height:auto;
    transform:translateY(0);
    border-radius:18px;
  }
}

.staff-btn{
  height:44px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  border-radius:14px;
  border:1px solid var(--border);
  background:#ffffff;

  font-weight:800;
  color: #000;
  text-decoration:none;
  text-align: center;

  box-shadow:0 6px 14px rgba(15,23,42,.08);
  transition: all .15s ease;
}

.staff-btn:hover{
  background:#f0fdfa;
  border-color:rgba(24,182,166,.35);
  transform: translateY(-1px);
}


/* Ocultar header SOLO en móvil con carrito abierto */
@media (max-width:720px){
  body.cart-open .topbar{
    opacity:0;
    transform: translateY(-10px);
    pointer-events:none;
  }
}

/* ===== Toast ===== */
.toast{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%) translateY(12px);
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:0 20px 60px rgba(15,23,42,.18);
  max-width:min(420px, calc(100% - 28px));
  z-index:9999;

  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.toast .t1{font-weight:1000}
.toast .t2{color:var(--muted);font-size:13px;margin-top:2px}

/* ===== Qty input (editable pero con look de número) ===== */
.qtyInput{
  width: 64px;
  height: 40px;
  border: 0;
  outline: none;
  background: transparent;
  text-align: center;
  font-weight: 900;
  color: var(--text);
  font-size: 16px;
  padding: 0;
}

/* quita flechas en algunos navegadores */
.qtyInput::-webkit-outer-spin-button,
.qtyInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===== Botón modo Bs/Cant ===== */
.modeBtn{
  height: 52px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: var(--shadow2);
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.modeBtn:hover{
  background: var(--brand-soft);
  border-color: rgba(24,182,166,.25);
}

/* si quieres que se vea "activo" cuando está en Bs */
.modeBtn.is-bs{
  background: rgba(24,182,166,.12);
  border-color: rgba(24,182,166,.35);
}


/* ===== Actions layout: NO estirar botones ===== */
.actions{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:center;        /* ✅ evita que se estire en alto */
}

/* El bloque de qty debe ocupar el espacio, el botón modo no */
.qty{
  flex: 1 1 auto;            /* ✅ se expande */
  min-width: 0;
}

/* ===== Botón modo Bs/Cant (mismo tamaño siempre) ===== */
.modeBtn{
  flex: 0 0 auto;            /* ✅ NO se estira */
  height: 52px;              /* igual que el control */
  min-width: 56px;           /* ✅ hace que Cant y Bs se vean parecidos */
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: var(--shadow2);
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;            /* ✅ evita “inflar” texto */
}

/* Opcional: texto un pelín menor para que "Cant" no se vea pesado */
.modeBtn{
  font-size: 14px;
}

/* Activo en modo Bs */
.modeBtn.is-bs{
  background: rgba(24,182,166,.12);
  border-color: rgba(24,182,166,.35);
}