/* O VISUAL NOVO NO CELULAR (06/11/2026): o menu vira gaveta e os filtros recolhem (ver `visual-novo-celular.js`).
 * Esta folha vem por ultimo no index.html: ela desfaz o trilho de icones de 68 px do `visual-novo.css`. */
.botao-do-menu,
.cortina-do-menu,
.botao-dos-filtros { display: none; }

@media (max-width: 760px) {
  /* ---------------------------------------------------------------- o botao e a cortina */
  html[data-visual="novo"] .botao-do-menu {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 30;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: var(--vn-placa);
    box-shadow: var(--vn-sombra-controle);
    color: var(--vn-tinta);
    cursor: pointer;
  }
  html[data-visual="novo"] .botao-do-menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  html[data-visual="novo"][data-menu-celular="aberto"] .cortina-do-menu {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    background: rgba(20, 31, 33, .35);
  }

  /* ---------------------------------------------------------------- o menu em gaveta */
  html[data-visual="novo"][data-menu] .menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: 280px;
    flex-basis: auto;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    border-radius: 0 16px 16px 0;
    box-shadow: none;
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
  html[data-visual="novo"][data-menu][data-menu-celular="aberto"] .menu {
    box-shadow: 0 12px 40px rgba(20, 31, 33, .22);
    transform: none;
  }
  html[data-visual="novo"][data-menu] #botao-recolher { display: none; }
  html[data-visual="novo"][data-menu] .menu .marca-nome,
  html[data-visual="novo"][data-menu] .menu .marca-texto small { display: inline; }
  html[data-visual="novo"][data-menu] #menu-itens > .sag-nav-group.sem-titulo > .sag-nav-label { display: none; }
  html[data-visual="novo"][data-menu] .menu .sag-nav-label { display: block; }
  html[data-visual="novo"][data-menu] .menu .sag-nav-text { display: inline; width: auto; opacity: 1; }
  html[data-visual="novo"][data-menu] .menu a.sag-nav-link {
    justify-content: flex-start;
    gap: 12px;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
  }
  html[data-visual="novo"][data-menu] #menu-itens,
  html[data-visual="novo"][data-menu] #menu-do-pe { padding-left: 12px; padding-right: 12px; }
  html[data-visual="novo"][data-menu] .menu a.sag-nav-link.aqui::before { left: -12px; }

  /* ---------------------------------------------------------------- a folha inteira para a tela */
  html[data-visual="novo"] .folha { flex: 1 1 100%; width: 100%; min-width: 0; }
  html[data-visual="novo"] #conteudo { padding: 12px; }
  html[data-visual="novo"] #conteudo .visao-geral { padding: 0; }
  html[data-visual="novo"] .gg-abas-titulo { padding-left: 44px; }
  html[data-visual="novo"] .gg-abas-acoes { flex-wrap: wrap; max-width: 100%; }

  /* ---------------------------------------------------------------- os filtros recolhidos */
  html[data-visual="novo"] #conteudo .botao-dos-filtros {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: var(--vn-suave);
    color: var(--vn-tinta);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
  }
  html[data-visual="novo"] #conteudo .filtros-abertos > .botao-dos-filtros { background: var(--vn-at-aqui-fundo, var(--vn-suave)); font-weight: 600; }
  html[data-visual="novo"] #conteudo .co-filtros:not(.filtros-abertos) > :is(.co-filtro:not(.co-filtro-busca), .co-filtros-botoes) { display: none; }
  html[data-visual="novo"] #conteudo .ng-barra-principal:not(.filtros-abertos) > :is(select, .ng-botao-da-barra) { display: none; }
  html[data-visual="novo"] #conteudo .ag-barra:not(.filtros-abertos) > select { display: none; }

  /* Negocios: as vistas passavam por cima do funil. */
  html[data-visual="novo"] #conteudo .ng-barra { flex-direction: column; align-items: stretch; gap: 8px; }
  html[data-visual="novo"] #conteudo .ng-barra-principal { flex-wrap: wrap; width: 100%; }
  html[data-visual="novo"] #conteudo .ng-vistas { position: static; align-self: flex-start; margin: 0; }
  html[data-visual="novo"] #conteudo .ng-busca { flex: 1 1 100%; width: 100%; }

  /* O rodape do menu nao tem titulo de grupo: a linha ficaria so com o icone. */
  html[data-visual="novo"][data-menu] #menu-do-pe .sag-nav-label { display: none; }

  /* Automacao: as linhas passavam de 800 px, e o titulo ficava espremido ao lado do botao. */
  html[data-visual="novo"] #conteudo .vn-au-lista { grid-template-columns: minmax(0, 1fr); }
  html[data-visual="novo"] #conteudo .linha.vn-au-linha { width: 100%; min-width: 0; }
  html[data-visual="novo"] #conteudo .linha.vn-au-linha > * { min-width: 0; }
  html[data-visual="novo"] #conteudo .gg-cabeca { flex-wrap: wrap; }
  html[data-visual="novo"] #conteudo .gg-cabeca > .cresce { flex: 1 1 calc(100% - 48px); min-width: 0; }

  /* Conexoes: os numeros ficavam centralizados, e so nesta tela. */
  html[data-visual="novo"] #conteudo .nw-resumo .cs-cartao { align-items: flex-start; text-align: left; }

  /* Atendimento: os atos passavam por cima do nome; o nome fica na primeira linha. */
  html[data-visual="novo"] .cabeca-da-conversa .quem-da-conversa { flex: 1 1 calc(100% - 52px); min-width: 0; }

  /* Perguntas frequentes: os botoes de contato passavam da beira do cartao. */
  html[data-visual="novo"] #conteudo .falar-com-a-gente .falar-canais { width: 100%; min-width: 0; }
  html[data-visual="novo"] #conteudo .falar-com-a-gente .falar-canais .btn { flex: 1 1 100%; width: 100%; min-width: 0; }

  /* Grupos: o selo longo cortava na beira do cartao. */
  html[data-visual="novo"] #conteudo .grp-chip { max-width: 100%; border-radius: 9px; white-space: normal; }
}