/* Tablero de ejemplo de Suite (solo en suite.html): ventas por mes y clientes con más peso en las ventas.
   Los datos son ficticios y la figura lo dice; sirve para mostrar qué responde el sistema, no cifras reales. */

.tablero {
  margin: 0; padding: 24px; display: grid; gap: 16px;
  border-radius: var(--snp-radius-lg); border: 1px solid rgb(213 220 225 / 0.18); background: rgb(255 255 255 / 0.04);
}
.tablero figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; }
.tablero-nota { font: 400 .8rem var(--snp-font-mono); color: #8C9AA5; }

.tablero-grafica text { font: 400 10px var(--snp-font-mono); fill: #8C9AA5; }
.tablero-grafica .barra { fill: var(--snp-sinapsis); opacity: .45; }
.tablero-grafica .barra-mayor { fill: var(--snp-sinapsis); }
/* El mes más bajo se distingue por contorno, no solo por color. */
.tablero-grafica .barra-menor { fill: none; stroke: var(--snp-sinapsis); stroke-width: 1.5; stroke-dasharray: 3 2; }
.tablero-grafica .marca-mayor { fill: var(--snp-nodo); }

.tablero-extremos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.tablero-extremos div { padding: 10px 12px; border-radius: var(--snp-radius-sm); background: rgb(255 255 255 / 0.05); }
.tablero-extremos dt { font-size: .8rem; color: #8C9AA5; }
.tablero-extremos dd { margin: 0; font: 500 1.05rem var(--snp-font-display); }

.tablero-sub { font-size: .9rem; color: #B9C4CC; }
.tablero-clientes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tablero-clientes li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 3.2rem; align-items: center; gap: 12px; font-size: .9rem; }
.tablero-clientes .mono { text-align: right; color: var(--snp-blanco); }
/* Barra proporcional al porcentaje (--p en el HTML), sobre una pista tenue. */
.tablero-barra { height: 8px; border-radius: 4px; background: linear-gradient(var(--snp-sinapsis), var(--snp-sinapsis)) 0 0 / var(--p) 100% no-repeat, rgb(255 255 255 / 0.08); }