:root{
  --primary:#1e3a8a;
  --bg:#f1f5f9;
  --panel:#e5e7eb;
  --card:#ffffff;
  --success:#22c55e;
  --muted:#cbd5e1;
  --danger:#fecaca;
}

*{box-sizing:border-box;font-family:Arial;}
body{margin:0;background:var(--bg);}

.container{
  display:grid;
  grid-template-columns:40% 60%;
  height:100vh;
}

/* ===== COBRO ===== */
.cobro{
  background:var(--panel);
  padding:1rem;
  display:flex;
  flex-direction:column;
  height:100vh;          /* 🔴 CLAVE */
  overflow:hidden;       /* 🔴 CLAVE */
}


.cobro-header{
  background:white;
  padding:.6rem;
  border-radius:10px;
  margin-bottom:.5rem;
}

.ticket{
  flex:1 1 auto;         /* 🔴 CLAVE */
  min-height:0;          /* 🔴 CLAVE (muy importante) */
  background:white;
  border-radius:12px;
  padding:.5rem;
  overflow-y:auto;       /* 🔴 SCROLL */
}


.item{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:.6rem;
  padding:.6rem .5rem;
  margin-bottom:.4rem;

  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fafafa;
}

.btn-eliminar{
  width:44px;
  height:44px;
  border:none;
  border-radius:12px;
  background:#fee2e2;
  color:#7f1d1d;
  font-size:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* TOTAL */
.total{
  font-size:2rem;
  text-align:center;
  color:#166534;
}

/* BOTONES POS */
.btn{
  padding:1rem;
  border:none;
  border-radius:14px;
  font-size:1.05rem;
  cursor:pointer;
}

.btn-cobrar{
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:white;
}

.btn-limpiar{
  background:linear-gradient(135deg,#fecaca,#fca5a5);
  color:#7f1d1d;
}

.acciones{display:flex;gap:.5rem;}

/* ===== PRODUCTOS ===== */
.productos{padding:1rem;}

.buscador{
  display:flex;
  align-items:center;
  background:white;
  border-radius:12px;
  border:1px solid #cbd5e1;
  padding:.4rem;
  margin-bottom:.6rem;
}

.icono-barcode{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#f1f5f9;
}

.icono-barcode svg{
  width:22px;
  height:22px;
  stroke:#1e3a8a;
  stroke-width:2;
}

.buscador input{
  border:none;
  outline:none;
  flex:1;
  padding:.6rem;
  font-size:1rem;
}

/* CATEGORÍAS */
.categorias{
  display:flex;
  gap:.5rem;
  margin-bottom:.5rem;
}

.categorias button{
  padding:.4rem .9rem;
  border:none;
  border-radius:999px;
  background:#e5e7eb;
}

.categorias button.active{
  background:#1e3a8a;
  color:white;
}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:1rem;
}

.producto{
  background:white;
  padding:1rem;
  border-radius:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  text-align:center;
  cursor:pointer;
}

/* ===== MODAL ===== */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:none;
  justify-content:center;
  align-items:center;
}
.modal.active{display:flex;}

.modal-content{
  background:white;
  width:420px;
  padding:1rem;
  border-radius:18px;
}

.modal-total{
  text-align:center;
  font-size:2rem;
  color:#166534;
}

.modal-metodos button{
  width:100%;
  padding:.7rem;
  margin-bottom:.4rem;
  border:none;
  border-radius:10px;
  background:#f1f5f9;
}

.modal-metodos button.active{
  background:#1e3a8a;
  color:white;
}

.campo{display:none;margin-top:.5rem;}
.campo input{
  width:100%;
  padding:.6rem;
  border-radius:8px;
  border:1px solid #cbd5e1;
}

.modal-footer{
  display:flex;
  gap:.5rem;
  margin-top:.8rem;
}

.btn-validar{
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:white;
}

/* ===== TECLADO POS ===== */
.teclado-pos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}

.teclado-pos button{
  height:58px;
  font-size:20px;
  border-radius:6px;
  border:1px solid #cbd5e1;
  background:#f8fafc;
}

.teclado-pos .suma{
  background:#bbf7d0;
  color:#166534;
}

.teclado-pos .borrar{
  background:#fecaca;
}

.teclado-pos .especial{
  grid-column:span 2;
}

/* ===== BOTONES TÁCTILES POS ===== */
.btn{
  min-height:64px;
  font-size:1.15rem;
  border-radius:18px;
}

.btn-cobrar{
  background:linear-gradient(135deg,#16a34a,#22c55e);
}

.btn-limpiar{
  background:linear-gradient(135deg,#fecaca,#fca5a5);
  color:#7f1d1d;
  font-weight:600;
  box-shadow:0 4px 10px rgba(127,29,29,0.25);
}

.btn-corte{
  margin-top:.5rem;
  background:#1e3a8a;
  color:white;
}

/* ELIMINAR ARTÍCULO */
.btn-eliminar{
  width:44px;
  height:44px;
  border:none;
  border-radius:12px;
  background:#fee2e2;
  color:#7f1d1d;
  font-size:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* LISTA CORTE */
.corte-lista{
  list-style:none;
  padding:0;
  margin:.5rem 0;
}

.corte-lista li{
  padding:.3rem 0;
  font-size:1.05rem;
}

/* ===== CANTIDAD EN TICKET ===== */
.item{
  grid-template-columns:1fr auto auto auto;
}

.cantidad{
  display:flex;
  align-items:center;
  gap:.4rem;
}

.btn-cantidad{
  width:36px;
  height:36px;
  border:none;
  border-radius:10px;
  font-size:1.2rem;
  background:#e5e7eb;
}

.cantidad span{
  min-width:28px;
  text-align:center;
  font-weight:600;
}