/* =====================================================
   PALETA: blanco + azul + barra azul marino + rojo (solo acentos y alertas)
   Dos temas: claro (por defecto) y oscuro (html[data-theme="dark"])
   El oscuro es azul marino suave, no negro.
   Responsive: escritorio (>=1024) · tablet (721-1023) · celular (<=720)
   ===================================================== */
:root{
  color-scheme:light;
  /* Fondos y bordes */
  --bg:#f2f5fb; --card:#ffffff; --card-2:#f6f8fd; --hover:#eaf0fb; --line:#dce3f0;
  /* Textos */
  --ink:#14213d; --ink-2:#3a4a6b; --muted:#66748f;
  /* Azul principal */
  --accent:#2457c5; --accent-hover:#1c46a3; --accent-text:#1d4ba8; --accent-soft:#e7eefc; --on-accent:#ffffff;
  /* Azul claro secundario (gráficos, avisos) */
  --sky:#3b8fd6; --sky-soft:#e3f0fb; --sky-text:#1d5a94;
  /* Rojo: peligro y detalles */
  --bad:#d63a3a; --bad-hover:#b92f2f; --bad-soft:#fdebec; --bad-text:#9b1f27;
  /* Estados */
  --ok:#2e9d5f; --ok-soft:#e3f4ea; --ok-text:#1e6b40;
  --warn:#b7791f; --warn-soft:#fcf1d6; --warn-text:#7a5412;
  --info-soft:#e7eefc; --info-text:#234e8a;
  --gray-soft:#e8ecf4;
  /* Barra lateral (azul marino, distinta al resto) */
  --side-bg:#14275c; --side-ink:#d6e0fb; --side-muted:#93a6d6; --side-line:rgba(255,255,255,.12);
  --side-hover:rgba(255,255,255,.09); --side-active-bg:#ffffff; --side-active-ink:#14275c;
  --side-btn:rgba(255,255,255,.07); --side-btn-hover:rgba(255,255,255,.16);
  /* Otros */
  --overlay:rgba(14,22,45,.5); --toast-bg:#14213d; --toast-ink:#ffffff;
  --radius:8px; --shadow:0 1px 3px rgba(20,33,61,.07),0 1px 2px rgba(20,33,61,.04);
  --shadow-lg:0 8px 24px rgba(20,33,61,.12);
  --focus-ring:rgba(36,87,197,.25);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#18233f; --card:#223052; --card-2:#293860; --hover:#2f4070; --line:#3a4b7a;
  --ink:#eef2fb; --ink-2:#c9d3ea; --muted:#9aa8c8;
  --accent:#4a7de0; --accent-hover:#5f8fec; --accent-text:#b5cdff; --accent-soft:#2d4278; --on-accent:#ffffff;
  --sky:#5fb0ee; --sky-soft:#244468; --sky-text:#a9d6f7;
  --bad:#e04848; --bad-hover:#ee6060; --bad-soft:#4b2c40; --bad-text:#ffb8b8;
  --ok:#4cc082; --ok-soft:#23483f; --ok-text:#a1e8c2;
  --warn:#e5b04a; --warn-soft:#4a4033; --warn-text:#f4d58f;
  --info-soft:#2d4278; --info-text:#bcd1ff;
  --gray-soft:#334471;
  --side-bg:#0f1a38; --side-ink:#c9d5f3; --side-muted:#8497c4; --side-line:rgba(255,255,255,.1);
  --side-hover:rgba(255,255,255,.08); --side-active-bg:rgba(255,255,255,.14); --side-active-ink:#ffffff;
  --overlay:rgba(6,10,24,.65); --toast-bg:#eef2fb; --toast-ink:#14213d;
  --shadow:0 1px 3px rgba(0,0,0,.25);
  --shadow-lg:0 8px 24px rgba(0,0,0,.35);
  --focus-ring:rgba(95,143,236,.35);
}

*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
html{-webkit-text-size-adjust:100%;}
body{font-family:'DM Sans','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.4;transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent;}
body.modal-open,body.menu-open{overflow:hidden;}
button,input,select{font-family:inherit;}
button{-webkit-appearance:none;appearance:none;}
.ico{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.app{display:flex;min-height:100vh;}

/* ---------- Menú lateral (azul marino) ---------- */
.sidebar{width:240px;background:var(--side-bg);color:var(--side-ink);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;height:100dvh;z-index:10;overflow-y:auto;}
.sidebar .logo{padding:22px 18px;border-bottom:1px solid var(--side-line);display:flex;align-items:center;gap:11px;}
.logo-mark{width:38px;height:38px;border-radius:10px;background:var(--bad);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-mark .ico{width:21px;height:21px;}
.sidebar .logo-txt{font-weight:700;font-size:15px;line-height:1.2;color:#fff;}
.sidebar .logo-txt small{color:var(--side-muted);font-weight:400;font-size:12px;display:block;margin-top:2px;}
.sidebar nav{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:3px;}
.side-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--side-muted);padding:4px 12px 8px;}
.sidebar nav a{display:flex;align-items:center;gap:12px;padding:11px 14px;color:var(--side-ink);text-decoration:none;font-size:14px;border-radius:10px;transition:background .15s,color .15s;}
.sidebar nav a:hover{background:var(--side-hover);color:#fff;}
.sidebar nav a.active{background:var(--side-active-bg);color:var(--side-active-ink);font-weight:700;box-shadow:inset 4px 0 0 var(--bad);}
.sidebar nav a .ico{width:19px;height:19px;}
.sidebar .side-datos{padding:14px 14px 18px;border-top:1px solid var(--side-line);display:flex;flex-direction:column;gap:7px;}
.sidebar .side-datos button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;background:var(--side-btn);border:1px solid var(--side-line);border-radius:9px;color:var(--side-ink);font-size:12.5px;cursor:pointer;text-align:left;transition:background .15s;}
.sidebar .side-datos button:hover{background:var(--side-btn-hover);color:#fff;}
.sidebar .side-datos button.peligro:hover{background:var(--bad);border-color:var(--bad);color:#fff;}
.sidebar .side-datos button.tema{font-weight:600;color:#fff;background:var(--side-btn-hover);}
.sidebar .side-datos button.tema:hover{background:rgba(255,255,255,.24);}

/* Barra superior del celular (oculta en escritorio) */
.mobilebar{display:none;}
.scrim{display:none;}
.icon-btn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:none;border-radius:10px;color:#fff;cursor:pointer;}
.icon-btn:hover{background:rgba(255,255,255,.2);}
.icon-btn .ico{width:21px;height:21px;}

/* ---------- Contenido ---------- */
.main{margin-left:240px;flex:1;padding:28px 30px;min-width:0;max-width:1500px;}
.topbar{margin-bottom:22px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.topbar h1{font-size:26px;font-weight:700;letter-spacing:-.3px;}
.topbar h1 span{color:var(--muted);font-size:14px;font-weight:400;display:block;margin-top:3px;letter-spacing:0;}
.topbar h1 span::first-letter{text-transform:uppercase;}
body[data-view="vender"] .topbar-cta{display:none;}
.view{display:none;}
.view.active{display:block;animation:entrar .22s ease;}
@keyframes entrar{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* Botones */
.btn{border:1px solid transparent;padding:9px 15px;border-radius:var(--radius);font-weight:600;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s,transform .05s;color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--accent);text-decoration:none;}
.btn:hover{background:var(--accent-hover);}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--accent);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-danger{background:var(--bad);color:#fff;}
.btn-danger:hover{background:var(--bad-hover);}
.btn-outline{background:var(--card);color:var(--ink);border-color:var(--line);}
.btn-outline:hover{background:var(--hover);}
.btn-ghost-danger{background:var(--card);color:var(--bad-text);border-color:var(--line);}
.btn-ghost-danger:hover{background:var(--bad-soft);}
.btn-sm{padding:7px 12px;font-size:13px;}
.btn-xs{padding:4px 9px;font-size:12px;font-weight:500;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-block{width:100%;}

/* Tarjetas e indicadores */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow);}
.card-title{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:20px;}
.kpi{background:var(--card);border-radius:14px;padding:16px 18px;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;gap:14px;align-items:center;transition:border-color .15s,box-shadow .15s,transform .15s;}
.kpi.click{cursor:pointer;} .kpi.click:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-1px);}
.kpi-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.kpi-ico .ico{width:22px;height:22px;}
.kpi-ico.principal{background:var(--accent-soft);color:var(--accent-text);}
.kpi-ico.verde{background:var(--ok-soft);color:var(--ok);}
.kpi-ico.azul{background:var(--sky-soft);color:var(--sky);}
.kpi-ico.rojo{background:var(--bad-soft);color:var(--bad);}
.kpi .label{font-size:13px;color:var(--muted);}
.kpi .value{font-size:23px;font-weight:700;margin-top:1px;line-height:1.2;}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:2px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.grid-rep{grid-template-columns:1.4fr 1fr;}

/* Tablas */
.table-wrap{overflow:auto;border-radius:14px;border:1px solid var(--line);background:var(--card);max-height:calc(100vh - 260px);box-shadow:var(--shadow);}
.card .table-wrap{border:none;border-radius:0;max-height:none;box-shadow:none;}
table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{padding:12px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;}
th{background:var(--card-2);font-weight:600;font-size:12px;color:var(--muted);position:sticky;top:0;z-index:5;white-space:nowrap;}
tbody tr{transition:background .12s;}
tbody tr:hover{background:var(--card-2);}
tbody tr:last-child td{border-bottom:none;}
td.center,th.center{text-align:center;} td.right,th.right{text-align:right;}
td.actions{white-space:nowrap;text-align:right;}
td.actions .btn{margin-left:4px;}
.empty-row{text-align:center;color:var(--muted);padding:38px 16px !important;}
.muted{color:var(--muted);}
.pos-pos{color:var(--ok);font-weight:700;}
.anulada td{opacity:.5;} .anulada td.total{text-decoration:line-through;}

/* Formularios */
.input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;background:var(--card);outline:none;transition:border-color .15s,box-shadow .15s;color:var(--ink);}
.input::placeholder{color:var(--muted);opacity:.8;}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.form-group{display:flex;flex-direction:column;gap:5px;}
.form-group label,.lbl{font-size:13px;font-weight:600;color:var(--ink-2);}
.form-group .hint{font-size:12px;color:var(--muted);}
.form-group.full{grid-column:1/-1;}
.form-error{color:var(--bad-text);font-size:13px;font-weight:500;min-height:18px;margin-top:12px;}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;padding:12px;background:var(--card);border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);}
.filter-bar select.input{width:auto;min-width:170px;}
.search-wrap{position:relative;flex:1;min-width:200px;}
.search-wrap .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;}
.search-wrap .input{padding-left:34px;}
.seg{display:flex;gap:6px;flex-wrap:wrap;}
.seg button{flex:1;min-width:70px;padding:8px 6px;border:1px solid var(--line);background:var(--card);border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;color:var(--ink-2);transition:background .12s,border-color .12s;}
.seg button:hover{border-color:var(--accent);}
.seg button.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}

/* Pestañas */
.tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;}
.tab{background:none;border:none;padding:10px 16px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px;flex-shrink:0;}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--accent-text);border-bottom-color:var(--bad);}
.panel{display:none;} .panel.active{display:block;}

/* Etiquetas */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;}
.b-verde{background:var(--ok-soft);color:var(--ok-text);} .b-amarillo{background:var(--warn-soft);color:var(--warn-text);}
.b-rojo{background:var(--bad-soft);color:var(--bad-text);} .b-azul{background:var(--info-soft);color:var(--info-text);}
.b-gris{background:var(--gray-soft);color:var(--ink-2);}

/* ---------- Pantalla de venta ---------- */
.pos-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;height:calc(100vh - 140px);min-height:520px;}
.pos-products{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;}
.pos-products .filter-bar{margin-bottom:0;}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;overflow-y:auto;padding:2px 4px 4px 2px;align-content:start;flex:1;}
.pos-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:7px;color:var(--ink);box-shadow:var(--shadow);transition:transform .1s,border-color .15s,box-shadow .15s;}
.pos-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-lg);}
.pos-card:active{transform:scale(.98);}
.pos-card.in-cart{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.pos-card:disabled{opacity:.5;cursor:not-allowed;transform:none;border-color:var(--line);box-shadow:var(--shadow);}
.pc-top{display:flex;justify-content:space-between;align-items:center;}
.pc-chip{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.pc-chip .ico{width:19px;height:19px;}
.pc-chip.PRIMERA{background:var(--ok-soft);color:var(--ok);}
.pc-chip.SEGUNDA{background:var(--info-soft);color:var(--info-text);}
.pc-chip.TERCERA{background:var(--gray-soft);color:var(--ink-2);}
.pc-name{font-size:15px;font-weight:700;line-height:1.25;}
.pc-meta{font-size:12px;color:var(--muted);}
.pc-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px;}
.pc-price{font-size:19px;font-weight:700;color:var(--accent-text);}
.pc-qty{background:var(--bad);color:#fff;font-size:12px;font-weight:700;padding:2px 9px;border-radius:20px;}
.pc-stock{font-size:12px;color:var(--muted);}
.pc-stock.low{color:var(--warn);font-weight:600;} .pc-stock.out{color:var(--bad);font-weight:600;}
.pos-cart{background:var(--card);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;min-height:0;box-shadow:var(--shadow);}
.cart-head{padding:13px 16px;border-bottom:1px solid var(--line);background:var(--card-2);font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.cart-head .count{background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;border-radius:20px;padding:1px 9px;margin-left:6px;}
.cart-items{flex:1;overflow-y:auto;padding:4px 14px;min-height:90px;}
.cart-item{padding:11px 0;border-bottom:1px solid var(--line);}
.cart-item:last-child{border-bottom:none;}
.ci-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.ci-name{font-weight:600;font-size:14px;}
.ci-meta{color:var(--muted);font-size:12px;margin-top:1px;}
.ci-rm{background:none;border:none;color:var(--bad);cursor:pointer;padding:6px;display:flex;border-radius:8px;}
.ci-rm:hover{background:var(--bad-soft);}
.ci-fields{display:grid;grid-template-columns:118px 1fr auto;gap:10px;align-items:end;margin-top:8px;}
.ci-fields label,.ci-fields .fld{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px;}
.ci-fields .input{padding:7px 9px;}
.ci-sub{font-weight:700;font-size:15px;padding-bottom:7px;text-align:right;min-width:90px;}
.stepper{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);}
.stepper button{width:34px;flex-shrink:0;background:var(--card-2);border:none;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;}
.stepper button:hover{background:var(--hover);}
.stepper input{flex:1;min-width:0;width:100%;text-align:center;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;padding:7px 2px;background:var(--card);color:var(--ink);font-size:14px;outline:none;-moz-appearance:textfield;}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.stepper:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring);}
.cart-foot{padding:14px 16px;border-top:1px solid var(--line);background:var(--card-2);display:flex;flex-direction:column;gap:10px;}
.cart-total{display:flex;justify-content:space-between;font-size:22px;font-weight:700;}
.btn-vender{padding:13px;font-size:16px;}
.empty-cart{text-align:center;color:var(--muted);padding:34px 20px;}
.empty-cart .ico{width:34px;height:34px;display:block;margin:0 auto 10px;opacity:.55;}

/* Barra flotante "Ver venta" (solo celular/tablet) */
.cart-fab{display:none;position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:15;background:var(--accent);color:var(--on-accent);border:none;border-radius:14px;padding:14px 18px;font-size:15px;font-weight:700;box-shadow:0 8px 24px rgba(10,20,50,.4);align-items:center;justify-content:space-between;gap:10px;cursor:pointer;}
.cart-fab .l{display:flex;align-items:center;gap:10px;}
.cart-fab .n{background:var(--bad);color:#fff;border-radius:20px;padding:1px 9px;font-size:13px;}

/* Gráficos */
.bars{display:flex;gap:3px;height:230px;align-items:stretch;}
.bcol{flex:1;min-width:0;display:flex;flex-direction:column;}
.bwrap{flex:1;display:flex;align-items:flex-end;}
.bval{width:100%;background:var(--sky);border-radius:4px 4px 0 0;min-height:2px;transition:background .15s;}
.bcol:hover .bval{background:var(--bad);}
.blab{height:20px;font-size:11px;color:var(--muted);white-space:nowrap;padding-top:5px;}
.hbar{display:grid;grid-template-columns:150px 1fr 40px;gap:10px;align-items:center;margin-bottom:11px;font-size:13px;}
.hbar .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;}
.hbar .track{background:var(--gray-soft);border-radius:6px;height:14px;overflow:hidden;}
.hbar .fill{height:100%;background:var(--accent);border-radius:6px;}
.hbar .vl{text-align:right;font-weight:700;}
.chart-empty{color:var(--muted);text-align:center;padding:60px 10px;}

/* Ventanas emergentes */
.modal-overlay{display:none;position:fixed;inset:0;background:var(--overlay);z-index:1000;justify-content:center;align-items:center;padding:20px;}
.modal-overlay.active{display:flex;animation:fundir .15s ease;}
.modal-box{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,.3);animation:subir .2s ease;}
.modal-box.sm{max-width:420px;}
@keyframes fundir{from{opacity:0;}to{opacity:1;}}
@keyframes subir{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.modal-head{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--card);z-index:2;}
.modal-head h2{font-size:17px;font-weight:700;}
.modal-head .close{background:none;border:none;cursor:pointer;color:var(--muted);padding:6px;display:flex;border-radius:8px;}
.modal-head .close:hover{background:var(--hover);color:var(--ink);}
.modal-body{padding:22px;}
.modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:var(--card-2);border-radius:0 0 16px 16px;position:sticky;bottom:0;}
.aviso{padding:10px 12px;border-radius:var(--radius);font-size:13px;margin-bottom:14px;background:var(--sky-soft);color:var(--sky-text);}
.aviso strong{font-weight:700;}
.totales{background:var(--card-2);border-radius:var(--radius);padding:12px 14px;margin-top:14px;display:flex;justify-content:space-between;font-size:16px;font-weight:700;}

#toastBox{position:fixed;top:20px;right:20px;z-index:3000;display:flex;flex-direction:column;gap:8px;}
.toast{padding:12px 16px;border-radius:var(--radius);background:var(--toast-bg);color:var(--toast-ink);font-size:14px;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,.2);border-left:4px solid #9ca3af;max-width:360px;transition:opacity .3s;animation:subir .2s ease;}
.toast.success{border-left-color:#4caf7a;} .toast.error{border-left-color:#e0675c;} .toast.warning{border-left-color:#e0a43a;}

/* Pantallas táctiles: botones y campos más cómodos */
@media(pointer:coarse){
  .btn-xs{padding:9px 13px;font-size:13px;}
  .btn-sm{padding:10px 14px;}
  .seg button{padding:11px 6px;}
  .input{padding:11px 12px;}
  .stepper button{width:42px;}
  .tab{padding:12px 16px;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
}

/* =====================================================
   TABLET (721 - 1023 px): menú compacto con solo íconos
   ===================================================== */
@media(min-width:721px) and (max-width:1023px){
  .sidebar{width:68px;}
  .sidebar .logo-txt,.sidebar nav a span,.side-label{display:none;}
  .sidebar .logo{justify-content:center;padding:16px 0;}
  .sidebar nav{padding:10px 8px;}
  .sidebar nav a{justify-content:center;padding:13px 0;}
  .sidebar nav a.active{box-shadow:inset 3px 0 0 var(--bad);}
  .sidebar .side-datos{padding:10px 8px;}
  .sidebar .side-datos button{justify-content:center;padding:11px 0;}
  .sidebar .side-datos button span{display:none;}
  .main{margin-left:68px;padding:22px 20px;}
}

/* Venta apilada (productos arriba, resumen abajo) hasta 900 px */
@media(max-width:900px){
  .pos-layout{grid-template-columns:1fr;height:auto;min-height:0;}
  .pos-grid{max-height:none;overflow:visible;}
  .pos-products .filter-bar{position:sticky;top:0;z-index:6;}
  .grid-2,.grid-rep{grid-template-columns:1fr;}
  table{min-width:680px;}
  .hbar{grid-template-columns:110px 1fr 36px;}
  body[data-view="vender"] .cart-fab.show{display:flex;}
  body.cart-visible .cart-fab{display:none !important;}
  body[data-view="vender"] .main{padding-bottom:90px;}
}

/* =====================================================
   CELULAR (hasta 720 px): menú que se abre, tarjetas, hojas inferiores
   ===================================================== */
@media(max-width:720px){
  .mobilebar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:20;background:var(--side-bg);color:#fff;padding:9px 12px;padding-top:calc(9px + env(safe-area-inset-top));box-shadow:0 2px 8px rgba(0,0,0,.2);}
  .mb-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;min-width:0;}
  .mb-brand .logo-mark{width:32px;height:32px;border-radius:9px;}
  .mb-brand .logo-mark .ico{width:18px;height:18px;}
  .mb-brand span.t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .mb-right{display:flex;gap:8px;}

  .sidebar{width:280px;max-width:85vw;transform:translateX(-102%);transition:transform .25s ease;z-index:30;box-shadow:none;}
  .sidebar.open{transform:none;box-shadow:8px 0 30px rgba(0,0,0,.4);}
  .scrim{position:fixed;inset:0;background:var(--overlay);z-index:25;opacity:0;pointer-events:none;transition:opacity .25s;display:block;}
  .scrim.show{opacity:1;pointer-events:auto;}

  .app{display:block;}
  .main{margin-left:0;padding:16px 12px 28px;}
  .topbar{margin-bottom:14px;}
  .topbar h1{font-size:22px;}

  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px;}
  .kpi{flex-direction:column;align-items:flex-start;gap:9px;padding:13px;}
  .kpi-ico{width:40px;height:40px;}
  .kpi .value{font-size:19px;}
  .kpi-grid .kpi:last-child:nth-child(odd){grid-column:1/-1;}

  .card{padding:14px;}
  .filter-bar{padding:10px;}
  .search-wrap{min-width:100%;}
  .filter-bar select.input{width:100%;}
  .filter-bar > .btn{width:100%;}

  /* Tablas -> tarjetas */
  table{min-width:0;}
  .table-wrap,.card .table-wrap{max-height:none;border:none;background:transparent;box-shadow:none;overflow:visible;border-radius:0;}
  table,tbody,tr,td{display:block;width:100%;}
  thead{display:none;}
  tbody tr{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 14px;margin-bottom:10px;box-shadow:var(--shadow);}
  tbody tr:hover{background:var(--card);}
  .card tbody tr{background:var(--card-2);box-shadow:none;}
  .card tbody tr:hover{background:var(--card-2);}
  td{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);text-align:right !important;}
  tbody tr:last-child td{border-bottom:1px dashed var(--line);}
  tbody tr td:last-child{border-bottom:none;}
  td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:600;text-align:left;flex-shrink:0;}
  td.actions{justify-content:flex-end;flex-wrap:wrap;gap:8px;white-space:normal;padding-top:11px;}
  td.actions .btn{margin-left:0;}
  td:empty{display:none;}
  td.empty-row{display:block;border:none;text-align:center !important;padding:30px 10px !important;}
  tr:has(td.empty-row){background:transparent;border:none;box-shadow:none;}

  /* Venta */
  .pos-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:0;}
  .pos-card{padding:12px;}
  .pc-name{font-size:14px;}
  .pc-price{font-size:17px;}
  .ci-fields{grid-template-columns:1fr 1fr;}
  .ci-sub{grid-column:1/-1;text-align:right;padding-bottom:0;}
  .cart-total{font-size:20px;}

  /* Gráficos */
  .bars{height:190px;}
  .hbar{grid-template-columns:92px 1fr 30px;gap:8px;}

  /* Ventanas como hoja inferior */
  .modal-overlay{align-items:flex-end;padding:0;}
  .modal-box,.modal-box.sm{max-width:100%;max-height:92vh;border-radius:20px 20px 0 0;border-bottom:none;animation:hoja .25s ease;}
  @keyframes hoja{from{transform:translateY(100%);}to{transform:none;}}
  .modal-head{padding:14px 18px;}
  .modal-body{padding:18px;}
  .modal-foot{padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-radius:0;}
  .modal-foot .btn{flex:1;padding:12px;}
  .form-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .form-group.full{grid-column:1/-1;}

  /* Evita el zoom automático de iPhone al enfocar un campo */
  .input,.stepper input{font-size:16px;}

  #toastBox{top:auto;bottom:calc(84px + env(safe-area-inset-bottom));left:12px;right:12px;align-items:stretch;}
  .toast{max-width:none;}
}

@media(max-width:380px){
  .form-grid{grid-template-columns:1fr;}
  .kpi .value{font-size:17px;}
  .pos-grid{grid-template-columns:1fr;}
}