/* ===========================================
   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, #0072ff, #00c6ff); /* gradiente azul chamativo */
    color: #fff !important; /* garante contraste */
    border: none;
    font-weight: 600;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    cursor: pointer;
    background-size: 300% 100%; /* para efeito animado se quiser */
    animation: gradientAnimation 5s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.btn-gradient:hover {
    background: linear-gradient(90deg, #1c92d2, #0072ff, #00c6ff); /* gradiente azul chamativo */
    transform: translateY(-2px); /* efeito de leve “elevação” */
    box-shadow: 0 0 15px rgba(28,146,210,0.6); /* brilho azul */
}


/* --- 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 */
}