/* css/trazabilidad.css — vistas «Flujo» y «Ruta» del modal de trazabilidad (26-sep-2026).
 * Paleta ATLAS (css/atlas-tokens.css): flechas navy, merma roja, saldo gris, HOY bronce.
 * Sin colores por proveedor (pedido del owner). El resaltado de hover/selección lo decide el JS
 * con dos clases: `.tz-hay-foco` en el lienzo y `.tz-hl` en lo que está en el camino. */

.tz-svg { display: block; font-family: var(--font-body, Inter, system-ui, sans-serif); }
.tz-svg text { fill: var(--atlas-stone-900, #1A1D2A); }
.tz-svg [role="button"] { cursor: pointer; outline: none; }
.tz-svg [role="button"]:focus-visible .tz-bar,
.tz-svg [role="button"]:focus-visible .tz-l-dot,
.tz-svg [role="button"]:focus-visible .tz-h-dot { stroke: var(--atlas-bronze-600, #B57536); stroke-width: 3; }

.tz-col-tit, .tz-mapa-zona, .tz-carril, .tz-mes {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; fill: var(--atlas-stone-500, #8A8E9C) !important;
}
.tz-mapa-nota { font-size: 10px; fill: var(--atlas-stone-500, #8A8E9C) !important; font-style: italic; }

/* ── Bloques (Flujo) ── */
.tz-bar { fill: var(--atlas-navy-700, #1E2D6B); transition: opacity var(--motion-fast, 150ms ease-out); }
.tz-n-entrada .tz-bar { fill: var(--atlas-navy-900, #0E1A3A); stroke: var(--atlas-bronze-600, #B57536); stroke-width: 2; }
.tz-n-saldo .tz-bar { fill: var(--atlas-stone-500, #8A8E9C); }
.tz-n-merma .tz-bar { fill: var(--atlas-danger, #B91C1C); }
.tz-n-tit { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700; }
.tz-n-sub { font-size: 10px; fill: var(--atlas-stone-700, #5D6477) !important; }
.tz-n-merma .tz-n-tit { fill: var(--atlas-danger, #B91C1C); font-family: var(--font-body, Inter, sans-serif); }
.tz-entrada-tag { font-size: 8.5px; font-weight: 800; letter-spacing: .12em; fill: var(--atlas-bronze-600, #B57536) !important; }

/* ── Flechas ── */
.tz-e-ln { fill: none; stroke: var(--atlas-navy-500, #3D4FA3); stroke-opacity: .45; stroke-linecap: round; transition: stroke-opacity var(--motion-fast, 150ms ease-out); }
.tz-e-hit { fill: none; stroke: transparent; stroke-width: 14; }
.tz-e-merma .tz-e-ln, .tz-tr-merma .tz-e-ln { stroke: var(--atlas-danger, #B91C1C); stroke-opacity: .8; stroke-dasharray: 4 3; }
.tz-tr-viaje .tz-e-ln { stroke-dasharray: 7 5; }
.tz-tr-previsto .tz-e-ln { stroke-dasharray: 3 5; stroke-opacity: .3; }
.tz-ah { fill: var(--atlas-navy-500, #3D4FA3); }
.tz-ah-merma { fill: var(--atlas-danger, #B91C1C); }
.tz-e-lbl rect { fill: #fff; stroke: var(--atlas-stone-300, #D4D2CC); }
.tz-e-lbl text { font-family: var(--font-mono, monospace); font-size: 10px; fill: var(--atlas-stone-700, #5D6477) !important; }

/* ── Asientos (chip con candado) ── */
.tz-chip rect { fill: #fff; stroke: var(--atlas-navy-700, #1E2D6B); stroke-dasharray: 3 2; }
.tz-chip text { font-family: var(--font-mono, monospace); font-size: 9.5px; fill: var(--atlas-navy-700, #1E2D6B) !important; }
.tz-candado { fill: none; stroke: var(--atlas-navy-700, #1E2D6B); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tz-chip-borrador rect { stroke: var(--atlas-warning, #B45309); }

/* ── Mapa (Ruta) ── */
.tz-mapa-tierra { fill: var(--atlas-stone-100, #F0EEE8); }
.tz-mapa-mar { fill: #E9ECF5; }
.tz-l-dot { stroke: #fff; stroke-width: 2; fill: var(--atlas-stone-700, #5D6477); }
.tz-l-deposito .tz-l-dot { fill: var(--atlas-success, #15803D); }
.tz-l-puerto_carga .tz-l-dot, .tz-l-puerto_destino .tz-l-dot { fill: var(--atlas-navy-700, #1E2D6B); }
.tz-l-cliente .tz-l-dot, .tz-l-local .tz-l-dot { fill: var(--atlas-bronze-600, #B57536); }
.tz-l-merma .tz-l-dot { fill: var(--atlas-danger, #B91C1C); }
.tz-l-merma-txt { fill: var(--atlas-danger, #B91C1C) !important; }
.tz-l-tit { font-size: 11px; font-weight: 700; }
.tz-l-sub { font-size: 9.5px; fill: var(--atlas-stone-700, #5D6477) !important; }
.tz-buque { fill: var(--atlas-navy-700, #1E2D6B); stroke: #fff; stroke-width: 1.5; }
.tz-l-buque-arribado .tz-buque { fill: var(--atlas-success, #15803D); }
.tz-l-buque-puerto .tz-buque { fill: var(--atlas-stone-500, #8A8E9C); }

/* ── Línea de tiempo (Ruta) ── */
.tz-previsto { fill: var(--atlas-bronze-300, #E6C29A); fill-opacity: .18; }
.tz-mes-ln, .tz-carril-ln { stroke: var(--atlas-stone-200, #E5E2DA); stroke-width: 1; }
.tz-hoy { stroke: var(--atlas-bronze-600, #B57536); stroke-width: 2; }
.tz-hoy-tag rect { fill: var(--atlas-bronze-600, #B57536); }
.tz-hoy-tag text { fill: #fff !important; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; }
.tz-h-dot { fill: var(--atlas-stone-700, #5D6477); stroke: #fff; stroke-width: 2; }
.tz-h-embarque .tz-h-dot { fill: var(--atlas-navy-700, #1E2D6B); }
.tz-h-stock .tz-h-dot { fill: var(--atlas-success, #15803D); }
.tz-h-venta .tz-h-dot { fill: var(--atlas-bronze-600, #B57536); }
.tz-h-contable .tz-h-dot { fill: #fff; stroke: var(--atlas-navy-700, #1E2D6B); stroke-dasharray: 2 2; stroke-width: 1.2; }
.tz-h-previsto .tz-h-dot { fill: #fff; stroke: var(--atlas-navy-700, #1E2D6B); stroke-dasharray: 3 2; stroke-width: 1.8; }
.tz-h-txt { font-size: 9.5px; font-weight: 600; }
.tz-conector { fill: none; stroke: var(--atlas-bronze-600, #B57536); stroke-width: 1.6; display: none; }
.tz-h.tz-activo .tz-conector { display: inline; }

/* ── Resaltado: el camino en azul fuerte, el resto se apaga ── */
.tz-hay-foco [data-sel] { opacity: .14; transition: opacity var(--motion-fast, 150ms ease-out); }
.tz-hay-foco [data-sel].tz-hl { opacity: 1; }
.tz-hay-foco .tz-e.tz-hl .tz-e-ln { stroke: var(--atlas-navy-700, #1E2D6B); stroke-opacity: 1; }
.tz-hay-foco .tz-e-merma.tz-hl .tz-e-ln { stroke: var(--atlas-danger, #B91C1C); }
.tz-hay-foco .tz-e.tz-hl .tz-e-lbl rect { fill: var(--atlas-navy-700, #1E2D6B); stroke: var(--atlas-navy-700, #1E2D6B); }
.tz-hay-foco .tz-e.tz-hl .tz-e-lbl text { fill: #fff !important; }
.tz-sel .tz-bar, .tz-sel .tz-l-dot, .tz-sel .tz-h-dot { stroke: var(--atlas-bronze-600, #B57536); stroke-width: 3; }

/* ── Lista de hitos (Ruta en el celular) ── */
.tz-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.tz-lista-mes { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--atlas-stone-500, #8A8E9C); padding: 10px 4px 4px; }
.tz-lista-hoy { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--atlas-bronze-600, #B57536); border-radius: 999px; padding: 3px 10px; margin: 8px 0; display: inline-block; }
.tz-lista-item { width: 100%; text-align: left; display: grid; grid-template-columns: 76px 1fr; gap: 2px 8px; padding: 8px 6px; border-bottom: 1px solid var(--atlas-stone-200, #E5E2DA); background: none; }
.tz-lista-item:hover { background: #fff; }
.tz-lista-fecha { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--atlas-stone-700, #5D6477); grid-row: span 2; }
.tz-lista-txt { font-size: 12px; font-weight: 700; color: var(--atlas-stone-900, #1A1D2A); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-lista-carril { font-size: 10px; color: var(--atlas-stone-500, #8A8E9C); }
.tz-lista-item.tz-h-previsto .tz-lista-txt { font-style: italic; color: var(--atlas-stone-700, #5D6477); }

/* ── Panel de detalle ── */
.tz-detalle { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 100%); background: #fff; border-left: 1px solid var(--atlas-stone-200, #E5E2DA); box-shadow: var(--shadow-modal); flex-direction: column; z-index: 5; }
.tz-detalle:not(.hidden) { display: flex; }
.tz-detalle.hidden { display: none; }
@media (max-width: 639px) {
  .tz-detalle { top: auto; left: 0; width: 100%; max-height: 72%; border-left: 0; border-top: 1px solid var(--atlas-stone-200, #E5E2DA); border-radius: 14px 14px 0 0; }
}
.tz-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 12px; }
.tz-kv dt { color: var(--atlas-stone-500, #8A8E9C); }
.tz-kv dd { margin: 0; color: var(--atlas-stone-900, #1A1D2A); min-width: 0; overflow-wrap: anywhere; }

/* ── Leyenda ── */
.tz-ley-flecha { stroke: var(--atlas-navy-500, #3D4FA3); stroke-opacity: .6; }
.tz-ley-merma { stroke: var(--atlas-danger, #B91C1C); stroke-dasharray: 4 3; }
.tz-ley-conector { stroke: var(--atlas-bronze-600, #B57536); }
.tz-ley-previsto { fill: #fff; stroke: var(--atlas-navy-700, #1E2D6B); stroke-dasharray: 3 2; stroke-width: 1.6; }
.tz-n-fondo { fill: #fff; fill-opacity: .88; }
.tz-e-hit { stroke-width: 10; }