:root{
  --bg:#17191b;
  --panel:#1f2224;
  --panel-alt:#26292c;
  --row-hover:#2b2e31;
  --text:#edebe4;
  --text-dim:#9aa0a6;
  --accent:#f4b400;
  --accent-dim:#8a6b12;
  --teal:#3c8188;
  --danger:#d14343;
  --danger-dim:#4a2323;
  --ok:#5c9a5f;
  --border:#34383b;
  --radius:3px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.stripe{
  height:6px;
  width:100%;
  background:repeating-linear-gradient(135deg,var(--accent) 0 18px, #1a1c1e 18px 36px);
  opacity:0.9;
}
header{
  padding:28px 32px 22px;
  border-bottom:1px solid var(--border);
  background:var(--panel);
}
.header-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
h1{
  font-family:'Oswald', sans-serif;
  font-weight:700;
  font-size:30px;
  letter-spacing:0.3px;
  margin:0;
  color:var(--text);
}
h1 span{ color:var(--accent); }
.subtitle{
  color:var(--text-dim);
  font-size:14px;
  margin-top:6px;
}
.stats{
  display:flex;
  gap:28px;
}
.stat{ text-align:right; }
.stat .num{
  font-family:'IBM Plex Mono', monospace;
  font-size:22px;
  font-weight:500;
  color:var(--accent);
  line-height:1;
}
.stat .lbl{
  font-size:11px;
  color:var(--text-dim);
  margin-top:4px;
}
main{
  max-width:1100px;
  margin:0 auto;
  padding:28px 32px 80px;
}
.toolbar{
  display:flex;
  gap:12px;
  margin-bottom:20px;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:100;
  background:var(--bg);
  padding:14px 0;
  margin-top:-14px;
}
.search-wrap{
  flex:1;
  min-width:240px;
  position:relative;
}
.search-wrap input{
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  font-family:'IBM Plex Mono', monospace;
  font-size:16px;
  padding:14px 16px 14px 44px;
  border-radius:var(--radius);
  outline:none;
  transition:border-color .15s;
}
.search-wrap input:focus{ border-color:var(--accent); }
.search-wrap svg{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  stroke:var(--text-dim);
}
button.primary{
  background:var(--accent);
  color:#1a1a1a;
  border:none;
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  font-size:14px;
  padding:0 20px;
  border-radius:var(--radius);
  cursor:pointer;
  transition:filter .15s;
}
button.primary:hover{ filter:brightness(1.08); }
button.ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-dim);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:13px;
  padding:0 16px;
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
button.ghost:hover{ border-color:var(--text-dim); color:var(--text); }

.table-wrap{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel);
}
.row{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 90px;
  align-items:center;
  border-bottom:1px solid var(--border);
}
.row:last-child{ border-bottom:none; }
.row.head{
  background:var(--panel-alt);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--text-dim);
  padding:10px 20px;
  font-weight:600;
}
.row.head span:not(:first-child), .row.body .cell:not(:first-child){ text-align:center; }
.row.body{
  padding:0 20px;
  transition:background .12s;
}
.row.body:hover{ background:var(--row-hover); }
.cell{ padding:14px 6px; }
.medida{
  font-family:'IBM Plex Mono', monospace;
  font-size:15px;
  font-weight:500;
  color:var(--text);
}
.qty-control{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.qty-control button{
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--panel-alt);
  color:var(--text);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .12s, color .12s;
}
.qty-control button:hover{ border-color:var(--accent); color:var(--accent); }
.qty-control input{
  width:44px;
  text-align:center;
  background:transparent;
  border:none;
  color:var(--text);
  font-family:'IBM Plex Mono', monospace;
  font-size:15px;
  -moz-appearance:textfield;
}
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-control input:focus{ outline:none; }
.low{ color:var(--danger); }
.badge-low{
  display:inline-block;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--danger);
  background:var(--danger-dim);
  padding:2px 6px;
  border-radius:2px;
  margin-left:8px;
  vertical-align:middle;
}
.valor-input{
  background:transparent;
  border:none;
  border-bottom:1px dashed var(--border);
  color:var(--text);
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  text-align:center;
  width:100px;
  padding:4px 0;
}
.valor-input:focus{ outline:none; border-bottom-color:var(--accent); }
.del-btn{
  background:transparent;
  border:none;
  color:var(--text-dim);
  cursor:pointer;
  font-size:12px;
  padding:6px 10px;
  border-radius:var(--radius);
  transition:color .12s, background .12s;
}
.del-btn:hover{ color:var(--danger); background:var(--danger-dim); }

.add-row{
  display:flex;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
.add-row input{
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
  padding:11px 14px;
  border-radius:var(--radius);
  outline:none;
}
.add-row input:focus{ border-color:var(--accent); }
.add-row input#new-medida{ flex:1; min-width:160px; text-transform:uppercase; }
.add-row input#new-cantidad{ width:110px; }

.empty{
  padding:60px 20px;
  text-align:center;
  color:var(--text-dim);
}
.empty svg{ width:36px; height:36px; stroke:var(--border); margin-bottom:12px; }

.footer-note{
  margin-top:20px;
  font-size:12px;
  color:var(--text-dim);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.status-dot{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ok);
  margin-right:6px;
}
.status-dot.saving{ background:var(--accent); }

@media (max-width:768px){
  header{ padding:20px 18px; }
  main{ padding:20px 18px 60px; }
  .header-inner { flex-direction: column; align-items: flex-start; }
  .stats{ width: 100%; justify-content: space-between; margin-top: 10px; }
  
  .row.head { display: none; }
  .row.body {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  
  .row.body .cell { 
    padding: 0; 
    text-align: left !important; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
  }
  
  .row.body .cell.medida {
    font-size: 18px;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 12px;
    margin-bottom: 4px;
    display: block;
  }
  
  .row.body .cell:nth-child(2)::before { content: 'Stock:'; color: var(--text-dim); font-size: 13px; }
  .row.body .cell:nth-child(3)::before { content: 'Vendidos:'; color: var(--text-dim); font-size: 13px; }
  .row.body .cell:nth-child(4)::before { content: 'Valor c/IVA:'; color: var(--text-dim); font-size: 13px; }
  
  .qty-control { justify-content: flex-end; }
  .valor-input { text-align: right; width: auto; }
  
  .row.body .cell:nth-child(5) {
    justify-content: flex-end;
    margin-top: 8px;
  }
  .del-btn { width: 100%; padding: 12px; border: 1px solid var(--border); }
  
  .add-row { flex-direction: column; align-items: stretch; }
  .add-row input#new-cantidad { width: 100%; }
}