/* ===========================================================
   CRM — painel de estoque

   O painel veste a marca DO CLIENTE, não a da EM Digital. A cor
   e o logo vêm da tabela `lojas`, e o app.js aplica em cima das
   variáveis abaixo. Um código só, N identidades: a Bethel abre
   azul, o próximo cliente abre na cor dele.

   O verde aqui é só o padrão de quando a loja não tem cor definida.

   FEITO PRIMEIRO PRO CELULAR. O dono usa em pé, no pátio, com
   uma mão só. Desktop é o caso raro.
   =========================================================== */
:root{
  --preto:#070B0A;      /* fundo */
  --preto-2:#0E1312;    /* superfície */
  --preto-3:#171E1C;    /* superfície hover / elevada */
  --superf:#121817;     /* card ativo */

  /* trocadas em tempo de execução pelo app.js, com a cor da loja */
  --marca:#0151F9;
  --marca-fundo:rgba(1,81,249,.14);
  /* preto ou branco, calculado pelo brilho da cor da marca. Cor escura
     (o azul da Bethel) pede texto branco no botão; cor clara pede preto. */
  --marca-texto:#FFFFFF;

  --branco:#F7F9F8;
  --cinza:#A6AFAC;
  --cinza-2:#737D79;
  --linha:#252D2B;
  --vermelho:#FF4D4F;
  --amarelo:#FFB800;
  --azul:#448AFF;
  --verde:#20D66B;
  --r:12px;
  --r-lg:16px;
  --sombra:0 16px 40px rgba(0,0,0,.28);
  --toque:44px;   /* nada clicável abaixo disso. dedo não é mouse. */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--preto); color:var(--branco);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.oculto{display:none !important}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--toque); padding:0 20px; border-radius:100px;
  background:var(--marca); color:var(--marca-texto);
  font-weight:700; font-size:15px; white-space:nowrap;
  transition:transform .12s, opacity .12s;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}
.btn.fantasma{background:transparent;color:var(--branco);box-shadow:inset 0 0 0 1px var(--linha)}
.btn.perigo{background:transparent;color:var(--vermelho);box-shadow:inset 0 0 0 1px rgba(255,91,91,.4)}
.btn.largo{width:100%}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:30;
  background:rgba(10,12,10,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linha);
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top));
  display:flex;align-items:center;gap:12px;
}
.marca-cx{min-width:0}
.topo .marca{font-weight:800;font-size:15px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo .marca .v{color:var(--marca)}
.topo .loja{font-size:11px;color:var(--cinza-2);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
/* logo do cliente. altura fixa, largura livre: serve tanto logo redonda
   (Bethel) quanto wordmark deitado, sem eu saber qual vem. */
.logo-img{height:44px;width:auto;max-width:190px;object-fit:contain}
.login .logo-img{height:72px;max-width:100%}
.topo .dir{margin-left:auto;display:flex;align-items:center;gap:8px}
.icone-btn{
  width:var(--toque);height:var(--toque);border-radius:50%;
  display:grid;place-items:center;color:var(--cinza);
}
.icone-btn:active{background:var(--preto-3)}
.icone-btn svg{width:20px;height:20px}

.tela{max-width:900px;margin:0 auto;padding:16px}

/* ---------- login ---------- */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-cx{width:100%;max-width:380px}
.login h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:20px 0 6px}
.login p{color:var(--cinza);font-size:14px;margin-bottom:28px}
.login .logo{font-size:28px;font-weight:800}
.login .logo .v{color:var(--marca)}

/* ---------- campos ---------- */
.campo{margin-bottom:16px}
.campo label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cinza-2);margin-bottom:7px;
}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:var(--toque);
  background:var(--preto-2);border:1px solid var(--linha);border-radius:12px;
  padding:12px 14px;
  /* 16px trava o zoom automático do iOS ao focar. abaixo disso a tela pula. */
  font-size:16px;
}
.campo textarea{min-height:110px;resize:vertical;line-height:1.55}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--marca);background:var(--preto-3);
}
.campo .dica{font-size:12px;color:var(--cinza-2);margin-top:6px}
.campo .dica b{color:var(--cinza)}
.linha-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* obrigatório ao lado do label */
.req{color:var(--marca);font-weight:700;font-size:9px;letter-spacing:.08em;
     text-transform:uppercase;margin-left:8px;vertical-align:middle}
.secao h2 .opt{color:var(--cinza-2);font-weight:600;text-transform:none;letter-spacing:0;font-size:11px;margin-left:6px}

/* ---------- chips (categoria, câmbio, etc.) ----------
   Botão que ele toca, no lugar de dropdown. Vê todas as opções de uma
   vez e escolhe com o dedo. No celular é mais fácil que abrir um menu. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  min-height:44px;padding:0 18px;border-radius:100px;
  background:var(--preto-2);box-shadow:inset 0 0 0 1px var(--linha);
  color:var(--cinza);font-size:14px;font-weight:600;transition:transform .1s;
}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--marca);color:var(--marca-texto);box-shadow:none}
.chips.status .chip{flex:1;min-width:74px}

/* ===========================================================
   DASHBOARD (tela de estoque)
   Desktop: 3 colunas — menu | lista | resumo.
   Vira 1 coluna com menu inferior no celular.
   =========================================================== */
.app{display:grid;grid-template-columns:224px minmax(0,1fr) 300px;min-height:100dvh}

/* ---- menu lateral ---- */
.side{
  position:sticky;top:0;height:100dvh;
  border-right:1px solid var(--linha);background:var(--preto);
  display:flex;flex-direction:column;padding:20px 14px;
}
.side-logo{display:flex;align-items:center;justify-content:center;min-height:82px;padding:4px 6px 12px}
.side-logo .logo-img{height:72px;max-width:100%}
.side-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza-2);padding:0 12px 8px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;
  min-height:46px;padding:0 12px;border-radius:10px;position:relative;
  color:var(--cinza);font-size:14.5px;font-weight:600;text-align:left;transition:background .16s,color .16s;
}
.nav-item svg{width:20px;height:20px;flex:none}
.nav-item:hover{background:var(--preto-2);color:var(--branco)}
.nav-item.on{background:var(--superf);color:#fff}
.nav-item.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--marca)}
.nav-item.on svg{color:var(--marca)}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--linha)}
.side-ava{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--marca-fundo);color:var(--marca);font-size:12px;font-weight:800}
.side-store{min-width:0;flex:1}
.side-store .n{display:block;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-store .s{display:block;font-size:11px;color:var(--cinza-2)}

/* ---- coluna central ---- */
.main{min-width:0;padding:22px 26px 40px}
.head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.head-t h1{font-size:24px;font-weight:800;letter-spacing:-.02em}
.head-t p{color:var(--cinza-2);font-size:14px;margin-top:3px}
.head-r{margin-left:auto;display:flex;align-items:center;gap:12px}
.busca-box{position:relative}
.busca-box svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--cinza-2)}
.busca-box input{
  width:320px;max-width:42vw;min-height:44px;background:var(--preto-2);
  border:1px solid var(--linha);border-radius:100px;padding:0 16px 0 42px;font-size:14.5px;
}
.busca-box input:focus{outline:none;border-color:var(--marca)}

/* ---- filtros / ordenar / vista ---- */
.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
/* flex:0 1 auto (não cresce): as pills ocupam a largura natural e o
   ordenar/vista sentam do lado, sem cortar a última pill. Em tela estreita
   encolhem e rolam na horizontal. */
.abas{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:0 1 auto;min-width:0;padding-bottom:2px}
.abas::-webkit-scrollbar{display:none}
.aba{
  min-height:38px;padding:0 15px;border-radius:100px;white-space:nowrap;
  background:var(--preto-2);border:1px solid var(--linha);
  font-size:13px;font-weight:600;color:var(--cinza);
}
.aba.on{background:var(--marca);color:var(--marca-texto);border-color:transparent}
.aba .n{opacity:.65;margin-left:6px;font-weight:800}
.controls-r{display:flex;align-items:center;gap:10px;margin-left:auto}
.sort{position:relative;display:flex;align-items:center}
.sort select{
  min-height:40px;background:var(--preto-2);border:1px solid var(--linha);
  border-radius:10px;padding:0 34px 0 14px;font-size:13.5px;color:var(--branco);appearance:none;cursor:pointer;
}
.sort::after{content:"";position:absolute;right:15px;top:44%;width:7px;height:7px;
  border-right:2px solid var(--cinza-2);border-bottom:2px solid var(--cinza-2);
  transform:translateY(-50%) rotate(45deg);pointer-events:none}
.vistas{display:flex;background:var(--preto-2);border:1px solid var(--linha);border-radius:10px;padding:3px;gap:2px}
.vistas button{min-height:34px;padding:0 12px;border-radius:8px;color:var(--cinza-2);font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.vistas button svg{width:16px;height:16px}
.vistas button.on{background:var(--superf);color:#fff}

/* ---- lista ---- */
.lista{display:flex;flex-direction:column;gap:12px}
.carro{
  display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:16px;align-items:center;
  background:var(--preto-2);border:1px solid var(--linha);border-radius:var(--r-lg);
  padding:12px;position:relative;transition:border-color .16s;
}
.carro:hover{border-color:#313B38}
.carro-foto{
  position:relative;width:150px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;
  background:var(--preto-3);display:grid;place-items:center;text-align:left;
}
.carro-foto img{width:100%;height:100%;object-fit:cover}
.carro-foto .semfoto{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--cinza-2);font-size:11px;font-weight:600}
.carro-foto .semfoto svg{width:22px;height:22px}
.foto-n{
  position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:4px;
  background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;
  padding:3px 7px;border-radius:100px;
}
.foto-n svg{width:12px;height:12px}
.carro-main{min-width:0;text-align:left}
.carro-main .nm{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:6px 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.specs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--cinza);font-size:13px}
.specs span{display:inline-flex;align-items:center;gap:5px}
.specs span.nd{color:var(--cinza-2)}
.specs svg{width:14px;height:14px;color:var(--cinza-2)}
.specs .dot{width:3px;height:3px;border-radius:50%;background:var(--cinza-2);opacity:.6}
.sub{margin-top:9px;font-size:12px;color:var(--cinza-2);display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.sub .cod{font-weight:700;color:var(--cinza);letter-spacing:.02em}
.carro-dir{display:flex;flex-direction:column;align-items:flex-end;gap:5px;padding-right:4px;position:relative}
.carro-dir .pr{font-size:19px;font-weight:800;letter-spacing:-.01em}
.carro-dir .pr.sem{font-size:14px;font-weight:600;color:var(--cinza-2)}
.pr-sec{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700}
.pr-sec svg{width:14px;height:14px}
.pr-sec.destaque,.pr-sec.ok{color:var(--verde)}
.pr-sec.reservado{color:var(--azul)}
.pr-sec.vendido{color:var(--vermelho)}
.pr-sec.pend{color:var(--amarelo)}
.kebab{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--cinza-2);margin-top:2px}
.kebab:hover{background:var(--preto-3);color:#fff}
.kebab svg{width:18px;height:18px}
.menu{
  position:absolute;top:38px;right:0;z-index:40;min-width:196px;
  background:var(--preto-3);border:1px solid var(--linha);border-radius:12px;box-shadow:var(--sombra);padding:6px;
}
.menu button{
  display:flex;align-items:center;gap:10px;width:100%;min-height:42px;
  padding:0 10px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--branco);text-align:left;
}
.menu button:hover{background:var(--preto-2)}
.menu button svg{width:16px;height:16px;color:var(--cinza);flex:none}
.menu button.rm,.menu button.rm svg{color:var(--vermelho)}
.menu .sep{height:1px;background:var(--linha);margin:5px 6px}
.carro.vendido .carro-foto img{opacity:.42}

/* grade */
.lista.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
.lista.grade .carro{grid-template-columns:1fr;align-items:stretch}
.lista.grade .carro-foto{width:100%}
.lista.grade .carro-dir{flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding-right:0}

/* tags de status (semáforo, não segue a marca) */
.tag{
  display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:100px;
}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.rascunho  {background:rgba(255,184,0,.13);  color:var(--amarelo)}
.tag.disponivel{background:rgba(32,214,107,.12); color:var(--verde)}
.tag.reservado {background:rgba(68,138,255,.13); color:var(--azul)}
.tag.vendido   {background:rgba(255,77,79,.13);  color:var(--vermelho)}

.lista-foot{text-align:center;color:var(--cinza-2);font-size:13px;padding:22px 0 4px}

/* estados vazios / erro */
.vazio-tela{text-align:center;padding:60px 20px;color:var(--cinza-2)}
.vazio-tela .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin:0 auto 16px;background:var(--preto-2);border:1px solid var(--linha)}
.vazio-tela .ic svg{width:26px;height:26px;color:var(--cinza-2)}
.vazio-tela h3{color:var(--branco);font-size:17px;margin-bottom:8px}
.vazio-tela p{font-size:14px;margin-bottom:20px;line-height:1.6;max-width:340px;margin-left:auto;margin-right:auto}

/* skeleton */
.sk{display:flex;flex-direction:column;gap:12px}
.sk-row{height:174px;border-radius:var(--r-lg);background:var(--preto-2);border:1px solid var(--linha);position:relative;overflow:hidden}
.sk-row::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);transform:translateX(-100%);animation:sk 1.3s infinite}
@keyframes sk{to{transform:translateX(100%)}}

/* ---- coluna resumo ---- */
.resumo{position:sticky;top:0;height:100dvh;overflow-y:auto;border-left:1px solid var(--linha);padding:22px 20px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--preto-2);border:1px solid var(--linha);border-radius:var(--r-lg);padding:18px}
.card h3{font-size:14px;font-weight:800;margin-bottom:14px}
.card h4{font-size:13.5px;font-weight:800;margin-bottom:6px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric{background:var(--preto);border:1px solid var(--linha);border-radius:12px;padding:12px 14px}
.metric .v{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1}
.metric .l{font-size:12px;color:var(--cinza-2);margin-top:5px}
.metric.total .v{color:var(--branco)}
.metric.disponivel .v{color:var(--verde)}
.metric.reservado .v{color:var(--azul)}
.metric.rascunho .v{color:var(--amarelo)}
.metric.vendido .v{color:var(--vermelho)}
.dica-card{display:flex;flex-direction:column}
.dica-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--marca-fundo);color:var(--marca);margin-bottom:10px}
.dica-ic svg{width:18px;height:18px}
.dica-card p{color:var(--cinza);font-size:13px;line-height:1.55}
.acoes-card{display:flex;flex-direction:column;gap:2px}
.acao-item{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 8px;border-radius:10px;color:var(--branco);font-size:13.5px;font-weight:600;text-align:left;width:100%}
.acao-item:hover{background:var(--preto-3)}
.acao-item .ai{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--preto);border:1px solid var(--linha);color:var(--cinza)}
.acao-item .ai svg{width:16px;height:16px}
.acao-item .txt2{min-width:0}
.acao-item .sub2{font-size:11.5px;color:var(--cinza-2);font-weight:500}
.acao-item .ext{margin-left:auto;color:var(--cinza-2)}
.acao-item .ext svg{width:15px;height:15px}

/* ---- menu inferior (só celular) ---- */
.bottom{display:none}

/* ---------- fotos ---------- */
.fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:600px){.fotos{grid-template-columns:repeat(4,1fr)}}
.foto-cel{
  position:relative;aspect-ratio:4/3;border-radius:11px;overflow:hidden;
  background:var(--preto-3);border:1px solid var(--linha);
}
.foto-cel img{width:100%;height:100%;object-fit:cover}
.foto-cel .capa{
  position:absolute;top:5px;left:5px;background:var(--marca);color:var(--marca-texto);
  font-size:9px;font-weight:800;letter-spacing:.06em;padding:2px 6px;border-radius:100px;
}
.foto-cel .acoes{position:absolute;inset:auto 0 0 0;display:flex;background:rgba(10,12,10,.86)}
.foto-cel .acoes button{flex:1;height:32px;font-size:11px;font-weight:700;color:var(--branco)}
.foto-cel .acoes button:active{background:rgba(255,255,255,.1)}
.foto-cel .acoes .rm{color:var(--vermelho)}
.foto-cel.subindo{display:grid;place-items:center}
.foto-add{
  aspect-ratio:4/3;border-radius:11px;display:grid;place-items:center;gap:4px;
  border:1.5px dashed var(--linha);color:var(--cinza-2);font-size:11px;font-weight:600;
}
.foto-add:active{border-color:var(--marca);color:var(--marca)}
.foto-add svg{width:22px;height:22px}

/* carro sem foto nenhuma: área grande e óbvia, não um "+" pequeno.
   é a primeira coisa que o dono faz no pátio. */
.foto-vazia{
  grid-column:1 / -1;min-height:150px;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1.6px dashed var(--linha);color:var(--cinza);text-align:center;padding:16px;
}
.foto-vazia:active{border-color:var(--marca)}
.foto-vazia svg{width:34px;height:34px;color:var(--marca)}
.foto-vazia b{font-size:15.5px;color:var(--branco);font-weight:700}
.foto-vazia span{font-size:12.5px;color:var(--cinza-2)}
.barrinha{width:70%;height:3px;background:var(--preto);border-radius:3px;overflow:hidden}
.barrinha i{display:block;height:100%;background:var(--marca);transition:width .2s}

/* ---------- editor ---------- */
.secao{margin-bottom:26px}
.secao h2{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marca);margin-bottom:12px;
}
.rodape-fixo{
  position:sticky;bottom:0;z-index:20;
  background:rgba(10,12,10,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--linha);
  padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom));
  display:flex;gap:10px;
}
.rodape-fixo .btn{flex:1}

/* ---------- aviso ---------- */
.aviso{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:60;background:var(--preto-3);border:1px solid var(--linha);
  border-radius:100px;padding:11px 20px;font-size:13.5px;font-weight:600;
  box-shadow:0 12px 40px rgba(0,0,0,.6);max-width:90vw;text-align:center;
  animation:sobe .22s ease-out;
}
.aviso.ok{border-color:rgba(32,214,107,.5);color:var(--verde)}
.aviso.erro{border-color:rgba(255,77,79,.5);color:var(--vermelho)}
@keyframes sobe{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

.carregando{display:grid;place-items:center;padding:60px;color:var(--cinza-2)}
.girando{
  width:26px;height:26px;border:2.5px solid var(--linha);
  border-top-color:var(--marca);border-radius:50%;animation:gira .7s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* foco visível de teclado (acessibilidade) */
:focus-visible{outline:2px solid var(--marca);outline-offset:2px;border-radius:6px}

/* ===========================================================
   RESPONSIVO
   =========================================================== */

/* tablet: some a coluna de resumo pro fim, menu vira só ícones */
@media (max-width:1180px){
  .app{grid-template-columns:64px minmax(0,1fr)}
  .side{padding:16px 8px}
  .side-logo{justify-content:center;padding:0 0 10px}
  .side-logo .logo-img{height:36px}
  .side-lbl{display:none}
  .nav-item{justify-content:center;padding:0}
  .nav-item .lbl{display:none}
  .nav-item.on::before{left:-8px}
  .side-store{display:none}
  .side-foot{justify-content:center}
  .resumo{grid-column:1 / -1;position:static;height:auto;overflow:visible;
    border-left:0;border-top:1px solid var(--linha);
    flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .resumo .card{flex:1;min-width:250px}
  .resumo .metrics{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
}

/* celular: sem menu lateral, menu inferior fixo, tudo em coluna */
@media (max-width:768px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:16px 14px 22px}
  .head{gap:12px}
  .head-r{margin-left:0;width:100%}
  .busca-box{flex:1}
  .busca-box input{width:100%;max-width:none}
  /* "Adicionar" já está no menu inferior; some do cabeçalho pra dar a
     largura toda pra busca e não cortar o botão. */
  .head-r .btn{display:none}
  .controls{gap:10px}
  .controls-r{width:100%;justify-content:space-between}
  .sort select{width:100%}
  .sort{flex:1}

  /* card vertical */
  .carro{grid-template-columns:1fr;gap:12px}
  .carro-foto{width:100%;aspect-ratio:16/10}
  .carro-dir{flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding-right:0}
  .menu{top:auto;bottom:44px}

  .resumo{grid-column:1 / -1;position:static;height:auto;overflow:visible;
    border-left:0;border-top:1px solid var(--linha);margin-top:6px}

  /* menu inferior */
  .bottom{
    position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
    background:rgba(7,11,10,.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--linha);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bottom button{
    flex:1;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;color:var(--cinza-2);font-size:10px;font-weight:600;
  }
  .bottom button svg{width:22px;height:22px}
  .bottom button.on{color:var(--marca)}
  /* espaço pro menu inferior não cobrir o último card */
  #telaLista{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}