/* modales css */
/* Estilo global para todos los modales de Bootstrap tipo MicroModal */
.modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  overflow: hidden;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform: translateY(-20px);
  opacity: 0;
}

.modal.show .modal-content {
  transform: translateY(0);
  opacity: 1;
}

.modal-header {
  border-bottom: none;
  padding: 1rem 1.5rem;
  background: #f5f5f5;
}

.modal-title {
  font-weight: 600;
  font-size: 1.2rem;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  border-top: none;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.modal-backdrop.show {
  opacity: 0.6 !important;
  background-color: #000;
}

.modal .btn-close {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.modal .btn-close:hover {
  opacity: 1;
  cursor: pointer;
}

/* modales css */

/* USUARIOS STYLE START */
#btnAddUser {
  background-color: #f8bbd0; /* rosa pastel */
  border: 1px solid #f48fb1;
  color: #880e4f;
}

#btnPendingUsers {
  background-color: #c5cae9; /* lila pastel */
  border: 1px solid #9fa8da;
  color: #303f9f;
}



/* Hover: levanta un poquito y sombra */
.btn-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  color: #fff; /* opcional para mejorar visibilidad */
}

.btn-light {
  transition: all 0.2s ease;
  font-weight: 500;
}
/* USUARIOS STYLE END */


/* AFILIADOS STYLE START */
#btnAddAffiliate {
  background-color: #748DAE; /* rosa pastel */
  border: 1px solid #748DAE;
  color: white;
}

#btnExcelReport {
  background-color: #C1CFA1; /* rosa pastel */
  border: 1px solid #C1CFA1;
  color: black;
}

#btnPDFReport {
  background-color: #C96868; /* rosa pastel */
  border: 1px solid #C96868;
  color: white;
}

#btnRefreshtables {
  background-color: #FADA7A; /* rosa pastel */
  border: 1px solid #FADA7A;
  color: black;
}



/* Contenedor nav pills */
#userTabs {
  justify-content: center;
  gap: 10px; /* espacio entre los botones */
}

/* Pills comunes */
#userTabs .nav-link {
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #37353E; /* gris oscuro */
  background-color: #f1f1f1;
  transition: all 0.2s ease;
}

/* Pill activa */
#userTabs .nav-link.active {
  background-color: #37353E; /* tu color oscuro principal */
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Hover */
#userTabs .nav-link:hover {
  background-color: #37353E;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  cursor: pointer;
}


.badge-activo {
  background-color: #9ECAD6;
  color: #000;
  padding: 0.8rem 1.5rem;
  border-radius: 1rem;
  font-weight: 500;
  display: inline-block;
}

.badge-adherente {
  background-color: #FFB38E;
  color: #333;
  padding: 0.8rem 1.5rem;
  border-radius: 1rem;
  font-weight: 500;
  display: inline-block;
}

.badge-participante {
  background-color: #FBF3B9;
  color: #000;
  padding: 0.8rem 1.5rem;
  border-radius: 1rem;
  font-weight: 500;
  display: inline-block;
}
.badge-affiliate-number {
  background-color: #D9D9D9; /* gris suave */
  color: #333;               /* texto oscuro */
  padding: 0.6rem 1.2rem;
  border-radius: 0.8rem;
  font-weight: 500;
  display: inline-block;
}

.btn-soft-success {
    color: whitesmoke;
    background-color: #555879;
    border-color: #555879;
}


/* AFILIADOS STYLE END */



/* CHARTS STYLE START */
/* Card estilizada */
.chart-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.chart-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* Títulos centrados y con spacing */
.chart-card .card-title {
  font-weight: 600;
  color: #333;
}

/* Responsivo */
@media (max-width: 992px) {
  .col-lg-4 { margin-bottom: 20px; }
}

@media (max-width: 576px) {
  .chart-card { height: auto; }
}
/* CHARTS STYLE END */