:root{
  /* Alfiler para la fila de agencia. Va aquí como dibujo y no como archivo:
     un icono suelto no vale una petición más. */
  --pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
  --ink:#131A26; --ink-2:#1E2836;
  --paper:#F4F6F3; --surface:#fff; --line:#E3E7E2; --line-2:#EDF0EC;
  --text:#131A26; --muted:#6B7684; --faint:#9AA3AE;
  --signal:#E8590C; --signal-bg:#FEF2E9; --signal-line:#F7C9A6;
  --transit:#2563EB; --transit-bg:#EDF2FE; --transit-line:#C5D8FB;
  --ok:#0E7C5A; --ok-bg:#E6F4EF; --ok-line:#BCE0D2;
  --danger:#C92A2A; --danger-bg:#FCEDED; --danger-line:#F0C2C2;
  --gold:#946200; --gold-bg:#FFF8E6; --gold-line:#F2DFA8;
  /* «En agencia» tiene color propio y FIJO: antes usaba --signal, que cada
     negocio pinta con su color de marca, y en los azules quedaba igual que
     «En tránsito». Dos columnas del tablero del mismo color no sirven. */
  --agencia:#D97706; --agencia-bg:#FEF5E7; --agencia-line:#F5DCA8;
  --violet:#6D3FD4; --violet-bg:#F1ECFC; --violet-line:#D6C7F5;
  --r:10px; --r-sm:7px;
  --fd:'Archivo',system-ui,sans-serif; --fu:'Inter',system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--fu);background:var(--paper);color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.num{font-variant-numeric:tabular-nums}
svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
svg.i.sm{width:13px;height:13px}
svg.i.lg{width:20px;height:20px}
:focus-visible{outline:2px solid var(--transit);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.app{display:flex;min-height:100vh}
.nav{width:214px;flex-shrink:0;background:var(--ink);color:#fff;padding:16px 0;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.brand{padding:0 16px 16px;display:flex;align-items:center;gap:9px;border-bottom:1px solid rgba(255,255,255,.09)}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--signal);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand .bn{font-family:var(--fd);font-weight:800;font-size:14px;letter-spacing:-.02em;line-height:1.1}
.brand .bs{font-size:9.5px;color:rgba(255,255,255,.4);letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.ng{padding:13px 12px 3px}
.ng span{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);font-weight:700;padding-left:8px}
.nav a:not(.nav-cta){display:flex;align-items:center;gap:9px;padding:7.5px 10px;margin:1px 12px;border-radius:var(--r-sm);color:rgba(255,255,255,.66);font-size:13px;font-weight:500;text-decoration:none;transition:.12s}
.nav a:not(.nav-cta):hover{background:rgba(255,255,255,.06);color:#fff}
.nav a:not(.nav-cta).on{background:rgba(255,255,255,.11);color:#fff;font-weight:600}
.nav a .cnt{margin-left:auto;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:20px;background:rgba(255,255,255,.14);font-variant-numeric:tabular-nums}
.nav a .cnt.al{background:var(--signal);color:#fff}
.nav a.nav-cta{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 24px);margin:13px 12px 2px;padding:0;height:33px;border-radius:8px;background:var(--signal);color:#fff;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:-.01em;transition:.12s}
.nav a.nav-cta svg{width:14px;height:14px;stroke-width:2.4}
.nav a.nav-cta:hover{background:#F26414;color:#fff}
.nav a.nav-cta:active{background:#D14E08}

/* configuración desplegable */
.nf{margin-top:auto;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.09)}
/* Quien está usando el panel, al pie de la barra. Reemplaza al recuadro del
   plan: el plan sigue ahí, debajo del nombre. */
.usr{position:relative;margin:8px 10px 0}
.usr-b{display:flex;align-items:center;gap:10px;width:100%;background:rgba(255,255,255,.06);border:1px solid transparent;border-radius:11px;padding:9px 10px;cursor:pointer;text-align:left;transition:.12s;font:inherit}
.usr-b:hover{background:rgba(255,255,255,.1)}
.usr.abierto .usr-b{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16)}
.usr-av{width:32px;height:32px;border-radius:9px;background:var(--signal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:14px;flex-shrink:0}
.usr-t{flex:1;min-width:0}
.usr-t b{display:block;font-size:12.5px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usr-t > span{display:block;font-size:11px;color:rgba(255,255,255,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usr-pt{width:7px;height:7px;border-radius:50%;background:var(--signal);flex-shrink:0}
.usr-v{color:rgba(255,255,255,.45);flex-shrink:0;transition:transform .15s}
.usr.abierto .usr-v{transform:rotate(180deg)}

.usr-menu{display:none;position:absolute;left:0;right:0;bottom:calc(100% + 7px);background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 14px 40px rgba(19,26,38,.28);padding:6px;z-index:60}
.usr.abierto .usr-menu{display:block}
.um-h{padding:11px 11px 12px;border-bottom:1px solid var(--line-2);margin-bottom:6px}
.um-h b{display:block;font-size:13.5px;font-weight:700;color:var(--text)}
.um-h > span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-pill{display:inline-block;margin-top:8px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:#F0E9FC;color:#6D3FD4}
.um-prueba{display:block;font-size:11px;color:var(--signal);margin-top:6px}
.nav .usr-menu a:not(.nav-cta){display:flex;align-items:center;gap:10px;padding:9px 11px;margin:0;border-radius:9px;font-size:13px;font-weight:500;color:var(--text);text-decoration:none;transition:.1s}
.nav .usr-menu a:not(.nav-cta):hover{background:var(--paper);color:var(--text)}
.nav .usr-menu a svg{color:var(--muted);flex-shrink:0}
.nav .usr-menu a .cnt{margin-left:auto;background:var(--paper);color:var(--muted)}
.nav .usr-menu a .cnt.al{background:var(--signal);color:#fff}
.um-sep{height:1px;background:var(--line-2);margin:6px 0}
.nav .usr-menu a.um-salir{color:var(--danger)}
.nav .usr-menu a.um-salir svg{color:var(--danger)}
.nav .usr-menu a.um-salir:hover{background:var(--danger-bg);color:var(--danger)}

.stage{flex:1;min-width:0}
.screen{display:none}.screen.on{display:block}
.top{background:var(--surface);border-bottom:1px solid var(--line);padding:13px 22px;display:flex;align-items:center;gap:13px;position:sticky;top:0;z-index:20}
.top h1{font-family:var(--fd);font-size:19px;font-weight:700;letter-spacing:-.02em}
.top .sub{font-size:12px;color:var(--muted);margin-top:1px}
.top .rt{margin-left:auto;display:flex;align-items:center;gap:8px}
.sync{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);background:var(--paper);padding:5px 10px;border-radius:20px;border:1px solid var(--line)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}
.dot.p{animation:p 2s ease-in-out infinite}@keyframes p{0%,100%{opacity:1}50%{opacity:.35}}
.body{padding:18px 22px 60px}

.ctl{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);font-size:13px;font-weight:500;transition:.12s;white-space:nowrap}
.ctl:hover{border-color:#C9D0C7;background:#FBFCFA}
.ctl.fill{background:var(--ink);color:#fff;border-color:var(--ink)}.ctl.fill:hover{background:var(--ink-2)}
.ctl.sig{background:var(--signal);color:#fff;border-color:var(--signal)}.ctl.sig:hover{filter:brightness(1.06)}
.ctl.wa{background:#25D366;color:#fff;border-color:#25D366}.ctl.wa:hover{filter:brightness(1.05)}
.ctl.sm{height:28px;padding:0 9px;font-size:12px}
.ctl.icon{padding:0;width:34px;justify-content:center}.ctl.icon.sm{width:28px}
.ctl.dang{color:var(--danger);border-color:var(--danger-line)}.ctl.dang:hover{background:var(--danger-bg)}
.qty{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;padding:0 7px;border-radius:6px;background:var(--paper);border:1px solid var(--line);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.tbl tr.more{cursor:default}
.tbl tr.more:hover{background:none}
.tbl tr.more td{text-align:center;padding:12px}
.ctl.print-cta{background:var(--ink);color:#fff;border-color:var(--ink);height:38px;padding:0 18px;font-size:14px;font-weight:600}
.ctl.print-cta:hover{background:var(--ink-2);border-color:var(--ink-2)}
.ctl:disabled{opacity:.42;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.seg button{padding:0 13px;height:34px;font-size:13px;font-weight:500;color:var(--muted);border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--ink);color:#fff;font-weight:600}
.srch{display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);min-width:220px;color:var(--faint)}
.srch input{border:none;outline:none;background:none;flex:1;font-size:13px;color:var(--text);min-width:0}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.ch{padding:12px 15px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
.ch h3{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.ch .hint{font-size:11.5px;color:var(--muted);font-weight:400}
.ch .rt{margin-left:auto;display:flex;gap:6px;align-items:center}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.kpi .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:5px}
.kpi .v{font-family:var(--fd);font-size:26px;font-weight:700;letter-spacing:-.03em;margin-top:5px;font-variant-numeric:tabular-nums;line-height:1}
.kpi .d{font-size:11.5px;color:var(--muted);margin-top:4px}
.kpi.warn{border-color:var(--signal-line);background:var(--signal-bg)}
.kpi.warn .v,.kpi.warn .k{color:var(--signal)}.kpi.warn .d{color:#B24708}
.kpi.good{border-color:var(--ok-line);background:var(--ok-bg)}
.kpi.good .v,.kpi.good .k{color:var(--ok)}.kpi.good .d{color:#2A6B54}

.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:9px 12px;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line);background:#FBFCFA;white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{cursor:pointer;transition:background .1s}
.tbl tbody tr:hover{background:#FAFBF9}
.tbl tbody tr.sel{background:var(--transit-bg)}
.tbl .r{text-align:right}
.who{display:flex;flex-direction:column;gap:1px}
.who b{font-weight:600;font-size:13px}
.who span{font-size:11.5px;color:var(--muted)}
.who b[style*="font-weight:500"]{font-size:12.5px}
.chk{width:16px;height:16px;border:1.5px solid #C4CBC2;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;background:#fff;flex-shrink:0}
.chk.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chk svg{width:11px;height:11px;stroke-width:3}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.pill .d2{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.p-new{background:#F1F3EF;color:#5C6670;border-color:var(--line)}
.p-gold{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-line)}
.p-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.p-tr{background:var(--transit-bg);color:var(--transit);border-color:var(--transit-line)}
.p-sig{background:var(--signal-bg);color:var(--signal);border-color:var(--signal-line)}
.p-ag{background:var(--agencia-bg);color:var(--agencia);border-color:var(--agencia-line)}
.p-dead{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.p-vio{background:var(--violet-bg);color:var(--violet);border-color:var(--violet-line)}
.days{font-family:var(--fm);font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:5px;background:#F1F3EF;color:var(--muted)}
.days.w{background:var(--signal-bg);color:var(--signal)}
.days.d{background:var(--danger-bg);color:var(--danger)}

.mp{display:inline-flex;flex-direction:column;gap:1px;line-height:1.3;text-align:right}
.mp b{font-size:12.5px;font-weight:700}
.mp span{font-size:11px;color:var(--muted)}
.mp.full b{color:var(--ok)}
.mp.full span{color:var(--ok);font-weight:600}
.mp.block b{color:var(--danger)}
.mp.block span{color:var(--danger)}
.mp.none b{color:var(--faint);font-weight:600}
.rowacts{display:inline-flex;gap:5px;align-items:center;justify-content:flex-end}

/* PAGO — el eje nuevo */
.pay{display:inline-flex;flex-direction:column;gap:1px;line-height:1.3}
.pay .pt{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.pay .ps{font-size:10.5px;font-weight:600;letter-spacing:.02em}
.pay.full .pt{color:var(--ok)}
.pay.full .ps{color:var(--ok)}
.pay.part .ps{color:var(--muted)}
.pay.block .pt{color:var(--danger)}
.pay.block .ps{color:var(--danger)}

.banner{display:flex;gap:12px;align-items:flex-start;padding:12px 15px;border-radius:var(--r);border:1px solid var(--signal-line);background:var(--signal-bg);margin-bottom:15px}
.banner .bi{color:var(--signal);flex-shrink:0;margin-top:1px}
.banner b{display:block;font-size:13.5px;color:#8C3A05;margin-bottom:2px}
.banner p{font-size:12.5px;color:#B24708;line-height:1.5}
.banner .rt{margin-left:auto;flex-shrink:0}

.split{display:grid;grid-template-columns:1fr 330px;gap:15px;align-items:start}
@media(max-width:1180px){.split{grid-template-columns:1fr}}
.split3{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:start}
@media(max-width:900px){.split3{grid-template-columns:1fr}}

/* El popup de claves es una tabla: necesita ancho, y su pie pegajoso funciona
   porque el que rueda es el cuerpo del modal.

   Va con `.modal` delante a proposito: `.modal{max-width:450px}` se define mas
   abajo en esta misma hoja y, a igualdad de peso, gana la ultima. Con la clase
   sola el popup salia con el ancho de un dialogo de confirmar. */
.modal.clv-modal{max-width:min(1080px,95vw)}
.clv-mb{max-height:72vh;overflow-y:auto}
.clv-cargando{padding:34px 10px;text-align:center;font-size:13px;color:var(--muted)}
/* La tabla rueda dentro de su tarjeta; el modal no se va de lado. */
.clv-mb .card{overflow-x:auto}
.clv-mb .tbl{min-width:620px}
/* Completar producto y monto: se apoya en los estilos de claves y solo añade lo
   suyo — el selector de producto, el paso de cantidad y la fila ya resuelta. */
.cmp-masivo{width:240px;font-size:12.5px}
.cmp-prod{width:100%;height:33px;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 8px;font-size:12.5px;background:#fff;font-family:inherit;color:var(--text)}
.cmp-step{width:96px}
.cmp-prec{width:88px;text-align:right}
.cmp-tot{white-space:nowrap;font-variant-numeric:tabular-nums}
/* Una fila lista se apaga un poco: lo que queda por hacer es lo que tiene que
   saltar a la vista, no lo que ya esta hecho. */
tr.cmp-listo .who b{color:var(--muted)}
tr.cmp-listo .cmp-tot{color:var(--ok)}

/* ── Alta manual de Despachar ────────────────────────────────────────────────
   Era una columna de quince campos apilados, cada uno con su etiqueta encima.
   Ahora se agrupa por lo que el vendedor decide de una vez -que vende, a quien,
   adonde, como cobra- y la cuenta va abajo, siempre a la vista. */
.imp-body.man{padding-bottom:0}
.man-sec{margin-bottom:15px}
.man-in{width:100%;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 12px;font-size:13px;font-family:inherit;color:var(--text);background:#fff;
  outline:none;transition:.12s}
.man-in:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(19,26,38,.06)}
.man-in::placeholder{color:var(--faint)}
select.man-in{cursor:pointer}
.man-fila{display:flex;gap:8px;margin-top:8px}
.man-fila > *{flex:1;min-width:0}
.man-envio{margin-top:0}
.man-envio select{flex:0 0 150px}
/* «Cliente recurrente»: es un atajo, no un boton de accion. */
.man-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;
  color:var(--azul,#0B63CE);background:none;border:0;cursor:pointer;font-family:inherit;padding:0}
.man-link:hover{text-decoration:underline}
.man-hallado{margin-top:7px;font-size:12px;color:var(--ok);font-weight:600}
/* La agencia elegida, con su direccion: el dato que decide si el paquete llega. */
.man-ag{display:flex;align-items:center;gap:8px;margin-top:8px;padding:10px 13px;
  border:1px solid var(--signal-line);background:var(--signal-bg);border-radius:var(--r-sm);
  font-size:12.5px;color:#8A3D06}
.man-ag b{font-weight:700}
.man-ag > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.man-cambiar{background:none;border:0;color:var(--signal);font-weight:700;font-size:12px;
  cursor:pointer;font-family:inherit;flex-shrink:0}
.man-cambiar:hover{text-decoration:underline}
.nvvar .varlbl{font-size:11.5px;color:var(--muted);align-self:center;margin-right:2px}
/* Etiqueta al lado del control, no encima: en el modal de editar la columna de
   etiquetas doblaba el alto del formulario para no decir nada nuevo. */
.fixlbl{font-size:12px;color:var(--muted);align-self:center}
#ovFix .nvprec input{width:70px}
/* Las variantes, separadas del nombre pero dentro de su bloque. */
#fixVar .nvvar{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
#fixVar .nvvar + .nvvar{margin-top:6px;padding-top:6px}
#ovFix .duo-b span{font-size:11px}
/* El panel de Despachar es una columna estrecha dentro de una pagina ancha, asi
   que las media queries del viewport no le sirven de nada: aca el selector SIEMPRE
   va en su propio renglon. Compartiendo fila con cantidad, precio y papelera se
   quedaba en 40px y no se leia el producto — que es el dato principal. */
.imp-body.man .nvfila{flex-wrap:wrap}
.imp-body.man .nvsel{flex:1 0 100%}
.imp-body.man .nvstep{flex:0 0 96px}
.imp-body.man .nvprec{flex:1;justify-content:flex-start}
.imp-body.man .nvdel{margin-left:auto}
/* Mientras no se elige producto, la linea no promete nada. */
.nvlinea.sinprod .nvprec input{color:var(--faint)}
.nvlinea.sinprod .nvsel{border-color:var(--signal-line)}
/* La cuenta y el boton, pegados al fondo del panel: se ven sin bajar. */
.man-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 0;
  border-top:1px solid var(--line)}
.man-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 0 14px}
.man-pie .note{flex:1;min-width:160px;font-size:12px;color:var(--muted)}
@media(max-width:560px){
  .duo.tres{grid-template-columns:1fr}
  .man-fila{flex-wrap:wrap}
  .man-envio select{flex:1 0 100%}
}

/* ── Claves de recojo ────────────────────────────────────────────────────────
   Vivian en un <style> dentro de su pantalla. Ahora la misma tabla se abre como
   popup dentro de Envios, y el HTML llega por fetch: si los estilos viajaran con
   el, entrarian DESPUES de pintarse la tabla y se veria saltar. */
/* El texto se lleva el sitio que sobre y el boton no lo estrangula: en un modal
   estrecho, sin esto, el aviso salia en una columna de tres palabras por linea. */
.clv-aviso{display:flex;align-items:center;gap:13px;background:var(--signal-bg);border:1px solid var(--signal-line);border-radius:var(--r);padding:14px 16px;margin-bottom:14px;flex-wrap:wrap}
.clv-aviso > div:nth-child(2){flex:1 1 260px;min-width:0}
.clv-aviso .rt{flex-shrink:0}
  .clv-aviso .ico{width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid var(--signal-line);display:flex;align-items:center;justify-content:center;color:var(--signal);flex-shrink:0}
  .clv-aviso b{display:block;font-size:13.5px;color:#8A3D06}
  .clv-aviso span{font-size:12px;color:#A2551A}
  .clv-aviso .rt{margin-left:auto}

  .clv-barra{display:flex;align-items:center;gap:11px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 14px;margin-bottom:13px}
  .clv-barra .lab{font-size:12.5px;color:var(--muted)}
  .clv-barra .cnt{font-size:13px;font-weight:600}
  .clv-masiva{width:130px;font-family:var(--fm);font-size:13.5px;letter-spacing:.04em}

  /* La columna de claves es donde se trabaja: se destaca del resto. */
  .tbl td.clv{background:#FBFCFF}
  .clv-in{width:112px;height:33px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:0 10px;font-family:var(--fm);font-size:13px;color:var(--transit);font-weight:600;letter-spacing:.04em;outline:none}
  .clv-in:focus{border-color:var(--transit);box-shadow:0 0 0 3px var(--transit-bg)}
  /* Distinta a la masiva: no es un error, pero conviene que salte a la vista. */
  .clv-in.distinta{border-color:var(--signal-line);background:var(--signal-bg);color:#B24708}
  .clv-in.vacia{color:var(--faint)}

  .clv-pie{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-top-width:2px;border-radius:var(--r);padding:11px 15px;margin-top:13px;box-shadow:0 -6px 20px rgba(19,26,38,.07)}
  .clv-pie .dato{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
  .clv-pie .dato b{color:var(--text)}
  .clv-pie .ok{color:var(--ok)}
  .clv-pie .warn{color:var(--signal)}
  .clv-pie .rt{margin-left:auto;display:flex;gap:8px;align-items:center}
  .chq{width:16px;height:16px;accent-color:var(--transit);cursor:pointer}

/* KANBAN */
.kb{display:flex;gap:11px;overflow-x:auto;padding-bottom:12px;align-items:flex-start}
/* Las 6 columnas se reparten el ancho para que el tablero entre entero en
   pantalla; recien cuando ya no caben (monitor chico) vuelve el scroll. */
.kcol{flex:1 1 0;min-width:198px;background:#EFF2ED;border-radius:var(--r);border:1px solid var(--line);
  /* La tarjeta se mide contra SU columna, no contra la ventana: en escritorio la
     columna es un sexto del tablero y en el movil es casi toda la pantalla, y en
     los dos casos tiene que leerse igual de bien. De ahi las medidas en `cqi`
     -1% del ancho de la columna- en vez de pixeles fijos. */
  container-type:inline-size}
.kch{padding:10px 12px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--line)}
.kch .kd{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.kch b{font-size:12px;font-weight:700;letter-spacing:-.01em}
.kch .kn{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);background:#fff;padding:1px 7px;border-radius:20px;border:1px solid var(--line);font-variant-numeric:tabular-nums}
/* La altura la manda la PANTALLA, no un numero fijo: con 520px el tablero
   terminaba a media altura del monitor, dejaba medio patio en blanco debajo y
   cortaba una tarjeta por la mitad. Ahora se estira hasta donde llega el alto
   util -unas cinco tarjetas en un portatil, mas en un monitor- y el scroll
   engancha al borde de cada tarjeta para no dejar ninguna partida. */
.kbody{padding:8px;display:flex;flex-direction:column;gap:7px;min-height:70px;
  max-height:clamp(300px, calc(100vh - 300px), 1200px);overflow-y:auto;
  scroll-snap-type:y proximity;overscroll-behavior:contain}
/* Y las tarjetas NO se encogen. En un contenedor flex los hijos se aplastan por
   defecto para caber: con 60 envios en una columna de 780px cada tarjeta quedaba
   en una franja de 12px, y en las columnas cortas se comia el ultimo renglon —la
   clave de recojo— porque la tarjeta recorta lo que sobra. */
.kbody > *{flex-shrink:0}
/* ── La tarjeta del tablero ──────────────────────────────────────────────────
   Tres bloques separados por una linea: QUIEN (nombre y contacto), QUE (producto
   y destino) y COMO VA (guia, monto, clave y fecha). Es el orden en que se lee
   una tarjeta cuando hay sesenta en la columna, y las lineas evitan tener que
   separarlo todo con espacio -que era lo que la hacia altisima-. */
.kcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:0;transition:.12s;scroll-snap-align:start;cursor:auto;user-select:text;
  overflow:hidden}
.kcard:hover{border-color:#C4CBC2;box-shadow:0 2px 6px rgba(19,26,38,.07)}
.kcard.drag{opacity:.4}
/* La tarjeta marcada tiene que cantar: marcar es lo que se hace para todo. */
.kcard.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

.kb1{display:flex;align-items:center;gap:clamp(6px,2.6cqi,9px);
  padding:clamp(9px,3.4cqi,12px) clamp(9px,3.6cqi,13px) clamp(6px,2.4cqi,9px)}
.kb1 .knom{flex:1;min-width:0;font-size:clamp(12.5px,4.6cqi,15px);font-weight:700;
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcard .knum{flex-shrink:0;font-size:clamp(10px,3.4cqi,11.5px);font-weight:700;
  color:var(--muted);background:var(--paper);border:1px solid var(--line);
  border-radius:6px;padding:2px clamp(5px,2.2cqi,8px);font-variant-numeric:tabular-nums}
.kcard .pick{flex-shrink:0;width:clamp(15px,5cqi,18px);height:clamp(15px,5cqi,18px);
  cursor:pointer;margin:0}

/* La guia: se abre sin salir del tablero. Apagada mientras no se ha mirado, azul
   en cuanto si — la marca de «a este ya le mande su guia». */
.kguia{width:clamp(24px,8.5cqi,30px);height:clamp(24px,8.5cqi,30px);flex-shrink:0;
  border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--faint);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;transition:.12s;padding:0}
.kguia:hover{border-color:var(--transit);color:var(--transit);background:var(--transit-bg)}
.kguia.vista{background:var(--transit);border-color:var(--transit);color:#fff}
/* Sin PDF no hay nada que abrir: se ve, pero apagado y sin manos. */
.kguia.sin{opacity:.3;cursor:default}

.kdatos{display:flex;gap:clamp(8px,4cqi,14px);flex-wrap:wrap;
  padding:0 clamp(9px,3.6cqi,13px) clamp(8px,3.2cqi,11px);
  font-size:clamp(11px,3.7cqi,12.5px);color:var(--muted)}
.kdatos > span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.kdatos .i{width:12px;height:12px;flex-shrink:0;color:var(--faint)}
.kdatos .mono{font-size:clamp(11px,3.7cqi,12.5px);letter-spacing:-.01em;color:var(--text)}
.kdatos .falta{color:var(--signal)}

.kb2,.kb3{padding:clamp(8px,3.2cqi,11px) clamp(9px,3.6cqi,13px);
  border-top:1px solid var(--line-2)}
.kprod{display:flex;align-items:center;gap:8px}
.kprod b{flex:1;min-width:0;font-size:clamp(11.5px,4.2cqi,13.5px);font-weight:700;
  line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kprod .porver{font-weight:500;color:var(--faint)}
/* La cantidad va delante del nombre: es lo primero que se comprueba al armar el
   paquete. Al final de la linea habia que leerse el nombre entero para llegar. */
.kx{flex-shrink:0;font-size:clamp(10px,3.4cqi,11.5px);font-weight:700;
  color:var(--signal);background:var(--signal-bg);border-radius:6px;padding:1px 7px;
  font-variant-numeric:tabular-nums}
.cantx{display:inline-block;font-size:10.5px;font-weight:700;color:var(--signal);
  background:var(--signal-bg);border-radius:5px;padding:0 6px;
  font-variant-numeric:tabular-nums;vertical-align:1px}
.kvar{display:block;margin-top:2px;font-size:11px;color:var(--muted)}
.kag{display:flex;align-items:center;gap:5px;margin-top:4px;
  font-size:clamp(11px,3.7cqi,12.5px);color:var(--muted);min-width:0}
.kag .i{width:12px;height:12px;flex-shrink:0;color:var(--faint)}
.kag > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.kfila{display:flex;align-items:center;gap:8px}
.kfila + .kfila{margin-top:7px}
.kcard .kg{display:inline-flex;align-items:center;gap:5px;flex:1;min-width:0;
  font-size:11px;color:var(--muted)}
.kcard .kg .i{width:12px;height:12px;flex-shrink:0;color:var(--faint)}
.kcard .kg .mono{font-size:clamp(10.5px,3.5cqi,12px);letter-spacing:-.02em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.kcard .kamt{flex-shrink:0;font-size:clamp(12px,4.4cqi,14.5px);font-weight:800;
  font-variant-numeric:tabular-nums}
.kcard .kamt.free{color:var(--ok)}
.kfecha{display:inline-flex;align-items:center;gap:5px;margin-left:auto;flex-shrink:0;
  font-size:10.5px;color:var(--muted)}
.kfecha .i{width:12px;height:12px;color:var(--faint)}
/* La clave es el dato que el cliente da en la agencia: grande y de una pieza. */
.kclave .lbl{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;color:var(--faint);font-family:var(--fu)}
.kclave b{display:block;font-size:clamp(13px,5cqi,17px);font-weight:700;letter-spacing:.02em}
.kcard .tags{padding:0}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:10px;font-weight:700;padding:1.5px 7px;border-radius:5px;letter-spacing:.01em}
.t-urg{background:var(--signal-bg);color:var(--signal)}
.t-old{background:var(--danger);color:#fff}

/* ---- PANEL LATERAL ---- */
.drawer-ov{position:fixed;inset:0;background:rgba(19,26,38,.4);z-index:90;display:none;backdrop-filter:blur(2px)}
.drawer-ov.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:390px;max-width:92vw;background:#fff;z-index:95;box-shadow:-12px 0 40px rgba(19,26,38,.18);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease}
.drawer.on{transform:translateX(0)}
.drw-h{padding:17px 18px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}
.drw-h h3{font-family:var(--fd);font-size:16px;font-weight:700;letter-spacing:-.02em}
.drw-h span{font-size:12.5px;color:var(--muted);display:block;margin-top:2px}
.drw-h .ctl{margin-left:auto;flex-shrink:0}
.drw-b{flex:1;overflow-y:auto;padding:14px 18px 24px;display:flex;flex-direction:column;gap:8px}
.lk{border:1px solid var(--line);border-radius:var(--r);padding:12px 13px}
.lk-t{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lk-t b{font-size:13px;font-weight:700}
.lk p{font-size:12.5px;color:var(--muted);margin-top:5px}
.lk-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line-2)}
.lk-f span{font-size:11.5px;color:var(--faint)}
.t-freq{background:var(--ok-bg);color:var(--ok)}
.t-frag{background:var(--gold-bg);color:var(--gold)}
.t-rec{background:var(--violet-bg);color:var(--violet)}
.t-pre{background:var(--ok-bg);color:var(--ok)}
.kbody .kempty{font-size:11.5px;color:var(--faint);text-align:center;padding:16px 8px}

/* CATALOGO */
.grid-p{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.12s;cursor:pointer}
.prod:hover{border-color:#C4CBC2;box-shadow:0 3px 10px rgba(19,26,38,.07)}
.prod .pimg{aspect-ratio:1/1;background:repeating-linear-gradient(45deg,#E8EBE6,#E8EBE6 7px,#F2F4F0 7px,#F2F4F0 14px);display:flex;align-items:center;justify-content:center;color:var(--faint);position:relative}
.prod .pst{position:absolute;top:8px;right:8px}
.prod .pb{padding:11px 12px}
.prod .pb b{font-size:13px;font-weight:600;display:block;line-height:1.3}
.prod .psub2{font-size:11.5px;color:var(--muted);margin-top:1px;display:block}
.prod .prow{display:flex;align-items:baseline;gap:7px;margin-top:6px}
.prod .pprice{font-family:var(--fd);font-size:19px;font-weight:700;letter-spacing:-.02em}
.prod .pvars{display:flex;gap:4px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.prod .pvar{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:5px;background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.prod .pnone{font-size:11px;color:var(--faint)}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.st{padding:13px 14px;border-right:1px solid var(--line-2)}
.st:last-child{border-right:none}
.st .sn{width:21px;height:21px;border-radius:50%;background:var(--line);color:var(--muted);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:7px}
.st.done .sn{background:var(--ok);color:#fff}
.st.now .sn{background:var(--ink);color:#fff}
.st.now{background:#FBFCFA}
.st b{font-size:12.5px;display:block;margin-bottom:2px}
.st p{font-size:11.5px;color:var(--muted);line-height:1.45}

/* TIMELINE */
.tl{padding:4px 15px 14px}
.tli{display:flex;gap:11px;position:relative;padding-bottom:15px}
.tli:last-child{padding-bottom:0}
.tli::before{content:'';position:absolute;left:9px;top:21px;bottom:0;width:1.5px;background:var(--line)}
.tli:last-child::before{display:none}
.tli.done::before{background:var(--ok)}
.tld{width:19px;height:19px;border-radius:50%;background:#fff;border:2px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center;z-index:1}
.tli.done .tld{background:var(--ok);border-color:var(--ok);color:#fff}
.tli.now .tld{background:var(--transit);border-color:var(--transit);color:#fff;box-shadow:0 0 0 3.5px var(--transit-bg)}
.tld svg{width:11px;height:11px;stroke-width:3}
.tlb b{font-size:12.5px;font-weight:600;display:block}
.tlb span{font-size:11.5px;color:var(--muted)}
.tli.pend .tlb b{color:var(--faint);font-weight:500}

.dl{padding:3px 15px 13px}
.dlr{display:flex;justify-content:space-between;gap:14px;padding:7.5px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.dlr:last-child{border-bottom:none}
.dlr dt{color:var(--muted);flex-shrink:0}
.dlr dd{text-align:right;font-weight:500}

/* FORMS / CONFIG */
.fld{margin-bottom:13px}
.fld label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.fld input,.fld select{width:100%;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:13px;outline:none}
.fld textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:13px;line-height:1.5;outline:none;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--ink)}
.fld .fh{font-size:11px;color:var(--faint);margin-top:4px;line-height:1.45}
.tgr{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.tgr:last-child{border-bottom:none}
.tgr .tt{font-size:13px;font-weight:500}
.tgr .ts{font-size:11.5px;color:var(--muted);margin-top:1px;line-height:1.45}
.tg{width:34px;height:19px;border-radius:20px;background:#D3D9D1;position:relative;transition:.15s;flex-shrink:0;cursor:pointer}
.tg::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tg.on{background:var(--ok)}.tg.on::after{transform:translateX(15px)}
.sws{display:flex;gap:6px}
.sw{width:26px;height:26px;border-radius:6px;border:2px solid transparent;cursor:pointer}
.sw.on{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset}

/* ── ROTULO: el modelo del previsualizador ─────────────────────────────────
   Se dibuja con las mismas medidas que `despacho/rotulos_imprimir.html`, en
   pixeles equivalentes a sus puntos (1pt = 4/3 px) y a 1cm = 37.8px. Lo que se
   ve en pantalla es, literalmente, lo que sale de la impresora. */
.rotwrap{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:stretch}
@media(max-width:980px){.rotwrap{grid-template-columns:1fr}}
.rot{background:#fff;color:#000;border:1px solid #C8CDC4;border-radius:3px;overflow:hidden;position:relative;display:flex;flex-direction:column}
/* Las secciones se reparten el alto sobrante: un 10x15 con poco contenido no
   deja medio rotulo en blanco, y un 10x7 se aprieta sin recortar nada. */
.rot .rsec{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.rtop{display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1.5px solid #000;flex-shrink:0}
.rlogo{width:32px;height:32px;border-radius:6px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:13px;flex-shrink:0;overflow:hidden}
.rlogo img{width:100%;height:100%;object-fit:cover}
.rid{min-width:0;overflow:hidden}
.rid b{font-family:var(--fd);font-size:16px;font-weight:800;letter-spacing:-.02em;display:block;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rid span{display:block;font-size:8.7px;color:#555;letter-spacing:.06em;text-transform:uppercase;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rid i{font-style:normal}
.rg{margin-left:auto;text-align:right;flex-shrink:0}
.rg span{display:block;font-size:8px;color:#555;letter-spacing:.07em;font-weight:700}
.rg b{font-family:var(--fm);font-size:16px;font-weight:700}
.rsec{padding:9px 11px;border-bottom:1px solid #C9C9C9}
.rl{font-size:8.7px;text-transform:uppercase;letter-spacing:.09em;color:#555;font-weight:700;margin-bottom:3px}
.rv{font-size:14px;font-weight:600;line-height:1.3}
.rv.big{font-size:18.7px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;line-height:1.15}
.rv.chico{font-size:12px}
.rsm{font-size:11.3px;color:#333;margin-top:2px}
.rdest{background:#F0F0F0}
.rnota{padding:10px;text-align:center;border-top:1.5px solid #000;background:#F0F0F0;flex-shrink:0}
.rnota span{font-family:var(--fd);font-size:14.7px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.rwm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transform:rotate(-20deg);font-family:var(--fd);font-weight:800;font-size:17px;color:rgba(0,0,0,.09);letter-spacing:.08em;text-align:center}

/* Hoja A4 de verdad: 21×29.7cm con margen de 0.4 y calle de 0.2, que es lo que
   hace la plantilla de impresion. Cada celda cae en 10cm, asi que el rotulo de
   dentro tiene el mismo tamano de letra que suelto. */
.hoja{width:100%;height:100%;background:#fff;padding:15.1px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:7.6px;box-shadow:0 14px 40px rgba(19,26,38,.18)}
.hoja .rot{border:1px dashed #C3C8BE;border-radius:2px}
.rpay.nocobrar{background:#0E7C5A;color:#fff}
.rpay.nocobrar span{color:rgba(255,255,255,.7)}
.rpay.nocobrar b{font-size:15px}

/* PHONES */
.phones{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;padding:6px 0 18px}
.pcol{width:382px;max-width:100%}
.pcap{text-align:center;margin-bottom:11px}
.pcap b{font-family:var(--fd);font-size:14.5px;font-weight:700;display:block}
.pcap span{font-size:12px;color:var(--muted)}
.phone{border:9px solid var(--ink);border-radius:32px;overflow:hidden;background:#fff;box-shadow:0 12px 32px rgba(19,26,38,.16)}
.pbar{background:var(--ink);height:21px;display:flex;align-items:center;justify-content:center}
.pbar i{width:70px;height:5px;border-radius:20px;background:rgba(255,255,255,.28)}
.psc{height:640px;overflow-y:auto;background:#fff}
.psc::-webkit-scrollbar{width:0}
.cfh{padding:14px 17px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.cflogo{width:36px;height:36px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:15px;flex-shrink:0}
.cfh b{font-family:var(--fd);font-size:14px;font-weight:800;display:block;line-height:1.15}
.cfh span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.cfb{padding:15px 17px 24px}
.osum{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:15px}
.ost{display:flex;gap:11px;padding:11px;align-items:center}
.osimg{width:50px;height:50px;border-radius:8px;background:repeating-linear-gradient(45deg,#E8EBE6,#E8EBE6 6px,#F2F4F0 6px,#F2F4F0 12px);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.ost b{font-size:13px;font-weight:600;display:block;line-height:1.3}
.ost span{font-size:11.5px;color:var(--muted)}
.opay{background:#FBFCFA;border-top:1px solid var(--line-2);padding:10px 11px}
.opl{display:flex;justify-content:space-between;font-size:12px;padding:2px 0;color:var(--muted)}
.opl.tot{border-top:1px dashed var(--line);margin-top:6px;padding-top:7px;color:var(--text)}
.opl.tot .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted);align-self:center}
.opl.tot .amt{font-family:var(--fd);font-size:19px;font-weight:800;letter-spacing:-.02em}
.opl.tot .amt.free{color:var(--ok);font-size:15px}
.cut{display:flex;gap:10px;align-items:center;background:var(--signal-bg);border:1px solid var(--signal-line);border-radius:var(--r);padding:10px 12px;margin-bottom:16px}
.cut svg{color:var(--signal);flex-shrink:0}
.cut b{font-size:12.5px;color:#8C3A05;display:block}
.cut span{font-size:11.5px;color:#B24708;line-height:1.4}
.cff{margin-bottom:14px}
.cff>label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.cff>label i{color:var(--signal);font-style:normal}
.cin{width:100%;height:45px;border:1px solid var(--line);border-radius:var(--r);padding:0 13px;font-size:14.5px;outline:none;background:#fff;transition:.12s}
.cin:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(19,26,38,.06)}
.cin::placeholder{color:var(--faint)}
.cph{display:flex;align-items:center;height:45px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.cph .cc{padding:0 11px;height:100%;display:flex;align-items:center;background:#FBFCFA;border-right:1px solid var(--line);font-size:14px;color:var(--muted);font-weight:600;flex-shrink:0}
.cph input{border:none;outline:none;flex:1;padding:0 13px;font-size:14.5px;min-width:0;height:100%}
.chint{font-size:11.5px;color:var(--muted);margin-top:5px;display:flex;align-items:flex-start;gap:5px;line-height:1.45}
.chint svg{flex-shrink:0;margin-top:1px}
.chint.ok{color:var(--ok)}
.casc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.csel{position:relative}
.csel select{width:100%;height:45px;border:1px solid var(--line);border-radius:var(--r);padding:0 32px 0 13px;font-size:14px;outline:none;background:#fff;appearance:none;cursor:pointer}
.csel .cv{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.agp{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.agi{display:flex;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line-2);cursor:pointer;align-items:flex-start}
.agi:last-child{border-bottom:none}
.agi.on{background:var(--transit-bg)}
.agr{width:18px;height:18px;border-radius:50%;border:2px solid #C4CBC2;flex-shrink:0;margin-top:1px}
.agi.on .agr{border-color:var(--transit);border-width:5px}
.agi b{font-size:13px;font-weight:600;display:block}
.agi p{font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:1px}
.agi .tg2{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;background:var(--ok-bg);color:var(--ok);margin-top:5px}
.csub{width:100%;height:50px;background:var(--ink);color:#fff;border-radius:var(--r);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:5px}
.csub:hover{background:var(--ink-2)}
.cleg{font-size:10.5px;color:var(--faint);text-align:center;margin-top:10px;line-height:1.5}

.tkh{padding:17px;text-align:center;border-bottom:1px solid var(--line)}
.tklogo{width:42px;height:42px;border-radius:11px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:17px;margin:0 auto 8px}
.tkh b{font-family:var(--fd);font-size:15px;font-weight:800;display:block}
.tkh span{font-size:11.5px;color:var(--muted)}
.tkhero{padding:22px 17px;text-align:center;background:var(--transit-bg);border-bottom:1px solid var(--transit-line)}
.tkst{display:inline-flex;align-items:center;gap:6px;background:var(--transit);color:#fff;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.tkhero h2{font-family:var(--fd);font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.tkhero p{font-size:12.5px;color:#3E5C9E;margin-top:6px}
.tkcode{display:inline-flex;align-items:center;gap:7px;margin-top:12px;background:#fff;border:1px solid var(--transit-line);padding:6px 12px;border-radius:8px}
.tkcode span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.tkcode b{font-family:var(--fm);font-size:13px;font-weight:700}
.tks{padding:17px}
.tks+.tks{border-top:1px solid var(--line)}
.tks h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-bottom:11px}
.pbox{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.prow{display:flex;gap:11px;padding:11px 12px;border-bottom:1px solid var(--line-2);align-items:flex-start}
.prow:last-child{border-bottom:none}
.prow svg{color:var(--muted);flex-shrink:0;margin-top:1px}
.prow .pl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.prow .pv{font-size:13.5px;font-weight:600;margin-top:1px;line-height:1.35}
.prow .pv small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:1px}
.pstrip{background:var(--ink);color:#fff;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;border-radius:var(--r);margin-top:10px}
.pstrip.free{background:var(--ok)}
.pstrip .pl{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.55);font-weight:700}
.pstrip .pv{font-size:12px;color:rgba(255,255,255,.75);margin-top:2px}
.pstrip .amt{font-family:var(--fd);font-size:22px;font-weight:800;letter-spacing:-.02em}
.pstrip.free .amt{font-size:17px}
.tkhelp{padding:17px;background:#FBFCFA;border-top:1px solid var(--line);text-align:center}
.tkhelp p{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.tkwa{display:flex;align-items:center;justify-content:center;gap:8px;background:#25D366;color:#fff;height:45px;border-radius:var(--r);font-size:14px;font-weight:600;width:100%}
.tkfoot{padding:13px 17px;text-align:center;font-size:10.5px;color:var(--faint);line-height:1.5}

.ov{position:fixed;inset:0;background:rgba(19,26,38,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(2px);overflow-y:auto}
.ov.on{display:flex}
/* Columna con el cuerpo scrolleable: el pie (donde vive el boton que crea el
   link) tiene que quedar SIEMPRE alcanzable, tambien en un celular. */
.modal{background:#fff;border-radius:14px;width:100%;max-width:450px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.28);display:flex;flex-direction:column;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px)}
.modal > form{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.mh,.mf{flex-shrink:0}
.mh{padding:14px 17px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.mh h3{font-family:var(--fd);font-size:15px;font-weight:700}
.mh .rt{margin-left:auto}
.mb{padding:15px 17px;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}
.wap{background:#E6DDD4;border-radius:var(--r);padding:13px;margin-bottom:13px}
.wab{background:#D9FDD3;border-radius:9px;padding:9px 11px;font-size:13.5px;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.1)}
.wab .lnk{color:#0A7CFF;text-decoration:underline;word-break:break-all}
.wab .tm{display:block;text-align:right;font-size:10px;color:#667781;margin-top:3px}
.wae{width:100%;min-height:92px;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;font-size:13px;font-family:inherit;resize:vertical;outline:none;line-height:1.5}
.wae:focus{border-color:var(--ink)}
.vars{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.var{font-family:var(--fm);font-size:11px;padding:2px 7px;border-radius:5px;background:var(--paper);border:1px solid var(--line);color:var(--muted);cursor:pointer}
.var:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.mf{padding:12px 17px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;background:#FBFCFA}
.mf .note{font-size:11.5px;color:var(--muted);flex:1;line-height:1.4}
.pitem,.payopt{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;cursor:pointer;transition:.12s;background:#fff}
.pitem:hover,.payopt:hover{border-color:#C4CBC2}
.pitem.on,.payopt.on{border-color:var(--transit);background:var(--transit-bg)}
.pitem .agr,.payopt .agr{width:17px;height:17px;border-radius:50%;border:2px solid #C4CBC2;flex-shrink:0}
.pitem.on .agr,.payopt.on .agr{border-color:var(--transit);border-width:5px}
.pitem .pth{width:34px;height:34px;border-radius:6px;background:repeating-linear-gradient(45deg,#E8EBE6,#E8EBE6 5px,#F2F4F0 5px,#F2F4F0 10px);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.vchip{font-size:12px;font-weight:600;padding:6px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;cursor:pointer;transition:.12s}
.vchip:hover{border-color:#C4CBC2}
.vchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.nvsec{margin-bottom:15px}
/* combo de producto */
.combo{position:relative}
.combo-in{display:flex;align-items:center;gap:9px;height:44px;padding:0 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:text;transition:.12s}
.combo-in:hover{border-color:#C4CBC2}
.combo.open .combo-in{border-color:var(--ink);box-shadow:0 0 0 3px rgba(19,26,38,.06)}
.combo-in input{flex:1;border:none;outline:none;background:none;font-size:14px;min-width:0}
.combo.open .cvi{transform:rotate(180deg)}
.combo-pop{position:absolute;top:48px;left:0;right:0;z-index:60;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 10px 30px rgba(19,26,38,.15);max-height:224px;overflow-y:auto;display:none;padding:5px}
.combo.open .combo-pop{display:block}
.copt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;cursor:pointer;transition:.1s}
.copt:hover{background:var(--paper)}
.copt .pth{width:32px;height:32px;border-radius:6px;background:repeating-linear-gradient(45deg,#E8EBE6,#E8EBE6 5px,#F2F4F0 5px,#F2F4F0 10px);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.copt b{font-size:13px;font-weight:600;display:block}
.copt span{font-size:11.5px;color:var(--muted)}
.copt > div{flex:1;min-width:0}
.copt .pp{font-size:13.5px;font-weight:700;flex-shrink:0}
.cnone{padding:14px;text-align:center;font-size:12.5px;color:var(--faint)}
.chosen{display:flex;align-items:center;gap:11px;border:1px solid var(--transit-line);background:var(--transit-bg);border-radius:var(--r-sm);padding:10px 12px;margin-top:7px}
.chosen .pth{width:34px;height:34px;border-radius:6px;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.chosen b{font-size:13px;font-weight:600;display:block}
.chosen span{font-size:11.5px;color:var(--muted)}
.chosen > div{flex:1;min-width:0}
.chosen .pp{font-size:14px;font-weight:700}
/* duo horizontal */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.duo-b{text-align:left;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;background:#fff;transition:.12s}
.duo-b:hover{border-color:#C4CBC2}
.duo-b.on{border-color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.duo-b b{font-size:13px;font-weight:700;display:block;margin-bottom:2px}
.duo-b span{font-size:11.5px;color:var(--muted);line-height:1.35;display:block}
.duo-b.on b{color:var(--ink)}
.advrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;padding:9px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:#FBFCFA;font-size:12.5px;color:var(--muted)}
.advin{display:flex;align-items:center;gap:3px;font-size:13.5px;font-weight:700;color:var(--text)}
.advin input{width:46px;border:none;border-bottom:1.5px solid var(--muted);background:none;font-size:13.5px;font-weight:700;text-align:center;outline:none;font-variant-numeric:tabular-nums;padding:1px 0}
.advin input:focus{border-color:var(--ink)}

/* ---- EDITOR DE PRODUCTO ---- */
.pd-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:4px}
.pd-img{width:92px;height:92px;border-radius:var(--r);border:1.5px dashed #C9D0C7;background:#FBFCFA;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;flex-shrink:0;color:var(--faint);transition:.12s}
.pd-img:hover{border-color:var(--ink);color:var(--muted)}
.pd-img span{font-size:11px;font-weight:600}
.pd-sec{border-top:1px solid var(--line-2);padding-top:15px;margin-top:15px}
.pd-sec.int{background:#FBFCFA;margin:15px -18px 0;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.pd-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pd-hint{font-size:11.5px;color:var(--faint);margin-left:auto}
.pd-priv{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:2px 9px;margin-left:auto}
.pd-note{font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.45}
.axis{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;overflow:hidden}
.ax-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#FBFCFA}
.ax-h b{font-size:13px;font-weight:600}
.ax-b{padding:11px 12px;border-top:1px solid var(--line-2)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px;min-height:26px}
.chips:empty{display:none}
.chp{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 8px 4px 11px;border-radius:6px;background:var(--ink);color:#fff}
.chp button{color:rgba(255,255,255,.6);display:flex;padding:1px}
.chp button:hover{color:#fff}
.chp svg{width:11px;height:11px;stroke-width:2.5}
.chip-add{display:flex;gap:6px}
.chip-add input{flex:1;height:32px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 10px;font-size:12.5px;outline:none;min-width:0}
.chip-add input:focus{border-color:var(--ink)}
.sizes{display:flex;gap:6px;flex-wrap:wrap}
.sz{padding:7px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:12.5px;font-weight:600;color:var(--muted);transition:.12s}
.sz:hover{border-color:#C4CBC2;color:var(--text)}
.sz.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.szmini{display:inline-flex;align-items:center;justify-content:center;min-width:26px;padding:2px 7px;border-radius:5px;background:var(--paper);border:1px solid var(--line);font-size:11.5px;font-weight:700}
.szmini.warn{background:var(--signal-bg);border-color:var(--signal-line);color:var(--signal)}

/* ---- CARGA MASIVA ---- */
.bk-step{display:flex;align-items:center;gap:11px}
.bk-n{width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bk-step b{font-size:13px;display:block}
.bk-step p{font-size:11.5px;color:var(--muted);margin-top:1px}
.bk-cols{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0 0 33px}
.bkc{font-family:var(--fm);font-size:11px;padding:3px 8px;border-radius:5px;background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.bkc.int{background:var(--ink);color:#fff;border-color:var(--ink)}
.bk-ok{display:flex;align-items:center;gap:10px;background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--r-sm);padding:10px 12px;color:var(--ok)}
.bk-ok b{font-size:13px;display:block}
.bk-ok span{font-size:11.5px;color:#2A6B54}
.nvrow{display:flex;gap:14px;align-items:flex-start}
.nvlbl{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--muted);margin-bottom:7px}
.payopt b{font-size:13px;display:block}
.payopt span{font-size:11.5px;color:var(--muted)}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);height:34px;overflow:hidden}
.stepper button{width:32px;height:100%;font-size:16px;color:var(--muted);transition:.12s}
.stepper button:hover{background:var(--paper);color:var(--text)}
.stepper span{flex:1;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:32px}
/* ── Modal «Crear link»: varias lineas de producto ───────────────────────────
   Cada linea es select + cantidad + su total + papelera, en un solo renglon. El
   select se lleva lo que sobre para que un nombre largo no empuje al resto. */
.nvic{width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nvsub{font-size:11.5px;color:var(--muted)}
.nvbody{max-height:58vh;overflow-y:auto}
.nvhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
.nvhead .nvlbl{margin-bottom:0}
.nvcount{font-size:11.5px;color:var(--muted)}
.nvlinea{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;
  background:#fff;margin-bottom:7px}
.nvfila{display:flex;gap:8px;align-items:center}
.nvsel{flex:1;min-width:0;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 9px;font-size:12.5px;background:#fff;font-family:inherit;color:var(--text)}
.nvstep{width:104px;flex-shrink:0}
/* El precio es un campo, no un rotulo: se cambia para ESTE pedido sin tocar el
   catalogo. Se ve como texto hasta que se toca, para no llenar la fila de cajas. */
.nvprec{width:96px;flex-shrink:0;display:flex;align-items:baseline;gap:3px;
  flex-wrap:wrap;justify-content:flex-end}
.nvprec .s{font-size:11.5px;color:var(--muted)}
.nvprec input{width:56px;border:1px solid transparent;border-radius:6px;padding:2px 5px;
  background:none;text-align:right;font-size:13px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;outline:none;transition:.12s}
.nvprec input:hover{border-color:var(--line);background:#fff}
.nvprec input:focus{border-color:var(--ink);background:#fff}
.nvprec .sub{flex:1 0 100%;text-align:right;font-size:10.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.nvdel{width:30px;height:30px;flex-shrink:0;border-radius:var(--r-sm);color:var(--faint);
  display:flex;align-items:center;justify-content:center;transition:.12s}
.nvdel:hover{background:var(--danger-bg);color:var(--danger)}
.nvvar{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;padding-top:7px;
  border-top:1px dashed var(--line)}
.nvadd{width:100%;height:38px;border:1px dashed var(--line);border-radius:var(--r-sm);
  background:#fff;color:var(--muted);font-size:12.5px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:.12s}
.nvadd:hover{border-color:var(--ink);color:var(--text);background:var(--paper)}

/* El adelanto: un solo campo, con el importe grande y la etiqueta a la derecha. */
.nvadv{display:flex;align-items:center;gap:8px;margin-top:8px;padding:0 13px;height:42px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#FBFCFA}
.nvadv .s{font-size:12.5px;color:var(--muted)}
.nvadv input{flex:1;min-width:0;border:0;background:none;font-family:var(--fm);
  font-size:15px;font-weight:700;color:var(--text);outline:none}
.nvadv .d{font-size:12px;color:var(--muted);flex-shrink:0}

.nvnota{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:9px 12px;
  border-radius:var(--r-sm);background:var(--paper);font-size:12px;color:var(--muted);
  line-height:1.4}
.nvnota.warn{background:#FFF8E6;color:#946200}
.nvnota b{font-weight:700;color:inherit}
.nvnota .pt{width:7px;height:7px;border-radius:50%;background:currentColor;
  flex-shrink:0;margin-top:5px}

/* La cuenta, siempre a la vista; el resumen del cliente, solo si lo pide. */
.nvbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 18px;border-top:1px solid var(--line);background:#FBFCFA;flex-wrap:wrap}
.nvtot{display:flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--muted);
  flex-wrap:wrap}
.nvtot b{font-size:14px;font-weight:800;color:var(--signal);font-variant-numeric:tabular-nums}
.nvtot b.ok{color:var(--ok)}
.nvtot i{color:var(--line);font-style:normal}
.nvtoggle{font-size:12.5px;font-weight:600;color:var(--azul,#0B63CE);display:flex;
  align-items:center;gap:5px;cursor:pointer;background:none;border:0;font-family:inherit}
.nvtoggle .chev{transform:rotate(180deg);transition:.15s}
.nvtoggle.on .chev{transform:rotate(0deg)}

@media(max-width:560px){
  .nvfila{flex-wrap:wrap}
  .nvsel{flex:1 0 100%}
  .nvltot{flex:1;text-align:left}
}

.nvprev{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#FBFCFA}
/* Desplegado dentro del modal no es una tarjeta suelta: es la parte de abajo,
   y el marco lo pone la tarjeta de dentro. */
#nvPrev{border:0;border-top:1px solid var(--line);border-radius:0;overflow:visible;
  background:var(--paper);padding:13px 18px 16px}
/* «+2 más»: el pedido lleva varios productos y en la lista solo cabe el primero. */
.masprod{display:inline-block;font-size:10.5px;font-weight:700;color:var(--muted);
  background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1px 7px;
  vertical-align:1px}
/* ── El resumen que vera el cliente ──────────────────────────────────────────
   Es una cuenta, y una cuenta se lee bajando por la columna de los importes:
   los nombres a la izquierda, los numeros alineados a la derecha en monoespacio
   y con sus dos decimales SIEMPRE, para que las cifras cuadren una debajo de
   otra. Antes cada fila iba por su cuenta y el bloque se leia como un parrafo. */
.nvph{display:flex;align-items:center;gap:7px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;color:var(--text);padding:0 0 9px}
.nvph .rb{width:7px;height:7px;background:currentColor;transform:rotate(45deg);
  flex-shrink:0;border-radius:1px}
.nvcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
.nvcalc{margin-top:9px;padding-top:9px;border-top:1px solid var(--line-2)}
.nvcl{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:13px;padding:3.5px 0;color:var(--muted)}
.nvcl .q{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nvcl .v{flex-shrink:0;font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}
.nvcl.adv .v{color:var(--ok)}
.nvcl.tot{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;align-items:center}
.nvcl.tot .l{font-size:13.5px;font-weight:700;color:var(--text);text-transform:none;
  letter-spacing:0}
.nvcl.tot .v{font-size:19px;font-weight:800;color:var(--ok);letter-spacing:-.01em}
.nvcl.tot .v.free{font-size:16px}
.nvfoot{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.45}
.nvfoot.ok{color:var(--ok);font-weight:500}
/* Si el link ya se copio solo, se dice; si el navegador no dejo, tambien. */
.nvcopia{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.4}
/* El link masivo, para copiarlo de un vistazo: es el que se pega en la bio. */
.mlink{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.mlink .mono{flex:1;min-width:0;font-size:12.5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.nvcopia.ok{color:var(--ok);font-weight:600}
.nvok{text-align:center;padding:6px 0 16px}
.nvokic{width:52px;height:52px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.nvokic svg{width:26px;height:26px}
.nvok b{font-family:var(--fd);font-size:18px;font-weight:700;letter-spacing:-.02em;display:block}
.nvok p{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5;max-width:330px;margin-left:auto;margin-right:auto}
.nvlink{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--r);padding:9px 11px;background:#FBFCFA}
.nvlink span{flex:1;font-size:13px}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:20px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;z-index:200;opacity:0;transition:.25s;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.on{transform:translateX(-50%) translateY(0);opacity:1}
.nb{background:#FFFDF5;border:1px solid #F0E4BC;border-left:3px solid #D9A800;border-radius:var(--r-sm);padding:10px 13px;font-size:12px;color:#7A5C00;line-height:1.5;margin-top:13px}
.nb b{color:#5C4500}
.calwrap{position:relative}
.calpop{position:absolute;top:40px;left:0;z-index:50;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 34px rgba(19,26,38,.16);padding:12px;width:266px;display:none}

/* ---- BARRA DE DESPACHO ---- */
.dispatch-bar{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-end;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;margin-bottom:15px}
.db-group{display:flex;flex-direction:column;gap:6px}
.db-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.seg.origin button{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.seg.origin button.on{background:var(--ok);color:#fff;border-color:var(--ok)}
.synced{display:flex;align-items:center;gap:12px;background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--r);padding:12px 16px;margin-bottom:15px;color:var(--ok)}
.synced b{font-size:13.5px;display:block}
.synced span{font-size:11.5px;color:#2A6B54}
.synced .ctl{margin-left:auto;background:#fff}

/* ---- PANEL DE IMPORTACION ---- */
.imp-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.imp-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 4px;font-size:11px;font-weight:600;color:var(--muted);border-right:1px solid var(--line-2);transition:.12s}
.imp-tab:last-child{border-right:none}
.imp-tab:hover{background:#FBFCFA;color:var(--text)}
.imp-tab.on{color:var(--ink);background:var(--paper);box-shadow:inset 0 -2px 0 var(--ink)}
.imp-body{padding:14px 15px}
.imp-hint{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.imp-src{display:flex;flex-direction:column;gap:6px}
.src{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;cursor:pointer;transition:.12s}
.src:hover{border-color:#C4CBC2}
.src.on{border-color:var(--transit);background:var(--transit-bg)}
.src .agr{width:16px;height:16px;border-radius:50%;border:2px solid #C4CBC2;flex-shrink:0}
.src.on .agr{border-color:var(--transit);border-width:5px}
.src b{font-size:12.5px;font-weight:600;display:block}
.src span{font-size:11px;color:var(--muted)}
.src > div{flex:1;min-width:0}
.imp-list{display:flex;flex-direction:column;gap:5px;max-height:210px;overflow-y:auto}
.imp-row{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;transition:.12s}
.imp-row:hover{border-color:#C4CBC2}
.imp-row b{font-size:12.5px;font-weight:600;display:block}
.imp-row span{font-size:11px;color:var(--muted)}
.imp-ta{width:100%;min-height:112px;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;font-size:12.5px;font-family:inherit;resize:vertical;outline:none;line-height:1.5}
.imp-ta:focus{border-color:var(--ink)}
.imp-drop{border:1.5px dashed #C9D0C7;border-radius:var(--r);padding:26px 16px;text-align:center;color:var(--muted);background:#FBFCFA;cursor:pointer}
.imp-drop svg{color:var(--faint);margin-bottom:7px}
.imp-drop b{display:block;font-size:13px;color:var(--text);margin-bottom:2px}
.imp-drop p{font-size:11.5px}
.imp-fields{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.ifld{display:flex;justify-content:space-between;gap:12px;padding:8px 11px;border-bottom:1px solid var(--line-2);font-size:12.5px;background:#fff}
.ifld:last-child{border-bottom:none}
.ifld span{color:var(--muted);flex-shrink:0}
.ifld b{text-align:right;font-weight:600}
.ifld.warn{background:var(--signal-bg)}
.ifld.warn b{color:var(--signal)}

/* ---- CATALOGO: VISTA LISTA ---- */
.plist .prod{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:var(--r-sm);margin-bottom:6px}
.plist .prod .pimg{height:44px;width:44px;border-radius:7px;flex-shrink:0}
.plist .prod .pb{padding:0;flex:1;display:flex;align-items:center;gap:14px}
.plist .prod .pb > div:first-child{flex:1;min-width:0}
.plist .prod .pvars{margin:0;padding:0;border:none}
.plist .prod .prow{margin:0}
.plist .pst-inline{flex-shrink:0}
.calpop.on{display:block}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.calhead b{font-size:13.5px;font-weight:700}
.caldow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.caldow span{text-align:center;font-size:10.5px;font-weight:700;color:var(--faint);padding:3px 0}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cald{height:32px;display:flex;align-items:center;justify-content:center;font-size:12.5px;border-radius:6px;cursor:pointer;font-variant-numeric:tabular-nums;transition:.1s}
.cald:hover{background:var(--paper)}
.cald.off{color:var(--faint);opacity:.4;cursor:default}
.cald.off:hover{background:none}
.cald.sel{background:var(--ink);color:#fff;font-weight:700}
.cald.inr{background:var(--transit-bg);color:var(--transit);border-radius:0}
.cald.today{box-shadow:inset 0 0 0 1.5px var(--transit)}
.calfoot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.calfoot span{font-size:11.5px;color:var(--muted);flex:1}

/* ---- VENTAS ---- */
.tv{display:flex;align-items:center;gap:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:15px;flex-wrap:wrap}
.tv-l{flex:1;min-width:220px}
.tv-lbl{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-bottom:7px}
.tv-n{font-family:var(--fd);font-size:52px;font-weight:800;letter-spacing:-.04em;line-height:.95;font-variant-numeric:tabular-nums}
.tv-s{display:block;font-size:13.5px;color:var(--muted);margin-top:9px}
.tv-r{display:flex;gap:14px;flex-shrink:0}
.tv-x{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:13px 18px;min-width:132px}
.tv-x span{display:block;font-size:11.5px;color:var(--muted);font-weight:500}
.tv-x b{font-family:var(--fd);font-size:24px;font-weight:800;letter-spacing:-.03em;display:block;margin-top:4px;font-variant-numeric:tabular-nums}

.rank{padding:6px 15px 14px}
.rk{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.rk:last-child{border-bottom:none}
.rk-p{width:20px;height:20px;border-radius:50%;background:var(--paper);border:1px solid var(--line);color:var(--muted);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rk:first-child .rk-p{background:var(--ink);color:#fff;border-color:var(--ink)}
.rk > b{font-size:13px;font-weight:600;width:132px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-bar{flex:1;height:8px;border-radius:20px;background:var(--line-2);overflow:hidden;min-width:40px}
.rk-bar i{display:block;height:100%;border-radius:20px;background:var(--ink)}
.rk:first-child .rk-bar i{background:var(--ok)}
.rk-n{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;width:38px;text-align:right;flex-shrink:0}

.mpbar{height:16px;border-radius:20px;overflow:hidden;display:flex;gap:3px;margin-bottom:16px}
.mpbar i{display:block;height:100%;border-radius:20px}
.mplist{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.mpi{display:flex;align-items:center;gap:9px;font-size:13.5px}
.dot2{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.mpi b{font-weight:600}
.mpq{color:var(--muted);font-size:12.5px;margin-left:auto}
.mpp{font-family:var(--fd);font-size:15px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;width:42px;text-align:right}

/* ---- CONFIGURACIÓN ---- */
.cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:start;max-width:1180px}
@media(max-width:980px){.cfg-grid{grid-template-columns:1fr}}
.logo-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.logo-up{width:64px;height:64px;border-radius:14px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:22px;flex-shrink:0;cursor:pointer;transition:.12s}
.logo-up:hover{filter:brightness(1.15)}
.sw{width:30px;height:30px;border-radius:8px;border:2px solid transparent;cursor:pointer;box-shadow:0 0 0 1px var(--line) inset}
.sw.on{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset}
.biz-prev{display:grid;grid-template-columns:118px 1fr;gap:12px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.bp-l{background:var(--ink);padding:11px 9px}
.bp-brand{display:flex;align-items:center;gap:7px;margin-bottom:11px}
.bp-mark{width:18px;height:18px;border-radius:5px;background:var(--signal);flex-shrink:0}
.bp-brand b{color:#fff;font-family:var(--fd);font-size:10.5px;font-weight:800}
.bp-cta{background:var(--signal);color:#fff;font-size:9.5px;font-weight:700;text-align:center;padding:5px;border-radius:6px;margin-bottom:8px}
.bp-item{color:rgba(255,255,255,.5);font-size:9.5px;padding:4px 6px;border-radius:4px}
.bp-item.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.bp-r{background:#fff;padding:12px;margin:9px 9px 9px 0;border-radius:8px;border:1px solid var(--line)}
.bp-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.bp-logo{width:24px;height:24px;border-radius:6px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:9px;flex-shrink:0}
.bp-head b{font-family:var(--fd);font-size:11px;font-weight:800}
.bp-ln{height:7px;border-radius:20px;background:var(--line-2);margin-bottom:6px}
.bp-ln.short{width:62%}
.bp-btn{background:var(--signal);color:#fff;font-size:9.5px;font-weight:700;text-align:center;padding:7px;border-radius:6px;margin-top:11px}

.intg{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--line-2)}
.ig-m{width:36px;height:36px;border-radius:9px;background:#E8EBE6;color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:12px;flex-shrink:0}
.ig-t{flex:1;min-width:0}
.ig-t b{font-size:13.5px;font-weight:600;display:block}
.ig-t span{font-size:11.5px;color:var(--muted);display:block;margin-top:1px}
.intg-body{padding:14px 15px;background:#FBFCFA;border-bottom:1px solid var(--line-2)}



/* ---- CONFIG FORMULARIO ---- */
.form-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;max-width:1080px}
@media(max-width:980px){.form-wrap{grid-template-columns:1fr}}
.fm-side{position:sticky;top:76px}
.zones{display:flex;gap:6px;flex-wrap:wrap}
.zn{font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:.12s}
.zn:hover{border-color:#C4CBC2}
.zn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.phone-sm{border:7px solid var(--ink);border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 10px 28px rgba(19,26,38,.15)}
.psc-sm{height:520px;overflow-y:auto;background:#fff}
.psc-sm::-webkit-scrollbar{width:0}
.pv-head{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.pv-logo{width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:12px;flex-shrink:0}
.pv-head b{font-family:var(--fd);font-size:12.5px;font-weight:800;display:block;line-height:1.1}
.pv-head span{font-size:8.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.pv-body{padding:13px 14px 18px}
.pv-wel{font-size:12px;color:var(--muted);margin-bottom:11px;line-height:1.45}
.pv-card{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:9px;margin-bottom:11px}
.pv-img{width:34px;height:34px;border-radius:7px;background:repeating-linear-gradient(45deg,#E8EBE6,#E8EBE6 5px,#F2F4F0 5px,#F2F4F0 10px);display:flex;align-items:center;justify-content:center;color:var(--faint);flex-shrink:0}
.pv-card b{font-size:11.5px;font-weight:600;display:block}
.pv-card span{font-size:10.5px;color:var(--muted)}
.pv-cut{display:flex;align-items:center;gap:7px;background:var(--signal-bg);border:1px solid var(--signal-line);border-radius:8px;padding:8px 10px;font-size:10.5px;color:#B24708;margin-bottom:13px;line-height:1.35}
.pv-cut svg{color:var(--signal);flex-shrink:0}
.pv-cut b{color:#8C3A05}
.pv-f{margin-bottom:11px}
.pv-f > span{font-size:10.5px;font-weight:600;display:block;margin-bottom:4px}
.pv-in{height:34px;border:1px solid var(--line);border-radius:8px;background:#FBFCFA}
.pv-in.srch2{display:flex;align-items:center;gap:7px;padding:0 10px;font-size:11px;color:var(--faint)}
.pv-duo{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pv-duo span{text-align:center;padding:8px;border:1px solid var(--line);border-radius:8px;font-size:11px;font-weight:600;color:var(--muted)}
.pv-duo span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pv-btn{background:var(--ink);color:#fff;text-align:center;padding:11px;border-radius:9px;font-size:12.5px;font-weight:600;margin-top:14px}
.pv-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2);font-size:9.5px;color:var(--faint);text-align:center;line-height:1.6}
.pv-foot b{color:var(--muted)}
.pv-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.pv-links span{font-size:9px;text-decoration:underline}
.pv-agua{margin-top:9px;padding-top:8px;border-top:1px solid var(--line-2)}
.pv-agua span{display:block;font-size:7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9AA3AC}
.pv-agua i{display:block;font-style:normal;font-size:8.5px;color:#9AA3AC;margin-top:3px}
.pv-agua b{color:var(--muted)}

/* ---- Pares de opciones tipo tarjeta (Formulario) ---- */
.fmts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.fmt{text-align:left;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;background:#fff;font-size:12.5px;font-weight:600;transition:.12s}
.fmt:hover{border-color:#C4CBC2}
.fmt.on{border-color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.fmt em{display:block;font-style:normal;font-size:11px;font-weight:500;color:var(--muted);margin-top:2px}

/* La fila de filtros de Pedidos. En escritorio va todo en línea; el celular la
   reordena mas abajo, y por eso este bloque tiene que quedar ANTES del
   responsive: a igual especificidad, manda la ultima regla del archivo. */
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:13px}
.buscafila,.mas-filtros,.fecha-fila{display:contents}
/* El buscador de Envíos, con el ancho que tenía antes de envolverlo. */
#sc-seguimiento .srch{flex:1;min-width:300px;max-width:430px}
.acc-fila{margin-left:auto;display:flex;gap:8px;align-items:center}

/* Celda que solo existe en la tarjeta del celular. */
.solo-movil{display:none}
/* El método de pago: en la tabla, texto; en el celular se vuelve etiqueta. */
.pg.ok{color:var(--ok)}
.sindatos{color:var(--faint);font-size:12.5px}

/* Envíos: elegir vista, y si lo que se mira está al día. */
.vistas{display:inline-flex;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:3px;gap:2px}
.vistas a{display:inline-flex;align-items:center;gap:7px;padding:0 clamp(9px,2.6vw,14px);
  height:32px;border-radius:7px;font-size:13px;font-weight:600;color:var(--muted);
  text-decoration:none;transition:.12s;white-space:nowrap}
.vistas a:hover{color:var(--text)}
.vistas a.on{background:var(--surface);color:var(--text);
  box-shadow:0 1px 2px rgba(19,26,38,.1)}
.sync-ok{display:inline-flex;align-items:center;gap:5px;color:var(--ok)}
.sync-no{color:var(--signal)}
.sync-btn{border:0;background:none;font:inherit;font-size:inherit;color:var(--muted);
  text-decoration:underline;cursor:pointer;padding:0 0 0 4px}
.sync-btn:hover{color:var(--text)}
.sync-btn:disabled{opacity:.5;cursor:default}
.f-btn{display:none}

/* Foto del producto: la ✕ va encima, en su esquina, y solo cuando hay foto. */
.pd-fotocaja{position:relative;flex-shrink:0}
.pd-fotox{position:absolute;top:-7px;right:-7px;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 6px rgba(19,26,38,.16);transition:.12s}
.pd-fotox:hover{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.pd-fotox[hidden]{display:none}

/* El celular del cliente, debajo del DNI. Cuando falta se dice: es justo lo
   que impide escribirle por WhatsApp. */
.who .cel{color:var(--ok)}
.who .cel-no{font-size:11px;color:var(--signal);background:none;border:0;padding:0;
  font-family:inherit;text-align:left;cursor:pointer;text-decoration:underline;
  text-decoration-style:dotted;text-underline-offset:2px}
/* En Envíos es solo texto: ahí no se escribe el número. */
.who span.cel-no{cursor:default;text-decoration:none}
/* El contacto de respaldo del courier: se ve, pero nunca compite con el celular
   del cliente. La etiqueta va en el CSS y no en la plantilla porque en el movil
   no hay «pasar por encima» que valga para explicar de que numero se trata. */
/* Interruptor de «Anulados», al lado de las fechas. Apagado es un control mas;
   encendido tiene que cantar, porque cambia POR COMPLETO lo que se esta viendo. */
.anulchip{text-decoration:none}
.anulchip b{font-variant-numeric:tabular-nums}
.anulchip.on{background:var(--danger);border-color:var(--danger);color:#fff}
.anulchip.on b{color:#fff}

/* La linea de progreso del sync, al lado de su boton: se llena sola mientras
   corre y no ocupa sitio cuando esta vacia. */
.sync-linea:empty{display:none}
.sync-linea{max-width:min(46vw,420px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.sync-linea{display:none}}
.who .cel-alt{display:block;font-size:11px;color:var(--muted);opacity:.85}
.who .cel-alt::before{content:'resp. ';font-family:var(--fu);opacity:.75}

/* ================= RESPONSIVE ================= */
.mtop{display:none}
.navov{display:none}
.tabbar{display:none}
.fab{display:none}

/* ── Barra de abajo (celular) ───────────────────────────────────────────────
   El panel se usa de pie y con una mano: lo de todos los días va donde llega
   el pulgar. `env(safe-area-inset-bottom)` deja libre la franja del gesto de
   inicio del iPhone, que si no se come la fila de botones. */
@media(max-width:900px){
  /* ── Pedidos ────────────────────────────────────────────────────────────
     Todo en medidas que crecen con la pantalla -clamp, fracciones y %- en vez
     de píxeles fijos: lo mismo tiene que servir en un teléfono de 320 y en uno
     de 430 sin dos juegos de reglas. */
  #sc-pedidos .top{align-items:flex-start}
  #sc-pedidos .top h1{font-size:clamp(23px,7vw,30px);letter-spacing:-.03em}
  #sc-pedidos .top .sub{font-size:clamp(12px,3.4vw,13.5px);margin-top:2px}
  /* Los botones de arriba se quedan en icono: el título manda. */
  #sc-pedidos .top .rt{width:auto;margin-left:auto;gap:8px;order:2}
  #sc-pedidos .top > div:first-child{order:1;flex:1;min-width:0}
  #sc-pedidos .top .sub{order:3;width:100%}
  #sc-pedidos .top .rt .lbl{display:none}
  #sc-pedidos .top .rt .ctl{width:clamp(38px,11vw,46px);height:clamp(38px,11vw,46px);
    border-radius:50%;padding:0;justify-content:center}
  #sc-pedidos .top .rt .ctl.fill{background:var(--ink);border-color:var(--ink)}
  #sc-pedidos .top .rt .ctl svg{width:19px;height:19px}
  /* Cuatro cifras en dos por dos, siempre: en una sola columna había que
     desplazar la pantalla entera para ver el panorama del día. */
  #sc-pedidos .kpis{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(7px,2.2vw,11px)}
  #sc-pedidos .kpi{padding:clamp(10px,3vw,14px);min-width:0}
  #sc-pedidos .kpi .k{font-size:clamp(9px,2.6vw,10.5px)}
  #sc-pedidos .kpi .v{font-size:clamp(21px,6.5vw,28px)}
  #sc-pedidos .kpi .d{font-size:clamp(10px,2.8vw,11.5px)}
  /* Buscador a todo el ancho y, al lado, el resto de filtros plegados. */
  .filtros{gap:9px}
  .buscafila{display:flex;gap:8px;align-items:center;width:100%;flex:none}
  .buscafila .srch{height:clamp(42px,12vw,48px);border-radius:11px}
  /* Un renglón para cada cosa, en el orden en que se usan: primero buscas,
     después acotas por fecha, y al final exportas. */
  .filtros{flex-direction:column;align-items:stretch;gap:9px}
  /* Fechas y calendario en el mismo renglón: eran dos filas para cuatro
     controles, y «Este mes» se estiraba a lo que sobrara. */
  .fecha-fila{display:flex;gap:8px;width:100%;align-items:stretch}
  .fecha-fila .seg{flex:1;min-width:0}
  .fecha-fila .seg > *{flex:1;min-width:0;padding:0 clamp(4px,2vw,12px);
    justify-content:center;white-space:nowrap}
  .fecha-fila .calwrap{flex:0 0 auto}
  .fecha-fila .calwrap .ctl{width:100%;justify-content:center;
    padding:0 clamp(9px,3vw,14px)}
  /* «Anulados» entra en el mismo renglón: no se estira, y en cuanto aprieta se
     queda en su icono con el número, que es lo único que hay que leer. */
  .fecha-fila .anulchip{flex:0 0 auto;justify-content:center;
    padding:0 clamp(8px,2.5vw,12px)}
  .fecha-fila .anulchip .lbl{display:none}
  /* En pantallas justas, el calendario se queda en su icono. */
  .acc-fila{display:flex;gap:8px;width:100%;align-items:center;flex-wrap:wrap}
  .acc-fila > span{width:100%;text-align:center}
  .acc-fila .ctl{flex:1;justify-content:center}
  /* Dos «+» en la misma pantalla se leen como un error: manda el flotante. */
  .solo-ancho{display:none!important}
  /* Los estados se deslizan de lado, sin cortar el último. */
  /* ── Envíos ─────────────────────────────────────────────────────────── */
  #sc-seguimiento .top h1{font-size:clamp(23px,7vw,30px);letter-spacing:-.03em}
  #sc-seguimiento .top{align-items:center;row-gap:6px}
  #sc-seguimiento .top > div:first-child{order:1;flex:1;min-width:0}
  #sc-seguimiento .top .rt{order:2;width:auto;margin-left:auto}
  #sc-seguimiento .top .sub{order:3;width:100%;font-size:clamp(11.5px,3.2vw,13px);
    display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .vistas a span{display:none}
  .vistas a{padding:0 clamp(11px,3.4vw,14px)}
  /* Con el tablero elegido, su nombre sí se lee: el otro solo su icono. */
  .vistas a.on span{display:inline}
  .f-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
    position:relative;flex-shrink:0;height:clamp(42px,12vw,48px);
    padding:0 clamp(12px,3.6vw,16px);border:1px solid var(--line);border-radius:11px;
    background:var(--surface);color:var(--text);font:inherit;
    font-size:clamp(12.5px,3.6vw,14px);font-weight:600;cursor:pointer}
  .f-btn.puesto::after{content:'';position:absolute;top:8px;right:8px;width:7px;height:7px;
    border-radius:50%;background:var(--signal)}
  .f-btn.on{border-color:var(--ink)}
  #sc-seguimiento .mas-filtros{display:none;width:100%;flex-wrap:wrap;gap:8px}
  #sc-seguimiento .buscafila{width:100%}
  #sc-seguimiento .mas-filtros.on{display:flex}
  #sc-seguimiento .mas-filtros > *{width:100%;justify-content:center}
  #sc-seguimiento .mas-filtros .seg > *{flex:1;justify-content:center}
  #sc-seguimiento form[method=get]{flex-direction:column;align-items:stretch}

  .seg-estados{width:100%;overflow-x:auto;scrollbar-width:none;
    padding:2px 2px 4px;-webkit-overflow-scrolling:touch}
  .seg-estados::-webkit-scrollbar{display:none}
  .seg-estados > *{flex-shrink:0}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:82;
    background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0);
    box-shadow:0 -2px 14px rgba(19,26,38,.06)}
  .tabbar > a,.tabbar > button{flex:1;min-width:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;height:56px;position:relative;
    background:none;border:0;font:inherit;color:var(--muted);text-decoration:none;
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tabbar span{font-size:10px;font-weight:600;letter-spacing:-.01em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .tabbar svg{width:21px;height:21px;stroke-width:1.9}
  .tabbar .on{color:var(--ink)}
  .tabbar .on svg{stroke-width:2.3}
  /* La pestaña activa se marca arriba, como una pestaña de verdad. */
  .tabbar .on::before{content:'';position:absolute;top:0;left:22%;right:22%;height:2.5px;
    border-radius:0 0 3px 3px;background:var(--ink)}
  .tb-n{position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;height:16px;
    border-radius:20px;background:var(--muted);color:#fff;font-style:normal;font-size:9.5px;
    font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
  .tb-n.al{background:var(--signal)}
}
@media(max-width:900px){
  /* La barra oscura de arriba se va: la navegación está abajo y el título de
     la pantalla ya lo pone su propia cabecera. Eran dos barras apiladas
     comiéndose 54px de una pantalla que no sobra. */
  .mtop{display:none}
  .navov{position:fixed;inset:0;background:rgba(19,26,38,.5);z-index:88}
  .navov.on{display:block}
  .nav{position:fixed;top:0;left:0;bottom:0;z-index:89;transform:translateX(-100%);transition:transform .22s ease;width:250px}
  .nav.on{transform:translateX(0)}
  .app{display:block}
  .stage{padding-top:0}
  /* «Nuevo envío» pasa a un botón flotante, encima de la barra. */
  .fab{display:flex;position:fixed;right:14px;z-index:83;
    bottom:calc(70px + env(safe-area-inset-bottom,0px));
    width:clamp(52px,15vw,60px);height:clamp(52px,15vw,60px);border-radius:50%;
    background:var(--signal);color:#fff;
    align-items:center;justify-content:center;text-decoration:none;
    box-shadow:0 6px 20px rgba(19,26,38,.28)}
  .fab svg{width:23px;height:23px;stroke-width:2.2}
  .fab:active{transform:scale(.94)}
  .top{padding:12px 14px;flex-wrap:wrap;gap:10px;top:0}
  .top h1{font-size:17px}
  .top .rt{margin-left:0;width:100%;flex-wrap:wrap}
  .top .rt .srch{flex:1;min-width:140px}
  /* Sitio para la barra de abajo: su alto, el gesto del iPhone y aire. */
  .body{padding:14px 14px calc(78px + env(safe-area-inset-bottom,0px))}
  /* Lo que vive pegado abajo sube por encima de la barra, no debajo. */
  .selbar,.dispatch-bar.fija{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .nav,.navov{z-index:90}
  .kpis{grid-template-columns:1fr 1fr}
  .card{overflow-x:auto}
  .tbl{min-width:620px}

  /* ── Tabla → tarjetas (celular) ────────────────────────────────────────
     La misma fila, recompuesta como ficha: arriba el código, el estado y la
     hora; debajo el cliente, el producto, la agencia, y al pie el cobro con
     sus dos acciones. */
  /* La caja que envuelve la lista desaparece: el fondo de la pantalla hace de
     separación y cada pedido se ve como una ficha suelta. Va por clase y no
     por `:has()`, que no todos los navegadores entienden. */
  .lista-m{overflow-x:visible;background:none;border:0;box-shadow:none;
    border-radius:0;padding:0}
  .tbl-m{min-width:0;display:block}
  .tbl-m thead{display:none}
  .tbl-m tbody,.tbl-m tr{display:block}
  .tbl-m td{display:block;border:0;padding:0;font-size:clamp(12.5px,3.4vw,13.5px)}
  .tbl-m .solo-movil{display:block}

  .tbl-m tr{position:relative;background:#fff;
    border:1px solid var(--line);border-radius:14px;
    padding:clamp(11px,3.4vw,15px);margin-bottom:clamp(11px,3.4vw,15px);
    box-shadow:0 1px 3px rgba(19,26,38,.07),0 0 0 1px rgba(19,26,38,.02);
    display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
    gap:0 clamp(6px,2vw,9px);
    grid-template-areas:'chk cod est hora'
                        'cli cli cli cli'
                        'prod prod prod prod'
                        'ag ag ag ag'
                        'pago pago acc acc'}
  .tbl-m tr:last-child{margin-bottom:0}

  /* Cabecera */
  .tbl-m td[data-m=chk]{grid-area:chk;align-self:center}
  .tbl-m td[data-m=cod]{grid-area:cod;align-self:center}
  .tbl-m .cod{font-family:var(--fm);font-size:clamp(10.5px,3vw,12px);color:var(--muted);
    background:var(--paper);border-radius:7px;padding:3px 8px;white-space:nowrap}
  .tbl-m td[data-m=estado]{grid-area:est;justify-self:start;align-self:center}
  .tbl-m td[data-m=hora]{grid-area:hora;justify-self:end;align-self:center;
    color:var(--faint);font-size:clamp(10.5px,3vw,12px);white-space:nowrap}
  /* La guía no entra en la tarjeta: no se lee de un vistazo y ocupa el sitio
     de la hora, que sí ubica el pedido en el día. */
  .tbl-m td[data-m=guia]{display:none}

  /* Cliente y producto */
  .tbl-m td[data-m=cliente]{grid-area:cli;margin-top:clamp(8px,2.6vw,11px)}
  .tbl-m td[data-m=cliente] b{font-size:clamp(14.5px,4.3vw,17px);letter-spacing:-.01em}
  .tbl-m td[data-m=cliente] .who span{display:none}
  .tbl-m .sindatos{font-style:italic;font-size:clamp(14px,4.1vw,16px);color:var(--faint)}
  .tbl-m td[data-m=prod]{grid-area:prod;margin-top:1px}
  .tbl-m td[data-m=prod] .who b{font-size:clamp(12px,3.3vw,13.5px);font-weight:400;
    color:var(--muted)}
  .tbl-m td[data-m=prod] .who span{display:none}

  /* Agencia, en su recuadro con el alfiler y su rótulo */
  .tbl-m td[data-m=agencia]{grid-area:ag;margin-top:clamp(8px,2.6vw,11px);
    background:var(--paper);border-radius:10px;color:var(--text);font-weight:600;
    padding:clamp(7px,2.2vw,10px) clamp(9px,2.8vw,12px);
    display:flex;align-items:center;gap:7px}
  .tbl-m td[data-m=agencia]::before{content:'';width:13px;height:13px;flex-shrink:0;
    background:currentColor;opacity:.4;
    -webkit-mask:var(--pin) center/contain no-repeat;mask:var(--pin) center/contain no-repeat}
  .tbl-m td[data-m=agencia]::after{content:'Agencia';order:-1;margin-left:20px;
    color:var(--muted);font-weight:400}

  /* Cobro y acciones */
  .tbl-m td[data-m=pago]{grid-area:pago;align-self:center;
    margin-top:clamp(9px,2.8vw,12px);padding-top:clamp(9px,2.8vw,12px);
    border-top:1px solid var(--line-2)}
  .tbl-m td[data-m=pago] .pg{display:inline-block;font-size:clamp(10px,2.9vw,11.5px);
    font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    padding:4px 9px;border-radius:7px;margin-bottom:4px}
  .tbl-m td[data-m=pago] .pg.ok{background:var(--ok-bg);color:var(--ok)}
  .tbl-m td[data-m=pago] .pg.parcial{background:var(--signal-bg);color:#B24708}
  .tbl-m td[data-m=pago] .who span{font-size:clamp(11px,3.1vw,12.5px);color:var(--muted)}
  .tbl-m td[data-m=acc]{grid-area:acc;align-self:center;
    margin-top:clamp(9px,2.8vw,12px);padding-top:clamp(9px,2.8vw,12px);
    border-top:1px solid var(--line-2)}
  .tbl-m td[data-m=acc] .rowacts{justify-content:flex-end}
  .tbl-m .rowacts .ctl.icon.sm{width:clamp(38px,11vw,46px);height:clamp(38px,11vw,46px);
    border-radius:11px}
  /* El de WhatsApp manda: es la acción del día. */
  .tbl-m .rowacts .ctl.icon.sm.wa{background:#25D366;border-color:#25D366;color:#fff}

  /* Un renglón sin dato no merece ni el guion ni su recuadro. */
  .tbl-m td:has(.vacio){display:none}

  .tbl-m tr.more{display:block;grid-template-areas:none;text-align:center;padding:22px 12px}
  .tbl-m tr.more td{grid-area:auto}
  .seg{overflow-x:auto;max-width:100%}
  .seg button{white-space:nowrap;flex-shrink:0}
  .dispatch-bar{gap:14px}
  .dispatch-bar .db-group{width:100%}
  .rotwrap,.form-wrap,.msg-wrap,.cfg-grid,.split,.split3,.map-wrap{grid-template-columns:1fr!important}
  .fm-side{position:static}
  .phones{gap:20px}
  .pcol{width:100%;max-width:390px}
  .drawer{width:100%;max-width:100%}
  /* Hoja a pantalla casi completa; el cuerpo scrollea y el pie queda pegado abajo.
     Antes `max-height:none` mataba el scroll interno y el boton de guardar quedaba
     debajo del borde de la pantalla: en celular no se podia emitir el link. */
  .ov{padding:0;align-items:flex-end}
  .modal{max-width:100%!important;border-radius:16px 16px 0 0;max-height:92dvh}
  .mf{position:sticky;bottom:0}
  .task{flex-wrap:wrap}
  .tbtn{width:100%;margin-top:6px}
  .steps{grid-template-columns:1fr 1fr}
  .biz-prev{grid-template-columns:1fr}
  .bp-l{display:flex;gap:8px;align-items:center;padding:10px}
  .bp-brand,.bp-cta{margin:0}
  .imp-tabs{grid-template-columns:repeat(2,1fr)}
  .imp-tab{border-bottom:1px solid var(--line-2)}
  .calpop{left:auto!important;right:0!important}
  /* Envios: el tablero se desliza de lado y la barra de seleccion se apila en vez
     de salirse por la derecha. */
  .kb{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .kcol{flex:0 0 82vw;min-width:0;scroll-snap-align:start}
  .kbody{max-height:none}
  .selbar{position:fixed;left:10px;right:10px;bottom:10px;margin:0;gap:8px}
  .selbar > b{width:100%;padding:0}
  .selbar .grupo{width:100%;padding:0;border-left:0;flex-wrap:wrap}
  .selbar .grupo .ctl{flex:1;justify-content:center}
  .selbar input,.selbar select{flex:1;min-width:0}
  .selbar .ctl.gh{margin-left:0!important;width:100%;justify-content:center}
  .avisos .av{width:100%;justify-content:flex-start}
  /* Integraciones: los botones de probar/sincronizar a ancho completo, que en el
     celular quedaban partidos a la mitad. */
  .intg-body > div[style*="display:flex"] .ctl{flex:1 1 46%;justify-content:center}
}
@media(max-width:620px){
  .kpis,.minicards,.grid-p{grid-template-columns:1fr}
  .duo,.fmts,.nvrow,.casc{grid-template-columns:1fr!important;display:grid!important}
  .nvrow > *{width:auto!important}
  .steps{grid-template-columns:1fr}
  .st{border-right:none;border-bottom:1px solid var(--line-2)}
  .tv{flex-direction:column;align-items:stretch;gap:16px}
  .tv-r{width:100%}
  .tv-x{flex:1}
  .tv-n{font-size:40px}
  .mplist{grid-template-columns:1fr}
  .etas{grid-template-columns:1fr 1fr}
  .rk > b{width:96px}
  .top h1{font-size:16px}
  .ch{flex-wrap:wrap}
  .ch .rt{margin-left:0;width:100%}
  .mf{flex-wrap:wrap}
  .mf .note{width:100%;order:-1;margin-bottom:6px}
  .mf .ctl{flex:1;justify-content:center}
  .sec-h{flex-wrap:wrap}
  .kcol{flex:0 0 88vw}
  .lgd{gap:6px 10px}
  .lgd .l{font-size:11.5px}
}

.bar{height:6px;border-radius:20px;background:var(--line-2);overflow:hidden;display:flex}
.bar i{display:block;height:100%}

/* ---- RESUMEN ---- */
.dash{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:start;max-width:1180px;margin:0 auto}
@media(max-width:1100px){.dash{grid-template-columns:1fr}}
.dash-l,.dash-r{min-width:0}
.sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.sec-h h2{font-family:var(--fd);font-size:15px;font-weight:700;letter-spacing:-.02em}
.sec-h span{font-size:12.5px;color:var(--muted)}
.minicards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
@media(max-width:820px){.minicards{grid-template-columns:repeat(2,1fr)}}
.mini{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 15px;min-width:0}
.mini.link{cursor:pointer;transition:.12s}
.mini.link:hover{border-color:var(--ink);background:#FBFCFA}
.mn-l{display:block;font-size:11.5px;color:var(--muted);font-weight:500}
.mn-v{display:block;font-family:var(--fd);font-size:21px;font-weight:800;letter-spacing:-.03em;margin-top:5px;font-variant-numeric:tabular-nums;line-height:1.05}
.mn-s{display:block;font-size:11.5px;color:var(--faint);margin-top:5px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed{padding:4px 0;display:flex;flex-direction:column;min-height:0}
/* El feed se llevaba la pagina hasta el infinito: ahora scrollea por dentro y el
   pie («Ver todos los envios») queda fijo abajo. */
.feed-scroll{overflow-y:auto;max-height:min(62vh,640px);min-height:0}
.fd{display:flex;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line-2)}
.fd:last-of-type{border-bottom:none}
.fd-d{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px}
.fd-d.ok{background:var(--ok)}
.fd-d.ag{background:var(--agencia)}
.fd-d.tr{background:var(--transit)}
.fd-b{min-width:0}
.fd-b b{font-size:13px;font-weight:600;display:block}
.fd-b span{font-size:12px;color:var(--muted);display:block;margin-top:1px;line-height:1.4}
.fd-b em{font-size:11px;color:var(--faint);font-style:normal;display:block;margin-top:3px}
.fd-foot{padding:11px 16px;border-top:1px solid var(--line-2)}
.fd-foot .ctl{width:100%;justify-content:center}
.todo{display:flex;flex-direction:column;gap:10px}
.task{display:flex;align-items:center;gap:15px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.task.urgent{border-color:var(--signal-line);background:var(--signal-bg)}
.tic{width:46px;height:46px;border-radius:12px;background:var(--paper);color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.task.urgent .tic{background:#fff;color:var(--signal)}
.tic.gold{background:var(--gold-bg);color:var(--gold)}
.tic.red{background:var(--danger-bg);color:var(--danger)}
.tic.blue{background:var(--transit-bg);color:var(--transit)}
.ttx{flex:1;min-width:0}
.ttx b{font-family:var(--fd);font-size:17px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.25}
.ttx span{font-size:14px;color:var(--muted);display:block;margin-top:3px;line-height:1.4}
.task.urgent .ttx b{color:#8C3A05}
.task.urgent .ttx span{color:#B24708}
.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:10px;font-size:15px;font-weight:600;flex-shrink:0;transition:.12s}
.tbtn.wa{background:#25D366;color:#fff}
.tbtn.wa:hover{filter:brightness(1.06)}
.tbtn.light{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.tbtn.light:hover{border-color:#C4CBC2;background:#FBFCFA}
.tbtn.dark{background:var(--ink);color:#fff}
.tbtn.dark:hover{background:var(--ink-2)}
.doneline{display:flex;align-items:center;gap:11px;margin-top:12px;padding:14px 20px;background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:12px;color:var(--ok);font-size:14px;font-weight:500}
.doneline .ctl{margin-left:auto;background:#fff}
.empty{max-width:640px;text-align:center;padding:70px 20px;margin:0 auto}
.empty .eic{width:64px;height:64px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.empty .eic svg{width:30px;height:30px}
.empty b{font-family:var(--fd);font-size:21px;font-weight:700;letter-spacing:-.02em;display:block}
.empty p{font-size:15px;color:var(--muted);margin-top:6px}
@media(max-width:640px){
  .task{flex-wrap:wrap}
  .tbtn{width:100%;margin-top:4px}
}

/* ══════════════════════════════════════════════════════════════════════════
   PRIMEROS PASOS — el roadmap y el reproductor del recorrido guiado
   ══════════════════════════════════════════════════════════════════════════ */
.gwrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:start}
@media(max-width:1100px){.gwrap{grid-template-columns:1fr}}

/* Tarjeta de avance: el número grande manda */
.gav{display:flex;gap:20px;align-items:center;padding:18px 20px}
.gav-n{flex-shrink:0;text-align:center;min-width:104px}
.gav-n b{font-family:var(--fd);font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;display:block}
.gav-n b i{font-size:20px;font-style:normal;font-weight:700;color:var(--muted);margin-left:2px}
.gav-n span{font-size:11.5px;color:var(--muted);display:block;margin-top:5px}
.gav-t{flex:1;min-width:0}
.gav-t b{font-family:var(--fd);font-size:17px;font-weight:700;letter-spacing:-.02em;display:block}
.gav-t p{font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.5}
@media(max-width:520px){.gav{flex-direction:column;text-align:center}.gav-t{text-align:left}}

/* La lista de pasos */
.gpasos{padding:4px 0}
.gp{display:flex;gap:13px;align-items:flex-start;padding:13px 15px;border-bottom:1px solid var(--line-2)}
.gp:last-child{border-bottom:0}
.gp-n{width:27px;height:27px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
      font-size:12.5px;font-weight:700;background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.gp--hecho .gp-n{background:var(--ok);border-color:var(--ok);color:#fff}
.gp--omitido .gp-n{background:var(--surface);color:var(--faint)}
.gp-tx{flex:1;min-width:0}
.gp-tx b{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap;line-height:1.3}
.gp-tx span{font-size:12.5px;color:var(--muted);display:block;margin-top:3px;line-height:1.5}
.gp--hecho .gp-tx b{color:var(--ok)}
.gp--omitido .gp-tx b,.gp--omitido .gp-tx span{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1px}
.gp--omitido .gp-tx span{text-decoration:none}
.gp-au{color:var(--signal);flex-shrink:0}
.gp-ac{display:flex;gap:6px;flex-shrink:0;align-items:center}
.gp-om{color:var(--faint)}
.gp-om:hover{color:var(--text)}
@media(max-width:700px){
  .gp{flex-wrap:wrap}
  .gp-ac{width:100%;margin-top:8px;padding-left:40px}
}

/* «Cómo funciona» */
.gcomo{padding:12px 15px 15px;display:flex;flex-direction:column;gap:14px}
.gcomo>div{display:flex;gap:11px;align-items:flex-start}
.gc-i{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
      background:var(--signal-bg);color:var(--signal)}
.gcomo b{font-size:13px;font-weight:600;display:block}
.gcomo p{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}

/* Tarjeta del resumen */
.task .gmini{display:flex;align-items:center;gap:10px;margin-top:8px}
.task .gmini .bar{flex:1;max-width:220px}
.task .gmini span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ── El reproductor ──
   El foco es un div con un box-shadow gigante que oscurece todo menos su hueco.
   pointer-events:none es lo que deja que el elemento iluminado siga siendo
   clicable: el usuario tiene que poder llenar el campo del que se le habla. */
#guiaFoco{position:absolute;z-index:900;border-radius:12px;pointer-events:none;
          box-shadow:0 0 0 9999px rgba(11,16,24,.58),0 0 0 2px var(--signal);
          transition:top .28s cubic-bezier(.4,0,.2,1),left .28s cubic-bezier(.4,0,.2,1),
                     width .28s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1)}
#guiaFoco.sinancla{box-shadow:0 0 0 9999px rgba(11,16,24,.58);opacity:0}

/* Mientras el recorrido corre, el panel se corre para hacerle sitio al carril:
   taparle media pantalla al usuario justo cuando le pedimos que llene algo sería
   contraproducente. */
body.guia-on .stage{padding-right:362px}
.guia-rail{position:fixed;z-index:920;right:16px;top:16px;bottom:16px;width:330px;
           background:var(--surface);border:1px solid var(--line);border-radius:14px;
           box-shadow:0 18px 50px rgba(11,16,24,.28);display:flex;flex-direction:column;
           overflow:hidden}
.guia-rail[hidden]{display:none}
.gr-h{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid var(--line-2)}
.gr-h .gr-paso{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.gr-h b{font-size:12.5px;font-weight:700;font-family:var(--fd);letter-spacing:-.01em}
.gr-x{margin-left:auto}
.gr-b{flex:1;overflow-y:auto;padding:16px 16px 4px}
.gr-b h4{font-family:var(--fd);font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.gr-b p{font-size:13.5px;color:var(--text);margin-top:9px;line-height:1.6}
.gr-nota{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding:10px 12px;border-radius:10px;
         background:var(--gold-bg);border:1px solid var(--gold-line);color:var(--gold);font-size:12.5px;line-height:1.45}
.gr-nota svg{flex-shrink:0;margin-top:1px}
.gr-hecho{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.gr-f{border-top:1px solid var(--line-2);padding:11px 14px 13px;background:#FBFCFA}
.gr-prog{height:3px;border-radius:20px;background:var(--line-2);overflow:hidden;margin-bottom:11px}
.gr-prog i{display:block;height:100%;background:var(--signal);width:0}
.gr-ctrls{display:flex;align-items:center;gap:6px}
.gr-ctrls .ctl{padding:0 9px}
.gr-vel{margin-left:auto;font-variant-numeric:tabular-nums;min-width:42px}
.gr-sig{width:100%;margin-top:9px;justify-content:center}
@media(max-width:900px){
  body.guia-on .stage{padding-right:0;padding-bottom:64dvh}
  .guia-rail{right:0;left:0;top:auto;bottom:0;width:auto;border-radius:16px 16px 0 0;
             max-height:62dvh;box-shadow:0 -12px 40px rgba(11,16,24,.3)}
  #guiaFoco{box-shadow:0 0 0 9999px rgba(11,16,24,.5),0 0 0 2px var(--signal)}
}
@media (prefers-reduced-motion:reduce){#guiaFoco{transition:none}}

/* Capítulos del temario: cincuenta pasos sueltos no se leen, en capítulos sí. */
.gcap{border-bottom:1px solid var(--line-2)}
.gcap:last-child{border-bottom:0}
.gcap>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;
  padding:11px 15px;font-size:13px;background:#FBFCFA}
.gcap>summary::-webkit-details-marker{display:none}
.gcap>summary:hover{background:var(--line-2)}
.gcap>summary b{font-family:var(--fd);font-size:13.5px;letter-spacing:-.01em}
.gcap-n{margin-left:auto;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.gcap-cv{color:var(--faint);transition:transform .15s}
.gcap[open]>summary .gcap-cv{transform:rotate(180deg)}
.gcap[open]>summary{background:var(--surface)}
.gcap .gpasos{padding:0 0 6px}
.gcap .gp{padding-left:24px}
/* Capítulo en el carril del reproductor */
.gr-grupo{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--signal);background:var(--signal-bg);
  border-radius:20px;padding:3px 9px;margin-bottom:9px}

/* ── Pedidos: KPIs con borde de acento y tabs con contador ────────────────── */
.kpi.edge{border-left:3px solid var(--line);padding-left:14px}
.kpi.e-sig{border-left-color:var(--signal)}   .kpi.e-sig .k{color:var(--signal)}
.kpi.e-gold{border-left-color:#D9A800}        .kpi.e-gold .k{color:var(--gold)}
.kpi.e-tr{border-left-color:var(--transit)}   .kpi.e-tr .k{color:var(--transit)}
.kpi.e-ok{border-left-color:var(--ok)}        .kpi.e-ok .k{color:var(--ok)}
.kpi .d .up{color:var(--ok);font-weight:600}
.kpi .d .down{color:var(--danger);font-weight:600}

/* los tabs de estado son enlaces (navegan con GET), no <button> */
.seg a{display:inline-flex;align-items:center;padding:0 13px;height:34px;font-size:13px;font-weight:500;color:var(--muted);border-right:1px solid var(--line);text-decoration:none;transition:.12s}
.seg a:last-child{border-right:none}
.seg a:hover{background:#FBFCFA;color:var(--text)}
.seg a.on{background:var(--ink);color:#fff;font-weight:600}
.seg .n{margin-left:6px;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:20px;background:var(--line-2);color:var(--muted);font-variant-numeric:tabular-nums}
.seg a.on .n,.seg button.on .n{background:rgba(255,255,255,.2);color:#fff}
.sub .hi{color:var(--signal);font-weight:600}

/* ── Calendario de rango: dos meses lado a lado ───────────────────────────── */
.calpop.wide{width:auto;padding:11px 12px;left:auto;right:0}
.caltop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.caltop b{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;flex:1;text-align:center}
.calmonths{display:flex;gap:16px}
.calmonth{width:182px}
.calmt{text-align:center;font-size:12.5px;font-weight:700;margin-bottom:6px}
/* La grilla doble necesita celdas mas chicas que el calendario de un mes. */
.calpop.wide .cald{height:25px;font-size:11.5px;border-radius:5px}
.calpop.wide .caldow span{font-size:9.5px;padding:2px 0}
.calpop.wide .calfoot{margin-top:8px;padding-top:8px}
.calpop.wide .calfoot span{font-size:11px}
.cald.ini{border-top-right-radius:0;border-bottom-right-radius:0}
.cald.fin{border-top-left-radius:0;border-bottom-left-radius:0}
@media (max-width:760px){
  .calmonths{flex-direction:column;gap:14px}
  .calmonth{width:100%}
}

/* ── Paginacion de la tabla de pedidos ────────────────────────────────────── */
.pag{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:13px}
.pag-info{font-size:12.5px;color:var(--muted)}
.pag-nums a{min-width:38px;justify-content:center;font-variant-numeric:tabular-nums}
.pag-nums a[aria-current]{cursor:default}
/* Flechas al tope y saltos: ocupan el mismo hueco pero no se pueden pulsar. */
.pag-nums .pgx{display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:0 13px;height:34px;font-size:13px;color:var(--faint);border-right:1px solid var(--line)}
.pag-nums .pgx:last-child{border-right:none}
@media (max-width:640px){
  .pag{justify-content:center}
  .pag-info{width:100%;text-align:center}
}

/* ── Despachar: barra del lote y tabla del lote ───────────────────────────── */
/* El origen tambien navega por enlace, igual que courier y fecha. */
.seg.origin a{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.seg.origin a.on{background:var(--ok);color:#fff;border-color:var(--ok)}
.seg.origin a.on svg{color:#fff}
/* La fecha suelta del lote, con el mismo aspecto que un .ctl. */
.fecha-lote{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--faint)}
.fecha-lote input[type=date]{border:none;outline:none;background:none;font-size:13px;color:var(--text);font-family:inherit}
/* Cantidad por fila: numero, no adorno, asi que va tabular. */
.qty{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 7px;border:1px solid var(--line);border-radius:6px;background:#FBFCFA;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
/* Las dos acciones del lote comparten un form (mismo courier/origen/fecha). */
.acc-lote{display:inline-flex;gap:6px;align-items:center}

/* Excel e Imprimir rótulos pesan lo mismo: mismo alto, padding y tipografía.
   Lo único que los distingue es el relleno, que marca cuál es la principal. */
.acciones-lote .ctl{height:37px;padding:0 17px;font-size:13.5px;font-weight:600}
.acciones-lote .ctl.icon{width:37px;padding:0}
/* El borde apagado del secundario lo hacía ver más liviano que el oscuro. */
.acciones-lote .ctl:not(.fill):not(.dang){border-color:#C4CBC2}
.acciones-lote .ctl:not(.fill):not(.dang):hover{border-color:var(--ink);background:#FBFCFA}

/* ── Catalogo: vista lista sobre el mismo contenedor de tarjetas ──────────── */
/* Sin esto las filas seguirian repartidas en las columnas del grid. */
.grid-p.plist{display:block}
/* Los controles van al final de la fila, no debajo del precio. Ancho fijo para
   que los `flex:1` de los botones repartan ese espacio y no toda la fila. */
.plist .prod .pb > div:last-child{margin-top:0;flex-shrink:0;width:176px}
.plist .prod .psub2{margin-top:0}
.plist .prod .pprice{font-size:16px}
@media (max-width:640px){
  .plist .prod{flex-wrap:wrap}
  .plist .prod .pb{flex-wrap:wrap;gap:8px}
  .plist .prod .pb > div:last-child{width:100%}
}

/* ── Catalogo: tarjeta con foto grande y una sola accion ──────────────────── */
/* El estado va sobre la foto y ya no dentro de ella: sin este relative se
   posicionaria respecto a la pagina y saldria disparado a una esquina. */
.prod{cursor:pointer;position:relative}
.prod.off{opacity:.72}
/* Fondo oscuro: hace de marco a la foto y disimula las que vienen recortadas. */
.prod .pimg{background:var(--ink);color:rgba(255,255,255,.28)}
.prod.off .pimg{background:#6B7280}
.prod .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.prod .pst .pill{font-size:10px;padding:2px 8px;background:#fff}
.prod .pb b{font-size:13.5px}
.prod .pprice{font-size:17px}
.pvar-n{display:block;font-size:11.5px;color:var(--muted);margin-top:6px}
.prod.off .pvar-n{color:var(--faint)}
.ctl.pver{width:100%;justify-content:center;margin-top:11px}

/* Vista lista: la misma tarjeta en una fila */
.plist .prod .pimg{height:46px;width:46px;border-radius:8px}
.plist .prod .pvar-n{margin:0;min-width:96px}
.plist .prod .ctl.pver{width:auto;margin:0;padding:0 16px}
.plist .prod .pst{position:static;margin-left:auto}
.plist .prod .szmini{display:none}

/* Valores de variante como chips */
.vgrupo{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;margin-bottom:9px}
.vgh{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.vgh b{font-size:12.5px;font-weight:600}
.vgh span{font-size:11px;color:var(--faint)}
.vchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.vchips.vacio{display:none}
.vchip{display:inline-flex;align-items:center;gap:5px;padding:3px 6px 3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12px;font-weight:500}
.vchip button{border:0;background:none;padding:0;width:16px;height:16px;border-radius:50%;color:var(--faint);cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.vchip button:hover{background:var(--danger-bg);color:var(--danger)}
.vadd{width:100%;height:32px;border:1px dashed #C4CBC2;border-radius:var(--r-sm);background:var(--surface);padding:0 11px;font:inherit;font-size:12.5px;outline:none}
.vadd:focus{border-style:solid;border-color:var(--ink)}

/* Variantes opcionales: menu para agregarlas y aviso cuando no hay ninguna */
.vmenu{position:absolute;top:calc(100% + 4px);right:0;z-index:70;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 24px rgba(19,26,38,.15);padding:5px;display:none}
.vmenu.on{display:block}
.vmenu button{display:block;width:100%;text-align:left;padding:7px 10px;border:0;background:none;border-radius:6px;font:inherit;font-size:13px;cursor:pointer}
.vmenu button:hover{background:var(--paper)}
.vsin{font-size:12px;color:var(--muted);line-height:1.5;margin:0;padding:10px 12px;background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-sm)}
.vgh .vquitar{margin-left:auto;border:0;background:none;padding:2px;color:var(--faint);cursor:pointer;border-radius:5px;display:flex}
.vgh .vquitar:hover{color:var(--danger);background:var(--danger-bg)}

/* ── Catalogo, vista lista: una fila pareja ──────────────────────────────── */
.plist .prod{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:13px;align-items:center;padding:10px 14px}
.plist .prod .pimg{height:46px;width:46px;border-radius:8px;margin:0}
.plist .prod .pb{display:grid;grid-template-columns:minmax(0,1fr) 110px 118px 92px auto;gap:14px;align-items:center;padding:0;grid-column:2 / -1}
.plist .prod .pnom{min-width:0}
.plist .prod .pnom b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist .prod .psub2{margin:0}
.plist .prod .prow{margin:0;justify-content:flex-end}
.plist .prod .pprice{font-size:14.5px}
.plist .prod .pvar-n{margin:0;text-align:left}
.plist .prod .pst{position:static;justify-self:start}
.plist .prod .ctl.pver{width:auto;margin:0;padding:0 18px;justify-self:end}
@media (max-width:900px){
  .plist .prod{grid-template-columns:46px minmax(0,1fr)}
  .plist .prod .pb{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .plist .prod .pvar-n,.plist .prod .pst{grid-column:1 / -1}
}

/* Nombre de la variante: editable, no un rotulo fijo */
.vnombre{flex:1;min-width:0;height:30px;border:1px solid transparent;border-radius:6px;background:none;padding:0 8px;font:inherit;font-size:12.5px;font-weight:600;outline:none}
.vnombre:hover{border-color:var(--line);background:var(--surface)}
.vnombre:focus{border-color:var(--ink);background:var(--surface)}
.vnombre::placeholder{font-weight:400;color:var(--faint)}

/* Tarjeta compacta: la foto manda y el texto no se dispersa */
.grid-p{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.prod .pb{padding:10px 11px 11px}
.prod .pnom b{line-height:1.25}
.prod .prow{margin-top:3px;gap:6px}
.prod .pprice{font-size:15.5px}
.prod .pvar-n{margin-top:2px;font-size:11px}
.ctl.pver{margin-top:9px;height:32px}

/* ── Configuracion: pestañas y secciones ──────────────────────────────────── */
.cfg-tabs{display:flex;gap:2px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:16px;flex-wrap:wrap}
.cfg-tab{display:inline-flex;align-items:center;gap:7px;padding:0 14px;height:34px;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;transition:.12s;white-space:nowrap}
.cfg-tab:hover{background:var(--paper);color:var(--text)}
.cfg-tab.on{background:var(--ink);color:#fff;font-weight:600}
.cfg-tab.on svg{color:#fff}

.miga{font-size:11.5px;color:var(--muted);margin-bottom:2px}
.miga a{color:var(--muted);text-decoration:none}
.miga a:hover{color:var(--text)}
.miga span{margin:0 5px;color:var(--faint)}
.sin-guardar{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--signal);margin-right:4px}

.secc{margin-bottom:14px}
.secc-h{display:flex;gap:13px;padding:15px 16px 0}
.secc-ico{width:34px;height:34px;border-radius:9px;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0}
.secc-h h3{font-size:15px;font-weight:700;letter-spacing:-.01em}
.secc-h p{font-size:12.5px;color:var(--muted);line-height:1.5;margin:3px 0 0}
.secc-b{padding:15px 16px 16px}
.secc-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--faint)}
.fh-in{font-weight:400;color:var(--faint)}

/* Logo */
.logo-caja{display:flex;align-items:center;gap:13px;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:14px;flex-wrap:wrap}

/* Dias de reparto */
.corte-row{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.dias{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.dia{display:inline-flex;align-items:center;justify-content:center;width:56px;height:46px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--faint);cursor:pointer;transition:.12s;user-select:none}
.dia:hover{border-color:#C4CBC2;color:var(--text)}
.dia.on{background:var(--ink);border-color:var(--ink);color:#fff}
.dia input{position:absolute;opacity:0;pointer-events:none}
.dias-rapidos{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.dias-rapidos .ctl{border-radius:999px;height:30px;font-size:12px;color:var(--muted)}
.dias-rapidos .ctl:hover{color:var(--text)}

/* Origenes */
.origen{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;background:var(--surface)}
.origen.primero{background:var(--transit-bg);border-color:var(--transit-line)}
.origen.off{opacity:.55}
.origen-ico{width:34px;height:34px;border-radius:8px;background:var(--line-2);color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.origen.primero .origen-ico{background:var(--transit);color:#fff}
.origen-t{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.origen-d{font-size:11.5px;color:var(--muted);margin-top:1px}
.tag-pred{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--transit);color:#fff}
.origen-nuevo{margin-top:12px;padding:13px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm)}
.ag-lista{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 10px 28px rgba(19,26,38,.14);max-height:240px;overflow:auto}

/* Color de marca */
.sws{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.sw{width:44px;height:38px;border-radius:9px;background:var(--c);border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:.12s;position:relative}
.sw:hover{transform:translateY(-1px)}
.sw.on{border-color:var(--ink);box-shadow:inset 0 0 0 2px #fff}
.sw.on::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.color-row{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.color-row input[type=color]{width:44px;height:38px;border:1px solid var(--line);border-radius:9px;padding:2px;background:#fff;cursor:pointer}
.color-row #inHex{flex:1;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px;font-size:13px;outline:none}
.color-row #inHex:focus{border-color:var(--ink)}

/* Modo de interfaz */
.modos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modo{display:block;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;transition:.12s;background:var(--surface)}
.modo:hover{border-color:#C4CBC2}
.modo.on{border-color:var(--transit);background:var(--transit-bg)}
.modo input{position:absolute;opacity:0;pointer-events:none}
.modo b{display:block;font-size:13px;font-weight:600;margin-bottom:3px}
.modo span{font-size:11.5px;color:var(--muted);line-height:1.45}
@media (max-width:600px){.modos{grid-template-columns:1fr}}

/* Pie del menu lateral: Configuracion entra directo, Salir queda aparte */
.nf-link{display:flex;align-items:center;gap:9px;padding:7.5px 10px;margin:1px 12px;border-radius:var(--r-sm);color:rgba(255,255,255,.66);font-size:13px;font-weight:500;text-decoration:none;transition:.12s}
.nf-link:hover{background:rgba(255,255,255,.06);color:#fff}
.nf-link.on{background:rgba(255,255,255,.11);color:#fff;font-weight:600}
.nf-link .cnt{margin-left:auto}

/* Cerrar sesion, en Mi cuenta */
.cerrar-sesion{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;padding:14px 15px;margin-top:14px}
.cerrar-sesion b{font-size:13px}

/* Configuracion centrada: el contenido no cuelga del borde izquierdo y las
   pestañas quedan sobre las tarjetas, no desplazadas a un lado. */
.body.centrado{max-width:1180px;margin-left:auto;margin-right:auto;width:100%}
/* Despachar lleva tabla y panel lateral: le hace falta algo mas de sitio. */
.body.centrado.ancha{max-width:1400px}
.cfg-tabs .cfg-tab{flex:1;justify-content:center}
.cfg-grid{margin-left:auto;margin-right:auto}

/* La direccion del catalogo de Shalom trae referencias larguisimas: se corta en
   una linea para que cada origen ocupe un renglon, como el resto de la lista. */
.origen-d{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.origen-t{min-width:0}
.enlace-sutil{border:0;background:none;padding:8px 0 0;font:inherit;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.enlace-sutil:hover{color:var(--text)}

/* Los hijos de una rejilla no encogen por debajo de su contenido (min-width
   vale auto), asi que una direccion larga o el preview desbordaban la pagina
   entera y aparecia scroll horizontal. */
.cfg-grid > *{min-width:0}
.cfg-grid .card{max-width:100%}
.biz-prev{min-width:0}
.biz-prev .bp-r{min-width:0;overflow:hidden}

/* El modo de interfaz va al pie, en una franja: es una preferencia del panel,
   no una de las cuatro cosas que se configuran del negocio. */
.franja-modo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;margin-top:15px;max-width:1180px;margin-left:auto;margin-right:auto}
.franja-modo b{display:block;font-size:14px;margin:4px 0 3px}
.franja-modo .fh{margin:0}
.franja-modo .modos{grid-template-columns:repeat(3,minmax(0,1fr))}
.franja-modo .modo{padding:10px}
.franja-modo .modo b{font-size:12.5px;margin:0 0 2px}
@media (max-width:900px){
  .franja-modo{grid-template-columns:1fr}
  .franja-modo .modos{grid-template-columns:1fr}
}

/* Dias de reparto: van fuera de .fld, asi que llevan su propia etiqueta. Y la
   casilla se anula del todo —no solo se oculta— para que no herede tamaño ni
   borde de ninguna regla de formulario. */
.campo-dias{margin-bottom:0}
.etiqueta-dias{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.dia input[type=checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;background:none;opacity:0;pointer-events:none;appearance:none}

/* (4) Los cuatro bloques miden lo mismo: la rejilla estira sus filas y cada
   tarjeta ocupa el alto completo, en vez de terminar donde acabe su contenido. */
/* Las cuatro tarjetas cuelgan directas de la rejilla: con dos columnas
   intermedias cada una igualaba solo SUS dos, y entre columnas no. Con
   grid-auto-rows:1fr todas las filas miden lo mismo, asi que las cuatro
   quedan iguales por alto. */
.cfg-grid{align-items:stretch;grid-auto-rows:1fr}
.cfg-grid .card.secc{display:flex;flex-direction:column;margin-bottom:0}
.cfg-grid .card.secc .secc-b{flex:1}

/* Hora de corte: el campo grande y las horas de siempre a un toque. */
.campo-corte{margin-bottom:16px}
.corte-fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.corte-input{height:44px;width:132px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;font-family:var(--fm);font-size:16px;font-weight:600;letter-spacing:.02em;color:var(--text);outline:none}
.corte-input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(19,26,38,.08)}
.corte-rapidas{display:flex;gap:6px;flex-wrap:wrap}
.corte-rapidas .ctl{font-family:var(--fm);border-radius:999px;height:30px;font-size:12px;color:var(--muted)}
.corte-rapidas .ctl.fill{color:#fff}
/* La explicacion es una nota, no un parrafo que compita con el campo. */
.corte-nota{font-size:11.5px;color:var(--muted);line-height:1.5;margin:9px 0 0}

/* ── Rotulado ─────────────────────────────────────────────────────────────── */
/* Columna de ajustes: bloques cortos y apretados. Al lado hay un rotulo que
   mirar, asi que lo que menos ayuda aqui son tarjetas altas y aireadas. */
.rot-col{display:flex;flex-direction:column;gap:11px}
.rot-col .secc{margin-bottom:0}
.secc-h.chico{align-items:center;gap:9px;padding:12px 13px 0;color:var(--muted)}
.secc-h.chico h3{font-size:13.5px;color:var(--text)}
.rot-col .secc-b{padding:10px 13px 12px}
.rot-col .fld{margin-bottom:9px}
.rot-col .fld label{font-size:11px;margin-bottom:3px}
.rot-col .fld input{height:32px;font-size:12.5px}
.rot-col .cin{height:36px;font-size:13px;padding:0 11px}
.rot-col .tgr{padding:7px 0}
.rot-col .tgr .tt{font-size:12.5px}
.rot-col .tgr .ts{font-size:11px}

/* Panel del previsualizador: barra, escenario y pie en una sola pieza */
.rot-panel{overflow:hidden;display:flex;flex-direction:column}
.rot-bar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;padding:9px 12px;border-bottom:1px solid var(--line-2)}
.sz-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--faint)}
.fbar{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}
.fbar::-webkit-scrollbar{display:none}
.fbtn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 9px;border-radius:8px;border:1px solid transparent;background:none;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:.12s}
.fbtn:hover{background:var(--paper);color:var(--text)}
.fbtn em{font-style:normal;font-family:var(--fm);font-size:11px;color:var(--faint)}
.fbtn.on{background:var(--ink);color:#fff}
.fbtn.on em{color:rgba(255,255,255,.55)}

/* Ancho x alto: se ven siempre, apagados salvo en «Personalizada» */
.custom{display:none;align-items:center;gap:6px;flex-shrink:0;margin-left:4px}
.custom.editable{display:flex}
.cs-t{font-size:12px;color:var(--muted)}
.cs-n{width:54px;height:32px;border:1px solid var(--ink);border-radius:8px;background:#fff;color:var(--text);text-align:center;font-family:var(--fm);font-size:12.5px;outline:none}
.cs-x{color:var(--faint);font-size:12px}
.cs-u{font-size:12px;color:var(--muted)}

/* Escenario: alto fijo, para que el panel no salte al cambiar de formato. El
   rotulo va dentro a tamano real y el JS lo encoge con un scale. */
.rot-stage{position:relative;overflow:hidden;flex:1;min-height:320px;background:#F7F5EE;background-image:repeating-linear-gradient(135deg,#EFEDE2 0 1.5px,#F7F5EE 1.5px 11px)}
.rot-fit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center center;transition:transform .16s ease}
.rot-fit > div{width:100%;height:100%}
.rot-fit .rot{height:100%}

/* Pie: la medida, para que caja sirve, y la prueba de impresion */
.rot-pie{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--line-2)}
.rot-dato{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.rot-dato b{color:var(--text);font-family:var(--fm)}
.rot-legal{margin-top:11px;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center}
.rot-legal b{color:var(--text);font-weight:600}

/* Notas: botones de verdad, con la elegida marcada */
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.preset{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:5px 10px;font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.03em;color:var(--muted);cursor:pointer;transition:.12s}
.preset:hover{border-color:#C4CBC2;color:var(--text)}
.preset.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* La descripcion del logo es una nota al pie del campo, no texto de lectura. */
.logo-caja .fh{font-size:11px;line-height:1.45;max-width:44ch}

/* Rueda de color, al lado de los seis de la paleta */
.sw.rueda{position:relative;overflow:hidden;background:conic-gradient(#C92A2A,#E8590C,#D9A800,#2F9E44,#1098AD,#2563EB,#6D3FD4,#D6336C,#C92A2A);display:flex;align-items:center;justify-content:center}
.sw.rueda input{position:absolute;inset:-8px;width:200%;height:200%;border:0;padding:0;opacity:0;cursor:pointer}
.sw.rueda::after{content:none}
/* La muestra de al lado del hex refleja el color elegido, venga de donde venga. */
.color-muestra{width:44px;height:38px;border-radius:9px;flex-shrink:0;background:var(--signal);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}



/* ── Formulario: una tarjeta con secciones cortas ──────────────────────────
   Antes eran cuatro tarjetas sueltas con sus cabeceras; el ajuste quedaba
   lejos de lo que cambiaba en el telefono de al lado. */
.fcard{padding:0}
.fsec{padding:15px 16px 16px;border-bottom:1px solid var(--line-2)}
.fsec:last-child{border-bottom:none}
.fsec-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.fsec-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--text)}
.fsec-n{margin-left:auto;font-size:11.5px;color:var(--faint);text-align:right}
.fsec .fld label{display:flex;align-items:baseline;gap:8px}
.ch-n{margin-left:auto;font-style:normal;font-family:var(--fm);font-size:10.5px;color:var(--faint);font-weight:400}
.fsec textarea{min-height:74px}

/* Una fila = una cosa que se enciende. El interruptor siempre al mismo sitio. */
.frow{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.frow:last-child{border-bottom:none}
.frow:first-of-type{padding-top:0}
.fr-t{flex:1;min-width:0;font-size:13px;font-weight:500}
.fr-t em{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:400;margin-left:6px}
.frow .ig-m{width:30px;height:30px;border-radius:8px;font-size:11px}
.frow .ig-m + .fr-t em{display:block;margin:1px 0 0}
.fr-hora{width:92px;height:32px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 8px;font-family:var(--fm);font-size:12.5px;color:var(--text);outline:none;flex-shrink:0}
.fr-hora:focus{border-color:var(--ink)}
.duo-f{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.nb.bad{background:var(--danger-bg);border-color:var(--danger-line);border-left-color:var(--danger);color:var(--danger)}
.nb.bad b{color:var(--danger)}

/* Cabecera y pie de la previsualizacion */
.pv-top{display:flex;align-items:baseline;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.pv-vivo{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600}
.pv-vivo i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex-shrink:0}
.pv-url{font-size:10.5px;color:var(--faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-acc{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:11px;flex-wrap:wrap}
.pv-acc .ctl{border-color:transparent;background:none;color:var(--muted)}
.pv-acc .ctl:hover{color:var(--text);background:var(--paper)}




/* ── Mensajes ──────────────────────────────────────────────────────────────
   Tres columnas: los estados, el texto del elegido y el chat como le llega al
   cliente. Antes la burbuja vivia dentro del formulario y habia que bajar
   hasta ella para ver el resultado. */
.msg-wrap{display:grid;grid-template-columns:280px minmax(0,1fr) 330px;gap:15px;align-items:start}
@media(max-width:1180px){.msg-wrap{grid-template-columns:250px minmax(0,1fr)}}
.msg-como{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px}
.msg-como svg{flex-shrink:0;margin-top:1px}

.msg-states{padding:7px;display:flex;flex-direction:column;gap:2px}
.ms{display:flex;align-items:center;gap:11px;background:none;border:1px solid transparent;border-radius:10px;padding:10px 11px;cursor:pointer;transition:.12s;text-align:left;width:100%}
.ms:hover{background:var(--paper)}
.ms.on{background:var(--paper);border-color:var(--line)}
.ms-d{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ms-t{flex:1;min-width:0}
.ms-t b{font-size:13.5px;font-weight:600;display:block}
.ms-t span{font-size:11.5px;color:var(--muted);display:block;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-n{font-family:var(--fm);font-size:12.5px;color:var(--muted);flex-shrink:0}
/* Apagada se ve apagada, sin sacarla de la lista */
.ms.apagada .ms-t b{color:var(--faint)}
.ms.apagada .ms-d{opacity:.35}
.ms.apagada .ms-t b::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--faint);margin-left:6px;vertical-align:middle}
.c-datos{background:var(--transit)}.c-origen{background:var(--violet)}
.c-transito{background:var(--transit)}.c-agencia{background:var(--signal)}
.c-varado{background:var(--danger)}.c-entregado{background:var(--ok)}

.pm-h{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.pm-t{flex:1;min-width:0}
.pm-t b{font-size:15px;font-weight:700;letter-spacing:-.01em;display:block}
.pm-t span{font-size:12.5px;color:var(--muted);display:block;margin-top:1px}
.pm-lbl{font-size:12.5px;color:var(--muted)}
.pm-b{padding:14px 16px 15px}
.pm-lab{display:flex;align-items:baseline;gap:12px;margin-bottom:7px}
.pm-lab span{font-size:11.5px;font-weight:600;color:var(--muted)}
.pm-ch{margin-left:auto;font-style:normal;font-family:var(--fm);font-size:11px;color:var(--faint)}
.pm-b .wae{min-height:112px}
.pm-hint{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--faint);margin:11px 0 8px}

/* Cada variable con el ejemplo de lo que va a salir en su sitio */
.vars{display:flex;gap:7px;flex-wrap:wrap;margin:0}
.var{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer;font:inherit;transition:.12s}
.var:hover{border-color:var(--ink);background:var(--paper)}
.var i{font-style:normal;color:var(--faint);font-size:12px}
.var b{font-family:var(--fm);font-size:11.5px;font-weight:500;color:var(--text)}
.var span{font-size:11px;color:var(--muted)}

.pm-pie{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--line-2)}
.pm-dato{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.pm-dato b{color:var(--text);font-family:var(--fm);font-weight:500}

/* ── El chat ─────────────────────────────────────────────────────────────── */
.wa-phone{border:8px solid #101418;border-radius:30px;overflow:hidden;background:#EFE7DE;box-shadow:0 12px 32px rgba(19,26,38,.18);display:flex;flex-direction:column;height:560px}
.wa-top{display:flex;align-items:center;gap:9px;background:#075E54;color:#fff;padding:10px 11px;flex-shrink:0}
.wa-top svg{opacity:.85;flex-shrink:0}
.wa-back{transform:rotate(45deg)}
.wa-av{width:32px;height:32px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:13px;flex-shrink:0}
.wa-quien{flex:1;min-width:0}
.wa-quien b{font-size:13.5px;font-weight:600;display:block;line-height:1.2}
.wa-quien span{font-size:10.5px;opacity:.75;display:block}
.wa-chat{flex:1;overflow-y:auto;padding:14px 11px;background:#EFE7DE;background-image:radial-gradient(#E3D9CE 1px,transparent 1px);background-size:14px 14px;display:flex;flex-direction:column;align-items:center;gap:11px}
.wa-chat::-webkit-scrollbar{width:0}
.wa-dia{background:#F5EEE6;border-radius:7px;padding:3px 10px;font-size:10.5px;color:#54656F;box-shadow:0 1px 1px rgba(0,0,0,.06);flex-shrink:0}
.wa-burbuja{align-self:flex-end;max-width:85%;background:#D9FDD3;border-radius:9px;border-top-right-radius:2px;padding:7px 9px 5px;font-size:13px;line-height:1.45;color:#111B21;box-shadow:0 1px 1px rgba(0,0,0,.1);word-break:break-word}
.wa-burbuja .lnk{color:#0A7CFF;text-decoration:underline;word-break:break-all}
.wa-hora{display:block;text-align:right;font-style:normal;font-size:10px;color:#5C7568;margin-top:2px}
.wa-abajo{display:flex;align-items:center;gap:8px;padding:8px 9px;background:#F0F2F5;flex-shrink:0}
.wa-campo{flex:1;background:#fff;border-radius:20px;padding:9px 13px;font-size:12.5px;color:#8696A0}
.wa-mic{width:36px;height:36px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}


/* ── Integraciones ─────────────────────────────────────────────────────────
   Una lista de filas por grupo, cada una con su detalle plegado debajo. Antes
   eran dos columnas de tarjetas con los formularios siempre abiertos, y la
   pantalla se leia como un muro. */
.igr-h{margin:22px 0 11px}
.igr-h:first-of-type{margin-top:4px}
.igr-h h2{font-size:16px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:baseline;gap:9px}
.igr-h h2 i{font-style:normal;font-family:var(--fm);font-size:12.5px;font-weight:400;color:var(--muted)}
.igr-h p{font-size:12.5px;color:var(--muted);margin:3px 0 0;line-height:1.5}

.igr{margin-bottom:10px;overflow:hidden}
.igr.ok{border-color:var(--ok-line);box-shadow:inset 0 0 0 1px var(--ok-line)}
.igr-f{display:flex;align-items:center;gap:13px;padding:14px 15px}
.igr-m{width:44px;height:44px;border-radius:11px;background:#E8EBE6;color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:14px;flex-shrink:0}
.igr-t{flex:1;min-width:0}
.igr-t b{font-size:14.5px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.igr-t > span{font-size:12.5px;color:var(--muted);display:block;margin-top:3px;line-height:1.5}
.igr-t > span b{display:inline;font-size:inherit;font-weight:600;color:var(--text)}
.igr-b{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.igr-b .ctl.on{border-color:var(--ink);background:var(--paper)}
/* El azul de «Conectar» es el de una accion que todavia no se hizo */
.ctl.fill.azul{background:#2563EB;border-color:#2563EB}
.ctl.fill.azul:hover{background:#1D4FD7}

.igr-p{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.igr-p.si{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.igr-p.si::before{content:'●';margin-right:5px;font-size:8px;vertical-align:middle}
.igr-p.mal{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}

/* El detalle: cerrado no ocupa nada, y abierto no se despega de su fila */
.igr-caja{display:none;padding:0 15px 15px;border-top:1px solid var(--line-2);margin-top:2px}
.igr-caja.abierta{display:block;padding-top:14px}
.igr-caja .duo-f{margin-bottom:0}

/* Tarjeta de la extension de WhatsApp: pasos de instalacion y el aviso de que
   el archivo descargado lleva una llave viva dentro. */
.ext-pasos{margin:0;padding-left:20px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.ext-pasos li{margin-bottom:5px}
.ext-pasos code{font-size:11.5px;background:var(--bg-2);padding:1px 5px;border-radius:4px}
.ext-aviso{margin-top:12px;padding:9px 11px;border-radius:8px;font-size:12px;
  line-height:1.5;background:#FEF3C7;color:#78350F;border:1px solid #FDE68A}
.ext-fecha{margin-top:5px;font-size:11.5px;opacity:.8}
.igr-acc{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px}
.igr-sep{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.igr-check{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--muted);line-height:1.5;cursor:pointer;margin-top:2px}
.igr-check.sin{opacity:.55}
.igr-check b{color:#B4541F}
.igr-check input{margin-top:2px;flex-shrink:0}

.llave-nueva{background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:12px 13px;margin-bottom:14px}
.ln-t{font-size:11px;opacity:.7;margin-bottom:6px;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.ln-r{display:flex;gap:8px;align-items:center}
.ln-r code{font-size:12.5px;word-break:break-all;flex:1}
.ln-a{font-size:11.5px;margin-top:8px;opacity:.85}

@media(max-width:700px){
  .igr-f{flex-wrap:wrap}
  .igr-b{width:100%;justify-content:stretch}
  .igr-b .ctl{flex:1;justify-content:center}
}


/* ── Preview al compartir ──────────────────────────────────────────────────
   La tarjeta que arma WhatsApp con el link. Se edita a la izquierda y se ve
   montada a la derecha, con las mismas piezas. */
.og-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
@media(max-width:900px){.og-grid{grid-template-columns:1fr}}

.og-drop{display:flex;align-items:center;justify-content:center;aspect-ratio:1200/630;border:1px dashed var(--line);border-radius:var(--r);background:var(--paper);overflow:hidden;cursor:pointer;transition:.12s}
.og-drop:hover{border-color:var(--ink)}
.og-drop img{width:100%;height:100%;object-fit:cover}
.og-vacio{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;color:var(--faint);text-align:center;padding:14px}

.og-plt{display:flex;gap:8px;flex-wrap:wrap}
.og-p{width:74px;aspect-ratio:1200/630;border:1px solid var(--line);border-radius:9px;overflow:hidden;padding:0;background:none;cursor:pointer;transition:.12s}
.og-p img{width:100%;height:100%;object-fit:cover;display:block}
.og-p:hover{border-color:#C4CBC2}
.og-p.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.og-fijo{background:var(--paper);color:var(--muted)}

/* El chat, con la tarjeta dentro */
.og-chat{background:#EFE7DE;background-image:radial-gradient(#E3D9CE 1px,transparent 1px);background-size:14px 14px;border-radius:var(--r);padding:13px}
.og-card{background:#fff;border-radius:9px;overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.13);border-left:4px solid var(--ok)}
.og-img{background:var(--paper);aspect-ratio:1200/630;overflow:hidden}
.og-img img{width:100%;height:100%;object-fit:cover;display:block}
.og-txt{padding:9px 11px 8px;background:#F5F6F5}
.og-txt b{font-size:12.5px;font-weight:600;display:block;color:#111B21;line-height:1.3}
.og-txt span{font-size:11.5px;color:#54656F;display:block;margin-top:3px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.og-txt i{font-style:normal;font-size:11px;color:#8696A0;display:block;margin-top:4px}
.og-link{padding:8px 11px 9px;font-size:12px;color:#0A7CFF;word-break:break-all;line-height:1.4}
.og-link em{font-style:normal;float:right;font-size:10px;color:#8696A0;margin:2px 0 0 8px}


/* ── Mi cuenta ─────────────────────────────────────────────────────────────
   Arriba quien eres, y debajo el plan con lo que llevas gastado del mes: eso
   ultimo solo lo veia el superusuario, y es de quien paga. */
.perfil{display:flex;align-items:center;gap:15px;padding:15px 16px;margin-bottom:12px}
.perfil-av{width:56px;height:56px;border-radius:50%;background:var(--signal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-weight:800;font-size:23px;flex-shrink:0}
.perfil-t{flex:1;min-width:0}
.perfil-t b{font-size:17px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.perfil-t > span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.perfil-t i{font-style:normal}
.perfil-ed{display:none;padding:15px 16px;margin-bottom:12px}
.perfil-ed.abierto{display:block}

.plan-grid{display:grid;grid-template-columns:290px minmax(0,1fr);gap:12px;align-items:stretch}
@media(max-width:820px){.plan-grid{grid-template-columns:1fr}}
.plan-card{background:var(--ink);color:#fff;border-radius:var(--r);padding:18px 19px 19px;display:flex;flex-direction:column}
.pc-est{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.14);color:#fff}
.plan-card > b{display:block;font-family:var(--fd);font-size:23px;font-weight:800;letter-spacing:-.02em;margin-top:14px}
.pc-precio{font-family:var(--fd);font-size:31px;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.pc-precio i{font-style:normal;font-size:18px;opacity:.7}
.pc-precio em{font-style:normal;font-size:14px;font-weight:500;opacity:.6}
.pc-linea{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;background:rgba(255,255,255,.08);border-radius:9px;padding:10px 12px;margin-top:14px;line-height:1.4}
.pc-linea svg{flex-shrink:0;margin-top:1px;opacity:.7}
.pc-linea i{display:block;font-style:normal;font-size:11.5px;opacity:.55;margin-top:2px}
.plan-card .ctl{margin-top:auto;justify-content:center;text-decoration:none}
.plan-card .ctl.fill.azul{margin-top:16px;color:#fff}

.consumo{padding:15px 16px 14px;display:flex;flex-direction:column}
.cons-h{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.cons-h b{font-size:14.5px;font-weight:700}
.cons-h span{margin-left:auto;font-family:var(--fm);font-size:11.5px;color:var(--faint)}
.cons-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.cons-i{padding:12px 14px;border-radius:11px;background:var(--paper);border:1px solid transparent;transition:.12s}
.cons-i:hover{border-color:var(--line)}
@media(max-width:620px){.cons-grid{grid-template-columns:1fr}}
.cons-t{display:block;margin-bottom:9px}
.cons-t span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--faint)}
.cons-t b{display:block;font-family:var(--fd);font-size:21px;font-weight:800;letter-spacing:-.02em;margin-top:5px;line-height:1.1}
.cons-t i{font-style:normal;font-family:var(--fm);font-size:12px;color:var(--faint);font-weight:400;letter-spacing:0}
.cons-bar{height:5px;border-radius:5px;background:#E4E8E2;overflow:hidden}
.cons-bar i{display:block;height:100%;border-radius:5px;background:var(--ok);transition:width .2s}
/* Cuando queda poco margen, el color deja de decir «todo bien». */
.cons-i.tenso .cons-bar i{background:var(--signal)}
.cons-i.tope .cons-bar i{background:var(--danger)}
.cons-i.tenso .cons-n{color:var(--signal)}
.cons-i.tope .cons-n{color:var(--danger)}
.cons-n{font-size:11px;color:var(--muted);margin-top:6px}
.cons-pie{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-2)}


/* Permiso de avisos: el estado lo pone el navegador, y la tarjeta enseña solo
   la frase y el botón que corresponden. */
.permiso{display:flex;align-items:center;gap:13px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:13px}
.perm-t{flex:1;min-width:220px}
.perm-t b{display:block;font-size:13.5px;font-weight:600}
.perm-t span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.permiso .perm-si,.permiso .perm-no,.permiso .perm-mal,
.permiso .perm-btn,.permiso .perm-probar{display:none}
.permiso[data-estado=granted] .perm-si,
.permiso[data-estado=granted] .perm-probar{display:block}
.permiso[data-estado=granted] .perm-probar{display:inline-flex}
.permiso[data-estado=default] .perm-no{display:block}
.permiso[data-estado=default] .perm-btn{display:inline-flex}
.permiso[data-estado=denied] .perm-mal{display:block}
.permiso[data-estado=unsupported] .perm-mal{display:block}
.permiso[data-estado=granted]{background:var(--ok-bg);border-color:var(--ok-line)}
.permiso[data-estado=denied]{background:var(--danger-bg);border-color:var(--danger-line)}



/* Cuatro controles de fecha en un teléfono estrecho: el calendario se queda en
   su icono antes que romper la fila o cortar «Este mes». */
@media(max-width:430px){
  .fecha-fila .calwrap .ctl span{display:none}
  .fecha-fila .calwrap .ctl{width:clamp(40px,12vw,46px);padding:0}
  .fecha-fila .seg > *{font-size:clamp(11px,3.2vw,13px)}
}