/* =============================================================================
   Trazock — tema oscuro (portado del prototipo de Claude Design).
   Compartido por el panel (/admin) y la app de escaneo (/scan).
   Sobrescribe componentes de Bootstrap globalmente para tematizar el markup
   existente. La parte específica del scanner está en scan.css.
   ============================================================================= */

:root {
    --bg: #1a1d23;
    --card: #252930;
    --card2: #2e333d;
    --border: #353b47;
    --blue: #3b82f6;
    --green: #22c55e;
    --yellow: #eab308;
    --red: #ef4444;
    --purple: #8b5cf6;
    --orange: #f97316;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --sw: 240px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

a { color: var(--blue); }

/* ── SIDEBAR ──────────────────────────────────────────────────────────────── */
#sidebar {
    width: var(--sw);
    background: var(--card);
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    z-index: 200;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease;
}
#main {
    margin-left: var(--sw);
    padding: 1.5rem 1.75rem;
    min-height: 100vh;
}
.tz-brand-box {
    width: 30px; height: 30px;
    background: var(--blue);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tz-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; flex-shrink: 0;
    color: #fff; text-transform: uppercase;
}
.ni {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 12px;
    color: var(--muted);
    text-decoration: none;
    border-radius: 6px;
    margin: 1px 8px;
    font-size: 13px;
    transition: background .15s, color .15s;
    cursor: pointer;
}
.ni:hover { background: rgba(59,130,246,.1); color: var(--text); }
.ni.active { background: rgba(59,130,246,.15); color: var(--blue); }
.ni i { font-size: 15px; flex-shrink: 0; }
.nd {
    padding: .6rem 1rem .2rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}
#sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 199; }

/* Botones que actúan como ítems de navegación (toggle rail, acordeón config) */
button.ni { width: calc(100% - 16px); background: none; border: 0; text-align: left; font: inherit; }

/* Submenú colapsable (Configuración) */
.ni-caret { font-size: 12px; transition: transform .18s ease; }
.ni-group.open .ni-caret { transform: rotate(180deg); }
.subnav { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.subnav.open { max-height: 520px; }
.subnav .ni { padding-left: 30px; font-size: 12.5px; }
.brand-img { transition: max-width .2s ease; }

.ni-railicon { transition: transform .18s ease; }

/* Rail: sidebar replegado a íconos (solo desktop; en mobile sigue el off-canvas) */
@media (min-width: 769px) {
    html.rail { --sw: 64px; }
    /* Ocultar textos, separadores y badges → quedan solo los íconos. */
    html.rail #sidebar .ni-label,
    html.rail #sidebar .ni-caret,
    html.rail #sidebar .nd,
    html.rail #sidebar .badge,
    html.rail #sidebar .tz-userbox,
    html.rail #sidebar .tz-powered { display: none; }
    /* El botón "Configuración" (acordeón) no aplica en rail: sus hijos se ven
       aplanados como íconos. */
    html.rail #sidebar .ni-group { display: none; }
    html.rail #sidebar .subnav { max-height: none; overflow: visible; }
    html.rail #sidebar .subnav .ni { padding-left: 0; }
    /* Centrar los íconos. */
    html.rail #sidebar .ni { justify-content: center; margin: 1px 6px; padding-left: 0; padding-right: 0; }
    html.rail #sidebar .brand-img { max-width: 40px; }
    html.rail #sidebar .ni-railicon { transform: rotate(180deg); }
}

/* ── CARDS & TABLES ───────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.card-header { background: rgba(0,0,0,.15); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.card-footer { background: rgba(0,0,0,.12); border-top: 1px solid var(--border); }
.kpi { padding: 1.1rem 1.25rem; }
.kpi-v { font-size: 2rem; font-weight: 700; line-height: 1; }
.kpi-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

.table { color: var(--text); font-size: 13px; margin: 0; --bs-table-bg: transparent; --bs-table-color: var(--text); }
.table > :not(caption) > * > * { background-color: transparent; color: var(--text); }
.table th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); border-color: var(--border); font-weight: 600;
    padding: 9px 12px; background: rgba(0,0,0,.18);
}
.table td { border-color: var(--border); padding: 9px 12px; vertical-align: middle; }
.table-hover tbody tr:hover td { background: var(--card2) !important; }
.table-light, .table thead.table-light th { background: rgba(0,0,0,.18) !important; color: var(--muted) !important; }

.list-group-item { background: var(--card); border-color: var(--border); color: var(--text); }

/* ── BADGES ───────────────────────────────────────────────────────────────── */
.badge { font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 4px; }
.b-EN_TRANSITO      { background: rgba(234,179,8,.18);  color: #fbbf24; }
.b-INGRESADO        { background: rgba(59,130,246,.2);  color: #60a5fa; }
.b-EN_REPARTO       { background: rgba(234,179,8,.2);   color: #fbbf24; }
.b-ENTREGADO        { background: rgba(34,197,94,.2);   color: #4ade80; }
.b-REINGRESADO      { background: rgba(139,92,246,.2);  color: #a78bfa; }
.b-EN_DEVOLUCION    { background: rgba(249,115,22,.12); color: #fdba74; }
.b-DEVUELTO         { background: rgba(249,115,22,.2);  color: #fb923c; }
.b-BAJA             { background: rgba(239,68,68,.2);   color: #f87171; }
.b-INGRESO          { background: rgba(34,197,94,.2);   color: #4ade80; }
.b-SALIDA_REPARTO   { background: rgba(234,179,8,.2);   color: #fbbf24; }
.b-ENTREGA          { background: rgba(59,130,246,.2);  color: #60a5fa; }
.b-REINGRESO        { background: rgba(139,92,246,.2);  color: #a78bfa; }
.b-SALIDA_DEVOLUCION{ background: rgba(249,115,22,.2);  color: #fb923c; }
.b-admin            { background: rgba(59,130,246,.2);  color: #60a5fa; }
.b-gestor           { background: rgba(139,92,246,.2);  color: #a78bfa; }
.b-operador         { background: rgba(34,197,94,.2);   color: #4ade80; }
.b-transportista    { background: rgba(234,179,8,.2);   color: #fbbf24; }
.b-logistica        { background: rgba(14,165,233,.2);  color: #38bdf8; }
.b-contable         { background: rgba(244,114,182,.2); color: #f472b6; }
.b-activo           { background: rgba(34,197,94,.15);  color: #4ade80; }
.b-inactivo         { background: rgba(100,116,139,.15);color: #94a3b8; }
.b-conflict         { background: rgba(239,68,68,.2);   color: #f87171; }
.b-resolved         { background: rgba(100,116,139,.2); color: #94a3b8; }
.b-transicion_ilegal{ background: rgba(239,68,68,.2);   color: #f87171; }
.b-producto_inexistente_en_no_ingreso { background: rgba(249,115,22,.2); color: #fb923c; }
.b-entregado_sin_carga { background: rgba(234,179,8,.2);   color: #fbbf24; }
.b-cp_fuera_de_cobertura{ background: rgba(234,179,8,.2);  color: #fbbf24; }
.b-aplicado         { background: rgba(34,197,94,.2);   color: #4ade80; }
.b-aplicado_con_conflicto { background: rgba(239,68,68,.2); color: #f87171; }
.b-ignorado_duplicado_lote { background: rgba(100,116,139,.2); color: #94a3b8; }
.b-ignorado_mismo_estado   { background: rgba(100,116,139,.2); color: #94a3b8; }

/* ── FORMS ────────────────────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    font-size: 13px;
}
.form-control::placeholder { color: var(--muted); }
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(59,130,246,.2) !important;
    border-color: var(--blue) !important;
}
.form-label {
    font-size: 11px; color: var(--muted); text-transform: uppercase;
    letter-spacing: .05em; margin-bottom: 5px; display: block;
}
.input-group-text { background: var(--bg); border-color: var(--border); color: var(--muted); }
.form-check-input { background-color: var(--bg); border-color: var(--border); }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.form-text { color: var(--muted); }

/* ── MODALS ───────────────────────────────────────────────────────────────── */
.modal-content { background: var(--card); border: 1px solid var(--border); color: var(--text); }
.modal-header { border-bottom: 1px solid var(--border); padding: .85rem 1rem; }
.modal-footer { border-top: 1px solid var(--border); }
.btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ── TIMELINE ─────────────────────────────────────────────────────────────── */
.tl { padding-left: 28px; position: relative; }
.tl::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.tl-item { position: relative; margin-bottom: 14px; }
.tl-dot { position: absolute; left: -28px; top: 5px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--blue); background: var(--card); }
.tl-item.conflict .tl-dot { border-color: var(--red); }
.tl-item.manual .tl-dot { border-color: var(--yellow); }
.tl-conflict-body { border: 1px solid rgba(239,68,68,.25); background: rgba(239,68,68,.05); border-radius: 6px; padding: 10px 12px; }
.tl-manual-body { border: 1px solid rgba(234,179,8,.2); background: rgba(234,179,8,.04); border-radius: 6px; padding: 10px 12px; }

/* ── CROSS TABLE ──────────────────────────────────────────────────────────── */
.cross th, .cross td { text-align: center; padding: 8px 10px !important; font-size: 12px; }
.cross td:first-child, .cross th:first-child { text-align: left; min-width: 140px; }
.cross .tr-total td { font-weight: 700; border-top: 2px solid var(--border) !important; }
.tc { font-weight: 700; }

/* ── CONNECTIVITY ─────────────────────────────────────────────────────────── */
.conn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.conn.online { background: rgba(34,197,94,.12); color: var(--green); }
.conn.offline { background: rgba(239,68,68,.12); color: var(--red); }
.conn.syncing { background: rgba(234,179,8,.12); color: var(--yellow); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.online { background: var(--green); }
.dot.offline { background: var(--red); }
.dot.syncing { background: var(--yellow); animation: blink 1s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ── MISC ─────────────────────────────────────────────────────────────────── */
.mono { font-family: 'Courier New', monospace; letter-spacing: .04em; }
.code-lg { font-family: 'Courier New', monospace; font-size: 1.55rem; font-weight: 700; letter-spacing: .08em; }
.sec-title { font-size: 18px; font-weight: 700; }
.text-muted { color: var(--muted) !important; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

.page-link { background: var(--card) !important; border-color: var(--border) !important; color: var(--text) !important; font-size: 12px; }
.page-item.active .page-link { background: var(--blue) !important; border-color: var(--blue) !important; }
.page-item.disabled .page-link { color: var(--muted) !important; background: var(--card) !important; }

.alert-danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #f87171; }
.alert-success { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #4ade80; }
.alert-warning { background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.3); color: #fbbf24; }
.alert-info { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.25); color: #93c5fd; }

.btn-outline-secondary { border-color: var(--border) !important; color: var(--muted) !important; }
.btn-outline-secondary:hover { background: var(--card2) !important; color: var(--text) !important; }
.btn-outline-danger { border-color: rgba(239,68,68,.4) !important; color: #f87171 !important; }
.btn-outline-danger:hover { background: rgba(239,68,68,.1) !important; }
.btn-outline-success { border-color: rgba(34,197,94,.4) !important; color: #4ade80 !important; }
.btn-outline-success:hover { background: rgba(34,197,94,.1) !important; }
.btn-outline-primary { border-color: rgba(59,130,246,.45) !important; color: #60a5fa !important; }
.btn-outline-primary:hover { background: rgba(59,130,246,.12) !important; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #sidebar { transform: translateX(-100%); }
    #sidebar.open { transform: none; }
    #sidebar-overlay.show { display: block; }
    #main { margin-left: 0; padding: 1rem; }
}

/* ============================================================================
   Módulo Órdenes (ingreso por OCR) — portado del diseño de Claude Design
   ============================================================================ */

/* Badges de estado de carga / orden / tipo de venta */
.b-PENDIENTE{background:rgba(100,116,139,.2);color:#94a3b8}
.b-PROCESANDO{background:rgba(234,179,8,.2);color:#fbbf24}
.b-REVISANDO{background:rgba(59,130,246,.2);color:#60a5fa}
.b-CONFIRMADA{background:rgba(34,197,94,.2);color:#4ade80}
.b-RECIBIDO{background:rgba(59,130,246,.2);color:#60a5fa}
.b-ETIQUETADA{background:rgba(139,92,246,.2);color:#a78bfa}
.b-ERROR{background:rgba(239,68,68,.2);color:#f87171}
.b-LISTA{background:rgba(34,197,94,.2);color:#4ade80}
.b-LOCAL{background:rgba(59,130,246,.15);color:#60a5fa}
.b-ONLINE{background:rgba(139,92,246,.15);color:#a78bfa}

/* Captura */
.upload-zone{border:2px dashed var(--border);border-radius:12px;padding:2rem 1.25rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;background:rgba(0,0,0,.08)}
.upload-zone:hover,.upload-zone.drag{border-color:var(--blue);background:rgba(59,130,246,.06)}
.upload-zone .uz-icon{font-size:2.6rem;color:var(--muted);display:block;margin-bottom:.5rem}
.sheet-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border)}
.sheet-item:last-child{border-bottom:none}
.sheet-thumb{width:34px;height:44px;border-radius:3px;background:var(--card2);border:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted)}
.sheet-info{flex:1;min-width:0}
.sheet-name{font-size:12px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:180px}
.sheet-meta{font-size:11px;color:var(--muted)}
.s-prog{height:3px;border-radius:2px;background:var(--border);margin-top:5px;overflow:hidden;width:100%}
.s-prog-fill{height:100%;border-radius:2px;background:var(--blue);transition:width .3s}

/* Revisión OCR */
.sumbar{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:.65rem 1.1rem;margin-bottom:.85rem}
.sumbar-n{font-size:1.1rem;font-weight:700;line-height:1}
.sumbar-l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sumbar-div{width:1px;height:22px;background:var(--border);flex-shrink:0}
.cell-edit{background:var(--bg)!important;border:1px solid var(--border)!important;border-radius:4px;padding:2px 6px!important;outline:none;color:var(--text)!important;font-size:13px;font-family:inherit;min-width:56px;width:100%}
.cell-edit:focus{border-color:var(--blue)!important;box-shadow:0 0 0 .15rem rgba(59,130,246,.2)}
.cell-warn input,input.cell-warn{background:rgba(234,179,8,.14)!important;border-color:rgba(234,179,8,.45)!important;color:#fbbf24!important}
.cell-err input,input.cell-err{background:rgba(239,68,68,.12)!important;border-color:rgba(239,68,68,.5)!important;color:#f87171!important}
.row-err > td{background:rgba(239,68,68,.05)!important}
.row-err > td:first-child{border-left:3px solid rgba(239,68,68,.6)!important}
.sub-th{background:rgba(0,0,0,.3)!important;padding:4px 10px!important;font-size:10px!important;color:var(--muted)!important;text-transform:uppercase;letter-spacing:.04em}
.sub-td{background:rgba(0,0,0,.22)!important;padding:6px 10px!important;font-size:12px!important}
.xbtn{border:none;background:none;color:var(--muted);cursor:pointer;font-size:13px;padding:1px 3px;line-height:1;transition:color .1s}
.xbtn:hover,.xbtn.open{color:var(--blue)}

/* Etiquetas — tarjeta de vista previa (un rótulo con QR, fondo blanco) */
.label-card{background:#fff;color:#000;border:1px solid #d0d0d0;border-radius:4px;overflow:hidden;width:268px;font-family:'Courier New',monospace}
.label-card .lq{padding:12px 12px 6px;display:flex;justify-content:center}
.label-card .lq svg{width:148px;height:148px;display:block}
.label-card .lb{padding:8px 12px 13px;border-top:1px dashed #d8d8d8}
.label-card .ld,.label-card .ln,.label-card .li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.label-card .ld{font-size:15px;font-weight:700;font-family:'Inter',system-ui,sans-serif;text-transform:uppercase;line-height:1.15;color:#000;letter-spacing:.01em}
.label-card .ln{font-size:15px;font-weight:600;font-family:'Inter',system-ui,sans-serif;margin-top:5px;color:#111}
.label-card .li{font-size:12.5px;color:#555;font-family:'Inter',system-ui,sans-serif;margin-top:2px}
.label-card .lc{font-size:16px;color:#000;margin-top:8px;border-top:1px dashed #ddd;padding-top:7px;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.label-card .lcod{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.label-card .lqty{font-size:13px;font-weight:700;font-family:'Inter',system-ui,sans-serif;letter-spacing:.01em;color:#000;white-space:nowrap}

/* Hoja de etiquetas A4 (8 por hoja, estilo Avery L7165). En pantalla se ve como
   páginas blancas; en impresión se reduce a las hojas, una por página. */
.label-sheet{display:flex;flex-direction:column;align-items:center;gap:20px}
/* Las celdas tienen tamaño FÍSICO fijo (--cellw × --cellh en mm). La hoja A4
   (aspect-ratio) acomoda --cols columnas y cuantas filas entren; el QR y la
   tipografía (--qr/--fs) escalan con el tamaño. En pantalla se ve a escala real. */
.sheet-page{background:#fff;width:794px;max-width:100%;aspect-ratio:210/297;padding:8mm 6mm;display:grid;grid-template-columns:repeat(var(--cols,2),var(--cellw,98mm));grid-auto-rows:var(--cellh,67mm);justify-content:center;align-content:start;gap:2mm;box-shadow:0 2px 18px rgba(0,0,0,.45);border-radius:4px}
.label-cell{background:#fff;color:#000;border:1px dashed #cfcfcf;border-radius:4px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.label-cell .lq{padding:4px 8px 1px;display:flex;justify-content:center;flex-shrink:0}
.label-cell .lq svg{width:var(--qr,32mm);height:var(--qr,32mm);max-width:100%;display:block}
.label-cell .lb{padding:3px 9px 4px;border-top:1px dashed #e0e0e0;font-family:'Inter',system-ui,sans-serif;font-size:var(--fs,11px);
  line-height:1.3;display:flex;flex-direction:column;flex:1;min-height:0}
/* El texto (destino/cliente/descripción) cede espacio antes que el código: si no
   entra todo —destino largo en las etiquetas chicas— se recorta arriba y la línea
   de código + "X de N", que es la que se lee en el depósito, siempre queda visible. */
.label-cell .lt{flex:0 1 auto;min-height:0;overflow:hidden}
/* UN renglón por campo. Un destino largo que envuelve empuja hacia abajo todo lo
   que sigue y el código se sale de la etiqueta: en el depósito eso es un dato
   perdido. etiquetas.js achica el cuerpo del renglón hasta que entre; el
   nowrap + ellipsis es la red por si ni al mínimo entra. */
.label-cell .ld,.label-cell .ln,.label-cell .li,.label-cell .lref{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.label-cell .ld{font-size:1.18em;font-weight:700;text-transform:uppercase;line-height:1.15;color:#000}
/* El cliente pesa tanto como el destino: se lee de lejos en el mismo golpe. */
.label-cell .ln{font-size:1.18em;font-weight:600;margin-top:3px;color:#111}
.label-cell .li{font-size:1em;color:#555;margin-top:2px}
/* Referencia al cliente original (rótulo PARA DEVOLUCIÓN): mismo estilo que el
   código del ítem (.lcod) — monoespaciado — porque es un dato para tipear/buscar,
   no para leer de corrido como el nombre del proveedor en .ln. */
.label-cell .lref{font-size:1em;color:#000;margin-top:2px;font-family:'Courier New',monospace;letter-spacing:.03em}
/* El código del ítem es lo que el depósito lee y tipea; el rótulo tiene aire de
   sobra abajo, así que va más grande que el resto del cuerpo. */
.label-cell .lc{font-size:1.3em;color:#000;margin-top:6px;border-top:1px dashed #e6e6e6;padding-top:5px;letter-spacing:.03em;font-family:'Courier New',monospace;display:flex;justify-content:space-between;align-items:flex-end;gap:6px;flex-shrink:0}
.label-cell .lcod{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.label-cell .lqty{font-size:1em;font-weight:700;font-family:'Inter',system-ui,sans-serif;letter-spacing:.01em;color:#000;white-space:nowrap}

/* Rótulo PARA DEVOLUCIÓN (media hoja A4, 2 por hoja). Banner con el texto en
   cuerpo grande arriba y, debajo, el QR de ingreso junto a los mismos datos de
   la etiqueta normal. Texto negro sobre blanco a propósito: los fondos sólidos
   no se imprimen si el navegador trae "gráficos de fondo" apagado (y gastan
   tóner en cada etiqueta); el peso lo dan el cuerpo y las reglas gruesas. */
.label-cell.label-dev{border:3px solid #000;border-radius:6px}
/* El cuerpo está calibrado para que "PARA DEVOLUCIÓN" ocupe ~80% del ancho de la
   hoja: es un texto fijo, así que se mide una vez y queda. Si se cambia la
   leyenda o la tipografía, hay que recalibrarlo. */
.label-cell.label-dev .ldev{color:#000;text-align:center;font-family:'Inter',system-ui,sans-serif;
  font-weight:800;font-size:calc(var(--cellw, 98mm) * .08);line-height:1.1;letter-spacing:.02em;
  padding:2px 4px 4px;flex-shrink:0;border-bottom:3px solid #000;white-space:nowrap}
.label-cell.label-dev .dev-body{display:flex;align-items:center;gap:6mm;flex:1;min-height:0;padding:4mm 6mm}
.label-cell.label-dev .lq{padding:0;flex-shrink:0}
.label-cell.label-dev .lb{padding:0;border-top:none;flex:1;min-width:0}
/* Jerarquía de la devolución: Nº de orden > cliente > destino. */
.label-cell.label-dev .lno{font-size:1.5em;font-weight:800;line-height:1.15;letter-spacing:.02em;color:#000;
  font-family:'Courier New',monospace}
.label-cell.label-dev .ln{font-size:1.3em;font-weight:700;margin-top:7px;color:#000}
.label-cell.label-dev .ld{font-size:1em;font-weight:600;margin-top:5px;color:#222}
.label-cell.label-dev .li{margin-top:4px;color:#333}
.label-cell.label-dev .lref{margin-top:4px;font-size:.85em}
/* Acá sí puede envolver: la columna de texto es angosta (el QR se come medio
   rótulo) pero sobra alto, así que cortar a un renglón perdería más de lo que
   ordena. Y el código vuelve al cuerpo del rótulo: a 26px ya no entra a 1.3em. */
.label-cell.label-dev .ld,.label-cell.label-dev .ln,.label-cell.label-dev .li,.label-cell.label-dev .lref{white-space:normal;overflow:visible;text-overflow:clip}
.label-cell.label-dev .lc{font-size:1em;margin-top:10px;padding-top:8px}

/* Picker de artículos (depósito) — desplegable de código/descripción del catálogo.
   Va fixed en <body> para no quedar recortado por el scroll de la tabla. */
.art-pick{position:fixed;z-index:1080;display:none;max-height:290px;overflow-y:auto;
  background:var(--card2);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);padding:4px}
.art-pick.show{display:block}
.art-pick .art-op{display:flex;align-items:baseline;gap:8px;padding:5px 8px;border-radius:5px;cursor:pointer;font-size:12.5px}
.art-pick .art-op:hover,.art-pick .art-op.sel{background:rgba(59,130,246,.18)}
.art-pick .art-c{font-family:'Courier New',monospace;font-weight:700;color:var(--text);flex-shrink:0}
.art-pick .art-d{color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.art-pick .art-op-off{opacity:.55}
/* Marca (categoría) distinta a la del remito: se ofrece igual, pero etiquetada. */
.art-pick .art-sep{padding:5px 8px 3px;margin-top:3px;border-top:1px solid var(--border);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.art-pick .art-k{margin-left:auto;flex-shrink:0;font-size:10.5px;color:var(--yellow);
  border:1px solid rgba(234,179,8,.4);border-radius:4px;padding:0 4px;white-space:nowrap}
tr.art-otra-marca > td{background:rgba(234,179,8,.08)!important}
.art-pick .art-vacio{padding:7px 8px;font-size:12px;color:var(--muted)}
.art-pick .art-nuevo{padding:6px 8px;margin-top:2px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--blue);cursor:pointer;border-radius:5px}
.art-pick .art-nuevo:hover{background:rgba(59,130,246,.14)}
/* Renglón cuyo código no está en el catálogo. El `.is-invalid` de Bootstrap no se
   veía: la regla de .form-control de más arriba pisa el borde con !important. */
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--red)!important;background:rgba(239,68,68,.08)!important}
tr.art-sin-catalogo > td{background:rgba(239,68,68,.07)!important}

/* Impresión: se imprime solo el contenido marcado .print-area (etiquetas o
   reportes). El resto del chrome del panel se oculta y la tabla se vuelve
   legible sobre papel blanco. */
@media print{
  @page{size:A4;margin:8mm 6mm}
  body{background:#fff!important;color:#000}
  #sidebar,#sidebar-overlay,#tzConfirmModal,.no-print{display:none!important}
  #main{margin:0!important;padding:0!important;width:auto!important;max-width:none!important}
  #main > :not(.print-area){display:none!important}
  .print-area{color:#000}
  /* Etiquetas (hoja A4). Celdas de tamaño físico fijo (--cellw × --cellh); la
     grilla centra --cols columnas y entran las filas que caben por página. */
  .label-sheet{display:block;gap:0;margin:0;padding:0}
  .sheet-page{box-shadow:none;border-radius:0;width:100%;height:auto;aspect-ratio:auto;padding:0;gap:2mm;justify-content:center;align-content:start;break-after:page;page-break-after:always}
  .sheet-page:last-child{break-after:auto;page-break-after:auto}
  .label-cell{min-height:0;border:1px dotted #ccc;break-inside:avoid;page-break-inside:avoid}
  .label-cell.label-dev{border:3px solid #000}
  .label-cell .lq svg{width:var(--qr,32mm);height:var(--qr,32mm)}
  /* Reportes (tabla legible en blanco y negro) */
  .print-area h1,.print-area h2,.print-area .rep-print-title{color:#000;font-size:16px;margin:0 0 8px}
  .print-area table{width:100%;border-collapse:collapse;color:#000}
  .print-area thead th{border-bottom:2px solid #000;color:#000;font-size:11px;text-align:left;padding:4px 6px}
  .print-area tbody td{border-bottom:1px solid #bbb;color:#000;font-size:11px;padding:4px 6px}
  .print-area .badge{background:none!important;color:#000!important;border:1px solid #999;padding:1px 4px}
}