/* Reporte de ventas (Control y la caja). Usa los colores de cada una: los de Control (--ink…) o los de la caja (--tinta…). */
.vt {
  --vt-ink: var(--ink, var(--tinta, #171B36));
  --vt-ink2: var(--ink-2, var(--tinta2, #474C6B));
  --vt-ink3: var(--ink-3, var(--tinta3, #6A6F8B));
  --vt-line: var(--line, var(--linea, #D8DBE8));
  --vt-line2: var(--line-2, var(--linea, #E8EAF2));
  --vt-paper: var(--paper, var(--papel, #FFFFFF));
  --vt-flour: var(--flour, var(--fondo, #EEF0F6));
  --vt-bar: var(--bar, var(--azul, #222B59));
  --vt-bar-lo: var(--bar-lo, #AFB5D8);
  --vt-acc: var(--basil, var(--azul, #222B59));
  --vt-acc-weak: var(--basil-weak, var(--azul-suave, #E4E7F4));
  --vt-ojo: var(--crust-txt, var(--ambar-txt, #855210));
  --vt-ojo-weak: var(--crust-weak, var(--ambar-suave, #FBEED6));
  --vt-r: var(--r, 12px);
  --vt-rs: var(--r-s, 10px);
  display: grid; gap: 16px; min-width: 0; color: var(--vt-ink);
}
.vt.vt-actualizando { opacity: 0.6; transition: opacity 0.2s; }
.vt-cargando, .vt-nota { color: var(--vt-ink3); font-size: 0.875rem; margin: 0; }
.vt-cab { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.vt-sub { margin: 0; color: var(--vt-ink2); font-weight: 600; }
.vt-btn { min-height: 40px; padding: 8px 14px; border-radius: var(--vt-rs); border: 1px solid transparent; background: var(--vt-acc-weak); color: var(--vt-acc);
  font: inherit; font-weight: 700; font-size: 0.9375rem; cursor: pointer; }
.vt-btn-borde { background: var(--vt-paper); border-color: var(--vt-line); }
.vt-btn-texto { background: none; padding: 6px 0; min-height: 0; text-decoration: underline; justify-self: start; }
.vt-btn:disabled { opacity: 0.6; cursor: default; }
.vt-error, .vt-vacio { padding: 24px; background: var(--vt-paper); border: 1px solid var(--vt-line); border-radius: var(--vt-r); display: grid; gap: 10px; justify-items: start; }
.vt-error p, .vt-vacio p { margin: 0; }

.vt-cuadros { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.vt-cuadro { padding: 14px 16px; background: var(--vt-paper); border: 1px solid var(--vt-line); border-radius: var(--vt-r); display: grid; gap: 4px; align-content: start; }
.vt-cuadro-ojo { border-color: color-mix(in srgb, var(--vt-ojo) 35%, var(--vt-line)); }
.vt-etq { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--vt-ink3); text-transform: uppercase; letter-spacing: 0.03em; }
.vt-valor { margin: 0; font-size: 1.625rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }

.vt-rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.vt-bloque { padding: 16px; background: var(--vt-paper); border: 1px solid var(--vt-line); border-radius: var(--vt-r); display: grid; gap: 10px; min-width: 0; align-content: start; }
.vt-bloque h2 { margin: 0; font-size: 1.0625rem; }

.vt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vt-tabla { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.vt-tabla th, .vt-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--vt-line2); text-align: left; vertical-align: top; }
.vt-tabla thead th { color: var(--vt-ink3); font-weight: 600; font-size: 0.8125rem; border-bottom-color: var(--vt-line); white-space: nowrap; }
.vt-tabla tbody th { font-weight: 650; }
.vt-tabla small { display: block; color: var(--vt-ink3); font-weight: 400; font-size: 0.8125rem; }
.vt-tabla .vt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-tabla .vt-pos { color: var(--vt-ink3); width: 2.5rem; }
.vt-tabla .vt-ojo { color: var(--vt-ojo); font-weight: 650; }
@media (max-width: 560px) { .vt-tabla .vt-det { display: none; } .vt-valor { font-size: 1.375rem; } .vt-rejilla { grid-template-columns: minmax(0, 1fr); } }

/* Gráficos dentro del reporte (la caja no tiene los estilos de Control) */
.vt .grafico { position: relative; width: 100%; min-height: 200px; }
.vt .grafico-svg { display: block; overflow: visible; }
.vt .eje-linea { stroke: var(--vt-line2); stroke-width: 1; }
.vt .eje-base { stroke: var(--vt-line); stroke-width: 1; }
.vt .eje-texto { fill: var(--vt-ink3); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.vt .barra { fill: var(--vt-bar-lo); }
.vt .barra-resaltada { fill: var(--vt-bar); }
.vt .linea-ref { stroke: var(--vt-ink2); stroke-width: 1.5; opacity: 0.7; }
.vt .linea-ref-texto { fill: var(--vt-ink2); font-weight: 600; }
.vt .zona-hover { fill: transparent; outline: none; }
.vt .zona-hover.activa { fill: color-mix(in srgb, var(--vt-ink) 6%, transparent); }
.vt .tip { position: absolute; z-index: 5; pointer-events: none; background: var(--vt-ink); color: var(--vt-paper); padding: 8px 10px; border-radius: var(--vt-rs);
  font-size: 0.8125rem; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vt .tip[hidden] { display: none; }
.vt .barrash { display: grid; gap: 10px; }
.vt .barrash-fila { display: grid; grid-template-columns: minmax(90px, 9.5rem) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.vt .barrash-etq { font-size: 0.875rem; color: var(--vt-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt .barrash-pista { height: 14px; }
.vt .barrash-barra { display: block; height: 100%; background: var(--vt-bar); border-radius: 0 4px 4px 0; }
.vt .barrash-valor { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.9375rem; }
.vt .barrash-valor small { color: var(--vt-ink3); font-weight: 500; margin-left: 6px; }