/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: 0 var(--e-5);
  border: 1.5px solid transparent;
  border-radius: var(--raio-pilula);
  background: transparent;
  font-weight: 600;
  font-size: var(--t-16);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--rapido) var(--curva), background-color var(--rapido), border-color var(--rapido);
  touch-action: manipulation;
}
.botao:active:not(:disabled) { transform: scale(0.97); }
.botao:disabled { cursor: not-allowed; opacity: 0.55; }
.botao svg { width: 20px; height: 20px; flex: none; }

.botao--primario { background: var(--tinta); color: var(--sobre-tinta); }
.botao--primario:hover:not(:disabled) { background: color-mix(in srgb, var(--tinta) 88%, var(--grafite)); }

.botao--secundario { border-color: var(--linha); color: var(--grafite); background: var(--superficie); }
.botao--secundario:hover:not(:disabled) { border-color: var(--grafite-suave); }

.botao--texto { color: var(--tinta); padding: 0 var(--e-3); }
.botao--texto:hover:not(:disabled) { background: var(--tinta-fundo); }

.botao--bloco { width: 100%; }

.botao-icone {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--raio-bolinha);
  background: transparent;
  color: var(--grafite-suave);
  transition: background-color var(--rapido), color var(--rapido);
}
.botao-icone:hover { background: var(--tinta-fundo); color: var(--grafite); }
.botao-icone svg { width: 22px; height: 22px; }

/* ---------- Campos ---------- */
.campo { display: grid; gap: var(--e-2); }

.campo__rotulo {
  font-size: var(--t-13);
  font-weight: 500;
  color: var(--grafite);
}

.campo__entrada {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--e-4);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-campo);
  background: var(--superficie);
  font-size: var(--t-16); /* 16px evita zoom no iOS */
  transition: border-color var(--rapido);
}
.campo__entrada:hover { border-color: var(--grafite-suave); }
.campo__entrada:focus-visible { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px var(--tinta-fundo); }
.campo__entrada[aria-invalid="true"] { border-color: var(--erro); }

select.campo__entrada {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  text-overflow: ellipsis;
}

.campo__grupo { position: relative; }
.campo__grupo .campo__entrada { padding-right: 96px; }
.campo__acao {
  position: absolute;
  top: 4px;
  right: 4px;
  min-height: 40px;
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--raio-campo);
  background: transparent;
  color: var(--tinta);
  font-size: var(--t-13);
  font-weight: 600;
}
.campo__acao:hover { background: var(--tinta-fundo); }

/* ---------- Mensagens ---------- */
.alerta {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-campo);
  background: var(--erro-fundo);
  color: var(--grafite);
  font-size: var(--t-13);
  font-weight: 500;
  border-left: 3px solid var(--erro);
}

/* ---------- Superfícies ---------- */
.cartao {
  padding: var(--e-5);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  background: var(--superficie);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--e-3);
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  font-size: var(--t-13);
  color: var(--grafite-suave);
}

/* Marca-texto: só onde algo merece atenção */
.marca-texto {
  background: linear-gradient(transparent 55%, var(--marca-texto) 55%, var(--marca-texto) 92%, transparent 92%);
  color: inherit;
  padding: 0 2px;
}

/* ---------- Estado vazio ---------- */
.vazio {
  display: grid;
  justify-items: center;
  gap: var(--e-4);
  max-width: 420px;
  margin: var(--e-7) auto;
  text-align: center;
}
.vazio__texto { color: var(--grafite-suave); }

/* ---------- Cabeçalho de página ---------- */
.pagina { display: grid; gap: var(--e-6); }
.pagina__cabecalho { display: grid; gap: var(--e-2); }
.pagina__titulo:focus { outline: none; }
.pagina__sub { color: var(--grafite-suave); }

/* ---------- Opções em pílula (rádio) ---------- */
.opcoes { display: flex; flex-wrap: wrap; gap: var(--e-2); border: 0; margin: 0; padding: 0; }
.opcoes legend { padding: 0; margin-bottom: var(--e-3); font-weight: 600; }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcao span {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: 0 var(--e-4);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-pilula);
  font-weight: 500;
  font-size: var(--t-13);
}
.opcao span::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-bolinha);
  transition: background-color var(--rapido), border-color var(--rapido);
}
.opcao input:checked + span { border-color: var(--tinta); }
.opcao input:checked + span::before { background: var(--tinta); border-color: var(--tinta); }
.opcao input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* ---------- Bit (mascote) ---------- */
.bit { overflow: visible; flex: none; }
.bit__corpo { fill: var(--superficie); }
.bit__tinta { fill: var(--tinta); opacity: 0; }
.bit__contorno { fill: none; stroke: var(--tinta); stroke-width: 8; }
.bit__olho { fill: var(--grafite); }
.bit__pensando { opacity: 0; }
.bit__pensando circle { fill: var(--grafite); }
.bit__check, .bit__x {
  fill: none;
  stroke: var(--sobre-tinta);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.bit__capelo-base, .bit__capelo-topo { fill: var(--grafite); }
.bit__borla { fill: none; stroke: var(--marca-texto); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.bit__borla-ponta { fill: var(--marca-texto); }
.bit__todo { transform-origin: 60px 68px; transition: transform 300ms var(--curva); }

.bit[data-estado="pensando"] .bit__olhos { opacity: 0; }
.bit[data-estado="pensando"] .bit__pensando { opacity: 1; }
.bit[data-estado="acertou"] .bit__tinta,
.bit[data-estado="errou"] .bit__tinta { opacity: 1; }
.bit[data-estado="acertou"] .bit__olhos,
.bit[data-estado="errou"] .bit__olhos { opacity: 0; }
.bit[data-estado="acertou"] .bit__check,
.bit[data-estado="errou"] .bit__x { opacity: 1; }
.bit[data-estado="errou"] .bit__tinta { fill: var(--erro); }
.bit[data-estado="errou"] .bit__contorno { stroke: var(--erro); }
.bit[data-estado="errou"] .bit__todo { transform: rotate(8deg); }