/* DataHub Monitor — adaptação para telas pequenas.
   Carregado DEPOIS do app.css e do diagnostico.css, então sobrescreve. */

/* O botão do menu só aparece quando a barra não cabe (ver 1100px abaixo). */
.menu-botao{
  display:none;background:transparent;border:1px solid rgba(255,255,255,.28);
  border-radius:7px;color:#fff;padding:6px 10px;font-size:18px;line-height:1;
  cursor:pointer;flex:0 0 auto;
}
.menu-botao:hover{background:rgba(255,255,255,.12)}

/* O menu tem 9 itens que não encolhem (white-space:nowrap): a barra precisa de
   ~1170px para exibir todos (medido). Abaixo disso os últimos ficavam fora da tela e a
   página inteira ganhava rolagem lateral — inclusive em tablet deitado e em
   janela estreita de desktop, não só no celular. Por isso o menu retrátil vale
   até 1180px, bem acima do ponto onde o resto do layout muda. */
@media (max-width: 1180px) {
  .topo{
    height:auto;min-height:52px;padding:8px 12px;gap:10px;flex-wrap:wrap;
  }
  .menu-botao{display:block;order:3;margin-left:auto}
  .marca{order:1;flex:1;min-width:0}
  .marca img{height:20px}
  .marca .divisor{font-size:14px;padding-left:8px}

  .topo nav{
    order:4;flex:0 0 100%;display:none;flex-direction:column;gap:1px;
    padding:8px 0 4px;border-top:1px solid rgba(255,255,255,.16);margin-top:8px;
  }
  /* Em tela curta (celular deitado) os 9 itens passariam da altura visível e,
     como o topo é sticky, cobririam a página inteira sem forma de rolar. */
  .topo nav.aberto{display:flex;max-height:calc(100vh - 70px);overflow-y:auto}
  .topo nav a{padding:11px 12px;font-size:15px;border-radius:7px}

  /* Quem sou eu e o botão sair continuam sempre visíveis: sair não pode
     depender de abrir menu. Já o relógio de atualização é dispensável. */
  .direita{order:2;gap:10px;font-size:12.5px}
  .direita .atualizado{display:none}
}

@media (max-width: 860px) {
  main{padding:16px 12px 48px}
  h1{font-size:22px}
  .legenda{font-size:13px}

  .cartoes{grid-template-columns:1fr;gap:10px;margin-bottom:16px}
  .cartao{padding:12px 14px}
  .cartao .valor{font-size:23px}

  .bloco > header{
    flex-wrap:wrap;gap:8px;padding:12px 14px;
  }
  .bloco > header h2{font-size:15px}
  .bloco .corpo{padding:13px}

  /* Filtro em coluna: no celular os campos lado a lado ficam estreitos demais
     para digitar. */
  .filtros{width:100%;gap:8px}
  .filtros select,
  .filtros input[type=search],
  .filtros input[type=date],
  .filtros button{width:100%}
  .filtros .campo{width:100%}
  /* O autocomplete embrulha o input num .ac: quem precisa esticar agora é o
     embrulho, senão o campo de busca encolhe sozinho no meio dos filtros. */
  .filtros .ac{width:100%;display:block}
  .ac-lista{max-width:none}
  .filtros label.caixa{width:auto}

  table{font-size:12.5px}
  th, td{padding:7px 8px}

  /* `table{width:100%}` no celular esmaga as colunas: cada célula quebrava em
     3-4 linhas e a linha ficava com 112px de altura. Deixando a tabela crescer
     e as células sem quebra, a linha volta a ter uma altura só e o dedo rola
     de lado dentro do .rolagem — o corpo da página não estoura. */
  .rolagem table{width:auto;min-width:100%}
  .rolagem th, .rolagem td{white-space:nowrap}
  /* Exceção: mensagem de erro e nome de arquivo são longos demais para caber
     numa linha; ali a quebra é melhor que uma tabela de 2 metros. */
  .rolagem td.msg, .rolagem td.arquivo{
    white-space:normal;min-width:190px;max-width:62vw;word-break:break-word;
  }

  /* A janela do diagnóstico ocupava 920px fixos com margem de 28px. */
  .dx-fundo{padding:0}
  .dx-janela{max-width:100%;max-height:100vh;border-radius:0}
  #dx-corpo{padding:14px}
  .dx-janela > header{padding:12px 14px}
  /* 28px de altura e alvo de dedo apertado; no celular vale a pena crescer. */
  .dx-pdf{padding:9px 14px;font-size:13px}
  .dx-veredito{flex-direction:column;gap:8px;padding:13px 14px}
  .dx-veredito p{font-size:14px}
  .dx-caminho{padding:12px 13px 12px 40px}
  .dx-rodape{flex-direction:column;align-items:flex-start;gap:8px}
  .dx-tabela{font-size:11.5px}
}

@media (max-width: 480px) {
  .marca .divisor{border:none;padding-left:4px;margin-left:0}
  .cartao .valor{font-size:21px}
  main{padding:14px 10px 40px}
  /* Tabela larga no celular: o dedo rola de lado, mas precisa saber que dá.
     A sombra à direita é a dica visual. */
  .rolagem{
    background:linear-gradient(to left, rgba(14,46,77,.07), transparent 24px);
    border-radius:0 0 8px 8px;
  }
}