/* ==========================================================================
   InjeRubber — identidade visual do site
   Cores e fontes conforme ESPECIFICACAO_PARA_O_CODE.md (seção 3). Não alterar
   os valores das cores sem combinar antes.
   ========================================================================== */

:root {
  --red: #C10A2E;
  --red-dark: #8A0A22;
  --ink: #1D1D1F;
  --graphite: #5B5C60;
  --paper: #F7F5F2;
  --paper-2: #F0EDE8;
  --line: #E3DFD8;
  --green: #2F7A4A;
  --amber: #B9791A;
  --blue: #1D5FBF;

  --surface: #FFFFFF;
  --texto: var(--ink);
  --texto-suave: var(--graphite);
  --soft-green: #E8F4EC;
  --soft-amber: #FBF1E0;
  --soft-red: #FBE9ED;
  --soft-blue: #E7EFFB;

  --raio: 14px;
  --pilula: 999px;
  --escala: 1;

  --display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --corpo: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
}

/* Modo noturno — ativado por data-tema="escuro" no <html> */
[data-tema="escuro"] {
  --paper: #141416;
  --paper-2: #1C1C1F;
  --surface: #1F1F23;
  --line: #33333A;
  --texto: #F2F1EF;
  --texto-suave: #A9A8A5;
  --soft-green: #17301F;
  --soft-amber: #322510;
  --soft-red: #331219;
  --soft-blue: #131F33;
}

* { box-sizing: border-box; }

html { font-size: calc(16px * var(--escala)); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 1rem;      /* nunca abaixo de 14px — público de idade avançada */
  line-height: 1.6;
}

h1, h2, h3, .display {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0 0 .5em;
  line-height: 1.2;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

a { color: var(--red-dark); }
.mono { font-family: var(--mono); }
.suave { color: var(--texto-suave); }
.pequeno { font-size: .875rem; }
.centro { text-align: center; }
.negrito { font-weight: 700; }

/* ---------- estrutura ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.estreito { max-width: 480px; margin: 40px auto; padding: 0 16px; }
.medio { max-width: 640px; margin: 32px auto; padding: 0 16px; }
.conteudo { padding: 28px 0 60px; }
/* Página que abre com banner de ponta a ponta: a imagem encosta na navegação. */
.conteudo.sem-folga-topo { padding-top: 0; }
/*
 | ...mas o que vem DEPOIS da peca de ponta a ponta precisa respirar. Antes
 | essa folga era um estilo solto na busca do catalogo, ligado a existir
 | BANNER DE IMAGEM. Quando a arte foi trocada pela faixa-banner, a conta deu
 | zero e a busca grudou nela. Aqui a regra olha a peca de ponta a ponta,
 | seja ela banner ou faixa, e vale para todas as paginas.
 */
.vitrine + .container,
.faixas-banner + .container { margin-top: 28px; }

/* ---------- cabeçalho ---------- */
.topbar {
  background: var(--ink);
  color: #D8D7D5;
  font-size: .72rem;
}
.topbar .container {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px;
}
.topbar .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.selo-cnpj {
  background: var(--red); color: #fff; padding: 2px 8px;
  border-radius: 4px; font-weight: 600; letter-spacing: .04em;
}
.btn-tema {
  background: rgba(255,255,255,.12); color: #fff; border: 0;
  padding: 4px 12px; border-radius: var(--pilula);
  font: inherit; font-weight: 600; cursor: pointer;
}
.escala-fonte { display: flex; gap: 3px; }
.escala-fonte button {
  background: rgba(255,255,255,.12); color: #D8D7D5; border: 0;
  min-width: 30px; min-height: 24px; border-radius: 4px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.escala-fonte button[aria-pressed="true"] { background: #fff; color: var(--ink); }

.barra-principal { background: var(--surface); border-bottom: 1px solid var(--line); }
.barra-principal .container {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px;
}
/*
 | O "width: auto" NAO e enfeite: e o que impede o logo de esticar.
 |
 | A imagem declara a medida real do arquivo (537x160) para o navegador
 | reservar o espaco certo e a pagina nao saltar. Com so a altura no CSS, ele
 | combina os 537 do atributo com os 46 daqui e ACHATA o logo. O "auto" manda
 | calcular a largura pela proporcao.
 */
.barra-principal .logo img { height: 46px; width: auto; display: block; }
/* No modo noturno entra a versão branca do logo */
.barra-principal .logo .logo-branco { display: none; }
[data-tema="escuro"] .barra-principal .logo .logo-colorido { display: none; }
[data-tema="escuro"] .barra-principal .logo .logo-branco { display: block; }
.barra-principal .acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* selo de InjeCoins */
.selo-coins {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--pilula);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--amber); font-weight: 700; font-size: .85rem; text-decoration: none;
}
.selo-coins:hover { border-color: var(--amber); }

/* ---------- menu da conta (canto superior direito) ---------- */
.menu-conta { position: relative; }

.menu-conta-botao {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: var(--pilula);
  background: var(--surface); border: 1px solid var(--line);
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--texto);
  cursor: pointer;
}
.menu-conta.aberto .menu-conta-botao,
.menu-conta-botao:hover { border-color: var(--red); }

.menu-conta-inicial {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: .72rem; font-weight: 700;
}
.menu-conta-nome {
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.menu-conta-lista {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  min-width: 268px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio); box-shadow: 0 12px 34px rgba(0,0,0,.16);
}
.menu-conta-cabecalho {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.menu-conta-lista a,
.menu-conta-sair {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; border-radius: 8px;
  background: none; border: 0; text-align: left;
  font: inherit; font-size: .9rem; color: var(--texto);
  text-decoration: none; cursor: pointer;
}
.menu-conta-lista a:hover { background: var(--paper-2); }
.menu-conta-sair {
  color: var(--red); font-weight: 600;
  border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 6px;
}
.menu-conta-sair:hover { background: var(--soft-red); }

/* ---------- avisinhos flutuantes ---------- */
.avisinhos {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; width: min(92vw, 420px);
}
.avisinho {
  padding: 14px 20px; border-radius: var(--raio);
  color: #fff; font-weight: 600; font-size: .95rem; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  animation: avisinho-entra .18s ease-out;
}
.avisinho-ok { background: var(--green); }
.avisinho-erro { background: var(--red); }
.avisinho.saindo { opacity: 0; transition: opacity .45s; }
@keyframes avisinho-entra {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: none; }
}

.nav-site { background: var(--surface); border-bottom: 1px solid var(--line); }
.nav-site .container { display: flex; gap: 2px; flex-wrap: wrap; }
.nav-site a {
  padding: 13px 16px; font-size: .85rem; font-weight: 600;
  color: var(--texto-suave); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav-site a:hover { color: var(--texto); }
.nav-site a.ativo { color: var(--texto); border-bottom-color: var(--red); }

/* ---------- rodapé ---------- */
.rodape {
  background: var(--ink); color: #C9C8C6;
  padding: 32px 0; font-size: .82rem; margin-top: 40px;
}
.rodape a { color: #fff; }

/* ---------- botões (formato pílula) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 22px;
  border-radius: var(--pilula); border: 1px solid transparent;
  font: inherit; font-size: .9rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.btn-principal { background: var(--red); color: #fff; }
.btn-principal:hover { background: var(--red-dark); }
.btn-secundario { background: var(--surface); color: var(--texto); border-color: var(--line); }
.btn-secundario:hover { border-color: var(--graphite); }
.btn-largo { width: 100%; }
.btn-pequeno { min-height: 38px; padding: 6px 16px; font-size: .8rem; }
.btn-verde { background: var(--green); color: #fff; }
.btn-perigo { background: var(--surface); color: var(--red); border-color: var(--red); }

/* ---------- cartões ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio); padding: 20px;
}
.card + .card { margin-top: 16px; }
.card-destaque { background: var(--red); color: #fff; border-color: var(--red); }
.card-destaque .suave { color: rgba(255,255,255,.85); }

.grade { display: grid; gap: 14px; }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grade-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- formulários ---------- */
.campo { display: block; margin-bottom: 16px; }
.campo > span { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 5px; }
.campo .dica { font-weight: 400; color: var(--texto-suave); font-size: .82rem; }
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="date"], input[type="number"],
/* `search` estava de fora, e campo de busca cai no visual cru do navegador:
   caixinha estreita, canto reto, sem a altura dos outros. */
input[type="search"], select, textarea {
  width: 100%; min-height: 50px; padding: 10px 14px;
  background: var(--surface); color: var(--texto);
  border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 1rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red);
}

/*
 | A alcinha do canto do campo de texto só estica para baixo.
 | Arrastando para o lado, o campo saía do cartão e quebrava a página.
 */
textarea {
  resize: vertical;
  max-width: 100%;
  min-height: 96px;
}
/* Ocupa a mesma altura do preço, para os cartões não ficarem desalinhados. */
.peca-sem-preco { margin: 0 0 8px; min-height: 1.6rem; display: flex; align-items: center; }

/* ---------- tarja de cadastro em análise ---------- */
.tarja-analise {
  background: var(--soft-amber); color: var(--amber);
  border-bottom: 1px solid rgba(185,121,26,.35);
  font-size: .84rem; line-height: 1.5;
}
.tarja-analise .container {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 10px; padding-bottom: 10px;
}
.tarja-analise a { color: var(--amber); font-weight: 700; white-space: nowrap; }

/* ---------- verificação em duas etapas ---------- */
.separador { margin: 20px 0; border: 0; border-top: 1px solid var(--line); }

/* Aplicativo ou e-mail — a escolha vem antes de qualquer instrução. */
.escolha-metodo {
  display: grid; gap: 12px; margin: 14px 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.escolha-metodo .metodo {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--raio);
  background: var(--surface); color: var(--texto); text-decoration: none;
}
.escolha-metodo .metodo:hover { border-color: var(--graphite); }
.escolha-metodo .metodo.ativo {
  border-color: var(--red); background: var(--soft-red);
  box-shadow: inset 0 0 0 1px var(--red);
}

/*
 | Bloco, e não inline-block: sendo inline, o QR entrava na mesma linha do
 | texto do passo e jogava a frase "aponte a câmera" para DEBAIXO do desenho —
 | a instrução aparecia depois da coisa que ela manda fazer.
 */
.qr-code {
  display: block; width: fit-content; margin: 12px 0; padding: 12px;
  background: #fff;                       /* o leitor precisa de fundo branco,
                                             mesmo com o site em modo noturno */
  border: 1px solid var(--line); border-radius: var(--raio);
}
.qr-code svg { display: block; width: 220px; height: 220px; }

.chave-2fa {
  display: inline-block; margin: 4px 0 0; padding: 8px 12px;
  background: var(--paper-2); border-radius: 8px;
  font-size: 1rem; letter-spacing: .08em; user-select: all;
}

.passos-2fa { margin: 16px 0 0; padding-left: 20px; }
.passos-2fa li { margin-bottom: 16px; line-height: 1.6; }

.campo-codigo {
  max-width: 200px; font-size: 1.3rem; letter-spacing: .28em; text-align: center;
}

/* Botões lado a lado, quebrando de linha no celular. */
.linha-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Senha + botão lado a lado, para as ações que pedem confirmação. */
.linha-senha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.linha-senha input { width: auto; flex: 1 1 200px; min-height: 46px; }

.codigos-socorro {
  display: grid; gap: 8px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.codigos-socorro span {
  padding: 10px; text-align: center; user-select: all;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px;
  font-size: .95rem; letter-spacing: .06em;
}

/* ---------- medidor de força da senha ---------- */
.forca-senha { margin-top: 8px; }
.forca-senha[hidden] { display: none !important; }
.forca-barra {
  height: 6px; border-radius: var(--pilula);
  background: var(--paper-2); overflow: hidden;
}
.forca-barra span {
  display: block; height: 100%; width: 0;
  border-radius: var(--pilula); transition: width .18s ease, background .18s ease;
}
.forca-recado { margin: 6px 0 0; font-size: .78rem; color: var(--texto-suave); }

.forca-fraca .forca-barra span { background: var(--red); }
.forca-media .forca-barra span { background: var(--amber); }
.forca-boa .forca-barra span,
.forca-otima .forca-barra span { background: var(--green); }
.forca-fraca .forca-recado { color: var(--red); }

.checkbox { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; font-size: .92rem; }
.checkbox input { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.erro-campo { color: var(--red); font-size: .84rem; font-weight: 600; margin-top: 4px; }
input.tem-erro, select.tem-erro { border-color: var(--red); }

/* ---------- avisos ---------- */
.aviso { border-radius: var(--raio); padding: 14px 18px; margin-bottom: 20px; font-size: .92rem; }
.aviso-verde { background: var(--soft-green); color: var(--green); font-weight: 600; }
.aviso-vermelho { background: var(--soft-red); color: var(--red); font-weight: 600; }
.aviso-ambar { background: var(--soft-amber); color: var(--amber); font-weight: 600; }
.aviso-neutro { background: var(--paper-2); color: var(--texto-suave); }

/* ---------- etiquetas de situação ---------- */
.etiqueta {
  display: inline-block; padding: 4px 12px; border-radius: var(--pilula);
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.etiqueta-aprovado { background: var(--soft-green); color: var(--green); }
.etiqueta-pendente { background: var(--soft-amber); color: var(--amber); }
.etiqueta-bloqueado { background: var(--soft-red); color: var(--red); }

/* ---------- passos do cadastro ---------- */
.passos { display: flex; gap: 6px; margin-bottom: 22px; }
.passos div { flex: 1; height: 10px; border-radius: var(--pilula); background: var(--line); }
.passos div.feito { background: var(--red-dark); }

/* ---------- tabelas ---------- */
.tabela-rolagem { overflow-x: auto; }
table.dados { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 560px; }
table.dados th, table.dados td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
table.dados th {
  color: var(--texto-suave); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}

/* ==========================================================================
   Editor de fotos do produto (miniaturas arrastáveis, estilo marketplace)
   ========================================================================== */
.fotos-editor { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }

.foto-cartao {
  position: relative;
  width: 118px; height: 118px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; overflow: hidden; cursor: grab;
  flex-shrink: 0;
}
.foto-cartao img { width: 100%; height: 100%; object-fit: contain; display: block; }
.foto-cartao:active { cursor: grabbing; }
.foto-cartao.arrastando { opacity: .35; }
.foto-cartao.alvo { outline: 2px dashed var(--red); outline-offset: 2px; }

/* etiqueta preta da capa, igual à do marketplace */
.foto-capa-selo {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.82); color: #fff;
  font-size: .58rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; text-align: center; padding: 4px 3px;
}

/*
 | Controles espalhados pelas bordas para nenhum encostar no outro nem na
 | tarja da capa: pegador em cima à esquerda, lixeira em cima à direita e as
 | setas de mover no meio das laterais.
 */
.foto-acoes { position: absolute; inset: 0; pointer-events: none; }
.foto-acoes > * { pointer-events: auto; }

.foto-acoes button,
.foto-acoes .foto-punho {
  position: absolute;
  width: 21px; height: 21px; padding: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--ink);
  border: 1px solid var(--line); border-radius: 5px;
  font-size: 11px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .12s;
}
.foto-cartao:hover .foto-acoes button,
.foto-cartao:hover .foto-acoes .foto-punho,
.foto-cartao:focus-within .foto-acoes button { opacity: 1; }
@media (hover: none) {
  .foto-acoes button, .foto-acoes .foto-punho { opacity: 1; }
}

.foto-acoes .foto-punho { top: 4px; left: 4px; cursor: grab; }
.foto-acoes .foto-apagar { top: 4px; right: 4px; font-size: 12px; }
.foto-acoes .foto-esquerda { left: 4px; top: 50%; transform: translateY(-50%); border-radius: 50%; }
.foto-acoes .foto-direita { right: 4px; top: 50%; transform: translateY(-50%); border-radius: 50%; }

.foto-acoes button:hover { background: #fff; border-color: var(--graphite); }
.foto-acoes .foto-apagar:hover { color: var(--red); border-color: var(--red); }
.foto-acoes button[disabled] { display: none; }

/* quadrado tracejado de adicionar */
.foto-adicionar {
  width: 118px; height: 118px; flex-shrink: 0;
  border: 2px dashed var(--red); border-radius: 10px;
  background: var(--surface); color: var(--red);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600;
}
.foto-adicionar:hover { background: var(--soft-red); }
.foto-adicionar span:first-child { font-size: 22px; line-height: 1; }
.foto-adicionar input { display: none; }

.fotos-contagem { font-size: .9rem; margin: 0 0 14px; }

/* lista de veículos em que a peça serve */
.veiculo-linha {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.veiculo-linha:first-child { border-top: 0; padding-top: 4px; }
.veiculo-linha .campo { margin-bottom: 10px; }
.veiculo-linha .veiculo-tirar { flex-shrink: 0; margin-top: 26px; }

@media (max-width: 560px) {
  .veiculo-linha { flex-direction: column; }
  .veiculo-linha .veiculo-tirar { margin-top: 0; align-self: flex-start; }
}

/* ---------- campo de escolher arquivo ---------- */
input[type="file"] {
  width: 100%; min-height: auto; padding: 9px 12px;
  background: var(--paper-2); color: var(--texto-suave);
  border: 1px dashed var(--line); border-radius: 10px;
  font: inherit; font-size: .82rem; cursor: pointer;
}
input[type="file"]:hover { border-color: var(--graphite); }
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 7px 15px;
  background: var(--surface); color: var(--texto);
  border: 1px solid var(--line); border-radius: var(--pilula);
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--red); color: var(--red); }

/* ---------- anexos do pedido (nota, XML, boletos) ---------- */
.rotulo-secao {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--texto-suave);
  margin: 20px 0 10px;
}

.anexos {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.anexo {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--raio);
  background: var(--surface);
}
.anexo-ok { border-color: var(--green); background: var(--soft-green); }

.anexo-cabecalho { display: flex; align-items: center; gap: 8px; }
.anexo-nome { font-weight: 700; font-size: .9rem; }
.anexo-marca {
  margin-left: auto; padding: 3px 10px; border-radius: var(--pilula);
  background: var(--paper-2); color: var(--texto-suave);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.anexo-ok .anexo-marca { background: var(--green); color: #fff; }

.anexo-ajuda { margin: 0; font-size: .8rem; color: var(--texto-suave); }

.anexo-atual { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .85rem; }
.anexo-atual a { font-weight: 600; color: var(--green); }
.anexo-tirar {
  margin-left: auto; padding: 0; background: none; border: 0;
  color: var(--red); font: inherit; font-size: .8rem; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

.anexo-ok input[type="file"] { background: rgba(255,255,255,.55); }
[data-tema="escuro"] .anexo-ok input[type="file"] { background: rgba(0,0,0,.2); }

.oculto { display: none; }

/* barra de ações que aparece ao marcar anúncios na lista */
.barra-selecao {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--raio); padding: 12px 16px; margin-bottom: 14px;
}
.barra-selecao-botoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   Catálogo: cartões de peça, galeria e ficha
   ========================================================================== */
/*
 | Cartões menores (protótipo aprovado): cabem 4 por fileira no computador,
 | 2 no celular. Antes eram 230px e ficavam grandes demais.
 */
.pecas-grade {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
}
@media (max-width: 620px) {
  .pecas-grade { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.peca-cartao {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio); overflow: hidden;
}
.peca-cartao:hover { border-color: var(--graphite); }

/*
 | Quadro sempre quadrado, fundo branco e a mesma folga em volta.
 | A foto entra inteira (object-fit: contain) e centralizada — assim uma peça
 | fotografada "deitada" ocupa o mesmo espaço de uma fotografada de frente,
 | e a fileira de cartões fica alinhada.
 */
.peca-foto {
  position: relative; display: block;
  aspect-ratio: 1; background: #fff;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  /*
   | Sem estes dois, uma foto mais alta que larga "empurra" o quadro e ele
   | deixa de ser quadrado — era o que desalinhava a fileira de cartões.
   */
  flex: none;
  min-height: 0;
  overflow: hidden;
}
.peca-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.peca-sem-foto {
  display: grid; place-items: center; height: 100%;
  font-size: 42px; opacity: .35;
}
.peca-selos {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; gap: 5px; flex-wrap: wrap; pointer-events: none;
}

/* carrossel dentro do cartão */
.peca-slide {
  position: absolute; inset: 14px;
  display: none; place-items: center;
}
.peca-slide.ativo { display: grid; }
.peca-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }

.peca-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--ink);
  border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer; font-size: 15px; line-height: 1; z-index: 2;
  opacity: 0; transition: opacity .12s;
}
.peca-cartao:hover .peca-seta, .peca-foto:focus-within .peca-seta { opacity: 1; }
@media (hover: none) { .peca-seta { opacity: 1; } }
.peca-seta-esq { left: 6px; }
.peca-seta-dir { right: 6px; }
.peca-seta:hover { background: #fff; border-color: var(--graphite); }

.peca-pontos {
  position: absolute; bottom: 8px; left: 0; right: 0; z-index: 2;
  display: flex; gap: 4px; justify-content: center; pointer-events: none;
}
.peca-pontos span {
  width: 14px; height: 3px; border-radius: 2px; background: var(--line);
}
.peca-pontos span.ativo { background: var(--red); }

/* contador − / + */
/*
 | Contador − 1 + da quantidade.
 |
 | Era uma caixa retangular com dois quadrados cinza e traços separando tudo:
 | parecia célula de planilha. Agora é uma pílula, no mesmo formato dos botões
 | do site, com os sinais em botões redondos que acendem de vermelho ao passar
 | o mouse e afundam ao clicar. O número é o herói do conjunto.
 */
.contagem {
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--pilula);
}
.contagem button {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: var(--surface); color: var(--texto);
  border: 1px solid var(--line); border-radius: 50%;
  font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.contagem button:hover {
  background: var(--red); color: #fff; border-color: var(--red);
}
.contagem button:active { transform: scale(.9); }
.contagem button:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}

/* No mínimo da caixa o "−" não faz nada: mostrar isso evita o clique à toa. */
.contagem button.no-limite {
  opacity: .38; cursor: not-allowed;
}
.contagem button.no-limite:hover {
  background: var(--surface); color: var(--texto); border-color: var(--line);
}

.contagem input {
  width: 100%; min-width: 44px; min-height: 34px; padding: 0 2px;
  background: transparent; border: 0; border-radius: 0;
  text-align: center; font-weight: 700; font-size: 1.02rem;
  font-family: var(--mono, inherit);
}
.contagem input:focus { outline: 0; }

/* A pílula inteira acende quando o campo recebe o foco pelo teclado. */
.contagem:focus-within { border-color: var(--red); }

.contagem input::-webkit-outer-spin-button,
.contagem input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.contagem input { -moz-appearance: textfield; }

.peca-compra { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* compra na página da peça: contador maior, ao lado do botão */
.peca-compra-grande {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 18px;
}
.peca-compra-grande .btn { flex: 1; min-width: 200px; }
.rotulo-quantidade {
  display: block; font-weight: 700; font-size: .9rem; margin-bottom: 5px;
}
.contagem-grande { width: 150px; }
.contagem-grande button { width: 44px; font-size: 20px; }
.contagem-grande input { min-height: 50px; font-size: 1.05rem; }
.peca-unidade { font-size: .72rem; font-weight: 400; color: var(--texto-suave); margin-left: 3px; }

.contador.pulsa { animation: contador-pulsa .45s ease-out; }
@keyframes contador-pulsa {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.peca-corpo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.peca-titulo { font-family: var(--corpo); text-transform: none; font-size: .85rem;
               font-weight: 600; line-height: 1.3; margin: 0; }
.peca-titulo a { color: var(--texto); text-decoration: none; }
.peca-titulo a:hover { text-decoration: underline; }
.peca-aplicacao { margin: 0; }
.peca-preco { margin-top: auto; padding-top: 8px; }
.peca-valor { font-size: 1.05rem; font-weight: 700; margin: 2px 0; }

.categoria-atalho { text-decoration: none; color: var(--texto); display: block; }
.categoria-atalho:hover { border-color: var(--red); }

/* ---------- página da peça ---------- */
.peca-detalhe {
  display: grid; gap: 22px; margin-top: 10px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .peca-detalhe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.galeria-principal {
  background: #fff; border: 1px solid var(--line); border-radius: var(--raio);
  aspect-ratio: 1; overflow: hidden; padding: 20px;
}
.galeria-principal img { width: 100%; height: 100%; object-fit: contain; display: block; }

.galeria-miniaturas { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.galeria-mini {
  width: 68px; height: 68px; padding: 3px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; overflow: hidden;
}
.galeria-mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.galeria-mini.ativa { border-color: var(--red); border-width: 2px; padding: 2px; }

/* ==========================================================================
   Carrinho e fechamento do pedido
   ========================================================================== */
.pedido-layout {
  display: grid; gap: 20px; margin-top: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  .pedido-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }

  /*
   | A coluna INTEIRA acompanha a rolagem, não só o primeiro cartão.
   | Fixando apenas o cartão de valores, o cartão de andamento passava por
   | baixo dele e os dois se sobrepunham.
   | O limite de altura evita que uma coluna alta fique com o fim inacessível.
   */
  .pedido-layout > aside {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
}
.pedido-layout .card:first-child { margin-top: 0; }

/* contador de peças no botão do cabeçalho */
.contador {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px; margin-left: 4px;
  background: #fff; color: var(--red);
  border-radius: var(--pilula); font-size: .75rem; font-weight: 700;
}

/* opção grande e clicável (endereço, pagamento, brinde) */
.escolha {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--raio);
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  font-size: .95rem;
}
.escolha:hover { border-color: var(--graphite); }
.escolha:has(input:checked) { border-color: var(--red); background: var(--soft-red); }
.escolha input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.escolha-bloqueada { opacity: .5; cursor: default; }

/* trilha das 4 etapas */
.checkout-passos {
  display: flex; gap: 8px; flex-wrap: wrap;
  list-style: none; margin: 0 0 20px; padding: 0;
}
.checkout-passos li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--pilula);
  background: var(--paper-2); color: var(--texto-suave);
  font-size: .85rem; font-weight: 600;
}
.checkout-passos .checkout-numero {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--line); color: var(--texto); font-size: .75rem;
}
.checkout-passos li.agora { background: var(--red); color: #fff; }
.checkout-passos li.agora .checkout-numero { background: rgba(255,255,255,.25); color: #fff; }
.checkout-passos li.feito { background: var(--soft-green); color: var(--green); }
.checkout-passos li.feito .checkout-numero { background: var(--green); color: #fff; }

/* ---------- números em destaque ---------- */
.numerao { font-family: var(--mono); font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.numerao-ambar { color: var(--amber); }
.numerao-verde { color: var(--green); }
.numerao-vermelho { color: var(--red); }

.linha-dados { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.linha-dados > span:first-child { color: var(--texto-suave); min-width: 170px; }
.linha-dados > span:last-child { font-weight: 600; }

/* ---------- janela de confirmação (substitui o confirm() do navegador) ----------
   O confirm() do navegador aparece cinza, fora da identidade e sem tradução.
   Esta janela usa as mesmas cores e fontes do resto do site. */
.confirmacao-fundo {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 20px;
  background: rgba(29,29,31,.55);
  animation: confirmacao-fundo-entra .14s ease-out;
}
.confirmacao-caixa {
  background: var(--surface); color: var(--texto);
  border: 1px solid var(--line); border-radius: var(--raio);
  width: min(94vw, 440px); padding: 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  animation: confirmacao-caixa-entra .18s ease-out;
}
.confirmacao-caixa h3 { margin-bottom: 10px; }
.confirmacao-texto { margin: 0 0 22px; font-size: .95rem; line-height: 1.55; }
.confirmacao-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.confirmacao-botoes .btn { flex: 1; min-width: 130px; }
@keyframes confirmacao-fundo-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirmacao-caixa-entra {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .confirmacao-fundo, .confirmacao-caixa { animation: none; }
}


/* ==========================================================================
   HOME — banner de ponta a ponta e faixas de destaque
   ========================================================================== */

/* ---------- carrossel do topo ----------
   Ocupa a largura inteira da tela, sem margem e sem cantos arredondados:
   é a primeira coisa que a pessoa vê ao abrir o site. */
.vitrine {
  position: relative;
  width: 100%;
  background: var(--paper-2);
  overflow: hidden;
}
.vitrine-trilho {
  align-items: center;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.vitrine-trilho::-webkit-scrollbar { display: none; }

/*
 | O SITE OBEDECE A ARTE — nao o contrario.
 |
 | Antes o slide tinha um formato fixo (1600x420 no computador, 16/9 no
 | celular) e a imagem era aparada para caber nele (object-fit: cover). Duas
 | consequencias, as duas vistas no site no ar:
 |
 |   - no celular, a arte de 1600x420 forcada num quadro 16/9 perdia 53% da
 |     largura — 26% cortado de cada lado ("OFERTAS RELAMPAGO" virava "RTAS
 |     MPAGO");
 |   - no catalogo, a trava de 240px de altura cortava a arte em cima e
 |     embaixo, mesmo ela tendo exatamente a medida pedida (1400x300).
 |
 | Agora a altura vem da propria imagem. Qualquer arte, de qualquer tamanho,
 | aparece INTEIRA em qualquer aparelho — nao existe mais medida obrigatoria.
 | Arte mais alta ocupa mais espaco; arte mais larga vira uma tira fina. Quem
 | decide e o arquivo que a InjeRubber sobe, e isso e de proposito: assim da
 | para fazer um banner proprio de celular sem mexer em programa nenhum.
 |
 | Com varios banners de proporcoes diferentes, a faixa fica com a altura do
 | mais alto e os menores ficam centralizados (align-items no trilho) — nunca
 | cortados.
 */
.vitrine-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: block;
}
.vitrine-slide img {
  display: block; width: 100%; height: auto;
}

/* setas — só aparecem quando há mais de um banner */
.vitrine-seta {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer; z-index: 2;
  background: rgba(29,29,31,.55); color: #fff;
  font-size: 24px; line-height: 1;
  display: grid; place-items: center;
}
.vitrine-seta:hover { background: rgba(29,29,31,.8); }
.vitrine-seta-esq { left: 14px; }
.vitrine-seta-dir { right: 14px; }

.vitrine-pontos {
  position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2;
  display: flex; gap: 8px; justify-content: center;
}
.vitrine-pontos button {
  width: 10px; height: 10px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.85); background: transparent;
  cursor: pointer;
}
.vitrine-pontos button.ativo { background: #fff; }

@media (max-width: 620px) {
  .vitrine-seta { width: 36px; height: 36px; font-size: 20px; }
  .vitrine-seta-esq { left: 8px; }
  .vitrine-seta-dir { right: 8px; }
}

/* ---------- faixa de destaque (bloco preto com corte vermelho) ---------- */
.faixa {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  border-radius: var(--raio);
  padding: 36px 40px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.faixa + .faixa { margin-top: 16px; }

/* o corte diagonal vermelho da direita */
.faixa::after {
  content: ""; position: absolute;
  right: -6%; top: -30%; width: 40%; height: 160%;
  opacity: .9; pointer-events: none;
  background:
    linear-gradient(135deg, transparent 45%, rgba(193,10,46,.5) 45.5%,
                    rgba(193,10,46,.5) 46%, transparent 46.5%),
    var(--red);
  clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.faixa-conteudo {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 20px;
  max-width: 660px;
}
.faixa-imagem { width: 76px; height: 76px; object-fit: contain; flex: none; }

.faixa-selo {
  display: inline-block; background: var(--red); color: #fff;
  padding: 4px 12px; border-radius: var(--pilula);
  font-size: .69rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 10px;
}
.faixa-etiqueta {
  display: block; font-family: var(--mono);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: #FF6B85;
}
.faixa-titulo {
  font-family: var(--display); text-transform: uppercase;
  font-size: 1.35rem; line-height: 1.15; margin: 8px 0; color: #fff;
}
.faixa-texto { color: #C8C7C9; font-size: .875rem; line-height: 1.5; margin: 0; }
.faixa .btn { position: relative; z-index: 1; }

/* a caixinha opcional, tipo "VENCIMENTO / 30·60·90 / dias" */
.faixa-caixa {
  flex: none; width: 96px; text-align: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  overflow: hidden;
}
.faixa-caixa-titulo {
  display: block; background: var(--red); color: #fff;
  font-size: .6rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 4px 6px;
}
.faixa-caixa-valor {
  display: block; font-family: var(--mono); font-weight: 700;
  font-size: .82rem; padding: 8px 4px 2px;
}
.faixa-caixa-rodape { display: block; font-size: .68rem; color: #A9A8A5; padding-bottom: 8px; }

@media (max-width: 620px) {
  .faixa { padding: 24px 22px; }
  .faixa-titulo { font-size: 1.1rem; }
  .faixa-imagem { width: 56px; height: 56px; }
}

/* ---------- cartões compactos da home ----------
   Os três passos ("01 Cadastre sua loja") e os atalhos de categoria ficavam
   grandes demais e comiam a tela. Aqui eles são baixos e caem mais por fileira. */
.grade-passos { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.grade-passos .card { padding: 14px 16px; }
.grade-passos .card h3 { font-size: .82rem; margin-bottom: 4px; }
.grade-passos .card p { font-size: .8rem; margin: 0; line-height: 1.45; }

.grade-categorias { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
.grade-categorias .categoria-atalho { padding: 12px 14px; }
.grade-categorias .categoria-atalho h3 { font-size: .8rem; line-height: 1.25; }
.grade-categorias .categoria-atalho p { font-size: .72rem; }

@media (max-width: 620px) {
  .grade-categorias { grid-template-columns: repeat(2, 1fr); }
}

/* espaço em volta de um conjunto de faixas */
.faixas-bloco { margin-top: 28px; }

/*
 | A FAIXA USADA COMO BANNER — a alternativa de texto a uma arte em imagem.
 |
 | Imagem tem tamanho fixo e sempre briga com alguma tela: no celular a arte
 | larga era cortada pelas laterais, no monitor largo era cortada em cima e
 | embaixo. Texto se reorganiza sozinho, nunca corta, e ja e todo editavel
 | pelo painel — nao precisa de programador nem de arquivo com medida certa.
 |
 | Aqui ela encosta nas bordas da tela: sem cantos arredondados e sem folga
 | em cima, igual ao banner de imagem. O recuo lateral acompanha o container
 | (1200px) para o texto ficar alinhado com o resto da pagina em qualquer
 | monitor, em vez de grudar na borda num monitor largo.
 */
.faixas-banner { margin-top: 0; }

.faixa-banner {
  border-radius: 0;
  padding-top: 30px; padding-bottom: 30px;
  padding-left: max(24px, (100% - 1200px) / 2 + 16px);
  padding-right: max(24px, (100% - 1200px) / 2 + 16px);
}
.faixa-banner + .faixa-banner { margin-top: 0; }
.faixa-banner .faixa-titulo { font-size: 1.45rem; }

@media (max-width: 620px) {
  /*
   | No celular a faixa empilha (o flex-wrap ja faz isso) e o corte vermelho
   | da direita e recolhido: numa tela estreita ele passaria por cima do
   | texto em vez de enfeitar a borda.
   */
  /*
   | No celular a faixa-banner ocupava 305px — 37% da tela, so ela. Aqui vai
   | enxuta (217px, 27%), para o cliente ver PECA sem precisar rolar. O que
   | encolhe e a folga e o tamanho das letras, nao o conteudo: selo, caixinha,
   | titulo, texto e botao continuam todos na tela.
   |
   | O recuo da direita e maior que o da esquerda para o texto nao entrar
   | embaixo do corte vermelho.
   */
  .faixa-banner { padding: 16px 52px 16px 16px; gap: 12px; }
  .faixa-banner .faixa-conteudo { gap: 12px; }
  .faixa-banner .faixa-titulo { font-size: 1.05rem; margin: 5px 0 4px; }
  .faixa-banner .faixa-texto { font-size: .8rem; line-height: 1.4; }
  .faixa-banner .faixa-selo { margin-bottom: 6px; padding: 3px 9px; font-size: .62rem; }
  /*
   | A caixinha encolhe na LETRA, nao na largura: alargar ela roubava espaco
   | do texto e a faixa inteira crescia de volta (medido: 92px de caixa =
   | 235px de faixa). Assim "VENCIMENTO" e o numero cabem sem transbordar e
   | a faixa continua nos 217px.
   */
  .faixa-banner .faixa-caixa { width: 80px; }
  .faixa-banner .faixa-caixa-valor { font-size: .7rem; }
  .faixa-banner .faixa-caixa-titulo { font-size: .55rem; }
  .faixa-banner .btn { padding: 9px 14px; font-size: .8rem; }
  .faixa-banner::after { width: 46%; right: -30%; }
}

/* ==========================================================================
   PAINEL DE ADMINISTRAÇÃO — menu na lateral esquerda
   ========================================================================== */
.painel { display: flex; align-items: flex-start; min-height: calc(100vh - 71px); }

/*
 | O menu fica parado enquanto o conteúdo rola. Por isso a altura é a da tela
 | (e não a do conteúdo) e ele rola por dentro se a lista crescer.
 */
.painel-lateral {
  flex: none; width: 232px; align-self: flex-start;
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 18px 12px 24px;
  position: sticky; top: 0;
  height: calc(100vh - 71px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.painel-secao {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-suave);
  margin: 0 0 10px; padding: 0 12px;
}
.painel-lateral a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-size: .85rem; font-weight: 600; color: var(--texto-suave);
  text-decoration: none; border-left: 3px solid transparent;
}
.painel-lateral a:hover { background: var(--paper-2); color: var(--texto); }
.painel-lateral a.ativo {
  background: var(--soft-red); color: var(--red);
  border-left-color: var(--red);
}
.painel-icone { width: 18px; text-align: center; font-size: .95rem; flex: none; }
.painel-separador { height: 1px; background: var(--line); margin: 10px 12px; }
.painel-voltar { margin-top: auto; }

/*
 | O respiro das laterais. Sem ele o conteúdo encosta na barra de rolagem do
 | menu (que aparece assim que a lista de itens passa da altura da tela) e no
 | fim da janela do outro lado — o texto fica espremido contra duas bordas.
 */
.painel-conteudo { flex: 1; min-width: 0; padding: 24px 24px 60px; }

/*
 | O botão que abre o menu. Só existe em tela estreita: no computador o menu
 | está sempre à vista na lateral e o botão não faz falta.
 */
.painel-abrir { display: none; }

@media (max-width: 900px) {
  /*
   | Numa tela estreita o menu fica guardado atrás de um botão. Antes era uma
   | tira que rolava para o lado — quem não arrastasse não descobria metade
   | dos itens, e acertar o dedo num item pequeno era difícil.
   */
  .painel { display: block; }

  .painel-abrir {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 12px 16px; min-height: 56px;
    background: var(--surface); color: var(--texto);
    border: 0; border-bottom: 1px solid var(--line);
    font: inherit; text-align: left; cursor: pointer;
  }
  .painel-abrir-icone { font-size: 1.15rem; flex: none; }
  .painel-abrir-texto { display: flex; flex-direction: column; min-width: 0; }
  .painel-abrir-rotulo {
    font-size: .62rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--texto-suave);
  }
  .painel-abrir-tela {
    font-size: .95rem; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .painel-abrir-seta {
    margin-left: auto; flex: none; color: var(--texto-suave);
    transition: transform .15s ease;
  }
  .painel-abrir[aria-expanded="true"] .painel-abrir-seta { transform: rotate(180deg); }

  /* Fechado por padrão; a classe "aberto" vem do js/abrir-lista.js. */
  .painel-lateral { display: none; }
  .painel-lateral.aberto {
    display: flex; flex-direction: column;
    width: auto; position: static; height: auto; overflow: visible;
    gap: 2px; padding: 10px 12px 16px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .painel-secao { display: none; }
  .painel-lateral a {
    border-left: 0; border-radius: 8px;
    padding: 13px 12px; font-size: .92rem;
  }
  .painel-lateral a.ativo { border-left: 0; }
  .painel-voltar { margin-top: 6px; }
}

/* ---------- cartões de número do resumo ---------- */
.resumo-numeros {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ---------- relatórios de vendas ---------- */
table.dados td.direita, table.dados th.direita { text-align: right; }

.relatorio-filtro { margin-top: 18px; }

/* Os períodos prontos: um toque resolve o caso comum, sem digitar data. */
.relatorio-periodos { display: flex; flex-wrap: wrap; gap: 8px; }
.periodo-opcao {
  padding: 9px 14px; min-height: 40px;
  background: var(--surface); color: var(--texto-suave);
  border: 1px solid var(--line); border-radius: var(--pilula);
  font: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.periodo-opcao:hover { background: var(--paper-2); color: var(--texto); }
.periodo-opcao.ativo {
  background: var(--soft-red); color: var(--red); border-color: var(--red);
}

.relatorio-datas {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.relatorio-datas .campo { margin-bottom: 0; flex: 1 1 150px; }

.relatorio-base {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.relatorio-base .checkbox { margin-top: 8px; margin-bottom: 0; }

.relatorio-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.resumo-numero { padding: 18px 20px; }
.resumo-numero h3 {
  font-family: var(--corpo); text-transform: none; letter-spacing: 0;
  font-size: .78rem; font-weight: 600; color: var(--texto-suave); margin: 0 0 6px;
}
.resumo-numero .valor {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
  line-height: 1.15; color: var(--red);
}
.resumo-numero .valor-neutro { color: var(--texto); }
.resumo-numero .abaixo { font-size: .74rem; color: var(--texto-suave); margin: 6px 0 0; }

.resumo-duas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ---------- gráfico de barras (sem biblioteca) ---------- */
.grafico {
  display: flex; align-items: flex-end; gap: 3px;
  height: 170px; margin-top: 8px;
}
.grafico-barra { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.grafico-barra span {
  display: block; width: 100%; min-height: 2px;
  background: var(--red); border-radius: 3px 3px 0 0;
}
.grafico-barra:hover span { background: var(--red-dark); }
.grafico-legenda {
  display: flex; justify-content: space-between;
  font-size: .7rem; color: var(--texto-suave); margin-top: 8px;
}

/* ---------- lista de status ---------- */
.status-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--line);
}
.status-linha:first-child { border-top: 0; }
.status-linha .quanto { margin-left: auto; font-family: var(--mono); font-weight: 700; }

/* ---------- top 10 ---------- */
.top-linha {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: .82rem;
}
.top-linha:first-child { border-top: 0; }
.top-posicao { font-family: var(--mono); color: var(--red); font-weight: 700; width: 26px; flex: none; }
.top-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-qtd { font-family: var(--mono); font-weight: 700; flex: none; }

/* ---------- par de números lado a lado (InjeCoins) ---------- */
.par-numeros { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.par-numeros > div { border-radius: var(--raio); padding: 16px; }
.par-ambar { background: var(--soft-amber); }
.par-vermelho { background: var(--soft-red); }
.par-numeros .valor { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; }
.par-ambar .valor { color: var(--amber); }
.par-vermelho .valor { color: var(--red); }
.par-numeros h3 {
  font-family: var(--corpo); text-transform: none; letter-spacing: 0;
  font-size: .74rem; font-weight: 600; color: var(--texto-suave); margin: 0 0 6px;
}

/* ==========================================================================
   ADMIN — listas compactas e organizador visual
   ========================================================================== */

/* ---------- item que abre e fecha (lista de banners/faixas) ---------- */
.item-admin { border: 1px solid var(--line); border-radius: var(--raio); background: var(--surface); }
.item-admin + .item-admin { margin-top: 10px; }
.item-admin[open] { border-color: var(--graphite); }

.item-cabecalho {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
.item-cabecalho::-webkit-details-marker { display: none; }
.item-cabecalho:hover { background: var(--paper-2); }
.item-admin[open] .item-cabecalho { border-bottom: 1px solid var(--line); }

.item-miniatura {
  width: 84px; height: 34px; object-fit: cover; flex: none;
  border-radius: 6px; border: 1px solid var(--line); background: var(--paper-2);
}
.item-titulo { flex: 1; min-width: 0; }
.item-titulo b { display: block; font-size: .9rem; }
.item-titulo span { font-size: .74rem; color: var(--texto-suave); }
.item-abrir { font-size: .78rem; font-weight: 700; color: var(--red); flex: none; }
.item-admin[open] .item-abrir::after { content: " ▲"; }
.item-admin:not([open]) .item-abrir::after { content: " ▼"; }
.item-corpo { padding: 16px; }

/* ---------- organizador visual ---------- */
.organizador { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 280px; }
@media (max-width: 900px) { .organizador { grid-template-columns: 1fr; } }

.tela-falsa {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--raio); padding: 12px;
}
.bloco-fixo {
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: 8px; padding: 12px 14px; margin: 8px 0;
  font-size: .8rem; color: var(--texto-suave);
}
.bloco-fixo b { color: var(--texto); font-weight: 600; }
.bloco-banner { border-style: solid; border-color: var(--red); color: var(--red); }

.zona {
  border: 2px dashed var(--line); border-radius: 10px;
  padding: 10px; margin: 8px 0; min-height: 74px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.zona.recebendo { border-color: var(--red); background: var(--soft-red); }
.zona-nome {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-suave); margin-bottom: 8px;
}
.zona-vazia { font-size: .78rem; color: var(--texto-suave); font-style: italic; }

.arrastavel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
  cursor: grab; display: flex; align-items: center; gap: 10px;
}
.arrastavel:active { cursor: grabbing; }
.arrastavel.arrastando { opacity: .4; }
.arrastavel .pega { color: var(--texto-suave); font-size: 1rem; flex: none; }
.arrastavel .nome { flex: 1; min-width: 0; font-size: .82rem; font-weight: 600;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arrastavel .apagada { color: var(--texto-suave); font-weight: 400; }

.organizador-lado { position: sticky; top: 90px; align-self: start; }

/* ==========================================================================
   CHAT DE ATENDIMENTO — bolha no canto do site
   ========================================================================== */
.chat-bolha {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 20px; border: 0; border-radius: var(--pilula);
  background: var(--red); color: #fff; cursor: pointer;
  font: inherit; font-size: .9rem; font-weight: 700;
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
}
.chat-bolha:hover { background: var(--red-dark); }

/* No computador a bolha é o botão escrito; o ícone sozinho não aparece. */
.chat-bolha-icone { display: none; }

@media (max-width: 640px) {
  /*
   | No celular a bolha vira um círculo só com o ícone. Escrita por extenso
   | ela ocupava mais de metade da largura da tela e ficava por cima das peças
   | e dos textos — que era a reclamação.
   */
  .chat-bolha {
    width: 56px; height: 56px; padding: 0;
    justify-content: center; border-radius: 50%;
    right: 16px; bottom: 16px;
  }
  .chat-bolha-texto { display: none; }
  .chat-bolha-icone { display: block; font-size: 1.35rem; line-height: 1; }

  /* A bolinha de "online" vira um pontinho no canto do círculo. */
  .chat-bolha .ponto { position: absolute; top: 9px; right: 9px; }
  .chat-bolha .contador { position: absolute; top: -4px; right: -4px; }
}
.chat-bolha .ponto {
  width: 9px; height: 9px; border-radius: 50%; background: #7BD389; flex: none;
}
.chat-bolha .ponto.apagado { background: #C9C8C6; }
.chat-bolha .contador {
  min-width: 20px; height: 20px; border-radius: var(--pilula);
  background: #fff; color: var(--red);
  font-size: .72rem; font-weight: 700;
  display: grid; place-items: center; padding: 0 5px;
}

/* convite que aparece sozinho na primeira visita */
.chat-convite {
  position: fixed; right: 20px; bottom: 78px; z-index: 70;
  width: min(90vw, 280px); padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio); box-shadow: 0 12px 30px rgba(0,0,0,.18);
  font-size: .84rem;
}
.chat-convite .fechar {
  position: absolute; top: 6px; right: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--texto-suave); font-size: 1rem; line-height: 1;
}

/* janela do chat */
/*
 | A janela nunca passa da altura da tela: o cabeçalho e o rodapé (onde fica o
 | formulário) são fixos, e só a lista de mensagens rola.
 */
.chat-janela {
  position: fixed; right: 20px; bottom: 20px; z-index: 71;
  width: min(94vw, 360px);
  max-height: min(72vh, 560px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio); overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
@media (max-width: 520px) {
  .chat-janela { right: 10px; left: 10px; bottom: 10px; width: auto; max-height: 80vh; }
}
.chat-topo {
  background: var(--ink); color: #fff; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.chat-topo b { font-size: .92rem; }
.chat-topo .situacao { font-size: .72rem; color: #C9C8C6; display: block; }
.chat-topo .recolher, .chat-topo .fechar {
  background: none; border: 0; color: #fff; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px; flex: none;
  font-size: 1.15rem; line-height: 1;
}
.chat-topo .recolher { margin-left: auto; }
.chat-topo .recolher:hover, .chat-topo .fechar:hover { background: rgba(255,255,255,.16); }
/* Só a lista de mensagens rola. min-height:0 é o que impede o flex de esticar. */
.chat-corpo {
  flex: 1 1 auto; min-height: 0; max-height: 300px;
  overflow-y: auto; padding: 14px; background: var(--paper);
}
.chat-corpo[hidden] { display: none; }
.chat-recado {
  flex: none;
  background: var(--soft-amber); color: var(--amber);
  padding: 10px 14px; font-size: .78rem; line-height: 1.45;
  border-bottom: 1px solid var(--line);
}
.chat-recado-online { background: var(--soft-green); color: var(--green); }

.chat-msg { max-width: 82%; margin-bottom: 10px; }
.chat-msg .balao {
  padding: 9px 13px; border-radius: 12px; font-size: .85rem; line-height: 1.45;
  background: var(--surface); border: 1px solid var(--line);
  white-space: pre-wrap; word-wrap: break-word;
}
.chat-msg .quando { font-size: .68rem; color: var(--texto-suave); margin-top: 3px; }
.chat-msg-minha { margin-left: auto; }
.chat-msg-minha .balao { background: var(--red); color: #fff; border-color: var(--red); }
.chat-msg-minha .quando { text-align: right; }

.chat-rodape {
  flex: none; border-top: 1px solid var(--line); padding: 10px;
  background: var(--surface); max-height: 46vh; overflow-y: auto;
}
.chat-rodape textarea {
  width: 100%; resize: none; min-height: 44px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font: inherit; font-size: .85rem; background: var(--surface); color: var(--texto);
}
.chat-rodape .linha { display: flex; gap: 8px; margin-top: 8px; }
.chat-erro { color: var(--red); font-size: .76rem; margin: 6px 0 0; }

/* ---------- chat no painel ---------- */
.chat-admin { display: grid; gap: 16px; grid-template-columns: minmax(0,1fr) 300px; }
@media (max-width: 900px) { .chat-admin { grid-template-columns: 1fr; } }
.chat-historico {
  max-height: 460px; overflow-y: auto; padding: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--raio);
}
.painel-lateral .aviso-contador {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--pilula); background: var(--red); color: #fff;
  font-size: .68rem; font-weight: 700; display: grid; place-items: center;
}

/* recado do sistema no meio da conversa ("Fulano entrou no atendimento") */
.chat-sistema {
  text-align: center; font-size: .72rem; color: var(--texto-suave);
  margin: 10px 0; padding: 0 10px;
}
.chat-sistema span {
  background: var(--paper-2); border-radius: var(--pilula); padding: 4px 12px;
  display: inline-block;
}

/* ---------- sininho de notificações do cliente ---------- */
.sino { position: relative; }
.sino-botao {
  position: relative;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 1.05rem; cursor: pointer; color: var(--texto);
}
.sino-botao:hover { border-color: var(--red); }
.sino-contador {
  position: absolute; top: -3px; right: -3px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--pilula);
  background: var(--red); color: #fff; font-size: .66rem; font-weight: 700;
  display: grid; place-items: center; border: 2px solid var(--surface);
}
.sino-lista {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: min(92vw, 320px); padding: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio); box-shadow: 0 12px 34px rgba(0,0,0,.16);
}
.sino-lista h4 {
  font-family: var(--corpo); text-transform: none; letter-spacing: 0;
  font-size: .78rem; color: var(--texto-suave); margin: 4px 10px 8px;
}
.sino-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  text-decoration: none; color: var(--texto); font-size: .84rem;
}
.sino-item:hover { background: var(--paper-2); }
.sino-icone { flex: none; font-size: 1.05rem; line-height: 1.3; }
.sino-texto { flex: 1; min-width: 0; }
.sino-texto b { display: block; font-weight: 600; }
.sino-texto > span { display: block; font-size: .74rem; color: var(--texto-suave); }
.sino-rodape { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; }
.sino-vazio { padding: 14px 12px; font-size: .82rem; color: var(--texto-suave); }

/*
 | No celular a lista do sininho abria para FORA da tela.
 |
 | Ela e ancorada pela direita (right: 0) para nascer alinhada com o botao.
 | No computador o sininho fica no canto direito e sobra espaco a esquerda.
 | No celular ele fica na esquerda do cabecalho: medido num aparelho de 375px,
 | a lista de 320px ia de -182px a 138px — mais da metade invisivel.
 |
 | Aqui ela deixa de se ancorar no BOTAO e passa a se ancorar na PAGINA
 | (por isso o "position: static" no .sino, que desfaz o ponto de ancoragem),
 | ocupando a largura da tela com 12px de folga de cada lado.
 |
 | O "top: auto" mantem a lista logo abaixo do botao, e o "absolute" faz ela
 | ROLAR JUNTO. Com "fixed" ela ficaria presa na tela e descolaria do sininho
 | ao rolar a pagina, porque este cabecalho nao acompanha a rolagem.
 */
@media (max-width: 620px) {
  .sino { position: static; }
  .sino-lista {
    left: 12px; right: 12px; top: auto; width: auto; margin-top: 8px;
  }
}

/*
 | IMPORTANTE: "display: flex" nas regras acima vence o atributo hidden do HTML
 | (que só vale como display:none na folha padrão do navegador). Sem as linhas
 | abaixo, a janela do chat aparecia em toda página e o botão fechar não surtia
 | efeito nenhum. Vale para todo componente do chat que usa display próprio.
 */
.chat-bolha[hidden],
.chat-janela[hidden],
.chat-convite[hidden],
.chat-corpo[hidden],
.sino-lista[hidden],
.sino-contador[hidden],
.painel-lateral .aviso-contador[hidden],
.chat-bolha .contador[hidden] { display: none !important; }

/* outros caminhos de contato, no pé do chat */
.chat-outros {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--texto-suave);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.chat-outros a { font-weight: 600; }

/* Encerrar conversa e comecar outra, no pe da bolha do chat. */
.chat-acoes {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.chat-acoes button {
  flex: 1 1 auto; min-width: 120px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--texto-suave); font-size: .74rem; font-weight: 600;
}
.chat-acoes button:hover { border-color: var(--red); color: var(--texto); }
.chat-acoes[hidden] { display: none !important; }

/*
 | O ESPACO DA JANELA DO CHAT — quem cede lugar para quem.
 |
 | A conversa vinha com 28px de altura numa tela de 415px: menos de uma linha.
 | O rodape mandava (podia ocupar 46vh e nunca encolhia, com flex:none) e a
 | conversa era o unico que cedia — entao ela ia a zero. Os dois botoes de
 | encerrar/nova conversa pioraram o quadro.
 |
 | A regra passa a ser a inversa, e nesta ordem de prioridade:
 |
 |   1. escrever e enviar SEMPRE cabem  (min-height no rodape)
 |   2. a conversa tem um minimo garantido (min-height no corpo)
 |   3. o que sobra e o rodape, que encolhe e rola por dentro
 |
 | Medido: conversa de 28px -> 144px numa tela curta (480px), e de 118px ->
 | 240px num celular comum (812px). O botao Enviar continua visivel nos dois.
 */
.chat-janela { max-height: min(84vh, 640px); }

.chat-corpo {
  flex: 1 1 auto;
  min-height: min(240px, 30vh);
  max-height: none;
}

/* Encolhe, mas nunca abaixo do que escrever e enviar precisam. */
.chat-rodape {
  flex: 0 1 auto;
  max-height: none; min-height: 104px;
  padding: 8px 10px;
}
.chat-rodape textarea { min-height: 38px; }

.chat-acoes { margin-top: 8px; padding-top: 8px; gap: 6px; }
.chat-acoes button { padding: 5px 8px; font-size: .7rem; min-width: 0; }

.chat-outros { margin-top: 8px; padding-top: 8px; font-size: .7rem; }

/*
 | "Prefere outro caminho?" some assim que existe conversa: ele serve para
 | quem ainda esta decidindo como falar com a empresa, nao para quem ja esta
 | falando. Sao 27px que voltam para a conversa, e o WhatsApp continua no
 | rodape do site.
 */
.chat-corpo:not([hidden]) ~ .chat-rodape .chat-outros { display: none; }

/* ==========================================================================
   CARTÃO DE PEÇA — versão enxuta
   Substitui parte das regras acima (vem depois, então vence).
   Objetivo: cartão mais leve, preço em destaque e mais peças por fileira.
   ========================================================================== */
.pecas-grade {
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 12px;
}
@media (max-width: 620px) { .pecas-grade { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.peca-cartao {
  border-radius: 12px;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.peca-cartao:hover {
  border-color: var(--line);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  transform: translateY(-2px);
}

/* A foto ganha respiro e some a linha dura que cortava o cartão ao meio. */
.peca-foto { padding: 10px; border-bottom: 0; }

/* Selos menores, para não roubarem a cena da peça. */
.peca-selos { top: 8px; left: 8px; right: 8px; gap: 4px; }
.peca-selos .etiqueta { font-size: .58rem; padding: 2px 7px; }

.peca-corpo { padding: 0 12px 12px; gap: 3px; }

/* Código discreto, em cima; o nome é o que a pessoa lê. */
.peca-corpo > .mono.pequeno { font-size: .66rem; letter-spacing: .03em; opacity: .75; }

.peca-titulo {
  font-size: .82rem; line-height: 1.3; margin: 1px 0 0;
  /* No máximo duas linhas: mantém todos os cartões da fileira do mesmo tamanho. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.1em;
}
.peca-aplicacao {
  font-size: .68rem; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.peca-preco { padding-top: 6px; }
.peca-valor { font-size: 1.12rem; margin: 0; letter-spacing: -.01em; }
.peca-preco s { font-size: .68rem; }
.peca-preco .pequeno { font-size: .68rem; }

.peca-compra { gap: 6px; margin-top: 8px; }
.peca-compra .btn { min-height: 38px; font-size: .74rem; padding: 8px 10px; }
.peca-compra .contagem { min-height: 34px; }
.peca-preco > .btn { min-height: 38px; font-size: .74rem; }

/* cabeçalho de um bloco da home */
.bloco-cabecalho {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

/*
 | Trilho de peças: desliza para o lado, com encaixe. Serve para quebrar o
 | ritmo da página — se todo bloco fosse uma grade igual, a home cansaria.
 | Sem JavaScript: é rolagem do próprio navegador.
 */
.pecas-trilho {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 180px;
  gap: 12px; overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.pecas-trilho > * { scroll-snap-align: start; }
@media (max-width: 620px) { .pecas-trilho { grid-auto-columns: 46%; } }

/* faixa de números da home */
.tiras-numeros {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--raio); overflow: hidden; margin-top: 20px;
}
.tira-numero {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-right: 1px solid var(--line);
  font-size: .82rem; font-weight: 600;
}
.tira-numero:last-child { border-right: 0; }
.tira-numero .conta { font-family: var(--mono); color: var(--red); font-size: .78rem; }
@media (max-width: 620px) {
  .tira-numero { border-right: 0; border-bottom: 1px solid var(--line); }
  .tira-numero:last-child { border-bottom: 0; }
}

/* ---------- trilho com setas ---------- */
.trilho-caixa { position: relative; margin-top: 12px; }
.trilho-caixa .pecas-trilho { margin-top: 0; }

.trilho-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
  color: var(--texto); font-size: 22px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.trilho-seta:hover { border-color: var(--red); color: var(--red); }
.trilho-seta[disabled] { opacity: 0; pointer-events: none; }
.trilho-seta-esq { left: -14px; }
.trilho-seta-dir { right: -14px; }

@media (max-width: 900px) {
  .trilho-seta-esq { left: 2px; }
  .trilho-seta-dir { right: 2px; }
}
/* No celular o dedo arrasta melhor que a seta. */
@media (hover: none) { .trilho-seta { display: none; } }

/* ==========================================================================
   GALERIA DA PEÇA — miniaturas à esquerda, lupa e tela cheia
   ========================================================================== */
.galeria { display: flex; gap: 12px; align-items: flex-start; }

.galeria-miniaturas {
  display: flex; flex-direction: column; gap: 8px;
  flex: none; width: 64px; margin-top: 0;
  max-height: 460px; overflow-y: auto;
}
.galeria-mini { width: 60px; height: 60px; flex: none; }

.galeria-palco { position: relative; flex: 1; min-width: 0; }

/* a foto cresce dentro do quadro; o quadro corta o excedente */
.galeria-principal { overflow: hidden; cursor: zoom-in; }
.galeria-principal img { transition: transform .12s ease-out; will-change: transform; }
.galeria-principal.com-lupa img { transition: none; }

.galeria-lupa {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  background: rgba(255,255,255,.92); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 8px; font-size: .8rem;
  pointer-events: none;
}

.galeria-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  color: var(--texto); font-size: 21px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.galeria-seta:hover { border-color: var(--red); color: var(--red); }
.galeria-seta-esq { left: 10px; }
.galeria-seta-dir { right: 10px; }

.galeria-conta {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  background: rgba(29,29,31,.72); color: #fff;
  border-radius: var(--pilula); padding: 3px 10px; font-size: .7rem;
  font-family: var(--mono);
}

@media (max-width: 620px) {
  /* Numa tela estreita a coluna de miniaturas vira uma tira embaixo. */
  .galeria { flex-direction: column-reverse; }
  .galeria-miniaturas {
    flex-direction: row; width: auto; max-height: none;
    overflow-x: auto; padding-bottom: 4px;
  }
  .galeria-lupa { display: none; }
}

/* ---------- foto em tela cheia ---------- */
.foto-cheia {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(20,20,22,.94);
  display: grid; place-items: center;
  animation: confirmacao-fundo-entra .14s ease-out;
}
/*
 | O limite da foto fica na PROPRIA foto e em medida de TELA (vw/vh) — nunca
 | em "%". Com "max-height: 100%" a conta era circular: os 100% valiam sobre a
 | caixa, e a caixa crescia junto com a foto, entao nada era limitado. Foto
 | deitada disfarcava o defeito; foto quase quadrada (1200x1170) abria com
 | 1058px de altura numa caixa de 605px e aparecia cortada, com barra de
 | rolagem. Assim vale para qualquer arte, em pe ou deitada.
 |
 | O "margin: auto" dentro de um flex centraliza SEM cortar quando a foto
 | passa do tamanho da caixa (aproximada) — o "place-items: center" do grid
 | esconde a parte de cima e ela fica inalcancavel.
 */
.foto-cheia-palco {
  width: min(94vw, 1100px); max-height: min(84vh, 800px);
  display: flex; overflow: auto;
}
.foto-cheia img {
  flex: none; margin: auto;
  max-width: min(94vw, 1100px); max-height: min(84vh, 800px);
  object-fit: contain;
  cursor: zoom-in;
}
/*
 | Aproximar mostra a foto no tamanho de verdade (e a caixa rola), em vez de
 | esticar a que ja estava reduzida — e o que faz valer a pena cadastrar foto
 | em alta resolucao. Em foto pequena, o "min-width" garante que aproximar
 | ainda aumente alguma coisa.
 */
.foto-cheia img.aproximada {
  max-width: none; max-height: none;
  width: auto; height: auto; min-width: 100%;
  cursor: zoom-out;
}
.foto-cheia-fechar {
  position: absolute; top: 16px; right: 20px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 0; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.foto-cheia-fechar:hover { background: rgba(255,255,255,.26); }
.foto-cheia-seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 0; color: #fff;
  font-size: 30px; line-height: 1; cursor: pointer;
}
.foto-cheia-seta:hover { background: rgba(255,255,255,.26); }
.foto-cheia-seta.esq { left: 20px; }
.foto-cheia-seta.dir { right: 20px; }
.foto-cheia-dica {
  position: absolute; bottom: 18px; left: 0; right: 0;
  text-align: center; color: #C9C8C6; font-size: .76rem; margin: 0;
}

/* seletor "mover para" dentro do cartão arrastável */
.arrastavel .mover-para {
  flex: none; max-width: 190px;
  font-size: .72rem; padding: 4px 8px; min-height: 30px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--texto-suave);
}
.arrastavel .mover-para:hover { border-color: var(--red); color: var(--texto); }
@media (max-width: 620px) {
  .arrastavel { flex-wrap: wrap; }
  .arrastavel .mover-para { max-width: none; width: 100%; }
}

/* ==========================================================================
   CATÁLOGO — busca no topo, filtros na coluna da esquerda
   ========================================================================== */
.catalogo-busca {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.catalogo-busca input[type="text"] {
  flex: 1; min-width: 220px; min-height: 48px;
  font-size: .95rem; padding: 12px 18px;
  border: 1px solid var(--line); border-radius: var(--pilula);
  background: var(--surface); color: var(--texto);
}
.catalogo-busca input[type="text"]:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.catalogo-busca .btn { min-height: 48px; padding: 12px 28px; }

.catalogo { display: grid; gap: 20px; grid-template-columns: 210px minmax(0, 1fr); }
@media (max-width: 900px) { .catalogo { grid-template-columns: 1fr; } }

.catalogo-filtros { align-self: start; position: sticky; top: 16px; }

/* No computador os filtros estão sempre à vista: o botão não aparece. */
.filtros-abrir { display: none; }

@media (max-width: 900px) {
  /*
   | Em tela estreita a coluna de filtros empurrava as peças para muito
   | abaixo da dobra — a pessoa abria o catálogo e via só filtro. Agora ela
   | fica guardada atrás de um botão que já resume o que está filtrado.
   */
  .filtros-abrir {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 12px 14px; min-height: 56px;
    background: var(--surface); color: var(--texto);
    border: 1px solid var(--line); border-radius: var(--raio);
    font: inherit; text-align: left; cursor: pointer;
  }
  .filtros-abrir-icone { font-size: 1.05rem; flex: none; }
  .filtros-abrir-texto { display: flex; flex-direction: column; min-width: 0; }
  .filtros-abrir-rotulo {
    display: flex; align-items: center; gap: 6px;
    font-size: .92rem; font-weight: 700;
  }
  .filtros-abrir-contador {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pilula);
    background: var(--red); color: #fff;
    font-size: .66rem; font-weight: 700; display: grid; place-items: center;
  }
  .filtros-abrir-resumo {
    font-size: .76rem; color: var(--texto-suave);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .filtros-abrir-seta {
    margin-left: auto; flex: none; color: var(--texto-suave);
    transition: transform .15s ease;
  }
  .filtros-abrir[aria-expanded="true"] .filtros-abrir-seta { transform: rotate(180deg); }

  /* Fechada por padrão; a classe "aberto" vem do js/abrir-lista.js. */
  .catalogo-filtros { position: static; display: none; }
  .catalogo-filtros.aberto {
    display: block; padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--raio);
  }
}

.filtro-bloco { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.filtro-bloco:last-of-type { border-bottom: 0; }
.filtro-bloco h3 {
  font-family: var(--corpo); text-transform: none; letter-spacing: 0;
  font-size: .78rem; font-weight: 700; color: var(--texto-suave); margin: 0 0 8px;
}
.filtro-bloco select { min-height: 38px; font-size: .84rem; }
.filtro-bloco .checkbox { font-size: .84rem; margin-bottom: 4px; }

.filtro-lista { list-style: none; margin: 0; padding: 0; }
.filtro-lista li { margin: 0; }
.filtro-lista a {
  display: block; padding: 5px 0; font-size: .84rem;
  color: var(--texto); text-decoration: none;
}
.filtro-lista a:hover { color: var(--red); }
.filtro-lista a.ativo { color: var(--red); font-weight: 700; }

/* ==========================================================================
   RODAPÉ em quatro colunas
   ========================================================================== */
/*
 | O espaço extra embaixo é para a bolha do chat, que flutua no canto: sem ele
 | a última linha do rodapé ficava escondida atrás dela.
 */
.rodape { padding: 40px 0 96px; }
@media (max-width: 640px) { .rodape { padding-bottom: 110px; } }

.rodape-colunas {
  display: grid; gap: 28px;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
@media (max-width: 900px) { .rodape-colunas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rodape-colunas { grid-template-columns: 1fr; gap: 22px; } }

/*
 | Sem border-radius: a arte do logo já vem com o canto arredondado, e um
 | segundo arredondamento por cima mordia a moldura metálica.
 */
.rodape-logo {
  width: 40px; height: 40px; display: block;
  margin-bottom: 14px;
}
.rodape-marca p { margin: 0; font-size: .78rem; line-height: 1.65; max-width: 34ch; }

.rodape h4 {
  font-family: var(--corpo); text-transform: none; letter-spacing: 0;
  font-size: .84rem; font-weight: 700; color: #fff; margin: 0 0 12px;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 8px; font-size: .8rem; }
.rodape li a { color: #C9C8C6; text-decoration: none; }
.rodape li a:hover { color: #fff; text-decoration: underline; }
.rodape li.sem-link { color: #9A9998; }

.rodape-base {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .72rem; color: #9A9998;
}
.rodape-base a { color: #C9C8C6; }
.rodape-direita { margin-left: auto; }
@media (max-width: 560px) { .rodape-direita { margin-left: 0; } }

/* ==========================================================================
   BUSCA DO CABEÇALHO — caixa simples, clara, com a lupa dentro
   ========================================================================== */
.busca-topo {
  flex: 1; min-width: 220px; max-width: 520px;
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface);
}
.busca-topo:focus-within { border-color: var(--graphite); }

.busca-topo input {
  flex: 1; min-width: 0; border: 0; background: none;
  padding: 10px 14px; font: inherit; font-size: .86rem; color: var(--texto);
}
.busca-topo input:focus { outline: none; }
.busca-topo input::placeholder { color: var(--texto-suave); }
/* tira o X que o Chrome coloca no type=search */
.busca-topo input::-webkit-search-cancel-button { -webkit-appearance: none; }

.busca-topo button {
  display: grid; place-items: center;
  border: 0; border-left: 1px solid var(--line);
  background: none; color: var(--texto-suave);
  padding: 0 14px; align-self: stretch; cursor: pointer;
}
.busca-topo button:hover { color: var(--red); }

@media (max-width: 900px) {
  /* Numa tela estreita a caixa passa para a linha de baixo, inteira. */
  .busca-topo { order: 10; flex-basis: 100%; max-width: none; }
}

/* ---------- página de resultados ---------- */
.resposta-caixa {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--raio); padding: 18px 20px; margin-bottom: 12px;
}
.resposta-caixa h3 { margin: 0 0 8px; font-size: 1rem; }
.resposta-caixa p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--texto); }
.resposta-caixa .btn { margin-top: 14px; }

.ajuda-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }


/* ==========================================================================
   OS JOGOS DO SITE
   ==========================================================================
   Fica no fim do arquivo de propósito: é a parte mais "solta" da folha, e
   quem for mexer no site de vendas não precisa passar por ela.

   São dois jogos e uma entrada:
     /jogo          a vitrine, com o que já se ganhou hoje
     /jogo/facil    Brasão Voador  — destreza, o placar vem do navegador
     /jogo/bonus    Bônus do Dia   — diário, o servidor decide
   ========================================================================== */

/* ---------------- o item na barra do menu ---------------- */
.nav-site .nav-jogo {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--red); font-weight: 700;
}
.nav-site .nav-jogo .nav-jogo-icone { font-size: 1.05em; }
@media (max-width: 900px) { .nav-site .nav-jogo { margin-left: 0; } }

/* ==========================================================================
   A ENTRADA (/jogo)
   ========================================================================== */
.jogo-capa {
  position: relative; overflow: hidden;
  border-radius: 20px; padding: 36px 34px; margin-bottom: 22px;
  text-align: center;
  background:
    radial-gradient(120% 140% at 82% 8%, rgba(193,10,46,.26), transparent 58%),
    linear-gradient(135deg, #23262B 0%, #15171A 100%);
  color: #F2F1EF;
}
/* A furação do painel de ferramentas, ao fundo. */
.jogo-capa::before {
  content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image: radial-gradient(circle, #FFF 1.4px, transparent 1.6px);
  background-size: 26px 26px;
}
.jogo-capa-texto { position: relative; max-width: 640px; margin: 0 auto; }
.jogo-capa h1 { color: #FFF; font-size: 2rem; margin: 12px 0; line-height: 1.15; }
.jogo-capa p { color: #D6D4D0; font-size: .98rem; margin: 0 auto 16px; max-width: 56ch; }
.jogo-capa-moedas { color: #FFD98A; }
.jogo-selo {
  display: inline-block; background: var(--red); color: #FFF;
  font-family: var(--display); letter-spacing: .09em; font-size: .68rem;
  padding: 5px 12px; border-radius: var(--pilula);
}
.jogo-aviso {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; padding: 12px 14px; font-size: .88rem !important;
  color: #E8E6E2 !important; max-width: 520px; margin: 0 auto !important;
}
.jogo-aviso a { color: #FFB3C4; }

.jogo-medidor {
  background: rgba(0,0,0,.28); border-radius: 14px; padding: 14px 16px;
  max-width: 420px; margin: 0 auto; text-align: left;
}
.jogo-medidor-topo { display: flex; justify-content: space-between; font-size: .84rem; color: #D6D4D0; }
.jogo-medidor-topo b { color: #FFF; font-family: var(--mono); }
.jogo-medidor-trilho {
  height: 10px; background: rgba(255,255,255,.14); border-radius: var(--pilula);
  margin: 8px 0 6px; overflow: hidden;
}
.jogo-medidor-cheio {
  height: 100%; border-radius: var(--pilula);
  background: linear-gradient(90deg, #E0B767, #FFD98A);
  transition: width .5s ease;
}
.jogo-medidor-nota { font-size: .78rem; color: #B9B7B3; }
.jogo-medidor-nota b { color: #FFD98A; }

@media (max-width: 820px) {
  .jogo-capa { padding: 26px 20px; }
  .jogo-capa h1 { font-size: 1.5rem; }
}

/* ---------------- as cartas dos jogos ---------------- */
.jogo-cartas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin-bottom: 22px;
}
.jogo-carta {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; text-decoration: none; color: var(--texto);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.jogo-carta:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.14); border-color: var(--red); }
.jogo-carta-topo { display: flex; align-items: center; justify-content: space-between; }
.jogo-carta-emoji { font-size: 2rem; }
.jogo-carta-nivel {
  font-family: var(--display); font-size: .7rem; letter-spacing: .1em;
  padding: 4px 10px; border-radius: var(--pilula);
  background: var(--soft-green); color: var(--green);
}
.jogo-carta-bonus .jogo-carta-nivel { background: #3B1478; color: #E9D6FF; }
.jogo-carta h2 { margin: 0; font-size: 1.25rem; }
.jogo-carta-chamada { margin: 0; font-size: .92rem; }
.jogo-carta-explicacao { margin: 0; font-size: .84rem; color: var(--texto-suave); }
.jogo-carta-pe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 12px; }
.jogo-carta-premio {
  background: var(--soft-amber); color: var(--amber);
  font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: var(--pilula);
}
.jogo-carta-recorde { font-size: .78rem; color: var(--texto-suave); }
.jogo-carta .btn { margin-top: auto; }

/* ---------------- quadro de honra ---------------- */
.jogo-quadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.jogo-quadro h3 { margin: 0 0 10px; font-size: 1rem; }
.jogo-quadro-linha {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .88rem;
}
.jogo-quadro-linha:last-child { border-bottom: 0; }
.jogo-quadro-posicao { font-family: var(--display); color: var(--texto-suave); }
.jogo-quadro-campeao { background: var(--soft-amber); border-radius: 10px; padding: 8px 10px; border-bottom: 0; }
.jogo-quadro-campeao .jogo-quadro-posicao { color: var(--amber); }
.jogo-quadro-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jogo-quadro-pontos { font-weight: 700; }
.jogo-regras { margin-top: 16px; }
.jogo-lista { margin: 0; padding-left: 20px; font-size: .88rem; line-height: 1.9; }

/* ==========================================================================
   A CASCA QUE OS DOIS JOGOS USAM
   ========================================================================== */
/*
   A tela de jogo é a única que não usa `.container` por dentro: o palco
   precisa ser um bloco só, sem nada em volta. Então ela repete aqui a mesma
   medida e a mesma centralização do resto do site — sem o `margin: 0 auto`
   ela nascia grudada na borda esquerda em monitor grande.
*/
.conteudo-jogo {
  max-width: 1200px; margin: 0 auto;
  padding-left: 16px; padding-right: 16px;
}
.jogo-tela { user-select: none; -webkit-user-select: none; }
.jogo-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.jogo-barra h1 { margin: 0; font-size: 1.2rem; flex: 1; }
.jogo-voltar { font-size: .86rem; text-decoration: none; color: var(--texto-suave); }
.jogo-voltar:hover { color: var(--red); }
.jogo-barra-direita { display: flex; align-items: center; gap: 8px; }
.jogo-chip {
  background: var(--soft-amber); color: var(--amber); font-size: .76rem; font-weight: 700;
  padding: 5px 11px; border-radius: var(--pilula); white-space: nowrap;
}
.jogo-som {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--pilula);
  width: 36px; height: 36px; cursor: pointer; font-size: 1rem; line-height: 1;
}
.jogo-som:hover { border-color: var(--red); }

.jogo-palco {
  position: relative; overflow: hidden;
  height: min(66vh, 560px); min-height: 380px;
  border-radius: 18px; border: 1px solid var(--line);
  background: #1A1C20;
  touch-action: none;            /* sem isto o jogo não funciona no celular */
  outline: none;
}
.jogo-palco.jogando { cursor: pointer; }
.jogo-rodape-dica { font-size: .8rem; color: var(--texto-suave); margin-top: 10px; text-align: center; }

/* ---------------- cortinas de início e de fim ---------------- */
/*
   O `hidden` precisa vencer o `display:flex` daqui de baixo.

   É a armadilha já conhecida da folha: `[hidden]` é uma regra fraca, e
   qualquer `display` escrito depois a anula caladamente. Foi assim que a
   tela de "fim de partida" apareceu antes de a partida começar.
*/
.jogo-cortina[hidden],
.jogo-fim-coins[hidden] { display: none !important; }

.jogo-cortina {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(14,15,17,.82);
}
.jogo-cortina-caixa {
  background: var(--surface); border-radius: 18px; padding: 24px 26px;
  max-width: 460px; width: 100%; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  max-height: 100%; overflow-y: auto;
}
.jogo-cortina-caixa h2 { margin: 0 0 10px; font-size: 1.3rem; }
.jogo-cortina-como { font-size: .9rem; margin: 0 0 12px; }
.jogo-cortina-pontos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.jogo-cortina-pontos span {
  background: var(--paper-2); border-radius: var(--pilula); padding: 5px 11px; font-size: .78rem;
}
.jogo-cortina-recorde, .jogo-cortina-aviso { font-size: .82rem; color: var(--texto-suave); margin: 0 0 12px; }
.jogo-cortina-fim.entrando .jogo-cortina-caixa { animation: jogo-sobe .28s ease; }
@keyframes jogo-sobe { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.jogo-fim-placar { margin: 6px 0 12px; }
.jogo-fim-placar b { display: block; font-family: var(--display); font-size: 3rem; line-height: 1; color: var(--red); }
.jogo-fim-placar span { font-size: .82rem; color: var(--texto-suave); }
.jogo-fim-coins {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--soft-amber); color: var(--amber);
  border-radius: var(--pilula); padding: 8px 16px; font-size: 1rem; margin-bottom: 10px;
  animation: jogo-premio .5s ease;
}
@keyframes jogo-premio { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: none; opacity: 1; } }
.jogo-moeda-selo {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(140deg, #F4CF80, #C79331);
  color: #59400C; font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.22);
}
.jogo-fim-recado { font-size: .84rem; color: var(--texto-suave); margin: 0 0 10px; }
.jogo-fim-saldo { font-size: .82rem; margin: 0 0 12px; }
.jogo-fim-botoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   BRASÃO VOADOR
   ========================================================================== */
/*
   AS CORES DO CENÁRIO SÃO VARIÁVEIS.

   A cada dez passadas o JavaScript troca estas oito variáveis no palco, e o
   jogo inteiro muda de lugar — céu, chão e peças. Trocar de cenário passa a
   ser trocar oito cores, e não redesenhar oito coisas. Os valores aqui são o
   primeiro cenário, que também é o que aparece antes de a partida começar.
*/
.jogo-palco {
  --cen-ceu1: #2A2E34;
  --cen-ceu2: #15171A;
  --cen-chao1: #6B4A2A;
  --cen-chao2: #7B5732;
  --cen-borda: #3F2C18;
  --cen-peca1: #4B5056;
  --cen-peca2: #3A3E44;
  --cen-peca-borda: #23262A;
}
.jogo-fundo-parede {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--cen-ceu1) 0%, var(--cen-ceu2) 100%);
  transition: background .7s ease;
}
/*
   AS TRÊS CAMADAS QUE ROLAM SÃO UM LADRILHO MAIS LARGAS QUE A TELA.

   Elas andam por `transform` (ver `rolar()` no jogo-voar.js), de zero até um
   ladrilho, e voltam ao zero. A largura a mais é o que garante que sempre há
   desenho cobrindo a direita enquanto a camada desliza para a esquerda — sem
   ela apareceria uma faixa vazia na beirada.

   Antes isso era feito mudando a posição do desenho de fundo, que o navegador
   arredonda para pixel inteiro: a camada distante andava 0,78 pixel por
   quadro e engasgava. Com `transform` a fração de pixel é respeitada e quem
   move é a placa de vídeo.
*/
.jogo-fundo-painel {
  position: absolute; top: 0; bottom: 46px; left: 0;
  width: calc(100% + 30px); opacity: .5;
  will-change: transform;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.18) 1.5px, transparent 1.7px),
    linear-gradient(180deg, transparent 62%, rgba(0,0,0,.35) 100%);
  background-size: 30px 30px, 100% 100%;
  background-repeat: repeat, no-repeat;
}
/* A silhueta de ferramentas penduradas, bem apagada, andando mais rápido. */
.jogo-fundo-bancada {
  position: absolute; left: 0; bottom: 46px;
  width: calc(100% + 230px); height: 190px; opacity: .30;
  will-change: transform;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.14) 0 60%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0 34%, transparent 34%);
  /* Os dois desenhos repetem no MESMO ladrilho (230px). Com ladrilhos
     diferentes, a emenda da volta não coincidiria e apareceria um pulo. */
  background-size: 230px 130px, 230px 190px;
  background-position: 0 0, 90px 0;
  background-repeat: repeat-x;
}
.jogo-chao {
  position: absolute; left: 0; bottom: 0;
  width: calc(100% + 92px); height: 46px; z-index: 6;
  will-change: transform;
  background:
    repeating-linear-gradient(90deg, var(--cen-chao1) 0 46px, var(--cen-chao2) 46px 92px),
    var(--cen-chao1);
  border-top: 4px solid var(--cen-borda);
  box-shadow: inset 0 6px 12px rgba(0,0,0,.35);
  transition: background .7s ease, border-color .7s ease;
}

/* O brasão é o próprio logotipo da fábrica, em PNG. Nada de desenho novo
   para manter: mudou a marca, muda o jogo junto. */
.jogo-voador { position: absolute; left: 24%; top: 0; width: 56px; height: 56px; z-index: 10; will-change: transform; }
.voador-brasao {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
/* O jato sai por baixo e só acende na subida. */
.jogo-jato {
  position: absolute; left: 50%; bottom: -8px; width: 18px; height: 24px;
  transform: translateX(-50%) scaleY(.35); transform-origin: top center;
  background: radial-gradient(ellipse at top, #FFD98A 0%, #F08A2B 45%, rgba(240,138,43,0) 75%);
  opacity: .35; transition: opacity .12s ease, transform .12s ease;
}
.jogo-voador.subindo .jogo-jato { opacity: 1; transform: translateX(-50%) scaleY(1.15); }

.jogo-obstaculos { position: absolute; inset: 0; z-index: 5; }
.peca-par { position: absolute; top: 0; bottom: 0; will-change: transform; }
.peca-coluna {
  position: absolute; left: 0; right: 0;
  background:
    repeating-linear-gradient(180deg, var(--cen-peca1) 0 10px, var(--cen-peca2) 10px 20px),
    var(--cen-peca1);
  border: 3px solid var(--cen-peca-borda); border-radius: 8px;
  box-shadow: inset -8px 0 14px rgba(0,0,0,.35), inset 8px 0 10px rgba(255,255,255,.06);
}
.peca-cima { top: 0; }
/* A boca da peça, mais grossa: é a borda que o jogador enxerga de longe. */
.peca-cima::after, .peca-baixo::before {
  content: ""; position: absolute; left: -8px; right: -8px; height: 20px;
  background: linear-gradient(180deg, var(--cen-peca1), var(--cen-peca2));
  border: 3px solid var(--cen-peca-borda); border-radius: 6px;
}
.peca-cima::after { bottom: -3px; }
.peca-baixo::before { top: -3px; }

.peca-moeda {
  position: absolute; left: 50%; margin-left: -16px; width: 32px; height: 32px;
  border-radius: 50%; background: linear-gradient(140deg, #F7D68C, #C08F2C);
  border: 2px solid #8C6516; color: #543C08;
  font-size: .66rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(240,200,120,.5), inset 0 -3px 4px rgba(0,0,0,.25);
  animation: moeda-gira 1.8s linear infinite;
}
@keyframes moeda-gira { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg) scaleX(.35); } }
.peca-moeda-pega { animation: moeda-some .35s ease forwards; }
@keyframes moeda-some { to { transform: translateY(-34px) scale(1.7); opacity: 0; } }

.jogo-placar {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 12;
  font-family: var(--display); font-size: 2.6rem; color: #FFF;
  text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 22px rgba(0,0,0,.5);
  pointer-events: none;
}
.jogo-placar.pulsa { animation: placar-pulsa .28s ease; }
@keyframes placar-pulsa { 50% { transform: translateX(-50%) scale(1.28); color: #FFD98A; } }
.jogo-palco.batendo { animation: palco-treme .38s ease; }
@keyframes palco-treme {
  0%, 100% { transform: none; }
  20% { transform: translate(-7px, 4px); }
  45% { transform: translate(6px, -4px); }
  70% { transform: translate(-4px, 2px); }
}

/* ==========================================================================
   O BÔNUS DO DIA
   ==========================================================================
   É a única parte do site que pode brilhar assim: no resto, brilho atrapalha
   quem está comprando peça.
   ========================================================================== */
.bonus-mesa { --ouro: #F0C05A; --ouro-forte: #FFE9A8; }

.bonus-mesa {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center;
  background: radial-gradient(120% 90% at 30% 0%, #1E2B22 0%, #14181A 60%, #0E1012 100%);
  border: 2px solid #2C3A31; border-radius: 22px; padding: 26px;
}
.bonus-palco { position: relative; display: flex; justify-content: center; }

.bonus-ponteiro {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 0; height: 0;
  border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-top: 30px solid var(--ouro-forte);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.6));
}
/*
   O ARO É UM PNEU, E NÃO UM ARO DOURADO.

   A primeira versão tinha aro dourado com brilho, e ficou com cara de casa de
   jogo — que é exatamente o que uma fábrica de peças NÃO pode parecer, nem
   para a hospedagem nem para o Google. Trocado por borracha preta com banda
   de rodagem, que além de tudo é a cara da InjeRubber.

   A banda são duas listras repetidas em ângulo (`repeating-conic-gradient`)
   desenhadas no fundo, atrás da roda — por isso ela precisa de padding e do
   `content-box` no fundo das casas.
*/
.bonus-roda {
  position: relative; width: min(340px, 78vw); aspect-ratio: 1; border-radius: 50%;
  border: 14px solid #1E2126;
  box-shadow:
    0 0 0 4px #34383E,
    0 18px 50px rgba(0,0,0,.55),
    inset 0 0 40px rgba(0,0,0,.5);
  transform: rotate(0deg);
}
/* A banda de rodagem, por cima da borda. */
.bonus-roda::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: repeating-conic-gradient(#1E2126 0 6deg, #2C3037 6deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 14px), #000 calc(50% - 14px) 50%);
  mask: radial-gradient(circle, transparent 0 calc(50% - 14px), #000 calc(50% - 14px) 50%);
  pointer-events: none;
}
.bonus-casa {
  position: absolute; inset: 0; transform: rotate(var(--vira));
  display: flex; justify-content: center; pointer-events: none;
}
.bonus-rotulo {
  margin-top: 16px; display: flex; flex-direction: column; align-items: center;
  color: #FFF; font-family: var(--display); font-size: 1.35rem; line-height: 1;
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.bonus-rotulo small { font-size: .46rem; letter-spacing: .1em; opacity: .75; font-family: var(--corpo); }
.bonus-vazia { font-size: .78rem; opacity: .8; }
.bonus-miolo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 30%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; border: 4px solid var(--ouro-forte);
  box-shadow: inset 0 -4px 10px rgba(0,0,0,.4);
  background: #8A0A22;
}
.bonus-miolo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bonus-lado { color: #E8E6E2; }
.bonus-lado h2 { color: #FFF; margin: 0 0 8px; font-size: 1.3rem; }
.bonus-lado .suave { color: #A9A8A5; font-size: .88rem; }
.bonus-resultado {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(240,192,90,.12); border: 1px solid var(--ouro);
  border-radius: 14px; padding: 14px 18px; margin: 14px 0;
  animation: jogo-premio .4s ease;
}
.bonus-resultado[hidden] { display: none !important; }
.bonus-resultado-rotulo { font-size: .7rem; letter-spacing: .14em; color: var(--ouro); }
.bonus-resultado b { font-family: var(--display); font-size: 2rem; color: var(--ouro-forte); line-height: 1; }
.bonus-recado { font-size: .82rem; color: #C9C7C4; min-height: 1.2em; margin: 0 0 10px; }
.bonus-usos { font-size: .78rem; color: #A9A8A5; text-align: center; margin: 10px 0 0; }
.bonus-usos b { color: var(--ouro); font-family: var(--mono); }
.bonus-botao:disabled { opacity: .5; cursor: not-allowed; }
.premiado .bonus-roda {
  box-shadow: 0 0 0 4px var(--ouro), 0 0 60px rgba(240,192,90,.45), inset 0 0 40px rgba(0,0,0,.5);
}

@media (max-width: 820px) {
  .bonus-mesa { grid-template-columns: 1fr; padding: 20px; }
  .bonus-lado { text-align: center; }
  .bonus-resultado { align-items: center; }
}
@media (max-width: 620px) {
  .jogo-palco { height: min(60vh, 440px); min-height: 340px; }
  .jogo-placar { font-size: 2rem; }
}

/* O balão do chat é fixo no canto e cai bem em cima da área de jogo. */
body:has(.jogo-tela) .chat-bolha { bottom: 96px; }

/* Quem pediu menos animação no sistema recebe o jogo sem enfeite nenhum —
   o jogo continua jogável, só para de balançar. */
@media (prefers-reduced-motion: reduce) {
  .peca-moeda, .jogo-palco.batendo, .jogo-fim-coins { animation: none !important; }
}

/* O selo do meio fica sobre o eixo da roda, mas fora dela: dentro,
   viraria junto, e logotipo rodopiando parece defeito. */
.bonus-miolo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(102px, 23vw); aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; border: 4px solid var(--ouro-forte); background: #8A0A22;
  box-shadow: 0 6px 16px rgba(0,0,0,.5); z-index: 4;
}

/* ---------------- o cofre da partida (Brasão Voador) ---------------- */
/*
   Fica no canto de cima, à esquerda, longe do placar (que é no meio) e longe
   do brasão (que voa à esquerda, mais abaixo). São três informações e cada
   uma tem o seu canto — juntas, viram sopa.
*/
.voar-cofre {
  position: absolute; top: 14px; left: 14px; z-index: 12;
  display: flex; align-items: center; gap: 7px;
  background: rgba(12,13,15,.62); border: 1px solid rgba(240,192,90,.45);
  border-radius: var(--pilula); padding: 6px 14px 6px 8px;
  pointer-events: none;
}
.voar-cofre b {
  font-family: var(--display); font-size: 1.5rem; line-height: 1; color: #FFD98A;
  text-shadow: 0 0 14px rgba(240,192,90,.5);
}
.voar-cofre-teto { font-size: .58rem; letter-spacing: .1em; color: #B9B7B3; }
.voar-cofre-teto[hidden] { display: none !important; }

/* A batida do cofre quando entra mais uma InjeCoin. */
.voar-cofre.subindo { animation: cofre-bate .42s cubic-bezier(.2,1.6,.4,1); }
@keyframes cofre-bate {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); border-color: #FFD98A; }
  100% { transform: scale(1); }
}

/* O "+1" que sobe do cofre e some — é o instante em que o jogo vira dinheiro. */
.voar-mais {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  font-family: var(--display); font-size: 1.3rem; color: #7CE0A0;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  animation: mais-sobe .9s ease-out forwards;
  pointer-events: none; white-space: nowrap;
}
@keyframes mais-sobe {
  0% { transform: translate(-50%, 6px) scale(.6); opacity: 0; }
  25% { transform: translate(-50%, -6px) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -44px) scale(1); opacity: 0; }
}

@media (max-width: 620px) {
  .voar-cofre { top: 10px; left: 10px; padding: 4px 11px 4px 6px; }
  .voar-cofre b { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .voar-cofre.subindo { animation: none !important; }
  .voar-mais { animation: mais-sobe-simples .9s linear forwards; }
  @keyframes mais-sobe-simples { 0% { opacity: 1; } 100% { opacity: 0; } }
}

/* ---------------- a virada de fase (Brasão Voador) ---------------- */
/*
   A cada dez passadas o jogo troca de cenário. Estes três enfeites existem
   para a troca ser um ACONTECIMENTO e não um piscar de tela: o clarão, os
   fogos e a faixa com o nome do lugar.
*/
.jogo-palco.virando::after {
  content: ""; position: absolute; inset: 0; z-index: 15; pointer-events: none;
  background: #FFF;
  animation: virada-clarao .55s ease-out forwards;
}
@keyframes virada-clarao { 0% { opacity: .5; } 100% { opacity: 0; } }

.voar-faisca {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  z-index: 16; pointer-events: none;
  box-shadow: 0 0 10px currentColor;
  animation: faisca-estoura 1s ease-out forwards;
}
@keyframes faisca-estoura {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  70% { opacity: .9; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 60px)) scale(.3); opacity: 0; }
}

.voar-fase {
  position: absolute; top: 34%; left: 50%; transform: translateX(-50%); z-index: 17;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none; text-align: center;
}
.voar-fase[hidden] { display: none !important; }
.voar-fase b {
  font-family: var(--display); font-size: 2.4rem; line-height: 1; color: #FFD98A;
  letter-spacing: .06em; text-shadow: 0 3px 0 rgba(0,0,0,.55), 0 0 26px rgba(240,192,90,.7);
}
.voar-fase span {
  font-size: .8rem; letter-spacing: .18em; color: #FFF; text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
.voar-fase.entrando { animation: fase-entra 2s ease forwards; }
@keyframes fase-entra {
  0% { transform: translateX(-50%) scale(.5); opacity: 0; }
  15% { transform: translateX(-50%) scale(1.1); opacity: 1; }
  25% { transform: translateX(-50%) scale(1); }
  75% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-24px); opacity: 0; }
}

@media (max-width: 620px) {
  .voar-fase b { font-size: 1.7rem; }
  .voar-fase span { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jogo-palco.virando::after, .voar-faisca { animation: none !important; display: none; }
}

/* ---------------- o relógio da virada (Bônus do Dia) ---------------- */
/*
   Aparece só quando o bônus do dia já foi usado. "Volte amanhã" sozinho
   deixa a pergunta no ar — amanhã a que horas? Com o tempo correndo, ele
   sabe exatamente quando vale a pena voltar.
*/
.bonus-relogio {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(240,192,90,.10); border: 1px solid rgba(240,192,90,.4);
  border-radius: 14px; padding: 12px 18px; margin-top: 12px;
}
.bonus-relogio[hidden] { display: none !important; }
.bonus-relogio-rotulo { font-size: .68rem; letter-spacing: .14em; color: var(--ouro); text-transform: uppercase; }
.bonus-relogio b {
  font-family: var(--mono); font-size: 1.8rem; line-height: 1.1; color: var(--ouro-forte);
  font-variant-numeric: tabular-nums;
}
.bonus-relogio-nota { font-size: .72rem; color: #A9A8A5; text-align: center; }

/* ---------------- selos de segurança no rodapé ---------------- */
/*
   Discretos de propósito: eles tranquilizam quem está com o dedo no botão de
   fechar o pedido, mas não podem competir com o conteúdo. Selo grande e
   piscando é cara de site duvidoso — o efeito vira o contrário do pretendido.
*/
.rodape-selos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; margin-top: 26px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.rodape-selo { display: flex; align-items: center; gap: 10px; }
.rodape-selo-icone {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.rodape-selo b { display: block; font-size: .82rem; color: #EDECEA; line-height: 1.3; }
.rodape-selo small { display: block; font-size: .72rem; color: #9C9A97; line-height: 1.35; }

@media (max-width: 620px) {
  .rodape-selos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rodape-selo-icone { width: 28px; height: 28px; font-size: .85rem; }
  .rodape-selo b { font-size: .74rem; }
  .rodape-selo small { font-size: .66rem; }
}

/* ==========================================================================
   CATÁLOGO IMPRESSO — as telas do painel
   ==========================================================================
   Só o painel usa. O catálogo em si tem folha própria
   (css/catalogo-impresso.css), que é o layout aprovado da gráfica e não deve
   ser misturado com o visual do site.
   ========================================================================== */

/* A tabela tem 8 colunas e não cabe em tela estreita. Ela rola DENTRO do
   card, e não empurra a página inteira para o lado — página que rola na
   horizontal é o jeito mais rápido de deixar um admin desconfortável. */
.cat-tabela { min-width: 900px; }
.card:has(> .cat-tabela) { overflow-x: auto; }

.cat-thumb { width: 46px; }
.cat-thumb img {
  width: 38px; height: 38px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
}
.cat-sem-foto { color: var(--texto-suave); font-size: .8rem; }

/* Peça fora do catálogo continua na lista, mas apagada: ela existe, só não
   é impressa — e quem olha a lista precisa ver isso sem clicar. */
.cat-inativa { opacity: .55; }
.cat-tag-off {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: var(--paper-2); border-radius: var(--pilula);
  font-size: .68rem; color: var(--texto-suave);
}

.cat-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.cat-filtros .campo { flex: 1; min-width: 200px; margin: 0; }

/* O aviso dos códigos repetidos: cor de alerta porque é dado que vai para o
   papel errado, não um recado qualquer. */
.cat-alerta { border-left: 4px solid var(--amber); background: var(--soft-amber); }
.cat-alerta h3 { color: var(--amber); margin-top: 0; }

.cat-chip {
  display: inline-block; margin: 3px 4px 0 0; padding: 3px 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--pilula); font-family: var(--mono);
  font-size: .78rem; text-decoration: none; color: var(--texto);
}
.cat-chip:hover { border-color: var(--red); color: var(--red); }

.cat-foto-atual {
  width: 150px; height: 150px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.cat-ordem { width: 76px; }
.cat-apagar { margin-top: 22px; }

@media (max-width: 620px) {
  .cat-filtros .campo { min-width: 100%; }
}

/* "R$ 199,90" quebrando em duas linhas deixa a coluna de preço ilegível
   justamente onde ela precisa ser conferida de relance. */
.cat-tabela td.dir, .cat-tabela th.dir { white-space: nowrap; }

/* Em tela estreita o menu vira um botão e o conteúdo ganha a largura toda;
   24px de cada lado comeriam espaço que faz falta na tabela. */
@media (max-width: 900px) {
  .painel-conteudo { padding-left: 16px; padding-right: 16px; }
}

/* A etiqueta do tipo, embaixo do nome da peça na lista. Discreta de
   propósito: ela informa, não compete com o nome. */
.cat-tipo {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  background: var(--soft-red); color: var(--red);
  border-radius: var(--pilula); font-size: .68rem; font-weight: 600;
  white-space: nowrap;
}

/* A barra de progresso da geração do catálogo em PDF. Aparece no lugar do
   botão enquanto o servidor monta o arquivo — sem ela, só a abinha do
   navegador gira e a impressão é de que travou. */
.pdf-barra {
  height: 8px; background: var(--paper-2); border-radius: var(--pilula);
  overflow: hidden; margin-bottom: 6px;
}
.pdf-barra i {
  display: block; height: 100%; width: 0;
  background: var(--red); border-radius: var(--pilula);
  transition: width .25s linear;
}
.pdf-conta { margin: 0; }

/* A capa própria do catálogo, na tela de textos. */
.cat-capa-atual {
  width: 150px; border: 1px solid var(--line); border-radius: 8px;
  display: block; margin-bottom: 14px;
}
.cat-medida { background: var(--paper-2); margin-top: 4px; }
.cat-medida b { color: var(--red); }

/* As duas tabelas na lista de produtos: preço não pode quebrar em duas
   linhas na coluna onde ele é conferido de relance. */
.prod-preco { white-space: nowrap; }

/* A foto do "Sobre nós" na tela de textos: mostrada deitada, do jeito que
   ela sai no catálogo, para não haver surpresa depois de gerar o PDF. */
.cat-foto-sobre {
  width: 100%; max-width: 460px; height: 120px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 8px;
  display: block; margin: 4px 0 8px;
}