.botao-com-icone {
  /* Habilita o Flexbox no link */
  display: flex;
  
  /* Centraliza o conteúdo verticalmente */
  align-items: center;
  
  /* Remove a borda padrão do link e adiciona a sua */
  border: white 2px solid;
  
  
  /* Cria um espaço entre o ícone e o texto */
  gap: 8px;
  
  /* Cores e fonte */
  background-color: transparent;
  color: white;
  font-size: small;
  
  /* Sombra: Adiciona uma sombra suave para o efeito 3D */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);

  /* Remove a linha de baixo do link e melhora a aparência */
  text-decoration: none;
  padding: 10px 15px; /* Adiciona um padding para deixar mais parecido com um botão */
  justify-content: center; /* Centraliza o conteúdo horizontalmente */
  cursor: pointer; /* Muda o cursor para indicar que é clicável */
  border-radius: 5px; /* Opcional: para cantos arredondados */
}

.botao-com-icone:hover {
  color:gainsboro;
  border:  gainsboro 2px solid;
}

.text-com-icone {
  /* Habilita o Flexbox no link */
  display: flex;
  
  
  /* Cria um espaço entre o ícone e o texto */
  gap: 8px;
  

  /* Remove a linha de baixo do link e melhora a aparência */
  text-decoration: none;
  padding: 10px 15px; /* Adiciona um padding para deixar mais parecido com um botão */
}

.card-default{
  margin-bottom: 20;
  border: 1px solid #00000020;
}

.btn-icon{
  /* Habilita o Flexbox no link */
  display: flex;
  
  /* Centraliza o conteúdo verticalmente */
  align-items: center;
  
  /* Cria um espaço entre o ícone e o texto */
  gap: 8px;
  
  /* Cores e fonte */
  font-size: small;


}

/*
 * 1. Layout da Lista (Grid)
 * Cria um container com espaçamento e, opcionalmente, organiza em colunas se houver muitas empresas.
 */
.modern-company-grid {
    display: grid;
    /* Ajusta automaticamente 1 ou 2 colunas dependendo do espaço (opcional) */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 15px; /* Espaço entre os cartões */
    padding: 10px; /* Espaçamento interno */
}

/*
 * 2. Estilo do Cartão (Company Card)
 * O coração do novo design.
 */
.company-card {
    /* Define o item como um cartão interativo */
    display: flex;
    flex-direction: column; /* Ícone em cima, nome embaixo */
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Aparência Clean */
    padding: 20px;
    border-radius: 8px;
    background-color: #ffffff; /* Fundo branco puro */
    border: 1px solid #e0e0e0; /* Borda sutil */
    
    /* Interatividade e Modernidade */
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra suave */
    transition: all 0.25s ease;
}

/*
 * 3. Efeito de Interação (Hover)
 */
.company-card:hover {
    /* Cor de fundo leve ao passar o mouse */
    background-color: #f5f5f5; 
    /* Efeito de "elevação" sutil */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    border-color: #f8b415; /* Borda com a cor de destaque */
}

/*
 * 4. Estilo do Cartão Ativo (Empresa Selecionada)
 */
.active-card {
    background-color: #fff6e6; /* Fundo claro da cor de destaque */
    border-color: #f8b415; 
    box-shadow: 0 0 0 3px rgba(248, 180, 21, 0.3); /* Anel de foco para destaque */
    font-weight: bold;
}

/*
 * 5. Estilização dos Elementos Internos
 */
.company-icon {
    /* Cor do ícone (mantemos a cor de destaque) */
    color: #f8b415; 
    font-size: 32px; /* Ícone maior */
    margin-bottom: 8px; /* Espaço entre o ícone e o nome */
}

.company-name {
    font-size: 14px;
    color: #333; /* Texto escuro e limpo */
}