/* Integración con Tienda Nube. Hoja chica sobre /site/site.css. */

/* ---- KPIs del panel de ventas ------------------------------------ */
.tn-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-24); }
.tn-kpi .mono { color: var(--color-smoke); display: block; margin-bottom: var(--spacing-8); }
.tn-kpi .num { font-family: var(--font-cond); font-size: var(--text-heading); line-height: 1; color: var(--color-carbon-black); }

/* ---- Tabla de atribución ----------------------------------------- */
.tn-table { width: 100%; border-collapse: collapse; margin-top: var(--spacing-24); }
.tn-table th {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--color-smoke);
  text-align: left;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--color-carbon-black);
}
.tn-table th + th, .tn-table td + td { text-align: right; }
.tn-table td {
  font-size: var(--text-body-sm);
  color: var(--color-carbon-black);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-ash);
}
.tn-table td .medium { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-slate); display: block; }
.tn-scroll { overflow-x: auto; }

/* ---- Fila de números --------------------------------------------- */
.tn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-40); }
.tn-stat .num { font-family: var(--font-cond); font-size: var(--text-heading-sm); line-height: 1; color: var(--color-carbon-black); display: block; margin-bottom: var(--spacing-8); }
.tn-stat p { font-size: var(--text-body-sm); line-height: 1.35; color: var(--color-slate); margin: 0; }

/* ---- Pill de una card -------------------------------------------- */
.tn-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-slate);
  border: 1px solid var(--color-ash);
  border-radius: 999px;
  padding: 4px 12px;
  margin-top: var(--spacing-16);
}

@media (max-width: 860px) {
  .tn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tn-kpis { grid-template-columns: minmax(0, 1fr); }
  .tn-stats { grid-template-columns: minmax(0, 1fr); }
}