/* ============================================================
   Recompensas — lo propio del panel, encima de las primitivas ds-*.
   ------------------------------------------------------------
   Igual que en AntiCheat: lo que se resuelve con .ds-card,
   .ds-table, .ds-stat o .ds-person NO se repite aquí. Esto es
   sólo lo que el design system no tiene y esta sección sí
   necesita para contar su historia:

     · rw-tiles   — rejilla de métricas dentro del cuerpo
     · rw-gauge   — la deuda de puntos de un vistazo
     · rw-steps   — el embudo (ganaron → volvieron → canjearon)
     · rw-bars    — distribuciones (frecuencia, multi-negocio)
     · rw-strip   — tira de 24 horas / 7 días
     · rw-biz     — identidad de un negocio (logo + nombre)
     · rw-chart   — caja de una gráfica de Chart.js

   Los colores salen de los tokens del tema; el modo oscuro
   (negro neutro) no necesita ni una regla extra.
   ============================================================ */

/* ── Métricas dentro del cuerpo ──────────────────────────────
   Las de arriba las pone .ds-stats en el armazón de la suite;
   estas son las del detalle de un negocio, que van dentro de
   una tarjeta y por eso no traen el padding de aquéllas. */
.rw-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--ds-3);
}

/* ── Identidad de un negocio ─────────────────────────────────
   El paralelo de .ds-person: logo cuadrado en vez de avatar
   redondo, porque son marcas y no caras. */
.rw-biz {
  display: flex;
  align-items: center;
  gap: var(--ds-3);
  min-width: 0;
}

.rw-biz__logo,
.rw-biz__ph {
  width: 34px;
  height: 34px;
  border-radius: var(--ds-r-sm);
  flex: none;
  object-fit: cover;
  background: var(--ds-sunken);
  border: 1px solid var(--border);
}

.rw-biz__ph {
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.rw-biz__id { min-width: 0; }

/* La placa de estado nunca se encoge: lo que cede es el nombre. */
.rw-biz > .ds-badge { flex: none; }

.rw-biz__name {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rw-biz__sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dentro de una tabla la identidad lleva tope duro: nueve columnas ya
   llenan los 1040px de la página, y un nombre largo la empujaba a
   scroll horizontal escondiendo la última columna — que es justo la
   que dice qué negocio se durmió. El tope va en el contenedor (y no en
   el texto) para que también acote la placa de estado; lo que cede es
   el nombre, con puntos suspensivos, y completo sigue en el title de
   la fila. */
.ds-table .rw-biz { max-width: 250px; }

.rw-biz--lg .rw-biz__logo,
.rw-biz--lg .rw-biz__ph { width: 56px; height: 56px; border-radius: var(--ds-r); }
.rw-biz--lg .rw-biz__name { font-size: 18px; font-weight: 750; letter-spacing: -.01em; }
.rw-biz--lg .rw-biz__sub { font-size: 12px; white-space: normal; }

/* ── La deuda de puntos ──────────────────────────────────────
   El hallazgo que justifica la pantalla: puntos que se regalaron
   y nadie ha usado. El tono lo decide el JS con --rw-tone. */
.rw-gauge {
  height: 10px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-sunken);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-top: var(--ds-3);
}

.rw-gauge__fill {
  height: 100%;
  border-radius: var(--ds-r-pill);
  background: var(--rw-tone, var(--primary));
  transition: width var(--ds-slow) var(--ds-ease);
}

.rw-gauge__legend {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-3);
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.rw-gauge__legend b { color: var(--text-secondary); font-weight: 650; }

/* ── Embudo ──────────────────────────────────────────────────
   Tres pasos en fila. No se dibuja la flecha: el orden de
   lectura ya la implica y una flecha por paso ensucia. */
.rw-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ds-3);
}

.rw-step {
  padding: var(--ds-3) var(--ds-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--rw-tone, var(--primary));
  border-radius: var(--ds-r);
  background: var(--ds-sunken);
}

.rw-step__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rw-step__value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.15;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.rw-step__foot { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.rw-step__foot b { color: var(--text-secondary); font-weight: 700; }

/* ── Distribuciones ──────────────────────────────────────────
   Barras horizontales con etiqueta y número. Son 3 o 4 valores
   de una sola dimensión: montar Chart.js para eso es de más. */
.rw-bars { display: flex; flex-direction: column; gap: var(--ds-2); }

.rw-bar {
  display: grid;
  grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) max-content;
  gap: var(--ds-3);
  align-items: center;
}

.rw-bar__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rw-bar__track {
  height: 8px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-sunken);
  border: 1px solid var(--border);
  overflow: hidden;
}

.rw-bar__fill {
  height: 100%;
  border-radius: var(--ds-r-pill);
  background: var(--rw-tone, var(--primary));
}

.rw-bar__meta {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rw-bar__meta span { color: var(--text-muted); font-weight: 500; }

/* ── Tira de horas / días ────────────────────────────────────
   24 columnas que responden "¿cuándo vienen?". Va con scroll
   propio para que en móvil no reviente el ancho de la página. */
.rw-strip {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 96px;
  overflow-x: auto;
  scrollbar-width: none;
}

.rw-strip + .rw-strip { margin-top: var(--ds-4); }
.rw-strip::-webkit-scrollbar { display: none; }

.rw-strip__col {
  flex: 1 1 0;
  min-width: 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}

.rw-strip__bar {
  border-radius: 4px 4px 2px 2px;
  background: var(--primary);
  opacity: .8;
  transition: opacity var(--ds-fast) var(--ds-ease);
}

.rw-strip__col:hover .rw-strip__bar { opacity: 1; }

.rw-strip__label {
  font-size: 9.5px;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

/* ── Gráficas ────────────────────────────────────────────────
   Alto fijo: Chart.js con maintainAspectRatio:false necesita
   que el contenedor mida algo. */
.rw-chart { position: relative; height: 280px; }

/* ── Detalle de un negocio ──────────────────────────────────── */
.rw-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-4);
  flex-wrap: wrap;
}

/* ── Marcas en las celdas ────────────────────────────────────
   `rw-hot` es la mala noticia (nadie canjea, nadie viene desde
   hace un mes); se usa sólo cuando el número ya la dice. */
.rw-hot { color: var(--rose); font-weight: 700; }
.rw-warm { color: var(--orange); font-weight: 650; }
.rw-good { color: var(--green); font-weight: 650; }

.rw-table__sub { color: var(--text-muted); font-weight: 500; font-size: 11px; }

/* Fila de un premio que nadie ha canjeado: no se esconde, se apaga. */
.ds-table tbody tr.rw-dim td { opacity: .55; }

/* ── Cabecera ordenable ──────────────────────────────────────
   El icono de orden va siempre puesto (en gris cuando no es la
   columna activa): si apareciera sólo al ordenar, la cabecera
   brincaría de alto al hacer clic. */
.rw-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.rw-sortable:hover { color: var(--text-secondary); }
.rw-sortable .ds-i { opacity: .35; margin-left: 3px; }
.rw-sortable.is-sorted { color: var(--primary); }
.rw-sortable.is-sorted .ds-i { opacity: 1; }

/* ── Fila que abre algo ─────────────────────────────────────── */
.rw-clickable { cursor: pointer; }

/* ── Chips de configuración del programa ─────────────────────
   Cómo está armado el programa (puntos por visita, caducidad,
   niveles). Son datos, no acciones: por eso no son botones. */
.rw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--ds-3); }

.rw-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--ds-r-pill);
  background: var(--ds-sunken);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.rw-chip--on { background: var(--green-soft); border-color: transparent; color: var(--green); }
.rw-chip--off { background: var(--rose-soft); border-color: transparent; color: var(--rose); }

/* ── Pie de tarjeta con las acciones ────────────────────────── */
.rw-acts { display: flex; align-items: center; gap: var(--ds-2); }

@media (max-width: 720px) {
  .rw-chart { height: 240px; }
  .rw-bar { grid-template-columns: minmax(84px, 1fr) minmax(0, 1.4fr) max-content; gap: var(--ds-2); }
  .rw-biz--lg .rw-biz__name { font-size: 16px; }
}