/* Contenedor principal para no afectar todo el sistema */
#dashboard-container {
  padding: 1rem;
}

/* Cards generales */
#dashboard-container .card {
  max-width: 14rem !important; /* tamaño más compacto */
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.15rem 0.5rem rgba(0,0,0,0.1);
  font-size: 0.9rem;
  transition: transform 0.15s ease-in-out;
}
#dashboard-container .card:hover {
  transform: translateY(-4px);
}

/* Título dentro de la card */
#dashboard-container .card-header label {
  font-weight: 600;
  font-size: 1rem;
}

/* Texto de valores */
#dashboard-container .card-body h4.card-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
}

/* Separar filas */
#dashboard-container .row + .row {
  margin-top: 2rem;
}

/* Categorías con colores homologados */

/* Ventas - azul */
#dashboard-container .sales-card {
  background-color: #28a745 !important; /* Bootstrap azul */
  color: white !important;
}

/* Finanzas - verde */
#dashboard-container .finance-card {
  background-color: #28a745 !important; /* Bootstrap verde */
  color: white !important;
}

/* Stock/Gastos - naranja */
#dashboard-container .stock-card {
  background-color: #fd7e14 !important; /* Bootstrap naranja */
  color: white !important;
}

/* Oscuro - para cuentas, ganancias, etc */
#dashboard-container .dark-card {
  background-color: #343a40 !important; /* Bootstrap dark */
  color: white !important;
}

/* Centramos texto en cards */
#dashboard-container .card.text-center {
  text-align: center;
}

/* Responsive: columnas para ajustar cards */
@media (max-width: 576px) {
  #dashboard-container .col-sm-4 {
    max-width: 100%;
    flex: 0 0 100%;
  }
}
@media (min-width: 577px) and (max-width: 991px) {
  #dashboard-container .col-sm-4 {
    max-width: 50%;
    flex: 0 0 50%;
  }
}
@media (min-width: 992px) {
  #dashboard-container .col-sm-4 {
    max-width: 33.3333%;
    flex: 0 0 33.3333%;
  }
}