/* prova.css: a moldura da Prova 3D na marca do Caio (brand-id/visual.md): creme, preto quente, cinza quente e a
   mostarda de acento; Cooper Black no titulo, Bebas Neue nos rotulos, Neue Haas Grotesk Text no texto.
   Discreta de proposito: quem aparece e a moto. A marca fica na moldura, nunca na moto (nada de grao, desbote ou
   filtro no 3D: a prova e produto). Primeiro o celular (o cliente abre o link no WhatsApp). */
:root {
  --creme: #FFF3E1;
  --preto: #141210;
  --cinza: #6B645C;
  --mostarda: #CEAC69;
  --queimada: #544935;
  --papel: #FFFAF0;
  --linha: rgba(20, 18, 16, 0.16);
  --titulo: 'cooper-black-std', 'Cooper Black', 'Cooper Std', Georgia, serif;
  --rotulo: 'bebas-neue-by-fontfabric', 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --corpo: 'neue-haas-grotesk-text', 'Neue Haas Grotesk Text Pro', 'Helvetica Neue', Arial, sans-serif;
  --borda: 1.5px solid var(--preto);
  /* o xadrez da marca como bandeira quadriculada: duas fileiras de quadros de 6 px (uma fileira so lia como picote) */
  --xadrez: repeating-conic-gradient(var(--preto) 0 25%, var(--creme) 0 50%) 0 0 / 12px 12px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--creme); color: var(--preto);
  font: 15px/1.4 var(--corpo);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--mostarda); outline-offset: 2px; }
[hidden] { display: none !important; }

.app {
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "topo" "palco" "vistas" "painel";
}

/* ------------------------------------------------------------------ topo */
.topo {
  grid-area: topo; position: relative; z-index: 4;   /* acima da tela de carga (3): a bandeira nao some na abertura */
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px 11px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--creme);
}
.topo::after {             /* a bandeira quadriculada da marca, P&B, duas fileiras de 6 px */
  content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
  background: var(--xadrez);
}
.titulos { min-width: 0; }
.sobretitulo { margin: 0 0 3px; font: 14px/1 var(--rotulo); letter-spacing: 0.09em; color: var(--cinza); }
.titulo { margin: 0; min-height: 1.05em; font: 22px/1.05 var(--titulo); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub { margin: 3px 0 0; font-size: 13px; color: var(--cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca { display: flex; align-items: center; gap: 8px; flex: none; }
.marca img { width: 34px; height: auto; display: block; }
.marca-nome { font: 19px/1 var(--rotulo); letter-spacing: 0.07em; }

/* ------------------------------------------------------------------ palco */
.palco { grid-area: palco; position: relative; overflow: hidden; min-height: 0; background: #E3E0DA; }
.tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; cursor: grab; }
.tela:active { cursor: grabbing; }

.carregando {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center;
  background: inherit;
}
.carregando-panda { width: 52px; height: auto; display: block; }
.carregando-titulo { margin: 0; font: 26px/1 var(--titulo); }
/* a barra e a bandeira quadriculada enchendo da esquerda pra direita (os quadros nao esticam: muda a largura) */
.barra { width: min(300px, 70vw); height: 12px; background: rgba(20, 18, 16, 0.08); box-shadow: inset 0 0 0 1px rgba(20, 18, 16, 0.18); overflow: hidden; }
.barra span { display: block; height: 100%; width: 0; background: var(--xadrez); transition: width 0.3s ease; }
.carregando-detalhe { margin: 0; font-size: 13px; color: var(--cinza); }

.mensagem {
  position: absolute; z-index: 4; left: 16px; right: 16px; top: 50%; transform: translateY(-50%);
  max-width: 540px; margin: 0 auto;
  background: var(--papel); border: var(--borda); box-shadow: 6px 6px 0 var(--preto);
  padding: 20px 20px 18px;
}
.mensagem h2 { margin: 0 0 8px; font: 24px/1.1 var(--titulo); font-weight: 400; }
.mensagem p { margin: 0; }
.mensagem[data-tipo="erro"] { box-shadow: 6px 6px 0 var(--queimada); }
.mensagem pre { margin: 12px 0 0; max-height: 28vh; overflow: auto; white-space: pre-wrap; font-size: 11px; background: #F4EADA; padding: 8px; }
.mensagem .tentar { margin-top: 14px; background: var(--preto); color: var(--creme); }

.aviso {
  position: absolute; z-index: 5; top: 20px; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 7px 12px;
  background: var(--preto); color: var(--creme); font-size: 13px; line-height: 1.3;
  box-shadow: 0 0 0 1.5px var(--creme); transition: opacity 0.35s ease;
}
.aviso.some { opacity: 0; }
.dica {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 2;
  margin: 0; padding: 5px 10px; max-width: calc(100% - 32px);
  background: rgba(255, 243, 225, 0.88); color: var(--cinza); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
}
.dica.mostra { opacity: 1; }

/* ------------------------------------------------------------------ vistas */
.vistas {
  grid-area: vistas; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 10px 16px; background: var(--creme); border-top: var(--borda);
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.vistas::-webkit-scrollbar { display: none; }
/* tem mais vista pra direita: a borda desbota (no celular aparecem 4 das 7) */
.vistas.tem-mais-x { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.vista {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px;
  font: 18px/1 var(--rotulo); letter-spacing: 0.05em;
  background: transparent; border: var(--borda); cursor: pointer; scroll-snap-align: start;
}
.vista[aria-pressed="true"] { background: var(--preto); color: var(--creme); box-shadow: inset 0 -4px 0 var(--mostarda); }

/* ------------------------------------------------------------------ painel (no celular: barra de baixo que abre pra cima) */
.painel {
  grid-area: painel; display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "corpo corpo corpo" "alca foto aprovar" "ajuste ajuste ajuste";
  column-gap: 8px; padding: 0 16px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--creme);
}
/* fechado, o corpo some de verdade (visibility): nada escondido fica clicavel nem focavel por baixo da barra */
.painel-corpo { grid-area: corpo; position: relative; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0.28s ease, visibility 0s linear 0.28s; }
.painel[data-aberto="true"] .painel-corpo { max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 10px; border-bottom: var(--borda); visibility: visible; transition: max-height 0.28s ease, visibility 0s; }
.painel-alca { grid-area: alca; }
.foto { grid-area: foto; }
.aprovar { grid-area: aprovar; }
/* "mais opcoes abaixo": so quando o corpo tem o que rolar (interface.js liga a classe tem-mais). Altura zero, preso
   no pe da area visivel, com o desenho subindo por cima do conteudo: aparecer e sumir nao mexe no tamanho do conteudo
   (antes ele empurrava a lista e o controle andava debaixo do dedo) */
.mais-abaixo { position: sticky; bottom: 0; height: 0; margin: 0; visibility: hidden; pointer-events: none; }
/* o desbote fica todo acima do rotulo: o rotulo sempre em creme chapado (antes, a 55%, o texto da opcao de baixo
   aparecia meio apagado atras de "mais opcoes abaixo") */
.mais-abaixo span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 0 6px; text-align: center;
  font: 14px/1 var(--rotulo); letter-spacing: 0.09em; color: var(--cinza);
  background: linear-gradient(to bottom, rgba(255, 243, 225, 0), var(--creme) 24px);
}
.mais-abaixo span::after { content: ''; display: block; width: 8px; height: 8px; margin: 4px auto 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.painel-corpo.tem-mais .mais-abaixo { visibility: visible; }

.painel-alca, .acao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 14px;
  border: var(--borda); background: transparent; color: var(--preto);
  font: 19px/1 var(--rotulo); letter-spacing: 0.05em; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.painel-alca svg, .acao svg, .opcao svg { width: 21px; height: 21px; flex: none; }
.painel[data-aberto="true"] .painel-alca { background: var(--preto); color: var(--creme); }
.aprovar { background: var(--preto); color: var(--creme); }
.aprovar svg { color: var(--mostarda); }
.aprovar[aria-disabled="true"], .ajuste[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.rotulo-curto, .ic-compartilhar { display: none; }
/* pedir um ajuste: o caminho secundario, um link, nunca disputando com o Aprovar */
.ajuste {
  grid-area: ajuste; display: flex; align-items: center; justify-content: center; min-height: 44px;
  font-size: 13.5px; color: var(--preto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}

.bloco { padding: 12px 0; border-bottom: 1px solid var(--linha); }
.bloco:last-of-type { border-bottom: 0; }
.bloco h2 { margin: 0 0 8px; font: 16px/1 var(--rotulo); font-weight: 400; letter-spacing: 0.09em; color: var(--cinza); }
.opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.opcao {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: var(--borda); background: transparent; font: 14px/1.1 var(--corpo); cursor: pointer; text-align: left;
}
.opcao[aria-pressed="true"] { background: var(--preto); color: var(--creme); }
.versao-nome { font-weight: 600; }
.versao-data { font-size: 12px; opacity: 0.75; }
.versao-unica { margin: 0; font: 600 15px/1.2 var(--corpo); }
.ambiente-amostra { width: 18px; height: 18px; flex: none; border: 1px solid currentColor; background: #ddd; box-shadow: inset -7px -7px 0 var(--b, #999); }
.nota { margin: 8px 0 0; font-size: 12.5px; color: var(--cinza); }
.opcao[aria-pressed="true"] .nota { color: inherit; }

.cores { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cor { display: flex; align-items: center; gap: 10px; }
.amostra { width: 32px; height: 32px; flex: none; border: var(--borda); background: var(--c); position: relative; overflow: hidden; }
/* uma pista do acabamento na amostra (so pista: quem mostra o acabamento de verdade e o 3D) */
.amostra::after { content: ''; position: absolute; inset: 0; }
.acab-brilho::after, .acab-candy::after, .acab-perolizado::after { background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0 22%, rgba(255, 255, 255, 0) 46%); }
.acab-acetinado::after { background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0 25%, rgba(255, 255, 255, 0) 60%); }
.acab-metalico::after, .acab-metalico-fosco::after { background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.25) 100%); }
.acab-cromado::after { background: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0 18%, rgba(0, 0, 0, 0.35) 40%, rgba(255, 255, 255, 0.6) 60%, rgba(0, 0, 0, 0.4) 100%); }
.acab-flake::after { background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 1px, transparent 1.5px) 0 0 / 5px 5px, linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 50%); }
.acab-camaleao::after { background: linear-gradient(135deg, rgba(120, 255, 200, 0.45), rgba(255, 255, 255, 0) 45%, rgba(170, 60, 255, 0.45)); }
.acab-fluor::after { box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.7); }
.cor-texto { display: grid; min-width: 0; }
.cor-nome { font-weight: 600; font-size: 14px; }
.cor-acab { font-size: 12.5px; color: var(--cinza); }

/* ferramentas do designer */
.peca-info { margin: 10px 0; padding: 8px 10px; display: grid; gap: 2px; font-size: 13px; background: var(--papel); border: 1px solid var(--linha); }
.peca-info .mm { font-variant-numeric: tabular-nums; }
.estado { display: grid; gap: 8px; font-size: 12.5px; }
.estado p { margin: 0; }
.estado ul { margin: 2px 0 0; padding-left: 16px; }
.estado-geral { font-weight: 600; }
.alerta { color: var(--queimada); background: rgba(206, 172, 105, 0.3); padding: 1px 4px; }
.ao-vivo { margin: 10px 0 0; font-size: 12.5px; color: var(--cinza); }
.ao-vivo::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--cinza); vertical-align: 1px; }
.ao-vivo[data-estado="conectado"]::before { background: var(--mostarda); }
.ao-vivo:empty { display: none; }

.sem-js { padding: 24px; }

/* ------------------------------------------------------------------ celular: Opcoes e Foto viram icone com um rotulo
   curto embaixo ("Cores", "Salvar"), pra "Aprovar esta versao" caber inteiro na barra; a foto vira o icone de
   compartilhar (no celular ela abre a folha de compartilhar: salvar na galeria, mandar no WhatsApp). O "Pedir um
   ajuste" aparece com o painel aberto. */
@media (max-width: 560px) {
  .rotulo-foto, .painel-alca .rotulo-alca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .painel-alca, .foto { padding: 0; width: 52px; flex-direction: column; gap: 2px; }
  .painel-alca .rotulo-curto, .foto .rotulo-curto { display: block; font: 11px/1 var(--corpo); letter-spacing: 0; }
  .foto .ic-foto { display: none; }
  .foto .ic-compartilhar { display: block; }
  .painel[data-aberto="false"] .ajuste { display: none; }
  .dica { white-space: normal; text-align: center; width: calc(100% - 32px); }
}
@media (max-width: 380px) {
  .marca-nome { display: none; }
  .aprovar { padding: 0 10px; font-size: 17px; }
}

/* ------------------------------------------------------------------ celular deitado: virar o celular e o gesto natural
   pra ver a moto maior, e antes ele encolhia (topo, vistas e barra comiam 54% da altura: palco de 181 px; critica V3).
   Topo numa linha, vistas e acoes numa coluna a direita, como no computador; com o painel aberto ele toma a coluna. */
@media (orientation: landscape) and (max-height: 520px) {
  .app {
    grid-template-columns: minmax(0, 1fr) 184px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "topo topo" "palco vistas" "palco painel";
  }
  .app:has(.painel[data-aberto="true"]) { grid-template-areas: "topo topo" "palco painel" "palco painel"; }
  .app:has(.painel[data-aberto="true"]) .vistas { display: none; }
  .topo { padding: 6px 16px 7px; padding-top: max(6px, env(safe-area-inset-top)); }
  .sobretitulo, .sub { display: none; }
  .titulo { font-size: 17px; }
  .marca img { width: 26px; }
  .marca-nome { font-size: 15px; }
  .vistas {
    display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 5px;
    overflow-x: hidden; overflow-y: auto; padding: 18px 10px 6px; border-top: 0; border-left: var(--borda);
  }
  .vistas.tem-mais-x { -webkit-mask-image: none; mask-image: none; }
  .vista { min-width: 0; padding: 0 4px; font-size: 15px; }
  .painel {
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto;
    grid-template-areas: "corpo corpo" "alca foto" "aprovar aprovar" "ajuste ajuste";
    row-gap: 6px; padding: 0 10px 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); border-left: var(--borda); min-height: 0;
  }
  .painel[data-aberto="true"] { grid-template-rows: minmax(0, 1fr) auto auto auto; padding-top: 18px; }
  .painel[data-aberto="true"] .painel-corpo { max-height: none; margin-bottom: 4px; }
  .rotulo-foto, .painel-alca .rotulo-alca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .painel-alca, .foto { width: auto; min-height: 46px; padding: 0; flex-direction: column; gap: 2px; }
  .painel-alca .rotulo-curto, .foto .rotulo-curto { display: block; font: 11px/1 var(--corpo); letter-spacing: 0; }
  .foto .ic-foto { display: none; }
  .foto .ic-compartilhar { display: block; }
  .aprovar { min-height: 44px; padding: 0 8px; font-size: 16px; }
  .aprovar svg { width: 18px; height: 18px; }
  .painel[data-aberto="false"] .ajuste { display: none; }
}

/* ------------------------------------------------------------------ computador: painel na lateral. A ordem do painel
   e Versao, Cores, Luz, Movimento: as cores, que o cliente aprova junto com o desenho, nao ficam mais abaixo da dobra */
@media (min-width: 900px) and (min-height: 521px) {
  .app {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "topo painel" "palco painel" "vistas painel";
    transition: grid-template-columns 0.25s ease;
  }
  .app:has(.painel[data-aberto="false"]) { grid-template-columns: minmax(0, 1fr) 68px; }
  .topo { padding: 14px 22px 13px; }
  .titulo { font-size: 30px; }
  .sub { font-size: 14px; }
  .marca img { width: 40px; }
  .vistas { justify-content: center; padding: 10px 22px; }
  .painel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "alca" "corpo" "foto" "aprovar" "ajuste";
    row-gap: 10px; padding: 14px 18px 12px; border-left: var(--borda); min-height: 0; overflow: hidden;
  }
  .painel-corpo, .painel[data-aberto="true"] .painel-corpo { max-height: none; overflow-y: auto; margin: 0; border-bottom: 0; transition: none; visibility: visible; }
  .painel-alca { justify-content: flex-start; }
  .painel[data-aberto="true"] .painel-alca { background: transparent; color: var(--preto); }
  .ajuste { min-height: 30px; margin-top: -4px; }
  .painel[data-aberto="false"] { padding: 14px 9px; }
  .painel[data-aberto="false"] .painel-corpo,
  .painel[data-aberto="false"] .foto,
  .painel[data-aberto="false"] .aprovar,
  .painel[data-aberto="false"] .ajuste,
  .painel[data-aberto="false"] .rotulo-alca { display: none; }
  .painel[data-aberto="false"] .painel-alca { padding: 0; }
}