:root {
  --verde: #7ab828; --verde-osc: #4f7d14; --verde-cl: #eef7e1; --gris: #6b6f73; --borde: #dcdfe2;
  --fondo: #f5f6f4; --txt: #1f2326; --rojo: #c0392b; --amarillo: #fff4c2;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--txt); background: var(--fondo); }
a { color: var(--verde-osc); }
h1 { font-size: 22px; margin: 0 0 4px; } h2 { font-size: 16px; margin: 0 0 10px; } h3 { font-size: 14px; margin: 16px 0 8px; }
main { max-width: 1280px; margin: 0 auto; padding: 20px; }
.top { display: flex; align-items: center; gap: 24px; background: #fff; border-bottom: 3px solid var(--verde); padding: 8px 20px; position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--txt); }
.logo { font-weight: 700; color: var(--verde); font-size: 20px; letter-spacing: -.5px; }
.logo b { color: var(--gris); }
.logo.big { font-size: 40px; text-align: center; }
.app { font-size: 13px; color: var(--gris); }
.top nav { display: flex; gap: 4px; flex: 1; }
.top nav a { padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--txt); }
.top nav a:hover { background: var(--verde-cl); }
.who { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.tag { background: #eceeef; color: var(--gris); border-radius: 10px; padding: 1px 8px; font-size: 12px; }
.tag.new { background: var(--amarillo); color: #7a5b00; }
.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; color: var(--verde-osc); cursor: pointer; text-decoration: underline; font: inherit; }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.muted { color: var(--gris); }
.card { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.card.narrow { max-width: 420px; }
.card.confirm { border: 2px solid var(--verde); }
.empty { color: var(--gris); text-align: center; padding: 18px; }
.btn { display: inline-block; border: 1px solid var(--borde); background: #fff; color: var(--txt); padding: 7px 14px; border-radius: 7px; cursor: pointer; font: inherit; text-decoration: none; }
.btn:hover { border-color: var(--verde); }
.btn.primary { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--verde-osc); }
.btn.ghost { color: var(--rojo); }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.head .actions { margin-top: 0; }
.spacer { flex: 1; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; background: var(--verde-cl); border: 1px solid #cfe6ae; }
.flash.error { background: #fdecea; border-color: #f5c6c0; color: var(--rojo); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--gris); font-weight: 600; }
label small { font-weight: 400; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--txt); font-weight: 500; font-size: 13px; }
.inline-label { flex-direction: row; align-items: center; gap: 6px; }
input, select { font: inherit; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 6px; background: #fff; color: var(--txt); min-width: 0; }
input:focus, select:focus { outline: 2px solid #b9df85; border-color: var(--verde); }
input:disabled, select:disabled { background: #f3f4f4; color: var(--txt); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 10px 0; }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; }
details summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.hint { color: var(--gris); font-size: 12.5px; margin: 6px 0 10px; }
.medidas-head { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.medidas-head h2 { margin: 0; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid th { text-align: left; background: #f0f2ef; font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.grid td { padding: 6px 8px; border-bottom: 1px solid #eef0ee; }
.grid tfoot th { background: var(--verde-cl); }
.grid .n { text-align: right; font-variant-numeric: tabular-nums; }
.grid.small { font-size: 12.5px; }
.grid.edit td { padding: 3px 4px; }
.grid.edit input, .grid.edit select { width: 100%; padding: 5px 6px; }
.grid.edit input.n { text-align: right; max-width: 110px; }
.grid.edit .idx { color: var(--gris); width: 28px; text-align: center; }
.grid tr.click { cursor: pointer; } .grid tr.click:hover td { background: #fafcf6; }
.grid tr.bad td { background: #fdecea; } .grid tr.warn td { background: #fff8dc; }
.grid tr.muted td { color: #aaa; }
.x { border: 0; background: none; color: #aaa; cursor: pointer; font-size: 14px; } .x:hover { color: var(--rojo); }
.aviso { color: var(--rojo); font-size: 11px; margin-left: 4px; white-space: nowrap; }
.scroll { overflow-x: auto; }
.st { font-size: 12px; padding: 2px 9px; border-radius: 10px; font-weight: 600; vertical-align: middle; }
.st-borrador { background: #eceeef; color: #555; } .st-por_surtir { background: var(--amarillo); color: #7a5b00; }
.st-surtido { background: var(--verde-cl); color: var(--verde-osc); } .st-cancelado { background: #fdecea; color: var(--rojo); }
.filters { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.filters input { margin-left: auto; width: 280px; }
.chip { padding: 5px 11px; border-radius: 16px; background: #fff; border: 1px solid var(--borde); text-decoration: none; color: var(--txt); font-size: 13px; }
.chip.on { background: var(--verde); color: #fff; border-color: var(--verde); }
.chip small { opacity: .7; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--verde); border-radius: 8px; padding: 10px 12px; }
.kpi span { display: block; font-size: 12px; color: var(--gris); }
.kpi b { font-size: 18px; }
.kpi.warn { border-left-color: #e0a800; }
.alertas { background: #fff8dc; border: 1px solid #f0d77a; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.rollo { border-top: 1px solid var(--borde); padding: 12px 0; }
.rollo:first-of-type { border-top: 0; }
.rollo-head { font-size: 13px; margin-bottom: 6px; }
.roll-svg { width: 100%; height: auto; display: block; margin: 4px 0 10px; overflow: visible; }
.roll-svg .pieza { fill: #d8efb8; stroke: #4f7d14; stroke-width: 1.5; }
.roll-svg text { font-family: system-ui, sans-serif; text-anchor: middle; }
.roll-svg .code { font-size: 15px; font-weight: 700; fill: #2c4a08; }
.roll-svg .dim { font-size: 12px; fill: #333; }
.roll-svg .ubi { font-size: 11px; fill: #666; }
.roll-svg .pos { font-size: 11px; fill: #c0392b; text-anchor: start; }
.roll-svg text.pos[text-anchor="middle"] { text-anchor: middle; }
.roll-svg .w { font-size: 12px; fill: #666; text-anchor: start; }
.roll-svg .cut { stroke: #c0392b; stroke-width: 2; stroke-dasharray: 5 3; }
.legend { font-size: 12px; color: var(--gris); }
.sw { display: inline-block; width: 14px; height: 10px; vertical-align: middle; border: 1px solid #888; }
.sw.pieza { background: #d8efb8; } .sw.merma { background: repeating-linear-gradient(45deg, #fff, #fff 3px, #d9a3a3 3px, #d9a3a3 5px); }
.login { max-width: 360px; margin: 10vh auto; text-align: center; }
.login h1 { color: var(--gris); font-weight: 500; margin-bottom: 20px; }
.login .card { text-align: left; display: flex; flex-direction: column; gap: 12px; }
form.adj { display: flex; gap: 4px; align-items: center; }
form.adj input { width: 70px; padding: 3px 5px; }
@media (max-width: 760px) {
  .top { flex-wrap: wrap; gap: 8px; } .top nav { order: 3; width: 100%; overflow-x: auto; }
  main { padding: 12px; } .span2, .span3 { grid-column: auto; }
  .grid.edit th:nth-child(3), .grid.edit td:nth-child(3) { display: none; }
  .filters input { width: 100%; margin-left: 0; }
}
input[type=checkbox] { width: 16px; height: 16px; padding: 0; accent-color: var(--verde); }