/* Almacén — sistema de diseño. Base: ~/dev/tienda (referencia Attio, aprobada).
   Claro, aire generoso, bordes finos, pastillas suaves de estado. Cero emojis.
   Ajuste propio: se usa de pie, con el celular en una mano y un paquete en la
   otra — los botones de acción son grandes y el número de unidades manda. */
:root{
  --ink:#17171A; --ink-2:#4B4B52; --ink-3:#84848D;
  --bg:#FAFAF9; --panel:#F4F4F2; --surface:#FFFFFF;
  --line:#E9E9E6; --line-2:#DBDBD6;
  --brand:#2F6BFF; --brand-soft:#EBF1FF;
  --ok:#177A48; --ok-soft:#E4F5EB;
  --warn:#9A6700; --warn-soft:#FFF3D6;
  --bad:#C4362C; --bad-soft:#FDE9E7;
  --info:#1D5FBF; --info-soft:#E7F0FD;
  --r:10px; --r-lg:14px;
  --sh:0 1px 2px rgba(23,23,26,.05);
  --sh-2:0 2px 4px rgba(23,23,26,.05), 0 12px 32px -16px rgba(23,23,26,.18);
  --f:'Inter',system-ui,-apple-system,sans-serif;
  --ft:'Manrope','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--ft);font-weight:700;letter-spacing:-.015em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:var(--f)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}

/* ── esqueleto ── */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100dvh}
.side{background:var(--panel);border-right:1px solid var(--line);padding:.9rem .7rem;
  display:flex;flex-direction:column;gap:.15rem;position:sticky;top:0;height:100dvh}
.side__marca{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;margin-bottom:.7rem}
.side__logo{width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:.85rem;flex:none}
.side__marca b{font-weight:600;font-size:.92rem;line-height:1.2;display:block}
.side__marca span{font-size:.72rem;color:var(--ink-3)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:.65rem;padding:.6rem;border-radius:8px;
  color:var(--ink-2);font-weight:500;font-size:.94rem;min-height:44px}
.nav a:hover{background:rgba(23,23,26,.05)}
.nav a.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh);
  border:1px solid var(--line)}
.nav a .icon{color:var(--ink-3)}
.nav a.on .icon{color:var(--ink)}
.nav a .pill{margin-left:auto}
.side__foot{margin-top:auto;padding:.6rem;display:grid;gap:.5rem}
.side__salir{display:flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:44px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);
  font-size:.88rem;font-weight:500;color:var(--ink-2);cursor:pointer;width:100%}
.side__salir:hover{background:var(--bad-soft);border-color:var(--bad-soft);color:var(--bad)}
.side__quien{font-size:.72rem;color:var(--ink-3);text-align:center}

.main{min-width:0;padding:1.4rem clamp(1rem,3.5vw,2.4rem) 4rem}
.top{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1.2rem}
.top h1{font-size:1.5rem}
.top .sub{width:100%;color:var(--ink-3);font-size:.88rem}
.top .gap{flex:1}
.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:44px;padding:.5rem 1.05rem;border-radius:10px;border:1px solid transparent;
  font-weight:500;font-size:.92rem;cursor:pointer;transition:background .15s,border-color .15s}
.btn--pri{background:var(--ink);color:#fff}
.btn--pri:hover{background:#000}
.btn--ok{background:var(--ok);color:#fff}
.btn--ok:hover{background:#0F6238}
.btn--line{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn--line:hover{background:var(--panel)}
.btn--soft{background:var(--panel);color:var(--ink-2)}
.btn--soft:hover{background:var(--line)}
.btn--sm{min-height:36px;padding:.25rem .7rem;font-size:.85rem;border-radius:8px}
.btn[disabled]{opacity:.55;cursor:default}
.btn--ancho{width:100%}

/* ── pastillas ── */
.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .62rem;
  border-radius:999px;font-size:.78rem;font-weight:500;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill--ok{background:var(--ok-soft);color:var(--ok)}
.pill--warn{background:var(--warn-soft);color:var(--warn)}
.pill--bad{background:var(--bad-soft);color:var(--bad)}
.pill--info{background:var(--info-soft);color:var(--info)}
.pill--mute{background:var(--panel);color:var(--ink-3)}

/* ── tarjetas ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh)}
.card__head{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;
  border-bottom:1px solid var(--line)}
.card__head h2{font-size:.98rem}
.card__head .gap{flex:1}
.card__body{padding:1.1rem}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;
  margin-bottom:1.2rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:.9rem 1.05rem;box-shadow:var(--sh)}
.kpi small{display:block;color:var(--ink-3);font-size:.78rem;font-weight:500;margin-bottom:.25rem}
.kpi b{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ── bloques de la cola ── */
.bloque{margin-bottom:1.8rem}
.bloque__titulo{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.bloque__titulo h2{font-size:1.05rem}
.bloque__titulo .cuenta{color:var(--ink-3);font-size:.9rem;font-variant-numeric:tabular-nums}
.bloque__nota{color:var(--ink-3);font-size:.82rem;margin-bottom:.7rem}

.pedidos{display:grid;gap:.8rem}
.ped{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:1rem 1.1rem}
.ped--listo{border-color:#CFE6DA;background:#FCFEFD}
.ped--devuelto{border-color:#F4CFCB;background:#FFFDFC}
.ped__top{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.55rem}
.ped__cliente{font-weight:600;font-size:1.02rem;line-height:1.3}
.ped__donde{color:var(--ink-2);font-size:.86rem;margin-top:.1rem}
.ped__gap{flex:1}
.ped__items{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 .75rem}
.item{display:inline-flex;align-items:center;gap:.4rem;background:var(--panel);
  border-radius:8px;padding:.3rem .6rem;font-size:.88rem}
.item b{font-variant-numeric:tabular-nums;font-weight:700}
.ped__acciones{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
.ped__acciones form{display:contents}
.ped__alerta{display:flex;gap:.5rem;align-items:flex-start;background:var(--warn-soft);
  color:#6B4700;border-radius:9px;padding:.5rem .7rem;font-size:.84rem;margin-bottom:.7rem}
.ped__alerta .icon{width:16px;height:16px;margin-top:.15rem;color:var(--warn)}
.guia{display:flex;gap:.5rem;align-items:center;flex:1;min-width:180px}
.guia input{flex:1;min-width:120px;border:1px solid var(--line-2);border-radius:10px;
  min-height:44px;padding:.4rem .7rem;font-family:var(--f);font-size:.95rem;
  font-variant-numeric:tabular-nums;background:var(--surface);color:var(--ink)}

/* ── tablas ── */
.twrap{overflow-x:auto;border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-weight:500;color:var(--ink-3);font-size:.78rem;
  padding:.6rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:.65rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
.t-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-num b{font-size:1.02rem}
.inactivo td{color:var(--ink-3)}

/* ── formularios ── */
.fila{display:grid;gap:.8rem;grid-template-columns:1fr 1fr;margin-bottom:.8rem}
.fila--1{grid-template-columns:1fr}
.campo label{display:block;font-size:.8rem;font-weight:500;color:var(--ink-2);margin-bottom:.3rem}
.campo input,.campo select,.campo textarea{width:100%;border:1px solid var(--line-2);
  border-radius:10px;min-height:44px;padding:.5rem .7rem;font-family:var(--f);
  font-size:.95rem;color:var(--ink);background:var(--surface)}
.campo textarea{min-height:70px;resize:vertical}
.campo .ayuda{font-size:.78rem;color:var(--ink-3);margin-top:.25rem}
.acciones{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem;flex-wrap:wrap}

/* conteo */
.cuenta-fila{display:flex;align-items:center;gap:.8rem;padding:.7rem 0;
  border-bottom:1px solid var(--line)}
.cuenta-fila:last-child{border-bottom:0}
.cuenta-fila .nom{flex:1;min-width:0}
.cuenta-fila .nom b{display:block;font-weight:600;font-size:.95rem}
.cuenta-fila .nom span{font-size:.78rem;color:var(--ink-3)}
.cuenta-fila input{width:92px;border:1px solid var(--line-2);border-radius:10px;
  min-height:48px;padding:.4rem .6rem;font-size:1.1rem;text-align:center;
  font-variant-numeric:tabular-nums;font-family:var(--f);background:var(--surface)}
.dif{min-width:56px;text-align:right;font-size:.86rem;font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--ink-3)}
.dif.pos{color:var(--ok)} .dif.neg{color:var(--bad)}

/* avisos */
.aviso-item{padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}
.aviso-item:last-child{border-bottom:0}
.aviso-item p{font-size:.92rem}
.aviso-item .meta{font-size:.78rem;color:var(--ink-3);margin-top:.25rem}
.aviso-item form{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.aviso-item form input{flex:1;min-width:180px;border:1px solid var(--line-2);
  border-radius:10px;min-height:40px;padding:.4rem .7rem;font-family:var(--f);font-size:.9rem}

/* vacío y mensajes */
.vacio{padding:2.4rem 1rem;text-align:center;color:var(--ink-3);font-size:.92rem}
.vacio b{display:block;color:var(--ink-2);font-weight:600;margin-bottom:.25rem;font-size:1rem}
.flash{display:flex;align-items:center;gap:.55rem;border-radius:11px;padding:.7rem .95rem;
  margin-bottom:1rem;font-size:.92rem;border:1px solid transparent}
.flash--ok{background:var(--ok-soft);color:#0F5B36;border-color:#CFE6DA}
.flash--error{background:var(--bad-soft);color:#8E2A22;border-color:#F4CFCB}
.flash--warn{background:var(--warn-soft);color:#6B4700;border-color:#EBD9A8}
.flash--info{background:var(--info-soft);color:#14448C;border-color:#CFE0F7}
.flash--bloque{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.flash--bloque span{flex:1;min-width:190px}
.flash--bloque .btn{background:var(--surface)}

/* login */
.entrar{min-height:100dvh;display:grid;place-items:center;padding:1.2rem}
.entrar__caja{width:100%;max-width:360px}
.entrar__marca{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem}

/* ── móvil ── */
.velo{display:none;position:fixed;inset:0;background:rgba(23,23,26,.3);z-index:55}
.menu-btn{display:none;align-items:center;justify-content:center;min-height:44px;
  min-width:44px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);
  color:var(--ink);cursor:pointer}
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:min(78vw,280px);z-index:60;
    transform:translateX(-102%);transition:transform .28s cubic-bezier(.16,1,.3,1);
    box-shadow:var(--sh-2)}
  .side.abierta{transform:none}
  .velo.ver{display:block}
  .menu-btn{display:inline-flex}
  .main{padding-top:.9rem}
  .fila{grid-template-columns:1fr}
  .top h1{font-size:1.3rem}
  /* En el celular la cola es el trabajo: los indicadores se compactan a una
     sola fila para no empujar el primer pedido fuera de la pantalla. */
  .kpis{grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem}
  .kpi{padding:.6rem .5rem;text-align:center}
  .kpi small{font-size:.7rem;line-height:1.25;margin-bottom:.15rem}
  .kpi b{font-size:1.35rem}
  th,td{padding-left:.6rem;padding-right:.6rem}
  .ped__acciones .btn{flex:1;min-width:140px}
}