.button-base {
  display: inline-flex;       /* Faz o botão se comportar como texto, mas permite alinhar os itens dentro dele */
  align-items: center;        /* Alinha perfeitamente o ícone e o texto no meio verticalmente */
  justify-content: center;
  gap: 6px;                   /* Dá o espaço exato entre o ícone e o texto (substitui o margin) */
  
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 12px;          /* Um respiro um pouquinho maior para não ficar apertado */
  margin: 0;
  border-radius: 0px;
  cursor: pointer;
  transition: all 0.2s ease;  /* Animação suave ao passar o mouse */
  
  /* Cores padrão (Cinza outline) */
  background-color: transparent;
  color: var(--cinza-5);
  border: 1px solid var(--cinza-5);
  
  user-select: none;

}

.button-base.btn-sm {
    padding: 6px 10px;
    font-size: 0.85rem;
}

/* O Ícone dentro do botão base */
.button-base .material-symbols-outlined {
  font-size: 1.1rem !important;
  /* Removemos o position relative e top! O Flexbox (align-items) já resolveu isso perfeitamente. */
}

/* Efeito Hover do botão base */
.button-base:hover {
  background-color: var(--cinza-1); /* Um fundo cinza bem clarinho ao passar o mouse */
  color: var(--cinza-7);
}


.btn-verde-uea {
  background-color: var(--verde-medio);
  color: var(--branco);
  border: 1px solid var(--verde-medio);
}

.btn-verde-uea:hover {
  background-color: var(--verde-medio-hover);
  color: var(--branco);
}

.btn-alerta-uea {
  background-color: transparent;
  color: var(--vermelho-escuro);
  border: 1px solid var(--vermelho-escuro);
}

.btn-alerta-uea:hover {
  background-color: var(--vermelho-claro-fundo-botao);
  color: var(--vermelho-escuro);
}

.btn-vermelho{
  background-color: var(--vermelho-escuro);
  color: var(--branco);
  border: 1px solid var(--vermelho-escuro);
}

.btn-vermelho:hover {
  background-color: var(--vermelho-claro);
  color: var(--branco);
}

.btn-vermelho-claro{
  background-color: var(--vermelho-claro);
  color: var(--branco);
  border: 1px solid var(--vermelho-claro);
}

.btn-vermelho-claro:hover {
  background-color: var(--vermelho-escuro);
  color: var(--branco);
}

/* Botão de Reprovação (Vermelho) */
.btn-reprovado {
  background-color: var(--vermelho-escuro) !important;
  color: var(--branco) !important;
  border: 1px solid var(--vermelho-escuro) !important;
}
.btn-reprovado:hover {
  background-color: var(--vermelho-claro) !important;
}

/* Botão Secundário (Cinza) */
.btn-secondary {
  background-color: var(--cinza-3) !important;
  color: var(--branco) !important;
  border: 1px solid var(--cinza-3) !important;
}
.btn-secondary:hover {
  background-color: var(--cinza-5) !important;
}

/* Botão de Aviso/Revogação (Amarelo) */
.btn-aviso-uea {
  background-color: var(--amarelo-aviso);
  color: var(--amarelo-aviso-texto); 
  border: 1px solid var(--amarelo-aviso);
}

.btn-aviso-uea:hover {
  background-color: var(--amarelo-aviso-hover);
  color: var(--amarelo-aviso-texto);
  border: 1px solid var(--amarelo-aviso-hover);
}


/* botao azul */
.btn-azul-uea {
  background-color: var(--azul-uea);
  color: var(--branco); 
  border: 1px solid var(--azul-uea);
}
.btn-azul-uea:hover {
  background-color: var(--azul-uea-hover);
  color: var(--branco);
}

.btn-excluir-anexo {
    border: none;

    width: 36px;
    height: 36px;

    background-color: var(--vermelho-claro-fundo-botao);

    color: var(--vermelho-claro);

    transition: .2s ease;
}

.btn-excluir-anexo:hover {
    background-color: var(--vermelho-claro);

    color: var(--branco);
}