/* ============================================================
   Catálogo de coleção — estilo base
   Tema escuro, fonte do sistema, acento âmbar de CRT.
   ============================================================ */

:root {
  --bg: #12131a;
  --bg-card: #1b1d27;
  --bg-input: #22242f;
  --borda: #2e3140;
  --texto: #e8e9ef;
  --texto-fraco: #9a9db0;
  --acento: #ffb347;
  --acento-escuro: #7a5418;
  --verde: #4ade80;
  --vermelho: #f87171;
  --raio: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 4rem;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 16px; }

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 1rem; }

/* ---------------------------------------------------- Topo */

.topo {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding: 0.9rem 16px;
  border-bottom: 1px solid var(--borda);
  background: #0e0f15;
}
.marca { color: var(--texto); font-weight: 700; letter-spacing: -0.01em; }
.marca small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--texto-fraco); }
.topo nav { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.92rem; }

/* ---------------------------------------------------- Resumo */

.resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--borda);
  border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; margin-bottom: 1.25rem;
}
.resumo div { background: var(--bg-card); padding: 0.9rem 1rem; }
.resumo strong { display: block; font-size: 1.35rem; color: var(--acento); }
.resumo span { font-size: 0.8rem; color: var(--texto-fraco); }

/* ---------------------------------------------------- Formulários */

.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.filtros input[type="search"] { flex: 1 1 220px; }

input, select, textarea {
  background: var(--bg-input);
  border: 1px solid var(--borda);
  color: var(--texto);
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font: inherit;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento-escuro); outline-offset: 1px;
}

button {
  background: var(--acento); color: #16170f;
  border: 0; padding: 0.55rem 1.1rem;
  border-radius: 8px; font: inherit; font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.secundario { background: var(--bg-input); color: var(--texto); border: 1px solid var(--borda); }
button.link { background: none; color: var(--texto-fraco); padding: 0.3rem 0; font-weight: 400; text-decoration: underline; }
button.perigo, .perigo { color: var(--vermelho); }
button.perigo:not(.link) { background: transparent; border: 1px solid var(--vermelho); }

label { display: block; font-size: 0.85rem; color: var(--texto-fraco); margin-bottom: 0.8rem; }
label input, label select, label textarea { margin-top: 0.25rem; color: var(--texto); }

.passo {
  background: var(--bg-card);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
fieldset { border: 1px solid var(--borda); border-radius: 8px; padding: 1rem; margin: 0 0 1rem; }
legend { color: var(--acento); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0.4rem; }

.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }
.checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1rem; }
.checks label { display: flex; align-items: center; gap: 0.4rem; margin: 0; color: var(--texto); }
.checks input { width: auto; }

.linha-busca { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.linha-busca input[type="search"] { flex: 1 1 200px; }
.linha-busca select { flex: 0 1 200px; }

/* ---------------------------------------------------- Resultados da busca */

.resultados { display: grid; gap: 0.5rem; }
.resultado {
  display: flex; gap: 0.8rem; align-items: center; text-align: left;
  background: var(--bg-input); border: 1px solid var(--borda);
  border-radius: 8px; padding: 0.6rem; width: 100%; color: var(--texto);
  font-weight: 400;
}
.resultado:hover { border-color: var(--acento); }
.resultado img { width: 44px; height: 60px; object-fit: cover; border-radius: 4px; }
.resultado-info small { display: block; color: var(--texto-fraco); font-size: 0.8rem; }
.resultado-manual { border-style: dashed; }

.selecionado { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.selecionado img { width: 60px; border-radius: 6px; }

#scanner { margin-bottom: 1rem; }
#video { width: 100%; max-width: 420px; border-radius: var(--raio); background: #000; }

/* ---------------------------------------------------- Grade da coleção */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.card { color: var(--texto); display: block; }
.card:hover { text-decoration: none; }
.card:hover h3 { color: var(--acento); }
.capa {
  position: relative; aspect-ratio: 3/4;
  background: var(--bg-card); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.capa img { width: 100%; height: 100%; object-fit: cover; }
.sem-capa { color: var(--texto-fraco); font-weight: 700; font-size: 1.2rem; }
.card h3 { font-size: 0.9rem; margin: 0.5rem 0 0.15rem; line-height: 1.25; }
.meta { font-size: 0.78rem; color: var(--texto-fraco); margin: 0; }

.selo {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(0,0,0,0.75); color: var(--texto);
  font-size: 0.68rem; padding: 0.15rem 0.4rem; border-radius: 4px;
}
.selo-lacrado { color: var(--verde); }
.selo-cib { color: var(--acento); }
.selo-troca { background: var(--acento); color: #16170f; left: auto; right: 6px; }

/* ---------------------------------------------------- Detalhe */

.detalhe { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.detalhe-capa img { width: 180px; border-radius: var(--raio); border: 1px solid var(--borda); }
.detalhe-info { flex: 1 1 280px; }
.sinopse { color: var(--texto-fraco); font-size: 0.9rem; }
.voltar { font-size: 0.9rem; }

/* ---------------------------------------------------- Tabela */

.tabela { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.9rem; }
.tabela th, .tabela td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela th { color: var(--texto-fraco); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------------------------------------------------- Avisos */

.discreto { color: var(--texto-fraco); font-size: 0.85rem; }
.sucesso { color: var(--verde); }
.alerta, .aviso { color: var(--acento); }
.vazio { color: var(--texto-fraco); padding: 2rem 0; text-align: center; }

.caixa-login { max-width: 320px; margin: 3rem auto; }
.vitrine-topo { margin-bottom: 1.5rem; }
.card-estatico { cursor: default; }