/* ==========================================================================
   FILTROS NO CELULAR — o botão "Filtros" no topo (S7, Eduardo em 27/08)
   ==========================================================================
   A dor: no celular a barra de filtros das telas mestre-detalhe (Pessoas,
   Atendimentos, e as outras que usam o mesmo esqueleto) era uma fita de chips
   que ROLAVA DE LADO. Numa tela de 390px cabiam "Filtros", o primeiro grupo e
   meio chip; o período, o responsável, as etiquetas e o "Limpar filtros"
   ficavam fora da tela — e só achava quem sabia que dava para arrastar.

   O conserto: abaixo de 768px a barra vira UM botão visível no topo ("Filtros",
   com um selo "com filtro" quando há recorte aplicado). O toque abre os
   filtros INTEIROS, empilhados um grupo por linha, com os chips quebrando
   linha em vez de fugirem para a direita.

   Mecânica: caixa de marcar + <label> (shared/_alternador_de_filtros), zero
   JavaScript. A marcação da barra não mudou — só ganhou os dois elementos do
   alternador, que no computador não aparecem. Nada aqui vale acima de 767px:
   no tablet e no computador a fita continua exatamente como era.

   Fica de fora a barra COM IDENTIDADE (fila offline, roteiros de rua): lá
   a frase que explica a tela toma a linha e os poucos chips descem logo
   abaixo, já visíveis (barra_de_filtros_identidade_test) — recolher esses
   filtros atrás de um botão esconderia o que já estava à vista.

   A folha entra DEPOIS do manifesto (layouts/_folhas_de_estilo), então vence
   na cascata as regras de aparelho de 14_tela_mestre, 26 e 28 sem precisar de
   `!important`.
   ========================================================================== */

/* No computador o alternador não existe. */
.alternador-de-filtros,
.alternador-de-filtros__caixa {
  display: none;
}

@media (max-width: 767px) {
  .barra-filtros:not(.barra-filtros--com-identidade) {
    flex-wrap: wrap;
    align-items: center;
  }

  /* O <h2> "Filtros" continua na página para leitor de tela e para a
     navegação por cabeçalhos — só deixa de ser desenhado, porque o botão
     logo ao lado já diz a mesma palavra. */
  .barra-filtros:not(.barra-filtros--com-identidade) > .barra-filtros__titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* A caixa de marcar: invisível, mas FOCÁVEL. `display: none` a tiraria do
     teclado e do leitor de tela — e aí o botão só existiria para o dedo. */
  .alternador-de-filtros__caixa {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* O BOTÃO. Alvo de toque de 44px (a mesma régua de 26_aparelho_de_mao). */
  .alternador-de-filtros {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    min-height: 2.75rem;
    padding: var(--esp-2) var(--esp-4);
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pilula, 999px);
    background: var(--cor-fundo-elevado);
    color: var(--cor-texto);
    font-size: var(--texto-sm);
    font-weight: var(--peso-semi, 600);
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .alternador-de-filtros__icone {
    flex: none;
    width: 18px;
    height: 18px;
  }

  .alternador-de-filtros__seta {
    font-size: var(--texto-xs);
    color: var(--cor-texto-suave);
    transition: transform 0.15s ease;
  }

  /* "com filtro": só aparece quando a barra tem o chip "Limpar filtros" — que
     é justamente o sinal, já calculado pela tela, de que há recorte aplicado.
     Sem ele, quem fecha os filtros esqueceria que a lista está filtrada. */
  .alternador-de-filtros__ativo {
    display: none;
    padding: 0 var(--esp-2);
    border-radius: var(--raio-pilula, 999px);
    background: var(--cor-acao-suave);
    color: var(--cor-acao);
    font-size: var(--texto-xs);
  }
  .barra-filtros:has(.chip--limpar) .alternador-de-filtros__ativo { display: inline; }
  .barra-filtros:has(.chip--limpar) .alternador-de-filtros { border-color: var(--cor-acao); }

  .alternador-de-filtros__caixa:focus-visible + .alternador-de-filtros {
    outline: 2px solid var(--cor-acao);
    outline-offset: 2px;
  }

  .alternador-de-filtros__caixa:checked + .alternador-de-filtros {
    border-color: var(--cor-acao);
    background: var(--cor-acao-suave);
  }
  .alternador-de-filtros__caixa:checked + .alternador-de-filtros .alternador-de-filtros__seta {
    transform: rotate(180deg);
  }

  /* FECHADO: os filtros não ocupam a tela. */
  .barra-filtros:not(.barra-filtros--com-identidade) > .barra-filtros__conteudo { display: none; }

  /* ABERTO: um grupo por linha, e nada rola de lado. */
  .alternador-de-filtros__caixa:checked ~ .barra-filtros__conteudo {
    display: flex;
    flex: 1 0 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--esp-3);
    overflow: visible;
    padding-bottom: 0;
  }

  .alternador-de-filtros__caixa:checked ~ .barra-filtros__conteudo .barra-filtros__grupo {
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-1) var(--esp-2);
  }
  .alternador-de-filtros__caixa:checked ~ .barra-filtros__conteudo .barra-filtros__grupo > .barra-filtros__rotulo {
    flex: 1 0 100%;
  }
  /* `flex: none` vem de 26_aparelho_de_mao (a fita não podia encolher o
     grupo). Aberto em coluna é o contrário: a fileira de chips PRECISA caber
     na largura da tela para quebrar linha — sem isto ela media o comprimento
     de todos os chips somados e continuava vazando para a direita. */
  .alternador-de-filtros__caixa:checked ~ .barra-filtros__conteudo .barra-filtros__grupo,
  .alternador-de-filtros__caixa:checked ~ .barra-filtros__conteudo .barra-filtros__chips {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }
  .alternador-de-filtros__caixa:checked ~ .barra-filtros__conteudo .barra-filtros__chips,
  .alternador-de-filtros__caixa:checked ~ .barra-filtros__conteudo .barra-filtros__gaveta-conteudo {
    flex-wrap: wrap;
  }
  /* A gaveta vertical (etiquetas, equipe) abre na largura da tela. */
  .alternador-de-filtros__caixa:checked ~ .barra-filtros__conteudo .barra-filtros__gaveta-conteudo--coluna {
    flex-wrap: nowrap;
    width: 100%;
  }
  .alternador-de-filtros__caixa:checked ~ .barra-filtros__conteudo .barra-filtros__gaveta,
  .alternador-de-filtros__caixa:checked ~ .barra-filtros__conteudo .barra-filtros__periodo {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .alternador-de-filtros__caixa:checked ~ .barra-filtros__conteudo .chip--limpar {
    align-self: flex-start;
  }

  /* Aberta, a barra deixa de ser grudenta: grudada no topo e alta, ela
     cobriria a lista inteira e o dedo não teria onde rolar. Fechada, volta a
     acompanhar a rolagem (26_aparelho_de_mao), que agora custa só o botão. */
  .tela-mestre__area--filtros:has(.alternador-de-filtros__caixa:checked) {
    position: static;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .alternador-de-filtros__seta { transition: none; }
}