/* mobile.css - ERP Venepar no celular (13/08/2026).
   Vale abaixo de 720px. Acima disso NADA aqui se aplica: no computador as
   telas continuam exatamente como estao.
   Este arquivo e o unico lugar de ajuste de celular — nao repita regra dentro
   das paginas. */

/* O botao e criado por JavaScript em toda pagina com menu lateral; fora do
   celular ele fica escondido. Sem esta linha ele aparece no computador. */
#mobMenuBtn{ display:none; }

@media screen and (max-width:720px){

  /* ---------- esqueleto: tudo em coluna unica ---------- */
  .app{ flex-direction:column !important; min-height:0 !important; }
  .main-col{ width:100% !important; min-width:0 !important; }
  main{ max-width:none !important; padding:14px 12px 40px 12px !important; }

  /* ---------- menu vira botao no topo ---------- */
  .sidebar{ width:100% !important; flex:0 0 auto !important; position:static !important;
    height:auto !important; padding:10px 14px !important; }
  .sidebar .brand{ display:flex !important; align-items:center; justify-content:space-between;
    gap:12px; margin:0 !important; }
  .sidebar .brand img{ height:26px !important; width:auto !important; }
  .sidebar-footer{ display:none !important; }
  .nav-list{ display:none !important; }
  body.mob-menu-aberto .nav-list{ display:flex !important; flex-direction:column;
    gap:4px; margin-top:10px; }
  body.mob-menu-aberto .nav-item{ width:100%; text-align:left; }
  #mobMenuBtn{ display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.10); color:#fff; font-family:inherit; font-size:14px;
    font-weight:700; padding:9px 14px; border-radius:9px; cursor:pointer; white-space:nowrap; }

  /* ---------- cabecalho e cartoes ---------- */
  .topbar{ flex-wrap:wrap; gap:8px; padding:12px 14px !important; }
  .topbar h1{ font-size:17px !important; line-height:1.25; }
  .badge-proto{ display:none !important; }
  .card{ padding:14px 12px !important; border-radius:12px !important; }
  .card h2{ font-size:18px !important; }
  .card h3{ font-size:15px !important; }
  .sub{ font-size:12.5px !important; }

  /* ---------- grades: uma coluna (duas nos indicadores) ---------- */
  .ag-kpis, .conc-kpis{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:8px !important; }
  .grid2, .ag-dash-grid, .conc-upload-grid, .mk-grid, .pdf-box-grid,
  .cobranca-grid, .ma-grid{ grid-template-columns:1fr !important; }

  /* ---------- campos e botoes: alcance de dedo ---------- */
  /* 16px no campo evita o zoom automatico do iOS ao tocar */
  input, select, textarea{ font-size:16px !important; }
  button, .btn, a.btn, .nav-item{ min-height:42px; }
  .ag-busca{ flex-direction:column !important; align-items:stretch !important; gap:8px !important; }
  /* VNP_BUSCA_ALTURA inicio */
  /* A barra vira coluna acima. Em coluna, flex-basis vale para a ALTURA:
     o .ag-busca input{flex:0 0 320px} do financeiro.html fazia a caixa de
     busca ficar com 320px de altura. Zerar a base resolve sem mexer la. */
  .ag-busca input, .ag-busca select, .ag-busca button{ width:100% !important;
    flex:0 0 auto !important; height:auto !important; max-width:none !important; }
  .ag-busca input[type=search]{ min-height:44px; }
  /* VNP_BUSCA_ALTURA fim */
  .ag-toolbar{ flex-wrap:wrap; gap:8px; }

  /* ---------- formularios de rotulo + campo ---------- */
  /* .grid-client e 220px 1fr 220px 1fr: quatro colunas fixas nao cabem em 390px.
     No celular vira uma coluna — rotulo em cima, campo embaixo, largura toda. */
  .grid-client{ grid-template-columns:1fr !important; gap:2px 0 !important; }
  .grid-client label{ margin-top:9px; font-size:12.5px !important; }
  .grid-client input, .grid-client select, .grid-client .ref-cell{ width:100% !important; }
  .grid-client .ref-cell{ display:flex; gap:6px; align-items:center; }
  .grid-client .ref-cell input{ flex:1 1 auto; min-width:0; }
  .doc-info{ grid-template-columns:1fr !important; max-width:none !important; }
  .modal-box{ width:auto !important; max-width:94vw !important; }
  iframe{ max-width:100% !important; }

  /* ---------- abas de representante rolam de lado ---------- */
  .rep-tabs{ overflow-x:auto; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch;
    padding-bottom:4px; }
  .rep-tab-btn{ white-space:nowrap; }

  /* ---------- tabelas: nunca estouram a largura da tela ---------- */
  /* rolagem dentro da propria tabela; o resto da pagina fica quieto */
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
    width:100% !important; min-width:0 !important; }
  table th, table td{ padding:7px 9px !important; font-size:12.5px !important; white-space:nowrap; }
  .ag-scroll, .cc-scroll{ overflow:visible !important; max-height:none !important; border:0 !important; }

  /* ---------- as duas telas de cobranca: cada linha vira um cartao ---------- */
  /* Os rotulos saem da POSICAO da coluna. Mudou a ordem no thead? Muda aqui. */
  #blTable, #blTable tbody, #blTable tr, #blTable td,
  #agTable, #agTable tbody, #agTable tr, #agTable td{ display:block; width:auto; }
  #blTable, #agTable{ overflow:visible; border-collapse:collapse; }
  #blTable thead, #agTable thead,
  #blTable tfoot, #agTable tfoot{ display:none; }
  #blTable tr, #agTable tr{ border:1px solid var(--gray-light, #dcdfe4); border-radius:10px;
    background:#fff; padding:11px 13px; margin-bottom:10px; }
  #blTable td, #agTable td{ display:flex; align-items:center; justify-content:space-between;
    gap:12px; text-align:right !important; padding:4px 0 !important; border:0 !important;
    font-size:13px !important; white-space:normal; min-width:0; overflow-wrap:anywhere; }
  #blTable td::before, #agTable td::before{ font-size:11.5px; font-weight:700;
    color:var(--gray-main, #8a9099); text-align:left; white-space:nowrap; flex:0 0 auto; }

  /* Boletos: Codigo | Cliente | Representante | Boletos | Total vencido | Mais antigo | Atraso | Acao */
  #blTable td:nth-child(1)::before{ content:"Código"; }
  #blTable td:nth-child(3)::before{ content:"Representante"; }
  #blTable td:nth-child(4)::before{ content:"Boletos"; }
  #blTable td:nth-child(5)::before{ content:"Total vencido"; }
  #blTable td:nth-child(6)::before{ content:"Mais antigo"; }
  #blTable td:nth-child(7)::before{ content:"Atraso"; }

  /* Faturas: Codigo | Cliente | Valor a Cobrar | Faturas | Status | Data | Forma | Acao */
  #agTable td:nth-child(1)::before{ content:"Código"; }
  #agTable td:nth-child(3)::before{ content:"Valor a Cobrar"; }
  #agTable td:nth-child(4)::before{ content:"Faturas em aberto"; }
  #agTable td:nth-child(5)::before{ content:"Status"; }
  #agTable td:nth-child(6)::before{ content:"Data Agendada"; }
  #agTable td:nth-child(7)::before{ content:"Forma Pagto"; }

  #blTable td:nth-child(2), #agTable td:nth-child(2){ display:block; text-align:left !important;
    font-size:14.5px !important; font-weight:800; line-height:1.25; color:var(--gray-dark, #2b2f36);
    padding:0 0 7px 0 !important; border-bottom:1px solid var(--white-soft, #f0f2f5) !important;
    margin-bottom:6px; }
  #blTable td:nth-child(2)::before, #agTable td:nth-child(2)::before{ display:none; }
  #blTable td:nth-child(5), #agTable td:nth-child(3){ font-weight:800; font-size:15px !important; }
  #blTable td:last-child, #agTable td:last-child{ display:block; margin-top:9px;
    padding-top:9px !important; border-top:1px solid var(--white-soft, #f0f2f5) !important; }
  #blTable td:last-child::before, #agTable td:last-child::before{ display:none; }
  #blTable td:last-child > *, #agTable td:last-child > *{ width:100%; }
  #agTable td select, #agTable td input{ max-width:60%; }
  #blTable td[colspan], #agTable td[colspan]{ display:block; text-align:center !important; }
  #blTable td[colspan]::before, #agTable td[colspan]::before{ display:none; }
}

/* VNP_MOBILE_V2 inicio ====== o celular do ERP (18/08/2026) ======
   Pedido do Renato: "melhorar a apresentacao no mobile, especialmente nos
   menus... vamos fazer essa mudanca em todos os menus".

   O que muda, em TODA tela do ERP que tenha menu lateral:
     1. o botao "Menu" sai de cena e o menu vira uma faixa de abas que rola de
        lado, grudada no alto — um toque troca de tela, nada cobre o conteudo;
     2. topo mais baixo (logo menor, barra de titulo enxuta);
     3. numero principal menor e medidas do hero em duas colunas;
     4. grafico de colunas mais baixo;
     5. tabela com celulas marcadas (data-rot) vira cartao, como ja acontecia
        nas telas de cobranca.

   Este bloco fica no FIM do arquivo de proposito: vence as regras de cima
   (a gaveta antiga) sem precisar apaga-las. Para voltar atras:
   node instalar-mobile-v2.js --desfazer --gravar */
@media screen and (max-width:720px){

  /* ---------- 1. menu: gaveta vira faixa de abas ---------- */
  #mobMenuBtn{ display:none !important; }

  .sidebar{ position:sticky !important; top:0; z-index:40; padding:0 !important;
    box-shadow:0 2px 10px rgba(0,0,0,.18); }
  .sidebar .brand{ padding:8px 12px 2px !important; justify-content:center !important; }
  .sidebar .brand img{ height:19px !important; }

  .nav-list{
    display:flex !important; flex-direction:row !important;
    visibility:visible !important; opacity:1 !important;
    max-height:none !important; height:auto !important; position:static !important;
    transform:none !important; overflow-x:auto !important; overflow-y:hidden !important;
    gap:6px !important; padding:6px 10px 9px !important; margin:0 !important;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .nav-list::-webkit-scrollbar{ display:none; }
  .nav-list .nav-item{
    flex:0 0 auto !important; width:auto !important; scroll-snap-align:start;
    border:0 !important; border-radius:99px !important;
    padding:7px 14px !important; font-size:12.5px !important; font-weight:600;
    background:rgba(255,255,255,.10) !important; color:#E8E8E8 !important;
    white-space:nowrap; min-height:0 !important; text-align:center !important;
  }
  .nav-list .nav-item.active{
    background:var(--red, #b21e23) !important; color:#fff !important;
    box-shadow:0 1px 6px rgba(0,0,0,.28);
  }
  /* a gaveta antiga nao existe mais; se a classe ficar no body, nada acontece */
  body.mob-menu-aberto .nav-list{ flex-direction:row !important; margin-top:0 !important; }

  /* ---------- 2. topo enxuto ---------- */
  .topbar{ padding:10px 12px !important; }
  .topbar h1{ font-size:17px !important; }
  .topbar button[data-logout]{ padding:6px 12px !important; font-size:12px !important;
    min-height:0 !important; }
  main{ padding:12px 12px 36px 12px !important; }

  /* ---------- 3. hero: numero menor, medidas em duas colunas ---------- */
  .hero{ gap:12px !important; }
  .hero-num{ font-size:30px !important; letter-spacing:-.5px; }
  .hero-rot{ font-size:10.5px !important; }
  .hero-delta{ font-size:11.5px !important; }
  .hero-tres{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px 14px !important; margin-top:14px !important; padding-top:12px !important; }
  .hero-tres .rot{ font-size:10px !important; }
  .hero-tres .val{ font-size:15px !important; }
  .kpis{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:10px !important; }
  .kpi{ padding:12px 13px !important; }
  .kpi .value{ font-size:19px !important; }
  .kpi .label{ font-size:10px !important; }
  .kpi .pe{ font-size:11px !important; }

  /* ---------- 4. grafico de colunas ---------- */
  .gr{ padding-left:0 !important; }
  .gr-area{ height:128px !important; }
  .gr-tick{ display:none !important; }
  .gr-col .marca{ display:none !important; }   /* nao cabe: encavala a coluna vizinha */
  .gr-eixo span{ font-size:9px !important; }
  .gr-nota{ font-size:11px !important; }

  /* ---------- 5. tabela com rotulo vira cartao ---------- */
  /* So mexe em tabela cujas celulas trazem data-rot (as telas novas) e nas
     .vd dos dashboards. Tabela sem rotulo continua com rolagem lateral, como
     era — sem rotulo, virar cartao deixaria numeros soltos sem nome. */
  table.vd, table.vd tbody, table.vd tr, table.vd td{
    display:block !important; width:auto !important; overflow:visible !important; }
  table.vd thead{ display:none !important; }
  table.vd tr{ border:1px solid var(--gray-light, #dcdfe4); border-radius:12px;
    padding:10px 12px; margin-bottom:9px; background:#fff; }
  table.vd td{ display:flex !important; align-items:baseline; justify-content:space-between;
    gap:14px; border:0 !important; padding:3px 0 !important; text-align:right !important;
    white-space:normal !important; font-size:13px !important; }
  table.vd td[data-rot]::before{ content:attr(data-rot); font-size:11px; font-weight:700;
    color:var(--gray-main, #8a9099); text-align:left; white-space:nowrap; }
  table.vd td.primeira{ display:block !important; text-align:left !important;
    font-weight:800; font-size:14.5px !important; padding:0 0 8px 0 !important;
    border-bottom:1px solid var(--white-soft, #f0f2f5) !important; margin-bottom:6px; }
  table.vd td.primeira::before{ display:none; }
}

@media screen and (max-width:400px){
  .hero-num{ font-size:26px !important; }
  .kpis{ gap:8px !important; }
  .kpi .value{ font-size:17.5px !important; }
  .nav-list .nav-item{ padding:6px 12px !important; font-size:12px !important; }
}
/* VNP_MOBILE_V2 fim */