/* Retaguarda: casca (menu lateral + barra superior) e regras específicas das telas. Cores e medidas vêm de /ds/tokens.css. */
/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--e4); }
.login-caixa { width: min(380px, 100%); display: grid; gap: var(--e3); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: var(--e5); box-shadow: var(--sombra); }
.login label { display: grid; gap: var(--e1); font-size: 12.5px; font-weight: 500; color: var(--texto-2); }
.marca-login { display: flex; align-items: center; gap: var(--e2); font-size: 20px; margin: 0 0 var(--e2); }
.marca-login small { color: var(--texto-2); font-weight: 400; font-size: 14px; }

/* Casca */
#app { --larg-menu: 248px; display: grid; grid-template-columns: var(--larg-menu) minmax(0, 1fr); min-height: 100vh; }
#app.menu-recolhido { --larg-menu: 68px; }
.menu { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) var(--e2); background: var(--superficie); border-right: 1px solid var(--borda); overflow-y: auto; overflow-x: hidden; transition: width var(--duracao); }
.marca { display: flex; align-items: center; gap: var(--e3); padding: var(--e1) var(--e2) var(--e3); font-size: 15px; }
#abas { display: grid; gap: 2px; }
.menu-titulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-2); padding: var(--e4) var(--e3) var(--e1); white-space: nowrap; }
#abas .menu-titulo:first-child { padding-top: var(--e1); }
.menu-item { display: flex; align-items: center; gap: var(--e3); width: 100%; justify-content: flex-start; padding: 8px var(--e3); min-height: 36px; border: 0; border-radius: var(--raio); background: transparent; color: var(--texto-2); font-weight: 500; text-align: left; white-space: nowrap; }
.menu-item:hover:not(:disabled) { background: var(--superficie-2); color: var(--texto); }
.menu-item.sel { background: var(--primaria-suave); color: var(--link); font-weight: 600; }
.menu-item svg { width: 18px; height: 18px; flex: none; }
.menu-item .contador { margin-left: auto; font-size: 12px; font-weight: 600; background: var(--destaque); color: #1F1300; border-radius: 99px; padding: 0 7px; min-width: 20px; text-align: center; }
#app.menu-recolhido .rotulo, #app.menu-recolhido .menu-titulo, #app.menu-recolhido .menu-item .contador { display: none; }
#app.menu-recolhido .menu-item { justify-content: center; padding-inline: 0; }
#app.menu-recolhido .marca { justify-content: center; padding-inline: 0; }
.fundo-menu { display: none; }

.coluna-principal { min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e5); min-height: 56px; background: var(--superficie); border-bottom: 1px solid var(--borda); }
.barra-titulo { display: grid; line-height: 1.2; min-width: 0; }
.empresa-nome { font-size: 12px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-titulo h1 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.espaco { flex: 1; }
.quem { font-size: 13px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.barra .btn svg, .barra button svg { width: 18px; height: 18px; }
#menu-alterna, #sino, #tema-alterna, #sair { padding: 0; width: 36px; min-height: 36px; }

.busca-global { position: relative; width: clamp(150px, 22vw, 300px); margin-left: var(--e3); flex: 0 1 auto; }
.barra-titulo { flex: none; }
@media (max-width: 1180px) { .quem { display: none; } }
.busca-global input { padding-left: 32px; background: var(--superficie-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px 50% / 16px; border-color: transparent; }
.busca-global input:focus-visible { background-color: var(--superficie); border-color: var(--primaria); }

.rede { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); padding: 0 var(--e2); }
.rede .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--sucesso); }
.rede.off { color: var(--aviso-texto); font-weight: 600; }
.rede.off .ponto { background: var(--aviso); }

.popover-ancora { position: relative; }
.popover { position: absolute; right: 0; top: calc(100% + 6px); min-width: 280px; margin: 0; padding: var(--e1); list-style: none; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra-alta); z-index: 40; }
.popover li > button, .popover li > a { display: flex; width: 100%; justify-content: flex-start; align-items: center; gap: var(--e3); border: 0; background: transparent; padding: var(--e2) var(--e3); border-radius: var(--raio); text-decoration: none; color: var(--texto); text-align: left; }
.popover li > button:hover, .popover li > button.sel { background: var(--superficie-2); }
.popover .vazio { padding: var(--e3); color: var(--texto-2); }
.popover .qtd { margin-left: auto; font-weight: 700; }
.lista-ir { left: 0; right: auto; min-width: 100%; }
#sino { position: relative; }
#sino .ponto-aviso { position: absolute; top: 5px; right: 5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--destaque); color: #1F1300; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }

main#conteudo { padding: var(--e5); width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); align-content: start; }

/* Telas pequenas: o menu vira gaveta */
@media (max-width: 900px) {
  #app, #app.menu-recolhido { grid-template-columns: minmax(0, 1fr); }
  .menu { position: fixed; z-index: 50; left: 0; top: 0; width: 272px; transform: translateX(-100%); transition: transform var(--duracao); box-shadow: var(--sombra-alta); }
  #app.menu-aberto .menu { transform: none; }
  #app.menu-recolhido .rotulo, #app.menu-recolhido .menu-titulo { display: initial; }
  #app.menu-recolhido .menu-item .contador { display: inline-block; }
  #app.menu-recolhido .marca { justify-content: flex-start; padding-inline: var(--e2); }
  #app.menu-recolhido .menu-item { justify-content: flex-start; padding-inline: var(--e3); }
  #app.menu-aberto .fundo-menu { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(15, 23, 42, .45); }
  .barra { padding-inline: var(--e3); gap: var(--e2); }
  .busca-global, .quem { display: none; }
  main#conteudo { padding: var(--e3); }
}

/* Telas */
.itens-orc { display: grid; gap: var(--e2); }
.linha-orc { display: grid; grid-template-columns: minmax(160px, 2fr) 90px 130px auto; gap: var(--e2); align-items: end; }
.linha-orc > select { align-self: end; }
.busca-prod { display: grid; gap: var(--e1); }
/* Dashboard */
.dash-barra { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.dash-barra select { width: auto; min-width: 190px; }
.dash-datas { display: flex; align-items: center; gap: var(--e2); }
.dash-datas input { width: auto; }
.seg { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: var(--raio); overflow: hidden; }
.seg button { border: 0; border-radius: 0; border-right: 1px solid var(--borda); background: var(--superficie); }
.seg button:last-child { border-right: 0; }
.seg button.sel { background: var(--primaria); color: var(--primaria-sobre); }
.seg button.sel:hover { background: var(--primaria-hover); }
.menu-exportar { position: relative; margin-left: auto; }
.menu-exportar summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 34px; padding: 7px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie); font-weight: 500; }
.menu-exportar summary::-webkit-details-marker { display: none; }
.menu-exportar[open] summary { background: var(--superficie-2); }
.popover-linha { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 300px; display: grid; gap: 2px; padding: var(--e1); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra-alta); }
.popover-linha button { justify-content: flex-start; border: 0; background: transparent; text-align: left; }
.popover-linha button:hover:not(:disabled) { background: var(--superficie-2); }
.kpi small { display: block; margin-top: 2px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); align-items: start; }
@media (max-width: 1000px) { .grade-2 { grid-template-columns: minmax(0, 1fr); } .menu-exportar { margin-left: 0; } .popover-linha { right: auto; left: 0; max-width: calc(100vw - 24px); } }
.grafico { width: 100%; height: auto; }
.grafico .grade { stroke: var(--borda); stroke-width: 1; }
.grafico .eixo { fill: var(--texto-2); font-size: 12px; font-family: var(--fonte); }
.grafico .barra, .legenda .amostra.barra { fill: var(--primaria); background: var(--primaria); }
.grafico .barra:hover { fill: var(--primaria-hover); }
.grafico .linha-ant { stroke: var(--destaque); stroke-width: 2; stroke-dasharray: 5 4; }
.legenda { display: flex; gap: var(--e4); flex-wrap: wrap; font-size: 12.5px; color: var(--texto-2); margin: var(--e1) 0 var(--e2); }
.legenda .amostra { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.legenda .amostra.linha { height: 0; border-top: 2px dashed var(--destaque); border-radius: 0; background: none; }
.barras-h { display: grid; gap: var(--e3); }
.linha-h { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: var(--e3); align-items: center; }
.linha-h .trilho { height: 10px; background: var(--superficie-2); border-radius: 99px; overflow: hidden; }
.linha-h .preenche { display: block; height: 100%; background: var(--primaria); border-radius: 99px; }
.lista-atividades { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e2); }
.lista-atividades li { padding-bottom: var(--e2); border-bottom: 1px solid var(--borda); }
/* Compras */
input.curto { width: 90px; }
td .acoes input { min-width: 140px; }
/* Assinatura */
.faixa { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: var(--e2) var(--e5); font-size: 13.5px; border-bottom: 1px solid var(--borda); }
.faixa.aviso { background: var(--aviso-suave); color: var(--aviso-texto); }
.faixa.erro { background: var(--erro-suave); color: var(--erro-texto); }
.faixa button { min-height: 28px; padding: 2px 10px; }
.linha-h.larga { grid-template-columns: 170px minmax(0, 1fr) 130px; }
.linha-h .preenche.cheio { background: var(--destaque); }
tr.sel td { background: var(--primaria-suave); }
.abas-est { display: flex; gap: var(--e1); border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.abas-est button { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--texto-2); font-weight: 600; min-height: 40px; }
.abas-est button:hover:not(:disabled) { background: transparent; color: var(--texto); }
.abas-est button.sel { color: var(--link); border-bottom-color: var(--primaria); }
/* Cadastro do produto em abas: dentro de cada aba os blocos ficam sempre abertos (sem setinha), separados por uma linha. */
.abas-produto { margin: var(--e3) 0 var(--e4); }
.aba-painel > details.secao { border: 0; border-top: 1px solid var(--borda); border-radius: 0; padding: var(--e3) 0 0; margin-top: var(--e3); background: transparent; }
.aba-painel > details.secao:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.aba-painel > details.secao > summary { pointer-events: none; cursor: default; }
.aba-painel > details.secao > summary::before { display: none; }
.total-linha-orc { display: flex; justify-content: space-between; font-size: 20px; font-weight: 650; }

/* Foto do produto e busca de fotos na web */
.foto-produto { display: flex; gap: var(--e3, 12px); align-items: center; flex-wrap: wrap; }
.previa-foto { width: 140px; height: 140px; object-fit: contain; background: #fff; border: 1px solid var(--borda); border-radius: 8px; }
.previa-foto.vazio { display: flex; align-items: center; justify-content: center; background: transparent; color: var(--texto-2); text-align: center; font-size: .85rem; padding: 8px; }
.foto-acoes { display: flex; gap: var(--e2, 8px); flex-wrap: wrap; }
.dlg-fotos { width: min(920px, 94vw); max-height: 90vh; overflow: auto; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie, var(--fundo)); color: var(--texto); padding: var(--e4, 16px); }
.dlg-fotos::backdrop { background: rgba(0, 0, 0, .6); }
.busca-fotos { display: flex; gap: var(--e2, 8px); margin-bottom: var(--e2, 8px); }
.busca-fotos input { flex: 1; }
.grade-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e3, 12px); margin: var(--e3, 12px) 0; }
.foto-res { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 6px; background: transparent; border: 1px solid var(--borda); border-radius: 8px; cursor: pointer; }
.foto-res:hover, .foto-res:focus-visible { border-color: var(--primaria); }
.foto-res img { width: 100%; height: 130px; object-fit: contain; background: #fff; border-radius: 4px; }
.foto-res small { color: var(--texto-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Impressão de relatórios: só o conteúdo da tela, sem menu, barra, botões e filtros. */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; color: #000; }
  .menu, .barra, .fundo-menu, #faixa-assinatura, .toast, .popover, dialog, .menu-exportar, .dash-barra, button, input[type="search"] { display: none !important; }
  #app, .coluna-principal { display: block !important; }
  main#conteudo { padding: 0 !important; overflow: visible !important; }
  .cartao { box-shadow: none !important; break-inside: avoid; border-color: #ccc !important; }
  table { break-inside: auto; } tr { break-inside: avoid; } thead { display: table-header-group; }
  a { color: inherit; text-decoration: none; }
}

/* Tesouraria */
.tes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
.tes .cab-t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); }
.tes .cab-t h2 { margin: 0; }
.tes .filtros-t { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: end; margin: var(--e3) 0; }
.tes .filtros-t label { display: grid; gap: var(--e1); font-size: 12.5px; color: var(--texto-2); }
.val-pos { color: var(--sucesso-texto); font-weight: 600; }
.val-neg { color: var(--erro-texto); font-weight: 600; }
tr.inativa { opacity: .55; }
.tag.ok { background: var(--sucesso-suave); color: var(--sucesso-texto); }
.cartoes-conta { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--e3); }
.conta-cartao { display: grid; gap: 2px; text-align: left; padding: var(--e3) var(--e4); min-height: 88px; border-radius: var(--raio-g); }
.conta-cartao strong { font-size: 15px; }
.conta-cartao span:last-child { font-size: 20px; font-variant-numeric: tabular-nums; }
.alerta-t { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e4); border-radius: var(--raio-g); background: var(--aviso-suave); border: 1px solid color-mix(in srgb, var(--aviso) 45%, transparent); color: var(--aviso-texto); }
.alerta-t p { margin: 2px 0 0; }
.cartao.destaque { border-color: color-mix(in srgb, var(--primaria) 45%, var(--borda)); }
.barras { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin-top: var(--e3); }
.barras span { flex: 1; min-height: 4px; background: var(--primaria); border-radius: 3px 3px 0 0; opacity: .85; }
.barras span.neg { background: var(--erro); }
.passo-t { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; border-top: 1px solid var(--borda); flex-wrap: wrap; }
.passo-t > div { flex: 1; min-width: 220px; }
.passo-t p { margin: 2px 0 0; }
.passo-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primaria-suave); color: var(--link); font-weight: 700; flex: none; }
.pills { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.pill { border-radius: 99px; min-height: 36px; padding: 4px 14px; font-weight: 600; color: var(--texto-2); }
.pill.sel { background: var(--primaria); color: var(--primaria-sobre); border-color: var(--primaria); }
.conc-item { display: grid; gap: var(--e2); padding: var(--e3) 0; border-bottom: 1px solid var(--borda); }
.conc-banco { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: var(--e3); align-items: center; }
.conc-banco strong { overflow: hidden; text-overflow: ellipsis; }
.conc-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.vazio-t { padding: var(--e5); text-align: center; }
.meter { display: flex; align-items: center; gap: var(--e2); min-width: 160px; }
.meter span { display: block; height: 10px; border-radius: 99px; background: var(--primaria); min-width: 2px; }
.dlg-t { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio-g); width: min(480px, 94vw); padding: var(--e5); box-shadow: var(--sombra-alta); }
.dlg-t::backdrop { background: rgba(15, 23, 42, .55); }
.dlg-t-form { display: grid; gap: var(--e3); }
.dlg-t-form h2 { margin: 0; font-size: 18px; }
.dlg-t-form label { display: grid; gap: var(--e1); font-size: 13px; color: var(--texto-2); }
.dlg-t-form p { margin: 0; }
.dlg-t-form .acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
@media (max-width: 700px) { .conc-banco { grid-template-columns: minmax(0, 1fr) auto; } .conc-banco > span:first-child { grid-column: 1 / -1; } }

/* Loja virtual (administração) */
.loja-adm .span-2 { grid-column: 1 / -1; display: grid; gap: var(--e2); }
.cor-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.cor-linha input[type="color"] { width: 48px; min-width: 48px; height: 44px; padding: 2px; }
.cor-linha input:not([type="color"]) { width: 110px; }
.amostra { width: 32px; min-height: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2px solid var(--borda); }
.campo-imagem { display: grid; gap: var(--e2); justify-items: start; }
.previa-img { max-width: 100%; max-height: 120px; border-radius: var(--raio); border: 1px solid var(--borda); background: #fff; object-fit: contain; }
.lista-banners { display: grid; gap: var(--e3); margin-top: var(--e3); }
.banner-linha { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--e3); align-items: center; padding: var(--e3); border: 1px solid var(--borda); border-radius: var(--raio-g); }
.banner-mini { height: 64px; border-radius: var(--raio); overflow: hidden; background: var(--superficie-2); }
.banner-mini img { width: 100%; height: 100%; object-fit: cover; }
.banner-info { display: grid; gap: 2px; min-width: 0; }
@media (max-width: 800px) { .banner-linha { grid-template-columns: 1fr; } .banner-mini { height: 90px; } }
.guia-banner { padding: var(--e3) var(--e4); margin: var(--e3) 0; border: 1px dashed var(--borda-forte); border-radius: var(--raio-g); background: var(--superficie-2); font-size: 13.5px; }
.guia-banner ul { margin: var(--e2) 0 0; padding-left: 20px; display: grid; gap: var(--e1); }
.nota-img { font-weight: 600; }
.nota-img.bom { color: var(--sucesso-texto); }
.nota-img.ruim { color: var(--aviso-texto); }
.banner-mini.quadrada { width: 64px; height: 64px; justify-self: center; background: #fff; }
.banner-mini.quadrada img { object-fit: contain; }
.atalho-previa { display: grid; place-items: center; width: 64px; height: 64px; justify-self: center; font-size: 30px; border-radius: var(--raio-g); background: var(--primaria-suave); }
.atalho-previa { color: var(--link); }

/* Fotos em lote */
.dlg-lote { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio-g); width: min(920px, 96vw); max-height: 90vh; overflow: auto; padding: var(--e5); box-shadow: var(--sombra-alta); }
.dlg-lote::backdrop { background: rgba(15, 23, 42, .55); }
.dlg-lote h2 { margin: 0 0 var(--e3); font-size: 18px; }
.lote-corpo { display: grid; gap: var(--e3); }
.lote-corpo .acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.lote-trilho { height: 10px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.lote-trilho span { display: block; height: 100%; background: var(--primaria); border-radius: 99px; transition: width .3s; }
.lote-lista { display: grid; grid-auto-rows: max-content; gap: 0; border: 1px solid var(--borda); border-radius: var(--raio); max-height: 52vh; overflow: auto; }
.lote-linha { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2.4fr); gap: var(--e3); align-items: center; padding: var(--e3); border-bottom: 1px solid var(--borda); }
.lote-linha:last-child { border-bottom: 0; }
.lote-nome { display: grid; gap: 2px; min-width: 0; }
.lote-opcoes { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.lote-foto { position: relative; width: 84px; height: 84px; border: 2px solid var(--borda); border-radius: var(--raio); background: #fff; display: grid; place-items: center; cursor: pointer; overflow: hidden; }
.lote-foto input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.lote-foto img { width: 100%; height: 100%; object-fit: contain; }
.lote-foto:has(input:checked) { border-color: var(--primaria); box-shadow: var(--foco); }
.lote-foto:has(input:focus-visible) { box-shadow: var(--foco); }
.lote-nenhuma { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); font-size: 13px; }
.link-lote { justify-self: start; border: 0; background: none; color: var(--link); text-decoration: underline; min-height: 0; padding: 0; }
@media (max-width: 700px) { .lote-linha { grid-template-columns: 1fr; } }

/* Página do produto (cadastro) */
.pagina-produto { display: grid; gap: var(--e3); }
.galeria-extra { display: flex; flex-wrap: wrap; gap: var(--e2); }
.extra { position: relative; width: 92px; height: 92px; border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; overflow: hidden; }
.extra img { width: 100%; height: 100%; object-fit: contain; }
.extra button { position: absolute; top: 3px; right: 3px; min-height: 0; width: 26px; height: 26px; padding: 0; border-radius: 50%; line-height: 1; }
.pagina-produto textarea { width: 100%; min-height: 120px; padding: var(--e3); border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie); color: var(--texto); font: inherit; resize: vertical; }
.loja-adm textarea { width: 100%; padding: var(--e3); border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie); color: var(--texto); font: inherit; resize: vertical; }

/* Celular e tablet: barra de cima que nunca passa da tela (o título encolhe), alvos de 44 px */
@media (max-width: 900px) {
  .barra-titulo { flex: 1 1 0; min-width: 0; }
  .barra-titulo h1 { overflow: hidden; text-overflow: ellipsis; }
  .espaco { flex: 0 0 0; }
}
@media (pointer: coarse), (max-width: 1024px) {
  #menu-alterna, #sino, #tema-alterna, #sair, #imprimir, #impressoras-btn { width: 44px; min-height: 44px; flex: none; }
  .barra { min-height: 60px; }
}
.so-menu-curto { display: none; }
@media (max-width: 600px) {
  .barra { gap: var(--e1); padding-inline: var(--e2); }
  .rede span:last-child, #impressoras-btn, .empresa-nome:not(.multi) { display: none; }
  /* O botão do PDV fica sempre à vista (só o ícone e a sigla); tema e sair vão para o menu ⋮. */
  #tema-alterna, #sair { display: none; }
  .so-menu-curto { display: list-item; }
  .barra-titulo { gap: 0; }
  /* O seletor de empresa é só um rótulo em forma de botão: no celular fica baixo para o título caber embaixo dele sem sobrepor. */
  button.empresa-nome.multi { min-height: 30px !important; min-width: 0 !important; }
  .barra-titulo h1 { font-size: 17px; line-height: 1.25; }
}
@media (max-width: 480px) { #imprimir { display: none; } }
/* Menus flutuantes (avisos, exportar): no celular viram uma folha presa embaixo da tela, qualquer que seja o lugar do botão */
@media (max-width: 760px) {
  .popover, .popover-linha { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; min-width: 0; max-height: 65dvh; overflow: auto; z-index: 70; }
  .lista-ir { position: absolute; left: 0; right: 0; bottom: auto; top: calc(100% + 6px); max-height: 50dvh; }
}
@media (pointer: coarse), (max-width: 1024px) { .amostra { width: 44px; height: 44px; } }
/* Linhas de formulário com colunas fixas: no celular empilham em duas colunas (o nome ocupa a linha toda) */
@media (max-width: 760px) {
  .linha-orc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .linha-orc > :first-child { grid-column: 1 / -1; }
  .linha-h.larga { grid-template-columns: minmax(0, 1fr) auto; }
  .linha-h.larga > :first-child { grid-column: 1 / -1; }
}
/* Configurações de venda: caixa de seleção com título e explicação ao lado. */
.linha-config { align-items: flex-start !important; padding: var(--e2) 0; }
.linha-config > span { display: grid; gap: 2px; min-width: 0; }
.linha-config small { font-size: 13px; line-height: 1.4; }

/* Entrada de nota avulsa: busca com lista, fornecedor escolhido e resumo do custo. */
.lista-busca { max-height: 260px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.linha-busca { display: grid; gap: 2px; justify-content: stretch; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--borda); border-radius: 0; background: transparent; }
.linha-busca:hover { background: var(--superficie-2); }
.chip-escolhido { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e2) var(--e3); border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie-2); }
.resumo-custo { display: grid; gap: var(--e1); max-width: 460px; margin-top: var(--e3); }
.resumo-custo .total-linha { display: flex; justify-content: space-between; gap: var(--e3); }
.resumo-custo .total-linha:last-child { padding-top: var(--e2); border-top: 1px solid var(--borda); font-size: 17px; }

.col-produto { min-width: 220px; }

/* ---------- Grades personalizáveis (grade.js) ---------- */
.grade-envolucro { position: relative; display: grid; gap: var(--e2); min-width: 0; }
.grade-barra { position: relative; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--e2); }
.grade-contagem { margin-right: auto; font-size: 12.5px; }
.grade { border: 1px solid var(--borda); border-radius: var(--raio-g); background: var(--superficie); }
.grade table { border-collapse: separate; border-spacing: 0; }
.grade th { position: relative; padding: 0; background: var(--superficie-2); border-bottom: 1px solid var(--borda-forte); white-space: nowrap; }
.grade thead tr:first-child th:first-child { border-top-left-radius: calc(var(--raio-g) - 1px); }
.grade thead tr:first-child th:last-child { border-top-right-radius: calc(var(--raio-g) - 1px); }
.grade th:not(.col-acoes):not(:has(button)) { padding: 10px 12px; }
.grade-ordena { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--texto-2); font: inherit; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; text-align: left; cursor: pointer; }
.grade-ordena:hover { color: var(--texto); background: var(--superficie); }
.grade th.num .grade-ordena { justify-content: flex-end; }
.grade th[aria-sort="ascending"] .grade-ordena, .grade th[aria-sort="descending"] .grade-ordena { color: var(--link); }
.grade-seta { font-size: 12px; min-width: 12px; }
.grade-res { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; }
.grade-res:hover { background: var(--primaria-suave); }
.grade th.alvo { box-shadow: inset 3px 0 0 var(--primaria); }
.grade td { padding: 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.grade tbody tr:last-child td { border-bottom: 0; }
.grade tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--superficie-2) 45%, transparent); }
.grade tbody tr:hover td { background: var(--primaria-suave); }
.grade.compacta td { padding: 5px 12px; }
.grade th.curta, .grade td.curta { white-space: nowrap; }
.grade td.col-acoes { width: 1%; white-space: nowrap; text-align: right; }
.grade td.col-acoes .acoes { flex-wrap: nowrap; justify-content: flex-end; }
.grade td .acoes button { min-height: 32px; padding: 4px 12px; font-size: 13px; box-shadow: none; border-color: var(--borda); background: transparent; }
.grade td .acoes button:hover:not(:disabled) { background: var(--superficie-2); border-color: var(--borda-forte); }
.grade td .acoes button.perigo { border-color: transparent; }
.grade td .acoes button.perigo:hover:not(:disabled) { background: var(--erro-suave); }
.grade td .tag { white-space: nowrap; }
.grade td .mudo { white-space: nowrap; }
.grade-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(340px, 92vw); display: grid; gap: var(--e3); padding: var(--e4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); box-shadow: var(--sombra-alta); }
.grade-colunas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 40vh; overflow: auto; }
.grade-colunas li { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: 2px 0; }
.grade-colunas li { cursor: grab; border-radius: var(--raio-p, 6px); user-select: none; -webkit-user-select: none; }
.grade-colunas li:hover { background: var(--fundo-suave, rgba(127, 127, 127, 0.1)); }
.grade-colunas li .check { flex: 1; min-width: 0; }
.grade-alca { flex: none; width: 22px; text-align: center; color: var(--mudo, #888); letter-spacing: -2px; touch-action: none; cursor: grab; }
.grade-colunas.em-arrasto, .grade-colunas.em-arrasto li { cursor: grabbing; }
.grade-colunas li.arrastando { background: var(--fundo-suave, rgba(127, 127, 127, 0.18)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); position: relative; z-index: 1; }
.grade-mover { display: inline-flex; gap: 4px; flex: none; }
.grade-mover button { min-width: 32px; padding: 0 6px; }
.grade-botao { border: 1px solid var(--borda-forte); }
@media (max-width: 760px) { .grade-menu { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 70dvh; overflow: auto; z-index: 70; } }
@media print { .grade-barra, .grade-res { display: none !important; } .grade td, .grade th { padding: 4px 8px; } }
/* ---------- Menu lateral: grupos recolhíveis ---------- */
.menu { scrollbar-width: thin; }
.menu-grupo { display: grid; }
.menu-grupo + .menu-grupo { margin-top: var(--e2); }
button.menu-grupo-cab { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; min-height: 32px; padding: var(--e2) var(--e3) 4px; border: 0; border-radius: var(--raio); background: transparent; color: var(--texto-2); text-align: left; cursor: pointer; }
button.menu-grupo-cab:hover { color: var(--texto); background: transparent; }
.menu-grupo-cab svg { flex: none; transition: transform var(--duracao); }
.menu-grupo:not(.fechado) .menu-grupo-cab svg { transform: rotate(90deg); }
.menu-grupo-itens { display: grid; gap: 2px; }
.menu-grupo.fechado .menu-grupo-itens { display: none; }
.menu-grupo-badge { margin-left: auto; font-size: 12px; font-weight: 600; background: var(--destaque); color: #1F1300; border-radius: 99px; padding: 0 7px; min-width: 20px; text-align: center; letter-spacing: 0; }
.menu-grupo:not(.fechado) .menu-grupo-badge { display: none; }
.menu-item.sel { box-shadow: inset 3px 0 0 var(--primaria); }
#app.menu-recolhido .menu-grupo-cab, #app.menu-recolhido .menu-grupo-badge { display: none; }
#app.menu-recolhido .menu-grupo.fechado .menu-grupo-itens { display: grid; }
#app.menu-recolhido .menu-grupo + .menu-grupo { border-top: 1px solid var(--borda); padding-top: var(--e2); }

/* ---------- Filtros no topo das grades ---------- */
.grade-barra { justify-content: space-between; }
.grade-contagem { margin-right: 0; }
.grade-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); flex: 1 1 360px; min-width: 0; }
.grade-busca { flex: 1 1 220px; max-width: 360px; min-height: 36px; }
.grade-filtro { width: auto; min-width: 150px; max-width: 100%; min-height: 36px; }
.grade-periodo { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.grade-periodo input { width: auto; min-height: 36px; }
/* ---------- Seletor de empresa (login com várias empresas) ---------- */
.empresa-seletor { position: relative; min-width: 0; }
button.empresa-nome { display: block; max-width: 100%; min-height: 0; padding: 0; border: 0; background: transparent; text-align: left; cursor: default; }
button.empresa-nome.multi { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; margin-left: -6px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--link); background: var(--primaria-suave); cursor: pointer; }
button.empresa-nome.multi svg { transform: rotate(90deg); }
.lista-empresas { left: 0; right: auto; min-width: 260px; max-height: 60vh; overflow: auto; }
.lista-empresas li > button[aria-selected="true"] { background: var(--primaria-suave); font-weight: 600; }
.escolha-empresa { display: grid; gap: var(--e3); }
.escolha-empresa h2 { margin: 0; font-size: 18px; }
.escolha-lista { display: grid; gap: var(--e2); }
.escolha-lista button { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); text-align: left; }
.escolha-lista small { opacity: .85; text-transform: capitalize; }
/* .check (flex) ganhava da classe oculto: um item de formulário escondido pelo script continuava aparecendo */
.check.oculto { display: none; }

/* ---------- Adicionar empresa (lista do seletor) ---------- */
.lista-empresas .lista-separador { margin-top: var(--e1); padding-top: var(--e1); border-top: 1px solid var(--borda); }
.lista-empresas button.adicionar-empresa { color: var(--link); font-weight: 600; }
.lista-empresas button.adicionar-empresa:disabled { color: var(--texto-2); font-weight: 500; opacity: .8; cursor: not-allowed; }
/* ---------- Visão do grupo ---------- */
:root { --serie-1: #3b82f6; --serie-2: #10b981; --serie-3: #f59e0b; --serie-4: #ef4444; --serie-5: #8b5cf6; --serie-6: #14b8a6; }
.grafico rect.serie-0, .legenda .amostra.serie-0 { fill: var(--serie-1); background: var(--serie-1); }
.grafico rect.serie-1, .legenda .amostra.serie-1 { fill: var(--serie-2); background: var(--serie-2); }
.grafico rect.serie-2, .legenda .amostra.serie-2 { fill: var(--serie-3); background: var(--serie-3); }
.grafico rect.serie-3, .legenda .amostra.serie-3 { fill: var(--serie-4); background: var(--serie-4); }
.grafico rect.serie-4, .legenda .amostra.serie-4 { fill: var(--serie-5); background: var(--serie-5); }
.grafico rect.serie-5, .legenda .amostra.serie-5 { fill: var(--serie-6); background: var(--serie-6); }
.grupo-empresas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }
.chip-empresa { padding: 4px 12px; border: 1px solid var(--borda-forte); border-radius: 99px; background: var(--superficie-2); font-size: 13px; }
/* ---------- Recuperar senha / nova senha (telas dentro da caixa de login) ---------- */
.recuperar { display: grid; gap: var(--e3); }
.recuperar h2 { margin: 0; font-size: 18px; }
.recuperar.oculto, .escolha-empresa.oculto { display: none; } /* a regra de display acima ganhava da classe oculto */
/* =====================================================================================================================
   Refinamento visual (v2): menu, barra superior, login, atalhos de período e faixa de aviso. Vem por último para vencer as regras acima.
   ===================================================================================================================== */

/* ---------- Login em duas colunas: painel da marca + formulário ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); padding: 0; place-items: stretch; background: var(--fundo); }
.login-marca { background: var(--marca); color: #FFFFFF; padding: clamp(32px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; gap: var(--e5); position: relative; overflow: hidden; }
.login-marca::before, .login-marca::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.login-marca::before { width: 420px; height: 420px; right: -140px; top: -140px; }
.login-marca::after { width: 300px; height: 300px; left: -100px; bottom: -120px; }
.login-marca > * { position: relative; }
.login-marca .logo { width: 44px; height: 44px; font-size: 17px; background: rgba(255, 255, 255, .18); box-shadow: none; border: 1px solid rgba(255, 255, 255, .28); }
.login-marca h2 { margin: 0; font-size: clamp(26px, 3.2vw, 38px); font-weight: 750; letter-spacing: -.03em; line-height: 1.12; max-width: 14em; }
.login-marca p { margin: 0; font-size: 16px; line-height: 1.55; opacity: .9; max-width: 30em; }
.login-marca ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.login-marca li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.login-marca li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: 12px; font-weight: 700; margin-top: 1px; }
.login-caixa { align-self: center; justify-self: center; width: min(420px, calc(100% - 32px)); gap: var(--e4); padding: var(--e6); border-radius: 18px; box-shadow: var(--sombra-media); margin: var(--e5) 0; }
.login-caixa .marca-login { font-size: 22px; font-weight: 750; letter-spacing: -.02em; margin: 0 0 var(--e1); }
.login label { gap: 6px; font-size: 13px; }
.login-caixa button.primario { min-height: 42px; font-size: 15px; }
@media (max-width: 900px) { .login { grid-template-columns: minmax(0, 1fr); } .login-marca { display: none; } .login-caixa { margin-top: 12vh; } }

/* ---------- Menu lateral ---------- */
#app { --larg-menu: 264px; }
.menu { padding: var(--e4) var(--e3); gap: var(--e1); }
.marca { padding: var(--e1) var(--e2) var(--e4); font-size: 17px; letter-spacing: -.02em; }
.marca strong { font-weight: 750; }
.menu-item { min-height: 38px; padding: 8px 12px; border-radius: var(--raio); font-size: 14px; }
.menu-item svg { width: 19px; height: 19px; stroke-width: 1.75; opacity: .85; }
.menu-item:hover:not(:disabled) { background: var(--superficie-2); color: var(--texto); }
.menu-item:hover:not(:disabled) svg { opacity: 1; }
.menu-item.sel { background: var(--texto); color: var(--fundo); font-weight: 650; box-shadow: none; } /* item ativo preenchido, como as abas do dashboard Pulso */
.menu-item.sel svg { opacity: 1; }
.menu-item.sel:hover:not(:disabled) { background: var(--texto); color: var(--fundo); }
button.menu-grupo-cab { padding: var(--e3) var(--e3) 6px; font-size: 12px; font-weight: 650; letter-spacing: .08em; color: var(--texto-2); opacity: .9; }
.menu-grupo + .menu-grupo { margin-top: var(--e1); }
#app.menu-recolhido { --larg-menu: 72px; }

/* ---------- Barra superior ---------- */
.barra { min-height: 62px; padding: var(--e2) var(--e6); background: color-mix(in srgb, var(--superficie) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.barra-titulo h1 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.busca-global { width: clamp(180px, 26vw, 360px); }
.busca-global input { min-height: 38px; border-radius: 99px; border-color: transparent; background-color: var(--superficie-2); box-shadow: none; }
.busca-global input:hover:not(:focus-visible) { border-color: var(--borda-forte); }
#menu-alterna, #sino, #tema-alterna, #sair { border-radius: 10px; }
main#conteudo { padding: var(--e6); max-width: 1380px; gap: var(--e5); }
@media (max-width: 900px) { .barra { padding: var(--e2) var(--e3); } main#conteudo { padding: var(--e4); gap: var(--e4); } }

/* ---------- Atalhos de período (grupo de botões) e barra de filtros do dashboard ---------- */
.dash-barra { gap: var(--e3) var(--e4); }
.seg { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 12px; padding: 3px; gap: 2px; overflow: visible; }
.seg button { border: 0; border-radius: 9px; background: transparent; box-shadow: none; min-height: 32px; padding: 4px 12px; color: var(--texto-2); font-weight: 550; }
.seg button:hover:not(:disabled) { background: color-mix(in srgb, var(--superficie) 70%, transparent); color: var(--texto); }
.seg button.sel { background: var(--superficie); color: var(--primaria); font-weight: 650; box-shadow: var(--sombra); }
.seg button.sel:hover { background: var(--superficie); }
.variacao-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }

/* ---------- Faixa de aviso: discreta, em pílula dentro do conteúdo ---------- */
.faixa { margin: var(--e4) var(--e6) 0; padding: 10px var(--e4); border: 1px solid var(--borda); border-radius: var(--raio); font-size: 13px; }
.faixa.aviso { border-color: color-mix(in srgb, var(--aviso) 35%, transparent); }
.faixa.erro { border-color: color-mix(in srgb, var(--erro) 35%, transparent); }
.faixa:empty, .faixa.oculto { display: none; }
@media (max-width: 900px) { .faixa { margin: var(--e3) var(--e3) 0; } }

/* ---------- Cartões: título com mais respiro e gráfico/lista em fundo limpo ---------- */
.linha-h .trilho { height: 8px; }
.grafico .barra { fill: var(--primaria); }
.dash-barra .menu-exportar { margin-left: auto; }

/* Botões "de navegação" não levam a sombra dos botões comuns (parecia uma borda em volta de cada item) */
.menu button, .popover button, .grade-ordena, .grade-menu .fantasma, button.menu-item, button.menu-grupo-cab, .seg button { box-shadow: none; }
/* Celular: os atalhos de período não quebram o texto (rolam de lado se faltar espaço) e as datas cabem no cartão */
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { white-space: nowrap; flex: none; }
.dash-datas { flex-wrap: wrap; max-width: 100%; }
.dash-datas span { white-space: nowrap; }
.dash-datas input { flex: 0 1 148px; min-width: 0; }
.dash-barra select { width: 200px; min-width: 0; }
@media (min-width: 700px) { .dash-datas { flex-wrap: nowrap; flex: none; } .dash-datas input { flex: 0 0 148px; } }
.dash-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2) var(--e4); padding-top: var(--e3); border-top: 1px solid var(--borda); }
.dash-rodape .menu-exportar { margin-left: 0; }
/* ---------- Correções da auditoria de design (docs/AUDITORIA-DESIGN.md) ---------- */
/* 1) Em formulário em grade o botão principal é uma ação, não um campo: vai para a linha de baixo, à direita, com largura natural. */
.form-grade > button { justify-self: start; min-width: 120px; }
.form-grade > button.primario { grid-column: 1 / -1; justify-self: end; min-width: 140px; }
/* 7) Datas não precisam ocupar meia tela. */
.form-grade input[type="date"], .form-grade input[type="month"] { max-width: 190px; }
/* 3) Barra superior estável: a busca tem largura própria e o título cede espaço, com reticências. */
@media (min-width: 901px) {
  .barra-titulo { flex: 0 1 260px; min-width: 140px; }
  .barra-titulo h1 { overflow: hidden; text-overflow: ellipsis; }
  .busca-global { flex: none; }
}
/* 4) Ações da página: sem cartão em volta, alinhadas à direita acima da lista. */
.acoes-pagina { display: flex; justify-content: flex-end; }
.acoes-pagina .acoes { justify-content: flex-end; }
/* 5) Seções recolhíveis dentro de cartão: só um separador, sem caixa dentro da caixa. */
.cartao > .secao, .cartao > form > .secao { border: 0; border-top: 1px solid var(--borda); border-radius: 0; padding: var(--e2) 0 0; background: transparent; }
.cartao > .secao:first-of-type, .cartao > form > .secao:first-of-type { border-top: 0; padding-top: 0; }
/* 6) Plano e assinatura: rótulo de uso em uma linha, barras com comprimento razoável, preço sem quebra. */
@media (min-width: 761px) { .linha-h.larga { grid-template-columns: 270px minmax(120px, 420px) 120px; } }
.grade td.num, .grade th.num { white-space: nowrap; }
/* Menu "Mais" da barra superior. */
.popover-estreito { min-width: 250px; }
.popover-estreito li > button svg { width: 18px; height: 18px; flex: none; color: var(--texto-2); }
/* Botão auxiliar dentro do campo (ex.: Buscar CNPJ): fica dentro da caixa, à direita, sem aumentar a altura do rótulo. */
.form-grade label:has(> input + button) { position: relative; }
.form-grade label:has(> input + button) > input { padding-right: 116px; }
.form-grade label > input + button { position: absolute; right: 4px; bottom: 4px; min-height: 30px; min-width: 0; padding: 2px 10px; font-size: 12.5px; box-shadow: none; }

/* ---------- Central de relatórios ---------- */
.rel h2 { margin: var(--e4) 0 var(--e3); }
.rel-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.rel-card { display: grid; align-content: start; gap: var(--e1); text-align: left; padding: var(--e4); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); cursor: pointer; min-height: 96px; font: inherit; color: var(--texto); }
.rel-card:hover { border-color: var(--primaria); }
.dlg-caixa { width: min(1000px, 96vw); max-height: 92vh; overflow: auto; display: grid; gap: var(--e3); align-content: start; }
.dlg-caixa h3 { margin: var(--e3) 0 var(--e2); font-size: 16px; }
.caixa-ident { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); padding: var(--e3); background: var(--superficie-2, var(--fundo)); border-radius: var(--raio-g); }
.caixa-ident div { display: grid; gap: 2px; }
.caixa-abas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.caixa-corpo { min-width: 0; overflow-x: auto; }
.rel-card strong { font-size: 15px; }
.rel-card small { line-height: 1.4; }
.rel-visao .cab-t { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e3); }
.rel-visao .cab-t h2 { margin: 0; }
.rel-filtros { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: end; margin: var(--e3) 0; }
.rel-filtros label { display: grid; gap: var(--e1); font-size: 12.5px; color: var(--texto-2); }
.rel-periodo { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: end; }
.rel-presets { display: flex; gap: var(--e1); flex-wrap: wrap; }
.rel-totais { display: grid; gap: var(--e4); padding: var(--e4); border: 1px solid var(--borda); border-radius: var(--raio-g); margin: var(--e3) 0; background: var(--superficie); }
.rel-tot-grupo { min-width: 0; }
.rel-tot-grupo h3 { margin: 0 0 var(--e2); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.rel-tot-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e3); }
.rel-tot { display: grid; gap: 2px; padding: var(--e3) var(--e4); border-radius: var(--raio); border: 1px solid var(--tom-borda); border-left: 5px solid var(--tom); background: var(--tom-fundo); min-width: 0; }
.rel-tot-rot { font-size: 12.5px; font-weight: 500; color: var(--texto-2); }
.rel-tot strong { font-size: 20px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--tom-texto); overflow-wrap: anywhere; }
.rel-tot small { font-size: 12px; font-weight: 600; color: var(--tom-texto); }
.tom-azul { --tom: var(--primaria); --tom-fundo: var(--primaria-suave); --tom-texto: var(--primaria); --tom-borda: color-mix(in srgb, var(--primaria) 25%, transparent); }
.tom-verde { --tom: var(--sucesso); --tom-fundo: var(--sucesso-suave); --tom-texto: var(--sucesso-texto); --tom-borda: color-mix(in srgb, var(--sucesso) 25%, transparent); }
.tom-vermelho { --tom: var(--erro); --tom-fundo: var(--erro-suave); --tom-texto: var(--erro-texto); --tom-borda: color-mix(in srgb, var(--erro) 25%, transparent); }
.tom-laranja { --tom: var(--aviso); --tom-fundo: var(--aviso-suave); --tom-texto: var(--aviso-texto); --tom-borda: color-mix(in srgb, var(--aviso) 25%, transparent); }
.tom-roxo { --tom: #7A5AF8; --tom-fundo: color-mix(in srgb, #7A5AF8 12%, var(--superficie)); --tom-texto: color-mix(in srgb, #7A5AF8 78%, var(--texto)); --tom-borda: color-mix(in srgb, #7A5AF8 25%, transparent); }
.tom-cinza { --tom: var(--borda-forte); --tom-fundo: var(--superficie-2); --tom-texto: var(--texto); --tom-borda: var(--borda); }
.rel-nota { margin: var(--e2) 0; padding: var(--e2) var(--e3); border-radius: var(--raio); border-left: 4px solid var(--primaria); background: var(--primaria-suave); color: var(--texto-2); font-size: 13px; }
button.sucesso { background: var(--sucesso); color: #fff; border-color: var(--sucesso); font-weight: 600; }
button.sucesso:hover:not(:disabled) { filter: brightness(.93); }
button.info { background: var(--primaria-suave); color: var(--primaria); border-color: color-mix(in srgb, var(--primaria) 40%, var(--borda-forte)); font-weight: 600; }
button.info:hover:not(:disabled) { filter: brightness(.96); }
.rel-rodape { margin-top: var(--e3); font-size: 12px; }
.aviso-caixa { padding: var(--e2) var(--e3); border-radius: var(--raio); background: var(--aviso-suave); color: var(--aviso-texto); }
.rel-cab-imp { display: none; }

/* ---------- Celular: cadastros (produto, cliente...) e foto pela câmera ---------- */
@media (max-width: 640px) {
  .form-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .form-grade > button, .form-grade > button.primario { justify-self: stretch; min-width: 0; }
  .form-grade input[type="date"], .form-grade input[type="month"] { max-width: none; }
  .form-grade .span-total, .form-grade > .span-total { grid-column: 1 / -1; }
  .cartao { padding: var(--e3); }
  .foto-produto { flex-direction: column; align-items: stretch; }
  .previa-foto { width: 100%; height: 160px; }
  .foto-acoes { display: grid; grid-template-columns: 1fr 1fr; }
  .foto-acoes > button:first-child, .foto-acoes > button:last-of-type { grid-column: 1 / -1; }
  .foto-acoes > input { display: none; }
  .grade-barra { justify-content: stretch; }
  .grade-barra > * { flex: 1 1 100%; }
  .grade-barra .grade-busca { width: 100%; }
  dialog form, dialog .form-grade { max-width: 100%; }
  .acoes { flex-wrap: wrap; }
  .acoes > button { flex: 1 1 140px; }
  .grade-fotos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* ---------- Inventário (inventario.js): feito para o celular ---------- */
.inv-busca-linha { display: flex; gap: var(--e2, 8px); align-items: stretch; }
.inv-busca-linha > input { flex: 1; min-width: 0; }
.inv-lista { display: grid; gap: var(--e2, 8px); margin-top: var(--e3, 12px); }
.inv-card { display: flex; align-items: center; gap: var(--e3, 12px); width: 100%; padding: var(--e2, 8px) var(--e3, 12px); text-align: left; justify-content: flex-start; font-weight: 400; }
.inv-card-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.inv-card-txt strong { overflow-wrap: anywhere; }
.inv-foto { width: 56px; height: 56px; flex: none; object-fit: contain; background: #fff; border: 1px solid var(--borda); border-radius: 8px; }
.inv-foto.vazio { display: flex; align-items: center; justify-content: center; background: transparent; color: var(--texto-2); font-size: 12px; text-align: center; }
.inv-topo { display: flex; align-items: center; gap: var(--e3, 12px); }
.inv-topo > div { display: grid; gap: 2px; min-width: 0; }
.inv-pa { overflow-x: auto; flex-wrap: nowrap; }
.inv-pa button { white-space: nowrap; }
.inv-codigo { display: flex; align-items: center; gap: var(--e2, 8px); padding: var(--e2, 8px) 0; border-bottom: 1px solid var(--borda); }
.inv-codigo code { flex: 1; font-size: 15px; }
.inv-item { display: flex; align-items: center; gap: var(--e2, 8px); padding: var(--e2, 8px) 0; border-bottom: 1px solid var(--borda); }
.inv-dif-valor { min-width: 40px; text-align: right; font-size: 16px; }
.inv-qtd { width: 84px; flex: none; text-align: right; }
.inv-falta { color: var(--erro, #c0392b); }
.inv-sobra { color: var(--sucesso, #1e8e3e); }
.inv-chips { display: flex; flex-wrap: wrap; gap: var(--e2, 8px); }
.inv-chips button.sel { background: var(--texto); color: var(--fundo); }
.inv-dif { max-height: 40vh; overflow: auto; }
.dlg-inv { width: min(520px, calc(100vw - 16px)); }
.dlg-leitor { width: min(520px, calc(100vw - 16px)); }
.leitor-quadro { position: relative; aspect-ratio: 4 / 3; background: #000; border-radius: var(--raio-g, 16px); overflow: hidden; }
.leitor-quadro video { width: 100%; height: 100%; object-fit: cover; }
.leitor-mira { position: absolute; inset: 30% 12%; border: 2px solid rgba(255, 255, 255, .85); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
@media (max-width: 640px) {
  .inv-busca-linha { flex-direction: column; }
  .inv-card .inv-foto { width: 48px; height: 48px; }
}

/* ---------- WhatsApp (conexão, mensagens, robô, caixa de entrada) ---------- */
.wa-canais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); align-items: start; }
@media (max-width: 900px) { .wa-canais { grid-template-columns: minmax(0, 1fr); } }
.wa-canal { display: grid; gap: var(--e3); }
.wa-canal.ativo { border-color: var(--primaria); box-shadow: var(--sombra-media); }
.wa-canal h2 { margin: 0; display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.wa-canal h3 { margin: 0 0 var(--e1); font-size: 14px; }
.wa-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
@media (max-width: 640px) { .wa-cols { grid-template-columns: minmax(0, 1fr); } }
.wa-lista { margin: 0; padding-left: 20px; display: grid; gap: var(--e1); font-size: 13px; }
.wa-pro li::marker { color: var(--sucesso-texto); content: "✓  "; }
.wa-contra li::marker { color: var(--aviso-texto); content: "!  "; }
.wa-copia { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.wa-copia code { overflow-wrap: anywhere; }
.wa-qr { display: grid; justify-items: start; gap: var(--e2); }
.wa-marca { margin-right: var(--e2); }
.wa-msg { display: grid; gap: var(--e2); }
.wa-msg textarea { width: 100%; box-sizing: border-box; }
.wa-msg-topo { display: flex; justify-content: space-between; gap: var(--e3); align-items: start; flex-wrap: wrap; }
.wa-chips { display: flex; gap: var(--e1); flex-wrap: wrap; }
.wa-previa { margin: 0; padding: var(--e3); border-radius: var(--raio); background: var(--superficie-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-inbox { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: var(--e4); align-items: start; }
@media (max-width: 900px) { .wa-inbox { grid-template-columns: minmax(0, 1fr); } }
.wa-coluna { display: grid; gap: var(--e1); align-content: start; }
.wa-conv { display: flex; justify-content: space-between; gap: var(--e2); align-items: center; text-align: left; width: 100%; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: var(--e2) var(--e3); }
.wa-conv.sel { border-color: var(--primaria); background: var(--primaria-suave); }
.wa-conv-txt { display: grid; min-width: 0; }
.wa-conv-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-conv-meta { display: grid; justify-items: end; gap: var(--e1); }
.wa-chat { display: grid; gap: var(--e3); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: var(--e3); min-width: 0; }
.wa-chat.vazio { min-height: 160px; place-items: center; }
.wa-chat-topo { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.wa-msgs { display: grid; gap: var(--e2); max-height: 50vh; overflow-y: auto; align-content: start; padding: var(--e1); }
.wa-bolha { display: grid; gap: 2px; max-width: 80%; padding: var(--e2) var(--e3); border-radius: var(--raio); background: var(--superficie-2); overflow-wrap: anywhere; white-space: pre-wrap; }
.wa-bolha.nossa { justify-self: end; background: var(--primaria-suave); }
.wa-envio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e2); align-items: end; }
.wa-envio select { grid-column: 1 / -1; }
.wa-envio textarea { width: 100%; box-sizing: border-box; }

/* ---------- Etiquetas (modelos, editor, impressão) ---------- */
.et-ponto { color: var(--aviso-texto); margin-left: 6px; font-size: 12px; }
.et-grupo { display: grid; gap: var(--e3); }
.et-grupo h2 { margin: 0; font-size: 16px; }
.et-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--e4); align-items: start; }
.et-modelo { display: grid; gap: var(--e3); padding: var(--e3); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-g); min-width: 0; }
.et-modelo.padrao { border-color: var(--primaria); }
.et-modelo h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.et-modelo-corpo { display: grid; gap: var(--e2); min-width: 0; }
.et-mini { display: grid; place-items: center; height: 180px; padding: var(--e2); background: var(--superficie-2); border-radius: var(--raio); overflow: hidden; }
.et-mini canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 164px; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .3); }
.et-tags { display: flex; flex-wrap: wrap; gap: var(--e1); }
.et-modelo-acoes { gap: var(--e1); }
.et-modelo-acoes button { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.et-bloco-tam { display: grid; gap: var(--e2); }
.et-bloco-tam.oculto { display: none; }

.et-editor { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--e4); align-items: start; }
.et-topo { grid-column: 1 / -1; }
.et-barra { display: grid; gap: var(--e3); }
.et-barra-nome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 220px); gap: var(--e3); }
.et-barra-estado { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.et-coluna-mesa, .et-coluna-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); min-width: 0; align-content: start; }
.et-painel, .et-props, .et-bloco, .et-amostra, .et-barra { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.et-painel select, .et-painel input, .et-painel textarea, .et-barra select, .et-barra input { max-width: 100%; min-width: 0; }
.et-inserir { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.et-ins-campo { display: inline-flex; gap: var(--e1); align-items: center; max-width: 100%; }
.et-ins-campo select { max-width: 220px; }
.et-zoom { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.et-zoom button { min-width: 36px; }
.et-zoom select { width: auto; min-width: 190px; }
.et-area { overflow: auto; max-height: 72vh; min-height: 260px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio); overscroll-behavior: contain; }
.et-mesa { display: grid; grid-template-columns: 22px max-content; grid-template-rows: 22px max-content; width: max-content; min-width: 100%; }
.et-canto { position: sticky; top: 0; left: 0; z-index: 4; background: var(--superficie-2); }
.et-regua { display: block; max-width: none; }
.et-regua-h { position: sticky; top: 0; z-index: 3; }
.et-regua-v { position: sticky; left: 0; z-index: 3; }
.et-celula { padding: 16px; }
.et-folha { position: relative; background: #fff; box-shadow: 0 1px 6px rgba(15, 23, 42, .35); user-select: none; -webkit-user-select: none; }
.et-folha.arrasta { touch-action: none; cursor: default; }
.et-cv, .et-grade-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; }
.et-cv.pixel { image-rendering: pixelated; }
.et-grade-cv { pointer-events: none; }
.et-camada { position: absolute; inset: 0; }
.et-el { position: absolute; box-sizing: border-box; outline: 1px dashed transparent; cursor: pointer; }
.et-folha.arrasta .et-el { cursor: move; }
.et-el:hover { outline-color: var(--primaria); background: color-mix(in srgb, var(--primaria) 8%, transparent); }
.et-el.sel { outline: 2px solid var(--primaria); background: color-mix(in srgb, var(--primaria) 10%, transparent); }
.et-el.fino::after { content: ""; position: absolute; inset: -6px; }
.et-al { position: absolute; width: 10px; height: 10px; box-sizing: border-box; background: #fff; border: 2px solid var(--primaria); border-radius: 2px; z-index: 2; }
.et-al-n { top: -6px; left: calc(50% - 5px); cursor: ns-resize; }
.et-al-s { bottom: -6px; left: calc(50% - 5px); cursor: ns-resize; }
.et-al-e { right: -6px; top: calc(50% - 5px); cursor: ew-resize; }
.et-al-w { left: -6px; top: calc(50% - 5px); cursor: ew-resize; }
.et-al-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.et-al-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.et-al-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.et-al-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.et-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); }
.et-avisos.oculto { display: none; }
.et-avisos .tag, .et-painel .tag, .et-imprimir .tag { white-space: normal; }
.et-dica { margin: 0; font-size: 12.5px; }
.et-painel { gap: var(--e3); }
.et-props, .et-bloco, .et-amostra { display: grid; gap: var(--e3); }
.et-prop-topo { display: flex; justify-content: space-between; gap: var(--e2); }
.et-campo { display: grid; gap: var(--e1); font-size: 13px; color: var(--texto-2); min-width: 0; }
.et-campo > span { font-weight: 500; }
.et-campo textarea, .et-campo input, .et-campo select { width: 100%; box-sizing: border-box; }
.et-mini-campo { display: grid; gap: 2px; font-size: 12px; color: var(--texto-2); min-width: 0; }
.et-mini-campo input { width: 100%; box-sizing: border-box; }
.et-geom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
.et-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); align-items: end; }
.et-acoes-el { gap: var(--e1); }
.et-acoes-el button { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.et-camadas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e1); max-height: 220px; overflow: auto; }
.et-camada-item { display: flex; justify-content: flex-start; gap: var(--e2); text-align: left; width: 100%; background: transparent; box-shadow: none; padding: 4px 10px; min-height: 32px; font-size: 13px; }
.et-camada-item.sel { background: var(--primaria-suave); border-color: var(--primaria); }
.et-camada-tipo { flex: none; color: var(--texto-2); font-size: 12px; }
.et-camada-nome { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .et-editor { grid-template-columns: minmax(0, 1fr); }
  .et-barra-nome { grid-template-columns: minmax(0, 1fr); }
  .et-area { max-height: 60vh; }
  .et-ins-campo { width: 100%; }
  .et-ins-campo select { flex: 1; max-width: none; }
}

.et-imprimir { display: grid; gap: var(--e4); min-width: 0; }
.et-busca { display: flex; gap: var(--e2); }
.et-busca input { flex: 1; min-width: 0; }
.et-achados { list-style: none; margin: 0; padding: var(--e1); display: grid; gap: 2px; border: 1px solid var(--borda); border-radius: var(--raio); max-height: 260px; overflow: auto; }
.et-achados.oculto { display: none; }
.et-achados button { display: flex; justify-content: space-between; gap: var(--e3); width: 100%; text-align: left; background: transparent; box-shadow: none; border-color: transparent; }
.et-achados li.mudo { padding: var(--e2); }
.et-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.et-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--e3); align-items: center; padding: var(--e2) 0; border-bottom: 1px solid var(--borda); }
.et-item-nome { display: grid; min-width: 0; overflow-wrap: anywhere; }
.et-item-q { display: grid; gap: 2px; font-size: 12px; }
.et-item-q input { width: 84px; }
.et-modelo-linha { display: flex; gap: var(--e2); flex-wrap: wrap; }
.et-modelo-linha select { flex: 1 1 260px; min-width: 0; }
.et-perfil > summary { cursor: pointer; display: grid; gap: 2px; }
.et-perfil > summary h2 { display: inline; }
.et-perfil-corpo { display: grid; gap: var(--e3); margin-top: var(--e3); }
.et-perfil .tag { white-space: normal; }
.et-dica-calor { display: grid; gap: var(--e2); justify-items: start; }
.et-pv-lista { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: flex-end; }
.et-pv-item { margin: 0; display: grid; gap: var(--e1); justify-items: start; max-width: 100%; }
.et-pv-quadro { padding: var(--e2); background: var(--superficie-2); border-radius: var(--raio); max-width: 100%; }
.et-pv-quadro canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 220px; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .3); }
.et-folha-previa { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: flex-start; }
.et-folha-mini { width: 150px; height: auto; max-width: 100%; cursor: pointer; border: 1px solid var(--borda-forte); background: #fff; }
.et-folha-info { display: grid; gap: var(--e2); flex: 1 1 260px; min-width: 0; }
.et-folha-info p { margin: 0; }
.et-colunas { align-items: end; }
.et-msg { margin: 0; font-size: 13.5px; color: var(--sucesso-texto); overflow-wrap: anywhere; }
.et-msg.erro { color: var(--erro-texto); font-weight: 600; }
.et-msg.oculto { display: none; }
.et-acoes-imprimir .acoes button.oculto { display: none; }
.et-quadro { position: fixed; width: 0; height: 0; border: 0; left: -9999px; }
.et-dlg-previa { background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio-g); width: min(920px, calc(100vw - 16px)); padding: var(--e4); box-shadow: var(--sombra-alta); }
.et-dlg-previa::backdrop { background: rgba(15, 23, 42, .55); }
.et-dlg-previa h2 { margin: 0 0 var(--e2); font-size: 18px; }
.et-previa-quadro { width: 100%; height: min(60vh, 560px); border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; margin: var(--e2) 0; }
@media (max-width: 640px) {
  .et-item { grid-template-columns: minmax(0, 1fr) auto; }
  .et-item .perigo { grid-column: 1 / -1; }
  .et-busca { flex-direction: column; }
}

.et-sel-linha { display: flex; align-items: center; gap: var(--e2); }
.et-sel-linha > div { min-width: 150px; }
.et-barra-sel.oculto { display: none; }