:root {
  /* Colores de marca tomados de coppermetal.com.ar */
  --cobre: #002395;        /* azul Copper Metal (principal) */
  --cobre-osc: #001a70;
  --cobre-claro: #e7ecfa;
  --celeste: #007dd1;      /* azul secundario del sitio */
  --metal: #c27a44;        /* acento cobre, solo para detalles */
  --fondo: #f3f5f9;
  --panel: #ffffff;
  --texto: #1c2130;
  --suave: #5f6573;
  --borde: #d9dee8;
  --verde: #1f8a4c;
  --verde-claro: #e3f4ea;
  --rojo: #c0392b;
  --rojo-claro: #fbe6e3;
  --rojo-osc: #8a1c12;      /* texto rojo sobre fondo rojo claro */
  --amarillo: #b7791f;
  --amarillo-claro: #fdf1d8;
  --amarillo-osc: #7a4f0f;  /* texto ámbar sobre fondo ámbar claro */
  --azul: #2563a8;
  --azul-claro: #e2ecf8;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); }
body { font: 17px/1.45 Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
a { color: var(--cobre-osc); }

/* --- barra superior --- */
.top { position: sticky; top: 0; z-index: 20; background: #fff; color: var(--texto); display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-top: 5px solid var(--cobre); border-bottom: 1px solid var(--borde); min-height: 60px; }
.top .marca { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--cobre); text-decoration: none; }
.top .marca img { height: 40px; width: auto; display: block; }
.top .marca span { font-size: .95rem; border-left: 2px solid var(--borde); padding-left: 10px; letter-spacing: .5px; text-transform: uppercase; }
.top .esp { flex: 1; }
.top .quien { font-size: .9rem; text-align: right; line-height: 1.2; }
.top .quien small { color: var(--suave); }
.top button { background: var(--cobre-claro); border: 0; color: var(--cobre); font-weight: 600; border-radius: 10px; padding: 8px 12px; cursor: pointer; }
@media (max-width: 480px) { .top .marca span { display: none; } }
.nav { display: flex; gap: 6px; overflow-x: auto; background: var(--panel); border-bottom: 1px solid var(--borde); padding: 8px 12px; position: sticky; top: 65px; z-index: 19; }
.nav a { white-space: nowrap; text-decoration: none; color: var(--suave); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.nav a.on { background: var(--cobre); color: #fff; }
.nav .n { display: inline-block; min-width: 22px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--celeste); color: #fff; font-size: .8rem; text-align: center; }

main { max-width: 1100px; margin: 0 auto; padding: 16px; padding-bottom: 120px; }

/* --- botones --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--borde); background: var(--panel); cursor: pointer; font-weight: 600; text-decoration: none; color: var(--texto); }
.btn:active { transform: scale(.98); }
.btn.pri { background: var(--cobre); border-color: var(--cobre); color: #fff; }
.btn.ok { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.mal { background: var(--panel); border-color: var(--rojo); color: var(--rojo); }
.btn.grande { min-height: 64px; font-size: 1.15rem; padding: 14px 24px; border-radius: 16px; }
.btn.enorme { min-height: 84px; font-size: 1.35rem; width: 100%; border-radius: 18px; }
.btn.chico { min-height: 38px; padding: 6px 12px; font-size: .9rem; }
.btn.link { border: 0; background: none; color: var(--cobre-osc); padding: 6px 8px; min-height: 0; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fila.fin { justify-content: flex-end; }
.col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .col2 { grid-template-columns: 1fr; } }

/* --- tarjetas --- */
.card { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); margin-bottom: 14px; }
.card h2 { display: flex; align-items: center; gap: 10px; }
.paso { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--celeste); color: #fff; align-items: center; justify-content: center; font-size: .95rem; flex: none; }
.ped { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.ped:active { background: #faf7f4; }
.ped .t { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ped .num { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.ped .t > span:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ped .cli { font-weight: 600; font-size: 1.1rem; margin: 2px 0; }
.ped .meta { color: var(--suave); font-size: .92rem; display: flex; gap: 12px; flex-wrap: wrap; }
.grid-ped { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.grid-ped .card { margin: 0; }
.vacio { text-align: center; color: var(--suave); padding: 36px 12px; }

/* --- etiquetas --- */
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.e-ingresado { background: var(--amarillo-claro); color: var(--amarillo); }
.e-aprobado { background: var(--azul-claro); color: var(--azul); }
.e-en_preparacion { background: var(--cobre-claro); color: var(--cobre-osc); }
.e-preparado { background: var(--verde-claro); color: var(--verde); }
.e-facturado { background: #e3f4ea; color: var(--verde); border: 1px solid #b9e2c9; }
.e-sin_stock { background: var(--rojo); color: #fff; }
.e-despachado { background: #dfe3ea; color: #2c3445; }
.e-anulado { background: var(--rojo-claro); color: var(--rojo); }
.chip.urg { background: var(--rojo); color: #fff; }
.chip.mod { background: #6b2fa3; color: #fff; }
.chip.gris { background: #eceae7; color: #4b4540; }

/* --- formularios --- */
label.l { display: block; font-weight: 600; margin: 12px 0 6px; font-size: .95rem; }
.inp { width: 100%; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--borde); border-radius: 12px; background: #fff; }
.inp:focus { outline: none; border-color: var(--cobre); box-shadow: 0 0 0 3px var(--cobre-claro); }
textarea.inp { min-height: 80px; resize: vertical; }
.opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.opcion { min-height: 60px; border: 2px solid var(--borde); border-radius: 14px; background: #fff; padding: 10px; font-weight: 600; cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.opcion.on { border-color: var(--cobre); background: var(--cobre-claro); color: var(--cobre-osc); }
.opcion.dir { text-align: left; justify-content: flex-start; flex-direction: column; align-items: flex-start; font-weight: 400; }
.opcion.dir b { font-weight: 700; }
.check { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--borde); border-radius: 14px; cursor: pointer; font-weight: 600; background: #fff; }
.check input { width: 28px; height: 28px; accent-color: var(--verde); }
.check.on { border-color: var(--verde); background: var(--verde-claro); }
.res { border: 1px solid var(--borde); border-radius: 12px; margin-top: 8px; max-height: 340px; overflow: auto; background: #fff; }
.res .r { padding: 12px 14px; border-bottom: 1px solid var(--borde); cursor: pointer; }
.res .r:last-child { border-bottom: 0; }
.res .r:active, .res .r:hover { background: var(--cobre-claro); }
.res .r small { color: var(--suave); display: block; }
.sel { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: var(--cobre-claro); border-radius: 12px; }
.sel b { font-size: 1.1rem; }

/* renglones del pedido */
.item { border: 1px solid var(--borde); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #fff; }
.item .desc { font-weight: 600; }
.item .cod { color: var(--suave); font-size: .85rem; }
.item .ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.item .ctrl2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.item.duda { border-color: var(--amarillo); background: var(--amarillo-claro); }
.aviso { padding: 12px 14px; border-radius: 12px; margin: 10px 0; }
.aviso.am { background: var(--amarillo-claro); color: var(--amarillo-osc); }
.aviso.rj { background: var(--rojo-claro); color: var(--rojo); }
.aviso.vd { background: var(--verde-claro); color: var(--verde); }
.aviso.mod { background: #f1e7fa; color: #4e1f7a; }

/* barra inferior fija */
.barra { position: fixed; left: 0; right: 0; bottom: 0; background: var(--panel); border-top: 1px solid var(--borde); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); z-index: 30; box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
.barra .in { max-width: 1100px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.barra .tot { flex: 1; font-size: 1.05rem; }
.barra .tot b { font-size: 1.4rem; }

/* expedición: carga de kilos */
.prep { display: grid; grid-template-columns: 1fr 180px 130px; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--borde); }
.prep:last-child { border-bottom: 0; }
.prep .desc { font-size: 1.15rem; font-weight: 600; }
.prep .pedido { color: var(--suave); }
.prep .kg { font-size: 1.5rem; font-weight: 700; text-align: right; min-height: 64px; }
.prep .br { font-size: 1.2rem; text-align: right; min-height: 64px; }
.prep small.lb { display: block; color: var(--suave); font-size: .8rem; text-align: right; margin-bottom: 2px; }
@media (max-width: 640px) { .prep { grid-template-columns: 1fr 1fr; } .prep > div:first-child { grid-column: 1 / -1; } }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; }
.datos div small { display: block; color: var(--suave); font-size: .82rem; }
.datos div b { font-weight: 600; }
.grande-txt { font-size: 1.25rem; }

/* tablas */
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { color: var(--suave); font-weight: 600; font-size: .85rem; }
.tabla td.n, .tabla th.n { text-align: right; }

/* historial */
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { padding: 8px 0; border-bottom: 1px dashed var(--borde); font-size: .92rem; }
.hist li small { color: var(--suave); }

/* modal */
.velo { position: fixed; inset: 0; background: rgba(20,14,8,.5); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; border-radius: 18px; padding: 22px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; }
.modal h2 { margin-bottom: 12px; }
.toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); background: #1f1b17; color: #fff; padding: 14px 20px; border-radius: 12px; z-index: 60; font-weight: 600; max-width: 90vw; text-align: center; }
.toast.err { background: var(--rojo); }

/* login */
.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; background: radial-gradient(1200px 600px at 20% -10%, #0a3fc4 0%, transparent 60%), linear-gradient(160deg, var(--cobre) 0%, #00124d 100%); }
.login .caja { background: #fff; border-radius: 22px; padding: 28px 24px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 20px 50px rgba(0,10,50,.35); }
.login .caja img { height: 64px; margin-bottom: 8px; }
.login .pie { color: rgba(255,255,255,.75); font-size: .85rem; text-align: center; line-height: 1.5; }
.login .pie b { color: #fff; }
.login h1 { margin-bottom: 4px; }
.login p { color: var(--suave); margin-top: 0; }
.puntos { display: flex; justify-content: center; gap: 16px; margin: 22px 0; }
.puntos span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--cobre); }
.puntos span.on { background: var(--cobre); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.teclado button { height: 72px; font-size: 1.7rem; font-weight: 600; border-radius: 16px; border: 1px solid var(--borde); background: #faf8f6; cursor: pointer; }
.teclado button:active { background: var(--cobre-claro); }
.teclado button.vacio { visibility: hidden; }
.cargando { text-align: center; padding: 40px; color: var(--suave); }
.oculto { display: none !important; }

/* operación por renglón (no se muestra en expedición) */
.ops { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borde); }
.ops.on { background: var(--cobre-claro); margin: 10px -12px -12px; padding: 10px 12px 12px; border-radius: 0 0 12px 12px; border-top: 1px solid var(--borde); }
.ops-fila { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.ops-fila select { flex: 1; min-width: 180px; }
.ops-lb { font-weight: 600; font-size: .92rem; color: var(--suave); }
.ops-cant { width: 110px; flex: none; }
.ops-resto { font-weight: 700; }

/* expedición: tablero de 4 columnas en tablet horizontal, 2 en vertical, 1 en celular */
.exp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1150px) { .exp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .exp-grid { grid-template-columns: 1fr; } }
.exp-grid h2 { font-size: 1.05rem; }
.sec-sinstock h2 { color: var(--rojo); }
.sec-terminados h2 { color: var(--verde); }
.sinstock-txt { color: var(--rojo); font-weight: 700; font-size: .92rem; margin-top: 4px; }
.prep.sinstock { background: var(--rojo-claro); margin: 0 -16px; padding: 14px 16px; }
.prep.sinstock .desc { text-decoration: line-through; color: var(--rojo); }
.btn-ss { margin-top: 8px; }
.prep.sinstock .btn-ss { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.nav .n.rojo { background: var(--rojo); }

/* tablero de expedición: búsqueda y vista por zona */
.exp-barra { margin-bottom: 14px; }
.seg { display: inline-flex; border: 1.5px solid var(--borde); border-radius: 12px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: none; padding: 0 18px; min-height: 52px; font-weight: 600; cursor: pointer; color: var(--suave); }
.seg button.on { background: var(--cobre); color: #fff; }
.zona { margin-bottom: 22px; }
.zona h2 { border-bottom: 2px solid var(--borde); padding-bottom: 6px; }
.balanza-mal { border-color: var(--amarillo) !important; background: var(--amarillo-claro) !important; }
.hint-bal { display: block; color: var(--amarillo-osc); font-size: .78rem; text-align: right; margin-top: 2px; }
.kg-adm { background: var(--verde-claro); border-radius: 10px; padding: 8px; }
.kg-adm label small { display: block; color: var(--verde); font-weight: 700; margin-bottom: 2px; }

.vinc { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: var(--verde-claro); color: var(--verde); font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vinc.nuevo { background: var(--azul-claro); color: var(--azul); font-weight: 500; }

/* operación por renglón y materiales */
.opciones.ops3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opciones.ops3 .opcion { min-height: 50px; font-size: .92rem; }
@media (max-width: 480px) { .opciones.ops3 { grid-template-columns: 1fr 1fr; } .opciones.ops3 .opcion:last-child { grid-column: 1 / -1; } }
.ops-info { font-size: .92rem; margin-top: 2px; }
.ops-info .err { color: var(--rojo); font-weight: 600; }
.opciones.mat { grid-template-columns: repeat(2, 1fr); }
.opciones.mat.sub { grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
.opciones.mat.sub .opcion { min-height: 48px; font-size: .95rem; }

.opciones.tiposmo { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opciones.tiposmo .opcion { min-height: 46px; font-size: .92rem; }

.ver-como { border: 1.5px solid var(--borde); border-radius: 10px; padding: 6px 8px; background: #fff; font-size: .85rem; max-width: 190px; }
.banda-vista { background: var(--amarillo-claro); color: var(--amarillo-osc); padding: 8px 16px; font-size: .92rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.banda-vista button { border: 0; background: var(--amarillo-osc); color: #fff; border-radius: 8px; padding: 6px 10px; font-weight: 600; cursor: pointer; }
@media (max-width: 480px) { .ver-como { max-width: 110px; } .top .quien { display: none; } }

.chip.saldo { background: #fde7c7; color: var(--amarillo-osc); }

/* --- Pausa, frenados, menú Más, historial, etiquetas, entorno de pruebas --- */
.chip.pausa { background: var(--cobre-claro); color: var(--cobre-osc); }
.pausa-txt { margin-top: 6px; color: var(--cobre-osc); font-weight: 600; font-size: .9rem; }
.aviso.pausa { background: #e8eeff; color: var(--cobre-osc); border-left: 5px solid var(--cobre-osc); }
.opciones.motivos { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .opciones.motivos { grid-template-columns: 1fr; } }
.frenados { background: var(--rojo-claro); border: 1px solid #f3c2bb; border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; }
.frenados summary { cursor: pointer; color: var(--rojo); font-size: 1rem; }
.frenados ul { list-style: none; margin: 8px 0 0; padding: 0; columns: 2 320px; }
.frenados li { padding: 6px 0; border-top: 1px dashed #f3c2bb; break-inside: avoid; }
.frenados a { color: inherit; text-decoration: none; }
.frenados small { color: var(--suave); }
.menu-mas { display: grid; gap: 10px; }
.menu-mas .btn { width: 100%; justify-content: flex-start; }
.linea { list-style: none; margin: 0; padding: 0; }
.linea li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--borde); }
.linea .ico { width: 30px; height: 30px; border-radius: 50%; background: #f1ede8; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.linea .quien-cuando { color: var(--suave); font-size: .85rem; }
.linea .det { margin-top: 4px; font-size: .88rem; background: #faf8f5; border-radius: 8px; padding: 6px 9px; }
.linea .ev-anulado .ico, .linea .ev-sin_stock .ico { background: var(--rojo-claro); }
.linea .ev-pausado .ico { background: var(--cobre-claro); }
.linea .ev-modificado .ico { background: #efe3fa; }
.banda-pruebas { background: repeating-linear-gradient(45deg, #ffd23f, #ffd23f 14px, #ffe27a 14px, #ffe27a 28px); color: #3a2c00;
  text-align: center; font-weight: 800; padding: 6px 10px; font-size: .9rem; letter-spacing: .02em; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.etq { background: #fff; border: 2px solid #111; border-radius: 6px; padding: 5mm; color: #000; display: flex; flex-direction: column; gap: 3mm; }
.f-10x15 .etq { width: 100mm; height: 150mm; box-sizing: border-box; }
.f-a4 .etq { width: 105mm; height: 148.5mm; box-sizing: border-box; }
.etq-top { display: flex; align-items: center; gap: 2mm; border-bottom: 2px solid #111; padding-bottom: 2mm; }
.etq-top img { height: 9mm; }
.etq-top span { font-size: 8pt; flex: 1; }
.etq-top b { font-size: 20pt; }
.etq-cli { font-size: 20pt; font-weight: 800; line-height: 1.1; }
.etq-dest { font-size: 13pt; font-weight: 600; }
.etq-prods { font-size: 10pt; flex: 1; overflow: hidden; }
.etq-prods div { padding: 1mm 0; border-bottom: 1px dotted #999; }
.etq-pie { display: flex; justify-content: space-between; align-items: flex-end; font-size: 11pt; border-top: 2px solid #111; padding-top: 2mm; }
.etq-bulto { font-size: 18pt; font-weight: 800; border: 2px solid #111; padding: 1mm 3mm; border-radius: 4px; }
.etq-obs { font-size: 9pt; font-style: italic; }
@media print {
  body.imprimiendo-etq header.top, body.imprimiendo-etq nav.nav, body.imprimiendo-etq .no-print,
  body.imprimiendo-etq .banda-vista, body.imprimiendo-etq .banda-pruebas, body.imprimiendo-etq .toast { display: none !important; }
  body.imprimiendo-etq, body.imprimiendo-etq main { background: #fff; padding: 0; margin: 0; max-width: none; }
  body.imprimiendo-etq .etiquetas { margin: 0; gap: 0; }
  body.imprimiendo-etq .f-10x15 .etq { border: 0; border-radius: 0; page-break-after: always; break-after: page; }
  body.imprimiendo-etq .etiquetas.f-a4 { display: grid; grid-template-columns: 105mm 105mm; gap: 0; }
  body.imprimiendo-etq .f-a4 .etq { border: 0; border-radius: 0; padding: 7mm; }
  body.imprimiendo-etq .f-a4 .etq:nth-child(4n) { page-break-after: always; break-after: page; }
}
.barra .in.acciones { flex-wrap: wrap; }
.acciones .btn { white-space: nowrap; }
@media (max-width: 600px) { .acciones .tot { display: none; } .acciones .btn { flex: 1 1 auto; padding: 0 10px; } }
.etq-bulto { white-space: nowrap; }
.f-a4 .etq-bulto { font-size: 14pt; }
.banda-seg { display: block; background: var(--rojo); color: #fff; padding: 8px 16px; font-size: .92rem; text-decoration: none; }
.banda-seg b { margin-left: 6px; text-decoration: underline; }
.aviso.ok-seg { background: var(--verde-claro); color: var(--verde); }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--borde); }
.checklist li.ok span { color: #1e8a3c; font-weight: 800; }
.checklist li.pend span { color: #b26a00; font-weight: 800; }
.checklist small { color: var(--suave); }
.envases { margin: 12px 0 4px; padding: 12px; border: 2px solid #c9a227; background: #fffaf0; border-radius: 14px; }
.env-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 6px; }
.env-grid label small { display: block; font-weight: 700; margin-bottom: 4px; }
.env-grid .inp { text-align: center; font-size: 1.3rem; font-weight: 700; }
.corte { display: block; margin-top: 8px; padding: 8px 10px; background: var(--amarillo-claro); border: 2px dashed #c77700; border-radius: 12px; }
.corte small { display: block; font-weight: 700; color: var(--amarillo-osc); margin-bottom: 4px; }
.corte-txt { color: var(--amarillo-osc); font-weight: 700; }
.corte-txt.grande { font-size: 1.15rem; margin-top: 4px; }
.dir-falta { margin-top: 6px; color: var(--rojo); font-weight: 700; font-size: .9rem; background: var(--rojo-claro); border-radius: 8px; padding: 4px 8px; }
.dir-sinconf { margin-top: 6px; color: var(--amarillo-osc); font-weight: 600; font-size: .9rem; background: var(--amarillo-claro); border-radius: 8px; padding: 4px 8px; }
.aviso.dir-aviso { background: var(--rojo-claro); color: var(--rojo-osc); border-left: 5px solid var(--rojo); }
.aviso.dir-aviso.sc { background: var(--amarillo-claro); color: var(--amarillo-osc); border-left-color: #c99400; }
/* --- Menú de pedidos de administración en mosaicos --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 2px solid var(--borde);
  text-decoration: none; color: inherit; cursor: pointer; font: inherit; text-align: left; position: relative; min-height: 86px; }
.tile .ti { font-size: 1.3rem; }
.tile .tt { font-weight: 700; line-height: 1.2; }
.tile .tn { position: absolute; top: 10px; right: 12px; font-size: 1.5rem; font-weight: 800; color: var(--cobre-osc); }
.tile.on { border-color: var(--cobre-osc); background: #eef2ff; }
.tile.alerta { border-color: #e5a29b; background: var(--rojo-claro); }
.tile.alerta .tn { color: var(--rojo); }
.tile.mas { align-items: flex-start; color: var(--suave); }
@media (max-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } .tile { min-height: 74px; padding: 10px 12px; } }
h3.grupo { margin: 18px 0 8px; font-size: 1rem; color: var(--suave); }
.con-accion { display: flex; flex-direction: column; gap: 6px; }
.con-accion .card { margin-bottom: 0; }
.ord-fila { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--borde); }
.ord-fila.apagada span { color: var(--suave); }
.ord-vis { display: flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.ord-vis input { width: 22px; height: 22px; }
.card.sis { display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit; }
.card.sis .ti { font-size: 2rem; }
.btn-sug { border: 0; background: var(--amarillo-claro); color: var(--amarillo-osc); border-radius: 10px; padding: 8px 12px; font-weight: 700; cursor: pointer; margin-right: 6px; font: inherit; font-weight: 700; }
@media (max-width: 480px) { .btn-sug span, #btnSalir span { display: none; } }
.chip.sug-nueva { background: #fde7c7; color: var(--amarillo-osc); }
.chip.sug-en_curso { background: var(--cobre-claro); color: var(--cobre-osc); }
.chip.sug-hecha { background: var(--verde-claro); color: var(--verde); }
.chip.sug-descartada { background: #eceae7; color: #4b4540; }
.sug-texto { white-space: pre-wrap; font-size: 1.05rem; margin: 8px 0; }
.sug-mia { padding: 8px 0; border-bottom: 1px dashed var(--borde); }
.sug-resp { color: var(--cobre-osc); margin-top: 4px; }
.alt-med { margin-top: 8px; padding: 8px 10px; background: var(--azul-claro); border: 2px dashed #2563a8; border-radius: 12px; color: var(--cobre-osc); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn.link.alt-add { margin-top: 4px; padding-left: 0; }
.alt-txt { color: var(--cobre-osc); font-weight: 600; font-size: .9rem; }
.alt-elegir { margin: 8px 0; padding: 8px; background: var(--azul-claro); border-radius: 12px; }
.alt-elegir small { display: block; font-weight: 700; color: var(--cobre-osc); margin-bottom: 6px; }
.alt-elegir .seg button { white-space: normal; text-align: center; }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px; -webkit-overflow-scrolling: touch; }
.filtro { flex: 0 0 auto; border: 2px solid var(--borde); background: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.filtro span { display: inline-block; min-width: 22px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #eceae7; font-size: .85rem; }
.filtro.on { border-color: var(--cobre-osc); background: #eef2ff; color: var(--cobre-osc); }
.filtro.on span { background: var(--cobre-osc); color: #fff; }
.filtro.alerta { border-color: #e5a29b; color: var(--rojo); }
.filtro.alerta span { background: var(--rojo); color: #fff; }
.avisos-imp { max-height: 240px; overflow: auto; margin: 6px 0 0; padding-left: 18px; font-size: .88rem; }

.editar-us { float: right; color: var(--cobre-osc); font-size: .85rem; font-weight: 600; }
.anul-txt { margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: var(--rojo-claro); color: var(--rojo); font-weight: 800; }
.sec-anulados { grid-column: 1 / -1; margin-bottom: 8px; }
.sec-anulados h2 { color: var(--rojo); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sec-anulados .card.ped { border-color: var(--rojo); opacity: .9; }
.prep.con-tachos { grid-template-columns: 1fr; }
.tachos-box { background: var(--amarillo-claro); border-radius: 12px; padding: 10px; }
.tachos-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.tachos-sep { display: block; }   /* la fila de bolsones va debajo de la de tachos, alineada */
@media (max-width: 560px) { .tachos-in { grid-template-columns: 1fr 1fr; } .tachos-in > div:first-child { grid-column: 1 / -1; } }
.neto-txt { margin-top: 8px; font-size: 1.05rem; }
.tara-txt { color: var(--amarillo-osc); font-weight: 600; }
.nota-com { background: var(--cobre-claro); border: 1px dashed #8aa4e8; color: #1d3a8a; }
.nombres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 52vh; overflow-y: auto; }
.nombre-btn { min-height: 64px; padding: 10px; font-size: 1.05rem; font-weight: 700; border-radius: 14px; border: 1px solid var(--borde); background: #faf8f6; cursor: pointer; color: var(--texto, #1d1d1f); }
.nombre-btn:active { background: var(--cobre-claro); }
.fecha-nav { align-items: center; gap: 8px; margin-bottom: 12px; }
.fecha-nav .btn { min-width: 48px; font-size: 1.3rem; }
.fecha-tit { flex: 1; text-align: center; font-weight: 800; font-size: 1.15rem; }
.fecha-res { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.fecha-res .tot { font-size: 1.1rem; margin-bottom: 8px; }
.chips-est { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-est { padding: 6px 10px; border-radius: 999px; background: #f1efec; text-decoration: none; color: inherit; font-size: .9rem; }
.grupo-fecha { margin-bottom: 14px; }
.grupo-fecha > summary { cursor: pointer; font-weight: 800; font-size: 1.05rem; padding: 8px 0; display: flex; gap: 8px; align-items: center; border-bottom: 2px solid var(--borde); margin-bottom: 10px; }
.btn-notif { position: relative; border: 0; background: var(--cobre-claro); border-radius: 10px; padding: 8px 10px; cursor: pointer; margin-right: 6px; font-size: 1.05rem; }
.notif-n { position: absolute; top: -6px; right: -6px; background: var(--rojo); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 800; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 4px; }
.notif-lista { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.notif { display: block; padding: 10px 12px; border-radius: 12px; background: #f6f5f3; text-decoration: none; color: inherit; }
.notif.nueva { background: #eef3ff; border-left: 4px solid var(--cobre); font-weight: 600; }
.notif small { color: var(--suave); font-weight: 400; }
.tiempos > div { display: flex; flex-direction: column; gap: 2px; }
.fn-item { display: flex; align-items: center; gap: 14px; justify-content: space-between; cursor: pointer; }
.switch { position: relative; width: 54px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #ccc; border-radius: 999px; transition: .2s; }
.switch span::before { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--verde); }
.switch input:checked + span::before { transform: translateX(24px); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 640px) { .kpis { grid-template-columns: 1fr; } }
.kpis .card { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.kpis b { font-size: 1.8rem; } .kpis span { color: var(--suave); }
.barras-dia td:nth-child(2) { width: 60%; }
.barra-kg { height: 9px; border-radius: 5px; margin: 2px 0; min-width: 2px; }
.barra-kg.carg, .ley.carg { background: #8aa4e8; } .barra-kg.desp, .ley.desp { background: var(--verde); }
.ley { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; }
.remito { background: #fff; padding: 18px; border: 1px solid var(--borde); border-radius: 12px; max-width: 800px; margin: 0 auto; }
.rem-top { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #111; padding-bottom: 10px; }
.rem-top img { height: 44px; } .rem-num { margin-left: auto; text-align: right; font-size: 1.2rem; }
.rem-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.rem-datos small { display: block; color: #666; }
.rem-firmas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 60px; }
.rem-firmas div { border-top: 1px solid #111; padding-top: 6px; font-size: .85rem; text-align: center; }
@media print { header.top, nav.nav, .banda-pruebas, .banda-seg, .no-print, .toast { display: none !important; } main { padding: 0 !important; } .remito { border: 0; } body { background: #fff; } }
.btn-falta.on { background: var(--amarillo-claro); border-color: #e0a800; }
.falta-box { margin-top: 8px; background: var(--amarillo-claro); padding: 8px 10px; border-radius: 10px; }

/* Colores por material en expedición: latón amarillo, forja verde, MN (manganeso) marrón */
.prep.mat-laton, .prep.mat-forja, .prep.mat-mn, .prep.mat-cobre { margin: 6px -16px; padding: 14px 16px 14px 12px; border-left: 8px solid; border-radius: 8px; border-bottom: 0; }
.prep.mat-laton { background: #fff8d6; border-left-color: #e6b800; }
.prep.mat-forja { background: #e3f5e6; border-left-color: #2e9e4b; }
.prep.mat-mn { background: #d9bc9c; border-left-color: #5a3417; }
.prep.mat-cobre { background: #fdeee6; border-left-color: #c8642e; }
.prep.sinstock { background: var(--rojo-claro) !important; }
tr.mat-laton td { background: #fff8d6; } tr.mat-laton td:first-child { box-shadow: inset 6px 0 0 #e6b800; }
tr.mat-forja td { background: #e3f5e6; } tr.mat-forja td:first-child { box-shadow: inset 6px 0 0 #2e9e4b; }
tr.mat-mn td { background: #d9bc9c; } tr.mat-mn td:first-child { box-shadow: inset 6px 0 0 #5a3417; }
tr.mat-cobre td { background: #fdeee6; } tr.mat-cobre td:first-child { box-shadow: inset 6px 0 0 #c8642e; }
.mat-tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; vertical-align: middle; color: #fff; }
.mat-laton .mat-tag { background: #c99a00; color: #2b2100; }
.mat-forja .mat-tag { background: #2e9e4b; }
.mat-mn .mat-tag { background: #5a3417; }
.prep.mat-mn .pedido { color: #4a3220; }
.mat-cobre .mat-tag { background: #c8642e; }

/* Entrega con autorización de administración */
.chip.autz { background: #5b3cc4; color: #fff; }
.chip.autz-ok { background: var(--verde-claro); color: var(--verde); }
.aviso.autz-aviso { background: #efeafd; color: #3d2a8a; border-left: 4px solid #5b3cc4; margin-top: 8px; }

/* Firma de quien termina o despacha */
.firma-box { background: #f4f6fb; border: 1px dashed #b9c3dc; border-radius: 10px; padding: 10px 12px; margin-top: 12px; }

/* Total de kilos al pie de la tabla de productos (para la captura que se manda al cliente) */
tr.total-kg td { border-top: 2px solid var(--borde); padding-top: 10px; font-size: 1.15rem; font-weight: 700; }
tr.total-kg td.n b { font-size: 1.35rem; }

/* Aviso de versión nueva */
.banda-version { position: fixed; top: 0; left: 0; right: 0; z-index: 200000; border: 0; padding: 12px 16px; background: #0b2a8f; color: #fff; font: 700 1rem system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25); }

/* ================= Planta ================= */
.pl-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-tabs a { padding: 8px 14px; border-radius: 99px; background: #eef2fb; color: var(--azul); font-weight: 600; text-decoration: none; }
.pl-tabs a.on { background: var(--azul); color: #fff; }
.pl-fecha { align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pl-fecha .esp { flex: 1; }
.pl-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
.pl-kpis .card { margin: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.pl-kpis .card span { color: var(--suave); font-size: .9rem; } .pl-kpis .card b { font-size: 1.35rem; } .pl-kpis .card small { color: var(--suave); }
.pl-kpis .card.alerta { border-color: #f0b8b8; background: var(--rojo-claro); }
@media (max-width: 1000px) { .pl-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .pl-kpis { grid-template-columns: repeat(2, 1fr); } }
.pl-t td, .pl-t th { padding: 7px 8px; }
.pl-obs td { color: #6b4e16; background: #fffaf0; font-size: .92rem; }
.pl-fuera td { background: var(--rojo-claro); }
.pl-nota { color: var(--suave); font-size: .9rem; }
.pl-sectores, .pl-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pl-sector, .pl-opcion { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; cursor: pointer; margin: 0; min-height: 130px; }
.pl-sector span, .pl-opcion span { font-size: 2rem; } .pl-sector small, .pl-opcion small { color: var(--suave); }
.pl-sector:hover, .pl-opcion:hover { border-color: var(--azul); }
.pl-editor.con-foto { display: grid; grid-template-columns: minmax(260px, 38%) 1fr; gap: 14px; align-items: start; }
.pl-foto { position: sticky; top: 10px; } .pl-foto img { width: 100%; border-radius: 10px; border: 1px solid var(--borde); cursor: zoom-in; }
@media (max-width: 900px) { .pl-editor.con-foto { grid-template-columns: 1fr; } .pl-foto { position: static; } }
.pl-cab { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pl-cab label { display: flex; flex-direction: column; gap: 3px; } .pl-cab label.ancho { grid-column: 1 / -1; }
.pl-scroll { overflow-x: auto; }
.pl-edit td { padding: 3px; } .pl-edit .inp { min-height: 38px; padding: 6px 8px; font-size: .95rem; }
.pl-edit td.angosto .inp { width: 84px; } .pl-edit td.ancho .inp { min-width: 260px; } .pl-edit td .inp { min-width: 110px; }
.pl-edit th { font-size: .8rem; white-space: nowrap; } .pl-n { color: var(--suave); text-align: right; }
.pl-nuevo { background: #e7f0ff; color: var(--azul); border-radius: 6px; padding: 0 5px; font-size: .7rem; font-weight: 700; }
tr.clic { cursor: pointer; } tr.clic:hover td { background: var(--cobre-claro); }
.pl-desps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pl-desp { margin: 0; border-left: 5px solid #d33; } .pl-desp.en_curso { border-left-color: #e6a700; } .pl-desp.resuelto { border-left-color: var(--verde); }
.seg a { display: inline-block; padding: 8px 14px; text-decoration: none; color: inherit; }
.seg a.on { background: var(--azul); color: #fff; border-radius: 8px; }
@media print { header.top, nav.nav, .pl-tabs, .pl-fecha .btn, .pl-fecha input, .pl-fecha label, .barra { display: none !important; } .card { break-inside: avoid; } }
.pl-cobt td.pl-cob { text-align: center; font-weight: 700; }
.pl-cob.ok { background: #e8f6ec; color: var(--verde); } .pl-cob.borr { background: var(--amarillo-claro); color: var(--amarillo-osc); } .pl-cob.vacia { color: #c9ced8; }
.pl-cobt tr.finde td { opacity: .55; }

/* Renglones del formulario con color por material (vendedor / administración: pantalla contra pantalla) */
.item.mat-laton, .item.mat-forja, .item.mat-mn, .item.mat-cobre { border-left: 8px solid; }
.item.mat-laton { background: #fff8d6; border-left-color: #e6b800; }
.item.mat-forja { background: #e3f5e6; border-left-color: #2e9e4b; }
.item.mat-mn { background: #d9bc9c; border-left-color: #5a3417; }
.item.mat-cobre { background: #fdeee6; border-left-color: #c8642e; }

/* Por fecha: kilos por material del período */
.kg-mat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.kg-mat small { color: var(--suave); flex-basis: 100%; }
.kg-mat-i { padding: 8px 12px; border-radius: 10px; border-left: 6px solid #999; background: #f1f1f1; font-weight: 600; font-size: .95rem; }
.kg-mat-i.mat-laton { background: #fff8d6; border-left-color: #e6b800; }
.kg-mat-i.mat-forja { background: #e3f5e6; border-left-color: #2e9e4b; }
.kg-mat-i.mat-mn { background: #d9bc9c; border-left-color: #5a3417; }
.kg-mat-i.mat-cobre { background: #fdeee6; border-left-color: #c8642e; }

/* Recorrido de camiones */
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.rec-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-cab h2 { margin: 0; }
.rec-paradas { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.rec-parada { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--borde); border-radius: 12px; padding: 12px; background: #fff; }
.rec-parada.salio { opacity: .6; }
.rec-num { flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 800; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center; }
.rec-cuerpo { flex: 1; min-width: 0; }
.rec-cuerpo a { color: inherit; }
.rec-dir { color: var(--suave); font-size: .92rem; margin-top: 3px; }
.rec-avisos { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.rec-av { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--amarillo-osc); background: var(--amarillo-claro); border-radius: 8px; padding: 3px 8px; }
.rec-av.rj { color: #9b1c1c; background: var(--rojo-claro); }
.rec-nota { margin-top: 8px; min-height: 40px; font-size: .92rem; }
.rec-nota-txt { margin-top: 6px; font-size: .95rem; }
.rec-acc { display: flex; flex-direction: column; gap: 4px; }
.rec-acc .btn { min-height: 34px; min-width: 38px; padding: 0 8px; }
.aviso.az { background: var(--azul-claro); color: var(--cobre-osc); }
.rec-cands { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 55vh; overflow: auto; }
.rec-cand { text-align: left; border: 1.5px solid var(--borde); border-radius: 12px; padding: 10px 12px; background: #fff; cursor: pointer; font: inherit; }
.rec-cand:hover { border-color: var(--azul); }
.chip.rec { background: var(--azul-claro); color: var(--cobre-osc); }
.chip.calle { background: #fff3d6; color: #8a5a00; }

/* Botón fijo para actualizar la pantalla (modo kiosko) */
.top .btn-act { font-size: 1.05rem; }
.top .btn-act.nueva { background: #1f8f4e; color: #fff; animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,143,78,.55); } 50% { box-shadow: 0 0 0 8px rgba(31,143,78,0); } }

/* Detalle del pedido: renglones numerados y sumas por material */
.n-item { width: 56px; white-space: nowrap; font-weight: 700; color: var(--suave); }
.n-item label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.n-item input { width: 18px; height: 18px; }
tr.no-suma td { opacity: .45; }
.sumas-barra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.sumas-barra .btn.on { background: var(--azul); color: #fff; border-color: var(--azul); }
.sumas-barra .btn.on .mat-tag { outline: 2px solid #fff; }
.sumas-ayuda { color: var(--suave); }
tr.sub-mat td, tr.sub-sel td { font-size: 1rem; padding-top: 6px; padding-bottom: 6px; }
tr.sub-sel td { background: #e8eefc; font-weight: 600; }
@media print { .sumas-barra, .n-item input { display: none; } }
[hidden] { display: none !important; }
.sumas-barra .btn .mat-tag { background: #777; }
.sumas-barra .btn.mat-laton .mat-tag { background: #c99a00; color: #2b2100; } .sumas-barra .btn.mat-forja .mat-tag { background: #2e9e4b; }
.sumas-barra .btn.mat-mn .mat-tag { background: #5a3417; } .sumas-barra .btn.mat-cobre .mat-tag { background: #c8642e; }

/* Recorrido: orden de descarga / carga */
.aviso.rec-orden { background: var(--rojo-claro); color: #7f1414; border: 2px solid var(--rojo); margin-bottom: 12px; }
.rec-carga { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--amarillo-claro); color: #5c3b06; font-size: .95rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rec-carga span { font-weight: 600; }
.rec-num { flex-direction: column; line-height: 1; }
.rec-num small { font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
/* Báscula */
.bas-ped { margin-bottom: 12px; }
.bas-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.bas-cab a { color: inherit; }
.bas-tot { font-size: 1.8rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.bas-tot small { display: block; font-size: .8rem; font-weight: 600; color: var(--suave); }
.bas-cams { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; background: var(--azul-claro); }
.bas-tot-ch { float: right; font-weight: 800; font-size: 1.1rem; }

/* Anulado por el cliente: guardar el material */
.guardar-txt { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--amarillo-claro); color: var(--amarillo-osc); border: 2px solid #e0a100; font-weight: 800; }
.guardado-txt { margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: var(--verde-claro); color: var(--verde); font-weight: 700; }
.sec-guardar h2 { color: var(--amarillo-osc); }
.sec-guardar { background: var(--amarillo-claro); border: 2px solid #e0a100; border-radius: 14px; padding: 10px 12px; margin-bottom: 14px; grid-column: 1 / -1; }

/* Báscula: pesajes */
.bas-h { margin: 18px 0 8px; display: flex; gap: 8px; align-items: center; }
.bas-pes.abierto { border: 2px solid var(--azul); }
.bas-pasos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bas-pasos li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 9px; background: var(--fondo, #f4f5f8); }
.bas-pasos li span { flex: 1; min-width: 0; }
.bas-pasos li small { display: block; color: var(--suave); }
.bas-pasos li b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bas-pasos li.desc { background: #eef7ee; }
.bas-pasos li.vacio-l { background: var(--azul-claro); }
.bas-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; }
.bas-res.ok { background: var(--verde-claro); } .bas-res.mal { background: var(--rojo-claro); }
.bas-res small { display: block; color: var(--suave); font-size: .8rem; }
.bas-res b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.bas-res span { display: block; font-weight: 700; font-size: .9rem; }
.bas-res.mal span { color: var(--rojo); } .bas-res.ok span { color: var(--verde); }
.bas-env { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.bas-env label { font-size: .9rem; font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
.bas-env small.rj { color: var(--rojo); }
.bas-calc { margin-top: 10px; padding: 8px 10px; background: var(--azul-claro); border-radius: 10px; min-height: 1.2em; }
.bas-calc:empty { display: none; }
.bas-calc.ok { background: var(--verde-claro); }
.bas-calc.mal { background: var(--rojo-claro); color: var(--rojo-osc); }
.bas-peso { font-size: 1.4rem; font-weight: 700; }
.bas-cands { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }

/* Recorridos: varios viajes por camión en el día */
.rec-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rec-col > .card { margin: 0; }
.rec-col-tit { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.rec-nuevo { width: 100%; border-style: dashed; }
.rec-nuevo small { color: var(--suave); font-weight: 400; }
.rec-enviaje { border-color: #f0b429; box-shadow: 0 0 0 2px #fde68a inset; }
.rec-volvio summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rec-volvio summary small { color: var(--suave); }
.rec-volvio:not([open]) { opacity: .85; }
.rec-resumen { margin: 10px 0 4px; padding-left: 22px; }
.rec-resumen li { margin: 3px 0; }
.rec-parada.no-ent { border-color: #f5a3a3; background: var(--rojo-claro); }
.rec-parada .btn.mal.chico { margin-top: 6px; }
.rec-resumen .btn.chico { padding: 2px 8px; margin-left: 4px; }
.sec-dev h2 { color: var(--rojo-osc); }
.dev-card { border-left: 5px solid var(--rojo); }
.bas-pasos li.dev { background: var(--rojo-claro); }
.dev-ped { border-left: 5px solid var(--rojo); }
.dev-fila { padding: 10px 0; border-bottom: 1px dashed var(--borde, #ddd); }
.dev-fila:last-child { border-bottom: 0; }
.sb-box { background: var(--amarillo-claro); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.chk-grande { width: 24px; height: 24px; }
.desp-items tr.no-suma td { opacity: .45; }
details.rec-cam > summary { list-style: none; cursor: pointer; flex-wrap: wrap; }
details.rec-cam > summary::-webkit-details-marker { display: none; }
details.rec-cam .rec-flecha { display: inline-block; transition: transform .15s; font-size: .9em; color: var(--suave); }
details.rec-cam[open] .rec-flecha { transform: rotate(90deg); }
details.rec-cam .rec-min-txt { flex-basis: 100%; font-size: .85rem; color: var(--suave); margin-top: 4px; }
details.rec-cam[open] .rec-min-txt { display: none; }
.bas-tabs { display: flex; flex-wrap: wrap; width: 100%; margin: 4px 0 14px; }
.bas-tabs button { flex: 1 1 auto; min-height: 48px; padding: 0 12px; white-space: nowrap; }
.bas-tabs button .chip { margin-left: 4px; }
.bas-tabs button.on .chip { background: rgba(255,255,255,.25); color: #fff; }
.tachado { text-decoration: line-through; opacity: .6; }
.rc-stock { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 6px; }
.rc-mat { margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.rc-mat small { color: var(--suave); font-weight: 600; }
.rc-mat b { font-size: 1.3rem; }
.rc-mat span { font-size: .8rem; color: var(--suave); }
.desc-der { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bas-pasos li .desc-der { flex: 0 0 auto; }
.bas-pasos li .desc-der span { flex: 0 0 auto; }

/* Carga del camión Copper pedido por pedido */
.sec-camiones { margin-bottom: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.exp-grid > .sec-camiones { grid-column: 1 / -1; }
.viaje-box { border: 2px solid var(--verde); }
.viaje-lista { margin: 6px 0 8px; padding-left: 22px; font-size: 1.05rem; }
.viaje-lista li { margin: 4px 0; }
.viaje-lista li.ok { color: var(--verde); }
.viaje-lista li.actual { font-weight: 700; }
.viaje-lista small { color: var(--suave); margin-left: 4px; }

/* Expedición: anulados que se estaban preparando, en una franja compacta */
.sec-anul-comp { grid-column: 1 / -1; background: var(--rojo-claro); border: 2px solid #e0574a; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.sec-anul-comp summary { cursor: pointer; color: var(--rojo-osc); font-size: 1.05rem; }
.sec-anul-comp ul { margin: 8px 0 0; padding-left: 18px; }
.sec-anul-comp li { margin: 4px 0; }
.sec-anul-comp a { color: inherit; }

/* Paginador de listas largas */
.paginador { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0; color: var(--suave); }
.tabla-compacta td, .tabla-compacta th { padding: 8px 10px; }
.tabla-compacta tbody tr { cursor: pointer; }
.tabla-compacta tbody tr:hover { background: var(--cobre-claro); }
.grupo-fecha .abrir-txt { color: var(--suave); font-weight: 500; }
/* Dato pendiente que no frena el trabajo (ámbar, chico) */
.pend-txt { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 6px; background: var(--amarillo-claro); color: var(--amarillo); font-size: .82rem; font-weight: 600; }
.pie-tarj { margin-top: 4px; font-size: .85rem; }
/* Acción secundaria verde: con borde (el verde lleno queda para el paso final) */
.btn.borde-ok { background: #fff; border: 2px solid var(--verde); color: var(--verde); font-weight: 700; }
.btn.borde-ok:hover { background: var(--verde-claro); }
.sel-fact { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--suave); margin-bottom: 4px; cursor: pointer; }
.sel-fact input { width: 20px; height: 20px; }
.con-accion.elegido > .card { outline: 3px solid var(--verde); }

/* --- Menú agrupado: botón que abre «Logística» / «Datos» --- */
.nav .nav-grupo { white-space: nowrap; border: 0; background: none; color: var(--suave); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .95rem; cursor: pointer; }
.nav .nav-grupo.on { background: var(--cobre); color: #fff; }
.nav .nav-grupo:hover, .nav a:hover:not(.on) { background: var(--cobre-claro); color: var(--cobre); }
.nav-pop { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 20, 80, .16); padding: 6px; min-width: 220px; display: grid; gap: 2px; }
.nav-pop a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--texto); text-decoration: none; font-weight: 600; }
.nav-pop a:hover { background: var(--cobre-claro); }
.nav-pop a.on { background: var(--cobre); color: #fff; }
.nav-pop .n, .nav .n { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--celeste); color: #fff; font-size: .78rem; text-align: center; line-height: 1.5; }
.nav .on .n { background: #fff; color: var(--cobre); }

/* --- Banda de pruebas: corta en el celular --- */
.banda-pruebas .bp-corta { display: none; }
@media (max-width: 560px) { .banda-pruebas .bp-larga { display: none; } .banda-pruebas .bp-corta { display: inline; } }

/* --- Vendedor en el celular: menú fijo abajo con 3 botones grandes --- */
@media (max-width: 640px) {
  body.con-tabbar .nav.nav-vend { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 30; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 6px;
    border-top: 1px solid var(--borde); border-bottom: 0; box-shadow: 0 -4px 16px rgba(0, 20, 80, .08); overflow: visible; }
  body.con-tabbar .nav.nav-vend a { flex: 1; text-align: center; padding: 10px 4px; font-size: .9rem; border-radius: 12px; }
  body.con-tabbar .nav.nav-vend a[href="#/nuevo"] { background: var(--cobre); color: #fff; }
  body.con-tabbar .nav.nav-vend a.on:not([href="#/nuevo"]) { background: var(--cobre-claro); color: var(--cobre); }
  body.con-tabbar main { padding-bottom: 150px; }
  /* Pantallas con su propia barra de acciones abajo (detalle del pedido): la barra va arriba del menú */
  body.con-tabbar .barra { bottom: calc(58px + env(safe-area-inset-bottom)); box-shadow: none; }
  body.con-tabbar .solo-pc-vend { display: none !important; }
}
.frec { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip-frec { border: 1px solid var(--borde); background: var(--panel); border-radius: 999px; padding: 8px 14px; font-weight: 600; cursor: pointer; color: var(--cobre-osc); }
.chip-frec:hover { background: var(--cobre-claro); }

/* --- Buscador general (arriba) --- */
.top .esp { display: flex; justify-content: center; min-width: 0; }
.busq { width: 100%; max-width: 380px; }
.busq input { width: 100%; border: 1px solid var(--borde); background: var(--fondo); border-radius: 999px; padding: 8px 14px; font-size: .95rem; }
.busq input:focus { outline: 2px solid var(--celeste); background: #fff; }
.busq-res { position: fixed; z-index: 70; width: 360px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 20, 80, .16); padding: 6px; }
.busq-res a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--texto); text-decoration: none; }
.busq-res a:hover, .busq-res a:first-child { background: var(--cobre-claro); }
.busq-res small { display: block; color: var(--suave); }
@media (max-width: 480px) { .busq input { padding: 7px 10px; font-size: .9rem; } .top { gap: 8px; } }

/* Ingreso en pruebas: «Probar como» arriba */
.probar-como { background: #fff8d6; border: 1px dashed #d9b200; border-radius: 12px; padding: 8px 10px 10px; margin-bottom: 12px; text-align: left; }
.probar-como small { font-weight: 700; color: #6b5400; }
.probar-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 6px; }
.nombre-btn.chico { padding: 8px 6px; min-height: 0; font-size: .92rem; }
.ayuda-rec { margin: 0 0 12px; color: var(--suave); }
.ayuda-rec summary { cursor: pointer; font-weight: 600; color: var(--cobre-osc); }
.ayuda-rec > div { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--azul-claro); color: var(--texto); }

/* Expedición: camiones de clientes esperando cargar */
.sec-esperan { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; }
.esperan-card { margin: 0; border: 2px solid var(--celeste); background: var(--azul-claro); }
.esperan-cab { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.esperan-ic { font-size: 1.8rem; line-height: 1; }
.esperan-btn { width: 100%; margin-top: 6px; }
.esperan-linea { display: block; margin-top: 6px; color: var(--texto); text-decoration: none; font-weight: 600; }
.esperan-linea.ok { color: var(--verde); }
.esperan-tit { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--celeste); }
.adelante-box { border: 2px solid var(--verde); background: var(--verde-claro); }

/* Viruta que traen los camiones propios */
.check.chico { padding: 6px 10px; font-size: .9rem; }
.bas-viruta { display: block !important; }
.vir-lista { margin-top: 6px; display: grid; gap: 4px; }
.vir-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--amarillo-claro); }
.vir-fila.trajo { background: var(--verde-claro); }
.vir-fila.no_trajo { background: var(--rojo-claro); }

/* Control de kilos (súper admin) */
.ctl-al { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.ctl-al li { padding: 8px 10px; border-radius: 8px; background: var(--fondo); }
.ctl-al li.nueva { background: var(--amarillo-claro); font-weight: 600; }
.fila-alerta td { background: var(--rojo-claro); }
.bas-hist { margin-top: 10px; color: var(--suave); }
.bas-hist summary { cursor: pointer; font-weight: 600; }
.bas-hist ol { margin: 6px 0 0; padding-left: 20px; font-size: .9rem; color: var(--texto); }

/* historial de calidad del cliente en la ventana de confirmar kilos */
.cf-hist:empty{display:none}
.cf-hist{background:var(--azul-claro);border-radius:10px;padding:8px 12px;margin:-4px 0 10px;font-size:.88rem;line-height:1.4}
.cf-hist.mal{background:var(--rojo-claro);color:var(--rojo-osc)}

/* viruta que entrega el cliente vs. la que necesita el pedido */
.vir-kg{display:block;margin-top:10px}
.vir-kg .inp{max-width:220px}
.vir-saldo:empty{display:none}
.vir-saldo{margin-top:6px;font-size:.92rem}
.vir-ok{color:var(--verde);font-weight:600}
.vir-sobra{color:var(--azul);font-weight:600}
.vir-falta{color:var(--rojo-osc);font-weight:600}

/* verificación en dos pasos (ingreso de administradores) */
.dp-pasos{text-align:left;margin:6px 0;padding-left:20px;font-size:.92rem}
.dp-qr{background:#fff;border-radius:12px;padding:10px;width:240px;height:240px;margin:6px auto}
.dp-qr svg{width:220px;height:220px;display:block}
.dp-clave{font-size:.85rem;margin:4px 0}
.dp-clave code{display:block;margin-top:6px;font-size:1rem;letter-spacing:1px;word-break:break-all}
.dp-cod{font-size:1.6rem;text-align:center;letter-spacing:6px}
.dp-rec{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dp-rec code{background:var(--azul-claro);border-radius:8px;padding:8px;font-size:1.05rem;text-align:center}

/* planta: equipos, matricería, mantenimiento */
.pl-grupo{font-size:1rem;margin:16px 0 8px;color:var(--suave)}
.pl-eqs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.pl-eq{display:block;color:inherit;text-decoration:none;margin:0}
.pl-eq:hover{border-color:var(--azul)}
.pl-eq.baja{opacity:.6}
.pl-eq-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.pl-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:12px 0}
.pl-kpi{margin:0}
.pl-kpi small{display:block;color:var(--suave)}
.pl-kpi b{display:block;font-size:1.5rem}
.pl-kpi span{font-size:.82rem;color:var(--suave)}
.pl-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:800px){.pl-2col{grid-template-columns:1fr}}
.pl-2col .card{margin:0 0 12px}
.pl-hist{list-style:none;padding:0;margin:0}
.pl-hist li{padding:8px 0;border-bottom:1px solid var(--borde)}
.pl-hist li:last-child{border-bottom:0}
.pl-mios{margin:6px 0 0;padding-left:18px;font-size:.9rem}
.pl-desp.prio-parada:not(.resuelto){border-left:5px solid var(--rojo)}
.pl-desp.prio-urgente:not(.resuelto){border-left:5px solid var(--amarillo-osc)}
.cf-anal { margin-top: 10px; }
.cf-elem { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; margin-top: 6px; }
.cf-elem small { display: block; font-weight: 600; }
.pl-proc.on { border-color: var(--verde); }
.pl-alerta { border-color: var(--rojo); background: var(--rojo-claro); }
.ck-item { padding: 8px 0; border-bottom: 1px solid var(--borde); }
.ck-item .opciones { margin-top: 4px; }
.check.deshab { opacity: .55; }

/* Puestos de trabajo */
.puesto-tit { margin: 0 0 4px; font-weight: 700; color: var(--cobre-osc); }
.puesto-fila { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--borde, #e5e7eb); }
.puesto-fila.inactivo { opacity: .6; }
.puesto-us { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; max-height: 46vh; overflow: auto; }
@media (max-width: 560px) { .puesto-fila { flex-direction: column; } }

/* ---------- Choferes (celular) ---------- */
.main-chofer { max-width: 640px; margin: 0 auto; padding: 12px 12px 40px; }
.ch-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.ch-top h1 { margin: 0; font-size: 1.35rem; }
.ch-top select { max-width: 170px; }
.ch-viaje { margin-bottom: 18px; }
.ch-viaje-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 8px; }
.ch-viaje-cab h2 { margin: 0 6px 0 0; font-size: 1.1rem; }
.ch-parada { padding: 14px; margin-bottom: 12px; border-left: 5px solid var(--borde); }
.ch-parada.ch-entregado { border-left-color: var(--verde); background: #fbfefc; }
.ch-parada.ch-no_entregado { border-left-color: var(--rojo); background: #fffafa; }
.ch-cab { display: flex; align-items: flex-start; gap: 10px; }
.ch-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--cobre); color: #fff; display: grid; place-items: center; font-weight: 700; }
.ch-tit { flex: 1; font-size: 1.05rem; line-height: 1.3; }
.ch-dir { margin: 8px 0 2px; font-weight: 600; }
.ch-dato { color: var(--suave); margin-top: 3px; }
.ch-nota { background: var(--amarillo-claro); color: var(--amarillo-osc); border-radius: 8px; padding: 6px 10px; margin-top: 8px; font-size: .92rem; }
.ch-links { gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ch-acc { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.ch-acc .btn.grande { font-size: 1.1rem; padding: 14px; }
.ch-hecho { margin-top: 10px; color: var(--verde); font-weight: 600; }
.ch-hecho.no { color: var(--rojo-osc); }
.ch-vir { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--cobre-claro); }
.ch-vir.ok { background: var(--verde-claro); color: var(--verde); }
.ch-vir.no { background: var(--rojo-claro); color: var(--rojo-osc); }
.ch-vir.pend { background: var(--amarillo-claro); color: var(--amarillo-osc); }
.ch-gps { color: var(--suave); font-size: .85rem; text-align: center; }
.ch-foto-btn { display: block; text-align: center; padding: 14px; font-size: 1.05rem; }
.ch-foto-prev img { max-width: 100%; max-height: 240px; border-radius: 8px; margin-top: 8px; display: block; }
.ch-motivos { flex-wrap: wrap; }
.ch-contador { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; }
.ch-contador .inp { text-align: center; font-size: 1.3rem; font-weight: 700; }
.top-chofer .esp { flex: 1; }

/* ---------- Mapa de camiones ---------- */
.mapa-cam { height: 62vh; min-height: 340px; border-radius: var(--radio); border: 1px solid var(--borde); margin-bottom: 12px; z-index: 0; }
.cam-pin { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.cam-punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.mapa-cam-fila { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 8px; }
.mapa-cam-par { min-width: 220px; }
.mc-p { font-size: .92rem; }
.mc-p.mc-entregado { color: var(--verde); }
.mc-p.mc-no_entregado { color: var(--rojo-osc); }
.mc-p.mc-pendiente { color: var(--suave); }
.dp-cod-fila { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.esperan-card.esperan-espera { border: 2px dashed var(--amarillo); background: #fffdf5; }

/* Celular: tablas anchas se desplazan dentro de su tarjeta (no la página entera) */
@media (max-width: 600px) {
  .card { overflow-x: auto; }
  .tabla th, .tabla td { padding: 8px 6px; }
}
/* Súper admin en el celular: «Ver como» pasa a una segunda línea del encabezado */
@media (max-width: 480px) {
  .top.con-vercomo { flex-wrap: wrap; row-gap: 6px; }
  .top.con-vercomo .ver-como { order: 20; flex: 1 1 100%; max-width: none; }
  .top.con-vercomo .marca span { display: none; }
}
.opc-lista { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.opc-lista label.check { align-items: flex-start; }

/* ------------------------------------------------------------------ laboratorio de planta */
.main-lab { max-width: 1100px; margin: 0 auto; padding: 12px 14px 40px; }
.banda-lab { display: block; background: var(--rojo); color: #fff; padding: 9px 16px; font-size: .95rem; text-decoration: none; font-weight: 600; }
.lab-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.lab-tabs a { padding: 9px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--borde, #e3ded8); text-decoration: none; color: inherit; font-weight: 600; }
.lab-tabs a.on { background: var(--azul, #002395); color: #fff; border-color: transparent; }
.lab-n { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #eceae7; color: #4b4540; font-size: .8rem; text-align: center; }
.lab-n.rj { background: var(--rojo); color: #fff; }
.lab-hornos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; }
.lab-horno { display: flex; flex-direction: column; gap: 8px; }
.lab-h-tit { font-size: 1.2rem; font-weight: 800; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lab-cod { font-family: ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: .02em; }
.lab-h-sub { color: var(--suave); }
.lab-estado { border-radius: 12px; padding: 14px; font-size: 1.15rem; font-weight: 800; text-align: center; line-height: 1.3; }
.lab-estado small { font-weight: 600; font-size: .9rem; }
.lab-estado.gris { background: #f1efec; color: #4b4540; }
.lab-estado.espera { background: var(--amarillo-claro); color: var(--amarillo-osc); }
.lab-estado.bien { background: var(--verde-claro); color: var(--verde); }
.lab-estado.mal { background: var(--rojo-claro); color: var(--rojo); }
.lab-sug { background: #f6f4ff; border-radius: 10px; padding: 8px 12px; font-size: .92rem; }
.lab-sug ul { margin: 4px 0 0; padding-left: 18px; }
.lab-acc { display: flex; flex-direction: column; gap: 8px; }
.lab-acc .btn.chico, .lab-acc .btn.link { align-self: flex-start; }
.lab-fuera .lab-acc { flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
.lab-btn { width: 100%; }
.lab-hornos.grande .lab-estado { font-size: 1.6rem; padding: 22px 14px; }
.lab-hornos.grande .lab-btn { font-size: 1.3rem; padding: 18px; }
.lab-hornos.grande .lab-h-tit { font-size: 1.5rem; }
.lab-pie { text-align: center; color: var(--suave); font-size: .85rem; }
.lab-opc .opcion { font-size: 1.05rem; padding: 12px 16px; }
.inp.grande { font-size: 1.2rem; padding: 12px; }
.lab-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.lab-el { display: flex; flex-direction: column; gap: 3px; border-radius: 10px; padding: 6px; background: #f6f4f1; border: 2px solid transparent; }
.lab-el span { display: flex; justify-content: space-between; gap: 4px; align-items: baseline; }
.lab-el small { color: var(--suave); font-size: .75rem; }
.lab-el .inp { font-size: 1.1rem; text-align: right; }
.lab-el.bien { border-color: var(--verde); background: var(--verde-claro); }
.lab-el.mal { border-color: var(--rojo); background: var(--rojo-claro); }
.lab-veredicto { margin: 10px 0 2px; min-height: 26px; }
.lab-tarde { color: var(--rojo); font-weight: 700; }
.lab-fuera.sin { border-left: 5px solid var(--rojo); }
.lab-hist li { margin-bottom: 6px; }
.lab-cuad td, .lab-cuad th { white-space: nowrap; }
.lab-mal { color: var(--rojo); font-weight: 800; }
.lab-normas td { padding: 4px; }
.lab-par { display: flex; gap: 3px; }
.lab-par .inp { width: 58px; padding: 6px; text-align: right; }
@media (max-width: 640px) { .lab-hornos { grid-template-columns: 1fr; } .lab-tabs a { padding: 8px 10px; font-size: .9rem; } }

/* ------------------------------------------------------------------ operarios de planta */
.op-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 2px 0 12px; font-size: 1.3rem; }
.op-grande h2 { font-size: 1.35rem; }
.op-grande p { font-size: 1.05rem; }
.op-desp { width: 100%; margin: 4px 0 14px; font-size: 1.15rem; padding: 16px; }
.op-tarea { border-left: 6px solid #d9d4cd; }
.op-tarea.parada { border-left-color: var(--rojo); }
.op-tarea.urgente { border-left-color: var(--amarillo-osc); }
.op-desc { font-size: 1.15rem; margin: 8px 0; }
.op-cod { font-family: ui-monospace, Menlo, monospace; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.op-atado { background: #f6f4f1; border-radius: 12px; padding: 12px; margin-top: 12px; font-size: 1.05rem; display: flex; flex-direction: column; gap: 4px; }
.lab-venc { background: var(--rojo-claro); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; color: var(--rojo); }
.lab-venc-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lab-venc.grande { font-size: 1.15rem; padding: 14px 18px; }
.lab-rut.vencida { border-left: 5px solid var(--rojo); }
.lab-rut.por_vencer { border-left: 5px solid var(--amarillo-osc); }
.lab-mal-kpi { border: 2px solid var(--rojo); }
.lab-mal-kpi b { color: var(--rojo); }
.rel-eq { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 12px; }
.card.rel-eq { margin-bottom: 8px; }
.rel-mini { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #f1efec; flex: none; }
.rel-mini.vacia { display: flex; align-items: center; justify-content: center; color: var(--suave); font-size: 1.3rem; }
.rel-fotos { display: flex; gap: 8px; overflow-x: auto; margin: 10px 0; }
.rel-foto { display: flex; flex-direction: column; align-items: center; }
.rel-foto img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; background: #f1efec; }

.bas-corr { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.bas-corr small { flex-basis: 100%; }
.rec-env { margin-top: 6px; font-size: .92rem; }
.rec-env-tot { background: #e8f1fb; border: 1px solid #b9d3ef; border-radius: 10px; padding: 8px 12px; margin: 4px 0 10px; }
.opciones.mat.tres { grid-template-columns: repeat(3, 1fr); }
.rez-ops .opcion { flex-direction: column; min-width: 150px; gap: 2px; }
.rez-ops .opcion small { font-weight: 500; opacity: .75; }
.opciones.mat.cuatro { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .opciones.mat.cuatro { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .opciones.mat.tres { grid-template-columns: 1fr 1fr; } }
.op-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.op-gran { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border-radius: 14px; border: 2px solid var(--borde, #ddd); background: #fff; text-align: left; cursor: pointer; font: inherit; min-height: 110px; }
.op-gran b { font-size: 1.15rem; } .op-gran small { color: var(--suave); } .op-gran span { margin-top: auto; font-weight: 600; color: var(--azul, #0b2a8a); }
.op-gran.zar { border-color: #b9d3ef; background: #f3f8fe; }
.sp-stock { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sp-mat { display: flex; flex-direction: column; gap: 4px; margin: 0; } .sp-mat b { font-size: 1.5rem; } .sp-mat span { font-size: .82rem; color: var(--suave); } .sp-mat .btn { align-self: flex-start; margin-top: 6px; }
.neg { color: var(--rojo); }
.sp-cadena { background: #fff8e8; border: 1px solid #f1d9a6; border-radius: 10px; padding: 8px 12px; margin: 12px 0; font-size: .92rem; }
.grupo-cli { border: 2px dashed #9db8e6; border-radius: 14px; padding: 6px; margin-bottom: 10px; background: #f5f9ff; }
.grupo-cli .card.ped { margin-bottom: 6px; } .grupo-cli .card.ped:last-child { margin-bottom: 0; }
.grupo-tit { font-size: .9rem; padding: 2px 6px 6px; color: #23407a; }
.cli-varios h2 { color: #23407a; }
.grupo-aviso { background: #eef4ff; border: 1px solid #b9d3ef; }
.sub-carga { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; }
.sub-fila { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 6px; }
.sub-fila .inp { text-align: right; } .seg.chico button { padding: 6px 10px; font-size: .85rem; }
@media (max-width: 560px) { .sub-fila { grid-template-columns: 1fr 90px; } .sub-fila .seg { grid-column: 1 / -1; } }
.dc-peds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 8px; }
@media print { .no-print, .sumas-barra, #dcPrint, .btn { display: none !important; } }
.cli-extra { margin-top: 4px; font-size: .9rem; } .cli-extra a { color: var(--rojo); text-decoration: none; margin-left: 2px; }
.prep-tabla tr.prep-ok td { background: #eaf7ee; } .prep-tabla input[type=checkbox] { width: 22px; height: 22px; }
.bas-grupo h2 { margin: 14px 0 2px; font-size: 1.1rem; } .bas-grupo-ayuda { margin: 0 0 8px; color: var(--suave); font-size: .88rem; }
.sub-fila2 { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 6px 8px; align-items: end; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.sub-fila2 .sub-tit { grid-column: 1 / -1; } .sub-fila2 label small { display: block; color: var(--suave); } .sub-fila2 .inp { text-align: right; }
.sub-fila2 .sub-neto { grid-column: 1 / 3; font-size: .9rem; } .sub-fila2 .seg { grid-column: 3 / -1; justify-self: end; }
.paso-sec { scroll-margin-top: 130px; }
@media (max-width: 700px) { .paso-sec { scroll-margin-top: 110px; } }

/* Báscula: la pantalla baja sola al camión recién tocado y lo resalta un momento */
.bas-pes { scroll-margin-top: 130px; transition: box-shadow .4s; }
@media (max-width: 700px) { .bas-pes { scroll-margin-top: 110px; } }
.bas-pes.recien { box-shadow: 0 0 0 4px var(--azul-claro, #dbe6ff); }
.modal .inp, .modal textarea { scroll-margin: 16px; }

/* Versión al pie y página de versiones */
.pie-version { text-align: center; color: var(--suave); font-size: .8rem; padding: 18px 0 90px; }
.pie-version a { color: inherit; }
.versiones h2 { margin-top: 0; }
.versiones h3 { margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid var(--borde); }
.versiones h3.ver-actual { color: var(--azul); }
.versiones h4 { margin: 14px 0 4px; }
.versiones ul, .versiones ol { margin: 4px 0 10px; padding-left: 22px; }
.versiones li { margin: 3px 0; }
.versiones hr { border: 0; border-top: 2px solid var(--borde); margin: 20px 0; }
.versiones hr + h3 { border-top: 0; padding-top: 0; }

/* Vista de lista de pedidos (PC): una fila por pedido, detalle desplegable para captura */
.vista-sel button { white-space: nowrap; }
.vista-lista .grid-ped { display: flex; flex-direction: column; gap: 6px; }
/* Fila con acciones (Para facturar: «Elegir» + fila + «Marcar facturado»; encargado: «Despachado»): todo en una línea */
.vista-lista .con-accion { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; flex-wrap: nowrap; }
.vista-lista .con-accion > .fila-ped { flex: 1 1 auto; min-width: 0; }
.vista-lista .con-accion > .sel-fact { flex: none; margin: 0; padding-top: 18px; }
.vista-lista .con-accion > .btn, .vista-lista .con-accion > .acc-btns { flex: none; margin-top: 8px; }
.vista-lista .con-accion.elegido > .fila-ped { outline: 3px solid var(--verde); }
@media (max-width: 900px) {
  .vista-lista .con-accion { flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; }
  .vista-lista .con-accion > .fila-ped { flex-basis: 100%; order: 1; }
  .vista-lista .con-accion > .sel-fact { order: 2; padding: 0 0 0 4px; }
  .vista-lista .con-accion > .btn, .vista-lista .con-accion > .acc-btns { order: 3; margin-top: 0; }
}
.fila-ped { background: var(--panel, #fff); border: 1px solid var(--borde); border-radius: 12px; }
.fila-ped[open] { box-shadow: 0 4px 18px rgba(0, 20, 80, .10); border-color: var(--azul); }
.fila-ped > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 74px minmax(120px, 2fr) minmax(120px, 1.2fr) 80px minmax(90px, 1fr) minmax(90px, 124px) 12px;
  gap: 10px; align-items: center; padding: 10px 14px; }
.fila-ped > summary::-webkit-details-marker { display: none; }
.fila-ped > summary::after { content: "▸"; color: var(--suave); transition: transform .15s; }
.fila-ped[open] > summary::after { transform: rotate(90deg); }
.fila-ped > summary:hover { background: #f6f8fc; border-radius: 12px; }
.fp-num { font-weight: 800; }
.fp-cli { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-est { display: flex; flex-wrap: wrap; gap: 4px; }
.fp-kg { text-align: right; font-weight: 700; }
.fp-kg small, .fp-ent small, .fp-fec small { display: block; font-weight: 400; color: var(--suave); font-size: .78rem; }
.fp-ent, .fp-fec { font-size: .9rem; }
.fp-det { padding: 0 14px 14px; }
.captura { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 14px; }
.cap-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.cap-cab img { height: 34px; }
.fp-acc { margin-top: 8px; gap: 8px; }
@media (max-width: 1100px) {
  .fila-ped > summary { grid-template-columns: auto 1fr auto; gap: 4px 12px;
    grid-template-areas: "num cli kg" "est est est" "ent ent fec"; }
  .fp-num { grid-area: num; } .fp-cli { grid-area: cli; white-space: normal; } .fp-kg { grid-area: kg; }
  .fp-est { grid-area: est; } .fp-ent { grid-area: ent; } .fp-fec { grid-area: fec; text-align: right; }
  .fp-ent small, .fp-fec small { display: inline; margin-left: 6px; }
  .fila-ped > summary::after { display: none; }
}

/* Filtros de la oficina (zona, vendedor, cliente) */
.filtros-of { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: -4px 0 14px; }
.filtros-of select { width: auto; max-width: 280px; }
/* Pedidos seguidos del mismo cliente (vista de lista): marca al costado, cada pedido sigue en su fila */
.run-cli { border-left: 4px solid var(--azul); padding-left: 10px; display: flex; flex-direction: column; gap: 6px; }
.run-cli-t { font-size: .8rem; font-weight: 700; color: var(--azul); }

/* Formato del producto: 2 primeras letras resaltadas y símbolo de la forma */
.fmt-desc { font-weight: 400; }
b.fmt { font-weight: 800; }
.fmt-sim { font-weight: 700; color: #0b2a8f; font-size: 1.15em; line-height: 1; }

/* Pedidos: 5 pestañas en el orden del recorrido y fila de avisos con contador */
.tiles-recorrido { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.avisos-ped { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 14px; }
.avisos-ped small { color: var(--suave); }
.aviso-chip { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid #f1c27d; background: #fff6e5; color: #7a4a00; text-decoration: none; font-size: .9rem; }
.aviso-chip b { font-weight: 800; }
.aviso-chip.on { background: #7a4a00; color: #fff; border-color: #7a4a00; }

/* Observaciones fijas del cliente */
.obs-cli{background:var(--azul-claro, #e8eef8);border:1px solid var(--borde, #d6dbe3);border-radius:10px;padding:10px 12px;margin-top:10px}
.obs-cli-tit{font-weight:700}
.obs-cli ul{margin:4px 0 0;padding-left:18px}
.obs-cli li{margin:2px 0}
.obs-cli li small{color:var(--suave)}

.chip.compra{background:var(--azul-claro);color:var(--azul);border:1px solid var(--azul);font-size:.72rem;white-space:nowrap}
.cf-tipo{margin-bottom:10px}

/* Envase por envase (retornos, pernos) */
.envases-box{display:grid;gap:6px;grid-column:1/-1}
.env-row{display:grid;grid-template-columns:110px 1fr 1fr auto auto;gap:6px;align-items:center}
.env-row .inp{margin:0}
.env-neto{font-size:.85rem;white-space:nowrap;min-width:90px}
@media (max-width:520px){.env-row{grid-template-columns:90px 1fr 1fr auto}.env-neto{grid-column:1/-1}}
.env-head{margin-bottom:-4px}
.env-rows{display:grid;gap:6px}

/* Vista para facturar: ventana angosta al lado del sistema de facturación */
.banda-fact{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:6px 14px;background:var(--azul);color:#fff;font-size:.9rem}
.banda-fact a{color:#fff;text-decoration:underline}
.banda-fact .btn{margin-left:auto}
body.modo-facturar .top .esp, body.modo-facturar .top .btn-sug, body.modo-facturar .top .ver-como, body.modo-facturar .nav, body.modo-facturar .pie-version{display:none}
body.modo-facturar .top{padding-block:4px}
body.modo-facturar #main{padding-top:10px}
/* si la ventana es ancha (no se pudo abrir aparte), todo ocupa la mitad izquierda */
@media (min-width:1100px){body.modo-facturar #app{max-width:50vw;margin-left:0;margin-right:auto;border-right:3px solid var(--azul);min-height:100vh}}
body.modo-facturar .tiles-recorrido, body.modo-facturar .avisos-ped{display:none}

/* Papeles del pedido: el fondo dice si ya está facturado */
.card.ped.pp-fact, .fila-ped.pp-fact > summary { background: #dcefff; }
.card.ped.pp-fact { border-left: 6px solid #3d9be0; }
.card.ped.pp-rem, .fila-ped.pp-rem > summary { background: #fff4cc; }
.card.ped.pp-rem { border-left: 6px solid #e0b100; }
.card.ped.pp-sf, .fila-ped.pp-sf > summary { background: #eceff3; }
.card.ped.pp-sf { border-left: 6px solid #8a94a3; }
.fila-ped.pp-fact { border-left: 6px solid #3d9be0; }
.fila-ped.pp-rem { border-left: 6px solid #e0b100; }
.fila-ped.pp-sf { border-left: 6px solid #8a94a3; }
.leyenda-pp { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .8rem; color: var(--suave); margin: 4px 0 8px; }
.leyenda-pp span { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--borde); }
.leyenda-pp .pp-fact { background: #dcefff; border-color: #3d9be0; color: #1b4f7a; }
.leyenda-pp .pp-rem { background: #fff4cc; border-color: #e0b100; color: #6b5300; }
.leyenda-pp .pp-sf { background: #eceff3; border-color: #8a94a3; color: #3d4652; }
.leyenda-pp .pp-no { background: #fff; }

/* Botones al lado del pedido (facturar / solo remito) */
.acc-btns { display: flex; flex-direction: column; gap: 6px; }
.acc-btns .btn { white-space: nowrap; }
.fila-ped { min-width: 0; overflow: hidden; }
.fp-fec { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .acc-btns { flex-direction: row; flex-wrap: wrap; } }

/* columnas de la fila: las etiquetas de estado no se montan sobre los kilos */
.fp-est { min-width: 0; }
.fp-est .chip { white-space: normal; max-width: 100%; line-height: 1.25; }
.fila-ped > summary > span { min-width: 0; }
.fp-num { white-space: nowrap; }
.fp-est .chip { font-size: .72rem; padding: 2px 7px; }
.vista-lista .con-accion > .sel-fact { font-size: 0; gap: 0; }
.vista-lista .con-accion > .sel-fact input { font-size: 1rem; }

/* Bulto por bulto en preparar */
.bultos-extra { grid-column: 1 / -1; display: grid; gap: 8px; }
.bulto-row { display: grid; grid-template-columns: 1fr 180px 130px; gap: 12px; align-items: center; }
.bulto-lbl { text-align: right; color: var(--suave); font-weight: 600; }
.bulto-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .bulto-row { grid-template-columns: 1fr 1fr; } .bulto-lbl { grid-column: 1 / -1; text-align: left; } }

.aviso.nota-priv, textarea.nota-priv { background: #f3ecff; border: 1px solid #b9a3e3; color: #3f2a6b; }

/* Entregas programadas (orden de compra) */
.e-programado { background: #eef0f6; color: #4a5470; }
.ent-box { margin-top: 12px; }
.ent-tabla td, .ent-tabla th { vertical-align: middle; }
.ent-tabla .inp { margin: 0; }
.ent-suma td { background: #f6f8fc; }
.aviso.oc-box { background: #f1f5fb; border: 1px solid #c9d6ec; color: inherit; }
.oc-actual td { font-weight: 700; background: #e3ecfa; }

.filtro-mat { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.filtro-mat > span { color: var(--suave); font-size: .9rem; margin-right: 4px; }
.filtro-mat .opcion.chico { padding: 6px 12px; min-height: 0; font-size: .9rem; }
a.fp-num { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }

/* Casillero sin completar: recuadro rojo (se va al escribir) */
.falta { outline: 3px solid #dc2626 !important; outline-offset: 1px; border-color: #dc2626 !important; background: #fef2f2; }
.opciones.falta, .seg.falta { border-radius: 10px; background: #fef2f2; }
.toast-mas { background: rgba(255,255,255,.25); border: 0; color: inherit; border-radius: 50%; width: 22px; height: 22px; font-size: 13px; cursor: pointer; margin-left: 4px; vertical-align: middle; }
.toast-det { font-size: .86em; font-weight: 400; margin-top: 6px; opacity: .95; }

/* Camiones esperando para entrar a la báscula: encabezado naranja (se ve de lejos) y el que sigue en verde «LE TOCA» */
.espera-box { padding: 0 !important; overflow: hidden; border: 2px solid #ea580c; }
.espera-cab { background: #ea580c; color: #fff; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.espera-cab h2 { margin: 0; color: #fff; display: flex; align-items: center; gap: 8px; }
.esp-cant { background: #fff; color: #ea580c; border-radius: 999px; padding: 0 10px; font-size: .9em; }
.espera-cab .btn { background: #fff; color: #ea580c; border-color: #fff; font-weight: 700; }
.espera-cuerpo { padding: 6px 12px 12px; }
.espera-lista { list-style: none; padding: 0; margin: 6px 0 0; }
.espera-lista li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 10px; margin-top: 6px; background: #fff7ed; }
.espera-lista li.toca { background: #dcfce7; border: 2px solid #16a34a; }
.esp-n { width: 32px; height: 32px; border-radius: 50%; background: #64748b; color: #fff; display: grid; place-items: center; font-weight: 700; }
.espera-lista li.toca .esp-n { background: #16a34a; }
.le-toca { background: #16a34a; color: #fff; font-weight: 800; border-radius: 6px; padding: 1px 7px; font-size: .85em; letter-spacing: .03em; }
.esp-b { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) { .espera-lista li { grid-template-columns: 32px 1fr; } .esp-b { grid-column: 1 / -1; justify-content: flex-start; } }

/* Aviso grande a los encargados: llegó un camión a la puerta */
.aviso-cam { position: fixed; left: 50%; top: 80px; transform: translateX(-50%); z-index: 9999; background: #ea580c; color: #fff; font-weight: 700; font-size: 1.1em;
  padding: 14px 18px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); max-width: min(92vw, 520px); text-align: center; }
.aviso-cam .btn { background: #fff; color: #ea580c; border-color: #fff; font-weight: 700; }

/* Link de seguimiento para el cliente */
.lc-url { background: #f1f5f9; border: 1px dashed #94a3b8; border-radius: 10px; padding: 10px; font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all; }

/* Guardado de barras: resultado del calibre */
.gd-ok { margin-top: 10px; background: #bae6fd; border: 4px solid #0369a1; border-radius: 14px; padding: 20px 12px; text-align: center; display: grid; gap: 4px; box-shadow: 0 4px 14px rgba(3,105,161,.3); }
.gd-ok b { font-size: clamp(56px, 13vw, 88px); line-height: 1.05; color: #0a1a33; font-weight: 900; letter-spacing: -0.5px; }
.gd-ok span { font-size: clamp(24px, 6vw, 32px); font-weight: 900; color: #0a1a33; line-height: 1.2; }
.gd-ok small { font-size: 16px; font-weight: 800; color: #0a1a33; }
.gd-mal { margin-top: 10px; background: #fef2f2; border: 3px solid #dc2626; color: #991b1b; border-radius: 14px; padding: 12px; font-weight: 700; font-size: 1.05em; }

.eq-box h2 { margin-top: 0; }
.eq-lista { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Guardado: materiales con sus colores, formas con su dibujo, números grandes */
.gd-l { font-size: 17px; font-weight: 700; margin-top: 16px; }
.gd-mats, .gd-formas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .gd-mats, .gd-formas { grid-template-columns: repeat(4, 1fr); } }
.gd-mat { min-height: 72px; font-size: 18px; line-height: 1.15; padding: 6px; font-weight: 800; border-radius: 14px; border: 3px solid transparent; cursor: pointer; color: #1f2937; }
.gd-mat.mat-laton { background: #fff8d6; border-color: #e6b800; }
.gd-mat.mat-forja { background: #e3f5e6; border-color: #2e9e4b; }
.gd-mat.mat-mn { background: #d9bc9c; border-color: #5a3417; }
.gd-mat.mat-cobre { background: #fdeee6; border-color: #c8642e; }
.gd-mat.on { color: #fff; box-shadow: 0 0 0 4px #1e3a8a; }
.gd-mat.mat-laton.on { background: #c99a00; color: #2b2100; }
.gd-mat.mat-forja.on { background: #2e9e4b; }
.gd-mat.mat-mn.on { background: #5a3417; }
.gd-mat.mat-cobre.on { background: #c8642e; }
.gd-forma { min-height: 110px; display: grid; justify-items: center; align-content: center; gap: 6px; border: 3px solid #cbd5e1; border-radius: 14px; background: #fff; font-size: 19px; font-weight: 800; cursor: pointer; color: #1f2937; }
.gd-forma svg { width: 54px; height: 54px; fill: #94a3b8; stroke: #475569; stroke-width: 2; }
.gd-forma.on { border-color: #1e3a8a; background: #e8eefc; box-shadow: 0 0 0 3px #1e3a8a; }
.gd-forma.on svg { fill: #1e3a8a; stroke: #0b2a8a; }
.gd-dos { margin-top: 10px; background: #fef9c3; border: 3px solid #ca8a04; border-radius: 14px; padding: 16px; text-align: center; color: #422006; }
.gd-dos > b { font-size: 24px; font-weight: 900; } .gd-dos p { margin: 6px 0 12px; font-weight: 600; }
.gd-dos-bt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gd-dos-bt .btn { min-height: 80px; font-size: 22px; background: #fff; border: 3px solid #ca8a04; }
.gd-espera { display: none; }
.gd-tecla { display: none; }
@media (min-width: 1000px) {
  main:has(.gd-pc) { max-width: 1400px; }
  .gd-pc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "t t" "a r" "b r"; column-gap: 28px; align-items: start; }
  .gd-tit { grid-area: t; } .gd-a { grid-area: a; } .gd-b { grid-area: b; }
  .gd-r { grid-area: r; position: sticky; top: 12px; margin-top: 16px; }
  .gd-r .gd-ok, .gd-r .gd-mal { margin-top: 0; }
  .gd-ok { padding: 34px 20px; gap: 10px; }
  .gd-ok b { font-size: 84px; }
  .gd-ok span { font-size: 30px; }
  .gd-ok small { font-size: 18px; }
  .gd-mal { font-size: 22px; padding: 24px; }
  .gd-espera { display: grid; place-items: center; min-height: 320px; border: 3px dashed #cbd5e1; border-radius: 14px; color: #64748b; font-size: 20px; font-weight: 700; text-align: center; line-height: 1.5; padding: 20px; }
  .gd-tecla { display: block; margin-top: 8px; color: var(--suave); font-size: 14px; }
  .gd-mat:hover:not(.on), .gd-forma:hover:not(.on) { filter: brightness(.96); box-shadow: 0 0 0 2px #94a3b8; }
}
.gd-num { font-size: 30px !important; font-weight: 800; text-align: center; padding: 14px !important; min-height: 66px; }
.lc-seg { display: grid; grid-template-columns: 1fr 1.4fr; width: 100%; } .lc-seg button { padding: 6px 10px; line-height: 1.2; }

.gd-mezcla { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 17px; font-weight: 700; cursor: pointer; }
.gd-mezcla input { width: 24px; height: 24px; }
#eVir [data-ev].on { background: #15803d; border-color: #15803d; color: #fff; }
#eVir [data-ev="no"].on { background: #b91c1c; border-color: #b91c1c; }

.busq-cli { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--borde); background: #f0fdf4; }
.busq-cli span, .busq-cli a { display: flex; flex-direction: column; color: inherit; text-decoration: none; flex: 1; } .busq-cli small { color: var(--suave); }

.ch-hechas { margin-top: 14px; }
.ch-hechas h3 { font-size: 15px; color: var(--suave); margin: 0 0 6px; }
.ch-hecha { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--borde); border-left: 5px solid #16a34a; border-radius: 12px; padding: 8px 10px; margin-bottom: 6px; }
.ch-hecha.no { border-left-color: #dc2626; }
.ch-hecha-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-hecha-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-hecha-txt small { color: var(--suave); }
.ch-num.chico { width: 28px; height: 28px; font-size: 14px; flex: none; }
.ch-listo { text-align: center; font-weight: 700; color: #166534; background: #f0fdf4; }

.cp-tabla tbody tr { cursor: pointer; } .cp-tabla tbody tr:hover { background: #f3f6fc; }
.cp-grupo h2 small { color: var(--suave); font-weight: 600; font-size: .8em; }
.cp-pend { border-left: 5px solid #f59e0b; } .cp-prep { border-left: 5px solid #16a34a; } .cp-desp { border-left: 5px solid #94a3b8; } .cp-anul { opacity: .75; }
.tabla-scroll { overflow-x: auto; }