/* Celular e tablet. Carregado depois de tema.css, app.css e ecommerce.css; no computador (> 1024 px, mouse) nada daqui se aplica.
   Faixas: tablet 700–1024 px (menu em gaveta até 900 px), celular < 700 px. Tudo dentro de "screen" para não mexer na impressão.
   O JS que acompanha está em js/responsivo.js (rótulos das células, container de rolagem, "mais ações" no cabeçalho). */

/* ================================================================ até 1024 px: nada rola a página para o lado */
@media screen and (max-width: 1024px) {
  .tabela-rola { overflow-x: auto; max-width: 100%; }
  .abas-linha { min-width: 0; }
  .abas-linha .abas { min-width: 0; }
  .abas-pagina { overflow-x: auto; scrollbar-width: thin; }
  .abas-pagina a { white-space: nowrap; }
  .migalhas { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
  .grade-cartoes { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .cartoes, .cartoes-inventario { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  .cfg-lista a, .cfg-lista span.cfg-item { gap: 12px; min-width: 0; overflow-wrap: anywhere; }
  .cfg-busca { max-width: 100%; }
  .ec-menu-item > div { flex-wrap: wrap; }
  .ec-menu-item > div > * { min-width: 0; overflow-wrap: anywhere; }
  .vazio-cartao { max-width: 100%; }
  img, video, canvas { max-width: 100%; }
  pre { max-width: 100%; overflow-x: auto; }
}

/* tablet (700–1024 px): as listas continuam tabela (rolam dentro do próprio container); a coluna principal não fica espremida */
@media screen and (min-width: 700px) and (max-width: 1024px) {
  table.lista td.m-t, table.itens td.m-larga { min-width: 170px; }
  table.itens input, table.itens select { min-width: 76px; }
  table.lista td.m-sit, table.lista td.m-v, table.lista td.m-s { white-space: nowrap; }
}

/* ================================================================ até 900 px: menu em gaveta, formulários em 2 colunas */
@media screen and (max-width: 900px) {
  /* gaveta: fundo escurecido (tocar nele fecha, ver js/responsivo.js) e largura confortável */
  #app.menu-aberto::after { content: ""; position: fixed; inset: 0; background: rgba(10, 16, 40, .42); z-index: 39; }
  .menu { width: min(300px, 86vw); }
  .menu .apps-movel button { min-height: 40px; }
  .topo { position: sticky; top: 0; z-index: 30; gap: 8px; }
  .topo .hamburguer { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
  #seloAmbiente { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }

  /* formulários: 2 colunas (os campos estreitos lado a lado, os largos na linha inteira) */
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade > .c1, .grade > .c2, .grade > .c3, .grade > .c4, .grade > .c5, .grade > .c6 { grid-column: span 1; }
  .grade > .c7, .grade > .c8, .grade > .c9, .grade > .c10, .grade > .c11, .grade > .c12 { grid-column: 1 / -1; }
  .rodape-form, .rodape-lista { bottom: -40px; flex-wrap: wrap; } /* = padding de baixo do #conteudo (o sticky conta a partir do padding) */
  .rodape-fixo { flex-wrap: wrap; }
  .ficha { max-width: 100%; }
  .duas-colunas { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ celular (< 700 px) */
@media screen and (max-width: 699px) {
  :root { --tam-titulo: 19px; }
  #conteudo { padding: 12px 14px 40px; }
  .aviso-topo { padding: 8px 14px; font-size: 12.5px; }

  /* ---- cabeçalho da página: trilha, título e botões quebram de linha; secundários vão para "mais ações" (JS) */
  .topo-pagina { gap: 8px; align-items: flex-start; }
  .topo-pagina .migalhas { font-size: 13px; flex: 1 1 100%; }
  .topo-pagina .acoes { margin-left: 0; flex: 1 1 100%; gap: 8px; }
  .topo-pagina .acoes > .btn.primario, .topo-pagina .acoes > a.btn.primario { flex: 1 1 auto; justify-content: center; }
  .cabecalho { margin-bottom: 10px; }
  .cabecalho h1, .ficha .ficha-titulo h1 { overflow-wrap: anywhere; }
  .cabecalho .acoes { flex-wrap: wrap; }

  /* ---- menus suspensos, ações da linha (⋯), chips e seletor de colunas: folha que sobe do rodapé */
  .menu-suspenso .lista, .menu-flutuante, .popover {
    position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important;
    width: auto !important; min-width: 0 !important; max-height: 72vh; overflow-y: auto; z-index: 70; border-radius: 14px; padding: 10px;
    box-shadow: 0 0 0 100vmax rgba(10, 16, 40, .35), var(--sombra-flutuante); }
  .menu-suspenso .lista button, .menu-flutuante button { min-height: 44px; font-size: 15px; }
  .menu-suspenso .lista > .btn, .menu-suspenso .lista > a.btn { display: flex; width: 100%; justify-content: flex-start; border: 0; border-radius: 6px; padding: 8px 10px;
    background: none; font-weight: 400; color: var(--texto); min-height: 44px; }
  .menu-suspenso .lista > .btn:hover, .menu-suspenso .lista > a:hover { background: var(--fundo-suave); text-decoration: none; }
  .menu-suspenso .lista > a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 6px; color: var(--texto); font-size: 15px; }
  .topo-pagina .links-acao.vazio-movel { display: none; }
  .popover .pop-opcoes button { min-height: 40px; padding: 6px 14px; }
  .popover .pop-rodape { position: sticky; bottom: -10px; margin: 12px -10px -10px; padding: 10px; background: var(--fundo); border-top: 1px solid var(--borda); }
  .popover .pop-rodape .btn { flex: 1; justify-content: center; }
  .popover.largo .grade { grid-template-columns: minmax(0, 1fr); }

  /* ---- barra de busca e filtros */
  .barra-filtros { gap: 8px; }
  .campo-busca { flex: 1 1 100%; min-width: 0; }
  .filtros-linha > * { max-width: 100%; }
  .rel-filtros { grid-template-columns: minmax(0, 1fr); }
  .abas button { padding: 8px 14px 6px; }

  /* ---- formulários: uma coluna, campos na largura toda, 16 px (o iPhone não dá zoom no foco) */
  .grade { grid-template-columns: minmax(0, 1fr); }
  .grade > *, .grade > [class*="c"], .rel-filtros > * { grid-column: 1 / -1 !important; }
  .campo input, .campo select, .campo textarea, input.ctl, select.ctl, textarea.ctl, .campo-busca input, .ms-botao { font-size: 16px; }
  .campo input[type=date], .campo input[type=datetime-local], .campo input[type=time] { min-height: 44px; -webkit-appearance: none; appearance: none; }
  .campo.check label { margin-top: 4px; }
  .rodape-form, .rodape-fixo { gap: 8px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); z-index: 5; }
  .rodape-form, .rodape-fixo { flex-wrap: nowrap; }
  .rodape-form > .btn, .rodape-fixo > .btn { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; min-height: 44px; padding: 6px 10px; }
  .totais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .totais-linha { flex-wrap: wrap; gap: 12px 22px; }
  .leitor { flex-wrap: wrap; }
  .leitor input { max-width: 100%; min-width: 0; }
  .grupo-inline { flex-wrap: wrap; }

  /* ---- listas: cada linha vira um cartão (tabelas com data-cartoes; colunas marcadas em ui.js › listagem, campo "movel") */
  .tabela-rola:has(> table[data-cartoes]), .tabela-rola:has(> table.itens) { overflow: visible; }
  table[data-cartoes], table[data-cartoes] > tbody, table[data-cartoes] > tfoot { display: block; width: 100%; }
  table[data-cartoes] > thead { display: none; }
  table[data-cartoes] > thead:has(th.m-sel) { display: block; }
  table[data-cartoes] > thead > tr { display: flex; align-items: center; }
  table[data-cartoes] > thead th { display: none; }
  table[data-cartoes] > thead th.m-sel { display: flex; align-items: center; gap: 10px; width: auto; padding: 8px 10px; border: 0; }
  table[data-cartoes] > thead th.m-sel::after { content: "selecionar todos"; font-size: 13px; color: var(--texto-suave); }
  table[data-cartoes] > tbody > tr, table[data-cartoes] > tfoot > tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 3px;
    position: relative; padding: 12px 8px 12px 10px; border-bottom: 1px solid var(--borda); }
  table[data-cartoes] > tbody > tr > td, table[data-cartoes] > tfoot > tr > td { display: block; flex: 1 1 100%; min-width: 0;
    width: auto; padding: 1px 0; border: 0; background: transparent !important; text-align: right; font-size: 13.5px; overflow-wrap: anywhere; }
  table[data-cartoes] td::before { content: attr(data-rot); float: left; max-width: 50%; margin-right: 12px; text-align: left; color: var(--texto-rotulo); font-weight: 300; }
  table[data-cartoes] td.m-vazio:not(.m-t):not(.m-sel):not(.m-acoes) { display: none; }
  table[data-cartoes] td[data-rot=""]::before, table[data-cartoes] td:not([data-rot])::before { content: none; }
  table[data-cartoes] td[colspan] { display: block; text-align: left; }
  table[data-cartoes] td:empty { display: none; }
  table[data-cartoes] > tbody > tr.sel { background: var(--fundo-selecionado); }
  table[data-cartoes] > tbody > tr:not(.sem-hover):active { background: var(--fundo-linha-hover); }
  table[data-cartoes] tr.sem-hover { padding: 0; }
  /* caixa de seleção à esquerda e ⋯ à direita, fora do fluxo */
  table[data-cartoes] > tbody > tr:has(> .m-sel) { padding-left: 42px; }
  table[data-cartoes] > tbody > tr:has(> .m-acoes) { padding-right: 46px; }
  table[data-cartoes] td.m-sel { position: absolute; left: 6px; top: 8px; width: 32px; height: 36px; display: grid; place-items: center; padding: 0; }
  table[data-cartoes] td.m-acoes { position: absolute; right: 2px; top: 4px; width: auto; padding: 0; }
  table[data-cartoes] td.m-acoes .btn-pontos { width: 40px; height: 40px; font-size: 20px; }
  table[data-cartoes] input[type=checkbox] { width: 20px; height: 20px; }
  /* linha 1: número + título + valor; linha 2: dados secundários e situação; depois as linhas com rótulo */
  table[data-cartoes] > tbody > tr::after, table[data-cartoes] > tfoot > tr::after { content: ""; order: 4; flex: 1 1 100%; height: 0; }
  table[data-cartoes] > tbody > tr > td, table[data-cartoes] > tfoot > tr > td { order: 6; }
  table[data-cartoes] td.m-x { display: none; }
  /* tabelas sem marcação (fora da listagem): a coluna de nome vira título e o "Nº" vai antes dele (js/responsivo.js) */
  table[data-cartoes] td.m-num { order: 1; flex: none; display: block; color: var(--texto-suave); font-size: 13px; }
  table[data-cartoes] td.m-larga { order: 2; flex: 1 1 0; display: block; text-align: left; font-size: 14.5px; font-weight: 500; color: var(--texto); }
  table[data-cartoes] td.m-num::before, table[data-cartoes] td.m-larga::before { content: none; }
  table[data-cartoes] td:not(.m-sel) { width: auto; }
  table[data-cartoes] td.m-id { order: 1; flex: none; display: block; color: var(--texto-suave); font-size: 13px; }
  table[data-cartoes] td.m-t { order: 2; flex: 1 1 0; display: block; text-align: left; font-size: 15px; font-weight: 500; color: var(--texto); }
  table[data-cartoes] td.m-v { order: 3; flex: none; display: block; margin-left: auto; text-align: right; font-size: 15px; font-weight: 600; white-space: nowrap; }
  table[data-cartoes] td.m-s, table[data-cartoes] td.m-sit { order: 5; flex: none; display: inline-flex; align-items: center; gap: 6px; text-align: left;
    font-size: 13px; color: var(--texto-suave); }
  table[data-cartoes] td.m-l { order: 6; }
  table[data-cartoes] td.m-id::before, table[data-cartoes] td.m-t::before, table[data-cartoes] td.m-v::before,
  table[data-cartoes] td.m-s::before, table[data-cartoes] td.m-sit::before { content: none; }
  /* bolinha de situação ganha o nome ao lado (vem do title) */
  table[data-cartoes] td.m-sit .bolinha-sit { width: auto; height: auto; background: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 0; }
  table[data-cartoes] td.m-sit .bolinha-sit::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cor, var(--texto-fraco)); }
  table[data-cartoes] td.m-sit .bolinha-sit::after { content: attr(title); color: var(--texto-suave); }
  table[data-cartoes] .ec-mini { width: 44px; height: 44px; }
  /* tabelas do E-commerce (.ec-tabela): coluna de ações (⋯ no celular) no canto do cartão */
  table.ec-tabela[data-cartoes] > tbody > tr:has(> .ec-col-acoes) { padding-right: 46px; }
  table.ec-tabela[data-cartoes] td.ec-col-acoes { position: absolute; right: 2px; top: 4px; width: auto; }
  table.ec-tabela[data-cartoes] td.ec-col-acoes .ec-ic-btn { width: 40px; height: 40px; }
  table.ec-tabela[data-cartoes] td.ec-descontos { text-align: left; }
  table.ec-tabela[data-cartoes] td.ec-descontos::before { float: none; display: block; max-width: none; margin: 0; }
  table.ec-tabela[data-cartoes] td.ec-vazio { text-align: center; }
  .ec-tabela-wrap:has(> table[data-cartoes]) { overflow: visible; }

  /* ---- itens editáveis (pedido, nota, proposta, ordem de compra, kit…): um cartão por item, campos com rótulo */
  table.itens, table.itens > tbody, table.itens > tfoot { display: block; width: 100%; }
  table.itens > thead { display: none; }
  table.itens > tbody > tr, table.itens > tfoot > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; position: relative;
    padding: 12px; margin-bottom: 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); }
  table.itens > tbody > tr > td, table.itens > tfoot > tr > td { display: block; padding: 0; border: 0; min-width: 0; text-align: left !important; width: auto !important; }
  table[data-cartoes] td::before, table.itens td::before { font-family: var(--fonte); letter-spacing: normal; }
  table.itens td::before { content: attr(data-rot); display: block; font-size: 12px; color: var(--texto-rotulo); margin-bottom: 2px; }
  table.itens td[data-rot=""]::before, table.itens td:not([data-rot])::before { content: none; }
  table.itens td.m-larga { grid-column: 1 / -1; font-weight: 500; padding-right: 44px; overflow-wrap: anywhere; }
  table.itens td.m-num { grid-column: 1 / -1; font-size: 12px; color: var(--texto-suave); }
  table.itens td.m-num::before { display: inline; content: "item "; }
  table.itens td.m-num + td.m-larga { margin-top: -6px; }
  table.itens td[colspan] { grid-column: 1 / -1; }
  table.itens td:empty { display: none; }
  table.itens td.acao, table.itens td:last-child:has(> button[data-rem]:only-child), table.itens td:last-child:has(> .btn:only-child) {
    position: absolute; top: 6px; right: 6px; width: auto; }
  table.itens td.acao::before, table.itens td:last-child:has(> .btn:only-child)::before { content: none; }
  table.itens input, table.itens select, table.itens textarea { width: 100%; min-height: 40px; font-size: 16px; }
  table.itens tr.conferido { background: var(--ok-fundo); }
  table.itens tr.excedido { background: var(--erro-fundo); }

  /* ---- modais: folha de baixo, na largura toda, com o fechar sempre à vista */
  dialog.modal, dialog.modal.largo { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 92dvh; }
  dialog.modal[open] { display: flex; flex-direction: column; }
  dialog.modal .m-cab { padding: 10px 8px 6px 16px; flex: none; }
  dialog.modal .m-cab button { width: 40px; height: 40px; font-size: 24px; }
  dialog.modal .m-corpo { max-height: none; flex: 1 1 auto; min-height: 0; padding: 6px 16px 12px; }
  dialog.modal .m-rodape { flex: none; flex-wrap: wrap; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); }
  dialog.modal .m-rodape .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  /* painel lateral: tela cheia */
  dialog.painel-lateral { width: 100vw !important; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
  .painel-lateral .pl-cab { padding: 12px 12px 8px 16px; gap: 8px; }
  .painel-lateral .pl-cab [data-fechar] { min-height: 40px; }
  .painel-lateral .pl-corpo { padding: 10px 16px; flex: 1 1 auto; min-height: 0; }
  .painel-lateral .pl-rodape { flex-wrap: wrap; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borda); }
  .painel-lateral .pl-rodape .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }

  /* ---- início, dashboard, relatórios */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atalhos { grid-template-columns: minmax(0, 1fr); }
  .rel-cartao { flex-wrap: wrap; }
  .rel-resultado .barra-res { align-items: flex-start; }
  .grafico-barras { padding-bottom: 30px; }
  .gb-rot { font-size: 9.5px; white-space: normal; text-align: center; line-height: 1.15; width: min-content; left: 50%; transform: translateX(-50%); bottom: -28px; }
  .lista-simples li > .tag { align-self: flex-start; }
  .seletor-mes span { min-width: 0; }
  .conta-info { grid-template-columns: minmax(0, 1fr); }
  .pdv-relogio .hora { font-size: 40px; }
  .pdv-entrada { grid-template-columns: minmax(0, 1fr) 96px; }
  .vazio-cartao { margin: 20px 0; padding: 18px 16px; }

  /* agenda: barra em coluna; a grade do mês só com as marcas dos compromissos (a vista "diário" é a padrão no celular) */
  .agenda-barra { gap: 8px; }
  .agenda-titulo { font-size: 16px; }
  .agenda-vistas { flex-wrap: wrap; }
  .ag-mes .ag-cab div { font-size: 11px; }
  .ag-dia { min-height: 52px; padding: 2px; }
  .ag-ev { font-size: 0; border-left-width: 0; height: 5px; border-radius: 3px; background: var(--azul); padding: 0; }
  .ag-ev.cp { background: #2bc8a4; }
  .ag-grade .ag-ev, .ag-cel .ag-ev { font-size: 11.5px; height: auto; border-left-width: 4px; background: transparent; padding: 1px 0 1px 6px; border-radius: 0; }
  .agenda-legenda { flex-wrap: wrap; gap: 8px 16px; }

  /* ---- E-commerce */
  .ec-trilha { font-size: 17px; }
  .ec-pg-cab h1 { font-size: 18px; }
  .ec-hist-item { grid-template-columns: minmax(0, 1fr); }
  .ec-hist-item small { grid-column: 1; }
  .ec-galeria figure { width: calc(50% - 6px); }
  .ec-passos { gap: 10px 16px; }
  .ec-tipos { grid-template-columns: minmax(0, 1fr); }
  .ec-wiz-rodape .btn { min-height: 44px; }
  .ec-imagem-acoes { min-width: 0; }
  .ec-linha input, .ec-linha select { min-width: 0; }
  .ec-publicar > div { min-width: 0; }
  .ec-config-grade { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================ toque (celular, tablet): alvos de pelo menos 40 px, nada só no hover */
@media screen and (pointer: coarse) {
  .btn:not(.link) { min-height: 40px; }
  .chip, .filtro-limpar, .filtro-pilula { min-height: 40px; }
  .abas button { min-height: 44px; }
  .abas-form button, .abas-pagina a { min-height: 42px; display: inline-flex; align-items: center; }
  .btn-pontos { min-width: 40px; min-height: 40px; }
  .btn-colunas { min-width: 40px; min-height: 40px; justify-content: center; align-items: center; }
  .btn-topo { min-width: 40px; min-height: 40px; }
  .paginacao .pg { min-width: 36px; min-height: 40px; }
  .menu .item, .submenu .item, .menu-compacto-painel .item { min-height: 44px; }
  .menu .tema button { min-height: 36px; padding: 6px 12px; }
  .submenu .sm-voltar, .menu-compacto-painel .sm-voltar { width: 40px; height: 40px; }
  .ic-redondo { width: 36px; height: 36px; }
  .seletor-mes button { width: 40px; height: 40px; }
  .lupa-campo { width: 34px; height: 34px; }
  .links-acao a, .links-acao button { min-height: 40px; display: inline-flex; align-items: center; }
  .agenda-vistas button { min-height: 40px; }
  table.lista input[type=checkbox], .campo.check input, .ec-check input { width: 20px; height: 20px; }
  .estrela { min-width: 40px; min-height: 40px; }
  .auto .sugestoes div { padding: 11px 12px; }
  .ms-lista label { min-height: 44px; }
  /* ações que só apareciam com o mouse em cima da linha */
  .ec-acoes-linha { visibility: visible; }
  .arvore .no .acoes-no { opacity: 1; }
  .ec-ic-btn.pequeno { width: 40px; height: 40px; }
}

/* e-mails nos cartões: quebram nos pontos marcados (<wbr> depois do @ e antes dos pontos), não no meio das palavras */
@media screen and (max-width: 699px) {
  table[data-cartoes] td:has(wbr) { overflow-wrap: break-word; }
}

/* notebook pequeno (1025–1300 px): a tabela de itens (pedido, nota, proposta, ordem de compra) rola dentro do próprio quadro
   em vez de espremer descrição e campos; acima de 1300 px nada muda */
@media screen and (min-width: 1025px) and (max-width: 1300px) {
  .tabela-rola:has(> table.itens) { overflow-x: auto; max-width: 100%; }
  table.itens { min-width: 1060px; }
  table.itens input, table.itens select { min-width: 72px; }
}