/* CIOS - Sistema de Inteligencia Comercial
   Copyright (c) 2026 Angel. Todos los derechos reservados.
   Software propietario licenciado a PATFOOD para uso interno. Ver AVISO_LEGAL.md

   D5 - VENTAS (modelo). Prefijo d5- y SOLO tokens de styles.css. Las tablas
   reusan .tabla-ana / .col-txt / .ana-grupo / .ana-grupo-ini / .fc-total-gral,
   que es donde vive la regla de presentacion de la casa: aca no se redefine
   ninguna.

   FD4: la gramatica que los tres modelos COMPARTEN (cabecera, chips, cards,
   paneles, barra de filtros, estados, vacios) vive en styles.css, seccion
   "DASHBOARDS MODELO". Aca queda solo lo que es de D5: las barras de cobertura
   por familia. El selector de producto de esta pantalla se cuelga de la barra
   comun y usa sus mismas piezas (.dash-select-label + .pill-select). */

/* "del mes base completo" es la REFERENCIA del avance, no el avance: se lee
   en tinta suave para que el % siga siendo lo que se ve primero. */
.d5-card-sub-etq { color: var(--tinta-suave); }

/* ---------- encabezado de bloque: titulo a la izquierda, perilla a la derecha
   La perilla del bloque (agrupar / desagrupar la tabla por proveedor) va en la
   MISMA linea del titulo: se ve antes de leer la tabla, no despues. El titulo
   conserva su rampa (18/600) y cede el margen inferior al encabezado. */
.d5-bloque-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.vista .d5-bloque-cab .d5-bloque-tit { margin-bottom: 0; }

/* ---------- conmutador de NIVEL (familia / rubro del ERP) ----------
   Dos botones chicos dentro del rotulo del filtro, con las piezas de la casa
   (btn-primario / btn-secundario + btn-mini): el nivel activo es el que esta
   en tinta. No es un select porque son dos alturas del mismo eje y se
   conmutan, no se eligen de una lista. */
.d5-nivel { display: inline-flex; gap: 4px; }

/* ---------- checkbox de bloque (agrupar / desagrupar) ---------- */
.d5-check {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12px; color: var(--tinta-suave); font-weight: 500; cursor: pointer;
}
.d5-check input { width: auto; margin: 0; }

/* ---------- cobertura por familia: barras horizontales sobrias ----------
   Se listan las familias, nunca su promedio. Una fila = familia | barra |
   % | detalle; la barra es tinta del dato sobre la capa fria, sin gradientes
   ni color por ranking. */
.d5-barras { display: flex; flex-direction: column; gap: 8px; }

.d5-barra-fila {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(140px, 220px) 1fr 62px minmax(120px, auto);
}

.d5-barra-etq {
  font-size: 13px; color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* la pista es la capa fria, NO --barra-fondo: ese token es la superficie de
   la barra superior y en el tema tablero vale blanco (pista invisible). */
.d5-barra {
  display: block; height: 10px; background: var(--fondo-suave);
  border: 1px solid var(--borde); border-radius: 2px; overflow: hidden;
}
.d5-barra > span { display: block; height: 100%; background: var(--grafico-dato); }

.d5-barra-val {
  font-size: 13px; color: var(--tinta); text-align: right;
  font-variant-numeric: tabular-nums;
}
.d5-barra-det { font-size: 12px; color: var(--tinta-suave); }

@media (max-width: 720px) {
  .d5-barra-fila { grid-template-columns: 1fr 60px; row-gap: 4px; }
  .d5-barra, .d5-barra-det { grid-column: 1 / -1; }
}