/* Layout: faixa fixa no topo com a meta desenhada como um fio de filamento; catálogo em grade à esquerda, carrinho fixo à direita (gaveta no celular). */
:root {
  --fundo: #f2f5f3;
  --superficie: #ffffff;
  --tinta: #13201c;
  --suave: #5b6a65;
  --linha: #d9e1de;
  --destaque: #0b6e5f;
  --destaque-tinta: #ffffff;
  --destaque-fraco: #e0f1ec;
  --perigo: #b3261e;
  --alerta-fundo: #fff4d6;
  --alerta-tinta: #6b4a00;
  --f-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-codigo: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
  --margem: clamp(16px, 1.8vw, 32px); /* a loja e o painel ocupam a largura toda */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 15px/1.5 var(--f-texto); }
h1, h2 { font-family: var(--f-titulo); text-wrap: balance; margin: 0; }
h2 { font-size: 1.15rem; }
p { margin: 0; }
.suave { color: var(--suave); }
.marca { font-family: var(--f-titulo); font-weight: 700; letter-spacing: -0.01em; font-size: 1.1rem; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.9rem; border: 1px solid var(--linha); border-radius: 6px; background: var(--superficie); cursor: pointer; text-decoration: none; color: var(--tinta); font-weight: 500; }
.btn:hover { border-color: var(--suave); }
.btn.primario { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-tinta); font-weight: 600; }
.btn.primario:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.55; cursor: default; filter: none; }
.link { background: none; border: 0; padding: 0.25rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link.perigo { color: var(--perigo); }
.erro { color: var(--perigo); font-weight: 500; }
input, select, textarea { background: var(--superficie); border: 1px solid var(--linha); border-radius: 6px; padding: 0.55rem 0.7rem; width: 100%; }

/* Entrada */
.entrada { min-height: 100vh; display: grid; place-items: center; padding: 2rem 16px; }
.entrada-caixa { width: 100%; max-width: 26rem; display: grid; gap: 1rem; }
.entrada h1 { font-size: clamp(1.7rem, 6vw, 2.3rem); line-height: 1.08; }
.entrada-texto { color: var(--suave); }
.abas { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--linha); margin-top: 0.5rem; }
.aba { background: none; border: 0; padding: 0.5rem 0; cursor: pointer; color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.aba.ativa { color: var(--tinta); border-bottom-color: var(--destaque); }
.form { display: grid; gap: 0.4rem; }
.form label { font-weight: 500; margin-top: 0.4rem; }
.form .btn { margin-top: 0.8rem; padding: 0.7rem; }
.dica { color: var(--suave); font-size: 0.87rem; margin-top: 0.4rem; }

/* Topo e meta */
.topo { position: sticky; top: 0; z-index: 5; background: var(--superficie); border-bottom: 1px solid var(--linha); padding: 0.7rem var(--margem) 0.9rem; display: grid; gap: 0.6rem; }
.topo-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; }
.topo-marca { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.topo-nav { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.meta { display: grid; gap: 0.35rem; }
.meta-numeros { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.meta-kg { font-family: var(--f-titulo); font-size: 1rem; }
.meta-kg strong { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.meta-info { color: var(--suave); font-size: 0.9rem; }
.fio { position: relative; height: 14px; border-radius: 7px; background: var(--fundo); border: 1px solid var(--linha); overflow: hidden; }
.fio-cheio { height: 100%; width: 0; border-radius: 7px; background: var(--destaque); background-image: repeating-linear-gradient(115deg, transparent 0 6px, rgba(255,255,255,0.18) 6px 8px); transition: width 0.5s ease; }
.fio-marcas { position: absolute; inset: 0; pointer-events: none; }
.fio-marcas i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--suave); opacity: 0.45; }
@media (prefers-reduced-motion: reduce) { .fio-cheio { transition: none; } }

.aviso { background: var(--alerta-fundo); color: var(--alerta-tinta); padding: 0.7rem var(--margem); font-weight: 500; }

/* Corpo */
.corpo { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; padding: 1.2rem var(--margem) 3rem; align-items: start; }
.catalogo { min-width: 0; display: grid; gap: 0.8rem; }
.filtros { display: grid; gap: 0.6rem; }
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip { border: 1px solid var(--linha); background: var(--superficie); border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer; font-size: 0.9rem; }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.contagem { font-size: 0.87rem; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 0.6rem; }

.item { background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 0.7rem; display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; gap: 0.15rem 0.8rem; align-items: start; }
.item.no-carrinho { border-color: var(--destaque); box-shadow: inset 0 0 0 1px var(--destaque); }
.item.esgotado { opacity: 0.6; }
.mini { grid-row: 1 / span 4; width: 104px; height: 104px; border-radius: 8px; background: var(--fundo); display: grid; place-items: center; position: relative; padding: 0; border: 0; overflow: hidden; }
.mini.foto { cursor: zoom-in; border: 1px solid var(--linha); }
.mini.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rolo { width: 58px; height: 58px; border-radius: 50%; position: relative; border: 1px solid rgba(0,0,0,0.18); }
.rolo::after { content: ""; position: absolute; inset: 19px; border-radius: 50%; background: var(--superficie); border: 1px solid rgba(0,0,0,0.18); }
.rolo.translucido { opacity: 0.6; }
.item-cor { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.item-linha { color: var(--suave); font-size: 0.85rem; }
.item-sku { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.item-pe { display: flex; justify-content: flex-end; align-items: end; align-self: end; margin-top: 0.35rem; }
.copiar { font-size: 0.72rem; padding: 0.1rem 0.45rem; border: 1px solid var(--linha); border-radius: 5px; background: var(--superficie); color: var(--suave); cursor: pointer; }
.copiar:hover { border-color: var(--destaque); color: var(--tinta); }
.sku.grande { font-size: 0.9rem; color: var(--tinta); user-select: all; }
.sku { font-family: var(--f-codigo); font-size: 0.74rem; color: var(--suave); }
.passo { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: 6px; overflow: hidden; }
.passo button { width: 2.1rem; height: 2.1rem; border: 0; background: none; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.passo button:hover { background: var(--destaque-fraco); }
.passo output { min-width: 2rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.etiqueta { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--perigo); }
.mini { font-size: 0.78rem; padding: 0.2rem 0.5rem; }

/* Carrinho */
.carrinho { position: sticky; top: 8.2rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; }
.carrinho-puxador { display: none; }
.carrinho-dentro { padding: 1rem; display: grid; gap: 0.7rem; max-height: calc(100vh - 9.5rem); overflow-y: auto; }
.status { font-size: 0.9rem; padding: 0.5rem 0.65rem; border-radius: 6px; background: var(--destaque-fraco); }
.status.pendente { background: var(--alerta-fundo); color: var(--alerta-tinta); }
.status:empty { display: none; }
.carrinho-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.carrinho-lista li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.ponto { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.18); }
.carrinho-nome { font-size: 0.9rem; line-height: 1.25; overflow-wrap: anywhere; }
.carrinho-nome small { display: block; color: var(--suave); }
.vazio { color: var(--suave); font-size: 0.92rem; }
.carrinho-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--linha); padding-top: 0.7rem; }
.carrinho-total strong { font-family: var(--f-titulo); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
textarea { resize: vertical; }

@media (max-width: 900px) {
  .corpo { grid-template-columns: minmax(0, 1fr); padding-bottom: 6rem; }
  .carrinho { position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: 12px 12px 0 0; border-bottom: 0; z-index: 6; box-shadow: 0 -6px 24px rgba(0,0,0,0.14); }
  .carrinho-puxador { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 0.85rem 16px calc(0.85rem + env(safe-area-inset-bottom, 0px)); background: none; border: 0; cursor: pointer; font-weight: 600; }
  .carrinho-puxador strong { color: var(--destaque); }
  .carrinho-dentro { display: none; max-height: 62vh; padding: 0 16px calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .carrinho.aberto .carrinho-dentro { display: grid; }
  .carrinho.aberto .carrinho-puxador { padding-bottom: 0.6rem; }
  .meta-kg strong { font-size: 1.5rem; }
}

/* Painel */
.painel { padding: 1.2rem var(--margem) 3rem; display: grid; gap: 1.6rem; }
.painel-acoes { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.painel-acoes select { width: auto; }
.curto { width: 6rem; }
.espaco { flex: 1 1 1rem; }
.pilula { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--destaque-fraco); }
.pilula.fechada { background: var(--alerta-fundo); color: var(--alerta-tinta); }
.secao-titulo { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.tabela-rolagem { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--linha); white-space: nowrap; }
td.quebra { white-space: normal; min-width: 14rem; }
th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--suave); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { font-weight: 700; border-top: 1px solid var(--linha); border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.sku { font-size: 0.8rem; }
.clientes { display: grid; gap: 0.6rem; }
.cliente { background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 0.2rem 0.9rem; }
.cliente summary { cursor: pointer; padding: 0.6rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cliente summary strong { font-variant-numeric: tabular-nums; }
.cliente ul { margin: 0 0 0.7rem; padding-left: 1.1rem; }
.cliente .contato { color: var(--suave); font-size: 0.88rem; margin-bottom: 0.5rem; overflow-wrap: anywhere; }

.recado { position: fixed; left: 50%; transform: translateX(-50%); bottom: 5.5rem; background: var(--tinta); color: var(--fundo); padding: 0.6rem 1rem; border-radius: 6px; z-index: 10; max-width: calc(100vw - 32px); font-weight: 500; }
.carrinho-links { display: flex; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; }
.carrinho-links:not(:has(button:not([hidden]))) { display: none; }
.grupo { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
.cliente .btn { margin-bottom: 0.8rem; }

/* Foto no cartão */
.foto-qtd { position: absolute; right: 4px; bottom: 4px; padding: 0.05rem 0.4rem; border-radius: 9px; background: rgba(10, 16, 14, 0.78); color: #fff; font-size: 0.68rem; font-weight: 600; }

/* Carrossel */
.carrossel { border: 1px solid var(--linha); border-radius: 10px; padding: 0; background: var(--superficie); color: var(--tinta); width: min(46rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.carrossel::backdrop { background: rgba(8, 14, 12, 0.72); }
.carrossel[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.carrossel-topo, .carrossel-pe { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; }
.carrossel-palco { position: relative; background: var(--fundo); display: grid; place-items: center; min-height: 12rem; }
.carrossel-palco img { max-width: 100%; max-height: min(64vh, 34rem); object-fit: contain; display: block; }
.car-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--linha); background: var(--superficie); cursor: pointer; font-size: 1.5rem; line-height: 1; }
#car-ant { left: 0.6rem; } #car-prox { right: 0.6rem; }
.car-minis { display: flex; gap: 0.4rem; overflow-x: auto; min-width: 0; padding: 2px; }
.car-mini { flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--fundo); opacity: 0.65; }
.car-mini[aria-current="true"] { border-color: var(--destaque); opacity: 1; }
.car-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Disponibilidade */
.disp-lista { display: grid; gap: 1.2rem; }
.disp-familia { background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 0.9rem; display: grid; gap: 0.8rem; }
.disp-cab { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; }
.disp-cab h3 { margin: 0; font-family: var(--f-titulo); font-size: 1.15rem; }
.disp-cab h4 { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--suave); }
.disp-cab.sub { border-top: 1px solid var(--linha); padding-top: 0.7rem; }
.disp-cab .grupo { align-items: center; }
.disp-linha { display: grid; gap: 0.5rem; }
.disp-itens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.15rem 1.2rem; }
.disp-itens label { display: grid; grid-template-columns: auto 18px minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; padding: 0.35rem 0; cursor: pointer; }
.disp-nome { line-height: 1.2; overflow-wrap: anywhere; }
.disp-nome small { display: block; }
.disp-estado { font-size: 0.8rem; color: var(--suave); }
.disp-itens li.off .disp-nome { color: var(--suave); text-decoration: line-through; }
.disp-itens li.off .disp-estado { color: var(--perigo); font-weight: 600; }
.chave { appearance: none; width: 2.3rem; height: 1.3rem; padding: 0; border-radius: 999px; border: 1px solid var(--linha); background: var(--fundo); position: relative; cursor: pointer; flex: none; }
.chave::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.3rem - 6px); height: calc(1.3rem - 6px); border-radius: 50%; background: var(--suave); transition: transform 0.15s; }
.chave:checked { background: var(--destaque); border-color: var(--destaque); }
.chave:checked::after { transform: translateX(1rem); background: var(--destaque-tinta); }
@media (prefers-reduced-motion: reduce) { .chave::after { transition: none; } }

/* Fotos (admin) */
.fotos-vista { grid-template-columns: 20rem minmax(0, 1fr); align-items: start; gap: 1.5rem; }
.fotos-lista { display: grid; gap: 0.6rem; position: sticky; top: 8.2rem; }
.fotos-filtro { display: flex; gap: 0.5rem; align-items: center; cursor: pointer; }
.fotos-filtro input { width: auto; }
#fotos-itens { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 17rem); overflow-y: auto; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; }
.fotos-item { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; padding: 0.45rem 0.7rem; background: none; border: 0; border-bottom: 1px solid var(--linha); text-align: left; cursor: pointer; }
.fotos-item[aria-current="true"] { background: var(--destaque-fraco); box-shadow: inset 3px 0 0 var(--destaque); }
.fotos-editor { min-width: 0; display: grid; gap: 0.9rem; }
.fotos-cab { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.fotos-nome { flex: 1 1 12rem; min-width: 0; }
.fotos-nome h2 { font-size: 1.5rem; overflow-wrap: anywhere; }
.ponto.grande { width: 44px; height: 44px; flex: none; }
.fotos-zona { border: 2px dashed var(--linha); border-radius: 10px; background: var(--superficie); padding: 2rem 1rem; display: grid; gap: 0.5rem; justify-items: center; text-align: center; }
.fotos-zona.sobre, .fotos-zona:focus-visible { border-color: var(--destaque); background: var(--destaque-fraco); }
.fotos-zona strong { font-family: var(--f-titulo); font-size: 1.15rem; }
.fotos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.7rem; }
.fotos-mini { margin: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.fotos-mini img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--fundo); }
.fotos-mini figcaption { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; font-size: 0.88rem; }
@media (max-width: 900px) {
  .fotos-vista { grid-template-columns: minmax(0, 1fr); }
  .fotos-lista { position: static; }
  #fotos-itens { max-height: 14rem; }
}
.fotos-capa { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; background: var(--fundo); display: block; }
.fotos-item .ponto { justify-self: center; width: 22px; height: 22px; }

/* Produtos e custos (admin) */
.planilha-envio, .planilha-filtros { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.8rem; }
.planilha-filtros input[type=search] { max-width: 22rem; }
.planilha-filtros select { width: auto; }
.planilha-previa { background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 1rem; display: grid; gap: 0.8rem; }
.planilha-previa .resumo { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.planilha-previa details { border-top: 1px solid var(--linha); padding-top: 0.5rem; }
.planilha-previa summary { cursor: pointer; font-weight: 600; }
.planilha-previa .tabela-rolagem { margin-top: 0.5rem; max-height: 22rem; overflow: auto; }
.planilha-previa .avisos { background: var(--alerta-fundo); color: var(--alerta-tinta); border-radius: 6px; padding: 0.6rem 0.8rem; margin: 0; padding-left: 1.8rem; }
.marca-cor { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; border: 1px solid var(--linha); vertical-align: -0.15rem; margin-right: 0.35rem; }
.sobe { color: var(--perigo); }
.desce { color: var(--destaque); }
tr.historico td { background: var(--fundo); white-space: normal; }
tr.historico ul { margin: 0; padding-left: 1.1rem; }
tr.oculto td { color: var(--suave); }
/* botão pequeno: não herda o tamanho da miniatura (.mini) do catálogo */
.btn.mini { grid-row: auto; width: auto; height: auto; display: inline-flex; padding: 0.2rem 0.55rem; font-size: 0.8rem; border: 1px solid var(--linha); background: var(--superficie); overflow: visible; }
#tab-produtos td { vertical-align: middle; }

/* Situação na fábrica */
.selo { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--destaque-fraco); white-space: nowrap; }
.selo.aviso, .pilula.aviso, .sel-situacao.aviso { background: #fff1a8; color: #5c4a00; }
.selo.alerta, .sel-situacao.alerta { background: var(--alerta-fundo); color: var(--alerta-tinta); }
.selo.fora { background: var(--linha); color: var(--suave); }
.sel-situacao { width: auto; padding: 0.2rem 0.4rem; font-size: 0.85rem; }
.aviso-caixa { background: var(--alerta-fundo); color: var(--alerta-tinta); border-radius: 6px; padding: 0.6rem 0.8rem; margin-bottom: 0.8rem; }
.detalhes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; padding: 0.3rem 0; }
.detalhes h4 { margin: 0 0 0.3rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--suave); }
.disp-fabrica { display: block; color: var(--alerta-tinta); font-weight: 600; }
.item-aviso { display: inline-block; margin-left: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--alerta-tinta); background: var(--alerta-fundo); padding: 0 0.4rem; border-radius: 4px; }
#vista-produtos { grid-template-columns: minmax(0, 1fr); }
#vista-produtos td.quebra { min-width: 16rem; }
.planilha-previa td { white-space: normal; }
/* Fabricante */
.campo-fab { width: 9.5rem; padding: 0.25rem 0.45rem; font-size: 0.88rem; font-weight: 600; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.campo-fab:hover, .campo-fab:focus { border-color: var(--linha); background: var(--superficie); }
.campo-fab.vazio { border: 1px dashed var(--alerta-tinta); background: var(--alerta-fundo); font-weight: 400; }
td small.cat { display: block; color: var(--suave); font-size: 0.78rem; }
.lote { background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 0.5rem 0.8rem; }
.lote input { width: 12rem; }
.fab { color: var(--tinta); }

/* ---------- Menu ---------- */
.topo-nav .link.atual { text-decoration-thickness: 2px; text-decoration-color: var(--destaque); font-weight: 600; }
.pequeno { font-size: 0.85rem; }
.curto-auto { width: auto; }
.btn.mini-btn { padding: 0.35rem 0.7rem; font-size: 0.88rem; }

/* ---------- Loja ---------- */
.convite { background: var(--destaque-fraco); border-radius: 8px; padding: 0.75rem 0.9rem; line-height: 1.45; }
.convite a { color: inherit; font-weight: 600; }
.filtro-linha { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.filtro-linha .rotulo { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); padding-top: 0.4rem; }
.chip-n { margin-left: 0.35rem; font-size: 0.75rem; opacity: 0.6; font-variant-numeric: tabular-nums; }
.item-marca { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--destaque); }
.item-desc { font-size: 0.93rem; }
.mini.sem-foto { background: var(--destaque-fraco); }
.mini-sigla { font-family: var(--f-titulo); font-weight: 700; font-size: 1.6rem; color: var(--destaque); opacity: 0.7; letter-spacing: -0.02em; }
.meus-orc { border-top: 1px solid var(--linha); padding-top: 0.8rem; display: grid; gap: 0.5rem; }
.meus-orc h3 { margin: 0; font-size: 0.95rem; }
.orc-meu { border: 1px solid var(--linha); border-radius: 6px; padding: 0.1rem 0.6rem; font-size: 0.88rem; }
.orc-meu + .orc-meu { margin-top: 0.4rem; }
.orc-meu summary { cursor: pointer; display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0; align-items: center; }
.orc-meu ul { margin: 0 0 0.5rem; padding-left: 1.1rem; }
.orc-resposta { background: var(--destaque-fraco); border-radius: 6px; padding: 0.5rem 0.6rem; margin-bottom: 0.5rem; }
.orc-resposta p { white-space: pre-wrap; margin-top: 0.2rem; }
.orc-meu .link { margin-bottom: 0.5rem; font-size: 0.85rem; }
.orc-admin summary strong { font-weight: 600; }
.orc-admin textarea { margin: 0.3rem 0 0.6rem; }
.orc-acoes { margin-bottom: 0.8rem; align-items: center; }
.contato-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.7rem; align-items: end; }
.contato-form label { display: grid; gap: 0.25rem; font-weight: 500; font-size: 0.9rem; }
.contato-form .btn { justify-self: start; }

/* ---------- Capa ---------- */
.capa { min-height: 100vh; background: var(--fundo); }
.capa-largura { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.capa-topo { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.capa-topo-linha { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
.capa-topo .marca { font-size: 1.25rem; }
.capa-nav { display: flex; gap: 1.2rem; align-items: center; }
.capa-nav a:not(.btn) { color: var(--tinta); text-decoration: none; font-weight: 500; }
.capa-nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.capa-hero { padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 4rem); }
.hero-grade { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.sobretitulo { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--destaque); margin-bottom: 0.7rem; }
.capa-hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.025em; margin-bottom: 1.2rem; }
.hero-sub { font-size: 1.08rem; color: var(--suave); max-width: 36rem; margin-bottom: 0.7rem; line-height: 1.55; }
.hero-acoes { margin-top: 1.4rem; flex-wrap: wrap; gap: 0.6rem; display: flex; }
.btn.grande { padding: 0.8rem 1.25rem; font-size: 1rem; }
.hero-rodada { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 1.5rem; display: grid; gap: 0.7rem; box-shadow: 0 18px 40px -24px rgba(11, 110, 95, 0.45); }
.rodada-kg { font-family: var(--f-titulo); font-size: 1.15rem; }
.rodada-kg strong { font-size: 3.2rem; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-rodada .fio { height: 18px; border-radius: 9px; }
.rodada-nota { font-size: 0.9rem; color: var(--suave); border-top: 1px solid var(--linha); padding-top: 0.7rem; }
.capa-secao { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.capa-secao.alt { background: var(--superficie); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.capa-secao h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -0.02em; margin-bottom: 1.6rem; }
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; counter-reset: passo; }
.passos li { display: grid; gap: 0.4rem; align-content: start; border-top: 2px solid var(--tinta); padding-top: 0.9rem; }
.passo-n { font-family: var(--f-titulo); font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--destaque); }
.passos h3 { margin: 0.2rem 0 0; font-size: 1.08rem; font-family: var(--f-titulo); }
.passos p { color: var(--suave); line-height: 1.5; }
.planos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.plano { border: 1px solid var(--linha); border-radius: 14px; padding: 1.6rem; display: grid; gap: 0.7rem; align-content: start; background: var(--fundo); }
.plano.destaque { background: var(--destaque); color: var(--destaque-tinta); border-color: var(--destaque); }
.plano-tag { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.75; }
.plano h3 { margin: 0; font-family: var(--f-titulo); font-size: 1.6rem; letter-spacing: -0.02em; }
.plano ul { margin: 0.3rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.plano li { padding-left: 1.5rem; position: relative; line-height: 1.45; }
.plano li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.7rem; height: 0.4rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: 0.8; }
.plano-pe { font-size: 0.9rem; opacity: 0.8; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding-top: 0.7rem; margin-top: 0.3rem; }
.capa-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.7rem; margin-bottom: 1rem; }
.capa-cat { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 1rem; display: grid; gap: 0.2rem; align-content: start; }
.capa-cat strong { font-family: var(--f-titulo); font-size: 1.1rem; }
.capa-cat.destaque { border-color: var(--destaque); box-shadow: inset 0 0 0 1px var(--destaque); }
.capa-cat .selo { justify-self: start; margin-top: 0.3rem; }
.acesso-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.acesso-texto p { color: var(--suave); line-height: 1.55; max-width: 32rem; }
.acesso-texto h2 { margin-bottom: 0.8rem; }
.capa-contato { margin-top: 1.5rem; }
.capa-contato h3 { font-family: var(--f-titulo); margin: 0 0 0.5rem; }
.capa-contato ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.capa-contato li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.5rem; overflow-wrap: anywhere; }
.capa-contato a { color: var(--tinta); font-weight: 600; }
#acesso .entrada-caixa { background: var(--fundo); border: 1px solid var(--linha); border-radius: 14px; padding: 1.4rem; max-width: none; }
.capa-rodape { padding: 1.5rem 0 2.5rem; color: var(--suave); font-size: 0.88rem; }
@media (max-width: 900px) {
  .hero-grade, .acesso-grade, .planos { grid-template-columns: minmax(0, 1fr); }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capa-nav a:not(.btn) { display: none; }
}
@media (max-width: 560px) {
  .passos { grid-template-columns: minmax(0, 1fr); }
  .filtro-linha { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .filtro-linha .rotulo { padding-top: 0; }
  .capa-contato li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- Filtros na lateral + carrinho em gaveta ---------- */
.corpo.com-lateral { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.6rem; }
.lateral { position: sticky; align-self: start; display: grid; gap: 1.1rem; max-height: calc(100vh - var(--topo-alt, 0px) - 1.5rem); overflow-y: auto; padding: 0.2rem 0.3rem 1rem 0; }
.lateral { top: calc(var(--topo-alt, 0px) + 0.6rem); }
.lat-grupo { display: grid; gap: 0.35rem; }
.lat-grupo h3 { margin: 0; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--suave); }
.lateral .chips { flex-direction: column; flex-wrap: nowrap; gap: 1px; }
.lateral .chip { border: 0; background: none; border-radius: 6px; text-align: left; display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.38rem 0.55rem; font-size: 0.92rem; }
.lateral .chip:hover { background: var(--superficie); }
.lateral .chip[aria-pressed="true"] { background: var(--tinta); color: var(--fundo); }
.chip-txt { overflow-wrap: anywhere; }
.lateral .chip-n { margin-left: 0; }
.interruptor { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; cursor: pointer; }
.interruptor input { width: auto; accent-color: var(--destaque); }
.lateral .link { justify-self: start; font-size: 0.88rem; }
.barra-grade { position: sticky; top: var(--topo-alt, 0px); z-index: 3; display: flex; align-items: center; gap: 0.7rem; background: var(--fundo); padding: 0.5rem 0; margin-top: -0.5rem; }
.barra-grade .contagem { flex: 1; }
.mostrar-filtros { display: none; }
.btn-carrinho { display: inline-flex; align-items: center; gap: 0.55rem; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); border-radius: 999px; padding: 0.45rem 0.55rem 0.45rem 1rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-carrinho .bolha { background: var(--fundo); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.btn-carrinho.tem { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-tinta); }
.btn-carrinho.tem .bolha { background: rgba(255, 255, 255, 0.22); color: inherit; }
.btn-carrinho.pendente { box-shadow: 0 0 0 3px var(--alerta-fundo); }
.btn-carrinho.pulsa { animation: pulsa 0.45s ease; }
@keyframes pulsa { 40% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .btn-carrinho.pulsa { animation: none; } }
.carrinho.gaveta { position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(23rem, 100vw); border-radius: 0; border: 0; border-left: 1px solid var(--linha); z-index: 30; transform: translateX(105%); transition: transform 0.25s ease; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.16); visibility: hidden; }
.carrinho.gaveta.aberta { transform: none; visibility: visible; }
.carrinho.gaveta .carrinho-dentro { display: grid; align-content: start; max-height: none; height: 100%; overflow-y: auto; padding: 1rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
.gaveta-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fechar { border: 1px solid var(--linha); background: var(--superficie); border-radius: 50%; width: 2.2rem; height: 2.2rem; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--tinta); }
.gaveta-fundo { position: fixed; inset: 0; background: rgba(10, 20, 18, 0.38); z-index: 29; }
body.com-gaveta { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .carrinho.gaveta { transition: none; } }
@media (max-width: 900px) {
  .corpo.com-lateral { grid-template-columns: minmax(0, 1fr); padding-bottom: 3rem; gap: 0.6rem; }
  .lateral { display: none; position: static; max-height: none; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 0.9rem; }
  .lateral.aberta { display: grid; }
  .mostrar-filtros { display: inline-flex; }
  .topo { position: static; }
  .carrinho.gaveta { left: auto; top: 0; bottom: 0; box-shadow: none; }
  .carrinho.gaveta .carrinho-dentro { display: grid; }
}

/* ---------- Coleções (admin) ---------- */
.grupos-grade { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.grupos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.gr-item { display: flex; gap: 0.4rem; align-items: center; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 0.35rem 0.4rem 0.35rem 0.2rem; }
.gr-item.atual { border-color: var(--destaque); box-shadow: inset 0 0 0 1px var(--destaque); }
.gr-item.inativo strong { color: var(--suave); }
.gr-abrir { flex: 1; text-align: left; background: none; border: 0; cursor: pointer; display: grid; padding: 0.25rem 0.5rem; }
.gr-abrir span { font-size: 0.84rem; }
.gr-ordem { display: flex; gap: 0.2rem; }
.gr-vazio { display: grid; gap: 0.6rem; justify-items: start; color: var(--suave); }
.grupo-form { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 1.1rem; align-items: start; }
.gr-campos { display: grid; gap: 0.8rem; }
.gr-campos > label { display: grid; gap: 0.3rem; font-weight: 500; }
.gr-campos fieldset { border: 1px solid var(--linha); border-radius: 8px; padding: 0.5rem 0.8rem 0.7rem; margin: 0; }
.gr-campos legend { font-weight: 500; padding: 0 0.3rem; }
.caixas { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.caixa { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
.caixa input { width: auto; accent-color: var(--destaque); }
.gr-previa { position: sticky; top: 5.5rem; display: grid; gap: 0.5rem; }
.gr-previa h3 { margin: 0; font-size: 1rem; }
.gr-previa-lista { max-height: 70vh; overflow-y: auto; display: grid; gap: 0.3rem; border-top: 1px solid var(--linha); padding-top: 0.5rem; }
.gr-previa-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0.5rem; align-items: center; font-size: 0.88rem; }
@media (max-width: 1000px) { .grupos-grade, .grupo-form { grid-template-columns: minmax(0, 1fr); } .gr-previa { position: static; } }
.item-sku.coluna { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
/* Seções de coleções na barra lateral */
.lat-secao { border-top: 1px solid var(--linha); }
.lat-secao:last-child { border-bottom: 1px solid var(--linha); }
.lat-secao summary { cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0.2rem; font-weight: 600; font-size: 0.92rem; list-style: none; }
.lat-secao summary::-webkit-details-marker { display: none; }
.lat-secao summary::before { content: "›"; display: inline-block; width: 0.8rem; color: var(--suave); transition: transform 0.15s; }
.lat-secao[open] summary::before { transform: rotate(90deg); }
.lat-secao summary > span:first-child { flex: 1; }
.lat-secao .chips { padding: 0 0 0.5rem 0.4rem; }
.lat-marca { font-size: 0.75rem; font-weight: 600; color: var(--destaque); max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#loja-grupos, #col-grupos { display: block; }
.gr-secao { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--suave); padding: 0.6rem 0.2rem 0.1rem; }
.grupos-lista { max-height: calc(100vh - 12rem); overflow-y: auto; }
/* Seletor de cor */
.tons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.45rem; padding: 0.45rem; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); }
.tom { aspect-ratio: 1; width: 100%; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.16); background: var(--tom); cursor: pointer; padding: 0; position: relative; }
.tom.metal { background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85), transparent 42%), linear-gradient(135deg, var(--tom), color-mix(in srgb, var(--tom) 55%, #000)); }
.tom:hover:not(:disabled) { transform: scale(1.1); }
.tom.ativo { box-shadow: 0 0 0 2px var(--fundo), 0 0 0 4px var(--tinta); }
.tom:disabled { opacity: 0.18; cursor: default; }
.tons-nome { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--tinta); margin-left: 0.3rem; }
.gr-secao { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.gr-secao.oculta > span { text-decoration: line-through; opacity: 0.6; }
.interruptor.pequeno { font-size: 0.75rem; text-transform: none; letter-spacing: 0; font-weight: 500; gap: 0.3rem; }
.interruptor.largo { grid-column: 1 / -1; }
/* Etiquetas de seleção múltipla (material, marca, linha) */
.etiquetas { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.etiqueta-filtro { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta); border-radius: 999px; padding: 0.3rem 0.4rem 0.3rem 0.75rem; font-size: 0.88rem; font-weight: 500; cursor: pointer; }
.etiqueta-filtro:hover:not(:disabled) { border-color: var(--suave); }
.etiqueta-filtro .etiqueta-n { background: var(--fundo); border-radius: 999px; padding: 0 0.45rem; font-size: 0.75rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.etiqueta-filtro.ativo { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }
.etiqueta-filtro.ativo .etiqueta-n { background: rgba(255, 255, 255, 0.2); color: inherit; }
.etiqueta-filtro:disabled { opacity: 0.35; cursor: default; }

/* Caixinha de marcar nas combinações e efeitos da lateral */
.lateral .chip { justify-content: flex-start; align-items: center; }
.lateral .chip .chip-txt { flex: 1; }
.chip-caixa { flex: none; width: 1rem; height: 1rem; border: 1.5px solid var(--suave); border-radius: 4px; background: var(--fundo); display: inline-grid; place-items: center; }
.lateral .chip[aria-pressed="true"] .chip-caixa { border-color: var(--fundo); background: var(--fundo); }
.lateral .chip[aria-pressed="true"] .chip-caixa::after { content: ""; width: 0.28rem; height: 0.55rem; border: solid var(--tinta); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

/* Rolagem sutil: barra fina, só aparece forte ao passar o mouse.
   O espaço da barra fica reservado, então o conteúdo não pula quando ela surge. */
html { scrollbar-gutter: stable; }
.lateral, .carrinho-dentro, #fotos-itens, .gr-previa-lista, .grupos-lista, .tabela-rolagem { scrollbar-gutter: stable; }
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
html, *:hover, *:focus-within { scrollbar-color: color-mix(in srgb, var(--suave) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
html::-webkit-scrollbar-thumb, *:hover::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--suave) 45%, transparent); }
::-webkit-scrollbar-thumb:hover { background-color: var(--suave); }
.lateral { padding-right: 0; }

.lat-grupo h3:has(.tons-limpar) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.3rem; }
.tons-nome { order: 3; flex-basis: 100%; margin: 0.15rem 0 0; font-size: 0.82rem; }
.tons-nome:empty { display: none; }
.tons-limpar { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 500; white-space: nowrap; }

/* Dica com o nome da cor ao passar o mouse (ou focar pelo teclado) */
.tom::after { content: attr(data-dica); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translate(-50%, 3px); z-index: 5;
  background: var(--tinta); color: var(--fundo); font-size: 0.75rem; font-weight: 500; line-height: 1.2; white-space: nowrap; padding: 0.3rem 0.5rem; border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); pointer-events: none; opacity: 0; transition: opacity 0.12s, transform 0.12s; }
.tom:hover::after, .tom:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* Colunas das pontas: a dica abre para dentro, sem sair da lateral */
.tom:nth-child(7n+1)::after, .tom:nth-child(7n+2)::after { left: 0; transform: translate(0, 3px); }
.tom:nth-child(7n)::after, .tom:nth-child(7n+6)::after { left: auto; right: 0; transform: translate(0, 3px); }
.tom:nth-child(7n+1):hover::after, .tom:nth-child(7n+2):hover::after, .tom:nth-child(7n):hover::after, .tom:nth-child(7n+6):hover::after,
.tom:nth-child(7n+1):focus-visible::after, .tom:nth-child(7n+2):focus-visible::after, .tom:nth-child(7n):focus-visible::after, .tom:nth-child(7n+6):focus-visible::after { transform: translate(0, 0); }

/* Campos de texto mais limpos: sem anel colorido, só a borda escurece; "x" de limpar discreto */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { transition: border-color 0.12s; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--suave); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--suave) 60%, var(--linha)); }
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-decoration { display: none; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 0.9rem; height: 0.9rem; cursor: pointer; opacity: 0.45; background: var(--tinta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
input[type=search]::-webkit-search-cancel-button:hover { opacity: 0.8; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--superficie) inset; -webkit-text-fill-color: var(--tinta); }

/* ---------- Menu da conta ---------- */
.topo-nav { align-items: center; }
.conta { position: relative; }
.conta-botao { list-style: none; display: flex; align-items: center; gap: 0.45rem; cursor: pointer; padding: 0.2rem 0.5rem 0.2rem 0.2rem; border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie); user-select: none; }
.conta-botao::-webkit-details-marker { display: none; }
.conta-botao:hover, .conta[open] .conta-botao { border-color: var(--suave); }
.conta-avatar { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--destaque-fraco); color: var(--destaque); display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.conta-primeiro { font-weight: 500; font-size: 0.92rem; }
.conta-seta { width: 0.4rem; height: 0.4rem; border: solid var(--suave); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
.conta[open] .conta-seta { transform: translateY(1px) rotate(-135deg); }
.conta-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 15rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); padding: 0.35rem; display: grid; }
.conta-quem { display: grid; gap: 0.15rem; padding: 0.6rem 0.65rem 0.7rem; border-bottom: 1px solid var(--linha); margin-bottom: 0.3rem; overflow-wrap: anywhere; }
.conta-quem .suave { font-size: 0.85rem; }
.conta-quem .selo { justify-self: start; margin-top: 0.3rem; }
.conta-item { text-align: left; background: none; border: 0; border-radius: 6px; padding: 0.5rem 0.65rem; cursor: pointer; font-size: 0.92rem; }
.conta-item:hover { background: var(--fundo); }
.conta-item.sair { color: var(--perigo); }

/* ---------- Meus pedidos ---------- */
.pedidos-vista { display: grid; gap: 1rem; max-width: 960px; margin-inline: auto; }
.pedidos-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.pedidos-cabeca h2 { margin: 0 0 0.2rem; }
.pedidos-cabeca p { margin: 0; }
.pedidos-resumo, .ped-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 1rem; display: grid; gap: 0.6rem; }
.pedidos-resumo h3, .ped-topo h3 { margin: 0; font-size: 1.05rem; }
.pedidos-resumo p, .ped-topo p { margin: 0; }
#pedidos-lista { display: grid; gap: 1rem; }
.ped-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ped-cartao.cancelado { opacity: 0.6; }
.pedidos-vista .tabela-rolagem { border: 0; background: none; }
.pedidos-tabela { width: 100%; border-collapse: collapse; }
.pedidos-tabela th { text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--linha); }
.pedidos-tabela td { white-space: normal; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.pedidos-tabela tbody tr:last-child td { border-bottom: 0; }
.pedidos-tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ped-mini { width: 64px; }
.ped-mini .mini { width: 52px; height: 52px; border-radius: 6px; grid-row: auto; }
.ped-mini .mini .rolo { width: 32px; height: 32px; }
.ped-desc { display: block; font-weight: 500; line-height: 1.25; }
.ped-cod { font-family: var(--f-codigo); font-size: 0.75rem; }
.ped-qtd { font-weight: 600; }
.ped-total td { font-weight: 600; border-top: 2px solid var(--linha); border-bottom: 0; }
.vazio-pedidos { text-align: center; padding: 3rem 1rem; display: grid; justify-items: center; gap: 0.6rem; }
@media print {
  .topo, #pedidos-imprimir, #pedidos-tipo, .gaveta, #gaveta-fundo, .btn-carrinho { display: none !important; }
  .pedidos-resumo, .ped-cartao { break-inside: avoid; box-shadow: none; }
}
.ped-desc, .ped-cod { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .col-ped { display: none; } /* coluna "Pedidos" do resumo */
  .ped-mini { width: 52px; padding-right: 0; }
  .ped-mini .mini { width: 44px; height: 44px; }
  .pedidos-resumo, .ped-cartao { padding: 0.8rem; }
  .ped-topo { flex-direction: column; gap: 0.4rem; }
  .conta-menu { right: auto; left: 0; }
}

/* ---------- Carrinho no topo (orçamento na loja; carrinho na compra coletiva) ---------- */
.topo-carrinho { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--linha); background: var(--superficie); color: var(--tinta);
  border-radius: 999px; padding: 0.35rem 0.75rem 0.35rem 0.6rem; cursor: pointer; font-weight: 500; font-size: 0.92rem; white-space: nowrap; }
.topo-carrinho:hover { border-color: var(--suave); }
.topo-carrinho svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.topo-carrinho svg circle { fill: currentColor; stroke: none; }
.topo-carrinho .bolha { display: none; background: var(--destaque); color: var(--destaque-tinta); border-radius: 999px; padding: 0 0.45rem; font-size: 0.75rem; font-weight: 700; line-height: 1.35rem; min-width: 1.35rem; text-align: center; font-variant-numeric: tabular-nums; }
.topo-carrinho.tem .bolha { display: inline-block; }
.topo-carrinho.tem { border-color: var(--destaque); }
.topo-carrinho.pendente { box-shadow: 0 0 0 3px var(--alerta-fundo); }
.topo-carrinho.pulsa { animation: pulsa 0.45s ease; }
@media (prefers-reduced-motion: reduce) { .topo-carrinho.pulsa { animation: none; } }
@media (max-width: 640px) { .topo-carrinho-txt { display: none; } }
@media print { .topo-carrinho { display: none !important; } }

/* Orçamentos no painel: itens com imagem e ações na mesma altura */
.orc-itens { margin: 0.2rem 0 0.8rem; max-width: 760px; }
.orc-itens .item-aviso { display: block; }
.orc-acoes { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; }
.orc-acoes > select, .orc-acoes > .btn { height: 2.6rem; margin: 0; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
.orc-acoes > select { width: auto; min-width: 13rem; }

/* Etapas do pedido */
.selo.ok { background: #d9f2e6; color: #0d5c3a; }
.selo.fim { background: #dfe7f7; color: #1f3d7a; }
.orc-proximo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem; }
.orc-acoes > .orc-rastreio { width: 18rem; max-width: 100%; height: 2.6rem; }
.orc-tempo { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0; font-size: 0.82rem; }
.orc-tempo li { display: inline-flex; gap: 0.35rem; align-items: baseline; }
.orc-tempo li + li::before { content: "→"; color: var(--suave); margin: 0 0.45rem; }
.orc-tempo strong { font-weight: 600; }

.editor-linha { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; flex-wrap: wrap; }
.editor-linha > span:first-child { flex: 1 1 14rem; overflow-wrap: anywhere; }
.editor-linha input[type="number"] { width: 5rem; }
.editor-linha input[type="text"] { flex: 1 1 14rem; }
.editor-acoes { margin: 0.6rem 0 0.8rem; display: flex; gap: 0.5rem; }
.editor-acoes .btn { margin: 0; padding: 0.55rem 1.1rem; }
.btn.icone { padding: 0.25rem 0.55rem; font-size: 1rem; line-height: 1; margin: 0; }
.itens-cliente { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.itens-cliente > .editor { flex: 1; }
.editor-linha .btn { margin: 0; }

/* ---------- Administração: abas, tabelas zebradas, ações à vista ---------- */
.admin-abas { display: flex; gap: 0.15rem; overflow-x: auto; background: var(--superficie); border-bottom: 1px solid var(--linha); padding: 0 var(--margem); }
.aba-admin { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; padding: 0.85rem 1rem; background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; color: var(--suave); font-weight: 500; }
.aba-admin:hover { color: var(--tinta); background: var(--destaque-fraco); }
.aba-admin.atual { color: var(--tinta); font-weight: 600; border-bottom-color: var(--destaque); }
.aba-admin:last-child { margin-left: auto; }
.aba-admin .bolha { position: static; }
.barra-rodada { background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 0.7rem 0.9rem; }

table:not(.zebra) tbody tr:nth-child(even):not(.historico):not(.detalhe) td { background: #f5f8f7; }
table:not(.zebra) tbody tr:not(.historico):not(.detalhe):hover td { background: var(--destaque-fraco); }
table.zebra tbody.grupo-cliente:nth-of-type(even) td { background: #f5f8f7; }
table.zebra tbody.grupo-cliente:hover td { background: var(--destaque-fraco); }
table.zebra tbody.grupo-cliente td { border-bottom: 1px solid var(--linha); }
table.zebra tr.detalhe td { border-top: 0; }
th { background: var(--superficie); border-bottom: 2px solid var(--linha); }
.col-seta { width: 2rem; padding-right: 0; }
.seta { width: 1.8rem; height: 1.8rem; border: 0; background: none; cursor: pointer; border-radius: 4px; color: var(--suave); }
.seta:hover { background: var(--linha); }
.detalhe-cliente { white-space: normal; padding: 0.4rem 1rem 1rem 2.8rem; }
.detalhe-cliente ul { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.detalhe-cliente .contato { color: var(--suave); font-size: 0.88rem; margin-bottom: 0.4rem; overflow-wrap: anywhere; }
td.acoes { white-space: nowrap; text-align: right; }
.btn.acao { padding: 0.3rem 0.7rem; font-size: 0.85rem; margin: 0 0 0 0.35rem; }
.btn.acao:hover { background: var(--destaque-fraco); border-color: var(--destaque); }
.btn.perigo { color: var(--perigo); }
.btn.perigo:hover { background: #fdecea; border-color: var(--perigo); }
.vazio { padding: 0.8rem 0; }

/* Conferir com a fábrica */
.zona-pdf { display: block; text-align: center; padding: 1.6rem 1rem; border: 2px dashed var(--linha); border-radius: 10px; background: var(--superficie); cursor: pointer; }
.zona-pdf:hover, .zona-pdf.sobre, .zona-pdf:focus-visible { border-color: var(--destaque); background: var(--destaque-fraco); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin: 0.8rem 0; }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 0.7rem 0.9rem; display: grid; gap: 0.1rem; }
.cartao strong { font-size: 1.4rem; font-family: var(--f-titulo); }
.cartao span { color: var(--suave); font-size: 0.85rem; }
.cartao.largo { grid-column: 1 / -1; }
.cartao.largo strong { font-size: 1.1rem; }
.cartao.sit-faltou { border-color: #e3a29d; background: #fdecea; }
.cartao.sit-menos { border-color: #e8c97a; background: var(--alerta-fundo); }
.cartao.sit-mais { border-color: #9fc3e6; background: #e8f2fc; }
.cartao.sit-extra { border-color: #c9b6e3; background: #f2ecfa; }
.cartao.sit-ok { border-color: #a7d3c8; background: var(--destaque-fraco); }
.selo-conf { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.1rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.selo-conf.sit-faltou { background: #fdecea; color: var(--perigo); }
.selo-conf.sit-menos { background: var(--alerta-fundo); color: var(--alerta-tinta); }
.selo-conf.sit-mais { background: #e8f2fc; color: #1d4f80; }
.selo-conf.sit-extra { background: #f2ecfa; color: #52318a; }
.selo-conf.sit-ok { background: var(--destaque-fraco); color: var(--destaque); }
td.neg { color: var(--perigo); font-weight: 600; }
td.preco-difere { color: var(--alerta-tinta); font-weight: 600; }
.chip-cliente { margin: 0.1rem 0.3rem 0.1rem 0; padding: 0.15rem 0.6rem; border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie); cursor: pointer; font-size: 0.82rem; }
.chip-cliente:hover { border-color: var(--destaque); background: var(--destaque-fraco); }

/* Valores */
.item-preco { margin-right: auto; font-family: var(--f-titulo); font-weight: 600; font-variant-numeric: tabular-nums; }
.carrinho-valores { margin: 0.6rem 0 0; display: grid; gap: 0.25rem; font-size: 0.92rem; }
.carrinho-valores > div { display: flex; justify-content: space-between; gap: 1rem; }
.carrinho-valores dt { color: var(--suave); }
.carrinho-valores dd { margin: 0; font-variant-numeric: tabular-nums; }
.carrinho-valores .total { border-top: 1px solid var(--linha); padding-top: 0.35rem; font-weight: 700; }
.carrinho-valores .total dt { color: var(--tinta); }
.carrinho-valores p { margin-top: 0.3rem; }
.ped-valores { margin: 0.7rem 0 0.2rem; max-width: 22rem; }
.custos-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem 0.8rem; align-items: end; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 0.8rem 0.9rem; }
.custos-form label { display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--suave); }

/* ---------- Layout fluido: cards soltos, estilo dashboard ---------- */
.admin-abas { background: var(--superficie); }
.admin-sub { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.7rem var(--margem) 0; }
.sub-aba { white-space: nowrap; padding: 0.4rem 0.9rem; border: 1px solid var(--linha); border-radius: 999px; background: var(--superficie); cursor: pointer; font-size: 0.9rem; color: var(--suave); }
.sub-aba:hover { border-color: var(--destaque); color: var(--tinta); }
.sub-aba.atual { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-tinta); font-weight: 600; }
#vista-painel, #vista-produtos, #vista-disp, #vista-grupos { gap: 1.1rem; }
#vista-painel > section, #vista-produtos > section, #vista-disp > section, #vista-grupos > section, .barra-rodada, .dash > .card {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 1.1rem 1.25rem; box-shadow: 0 1px 2px rgba(19, 32, 28, 0.04), 0 6px 18px rgba(19, 32, 28, 0.05);
}
#vista-painel > section .tabela-rolagem, #vista-produtos > section .tabela-rolagem { border-radius: 10px; }
.barra-rodada { padding: 0.7rem 1.1rem; }
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.1rem; }
.dash > .kpis { grid-column: 1 / -1; order: 2; }
.dash > .card-meta { order: 1; grid-column: span 1; }
.dash > .card-tarefas { order: 1; }
.card-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.meta-num { margin: 0.2rem 0 0.7rem; color: var(--suave); }
.meta-num strong { font-family: var(--f-titulo); font-size: 2rem; color: var(--tinta); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.1rem; }
.kpi { display: grid; gap: 0.2rem; text-align: left; padding: 1rem 1.2rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 1px 2px rgba(19, 32, 28, 0.04), 0 6px 18px rgba(19, 32, 28, 0.05); font: inherit; color: inherit; }
button.kpi { cursor: pointer; }
button.kpi:hover { border-color: var(--destaque); transform: translateY(-1px); }
.kpi-rot { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--suave); font-weight: 600; }
.kpi strong { font-family: var(--f-titulo); font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--suave); }
.kpi.atencao { background: var(--alerta-fundo); border-color: #e8c97a; }
.tarefas { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.link-tarefa { width: 100%; text-align: left; padding: 0.6rem 0.8rem; border: 1px solid var(--linha); border-radius: 8px; background: var(--fundo); cursor: pointer; font: inherit; }
.link-tarefa:hover { border-color: var(--destaque); background: var(--destaque-fraco); }
.dash { grid-template-columns: 1fr; }
@media (min-width: 56rem) { .dash { grid-template-columns: 1fr 1fr; } }

/* ---------- Celular ---------- */
.painel { grid-template-columns: minmax(0, 1fr); }
.dash { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.painel > * { min-width: 0; }
.admin-abas, .admin-sub { scrollbar-width: none; }
.admin-abas::-webkit-scrollbar, .admin-sub::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .topo-nav { gap: 0.4rem 0.8rem; }
  .topo-nav .link { font-size: 0.9rem; }
  #nav-pedidos, .conta-primeiro { display: none; } /* Meus pedidos continua no menu da conta */
  .barra-rodada select, .barra-rodada .curto { width: 100%; }
  .barra-rodada .espaco { display: none; }
  .barra-rodada .btn { flex: 1 1 auto; }
  #vista-painel > section, .barra-rodada, .dash > .card, .kpi { padding: 0.9rem; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .kpi strong { font-size: 1.3rem; }
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secao-titulo .grupo { width: 100%; }
  .secao-titulo .grupo .btn { flex: 1 1 auto; text-align: center; }

  /* tabelas de clientes e orçamentos viram linhas empilhadas, com os botões numa fila só deles */
  table.zebra { display: block; }
  table.zebra thead { display: none; }
  table.zebra tbody.grupo-cliente { display: block; border-bottom: 1px solid var(--linha); }
  table.zebra tbody.grupo-cliente:nth-of-type(even) { background: #f5f8f7; }
  table.zebra tbody.grupo-cliente td, table.zebra tbody.grupo-cliente:nth-of-type(even) td { background: none; border: 0; padding: 0; }
  table.zebra tr.linha-cliente { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; padding: 0.7rem 0.6rem; }
  table.zebra tr.linha-cliente td.acoes { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-start; }
  table.zebra tr.linha-cliente td.acoes .btn { margin: 0; flex: 1 1 auto; text-align: center; padding: 0.5rem 0.7rem; }
  table.zebra tr.detalhe, table.zebra tr.detalhe td { display: block; }
  .detalhe-cliente { padding: 0.2rem 0.8rem 0.9rem; }
  #tab-clientes td:nth-child(2), #tab-orcamentos td:nth-child(3) { flex: 1 1 0; min-width: 0; }
  #tab-clientes td:nth-child(3), #tab-clientes td:nth-child(4), #tab-clientes td:nth-child(7) { display: none; }
  #tab-orcamentos td:nth-child(4), #tab-orcamentos td:nth-child(5) { display: none; }
  .editor-linha { align-items: stretch; }
  .editor-linha input[type="text"] { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .topo-nav { gap: 0.4rem 0.6rem; }
  .topo-nav .link { font-size: 0.85rem; }
  #tab-produtos th:nth-child(2), #tab-produtos td:nth-child(2) { display: none; } /* fabricante: aparece em Detalhes */
}
@media (max-width: 640px) {
  .topo .conta { position: absolute; top: 0.55rem; right: var(--margem); } /* avatar na linha da marca; sobra uma linha só de links */
  .topo-marca { padding-right: 4.5rem; }
}
.contato-form label.interruptor { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; font-size: 0.92rem; padding: 0.3rem 0; }
.contato-form label.interruptor input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; }

/* ---------- Fotos: lista estreita | foto grande | envio e miniaturas ---------- */
.fotos-vista { grid-template-columns: 17rem minmax(0, 1fr) 21rem; align-items: start; gap: 1.1rem; }
.fotos-lista, .fotos-palco, .fotos-envio { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 1rem; box-shadow: 0 1px 2px rgba(19, 32, 28, 0.04), 0 6px 18px rgba(19, 32, 28, 0.05); }
.fotos-lista { top: calc(var(--topo-alt, 4rem) + 1rem); }
#fotos-itens { max-height: calc(100vh - 19rem); border: 0; border-radius: 8px; }
.fotos-palco { display: grid; gap: 0.8rem; min-width: 0; }
.fotos-nome h2 { font-size: 1.3rem; }
.fotos-grande { display: grid; place-items: center; height: clamp(22rem, calc(100vh - 17rem), 58rem); background: #fff; border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.fotos-grande img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.fotos-vazio { display: grid; justify-items: center; gap: 0.3rem; text-align: center; }
.fotos-vazio .ponto { width: 4rem; height: 4rem; }
.fotos-envio { display: grid; gap: 0.7rem; align-content: start; min-width: 0; }
.fotos-envio .fotos-zona { padding: 1rem 0.8rem; gap: 0.4rem; }
.fotos-envio .fotos-zona strong { font-size: 1rem; }
.fotos-envio .fotos-zona p { font-size: 0.9rem; }
.fotos-envio .fotos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.fotos-mini[aria-current="true"] { border-color: var(--destaque); box-shadow: 0 0 0 2px var(--destaque); }
.fotos-mini-img { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
@media (max-width: 1200px) { .fotos-vista { grid-template-columns: 15rem minmax(0, 1fr); } .fotos-envio { grid-column: 1 / -1; } .fotos-envio .fotos-grade { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); } }
@media (max-width: 900px) { .fotos-vista { grid-template-columns: minmax(0, 1fr); } .fotos-grande { height: min(70vw, 28rem); min-height: 16rem; } }
@media (max-width: 900px) { #fotos-itens { max-height: 14rem; } .fotos-lista { position: static; } }

/* ---------- Painel: coluna da esquerda (rodada + subabas na vertical) e conteúdo à direita ---------- */
#vista-painel.painel-lateral { grid-template-columns: 17.5rem minmax(0, 1fr); align-items: start; gap: 1.1rem; }
.painel-lado { display: grid; gap: 1.1rem; position: sticky; top: calc(var(--topo-alt, 4rem) + 1rem); }
.painel-conteudo { display: grid; gap: 1.1rem; min-width: 0; }
.painel-conteudo > section {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 1.1rem 1.25rem; box-shadow: 0 1px 2px rgba(19, 32, 28, 0.04), 0 6px 18px rgba(19, 32, 28, 0.05);
}
.painel-conteudo > section .tabela-rolagem { border-radius: 10px; }
/* card da rodada em pé */
.painel-lado .barra-rodada { display: grid; gap: 0.55rem; padding: 1rem; align-items: stretch; }
.painel-lado .barra-rodada select, .painel-lado .barra-rodada input { width: 100%; }
.painel-lado .barra-rodada .espaco { display: none; }
.painel-lado .barra-rodada .pilula { justify-self: start; }
.painel-lado .barra-rodada label { margin-top: 0.2rem; font-size: 0.85rem; }
.painel-lado .barra-rodada .btn { width: 100%; }
.painel-conteudo > .admin-sub { padding: 0; }
@media (max-width: 900px) {
  #vista-painel.painel-lateral { grid-template-columns: minmax(0, 1fr); }
  .painel-lado { position: static; }
  .painel-lado .barra-rodada .btn { width: auto; flex: 1 1 auto; }
}
.pedidos-tabela td:nth-child(2) { min-width: 11rem; }
.pedidos-tabela td.num, .pedidos-tabela th.num { white-space: nowrap; }

/* ---------- Administração: contextos viram barra lateral (telas largas); subabas ficam dentro de cada página ---------- */
@media (min-width: 901px) {
  .admin-abas { position: fixed; z-index: 4; left: 0; top: var(--topo-alt, 4rem); bottom: 0; width: 14rem; display: flex; flex-direction: column; gap: 0.2rem; overflow-x: hidden; overflow-y: auto; padding: 1.1rem 0.7rem; background: var(--superficie); border-right: 1px solid var(--linha); border-bottom: 0; }
  .admin-abas::before { content: "Administração"; display: block; padding: 0 0.9rem 0.6rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--suave); }
  .aba-admin { width: 100%; justify-content: space-between; padding: 0.7rem 0.9rem; border: 0; border-radius: 10px; font-size: 0.95rem; }
  .aba-admin.atual { background: var(--destaque-fraco); box-shadow: inset 3px 0 0 var(--destaque); }
  .aba-admin:last-child { margin-left: 0; margin-top: auto; } /* Configurações no rodapé da barra */
  body.admin-ativo #admin-sub, body.admin-ativo .painel:not(.pedidos-vista) { margin-left: 14rem; }
  body.admin-ativo .painel > .admin-sub, body.admin-ativo #vista-painel .painel-conteudo > .admin-sub { margin-left: 0; }
}

/* Visão geral: card da rodada em pé à esquerda, cards do dashboard à direita */
.visao { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.visao .barra-rodada { display: grid; gap: 0.55rem; padding: 1rem; align-items: stretch; }
.visao .barra-rodada select, .visao .barra-rodada input { width: 100%; }
.visao .barra-rodada .espaco { display: none; }
.visao .barra-rodada .pilula { justify-self: start; }
.visao .barra-rodada label { margin-top: 0.2rem; font-size: 0.85rem; }
.visao .barra-rodada .btn { width: 100%; }
@media (max-width: 900px) { .visao { grid-template-columns: minmax(0, 1fr); } .visao .barra-rodada .btn { width: auto; flex: 1 1 auto; } }

/* o conteúdo do Painel nunca passa da largura da janela: tabelas largas rolam dentro do card */
.painel-conteudo { grid-template-columns: minmax(0, 1fr); }
.painel-conteudo > * { min-width: 0; }

/* Preços e taxas, preço da loja */
.precos-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem 1rem; align-items: start; }
.precos-form label { display: grid; gap: 0.2rem; font-weight: 500; font-size: 0.9rem; }
.precos-form label small { color: var(--suave); font-weight: 400; font-size: 0.8rem; }
.precos-form .exemplo { grid-column: 1 / -1; background: var(--destaque-fraco); border-radius: 8px; padding: 0.7rem 0.9rem; color: var(--tinta); font-size: 0.9rem; }
.precos-form .btn { justify-self: start; }
.campo-preco { width: 7.5rem; text-align: right; }
.item-preco.sob-consulta { font-family: var(--f-texto); font-weight: 500; font-size: 0.85rem; color: var(--suave); }
.orc-total { margin: 0.4rem 0 0.8rem; }