/* ===== 05-filtro.css — abas, grupos de dia, filtro colapsável, chips =====
   Fatia do antigo app.css (09/08/2026). O NÚMERO NO NOME É A POSIÇÃO NA CASCATA: é a ordem
   dos <link> no index.html, e trocá-la muda quem vence. Regra e política em 01-base.css. */

/* Abas Histórico/Hoje/Próximos (Agenda) — mesma barra em toda a largura, aba ativa marcada por
   sublinhado na cor da marca. Com 3 abas o texto lado a lado do ícone truncava em telas estreitas
   (360px) — ícone em cima + rótulo embaixo (mesma estratégia do BottomBar) cabe sem truncar; a
   contagem vira um badge sobreposto no canto do ícone em vez de ocupar espaço horizontal. */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    margin-bottom: .85rem;
}

.tab {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .5rem .25rem .55rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}

.tab.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.tab:active { background: var(--bg); }

.tab .icon { width: 1.35rem; height: 1.35rem; }

.tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tab-icon-wrap { position: relative; display: inline-flex; }

.tab-count {
    position: absolute;
    top: -.4rem;
    right: -.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 .25rem;
    font-size: .62rem;
    font-weight: 700;
    border-radius: 999px;
    background: var(--line);
    color: var(--ink-soft);
    box-shadow: 0 0 0 2px #fff;
}

.tab.is-active .tab-count { background: var(--brand); color: #fff; }

/* Separador entre grupos de dia (Agenda, aba Próximos) — sem isso o título do dia seguinte fica
   colado no último card do dia anterior. O primeiro grupo não leva a régua/respiro de cima, já tem
   o filtro de data logo acima.

   PADRÃO DO APP: "1px dashed var(--line)" é a régua usada em toda separação entre blocos/itens
   empilhados dentro de um mesmo painel (aqui, em .resumo-bloco, no card de foto do Catálogo, na
   linha de status do Home). Um `border-top` sólido nesse contexto é inconsistência, não escolha de
   estilo — ao criar uma nova separação do tipo, reusar esta régua em vez de inventar uma variante. */
.dia-grupo { margin-top: 1.1rem; padding-top: .85rem; border-top: 1px dashed var(--line); }
.dia-grupo.is-first { margin-top: 0; padding-top: 0; border-top: none; }

/* Separador de pausa para almoço dentro de um mesmo dia (Agenda) — mesma régua pontilhada do
   .dia-grupo, mas centralizado e sem título de seção: marca o intervalo entre os agendamentos da
   manhã e os da tarde, não um novo dia. */
.agenda-almoco-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    list-style: none;
    padding-top: .85rem;
    padding-bottom: .85rem;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
    color: var(--ink-soft);
    font-size: .85rem;
}
.agenda-almoco-sep .icon { width: 16px; height: 16px; }

/* Linha de endereço do card da Agenda — bairro em destaque + apelido + logradouro, tudo num span
   comum (não flex): um nó de texto solto dentro de um container flex vira seu próprio item e pode
   quebrar de forma imprevisível no meio da frase. */
.endereco-linha strong { color: var(--ink); font-weight: 700; }

/* Variação vertical do .cliente-card-actions (que por padrão empilha os icon-btn lado a lado nas
   páginas mais antigas) — usada quando o card tem uma 2ª ação fixa ("Ver no mapa", na Agenda) além
   do menu de ações, uma embaixo da outra em vez de lado a lado. */
.cliente-card-actions.is-stacked { flex-direction: column; }

/* Filtro de período colapsável (aba Próximos da Agenda) — fechado por padrão pra não ocupar espaço
   de tela; expande ao tocar no cabeçalho, igual um <details> mas com o mesmo visual dos demais
   controles do app. */
.filtro-colapsavel {
    margin-bottom: .75rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: var(--bg);
    overflow: hidden;
}

/* Cabeçalho = o gatilho do painel + o limpar-tudo, lado a lado. Dois botões irmãos, e
   não um dentro do outro: <button> aninhado é HTML inválido e o toque cairia sempre no de fora. */
.filtro-cabecalho { display: flex; align-items: stretch; }

/* O que o botão de limpar toma de largura sai do resumo do filtro, que é a informação de verdade
   desta linha: a 390px, com o botão de ordenar do lado de fora, "01/08 – sem limite" já quebrava em
   duas linhas. Daí o padding menor deste lado e os 2,25rem do botão (36×44px, bem acima do mínimo de
   24px do WCAG 2.5.8). */
.filtro-cabecalho .filtro-toggle { flex: 1; min-width: 0; padding-right: .35rem; }

/* Divisa à esquerda: é ela que faz os dois lerem como dois alvos, e não como um botão só. */
.filtro-limpar-rapido {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-left: 1px solid var(--line);
    background: transparent;
    color: var(--brand);
    cursor: pointer;
}

.filtro-limpar-rapido .icon { width: 1.15rem; height: 1.15rem; }
.filtro-limpar-rapido:active { background: var(--brand-tint); }

.filtro-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: .6rem .85rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
}

.filtro-toggle .icon { width: 1.1rem; height: 1.1rem; color: var(--muted); flex-shrink: 0; }

/* O rótulo passou a carregar também o termo digitado na busca (que mudou-se para dentro do painel —
   ver FiltroLista), e termo de busca é texto livre sem teto: sem o corte ele empurrava o chevron
   para fora do cabeçalho e, na linha que tem botão de ordenar, comia a largura do vizinho. */
.filtro-toggle-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filtro-chevron { display: inline-flex; transition: transform .15s ease; flex-shrink: 0; }
.filtro-toggle.is-open .filtro-chevron { transform: rotate(180deg); }

.filtro-painel {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 0 .85rem .85rem;
}

/* Busca dentro do painel (primeiro campo, ver FiltroLista). O .search-row do 04-lista.css traz a
   margem que o separava da lista quando ele morava solto acima dela; aqui quem separa os campos é o
   gap do .filtro-painel, e a margem viraria um degrau só embaixo do primeiro. */
.filtro-painel .search-row { margin-bottom: 0; }

/* Moldura do recorte por período: o combo do eixo e o par De/Até decidem juntos uma coisa só, e
   soltos no painel pareciam três filtros empilhados sem relação. Borda leve e fundo um tom acima do
   painel — o suficiente para ler como bloco sem competir com os chips de estado logo acima. */
.filtro-grupo {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .6rem .7rem .7rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    background: var(--bg);
}

/* Título + o "i" do <Ajuda> na ponta direita, que é para onde o balão abre. */
.filtro-grupo-topo { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }

/* --ink-soft, e não --muted: a .8rem em negrito ainda é "texto normal" para o WCAG (large text começa
   em 18,66px em negrito), e o --muted sobre o --bg deste grupo dá ~4,2:1 — reprova nos 4,5:1. */
.filtro-grupo-titulo { font-size: .8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .02em; }

.filtro-grupo .field { margin-bottom: 0; }

.filtro-datas { display: flex; gap: .5rem; }
.filtro-datas .field { flex: 1; min-width: 0; margin-bottom: 0; }

/* input[type=date] nativo reserva espaço fixo pro ícone de calendário — em telas de 360px, com dois
   campos lado a lado, isso empurrava o campo pra fora do painel. Reduz padding/fonte e tira a folga
   que o Chrome deixa entre o texto da data e o ícone. */
.filtro-datas .input {
    width: 100%;
    min-width: 0;
    padding: .55rem .4rem;
    font-size: .85rem;
}

.filtro-datas .input::-webkit-calendar-picker-indicator {
    padding: 0;
    margin-left: .2rem;
}

/* Rótulo + botão de limpar na mesma linha, ACIMA do campo, e colado ao PRÓPRIO rótulo. Duas razões,
   as duas de largura: dentro da moldura do input ele disputaria o espaço que o widget de data do
   Android já não tem (e colidiria com o ícone de calendário nativo); alinhado à direita do campo, ele
   encostava no rótulo "Até" do vizinho e ficava ambíguo de quem era. */
.filtro-data-topo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .15rem;
}

.filtro-data-topo label { margin-bottom: 0; }

/* 1,5rem DESENHADOS, como o .ajuda-gatilho e pelo mesmo motivo: o que sobrar de largura é do campo de
   data, que não tem para onde encolher. O alvo de TOQUE, porém, é maior que o desenho — o ::after o
   estica para ~37px sem ocupar espaço no layout (o app é usado com uma mão, no celular, e 24px é o
   mínimo do WCAG 2.5.8, não um bom tamanho). Cresce mais para cima e para os lados do que para baixo:
   ali embaixo começa o input de data, e alvo que invade o vizinho rouba o toque dele. */
.filtro-data-limpar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: .3rem;
    background: none;
    color: var(--brand);
    cursor: pointer;
}

.filtro-data-limpar::after { content: ''; position: absolute; inset: -.55rem -.4rem -.25rem; }

.filtro-data-limpar .icon { width: 1.1rem; height: 1.1rem; }
.filtro-data-limpar:active { background: var(--brand-tint); }

/* Grupo de chips — filtro multi-seleção de estado, uma barra única (não pills soltos) com cada
   botão contido dentro dela; colunas de largura igual dividindo a barra toda (sem rolagem), só
   ícone (rótulo de texto vai no title/aria-label). Cinza neutro (mesmo tom do badge-rascunho) é o
   padrão não-selecionado; marcado vira cor da marca. Cada botão marca/desmarca sem afetar os demais. */
.chip-group {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: var(--bg);
    margin-bottom: .75rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 2.75rem;
    padding: .5rem;
    color: var(--ink-soft);
    background: transparent;
    border: none;
    border-right: 1px solid var(--line);
    cursor: pointer;
}

.chip:last-child { border-right: none; }

.chip .icon { width: 1.3rem; height: 1.3rem; }

.chip.is-selected {
    color: #fff;
    background: var(--brand);
}

.chip:active { background: rgba(28, 27, 25, .08); }
.chip.is-selected:active { background: var(--brand-dark); }