/* ================================================================
   ranking-list.css — Layout en columnas, sin leyenda debajo de venta.
   Las grids varían por source (sucursal vs vendedor).
   ================================================================ */

bm-ranking-list {
  display: block;
  height: 100%;
}

.rank-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
}

.rank-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 0.25rem;
}

.rank-title {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-size: 19px;
  font-weight: 400;
  color: var(--text-strong);
}

.rank-sub {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rank-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ─── Header de columnas ─── */
.rank-cols {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--border-soft);
}

.rank-col-h {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}

.rank-col-num {
  text-align: right;
}

/* ─── Filas ─── */
.rank-row {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}

.rank-row:last-child {
  border-bottom: none;
}

/* Grid templates por source.
   Anchos fijos para columnas numéricas → headers se alinean al ras
   con los valores (todos right-aligned). El gap de 16px da aire
   entre columnas y evita que se sientan "corridas".

   sucursal: # | Nombre | Uds | Venta | Contrib | Margen      (6 cols)
   vendedor: # | Nombre | Uds | Venta | Contrib | %Promo | Margen (7 cols) */
.rank-cols.rank-sucursal,
.rank-row.rank-sucursal {
  grid-template-columns: 24px minmax(0, 1fr) 56px 110px 110px 72px;
}

.rank-cols.rank-vendedor,
.rank-row.rank-vendedor {
  grid-template-columns: 24px minmax(0, 1fr) 48px 100px 96px 60px 72px;
}

.rank-pos {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}

.rank-name {
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.rank-autos {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--text-strong);
  font-weight: 600;
  text-align: right;
  font-feature-settings: "tnum" 1;
}

.rank-fact {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  color: var(--text-strong);
  font-weight: 500;
  text-align: right;
}

.rank-contrib {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-base);
  text-align: right;
}

.rank-promo {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}

/* Pill de margen */
.rank-margen {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  min-width: 56px;
  text-align: center;
  justify-self: end;
}

.rank-margen-low {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.rank-margen-mid {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.rank-margen-high {
  background: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
}

.rank-margen-none {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-soft);
}

.loading {
  padding: 1rem 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.loading.error { color: #b91c1c; }