:root{
  --navy:#0B2656;--navy-2:#163A7A;--navy-3:#E8EDF7;--rojo:#EF1B1B;--rojo-2:#C91515;--verde:#1F9D55;--verde-2:#167A41;--ambar:#D97706;--morado:#6D4AFF;--azul:#1D63D6;
  --fondo:#F4F6FA;--blanco:#fff;--texto:#141C2E;--muted:#5B657A;--linea:#E1E6EF;--sombra:0 1px 2px rgba(11,38,86,.06),0 6px 20px -8px rgba(11,38,86,.18);
  --radio:14px;--f-tit:"Outfit",system-ui,sans-serif;--f-txt:"Lexend",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--fondo);color:var(--texto);font-family:var(--f-txt);font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:var(--f-tit);color:var(--navy);margin:0;letter-spacing:-.01em}
h1{font-size:26px;font-weight:800}h2{font-size:17px;font-weight:700;margin-bottom:10px}h3{font-size:14px;font-weight:700}
a{color:var(--navy)}a.enlace{color:var(--azul);font-weight:600;text-decoration:none}a.enlace:hover{text-decoration:underline}
b{font-weight:600}.muted{color:var(--muted);font-size:13px}.rojo{color:var(--rojo)}.verde{color:var(--verde)}.ambar{color:var(--ambar)}
.pre{white-space:pre-line}
button{font-family:inherit}
#app{min-height:100vh;display:flex;flex-direction:column}

/* ---- Cabecera ---- */
.cab{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:10px 18px;background:var(--navy);color:#fff;box-shadow:0 2px 0 var(--rojo)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}.marca-iso{border-radius:8px;display:block;flex:none}
.marca-txt{font-family:var(--f-tit);font-weight:800;font-size:21px;line-height:1;display:flex;flex-direction:column}
.marca-txt small{font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-top:3px}
.cab-der{margin-left:auto;display:flex;align-items:center;gap:12px}
.usuario{display:flex;align-items:center;gap:10px}.usuario-txt{display:flex;flex-direction:column;line-height:1.15}.usuario-txt small{opacity:.8;font-size:11px}
.usuario .btn-sec{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--rojo);color:#fff;font-weight:700;font-family:var(--f-tit);flex:none}
.btn-menu{display:none;background:transparent;border:0;color:#fff;font-size:24px;cursor:pointer;padding:4px 8px}
.demo-barra{background:#FFF3C4;color:#7A4E00;font-size:12px;padding:6px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.demo-rol{border:1px solid #D7A400;background:#fff;border-radius:999px;padding:2px 9px;font-size:12px;cursor:pointer}.demo-rol.activo{background:#7A4E00;color:#fff;border-color:#7A4E00}

/* ---- Cuerpo ---- */
.cuerpo{display:flex;flex:1;min-height:0;background:linear-gradient(90deg,#fff 220px,var(--linea) 220px,var(--linea) 221px,var(--fondo) 221px)}
.lateral{width:220px;flex:none;background:#fff;border-right:1px solid var(--linea);padding:14px 10px;display:flex;flex-direction:column;position:sticky;top:60px;height:calc(100vh - 60px);overflow:auto}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--navy);font-weight:500;font-size:14px}
.nav-item:hover{background:var(--navy-3)}.nav-item.activo{background:var(--navy);color:#fff}
.nav-ico{width:22px;display:inline-flex;align-items:center;justify-content:center;opacity:.9}
.lateral-pie{margin-top:auto;font-size:11px;color:var(--muted);padding:10px 12px}
.main{flex:1;min-width:0;padding:22px 26px 60px;max-width:1400px}
.pag-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.pag-acc{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.volver{display:inline-block;color:var(--azul);font-weight:600;text-decoration:none;font-size:14px;margin-bottom:6px}
.panel{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px;margin-bottom:16px;box-shadow:var(--sombra)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px}
.fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.offline{display:none;position:fixed;bottom:0;left:0;right:0;background:#B91C1C;color:#fff;padding:8px 16px;font-size:13px;z-index:60;text-align:center}.offline.ver{display:block}

/* ---- Botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;padding:9px 16px;font-size:14px;font-weight:600;border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1.2;transition:transform .05s,background .15s}
.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:default}
.btn-pri{background:var(--rojo);color:#fff}.btn-pri:hover{background:var(--rojo-2)}
.btn-sec{background:#fff;color:var(--navy);border-color:#C9D2E3}.btn-sec:hover{background:var(--navy-3)}
.btn-verde{background:var(--verde);color:#fff}.btn-verde:hover{background:var(--verde-2)}
.btn-peligro{background:#fff;color:var(--rojo);border-color:#F3B4B4}.btn-peligro:hover{background:#FEE2E2}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:8px}.btn-lg{padding:12px 22px;font-size:16px}
.btn-xl{padding:16px 26px;font-size:19px;font-weight:800;border-radius:14px;width:100%;letter-spacing:.02em;font-family:var(--f-tit)}
.btn-ico{background:transparent;border:0;cursor:pointer;font-size:18px;padding:4px 8px;border-radius:8px}.btn-ico:hover{background:var(--navy-3)}
.btn-x{background:transparent;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--muted);padding:0 6px}

/* ---- Chips ---- */
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap;vertical-align:middle;background:#EEF1F7;color:#374151}
.chip-lg{font-size:13px;padding:5px 14px}
.chip-gris{background:#EEF1F7;color:#4B5563}.chip-verde{background:#DCFCE7;color:#166534}.chip-ambar{background:#FEF3C7;color:#92400E}.chip-rojo{background:#FEE2E2;color:#991B1B}.chip-azul{background:#DBEAFE;color:#1E40AF}.chip-morado{background:#EDE9FE;color:#5B21B6}

/* ---- Formularios ---- */
.campo{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:14px}
.campo-et{font-weight:600;color:var(--navy);font-size:13px}.req{color:var(--rojo)}.ayuda{color:var(--muted);font-size:12px}
.inp{width:100%;border:1px solid #C9D2E3;border-radius:10px;padding:10px 12px;font-size:15px;font-family:inherit;background:#fff;color:var(--texto)}
.inp:focus{outline:2px solid var(--navy-2);outline-offset:-1px;border-color:var(--navy-2)}
.inp-ro{background:var(--fondo)}.inp-num{width:110px;text-align:right}
textarea.inp{resize:vertical}
.check,.radio{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer}.radios{display:flex;flex-direction:column}
.check input,.radio input{width:20px;height:20px;accent-color:var(--navy)}
.aviso-caja{background:#FFF7E6;border:1px solid #FCD68A;border-radius:10px;padding:10px 12px;font-size:13px;color:#7A4E00}

/* ---- Listado ---- */
.listado{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden}
.listado-barra{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:14px 16px;background:#F7F9FC;border-bottom:1px solid var(--linea)}
.listado-busca{display:flex;flex:1;min-width:280px;max-width:620px}
.listado-busca .inp-alc{width:190px;border-radius:10px 0 0 10px;border-right:0;background:#fff}.listado-busca .inp-bus{border-radius:0 10px 10px 0;flex:1}
.listado-der{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.orden{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.orden .inp{width:auto;padding:7px 10px;font-size:14px}
.vistas{display:flex;border:1px solid #C9D2E3;border-radius:8px;overflow:hidden}.btn-vista{background:#fff;border:0;padding:6px 10px;cursor:pointer;font-size:16px;color:var(--navy)}.btn-vista.activo{background:var(--navy);color:#fff}
.listado-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--linea)}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chips-et{font-size:13px;color:var(--muted);margin-right:4px}
.chip-f{border:2px solid var(--navy);background:#fff;color:var(--navy);border-radius:999px;padding:7px 16px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;display:inline-flex;gap:8px;align-items:center;font-family:var(--f-tit)}
.chip-f b{background:var(--navy-3);color:var(--navy);border-radius:999px;padding:0 7px;font-size:12px}
.chip-f.activo{background:var(--navy);color:#fff}.chip-f.activo b{background:#fff}
.chip-f-rojo.activo{background:var(--rojo);border-color:var(--rojo)}.chip-f-verde.activo{background:var(--verde);border-color:var(--verde)}.chip-f-ambar.activo{background:var(--ambar);border-color:var(--ambar)}.chip-f-morado.activo{background:var(--morado);border-color:var(--morado)}.chip-f-azul.activo{background:var(--azul);border-color:var(--azul)}
.listado-conteo{padding:10px 16px;font-size:13px;color:var(--muted)}
.paginador{display:flex;gap:0;padding:4px 16px 12px;flex-wrap:wrap}
.pag{min-width:38px;height:36px;border:1px solid #C9D2E3;background:#fff;margin-left:-1px;cursor:pointer;font-weight:600;color:var(--navy)}.pag.activo{background:var(--navy-3)}.pag:disabled{color:#AEB7C8;cursor:default}
.tabla-env{overflow:auto}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;padding:12px 14px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);border-bottom:2px solid var(--navy);white-space:nowrap;font-family:var(--f-tit);font-weight:700}
.tabla td{padding:12px 14px;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla tbody tr:nth-child(even){background:#F7F9FC}.tabla tr.clic{cursor:pointer}.tabla tr.clic:hover{background:var(--navy-3)}
.tabla td.num,.tabla th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.col-acc{white-space:nowrap;text-align:right}
.dir{max-width:300px;line-height:1.3}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;padding:12px 16px}
.tarjeta{border:1px solid var(--linea);border-radius:12px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:6px}.tarjeta.clic{cursor:pointer}.tarjeta.clic:hover{border-color:var(--navy)}
.tarjeta-cab{display:flex;justify-content:space-between;align-items:center;gap:8px}.tarjeta-tit{font-weight:700;color:var(--navy);font-size:15px}
.tarjeta-pie{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:8px;flex-wrap:wrap}
.pestanas{display:flex;gap:4px;border-bottom:2px solid var(--linea);margin-bottom:16px;overflow:auto}
.pestana{background:transparent;border:0;padding:10px 16px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;display:inline-flex;gap:8px;align-items:center}
.pestana.activa{color:var(--navy);border-bottom-color:var(--rojo)}.pest-n{background:var(--navy-3);color:var(--navy);border-radius:999px;padding:0 8px;font-size:12px}
.cargando{display:flex;align-items:center;gap:10px;color:var(--muted);padding:24px 0}
.spinner{width:20px;height:20px;border:3px solid var(--navy-3);border-top-color:var(--rojo);border-radius:50%;animation:gira .8s linear infinite;display:inline-block}@keyframes gira{to{transform:rotate(360deg)}}
.vacio{text-align:center;padding:48px 20px;color:var(--muted)}.vacio-ico{font-size:40px;margin-bottom:8px}
.error-caja{background:#FEE2E2;border:1px solid #F3B4B4;border-radius:12px;padding:18px}

/* ---- Imágenes de producto ---- */
.img-caja{background:#F1F3F7;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.img-caja img{width:100%;height:100%;object-fit:contain}.img-nada{font-size:26px;opacity:.5}
.img-prod{width:88px;height:88px}.img-art{width:150px;height:150px}.img-mini{width:54px;height:54px;border-radius:8px}.img-mini .img-nada{font-size:20px}.img-track{width:160px;height:120px}

/* ---- Pedido: formulario ---- */
.form-pedido .panel h2{padding-bottom:8px;border-bottom:1px solid var(--linea);margin-bottom:14px}
.emp-busca{position:relative}.sugerencias{position:absolute;z-index:20;top:72px;left:0;right:0;background:#fff;border:1px solid var(--linea);border-radius:10px;box-shadow:var(--sombra);max-height:300px;overflow:auto}
.sug{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:#fff;cursor:pointer;border-bottom:1px solid var(--linea);font:inherit}.sug:hover{background:var(--navy-3)}
.info-emp{font-size:13px;margin-top:-6px;margin-bottom:10px}
.mapa-mini{min-height:60px}.mapa{border-radius:12px;overflow:hidden;border:1px solid var(--linea);background:#E9EEF5;position:relative;z-index:0}.mapa-sin{padding:16px;color:var(--muted);font-size:13px}
.desde-cot{background:var(--navy-3);border-radius:12px;padding:12px 14px;margin-bottom:14px}.desde-cot .fila{flex-wrap:nowrap}.desde-cot select{flex:1}
.lineas{display:flex;flex-direction:column;gap:10px}
.vacio-lineas{padding:22px;text-align:center;color:var(--muted);border:2px dashed var(--linea);border-radius:12px}
.linea{display:grid;grid-template-columns:28px 88px 1fr 180px;gap:14px;align-items:start;padding:12px;border:1px solid var(--linea);border-radius:12px;background:#fff}
.linea-n{font-weight:700;color:var(--muted);font-size:13px;padding-top:4px}
.prod-nombre{font-family:var(--f-tit);font-weight:700;color:var(--azul);font-size:15px;letter-spacing:.03em;text-transform:uppercase}
.prod-parte{font-size:14px;margin:2px 0 8px}
.precios{display:flex;flex-direction:column;gap:4px;font-size:14px}.precios .et{display:inline-block;min-width:118px;font-weight:600;color:var(--navy)}
.precios .inp-num{display:inline-block;width:120px;padding:6px 8px}.pct{font-weight:700;font-size:13px;color:var(--muted)}.pct.verde{color:var(--verde)}
.tot-linea{font-size:15px}
.linea-cant .campo{margin-bottom:6px}
.lineas-pie{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:14px;flex-wrap:wrap}
.resumen-lineas{min-width:280px;background:#F7F9FC;border-radius:12px;padding:12px 16px;font-size:14px}.resumen-lineas div{display:flex;justify-content:space-between;gap:16px;padding:3px 0}.tot-ped{font-size:17px;border-top:1px solid var(--linea);margin-top:4px;padding-top:6px!important}.tot-ped b{font-family:var(--f-tit);font-size:19px}
.acciones-fin{display:flex;justify-content:flex-end;gap:10px}
.res-prod{max-height:60vh;overflow:auto;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.res-item{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:#fff;border:1px solid var(--linea);border-radius:10px;padding:8px 10px;cursor:pointer;font:inherit}.res-item:hover{border-color:var(--navy);background:var(--navy-3)}
.res-txt{flex:1;display:flex;flex-direction:column}.res-precio{font-weight:700;color:var(--navy);white-space:nowrap}

/* ---- Pedido: detalle ---- */
.detalle .tit-ped{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:30px;letter-spacing:.04em}.tit-ped .num{color:var(--texto)}
.meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px;color:var(--muted);margin:-4px 0 14px}.meta i{width:1px;height:18px;background:var(--linea)}.meta b{color:var(--texto)}
.caja3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;border:1px solid #C9D2E3;border-radius:16px;padding:20px 24px;background:#fff}
.caja3 h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;color:var(--navy)}.caja3 p{margin:0 0 6px}
.res-fila{display:flex;justify-content:space-between;gap:12px;padding:4px 0}.res-fila.tot{font-size:17px;border-top:1px solid var(--linea);margin-top:4px;padding-top:8px}.res-fila.tot b{font-family:var(--f-tit);font-size:20px}
.barra-azul{height:3px;background:var(--navy);margin:22px 0 12px}
.articulos{margin-bottom:24px}.tit-sec{font-size:15px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tit-sec small{font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0;font-family:var(--f-txt)}
.tracking-link{margin-left:auto;font-size:13px;text-transform:none;letter-spacing:0;font-family:var(--f-txt)}
.sub-fila{display:flex;gap:40px;font-size:14px;margin:8px 0 4px}
.art{display:grid;grid-template-columns:40px 150px 1fr 240px;gap:18px;padding:18px 0;border-bottom:1px solid var(--linea)}
.art-n{font-size:12px;color:var(--muted);padding-top:4px}
.art-desc .precios .et{min-width:110px}.art-desc .tot b{font-family:var(--f-tit);font-size:17px}
.art-cant div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:14px}.art-cant span{color:var(--texto)}
.cerrados{background:#F7F9FC;border-radius:14px;padding:16px 20px}
.cerr-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 18px;margin:10px 0;font-size:14px}.cerr-datos div{display:flex;flex-direction:column}.cerr-datos span{color:var(--muted);font-size:12px}
.adj-fila{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.adj{background:#fff;border:1px solid #C9D2E3;border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer;color:var(--navy);font-weight:600}
.canceladas{color:var(--muted);font-size:13px;margin-bottom:14px}
.bitacora{list-style:none;margin:0;padding:0}.bitacora li{display:grid;grid-template-columns:140px 1fr 160px;gap:12px;padding:8px 0;border-bottom:1px solid var(--linea);font-size:13.5px}.bit-f{color:var(--muted);white-space:nowrap}.bit-q{color:var(--muted);text-align:right}
.rev-lista{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.rev-linea{display:grid;grid-template-columns:54px 1fr 150px;gap:12px;align-items:center;border:1px solid var(--linea);border-radius:10px;padding:8px 10px}.rev-cant{display:flex;flex-direction:column;gap:2px}.rev-cant .et{font-size:12px;color:var(--navy);font-weight:600}
.rev-total{padding:10px 12px;background:#F7F9FC;border-radius:10px;margin-bottom:10px}

/* ---- Bodega ---- */
.tarjetas-bodega{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px}
.tb-card{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:18px 20px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.tb-card.urgente{border-color:var(--rojo);box-shadow:0 0 0 2px #FECACA}
.tb-card::before{content:"";position:absolute;top:0;right:0;width:34px;height:34px;background:var(--navy-3);clip-path:polygon(100% 0,0 0,100% 100%)}
.tb-cab{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.tb-num{font-family:var(--f-tit);font-weight:800;font-size:20px;color:var(--navy);display:flex;gap:8px;align-items:center}.tb-cli{font-size:16px;font-weight:600}.tb-meta{text-align:right;font-size:12.5px;line-height:1.5}
.ent-lineas{display:flex;flex-direction:column;gap:6px}.ent-linea{display:grid;grid-template-columns:54px 1fr 70px;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--linea)}.ent-lineas.grande .ent-linea{grid-template-columns:64px 1fr 80px}.ent-lineas.grande .img-mini{width:64px;height:64px}
.ent-cant{text-align:right;display:flex;flex-direction:column;align-items:flex-end}.ent-cant b{font-family:var(--f-tit);font-size:24px;color:var(--navy);line-height:1}.ent-cant span{font-size:12px;color:var(--muted)}
.tb-instr{background:#FFF7E6;border-radius:10px;padding:8px 12px;font-size:13px}
.tb-pie{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.tb-pie .btn-xl{width:auto;min-width:240px}
.prep-ok{display:flex;gap:10px;align-items:center;color:var(--verde);font-weight:700}
.desp-form .desp-res{background:#F7F9FC;border-radius:10px;padding:10px 12px;margin-bottom:12px}
.fotos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.foto-mini{position:relative;width:96px;height:96px;border-radius:10px;overflow:hidden;border:1px solid var(--linea)}.foto-mini img{width:100%;height:100%;object-fit:cover}.foto-x{position:absolute;top:2px;right:2px;border:0;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;width:22px;height:22px;cursor:pointer;line-height:1}
.firma{border:1px solid #C9D2E3;border-radius:12px;overflow:hidden;margin:6px 0 12px;background:#fff}.firma-canvas{display:block;width:100%;height:170px;touch-action:none;background:repeating-linear-gradient(transparent 0 32px,#F1F3F7 32px 33px)}.firma-pie{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:#F7F9FC;font-size:12px;color:var(--muted)}

/* ---- Ruta ---- */
.mapa-ruta{margin-bottom:12px}
.paradas{display:flex;flex-direction:column;gap:12px}
.parada{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:16px 18px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:8px}.parada.entregada{opacity:.9}
.parada-cab{display:flex;gap:12px;align-items:center}.parada-n{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--f-tit);flex:none}
.parada-cli{font-size:17px;font-weight:700;color:var(--navy)}.parada-dir{font-size:14px}.parada-instr{background:#FFF7E6;border-radius:10px;padding:8px 12px;font-size:13px}
.parada-acc{display:flex;flex-wrap:wrap;gap:8px}.parada-lineas{border-top:1px solid var(--linea);padding-top:8px}
.pin{background:transparent;border:0}.pin-c{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--rojo);border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px}.pin-c>*{transform:rotate(45deg)}.pin-c{font-family:var(--f-tit)}
.pin-c::after{content:"";}
.gps{margin-top:6px;font-size:13px}
.entregar-form .fotos .foto-mini{width:110px;height:110px}

/* ---- Tracking ---- */
.mini-pasos{display:flex;align-items:center;gap:3px;flex-wrap:wrap}.mini-pasos i{width:14px;height:6px;border-radius:3px;background:#E1E6EF;display:inline-block}.mini-pasos i.ok{background:var(--verde)}.mini-pasos span{font-size:12px;color:var(--muted);margin-left:6px}
.track-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pasos{list-style:none;margin:0;padding:0}.pasos li{display:flex;gap:14px;padding:10px 0;position:relative}.pasos li i{width:30px;height:30px;border-radius:50%;background:#E1E6EF;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;flex:none;font-family:var(--f-tit)}
.pasos li.hecho i{background:var(--verde);color:#fff}.pasos li.actual i{background:var(--rojo);color:#fff;box-shadow:0 0 0 4px #FEE2E2}.pasos li.actual b{color:var(--rojo)}
.pasos li:not(:last-child)::after{content:"";position:absolute;left:14px;top:40px;bottom:-10px;width:2px;background:#E1E6EF}.pasos li.hecho:not(:last-child)::after{background:var(--verde)}
.fotos-track{display:flex;flex-direction:column;gap:12px}.foto-grupo h4{margin-bottom:6px;color:var(--muted);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em}.foto-btn{border:0;background:transparent;padding:0;cursor:pointer}
.actividad{list-style:none;margin:0;padding:0}.actividad li{padding:8px 0;border-bottom:1px solid var(--linea);font-size:14px}

/* ---- Inicio ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.tile{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:18px 20px;text-decoration:none;color:var(--texto);box-shadow:var(--sombra);position:relative;overflow:hidden;transition:transform .12s}
.tile:hover{transform:translateY(-2px)}.tile::after{content:"";position:absolute;right:-1px;top:-1px;width:38px;height:38px;clip-path:polygon(100% 0,0 0,100% 100%);background:var(--navy-3)}
.tile-n{font-family:var(--f-tit);font-size:40px;font-weight:800;line-height:1;color:var(--navy)}.tile-t{font-weight:600;margin-top:6px}.tile-s{font-size:12px;color:var(--muted);margin-top:2px}
.tile-rojo .tile-n{color:var(--rojo)}.tile-rojo::after{background:#FEE2E2}.tile-verde .tile-n{color:var(--verde)}.tile-verde::after{background:#DCFCE7}.tile-ambar .tile-n{color:var(--ambar)}.tile-ambar::after{background:#FEF3C7}.tile-morado .tile-n{color:var(--morado)}.tile-morado::after{background:#EDE9FE}.tile-azul .tile-n{color:var(--azul)}.tile-azul::after{background:#DBEAFE}

/* ---- Modal / toast ---- */
.modal-fondo{position:fixed;inset:0;background:rgba(11,38,86,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;opacity:0;transition:opacity .2s}.modal-fondo.ver{opacity:1}
.modal{background:#fff;border-radius:18px;width:100%;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 30px 80px -20px rgba(0,0,0,.4);transform:translateY(10px);transition:transform .2s}.modal-fondo.ver .modal{transform:none}
.modal-sm{max-width:440px}.modal-md{max-width:640px}.modal-lg{max-width:860px}.modal-xl{max-width:1100px}
.modal-cab{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--linea)}.modal-cab h3{font-size:18px}
.modal-cuerpo{padding:18px 20px;overflow:auto}.modal-pie{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--linea);background:#F7F9FC;border-radius:0 0 18px 18px}
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:70;pointer-events:none}
.toast{background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;box-shadow:var(--sombra);opacity:0;transform:translateY(8px);transition:all .25s;max-width:92vw}.toast.ver{opacity:1;transform:none}.toast-error{background:#B91C1C}.toast-info{background:#374151}
.portada{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--navy);color:#fff;text-align:center;padding:20px}.portada .marca-txt{font-size:30px}.portada h2{color:#fff}.portada p{opacity:.85}
.salida{background:#0B2656;color:#DCE6FF;padding:12px 14px;border-radius:10px;font-size:12.5px;white-space:pre-wrap;max-height:300px;overflow:auto}
.detalles{margin-top:14px}.detalles summary{cursor:pointer;font-weight:600;color:var(--navy)}
.enlaces-mapa{margin-top:6px}

/* ---- Responsive ---- */
@media (max-width:1100px){.art{grid-template-columns:30px 110px 1fr 200px}.img-art{width:110px;height:110px}.caja3{grid-template-columns:1fr 1fr}.track-grid{grid-template-columns:1fr}}
@media (max-width:900px){
  .cuerpo{background:var(--fondo)}
  .lateral{position:fixed;left:0;top:0;bottom:0;height:auto;z-index:40;transform:translateX(-105%);transition:transform .2s;padding-top:70px;box-shadow:var(--sombra)}
  body.menu-abierto .lateral{transform:none}.btn-menu{display:block}
  .main{padding:16px 14px 70px}.grid2,.grid3{grid-template-columns:1fr}.caja3{grid-template-columns:1fr;gap:14px;padding:16px}
  .linea{grid-template-columns:70px 1fr}.linea-n{display:none}.linea-cant{grid-column:1/-1}.img-prod{width:70px;height:70px}
  .art{grid-template-columns:90px 1fr;gap:12px}.art-n{display:none}.img-art{width:90px;height:90px}.art-cant{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
  .tarjetas-bodega{grid-template-columns:1fr}.tb-pie .btn-xl{width:100%}
  .usuario-txt{display:none}.detalle .tit-ped{font-size:22px}h1{font-size:22px}
  .bitacora li{grid-template-columns:1fr;gap:2px}.bit-q{text-align:left}
  .listado-busca .inp-alc{width:130px}.rev-linea{grid-template-columns:44px 1fr}.rev-cant{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px}
  .modal-pie .btn{flex:1}
}
@media print{.cab,.lateral,.demo-barra,.pag-acc,.offline,#toasts{display:none!important}.main{padding:0}}
.seg{display:inline-flex;border:1px solid #C9D2E3;border-radius:12px;overflow:hidden;margin:4px 0 10px;flex-wrap:wrap}
.seg-b{background:#fff;border:0;border-right:1px solid #C9D2E3;padding:10px 16px;font-weight:600;font-size:14px;color:var(--navy);cursor:pointer;font-family:inherit}.seg-b:last-child{border-right:0}
.seg-b.activo{background:var(--navy);color:#fff}.seg-b[data-m="parcial"].activo{background:var(--ambar)}.seg-b[data-m="nada"].activo{background:var(--rojo)}
.imp-caja{border:2px dashed #C4B5FD;background:#F7F5FF;border-radius:12px;padding:12px 14px;margin-top:4px}.imp-caja .check{padding-top:0}
.imp-lineas{margin:6px 0 12px;overflow:auto}.tabla-comp td,.tabla-comp th{padding:7px 10px}.tabla-comp tbody tr:nth-child(even){background:transparent}
.imp-chip{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:8px;background:#EDE9FE;color:#5B21B6;border-radius:8px;padding:5px 10px;font-size:13px;text-decoration:none;font-weight:500}
.imp-resumen{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;background:#F7F5FF;border:1px solid #DDD6FE;border-radius:10px;padding:8px 12px;margin:8px 0}
.imp-sol{text-decoration:none;font-weight:700;color:var(--navy);display:inline-flex;gap:6px;align-items:center}
@media (max-width:900px){.seg{display:flex}.seg-b{flex:1 1 33%;padding:10px 8px;font-size:13px}}

/* ---- Barra de tiempo (tracking tipo paquetería) ---- */
.bt{position:relative;height:30px;margin:6px 13px}
.bt.bt-con-et{height:58px;margin:10px 18px 6px}
.bt-pista{position:absolute;left:0;right:0;top:12px;height:6px;border-radius:3px;background:#DCE2EC}
.bt-relleno{height:100%;border-radius:3px;background:var(--verde);transition:width .4s ease}
.bt-puntos{position:absolute;inset:0}
.bt-p{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.bt-p i{display:flex;align-items:center;justify-content:center;width:14px;height:14px;margin-top:8px;border-radius:50%;background:#fff;border:3px solid #C3CBD9;box-sizing:border-box}
.bt-hecho i{background:var(--verde);border-color:var(--verde)}
.bt-actual i{width:22px;height:22px;margin-top:4px;background:#fff;border:5px solid var(--verde);box-shadow:0 0 0 4px rgba(31,157,85,.18)}
.bt-fin i{width:30px;height:30px;margin-top:0;background:var(--verde);border:3px solid #fff;box-shadow:0 0 0 2px var(--verde)}
.bt-et{margin-top:6px;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;letter-spacing:.01em}
.bt-hecho .bt-et,.bt-actual .bt-et{color:var(--texto)}.bt-actual .bt-et{color:var(--verde-2);font-weight:700}
.bt-p:first-child .bt-et{align-self:flex-start;transform:translateX(calc(50% - 7px))}
.bt-p:last-child .bt-et{align-self:flex-end;transform:translateX(calc(-50% + 7px))}
.bt-compacta{height:26px;margin:2px 9px;min-width:120px}.bt-compacta .bt-pista{top:10px;height:5px}.bt-compacta .bt-p i{width:10px;height:10px;margin-top:7.5px;border-width:2px}.bt-compacta .bt-actual i{width:16px;height:16px;margin-top:4.5px;border-width:4px;box-shadow:0 0 0 3px rgba(31,157,85,.18)}.bt-compacta .bt-fin i{width:20px;height:20px;margin-top:2.5px}.bt-compacta .bt-fin i svg{width:11px;height:11px}
.bt-cancelada .bt-relleno{background:#9CA3AF}.bt-cancelada .bt-hecho i{background:#9CA3AF;border-color:#9CA3AF}
.col-barra{display:flex;flex-direction:column;gap:2px;min-width:170px}
.bt-panel{padding:16px 22px}
/* Tarjeta de seguimiento */
.tt{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:18px 22px 16px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.tt-cab{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.tt-et{display:block;font-size:12px;color:var(--muted);font-weight:500}
.tt-num{font-weight:700;color:var(--navy);font-family:var(--f-tit);font-size:16px}
.tt-ver{white-space:nowrap;font-size:14px}
.tt-fecha{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px}.tt-fecha b{display:block;width:100%;font-size:19px;font-family:var(--f-tit)}.tt-fecha-et{color:var(--texto)}
.tt-check{display:inline-flex}
.tono-verde{color:var(--verde-2)}.tono-azul{color:var(--azul)}.tono-ambar{color:var(--ambar)}.tono-gris{color:#6B7280}
.tt-fecha.tono-verde b{color:var(--verde-2)}.tt-fecha .tt-fecha-et{color:var(--texto)}
.tt-sep{height:1px;background:#9AA3B5;margin:4px 0 2px}
.tt-estado{font-family:var(--f-tit);font-weight:800;font-size:30px;letter-spacing:-.01em;color:var(--texto)}
.tt-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 24px;margin-top:4px;font-size:14px}.tt-datos>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.listado .tarjetas:has(.tt){grid-template-columns:1fr;gap:0}.listado .tarjeta.clic:has(.tt){border:0;padding:0}
.tb-card .bt{margin-left:18px;margin-right:18px}
.parada .bt{margin-top:2px}
@media (max-width:900px){.bt.bt-con-et{margin:10px 14px 2px}.bt-et{font-size:0;}.bt-actual .bt-et,.bt-p:first-child .bt-et,.bt-p:last-child .bt-et{font-size:10.5px}.tt-estado{font-size:24px}.tt{padding:14px 16px}}

/* ---- 1.3.0 · aceptación del cliente y envíos por Guatex ---- */
.acep-caja{border:2px dashed #FCD68A;background:#FFFBEB;border-radius:12px;padding:10px 14px;margin:6px 0 10px}.acep-caja .check{padding:4px 0}
.acep-detalle{font-size:13px;color:#7A4E00;line-height:1.45;padding:6px 0 2px}
.acep-aviso{background:#FFFBEB;border:1px solid #FCD68A;border-left:5px solid var(--ambar);border-radius:10px;padding:10px 14px;font-size:14px;color:#7A4E00;margin:6px 0 12px;line-height:1.45}
.acep-ind{display:inline-flex;align-items:center;gap:6px;background:#FEF3C7;color:#92400E;font-weight:700;font-size:13px;border-radius:999px;padding:6px 12px}
.parada-espera{border-color:#FCD68A;background:#FFFDF5}
.guatex-caja{background:#EEF4FF;border:1px solid #BFD3F8;border-left:5px solid var(--azul);border-radius:10px;padding:9px 12px;font-size:13.5px;color:#1E3A8A;line-height:1.45;margin:6px 0 10px}
.guatex-form{margin:4px 0 10px}
.parada-guatex{border-color:#BFD3F8}
.pago-caja{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;background:#EEF4FF;border:1px solid #BFD3F8;border-radius:12px;padding:12px 16px;margin:10px 0}
.pago-caja.pendiente{background:#FFFBEB;border-color:#FCD68A}
.sub-tit{font-family:var(--f-tit);font-size:16px;color:var(--navy);margin:18px 0 8px}
.bt-muchos .bt-et{font-size:10.5px}
.bt-aceptacion.bt-actual i,.bt-aceptacion.bt-falta i{border-style:dashed}
.bt-pago i{border-radius:4px}
.tt-datos b.ambar{color:var(--ambar)}.tt-datos b.verde{color:var(--verde-2)}
@media (max-width:900px){.pago-caja{flex-direction:column;align-items:flex-start}.bt-muchos .bt-et{font-size:0}.bt-muchos .bt-actual .bt-et,.bt-muchos .bt-p:first-child .bt-et,.bt-muchos .bt-p:last-child .bt-et{font-size:10px}}