/* Catálogo de compatibilidade FullPro — folha única.
   Hierarquia sai de TAMANHO, CAIXA e COR. A FullPro Sans tem dois pesos reais
   (400 e 800): pedir 500/600/700 faz o navegador engordar o 400 na força bruta,
   e isso aparece como borrão na tela do balcão. */

@font-face{font-family:'FullPro Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/fullpro-sans-400.woff2') format('woff2')}
@font-face{font-family:'FullPro Sans';font-weight:800;font-style:normal;font-display:swap;
  src:url('fonts/fullpro-sans-800.woff2') format('woff2')}

:root{
  color-scheme: dark;
  --bg:#0a0a0b;
  --bg-soft:#121214;
  --bg-card:#16161a;
  --bg-elev:#1c1c22;
  --linha:#26262e;
  --linha-hi:#34343e;
  --texto:#f5f5f7;
  --texto-dim:#a1a1aa;
  --texto-fraco:#71717a;
  --marca:#ff2d2d;
  --marca-hi:#ff5252;
  --ok:#1fd27a;
  --aviso:#ffaa33;
  --perigo:#ff4d4d;
  --info:#5aa9ff;
  /* Espaçamento: 4 degraus, nada entre eles. Ritmo previsível é o que faz uma
     tela densa continuar legível. */
  --e1:6px; --e2:12px; --e3:20px; --e4:32px; --e5:48px;
  --raio:10px;
  --lateral:28px;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
/* [hidden] é regra do navegador e perde de qualquer classe com display:.
   Sem este !important, a tela de entrada continua desenhada por cima do app. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--texto);
  font-family:'FullPro Sans',system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--info); text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--marca); color:#fff}

/* ── barra superior ───────────────────────────────────────────────────── */
.topo{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--linha);
  padding-top:env(safe-area-inset-top);
}
.topo-linha{
  display:flex; align-items:center; gap:var(--e3);
  padding:14px var(--lateral); max-width:1240px; margin:0 auto;
}
.marca-logo{display:flex; align-items:baseline; gap:8px; flex-shrink:0}
.marca-logo b{font-weight:800; font-size:17px; letter-spacing:-.02em}
.marca-logo span{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto-fraco);
}
.nav{display:flex; gap:2px; margin-left:auto; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav button{
  background:none; border:0; cursor:pointer; white-space:nowrap;
  padding:8px 14px; border-radius:99px; color:var(--texto-dim);
  font-size:13.5px; letter-spacing:.01em;
}
.nav button:hover{color:var(--texto); background:var(--bg-elev)}
.nav button[aria-current="page"]{background:var(--texto); color:var(--bg)}
.nav .conta{
  margin-left:var(--e2); color:var(--texto-fraco); font-size:12px;
  display:flex; align-items:center; gap:8px;
}

main{max-width:1240px; margin:0 auto; padding:var(--e4) var(--lateral) var(--e5)}

/* ── tipografia de seção ──────────────────────────────────────────────── */
.secao{
  display:flex; align-items:baseline; gap:var(--e2);
  margin:0 0 var(--e3);
}
.secao h2{font-size:22px}
.secao .contagem{color:var(--texto-fraco); font-size:13px}
.rotulo{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-fraco);
}

/* ── busca (o eixo da ferramenta) ─────────────────────────────────────── */
.busca-caixa{position:relative; margin-bottom:var(--e3)}
.busca-caixa input{
  width:100%; background:var(--bg-soft); border:1px solid var(--linha);
  border-radius:var(--raio); padding:18px 18px 18px 50px;
  font-size:19px; letter-spacing:-.01em; outline:none;
}
.busca-caixa input:focus{border-color:var(--linha-hi); background:var(--bg-card)}
.busca-caixa input::placeholder{color:var(--texto-fraco)}
.busca-caixa .lupa{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  color:var(--texto-fraco); pointer-events:none; display:flex;
}
.busca-dica{color:var(--texto-fraco); font-size:12.5px; margin:-6px 0 var(--e3) 2px}

/* ── chips de filtro ──────────────────────────────────────────────────── */
.chips{display:flex; gap:var(--e1); flex-wrap:wrap; margin-bottom:var(--e3)}
.chips.rola{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.chips.rola::-webkit-scrollbar{display:none}
.chip{
  background:var(--bg-soft); border:1px solid var(--linha); color:var(--texto-dim);
  padding:6px 13px; border-radius:99px; cursor:pointer; font-size:13px;
  white-space:nowrap;
}
.chip:hover{border-color:var(--linha-hi); color:var(--texto)}
.chip[aria-pressed="true"]{background:var(--texto); border-color:var(--texto); color:var(--bg)}
.chip .n{opacity:.55; margin-left:6px; font-size:12px}

/* ── lista de resultados ──────────────────────────────────────────────── */
.grupo{margin-bottom:var(--e4)}
.grupo-topo{
  display:flex; align-items:baseline; gap:var(--e2);
  padding-bottom:var(--e1); border-bottom:1px solid var(--linha); margin-bottom:2px;
}
.grupo{--col-sku:13ch}
.linha{
  display:grid; grid-template-columns:var(--col-sku) 1fr auto;
  gap:var(--e3); align-items:center;
  padding:11px 10px 11px 2px; border-bottom:1px solid var(--bg-soft);
  cursor:pointer;
}
.linha:hover{background:var(--bg-soft); border-radius:8px; border-bottom-color:transparent}
.sku{
  font-family:var(--mono); font-size:13.5px; letter-spacing:-.02em;
  color:var(--texto); white-space:nowrap;
  /* a coluna é dimensionada pelo maior código do grupo (--col-sku, em ch do
     próprio monoespaçado). O overflow visível aqui seria invadir a descrição. */
  overflow:hidden; text-overflow:ellipsis;
}
.desc{color:var(--texto-dim); font-size:14px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.desc b{color:var(--texto); font-weight:400}
.meta{display:flex; gap:var(--e1); align-items:center; flex-shrink:0}

/* ── selo de ano e de atributo ────────────────────────────────────────── */
.selo{
  font-size:11.5px; padding:3px 9px; border-radius:6px; white-space:nowrap;
  background:var(--bg-elev); color:var(--texto-dim); border:1px solid var(--linha);
}
.selo.ano{font-family:var(--mono); letter-spacing:-.02em}
.selo.pos{background:#2a1f12; color:#ffc46b; border-color:#4a3418}
.selo.rev{background:#2b1414; color:#ff9b9b; border-color:#4d2020}
.selo.ok{background:#0f2a1c; color:#6ee7a8; border-color:#1c4732}
.selo.inf{background:#141d2b; color:#8fb9f0; border-color:#20334d}

/* ── grade: o cartão da planilha ──────────────────────────────────────── */
.grade{
  display:grid; gap:var(--e3);
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
}
.cartao{
  background:var(--bg-card); border:1px solid var(--linha); border-radius:12px;
  padding:var(--e3); display:flex; flex-direction:column; gap:var(--e2);
  cursor:pointer; transition:border-color .15s;
}
.cartao:hover{border-color:var(--linha-hi)}
.cartao-topo{display:flex; align-items:baseline; gap:var(--e2)}
.cartao-topo .sku{font-size:19px; letter-spacing:-.03em}
.cartao-topo .fam{margin-left:auto; flex-shrink:0}

/* faixa de fotos: fundo BRANCO porque a peça é recortada em branco e o desenho
   da pastilha é linha preta — no escuro ele sumiria */
.fotos{
  /* três colunas fixas: com `flex`, um produto de foto única virava um bloco
     branco do tamanho do cartão. Aqui a foto tem sempre o mesmo tamanho,
     tenha o produto uma ou três. */
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px;
}
.fotos figure{
  /* cinza claro, não branco: medido que 74% dos pixels da foto de bolha
     CRISTAL são quase brancos — em base branca a peça some. */
  margin:0; min-width:0; aspect-ratio:1; background:#eceef0;
  border-radius:8px; overflow:hidden; display:grid; place-items:center;
}
.fotos img{width:100%; height:100%; object-fit:contain; display:block}
.sem-foto{
  aspect-ratio:3.6; border:1px dashed var(--linha); border-radius:8px;
  display:grid; place-items:center; color:var(--texto-fraco); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase;
}

.especs{display:grid; grid-template-columns:auto 1fr; gap:3px var(--e2); font-size:12.5px}
.especs dt{color:var(--texto-fraco); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; align-self:center}
.especs dd{margin:0; color:var(--texto-dim); font-family:var(--mono); font-size:12px}

.motos{border-top:1px solid var(--linha); padding-top:var(--e2); margin-top:auto}
.motos .marca{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--texto-fraco); margin:var(--e2) 0 4px;
}
.motos .marca:first-child{margin-top:0}
.motos .moto{
  display:flex; align-items:baseline; gap:var(--e2);
  font-size:13.5px; padding:2px 0;
}
.motos .moto b{font-weight:400; color:var(--texto)}
.motos .moto .ano{
  margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--texto-dim);
  white-space:nowrap;
}
.motos .mais{color:var(--texto-fraco); font-size:12.5px; padding-top:6px}

/* ── alternador lista/grade ───────────────────────────────────────────── */
.visao{display:inline-flex; border:1px solid var(--linha); border-radius:8px; overflow:hidden}
.visao button{
  background:none; border:0; cursor:pointer; padding:5px 12px;
  font-size:12.5px; color:var(--texto-dim);
}
.visao button[aria-pressed="true"]{background:var(--texto); color:var(--bg)}

@media (max-width:900px){
  .grade{grid-template-columns:1fr}
}

/* ── vazio / carregando ───────────────────────────────────────────────── */
.vazio{
  text-align:center; padding:var(--e5) var(--e3); color:var(--texto-fraco);
}
.vazio b{display:block; color:var(--texto-dim); font-weight:400; font-size:16px; margin-bottom:6px}

/* ── painel lateral (detalhe/edição) ──────────────────────────────────── */
.sombra{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:50;
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.sombra.aberta{opacity:1; pointer-events:auto}
.painel{
  position:fixed; top:0; right:0; bottom:0; width:min(560px,100%);
  background:var(--bg-card); border-left:1px solid var(--linha); z-index:51;
  transform:translateX(100%); transition:transform .22s cubic-bezier(.32,.72,0,1);
  display:flex; flex-direction:column; overflow:hidden;
}
.painel.aberto{transform:none}
.painel-topo{
  display:flex; align-items:flex-start; gap:var(--e2);
  padding:var(--e3) var(--e3) var(--e2); border-bottom:1px solid var(--linha);
}
.painel-topo h3{font-size:19px; font-family:var(--mono); letter-spacing:-.02em}
.painel-corpo{flex:1; overflow-y:auto; padding:var(--e3)}
.painel-pe{
  padding:var(--e2) var(--e3); border-top:1px solid var(--linha);
  display:flex; gap:var(--e1); justify-content:flex-end;
  padding-bottom:calc(var(--e2) + env(safe-area-inset-bottom));
}

/* ── confirmação: elemento próprio, por cima do painel ─────────────────── */
.confirma{
  position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  background:rgba(0,0,0,.62); padding:var(--e3);
}
.confirma-caixa{
  background:var(--bg-elev); border:1px solid var(--linha-hi); border-radius:14px;
  padding:var(--e3); width:100%; max-width:400px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}

/* ── formulário: sem caixa em volta, divisor separa ───────────────────── */
.campo{display:block; margin-bottom:var(--e3)}
.campo > span{display:block; margin-bottom:6px; font-size:12.5px; color:var(--texto-dim)}
.campo input, .campo select, .campo textarea{
  width:100%; background:var(--bg-soft); border:1px solid var(--linha);
  border-radius:8px; padding:10px 12px; font-size:16px; outline:none;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{border-color:var(--linha-hi)}
.campo textarea{min-height:76px; resize:vertical}
.dupla{display:grid; grid-template-columns:1fr 1fr; gap:var(--e2)}
.divisor{height:1px; background:var(--linha); margin:var(--e3) 0}

/* ── botões ───────────────────────────────────────────────────────────── */
.btn{
  background:var(--bg-elev); border:1px solid var(--linha); color:var(--texto);
  padding:9px 16px; border-radius:8px; cursor:pointer; font-size:14px;
}
.btn:hover{border-color:var(--linha-hi); background:var(--linha)}
.btn.principal{background:var(--texto); color:var(--bg); border-color:var(--texto)}
.btn.principal:hover{background:#fff}
.btn.perigo{color:var(--perigo)}
.btn.perigo:hover{background:#2b1414; border-color:#4d2020}
.btn.fantasma{background:none; border-color:transparent; color:var(--texto-dim)}
.btn.fantasma:hover{color:var(--texto); background:var(--bg-elev)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.pequeno{padding:5px 11px; font-size:12.5px}

/* ── faixa de anos: a linha do tempo que mostra buraco e sobreposição ─── */
.faixa{position:relative; height:6px; background:var(--bg-soft); border-radius:99px; overflow:hidden}
.faixa i{position:absolute; top:0; bottom:0; background:var(--info); opacity:.75; border-radius:99px}
.faixa i.dupla{background:var(--aviso)}
.faixa-eixo{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:10px; color:var(--texto-fraco); margin-top:3px;
}

/* ── avisos: sem barra colorida na lateral ────────────────────────────── */
.nota{
  background:var(--bg-soft); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--e2) var(--e3); font-size:13.5px; color:var(--texto-dim);
  margin-bottom:var(--e3);
}
.nota b{color:var(--texto); font-weight:400}

/* ── entrada ──────────────────────────────────────────────────────────── */
.entrar{
  min-height:100dvh; display:grid; place-items:center; padding:var(--e3);
}
.entrar-caixa{width:100%; max-width:330px}
.entrar-caixa .marca-logo{margin-bottom:var(--e4)}
.entrar-caixa .marca-logo b{font-size:26px}

/* ── aviso flutuante ──────────────────────────────────────────────────── */
#avisos{
  position:fixed; z-index:80; left:50%; transform:translateX(-50%);
  bottom:calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none; width:calc(100% - 32px); max-width:420px;
}
.aviso-bolha{
  background:var(--bg-elev); border:1px solid var(--linha-hi); color:var(--texto);
  padding:11px 17px; border-radius:99px; font-size:13.5px;
  box-shadow:0 8px 28px rgba(0,0,0,.5); animation:sobe .2s;
}
.aviso-bolha.erro{border-color:#5a2222; color:#ffb4b4}
.aviso-bolha.ok{border-color:#1c4732; color:#8ff0bd}
@keyframes sobe{from{opacity:0; transform:translateY(8px)}}

/* ── tabela simples (motos, histórico) ────────────────────────────────── */
.tabela{width:100%; border-collapse:collapse}
.tabela th{
  text-align:left; font-weight:400; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--texto-fraco);
  padding:0 10px var(--e1) 2px; border-bottom:1px solid var(--linha);
}
.tabela td{padding:10px; border-bottom:1px solid var(--bg-soft); font-size:14px}
.tabela tr:hover td{background:var(--bg-soft)}
.tabela td:first-child, .tabela th:first-child{padding-left:2px}

/* ── sugestão de campo (autocompletar) ────────────────────────────────── */
.sugestoes{
  position:absolute; z-index:60; left:0; right:0; top:100%; margin-top:4px;
  background:var(--bg-elev); border:1px solid var(--linha-hi); border-radius:8px;
  max-height:240px; overflow-y:auto; box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.sugestoes div{padding:9px 12px; cursor:pointer; font-size:14px}
.sugestoes div:hover, .sugestoes div.marcado{background:var(--linha)}
.rel{position:relative}

/* ── celular ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  :root{--lateral:16px; --e4:24px}
  .topo-linha{flex-wrap:wrap; gap:var(--e2); padding:12px var(--lateral)}
  .nav{width:100%; margin-left:0; order:3}
  .nav .conta{display:none}
  .linha{grid-template-columns:1fr; gap:4px; padding:12px 2px}
  .linha .meta{margin-top:2px}
  .desc{white-space:normal}
  .busca-caixa input{font-size:17px; padding:15px 15px 15px 46px}
  .dupla{grid-template-columns:1fr}
  .painel{width:100%; top:auto; height:92dvh; border-left:0;
    border-top:1px solid var(--linha); border-radius:16px 16px 0 0;
    transform:translateY(100%)}
  .painel.aberto{transform:none}
}
@media print{
  .topo,.painel,.sombra,#avisos,.chips,.busca-caixa{display:none !important}
  body{background:#fff; color:#000}
  .linha{break-inside:avoid}
}