/* Padrão visual global: todo controle usado para informar, buscar ou escolher
   dados mantém a borda vermelha, mesmo quando não está em foco. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
select,
[contenteditable="true"] {
  border: 1px solid #c9251c !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
textarea:focus,
select:focus,
[contenteditable="true"]:focus {
  border-color: #c9251c !important;
  outline-color: rgba(201, 37, 28, 0.18);
}

/* Buscas internas de listas já possuem um contêiner visual próprio. */
input.campo-sem-borda-vermelha,
input.campo-sem-borda-vermelha:focus {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#ig-tags-filter,
#ig-tags-filter:focus,
#ig-tags-filter:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Substitui o anel azul nativo do navegador pela identidade do MIND UP.
   Mantém indicação de foco para quem navega por teclado, sem o retângulo azul. */
:where(
  button,
  a[href],
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus {
  outline: none !important;
}

:where(
  button,
  a[href],
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: none !important;
  border-color: #c9251c !important;
  box-shadow: 0 0 0 3px rgba(201, 37, 28, .14) !important;
}

/* Checkboxes e radios já possuem estado marcado próprio; o foco acompanha o formato. */
:where(input[type="checkbox"], input[type="radio"]):focus-visible {
  box-shadow: 0 0 0 3px rgba(201, 37, 28, .16) !important;
}

/* Remove o botão quadrado que Chromium/Opera desenham no lado direito do select. */
select:not([multiple]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 2.35rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 14px 14px !important;
}

select:not([multiple]):disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
}

/* Normalização global dos botões: nenhum navegador adiciona bloco interno,
   brilho azul, relevo nativo ou borda própria por cima do componente. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
  padding: 0;
  border: 0;
}

:where(button, a[href], [role="button"], select, input, textarea) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"]):focus,
:where(button, input[type="button"], input[type="submit"], input[type="reset"]):active {
  outline: none !important;
}

/* Estes filtros usam o fundo da própria caixa de busca, portanto o input
   interno nunca deve receber a borda vermelha global. Mantido ao final do
   arquivo para também vencer os estados globais de foco. */
#ig-tags-filter,
#ig-tags-filter:hover,
#ig-tags-filter:focus,
#ig-tags-filter:focus-visible,
#cne-tags-filter,
#cne-tags-filter:hover,
#cne-tags-filter:focus,
#cne-tags-filter:focus-visible,
#gd-tags-filter,
#gd-tags-filter:hover,
#gd-tags-filter:focus,
#gd-tags-filter:focus-visible,
#wag-tags-filter,
#wag-tags-filter:hover,
#wag-tags-filter:focus,
#wag-tags-filter:focus-visible,
#wac-tags-filter,
#wac-tags-filter:hover,
#wac-tags-filter:focus,
#wac-tags-filter:focus-visible,
#wcv-tags-filter,
#wcv-tags-filter:hover,
#wcv-tags-filter:focus,
#wcv-tags-filter:focus-visible {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#cfg-busca,
#cfg-busca:hover,
#cfg-busca:focus,
#cfg-busca:focus-visible {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* A busca das duas centrais de WhatsApp usa a borda do contêiner externo. */
#cfg-whatsapp-busca,
#cfg-whatsapp-busca:hover,
#cfg-whatsapp-busca:focus,
#cfg-whatsapp-busca:focus-visible {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Os painéis de tags já desenham a caixa de busca no elemento externo.
   Vale para Instagram, Google Maps, Cadastro Nacional e grupos do WhatsApp. */
.ig-tags-search input,
.ig-tags-search input:hover,
.ig-tags-search input:focus,
.ig-tags-search input:focus-visible {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
