/* ================================================================
   CATALOGO — estilos exclusivos da página inicial (índice/registro).
   Depende de tokens.css já estar carregado antes deste arquivo.
   ================================================================ */

/* ---------- Placa escura com o selo ---------- */

.placa{
  background:radial-gradient(120% 130% at 50% 40%, var(--campo-alto) 0%, var(--campo) 62%, var(--campo-baixo) 100%);
  border-bottom:2px solid var(--marca-viva);
  color:#fff;
}

.placa-int{
  display:flex; align-items:center; gap:56px;
  padding:52px 28px 48px;
}

.placa-txt{ flex:1 1 auto; min-width:0; }

.sobrescrito{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--marca-viva);
  margin:0 0 20px;
}

.titulo{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.9rem, 4.2vw, 2.85rem);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 16px;
  max-width:17ch;
}

.chamada{
  font-size:1rem; line-height:1.6;
  color:var(--sobre-campo);
  max-width:52ch;
  margin:0 0 16px;
}

.selo-explicador{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ciano); text-decoration:none;
  background:rgba(0,217,255,.08);
  border:1px solid rgba(0,217,255,.35); border-radius:20px;
  padding:8px 16px; margin:0 0 24px;
  transition:background .12s ease, border-color .12s ease;
}
.selo-explicador:hover{ background:rgba(0,217,255,.16); border-color:var(--ciano); }
.selo-explicador:focus-visible{ outline:2px solid var(--ciano); outline-offset:2px; }

.placar{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--sobre-campo);
  border-top:1px solid rgba(203,214,224,.25);
  padding-top:12px; margin:0;
  display:inline-block;
}
.placar b{ color:var(--ciano); font-weight:600; }

.selo-link{ display:block; flex:none; border-radius:50%; transition:transform .15s ease; }
.selo-link:hover{ transform:scale(1.04); }
.selo-link:focus-visible{ outline:2px solid var(--ciano); outline-offset:4px; }

.selo-oficial{ width:216px; height:216px; flex:none; display:block; }

/* entrada do selo: anel e check se desenham */
@keyframes fdvSurge{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
@keyframes fdvTraco{ to{ stroke-dashoffset:0; } }
.selo-oficial{ animation:fdvSurge .7s ease-out both; }
.selo-oficial #fdv-anel{ stroke-dasharray:1800; stroke-dashoffset:1800; animation:fdvTraco 1s .25s ease-out forwards; }
.selo-oficial .fdv-check{ stroke-dasharray:640; stroke-dashoffset:640; animation:fdvTraco .5s .95s ease-out forwards; }

/* ---------- Busca e filtros ---------- */

.controles{
  position:sticky; top:0; z-index:5;
  background:var(--papel);
  border-bottom:1px solid var(--linha);
  padding:14px 0;
}
.controles-int{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; }

.busca{ position:relative; flex:1 1 260px; min-width:220px; }
.busca input{
  width:100%;
  font-family:var(--ui); font-size:15px; color:var(--tinta);
  background:var(--papel-alto);
  border:1px solid var(--linha); border-radius:3px;
  padding:9px 12px 9px 34px;
}
.busca input::placeholder{ color:var(--tinta-fraca); }
.busca input:focus{ outline:2px solid var(--marca); outline-offset:1px; border-color:transparent; }
.busca svg{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; color:var(--tinta-fraca); pointer-events:none;
}

.grupo-filtro{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.grupo-rotulo{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-fraca);
}

.ficha{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-med); background:transparent;
  border:1px solid var(--linha); border-radius:3px;
  padding:5px 10px; cursor:pointer;
}
.ficha:hover{ border-color:var(--marca); color:var(--marca); }
.ficha:focus-visible{ outline:2px solid var(--marca); outline-offset:2px; }
.ficha[aria-pressed="true"]{ background:var(--campo); border-color:var(--campo); color:#fff; }

/* ---------- Lista ---------- */

.lista{ padding:8px 0 64px; }

.dominio{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin:44px 0 4px;
}
.dominio-nome{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tinta); margin:0;
}
.dominio-cont{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--tinta-fraca);
}

.registro{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr) 132px;
  gap:8px 28px; align-items:start;
  padding:20px 14px; margin:0 -14px;
  border-top:1px solid var(--linha-fina);
  border-left:2px solid transparent;
  text-decoration:none; color:inherit;
  transition:background .12s ease, border-left-color .12s ease;
}
.registro:first-of-type{ border-top:1px solid var(--linha); }
.registro:hover{ background:var(--papel-alto); border-left-color:var(--marca-viva); }
.registro:focus-visible{ outline:2px solid var(--marca); outline-offset:-2px; }

.reg-titulo{
  font-family:var(--display); font-weight:600; font-size:1.02rem;
  margin:0 0 3px; letter-spacing:-.01em;
}
.registro:hover .reg-titulo{ text-decoration:underline; text-underline-offset:3px; }
.reg-id{ font-family:var(--mono); font-size:12px; color:var(--marca); margin:0 0 8px; word-break:break-all; }
.reg-desc{ font-size:.9rem; color:var(--tinta-med); margin:0; max-width:56ch; }

.reg-meta{ font-size:.8rem; color:var(--tinta-med); padding-top:2px; }
.reg-meta div{ margin-bottom:3px; }
.reg-meta span{ color:var(--tinta-fraca); }
.camada{
  display:inline-block;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--linha); border-radius:3px; padding:2px 7px; margin-bottom:7px;
  color:var(--tinta-med);
}
.camada-dashboard{
  border-color:var(--marca-viva);
  color:var(--marca);
  background:rgba(11,99,201,.06);
}

.reg-selo{ display:flex; align-items:center; gap:9px; padding-top:2px; }
.reg-selo svg{ width:30px; height:30px; flex:none; transition:transform .15s ease; }
.registro:hover .reg-selo svg{ transform:scale(1.1); }
.selo-rot{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.25;
}
.e-certificado .reg-selo{ color:var(--marca); }
.e-revisao .reg-selo{ color:var(--revisao); }
.e-sem_selo .reg-selo{ color:var(--tinta-fraca); }

/* ---------- Pendente (reutilizado do detalhe.css para o dono na lista) ---------- */
.pendente{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--revisao); background:rgba(168,117,16,.12);
  border:1px solid rgba(168,117,16,.35); border-radius:3px;
  padding:2px 8px; white-space:normal;
}
.pendente::before{ content:'⚠'; font-size:9px; }

/* ---------- Vazio e rodapé ---------- */

.vazio{ border:1px dashed var(--linha); padding:48px 28px; text-align:center; margin-top:32px; }
.vazio p{ margin:0 0 18px; color:var(--tinta-med); }
.vazio-acao{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--campo); color:#fff; border:0; border-radius:3px;
  padding:9px 16px; cursor:pointer;
}
.vazio-acao:focus-visible{ outline:2px solid var(--marca); outline-offset:2px; }

.rodape{
  border-top:1px solid var(--campo);
  padding:26px 0 56px;
  font-size:.85rem; color:var(--tinta-med);
  display:flex; flex-wrap:wrap; gap:10px 40px; justify-content:space-between;
}
.rodape p{ margin:0; max-width:58ch; }
.rodape a{ color:var(--marca); }

/* ---------- Responsivo ---------- */

@media (max-width:860px){
  .placa-int{ flex-direction:column-reverse; align-items:flex-start; gap:26px; padding:32px 18px 36px; }
  .selo-oficial{ width:128px; height:128px; }
  .registro{ grid-template-columns:1fr; gap:12px; }
  .reg-selo{ padding-top:0; }
}

@media (prefers-reduced-motion:reduce){
  .selo-oficial #fdv-anel, .selo-oficial .fdv-check{ stroke-dashoffset:0; }
}

@media print{ .controles{ display:none; } }