/* ===== ESTILOS ESPECÍFICOS PARA PÁGINA DE DESEMPENHO ===== */

/* 
 * Este arquivo contém estilos complementares específicos para a página de desempenho.
 * O layout principal é herdado do style.css e Bootstrap.
 */

/* Ajustes específicos para indicadores de desempenho */
.card-body .bg-primary.bg-opacity-10,
.card-body .bg-success.bg-opacity-10,
.card-body .bg-warning.bg-opacity-10,
.card-body .bg-info.bg-opacity-10 {
  transition: all 0.3s ease;
}

.card:hover .bg-primary.bg-opacity-10 {
  background-color: rgba(198, 37, 78, 0.15) !important;
}

.card:hover .bg-success.bg-opacity-10 {
  background-color: rgba(25, 135, 84, 0.15) !important;
}

.card:hover .bg-warning.bg-opacity-10 {
  background-color: rgba(255, 193, 7, 0.15) !important;
}

.card:hover .bg-info.bg-opacity-10 {
  background-color: rgba(13, 202, 240, 0.15) !important;
}

/* Animação suave para os valores dos indicadores */
#conversionRate,
#roiValue,
#averageTime,
#totalLeads,
#totalClients,
#averageTicket,
#pipelineValue {
  transition: all 0.3s ease;
}

/* Responsividade adicional para gráficos */
@media (max-width: 768px) {
  .ratio.ratio-16x9 {
    --bs-aspect-ratio: 75%;
  }
}

@media (max-width: 576px) {
  .ratio.ratio-16x9 {
    --bs-aspect-ratio: 100%;
  }
}