/* Gráficas del reporte del recorrido (public/shared/tourCharts.js). */
.viz { --viz-1: #2a78d6; --viz-track: #eef1f5; --viz-ink: #101828; --viz-muted: #5d6676; --viz-line: #e7e9ee; }
.viz-empty { margin: 8px 0 0; font-size: 14px; color: var(--viz-muted); }

.viz-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10px, 1fr); gap: 2px; align-items: end; height: 150px; padding-top: 8px; }
.viz-col { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; outline: none; }
.viz-col i { align-self: end; height: calc(var(--h) * 100%); min-height: 2px; background: var(--viz-1); border-radius: 4px 4px 0 0; transition: filter .15s ease; }
.viz-col span { font-size: 11px; color: var(--viz-muted); text-align: center; font-variant-numeric: tabular-nums; }
.viz-col:hover i, .viz-col:focus-visible i { filter: brightness(.85); }

.viz-heat { display: grid; grid-template-columns: 64px repeat(var(--cols), minmax(14px, 1fr)); gap: 2px; align-items: center; overflow-x: auto; padding-bottom: 4px; }
.viz-heat b { font-size: 10.5px; font-weight: 500; color: var(--viz-muted); text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; overflow: visible; }
.viz-heat em { font-style: normal; font-size: 12px; color: var(--viz-muted); white-space: nowrap; padding-right: 6px; }
.viz-heat i { aspect-ratio: 1; min-height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--viz-1) calc(var(--a) * 100%), var(--viz-track)); outline: none; }
.viz-heat i:hover, .viz-heat i:focus-visible { box-shadow: 0 0 0 2px var(--viz-ink); }

.viz-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.viz-bars li { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.viz-bar-label { color: var(--viz-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.viz-bar-label small { display: block; font-size: 12px; color: var(--viz-muted); }
.viz-bar-track { height: 10px; border-radius: 99px; background: var(--viz-track); overflow: hidden; }
.viz-bar-track i { display: block; height: 100%; width: calc(var(--w) * 100%); min-width: 3px; background: var(--viz-1); border-radius: 99px; }
.viz-bars b { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--viz-ink); min-width: 3ch; text-align: right; }

.viz-tip { position: absolute; z-index: 2000; pointer-events: none; max-width: 260px; padding: 6px 10px; border-radius: 8px;
  background: #101828; color: #fff; font-size: 13px; line-height: 1.35; box-shadow: 0 4px 14px rgba(16,24,40,.25); }

@media (max-width: 560px) {
  .viz-bars li { grid-template-columns: 1fr auto; }
  .viz-bars li .viz-bar-track { grid-column: 1 / -1; grid-row: 2; }
}
@media print {
  .viz-tip { display: none; }
  .viz-col i, .viz-bar-track i, .viz-heat i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}