:root {
  --padding-card-sistema: 15px;
  --altura-titulo-sistema: 72px;
  --fonte-titulo-sistema: 32px;
  --coluna-acao-titulo-sistema: 56px;
  --padding-titulo-sistema: 12px;
  --largura-conteudo-sistema: 600px;
  --margem-conteudo-sistema: 16px;
}

body {
  user-select: none;

  font-family: Arial;
  background-color: #b8e6b8;
  text-align: center;
  margin: 0;

  padding-top: 72px;
}

.titulo.componente-titulo {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: var(--altura-titulo-sistema);

  background: #2f7d2f;
  color: white;

  z-index: 1000;

  display: grid;
  grid-template-columns:
    var(--coluna-acao-titulo-sistema)
    minmax(0, 1fr)
    var(--coluna-acao-titulo-sistema);
  align-items: center;

  box-sizing: border-box;
  padding-block: 0;
  padding-inline: max(
    var(--margem-conteudo-sistema),
    calc((100% - var(--largura-conteudo-sistema)) / 2)
  );
}

/* centro real do titulo */
.componente-titulo .titulo-centro {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-width: 0;
  font-size: var(--fonte-titulo-sistema);
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.componente-titulo .btn-topo-voltar {
  grid-column: 3;
  justify-self: end;

  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;

  border: none;
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.15);
  color: white;

  font-size: 22px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.componente-titulo .btn-topo-retornar {
  grid-column: 1;
  justify-self: start;
}

.componente-titulo .titulo-acoes-esquerda {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
}

.componente-titulo .titulo-acoes-esquerda .btn-topo-voltar {
  grid-column: auto;
  justify-self: auto;
  flex: 0 0 auto;
}

.componente-titulo .titulo-acoes {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.componente-titulo .titulo-acoes .btn-topo-voltar {
  grid-column: auto;
  justify-self: auto;
  flex: 0 0 auto;
}

.componente-titulo .btn-topo-voltar:hover {
  background: rgba(255, 255, 255, 0.25);
}

.componente-titulo .btn-topo-voltar:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
}

.componente-titulo .btn-topo-menu[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.32);
}

.menu-sistema-camada {
  position: fixed;
  z-index: 990;
  inset: var(--altura-titulo-sistema) 0 0;
  box-sizing: border-box;
  background: rgba(12, 31, 14, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    background-color 180ms ease,
    opacity 180ms ease,
    visibility 0s linear 220ms;
}

.menu-sistema-camada.aberto {
  background: rgba(12, 31, 14, 0.22);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.menu-sistema-painel {
  position: absolute;
  top: 8px;
  right: max(
    var(--margem-conteudo-sistema),
    calc((100% - var(--largura-conteudo-sistema)) / 2)
  );
  width: min(276px, calc(100% - (2 * var(--margem-conteudo-sistema))));
  padding: 10px;
  border-radius: 12px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: translateY(-16px) scale(0.96);
  transform-origin: top right;
  opacity: 0;
  transition:
    transform 220ms ease,
    opacity 170ms ease;
}

.menu-sistema-camada.aberto .menu-sistema-painel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.menu-sistema-atalho {
  width: 100%;
  min-height: 52px;
  padding: 8px 14px;
  border-radius: 10px;
  box-sizing: border-box;
  background: #5fbf5f;
  color: #123b12;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.menu-sistema-atalho:hover,
.menu-sistema-atalho:focus-visible {
  background: #4aa84a;
}

.menu-sistema-atalho:focus-visible {
  outline: 3px solid #173f17;
  outline-offset: 1px;
}

.menu-sistema-atalho > i {
  width: 36px;
  color: #123b12;
  font-size: 23px;
  text-align: center;
}

.menu-sistema-icone-retirada {
  width: 36px;
  height: 30px;
  color: #123b12;
  font-size: 18px;
  justify-self: center;
}

body.menu-sistema-aberto {
  overflow: hidden;
}

body.alerta-sistema-aberto {
  overflow: hidden;
}

body.popup-historico-aberto {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}

.alerta-sistema-fundo {
  position: fixed;
  z-index: 3000;
  inset: 0;
  padding: 18px;
  background: rgba(7, 18, 9, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.alerta-sistema-caixa {
  width: min(100%, 430px);
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  color: #243024;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
  text-align: center;
}

.alerta-sistema-titulo {
  margin: 0;
  padding: 15px 18px;
  background: #2f7d2f;
  color: #fff;
  font-size: 22px;
}

.alerta-sistema-conteudo {
  padding: 20px;
}

.alerta-sistema-conteudo > i {
  color: #c77a13;
  font-size: 38px;
}

.alerta-sistema-conteudo p {
  margin: 14px 0 0;
  line-height: 1.5;
  white-space: pre-line;
}

.alerta-sistema-acoes {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.alerta-sistema-botao {
  width: 72px;
  min-width: 72px;
  height: 72px;
  min-height: 72px;
  padding: 0;
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  font-size: 26px;
  font-weight: bold;
}

.alerta-sistema-botao.sim {
  background: #2f7d2f;
}

.alerta-sistema-botao.ok {
  background: #2f7d2f;
}

.alerta-sistema-botao.nao {
  background: #a73737;
}

.alerta-sistema-botao:hover {
  filter: brightness(0.92);
}

.alerta-sistema-botao:focus-visible {
  outline: 3px solid #173f17;
  outline-offset: 3px;
}

/*
 * Cabeçalhos de popup seguem a mesma régua visual do título das páginas.
 * As declarações importantes neutralizam estilos antigos mantidos nas
 * folhas específicas das páginas.
 */
:where(.alerta-sistema-titulo, .modal-header) {
  width: 100% !important;
  height: auto !important;
  min-height: var(--altura-titulo-sistema) !important;
  margin: 0 !important;
  padding: 0 var(--padding-titulo-sistema) !important;
  box-sizing: border-box !important;
  background: #2f7d2f !important;
  color: #fff !important;
  font-size: var(--fonte-titulo-sistema) !important;
  font-weight: bold !important;
  line-height: 1.15 !important;
}

.alerta-sistema-titulo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.modal-header {
  display: grid !important;
  grid-template-columns:
    var(--coluna-acao-titulo-sistema)
    minmax(0, 1fr)
    var(--coluna-acao-titulo-sistema) !important;
  align-items: center !important;
  justify-content: normal !important;
  gap: 0 !important;
}

.modal-header > :where(.titulo-popup, .titulo-area, span) {
  grid-column: 2 !important;
  min-width: 0 !important;
  display: block !important;
  color: #fff !important;
  font-size: var(--fonte-titulo-sistema) !important;
  font-weight: bold !important;
  line-height: 1.15 !important;
  text-align: center !important;
  padding: 8px 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.modal-header > i:not(.fechar-modal),
.modal-header > :where(.titulo-popup, .titulo-area, span) > i {
  display: none !important;
}

.modal-header > .fechar-modal {
  grid-column: 3 !important;
  justify-self: end !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.modal-header > .fechar-modal:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

.modal-header > .fechar-modal:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: -5px !important;
}

.modal button,
.modal button:disabled,
.modal .fechar-modal,
.alerta-sistema-botao,
.alerta-sistema-botao:disabled {
  color: #fff !important;
}

.modal .botao-secundario {
  background: #6f777f !important;
}

.modal button:disabled {
  color: #fff !important;
}

@media (max-width: 520px) {
  :root {
    --padding-card-sistema: 8px;
    --altura-titulo-sistema: 60px;
    --fonte-titulo-sistema: 21px;
    --coluna-acao-titulo-sistema: 44px;
    --padding-titulo-sistema: 8px;
    --margem-conteudo-sistema: 8px;
  }

  body {
    padding-top: 60px;
  }

  .titulo.componente-titulo {
    height: var(--altura-titulo-sistema);
    grid-template-columns:
      var(--coluna-acao-titulo-sistema)
      minmax(0, 1fr)
      var(--coluna-acao-titulo-sistema);
    padding: 0 var(--margem-conteudo-sistema);
  }

  .componente-titulo .titulo-centro {
    gap: 8px;
    font-size: var(--fonte-titulo-sistema);
  }

  .componente-titulo .btn-topo-voltar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 18px;
  }

  .componente-titulo .titulo-acoes {
    gap: 6px;
  }

  .componente-titulo .titulo-acoes-esquerda {
    gap: 6px;
  }

  .modal-header > .fechar-modal {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    font-size: 18px !important;
  }
}

/*
 * Padding único dos cards do sistema.
 * Os espaçamentos entre os componentes internos continuam específicos
 * de cada página para preservar as diferentes estruturas dos cards.
 */
:where(
  .card-padding-padrao,
  .container-form,
  .container-fundo,
  .filtro-produtos-card,
  .card-lista,
  .card-produto,
  .card-selecao,
  .card-produto-lista,
  .produto-card,
  .produtos-vazio,
  .peca-card,
  .pecas-resumo-card,
  .pecas-maquina-referencia,
  .pecas-vazio,
  .maquina-card,
  .maquinas-vazio,
  .vaca-card,
  .manutencao-card,
  .manutencoes-vazio,
  .descricao-etapa-card,
  .etapa-card,
  .horimetro-card,
  .horimetros-vazio,
  .modulo-card,
  .usuarios-painel,
  .usuario-card,
  .login-caixa,
  .logs-painel,
  .fotos-multiplas,
  .foto-maquina-campo,
  .horimetro-foto-campo
) {
  box-sizing: border-box;
  padding: var(--padding-card-sistema) !important;
}

.estado-vazio-padrao {
  width: 100%;
  padding: 30px 20px !important;
  border-radius: 14px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
  color: #526652;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.estado-vazio-padrao > i {
  color: #5f8f5f;
  font-size: 48px;
}

.estado-vazio-padrao > strong {
  color: #274827;
  font-size: 20px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;

  width: 90%;
  max-width: 600px;

  margin: 15px auto;
}

.container-form {
  text-align: left;

  width: 100%;
  max-width: 600px;

  margin: 15px auto 25px auto;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 15px;

  background: white;
  padding: 25px;

  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.container-fundo {
  width: 90%;
  max-width: 600px;
  margin: 30px auto;
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  text-align: left;
}

/* Largura padronizada dos cards externos do módulo Máquinas. */
body.modulo-maquinas .container,
body.modulo-maquinas .container-form,
body.modulo-maquinas .container-fundo,
body.modulo-maquinas .maquinas-lista,
body.modulo-maquinas .mensagem-maquinas,
body.modulo-maquinas .pecas-maquina-referencia,
body.modulo-maquinas .pecas-lista,
body.modulo-maquinas .pecas-resumo,
body.modulo-maquinas .mensagem-pecas,
body.modulo-maquinas .manutencoes-lista,
body.modulo-maquinas .mensagem-manutencoes,
body.modulo-maquinas .horimetros-historico,
body.modulo-maquinas .mensagem-horimetro,
body .editor-foto-maquina {
  width: min(600px, calc(100% - 32px));
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (max-width: 520px) {
  body.modulo-maquinas .container,
  body.modulo-maquinas .container-form,
  body.modulo-maquinas .container-fundo,
  body.modulo-maquinas .maquinas-lista,
  body.modulo-maquinas .mensagem-maquinas,
  body.modulo-maquinas .pecas-maquina-referencia,
  body.modulo-maquinas .pecas-lista,
  body.modulo-maquinas .pecas-resumo,
  body.modulo-maquinas .mensagem-pecas,
  body.modulo-maquinas .manutencoes-lista,
  body.modulo-maquinas .mensagem-manutencoes,
  body.modulo-maquinas .horimetros-historico,
  body.modulo-maquinas .mensagem-horimetro,
  body .editor-foto-maquina {
    width: calc(100% - 16px);
  }
}

/* Largura padronizada dos cards externos do módulo Manejo. */
body.modulo-manejo .container,
body.modulo-manejo .container-form,
body.modulo-manejo .container-fundo,
body.modulo-manejo .lista-cards-padrao,
body.modulo-manejo .recomendacoes-lista,
body.modulo-manejo .container-concentracao,
body.modulo-manejo .container-condicoes,
body.modulo-manejo .container-observacoes {
  width: min(600px, calc(100% - 32px));
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (max-width: 520px) {
  body.modulo-manejo .container,
  body.modulo-manejo .container-form,
  body.modulo-manejo .container-fundo,
  body.modulo-manejo .lista-cards-padrao,
  body.modulo-manejo .recomendacoes-lista,
  body.modulo-manejo .container-concentracao,
  body.modulo-manejo .container-condicoes,
  body.modulo-manejo .container-observacoes {
    width: calc(100% - 16px);
  }
}

.lista-cards-padrao {
  margin-top: 24px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: transparent;
}

/* Largura padronizada dos cards externos do módulo Estoque. */
body.modulo-estoque .container,
body.modulo-estoque .container-form,
body.modulo-estoque .container-fundo,
body.modulo-estoque .lista-cards-padrao,
body.modulo-estoque .container-principio,
body.modulo-estoque .container-concentracao,
body.modulo-estoque .container-tipo,
body.modulo-estoque.pagina-ajuste > .barra-filtro {
  width: min(600px, calc(100% - 32px));
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (max-width: 520px) {
  body.modulo-estoque .container,
  body.modulo-estoque .container-form,
  body.modulo-estoque .container-fundo,
  body.modulo-estoque .lista-cards-padrao,
  body.modulo-estoque .container-principio,
  body.modulo-estoque .container-concentracao,
  body.modulo-estoque .container-tipo,
  body.modulo-estoque.pagina-ajuste > .barra-filtro {
    width: calc(100% - 16px);
  }
}

.icone-lista-retirar {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: block;
}

.icone-lista-retirar-seta,
.icone-lista-retirar-base {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.icone-lista-retirar-seta {
  top: 0;
  font-size: 24px;
}

.icone-lista-retirar-base {
  bottom: 0;
  font-size: 24px;
  clip-path: inset(0 0 12% 0);
}

.botao {
  background: #5fbf5f;
  color: #0b3d0b;

  border: none;
  border-radius: 15px;

  height: 160px;

  font-size: 18px;
  font-weight: bold;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  cursor: pointer;
}

.botao i {
  font-size: 60px;
  margin-bottom: 15px;
}

.botao > .icone-lista-retirar {
  width: 60px;
  height: 60px;
  flex-basis: 60px;
  margin-bottom: 15px;
}

.botao > .icone-lista-retirar > i {
  margin-bottom: 0;
  font-size: 38px;
}

.botao:hover {
  background: #4aa84a;
}

.botao-pagina {
  display: block;
  width: 100%;
  box-sizing: border-box;

  background: #5fbf5f;
  color: #0b3d0b;

  padding: 15px;
  text-align: center;

  border: none;
  border-radius: 10px;

  font-size: 18px;
  font-weight: bold;

  cursor: pointer;
  margin-bottom: 15px;
}

.botao-pagina:hover {
  background: #4aa84a;
}

/* LINHA PŔINCIPIO CONCENTRACAO */
.linha-princ-conc {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  width: 100%;
  align-items: center;
  /* height: clamp(30px, 6vh, 80px); */
  height: 48px;
}

.campo-principio {
  flex: 7;
  height: 100%;
  min-width: 0;
}

.campo-concentracao {
  flex: 3;
  height: 100%;
  min-width: 0;
}

.margem-extra .linha-princ-conc {
  margin-bottom: 20px;
}

.linha-princ-conc input {
  width: 100%;
  height: 100%;
  font-size: 18px;
  margin-bottom: 0;
  box-sizing: border-box;
  padding: 0 10px;
  height: 48px;
}

.linha-princ-conc button {
  flex: 0 0 60px;
  /* height: 100%; */
  height: 48px;
}

/* INPUT SELECT CUSTOM */
.input-select-custom {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.input-select-custom input {
  font-size: 18px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

.input-select-custom input::placeholder {
  color: #999;
  opacity: 1;
}
.input-select-custom input::-webkit-input-placeholder {
  color: #999;
}
.input-select-custom input::-moz-placeholder {
  color: #999;
}
.input-select-custom input:-ms-input-placeholder {
  color: #999;
}

.placeholder {
  color: #999;
}

.input-select-custom .options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
}

.input-select-custom .options div {
  padding: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 18px;
}

.input-select-custom .options div:hover {
  background: #f0f0f0;
}

/* BOTAO ICONE */
.botao-icone {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* height: 100%; */
  height: 48px;
  padding: 0 10px;
  cursor: pointer;
  box-sizing: border-box;
}

/* ícone interno */
.botao-icone i {
  font-size: 200%;
}
/* ===== DROPDOWN PADRÃO DO SISTEMA ===== */
.dropdown-sistema {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.dropdown-sistema-campo {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 10px;
  border: 1px solid #777;
  border-radius: 1px;
  box-sizing: border-box;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: 18px;
}

.dropdown-sistema-campo::placeholder {
  color: #000;
  opacity: 1;
}

.dropdown-sistema.aberto .dropdown-sistema-campo {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: #e8f6e8;
}

.dropdown-sistema-opcoes {
  position: absolute;
  z-index: 1000;
  top: 100%;
  right: 0;
  left: 0;
  max-height: 200px;
  padding: 0;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 0;
  background: #e8f6e8;
}

.dropdown-sistema.aberto .dropdown-sistema-opcoes {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown-sistema-opcoes[hidden] {
  display: none;
}

.dropdown-sistema-opcao {
  display: block;
  width: auto;
  min-height: auto;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  font: inherit;
  font-size: 18px;
  text-align: left;
  cursor: pointer;
}

.dropdown-sistema-opcao:hover,
.dropdown-sistema-opcao.ativa {
  background: #d4ecd4;
}

.dropdown-sistema.invalido .dropdown-sistema-campo {
  border-color: #b42318;
  box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.14);
}
.acoes-formulario-rascunho {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 22px;
}

.acoes-formulario-rascunho > [type="submit"] {
  margin: 0 !important;
}

.botao-limpar-formulario {
  align-items: center;
  background: #5fbf5f;
  border: 0;
  border-radius: var(--raio-botao-limpar, 10px);
  color: #0b3d0b;
  cursor: pointer;
  display: inline-flex;
  font-size: var(--fonte-botao-limpar, 24px);
  font-weight: 700;
  height: var(--tamanho-botao-limpar, var(--tamanho-botao-acao, 64px));
  justify-content: center;
  line-height: 1;
  margin: 0 !important;
  min-height: var(--tamanho-botao-limpar, var(--tamanho-botao-acao, 64px));
  min-width: var(--tamanho-botao-limpar, var(--tamanho-botao-acao, 64px));
  padding: 0;
  width: var(--tamanho-botao-limpar, var(--tamanho-botao-acao, 64px));
}

.botao-limpar-formulario:hover {
  background: #4aa84a;
}

.botao-limpar-formulario:disabled {
  cursor: wait;
  opacity: 0.6;
}

/* Evita o menu nativo de copiar/salvar durante o manuseio das fotos. */
.fotos-multiplas-preview img,
.fotos-multiplas-visualizador-imagem,
.horimetro-foto-preview img,
.container-recorte img,
.horimetro-recorte-area img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.botao-voltar-topo {
  position: fixed;
  z-index: 900;
  right: 14px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  /* Fundo realcado quadrado, de cantos arredondados e meio transparente. */
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  color: #176b2a;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  opacity: 0.82;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.botao-voltar-topo[hidden] {
  display: none !important;
}

.botao-voltar-topo svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  /* Traco grosso: e isso que engrossa a seta. */
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.botao-voltar-topo:hover,
.botao-voltar-topo:focus-visible {
  background: rgba(255, 255, 255, 0.75);
  opacity: 1;
}

.botao-voltar-topo:focus-visible {
  outline: 2px solid #176b2a;
  outline-offset: 1px;
}

/* Botao reutilizavel para limpar somente o termo dos filtros de pesquisa. */
.botao-limpar-pesquisa {
  display: inline-flex;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #5fbf5f;
  color: #0b3d0b;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.botao-limpar-pesquisa:hover {
  background: #4aa84a;
}

.botao-limpar-pesquisa:focus-visible {
  outline: 3px solid #173f17;
  outline-offset: 2px;
}

.modal .botao-limpar-pesquisa {
  color: #0b3d0b !important;
}