/* ---------------------------------------------------------------------------
   Complementos do site dinâmico.
   O estilos.css é gerado pelo Tailwind e não deve ser editado à mão; tudo o que
   for acrescentado depois da conversão fica aqui.
   ------------------------------------------------------------------------- */

/* Campos claros sobre o cartão verde da doação */
.bg-verde-esc input::placeholder,
.bg-verde-esc textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.bg-verde-esc input:focus,
.bg-verde-esc textarea:focus {
  border-color: rgba(255, 255, 255, 0.55);
  outline: none;
}

/* Campo com erro de validação */
[aria-invalid="true"],
.campo-invalido {
  border-color: var(--laranja-esc) !important;
}

/* Botão em envio */
button[data-enviando="1"] {
  opacity: 0.65;
  pointer-events: none;
}

/* QR Code do PIX */
#chave-pix {
  text-overflow: ellipsis;
}

/* O iframe do mapa tem a altura definida no painel */
iframe[title^="Mapa"] {
  display: block;
  min-height: 160px;
}

@media print {
  header,
  #menu-mobile,
  a[aria-label*="WhatsApp"],
  #lightbox,
  [data-modal-projeto] {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Ícones oficiais dos ODS (seção "Agenda ODS")
   A ONU exige que o ícone seja usado inteiro, em quadrado 1:1, sem recorte,
   sem sombra, sem borda arredondada e sem alteração de cor. As regras abaixo
   apenas definem o tamanho — não mexa em cor, proporção ou raio.
   ------------------------------------------------------------------------- */
.ods-icone {
  width: 56px;
  height: 56px;      /* quadrado 1:1 obrigatório */
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  border-radius: 0;  /* não arredondar: proibido pelas diretrizes */
  box-shadow: none;  /* não aplicar sombra: proibido pelas diretrizes */
}

@media (min-width: 768px) {
  .ods-icone {
    width: 64px;
    height: 64px;
  }
}