/* Reparto — La Plaza. Sistema visual v103: plano, sobrio, Montserrat.
   Jerarquía en dos niveles (bloques con nombre + pestañas píldora), tablas con aire,
   un solo acento (rojo de marca) para la acción principal; rojo oscuro solo en alertas. */
:root{
  --rojo:#e52642; --rojo-h:#c81f38;
  --tinta:#1f2328; --gris:#5f6b7a; --gris2:#8a95a3;
  --linea:#e4e6ea; --campo:#f4f5f7; --head:#f7f8fa; --fondo:#f7f7f8;
  --verde:#2b8a5c; --verdeBg:#eaf5ef; --rojoTxt:#b42318;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{font-family:'Montserrat',system-ui,sans-serif; color:var(--tinta); background:#fff; font-size:15px; line-height:1.45}

.hd{position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
    padding:10px 18px; background:#fff; border-bottom:1px solid var(--linea)}
.hd-t{font-size:17px; font-weight:600}
.hd-l{display:flex; align-items:center; gap:12px}
.hd-app{display:none; align-items:center; gap:7px; font-size:15px; font-weight:600; padding-left:12px; border-left:1px solid var(--linea)}
.hd-app svg{width:19px; height:19px; fill:var(--rojo)}
.hd-r{display:flex; align-items:center; gap:10px}
.hd-user{font-size:12.5px; font-weight:600; color:var(--tinta)}
.hd-est{font-size:12px; color:var(--gris2); white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.hd-r .btn-min svg{width:14px; height:14px; fill:currentColor; vertical-align:-2px; margin-right:5px}
/* menú de aplicaciones */
.saludo{text-align:center; margin-top:44px}
.saludo .s1{font-size:20px; font-weight:700}
.saludo .s2{font-size:13px; color:var(--gris); margin-top:4px}
.apps{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,280px)); justify-content:center; gap:16px; max-width:900px; margin:30px auto 0}
.app{background:#fff; border:1px solid var(--linea); border-radius:14px; padding:26px 22px 22px; display:flex; flex-direction:column; gap:10px; min-height:150px; cursor:pointer}
.app:hover{border-color:var(--gris2)}
.app svg{width:34px; height:34px; fill:var(--rojo)}
.app .an{font-size:16px; font-weight:700}
.app .ad{font-size:12.5px; color:var(--gris); line-height:1.5}
/* aplicaciones por usuario (Configuración) */
.appchk{display:flex; flex-wrap:wrap; gap:6px 14px; margin:6px 0 4px}
.appchk label{display:inline-flex; align-items:center; gap:6px; font-size:13px; border:1px solid var(--linea); border-radius:9px; padding:6px 10px; background:#fff}
.appchk input{accent-color:var(--rojo)}
.pend{font-size:12px; font-weight:600; color:#fff; background:var(--rojo); border-radius:12px; padding:3px 10px}
.net{width:9px; height:9px; border-radius:50%; background:var(--verde); display:inline-block}
.net.off{background:var(--gris2)}

main{padding:18px 16px; max-width:640px; margin:0 auto}
.load{color:var(--gris2); padding:34px 0; text-align:center}
.vacio{color:var(--gris2); text-align:center; padding:42px 12px; font-size:14px}

.btn{display:block; width:100%; border:none; border-radius:10px; padding:14px 20px;
     font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; margin-top:10px}
.btn-p{background:var(--rojo); color:#fff}
.btn-p:active{background:var(--rojo-h)}
.btn-s{background:#fff; color:var(--tinta); border:1px solid var(--linea)}
.btn-s:active{background:var(--campo)}
.btn-min{display:inline-block; width:auto; padding:9px 18px; font-size:13px; margin:0}
.btn[disabled]{opacity:.45}

.tit{font-size:17px; font-weight:700; margin:4px 0 12px}
.sub{font-size:12.5px; color:var(--gris2); margin-bottom:14px}

.card{border:1px solid var(--linea); border-radius:10px; padding:15px 16px; margin-bottom:10px; background:#fff}
.card:active{background:var(--head)}
.card .l1{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 8px}
.card .n{font-weight:700; font-size:15px}
.card .meta{font-size:13px; color:var(--gris); margin-top:5px; line-height:1.55}
.est{font-size:12.5px; color:var(--tinta); white-space:nowrap}
.est .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--gris2); margin-right:6px; vertical-align:1px}
.est.ok .dot{background:var(--verde)}
.est.rep .dot{background:#e5a226}
.est.dev .dot{background:#b06ae0}
.est.car .dot{background:#3b7dd8}

.prog{font-size:12.5px; font-weight:600; margin-top:6px}
.prog.done{color:var(--verde)}

.campo-l{font-size:12px; font-weight:600; color:var(--gris2); margin:16px 0 4px}
.campo-v{font-size:15px}
input[type=text],input[type=password]{width:100%; border:1px solid var(--linea); background:var(--campo);
  border-radius:10px; padding:12px 16px; font-family:inherit; font-size:15px; outline:none}
input[type=text]:focus,input[type=password]:focus{border-color:var(--gris2); background:#fff}

.radio-g{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.radio-g label{display:flex; align-items:center; gap:10px; border:1px solid var(--linea); border-radius:10px; padding:12px 14px; font-size:14.5px; background:#fff}
.radio-g input{accent-color:var(--rojo); width:18px; height:18px}

.monto{border:2px solid var(--tinta); border-radius:10px; text-align:center; padding:12px; margin:12px 0; background:#fff}
.monto .k{font-size:11px; font-weight:700; letter-spacing:.5px}
.monto .v{font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; overflow-wrap:normal}
@media (max-width:420px){.monto .v{font-size:20px}}
.monto.ok{border-color:var(--verde)}

canvas.firma{width:100%; height:200px; border:1px dashed var(--gris2); border-radius:10px; touch-action:none; background:#fff}
.foto-prev{max-width:100%; border-radius:10px; border:1px solid var(--linea); margin-top:8px}

.paso{display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:10px; color:var(--gris2)}
.paso b{color:var(--tinta)}

.volver{background:#fff; border:1px solid var(--linea); border-radius:10px; color:var(--tinta); font-family:inherit; font-size:15px; font-weight:600; padding:10px 16px; margin-bottom:12px; cursor:pointer; display:block; width:100%; text-align:left;
  position:sticky; top:64px; z-index:4; box-shadow:0 -14px 0 0 #fff, 0 6px 8px -6px rgba(0,0,0,.12)}
.volver:active{background:var(--campo)}
/* icono Atrás (arrow-u-down-left), único en toda la plataforma */
.volver::before{content:""; display:inline-block; width:16px; height:16px; margin-right:8px; vertical-align:-3px; flex:0 0 16px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231f2328'><path d='M232,112a64.07,64.07,0,0,1-64,64H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48a8,8,0,0,1,11.32,11.32L51.31,160H168a48,48,0,0,0,0-96H80a8,8,0,0,1,0-16h88A64.07,64.07,0,0,1,232,112Z'/></svg>") no-repeat center/contain}
.quitax{color:var(--rojoTxt); font-weight:700}

.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:24px; background:var(--tinta); color:#fff;
  padding:11px 20px; border-radius:24px; font-size:14px; z-index:50; max-width:90%; text-align:center}
.toast.err{background:var(--rojoTxt)}

/* escáner */
.scan-ov{position:fixed; inset:0; background:#111; z-index:20; display:flex; flex-direction:column}
.scan-top{display:flex; justify-content:space-between; align-items:center; padding:14px 16px}
.scan-tit{color:#fff; font-weight:600; font-size:15px}
.scan-ov .btn-s{width:auto; margin:0; padding:8px 16px; font-size:13px}
.scan-vwrap{position:relative; flex:0 0 auto}
#scanVideo{width:100%; display:block; max-height:55vh; object-fit:cover}
.scan-guia{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(60vw,260px); height:min(60vw,260px);
  border:2px dashed rgba(255,255,255,.75); border-radius:10px; pointer-events:none}
#scanFlash{position:absolute; inset:0; pointer-events:none; opacity:0}
#scanFlash.f-ok{animation:scanfl .4s ease-out; background:#2b8a5c}
#scanFlash.f-warn{animation:scanfl .4s ease-out; background:#c98a1e}
#scanFlash.f-err{animation:scanfl .4s ease-out; background:#c0392b}
@keyframes scanfl{0%{opacity:.55}100%{opacity:0}}
.scan-msg{color:#fff; text-align:center; font-size:17px; font-weight:600; padding:12px 16px; min-height:48px}
.scan-msg.err{color:#ff8a8a}
.scan-msg.ok{color:#7fd6a8}
.scan-msg.warn{color:#ffd27f}
.scan-teclado{margin:0 16px 10px; padding:10px 12px; border-radius:8px; border:1px solid #4a5058; background:#1e2227; color:#fff; font-size:15px}
.scan-prog{color:#cfd6dd; font-size:13px; padding:0 16px 16px; line-height:1.7; overflow:auto}

/* gerencia / vistas de escritorio: fondo gris suave, contenido con aire */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px}
.chip-f{border:1px solid var(--linea); border-radius:18px; padding:7px 14px; font-size:13px; cursor:pointer; background:#fff; color:var(--gris)}
.chip-f b{font-weight:700; color:var(--tinta)}
.chip-f.on{background:var(--campo); color:var(--tinta); border-color:var(--tinta); font-weight:600}
.evento{border-left:2px solid var(--linea); padding:8px 0 8px 12px; margin-left:4px; font-size:13px; color:var(--gris)}
.evento b{color:var(--tinta)}
.evid{display:block; max-width:260px; border:1px solid var(--linea); border-radius:6px; margin-top:8px}
.firma-img{max-width:200px; background:#fff}

body.gerencia{background:var(--fondo)}
/* .btn nació para el celular (chofer y armador): ancho completo para el dedo. En las vistas de
   escritorio el mismo botón salía gigante de punta a punta; acá vuelve al tamaño normal. */
body.gerencia .btn{display:inline-block; width:auto; padding:9px 18px; font-size:13px; margin-top:0}
body.gerencia .vacio .btn{margin-top:4px}
body.gerencia main{max-width:1180px; padding:22px 26px}
.kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:10px; margin:4px 0 18px}
.kpi{border:1px solid var(--linea); border-radius:10px; padding:12px 14px; cursor:pointer; background:#fff}
.kpi:hover{border-color:var(--gris2)}
.kpi.cero{background:transparent}
.kpi.cero .kn,.kpi.cero .kl{color:var(--gris2); opacity:.55}
.kpi .kn{font-size:23px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums}
.kpi .kl{font-size:12px; font-weight:500; color:var(--gris2); margin-top:3px}
.kpi .km{font-size:11.5px; color:var(--gris2); margin-top:2px}
.kpi.on{border-color:var(--tinta); box-shadow:inset 0 0 0 1px var(--tinta)}
.kpi.plata{cursor:default}
.kpi.plata .kn{font-size:18px}
.buscar{max-width:340px; margin-bottom:12px; background:#fff}

table.gt{width:100%; border-collapse:collapse; font-size:14px; background:#fff}
table.gt th{text-align:left; font-size:12px; font-weight:600;
  color:var(--gris2); padding:11px 12px; background:var(--head); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); white-space:nowrap}
table.gt td{padding:13px 12px; border-bottom:1px solid var(--linea); vertical-align:top}
table.gt tbody tr{cursor:pointer}
table.gt tbody tr:hover{background:var(--head)}
table.gt .n{font-weight:700; white-space:nowrap}
table.gt .num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.gt-wrap{overflow-x:auto; border:1px solid var(--linea); border-radius:10px; background:#fff}
.gt-wrap table.gt th{border-top:none}
.sec{font-size:13.5px; font-weight:600; color:var(--gris); margin:24px 0 10px}

/* cabecera de secciones: bloques con nombre + pestañas píldora */
.gtop{display:flex; align-items:center; gap:14px; margin:2px 0 14px}
.glogo{height:34px}
.gtit{font-size:18px; font-weight:700; flex:1}
.bloques{display:flex; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.bloque{flex:1; min-width:280px; background:#fff; border:1px solid var(--linea); border-radius:12px; padding:12px 16px}
.bloque .btit{font-size:12.5px; font-weight:600; color:var(--gris); margin-bottom:9px}
.gtabs{display:flex; gap:8px; border-bottom:none; margin-bottom:16px; flex-wrap:wrap}
.bloque .gtabs{margin-bottom:0}
.gtab{padding:8px 16px; font-size:14px; color:var(--gris); cursor:pointer; border:1px solid transparent; border-radius:9px; margin-bottom:0}
.gtab:not(.on){border:0.5px solid var(--linea); background:#fff}
.gtab:not(.on):hover{border-color:var(--gris2)}
.gtab:hover{background:var(--campo)}
.gtab.on{background:var(--tinta); color:#fff; font-weight:600}
.tbadge{background:var(--rojo); color:#fff; border-radius:10px; padding:1px 7px; font-size:11px; margin-left:4px}
.gtab.on .tbadge{background:rgba(255,255,255,.28)}

.fila-f{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}
.fila-f .buscar{margin-bottom:0}
.gt .nw{white-space:nowrap}
.gt .mini{font-size:11.5px; color:var(--gris2)}
.mini{font-size:12px; color:var(--gris2)}
.evtag{display:inline-block; background:var(--campo); border:1px solid var(--linea); border-radius:10px; padding:1px 8px; font-size:11.5px; font-weight:600}
.gt tr.sub td{background:var(--head); font-size:12.5px; padding-top:8px; padding-bottom:8px}
.gt .chk{width:34px}
.gt .chk input{width:16px; height:16px; accent-color:var(--rojo)}
.rendbar{display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--linea);
  border-radius:10px; padding:12px 16px; margin-top:14px; font-size:14px; font-weight:600; background:var(--head)}
.rendbar .btn{margin:0}
.dethead{display:flex; align-items:center; gap:16px; margin-bottom:14px}
.det2{display:grid; grid-template-columns:1fr 1fr; gap:28px}
@media (max-width:760px){ .det2{grid-template-columns:1fr} }
.ddl{display:grid; grid-template-columns:110px 1fr; gap:6px 12px; font-size:13.5px; margin:6px 0 14px}
.ddl dt{color:var(--gris2); font-weight:600}
.ddl dd{margin:0; font-weight:500}
.chkc{width:18px; height:18px; accent-color:var(--rojo)}
.selc{border:1px solid var(--linea); background:#fff; border-radius:9px; padding:9px 12px; font-family:inherit; font-size:13.5px}

/* login */
body.login .hd{display:none}
body.login{background:var(--fondo)}
.login-wrap{min-height:88vh; display:flex; align-items:center; justify-content:center}
.login-card{width:100%; max-width:320px; min-height:480px; display:flex; flex-direction:column; justify-content:center;
  border:1px solid var(--linea); border-radius:14px;
  padding:40px 30px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.04)}
.login-logo{display:block; height:72px; margin:0 auto 22px}
.login-tit{font-size:18px; font-weight:700; text-align:center; margin-bottom:6px}
.login-card input{margin-top:10px; text-align:center}

.rped{border-top:1px solid var(--linea); padding:9px 2px 8px; font-size:13px; color:var(--gris); cursor:pointer; margin-top:8px}
.rped .n{color:var(--tinta)}
.rped:hover{background:var(--head)}
.dc-big{font-size:15.5px; font-weight:600; line-height:1.45; margin-bottom:4px}
.dc-line{font-size:13.5px; color:var(--gris); margin-top:4px}
.dc-line a{color:var(--tinta)}
.chev{color:var(--gris2); font-size:15px; margin-right:2px}
.verped{display:inline-block; font-size:12.5px; font-weight:600; color:var(--gris); margin-top:8px; cursor:pointer;
  border:1px solid var(--linea); border-radius:14px; padding:5px 12px; background:#fff}
.verped:hover{color:var(--tinta)}

/* impresión: membrete + tablas limpias, sin controles */
.print-stamp{display:none}
@media print{
  .hd, .gtabs, .bloques, .rendbar, .verped, .buscar, .btn, button, input, select, .volver{display:none !important}
  .print-stamp{display:inline !important; font-size:11px; color:#555; margin-right:6px}
  body.gerencia main, main{max-width:100%; padding:0}
  body.gerencia{background:#fff}
  .gtop{border-bottom:2px solid #000; padding-bottom:8px; margin-bottom:14px}
  .card, .kpi, tr{break-inside:avoid}
  .card{box-shadow:none}
  .gt-wrap{overflow:visible; border:none}
  .chkc{display:none !important}
  a{color:#000; text-decoration:none}
}

/* picking del armador */
.it td, .it th{padding:9px 10px}
.tick{display:inline-block; width:18px; height:18px; border:1.5px solid var(--gris2); border-radius:50%; text-align:center; line-height:16px; font-size:12px}
.tick.y{background:var(--verde); border-color:var(--verde); color:#fff}
tr.done td{background:var(--verdeBg)}
input.qty{width:70px; border:1px solid var(--linea); background:var(--campo); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:14px}
input.qty.qty-exc{border-color:var(--rojoTxt)}
.exc-msg{font-size:11.5px; color:var(--rojoTxt); font-weight:600}
#scanProd{border:2px solid var(--rojo)}
.gsub{font-size:11.5px; font-weight:500; color:var(--gris2); margin-top:1px}

/* barra global: logo */
.hd-logo{height:52px; display:block; margin-left:8px; cursor:pointer}
.hd{padding-top:8px; padding-bottom:8px}

/* orden de paradas */
.ordb{display:inline-block; padding:0 6px; cursor:pointer; color:var(--gris2); font-size:12px; border:1px solid var(--linea); border-radius:6px; margin-right:2px; background:#fff}
.ordb:hover{color:var(--rojo); border-color:var(--rojo)}
.pnum{color:var(--rojoTxt)}

/* tablas anchas: sombra en el borde cortado + barra fina */
.gt-wrap.mas-der{box-shadow:inset -16px 0 12px -14px rgba(51,55,61,.35)}
.gt-wrap.mas-izq{box-shadow:inset 16px 0 12px -14px rgba(51,55,61,.35)}
.gt-wrap.mas-der.mas-izq{box-shadow:inset -16px 0 12px -14px rgba(51,55,61,.35), inset 16px 0 12px -14px rgba(51,55,61,.35)}
.gt-wrap::-webkit-scrollbar{height:5px}
.gt-wrap::-webkit-scrollbar-thumb{background:#c4cad2; border-radius:3px}
.gt-wrap::-webkit-scrollbar-track{background:transparent}
.fresco{font-size:12px; color:var(--gris2); white-space:nowrap}

.tret{color:#8a1f1f; font-weight:700; letter-spacing:.02em}

/* resumen de gerencia: el flujo como franja de proceso (izquierda a derecha) */
.flujo{display:flex; align-items:stretch; overflow-x:auto; background:#fff; border:1px solid var(--linea); border-radius:12px; padding:8px; margin:4px 0 14px}
.fstep{flex:1; min-width:92px; text-align:center; padding:12px 6px; border-radius:9px; cursor:pointer}
.fstep:hover{background:var(--campo)}
.fstep .fn{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums}
.fstep .fl{font-size:12px; color:var(--gris); margin-top:2px; white-space:nowrap}
.fstep .fm{font-size:11.5px; color:var(--gris2); margin-top:2px; min-height:15px}
.fstep.cero .fn,.fstep.cero .fl{color:var(--gris2); opacity:.45}
.fsep{align-self:center; color:var(--gris2); font-size:16px; padding:0 1px}
.faparte{display:flex; gap:8px; margin:0 0 6px}
.fchip{border:1px solid var(--linea); border-radius:16px; padding:5px 12px; font-size:12.5px; color:var(--gris); cursor:pointer; background:#fff}
.fchip b{color:var(--tinta)}
.fchip.cero{opacity:.55}
.fchip:hover{border-color:var(--gris2)}

/* jerarquia de filtros: el buscador manda; los filtros acompañan en chico */
.buscar-xl{max-width:420px; font-size:15px; padding:12px 16px; margin-bottom:10px}
.subfiltros{margin-bottom:14px}
.subfiltros .flbl{font-size:12px; color:var(--gris2)}
.subfiltros .selc, .subfiltros select{font-size:12.5px; padding:7px 10px; color:var(--gris)}
.subfiltros .chip-f{font-size:12px; padding:5px 11px}
/* mobile: la barra de desplazamiento horizontal arriba (al final de listas largas no se ve abajo) */
@media (max-width:760px){
  .gt-wrap{transform:scaleY(-1)}
  .gt-wrap > table{transform:scaleY(-1)}
  /* teléfono: ninguna fila fija puede empujar el ancho de la página (la cabecera con
     "Actualizado · vNNN" + Imprimir + Actualizar mide más que la pantalla si no envuelve) */
  /* ritmo lateral ÚNICO en el teléfono: 16px en cabecera y contenido, en todas las vistas */
  body.gerencia main{padding:14px 16px}
  .gtop{flex-wrap:wrap; gap:8px 10px}
  .hd{padding:10px 16px; flex-wrap:wrap; gap:6px}
  .hd-r{gap:6px; flex-wrap:wrap}
  .hd-user, .hd-est .hd-txt{display:none}
  .hd-r .btn-min .hd-txt{display:none}
  .hd-r .btn-min svg{margin-right:0}
  .apps{grid-template-columns:1fr; gap:10px; margin-top:16px}
  .app{min-height:0; padding:16px 16px; flex-direction:row; align-items:center; gap:14px}
  .app svg{width:28px; height:28px; flex:0 0 28px}
  .saludo{margin-top:12px}
  /* regla de sistema: la página NUNCA se desplaza a lo ancho; si algo mide de más,
     se resuelve envolviendo o deslizando DENTRO de su propia caja, no corriendo todo */
  html, body{max-width:100%; overflow-x:clip}
  .hd-r .btn-min{padding:8px 12px}
  .bfila{flex-wrap:wrap; gap:12px 20px}
  .faparte{flex-wrap:wrap}
  .rendbar{flex-wrap:wrap}
  /* jerarquía de filtros también en el teléfono: los selectores acompañan en chico
     (iOS los estira al ancho de su opción más larga si no se los limita) y los chips
     de estado pesan menos que el buscador */
  .subfiltros{gap:6px}
  .subfiltros .selc, .subfiltros select{max-width:47%; font-size:12px; padding:6px 8px}
  .fila-f .chip-f{font-size:11.5px; padding:4px 9px}
  /* tablas .tj: en el teléfono cada fila es una tarjeta con TODOS sus datos apilados
     (rótulo gris a la izquierda = el encabezado de la columna); nada de scroll lateral */
  .tjw{transform:none; overflow:visible; border:none; background:transparent; border-radius:0}
  .tjw > table{transform:none}
  table.tj, table.tj tbody, table.tj tr, table.tj td{display:block; width:100%; box-sizing:border-box}
  table.tj thead{display:none}
  table.tj tr{background:#fff; border:1px solid var(--linea); border-radius:10px; padding:9px 12px; margin-bottom:8px}
  table.tj td{display:flex; gap:10px; align-items:baseline; border:none; padding:2.5px 0; font-size:13px; white-space:normal}
  table.tj td[data-l]::before{content:attr(data-l); color:var(--gris2); font-size:12px; flex:0 0 96px}
  table.tj td.num{text-align:left}
  table.tj .nw, table.tj .n{white-space:normal}
  table.tj td:empty{display:none}
}

/* direccion de la parada en las filas de hoja de ruta (para ordenar sin abrir cada pedido) */
.rdir{display:block; font-size:12.5px; color:var(--gris); margin:2px 0 0 58px}

/* indicadores propios del bloque (ej. Caja: plata en la calle / por rendir, siempre a la vista) */
.bstats{font-size:12.5px; color:var(--gris); margin-top:10px}
.bstats b{color:var(--tinta); font-variant-numeric:tabular-nums}

/* bloque Caja: la plata como numeros protagonistas, Rendicion como pildora a la derecha */
.bfila{display:flex; align-items:center; gap:26px}
.bfila .besp{flex:1}
.bstat .bn{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.15}
.bstat .bl{font-size:11.5px; color:var(--gris2); margin-top:1px}

/* franja de avisos del espejo de stock (Gerencia): sobria, clic lleva a Actividad */
.aviso-esp{border:1px solid var(--rojo); color:var(--rojoTxt); background:#fff;
  border-radius:10px; padding:11px 14px; margin:10px 0; font-size:14px; font-weight:600; cursor:pointer}

/* devolución parcial: renglón con contador (mockups aprobados 04/09) */
.ren{display:flex; justify-content:space-between; align-items:center; gap:10px}
.ren .pn{font-weight:600; font-size:14.5px}
.ren .ps{font-size:12.5px; color:var(--gris2)}
.stepper{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.stepper button{width:38px; height:38px; border:1px solid var(--linea); border-radius:9px; background:#fff; font:inherit; font-size:18px; cursor:pointer}
.stepper .q{min-width:34px; text-align:center; font-weight:700; font-size:17px; font-variant-numeric:tabular-nums}

/* ===== Ventas (mockups aprobados 05-06/09): clientes, ficha, alta, productos ===== */
.top-acc{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.top-acc .btn{margin:0;width:auto;display:inline-flex;align-items:center;gap:7px}
.top-acc .buscar-xl{flex:1;margin:0}
.dos{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}
.tres{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
/* Formulario por secciones (ficha de cliente): título de grupo y campos en grilla. */
.sec{margin-top:22px}
.sec:first-of-type{margin-top:14px}
.sec>.st{font-size:12px;letter-spacing:.02em;color:var(--gris2);font-weight:600;
  padding-bottom:7px;border-bottom:1px solid var(--linea);margin-bottom:12px}
.sec>.sc{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 18px}
.sec>.sc.dos-col{grid-template-columns:1fr 1fr}
.sec>.sc>.cp,.sec>.sc>div{min-width:0}
.sec>.sc .full{grid-column:1/-1}
.cp{min-width:0}
.tres>div>.cp+.cp,.dos>div>.cp+.cp{margin-top:12px}
.sec .campo-l{margin-top:0}
@media (max-width:900px){.sec>.sc,.sec>.sc.dos-col{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;font-size:13.5px}
.kv .k{color:var(--gris2);font-size:12px}
.hist .card{padding:11px 14px}
.campo-l .ob{color:var(--rojoTxt)}
input.f,select.f,textarea.f{width:100%;border:1px solid var(--linea);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px;background:#fff;margin-top:5px;box-sizing:border-box}
.aviso{border:1px solid var(--linea);border-left:3px solid var(--rojo);background:#fff;border-radius:10px;
  padding:13px 16px;font-size:13.5px;margin-top:12px}
.aviso .av-t{font-weight:600;font-size:14.5px;margin-bottom:8px}
.aviso .av-p{color:var(--gris2);font-size:12.5px;margin-top:10px}
.aviso .av-filas{display:flex;flex-direction:column;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:8px;overflow:hidden}
.aviso .av-fila{display:flex;align-items:center;gap:14px;background:#fff;padding:9px 12px}
.aviso .av-art{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.aviso .av-art b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aviso .av-num{width:66px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;line-height:1.25}
.aviso .av-num .mini{display:block;font-weight:400}
.aviso .av-num.falta{color:var(--rojoTxt)}
.aviso .av-acc{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
@media (max-width:760px){
  .aviso .av-fila{flex-wrap:wrap;gap:10px}
  .aviso .av-art{flex:1 0 100%}
  .aviso .av-num{width:auto;min-width:56px;text-align:left}
  .aviso .av-acc{flex-direction:column-reverse}
  .aviso .av-acc .btn{width:100%}
}
.prod{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pc{background:#fff;border:1px solid var(--linea);border-radius:12px;overflow:hidden}
.pc .img{height:120px;background:var(--campo);display:flex;align-items:center;justify-content:center;color:var(--gris2);overflow:hidden}
.pc .img img{max-width:100%;max-height:100%;object-fit:contain}
.pc .img svg{width:34px;height:34px;fill:currentColor}
.pc .b{padding:11px 13px}
.pc .pn{font-weight:600;font-size:13.5px;line-height:1.35}
.pc .ps{font-size:11.5px;color:var(--gris2);margin-top:2px}
.pc .pp{font-size:16px;font-weight:700;margin-top:8px}
.pc .st{font-size:12px;color:var(--gris);margin-top:5px;line-height:1.5}
.nota-dis{font-size:11.5px;color:var(--gris2);text-align:center;margin:10px 0 0;font-style:italic}
.tot{border:2px solid var(--tinta);border-radius:10px;padding:12px 16px;background:#fff}
.tot .r{display:flex;justify-content:space-between;font-size:13.5px;padding:3px 0;gap:14px}
.tot .r .et{flex:1;min-width:0}
.tot .r .im{white-space:nowrap;text-align:right}
/* El importe nunca se achica ni se corta: si falta lugar, se recorta la etiqueta (17/09, totales > 1 millón) */
.tot .r span:last-child{white-space:nowrap;flex:0 0 auto;text-align:right}
.tot .r span:first-child{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}
.tot .r.g span:last-child{font-variant-numeric:tabular-nums}
.tot{overflow:visible}
.tot .r.g{font-size:19px;font-weight:700;border-top:1px solid var(--linea);margin-top:6px;padding-top:8px}
.modal-bg{position:fixed;inset:0;background:rgba(31,35,40,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{background:#fff;border-radius:14px;width:720px;max-width:95vw;max-height:92vh;overflow:auto;padding:22px 26px;border:1px solid var(--linea)}
.gt .n{font-weight:600}
@media (max-width:900px){.dos,.tres{grid-template-columns:1fr}.prod{grid-template-columns:repeat(2,1fr)}.kv{grid-template-columns:1fr}}

/* ===== Ventas en el celular (complemento): una columna, botones en fila, listas como tarjetas ===== */
.dos.editor{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
.dos.editor>div{min-width:0}
.dos.editor .gt-wrap{min-width:0}
.tot .r span:last-child{white-space:nowrap}
.tot .g{display:flex;gap:10px;align-items:baseline}
.acciones{display:flex;gap:8px;flex-wrap:wrap}
.vcard{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:11px 13px;margin-bottom:8px}
.vcard .l1{display:flex;justify-content:space-between;gap:10px;align-items:center}
.vcard .l1 .n{min-width:0;overflow-wrap:anywhere}
.vcard .meta{font-size:12.5px;color:var(--gris);margin-top:4px;line-height:1.5}
@media (max-width:760px){
  .dos.editor{grid-template-columns:1fr}
  .top-acc{flex-direction:column;align-items:stretch}
  .top-acc .tit{font-size:18px}
  .top-acc .btn{width:100%;justify-content:center}
  .acciones{display:grid;grid-template-columns:1fr 1fr}
  .acciones .btn{width:100%;margin:0;justify-content:center;padding:9px 8px;font-size:13px}
  .gt .oc-m{display:none}
  .prod{grid-template-columns:1fr 1fr}
  .modal{padding:16px}
  .tres{grid-template-columns:1fr}
}
/* modal abierto: el fondo no scrollea (el scroll queda adentro del modal) */
body.con-modal{overflow:hidden}
.modal-bg{overscroll-behavior:contain}
.modal{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.btn svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px;fill:currentColor}
.lpbar button svg{vertical-align:-3px;margin-right:6px;fill:currentColor}
/* el título de la vista solo se imprime: en pantalla lo da la barra */
.print-only{display:none}
@media print{.print-only{display:block}}
.gtop{justify-content:flex-end}
/* nombre de aplicación largo en el celular: una línea con puntos suspensivos */
@media (max-width:760px){.hd-app span{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.hd-app{padding-left:8px}}

/* Paginación de listas largas (25 por vista) */
.pagbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 2px}
.pagbar .mini{color:var(--gris2)}