/**
 * Componentes reutilizáveis: botões, campos de formulário, cards, chips,
 * alertas. Depende de tokens.css.
 */

/* ---------------------------------------------------------------------
 * Botões
 * --------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--e-3) var(--e-6);
  border-radius: var(--raio);
  border: 2px solid transparent;
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

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

.botao:disabled,
.botao[aria-busy="true"] {
  opacity: .5;
  cursor: not-allowed;
}

.botao--primario {
  background: var(--gb-teal);
  color: var(--gb-branco);
}

.botao--primario:hover {
  background: var(--gb-teal-esc);
  color: var(--gb-branco);
}

.botao--secundario {
  background: transparent;
  border-color: var(--gb-teal);
  color: var(--gb-teal);
}

.botao--secundario:hover {
  background: var(--gb-teal-clr);
}

.botao--terciario {
  background: transparent;
  color: var(--gb-teal);
  text-decoration: underline;
  min-height: auto;
  padding: var(--e-1) var(--e-2);
}

.botao--perigo {
  background: var(--gb-erro);
  color: var(--gb-branco);
}

@media (max-width: 767px) {
  .secao-formulario .botao--primario {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
 * Campos de formulário
 * --------------------------------------------------------------------- */

.campo {
  margin-bottom: var(--e-6);
}

.campo label {
  display: block;
  margin-bottom: var(--e-2);
}

/* Todo controle de entrada entra nesta lista — um tipo de fora dela cai no
 * visual padrão do navegador: mais baixo que os 48px de alvo de toque e
 * desalinhado dos vizinhos quando dois campos dividem a linha. */
.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo input[type="date"],
.campo input[type="number"],
.campo input[type="password"],
.campo select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-base);
  font-family: inherit;
  color: var(--gb-tinta);
  background: var(--gb-branco);
  border: 1px solid var(--gb-linha);
  border-radius: var(--raio-sm);
}

.campo input:focus,
.campo select:focus {
  border-color: var(--gb-teal);
}

.campo input::placeholder {
  color: var(--gb-cinza);
}

.campo--erro input,
.campo--erro select {
  border-color: var(--gb-erro);
  background: var(--gb-erro-bg);
}

.mensagem-erro {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  margin: var(--e-2) 0 0;
  color: var(--gb-erro);
  font-size: var(--t-xs);
}

.mensagem-erro::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--gb-erro);
  color: var(--gb-branco);
  font-size: .75em;
  font-weight: var(--peso-forte);
}

.dica-campo {
  margin: var(--e-2) 0 0;
  font-size: var(--t-xs);
  color: var(--gb-grafite);
}

.obrigatorio {
  color: var(--gb-erro);
}

.legenda-obrigatorios {
  font-size: var(--t-xs);
  color: var(--gb-grafite);
}

.campo-opcao {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-2) 0 0;
  font-size: var(--t-xs);
}

.campo-opcao label {
  margin: 0;
  font-weight: var(--peso-normal);
}

.campo--checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
}

.campo--checkbox label {
  margin: 0;
  font-weight: var(--peso-normal);
}

.campo input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  accent-color: var(--gb-teal);
}

.bloco-responsavel {
  margin: 0 0 var(--e-6);
  padding: var(--e-4);
  border: 1px solid var(--gb-linha);
  border-radius: var(--raio);
}

.bloco-responsavel legend {
  padding: 0 var(--e-2);
  font-weight: var(--peso-medio);
}

/* Pares curtos lado a lado a partir do tablet (CEP+cidade, telefone+WhatsApp,
   filtros de período/idade do backoffice). Empilhado em telas estreitas. */
@media (min-width: 768px) {
  .par-campos {
    display: flex;
    gap: var(--e-4);
  }

  .par-campos > .campo {
    flex: 1;
  }
}

/* ---------------------------------------------------------------------
 * Cards de polo e chips de curso
 * --------------------------------------------------------------------- */

.card-polo {
  position: relative;
  padding: var(--e-6);
  padding-top: calc(var(--e-6) + 4px);
  background: var(--gb-branco);
  border: 1px solid var(--gb-linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.card-polo__faixa {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--gb-teal) 0 25%,
    var(--gb-ambar) 25% 50%,
    var(--gb-laranja) 50% 75%,
    var(--gb-vermelho) 75% 100%
  );
}

.card-polo h3 {
  margin-bottom: var(--e-2);
}

.card-polo p {
  margin-bottom: var(--e-1);
  font-size: var(--t-xs);
  color: var(--gb-grafite);
}

.lista-cursos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  background: var(--gb-teal-clr);
  color: var(--gb-teal);
  border-radius: var(--raio-pill);
  padding: var(--e-1) var(--e-3);
  font-size: var(--t-xs);
}

/* ---------------------------------------------------------------------
 * Alertas
 * --------------------------------------------------------------------- */

.alerta {
  margin-bottom: var(--e-6);
  padding: var(--e-4);
  border-left: 4px solid;
  border-radius: var(--raio-sm);
}

.alerta p {
  margin: 0;
  max-width: none;
}

.alerta--erro {
  border-color: var(--gb-erro);
  background: var(--gb-erro-bg);
  color: var(--gb-erro);
}

.alerta--aviso {
  border-color: var(--gb-aviso);
  background: var(--gb-aviso-bg);
  color: var(--gb-aviso);
}

.alerta--ok {
  border-color: var(--gb-ok);
  background: var(--gb-ok-bg);
  color: var(--gb-ok);
}

/* ---------------------------------------------------------------------
 * Lista de definição (comprovante) e protocolo em destaque
 * --------------------------------------------------------------------- */

.protocolo-destaque {
  font-family: var(--fonte-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xl);
  font-weight: var(--peso-forte);
  color: var(--gb-teal);
  margin: 0 0 var(--e-6);
}

.lista-definicao {
  margin: 0 0 var(--e-8);
}

.lista-definicao dt {
  font-size: var(--t-xs);
  color: var(--gb-grafite);
  margin-top: var(--e-4);
}

.lista-definicao dd {
  margin: 0;
  font-size: var(--t-md);
}

.bloco-polo {
  padding: var(--e-6);
  background: var(--gb-branco);
  border: 1px solid var(--gb-linha);
  border-radius: var(--raio-lg);
  margin-bottom: var(--e-8);
}