/* =========================================================
   ESTRUTURA BASE (Comum para .botao-novo e .botao-glass)
   ========================================================= */
   

.botao-novo:hover {
    background: var(--cinza);
    color: var(--preto);
    transition: all 0.2s;
}

.botao-novo:active {
    transform: translateY(1px);
}

/* =========================================================
   PALETA DE CORES (MODIFICADORES)
   ========================================================= */

/* AZUL (Normal) */
.botao-novo.azul {
    background: var(--azul);
    border-color: var(--azul-claro);
    color: var(--branco);
    box-shadow: var(--shadow);
}
.botao-novo.azul:hover {
    background: var(--azul-escuro);
    border-color: var(--azul-claro);
    color: var(--branco);
}

/* ROXO (Superuser) */
.botao-novo.roxo {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    color: #c084fc;
    box-shadow: inset 0 1px 2px rgba(192, 132, 252, 0.4), 0 8px 20px rgba(168, 85, 247, 0.15);
}
.botao-novo.roxo:hover {
    background: rgba(168, 85, 247, 0.3);
    border-color: rgba(168, 85, 247, 0.7);
    color: #fff;
}

/* VERDE */
.botao-novo.verde {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
    box-shadow: inset 0 1px 2px rgba(52, 211, 153, 0.4), 0 8px 20px rgba(16, 185, 129, 0.15);
}
.botao-novo.verde:hover {
    background: rgba(16, 185, 129, 0.3);
    border-color: rgba(16, 185, 129, 0.7);
    color: #fff;
}

/* LARANJA */
.botao-novo.laranja {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.4);
    color: #fb923c;
    box-shadow: inset 0 1px 2px rgba(251, 146, 60, 0.4), 0 8px 20px rgba(249, 115, 22, 0.15);
}
.botao-novo.laranja:hover {
    background: rgba(249, 115, 22, 0.3);
    border-color: rgba(249, 115, 22, 0.7);
    color: #fff;
}

/* VERMELHO */
.botao-novo.vermelho {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
    box-shadow: inset 0 1px 2px rgba(248, 113, 113, 0.4), 0 8px 20px rgba(239, 68, 68, 0.15);
}
.botao-novo.vermelho:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.7);
    color: #fff;
}

/* CINZA */
.botao-novo.cinza {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.3);
    color: #94a3b8;
}
.botao-novo.cinza:hover {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.5);
    color: #f1f5f9;
}

/* BRANCO */
.botao-novo.branco {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}
.botao-novo.branco:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}

/* PRETO */
.botao-novo.preto {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}
.botao-novo.preto:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}



.botao-novo {
  background: var(--branco);
  color: var(--azul);
  transform: translateY(-2px);
  border: 1px solid var(--cinza-claro);
  padding: 8px 8px 8px 8px;
  border-radius: var(--radius);
  
  font-size: var(--texto-pequeno);
  font-family: 'Michroma', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  
  margin: 0;
}
.botao-novo:hover {
  background: var(--cinza-claro);
  color: var(--azul);
  transform: translateY(-2px);
}

.botao-novo.active {
  background: var(--azul);
  color: var(--branco);
  transform: translateY(-2px);
}
.botao-novo.active:hover {
  background: var(--azul-escuro);
  color: var(--branco);
  transform: translateY(-2px);
}

.botao-novo.amarelo {
  background: var(--amarelo);
  color: var(--branco);
  transform: translateY(-2px);
  border: 1px solid var(--amarelo);
}

.botao-novo.amarelo:hover {
  background: var(--amarelo);
  color: var(--branco);
  transform: translateY(-2px);
}

.botao {
    padding: 10px 20px;
    border: 2px solid var(--azul);
    color: var(--azul);
    border-radius: var(--radius);
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--texto-medio);
    transition: all 0.3s ease;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
  }
  
  .botao i {
    font-size: var(--icones) !important;
  }
  
  .botao:hover {
    background: var(--azul);
    color: var(--branco);
    transform: translateY(-2px);
  }
  
  .botao.cinza {
    background: var(--cinza);
    color: var(--branco);
    transform: translateY(-2px);
  }
  .botao.cinza:hover {
    background: var(--cinza-escuro);
    color: var(--branco);
    transform: translateY(-2px);
  }
  
  .botao.vermelho {
    background: var(--vermelho);
    color: var(--branco);
    transform: translateY(-2px);
    border: 1px solid var(--vermelho);
  }
  
  .botao.vermelho:hover {
    background: var(--vermelho-escuro);
    color: var(--branco);
    transform: translateY(-2px);
  }
  .botao.verde {
    background: var(--verde);
    color: var(--branco);
    transform: translateY(-2px);
  }
  .botao.verde:hover {
    background: var(--verde-escuro);
    color: var(--branco);
    transform: translateY(-2px);
  }