/* 15-formularios.css — Campos, dicas e erros de todos os formulários */

:is(input, textarea, select).com-erro {
  border-color: var(--cor-erro);
  border-width: 3px;
}

.campo:has(.com-erro) label {
  color: var(--cor-erro);
  font-weight: 700;
}

.erro-campo {
  margin-top: 4px;
  color: var(--cor-erro);
  font-weight: 700;
  font-size: 0.875rem;
}

.aviso-erros,
.erros-restantes {
  padding: var(--espaco-1) var(--espaco-2);
  border-left: 4px solid var(--cor-erro);
  border-radius: var(--raio);
  background: var(--cor-branco);
  color: var(--cor-erro);
  font-weight: 700;
}

input[type="submit"],
button {
  max-width: 100%;
  white-space: normal;
  height: auto;
}

.miniatura,
.foto-existente img {
  width: 4rem;
  height: 4rem;
  border-radius: var(--raio);
  object-fit: cover;
}

.foto-existente {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  margin-bottom: var(--espaco-1);
}

input[type="file"] {
  width: 100%;
  max-width: 100%;
  font-size: 0.875rem;
}

/* O botão "Escolher arquivo", com a cara dos nossos botões */
input[type="file"]::file-selector-button {
  margin-right: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-2);
  border: 2px solid var(--cor-roxo);
  border-radius: var(--raio);
  background: var(--cor-branco);
  color: var(--cor-roxo);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: var(--cor-roxo-claro);
}

fieldset.campo {
  padding: var(--espaco-2);
  border: 1px solid var(--cor-roxo-claro);
  border-radius: var(--raio);
}

.campo-quantidade {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco-1);
  margin-bottom: var(--espaco-1);
}

.campo-quantidade input {
  width: 5rem;
}

/* Some da tela, mas continua para o teclado e o leitor de tela */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Galeria de avatares: colunas que se ajustam à largura da tela */
.opcoes-avatar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--espaco-1);
}

.opcao-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  padding: 4px;
  border: 3px solid transparent;
  border-radius: 50%;
  background: var(--cor-branco);
  cursor: pointer;
}

.opcao-avatar img,
.opcao-avatar .icone {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

/* O avatar escolhido */
.opcao-avatar:has(input:checked) {
  border-color: var(--cor-laranja);
  box-shadow: 0 0 0 3px var(--cor-roxo);
}

/* Quem navega pelo teclado vê onde está */
.opcao-avatar:has(input:focus-visible) {
  outline: 3px solid var(--cor-laranja);
  outline-offset: 3px;
}

.mapa-formulario {
  height: 18rem;
  margin-block: var(--espaco-1);
  border: 2px solid var(--cor-roxo);
  border-radius: var(--raio);
}

.coordenadas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-1);
}

.botao-secundario {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-1) var(--espaco-2);
  border: 2px solid var(--cor-roxo);
  border-radius: var(--raio);
  background: var(--cor-branco);
  color: var(--cor-roxo);
  font-weight: 700;
}

/* O pino: uma gota laranja com borda roxa */
.pino {
  border: 3px solid var(--cor-roxo);
  border-radius: 50% 50% 50% 0;
  background: var(--cor-laranja);
  transform: rotate(-45deg);
}

.opcoes-escala {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espaco-1);
}

.opcoes-escala label {
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  padding: var(--espaco-1);
  border-radius: var(--raio);
  background: var(--cor-branco);
}

.opcoes-escala label:has(input:checked) {
  outline: 3px solid var(--cor-laranja);
}

trix-editor {
  min-height: 8rem;
  background: var(--cor-branco);
}