/* ============================================================
   GLASS ÂMBAR — camada visual final.
   Carregue ESTE arquivo depois de base, layout, componentes e
   splash. Ele não muda a estrutura, só a pele: vidro fosco com
   blur(18px), cantos arredondados generosos, sombras suaves e
   âmbar contido. Sem scanlines, sem recortes angulares HUD.
   Fontes locais em ../fonts, declaradas em base.css.
   ============================================================ */

/* ---------- fundo limpo ---------- */
body {
  position: relative;
  background: var(--fundo);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--vidro), transparent 240px);
  opacity: 0.5;
}
#app {
  position: relative;
  z-index: 1;
}

/* ---------- transição de tela: fade + leve zoom (spec §6) ----------
   Refina o `entrar` de componentes.css para o V2: nova tela surge
   crescendo ~4px (scale 0.99 + translateY 4px) com fade, ~280ms via
   tokens --t-media / --e-entrada. CSS puro (sem timer JS): o roteador
   marca [data-tela-nova] e o atributo sai no animationend. Por carregar
   depois de componentes.css, esta definição vence a cascata. */
@keyframes entrar {
  from { opacity: 0; transform: scale(0.99) translateY(4px); }
  to   { opacity: 1; transform: none; }
}
[data-tela-nova] {
  animation: entrar var(--t-media) var(--e-entrada) both;
}

/* ---------- tipografia ---------- */
.painel-titulo-tela,
.detalhe-nome,
.janela-titulo,
.card-nome,
.servico-nome,
.oferta-nome,
label,
.painel-numero-rotulo,
.detalhe-secao-titulo,
.painel-pg-titulo,
.servico-preco-rotulo,
.situacao-editor-rotulo,
.pesquisa-origem {
  font-family: var(--font-display);
}
.painel-numero-valor,
.detalhe-preco,
.card-preco,
.servico-preco-valor,
.barra-total,
.valor-bloco .numero,
.oferta-preco,
.item-sub,
.h-total,
.painel-dias,
.painel-pg-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.painel-numero-valor,
.detalhe-preco,
.card-preco,
.servico-preco-valor,
.barra-total,
.valor-bloco.destaque .numero,
.oferta-preco {
  color: var(--acento);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- vidro fosco: blur(18px), raios generosos, sombra quente ---------- */
.cartao,
.painel-numero,
.card-produto,
.servico-card,
.oferta,
.historico-item,
.vazio,
.vazio-inline,
.detalhe-produto,
.detalhe-item,
.situacao-caixa,
.pagamento-caixa,
.janela-servico-caixa,
.galeria-caixa,
.situacao-item,
.painel-pg-item,
.painel-alerta,
.remover-confirmar,
.situacao-derivada,
.painel-pg-quitado,
.painel-pg-vazio,
.toast,
.pesquisa-lista > div {
  position: relative;
  border-radius: var(--raio) !important;
  border: 1px solid var(--borda);
  background: var(--superficie-1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--elev-1);
  transition: transform 0.2s var(--e-saida), border-color 0.2s var(--e-saida), box-shadow 0.2s var(--e-saida);
}
.card-produto:hover,
.servico-card:hover,
.painel-numero:hover,
.oferta:hover,
.historico-item:hover,
.situacao-item:hover,
.painel-pg-item:hover {
  transform: translateY(-3px);
  border-color: var(--borda-forte);
  box-shadow: var(--elev-2);
}

/* ---------- botões arredondados ---------- */
.btn-primario,
.btn-secundario,
.btn-wa,
.painel-chip,
.lat-sair,
.remover-confirmar button,
.splash-erro button {
  border-radius: var(--raio) !important;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-display);
}
.btn-primario,
.btn-wa {
  background: var(--acento);
  color: var(--texto-sobre-acento);
  box-shadow: var(--elev-1);
  transition: box-shadow 0.2s var(--e-saida), filter 0.2s var(--e-saida);
}
.btn-primario:hover,
.btn-wa:hover {
  filter: brightness(1.05);
  box-shadow: var(--elev-2);
}
.btn-secundario {
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2);
  color: var(--acento-2);
}
.btn-secundario:hover {
  border-color: var(--acento);
  box-shadow: var(--elev-1);
}

/* ---------- elementos ativos ---------- */
.aba.ativa {
  background: var(--acento);
  color: var(--texto-sobre-acento);
  box-shadow: var(--elev-1);
}
.painel-chip[data-ativa="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--texto-sobre-acento);
  box-shadow: var(--elev-1);
}
.lat-nav a.ativo {
  color: var(--acento);
  background: var(--vidro-forte);
  box-shadow: inset 3px 0 0 var(--acento);
  opacity: 1;
}
.situacao-item[data-marcada="true"],
.situacao-editor-item[data-marcada="true"],
.historico-item.ativo {
  border-color: var(--acento);
  box-shadow: var(--elev-1);
}
.historico-item.ativo {
  box-shadow: inset 3px 0 0 var(--acento);
}

/* ---------- inputs com foco limpo ---------- */
input:focus,
select:focus,
textarea:focus,
.item-editor-texto:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--brilho-ambar-suave);
}

/* ---------- lateral e barra inferior ---------- */
.lateral {
  border-right: 1px solid var(--borda);
  box-shadow: var(--elev-2);
}
.barra-servicos {
  border-top: 1px solid var(--borda-forte);
  box-shadow: var(--elev-2);
}
.lat-arte,
.cartao-marca {
  box-shadow: var(--elev-1);
}

/* ---------- toast e aviso offline ---------- */
.toast {
  font-size: 13px;
  border-radius: var(--raio) !important;
  box-shadow: var(--elev-2);
}
.toast-ok {
  background: var(--fundo-sucesso-forte);
  color: var(--sucesso);
  border-color: var(--sucesso);
}
.toast-erro {
  background: var(--fundo-perigo);
  color: var(--perigo);
  border-color: var(--perigo);
}
.aviso-offline {
  border-radius: var(--raio) !important;
  border-color: var(--borda-forte);
  background: var(--superficie-1);
  box-shadow: var(--elev-1);
}

/* ---------- links e scrollbar ---------- */
a {
  color: var(--acento-2);
}
.oferta-link {
  font-family: var(--font-mono);
  font-size: 11px;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--acento) var(--superficie-1);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: var(--acento);
  border-radius: 999px;
}
*::-webkit-scrollbar-track {
  background: var(--superficie-1);
}

/* ---------- efeito 3D de tilt (js/tilt.js) ---------- */
.cc-card3d {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.2s var(--e-saida), box-shadow 0.2s var(--e-saida);
}
.ng-card-3d {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.2s var(--e-saida), box-shadow 0.2s var(--e-saida);
}
.cc-card3d .z10 { transform: translateZ(10px); }
.cc-card3d .z20 { transform: translateZ(20px); }
.cc-card3d .z30 { transform: translateZ(30px); }
.ng-card-3d:hover {
  box-shadow: var(--elev-3);
}

/* Foco visível. */
.servico-card:focus-visible,
.card-produto:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
.btn-primario:focus-visible,
.btn-secundario:focus-visible,
.btn-wa:focus-visible,
.painel-chip:focus-visible,
.lat-sair:focus-visible,
.remover-confirmar button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* ---------- impressao: efeitos de tela somem ---------- */
@media print {
  body::before,
  body::after {
    display: none !important;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body::after {
    display: none;
  }
  .btn-primario,
  .btn-wa,
  .aba.ativa,
  .painel-chip[data-ativa="true"] {
    box-shadow: none;
  }
  .ng-card-3d {
    transform: none !important;
    will-change: auto;
  }
  .cc-card3d {
    transform: none !important;
    will-change: auto;
  }
  /* V2: entrada da tela é instantânea sem zoom/fade. */
  [data-tela-nova] {
    animation: none !important;
  }
}