/* Selaria Manuel do Couro. Layout: menu lateral verde-petróleo (desktop) ou barra inferior (celular) + área de trabalho clara.
   Feito para ser lido de longe e usado com pressa: texto grande, alvos de toque de 48px, números alinhados. */
:root {
  /* Paleta tirada do letreiro da loja: verde, azul-marinho, coral e o amarelo das estrelas. */
  --fundo: #eef2f0;
  --superficie: #ffffff;
  --superficie-2: #e6ecea;
  --tinta: #1d2538;
  --tinta-suave: #556072;
  --linha: #cdd8d4;
  --primaria: #2c7a58;
  --primaria-forte: #1f6446;
  --primaria-sobre: #ffffff;
  --destaque: #ecd97e;
  --menu: #1c3e44;
  --menu-texto: #f2f6f4;
  --menu-suave: #a9c2bd;
  --ok: #276b49;
  --ok-fundo: #d9eddf;
  --aviso: #7a5d06;
  --aviso-fundo: #f7edbf;
  --perigo: #ad4640;
  --perigo-fundo: #f7dedb;
  --foco: #1f63c9;
  --coral: #c8604f;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(29, 37, 56, .08), 0 4px 14px rgba(29, 37, 56, .06);
  --titulo: 'Bitter', Georgia, 'Times New Roman', serif;
  --corpo: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #121a1c; --superficie: #1b2629; --superficie-2: #243134; --tinta: #eaf0ee; --tinta-suave: #a4b3b2;
    --linha: #35484b; --primaria: #5fb08a; --primaria-forte: #7cc6a2; --primaria-sobre: #0f1d17; --menu: #0c1214;
    --ok: #8fd6ad; --ok-fundo: #1b3a2b; --aviso: #ecd97e; --aviso-fundo: #3b3410; --perigo: #f0948c; --perigo-fundo: #47211e;
    --foco: #78aaff; --sombra: 0 1px 2px rgba(0, 0, 0, .4); color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--corpo); line-height: 1.45;
  min-height: 100vh; font-variant-numeric: tabular-nums;
}
h1, h2, h3 { font-family: var(--titulo); font-weight: 700; line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; }
p { margin: 0; }
a { color: var(--primaria-forte); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.suave { color: var(--tinta-suave); }
.pequeno { font-size: .85rem; }
.forte { font-weight: 700; }
.centro { text-align: center; }
.direita { text-align: right; }
.quebra { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- estrutura */
.casca { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }
.menu { background: var(--menu); color: var(--menu-texto); padding: 1.1rem .8rem; display: flex; flex-direction: column; gap: .3rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { display: flex; align-items: center; gap: .7rem; padding: .3rem .6rem 1.1rem; border-bottom: 1px solid rgba(244, 237, 226, .14); margin-bottom: .6rem; }
.marca img { width: 2.6rem; height: 2.6rem; border-radius: 10px; }
.marca strong { font-family: var(--titulo); font-size: 1.05rem; line-height: 1.15; display: block; }
.marca span { color: var(--menu-suave); font-size: .8rem; }
.menu a.item, .menu button.item {
  display: flex; align-items: center; gap: .8rem; min-height: 3rem; padding: .55rem .8rem; border-radius: var(--raio);
  color: var(--menu-texto); text-decoration: none; background: none; border: 0; cursor: pointer; font-weight: 600; text-align: left; width: 100%;
}
.menu .item svg { width: 1.35rem; height: 1.35rem; flex: none; opacity: .9; }
.menu a.item:hover, .menu button.item:hover { background: rgba(244, 237, 226, .09); }
.menu a.item[aria-current="page"] { background: var(--destaque); color: #1d2538; }
.menu > * { flex-shrink: 0; }
.menu .espaco { flex: 1; min-height: .5rem; }
.menu .quem { color: var(--menu-suave); font-size: .85rem; padding: .4rem .8rem; }
.palco { min-width: 0; padding: 1.4rem clamp(1rem, 3vw, 2.2rem) 3rem; max-width: 84rem; width: 100%; margin: 0 auto; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.topo .acoes { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.barra-baixo { display: none; }

@media (max-width: 900px) {
  .casca { grid-template-columns: 1fr; }
  .menu { display: none; }
  .palco { padding-bottom: 6.5rem; }
  .barra-baixo {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0 0; z-index: 20; background: var(--menu);
    padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(244, 237, 226, .15);
  }
  .barra-baixo a, .barra-baixo button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3.6rem; color: var(--menu-suave);
    text-decoration: none; font-size: .72rem; font-weight: 600; background: none; border: 0; border-radius: 10px; cursor: pointer;
  }
  .barra-baixo svg { width: 1.45rem; height: 1.45rem; }
  .barra-baixo a[aria-current="page"] { color: #1d2538; background: var(--destaque); }
}

/* ---------------------------------------------------------------- componentes */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.1rem 1.2rem; }
.cartao > h2, .cartao > h3 { margin-bottom: .7rem; }
.grade { display: grid; gap: 1rem; }
.grade.estat { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.grade.dois { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.estat .cartao { padding: 1rem 1.1rem; }
.estat .rotulo { color: var(--tinta-suave); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.estat .valor { font-family: var(--titulo); font-size: 1.75rem; font-weight: 700; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.estat .nota { color: var(--tinta-suave); font-size: .85rem; margin-top: .1rem; }
.estat .alerta .valor { color: var(--perigo); }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .55rem 1.1rem; border-radius: var(--raio);
  border: 2px solid var(--primaria); background: var(--primaria); color: var(--primaria-sobre); font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.1;
}
.botao:hover { background: var(--primaria-forte); border-color: var(--primaria-forte); }
.botao.contorno { background: transparent; color: var(--primaria-forte); }
.botao.contorno:hover { background: var(--superficie-2); }
.botao.perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.botao.neutro { background: var(--superficie-2); border-color: var(--linha); color: var(--tinta); }
.botao.grande { min-height: 3.6rem; font-size: 1.15rem; padding-inline: 1.5rem; }
.botao.pequeno { min-height: 2.4rem; padding: .3rem .75rem; font-size: .9rem; }
.botao[disabled] { opacity: .5; cursor: not-allowed; }
.botao svg { width: 1.2rem; height: 1.2rem; }

label.campo { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .92rem; min-width: 0; }
label.campo .dica { font-weight: 400; color: var(--tinta-suave); font-size: .82rem; }
input[type="text"], input[type="search"], input[type="number"], input[type="password"], input[type="date"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; min-height: 3rem; padding: .55rem .8rem; border: 2px solid var(--linha); border-radius: var(--raio); background: var(--superficie); min-width: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--foco); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 30%, transparent); }
input[aria-invalid="true"] { border-color: var(--perigo); }
textarea { min-height: 5rem; resize: vertical; }
.form-grade { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.form-grade .largo { grid-column: 1 / -1; }
.linha { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.linha.espalha { justify-content: space-between; }
.pilha { display: flex; flex-direction: column; gap: .8rem; }
.pilha.p-lg { gap: 1.2rem; }
.busca { position: relative; flex: 1 1 18rem; }
.busca input { padding-left: 2.8rem; }
.busca svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 1.2rem; height: 1.2rem; color: var(--tinta-suave); pointer-events: none; }

.tabela-rolagem { overflow-x: auto; border-radius: var(--raio); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); padding: .55rem .75rem; border-bottom: 2px solid var(--linha); white-space: nowrap; }
td { padding: .7rem .75rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tbody tr:hover { background: var(--superficie-2); }
tr.clicavel { cursor: pointer; }
td.acoes { white-space: nowrap; text-align: right; }
.pilula { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.pilula.ok { background: var(--ok-fundo); color: var(--ok); }
.pilula.aviso { background: var(--aviso-fundo); color: var(--aviso); }
.pilula.perigo { background: var(--perigo-fundo); color: var(--perigo); }
.pilula.neutra { background: var(--superficie-2); color: var(--tinta-suave); border: 1px solid var(--linha); }
.aviso-caixa { padding: .8rem 1rem; border-radius: var(--raio); background: var(--aviso-fundo); color: var(--tinta); border-left: 5px solid var(--aviso); }
.aviso-caixa.perigo { background: var(--perigo-fundo); border-left-color: var(--perigo); }
.aviso-caixa.ok { background: var(--ok-fundo); border-left-color: var(--ok); }
.vazio { padding: 2.2rem 1rem; text-align: center; color: var(--tinta-suave); }
.vazio strong { display: block; color: var(--tinta); font-family: var(--titulo); font-size: 1.15rem; margin-bottom: .3rem; }
.abas { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.abas button { min-height: 2.8rem; padding: .4rem 1rem; border-radius: 999px; border: 2px solid var(--linha); background: var(--superficie); font-weight: 700; cursor: pointer; }
.abas button[aria-pressed="true"] { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-sobre); }
.paginacao { display: flex; justify-content: center; gap: .6rem; align-items: center; margin-top: 1rem; }

/* ---------------------------------------------------------------- caixa de diálogo e aviso */
dialog { border: 0; border-radius: 14px; padding: 0; width: min(94vw, 40rem); max-height: 92vh; background: var(--superficie); color: var(--tinta); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
dialog.largo { width: min(96vw, 56rem); }
dialog::backdrop { background: rgba(20, 14, 9, .55); }
dialog form, dialog .dentro { display: flex; flex-direction: column; max-height: 92vh; }
.dlg-topo { padding: 1.1rem 1.3rem .7rem; display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.dlg-corpo { padding: .4rem 1.3rem 1rem; overflow-y: auto; }
.dlg-pe { padding: .9rem 1.3rem 1.1rem; border-top: 1px solid var(--linha); display: flex; justify-content: flex-end; gap: .7rem; flex-wrap: wrap; background: var(--superficie-2); border-radius: 0 0 14px 14px; }
.avisos { position: fixed; z-index: 100; left: 50%; bottom: 5.5rem; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; width: min(92vw, 28rem); pointer-events: none; }
.aviso-flutuante { background: var(--menu); color: var(--menu-texto); padding: .85rem 1.1rem; border-radius: var(--raio); box-shadow: var(--sombra); font-weight: 600; border-left: 5px solid var(--destaque); }
.aviso-flutuante.erro { border-left-color: #f08b82; }
.aviso-flutuante.ok { border-left-color: #7fcf9d; }

/* ---------------------------------------------------------------- entrar */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(155deg, var(--menu) 0 38%, var(--primaria) 38% 52%, #eef2f0 52% 100%); }
.estrelas { background: var(--destaque); color: #1d2538; text-align: center; letter-spacing: .5em; font-size: .8rem; padding: .25rem .5rem; border-radius: 4px; border: 2px solid #1d2538; margin-bottom: 1.1rem; overflow: hidden; white-space: nowrap; }
.menu .estrelas { margin: 0 .6rem .8rem; }
.entrada .cartao { width: min(100%, 26rem); padding: 1.8rem; }
.entrada .marca { color: var(--tinta); border: 0; padding: 0 0 1rem; }
.entrada .marca span { color: var(--tinta-suave); }

/* ---------------------------------------------------------------- balcão (venda) */
.balcao { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 1050px) { .balcao { grid-template-columns: 1fr; } }
.resultados { display: flex; flex-direction: column; gap: .5rem; max-height: 58vh; overflow-y: auto; margin-top: .8rem; padding-right: .2rem; }
.produto-linha {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; text-align: left; width: 100%; padding: .75rem .9rem; background: var(--superficie-2);
  border: 2px solid transparent; border-radius: var(--raio); cursor: pointer; min-height: 3.6rem;
}
.produto-linha:hover, .produto-linha:focus-visible { border-color: var(--primaria); background: var(--superficie); }
.produto-linha .nome { font-weight: 700; }
.produto-linha .preco { font-family: var(--titulo); font-weight: 700; font-size: 1.1rem; text-align: right; }
.produto-linha .meta { grid-column: 1 / -1; color: var(--tinta-suave); font-size: .85rem; }
.carrinho-item { display: grid; grid-template-columns: 1fr auto; gap: .35rem .6rem; padding: .7rem 0; border-bottom: 1px solid var(--linha); }
.carrinho-item .controles { display: flex; align-items: center; gap: .4rem; grid-column: 1 / -1; flex-wrap: wrap; }
.carrinho-item input { min-height: 2.6rem; width: 5.6rem; text-align: right; padding: .3rem .5rem; }
.carrinho-item .mais-menos { min-width: 2.6rem; min-height: 2.6rem; padding: 0; font-size: 1.3rem; }
.total-grande { font-family: var(--titulo); font-size: 2.2rem; font-weight: 700; text-align: right; line-height: 1; font-variant-numeric: tabular-nums; }
.formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; }
.formas button { min-height: 3.4rem; border: 2px solid var(--linha); border-radius: var(--raio); background: var(--superficie); font-weight: 700; cursor: pointer; }
.formas button[aria-pressed="true"] { background: var(--primaria); color: var(--primaria-sobre); border-color: var(--primaria); }
.recibo { font-family: 'Courier New', monospace; font-size: .92rem; background: #fff; color: #111; padding: 1rem; border: 1px dashed #999; border-radius: 6px; white-space: pre-wrap; }

/* ---------------------------------------------------------------- ajuda e vídeo */
.videos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.video-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; text-align: left; cursor: pointer; padding: 0; }
.video-cartao:hover { border-color: var(--primaria); }
.video-cartao .capa { aspect-ratio: 16 / 9; background: var(--menu) center / cover; position: relative; display: grid; place-items: center; }
.video-cartao .capa svg { width: 3.2rem; height: 3.2rem; color: #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.video-cartao .duracao { position: absolute; right: .5rem; bottom: .5rem; background: rgba(0, 0, 0, .75); color: #fff; font-size: .78rem; padding: .05rem .4rem; border-radius: 4px; }
.video-cartao .texto { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.video-cartao .tag { color: var(--primaria-forte); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
video { width: 100%; border-radius: var(--raio); background: #000; max-height: 70vh; }
.destaque-aula { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; align-items: center; background: var(--menu); color: var(--menu-texto); border-radius: var(--raio); padding: 1.2rem; }
.destaque-aula h2 { color: var(--menu-texto); }
.destaque-aula p { color: var(--menu-suave); margin: .4rem 0 1rem; }
@media (max-width: 800px) { .destaque-aula { grid-template-columns: 1fr; } }

@media print {
  .menu, .barra-baixo, .topo .acoes, .avisos, .nao-imprime { display: none !important; }
  body { background: #fff; color: #000; }
  .casca { display: block; } .palco { padding: 0; max-width: none; }
  .cartao { box-shadow: none; border: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .aviso-flutuante { animation: entra .18s ease-out; }
  @keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------- complementos */
.bloco-link { display: block; text-decoration: none; color: inherit; }
.bloco-link:hover .cartao, .bloco-link:focus-visible .cartao { border-color: var(--primaria); }
.barra-linha { display: flex; flex-direction: column; gap: .2rem; }
.barra-rotulo { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
.barra-trilho { background: var(--superficie-2); border-radius: 999px; height: .7rem; overflow: hidden; }
.barra-preench { background: var(--primaria); height: 100%; border-radius: 999px; }
.tag-claro { display: inline-block; background: var(--destaque); color: #1d2538; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .6rem; border-radius: 999px; margin-bottom: .6rem; }
.busca-grande input { min-height: 3.6rem; font-size: 1.15rem; padding-left: 3.2rem; }
.busca-grande svg { width: 1.5rem; height: 1.5rem; left: 1.05rem; }
.estat .cartao.alerta .valor { color: var(--perigo); }
#recibo-impressao { display: none; }
@media print {
  body.imprimindo-recibo #app, body.imprimindo-recibo dialog, body.imprimindo-recibo .avisos { display: none !important; }
  body.imprimindo-recibo #recibo-impressao { display: block; font-family: 'Courier New', monospace; font-size: 12pt; white-space: pre-wrap; color: #000; background: #fff; }
}
.linha .botao { flex: none; }
ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
details { background: var(--superficie-2); border-radius: var(--raio); padding: .7rem .9rem; }
summary { cursor: pointer; min-height: 2.4rem; display: flex; align-items: center; }

.grade.estat.cinco { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grade.estat.cinco > :nth-child(-n+3) { grid-column: span 2; }
.grade.estat.cinco > :nth-child(n+4) { grid-column: span 3; }
@media (max-width: 760px) { .grade.estat.cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade.estat.cinco > * { grid-column: span 1 !important; } }
input[type="checkbox"], input[type="radio"] { width: 1.4rem; height: 1.4rem; min-height: 0; accent-color: var(--primaria); flex: none; }
.carrinho-item input[type="checkbox"] { width: 1.4rem; min-height: 0; padding: 0; }
.carrinho-item label.linha { gap: .5rem; }

button.cartao.botao-cartao { text-align: left; cursor: pointer; font: inherit; color: inherit; }
button.cartao.botao-cartao:hover { border-color: var(--primaria); }
button.cartao.botao-cartao.ativo { border-color: var(--primaria); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaria) 30%, transparent); }
.entrada-qtd { width: 5.8rem; min-height: 2.6rem; text-align: right; padding: .3rem .55rem; }
.convite-aula { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--menu); color: var(--menu-texto); border-radius: var(--raio); padding: 1.1rem 1.3rem; border-left: 8px solid var(--destaque); }
.convite-aula p { color: var(--menu-suave); margin-top: .2rem; }
.convite-aula strong { font-family: var(--titulo); font-size: 1.2rem; }
.botao.aula-contexto { min-height: 2.6rem; padding: .35rem .9rem; font-size: .92rem; }

/* ---------------------------------------------------------------- celular */
button, a.botao, .produto-linha, .abas button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.busca-linha { display: flex; gap: .6rem; flex-wrap: wrap; align-items: stretch; }
.busca-linha input { flex: 1 1 11rem; }
.botao-camera { flex: none; }
.qr-caixa { display: grid; place-items: center; padding: .4rem; }
.qr-caixa img { width: min(220px, 70%); height: auto; background: #fff; padding: .6rem; border-radius: var(--raio); border: 1px solid var(--linha); }
.passos h3 { font-size: 1rem; margin-bottom: .3rem; }
.passos.destaque-passos { background: var(--ok-fundo); border-radius: var(--raio); padding: .7rem 1rem; }
.leitor-caixa { position: relative; background: #000; border-radius: var(--raio); overflow: hidden; }
.leitor-video { width: 100%; max-height: 58vh; object-fit: cover; display: block; border-radius: 0; }
.leitor-mira { position: absolute; left: 10%; right: 10%; top: 32%; bottom: 32%; border: 3px solid var(--destaque); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); pointer-events: none; }
.barra-venda { display: none; }
@media (display-mode: standalone) { .palco { padding-top: calc(1.4rem + env(safe-area-inset-top, 0px)); } }

@media (max-width: 900px) {
  dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog form, dialog .dentro { height: 100dvh; max-height: 100dvh; }
  .dlg-corpo { flex: 1 1 auto; }
  .dlg-pe { border-radius: 0; padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); position: sticky; bottom: 0; }
  .dlg-pe .botao { flex: 1 1 8rem; }
  .barra-venda {
    display: flex; position: fixed; left: 0; right: 0; bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); z-index: 19; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .65rem max(1rem, env(safe-area-inset-left, 0px)); min-height: 3.4rem; background: var(--primaria); color: var(--primaria-sobre); border: 0; font: inherit; font-weight: 600; cursor: pointer;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .25); text-align: left;
  }
  .barra-venda[hidden] { display: none; }
  .barra-venda strong { font-family: var(--titulo); white-space: nowrap; }
  .palco { padding-bottom: 9rem; }
  .topo .acoes { width: 100%; }
  .topo .acoes .botao { flex: 1 1 auto; }
}

/* tabelas viram cartões: cada linha é um cartão, cada célula mostra o nome da coluna ao lado do valor */
@media (max-width: 700px) {
  .tabela-rolagem { max-width: 100%; }
  .tabela-rolagem table.sem-cabecalho td { padding: .55rem .5rem; }
  .cartao, .grade > *, .pilha > * { min-width: 0; }
  .tabela-rolagem table:not(.sem-cabecalho), .tabela-rolagem table:not(.sem-cabecalho) tbody { display: block; width: 100%; }
  .tabela-rolagem table:not(.sem-cabecalho) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela-rolagem table:not(.sem-cabecalho) tbody tr { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: .45rem .9rem; margin-bottom: .7rem; }
  .tabela-rolagem table:not(.sem-cabecalho) tbody tr:hover { background: var(--superficie); }
  .tabela-rolagem table:not(.sem-cabecalho) td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 0; padding: .35rem 0; text-align: right; }
  .tabela-rolagem table:not(.sem-cabecalho) td::before { content: attr(data-rotulo); color: var(--tinta-suave); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; text-align: left; flex: none; }
  .tabela-rolagem table:not(.sem-cabecalho) td[data-titulo] { order: -1; justify-content: flex-start; text-align: left; font-size: 1.08rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linha); margin-bottom: .2rem; }
  .tabela-rolagem table:not(.sem-cabecalho) td[data-titulo]::before { display: none; }
  .tabela-rolagem table:not(.sem-cabecalho) td:not([data-rotulo])::before, .tabela-rolagem table:not(.sem-cabecalho) td[data-rotulo=""]::before { display: none; }
  .tabela-rolagem table:not(.sem-cabecalho) td.acoes { justify-content: flex-end; flex-wrap: wrap; padding-top: .55rem; }
  .tabela-rolagem table:not(.sem-cabecalho) td:empty { display: none; }
  .carrinho-item input { width: 5.2rem; }
}

.estat .valor { font-size: clamp(1.15rem, 5.4vw, 1.75rem); overflow-wrap: anywhere; }
@media (min-width: 761px) { .estat .valor { font-size: 1.75rem; } }
.barra-venda-ir { white-space: nowrap; }
.pilha > .busca { flex: none; }