:root{
  --paper:#E8DCC4;
  --paper-dark:#DED0AF;
  --ink:#241D18;
  --ink-soft:#5A4E40;
  --blood:#7A2E2A;
  --amber:#B8792B;
  --sage:#55684A;
  --crimson:#A63A2E;
  --line:#C9BB9C;
  --cream-card:#F3ECD9;
  --muted:#9C8F79;
  --slate:#5E7A8C;
}
*{box-sizing:border-box; margin:0; padding:0;}
html, body{ height:100%; }
body{
  background:var(--paper);
  min-height:100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink);
  -webkit-text-size-adjust:100%;
}

/* ---- barra superior de la app (todas las pantallas) ---- */
.topbar{
  display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:70;
  background:var(--ink); padding:10px 12px;
}
.topbar .brand{
  color:var(--paper); font-family:"Arial Black","Helvetica Neue",sans-serif;
  font-size:14px; letter-spacing:-.01em; white-space:nowrap;
}
.topbar .quien{
  flex:1; text-align:right;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10.5px; color:rgba(232,220,196,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar .salir{
  border:1px solid rgba(232,220,196,.3); background:transparent; color:var(--paper);
  border-radius:6px; padding:6px 9px; cursor:pointer;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:10px;
}
.rolebar{
  display:flex; gap:0; position:sticky; top:41px; z-index:69;
  background:var(--ink); padding:6px; margin:0;
}
.rolebar button{
  flex:1; padding:9px 4px; border:none; border-radius:7px; cursor:pointer;
  background:transparent; color:rgba(232,220,196,.55);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.rolebar button.on{ background:var(--paper); color:var(--ink); }

.app-shell{ display:block; }
.frame-wrap{ display:block; }
.screen{
  background:var(--paper); overflow:visible;
  min-height:calc(100vh - 94px); padding-top:12px;
  display:flex; flex-direction:column; position:relative;
}
body.rol-pan #wrapCap{ display:none; }
body:not(.rol-pan) #wrapPan{ display:none; }

/* Vista fija por rol (Inventario/Compras): gana sobre el toggle de rolebar y
   sobre el layout de escritorio, que si no siempre muestra ambas vistas. */
body.solo-cap .rolebar{ display:none !important; }
body.solo-pan .rolebar{ display:none !important; }
body.solo-cap #wrapPan{ display:none !important; }
body.solo-cap #wrapCap{ display:block !important; }
body.solo-pan #wrapCap{ display:none !important; }
body.solo-pan #wrapPan{ display:block !important; }
@media (min-width: 900px){
  body.solo-cap .app-shell, body.solo-pan .app-shell{ grid-template-columns:1fr; max-width:640px; }
}

/* ---- pantalla de login ---- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login-card{
  width:100%; max-width:340px; background:var(--cream-card);
  border:1px solid var(--line); border-radius:14px; padding:24px 22px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.login-card .eyebrow{
  color:var(--amber); font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; text-align:center;
}
.login-card h1{
  font-family:"Arial Black","Helvetica Neue",sans-serif; font-size:22px;
  text-align:center; margin-top:6px;
}
.login-lista{ margin-top:18px; }
.login-usuario{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:9px;
  padding:12px 13px; margin-bottom:8px; cursor:pointer; text-align:left;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
}
.login-usuario b{ font-size:13px; }
.login-usuario span{ font-size:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
.login-pin{ margin-top:14px; }
.login-pin .quien{ text-align:center; font-size:13px; font-weight:700; margin-bottom:10px; }
.pin-dots{ display:flex; justify-content:center; gap:10px; margin-bottom:14px; }
.pin-dots span{
  width:14px; height:14px; border-radius:50%; border:1.5px solid var(--ink-soft);
}
.pin-dots span.on{ background:var(--ink); border-color:var(--ink); }
.pin-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pin-pad button{
  padding:16px 0; border-radius:9px; border:1px solid var(--line); background:var(--paper);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:17px; font-weight:700;
  cursor:pointer; color:var(--ink);
}
.pin-pad button:active{ background:var(--ink); color:var(--paper); }
.login-error{
  margin-top:10px; color:var(--crimson); text-align:center;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:11px; font-weight:700;
}
.login-volver{
  margin-top:12px; width:100%; background:transparent; border:none; color:var(--muted);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.08em; cursor:pointer;
}
.login-setup{ margin-top:14px; }
.login-setup .fld input{ text-align:center; }

.torn-bottom{ position:relative; padding-bottom:14px; }
.torn-bottom::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:12px;
  background:
    linear-gradient(135deg, var(--paper) 50%, transparent 50%) 0 0/12px 12px repeat-x,
    linear-gradient(-135deg, var(--paper) 50%, transparent 50%) 0 0/12px 12px repeat-x;
  background-position: 0 0, 6px 0;
}

/* ---- calendario de la semana ---- */
.cal-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:8px;
}
.cal-top .sim{ color:var(--amber); text-transform:none; letter-spacing:.04em; cursor:pointer; }
.week{ display:flex; gap:3px; margin-top:5px; }
.wd{
  flex:1; text-align:center; padding:4px 0 5px; border-radius:5px;
  border:1px solid var(--line); background:var(--cream-card); color:var(--ink-soft);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
}
.wd .l{ font-size:8.5px; letter-spacing:.06em; display:block; opacity:.8; }
.wd .n{ font-size:11.5px; font-weight:700; display:block; margin-top:1px; }
.wd.refill{ border-color:var(--blood); color:var(--blood); }
.wd.today{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.wd.refill.today{ background:var(--blood); border-color:var(--blood); color:var(--cream-card); }
.week-note{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9.5px; color:var(--ink-soft); margin-top:6px; line-height:1.35;
}
.week-note b{ color:var(--blood); }

/* ---- CAPTURA ---- */
.cap-header{ padding:0 16px 10px; border-bottom:2px solid var(--line); }
.cap-header .day{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:11px; color:var(--ink-soft); letter-spacing:.14em; text-transform:uppercase;
}
.cap-header h2{
  font-family:"Arial Black","Helvetica Neue",sans-serif;
  font-size:19px; letter-spacing:-.01em; margin-top:2px;
}
.cap-header .progress{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10.5px; color:var(--ink-soft); margin-top:8px;
  display:flex; justify-content:space-between; align-items:center;
}
.prog-track{ flex:1; height:4px; background:var(--line); border-radius:3px; margin-left:10px; overflow:hidden; }
.prog-fill{ height:100%; background:var(--sage); width:0%; transition:width .2s; }

/* aviso temporal de compras del receptor */
.aviso{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .3s ease, opacity .3s ease, margin .3s ease;
  background:var(--amber); color:var(--cream-card);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10px; line-height:1.35; text-align:center;
}
.aviso.show{ max-height:60px; opacity:1; padding:8px 14px; }

.cap-list{ flex:1; padding:10px 12px 4px; }

/* carpeta */
.cat{ margin-bottom:8px; }
.cat-head{
  width:100%; display:flex; align-items:center; gap:8px;
  background:var(--paper-dark); border:1px solid var(--line);
  border-radius:9px; padding:12px 12px; cursor:pointer; text-align:left;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
}
.cat.open .cat-head{ border-radius:9px 9px 0 0; border-bottom-style:dashed; }
.chev{ font-size:10px; color:var(--ink-soft); transition:transform .18s; display:inline-block; width:10px; }
.cat.open .chev{ transform:rotate(90deg); }
.cat-name{
  flex:1; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink);
}
.cat-count{
  font-size:10px; color:var(--ink-soft);
  background:var(--cream-card); border:1px solid var(--line);
  border-radius:20px; padding:2px 7px; display:flex; align-items:center; gap:4px;
}
.cat-count.done{ background:var(--sage); color:var(--cream-card); border-color:var(--sage); }
.cat-body{
  display:none; border:1px solid var(--line); border-top:none;
  border-radius:0 0 9px 9px; padding:6px; background:rgba(243,236,217,.45);
}
.cat.open .cat-body{ display:block; }
.cat.dark .cat-head{ background:var(--ink); border-color:var(--ink); }
.cat.dark .cat-name, .cat.dark .chev{ color:var(--paper); }
.cat.dark .cat-count{ background:transparent; border-color:rgba(232,220,196,.4); color:var(--paper); }

.prod-card{
  background:var(--cream-card); border:1px solid var(--line);
  border-radius:8px; padding:11px 12px; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:6px; transition:border-color .3s, box-shadow .3s;
}
.prod-card:last-child{ margin-bottom:0; }
.prod-card.filled{ border-color:var(--sage); box-shadow:inset 3px 0 0 var(--sage); }
.prod-card.flashing{ border-color:var(--amber); box-shadow:inset 3px 0 0 var(--amber); }
.prod-card.pendiente{ border-color:var(--crimson); box-shadow:inset 3px 0 0 var(--crimson); }
.prod-info{ min-width:0; }
.prod-info .name{ font-weight:700; font-size:14px; line-height:1.25; }
.prod-info .unit{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9.5px; color:var(--ink-soft); text-transform:uppercase;
  letter-spacing:.06em; margin-top:2px;
}
.prod-info .base{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; color:var(--muted); margin-top:2px;
}
.flash{
  width:100%; background:rgba(184,121,43,.16); color:var(--amber);
  border-radius:5px; padding:5px 7px; margin-top:1px;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9.5px; font-weight:700; letter-spacing:.03em; line-height:1.35;
}
/* bitácora por producto */
.extra{ width:100%; }
.mini-line{
  display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:4px;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; color:var(--muted);
}
.mini-line .lnk{
  color:var(--ink-soft); border-bottom:1px dotted var(--ink-soft);
  cursor:pointer; white-space:nowrap;
}
.dif-chip{
  display:inline-block; margin-top:5px; padding:3px 7px; border-radius:5px;
  background:rgba(184,121,43,.16); color:var(--amber);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; font-weight:700; line-height:1.35;
}
.dif-chip.ok{ background:rgba(85,104,74,.16); color:var(--sage); }
.dif-calc{
  width:100%; margin-top:4px; padding:5px 7px; border-radius:5px;
  background:rgba(36,29,24,.05); border:1px dotted var(--line);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; color:var(--ink-soft); line-height:1.45;
}
.dif-calc b{ color:var(--ink); }
.tanda-line{
  width:100%; text-align:right; margin-top:2px;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:9px;
}
.crudo-chip{
  width:100%; margin-top:5px; padding:5px 7px; border-radius:5px;
  background:rgba(122,46,42,.10); color:var(--blood);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; font-weight:700; line-height:1.4;
}
.crudo-line{
  display:flex; justify-content:space-between; gap:8px; margin-top:5px;
  padding-top:5px; border-top:1px dotted var(--line);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9.5px; color:var(--blood); font-weight:700;
}
.tanda-line .lnk{
  color:var(--sage); border-bottom:1px dotted var(--sage);
  cursor:pointer; letter-spacing:.04em; font-weight:700;
}
.log{ width:100%; margin-top:6px; border-top:1px dotted var(--line); padding-top:5px; }
.log-row{
  display:flex; justify-content:space-between; gap:8px; padding:2.5px 0;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; color:var(--ink-soft);
}
.log-row.conteo{ color:var(--ink); font-weight:700; }
.log-row .q.neg{ color:var(--blood); font-weight:700; }
.log-row .q.pos{ color:var(--sage); font-weight:700; }

.stepper{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.stepper button{
  width:32px; height:32px; border-radius:50%;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  font-size:17px; font-weight:700; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.stepper button:active{ background:var(--ink); color:var(--paper); }
.stepper button:disabled{ opacity:.25; cursor:default; }
.stepper input{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-weight:700; font-size:15px; width:62px; text-align:center;
  border:none; border-bottom:1.5px dashed var(--line);
  background:transparent; color:var(--ink); padding:5px 0;
}
.stepper input:focus{ outline:none; border-bottom-color:var(--blood); }
.stepper input::placeholder{ color:#b3a690; font-weight:400; }
.stepper input[readonly]{ border-bottom-style:solid; }

.save-btn{
  margin:8px 12px 14px; background:var(--blood); color:var(--cream-card);
  border:none; border-radius:10px; padding:15px; font-weight:800; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
}
.save-btn:active{ opacity:.85; }
.toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--paper); font-size:11.5px;
  padding:10px 16px; border-radius:20px; opacity:0; transition:.25s; pointer-events:none;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  text-align:center; z-index:90; max-width:88%; line-height:1.35;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.amber{ background:var(--amber); }
.toast.crit{ background:var(--crimson); }

/* ---- campos / botones chicos ---- */
.fld{ position:relative; margin-bottom:7px; }
.fld .pfx{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:14px; font-weight:700; color:var(--ink-soft);
}
.fld input, .fld textarea{
  width:100%; background:var(--cream-card); border:1px solid var(--line);
  border-radius:7px; padding:9px 11px; color:var(--ink);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:13px;
  resize:none;
}
.fld input.money{ padding-left:24px; font-size:16px; font-weight:700; }
.fld input:focus, .fld textarea:focus{ outline:none; border-color:var(--blood); }
.fld input::placeholder, .fld textarea::placeholder{ color:#b3a690; }
.mini-btn{
  width:100%; border:none; border-radius:8px; padding:12px;
  background:var(--blood); color:var(--cream-card); cursor:pointer;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.mini-btn.ghost{ background:transparent; border:1.5px solid var(--ink); color:var(--ink); }
.mini-btn.sage{ background:var(--sage); }
.mini-btn:active{ opacity:.85; }
.mini-btn:disabled{ opacity:.4; cursor:default; }
.mini-btn + .mini-btn{ margin-top:6px; }

/* ---- CAJA (receptor) ---- */
.caja-saldo{
  background:var(--ink); color:var(--paper); border-radius:8px;
  padding:10px 12px; text-align:center; margin-bottom:8px;
}
.caja-saldo .lbl{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; opacity:.65;
}
.caja-saldo .amt{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:23px; font-weight:700; margin-top:2px; letter-spacing:-.02em;
}
.seg{ display:flex; gap:6px; margin-bottom:7px; }
.seg button{
  flex:1; padding:8px 4px; border-radius:7px; border:1.5px solid var(--line);
  background:var(--cream-card); cursor:pointer; color:var(--ink-soft);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}
.seg button.on-in{ background:var(--sage); color:var(--cream-card); border-color:var(--sage); }
.seg button.on-out{ background:var(--blood); color:var(--cream-card); border-color:var(--blood); }
.chips{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.chip{
  border:1px solid var(--line); background:var(--cream-card); color:var(--ink-soft);
  border-radius:20px; padding:4px 9px; cursor:pointer;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
}
.chip.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.movs{ margin-top:10px; border-top:1px dashed var(--line); padding-top:8px; }
.movs .ttl{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:6px;
}
.mov{
  display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
  padding:6px 0; border-bottom:1px dotted var(--line);
}
.mov:last-child{ border-bottom:none; }
.mov .d{ min-width:0; }
.mov .d .t{ font-size:11.5px; font-weight:600; line-height:1.25; }
.mov .d .m{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; color:var(--muted); margin-top:2px;
}
.mov .a{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:12.5px; font-weight:700; white-space:nowrap;
}
.mov .a.in{ color:var(--sage); }
.mov .a.out{ color:var(--blood); }

/* ---- NOTAS ---- */
.urg-toggle{
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:700;
}
.urg-toggle.on{ color:var(--crimson); }
.switch{
  width:38px; height:21px; border-radius:20px; background:var(--line);
  border:none; position:relative; cursor:pointer; transition:background .18s; flex-shrink:0;
}
.switch::after{
  content:""; position:absolute; top:2.5px; left:2.5px; width:16px; height:16px;
  border-radius:50%; background:var(--cream-card); transition:transform .18s;
}
.switch.on{ background:var(--crimson); }
.switch.on::after{ transform:translateX(17px); }
.nota-item{
  background:var(--cream-card); border:1px solid var(--line); border-left-width:3px;
  border-radius:7px; padding:8px 10px; margin-bottom:6px;
  display:flex; justify-content:space-between; gap:8px; align-items:flex-start;
}
.nota-item.urg{ border-left-color:var(--crimson); }
.nota-item.norm{ border-left-color:var(--sage); }
.nota-item .tx{ font-size:12px; line-height:1.35; }
.nota-item .mt{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; color:var(--muted); margin-top:3px;
}
.nota-item .del{
  border:none; background:transparent; color:var(--muted);
  font-size:14px; cursor:pointer; line-height:1; padding:2px 0 0;
}
.empty-txt{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10px; color:var(--muted); text-align:center; padding:8px 0;
}

/* ---- PANEL ---- */
.panel-header{ padding:0 16px 10px; }
.panel-header .eyebrow{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10.5px; color:var(--ink-soft); letter-spacing:.14em; text-transform:uppercase;
}
.panel-header h2{ font-family:"Arial Black","Helvetica Neue",sans-serif; font-size:19px; margin-top:2px; }

.tickets{ padding:0 12px; }
.alert-ticket{
  background:var(--crimson); color:var(--cream-card);
  border-radius:8px 8px 0 0; padding:10px 12px 16px; position:relative;
  margin-bottom:10px;
}
.alert-ticket.ok-state{ background:var(--sage); }
.alert-ticket.warn-state{ background:var(--amber); }
.alert-ticket .tag{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.9;
  display:flex; align-items:center; gap:6px;
}
.alert-ticket.open .tag .chev{ transform:rotate(90deg); }
.alert-ticket p{ font-size:12.5px; font-weight:700; margin-top:4px; line-height:1.4; }
.alert-ticket .sub{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10px; font-weight:400; opacity:.85; margin-top:5px; line-height:1.35;
}
.alert-head{ cursor:pointer; }
.alert-body{
  display:none; margin-top:9px; border-top:1px dashed rgba(243,236,217,.45);
  padding-top:6px; max-height:none; overflow-y:auto;
}
.alert-ticket.open .alert-body{ display:block; }
.al-row{
  display:flex; gap:9px; align-items:center;
  padding:6px 0; border-bottom:1px dotted rgba(243,236,217,.3);
}
.al-row:last-child{ border-bottom:none; }
.al-row .n{ flex:1; min-width:0; font-size:11.5px; font-weight:700; }
.al-row .n small{
  display:block; font-weight:400; opacity:.8; font-size:9.5px;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; margin-top:1px;
}
.al-row .q{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:11.5px; font-weight:700; white-space:nowrap;
}
.box{
  width:26px; height:26px; border-radius:4px; flex-shrink:0; cursor:pointer;
  border:1.5px solid rgba(243,236,217,.75); background:transparent;
  color:var(--crimson); font-size:12px; font-weight:900; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.box:hover{ background:rgba(243,236,217,.2); }
.al-div{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  opacity:.75; margin:9px 0 3px;
}
.note-line{ padding:5px 0; border-bottom:1px dotted rgba(243,236,217,.3); }
.note-line:last-child{ border-bottom:none; }
.note-line .tx{ font-size:11.5px; font-weight:700; line-height:1.35; }
.note-line .mt{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; opacity:.75; margin-top:2px;
}

.stock-list{ flex:1; padding:0 12px 10px; }
.stock-card{
  background:var(--cream-card); border:1px solid var(--line);
  border-radius:8px; padding:9px 11px; margin-bottom:6px;
}
.stock-card:last-child{ margin-bottom:0; }
.stock-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.stock-top .name{ font-weight:700; font-size:13px; }
.stock-top .qty{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:12px; font-weight:700; white-space:nowrap;
}
.stock-top .qty small{ font-size:8.5px; font-weight:400; opacity:.55; letter-spacing:.04em; }
.bar-track{ height:5px; background:var(--line); border-radius:4px; margin-top:6px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:4px; transition:width .25s, background .25s; }
.stock-bottom{
  display:flex; justify-content:space-between; gap:8px; margin-top:5px;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9.5px; color:var(--ink-soft);
}
.need{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9.5px; margin-top:5px; padding-top:5px;
  border-top:1px dotted var(--line); color:var(--blood); font-weight:700;
}
.need.soft{ color:var(--amber); }
.need.calibra{ color:var(--slate); border-top-color:var(--slate); font-weight:600; }
.need .ok-btn{
  border:1.5px solid currentColor; background:transparent; color:inherit;
  border-radius:5px; padding:5px 9px; cursor:pointer; white-space:nowrap;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  min-height:26px;
}
.need .ok-btn:active{ background:currentColor; }
.status-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; flex-shrink:0; }
.dots{ display:flex; gap:3px; align-items:center; }

.panel-footer{
  padding:9px 14px 14px; border-top:2px solid var(--line);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10px; color:var(--ink-soft); text-align:center; line-height:1.5;
}

/* ---- MODAL de compra / tanda ---- */
.modal-bg{
  position:fixed; inset:0; background:rgba(23,19,16,.72);
  display:none; align-items:center; justify-content:center; padding:18px;
  z-index:80;
}
.modal-bg.show{ display:flex; }
.modal{
  background:var(--paper); border-radius:12px; width:100%; max-width:380px;
  padding:16px 16px 18px; position:relative;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.modal .m-tag{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--blood);
}
.modal .m-title{ font-family:"Arial Black","Helvetica Neue",sans-serif; font-size:17px; margin-top:3px; }
.modal .m-sub{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10px; color:var(--ink-soft); margin-top:3px; line-height:1.4;
  border-bottom:1px dashed var(--line); padding-bottom:9px; margin-bottom:10px;
}
.modal .m-q{ font-size:13px; font-weight:700; margin-bottom:9px; }
.m-cancel{
  width:100%; background:transparent; border:none; cursor:pointer; margin-top:9px;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding:8px 0;
}
.fr-chips{ display:flex; gap:5px; margin-bottom:7px; }
.fr-chips button{
  flex:1; border:1px solid var(--line); background:var(--cream-card); color:var(--ink);
  border-radius:6px; padding:9px 0; cursor:pointer;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:12px; font-weight:700;
}
.fr-chips button.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---- AJUSTES ---- */
.panel-title-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gear{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  font-size:17px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.gear:active{ background:var(--ink); color:var(--paper); }
.ajustes-panel{
  position:fixed; inset:0; background:var(--paper);
  z-index:75; display:none; flex-direction:column; overflow:hidden;
}
.ajustes-panel.show{ display:flex; }
.aj-head{
  display:flex; align-items:center; gap:8px; padding:12px 12px 10px;
  border-bottom:2px solid var(--line); flex-shrink:0;
}
.aj-title{
  flex:1; text-align:center; font-family:"Arial Black","Helvetica Neue",sans-serif;
  font-size:15px; letter-spacing:-.01em;
}
.aj-nav{
  width:32px; height:32px; border-radius:7px; flex-shrink:0;
  border:1.5px solid var(--line); background:var(--cream-card); color:var(--ink);
  font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.aj-nav:active{ background:var(--ink); color:var(--paper); }
.aj-body{ flex:1; overflow-y:auto; padding:10px 12px 18px; }

.aj-item{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--cream-card); border:1px solid var(--line); border-radius:9px;
  padding:12px; margin-bottom:6px; cursor:pointer;
}
.aj-ico{
  width:26px; height:26px; border-radius:7px; flex-shrink:0;
  background:var(--ink); color:var(--paper); font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.aj-txt{ flex:1; min-width:0; }
.aj-txt b{ display:block; font-size:12.5px; line-height:1.25; }
.aj-txt small{
  display:block; margin-top:2px; color:var(--muted); line-height:1.35;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:9px;
}
.aj-chev{ color:var(--muted); font-size:14px; }
.aj-badge{
  background:var(--crimson); color:var(--cream-card); border-radius:20px;
  padding:2px 8px; font-size:10px; font-weight:700;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
}
.aj-h{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  margin:12px 0 5px; padding-bottom:3px; border-bottom:1px dashed var(--line);
}
.aj-row, .aj-row2{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:7px;
  background:var(--cream-card); border:1px solid var(--line); border-radius:7px;
  padding:10px; margin-bottom:4px; text-align:left; cursor:default;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:10.5px;
}
.aj-row{ cursor:pointer; }
.aj-row .rn, .aj-row2 .rn{ flex:1; min-width:0; color:var(--ink); font-weight:700; }
.aj-row .rq, .aj-row2 .rq{ color:var(--ink-soft); text-align:right; white-space:nowrap; }
.aj-row2 .pc{ color:var(--ink-soft); font-size:10px; }
.aj-row2 .est{
  width:74px; text-align:center; border-radius:5px; padding:3px 4px;
  font-size:8.5px; letter-spacing:.04em; font-weight:700; flex-shrink:0;
  background:rgba(36,29,24,.07); color:var(--ink-soft);
}
.aj-row2 .est.manual{ background:rgba(122,46,42,.14); color:var(--blood); }
.aj-row2 .est.medido, .aj-row2 .est.fijo{ background:rgba(85,104,74,.16); color:var(--sage); }
.aj-row2 .est.midiendo{ background:rgba(184,121,43,.16); color:#8a5a18; }
.aj-cols{
  display:flex; align-items:center; gap:7px; padding:0 10px 4px;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.aj-cols .c1{ flex:1; }
.aj-cols .c2{ width:78px; text-align:center; }
.aj-cols .c3{ width:56px; text-align:right; }
.aj-suma{
  text-align:right; padding:6px 10px; border-radius:6px; margin-top:2px;
  background:rgba(166,58,46,.12); color:var(--crimson);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9.5px; font-weight:700;
}
.aj-suma.ok{ background:rgba(85,104,74,.14); color:var(--sage); }
.aj-card{
  background:var(--cream-card); border:1px solid var(--line); border-radius:9px;
  padding:10px; margin-bottom:7px;
}
.aj-sub{ font-weight:700; font-size:12px; margin-bottom:7px; }
.aj-fld{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:5px 0; border-bottom:1px dotted var(--line);
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10px; color:var(--ink-soft);
}
.aj-fld:last-of-type{ border-bottom:none; }
.aj-in{
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
  padding:7px 9px; color:var(--ink); text-align:right;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:13px;
}
select.aj-in{ text-align:left; }
.aj-in:focus{ outline:none; border-color:var(--blood); }
.aj-in.falta{ border-color:var(--blood); background:rgba(122,46,42,.10); }
.aj-req{ color:var(--crimson); }
.aj-check{
  display:flex; align-items:center; gap:7px; margin:8px 0 2px;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:10px; color:var(--ink); cursor:pointer;
}
.aj-nota{
  background:rgba(184,121,43,.14); color:#8a5a18; border-radius:6px;
  padding:7px 9px; margin:8px 0; line-height:1.45;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:9px;
}
.aj-add{
  width:100%; border:1.5px dashed var(--line); background:transparent; color:var(--ink);
  border-radius:9px; padding:12px; cursor:pointer; margin-bottom:4px;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:11px; font-weight:700; letter-spacing:.06em;
}
.aj-venta{ font-size:12px; font-weight:700; line-height:1.3; }
.aj-veces{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; color:var(--crimson); margin:3px 0 8px; font-weight:700;
}
.aj-vacio{
  text-align:center; color:var(--sage); padding:24px 0; font-weight:700;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:11px;
}
.aj-pie{
  margin-top:14px; color:var(--muted); line-height:1.5; text-align:center;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:9px;
}

/* ---- ficha del recetario ---- */
.rec-h{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); margin:10px 0 5px; padding-bottom:3px;
  border-bottom:1px dashed var(--line);
}
.rec-h:first-child{ margin-top:0; }
.rec-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  padding:3.5px 0;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:10px;
}
.rec-row .rn{ color:var(--ink); font-weight:700; white-space:nowrap; }
.rec-row .rq{ color:var(--ink-soft); text-align:right; }
.rec-sub{
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size:9px; color:var(--muted); line-height:1.45;
  padding:0 0 5px 0; border-bottom:1px dotted var(--line);
}
.rec-sub:last-child{ border-bottom:none; }
.tipo-chip{
  display:inline-block; border-radius:4px; padding:1px 5px; margin-left:5px;
  font-size:8.5px; letter-spacing:.04em; font-weight:700; color:var(--cream-card);
}
.tipo-chip.g{ background:var(--sage); }
.tipo-chip.c{ background:var(--blood); }
.rec-note{
  background:rgba(184,121,43,.15); color:var(--amber); border-radius:6px;
  padding:7px 9px; margin-top:9px; line-height:1.45;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace; font-size:9px;
}

/* ============================================================
   ESCRITORIO — Captura y Panel lado a lado, misma estetica de ticket
   ============================================================ */
@media (min-width: 900px){
  body{ padding:0; }
  .rolebar{ display:none; }
  .app-shell{
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
    max-width:1180px; margin:0 auto; padding:20px; align-items:start;
  }
  .frame-wrap{
    background:var(--paper); border:1px solid var(--line); border-radius:14px;
    overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.12);
  }
  body.rol-pan #wrapCap, body:not(.rol-pan) #wrapPan{ display:block; }
  .screen{ min-height:auto; padding-top:0; }
  .cap-list, .stock-list{ max-height:calc(100vh - 260px); overflow-y:auto; }
  .ajustes-panel, .modal-bg{ position:fixed; }
}

@media (max-width: 380px){
  .aj-in{ font-size:12px; }
  .rolebar button{ font-size:10px; }
}