/* ================================================================
   GRÁFICOS — Dashboard de métricas FixHub
   Reskin con la paleta y radios de la Vitrina (vitrina.css).
   Mismos selectores/IDs que el original: graficos.js no se toca.
   ================================================================ */
 
#graficos-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: transparent;
  color: var(--vtx);
}
 
/* ── BARRA DE FILTROS ── */
#filtros-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 18px;
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  margin: 14px 24px 0;
  flex-shrink: 0;
}
 
#filtros-bar select,
#filtros-bar input[type="date"] {
  background: var(--vs2);
  border: 1px solid var(--vbor);
  color: var(--vtx2);
  border-radius: var(--r);
  padding: 5px 10px;
  font-size: var(--fs-input);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-apple);
  height: 34px;
}
#filtros-bar select:focus,
#filtros-bar input[type="date"]:focus {
  outline: none;
  border-color: var(--va);
  color: var(--vtx);
  box-shadow: var(--shadow-focus-soft);
}
#filtros-bar select option { background: var(--vs2); }
 
.filtro-label { font-size: 12px; color: var(--vtx3); white-space: nowrap; }
.filtro-sep { width: 1px; height: 20px; background: var(--vbor2); margin: 0 4px; }
 
.filtros-info { margin-left: auto; font-size: 12px; color: var(--vtx3); white-space: nowrap; }
 
/* ── SCROLL PRINCIPAL ── */
#graficos-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Scrollbar: usa el estándar global .scroll-morado (ver index.html),
   no uno propio — antes era más angosto y sin el look del resto de la app. */
 
/* ── KPIs ── */
/* Seis columnas fijas dejaban cada tarjeta en ~150px cuando la ventana
   no daba para más, y ahí el monto ($4.246.690) ya no cabía: se cortaba
   con puntos suspensivos y las etiquetas largas rompían el alto. Ahora
   las tarjetas se acomodan solas y bajan a la fila siguiente antes que
   apretarse. */
#kpis-row {
  display: grid;
  /* 190px es lo que necesita un monto de siete cifras ($2.292.550) para
     entrar entero: con los 158px de antes —pensados para cuando las
     tarjetas eran seis y los números más cortos— "Utilidad sin IVA"
     salía recortada con puntos suspensivos. */
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 10px;
  flex-shrink: 0;
}
 
.kpi-card {
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s var(--ease-apple), transform 0.15s var(--ease-apple);
  animation: surgir 0.3s var(--ease-apple) both;
  animation-delay: min(calc(var(--i, 0) * 40ms), 300ms);
}
.kpi-card:hover { border-color: var(--vbor2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.3); }
 
.kpi-icono { font-size: 20px; line-height: 1; }
.kpi-valor {
  /* Se achica sola si el número es largo, en vez de recortarse. */
  font-size: clamp(15px, 1.5vw + 6px, 20px);
  font-weight: 800; color: var(--vtx); overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.kpi-label {
  font-size: 11px; color: var(--vtx3); text-transform: uppercase;
  letter-spacing: 0.06em;
  /* "INVENTARIO" es una palabra sola: sin esto, la tarjeta no baja de lo
     que mide esa palabra y en un teléfono las dos columnas se salían de
     la pantalla (scroll horizontal). */
  overflow-wrap: anywhere;
  /* "Inversión inventario" ocupa dos líneas: se le reserva el alto para
     que las tarjetas de una y de dos líneas queden parejas. */
  min-height: 2.4em; line-height: 1.2;
}

/* La tarjeta se pincha para ver el detalle. */
.kpi-card { cursor: pointer; }
.kpi-card:focus-visible { outline: 2px solid var(--va); outline-offset: 2px; }
.kpi-card-lupa {
  position: absolute; top: 10px; right: 12px;
  font-size: 11px; color: var(--vtx3); opacity: 0;
  transition: opacity 0.15s var(--ease-apple);
}
.kpi-card { position: relative; }
.kpi-card:hover .kpi-card-lupa { opacity: 1; }
 
.kpi-card.accent-verde    .kpi-valor { color: var(--vgrn); }
.kpi-card.accent-morado   .kpi-valor { color: var(--va); }
.kpi-card.accent-azul     .kpi-valor { color: #64b5f6; }
.kpi-card.accent-amarillo .kpi-valor { color: #ffd54f; }
.kpi-card.accent-rojo     .kpi-valor { color: var(--vred); }
 
/* ── TOGGLE VISTA TEMPORAL ── */
.toggle-vista-group { display: flex; gap: 4px; background: var(--vs3); border: 1px solid var(--vbor); border-radius: var(--r); padding: 3px; }
.toggle-vista { background: transparent; border: none; color: var(--vtx3); border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; transition: all 0.18s var(--ease-apple); white-space: nowrap; }
.toggle-vista:hover { color: var(--vtx); background: var(--vag); }
.toggle-vista.activo { background: var(--vag2); color: var(--va); font-weight: 700; }
 
/* ── BADGE (mejor día / mejor hora) ── */
.ct-badge {
  margin-left: 8px; font-size: 11px; font-weight: 700; color: #ffd54f;
  background: rgba(255,213,79,0.12); border: 1px solid rgba(255,213,79,0.25);
  border-radius: 10px; padding: 1px 8px; white-space: nowrap;
}
 
/* ── GRID DE GRÁFICOS ── */
.graficos-fila { display: grid; gap: 12px; min-width: 0; }
.graficos-fila > * { min-width: 0; }
.graficos-fila.col-2 { grid-template-columns: 1fr 1fr; }
.graficos-fila.col-3 { grid-template-columns: 2fr 1fr 1fr; }
.graficos-fila.col-1 { grid-template-columns: 1fr; }
 
.chart-card {
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.2s var(--ease-apple), transform 0.15s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
  animation: surgir 0.35s var(--ease-apple) both;
  animation-delay: min(calc(var(--i, 0) * 60ms), 300ms);
}
.chart-card:hover { border-color: var(--vbor2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.3); }
 
.chart-titulo {
  font-size: 14px; font-weight: 700; color: var(--vtx2);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  border-bottom: 1px solid var(--vbor); padding-bottom: 10px; flex-wrap: wrap;
}
.chart-titulo .ct-icon { font-size: 16px; }
 
.chart-wrap { position: relative; flex: 1; min-height: 220px; }
.chart-wrap canvas { width: 100% !important; }
 
/* ── Altura fija para el gráfico temporal con scroll horizontal ──
   Evita que al cambiar a vista "Día" (con mucho ancho dinámico)
   el contenedor también crezca de alto sin límite. ── */
.chart-wrap.chart-wrap-scroll {
  flex: none;
  width: 100%;
  min-width: 0;
  height: 320px;
  min-height: 320px;
  max-height: 320px;
}

/* Radar de "Día de la Semana": igual que arriba, "flex:1" del .chart-wrap
   base ignora cualquier height puesto inline y lo estira para llenar el
   alto disponible de la tarjeta — por eso se veía enorme. */
.chart-wrap.chart-wrap-radar {
  flex: none;
  height: 220px;
  min-height: 220px;
  max-height: 220px;
}
 
 
/* ── LOADING ── */
#graficos-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; flex: 1; color: var(--vtx3); font-size: 14px; }
/* Las mismas rayitas que en el resto de la aplicación, en grande. La
   animación es la de utilidades.css: acá solo se elige el tamaño. */
.g-spinner { font-size: 40px; line-height: 1; color: var(--va); animation: fh-cargando-spin 1s linear infinite; }
 
.chart-vacio { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--vtx3); font-size: 13px; font-style: italic; min-height: 120px; }
 
@media (max-width: 1100px) {
  #kpis-row { grid-template-columns: repeat(3, 1fr); }
  .graficos-fila.col-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 750px) {
  /* minmax(0,...) y no 1fr a secas: un hijo de grid no baja de lo que
     mide su contenido si no se le dice, y una cifra larga o una palabra
     como "INVENTARIO" empujaban la segunda columna fuera de la pantalla. */
  #kpis-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graficos-fila.col-2, .graficos-fila.col-3 { grid-template-columns: 1fr; }
  .toggle-vista-group { margin-left: 0 !important; width: 100%; }
  /* Entre el margen de afuera y el relleno de adentro se iban 72px a los
     lados —una cuarta parte de la pantalla de un teléfono— y las
     tarjetas quedaban tan angostas que partían las palabras
     ("UNIDADE / S VENDIDA / S"). Bajados a 20 en total, las cifras y sus
     etiquetas entran enteras. */
  #filtros-bar, #graficos-scroll { margin-left: 8px; margin-right: 8px; }
  #graficos-scroll { padding: 12px 2px 20px; }
  #filtros-bar { padding: 10px 12px; }
  .kpi-card { padding: 12px; }
  #kpis-row { gap: 8px; }
}
/* ════════════════════════════════════════════════════════════
   SIDEBAR COMO DRAWER DE FILTROS (reutiliza .vit-sidebar)
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   SIDEBAR A LA PAR (igual que en el catálogo)
   ════════════════════════════════════════════════════════════ */
/* La regla compartida (padding-left para el sidebar fijo) vive en
   utilidades.css (.vitp-page.vitp-con-sidebar) — ver comentario ahí. */

.vitg-filtro-campo { margin-bottom: 10px; }
.vitg-filtro-campo label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vtx3);
  margin-bottom: 4px;
}
.vitg-input {
  width: 100%;
  background: var(--vs2);
  border: 1px solid var(--vbor);
  color: var(--vtx2);
  border-radius: var(--r);
  padding: 7px 10px;
  font-size: var(--fs-input);
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
}
.vitg-input:focus { border-color: var(--vbor2); box-shadow: var(--shadow-focus-soft); }
.vitg-input option { background: var(--vs2); }
 
.vitg-filtros-acciones {
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--vbor);
}
.vitg-filtros-acciones .filtros-info {
  text-align: center;
  font-size: 12px;
  color: var(--vtx3);
}
 
/* ── Scroll horizontal para el gráfico temporal (Mes/Semana/Día) ── */
.chart-wrap-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  /* Solo se contiene el eje en el que este contenedor sí scrollea. La
     regla compartida de scrollbars (utilidades.css) pone "contain" en
     los dos ejes, y con eso la rueda vertical sobre el gráfico moría acá
     —el contenedor no tiene nada que mover en vertical— en vez de pasar
     a #graficos-scroll: pararse sobre un gráfico dejaba la página
     pegada. En "Mes", donde las barras caben y tampoco hay scroll
     horizontal, no se movía nada en absoluto. */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}
.chart-wrap-scroll .chart-scroll-inner {
  height: 100%;
  min-width: 100%;
}
/* Scrollbar de .chart-wrap-scroll: ver la regla canónica en utilidades.css */
.chart-wrap-scroll::-webkit-scrollbar-track { background: transparent; }
.chart-wrap-scroll::-webkit-scrollbar-thumb { background: var(--vbor2); border-radius: 4px; transition: background 0.15s var(--ease-apple); }
.chart-wrap-scroll::-webkit-scrollbar-thumb:hover { background: var(--va); }
/* ── Botones de mes (Top Productos Vendidos): reemplazan las etiquetas
   del eje X del gráfico por botones reales, más grandes y fáciles de
   tocar que hacer clic dentro del propio gráfico ── */
.chart-meses-botones {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  padding-top: 2px;
}
.chart-mes-btn {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--vtx3);
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 6px; overflow-wrap: anywhere;
  transition: background 0.15s var(--ease-apple), color 0.15s var(--ease-apple), border-color 0.15s var(--ease-apple);
}
.chart-mes-btn:hover {
  background: var(--vag);
  color: var(--vtx2);
}
.chart-mes-btn.activo {
  background: var(--vag2);
  border-color: var(--vbor2);
  color: var(--va);
  font-weight: 700;
}

/* ── Desglose por marca/modelo al hacer clic en una barra de "Top
   Categorías Vendidas" (ver _mostrarDetalleCategoria en graficos.js) ── */
.chart-cat-detalle {
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--vbor2);
  border-radius: 8px;
  background: var(--vag);
  font-size: 12px;
  animation: surgir 0.15s var(--ease-apple) both;
}
.chart-cat-detalle-filas {
  max-height: 220px;
  overflow-y: auto;
}
.chart-cat-detalle-mas {
  padding-top: 6px;
  color: var(--vtx3);
  font-style: italic;
}
.chart-cat-detalle-titulo {
  font-weight: 700;
  color: var(--vtx);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chart-cat-detalle-cerrar {
  background: transparent;
  border: none;
  color: var(--vtx3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
}
.chart-cat-detalle-cerrar:hover { color: var(--vtx); }
.chart-cat-detalle-fila {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  color: var(--vtx2);
  border-top: 1px solid var(--vbor);
}
.chart-cat-detalle-fila:first-of-type { border-top: none; }
.chart-cat-detalle-fila strong { color: var(--vtx); font-weight: 600; }
/* ── Detalle de una tarjeta de indicador ──────────────────────────────
   Se abre debajo de la fila de tarjetas, no en un modal: así se sigue
   viendo de qué número salió, y el resto de los gráficos queda a un
   scroll de distancia en vez de tapado. */
.kpi-detalle {
  background: var(--vs);
  border: 1px solid var(--vbor2);
  border-radius: var(--rl);
  padding: 16px 18px;
  animation: surgir 0.25s var(--ease-apple) both;
}
.kpi-detalle.oculto { display: none; }
.kpi-detalle-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.kpi-detalle-titulo { font-size: 15px; font-weight: 700; color: var(--vtx); }
.kpi-detalle-sub { font-size: 12px; color: var(--vtx3); }
.kpi-detalle-cerrar {
  margin-left: auto; background: transparent; border: 1px solid var(--vbor2);
  color: var(--vtx2); border-radius: 8px; padding: 4px 10px;
  font-size: 12px; cursor: pointer;
}
.kpi-detalle-cerrar:hover { border-color: var(--va); color: var(--va); }

/* Las secciones se acomodan solas: dos o tres columnas si hay ancho,
   una sola si no. */
.kpi-detalle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}
.kpi-bloque-titulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--va); margin-bottom: 8px;
}

/* Fila = nombre + barra proporcional + valor. La barra hace comparable
   de un vistazo lo que una tabla de números obliga a leer entero. */
.kpi-fila {
  display: grid; grid-template-columns: 1fr auto;
  gap: 2px 10px; padding: 5px 0;
  border-bottom: 1px solid var(--vbor);
}
.kpi-fila:last-child { border-bottom: none; }
.kpi-fila-nombre {
  font-size: 13px; color: var(--vtx2); overflow-wrap: anywhere;
}
.kpi-fila-valor {
  font-size: 13px; font-weight: 600; color: var(--vtx);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kpi-fila-barra {
  grid-column: 1 / -1; height: 3px; border-radius: 2px;
  background: var(--vbor2); overflow: hidden;
}
.kpi-fila-barra > span { display: block; height: 100%; background: var(--va); border-radius: 2px; }
.kpi-fila-extra { grid-column: 1 / -1; font-size: 11px; color: var(--vtx3); }

.kpi-detalle-lista { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.kpi-detalle-vacio { font-size: 13px; color: var(--vtx3); padding: 10px 0; }

/* Fila que lleva al catálogo. Solo las que navegan se ven pinchables:
   una fila de "por mes" o "por hora" no tiene a dónde llevar. */
.kpi-fila-ir { cursor: pointer; border-radius: 6px; padding-left: 6px; padding-right: 6px; margin: 0 -6px; }
.kpi-fila-ir:hover { background: rgba(206, 147, 216, 0.10); }
.kpi-fila-ir:hover .kpi-fila-nombre { color: var(--va); }
.kpi-fila-ir:focus-visible { outline: 2px solid var(--va); outline-offset: -2px; }
.kpi-fila-ir .kpi-fila-nombre::after { content: ' ›'; color: var(--vtx3); }
.kpi-fila-ir:hover .kpi-fila-nombre::after { color: var(--va); }