/* Localização: /uiux/css/componentes.css */
/* Nome: componentes.css */
/* Linguagem: CSS */

/* ── Botões ── */
.btn-accent {
  background: var(--cor-accent);
  color: #000;
  border: none;
  font-family: var(--font-condensada);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-md);
  padding: var(--gap-sm) var(--gap-lg);
  cursor: pointer;
  transition: background var(--transicao);
}
.btn-accent:hover { background: var(--cor-accent-hover); color: #000; }

.btn-outline {
  background: transparent;
  color: var(--cor-texto);
  border: 1px solid var(--cor-borda);
  font-family: var(--font-condensada);
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: var(--gap-sm) var(--gap-lg);
  cursor: pointer;
  transition: border-color var(--transicao);
}
.btn-outline:hover { border-color: var(--cor-accent); color: var(--cor-accent); }

.btn-danger {
  background: var(--cor-erro);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--gap-sm) var(--gap-lg);
  cursor: pointer;
  font-family: var(--font-condensada);
  font-weight: 600;
  transition: opacity var(--transicao);
}
.btn-danger:hover { opacity: 0.85; }

/* ── Cards ── */
.card-sistema {
  background: var(--cor-bg-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--radius-lg);
  padding: var(--gap-xl);
}

/* ── Badges ── */
.badge-ativo {
  background: var(--cor-sucesso-bg);
  color: var(--cor-sucesso);
  padding: 2px 10px;
  border-radius: 50px;
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-inativo {
  background: var(--cor-erro-bg);
  color: var(--cor-erro);
  padding: 2px 10px;
  border-radius: 50px;
  font-size: var(--font-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}