/* ===========================================================
   APM Pedidos 2 — sistema de diseño APM
   Mismos tokens que el Portal, Entregas y la app vieja.
   =========================================================== */
:root{
  /* Marca */
  --steel:#1d4ed8; --steel2:#3b82f6; --gris:#64748b;
  --navy:#0b1633; --navy2:#111f45; --navy3:#172a5c;
  --ink:#0f172a; --mut:#64748b; --line:#e2e8f0; --bg:#f4f6fb; --card:#fff;

  /* Por hoja */
  --verde:#245741; --verde-bg:#e9f1ed; --verde-line:#cfe3d8;
  --azul-hoja:#27466a; --morado:#473a6e;
  --ok:#2b7a4b; --ok-bg:#e9f4ed;
  --warn:#d9480f; --warn-bg:#fdf0e8;
  --danger:#c22f2f; --danger-bg:#fbecec;
  --azul-bg:#eff6ff;

  /* Radios */
  --r-modal:20px; --r-card:14px; --r-panel:14px; --r-item:12px;
  --r-btn:12px; --r-input:10px; --r-pill:999px;

  /* Elevación */
  --e1:0 1px 2px rgba(16,24,40,.05), 0 2px 8px rgba(16,24,40,.04);
  --e2:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.08);
  --e3:0 2px 6px rgba(16,24,40,.06), 0 16px 48px rgba(16,24,40,.14);
  --e4:0 4px 10px rgba(16,24,40,.08), 0 28px 72px rgba(16,24,40,.20);

  /* Movimiento */
  --ease:cubic-bezier(.32,.72,.33,1); --dur:220ms; --dur-fast:160ms; --dur-lento:260ms;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{font-family:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;font-weight:700;letter-spacing:.015em;margin:0}
button,input,select,textarea{font:inherit}
.oculto{display:none!important}

/* ===================== Puente (mientras carga) ===================== */
#puente{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:24px;text-align:center;padding:24px;
  background:linear-gradient(145deg,var(--navy),var(--navy3));color:#fff;
}
#puente .marca{width:min(200px,46vw)}
#puente .marca svg{width:100%;fill:#fff;display:block}
#puente p{margin:0;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.75);max-width:34ch;line-height:1.9}
/* Cuando el puente trae un recado, se lee como frase, no como letrero */
#puente.recado p{font-size:16px;letter-spacing:0;text-transform:none;color:#fff;max-width:40ch;line-height:1.55}
#puente.recado .marca{width:min(140px,34vw)}

/* ===================== Login ===================== */
#login{
  position:fixed;inset:0;z-index:50;display:none;flex-direction:column;justify-content:center;
  padding:26px;
  background:
    linear-gradient(115deg,rgba(17,23,50,.94) 0%,rgba(24,34,74,.87) 42%,rgba(30,43,92,.68) 100%),
    url('../img/login-tubos.jpg') center/cover no-repeat;
}
#login .caja{
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-radius:var(--r-card);box-shadow:var(--e4);
  padding:28px 24px;max-width:400px;width:100%;margin:0 auto;
}
#login h1{font-size:26px;color:var(--steel);margin-bottom:4px}
#login .sub{font-size:13.5px;color:var(--mut);margin:0 0 20px}
#login .pie{max-width:400px;width:100%;margin:22px auto 0;text-align:center}
#login .pie svg{width:96px;fill:rgba(255,255,255,.7);display:block;margin:0 auto}

label.f{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);margin:0 0 5px;font-weight:700}
input.f,select.f,textarea.f{
  width:100%;padding:13px;border:1px solid var(--line);border-radius:var(--r-input);
  font-size:16px;background:#fff;margin-bottom:14px;color:var(--ink);
}
input.f:focus,select.f:focus,textarea.f:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(34,48,102,.12)}
/* El ojito para ver la contraseña (Jorge, 24 sep 2026) */
.pass-caja{position:relative}
.pass-caja input.f{padding-right:50px}
.ver-pass{position:absolute;right:4px;top:0;bottom:14px;width:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--mut);cursor:pointer;border-radius:var(--r-input)}
.ver-pass:hover,.ver-pass:focus-visible{color:var(--steel)}
.ver-pass svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ver-pass .tacha{display:none}
.ver-pass[aria-pressed="true"] .tacha{display:inline}

.bpri{
  width:100%;padding:15px;background:var(--steel);color:#fff;border:0;border-radius:var(--r-btn);
  font-weight:700;letter-spacing:.04em;cursor:pointer;transition:background var(--dur-fast) var(--ease);
}
.bpri:hover{background:var(--steel2)}
.bpri:disabled{opacity:.55;cursor:default}
.linkish{background:none;border:0;color:var(--steel);font-size:13.5px;font-weight:600;cursor:pointer;padding:12px 0 0;text-decoration:underline;display:block;width:100%;text-align:center}
#logMsg,#nuevaMsg{font-size:13.5px;color:var(--danger);min-height:20px;margin:12px 0 0;line-height:1.45}
#logMsg.ok,#nuevaMsg.ok{color:var(--ok)}

/* ===================== Cuerpo ===================== */
.titulo{margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.titulo h2{font-size:34px;line-height:1;color:var(--navy);font-weight:800;text-transform:uppercase}
.titulo .linea{font-size:13.5px;color:var(--mut);margin-top:2px}

.tarjeta{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--e1);padding:18px 18px}
.vacio{text-align:center;color:var(--mut);padding:56px 20px;font-size:15px;line-height:1.6}
.vacio b{display:block;font-family:Oswald,sans-serif;font-size:19px;color:var(--ink);font-weight:600;margin-bottom:6px}

.chip{font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:4px 10px;border-radius:var(--r-pill);text-transform:uppercase;display:inline-block}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.danger{background:var(--danger-bg);color:var(--danger)}
.chip.azul{background:var(--azul-bg);color:var(--steel)}

/* ===================== Aviso (flash) ===================== */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:80;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:600;box-shadow:var(--e3);
  opacity:0;pointer-events:none;max-width:min(92vw,460px);text-align:center;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.warn{background:var(--warn)}
#toast.danger{background:var(--danger)}
#toast.ok{background:var(--ok)}


/* ==========================================================
   Pantalla de Pedidos y menú de lado
   ========================================================== */
main{max-width:1320px;margin:0 auto;padding:16px 20px 48px}
.nota b{color:#5c440c}

/* ---------- Día ---------- */
.dias{display:flex;gap:7px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.dias::-webkit-scrollbar{display:none}
.dias button{background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:8px 15px;font-size:13.5px;font-weight:600;color:var(--mut);cursor:pointer;white-space:nowrap;
  transition:all var(--dur-fast) var(--ease)}
.dias button:hover{border-color:var(--steel);color:var(--steel)}
.dias button.on{background:var(--steel);border-color:var(--steel);color:#fff}
.dias button i{font-style:normal;opacity:.65;margin-left:5px;font-weight:700}
.dias button.mal{color:var(--danger);border-color:#f0cfcf;background:var(--danger-bg)}
.dias button.mal.on{background:var(--danger);border-color:var(--danger);color:#fff}

/* ---------- Tira de camiones (pegada arriba) ---------- */
.centinela{height:1px;margin:0}
.tira{position:sticky;top:0;z-index:15;background:var(--bg);
  padding:12px 0 13px;margin-bottom:2px;
  /* la línea de arriba la separa del menú: son dos cosas distintas */
  border-top:1px solid transparent;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.tira.pegada{border-top-color:var(--line);box-shadow:0 12px 16px -14px rgba(16,24,40,.45)}
/* Mientras está pegada, las tarjetas se achican para no comerse la pantalla.
   Se esconde con altura 0 y no con display, para que el cambio sea suave y no
   brinque el scroll. */
.tira.pegada .cam{padding:8px 11px}
.tira.pegada .cam .kg{margin:3px 0 6px}
.cam .queda,.cam .vermat{overflow:hidden;transition:height var(--dur-fast) var(--ease),
  margin var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.tira.pegada .cam .queda,.tira.pegada .cam .vermat{height:0;margin:0;opacity:0;pointer-events:none}
.camiones{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
.cam{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);
  padding:11px 12px 10px;cursor:pointer;position:relative;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.cam:hover{border-color:var(--steel);box-shadow:var(--e1)}
.cam.on{border-color:var(--steel);box-shadow:0 0 0 2px rgba(34,48,102,.14)}
.cam.lleno{border-color:var(--warn)}
.cam.excede{border-color:var(--danger);background:var(--danger-bg)}
.cam .nm{font-family:Oswald,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.02em;
  display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.cam .nm em{font-style:normal;font-family:Barlow,sans-serif;font-size:11px;font-weight:700;color:var(--mut)}
.cam .kg{font-size:12.5px;color:var(--mut);margin:4px 0 7px;white-space:nowrap}
.cam .kg b{color:var(--ink);font-size:14.5px;font-family:Oswald,sans-serif}
.cam.excede .kg b{color:var(--danger)}
.barra{height:7px;background:#eceff4;border-radius:var(--r-pill);overflow:hidden}
.barra i{display:block;height:100%;background:var(--ok);border-radius:var(--r-pill);
  transition:width var(--dur-lento) var(--ease),background var(--dur) var(--ease)}
.barra i.lleno{background:var(--warn)}
.barra i.excede{background:var(--danger)}
.cam .queda{font-size:11.5px;font-weight:700;margin-top:6px;color:var(--ok)}
.cam .queda.lleno{color:var(--warn)} .cam .queda.excede{color:var(--danger)}
/* Camión sin nada hoy: se minimiza a una pastilla y deja de comer espacio */
.vacios{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:9px}
.vacios .et{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);margin-right:2px}
.vacios .cam{padding:6px 13px;border-radius:var(--r-pill);background:#fff;
  border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--mut);
  display:inline-flex;align-items:baseline;gap:7px;cursor:pointer}
.vacios .cam:hover{border-color:var(--steel);color:var(--steel);box-shadow:none}
.vacios .cam.on{border-color:var(--steel);color:var(--steel);box-shadow:0 0 0 2px rgba(34,48,102,.14)}
.vacios .cam em{font-style:normal;font-size:11px;color:var(--gris)}
.cam .vermat{font-size:11.5px;color:var(--steel);font-weight:700;margin-top:6px;
  background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.cam .lista-mat{display:none;position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:30;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-item);box-shadow:var(--e3);
  padding:9px 12px;max-height:230px;overflow:auto;min-width:230px}
.cam.abierto .lista-mat{display:block}
.lista-mat .m{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;
  padding:4px 0;border-bottom:1px dashed #eef0f3;line-height:1.3}
.lista-mat .m:last-child{border:0}
.lista-mat .m b{color:var(--steel);white-space:nowrap}

/* ---------- Tabla de pedidos ---------- */
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--e1)}
thead th{font-family:Oswald,sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);text-align:left;padding:11px 12px;
  background:#f7f8fb;border-bottom:1px solid var(--line);white-space:nowrap}
thead th.der{text-align:right}
tbody td{padding:11px 12px;border-bottom:1px solid #f0f2f6;font-size:14.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.fila:hover{background:#fafbfd}
tbody tr.tarde td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
tbody tr.hoy   td:first-child{box-shadow:inset 3px 0 0 var(--warn)}

.cli{font-weight:700;line-height:1.25}
.obra{font-size:13px;color:var(--mut)}
.prog{white-space:nowrap;font-size:13.5px}
.prog .mal{color:var(--danger);font-weight:700}
.prog .hoy{color:var(--warn);font-weight:700}
.peso{text-align:right;font-family:Oswald,sans-serif;font-size:16px;font-weight:600;
  color:var(--steel);white-space:nowrap}
.peso small{display:block;font-family:Barlow,sans-serif;font-size:11.5px;font-weight:400;color:var(--mut)}
td select{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-input);
  font-size:14px;background:#fff;max-width:158px;cursor:pointer}
td select.sin{color:var(--gris);font-style:italic}
td select:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(34,48,102,.12)}
td input.pd{width:48px;padding:8px;border:1px solid var(--line);border-radius:var(--r-input);
  font-size:14px;text-align:center}
/* Columna de bodega: qué pasa con este pedido en el patio */
.bodcel{min-width:210px}
.sep{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}
.sep.no{background:#f1f2f5;color:var(--gris)}
.sep.medio{background:var(--warn-bg);color:var(--warn)}
.sep.listo{background:var(--verde-bg);color:var(--verde)}
.sep svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6}
.nota-b{display:block;margin-top:6px;font-size:13px;line-height:1.35;cursor:text;
  border:1px dashed transparent;border-radius:var(--r-input);padding:3px 6px;margin-left:-6px;
  transition:border-color var(--dur-fast) var(--ease)}
.nota-b:hover{border-color:var(--line)}
.nota-b.vacia{color:var(--gris);font-style:italic}
.nota-b .yo{color:var(--ink)}
.nota-b .de-patio{color:var(--warn);font-weight:600}
.nota-b .de-patio b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--gris);font-weight:700;font-style:normal}
.nota-in{width:100%;padding:7px 9px;border:1px solid var(--steel);border-radius:var(--r-input);
  font-size:13.5px;box-shadow:0 0 0 3px rgba(34,48,102,.12)}
.nota-in:focus{outline:none}
/* El volquete no se regaña: se separa. Chip callado con su botón. */
.volq{display:flex;align-items:center;gap:7px;margin-top:6px;flex-wrap:wrap;max-width:180px}
.volq .q{font-size:11.5px;font-weight:700;color:var(--mut);background:#f1f2f5;
  padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.volq button{background:none;border:0;color:var(--steel);font-size:12px;font-weight:700;
  cursor:pointer;text-decoration:underline;padding:0}
.volq button:hover{color:var(--steel2)}
.acc{display:flex;gap:6px;justify-content:flex-end}
.acc button{border:1px solid var(--line);background:#fff;border-radius:var(--r-btn);
  padding:8px 14px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:all var(--dur-fast) var(--ease)}
.acc button:hover{border-color:var(--steel);color:var(--steel)}
.acc .pri{background:var(--steel);border-color:var(--steel);color:#fff}
.acc .pri:hover{background:var(--steel2);color:#fff}
.acc .mas{padding:8px 11px;color:var(--mut)}

.vermats{background:none;border:0;color:var(--steel);font-size:12.5px;font-weight:700;
  cursor:pointer;padding:3px 0 0;text-align:left}
tr.mats td{background:#f7f8fb;padding:0 12px 12px 42px}
tr.mats table{border:0;box-shadow:none;background:none;width:auto;min-width:min(620px,100%);border-collapse:separate}
tr.mats td.m{padding:5px 16px 5px 0;font-size:13.5px;border:0}
tr.mats td.q{padding:5px 16px 5px 0;font-size:13.5px;border:0;font-weight:700;white-space:nowrap}
tr.mats td.k{padding:5px 16px 5px 0;font-size:13px;border:0;color:var(--mut);white-space:nowrap;text-align:right}
tr.mats td.b{padding:5px 0;font-size:12px;border:0;white-space:nowrap}
.hoyin{width:86px;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-input);
  font-size:14px;text-align:right;font-weight:700;background:#fff}
.hoyin:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(34,48,102,.12)}
.hoyin.cero{color:var(--gris);background:#f7f8fb;font-weight:400}
.hoyin.parcial{border-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.mats-cab{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 0 8px}
.mats-cab .t{font-family:Oswald,sans-serif;font-size:13px;font-weight:600;color:var(--steel);
  letter-spacing:.04em;text-transform:uppercase;margin-right:4px}
.mats-cab button{border:1px solid var(--line);background:#fff;border-radius:var(--r-btn);
  padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;transition:all var(--dur-fast) var(--ease)}
.mats-cab button:hover{border-color:var(--steel);color:var(--steel)}
.mats-cab button.quepa{background:var(--ok-bg);border-color:#bfe0cc;color:var(--ok)}
.mats-cab button.quepa:hover{background:var(--ok);color:#fff;border-color:var(--ok)}
.mats-pie{padding:9px 0 2px;font-size:13.5px;color:var(--mut);border-top:1px solid var(--line);margin-top:6px}
.mats-pie b{font-family:Oswald,sans-serif;font-size:16px;color:var(--steel)}
.mats-pie .mal{color:var(--danger)}
tr.mats th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);
  text-align:left;font-weight:700;padding:0 16px 6px 4px;font-family:Barlow,sans-serif;background:none;border:0}
tr.mats th.der{text-align:right}
.bod{font-weight:700;padding:2px 8px;border-radius:var(--r-pill);font-size:11px}
.bod.si{background:var(--ok-bg);color:var(--ok)}
.bod.no{background:var(--danger-bg);color:var(--danger)}
.bod.nd{background:#f1f2f5;color:var(--gris)}

@media screen and (max-width:900px){
  thead{display:none}
  table,tbody,tr.fila,td{display:block;width:100%}
  tr.fila{border-bottom:1px solid var(--line);padding:4px 0 10px}
  tbody td{border:0;padding:4px 12px}
  .peso{text-align:left}
  .acc{justify-content:flex-start}
  tr.mats td{padding-left:12px}
}

/* ================= Menú de lado ================= */
.marco{display:flex;min-height:100vh;align-items:flex-start}
.contenido{flex:1;min-width:0}
.lateral{
  flex:0 0 212px;width:212px;position:sticky;top:0;height:100vh;
  background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;
  display:flex;flex-direction:column;box-shadow:var(--e2);z-index:25;
  /* la rueda sobre el menú se queda en el menú: no arrastra la hoja */
  overflow:hidden;overscroll-behavior:contain;
}
.lateral .marca{display:flex;gap:11px;align-items:center;padding:18px 16px 16px;
  border-bottom:1px solid rgba(255,255,255,.13)}
.lateral .marca .lg{width:38px;flex:0 0 auto}
.lateral .marca .lg svg{width:100%;fill:#fff;display:block}
.lateral .marca .t{font-family:"Barlow Condensed",Impact,sans-serif;font-size:18px;font-weight:700;letter-spacing:.025em;line-height:1.05;min-width:0;text-transform:uppercase}
.lateral .marca .t small{display:block;font-family:Barlow,sans-serif;font-size:10px;font-weight:400;
  opacity:.6;letter-spacing:.04em;text-transform:uppercase;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lateral .menu{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 8px;display:block;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.lateral .menu::-webkit-scrollbar{width:6px}
.lateral .menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:99px}
.lateral .menu button{
  display:block;width:100%;text-align:left;background:none;border:0;color:rgba(255,255,255,.74);
  cursor:pointer;font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:9px 12px;border-radius:var(--r-btn);border-bottom:0;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.lateral .menu button:hover{background:rgba(255,255,255,.1);color:#fff}
.lateral .menu button.on{background:var(--steel);color:#fff;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.sep-menu{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.4);padding:14px 12px 5px}

.lateral .quien{display:flex;align-items:center;gap:9px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.13);font-size:12.5px}
.lateral .quien span{flex:1;min-width:0;font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lateral .quien small{display:block;font-weight:400;opacity:.6;text-transform:uppercase;
  letter-spacing:.05em;font-size:10px}
.lateral .quien button{background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:var(--r-pill);
  width:30px;height:30px;cursor:pointer;flex:0 0 auto;display:grid;place-items:center}
.lateral .quien button:hover{background:rgba(255,255,255,.26)}
.lateral .quien svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

/* Íconos del menú: en escritorio no hacen falta (hay sitio para el nombre); en
   teléfono son lo que se ve. */
.lateral .menu button .ic{display:none}
.lateral .menu button .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}

/* v22: en teléfono la barra SIGUE a la izquierda, como un riel angosto con ícono y
   nombre corto. Antes se acostaba arriba (menos de 900 px) y Jorge la quería a la
   izquierda también ahí: el teléfono es la pantalla de Rogelio, que entra a las 8
   de la mañana a ver si ya están las rutas. El riel mide 74 px y el contenido se
   queda con el resto; las tarjetas del patio ya eran de una sola columna. */
@media (max-width:900px){
  .marco{display:flex;align-items:stretch}
  .lateral{
    position:sticky;top:0;height:100vh;height:100dvh;
    flex:0 0 calc(74px + env(safe-area-inset-left));width:calc(74px + env(safe-area-inset-left));
    padding-left:env(safe-area-inset-left);
  }
  .lateral .marca{flex-direction:column;gap:0;padding:calc(12px + env(safe-area-inset-top)) 8px 10px;
    align-items:center}
  .lateral .marca .lg{width:40px}
  .lateral .marca .t{display:none}
  .lateral .menu{padding:8px 5px}
  .lateral .menu button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    width:100%;padding:11px 2px 9px;margin-bottom:4px;
    font-size:10.5px;font-weight:700;letter-spacing:.01em;line-height:1.1;text-align:center;
    white-space:normal;overflow-wrap:anywhere;
  }
  .lateral .menu button .ic{display:block}
  .lateral .menu button.on .ic{color:#fff}
  .lateral .quien{padding:10px 0 calc(10px + env(safe-area-inset-bottom));justify-content:center}
  .lateral .quien span{display:none}
  .lateral .quien button{width:36px;height:36px}
  .sep-menu{display:none}
  main{padding:14px 12px 40px}
  #sub-tabs{padding:12px 12px 0}
}

/* =====================================================================
   PATIO — el módulo de Rogelio.
   Se diseña para el teléfono primero: botones grandes, cero scroll de lado,
   y el dato de cuánto hay siempre pegado al material.
   ===================================================================== */

.tabs{display:flex;gap:6px;background:#e4e8ef;padding:4px;border-radius:var(--r-pill);
      margin-bottom:14px;width:fit-content;max-width:100%}
.tabs button{flex:1;border:0;background:none;border-radius:var(--r-pill);padding:9px 22px;
      font-family:Barlow,sans-serif;font-size:14px;font-weight:700;color:var(--mut);
      cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.tabs button.on{background:var(--card);color:var(--steel);box-shadow:var(--e1)}

/* ---------- El camión ---------- */
.pt-cam{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
        box-shadow:var(--e1);margin-bottom:14px;overflow:hidden}
.pt-cab{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
        padding:14px 16px;background:var(--azul-hoja);color:#fff}
.pt-cam.mostrador .pt-cab{background:var(--gris)}
.pt-nm{font-family:Oswald,sans-serif;font-size:17px;font-weight:600;letter-spacing:.02em;min-width:0}
.pt-nm small{display:block;font-family:Barlow,sans-serif;font-size:12px;font-weight:400;
        letter-spacing:0;opacity:.78;margin-top:2px}
.pt-kg{text-align:right;flex:0 0 auto;min-width:96px}
.pt-kg b{font-family:Oswald,sans-serif;font-size:19px}
.pt-kg em{font-style:normal;font-size:11.5px;opacity:.75}
.pt-kg .barra{margin-top:5px;background:rgba(255,255,255,.25)}
.pt-kg .barra i{background:#8fd0a8}
.pt-kg .barra i.lleno{background:#ffc46b}
.pt-kg .barra i.excede{background:#ff9b9b}

.pt-parada{border-top:1px solid var(--line);padding:12px 16px 4px}
.pt-parada:first-of-type{border-top:0}
.pt-quien{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.pt-quien b{font-size:15px;line-height:1.25}
.pt-quien small{display:block;font-size:13px;color:var(--mut);font-weight:400}
.pt-pd{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-pill);background:var(--steel);
       color:#fff;font-family:Oswald,sans-serif;font-size:13px;font-weight:600;
       display:grid;place-items:center}
.pt-recado{margin:0 0 9px;padding:8px 11px;background:#fdf6e3;border-left:3px solid #e0b84c;
       border-radius:0 var(--r-input) var(--r-input) 0;font-size:13.5px;line-height:1.45;color:#5c440c}
.pt-recado b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}

/* ---------- El material: lo que más se toca ---------- */
.pt-mat{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid #f0f2f6}
.pt-mat:first-of-type{border-top:0}
.pt-mat-txt{flex:1;min-width:0}
.pt-mat-nm{font-weight:600;font-size:14.5px;line-height:1.3}
.pt-mat-va{font-size:13px;color:var(--mut);margin-top:1px}
.pt-obs{font-size:12.5px;color:var(--warn);margin-top:3px}

/* El dato que pidió Jorge: cuánto hay, pegado al material. */
.pt-hay{display:inline-block;margin-top:5px;font-size:12.5px;padding:3px 9px;border-radius:var(--r-pill);
        background:var(--azul-bg);color:var(--steel)}
.pt-hay b{font-family:Oswald,sans-serif;font-size:14px}
.pt-hay.corto{background:var(--warn-bg);color:var(--warn)}
.pt-hay.nd{background:#f1f2f5;color:var(--gris)}
.pt-mat.ok .pt-hay{background:var(--verde-bg);color:var(--verde)}
/* El ámbar de "no alcanza" le gana al verde de "ya lo separé": un letrero verde
   que dice "Faltan 24" son dos recados peleados en el mismo renglón. */
.pt-mat.ok .pt-hay.corto{background:var(--warn-bg);color:var(--warn)}

.pt-chk{flex:0 0 auto;min-width:118px;padding:13px 15px;border:1px solid var(--line);
        background:#fff;border-radius:var(--r-btn);font-family:Barlow,sans-serif;
        font-size:14px;font-weight:700;color:var(--steel);cursor:pointer;
        transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
                   color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.pt-chk:hover{border-color:var(--steel)}
.pt-chk:active{transform:scale(.96)}
.pt-chk.on{background:var(--ok);border-color:var(--ok);color:#fff}
.pt-chk:disabled{opacity:.5}

.pt-pie{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
        padding:12px 16px;border-top:1px solid var(--line);background:#fafbfd}
.pt-salida{flex:1;min-width:200px;padding:14px 18px;border:1px solid var(--steel);background:#fff;
        color:var(--steel);border-radius:var(--r-btn);font-family:Oswald,sans-serif;font-size:15px;
        font-weight:600;letter-spacing:.03em;cursor:pointer;
        transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.pt-salida:hover{background:var(--steel);color:#fff}
.pt-salida.listo{background:var(--ok);border-color:var(--ok);color:#fff}
.pt-salida.listo:hover{background:#25693f}
.pt-falta{font-size:13px;color:var(--warn);font-weight:600}

/* ---------- La hoja de salida ---------- */
.velo{position:fixed;inset:0;z-index:60;background:rgba(16,24,40,.45);
      display:flex;align-items:flex-end;justify-content:center;
      animation:velo-entra var(--dur) var(--ease)}
@keyframes velo-entra{from{opacity:0}to{opacity:1}}
.velo .hoja{background:var(--card);width:100%;max-width:640px;max-height:92vh;
      border-radius:var(--r-modal) var(--r-modal) 0 0;display:flex;flex-direction:column;
      box-shadow:var(--e4);animation:hoja-sube var(--dur-lento) var(--ease)}
@keyframes hoja-sube{from{transform:translateY(30px)}to{transform:translateY(0)}}
.velo header{display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:16px 20px;border-bottom:1px solid var(--line)}
.velo header h3{font-family:Oswald,sans-serif;font-size:19px;font-weight:600;color:var(--steel)}
.velo .x{background:none;border:0;font-size:26px;line-height:1;color:var(--mut);cursor:pointer;padding:0 4px}
.hoja-cuerpo{flex:1;overflow-y:auto;padding:16px 20px}
.velo footer{display:flex;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
      border-top:1px solid var(--line)}
.velo footer .bpri{flex:1}
.bsec{border:1px solid var(--line);background:#fff;border-radius:var(--r-btn);padding:14px 20px;
      font-family:Barlow,sans-serif;font-size:14px;font-weight:700;color:var(--mut);cursor:pointer}
.bsec:hover{border-color:var(--steel);color:var(--steel)}

.pt-ayuda{font-size:13.5px;color:var(--mut);line-height:1.5;margin:0 0 14px}
.pt-sal-ped{margin-bottom:14px}
.pt-sal-ped>b{font-size:14.5px}
.pt-sal-ped>b small{font-weight:400;color:var(--mut);font-size:13px}
.pt-sal-mat{display:flex;gap:9px;align-items:center;padding:9px 0;border-top:1px solid #f0f2f6}
.pt-sal-mat.apagado{opacity:.45}
.pt-sal-mat input[type=checkbox]{width:22px;height:22px;flex:0 0 auto;accent-color:var(--ok)}
.pt-sal-nm{flex:1;min-width:0;font-size:14px;line-height:1.3}
.pt-sal-nm em{display:block;font-style:normal;font-size:11.5px;color:var(--warn);font-weight:700}
.pt-sal-cant{width:88px;flex:0 0 auto;padding:9px;border:1px solid var(--line);
      border-radius:var(--r-input);font-family:Barlow,sans-serif;font-size:16px;text-align:right}
.pt-sal-cant:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(34,48,102,.12)}
.pt-sal-cant.mal{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}
.pt-sal-u{flex:0 0 auto;width:34px;font-size:12px;color:var(--mut);font-weight:600}
.pt-sal-tot{padding:12px 0 0;border-top:1px solid var(--line);font-size:14px;color:var(--mut)}
.pt-sal-tot b{font-family:Oswald,sans-serif;font-size:17px;color:var(--steel)}
.pt-sal-tot .mal{color:var(--danger)}

/* ---------- Captura ---------- */
.pt-cap .f{margin-top:14px}
.pt-tipo{display:flex;gap:9px;margin-bottom:4px}
.pt-tipo button{flex:1;padding:15px;border:1px solid var(--line);background:#fff;
      border-radius:var(--r-btn);font-family:Oswald,sans-serif;font-size:15px;font-weight:600;
      letter-spacing:.04em;color:var(--mut);cursor:pointer;
      transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
                 border-color var(--dur-fast) var(--ease)}
.pt-tipo button.on.ent{background:var(--ok);border-color:var(--ok);color:#fff}
.pt-tipo button.on.sal{background:var(--warn);border-color:var(--warn);color:#fff}

.pt-busca-caja{position:relative}
.pt-res{display:none;position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:30;
      background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);
      box-shadow:var(--e3);overflow:hidden;max-height:340px;overflow-y:auto}
.pt-res.on{display:block}
.pt-res button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;
      border:0;border-bottom:1px solid #f0f2f6;padding:11px 13px;cursor:pointer}
.pt-res button:last-child{border-bottom:0}
.pt-res button:hover{background:var(--bg)}
/* La sugerencia activa con el teclado (↑ ↓): se ve aunque el ratón esté en otro lado. */
.pt-res button.activo{background:var(--bg);box-shadow:inset 4px 0 0 var(--steel)}
.pt-res button.activo .nm{color:var(--steel)}
.pt-res .nm{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.3}
.pt-res .mt{flex:0 0 auto;font-size:11.5px;color:var(--mut)}
.pt-res .hy{flex:0 0 auto;min-width:52px;text-align:right;font-family:Oswald,sans-serif;
      font-size:14px;font-weight:600}
.pt-res .hy.si{color:var(--ok)} .pt-res .hy.no{color:var(--gris)}

.pt-sel{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.pt-sel-cab{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
      padding:12px 14px;background:var(--bg)}
.pt-sel-cab b{font-size:14.5px;line-height:1.3}
.pt-sel-cab small{display:block;font-size:12px;color:var(--mut);margin-top:1px}
.pt-quitar{background:none;border:0;font-size:22px;line-height:1;color:var(--mut);cursor:pointer;padding:0 2px}
.pt-sel-hay{padding:10px 14px;background:var(--azul-bg);color:var(--steel);font-size:13.5px}
.pt-sel-hay b{font-family:Oswald,sans-serif;font-size:17px}
.pt-sel-hay em{font-style:normal;color:var(--mut);font-size:12px}
.pt-sel-hay.cero{background:var(--warn-bg);color:var(--warn)}
.pt-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}
.pt-nums .f{margin-top:0}
.pt-hint{display:block;font-size:11.5px;color:var(--gris);margin-top:3px}

/* La calculadora de la placa: se cobra por medida, no por pieza. */
.pt-placa{padding:14px;background:#fbfcfe;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pt-placa-t{display:flex;align-items:center;justify-content:space-between;gap:10px;
      font-family:Oswald,sans-serif;font-size:13px;font-weight:600;color:var(--steel);
      letter-spacing:.04em;text-transform:uppercase;margin-bottom:9px}
.pt-um{display:flex;gap:3px;background:#e4e8ef;padding:3px;border-radius:var(--r-pill)}
.pt-um button{border:0;background:none;border-radius:var(--r-pill);padding:5px 13px;
      font-family:Barlow,sans-serif;font-size:12.5px;font-weight:700;color:var(--mut);cursor:pointer}
.pt-um button.on{background:#fff;color:var(--steel);box-shadow:var(--e1)}
.pt-placa-in{display:flex;gap:7px;align-items:center}
.pt-placa-in .f{margin:0;flex:1;min-width:0;text-align:center}
.pt-placa-in span{flex:0 0 auto;color:var(--mut);font-weight:700}
.pt-placa-r{margin-top:10px;font-size:13.5px;color:var(--mut)}
.pt-placa-r b{font-family:Oswald,sans-serif;font-size:22px;color:var(--ok)}
.pt-placa-r .nd{color:var(--gris);font-style:italic}

.pt-h3{font-family:Oswald,sans-serif;font-size:14px;font-weight:600;color:var(--steel);
      text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.pt-nada{color:var(--gris);font-size:13.5px;font-style:italic;margin:0}
.pt-mov{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #f0f2f6}
.pt-mov:first-child{border-top:0}
.pt-mov .t{flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-pill);display:grid;
      place-items:center;font-weight:700;font-size:14px}
.pt-mov .t.entrada{background:var(--ok-bg);color:var(--ok)}
.pt-mov .t.salida{background:var(--warn-bg);color:var(--warn)}
.pt-mov .t.ajuste{background:var(--azul-bg);color:var(--steel)}
.pt-mov .d{flex:1;min-width:0}
.pt-mov .d b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.pt-mov .d small{display:block;font-size:11.5px;color:var(--mut);overflow:hidden;
      text-overflow:ellipsis;white-space:nowrap}
.pt-mov .c{flex:0 0 auto;text-align:right;font-family:Oswald,sans-serif;font-size:15px;color:var(--ink)}
.pt-mov .c small{display:block;font-family:Barlow,sans-serif;font-size:11px;font-weight:400;color:var(--mut)}

/* ---------- Existencias ---------- */
.ex-fila{display:flex;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid #f0f2f6}
.ex-fila:last-child{border-bottom:0}
.ex-nm{flex:1;min-width:0}
.ex-nm b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.ex-nm small{display:block;font-size:11.5px;color:var(--mut);margin-top:1px}
.ex-n{flex:0 0 auto;font-family:Oswald,sans-serif;font-size:18px;font-weight:600;color:var(--ok)}
.ex-n.cero{color:var(--gris)}
.ex-n.menos{color:var(--danger)}
.ex-n em{font-style:normal;font-family:Barlow,sans-serif;font-size:12px;color:var(--gris)}

/* ---------- Teléfono ---------- */
@media (max-width:640px){
  .pt-cab{flex-direction:column;gap:8px}
  .pt-kg{text-align:left;width:100%}
  .pt-kg .barra{max-width:220px}
  .pt-mat{flex-direction:column;align-items:stretch;gap:9px}
  .pt-chk{width:100%;padding:15px;font-size:15px}
  .pt-nums{grid-template-columns:1fr}
  .pt-placa-in{flex-wrap:wrap}
  .pt-placa-in .f{min-width:82px}
  .tabs{width:100%}
  .velo .hoja{max-height:96vh}
  .pt-sal-mat{flex-wrap:wrap}
  .pt-sal-nm{flex:1 1 100%;order:-1}
}
.pt-placa-nota{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--gris)}
/* El recado de "faltan materiales por separar" va DENTRO de la hoja, no flotando
   encima: como aviso del sistema tapaba el botón de registrar. */
.pt-alerta{margin:0 0 14px;padding:10px 12px;background:var(--warn-bg);color:var(--warn);
      border-left:3px solid var(--warn);border-radius:0 var(--r-input) var(--r-input) 0;
      font-size:13.5px;font-weight:600;line-height:1.45}

/* ---------- Botones de compartir e imprimir ---------- */
.pt-barra{display:flex;gap:8px;justify-content:flex-end;margin-bottom:10px}
.pt-mini{border:1px solid var(--line);background:#fff;border-radius:var(--r-btn);
      padding:9px 14px;font-family:Barlow,sans-serif;font-size:13px;font-weight:700;
      color:var(--steel);cursor:pointer;white-space:nowrap}
.pt-mini:hover{border-color:var(--steel)}
.pt-mini.wa{background:#25d366;border-color:#25d366;color:#0b3d20}
.pt-mini.wa:hover{background:#1fbb59;border-color:#1fbb59}
.pt-comparte{display:flex;gap:8px;margin-left:auto}
.pt-recol .pt-quien b{font-size:14.5px}
.pt-mat.sin-boton{padding:7px 0}
.pt-que{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.pt-que label,.pt-cam-chk{display:flex;gap:10px;align-items:center;font-size:14.5px;cursor:pointer}
.pt-que input,.pt-cam-chk input{width:20px;height:20px;accent-color:var(--steel)}
.pt-sub2{font-family:Oswald,sans-serif;font-size:12.5px;font-weight:600;color:var(--steel);
      text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.pt-cam-chk{padding:9px 0;border-top:1px solid #f0f2f6}
.pt-cam-chk span{flex:1}
.pt-cam-chk em{font-style:normal;font-size:12px;color:var(--mut)}

/* =====================================================================
   IMPRESIÓN
   Regla que manda: TODO TIENE QUE LEERSE EN NEGRO. El navegador muchas veces
   no imprime los fondos de color, así que nada depende de un relleno: los
   encabezados llevan marco y regla, no fondo. Un camión por página.
   ===================================================================== */
#impresion{display:none}

@media print{
  @page{size:letter portrait;margin:12mm 10mm}
  body.imprimiendo>*{display:none!important}
  body.imprimiendo #impresion{display:block!important}
  body.imprimiendo{background:#fff!important}

  #impresion{font-family:Barlow,sans-serif;color:#000;font-size:10.5pt;line-height:1.35}
  .im-hoja{break-after:page;page-break-after:always}
  .im-hoja:last-child{break-after:auto;page-break-after:auto}

  .im-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:10mm;
      border-bottom:2pt solid #000;padding-bottom:2.5mm;margin-bottom:4mm}
  .im-emp{font-family:Oswald,sans-serif;font-size:13pt;font-weight:600;line-height:1.05}
  .im-emp small{display:block;font-family:Barlow,sans-serif;font-size:8pt;font-weight:400}
  .im-tit{font-family:Oswald,sans-serif;font-size:12pt;font-weight:600;text-align:center;line-height:1.05}
  .im-tit small{display:block;font-family:Barlow,sans-serif;font-size:8.5pt;font-weight:400}
  .im-cam{font-family:Oswald,sans-serif;font-size:15pt;font-weight:600;
      border:1.5pt solid #000;border-radius:2mm;padding:1.5mm 4mm;white-space:nowrap}

  /* Contra cualquier regla de pantalla que ande suelta: la hoja impresa es una
     tabla de verdad, con sus encabezados y sus columnas. */
  .im-tab{width:100%;border-collapse:collapse;display:table;table-layout:auto}
  .im-tab thead{display:table-header-group}
  .im-tab tbody{display:table-row-group}
  .im-tab tfoot{display:table-footer-group}
  .im-tab tr{display:table-row}
  .im-tab th,.im-tab td{display:table-cell;width:auto}
  .im-tab th{font-family:Oswald,sans-serif;font-size:8.5pt;font-weight:600;text-transform:uppercase;
      letter-spacing:.04em;text-align:left;border-bottom:1pt solid #000;padding:1.5mm 2mm}
  .im-tab td{border-bottom:.4pt solid #999;padding:2mm;vertical-align:top}
  .im-tab tfoot td{border-top:1pt solid #000;border-bottom:0;font-size:10pt;padding-top:2mm}
  .im-der{text-align:right;white-space:nowrap}
  .im-chk{width:9mm;text-align:center}
  .im-pd{width:8mm;text-align:center;font-weight:700}
  .im-obs{width:32mm;font-size:9pt}
  .im-caja{display:inline-block;width:5mm;height:5mm;border:1pt solid #000;border-radius:.8mm;
      line-height:4.6mm;text-align:center;font-weight:700}
  .im-tab small{font-size:8.5pt}
  .im-recol td{border-top:1pt solid #000}

  .im-cuadrilla{display:flex;gap:6mm;border:1pt solid #000;border-radius:2mm;
      padding:2.5mm 3mm;margin-bottom:4mm}
  .im-cuadrilla div{flex:1}
  .im-cuadrilla b{display:block;font-family:Oswald,sans-serif;font-size:8pt;font-weight:600;
      text-transform:uppercase;letter-spacing:.05em}
  .im-cuadrilla span{display:block;border-bottom:.6pt solid #000;min-height:5mm}

  .im-parada{border:.8pt solid #000;border-radius:2mm;padding:2.5mm 3mm;margin-bottom:3mm;
      break-inside:avoid;page-break-inside:avoid}
  .im-p-cab{display:flex;gap:3mm;align-items:flex-start}
  .im-p-n{flex:0 0 auto;width:6mm;height:6mm;border:1.2pt solid #000;border-radius:50%;
      text-align:center;line-height:5.6mm;font-family:Oswald,sans-serif;font-weight:600;font-size:9pt}
  .im-p-cab b{font-size:11pt}
  .im-p-cab small{display:block;font-size:9pt}
  .im-oc{margin-left:auto;border:.8pt solid #000;border-radius:1mm;padding:.5mm 2mm;font-size:8.5pt;
      white-space:nowrap}
  .im-dir{margin:1.5mm 0 0 9mm;font-size:9.5pt}
  .im-maps{margin:.5mm 0 0 9mm;font-size:8pt;word-break:break-all}
  .im-mats{margin:2mm 0 0 9mm;padding:0;list-style:none}
  .im-mats li{padding:.8mm 0;border-bottom:.3pt dotted #aaa;font-size:10pt}
  .im-mats li:last-child{border-bottom:0}
  .im-mats em{font-style:normal;font-size:8.5pt}
  .im-nota{margin:2mm 0 0 9mm;font-size:9pt;border-left:1.5pt solid #000;padding-left:2mm}
  .im-total{border-top:1pt solid #000;padding-top:2mm;margin-top:1mm;font-size:11pt}

}

/* ---------- Captura ---------- */
.cap .f{margin-top:14px}
.cap-g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cap-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.cap-busca-caja{position:relative}
.pt-res .nuevo{background:var(--ok-bg)}
.pt-res .nuevo .nm{color:var(--ok);font-weight:700}
.pt-res-nada{padding:11px 13px;font-size:13px;color:var(--gris);font-style:italic}
.cap-arch{display:block;margin-top:6px;padding:13px 14px;border:1px dashed var(--line);
      border-radius:var(--r-input);font-size:14px;color:var(--mut);cursor:pointer;
      text-align:center;background:#fbfcfe;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap-arch:hover{border-color:var(--steel);color:var(--steel)}
.cap-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cap-chips button{border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);
      padding:5px 12px;font-size:12px;font-weight:700;color:var(--mut);cursor:pointer}
.cap-chips button.on{background:var(--steel);border-color:var(--steel);color:#fff}
.cap-chips button.quitar{color:var(--steel)}
.cap-nada{color:var(--gris);font-size:13.5px;font-style:italic;margin:14px 0 0}

.cap-mats{margin-top:14px}
.cap-mat{border:1px solid var(--line);border-radius:var(--r-panel);padding:12px 14px;margin-bottom:10px}
.cap-mat-cab{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.cap-mat-cab b{font-size:14.5px;line-height:1.3}
.cap-mat-cab small{display:block;font-size:12px;color:var(--mut);margin-top:1px}
.cap-quitar{background:none;border:0;font-size:22px;line-height:1;color:var(--mut);cursor:pointer;padding:0 2px}
.cap-quitar:hover{color:var(--danger)}
.cap-ayuda-calc{margin-top:10px;padding:10px 12px;background:#fbfcfe;border:1px solid var(--line);
      border-radius:var(--r-input)}
.cap-calc-t{display:flex;align-items:center;justify-content:space-between;gap:10px;
      font-family:Oswald,sans-serif;font-size:12px;font-weight:600;color:var(--steel);
      letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.cap-calc-t em{font-style:normal;font-family:Barlow,sans-serif;font-size:11.5px;
      font-weight:400;color:var(--mut);text-transform:none;letter-spacing:0}
.cap-igual{font-family:Oswald,sans-serif;font-size:16px;color:var(--ok);white-space:nowrap}
.cap-mat-nums{display:flex;gap:14px;align-items:flex-end;margin-top:10px}
.cap-mat-nums>div:first-child{flex:1;max-width:200px}
.cap-mat-nums .f{margin:0}
.cap-peso{text-align:right;flex:1}
.cap-peso .et{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
      text-transform:uppercase;color:var(--mut)}
.cap-peso b{font-family:Oswald,sans-serif;font-size:19px;color:var(--steel)}
.cap-tot{display:flex;justify-content:space-between;align-items:baseline;
      border-top:1px solid var(--line);padding-top:12px;font-size:14px;color:var(--mut)}
.cap-tot b{font-family:Oswald,sans-serif;font-size:21px;color:var(--steel)}
.cap-volq{margin:14px 0 0;padding:10px 12px;background:#f1f2f5;border-radius:var(--r-input);
      font-size:13.5px;line-height:1.5;color:var(--mut)}
textarea.f{resize:vertical;min-height:56px;font-family:Barlow,sans-serif}

@media (max-width:640px){
  .cap-g2,.cap-g3{grid-template-columns:1fr;gap:0}
  .cap-mat-nums{flex-direction:column;align-items:stretch;gap:10px}
  .cap-mat-nums>div:first-child{max-width:none}
  .cap-peso{text-align:left}
}

/* ---------- Editar, salida y el menú ••• ---------- */
.ed-mat{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #f0f2f6}
.ed-mat:first-child{border-top:0}
.ed-mat.trabada{opacity:.75}
.ed-mat-nm{flex:1;min-width:0}
.ed-mat-nm b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.ed-mat-nm small{display:block;font-size:11.5px;color:var(--mut)}
.ed-mat .hoyin{width:96px;text-align:right;font-size:16px}
.acc-menu{position:absolute;z-index:70;min-width:200px;background:var(--card);
      border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--e3);
      overflow:hidden;padding:4px}
.acc-menu button{display:block;width:100%;text-align:left;background:none;border:0;
      padding:11px 13px;border-radius:var(--r-btn);font-family:Barlow,sans-serif;
      font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.acc-menu button:hover{background:var(--bg)}
.acc-menu button.mal{color:var(--danger)}
.acc-menu button.mal:hover{background:var(--danger-bg)}

/* ---------- Las hojas en pantalla ---------- */
.hp-barra{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.hp-chips{display:flex;gap:7px;flex-wrap:wrap;flex:1}
.hp-chips button{border:1px solid var(--line);background:#fff;border-radius:var(--r-btn);
      padding:8px 13px;font-family:Barlow,sans-serif;font-size:13px;font-weight:700;
      color:var(--mut);cursor:pointer;text-align:left;line-height:1.25}
.hp-chips button em{display:block;font-style:normal;font-size:11px;font-weight:400;
      color:var(--gris);margin-top:1px}
.hp-chips button.on{border-color:var(--steel);color:var(--steel);background:var(--azul-bg)}
.hp-chips button.hp-todos{color:var(--steel)}
.hp-nada{font-size:13.5px;color:var(--gris);font-style:italic}
/* La hoja de verdad, encogida. Se ven los estilos de impresión tal cual. */
.hp-papel{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
      box-shadow:var(--e1);padding:20px;overflow-x:auto}
.hp-papel .im-hoja{max-width:816px;margin:0 auto 28px;padding-bottom:20px;
      border-bottom:2px dashed var(--line);color:#000;font-family:Barlow,sans-serif;font-size:13px}
.hp-papel .im-hoja:last-child{border-bottom:0;margin-bottom:0}
.hp-papel .im-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
      border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:14px}
.hp-papel .im-emp{font-family:Oswald,sans-serif;font-size:17px;font-weight:600;line-height:1.05}
.hp-papel .im-emp small{display:block;font-family:Barlow,sans-serif;font-size:11px;font-weight:400}
.hp-papel .im-tit{font-family:Oswald,sans-serif;font-size:16px;font-weight:600;text-align:center;line-height:1.05}
.hp-papel .im-tit small{display:block;font-family:Barlow,sans-serif;font-size:11px;font-weight:400}
.hp-papel .im-cam{font-family:Oswald,sans-serif;font-size:19px;font-weight:600;
      border:2px solid #000;border-radius:6px;padding:4px 12px;white-space:nowrap}
.hp-papel .im-tab{width:100%;border-collapse:collapse}
.hp-papel .im-tab th{font-family:Oswald,sans-serif;font-size:11px;font-weight:600;
      text-transform:uppercase;letter-spacing:.04em;text-align:left;
      border-bottom:2px solid #000;padding:5px 7px;background:none;color:#000}
.hp-papel .im-tab td{border-bottom:1px solid #bbb;padding:7px;vertical-align:top;
      background:none;font-size:13px}
.hp-papel .im-tab tfoot td{border-top:2px solid #000;border-bottom:0}
.hp-papel .im-der{text-align:right;white-space:nowrap}
.hp-papel .im-chk{width:34px;text-align:center}
.hp-papel .im-pd{width:30px;text-align:center;font-weight:700}
.hp-papel .im-caja{display:inline-block;width:18px;height:18px;border:1.5px solid #000;
      border-radius:3px;line-height:16px;text-align:center;font-weight:700}
.hp-papel .im-cuadrilla{display:flex;gap:22px;border:1.5px solid #000;border-radius:6px;
      padding:9px 12px;margin-bottom:14px}
.hp-papel .im-cuadrilla div{flex:1}
.hp-papel .im-cuadrilla b{display:block;font-family:Oswald,sans-serif;font-size:11px;
      font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.hp-papel .im-cuadrilla span{display:block;border-bottom:1px solid #000;min-height:20px}
.hp-papel .im-parada{border:1px solid #000;border-radius:6px;padding:9px 12px;margin-bottom:11px}
.hp-papel .im-p-cab{display:flex;gap:11px;align-items:flex-start}
.hp-papel .im-p-n{flex:0 0 auto;width:23px;height:23px;border:2px solid #000;border-radius:50%;
      text-align:center;line-height:20px;font-family:Oswald,sans-serif;font-weight:600;font-size:12px}
.hp-papel .im-p-cab b{font-size:15px}
.hp-papel .im-p-cab small{display:block;font-size:12px}
.hp-papel .im-oc{margin-left:auto;border:1px solid #000;border-radius:4px;padding:2px 7px;font-size:11px}
.hp-papel .im-dir{margin:6px 0 0 34px;font-size:13px}
.hp-papel .im-maps{margin:2px 0 0 34px;font-size:11px;word-break:break-all;color:#555}
.hp-papel .im-mats{margin:7px 0 0 34px;padding:0;list-style:none}
.hp-papel .im-mats li{padding:3px 0;border-bottom:1px dotted #bbb;font-size:13px}
.hp-papel .im-mats em{font-style:normal;font-size:11px;color:#555}
.hp-papel .im-nota{margin:7px 0 0 34px;font-size:12px;border-left:3px solid #000;padding-left:8px}
.hp-papel .im-total{border-top:2px solid #000;padding-top:8px;margin-top:6px;font-size:14px}
@media (max-width:640px){
  .hp-barra{flex-direction:column}
  .hp-papel{padding:12px}
}

/* =====================================================================
   TELÉFONO — reglas de piso para toda la app.
   Van al final a propósito: son el último filtro, después de lo que cada
   pantalla haya pedido. Salieron de medir las 13 pantallas con un iPhone
   emulado, no de suponer.
   ===================================================================== */
@media (max-width:640px){

  /* 1. NINGÚN campo por debajo de 16px. Con menos, iPhone hace zoom solo al
        tocarlo y la pantalla se desacomoda a media captura. Se le pone !important
        porque varias pantallas fijan tamaños más chicos para la compu. */
  input, select, textarea,
  .hoyin, .pt-sal-cant, .pd, td select, td input{ font-size:16px!important }

  /* 2. Nada de letra de menos de 12px en la mano. Se salva la vista previa de
        la hoja impresa (.hp-papel), que es papel encogido a propósito. */
  #app :not(.hp-papel):not(.hp-papel *) > small,
  label.f, #app .ad-yo,
  #app small, #app em, #app .obra, #app .mt, #app .et,
  #app .cli small, #app .ex-nm small, #app .pt-mov .d small{ font-size:12px }
  #app .hp-papel small, #app .hp-papel em{ font-size:inherit }

  /* 3. Un botón que el dedo no atina es un botón que no existe. 38px es el piso;
        Apple pide 44 y los grandes ya lo cumplen, pero los chiquitos de una
        tabla no caben a 44 sin romper la fila. */
  #app button:not(.cap-quitar):not(.pt-quitar):not(.x):not(.vermat){
    min-height:38px }
  /* Desplegar los materiales es LA forma de ver un pedido en el teléfono:
     no puede ser un renglón de 22px que hay que atinarle. */
  #app .vermats{ padding:9px 4px; font-size:13.5px }
  /* Una liga que se abre con el dedo necesita alto, aunque sea texto. */
  #app .rt-maps, #app .im-maps a, #app a.maps{ display:inline-block; padding:9px 0; min-height:38px }
  #app .acc button{ padding:9px 12px }
  #app .cap-quitar, #app .pt-quitar, #app .velo .x{ min-width:38px; min-height:38px }

  /* 4. En el teléfono NO se enseña la hoja. Una carta de 21 cm en una pantalla
        de 7 sale cortada y parece rota; y de todos modos desde el teléfono no se
        imprime. Se escoge qué imprimir y ya; la hoja se revisa en la compu. */
  .hp-papel{ display:none }
  .hp-vista::before{ content:'Escoge arriba y toca Imprimir. La hoja completa se '
      'revisa desde la computadora.'; display:block; padding:14px 16px;
      background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
      font-size:13.5px; line-height:1.5; color:var(--mut) }
  .hp-vista:has(.vacio)::before{ content:none }
}

/* El buscador de Pedidos. Tiene su propia clase a propósito: antes reusaba
   "barra" y esa es la barrita de capacidad del camión (7px de alto, con
   recorte), así que el buscador quedaba aplastado e invisible. */
.ped-buscador{margin-bottom:12px}
.ped-buscador .f{width:100%;max-width:520px}
/* Los chips de línea del inventario. Misma forma que los de día en Pedidos:
   si se ven igual, se entiende que se usan igual. */
.ex-lineas{display:flex;gap:7px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.ex-lineas::-webkit-scrollbar{display:none}
.ex-lineas button{background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:8px 15px;font-family:Barlow,sans-serif;font-size:13.5px;font-weight:600;
  color:var(--mut);cursor:pointer;white-space:nowrap}
.ex-lineas button:hover{border-color:var(--steel);color:var(--steel)}
.ex-lineas button.on{background:var(--steel);border-color:var(--steel);color:#fff}
.ex-lineas button i{font-style:normal;opacity:.65;margin-left:5px;font-weight:700}
/* El segundo nivel de existencias: las familias dentro de la línea. Se ven más
   chicas que las líneas para que se entienda que cuelgan de ellas. */
.ex-familias button{padding:6px 12px;font-size:12.5px;background:#f5f7fa}
.ex-familias button.on{background:var(--steel2);border-color:var(--steel2)}
.ex-familias:empty{display:none}
/* La tira de pestañas de un grupo. Va pegada arriba del contenido, fuera de
   #app, para que cada pantalla pueda re-escribir su #app sin borrarla. */
#sub-tabs:empty{display:none}
/* Se alinea con el contenido: main lleva max-width 1320 y padding 16/20, y la
   tira tiene que empezar donde empieza el título, no pegada al borde. */
#sub-tabs{max-width:1320px;margin:0 auto;padding:16px 20px 0}
.tabs.grupo{margin-bottom:0}
@media (max-width:640px){ .tabs.grupo{width:100%;overflow-x:auto} }
/* El chip de una remisión, con su botón de OC al lado cuando hay archivo. */
.hp-chip{display:inline-flex;align-items:stretch;gap:0}
.hp-chip>button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.hp-oc{border:1px solid var(--line);border-left:0;background:#fff;
  border-radius:0 var(--r-btn) var(--r-btn) 0;padding:8px 11px;
  font-family:Oswald,sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--steel);cursor:pointer}
.hp-oc:hover{background:var(--azul-bg)}
/* La OC que todavía vive en la app vieja: se ve distinto para no prometer que abre. */
.hp-oc.vieja{color:var(--warn);border-color:#f0d8c4;background:var(--warn-bg)}

/* ---------- Recolecciones ---------- */
.re-mat{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #f0f2f6}
.re-mat:first-child{border-top:0}
.re-mat-nm{flex:1;min-width:0}
.re-mat-nm b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.re-mat-nm small{display:block;font-size:11.5px;color:var(--mut)}
.re-mat .hoyin{width:104px;text-align:right;font-size:16px}
.pt-hint.re-directo{color:var(--warn);font-weight:600}

/* Confirmación de entrega y regresos */
.ent-viaje .row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ent-viaje h3{margin:0}.ent-viaje .hint{margin:2px 0 0}
.ent-linea{display:grid;grid-template-columns:minmax(190px,1fr) 110px 110px minmax(180px,1fr);
  gap:10px;align-items:end;padding:13px 0;border-top:1px solid var(--line)}
.ent-linea label{font-size:12px;color:var(--mut)}.ent-linea .f{margin:4px 0 0}
.ent-material b,.ent-material small{display:block}.ent-material small{color:var(--mut);margin-top:2px}
.ent-linea.mal{background:var(--danger-bg)}.ent-confirmar{margin-top:14px}
@media(max-width:700px){.ent-linea{grid-template-columns:1fr 1fr}.ent-material,.ent-motivo{grid-column:1/-1}}
.re-tarjeta{border:1px solid var(--line);border-radius:var(--r-panel);padding:13px 15px;margin-top:12px}
.re-tarjeta.armada{border-color:var(--steel);box-shadow:0 0 0 2px rgba(34,48,102,.08)}
.re-cab{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.re-cab b{font-size:15px;line-height:1.25}
.re-cab small{display:block;font-size:12.5px;color:var(--mut)}
.re-datos{display:flex;gap:12px;font-size:12.5px;color:var(--mut);margin-top:5px;flex-wrap:wrap}
.re-datos .nd{color:var(--gris);font-style:italic}
.re-mats{margin:9px 0 0;padding:0;list-style:none}
.re-mats li{padding:4px 0;border-bottom:1px dotted var(--line);font-size:13.5px}
.re-mats li:last-child{border-bottom:0}
.re-mats li.nd{color:var(--gris);font-style:italic}
.re-acc{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
@media (max-width:640px){ .re-mat{flex-wrap:wrap} .re-mat-nm{flex:1 1 100%} .re-mat .hoyin{flex:1} }

/* ================= Franja de ensayo (sólo en la copia de ensayo) =================
   js/entorno.js pone la clase .ensayo en <html> y pinta #franja-entorno. */
#franja-entorno{
  position:fixed;top:0;left:0;right:0;z-index:100;height:28px;
  display:flex;align-items:center;justify-content:center;padding:0 10px;
  background:repeating-linear-gradient(135deg,#b45309 0 14px,#92400e 14px 28px);
  color:#fff;font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
html.ensayo body{padding-top:28px}
html.ensayo #puente,html.ensayo #login,html.ensayo #nueva{top:28px}
html.ensayo .lateral{top:28px;height:calc(100vh - 28px);height:calc(100dvh - 28px)}
@media (max-width:640px){ #franja-entorno{font-size:10.5px;letter-spacing:.02em} }
@media print{
  #franja-entorno{position:static;height:auto;padding:4px 0;background:#fff;color:#92400e;
    border:2px solid #92400e;box-shadow:none;margin-bottom:6px}
  html.ensayo body{padding-top:0}
}

/* ================= Ajustes de inventario y aviso de Patio (migración 006) ================= */
.pt-aviso-ajuste{border-left:4px solid var(--warn,#b45309);background:#fffbeb}
.pt-aviso-ajuste > b{display:block;margin-bottom:4px}
.pt-aviso-ajuste p{margin:0;font-size:13.5px;line-height:1.5}
.aj-mut{display:block;font-size:12px;color:var(--mut);margin:4px 0 0}
.aj-mut.mal,#aj-cuenta.mal{color:var(--danger)}
.aj-form textarea.f{resize:vertical;min-height:70px;font:inherit}
.aj-form .pt-tipo{margin-bottom:10px}
.aj-pend{border-left:4px solid var(--danger);margin-bottom:14px}
.aj-pend p{margin:4px 0}
.aj-botones{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.aj-resumen{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 10px}
.aj-resumen dt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding-top:2px}
.aj-resumen dd{margin:0;font-weight:600}
.aj-resumen dd.ent{color:var(--ok)} .aj-resumen dd.sal{color:var(--danger)}
.aj-mov .aj-motivo{font-style:italic;color:var(--ink)}
/* Números sueltos (fuera de la tarjeta del material): sin sangría, alineados al resto. */
.aj-form > .pt-nums{padding:14px 0 0}
.pt-cap > .pt-nums{padding:14px 0}
.aj-form label.f{margin-top:14px}
.aj-form label.f:first-child{margin-top:0}

/* ================= Conciliación (012) ================= */
.cc-tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cc-tabs .cc-n{font-style:normal;font-size:11px;font-weight:800;background:var(--danger-bg);color:var(--danger);
  border-radius:var(--r-pill);padding:1px 7px;margin-left:4px}
.cc-tabs .cc-recargar{flex:0 0 38px;padding:0;height:36px;font-size:17px;color:var(--mut);cursor:pointer}
.cc-tabs .cc-recargar:hover{color:var(--steel)}
#cc-cuerpo{margin-top:14px}
.cc-nota{font-size:13px;color:var(--mut);margin:8px 0 12px;line-height:1.5}
.cc-nota .linkish{display:inline;width:auto;padding:0;font-size:13px}
.cc-busca{margin:10px 0 8px}
.cc-filtros{flex-wrap:wrap}
.cc-alertas{display:grid;gap:10px}
.cc-alerta{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--steel);
  border-radius:var(--r-card);padding:14px 16px;box-shadow:var(--e1)}
.cc-alerta.danger{border-left-color:var(--danger)} .cc-alerta.warn{border-left-color:var(--warn)}
.cc-alerta header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cc-para{font-size:12.5px;color:var(--mut)}
.cc-alerta h4{margin:8px 0 4px;font-size:15.5px;color:var(--ink)}
.cc-alerta p{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.cc-tabla{width:100%;border-collapse:collapse}
.cc-tabla th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);text-align:left;
  padding:10px 12px;border-bottom:1px solid var(--line);font-weight:700;background:#fafbfd}
.cc-tabla td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}
.cc-tabla .der{text-align:right;white-space:nowrap}
.cc-tabla .cli{font-weight:700}
.cc-tabla .obra{font-size:12px;color:var(--mut);margin-top:2px}
.cc-tabla .obra .chip{font-size:10px;padding:2px 7px;margin-left:4px}
.cc-calc{display:block;font-size:10.5px;color:var(--mut)}
.cc-bloque{margin-bottom:14px}
.cc-bloque p{font-size:14px;line-height:1.5}
.cc-import{margin-top:10px}
.cc-ayuda{margin-top:14px;font-size:13.5px;color:var(--ink)}
.cc-ayuda summary{cursor:pointer;font-weight:700;color:var(--steel)}
.cc-ayuda ul{margin:6px 0 6px 18px;padding:0;line-height:1.55}
.cc-err{color:var(--danger);font-weight:600}
.cc-errores{margin:6px 0 12px 18px;padding:0;color:var(--danger);font-size:13px;line-height:1.5}
.cc-reservas{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cc-reserva header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.cc-reserva header small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.cc-res-mat{margin:10px 0 6px;font-weight:600}
.cc-res-mat small{color:var(--mut);font-weight:400}
.cc-res-num{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 12px}
.cc-res-num div{background:#f6f7fb;border-radius:var(--r-btn);padding:6px 8px}
.cc-res-num dt{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.cc-res-num dd{margin:2px 0 0;font-weight:700}
.cc-res-num .saldo{background:var(--warn-bg)} .cc-res-num .saldo dd{color:var(--warn)}
.cc-cancelar{width:100%}
.cc-sinprod{flex-wrap:wrap}
.cc-rel{flex:1 1 100%;margin-top:6px}
.cc-rel-res{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
@media (max-width:900px){
  .cc-tabla thead{display:none}
  .cc-tabla,.cc-tabla tbody,.cc-tabla tr,.cc-tabla td{display:block;width:100%}
  .cc-tabla tr.fila{border-bottom:1px solid var(--line);padding:6px 0}
  .cc-tabla td{border:0;padding:3px 12px;text-align:left}
  .cc-tabla td[data-e]{display:flex;justify-content:space-between;gap:10px}
  .cc-tabla td[data-e]::before{content:attr(data-e);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
  .cc-res-num{grid-template-columns:repeat(2,1fr)}
  .cc-tabs{border-radius:var(--r-card)}
  .cc-tabs button{padding:9px 10px;flex:1 1 40%}
  .cc-tabs .cc-recargar{flex:0 0 38px}
}

/* ---------------- Saldo inicial (014) ---------------- */
.si-resumen{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:14px}
.si-dato{background:#f6f7fb;border-radius:var(--r-btn);padding:10px 12px}
.si-dato b{display:block;font-size:20px;line-height:1.2}
.si-dato span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-top:2px}
.si-dato small{display:block;font-size:11px;color:var(--mut);margin-top:3px}
.si-dato.ok b{color:var(--ok)} .si-dato.warn b{color:var(--warn)} .si-dato.danger b{color:var(--danger)}
.si-bloque{margin-bottom:14px}
.si-bloque p{font-size:14px;line-height:1.5}
.si-nota{font-size:13px;color:var(--mut);line-height:1.5}
.si-check{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.4;margin-top:10px}
.si-check input{margin-top:2px;width:18px;height:18px;flex:0 0 18px}
.si-tabla .si-cant{width:110px;padding:6px 8px;text-align:right;margin:0}
.si-tabla tr.si-revisar{background:var(--danger-bg)}
@media (max-width:900px){
  .si-resumen{grid-template-columns:repeat(2,1fr)}
  .si-tabla .si-cant{width:100%}
}
.si-tabla .si-mini{padding:3px 8px;font-size:12px;margin-top:4px;width:auto}
.si-tabla tr.si-sinunidad{background:var(--warn-bg)}
.si-check span{display:block}

/* ================= Toma de inventario (023) ================= */
.tm-area{margin-bottom:14px}
.tm-area-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.tm-area-cab h3{font-family:Oswald,sans-serif;font-size:19px;font-weight:600;color:var(--steel);margin:0}
.tm-area-cab .tm-nueva{width:auto;margin:0;padding:8px 14px}
.tm-abierta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 10px;width:100%;text-align:left;
  background:#f6f7fb;border:1px solid var(--line);border-radius:var(--r-btn);padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink)}
.tm-abierta b{font-size:16px}
.tm-abierta small{grid-column:1 / -1;color:var(--mut);font-size:12.5px;line-height:1.4}
.tm-abierta .tm-ir{grid-row:1;grid-column:3;font-weight:700;color:var(--steel);white-space:nowrap}
.tm-hist{margin-top:12px}
.tm-hist summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--mut)}
.tm-hist ul{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--r-input)}
.tm-hist li+li{border-top:1px solid #f0f2f6}
.tm-hist li button{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 12px;font:inherit;font-size:13.5px;cursor:pointer;color:var(--ink)}
.tm-estado-cab{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tm-estado-cab b{font-size:17px}
.tm-pasos{margin:0 0 10px 18px;padding:0;font-size:13px;color:var(--mut);line-height:1.6}
.tm-pasos li.hecho{color:var(--ink)}
.tm-botones{display:flex;gap:10px;flex-wrap:wrap}
.tm-botones button{flex:1;min-width:160px;margin:0}
#tm-linea .linkish{display:inline;width:auto;padding:0}

/* ================= Saldo inicial: vista previa del archivo de existencias (026) ================= */
.si-previa-res b.ok{color:var(--ok)} .si-previa-res b.warn{color:var(--warn)}
.si-previa-tabla{margin:10px 0}
.si-previa-tabla .si-motivo{color:var(--ink);margin-top:4px;line-height:1.4}
.si-sincargar ul{margin:6px 0 0 18px;padding:0;font-size:13px;line-height:1.6}
.si-conv b{font-weight:600} .si-conv .si-tomas{color:var(--ink)} .si-original .obra,.si-kilos .obra{white-space:normal}
.tm-conv{margin-top:4px;text-align:right}
.si-revisar-txt{color:var(--warn)} .si-para-revisar ul{margin:6px 0 0 18px;padding:0;font-size:13px;line-height:1.6}
.si-tabla tr.si-quitado{opacity:.65} .si-residuales ul{margin:6px 0 0 18px;padding:0;font-size:13px;line-height:1.6} .si-aclaracion{line-height:1.5}