/* ============================================================
   SpineNet · vista reportes
   Clases prefijadas v-rep-…  ·  solo var(--token), nunca hex
   ============================================================ */

.v-rep-top .tbl-wrap { max-height: 360px; overflow-y: auto; }

/* ---------- Las tres cifras bajo los 12 meses ---------- */
.v-rep-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.v-rep-cifra { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-rep-cifra span { font-size: var(--fs-12); color: var(--text-muted); }
.v-rep-cifra b { font-size: var(--fs-20); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.v-rep-cifra small { font-size: var(--fs-12); color: var(--text-secondary); }

/* ---------- Ventas por tipo, con su dibujo ---------- */
.v-rep-tipos { display: flex; flex-direction: column; gap: var(--s-4); }
.v-rep-tipo { display: flex; align-items: center; gap: var(--s-3); }
.v-rep-tipo__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.v-rep-tipo__fila { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-14); }
.v-rep-tipo__fila span { font-weight: 600; font-variant-numeric: tabular-nums; }
.v-rep-tipo small { font-size: var(--fs-12); color: var(--text-muted); }
.v-rep-tipo__tramo { background: var(--tipo-relleno, var(--brand)); }

/* ---------- Rankings ---------- */
.v-rep-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v-rep-rank__fila {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-width: 0;
  padding: var(--s-3) var(--s-1); border: 0; border-bottom: 1px solid var(--border); background: none;
  font: inherit; text-align: left; color: var(--text-primary); cursor: pointer; transition: background var(--t-fast);
}
.v-rep-rank li:last-child .v-rep-rank__fila { border-bottom: 0; }
@media (hover: hover) { .v-rep-rank__fila:hover { background: var(--bg-muted); } }
.v-rep-rank__fila:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.v-rep-rank__n {
  flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-inset); font-size: var(--fs-12); font-weight: 600; color: var(--text-secondary);
}
.v-rep-rank li:first-child .v-rep-rank__n { background: var(--brand-soft); color: var(--brand-ink); }
.v-rep-rank__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.v-rep-rank__cab { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-13); }
.v-rep-rank__cab b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-rep-rank__cab span { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.v-rep-rank small { font-size: var(--fs-12); color: var(--text-muted); }

@media (max-width: 640px) {
  .v-rep-cifras { grid-template-columns: 1fr 1fr; }
  .v-rep-cifra:last-child { grid-column: 1 / -1; }
}