/* ===========================================
   CORREÇÃO FINAL — CUSTOMIZAÇÃO DOS CARDS
   =========================================== */

/* --- CARD BASE --- */
.card-custom-bg {
  background: linear-gradient(87deg, #111827 0%, #1f2937 100%) !important; /* fundo dark elegante */
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 0.75rem;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
  transition: all 0.4s ease-in-out;
  color: #f1f5f9 !important;
  position: relative;
  overflow: hidden;
}

/* --- HOVER --- */
.card-hover-green:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
  background: linear-gradient(135deg, #0f172a, #1e293b, #3b82f6) !important;
}

/* --- REDEFINE APENAS O TEXTO PADRÃO --- */
.card-custom-bg h1,
.card-custom-bg h2,
.card-custom-bg h3,
.card-custom-bg h4,
.card-custom-bg h5,
.card-custom-bg h6,
.card-custom-bg p,
.card-custom-bg span,
.card-custom-bg small {
  color: #f1f5f9 !important; /* branco suave */
}


.card-custom-bg .form-control {
    color: #000 !important; /* texto preto */
    background-color: rgba(255,255,255,0.1); /* fundo semi-transparente */
    border: 1px solid rgba(255,255,255,0.3);
}


/* --- MAS RESPEITA TEXTOS COLORIDOS INLINE --- */
.card-custom-bg [style*="color:"] {
  color: unset !important; /* remove o branco forçado — usa o inline */
}

/* --- RESPEITA ÍCONES COLORIDOS --- */
.card-custom-bg i {
  color: inherit !important;
}

/* --- BOTÃO GRADIENTE --- */
.btn-gradient {
  background: linear-gradient(90deg, #1c92d2, #6a11cb);
  color: white !important;
  border: none;
  font-weight: 600;
  border-radius: 0.375rem;
  transition: 0.3s ease;
}

.btn-gradient:hover {
  background: linear-gradient(90deg, #6a11cb, #1c92d2);
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(106, 17, 203, 0.6);
}

/* --- INPUT GRADIENT DARK --- */
.input-group .form-control {
  background-color: rgba(31, 41, 55, 0.6);
  border: 1px solid rgba(55, 65, 81, 0.6);
  color: white !important;
}

.input-group .form-control:focus {
  background-color: rgba(31, 41, 55, 0.8);
  border-color: #3b82f6;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
}


.avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff !important;
    font-size: 1rem;
    width: 70px;
    height: 70px;
    margin: 20px; /* Adicione uma margem entre os avatares */
   
    border-radius: 50%;
    border: 4px solid transparent; /* Espessura e estilo da borda */
}