/* Ajustes para tela de celular. Fica por último para valer sobre as regras de computador */
/* Ícones da barra de baixo, no mesmo traço da lixeira e do lápis */
:root{
  --i-precificar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M16 14v4'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E");
  --i-estoque:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 7.7 4.73a2 2 0 0 0 2 0L20.7 7'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E");
  --i-caixa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E");
  --i-pecas:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
@media (max-width:620px){
  /* Respiro maior nas bordas da tela: com 16 px o conteúdo ficava encostado na lateral do celular */
  .topo-in{padding:12px 14px 0 20px}
  main{padding-left:20px;padding-right:20px}
  /* O título fica sozinho na linha: no meio, ele não sobra encostado à esquerda */
  .cab > h1:not(.sub-abas){width:100%;text-align:center}

  /* Como usar e Ajustes viram só o ícone ao lado do nome; as quatro seções vão para uma barra fixa embaixo, perto do polegar */
  .topo-acoes{gap:2px}
  .topo-link{width:36px;height:36px;padding:0;justify-content:center;color:var(--tinta-3)}
  .topo-link span{display:none}
  .topo-link.como-usar::before{width:20px;height:20px;border-width:1.8px;font-size:12px}
  .topo-link.ajustes::before{width:20px;height:20px}
  .topo-link[aria-selected="true"]{color:var(--marca-escuro)}
  /* O desfoque do topo prenderia a barra fixa dentro dele */
  .topo{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--papel)}
  .topo-in{padding-bottom:10px}
  .titulo-app{margin-bottom:0}
  .titulo-app .palavra-txt{max-width:150px;font-size:21px}
  .titulo-app .palavra.logo{max-width:120px}
  /* Com a marca da pessoa, a palavra Precifaz não cabe ao lado de Como usar, Ajustes e conta; a calculadora continua dizendo que app é */
  .titulo-app{min-width:0;overflow:hidden}
  .titulo-app:not(.sem-marca) .nome-app{display:none}
  .titulo-app.marca-dupla .palavra.logo{max-width:64px}
  /* Acima do menu de baixo */
  .barra-ap{bottom:calc(84px + env(safe-area-inset-bottom));width:calc(100vw - 24px)}
  main{padding-bottom:40px}
  #rodape .rodape-in{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  nav.abas{position:fixed;left:0;right:0;bottom:0;z-index:30;gap:0;overflow:visible;padding:6px 6px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--linha);box-shadow:0 -4px 16px rgba(0,0,0,.05)}
  nav.abas button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;margin:0 2px;padding:6px 0 4px;border:0;border-radius:12px;font-size:11.5px;color:var(--tinta-3)}
  nav.abas button::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
  nav.abas button[aria-selected="true"]{background:var(--marca-claro);color:var(--marca-escuro);font-weight:700}
  nav.abas [data-tab="calc"]{--i:var(--i-precificar)}
  nav.abas [data-tab="compras"]{--i:var(--i-estoque)}
  nav.abas [data-tab="caixa"]{--i:var(--i-caixa)}
  nav.abas [data-tab="hist"]{--i:var(--i-pecas)}
  nav.abas .longo{display:none}
  nav.abas .curto{display:inline}

  /* Estoque e Compras ocupam a largura toda, e os dois botões da página ficam numa linha */
  .sub-abas{display:flex;width:100%}
  .sub-abas button{flex:1;font-size:18px;padding:8px 12px}
  .botoes-topo{width:100%;flex-wrap:nowrap}
  .botoes-topo .btn{flex:1;padding-left:8px;padding-right:8px}

  .filtros input,.filtros select{flex:1 1 100%;min-width:0}
  /* Cartões de valor em duas colunas iguais, ocupando a largura toda */
  .resumo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .resumo > *{display:flex;flex-direction:column;justify-content:center;min-width:0}
  .resumo .card-link{width:100%;height:100%;min-width:0}
  .topo-resumo > .resumo,.topo-resumo > .filtros{flex:1 1 100%}
  /* O cartão "Gasto total" fica à direita; o balão abre para a esquerda para não sair da tela */
  .balao-lojas{left:auto;right:0;max-width:calc(100vw - 40px)}
  /* Cada item da compra em três colunas, para o cartão não ficar comprido com os seis valores */
  .pedido .pedido-corpo tr{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px}
  .pedido .pedido-corpo td[data-rotulo]::before{font-size:10px}

  /* Título do bloco em uma linha e os controles dele na linha de baixo, com a largura toda */
  .h2-dir,.h2-dir.cresce{flex:1 1 100%;min-width:0;margin-left:0;justify-content:space-between}
  .h2-dir select.acao,.h2-dir select.acao.largo{flex:1;width:auto;min-width:0}
  .h2-dir.tags-rasc{justify-content:flex-start}
  .rasc button{padding-top:6px;padding-bottom:6px}
  .rasc-nova{padding:6px}
  .mat > .btn-x{justify-self:end}
  /* Sem o minmax, a etiqueta de preço impunha a própria largura e passava da borda */
  .calc{grid-template-columns:minmax(0,1fr)}

  /* Tabela vira cartão: cada linha é um cartão e cada célula mostra o nome da coluna (data-rotulo, posto pelo app.js) */
  .tab-wrap{overflow:visible}
  :is(.tab-wrap, .pedido-corpo) :is(table, tbody){display:block;width:100%}
  :is(.tab-wrap, .pedido-corpo) thead{display:none}
  :is(.tab-wrap, .pedido-corpo) tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:12px 14px;border-bottom:1px solid var(--linha)}
  :is(.tab-wrap, .pedido-corpo) tr:last-child{border-bottom:0}
  :is(.tab-wrap, .pedido-corpo) td{display:block;padding:0;border:0;text-align:left;white-space:normal;width:auto;min-width:0}
  :is(.tab-wrap, .pedido-corpo) td[data-rotulo]::before{content:attr(data-rotulo);display:block;margin-bottom:2px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
  :is(.tab-wrap, .pedido-corpo) td:first-child{grid-column:1/-1;font-weight:700}
  :is(.tab-wrap, .pedido-corpo) td:first-child::before,:is(.tab-wrap, .pedido-corpo) td.acoes::before{display:none}
  :is(.tab-wrap, .pedido-corpo) td.acoes{grid-column:-2/-1;align-self:end;display:flex;justify-content:flex-end;align-items:center;gap:6px}
  :is(.tab-wrap, .pedido-corpo) td:has(> .btn-x:only-child){grid-column:-2/-1;justify-self:end;align-self:end}
  .pedido table td{border-bottom:0}
  :is(.tab-wrap, .pedido-corpo) td[colspan]{grid-column:1/-1}
  :is(.tab-wrap, .pedido-corpo) td[colspan]::before{display:none}
  :is(.tab-wrap, .pedido-corpo) tr.detalhe,.estoque tr.edicao{display:block}
  .estoque td input[data-ie="peso"],.estoque td input[data-ie="tenho"]{width:100%}

  /* Sem a linha de títulos, é o nome da categoria que fica preso ao rolar; o olho dos detalhes vem para ele */
  .titulo-cat{position:sticky;top:var(--topo-h,53px);z-index:3;display:flex;align-items:center;justify-content:space-between;margin:14px -16px 0;padding:4px 16px;min-height:44px;background:rgba(250,250,248,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .titulo-cat .btn-olho{display:inline-grid}
  /* Estoque em linha compacta: nome em cima; cor e custo empilhados à esquerda, sem rótulo, para nunca invadir o "tenho" à direita */
  .estoque tr:not(.edicao){grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"nome nome nome" "tam cor tenho" "custo custo tenho";gap:2px 0;position:relative}
  .estoque td:first-child{grid-area:nome;padding-right:24px;font-size:14.5px}
  .estoque td.acoes{position:absolute;top:4px;right:6px}
  .estoque td:is([data-rotulo="Tamanho"], [data-rotulo="Cor"], [data-rotulo="Custo médio"], [data-rotulo="Tenho"], [data-rotulo="Peso atual"])::before{display:none}
  .estoque td:is([data-rotulo="Tamanho"], [data-rotulo="Cor"]){font-size:13.5px;color:var(--tinta-2)}
  .estoque td[data-rotulo="Tamanho"]{grid-area:tam}
  .estoque td[data-rotulo="Tamanho"]:not(:has(input))::after{content:"·";margin:0 6px}
  .estoque td[data-rotulo="Tamanho"]:has(> .muted:only-child){display:none}
  .estoque td[data-rotulo="Cor"]{grid-area:cor}
  .estoque td[data-rotulo="Custo médio"]{grid-area:custo;font-size:13px;color:var(--tinta-3)}
  .estoque td:is([data-rotulo="Tenho"], [data-rotulo="Peso atual"]){align-self:center;margin:0 18px 0 12px}
  .estoque td[data-rotulo="Tenho"]{grid-area:tenho}
  /* No fio a contagem de rolos fica no menu do item; à direita vai o peso */
  .estoque tr:not(:has(td[data-rotulo="Tenho"])) td[data-rotulo="Peso atual"]{grid-area:tenho;text-align:right}
  /* Com os detalhes abertos o fio mostra rolos e peso: os rolos ficam à direita e o peso vira uma linha com rótulo */
  .estoque tr:has(td[data-rotulo="Tenho"]) td[data-rotulo="Peso atual"]{grid-column:1/-1;margin:6px 0 0;font-size:13px}
  .estoque tr:has(td[data-rotulo="Tenho"]) td[data-rotulo="Peso atual"]::before{display:block}
  .estoque td:is([data-rotulo="Comprei"], [data-rotulo="Paguei"], [data-rotulo="Loja"]){margin-top:6px}
  /* No celular a quantidade e a edição ficam no menu que abre ao tocar no item (compras-estoque-menu.js) */
  .estoque tr:not(.edicao){cursor:pointer}
  .estoque td[data-rotulo="Tenho"] .btn-qtd,.estoque td.acoes{display:none}
  .estoque tr[data-act]::after{content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;background:var(--seta) center/contain no-repeat;transform:translateY(-50%) rotate(-90deg)}
  /* Editando, os campos ocupam a linha toda, com o nome de cada um em cima */
  .estoque tr:has(input[data-ie]){grid-template-columns:minmax(0,1fr);grid-template-areas:"nome" "tam" "cor" "tenho" "custo";gap:8px}
  .estoque tr:has(input[data-ie]) td[data-rotulo="Peso atual"]{grid-area:auto;text-align:left}
  .estoque tr:has(input[data-ie])::after{display:none}
  .estoque tr:has(input[data-ie]) td{margin:0}
  .estoque tr:has(input[data-ie]) td:is([data-rotulo="Tamanho"], [data-rotulo="Cor"], [data-rotulo="Tenho"], [data-rotulo="Peso atual"])::before{display:block}
  .estoque tr:has(input[data-ie]) td:first-child{padding-right:0}
  .estoque td input:is([data-ie="cor"], [data-ie="tamanho"]){text-align:left}
  /* A faixa de edição vira uma linha só: a caixinha à esquerda e os botões à direita */
  .estoque tr.edicao{display:flex;align-items:center;gap:12px;padding:6px 14px;background:var(--marca-claro)}
  .estoque tr.edicao td,.estoque tr.edicao td:has(> .check){padding:0;background:none}
  .estoque tr.edicao td:empty,.estoque tr.edicao:has(input) td[data-rotulo]::before{display:none}
  .estoque tr.edicao td:last-child{flex:1}
  .estoque td .check{justify-content:flex-start;font-size:14px}
  .linha-c .check.no-campo{margin-top:0}
  .folha-fundo{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.35)}
  .folha{position:fixed;left:0;right:0;bottom:0;z-index:61;display:flex;flex-direction:column;gap:10px;padding:10px 20px calc(20px + env(safe-area-inset-bottom));background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.15)}
  .folha-alca{width:40px;height:4px;margin:0 auto 6px;border-radius:2px;background:var(--linha)}
  .folha h3{font-size:17px}
  .folha-qtd{display:flex;justify-content:space-between;align-items:center;padding:8px 0 14px;border-bottom:1px solid var(--linha)}
  .folha-qtd .btn-qtd{width:44px;height:44px;font-size:22px}
  .folha-qtd b{min-width:80px;text-align:center;font-size:18px}
  .folha .btn{width:100%}
  .estoque td:not(:first-child, .acoes, [data-rotulo="Tamanho"], [data-rotulo="Cor"], [data-rotulo="Custo médio"], [data-rotulo="Tenho"], [data-rotulo="Peso atual"]){grid-column:1/-1;font-size:13px}

  .compacto .grade-niveis input[type=text]{padding-left:4px;padding-right:4px;text-align:center}

  /* Boas práticas de toque: alvos de pelo menos 40 px e campos com letra de 16 px */
  .btn:not(.peq){min-height:44px}
  .btn-qtd,.estoque .btn-qtd{width:34px;height:34px;font-size:18px}
  .mat select.pesagem,select.acao{height:40px}
  .btn-x,.btn-lapis,.btn-olho,.btn-copiar,.btn-zap{width:40px;height:40px}
  .et-zap{right:58px}
  /* Abaixo de 16 px o iPhone dá zoom sozinho ao tocar no campo; !important porque vários campos têm letra menor no computador */
  input[type=text],input[type=date],input[type=url],input[type=password],select,textarea{font-size:16px!important}
}

/* Tablet: as tabelas largas do PC não cabem na largura, e aqui elas ainda não viram cartão como no celular */
@media (min-width:621px) and (max-width:1100px){
  th,td{padding-left:7px;padding-right:7px}
  th{letter-spacing:.02em;font-size:11px}
  td.estreito{width:84px}
  td.acoes{white-space:normal}
  td.acoes .btn.peq{display:block;margin-left:auto}
  .pedido th:first-child{width:30%}
  .pedido td.num{white-space:normal}
}
/* Abaixo disso a coluna Tipo não cabe; o filtro de tipos continua acima da tabela */
@media (min-width:621px) and (max-width:820px){
  #tab-hist .tab-vendas th:nth-child(4),#tab-hist .tab-vendas tr[data-id] > td:nth-child(4){display:none}
  #tab-hist td.estreito{width:70px}
  #tab-hist td input[type=text]{min-width:0;width:100%}
  #tab-hist td.num{font-size:13px}
}
@media (min-width:621px) and (max-width:700px){
  #tab-hist table{font-size:13px}
  #tab-hist th,#tab-hist td{padding-left:3px;padding-right:3px}
  #tab-hist td.estreito{width:58px}
}
/* Formulário de compra estreito (tablet ou PC com a janela pequena): três campos por linha */
@media (min-width:621px){
  @container (max-width:820px){
    /* A lixeira não é um campo: fica numa faixa só dela à direita, e os campos de baixo sobem para ocupar a terceira casa */
    .linha-c{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));padding-right:54px}
    .linha-c > .btn-x{position:absolute;top:50%;right:10px;transform:translateY(-50%)}
    .linha-c .g2{display:contents}
  }
}

/* No celular os botões do Caixa ocupam a linha toda, e o menu abre na largura dela em vez de sair da tela */
@media (max-width:620px){
  .cab-saldo{flex-wrap:wrap}
  .caixa-saldo{flex:1 1 100%}
  .cab-caixa{position:relative;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .cab-caixa .btn{justify-content:center}
  .menu-caixa{position:static}
  .menu-caixa summary{width:100%}
  .menu-caixa-lista{left:0;right:0;width:auto;max-width:none}
}