@media (max-width: 768px) {
  .container-cardconsulta {
    padding-right: 80px; /* Espaço para os botões */
    position: relative;
  }
}

.actions-container {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  margin-left: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;

  /* 🎨 Glassmorphism */
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(80px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Mostra no hover do card */
.container-cardconsulta:hover .actions-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(-2px);
}

/* 3. Estilos base para o botão de edição (amarelo) */
.btn-edit-custom-style {
    background-color: #ffc107; /* Amarelo da sua imagem */
    color: #343a40;           /* Cor do ícone (cinza escuro para contraste) */
    border: none;
    padding: 8px 12px;       /* Ajuste o padding para o tamanho do botão */
    border-radius: 0.25rem;  /* Leve arredondamento de borda */
    transition: background-color 0.2s ease-in-out; /* Suaviza a transição de cor */
}


/* 5. Estilos base para o botão de exclusão (vermelho) */
.btn-delete-custom-style {
    background-color: #dc3545; /* Vermelho da sua imagem */
    color: #ffffff;           /* Cor do ícone (branco para contraste) */
    border: none;
    padding: 8px 12px;       /* Ajuste o padding para o tamanho do botão */
    border-radius: 0.25rem;  /* Leve arredondamento de borda */
    transition: background-color 0.2s ease-in-out; /* Suaviza a transição de cor */

    font-weight:bold ;
    
}

/* 6. Estilo de hover para o botão de exclusão */
.btn-delete-custom-style:hover {
    background-color: #c82333; /* Um vermelho um pouco mais escuro para o hover */
  
}

/* 7. Estilos para os ícones dentro dos botões (já está no JSX com fs-4) */
/* .fs-4 do Bootstrap já cuida do tamanho do ícone. Se precisar de mais controle, adicione aqui. */


.btn-confirm-style{
   background-color: #5ce687;

}

.card-verde{
  background-color: #b7ffbd;
  border: #91d392;
}

/* Aplique isso às classes que contêm os nomes do Médico e do Paciente */

.cardconsulta-infosecundaria p,
.cardconsulta-infoprimaria p {
    /* 1. Força o texto a não quebrar para a próxima linha */
    white-space: nowrap; 
    
    /* 2. Oculta qualquer texto que ultrapasse a largura do contêiner */
    overflow: hidden; 
    
    /* 3. Adiciona reticências (...) ao final do texto truncado */
    text-overflow: ellipsis; 
}

.tabelamensal .container-cardconsulta{
  width: 24rem;

}

@media (max-width: 768px) {
  .actions-container {
    opacity: 1;
    visibility: visible;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    margin-left: 0;
    padding: 0;
    justify-content: flex-end;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .container-cardconsulta:hover .actions-container {
    transform: none;
  }

  .tabelamensal .container-cardconsulta {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .container-cardconsulta {
    padding-right: 10px; /* Remove o padding extra para telas muito pequenas */
  }

  .actions-container {
    position: static;
    margin-top: 10px;
    justify-content: flex-start;
  }
  
  .btn-edit-custom-style,
  .btn-delete-custom-style,
  .btn-confirm-style {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}