:root{
  --blue:#1ea7ee;
  --blue-2:#0b7ec2;
  --blue-soft:#e7f6ff;
  --red:#ef4444;
  --ink:#17324d;
  --muted:#64748b;
  --line:#d9e7f2;
  --panel:#ffffff;
  --bg:#eef8ff;
  --shadow:0 18px 50px rgba(14, 82, 130, .16);
  --radius:24px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Segoe UI", Arial, sans-serif;
  background:radial-gradient(circle at top, #ffffff 0%, var(--bg) 44%, #eaf3fb 100%);
  color:var(--ink);
}
button,input,select{ font:inherit; }
button{ cursor:pointer; }
.screen{ display:none; min-height:100dvh; padding:16px; }
.screen.active{ display:grid; place-items:center; }
.phone-frame{
  width:min(430px, calc(100vw - 24px));
  height:min(830px, calc(100dvh - 24px));
  background:var(--panel);
  border:1px solid rgba(29, 78, 116, .14);
  border-radius:32px;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.login-frame{
  padding:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.login-top-space{ flex:.58; min-height:46px; }
.login-logo{ width:170px; height:auto; display:block; object-fit:contain; }
.login-subtitle{ margin:3px 0 22px; font-size:15px; font-weight:800; color:var(--blue-2); }
.login-form{ width:100%; max-width:270px; display:grid; gap:12px; }
.login-form label{ display:grid; grid-template-columns:86px 1fr; align-items:center; gap:8px; font-size:13px; font-weight:700; }
input,select{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  min-height:42px;
  border-radius:14px;
  padding:9px 12px;
  outline:none;
  color:var(--ink);
}
input:focus,select:focus{ border-color:#7ed0ff; box-shadow:0 0 0 4px rgba(30,167,238,.13); }
.btn{
  border:1px solid var(--line);
  background:#fff;
  color:var(--blue-2);
  font-weight:900;
  border-radius:16px;
  min-height:42px;
  padding:9px 14px;
  transition:transform .08s ease, filter .08s ease;
}
.btn:active{ transform:scale(.97); filter:brightness(.98); }
.btn.primary{ background:var(--blue); border:2px solid #111827; color:#fff; }
.btn.ghost{ background:#f8fbff; }
.btn.small{ min-height:36px; padding:7px 11px; border-radius:13px; font-size:12px; white-space:nowrap; }
.btn.generate{ background:var(--blue); color:#fff; border:2px solid #111827; min-width:104px; }
.link-btn{ border:0; background:transparent; color:#1e6091; text-decoration:underline; margin:13px 0; font-size:13px; }
.login-footer{ margin-top:auto; width:100%; font-size:12px; line-height:1.45; color:#334155; }

.app-phone{ display:flex; flex-direction:column; }
.mobile-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:14px 15px 10px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.96);
}
.brand-logo{ width:130px; height:auto; display:block; object-fit:contain; }
.brand-logo.small{ width:118px; }
.section-title{ font-size:12px; line-height:1; font-weight:900; color:#111827; text-transform:uppercase; margin:2px 0 0 4px; }
.user-chip{
  text-align:right;
  font-size:11px;
  color:var(--muted);
  background:var(--blue-soft);
  border:1px solid #cdefff;
  padding:7px 10px;
  border-radius:999px;
  min-width:110px;
}
.user-chip strong{ display:block; color:var(--ink); }
.user-chip span{ display:block; margin-top:2px; }
.mobile-main{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; padding:10px; }
.seller-view{ display:none; flex:1; min-height:0; flex-direction:column; }
.seller-view.active{ display:flex; }
.legend{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--muted); font-size:12px; }
.legend.compact{ justify-content:space-between; padding:0 2px 8px; }
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-left:3px; box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.05); }
.dot.blue{ background:var(--blue); }
.dot.red{ background:var(--red); }
.toolbar-row{ display:grid; grid-template-columns:1fr auto; gap:8px; margin-bottom:8px; }
.inline-search{ min-height:36px; border-radius:13px; font-size:13px; }
.table-wrap{
  flex:1;
  min-height:0;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.data-table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:12px; }
.data-table th,.data-table td{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:7px 6px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}
.data-table th{ position:sticky; top:0; z-index:2; background:#f8fcff; color:#123; font-size:11px; }
.data-table th:last-child,.data-table td:last-child{ border-right:0; }
.data-table tbody tr:last-child td{ border-bottom:0; }
.stock-table .w-check{ width:38px; }
.stock-table th:nth-child(2),.stock-table td:nth-child(2){ width:128px; text-align:left; }
.stock-table th:nth-child(3),.stock-table td:nth-child(3){ width:46px; }
.stock-table th:nth-child(4),.stock-table td:nth-child(4){ width:70px; }
.stock-table th:nth-child(5),.stock-table td:nth-child(5){ width:120px; text-align:left; }
.stock-table th:nth-child(6),.stock-table td:nth-child(6){ width:92px; }
.row-check{ width:20px; height:20px; accent-color:var(--blue); }
.price-input,.box-input,.admin-price-input{ min-height:31px; border:1px solid #d7e8f4; border-radius:10px; padding:3px 6px; text-align:center; font-size:12px; }
.price-input.manual,.box-input.manual,.admin-price-input.manual{ border-color:#fecaca; background:#fff8f8; }
tr.selected td{ background:#f0f9ff; }
.note{ font-size:11px; color:var(--muted); margin:8px 4px 0; line-height:1.35; }
.mobile-nav{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  align-items:center;
  gap:8px;
  padding:10px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.98);
}
.nav-pill{
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  font-weight:900;
  border-radius:16px;
  min-height:42px;
}
.nav-pill.active{ background:var(--blue-soft); color:var(--blue-2); border-color:#bae6fd; }
.order-head{ display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; }
.date-box{ font-size:11px; line-height:1.55; color:var(--muted); padding:5px 8px; border:1px solid var(--line); border-radius:14px; min-width:112px; }
.order-form{ display:grid; gap:7px; margin-bottom:8px; }
.order-form label{ display:grid; grid-template-columns:118px 1fr; gap:7px; align-items:center; font-size:11px; font-weight:800; }
.order-form input,.order-form select{ min-height:32px; border-radius:10px; padding:5px 8px; font-size:12px; }
.order-legend{ padding-bottom:6px; }
.order-table th:nth-child(1),.order-table td:nth-child(1){ width:62px; }
.order-table th:nth-child(2),.order-table td:nth-child(2){ width:120px; text-align:left; }
.order-table th:nth-child(3),.order-table td:nth-child(3){ width:122px; text-align:left; }
.order-table th:nth-child(4),.order-table td:nth-child(4){ width:70px; }
.order-table th:nth-child(5),.order-table td:nth-child(5){ width:82px; }
.order-table th:nth-child(6),.order-table td:nth-child(6){ width:92px; }
.totals-card{ display:grid; gap:7px; margin-top:8px; }
.totals-card div{ display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); border-radius:13px; padding:9px 10px; background:#fff; }
.totals-card span{ font-size:12px; font-weight:900; }
.totals-card strong{ font-size:14px; color:#0f172a; }

.admin-shell{ width:min(1220px, calc(100vw - 32px)); min-height:min(820px, calc(100dvh - 32px)); background:#fff; border-radius:28px; box-shadow:var(--shadow); overflow:hidden; }
.admin-header{ display:flex; justify-content:space-between; gap:20px; padding:22px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,#fff,#f0f9ff); }
.brand-logo.admin{ width:148px; }
.admin-header h1{ margin:5px 0 2px; font-size:24px; }
.admin-header p{ margin:0; color:var(--muted); }
.admin-grid{ display:grid; grid-template-columns:280px 1fr; min-height:680px; }
.admin-panel{ border-right:1px solid var(--line); padding:18px; display:grid; align-content:start; gap:14px; background:#fbfdff; }
.admin-panel label,.config-row label{ display:grid; gap:6px; font-size:12px; font-weight:900; color:var(--muted); }
.admin-metric{ border:1px solid var(--line); border-radius:18px; padding:14px; background:#fff; }
.admin-metric span{ display:block; color:var(--muted); font-size:12px; font-weight:800; }
.admin-metric strong{ display:block; margin-top:4px; font-size:22px; }
.admin-content{ min-width:0; padding:18px; }
.tabs{ display:flex; gap:8px; margin-bottom:14px; }
.tab{ border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 14px; font-weight:900; color:var(--muted); }
.tab.active{ color:var(--blue-2); background:var(--blue-soft); border-color:#b7e7ff; }
.admin-tab{ display:none; }
.admin-tab.active{ display:block; }
.config-row{ display:grid; grid-template-columns:220px 180px auto auto; gap:10px; align-items:end; margin-bottom:12px; }
.admin-table-wrap{ max-height:535px; }
.admin-price-table th:nth-child(1),.admin-price-table td:nth-child(1){ text-align:left; width:230px; }
.admin-price-table th:nth-child(2),.admin-price-table td:nth-child(2){ width:70px; }
.admin-price-table th:nth-child(3),.admin-price-table td:nth-child(3){ width:120px; }
.admin-price-table th:nth-child(4),.admin-price-table td:nth-child(4){ width:150px; }
.admin-price-table th:nth-child(5),.admin-price-table td:nth-child(5){ width:140px; }
.admin-hint{ color:var(--muted); margin-top:0; }
.preview-card{ display:grid; place-items:center; }
.mini-preview{ height:600px; transform:scale(.92); transform-origin:top center; }
.mobile-header.mini{ padding:12px; }
.preview-list{ padding:12px; display:grid; gap:8px; }
.preview-item{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; border:1px solid var(--line); border-radius:14px; padding:10px; background:#fff; font-size:12px; }
.preview-item strong{ display:block; }
.preview-item span{ color:var(--muted); }
.toast{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px); opacity:0; background:#0f172a; color:#fff; padding:10px 14px; border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:opacity .18s ease, transform .18s ease; pointer-events:none; z-index:1000; font-size:13px; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.order-dialog{ width:min(760px, calc(100vw - 28px)); border:0; border-radius:20px; padding:0; box-shadow:0 22px 70px rgba(0,0,0,.32); }
.order-dialog::backdrop{ background:rgba(12,31,51,.48); }
.dialog-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); }
.icon-btn{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:22px; line-height:1; }
#orderDialogBody{ padding:16px; max-height:65dvh; overflow:auto; }
.dialog-actions{ display:flex; gap:8px; justify-content:flex-end; padding:14px 16px; border-top:1px solid var(--line); }
.print-note{ border:1px solid var(--line); padding:16px; border-radius:16px; }
.print-note h2{ margin:6px 0 12px; }
.print-note table{ width:100%; border-collapse:collapse; font-size:12px; }
.print-note th,.print-note td{ border:1px solid #111827; padding:6px; }
.print-meta{ display:grid; grid-template-columns:1fr 1fr; gap:7px 18px; font-size:12px; margin-bottom:12px; }

@media (max-width:900px){
  .screen-admin.active{ align-items:start; }
  .admin-shell{ width:100%; border-radius:22px; }
  .admin-grid{ grid-template-columns:1fr; }
  .admin-panel{ border-right:0; border-bottom:1px solid var(--line); grid-template-columns:repeat(2, minmax(0,1fr)); }
  .config-row{ grid-template-columns:1fr 1fr; }
}
@media (max-width:450px){
  .screen{ padding:0; }
  .phone-frame{ width:100vw; height:100dvh; border-radius:0; border:0; }
  .login-frame{ padding:24px; }
  .mobile-main{ padding:8px; }
  .brand-logo{ width:118px; }
  .user-chip{ min-width:96px; padding:6px 8px; }
  .toolbar-row{ grid-template-columns:1fr; }
  .btn.small{ width:100%; }
  .order-form label{ grid-template-columns:92px 1fr; }
  .admin-panel{ grid-template-columns:1fr; }
  .config-row{ grid-template-columns:1fr; }
}

/* M002 · Stock separado para ventas */
.btn.full{ width:100%; }
.stock-admin-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.stock-admin-head h2{ margin:0 0 4px; font-size:20px; }
.stock-admin-head p{ margin:0; color:var(--muted); max-width:720px; }
.stock-summary-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-bottom:12px;
}
.admin-stock-table th:nth-child(1),.admin-stock-table td:nth-child(1){ text-align:left; width:230px; }
.admin-stock-table th:nth-child(2),.admin-stock-table td:nth-child(2){ width:70px; }
.admin-stock-table th:nth-child(3),.admin-stock-table td:nth-child(3){ width:130px; }
.admin-stock-table th:nth-child(4),.admin-stock-table td:nth-child(4){ width:110px; }
.admin-stock-table th:nth-child(5),.admin-stock-table td:nth-child(5){ width:130px; }
.admin-stock-table th:nth-child(6),.admin-stock-table td:nth-child(6){ width:160px; }
.stock-dialog{
  width:min(1040px, calc(100vw - 24px));
  border:0;
  border-radius:20px;
  padding:0;
  box-shadow:0 22px 70px rgba(0,0,0,.32);
}
.stock-dialog::backdrop{ background:rgba(12,31,51,.48); }
.stock-dialog-body{ padding:16px; }
.stock-dialog-info{
  display:grid;
  grid-template-columns:1fr 180px auto;
  gap:12px;
  align-items:end;
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#f8fcff;
}
.stock-dialog-info p{ margin:4px 0 0; color:var(--muted); font-size:12px; }
.stock-dialog-info code{ background:#eaf6ff; padding:1px 5px; border-radius:6px; }
.stock-dialog-info label{ display:grid; gap:5px; font-size:12px; font-weight:900; color:var(--muted); }
.stock-allocation-wrap{ max-height:56dvh; }
.stock-allocation-table th:nth-child(1),.stock-allocation-table td:nth-child(1){ text-align:left; width:250px; }
.stock-allocation-table th:nth-child(2),.stock-allocation-table td:nth-child(2){ width:70px; }
.stock-allocation-table th:nth-child(3),.stock-allocation-table td:nth-child(3){ width:140px; }
.stock-allocation-table th:nth-child(4),.stock-allocation-table td:nth-child(4){ width:125px; }
.stock-allocation-table th:nth-child(5),.stock-allocation-table td:nth-child(5){ width:135px; }
.stock-allocation-table th:nth-child(6),.stock-allocation-table td:nth-child(6){ width:130px; }
.allocation-percent-input,.allocation-qty-input{
  min-height:31px;
  border:1px solid #fecaca;
  background:#fff8f8;
  border-radius:10px;
  padding:3px 6px;
  text-align:center;
  font-size:12px;
}
.allocation-result{ font-weight:900; color:var(--blue-2); }
tr.out-of-stock td{ color:#94a3b8; background:#f8fafc; }
tr.stock-over td{ background:#fff1f2; }
tr.stock-over td:nth-child(4){ color:#b91c1c; font-weight:900; }
@media (max-width:900px){
  .stock-summary-grid{ grid-template-columns:1fr; }
  .stock-dialog-info{ grid-template-columns:1fr; }
  .stock-admin-head{ display:grid; }
}