/* ══════════════════════════════════════════
   CHART CONTAINER
══════════════════════════════════════════ */

.chart-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 220px;
}

.chart-container canvas {
  display: block;
  width: 100% !important;
  max-width: 100%;
  max-height: 100%;
}


/* ── Selector de rango de fechas de una gráfica (estándar de Digital Core) ──
   Se construye con chartRangoHtml (shared/js/ui/components.js): dos campos «pastilla» (mes o día)
   en la cabecera de la tarjeta, iguales en las tres apps (Evolución temporal del Dashboard de IA,
   Coste por periodo registrado, Entradas y cierres de tickets de Data…). */
.chart-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }

.month-filter {
  -webkit-appearance: none;
  appearance: none;
  height: 32px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--bg2); color: var(--text); padding: 0 13px; font-size: 12px;
  line-height: 1; text-align: left; font-family: inherit;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.month-filter::-webkit-date-and-time-value { text-align: left; }
.month-filter:hover { border-color: var(--border2); background: var(--bg3); }
.month-filter:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.month-filter::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.75;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  padding: 0;
}

.date-filter-shell { position: relative; display: inline-flex; min-width: 0; }
.date-filter-placeholder { display: none; }

/* Donut estándar (oct 2026): más grande por defecto en las tres apps. setChart marca el
   contenedor de todo lienzo doughnut con .dc-donut. */
.dc-donut { min-height: 260px; }
@media (max-width: 640px) { .dc-donut { min-height: 230px; } }

/* Gráfica sin datos (estándar): mensaje centrado en el hueco del lienzo
   (dcGraficaVacia en shared/js/ui/dashboard-graficas.js). */
.dc-chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; font-size: 13px; text-align: center; color: var(--text3); }