:root{
  /* Largura do conteúdo: o que sobra fica de margem nas laterais, igual dos dois lados */
  --largura:90%;
  --papel:#FAFAF8; --cartao:#FFFFFF; --tinta:#1C1C1C; --tinta-2:#4B5563; --tinta-3:#6B7280;
  --linha:#E5E7EB; --borda-campo:#D1D5DB; --neutro:#F4F4F5; --neutro-2:#F9FAFB;
  --marca:#57C3B6; --marca-hover:#45B2A5; --marca-forte:#3AA396; --marca-texto:#2A8277; --marca-escuro:#1F6B62; --marca-claro:#E8F6F4;
  --ok:#2A8277; --ok-escuro:#1F6B62; --ok-claro:#E8F6F4;
  --lixeira: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='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6'/%3E%3C/svg%3E");
  --lapis: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='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E");
  --balanca: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='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E");
  --historico: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='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E");
  --olho: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='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --olho-fechado: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='M10.7 5.1A10 10 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-2.2 3.2M6.6 6.6A17 17 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M2 2l20 20'/%3E%3C/svg%3E");
  --seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2l4 4 4-4' fill='none' stroke='%232A8277' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --copiar: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='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  --duplicar: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='8' y='8' width='14' height='14' rx='2'/%3E%3Cpath d='M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2'/%3E%3Cpath d='M15 12v6M12 15h6'/%3E%3C/svg%3E");
  --mais:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E");
  --zap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
  --engrenagem: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%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
  --xis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --erro:#DC2626; --erro-escuro:#991B1B; --erro-claro:#FEE2E2;
  --serif:"Sorts Mill Goudy",Georgia,serif;
  --sans:"Nunito","Segoe UI",system-ui,sans-serif;
  --num:var(--sans);
  --raio:16px;
}
*{box-sizing:border-box}
/* Reserva o espaço da barra de rolagem: sem isso, abas curtas e longas ficam com larguras diferentes */
html{color-scheme:light;scrollbar-gutter:stable}
body{margin:0;background:var(--papel);color:var(--tinta);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--marca-texto)}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
[hidden]{display:none!important}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.muted{color:var(--tinta-3)}
.neg{color:var(--erro)}
.pos{color:var(--ok)}

/* A serifada é ilegível em tamanhos pequenos: fica só nos títulos de página */
h1,h2,h3{margin:0;color:var(--tinta)}
h1{font-family:var(--serif);font-weight:normal;font-size:34px;line-height:1.15}
h2{font-size:19px;font-weight:700}
h3{font-size:16px;font-weight:700}

.topo{position:sticky;top:0;z-index:5;background:rgba(250,250,248,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(229,231,235,.6)}
/* Duas linhas, como no Grafaz: marca de um lado e Como usar, Ajustes e conta do outro; as seções embaixo */
.topo-in{max-width:var(--largura);margin:0 auto;padding:12px 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 24px}
.topo-acoes{display:flex;align-items:center;gap:4px}
.topo-link{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:10px;background:none;padding:8px 12px;font-size:14.5px;color:var(--tinta-2);cursor:pointer;white-space:nowrap}
.topo-link:hover{background:var(--marca-claro);color:var(--marca-texto)}
.topo-link[aria-selected="true"]{background:var(--marca-claro);color:var(--marca-texto);font-weight:700}
.topo-link.como-usar::before{content:"?";display:grid;place-items:center;width:17px;height:17px;box-sizing:border-box;border:1.5px solid currentColor;border-radius:50%;font:800 11px/1 var(--sans)}
.topo-link.ajustes::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--engrenagem) center/contain no-repeat;mask:var(--engrenagem) center/contain no-repeat}
.titulo-app{margin:0;display:flex;align-items:center;gap:10px;line-height:1;white-space:nowrap}
.titulo-app .icone{height:30px;width:30px}
.titulo-app #marca-topo{display:contents}
.titulo-app .palavra{height:22px;width:auto}
/* Logo enviada pela pessoa pode ser quadrada: ganha mais altura que a palavra NaVerot, que é só texto */
.titulo-app .palavra.logo{height:30px;max-width:190px;object-fit:contain}
.titulo-app .palavra-txt{font:normal 24px/1 var(--serif);color:var(--marca-texto);max-width:230px;overflow:hidden;text-overflow:ellipsis}
.titulo-app.sem-marca .nome-app{padding-left:0;border-left:0}
.titulo-app .nome-app{padding-left:11px;border-left:1px solid var(--linha);font:800 13px/22px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--marca-texto)}
nav.abas{grid-column:1/-1;margin-left:-14px;display:flex;gap:4px;overflow-x:auto}
nav.abas button{border:0;background:none;padding:10px 14px 12px;font-size:15px;color:var(--tinta-2);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
nav.abas button:hover{color:var(--tinta)}
nav.abas button[aria-selected="true"]{color:var(--marca-texto);border-bottom-color:var(--marca);font-weight:700}
nav.abas .curto{display:none}

main{max-width:var(--largura);margin:0 auto;padding:24px 0 80px}
.cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}

label.campo{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tinta-2);min-width:0}
label.campo > span{font-weight:600}
label.campo.largo{grid-column:span 2}
label.campo.inteiro{grid-column:1/-1}
input[type=text],input[type=date],input[type=url],input[type=password],select,textarea{width:100%;border:1px solid var(--borda-campo);background:#fff;border-radius:12px;padding:8px 12px;font-size:15px;color:var(--tinta);min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--marca);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 25%,transparent)}
select{appearance:none;padding-right:36px;background-image:var(--seta);background-position:right 13px center;background-size:12px;background-repeat:no-repeat;cursor:pointer}
/* No computador cada campo tem o tamanho do que está escrito. O lugar do X de apagar fica sempre reservado,
   para a caixa não mudar de largura quando ele aparece. Nas tabelas e em Preço e lucro a coluna já decide a largura */
@media (min-width:621px){
  :is(input[type=text],input[type=url],select):not(td *, .compacto *){field-sizing:content;width:auto;max-width:100%}
  :is(input[type=text],input[type=url]):not(td *, .compacto *){min-width:64px;padding-right:30px}
}
select:disabled{background-color:var(--neutro);color:var(--tinta-2);cursor:default}
select.acao.largo{width:auto;min-width:200px}
select.acao{width:200px;height:34px;padding-top:0;padding-bottom:0;border-color:var(--marca);color:var(--marca-texto);font-size:14px;font-weight:600}
textarea{resize:vertical;min-height:60px}
.dica{font-size:12.5px;color:var(--tinta-3);margin:6px 0 0}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}
/* A caixinha nativa muda de cara em cada navegador; desenhada aqui, segue a borda e o turquesa dos campos */
.check input{appearance:none;flex:none;width:18px;height:18px;margin:0;border:1px solid var(--borda-campo);border-radius:6px;background:#fff center/12px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
.check input[type=radio]{border-radius:50%}
.check input:hover{border-color:var(--marca)}
.check input:checked{background-color:var(--marca);border-color:var(--marca);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.check input:focus-visible{outline:none;border-color:var(--marca);box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 25%,transparent)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--marca);background:var(--marca);color:var(--sobre-marca,#fff);border-radius:12px;padding:8px 16px;font-size:14px;font-weight:700;transition:background-color .15s,color .15s;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--marca-hover);border-color:var(--marca-hover)}
.btn.sec{background:#fff;color:var(--marca-texto);border-color:var(--marca)}
.btn.sec:hover{background:var(--marca-claro)}
.btn.leve{background:none;border-color:transparent;color:var(--tinta-2);padding:6px 8px}
.btn.leve:hover{background:var(--marca-claro);color:var(--marca-texto)}
.btn.perigo{background:#fff;border-color:var(--erro);color:var(--erro)}
.btn.perigo:hover{background:var(--erro-claro)}
.btn.peq{padding:5px 10px;font-size:13px}
.btn-x,.btn-lapis,.btn-olho,.btn-copiar,.btn-duplicar,.btn-zap,.btn-hist,.btn-mais,.btn-detalhe{border:0;background:none;color:var(--tinta-3);font-size:0;width:30px;height:30px;flex:none;display:inline-grid;place-items:center;cursor:pointer;border-radius:8px;vertical-align:middle}
.btn-x::before,.btn-lapis::before,.btn-olho::before,.btn-copiar::before,.btn-duplicar::before,.btn-zap::before,.btn-hist::before,.btn-mais::before,.btn-detalhe::before{content:"";width:19px;height:19px;background:currentColor;-webkit-mask:var(--lixeira) center/contain no-repeat;mask:var(--lixeira) center/contain no-repeat}
.btn-lapis::before{-webkit-mask-image:var(--lapis);mask-image:var(--lapis)}
.btn-x:hover{color:var(--erro);background:var(--erro-claro)}
.btn-hist::before{-webkit-mask-image:var(--historico);mask-image:var(--historico)}
.btn-lapis:hover,.btn-lapis.ativo,.btn-hist:hover{color:var(--marca-texto);background:var(--marca-claro)}
.btn-olho::before{-webkit-mask-image:var(--olho);mask-image:var(--olho)}
.btn-olho.ativo::before{-webkit-mask-image:var(--olho-fechado);mask-image:var(--olho-fechado)}
.btn-olho:hover,.btn-olho.ativo{color:var(--marca-texto);background:var(--marca-claro)}
.btn-copiar::before{-webkit-mask-image:var(--copiar);mask-image:var(--copiar)}
.btn-duplicar::before{-webkit-mask-image:var(--duplicar);mask-image:var(--duplicar)}
.btn-copiar:hover,.btn-duplicar:hover{color:var(--marca-texto);background:var(--marca-claro)}
.btn-zap::before{-webkit-mask-image:var(--zap);mask-image:var(--zap)}
.btn-mais::before{-webkit-mask-image:var(--mais);mask-image:var(--mais)}
/* Abrir os detalhes da linha é uma seta, como a dos meses; o olho fica para esconder números */
.btn-detalhe::before{width:13px;height:13px;-webkit-mask-image:var(--seta);mask-image:var(--seta);transition:transform .15s}
.btn-detalhe.ativo::before{transform:rotate(180deg)}
.btn-detalhe:hover,.btn-detalhe.ativo{color:var(--marca-texto);background:var(--marca-claro)}
.btn-mais:hover,.btn-mais[aria-expanded="true"]{color:var(--marca-texto);background:var(--marca-claro)}
.menu-linha{position:fixed;z-index:60;min-width:170px;padding:6px;display:flex;flex-direction:column;background:var(--cartao);border:1px solid var(--linha);border-radius:12px;box-shadow:0 10px 30px rgba(28,28,28,.14)}
.menu-op{display:flex;align-items:center;gap:10px;padding:9px 12px;border:0;border-radius:8px;background:none;font:600 14px var(--sans);color:var(--tinta);text-align:left;cursor:pointer}
.menu-op:hover,.menu-op:focus-visible{background:var(--marca-claro);color:var(--marca-texto)}
.menu-op.perigo:hover,.menu-op.perigo:focus-visible{background:var(--erro-claro);color:var(--erro)}
.menu-ic{width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.btn-zap:hover{color:#128c7e;background:#e7f7ee}

@media (max-width:620px){
  .topo-in{padding:10px 16px 0}
  main{padding:18px 16px 60px}
  label.campo.largo{grid-column:auto}
}

.bloco{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 20px;margin-bottom:16px}
/* O navegador centraliza pela caixa da fonte, que sobra em cima das letras: o título sobe 1,5 px e os controles descem de volta */
.bloco > h2{margin-bottom:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:34px;font-size:21px;position:relative;top:-1.5px}
.bloco > h2:last-child{margin-bottom:0}
.bloco > h2 > .btn,.h2-dir{margin-left:auto;position:relative;top:1.5px}
.bloco > h2 > .btn{height:34px;padding:0 14px;font-size:14px}
.h2-dir{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:400}
.h2-dir.cresce{flex:1;min-width:0;margin-left:24px}
.bloco input[readonly],.bloco textarea[readonly]{background:var(--neutro-2);cursor:default}
/* Campo desativado não recebe o clique; sem isso o aviso de "toque em Editar" não apareceria na caixa de marcar */
.bloco input:disabled{pointer-events:none}
.btn.chamar{animation:chamar .5s 3}
@keyframes chamar{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--marca) 35%,transparent)}}
.bloco > h2 small{font-size:15px;font-weight:400;color:var(--tinta-3)}
.bloco > p:not(.dica){margin:0}
.bloco.destaque{border-color:var(--marca)}
.kit-cfg{border:1px solid var(--linha);border-radius:12px;padding:14px;background:var(--neutro-2);margin-bottom:12px}
.kit-resumo{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--linha);border-radius:12px;padding:10px 14px;background:var(--neutro-2);margin-bottom:8px}
.kit-resumo p{margin:0;line-height:1.4}
.kit-cfg .tab-wrap{margin-top:12px}
.kit-cfg .filtros{margin:12px 0 0}
.tipos-kit{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tinta-2);min-width:0}
.tipos-kit .rotulo{font-weight:600}
.tipos-kit .caixas{display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:6px;color:var(--tinta)}
.tipos-kit .dica{margin:0}
.grade{display:grid;gap:12px 16px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.grade + .grade{margin-top:12px}
.bloco h3.sub{font-size:16px;margin:18px 0 10px}
.linha-botoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.linha-botoes.fim{justify-content:flex-end}
.linha-botoes.entre{justify-content:space-between;margin-top:0}
.linha-botoes p{margin:0}
.vazio{border:1.5px dashed var(--borda-campo);border-radius:12px;padding:16px;text-align:center;color:var(--tinta-2);font-size:14px}

.tab-wrap{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio);background:var(--cartao)}
.tab-wrap + .linha-botoes{margin-top:12px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);padding:10px 12px;border-bottom:0;box-shadow:inset 0 -1px var(--linha);white-space:nowrap;background:var(--neutro-2)}
td{padding:9px 12px;border-bottom:1px solid var(--linha);vertical-align:middle}
tr:last-child td{border-bottom:0}
th,td{text-align:center}
/* Linha dos títulos presa abaixo do topo ao rolar. Translúcida como ele: no lugar dela parece sólida,
   e sobre os itens deixa ver que há linhas passando por trás. Abaixo de 961 px a tabela pode rolar de lado, e aí não dá para prender */
@media (min-width:961px){
  .tab-wrap{overflow:clip}
  .tab-wrap thead th{position:sticky;top:var(--topo-h,57px);z-index:3;background:rgba(249,250,251,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .tab-wrap thead.preso th{box-shadow:inset 0 -1px var(--linha),0 6px 12px -8px rgba(0,0,0,.25)}
  thead.preso .cat-th{display:inline}
  thead.preso .cat-th + .item-th{display:none}
}
.cat-th{display:none;color:var(--marca-texto);font-weight:800}

.boas-vindas{position:fixed;inset:0;z-index:80;display:flex;justify-content:center;align-items:flex-start;padding:32px 16px;overflow-y:auto;background:rgba(28,28,28,.45)}
body.com-boas-vindas{overflow:hidden}
body.com-boas-vindas .barra-ap{display:none}
.bv-cartao{width:100%;max-width:640px;background:var(--papel);border-radius:24px;padding:28px 30px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.bv-cartao h1,.pergunta-cartao h2{font:700 22px/1.2 var(--sans)}
.bv-intro{color:var(--tinta-2);margin:4px 0 14px}
.bv-passo{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--linha)}
.bv-passo > b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--marca-claro);color:var(--marca-texto);display:grid;place-items:center}
.bv-passo > div{flex:1;min-width:0}
.bv-passo h3{margin-bottom:8px}
.bv-passo .dica{margin:6px 0 0}
.bv-linha{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bv-linha input[type=text]{flex:1 1 200px;width:auto}
#bv-hora{flex:0 1 110px}
.bv-rs{font-weight:700;color:var(--tinta-2)}
.bv-logo{cursor:pointer}
.bv-mais{margin-top:12px}
.bv-mais summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--marca-texto)}
.bv-mais[open] summary{margin-bottom:10px}
.bv-tipo-novo{margin-top:8px}
.bv-sub{margin:14px 0 6px;font-size:14px;font-weight:700}
.hora-ajuda{margin-top:10px}
.hora-ajuda,.bv-mais{scroll-margin-bottom:12px}
.hora-ajuda summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--marca-texto)}
.hora-ajuda[open] summary{margin-bottom:8px}
.hora-ajuda-campos{display:flex;flex-wrap:wrap;gap:10px}
.hora-ajuda-campos .campo{flex:1 1 180px}
.bv-fonte,.bv-ambos{margin-top:8px}
.bv-previa{margin-top:10px;font:normal 26px/1.25 var(--serif);color:var(--marca-texto);overflow-wrap:anywhere}
.bv-previa-vazia{opacity:.3}
.bv-previa .ap-logo{display:block;max-width:100%}
.bv-previa .btn{font-family:var(--sans)}
.bv-previa-botoes{margin-top:12px;pointer-events:none}
@media (min-width:621px){.so-celular{display:none !important}}
.bv-cartao .cores-linha > .dica{flex:0 0 100%;margin:0}
.bv-escolhas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:6px 0 14px}
.bv-escolha{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:18px;border:1px solid var(--linha);border-radius:16px;background:#fff;cursor:pointer;font-size:16px}
.bv-escolha:hover{border-color:var(--marca);background:var(--marca-claro)}
.bv-escolha b{color:var(--marca-texto)}
.bv-escolha small{color:var(--tinta-2);font-size:13.5px;line-height:1.4}
.bv-rodape{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;padding-top:16px;border-top:1px solid var(--linha)}
/* Título e Continuar ficam parados e só o meio rola: a barra na beira da tela passa despercebida, e o título,
   subindo junto, aparecia cortado. A sombra no pé do meio mostra que há mais embaixo e some ao chegar no fim */
#boas-vindas{overflow:hidden}
#boas-vindas .bv-cartao{max-height:100%;overflow-y:auto}
#boas-vindas .bv-cartao:has(.bv-meio){display:flex;flex-direction:column;overflow:hidden;padding-bottom:12px}
.bv-meio{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0 -30px;padding:0 30px 4px;scrollbar-width:thin;scrollbar-color:var(--linha) transparent;
  background:linear-gradient(transparent,var(--papel) 70%) center bottom/100% 40px no-repeat local,
    radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.14),transparent) center bottom/100% 14px no-repeat scroll}
.bv-rodape-preso{margin-top:0;padding-top:10px}
@media (max-width:620px){
  .boas-vindas{padding:12px 8px}
  .bv-cartao{padding:20px 16px;border-radius:20px}
  .bv-meio{margin:0 -16px;padding:0 16px 4px}
  .bv-cartao h1{font-size:20px}
}
th:first-child,td:first-child,th.txt,td.txt{text-align:left}
td.num{white-space:nowrap}
td input[type=text]{padding:5px 8px;font-size:14px}
td input.centro{text-align:center}
td.acoes,th.acoes{text-align:right;white-space:nowrap}
.qtd-ajuste{display:inline-flex;align-items:center;gap:6px}
.qtd-ajuste > span{min-width:52px;text-align:center}
.btn-qtd{width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--borda-campo);background:#fff;color:var(--marca-texto);font-size:16px;font-weight:800;line-height:1;cursor:pointer}
.btn-qtd:hover{border-color:var(--marca);background:var(--marca-claro)}
td.estreito{width:140px}

.pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--marca-claro);color:var(--marca-texto);white-space:nowrap}
.pill.t{background:var(--ok-claro);color:var(--ok-escuro)}
.pill.c{background:var(--erro-claro);color:var(--erro-escuro)}
.pill.n{background:var(--neutro);color:var(--tinta-2)}
/* Cores fixas: a situação da peça precisa se distinguir mesmo quando a cor da marca muda em Ajustes */
.pill[class*=" s-"]{color:#fff}
.pill.s-pago{background:#15803D}
.pill.s-pendente{background:#DC2626}
.pill.s-sinal{background:#B45309}
.pill.cat-estoque{background:#DBEAFE;color:#1E40AF}
.pill.cat-brinde{background:#FCE7F3;color:#9D174D}
.pill.cat-orcamento{background:#EDE9FE;color:#5B21B6}
select.pill[data-h]{width:auto;border:0;padding:2px 24px 2px 9px;font-size:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 8px center;background-size:10px;background-repeat:no-repeat}
select.pill:is([data-h="categoria"],[data-h="saida"]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.2l4 4 4-4' fill='none' stroke='%234B5563' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pedido-cab .pill.loja{font-size:13.5px;padding:4px 13px}
/* Cores oficiais de cada loja, para reconhecer a origem da compra de relance */
.pill.loja-shopee{background:#EE4D2D;color:#fff}
.pill.loja-shein{background:#000;color:#fff}
.pill.loja-meli{background:#FFE600;color:#2D3277}
.pill.loja-amazon{background:#FF9900;color:#232F3E}
.pill.loja-asj{background:#0099CC;color:#fff}
.pill.loja-fisica{background:#EDE4F7;color:#5B3A8C}

.resumo{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.resumo div{background:var(--cartao);border:1px solid var(--linha);border-radius:12px;padding:6px 14px;min-width:120px}
.resumo span{display:block;font-size:12px;color:var(--tinta-3)}
.resumo b{font-family:var(--num);font-size:17px;font-weight:600}
/* Gasto total com o link "Ver por loja", que abre o balão com o gasto de cada loja */
.resumo .gasto-lojas{position:relative;padding:0;border:0;background:none;min-width:0}
.card-link{display:block;text-align:left;background:var(--cartao);border:1px solid var(--linha);border-radius:12px;padding:10px 16px;min-width:170px;cursor:pointer;font:inherit;color:inherit}
.card-link b{display:block}
.card-link:hover,.card-link[aria-expanded="true"]{border-color:var(--marca)}
.card-link em{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-style:normal;font-size:12.5px;font-weight:700;color:var(--marca-texto)}
.card-link em::after{content:"";width:9px;height:9px;background:var(--seta) center/contain no-repeat;transition:transform .15s}
.card-link[aria-expanded="true"] em::after{transform:rotate(180deg)}
.balao-lojas{position:absolute;top:calc(100% + 8px);left:0;z-index:20;min-width:260px;padding:6px 14px;background:#fff;border:1px solid var(--linha);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.14)}
.resumo .balao-lojas div{display:flex;justify-content:space-between;align-items:center;gap:18px;min-width:0;padding:7px 0;background:none;border:0;border-bottom:1px dashed var(--linha);border-radius:0}
.resumo .balao-lojas div:last-child{border-bottom:0}
.resumo .balao-lojas b{font-size:14.5px}
.balao-lojas span,.balao-lojas b{white-space:nowrap}

/* A troca de parte fica branca e os filtros, cinza: lado a lado, um não se confunde com o outro */
.sub-abas{display:inline-flex;gap:4px;margin:0;padding:4px;background:var(--cartao);border:1px solid var(--linha);border-radius:12px}
.sub-abas button{border:0;background:none;border-radius:9px;padding:6px 16px;cursor:pointer;font-family:var(--sans);font-size:16px;font-weight:700;color:var(--tinta-3)}
@media (min-width:621px){ .sub-abas button{font-size:18px;padding:9px 20px} }
.sub-abas button:hover{color:var(--tinta-2)}
.sub-abas button[aria-selected="true"]{background:var(--marca);color:var(--sobre-marca,#fff)}
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
/* Filtro é secundário: menor e mais apagado que os campos de preencher, com a borda fina só para mostrar onde clicar */
.filtros :is(input[type=text],select){width:auto;min-width:0;height:30px;padding-top:0;padding-bottom:0;font-size:13px;color:var(--tinta-2);background-color:var(--neutro);border-color:var(--linha);border-radius:999px}
.filtros input[type=text]{width:170px;padding-left:14px}
.filtros select{padding-left:14px;padding-right:30px;background-position:right 11px center;background-size:10px}
.filtros :is(input[type=text],select):hover{color:var(--tinta)}
.filtros-conta{font-size:13px;color:var(--tinta-3)}
.filtros-conta .separa{margin:0 4px;color:var(--borda-campo)}

/* No alto, logo abaixo do topo: embaixo o aviso ficava atrás do teclado e das abas do celular. Acima das boas-vindas (80) */
/* Mesmo visual do balão do ?, para os avisos do app falarem do mesmo jeito */
.toast{position:fixed;left:50%;top:calc(var(--topo-h,57px) + 10px);transform:translateX(-50%);background:var(--cartao);color:var(--tinta);border:1px solid var(--linha);font:400 14px/1.4 var(--sans);padding:9px 14px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:90;max-width:min(420px,calc(100% - 32px))}
.toast-btn{background:none;border:0;padding:0 0 0 6px;font:700 14px var(--sans);color:var(--marca-texto);text-decoration:underline;cursor:pointer}
.tab-wrap + .filtros{margin-top:12px}
.topo-resumo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 16px;margin-bottom:16px}
.topo-resumo .resumo,.topo-resumo .filtros{margin-bottom:0}
.dica + .tab-wrap{margin-top:10px}
.linha-botoes + .grade{margin-top:14px}
.dica.neg{color:var(--erro);font-weight:600}
.dialogo{border:1px solid var(--linha);border-radius:var(--raio);padding:20px 22px;max-width:min(560px,calc(100vw - 32px));background:var(--cartao);color:var(--tinta);box-shadow:0 12px 40px rgba(0,0,0,.18)}
.dialogo::backdrop{background:rgba(28,28,28,.35)}
.dialogo h2{font-family:var(--sans);font-weight:700;font-size:21px;margin-bottom:8px}
.dialogo p{margin:0 0 6px}
.hist-item{max-height:min(55vh,420px);overflow:auto;margin:10px 0 14px}
.hist-item th,.hist-item td{text-align:left;padding-left:0}
.hist-item .num{text-align:right}
.hist-item td{padding:6px 8px 6px 0;border-bottom:1px solid var(--linha);font-size:14px}
.dialogo .opcoes{display:grid;gap:8px;margin:12px 0}
.dialogo .check{margin:10px 0 16px}

.lista-pop{position:fixed;z-index:50;display:flex;flex-direction:column;padding:6px;background:#fff;border:1px solid var(--linha);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.08);font-size:14px;max-width:calc(100vw - 16px)}
.lista-pop ul{margin:0;padding:0;list-style:none;overflow-y:auto;min-height:0}
input.lista-busca{position:fixed;z-index:51;margin:0;padding-top:0;padding-bottom:0;padding-right:36px;background:#fff var(--seta) right 13px center/12px no-repeat}
.lista-pop li{position:relative;padding:8px 14px 8px 32px;border-radius:10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-pop li small{margin-left:8px;font-weight:400;color:var(--tinta-2)}
.lista-pop li.ativo{background:var(--marca-claro)}
.lista-pop li[aria-selected="true"]{color:var(--marca-texto);font-weight:700}
.lista-pop li[aria-selected="true"]::before{content:"";position:absolute;left:14px;top:50%;width:5px;height:10px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-65%) rotate(45deg)}
.lista-pop li[aria-disabled="true"]{color:var(--tinta-3);cursor:default}
/* Acima da tela de boas-vindas, que também tem campo com sugestões */
.lista-pop.com-sublistas{width:320px}
.lista-pop li.sub-abre{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 32px 9px 14px;font-weight:600}
.lista-pop li.sub-abre span{overflow:hidden;text-overflow:ellipsis}
.lista-pop li.sub-abre small{margin:0;font-size:12.5px}
.lista-pop li.sub-abre::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border:solid var(--marca);border-width:2px 2px 0 0;transform:translateY(-50%) rotate(45deg)}
.com-sublistas li:not([data-g]):not(.sub-abre):not(.sub-volta):not([aria-selected="true"]){padding-left:14px}
.com-sublistas li:not([data-g]):not(.sub-abre):not(.sub-volta){margin-top:6px;box-shadow:0 -1px 0 var(--linha)}
.lista-pop li.sub-volta{position:sticky;top:0;z-index:1;margin-bottom:4px;background:#fff;color:var(--marca-texto);font-weight:700;box-shadow:0 1px 0 var(--linha);border-radius:10px 10px 0 0}
.lista-pop li.sub-volta.ativo{background:var(--marca-claro)}
.lista-pop li.sub-volta::before{content:"";position:absolute;left:15px;top:50%;width:7px;height:7px;border:solid currentColor;border-width:0 0 2px 2px;transform:translateY(-50%) rotate(45deg)}
.lista-pop.sugestoes{z-index:85}
.lista-pop.sugestoes li{padding-left:14px}
.lista-pop.sugestoes li:hover{background:var(--marca-claro)}
.lista-pop li.grupo{padding:10px 14px 4px;cursor:default;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}

/* Fica abaixo do topo fixo, para não aparecer por cima dele quando o campo rola para baixo do cabeçalho.
   Presos à página, e não à tela: no celular a rolagem anda antes do script, e eles ficavam para trás do campo */
.btn-limpar{position:absolute;z-index:4;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--tinta-3);cursor:pointer;opacity:.5}
.btn-limpar::before{content:"";display:block;width:100%;height:100%;background:currentColor;-webkit-mask:var(--xis) center/12px no-repeat;mask:var(--xis) center/12px no-repeat}
.btn-limpar:hover{opacity:1}
.btn-quilo{position:absolute;z-index:4;width:30px;height:22px;padding:0;border:1px solid var(--marca);border-radius:7px;background:#fff;color:var(--marca-texto);font-size:12px;font-weight:700;line-height:1;cursor:pointer}
.btn-quilo.ativo{background:var(--marca);color:#fff}
.vazio-comeco{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 16px}
.vazio-comeco b{font-size:15px;color:var(--tinta)}
.vazio-comeco p{max-width:46ch;margin:0 0 8px;text-wrap:balance}
.btn-ajuda{width:14px;height:14px;border-radius:50%;border:1px solid var(--tinta-3);background:none;color:var(--tinta-3);font:700 9px/1 var(--sans);cursor:pointer;margin-left:3px;vertical-align:1px;padding:0}
.btn-ajuda:focus:not(:focus-visible){outline:none}
.ajuda-balao{position:absolute;z-index:50;max-width:min(280px,calc(100vw - 16px));background:var(--cartao);color:var(--tinta);border:1px solid var(--linha);font:400 13px/1.4 var(--sans);padding:8px 12px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.12);transition:opacity .3s}
.ajuda-balao.saindo{opacity:0}
.ajuda-balao::after{content:"";position:absolute;bottom:-6px;left:calc(var(--seta) - 6px);width:10px;height:10px;background:var(--cartao);border-right:1px solid var(--linha);border-bottom:1px solid var(--linha);transform:rotate(45deg)}

/* Partes do plano Completo vistas por quem está no Grátis (js/plano.js) */
.previa{border:2px solid var(--marca);background:var(--marca-claro)}
.previa h2{margin-top:0}
.previa p{margin:0 0 12px;color:var(--tinta-2);max-width:720px}

/* Só para ver: apagado e sem resposta ao clique; o aviso e o título continuam nítidos */
[data-so-ver]{cursor:default;user-select:none}
[data-travado]{cursor:default;user-select:none;opacity:.5;filter:grayscale(.4)}
[data-so-ver]:not(.cab) > :not(h2, .aviso-plano, .lista-cab), [data-so-ver] > .lista-cab > .btn{opacity:.5;filter:grayscale(.4)}
.selo-diamante{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:8px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--linha);vertical-align:middle;flex:none}
.selo-diamante::before{content:"";width:14px;height:14px;background:var(--marca-texto);-webkit-mask:var(--diamante) center/contain no-repeat;mask:var(--diamante) center/contain no-repeat;--diamante:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect y='-2' width='24' height='28' fill='%23fff'/%3E%3Cpath d='M2 9h20M7 3l5 18 5-18' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/mask%3E%3Cg transform='translate(0 1)'%3E%3Cpath mask='url(%23m)' d='M7 3h10l5 6-10 12L2 9z'/%3E%3C/g%3E%3C/svg%3E")}
.aviso-plano{display:block;width:100%;margin:0 0 14px;padding:10px 14px;border:0;border-radius:10px;background:var(--marca-claro);color:var(--marca-texto);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.aviso-plano:hover{filter:brightness(.95)}
.aviso-plano + .parte-cfg{margin-top:14px}
.convite{display:flex;align-items:center;gap:10px 14px;margin:0 0 14px;padding:10px 12px 10px 16px;border:1px solid var(--marca);border-radius:12px;background:var(--marca-claro)}
.convite p{flex:1;margin:0;color:var(--marca-texto);font-size:14px;font-weight:600}
.convite .btn{flex-shrink:0}
@media (max-width:620px){.convite{flex-wrap:wrap}.convite p{flex-basis:calc(100% - 40px)}}
.convite-fechar{flex:none;width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--marca-texto);cursor:pointer}
.convite-fechar::before{content:"";display:block;width:100%;height:100%;background:currentColor;-webkit-mask:var(--xis) center/12px no-repeat;mask:var(--xis) center/12px no-repeat}
.convite-fechar:hover{background:rgba(255,255,255,.6)}
.faixa-visitante{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:10px;max-width:var(--largura);margin:12px auto 0;padding:10px 14px;border-radius:12px;background:var(--marca-claro,#e6f6f4);color:var(--marca-texto)}
.faixa-visitante p{flex:1;margin:0;font-size:14px}
@media (max-width:620px){.faixa-visitante{flex-wrap:wrap;margin:12px 16px 0}.faixa-visitante p{flex-basis:100%}}

.calc{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:24px;align-items:start}
.calc .cab{justify-content:flex-start;gap:12px 20px}
.bonus{border-style:dashed;border-color:var(--borda-campo)}
.linha-peca{grid-template-columns:minmax(0,1fr) 150px}
.linha-taxa{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px}
.taxa-pct{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--tinta-2)}
.taxa-pct input{width:84px}
.campo-canal{min-width:220px}
.linha-taxa .dica{flex:0 0 100%;margin:0}

.mao-obra{container-type:inline-size;display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:start}
.mao-obra .campo{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tinta-2)}
.rotulo{font-weight:600}
.nivel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px}
/* Em tela média as 12 caixas ficariam espremidas numa linha só */
@container (max-width:745px){.nivel{grid-template-columns:repeat(6,1fr)}}
.nivel label{position:relative;cursor:pointer}
.nivel input{position:absolute;opacity:0}
.nivel span{display:block;border:1px solid var(--borda-campo);border-radius:12px;padding:8px 0;background:#fff;text-align:center;font-size:16px;font-weight:700;color:var(--tinta-2)}
.nivel span:hover{border-color:var(--marca)}
.nivel input:checked + span{border-color:var(--marca);background:var(--marca-claro);color:var(--marca-texto);box-shadow:inset 0 0 0 1px var(--marca)}
.nivel input:focus-visible + span{outline:2px solid var(--marca);outline-offset:2px}

.mats{display:flex;flex-direction:column;gap:10px}
.mats:empty{display:none}
.bloco > h2:has(+ .mats:empty:last-child){margin-bottom:0}
.mats + .vazio{margin-top:10px}
.mat{display:grid;grid-template-columns:minmax(150px,1fr) 70px 130px 80px 34px;gap:8px;align-items:center;padding:10px;border:1px solid var(--linha);border-radius:12px;background:var(--neutro-2)}
.mat.fio{grid-template-columns:minmax(150px,1fr) 70px 70px 80px 34px}
.mat.avulso{grid-template-columns:minmax(140px,250px) minmax(120px,1fr) 110px 80px 34px}
.mat .campos-mat{display:contents}
.mat .com-un{display:flex;align-items:flex-end;gap:5px;font-size:14px;color:var(--tinta);white-space:nowrap}
.mat .com-un > .un{line-height:40px}
.mat .rodape-mat .com-un > .un{line-height:30px}
.mat .mini{display:flex;flex-direction:column;gap:2px;min-width:0}
.mat .mini small{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-3)}
#tab-calc label.campo > span{font-size:12.5px;color:var(--tinta)}
.mat .rodape-mat input[type=text]{padding-top:5px;padding-bottom:5px;font-size:13px}
.mat .unid{font-size:14px;color:var(--tinta);padding-left:2px}
.mat .custo{text-align:right;font-weight:600}
.mat .rodape-mat{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:-2px}
.mat .rodape-mat:has(.info:empty):not(:has(select, .extra, .peso-link)){display:none}
.mat .peso-link{font-size:12.5px;font-weight:600}
.mat .dois{grid-column:span 2}
.mat select.pesagem{width:auto;height:28px;padding:0 30px 0 10px;background-position:right 10px center;border-radius:8px;font-size:13px;color:var(--tinta-2)}
.mat :is(.info,.peso-dica){font-size:12.5px;color:var(--tinta-3)}
.mat.excede :is([data-m="qtd"], [data-m="depois"]){border-color:var(--erro)}
.mat.acabou [data-m="itemId"]{border-color:var(--erro);box-shadow:0 0 0 3px rgba(200,60,60,.15);color:var(--tinta-3);font-style:italic}
.btn-fora{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--marca-texto);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.mat .extra{display:contents;font-size:13px}
.mat .extra .check{font-size:13px;color:var(--tinta-2)}
/* No computador os campos ficam juntos à esquerda e descem se o nome for comprido;
   o valor que entra na peça e a lixeira ficam numa coluna à direita, no meio da altura da caixa */
@media (min-width:621px){
  .mat,.mat.fio,.mat.avulso{grid-template-columns:minmax(0,1fr) 90px 34px}
  .mat .campos-mat{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
  .mat .rodape-mat{grid-column:1;align-items:flex-end}
  .mat .custo,.mat > .btn-x{grid-row:1/3;grid-column:2}
  .mat > .btn-x{grid-column:3}
  /* O nome escrito à mão ocupa o espaço que sobra: "Olhos de segurança" não cabia na caixa do tamanho padrão */
  .mat .mini:has(> [data-m="avulsoNome"]){flex:1 1 180px}
}
.falta{color:var(--erro);font-weight:600}
.kit-total{color:var(--tinta-2)}
.obs{min-height:34px;max-height:160px;padding:6px 12px;font-size:14px;line-height:1.45;resize:none;field-sizing:content;overflow-wrap:anywhere}
.kit-total b{margin-left:6px;color:var(--tinta)}

/* A etiqueta imita a tag de papel pendurada nas bolsas da marca */
.lado{position:sticky;top:16px}
.lado.solto{position:static}
.fio-svg{display:block;margin:0 auto -6px;width:120px;height:44px}
.etiqueta{position:relative;background:var(--marca-forte);color:var(--sobre-marca,#fff);border-radius:24px 24px 20px 20px;padding:34px 24px 22px;box-shadow:0 12px 30px -14px rgba(42,130,119,.45)}
.etiqueta::before{content:"";position:absolute;inset:8px;border:1.5px dashed rgba(255,255,255,.45);border-radius:16px 16px 12px 12px;pointer-events:none}
.et-copiar{position:absolute;top:14px;right:14px;color:inherit}
.et-copiar:hover{color:var(--marca-escuro);background:#fff}
.furo{position:absolute;top:12px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--papel);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.et-topo{text-align:center;font-family:var(--num);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;opacity:.9;margin-top:6px}
.et-nome{text-align:center;font-size:17px;font-weight:700;margin-top:4px;min-height:1.4em;overflow-wrap:anywhere}
.et-preco{text-align:center;font-size:52px;font-weight:800;line-height:1.1;margin:8px 0 2px;font-variant-numeric:tabular-nums}
.et-preco small{font-size:22px;font-weight:700;vertical-align:.8em;margin-right:6px}
/* A linha fica mesmo vazia (no brinde não há "calculado"), para o resto da etiqueta não subir ao trocar */
.et-sub{text-align:center;font-size:12.5px;line-height:1.4;opacity:.95;min-height:1.4em}
.et-linhas{margin:18px 0 0;padding:14px 0 0;border-top:1.5px dashed rgba(255,255,255,.35);display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14px}
.et-linhas dt{font-weight:600}
.et-linhas dd{margin:0;font-weight:600;text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums}
.et-linhas .forte{font-weight:700;opacity:1}
.et-aviso{margin:8px 0 0;background:var(--erro-claro);color:var(--erro-escuro);border-radius:10px;padding:7px 12px;font-size:13px;line-height:1.35}
.et-abre{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.et-abre::after{content:'';width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.et-abre.aberto::after{transform:translateY(1px) rotate(-135deg)}
.et-abre:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.et-detalhe{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:2px 12px;margin:-2px 0 4px 10px;font-size:12px;opacity:.85}
.et-kit-item{padding-left:12px}
.et-detalhe span:nth-child(even){text-align:right;font-family:var(--num)}
.et-linhas .div{grid-column:1/-1;border-top:1.5px dashed rgba(255,255,255,.35);margin:4px 0}
.et-voce{margin-top:14px;background:#fff;color:var(--marca-escuro);border-radius:14px;padding:10px 14px;display:flex;justify-content:space-between;align-items:baseline}
.et-voce span{font-size:13px;font-weight:700}
.et-voce b{font-family:var(--num);font-size:22px;font-weight:800}
.caixa-site{margin-top:14px;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.cs-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px;color:var(--tinta-2)}
.cs-topo b{font-family:var(--num);font-size:16px;color:var(--tinta);white-space:nowrap}
.caixa-site .check{font-weight:700}
.caixa-site .dica{margin:0}
.caixa-site:has(.cs-simples){background:none;border:0;padding:0 4px}
.cs-simples{margin:0;text-align:center;font-size:13px;color:var(--tinta-2)}
.cs-caro{color:var(--erro-escuro);font-weight:700}
.cs-simples b{font-family:var(--num);color:var(--tinta)}
.acoes-et{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.acoes-et > .dica{text-align:center;margin:0}
.registrar{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.registrar .linha-botoes{margin-top:0}
.linha-checks{display:flex;flex-wrap:wrap;gap:10px 22px}
.reg-cat{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--tinta-2)}
.reg-cat > span{font-weight:600}
.reg-cats{display:flex;flex-wrap:wrap;gap:5px}
.reg-cats label{position:relative;cursor:pointer}
.reg-cats input{position:absolute;opacity:0;pointer-events:none}
/* Apagadas pareciam desligadas: sem marcar, ficam brancas com contorno, e só a marcada ganha a cor da categoria */
.reg-cats .pill{padding:4px 10px;font-size:12.5px;text-transform:capitalize}
.reg-cats input:not(:checked) + .pill{background:#fff;color:var(--tinta-2);box-shadow:inset 0 0 0 1px var(--borda-campo)}
.reg-cats label:hover input:not(:checked) + .pill{box-shadow:inset 0 0 0 1px var(--marca)}
.reg-cats input:checked + .pill{box-shadow:inset 0 0 0 1.5px currentColor}
.reg-cats input:focus-visible + .pill{outline:2px solid var(--marca);outline-offset:2px}
.reg-resto{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:13px;color:var(--tinta-2)}
.reg-resto > span{flex-basis:100%;font-weight:600}
.dialogo .reg-resto{margin-top:12px;padding-top:12px;border-top:1px solid var(--linha)} .reg-resto > span{font-size:15px;color:var(--tinta)}
.dialogo .reg-resto .check{margin:2px 0}
/* Largura fixa: o tamanho da janela não muda enquanto a pessoa escreve o valor */
.dialogo.receber{width:460px}
.rec-dizimo{margin:8px 0 0;font-size:12.5px;color:var(--tinta-2)}
.grade > .rec-dizimo{grid-column:1/-1;margin:0}
.rec-pagos{list-style:none;margin:10px 0 14px;padding:0;border-top:1px solid var(--linha);font-size:14px}
.rec-pagos li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--linha)}
.rec-pagos b{font-weight:600}
.rec-pagos .falta{border-bottom:0;color:var(--tinta-2)}

/* Precificações em andamento: etiquetas pequenas, para não competir com os campos da peça */
.tags-rasc{flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0}
.rasc{display:inline-flex;align-items:center;max-width:220px;border-radius:999px;background:var(--neutro);color:var(--tinta-2);font-size:12px;font-weight:700}
.rasc.ativa{background:var(--marca-claro);color:var(--marca-texto)}
.rasc button{all:unset;cursor:pointer;padding:3px 0 3px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rasc .rasc-x{flex:none;padding:3px 8px 3px 5px;opacity:.55}
.rasc .rasc-x:hover{opacity:1}
.rasc-nova{all:unset;cursor:pointer;padding:3px 4px;font-size:12px;font-weight:700;color:var(--marca-texto);white-space:nowrap}
.rasc-nova.ativa{text-decoration:underline;text-underline-offset:3px}
.rasc button:focus-visible,.rasc-nova:focus-visible{outline:2px solid var(--marca);outline-offset:1px;border-radius:999px}

@media (prefers-reduced-motion:no-preference){
  .et-preco{transition:transform .18s ease}
  .et-preco.pulsa{transform:scale(1.04)}
}
/* Até aqui a etiqueta ao lado deixaria as linhas de material sem largura */
@media (max-width:1060px){
  .calc{grid-template-columns:1fr}
  .lado{position:static}
}
@media (max-width:620px){
  /* O título é comprido: a letra acompanha a largura da tela para ele caber numa linha só */
  .calc .cab h1{font-size:clamp(22px,7.6vw,34px)}
  .linha-peca{grid-template-columns:1fr}
  .mao-obra{grid-template-columns:1fr}
  .nivel{grid-template-columns:repeat(6,1fr)}
  .mat,.mat.fio,.mat.avulso{grid-template-columns:1fr 1fr}
  .mat .mini:has(> :is([data-m="itemId"],[data-m="avulsoNome"])){grid-column:1/-1}
  .mat .custo{text-align:left}
  .et-preco{font-size:48px}
}

/* Confirmação de peça registrada, no lugar do botão */
.peca-salva{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--linha);border-radius:12px;background:var(--ok-claro);color:var(--ok-escuro);font-size:14px}
.peca-salva > span{color:var(--tinta-2);font-size:13px}
.peca-salva .linha-botoes{margin-top:8px;gap:8px}
#tab-hist tr.recem-salva > td{animation:recem-salva 2.4s ease-out}
@keyframes recem-salva{0%,40%{background:var(--marca-claro)}}
/* Mensagem do orçamento no registro, depois dos botões para não empurrá-los para baixo */
.reg-zap{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--linha)}
.reg-zap-topo{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:13px;font-weight:600}
.reg-zap-opcoes{display:flex;flex-wrap:wrap;gap:3px}
.chip-zap{border:1px solid var(--linha);background:var(--neutro);border-radius:999px;padding:2px 7px;white-space:nowrap;font:600 12px var(--sans);color:var(--tinta-2);cursor:pointer}
.chip-zap[aria-pressed="true"]{border-color:var(--marca);background:var(--marca-claro);color:var(--marca-escuro)}
.reg-zap .linha-botoes{gap:8px}
.peso-fixo{display:inline-flex;align-items:center;min-height:40px;padding:0 4px;font-size:17px;font-weight:600;color:var(--tinta);white-space:nowrap}

.linhas-c{container-type:inline-size;display:flex;flex-direction:column;gap:10px;margin-top:12px}
/* Data e frete são curtos; loja e link pedem mais espaço. Cabendo, ficam os quatro numa linha */
.grade-pedido{display:flex;flex-wrap:wrap;gap:12px}
.grade-pedido > *{flex:1 1 190px}
.grade-pedido > :has([data-p="data"]){flex:0 1 170px}
.grade-pedido > :has([data-p="frete"]){flex:0 1 130px}
.grade-pedido > :has([data-p="link"]){flex:2 1 220px}
.linha-c{border:1px solid var(--linha);border-radius:12px;padding:12px;background:var(--neutro-2);display:grid;gap:10px;grid-template-columns:minmax(150px,1.6fr) minmax(90px,.7fr) minmax(120px,1.1fr) minmax(120px,1fr) minmax(100px,.8fr) 34px}
.linha-c .check.no-campo{align-self:start;margin-top:33px;font-size:12.5px;color:var(--tinta-2)}
.linha-c > .acoes-c{align-self:end;display:flex;gap:2px}
/* 190px é o que o nome de campo mais comprido precisa para caber em uma linha; em tela média dá três campos por linha */
.linha-c .g2{grid-column:1/-1;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.campo-duplo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo-duplo .check{font-size:12.5px;color:var(--tinta-2)}
.campo-duplo .dica{margin:0;line-height:1.3}
.linha-c > .dica{grid-column:1/-1;margin:0}
#form-compra input:disabled{background:var(--neutro);color:var(--tinta-2)}
.item-esgotado{color:var(--erro-escuro)}
.linha-esgotada{border-color:#F3C9C9;background:#FEF6F6}
#form-compra .linha-esgotada :is(input,select):disabled{background-color:var(--erro-claro);border-color:#F3C9C9;color:var(--erro-escuro)}
.linha-esgotada .com-rs i{color:var(--erro-escuro)}
.linha-c > .det-c{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.det-c .btn{gap:10px;padding:8px 16px;font-size:14px}
.det-c small{font-size:13px;color:var(--tinta-2)}
.det-c .seta{width:0;height:0;border:5px solid transparent;border-left:7px solid currentColor;border-right:0;transition:transform .15s}
.det-c [aria-expanded="true"] .seta{transform:rotate(90deg)}
.com-rs{position:relative;display:block}
.com-rs > i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-style:normal;font-size:14px;color:var(--tinta-3);pointer-events:none}
.com-rs > input{padding-left:36px}
/* Os lotes ficam juntos numa faixa só, para a conta dos rolos ficar perto deles */
.lotes-c{grid-column:1/-1;flex-basis:100%;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px}
.lotes-c > .check{align-self:center;font-size:14px}
.lotes-c.varios > .check{align-self:flex-start}
.lotes-c .campo{flex:0 1 180px}
.lote-campo{flex:0 1 180px;display:grid;gap:4px;justify-items:start}
.lote-campo .campo{width:100%}
.lotes-c .btn-fora{font-size:13px;font-weight:600}
.lotes-c.varios{flex-direction:column;align-items:flex-start}
.lote-c{display:flex;align-items:flex-end;gap:8px;max-width:100%}
.lote-c .campo{flex:0 1 180px;width:180px;min-width:0}
.lote-c .lote-qtd{flex:0 0 80px;width:80px}
.lote-c .btn-x{margin-bottom:6px}
.lote-titulos{margin-bottom:-8px;font-size:13px;font-weight:600;color:var(--tinta-2)}
.lotes-pe{display:flex;align-items:center;gap:12px}
.aviso-lotes{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--tinta-3)}
.lotes-conta{font-size:13px;color:var(--tinta-2)}
.lotes-conta.falta{color:var(--erro);font-weight:700}
.linha-c .prev{grid-column:1/-1;font-size:13px;color:var(--tinta-2);background:#fff;border-radius:8px;padding:6px 10px;border:1px dashed var(--linha)}
.linha-c .prev b{font-family:var(--num);color:var(--marca-texto)}
.rodape-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
.rodape-form .total{margin-left:auto}

.pedido{background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);margin-bottom:12px;overflow:hidden}
.pedido-cab{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--linha);background:var(--neutro-2)}
.pedido-cab .tot{margin-left:auto;font-family:var(--num);font-weight:600}
.pedido-corpo{overflow-x:auto}
.pedido table td{border-bottom:1px dashed var(--linha)}
/* Largura fixa para as colunas ficarem alinhadas de um pedido para o outro */
.pedido table{table-layout:fixed}
.pedido th:first-child{width:40%}
.pedido th:last-child:empty{width:60px}
.pedido > .dica{padding:0 16px 12px}

.detalhe td{background:var(--neutro-2);font-size:13.5px}
.detalhe ul{margin:6px 0;padding-left:18px}
/* A setinha fica na coluna das bolinhas de cima, e as bolinhas de dentro ficam embaixo da primeira letra do kit */
.det-kit{list-style:none}
.det-kit summary{position:relative;list-style:none;cursor:pointer}
.det-kit summary::-webkit-details-marker{display:none}
.det-kit summary::before{content:"";position:absolute;left:-14px;top:.42em;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}
.det-kit details[open] summary::before{transform:rotate(90deg)}
.detalhe .det-kit ul{margin:2px 0 0;padding-left:15px}
.det-sep{border:0;border-top:1px solid var(--linha);margin:10px 0}

/* O saldo fica no meio do espaço entre o título e os botões, grande porque é o dinheiro que se tem agora */
.cab-saldo{display:flex;flex-wrap:nowrap;align-items:center;gap:16px} .cab-saldo h1{font-size:clamp(34px,4vw,42px)}
.caixa-saldo{box-sizing:border-box;flex:0 1 480px;align-self:stretch;margin:0 auto;padding:10px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:0 6px 20px rgba(28,28,28,.06);cursor:help}
.caixa-saldo span{font-size:13px;color:var(--tinta-3)}
.caixa-saldo b{font-family:var(--num);font-size:36px;font-weight:800;line-height:1.2}
.menu-caixa{position:relative}
.menu-caixa summary{list-style:none}
.menu-caixa summary::-webkit-details-marker{display:none}
.menu-caixa summary::after{content:"";width:7px;height:7px;margin:-3px 0 0 10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.menu-caixa[open] summary::after{margin-top:4px;transform:rotate(-135deg)}
.menu-caixa-lista{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:330px;max-width:calc(100vw - 32px);display:grid;padding:6px;background:var(--cartao);border:1px solid var(--linha);border-radius:14px;box-shadow:0 10px 30px rgba(28,28,28,.12)}
.menu-caixa-lista button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 12px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;font:inherit;color:var(--tinta)}
.menu-caixa-lista button:hover{background:var(--neutro-2)}
.menu-caixa-lista b{font-size:14.5px}
.menu-caixa-lista small{font-size:12.5px;color:var(--tinta-3)}

/* Abaixo do título (tablet e janela estreita) os cartões seguem o padrão do cabeçalho: mesmo tamanho, com o link de detalhes pendurado fora */
@media (min-width:621px){
  .topo-resumo{align-items:flex-start}
  .topo-resumo .resumo{flex-wrap:nowrap}
  .topo-resumo .resumo:has(.card-link){margin-bottom:22px}
  .topo-resumo .resumo > *{box-sizing:border-box;width:180px;height:64px;min-width:0}
  .topo-resumo .resumo > div:not(.gasto-lojas),.topo-resumo .card-link{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:8px 16px}
  .topo-resumo .card-link{width:100%;height:100%;min-width:0}
  .topo-resumo .card-link em{position:absolute;top:calc(100% + 5px);left:0;right:0;justify-content:center;margin:0}
  .topo-resumo .balao-lojas{top:calc(100% + 30px)}
  .topo-resumo .resumo b{font-size:19px;line-height:1.3}
}
/* Cartões de valor no meio do cabeçalho, todos do mesmo tamanho nas duas partes */
.resumo-topo{display:none}
@media (min-width:1041px){
  /* A margem maior guarda o lugar do "Ver por loja", que fica pendurado abaixo do cartão */
  .cab-compras{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:38px}
  .cab-compras .sub-abas{justify-self:start}
  .cab-compras .botoes-topo{justify-self:end}
  .resumo-topo{display:block}
  #sub-compras .resumo{display:none}
  .resumo-topo .resumo{margin:0;flex-wrap:nowrap}
  .resumo-topo .resumo > *{box-sizing:border-box;width:180px;height:64px;min-width:0}
  .resumo-topo .resumo > div:not(.gasto-lojas),.resumo-topo .card-link{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:8px 16px}
  .resumo-topo .card-link{width:100%;height:100%;min-width:0}
  /* "Ver por loja" fica logo abaixo do cartão, para ele ter o tamanho dos outros */
  .resumo-topo .card-link em{position:absolute;top:calc(100% + 5px);left:0;right:0;justify-content:center;margin:0}
  .resumo-topo .balao-lojas{top:calc(100% + 30px)}
  .resumo-topo .resumo b{font-size:19px;line-height:1.3}
}

@media (max-width:620px){
  .linha-c{grid-template-columns:1fr 34px}
  /* Centrados só na altura dos campos: os detalhes abertos ocupam a largura toda e ficariam embaixo dos botões */
  .linha-c > .acoes-c{flex-direction:column;grid-column:2;grid-row:1/span 5;align-self:center}
  .linha-c:has([data-l="recebido"],[data-l="pesado"]) > .acoes-c{grid-row:1/span 6}
  .linha-c > :is(label,.campo-duplo){grid-column:1/2}
  /* No celular cabem dois campos por linha, e aí o nome comprido quebra: todos reservam as duas linhas para as caixas ficarem na mesma altura */
  .linha-c .g2{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .linha-c .g2 label.campo > span{display:flex;align-items:flex-end;min-height:2.7em;line-height:1.35}
  .grade-pedido > *,.grade-pedido > :has([data-p]){flex:1 1 130px}
}
.aparencia{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 56px}
.aparencia > div > h3.sub:first-child{margin-top:0}
.ap-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ap-resumo{display:flex;flex-wrap:wrap;gap:8px 40px}
.ap-resumo .bolinha{cursor:default}
.ap-resumo .dica{margin:0}
.ap-nome{font-size:18px;color:var(--marca-texto)}
.ap-amostra{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.ap-amostra .btn{cursor:default}
.cores-linha{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 6px;margin-top:10px}
.cores-linha > .dica{margin:4px 2px 0 0}
.cores-extras{flex:0 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:2px}
.cores-grupo{display:flex;align-items:center;gap:7px;cursor:pointer}
.cores-grupo small{font-size:13px;color:var(--tinta-2);white-space:nowrap}
.bolinha{width:26px;height:26px;padding:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--linha);cursor:pointer;flex:none}
.bolinha.sel{box-shadow:0 0 0 2px var(--tinta)}
input[type=color].bolinha{appearance:none;-webkit-appearance:none;background:none;overflow:hidden}
input[type=color].bolinha::-webkit-color-swatch-wrapper{padding:0}
input[type=color].bolinha::-webkit-color-swatch{border:none;border-radius:50%}
input[type=color].bolinha::-moz-color-swatch{border:none;border-radius:50%}
.ap-alerta{margin-top:10px;padding:8px 12px;border-radius:10px;background:#FEF3C7;color:#92400E;font-size:13px}
.ap-opcoes{display:flex;flex-direction:column;gap:8px}
.ap-cor-opcao{padding:0 12px 6px}
.ap-cor-opcao > h3.sub{margin-top:4px}
.ap-opcao{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--linha);border-radius:12px;cursor:pointer}
.ap-opcao:has(:checked){border-color:var(--marca);background:var(--marca-claro)}
.ap-opcao > input{margin-top:4px;accent-color:var(--marca)}
.ap-opcao > span{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.ap-opcao small{color:var(--tinta-2);font-size:12.5px;line-height:1.35}
.ap-opcao input[type=text]{max-width:280px}
.ap-opcao input[type=file]{max-width:100%;font-size:13px}
.ap-opcao .btn{align-self:flex-start}
.nivel-cfg{position:relative}
.nivel-cfg .btn-x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;background:#fff;border:1px solid var(--linha);border-radius:50%}
.nivel-cfg .btn-x::before{width:13px;height:13px}
.nivel-novo{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:10px}
.compacto .nivel-novo .campo{flex:0 1 200px} .nivel-novo .dica{flex-basis:100%;margin:0}
.compacto .campo-duplo .check{font-size:12.5px}
.cat-rotulos{grid-template-columns:repeat(auto-fit,minmax(200px,280px));margin-top:12px}
.cat-modelos{margin-top:12px;max-width:760px}
.cat-modelos td{padding:6px 10px}
.cat-modelos td input{text-align:center}
.cat-modelos td:first-child input{text-align:left}
.foto-grande{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;background:rgba(28,28,28,.75);cursor:zoom-out}
.foto-grande img{max-width:min(1000px,100%);max-height:85vh;border-radius:12px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.foto-grande span{color:#fff;font-size:13px}
.barra-ap{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:40;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;max-width:calc(100vw - 24px);padding:10px 14px;background:#fff;border:1px solid var(--marca);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.18);font-size:14px}
.ap-logo{align-self:flex-start;height:34px;max-width:200px;object-fit:contain;padding:4px 8px;background:#fff;border:1px dashed var(--linha);border-radius:8px}
.estoque td > small{display:block;font-size:12px;color:var(--tinta-3);line-height:1.3}
.estoque td > small a{color:inherit}
/* Uma tabela por categoria: largura fixa das colunas para todas ficarem alinhadas entre si */
.estoque table{table-layout:fixed}
.estoque th.c-tam{width:90px}
.estoque th.c-cor{width:150px}
.estoque td .nota{margin-left:6px;font-size:12px;color:var(--tinta-3);white-space:nowrap}
.estoque td input[data-ie="tamanho"]{text-align:center}
.estoque tr.edicao .linha-botoes .check{margin-right:auto}
.estoque th.c-comprei{width:80px}
.estoque th.c-paguei{width:90px}
.estoque th.c-tenho{width:130px}
/* Sem fio na tabela não há "rolos" para caber, e a coluna da quantidade pode ser estreita */
.estoque.tenho-fino th.c-tenho{width:108px}
.estoque td .qtd-ajuste input[data-ie="tenho"]{width:48px;padding-left:4px;padding-right:4px}
.estoque.tenho-fino td .qtd-ajuste input[data-ie="tenho"]{width:36px}
.estoque.tenho-fino td:has(> .qtd-ajuste){padding-left:8px;padding-right:8px}
.estoque th.c-peso{width:100px}
.estoque th.c-custo{width:110px}
.estoque th.c-loja{width:100px}
.estoque th.acoes{width:56px}
.estoque th.c-ultima{width:120px}
/* Vermelho claro para não confundir o que acabou com o que há em estoque */
.esgotados .titulo-cat{color:var(--erro-escuro)}
.esgotados .tab-wrap{border-color:#F3C9C9;background:#FEF6F6}
.esgotados .tab-wrap thead th{background:var(--erro-claro);color:var(--erro-escuro)}
.esgotados .estoque th.c-comprei{width:110px}
.esgotados .estoque th.c-loja{width:190px}
.titulo-cat{margin:22px 0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.titulo-cat .btn-olho{display:none}
.titulo-cat button:not(.btn-olho){all:unset;display:inline-flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px;margin:-4px 0 -4px -8px;border-radius:8px}
.titulo-cat button:hover{background:var(--marca-claro);color:var(--marca-texto)}
.titulo-cat button:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.titulo-cat .seta{flex:none;width:12px;height:12px;background:var(--seta) center/contain no-repeat;transition:transform .15s}
.titulo-cat.fechada .seta{transform:rotate(-90deg)}
.titulo-cat .qtd{font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none;opacity:.8}
.estoque .btn-qtd{width:22px;height:22px;font-size:14px}
.estoque td a:has(.pill){text-decoration:none}
.estoque td > .pill + small,.estoque td > a + small{margin-top:5px}
.estoque td input[type=text]{padding:5px 10px;font-size:14px;border-radius:8px}
.estoque td input[data-ie="nome"]{font-weight:700}
.estoque td input[data-ie="cor"]{text-align:center}
.estoque td input[data-ie="peso"]{text-align:center;width:100%}
.estoque td input[data-ie="tenho"]{text-align:center}
.peso-cone small{display:block;font-size:12px;color:var(--tinta-3);line-height:1.3}
@media (min-width:621px){
  /* Tamanho, cor e números ficam colados uns nos outros; o traço separa o que o espaço não separa */
  /* O traço vai como fundo e não como borda: na linha dos títulos, presa ao rolar, a borda não é desenhada,
     e misturar os dois deixava o traço do título um ponto fora do traço dos itens */
  .estoque tr:not(.edicao) > :not(:first-child){background-image:linear-gradient(var(--linha),var(--linha));background-size:1px 100%;background-repeat:no-repeat}
  .peso-cone{position:relative;display:inline-block}
  .peso-cone small{position:absolute;top:calc(100% - 2px);left:50%;transform:translateX(-50%);font-size:10.5px;line-height:1;white-space:nowrap}
}
.estoque td .check{display:flex;justify-content:center;gap:6px;font-size:12px;color:var(--tinta-2);white-space:nowrap}
.estoque tr.edicao td:has(> .check){padding:6px 0}
.estoque td .check input{width:15px;height:15px;border-radius:5px;background-size:10px}
.estoque tr.edicao td{background:var(--marca-claro);padding:6px 12px}
.estoque tr.edicao .linha-botoes{justify-content:flex-end;gap:8px;margin:0}

.cab-caixa{margin:0;display:grid;gap:6px} .cab-caixa .btn{width:100%;justify-content:center}
/* No computador os campos da compra ficam juntos, cada um do tamanho do que está escrito, e descem quando não cabem */
@media (min-width:621px){
  /* Em cima, para a dica do último preço embaixo do valor não levantar a caixa dele */
  .linha-c{display:flex;flex-wrap:wrap;align-items:flex-start} .linha-c > .acoes-c{margin-left:auto;margin-top:24px;align-self:flex-start}
  .linha-c > label:first-child{flex:1 1 220px;max-width:340px}
  .linha-c > .campo-link{flex:1 1 140px}
  .linha-c .g2{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:flex-start}
  .linha-c > :is(.dica,.prev,.det-c){flex-basis:100%}
  /* Um link comprido, como os da Shein, passava da largura do cartão: o campo encolhe até ela e o resto do texto rola dentro dele */
  .linha-c .g2,.campo-link{min-width:0;max-width:100%}
  .campo-link input{text-overflow:ellipsis}
}

/* Aba Peças: Disponíveis e Vendas */
/* Dez colunas: as outras ficam do tamanho do conteúdo, para o nome da peça não quebrar linha. Em tela estreita a tabela não caberia sem quebrar */
#tab-hist th,#tab-hist td{padding-left:8px;padding-right:8px}
/* Brinde ligado a uma peça: recuado e preso a ela por um cantinho */
#tab-hist tr.brinde-filho > td.txt{position:relative;padding-left:32px}
#tab-hist tr.brinde-filho > td.txt::before{content:"";position:absolute;left:12px;top:0;width:11px;height:50%;border-left:1.5px solid var(--borda-campo);border-bottom:1.5px solid var(--borda-campo);border-radius:0 0 0 6px}
@media (min-width:1001px){#tab-hist th:not(.txt),#tab-hist tr[data-id] > td:not(.txt){width:1%;white-space:nowrap}}
#tab-hist .sub-abas button{white-space:nowrap}
#tab-hist .resumo .balao-lojas b{font-size:14.5px}

/* Três cartões não cabem no meio do cabeçalho antes de 1200px: até lá o resumo fica acima da lista */
@media (min-width:1041px) and (max-width:1199px){
  #tab-hist .resumo-topo{display:none}
  #tab-hist .cab-compras{margin-bottom:18px}
}
@media (min-width:1200px){#sub-pecas .resumo{display:none}}

/* Vendas por mês: cada mês é um cartão; fechado, sobra só a linha do título */
.meses{display:flex;flex-direction:column;gap:14px}
.mes-bloco{border:1px solid var(--linha);border-radius:14px;background:var(--cartao);overflow:clip}
.mes-bloco .tab-wrap{border:0;border-top:1px solid var(--linha);border-radius:0;margin:0}
.filtros:has(.btn-numeros){flex:1 1 100%}
.btn-numeros{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--tinta-2);font:inherit;font-size:13px;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer}
.btn-numeros::before{content:"";width:17px;height:17px;background:currentColor;-webkit-mask:var(--olho) center/contain no-repeat;mask:var(--olho) center/contain no-repeat}
.btn-numeros.ativo::before{-webkit-mask-image:var(--olho-fechado);mask-image:var(--olho-fechado)}
.btn-numeros:hover{color:var(--marca-texto);background:var(--marca-claro)}
.mes-cab{display:flex;align-items:center;padding-right:10px}
.mes-titulo{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;flex:1;min-width:0;padding:14px 8px 14px 18px}
.mes-titulo:focus-visible{outline:2px solid var(--marca);outline-offset:-2px;border-radius:14px}
.mes-titulo h2{margin:0;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--tinta)}
.mes-titulo .seta{align-self:center;width:0;height:0;border:4.5px solid transparent;border-left:6px solid var(--tinta-3);border-right:0;transition:transform .15s}
.mes-titulo[aria-expanded="true"] .seta{transform:rotate(90deg)}
.mes-titulo .mes-conta{font-size:13px;color:var(--tinta-3)}
.mes-titulo .mes-total{margin-left:auto;font-weight:700;color:var(--tinta)}
.mes-titulo .mes-total small{font-size:12px;font-weight:600;color:var(--tinta-3)}
.mes-bloco.aberto .mes-cab{background:var(--marca-claro)}
.mes-titulo:hover h2{color:var(--marca-escuro)}

/* Caixa "Preço e lucro": faixas uma embaixo da outra, cada uma na largura toda */
.compacto input[type=text],.compacto textarea{width:100%;padding:5px 10px;font-size:14px}
.compacto select{padding:5px 32px 5px 10px;font-size:14px}
.compacto .grade{display:grid;gap:10px 12px}
.compacto label.campo small{display:block;font-weight:400}
.compacto h3.sub{margin:16px 0 6px}
.parte-cfg + .parte-cfg{margin-top:16px;padding-top:14px;border-top:1px solid var(--linha)}
.parte-cfg > h3.sub:first-child{margin-top:0}
.listas-completo{margin-top:16px;padding-top:14px;border-top:1px solid var(--linha)}
.lista-lida{margin:0;padding:0;list-style:none;font-size:15px;line-height:1.7}
.lista-edicao{display:grid;gap:5px;margin-top:6px}
.lista-edicao input[type=text]{height:30px;padding:3px 10px;font-size:13px}
.lista-linha{display:grid;grid-template-columns:18px minmax(0,1fr) 24px;gap:6px;align-items:center}
.lista-linha input[type=text]:disabled{background:var(--neutro);color:var(--tinta-2)}
/* O campo novo acompanha a coluna dos nomes, com o botão dentro dele */
.lista-nova{display:block;position:relative;margin:4px 30px 0 24px}
.com-caixa .lista-nova{margin-left:48px}
.lista-nova input[type=text]{width:100%;padding-right:86px}
.lista-nova .btn{position:absolute;right:3px;top:3px;height:24px;padding:0 10px;font-size:12.5px}
.lista-rotulo{font-size:12px;color:var(--tinta-3);padding-left:24px}
.com-caixa .lista-linha:not(.lista-nova){grid-template-columns:18px 18px minmax(0,1fr) 24px}
.com-caixa .check input:disabled{opacity:.55;cursor:default}
.com-caixa .lista-rotulo{padding-left:48px}
.lista-alca{width:18px;height:28px;padding:0;border:0;cursor:grab;touch-action:none;background:linear-gradient(var(--marca),var(--marca)) center 9px/14px 2px no-repeat,linear-gradient(var(--marca),var(--marca)) center 13px/14px 2px no-repeat,linear-gradient(var(--marca),var(--marca)) center 17px/14px 2px no-repeat}
.lista-alca:hover{opacity:.7}
.arrastando{opacity:.6}
.arrastando .lista-alca{cursor:grabbing}
.sug-oficio{display:inline-grid;gap:4px}
.sug-tipos:has(.sug-oficio){align-items:flex-end}
.sug-tipos:has(.sug-oficio) .btn{height:33px}
.valor-cfg{display:grid;gap:2px;font-size:13px;color:var(--tinta-2)}
/* Em Valores e em Dízimo e sinal o valor fica na frente do nome, para o resumo ocupar menos linhas */
.linha-cfg.dois div.valor-cfg{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
.linha-cfg.dois .valor-cfg > span{display:inline-flex;align-items:center}
.linha-cfg.dois .valor-cfg > span::after{content:":"}
/* O "?" fica junto do nome, e os dois pontos não encostam nele */
/* O centro da caixa da linha fica abaixo do meio das letras */
.linha-cfg.dois .valor-cfg > span .btn-ajuda{margin:0 0 0 4px;transform:translateY(-1px)}
.linha-cfg.dois .valor-cfg > span:has(.btn-ajuda)::after{margin-left:2px}
/* "Porcentagem fixa de 50%" fica na segunda coluna e não cabe em meia coluna ao lado do nome */
.linha-cfg.dois:has(.valor-cfg){grid-template-columns:minmax(0,190px) minmax(0,1fr)}
@media (max-width:620px){.linha-cfg.dois:has(.valor-cfg){grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}}
.valor-cfg > span{font-weight:600}
.valor-cfg > b{font-size:15px;font-weight:600;color:var(--tinta)}
.linha-cfg{display:grid;gap:10px 20px;align-items:start}
.linha-cfg.dois{grid-template-columns:1fr 1fr}
.linha-cfg.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
/* O campo aparece logo embaixo da caixinha que o liga */
.linha-cfg.dois > div,.linha-cfg.tres > div{display:grid;gap:8px;align-content:start}
/* A largura vem do ajustes-precos.js: a da caixinha com o título ou o número mais comprido. Não cabendo na linha, as outras descem */
.compacto .grade-niveis{grid-template-columns:repeat(auto-fill,var(--larg-nivel,90px));gap:12px 10px}
/* O "%" fica ao lado do número, fora da caixa */
.nivel-cfg .campo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:4px}
.nivel-cfg .campo > span{grid-column:1/-1}
.nivel-cfg .campo::after{content:"%";font-size:14px;color:var(--tinta)}
/* As caixas ficam em pares, sempre na mesma ordem; abrir uma não troca as outras de lugar */
.aj-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.aj-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.aj-col > .bloco{margin:0}
.listas-cfg .grade{grid-template-columns:1fr;gap:16px}
.lista-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 4px}
.lista-cab h3.sub{margin:0}
.custos-corpo{display:grid;gap:10px;margin-top:8px;max-width:560px}
.custo-horas{max-width:200px}
.custo-lista{display:grid;gap:6px}
.custo-cab,.custo-linha{display:grid;grid-template-columns:minmax(0,1fr) 130px 28px;gap:8px;align-items:center}
.custo-cab{font-size:12.5px;color:var(--tinta-3)}
.custo-novo{grid-template-columns:minmax(0,1fr) 130px auto}
.custo-resumo{margin:0;font-size:13.5px}
.custos-lidos{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:stretch}
.custo-contas{list-style:none;margin:0;padding:0;font-size:14px}
.custo-contas li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--linha)}
.custo-contas b{font-weight:400;white-space:nowrap}
.custo-contas li:last-child{border-bottom:0}
.custo-contas .total{font-weight:700}
.custo-contas .total b{font-weight:700}
.custo-hora{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:12px 14px;background:var(--marca-claro);border-radius:10px;font-size:13px}
.custo-hora b{font-size:22px;line-height:1.2;color:var(--marca-escuro)}
.custo-hora small{margin-top:4px;font-size:12.5px;color:var(--tinta-2)}
@media (max-width:620px){.custos-lidos{grid-template-columns:1fr}}

/* Mensagem do orçamento: o texto de um lado e, do outro, como ele chega no WhatsApp (as cores do balão são as de lá) */
.msg-cfg h3.sub{margin:0 0 8px}
.msg-cfg textarea{width:100%;font-size:14px;line-height:1.5}
.msg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.msg-chips button{border:1px solid var(--linha);background:var(--neutro);border-radius:999px;padding:3px 10px;font:600 12.5px var(--sans);color:var(--tinta-2);cursor:pointer}
.msg-chips button:hover{border-color:var(--marca);color:var(--marca-texto)}
.msg-cfg .dica{margin:8px 0 0}
.msg-fundo{background:#ECE5DD;border-radius:12px;padding:10px}
/* Menor que no celular, mas na mesma proporção entre letra e largura: as linhas quebram nos mesmos pontos do WhatsApp (medido num Android, cerca de 50 letras por linha) */
.msg-balao{box-sizing:border-box;max-width:288px;margin-left:auto;padding:6px 8px;background:#D9FDD3;border-radius:10px 0 10px 10px;box-shadow:0 1px 1px rgba(0,0,0,.15);font:12px/1.4 system-ui,sans-serif;color:#111;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-balao .cit{display:block;margin:1px -4px;padding:1px 4px 1px 6px;border-left:3px solid #25A36F;background:rgba(0,0,0,.05)}
/* Uma mensagem embaixo da outra na largura do balão; a edição abre à direita da mensagem e desce se não couber */
.msg-modelos{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 16px;align-items:start;margin-bottom:18px}
.msg-previa{max-width:308px}
.msg-modelo.editando{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start}
.msg-modelo.editando .msg-previa{flex:1 1 308px}
.msg-edicao{flex:1 1 220px;min-width:0}
.msg-nome{cursor:text}
/* Igual aos campos que abrem com dois cliques nas tabelas */
.msg-modelo-topo input[type=text].msg-nome-campo{field-sizing:fixed;width:170px;min-width:0;padding:5px 8px;font-size:14px}
.msg-prontos .msg-modelos{grid-template-columns:repeat(2,minmax(0,308px))}
/* No celular a tela já é a de verdade: a mensagem ocupa a largura toda, na letra que chega no WhatsApp */
@media (max-width:620px){.msg-prontos .msg-modelos{grid-template-columns:minmax(0,1fr)}.msg-previa{max-width:none}.msg-balao{max-width:none;font-size:15px}}
.dialogo.msg-prontos{width:700px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px)}
.msg-prontos .msg-modelos{margin:12px 0}
/* Altura fixa: o lápis, o Concluir e o campo do nome têm alturas diferentes, e a mensagem embaixo não pode pular ao trocar */
.msg-modelo-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;margin-bottom:6px;font-size:14px}
/* Até o tablet em pé as três colunas de dízimo, sinal e taxa não cabem lado a lado */
@media (max-width:900px){
  .linha-cfg.tres,.aj-grade{grid-template-columns:1fr}
  /* Em coluna única, Vendas e Kits, do plano Completo, ficam depois do que serve a todas */
  .aj-col{display:contents}
  .aj-col > .bloco{min-width:0}
  .aj-col:first-child > .bloco:nth-child(3){order:2}
  .aj-col:first-child > .bloco:nth-child(4){order:1}
}
.msg-acoes{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.sug-tipos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}

/* Guia de uso: o cartão é o mesmo das boas-vindas; aqui só o que é dele */
.guia-cartao{position:relative;max-width:860px}
.g-fechar{position:absolute;top:12px;right:12px;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:none;font-size:24px;line-height:1;color:var(--tinta-3);cursor:pointer}
.g-fechar:hover{background:var(--neutro-2);color:var(--tinta)}
.g-topo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0 34px 8px 0;font-size:13px;color:var(--tinta-2)}
.g-parte{font:800 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--marca-texto)}
.guia-cartao h1{font:700 22px/1.2 var(--sans);margin-bottom:8px}
.g-intro{margin:0 0 10px;color:var(--tinta-2)}
/* As instruções de uma tela com a foto dela ao lado; até 900 px a coluna do texto ficaria fina demais, e a foto vai embaixo. A foto abre grande no clique */
.g-bloco{display:grid;gap:10px 22px;margin-bottom:12px;padding-top:12px;border-top:1px solid var(--linha)}
@media (min-width:900px){.g-bloco:has(.g-foto){grid-template-columns:minmax(0,1fr) minmax(0,380px);align-items:start}}
.g-foto{display:block;width:100%;padding:0;border:1px solid var(--linha);border-radius:10px;background:#fff;overflow:hidden;cursor:zoom-in}
.g-foto:hover{border-color:var(--marca)}
.g-moldura{position:relative;display:block;line-height:0}
.g-img{display:block;width:100%;height:auto}
/* Cada instrução repete, no lugar do número, a bolinha da setinha que aponta o lugar dela na foto */
.g-itens{margin:0;padding:0;list-style:none;display:grid;gap:10px;align-content:start}
.g-itens li{position:relative;padding-left:32px;counter-increment:passo}
.g-marca,.g-itens li::before{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--marca);color:var(--sobre-marca,#fff);font:800 12px/1 var(--sans)}
.g-itens li::before{content:counter(passo);position:absolute;left:0;top:1px}
/* Setinha: a bolinha com uma ponta. O ponto marcado é a ponta, e a bolinha fica do lado de onde ela vem (data-d) */
.g-marca{--p:9px;position:absolute;box-shadow:0 0 0 1.5px #fff,0 1px 4px rgba(0,0,0,.3)}
.g-marca::after{content:"";position:absolute;border:calc(var(--p) - 1px) solid transparent;filter:drop-shadow(0 0 1px #fff)}
.g-marca[data-d="d"]{transform:translate(calc(-100% - var(--p) + 2px),-50%)}
.g-marca[data-d="d"]::after{left:calc(100% - 2px);top:50%;margin-top:calc(1px - var(--p));border-left-color:var(--marca);border-left-width:var(--p)}
.g-marca[data-d="e"]{transform:translate(calc(var(--p) - 2px),-50%)}
.g-marca[data-d="e"]::after{right:calc(100% - 2px);top:50%;margin-top:calc(1px - var(--p));border-right-color:var(--marca);border-right-width:var(--p)}
.g-marca[data-d="b"]{transform:translate(-50%,calc(-100% - var(--p) + 2px))}
.g-marca[data-d="b"]::after{top:calc(100% - 2px);left:50%;margin-left:calc(1px - var(--p));border-top-color:var(--marca);border-top-width:var(--p)}
.g-marca[data-d="c"]{transform:translate(-50%,calc(var(--p) - 2px))}
.g-marca[data-d="c"]::after{bottom:calc(100% - 2px);left:50%;margin-left:calc(1px - var(--p));border-bottom-color:var(--marca);border-bottom-width:var(--p)}
/* Na diagonal a bolinha sai da linha da ponta, para não cobrir o que está ao lado dela na tabela (x e y: o canto onde a bolinha fica) */
.g-marca[data-d="dc"]{--x:-1;--y:1;--g:-45deg}
.g-marca[data-d="db"]{--x:-1;--y:-1;--g:45deg}
.g-marca[data-d="eb"]{--x:1;--y:-1;--g:135deg}
.g-marca:is([data-d="dc"],[data-d="db"],[data-d="eb"]){--r:calc(35.35% + (var(--p) - 2px)*.707);transform:translate(calc(-50% + var(--x)*var(--r)),calc(-50% + var(--y)*var(--r)))}
.g-marca:is([data-d="dc"],[data-d="db"],[data-d="eb"])::after{left:calc(50% - var(--x)*35.35%);top:calc(50% - var(--y)*35.35%);margin-top:calc(1px - var(--p));border-left-color:var(--marca);border-left-width:var(--p);transform-origin:0 50%;transform:rotate(var(--g)) translateX(-2px)}
.foto-grande .g-moldura{display:inline-block;max-width:min(1000px,100%)}
.foto-grande .g-img{width:auto;max-width:100%;max-height:85vh;object-fit:contain}
.foto-grande .g-marca{--p:13px;width:32px;height:32px;font-size:17px;color:var(--sobre-marca,#fff)}
.g-dica{background:var(--marca-claro);color:var(--marca-texto);border-radius:12px;padding:10px 12px;font-size:14px}
.g-barra{height:6px;margin:16px 0 14px;border-radius:3px;background:var(--linha);overflow:hidden}
.g-barra i{display:block;height:100%;background:var(--marca);transition:width .2s}
.g-rodape{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 10px}
.g-rodape > span{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-left:auto}
h3.g-parte{margin:14px 0 4px}
.g-lista{list-style:none;margin:0;padding:0}
.g-link{display:block;width:100%;padding:7px 10px;border:0;border-radius:10px;background:none;text-align:left;font-size:15px;color:var(--tinta);cursor:pointer}
.g-link:hover{background:var(--marca-claro)}
.g-link.atual{font-weight:800;color:var(--marca-texto)}

@media (max-width:620px){
  .guia-cartao h1{font-size:20px}
}

/* Entrada do guia nas boas-vindas: em destaque, acima das opções de cadastrar o primeiro material */
.bv-guia{position:relative;width:100%;margin:10px 0 18px;padding:20px 20px 20px 66px;border:1.5px solid var(--marca);background:var(--marca-claro)}
.bv-guia::before{content:"?";position:absolute;left:20px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--marca);color:#fff;font:800 17px/1 var(--sans)}
.bv-guia b{font-size:17.5px}
.bv-guia:hover{background:var(--marca-claro);border-color:var(--marca-forte)}
.bv-ou{margin:0 0 -2px;font-size:14px;font-weight:700;color:var(--tinta-2)}

/* Conta do Google no canto do topo (js/conta-topo.js), depois de Como usar e Ajustes */
.conta-topo{position:relative;display:flex;align-items:center;gap:2px;margin-left:6px}
.conta-topo:empty{display:none}
.g-icone{width:16px;height:16px;flex:none}
.conta-entrar{background:var(--cartao)}
.conta-avatar{position:relative;overflow:hidden;width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--marca);color:var(--sobre-marca,#fff);font-weight:700;font-size:14px}
.conta-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.conta-chip,.conta-sugerida{display:flex;align-items:center;gap:8px;padding:3px;border:1px solid var(--linha);border-radius:999px;background:var(--cartao);font:inherit;color:var(--tinta);cursor:pointer}
.conta-sugerida{padding-right:12px;font-size:13px}
.conta-chip:hover,.conta-chip[aria-expanded="true"],.conta-sugerida:hover{border-color:var(--marca)}
.conta-nome{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conta-outra{padding:4px 8px;border:0;background:none;font:inherit;font-size:12px;color:var(--tinta-3);cursor:pointer;white-space:nowrap}
.conta-outra:hover{color:var(--tinta);text-decoration:underline}
.conta-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:280px;padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--cartao);border:1px solid var(--linha);border-radius:12px;box-shadow:0 10px 30px rgba(28,28,28,.14);font-size:14px}
.conta-menu small{color:var(--tinta-3)}
.conta-menu b{word-break:break-all}
.conta-status{margin:8px 0 6px;font-size:13px;color:var(--marca-texto)}
.conta-menu .dica{margin:0 0 10px;font-size:12.5px}

@media (max-width:620px){
  .conta-topo{margin-left:2px}
  /* Sem espaço para o nome nem para "Outra conta": aqui o botão abre a escolha de contas do Google (conta-topo.js) */
  .conta-como,.conta-outra{display:none}
  .conta-entrar{padding:5px 8px;font-size:0;gap:0}
  .conta-menu{position:fixed;top:60px;left:16px;right:16px;width:auto}
}

/* Tela de entrada (js/entrada.js), por cima de tudo enquanto não há conta */
.entrada{z-index:90;background:var(--papel)}
.en-tela{width:100%;max-width:1200px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:20px;padding:4px 0 16px}
.en-topo{text-align:center;max-width:640px}
.en-topo h1{margin:0;font:800 26px/1.2 var(--sans)}
.en-topo .bv-intro{margin:6px 0 0}
.en-topo .en-marca{margin-bottom:10px}
.en-rodape{max-width:640px;margin:0;text-align:center}
.plano-entrar{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.plano-entrar .en-google{justify-content:center;white-space:normal;text-align:center}
.en-cartao{max-width:460px;text-align:center;box-shadow:0 10px 40px rgba(28,28,28,.12)}
.en-marca{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px}
.en-marca .icone{width:40px;height:40px}
.en-marca .nome-app{font:800 15px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--marca-texto)}
.en-botoes{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0 16px}
.en-google{gap:10px;padding:10px 20px;font-size:15px;background:var(--cartao);color:var(--tinta);border-color:var(--linha)}
.en-google:hover{border-color:var(--marca);background:var(--cartao)}
.en-aviso{margin:0;font-weight:700;color:var(--marca-texto)}
/* No fim de Ajustes, longe do sair da conta, para ninguém excluir sem querer */
.aj-excluir{margin-top:40px;padding-top:18px;border-top:1px solid var(--linha)}
.aj-excluir p{margin:0 0 12px;font-size:13.5px}
@media (max-width:620px){.aj-excluir{text-align:center}}
.ex-cartao{max-width:480px}
.ex-cartao p{margin:0 0 10px}
.ex-cartao .campo{margin:6px 0 14px}
.ex-cartao .btn:disabled{opacity:.4;cursor:not-allowed}
.en-links{margin:12px 0 0;font-size:13px}
/* Também no rodapé; aqui para quem não chega ao fim da página */
.conta-links{display:flex;gap:14px;align-self:stretch;justify-self:stretch;margin-top:10px;padding-top:10px;border-top:1px solid var(--linha);font-size:12.5px}
.conta-links a{color:var(--tinta-3);text-decoration:none}
.conta-links a:hover{color:var(--marca-texto);text-decoration:underline}
.conta-sugestao{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--marca-texto);text-decoration:none}
.conta-sugestao:hover{text-decoration:underline}

/* Planos na tela de entrada (js/planos.js) */
.planos{width:100%;max-width:780px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:stretch}
.plano{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 22px 20px;background:var(--cartao);border:1px solid var(--linha);border-radius:20px}
.plano-completo{border:2px solid var(--marca);box-shadow:0 10px 30px rgba(28,28,28,.08)}
.plano-selo{position:absolute;top:-12px;left:22px;padding:4px 12px;border-radius:999px;background:var(--marca);color:var(--sobre-marca,#fff);font:800 12px/1.2 var(--sans)}
.plano h2{margin:0;font:700 20px/1.2 var(--sans)}
.plano-preco{margin:2px 0 0;white-space:nowrap}
.plano-parcelas{display:block;margin-top:4px;color:var(--tinta-3);font-size:12.5px}
.plano-preco b{font:800 30px/1 var(--sans);color:var(--marca-texto)}
.plano-preco span{color:var(--tinta-3);font-size:14px}
.plano-resumo{margin:0 0 2px;color:var(--marca-texto);font-weight:700;font-size:15px}
.plano ul{margin:4px 0 14px;padding:12px 0 0;border-top:1px solid var(--linha);list-style:none;display:grid;gap:7px;flex:1;align-content:start}
.plano li{position:relative;padding-left:24px;font-size:14px;color:var(--tinta-2)}
.plano li::before{content:"";position:absolute;left:2px;top:4px;width:12px;height:7px;border-left:2.5px solid var(--marca);border-bottom:2.5px solid var(--marca);transform:rotate(-45deg)}
.plano .btn{align-self:stretch;padding:10px 16px}
.plano-breve{margin:auto 0 0;padding:12px;border:1px dashed var(--marca);border-radius:12px;color:var(--marca-texto);font-weight:700;text-align:center}
.plano-formas{display:flex;flex-direction:column;gap:4px}
.plano-forma{margin:0 0 8px;color:var(--tinta-3);font-size:12.5px;text-align:center}
.plano-forma:last-child{margin-bottom:0}
.plano-periodo{display:inline-flex;padding:4px;gap:4px;border:1px solid var(--linha);border-radius:999px;background:var(--cartao)}
.plano-periodo button{border:0;background:none;padding:8px 18px;border-radius:999px;font:700 14px/1 var(--sans);color:var(--tinta-2);cursor:pointer}
.plano-periodo button[aria-pressed="true"]{background:var(--marca);color:var(--sobre-marca,#fff)}
.plano-periodo small{font-weight:600;opacity:.85}
.conta-plano{align-self:stretch;display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px;padding:8px 10px;border-radius:8px;background:var(--marca-claro);font-size:13.5px}
.conta-plano-ver{border:0;background:none;padding:0;color:var(--marca-texto);font:700 13.5px/1.2 var(--sans);text-decoration:underline;cursor:pointer}
.janela-planos .en-tela{position:relative;max-width:1100px;padding:28px 24px 24px}
.janela-fechar{position:absolute;top:10px;right:12px;border:0;background:none;font-size:26px;line-height:1;color:var(--tinta-3);cursor:pointer}
.plano-atual{align-self:stretch;padding:10px 16px;border-radius:999px;background:var(--marca-claro);color:var(--marca-texto);font-weight:800;text-align:center}
.en-experimentar{margin-top:12px}

/* Apresentação na tela de entrada (js/entrada-capa.js e js/entrada-apresentacao.js) */
.entrada.ap-tela{display:block;padding:0;scroll-padding-top:72px}
.ap{--ap-larg:1120px;position:relative;color:var(--tinta)}
/* Fio que sai do novelo (js/entrada-fio.js): fica atrás do conteúdo e na frente da faixa do fim, onde escurece e some */
.ap>:not(.ap-fio):not(.ap-nav):not(.ap-fecho){position:relative;z-index:1}
.ap-fio{position:absolute;top:0;left:0;z-index:0;pointer-events:none;overflow:visible}
.ap-fio-linha{fill:none;stroke:url(#fio-cor);stroke-linecap:round;stroke-linejoin:round}
.ap-fio-mascara{fill:none;stroke:#fff;stroke-width:14;transition:stroke-dashoffset .25s linear}
/* Na altura da etiqueta e encostado nela, para o fio que sai do coração passar por trás dela */
.ap-novelo{position:absolute;right:calc(min(40%, 220px) + 8px);bottom:40px;z-index:2;width:162px;height:auto}
@media (prefers-reduced-motion:reduce){.ap-fio-mascara{transition:none}}
/* O fim da página e o rodapé numa cor só, sem faixa clara entre eles */
.entrada.ap-tela .rodape{margin-top:0;background:var(--marca-escuro);color:rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.14)}
.entrada.ap-tela .rodape a{color:rgba(255,255,255,.85)}
.entrada.ap-tela .rodape a:hover{color:#fff}
.entrada.ap-tela .rodape-doc{display:inline-flex}
.entrada.ap-tela{background:var(--papel)}

.ap-nav{position:sticky;top:0;z-index:5;background:var(--papel);border-bottom:1px solid var(--linha)}
.ap-nav-in{max-width:var(--ap-larg);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:24px}
.ap-nav .en-marca{margin:0;gap:8px}
.ap-nav .en-marca .icone{width:30px;height:30px}
.ap-links{flex:1;display:flex;justify-content:center;gap:4px}
.ap-links button{padding:6px 12px;border:0;border-radius:8px;background:none;font:inherit;font-size:14px;color:var(--tinta-2);cursor:pointer}
.ap-links button:hover{background:var(--marca-claro);color:var(--marca-texto)}

/* Capa: o texto à esquerda e, à direita, a janela do app com a etiqueta de preço pendurada pelo fio */
.ap-capa{max-width:var(--ap-larg);margin:0 auto;padding:72px 24px 88px;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.ap-capa h1{margin:0;font:400 clamp(38px,5vw,58px)/1.06 var(--serif);letter-spacing:-.01em;color:var(--tinta)}
.ap-sub{margin:20px 0 0;max-width:30em;font-size:18px;line-height:1.6;color:var(--tinta-2)}
.ap-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px}
.ap-acoes .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:12px;font-size:15px;font-weight:700}
.ap-capa .ap-acoes{flex-direction:column;align-items:stretch;max-width:340px}
.ap-acoes .en-experimentar{background:var(--cartao);border:1px solid var(--marca);color:var(--marca-texto)}
.ap-capa .ap-acoes{flex-direction:column;align-items:stretch;max-width:340px}
.ap-acoes .en-experimentar{margin:0}
.ap-acoes .en-aviso{font-weight:600}
.ap-garantia{margin:14px 0 0;font-size:13.5px;color:var(--tinta-3)}
/* A etiqueta pende abaixo da janela, sem tapar as colunas de pagamento das vendas */
.ap-vitrine{position:relative;padding:0 0 150px 0}
.ap-janela{border:1px solid var(--linha);border-radius:14px;background:var(--cartao);overflow:hidden;box-shadow:0 30px 60px -20px rgba(31,107,98,.28)}
.ap-janela-barra{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--linha);background:#F6F7F6}
.ap-janela-barra i{width:9px;height:9px;border-radius:50%;background:var(--linha)}
.ap-janela img{display:block;width:100%}
.ap-etiqueta{position:absolute;right:-24px;bottom:0;width:40%;max-width:220px;transform:rotate(5deg);transform-origin:50% 0;filter:drop-shadow(0 18px 28px rgba(31,107,98,.32))}

.ap-bloco{max-width:var(--ap-larg);margin:0 auto;padding:88px 24px 0}
.ap-bloco>h2{margin:0 0 40px;max-width:16em;font:400 clamp(30px,3.6vw,42px)/1.12 var(--serif)}
.ap-mostra{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center;padding:28px 0}
.ap-mostra:nth-of-type(even) .ap-mostra-txt{order:2}
.ap-mostra h3{margin:0 0 10px;font:800 22px/1.25 var(--sans)}
.ap-mostra p{margin:0;font-size:16.5px;line-height:1.6;color:var(--tinta-2)}
.ap-mostra ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ap-mostra li{position:relative;padding-left:26px;font-size:15px}
.ap-mostra li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--marca-claro);box-shadow:inset 0 0 0 5px var(--marca-claro),inset 0 0 0 8px var(--marca)}
.ap-mostra-img{display:grid;place-items:center;padding:32px;border-radius:20px;background:var(--marca-claro)}
.ap-mostra-img img{max-width:100%;max-height:360px;object-fit:contain;border-radius:12px;box-shadow:0 18px 40px -18px rgba(31,107,98,.35)}
.ap-mostra .ap-nota{margin-top:18px;padding:12px 16px;border:1px solid var(--marca);border-radius:12px;background:var(--marca-claro);color:var(--tinta);font-size:15px}
.ap-selo{display:inline-block;margin-bottom:10px;padding:3px 10px;border-radius:999px;background:var(--marca-claro);color:var(--marca-texto);font-size:12.5px;font-weight:700}

/* Os passos ligados por um fio pontilhado, como o fio da etiqueta de preço */
.ap-oficios{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.ap-oficios li{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--cartao);border:1px solid var(--linha);border-radius:12px}
.ap-oficios b{font-size:16px}
.ap-oficios span{font-size:14px;color:var(--tinta-2);line-height:1.45}
.ap-oficios-mais{margin:16px 0 0;color:var(--tinta-2)}
.ap-passos{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:0;padding:0;list-style:none;counter-reset:passo}
.ap-passos::before{content:"";position:absolute;top:22px;left:44px;right:calc(33% - 44px);border-top:2px dashed var(--marca)}
.ap-passos li{position:relative;counter-increment:passo;display:flex;flex-direction:column;gap:6px}
.ap-passos li::before{content:counter(passo);display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;background:var(--marca);color:#fff;font:800 18px/1 var(--sans);box-shadow:0 0 0 8px var(--papel)}
.ap-passos b{font-size:17px}
.ap-passos span{color:var(--tinta-2);line-height:1.55}

.ap-planos>h2{max-width:none;text-align:center;margin-left:auto;margin-right:auto}
.ap-planos{display:flex;flex-direction:column;align-items:center;gap:14px}
.ap-planos>h2{margin-bottom:12px}

.ap-duv{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:start}
.ap-duv>h2{margin:0}
.ap-duvidas{display:flex;flex-direction:column;border-top:1px solid var(--linha)}
.ap-duvidas details{border-bottom:1px solid var(--linha)}
.ap-duvidas summary{display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:700;font-size:16px;cursor:pointer;list-style:none}
.ap-duvidas summary::-webkit-details-marker{display:none}
.ap-duvidas summary::after{content:"+";font:400 24px/1 var(--sans);color:var(--marca-texto);transition:transform .2s}
.ap-duvidas details[open] summary::after{transform:rotate(45deg)}
.ap-duvidas p{margin:0 0 18px;max-width:40em;line-height:1.6;color:var(--tinta-2)}

.ap-fecho{margin-top:96px;background:var(--marca-escuro);color:#fff}
.ap-fecho-in{max-width:var(--ap-larg);margin:0 auto;padding:72px 24px;display:flex;flex-direction:column;align-items:center;text-align:center}
.ap-fecho h2{margin:0;color:#fff;max-width:18em;font:400 clamp(30px,3.6vw,44px)/1.12 var(--serif)}
.ap-fecho p{margin:14px 0 0;max-width:34em;font-size:17px;opacity:.85}
.ap-fecho .ap-acoes{justify-content:center}
.ap-fecho .btn.leve{color:#fff}
.ap-fecho .ap-garantia{max-width:34em;font-size:13.5px;color:rgba(255,255,255,.75)}

@media (prefers-reduced-motion:reduce){.ap-duvidas summary::after{transition:none}}
@media (max-width:860px){
  .ap-links{display:none}
  .ap-nav-in{justify-content:space-between}
  .ap-capa{grid-template-columns:minmax(0,1fr);padding:40px 20px 48px;gap:36px}
  .ap-acoes .btn{max-width:100%;white-space:normal;text-align:center}
  .ap-vitrine{padding-bottom:110px}
  .ap-etiqueta{right:-8px;width:42%}
  .ap-bloco{padding:64px 20px 0}
  .ap-mostra,.ap-passos,.ap-duv{grid-template-columns:1fr;gap:24px}
  .ap-mostra:nth-of-type(even) .ap-mostra-txt{order:0}
  .ap-mostra-img{padding:18px}
  .ap-mostra-img img{max-height:420px}
  /* No celular os textos ficam no centro, e os botões um embaixo do outro, todos da mesma largura */
  .ap-capa-txt,.ap-bloco>h2,.ap-mostra-txt,.ap-passos li,.ap-duv>h2{text-align:center}
  .ap-bloco>h2,.ap-sub{margin-left:auto;margin-right:auto}
  .ap-acoes{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}
  .ap-acoes .btn{width:100%}
  .ap-mostra-txt{display:flex;flex-direction:column;align-items:center}
  .ap-mostra ul{align-items:flex-start;text-align:left}
  .ap-passos::before{display:none}
  .ap-passos li{align-items:center}
  .ap-passos li::before{margin:0 0 10px}
  /* No tablet o novelo fica no canto da janela */
  .ap-novelo{right:auto;left:-4px;bottom:30px;width:140px}
}
@media (max-width:600px){.ap-novelo{left:auto;right:calc(42% + 16px);width:104px}}

/* Rodapé (js/rodape.js): linha fina e clara, na cor do fundo, para não chamar mais atenção que o app */
.rodape{flex-shrink:0;background:transparent;color:var(--tinta-3);border-top:1px solid var(--linha);font-size:12px}
.rodape-in{max-width:var(--largura);margin:0 auto;padding:12px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.rodape a{display:inline-flex;align-items:center;color:var(--tinta-2);text-decoration:none}
.rodape a:hover{color:var(--marca-texto)}
.rodape-links{display:flex;align-items:center;gap:16px}

/* O rodapé fica no fim da tela mesmo quando a aba tem pouco conteúdo */
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto;width:100%}

/* Na entrada, o cartão fica no meio e o rodapé no fim, de ponta a ponta */
/* Começa do topo: centralizada, a parte de cima ficava cortada e sem rolagem em telas baixas */
.entrada{flex-direction:column;justify-content:flex-start;padding:32px 0 0}
.entrada .en-cartao{width:calc(100% - 32px);margin:auto 16px}
.entrada .rodape{width:100%;margin-top:32px}

/* Na entrada eles já estão no cartão, onde se vê melhor que dá para clicar */
.entrada .rodape-doc{display:none}

@media (max-width:620px){
  /* No celular o nome da NaVerot sai para o rodapé caber numa linha só */
  .rodape{font-size:11px}
  .rodape-in{padding:6px 16px;flex-wrap:nowrap;justify-content:center;gap:12px}
  .rodape-marca{display:none}
  .rodape-links{gap:12px}
  .rodape svg{width:14px;height:14px}
}

/* Relatório do caixa (js/abas/caixa-relatorio*.js): caixa por cima do Caixa, com a folha que vai para o PDF */
.relatorio-tela{align-items:flex-start}
.rel-caixa{position:relative;max-width:900px;background:var(--cartao)}
.rel-fechar{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--neutro);color:var(--tinta-2);font-size:22px;line-height:1;cursor:pointer}
.rel-fechar:hover{background:var(--marca-claro);color:var(--marca-texto)}
.rel-controles{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 48px 22px 0;padding-bottom:18px;border-bottom:1px solid var(--linha)}
.rel-controles select{width:auto;min-width:190px}
.rel-folha h2{margin:0}
.rel-gerado{margin:2px 0 0;font-size:12.5px;color:var(--tinta-3)}
.rel-folha h3{margin:20px 0 8px;font-size:15px;color:var(--tinta-2)}
.rel-folha h3 small{margin-left:6px;font-size:12px;font-weight:400;color:var(--tinta-3)}
.rel-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.rel-cartao{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--linha);border-radius:12px;background:var(--cartao)}
.rel-cartao span{font-size:13px;color:var(--tinta-2)}
.rel-cartao b{font-size:20px}
.rel-cartao small{font-size:12px;color:var(--tinta-3)}
.rel-mes{text-transform:capitalize;font-weight:700}
.rel-tipos{margin-top:20px;width:100%;max-width:480px}

@media (max-width:620px){
  .rel-controles{margin-right:0;padding-top:40px}
  .rel-controles select{flex:1;min-width:0}
  .rel-controles .btn{width:100%}
}

/* Só a folha vai para o PDF: o resto sai do fluxo, para não sobrarem páginas em branco */
@media print{
  body.imprimindo-relatorio{display:block;min-height:0;overflow:visible;background:#fff}
  body.imprimindo-relatorio > :not(#relatorio-tela){display:none!important}
  body.imprimindo-relatorio #relatorio-tela{position:static;display:block;padding:0;overflow:visible;background:none}
  body.imprimindo-relatorio .rel-caixa{max-width:none;padding:0;border-radius:0;box-shadow:none}
  body.imprimindo-relatorio :is(.rel-controles,.rel-fechar){display:none}
}

/* Pergunta de confirmar (js/perguntar.js), por cima de tudo, até da tela de entrada */
.pergunta{z-index:95;align-items:center}
.pergunta-cartao{max-width:440px}
.pergunta-cartao p{margin:8px 0 4px;color:var(--tinta-2);white-space:pre-line}
.pergunta-cartao .bv-rodape{flex-wrap:wrap}
.pergunta-cartao .bv-rodape .btn:last-child{margin-left:auto}
/* No celular o cartão não encosta nas bordas: o texto quebra mais, mas a caixa fica com cara de aviso */
@media (max-width:620px){
  .pergunta{padding:16px 28px}
}

/* 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){
  :root{--largura:none}
  /* 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)}
  /* Perto do dedo, logo acima da barra de abas, e não no topo, longe de onde ela está olhando */
  .toast{top:auto;bottom:calc(78px + env(safe-area-inset-bottom));left:16px;right:16px;transform:none;width:max-content;margin:0 auto}
  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 button{position:relative}
  nav.abas .selo-diamante{position:absolute;top:2px;left:calc(50% + 8px);width:16px;height:16px;margin:0}
  nav.abas .selo-diamante::before{width:10px;height:10px}
  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}
  /* Na linha do título: embaixo dele, a primeira etiqueta abriria uma linha nova e empurraria a tela enquanto ela digita */
  .h2-dir.tags-rasc{flex:1 1 0;justify-content:flex-end}
  .rasc button{padding-top:6px;padding-bottom:6px}
  .rasc-nova{padding:6px}
  /* Lixeira no canto de cima: na grade de duas colunas ela sobrava sozinha numa linha */
  .mat{position:relative}
  .mat > .btn-x{position:absolute;top:6px;right:6px}
  .mat .mini:has(> [data-m="itemId"]){margin-right:34px}
  /* 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"],.estoque td .qtd-ajuste input[data-ie="tenho"],.estoque.tenho-fino td .qtd-ajuste input[data-ie="tenho"]{width:100%}
  .estoque td .qtd-ajuste{display:flex}

  /* 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}
  .estoque td[data-metros]::before{content:"Metros"}
  /* 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}
  .estoque tr:has(input[data-ie]) td:has(> .qtd-ajuste){padding-left:0;padding-right:0}
  .estoque td .qtd-ajuste input[data-ie="tenho"],.estoque.tenho-fino td .qtd-ajuste input[data-ie="tenho"]{padding-left:10px;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-duplicar,.btn-zap,.btn-hist,.btn-mais,.btn-detalhe{width:40px;height:40px}
  /* 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}
  .lista-linha .btn-x{margin-block:-8px}
}

/* 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 > .acoes-c{position:absolute;top:50%;right:10px;transform:translateY(-50%);flex-direction:column}
    .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}
}