@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Barlow+Semi+Condensed:wght@300;400;500;600&family=Instrument+Sans:wght@500;600&display=swap');

:root{
  --font-display:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --font-body:'Bahnschrift','DIN Alternate','Barlow Semi Condensed',system-ui,sans-serif;
  --font-ui:'Inter',system-ui,sans-serif;
  --bg:#F4EFE6; --surface:#FBF8F2; --surface-2:#EDE7DB;
  --ink:#1A1817; --ink-soft:#6B6356; --border:#DDD5C6;
  --wood:#9B7040; --wood-dark:#7F5A32; --wood-ink:#FBF8F2;
  --taller:#6B4A31; --online:#3D6B66; --bazar:#B98A2E; --consignacion:#9B7040;
  --good:#4F7A55; --warn:#C1631B; --critical:#B23A2E;
  --shadow:0 1px 2px rgba(26,24,23,.06),0 6px 16px -8px rgba(26,24,23,.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1A1817; --surface:#232120; --surface-2:#1E1C1B;
    --ink:#F4EFE6; --ink-soft:#A49B8B; --border:#37332F;
    --wood:#B98A57; --wood-dark:#D2A26C; --wood-ink:#1A1817;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px -8px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#1A1817; --surface:#232120; --surface-2:#1E1C1B;
  --ink:#F4EFE6; --ink-soft:#A49B8B; --border:#37332F;
  --wood:#B98A57; --wood-dark:#D2A26C; --wood-ink:#1A1817;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
html,body{ min-height:100%; }
body{ overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:15px; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; text-wrap:balance;
}
.num{ font-variant-numeric:tabular-nums; }
button{ font-family:inherit; cursor:pointer; }
input,select{
  font-family:inherit; font-size:.88rem; padding:9px 11px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink); width:100%;
}
label{ font-family:var(--font-ui); font-size:.78rem; color:var(--ink-soft); display:block; margin-bottom:4px; }
.field{ display:flex; flex-direction:column; margin-bottom:11px; min-width:0; }
.row2{ display:grid; grid-template-columns:minmax(0,1fr) 92px; gap:10px; }
.row2 > *{ min-width:0; }
input,select{ min-width:0; max-width:100%; }

/* Login */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:32px 28px; width:100%; max-width:360px; box-shadow:var(--shadow); text-align:center; }
.login-card img{ width:56px; height:56px; margin-bottom:14px; }
.login-card h1{ font-size:1.6rem; margin:0 0 20px; text-transform:lowercase; }
.login-card .field{ text-align:left; }
.login-error{ color:var(--critical); font-family:var(--font-ui); font-size:.82rem; margin:-4px 0 12px; min-height:1.1em; }

.app{ max-width:1080px; margin:0 auto; padding:20px 20px 64px; display:none; }
.app.ready{ display:block; }
.head{
  position:-webkit-sticky; position:sticky; top:0; z-index:12; background:var(--bg);
  margin:0 -20px 14px; padding:max(8px, env(safe-area-inset-top)) 20px 0;
  border-bottom:1px solid var(--border);
}
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:6px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:46px; height:46px; }
.brand h1{ margin:0; font-size:.9rem; letter-spacing:.14em; color:var(--ink-soft); }
.who{ font-family:var(--font-ui); font-size:.78rem; color:var(--ink-soft); display:flex; align-items:center; gap:10px; }
.footer-who{ justify-content:center; margin-top:36px; padding-top:16px; border-top:1px solid var(--border); }
.who button{ background:none; border:none; color:var(--ink-soft); text-decoration:underline; font-size:.78rem; padding:0; }
.actions{ display:flex; gap:10px; }
.btn{ border-radius:10px; border:1px solid transparent; padding:11px 16px; font-size:.92rem; font-weight:600; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); }
.btn-primary{ background:var(--wood); color:var(--wood-ink); }
.btn-outline{ background:var(--surface); color:var(--ink); border-color:var(--border); }
.btn-sm{ padding:5px 11px; font-size:.78rem; border-radius:8px; font-weight:500; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.tabs{ display:flex; gap:4px; margin-bottom:-1px; font-family:var(--font-ui); }
.tab{ background:none; border:none; padding:10px 4px; margin-right:22px; font-size:.92rem; font-weight:500; color:var(--ink-soft); border-bottom:2px solid transparent; }
.tab.active{ color:var(--ink); border-bottom-color:var(--wood); font-weight:600; }
.panel{ display:none; }
.panel.active{ display:block; }

.note{ font-family:var(--font-ui); font-size:.82rem; color:var(--ink-soft); background:var(--surface-2); border:1px dashed var(--border); border-radius:10px; padding:10px 14px; margin-bottom:16px; max-width:70ch; }
.toolbar{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:14px; font-family:var(--font-ui); }
.search{ flex:1 1 240px; max-width:380px; }
#hist-month{ width:auto; min-width:170px; }
.seg{ display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); max-width:100%; overflow-x:auto; }
.seg button{ background:none; border:none; padding:8px 14px; font-size:.85rem; color:var(--ink-soft); font-weight:500; white-space:nowrap; font-family:var(--font-ui); }
.seg button.active{ background:var(--wood); color:var(--wood-ink); }

.families{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr)); gap:12px; align-items:start; }
.family,.loc{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.family.open,.loc.open{ box-shadow:var(--shadow); }
.fam-head,.loc-head{ width:100%; background:none; border:none; color:inherit; text-align:left; display:grid; grid-template-columns:44px 1fr auto 18px; gap:12px; align-items:center; padding:12px 14px; }
.loc-head{ grid-template-columns:1fr auto auto 18px; }
.fam-emoji{ width:44px; height:44px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.fam-title{ font-family:var(--font-display); font-weight:600; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.25; }
.fam-sub{ font-family:var(--font-ui); font-size:.76rem; color:var(--ink-soft); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fam-total{ text-align:right; line-height:1.1; }
.fam-total .num{ font-size:1.35rem; font-weight:500; display:block; }
.fam-total .lbl{ font-family:var(--font-ui); font-size:.62rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); }
.chev{ width:10px; height:10px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:rotate(45deg); justify-self:center; margin-top:-3px; }
.family.open .chev,.loc.open .chev{ transform:rotate(-135deg); margin-top:3px; }

.pill{ font-family:var(--font-ui); font-size:.66rem; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.pill-warn{ color:var(--warn); background:color-mix(in srgb,var(--warn) 15%,transparent); }
.pill-critical{ color:var(--critical); background:color-mix(in srgb,var(--critical) 15%,transparent); }
.pill-note{ color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--border); font-weight:500; }

.fam-body,.loc-body{ border-top:1px solid var(--border); padding:2px 14px 8px; }
.var-row{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"name total" "meta total" "act act"; gap:3px 12px; padding:11px 0; border-bottom:1px dashed var(--border); }
.var-row:last-child{ border-bottom:none; }
.var-name{ grid-area:name; font-weight:500; font-size:.92rem; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.var-meta{ grid-area:meta; font-family:var(--font-ui); display:flex; gap:6px; flex-wrap:wrap; align-items:center; min-height:20px; }
.var-total{ grid-area:total; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.var-total .num{ font-size:1.2rem; font-weight:500; line-height:1; }
.var-total .num.zero{ color:var(--ink-soft); }
.var-act{ grid-area:act; display:flex; gap:6px; margin-top:7px; }
.var-prices{ font-family:var(--font-ui); font-size:.74rem; color:var(--ink-soft); }
.chip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-ui); font-size:.72rem; border:1px solid var(--border); border-radius:999px; padding:2px 8px 2px 6px; background:var(--surface-2); color:var(--ink-soft); }
.chip .dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.chip .num{ color:var(--ink); font-weight:500; }
.empty{ font-family:var(--font-ui); color:var(--ink-soft); font-size:.9rem; padding:20px 4px; }

table{ width:100%; border-collapse:collapse; font-size:.86rem; font-family:var(--font-ui); }
.table-wrap{ overflow-x:auto; background:var(--surface); border:1px solid var(--border); border-radius:14px; }
th,td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; }
th{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-weight:600; }
tr:last-child td{ border-bottom:none; }
tr.void td{ color:var(--ink-soft); text-decoration:line-through; }
.mtype{ font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:999px; }
.mtype-produccion{ color:var(--good); background:color-mix(in srgb,var(--good) 16%,transparent); }
.mtype-venta{ color:var(--online); background:color-mix(in srgb,var(--online) 16%,transparent); }
.mtype-traspaso_salida,.mtype-traspaso_entrada{ color:var(--bazar); background:color-mix(in srgb,var(--bazar) 18%,transparent); }
.mtype-inicial{ color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--border); }
.qty-pos{ color:var(--good); } .qty-neg{ color:var(--critical); }
.hist-sum{ font-family:var(--font-ui); font-size:.85rem; color:var(--ink-soft); margin:0 0 12px; min-height:1.2em; }
.hist-sum b{ color:var(--ink); font-weight:600; }

.loc-list{ display:flex; flex-direction:column; gap:10px; max-width:720px; }
.type-chip{ font-family:var(--font-ui); font-size:.68rem; font-weight:600; padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.type-taller{ color:var(--taller); background:color-mix(in srgb,var(--taller) 16%,transparent); }
.type-canal_online{ color:var(--online); background:color-mix(in srgb,var(--online) 16%,transparent); }
.type-bazar{ color:var(--bazar); background:color-mix(in srgb,var(--bazar) 18%,transparent); }
.type-consignacion{ color:var(--consignacion); background:color-mix(in srgb,var(--consignacion) 16%,transparent); }
.loc-fam{ font-family:var(--font-ui); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:14px 0 2px; font-weight:600; }
.loc-line{ display:grid; grid-template-columns:1fr 64px; gap:8px; padding:6px 0; border-bottom:1px dashed var(--border); font-size:.88rem; align-items:center; }
.loc-line span.num{ text-align:right; }
.loc-actions{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-family:var(--font-ui); }
.loc-actions p{ margin:0; font-size:.88rem; color:var(--ink-soft); }
.loc-toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; max-width:720px; font-family:var(--font-ui); }
.loc-toolbar p{ margin:0; font-size:.82rem; color:var(--ink-soft); }
.add-loc-form{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; max-width:520px; align-items:flex-end; }

.overlay{ position:fixed; inset:0; background:rgba(26,24,23,.5); display:none; align-items:flex-end; justify-content:center; z-index:20; }
.overlay.open{ display:flex; }
.modal{ background:var(--surface); width:100%; max-width:460px; border-radius:16px 16px 0 0; padding:20px 20px 22px; box-shadow:var(--shadow); max-height:92vh; overflow-y:auto; }
@media (min-width:560px){ .overlay{ align-items:center; } .modal{ border-radius:16px; } }
.modal h2{ font-size:1.25rem; margin:0 0 4px; }
.modal .sub{ font-family:var(--font-ui); font-size:.82rem; color:var(--ink-soft); margin-bottom:14px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.line-total{ font-family:var(--font-ui); font-size:.85rem; color:var(--ink-soft); display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:4px; }
.cart{ border:1px solid var(--border); border-radius:12px; margin:12px 0 4px; background:var(--surface-2); }
.cart-empty{ font-family:var(--font-ui); padding:14px; font-size:.82rem; color:var(--ink-soft); text-align:center; }
.cart-line{ display:flex; gap:10px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--border); font-size:.84rem; font-family:var(--font-ui); }
.cart-line:last-child{ border-bottom:none; }
.cart-line .desc{ flex:1; min-width:0; }
.cart-line .desc small{ display:block; color:var(--ink-soft); font-size:.74rem; }
.cart-line label.ret{ display:flex; gap:10px; align-items:center; margin:0; flex:1; font-size:.84rem; color:var(--ink); cursor:pointer; }
.cart-line label.ret input{ width:auto; accent-color:var(--wood); }
.x-btn{ background:none; border:none; color:var(--ink-soft); font-size:1.1rem; line-height:1; padding:4px 6px; border-radius:6px; }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; padding:12px 2px 8px; font-weight:600; font-family:var(--font-ui); }
.cart-total .num{ font-size:1.5rem; font-weight:500; }
.hint{ font-family:var(--font-ui); color:var(--ink-soft); font-weight:500; }
.hint.diff{ color:var(--warn); }

.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); font-family:var(--font-ui); font-size:.85rem; padding:10px 18px; border-radius:10px; opacity:0; transition:opacity .25s ease,transform .25s ease; z-index:30; max-width:90%; text-align:center; pointer-events:none; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.spinner-row{ display:flex; align-items:center; justify-content:center; padding:40px; color:var(--ink-soft); font-family:var(--font-ui); }

@media (max-width:639px){
  /* iOS hace zoom y desplaza la pantalla si el texto de un campo mide menos de 16px */
  input,select{ font-size:16px; }
  .modal{ padding-bottom:calc(76px + env(safe-area-inset-bottom)); overflow-x:hidden; }
  .line-total{ flex-wrap:wrap; }
  .actions{ position:fixed; left:0; right:0; bottom:0; z-index:15; display:grid; grid-template-columns:1fr 1fr; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--border); }
  .actions .btn{ justify-content:center; }
  .app.ready{ padding-bottom:96px; }
  .toast{ bottom:88px; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }