/* Celular (3.7.1, D12). Carregado depois de efeitos.css: sobrescreve a altura dos atalhos e o quebra-linha das abas. */
/* D12 (3.7.1), celular: alvo de toque de 44 px nos atalhos de período e nas abas; as abas e os atalhos nunca
   quebram de linha, rolam por dentro, e a borda esmaecida avisa que há mais para o lado (rolagem-borda.js). */
@media (max-width: 620px) {
  /* 3.9.1: na gaveta Filtros os atalhos quebram em 2 linhas, 3 por linha: o "Hoje" ficava escondido à
     esquerda e o "Personalizado" cortado à direita. A pílula que desliza segue o atalho nas duas linhas. */
  .atalhos { height: auto; flex-wrap: wrap; overflow: visible; }
  .atalho { flex: 1 1 calc(33.33% - 2px); justify-content: center; min-height: 44px; padding: 0 8px; }
  .abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .abas::-webkit-scrollbar { display: none; }
  /* Abas do grupo (3.7.3): alvo de 44 px e preenchimento menor, para três abas de rótulo comum caberem inteiras em 390 px;
     com mais abas a barra rola por dentro e a borda esmaecida avisa. */
  .tabs .tab { padding: 10px 11px; min-height: 44px; }
  /* 3.9: respiro lateral menor pras cinco abas de fábrica caberem em 390 px ("Dados" saía cortada). */
  .aba { flex: 1 0 auto; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 9px; }
}
.atalhos.rola-dir:not(.rola-esq), .abas.rola-dir:not(.rola-esq), .tabs.rola-dir:not(.rola-esq) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); }
.atalhos.rola-esq:not(.rola-dir), .abas.rola-esq:not(.rola-dir), .tabs.rola-esq:not(.rola-dir) { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent); }
.atalhos.rola-esq.rola-dir, .abas.rola-esq.rola-dir, .tabs.rola-esq.rola-dir { -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 34px), transparent); }

/* 3.9, celular: o primeiro número na primeira tela (auditoria de 25/10/2026: cerca de 600 px de faixa,
   abas e filtros antes dele; meta: até 250 px a 390 px de largura).
   - A faixa vira uma linha de estado: período curto e idade dos números à esquerda, Filtros e Atualizar
     à direita. O nome do painel já está na barra do topo (até duas linhas); o h1 fica pro leitor de tela.
   - A barra de filtros fica atrás do botão Filtros (lib/filtros-celular.js). O estado mora no botão:
     painel redesenhado nasce com o botão fechado e a barra escondida.
   - Menos respiro entre as peças do topo. */
.faixa__periodo-curto { display: none; }
@media (max-width: 620px) {
  .topbar:not(.topbar--lista) { padding-top: 9px; padding-bottom: 9px; min-height: 56px; }
  .topbar:not(.topbar--lista) .brand .name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.25; }
  #app > .faixa, .esq-faixa { margin-top: -8px; }
  .faixa { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 2px 0; }
  .faixa__marca { flex: 0 0 auto; gap: 0; }
  /* Sem logotipo a marca não ocupa lugar, mas o h1 continua lá pro leitor de tela (nunca display: none). */
  .faixa__marca:not(:has(.faixa__logo)) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .faixa__textos { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .faixa__logo { padding: 4px 6px; }
  .faixa__logo-img { height: 22px; max-width: 72px; }
  .faixa__dominio { display: none; }
  .faixa__lado { flex: 1 1 auto; min-width: 0; width: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; align-items: center; gap: 1px 8px; }
  .faixa__lado > .faixa__periodo { grid-area: 1 / 1; min-width: 0; text-align: left; }
  .faixa__periodo-rotulo, .faixa__periodo-valor { display: none; }
  .faixa__periodo-curto { display: block; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .faixa__lado > .dados-estado { display: contents; }
  .faixa__lado .dados-estado__texto { grid-area: 2 / 1; min-height: 0; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .faixa__lado .dados-estado__botao { grid-area: 1 / 3 / 3 / 4; width: 44px; height: 44px; padding: 0; }
  .faixa__lado .dados-estado__rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .faixa__lado .dados-estado__icone { width: 16px; height: 16px; }
  .faixa__lado > .filtros-abrir { grid-area: 1 / 2 / 3 / 3; }
  .faixa + .abas, .esq-faixa + .esq-abas { margin-top: 6px; }
  #app:has(.filtros-abrir[aria-expanded="false"]) #filterbar, .esqueleto .esq-filtro { display: none; }
  .abas + .filterbar { margin-top: 12px; }
  #dashbody > .section:first-child, .esqueleto > .section { margin-top: 8px; }
}
/* Botão Filtros: mesma peça do Atualizar (cores da faixa), alvo de toque de 44 px. Um ponto na cor de
   "bom" avisa que há filtro aplicado e o número na tela está filtrado. */
.filtros-abrir {
  appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; padding: 0 13px; border-radius: 9px; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--faixa-texto);
  background: transparent; border: 1px solid color-mix(in srgb, var(--faixa-texto) 28%, transparent);
}
.filtros-abrir[aria-expanded="true"] { background: color-mix(in srgb, var(--faixa-texto) 14%, transparent); }
.filtros-abrir:focus-visible { outline: 2px solid var(--focus-ring, var(--accent-text)); outline-offset: 2px; }
.filtros-abrir__icone { flex-shrink: 0; }
.filtros-abrir[data-aplicado]::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--bg); }
@media (min-width: 621px) { .filtros-abrir { display: none; } }