/* ================================================================== *
 * "Ver um exemplo": a prévia do resultado, com o desenho do sistema.
 *
 * Recorte do despacha-consultas: `despacha-ui.css` (tela de resultado,
 * placa, cartões de campo, modal), `resultados/_preview_base.html` (faixa
 * e marca d'água de exemplo) e `consultas/_modal_exemplo.html` (modal
 * largo e a frase do tour). Os valores são os de lá; mudou lá, muda aqui.
 *
 * O modal e a moldura presos a `.site-exemplo`; a tela de resultado, a
 * `.site-tela` (site/_tela_resultado.html). As classes
 * são as do sistema (`db-chip`, `db-eyebrow`...) e algumas o site também
 * tem, com outro desenho: por isso o escopo. Só a home carrega este arquivo.
 * ================================================================== */

/* Tokens do sistema que o site não tem: o modal (`.site-exemplo`) e a tela
   (`.site-tela`, site/_tela_resultado.html). */
.site-exemplo,
.site-tela {
  --db-bg: #eef3fa;
  --db-borda-campo: #e3e9f2;
  --db-ok-borda: rgba(3, 140, 90, 0.28);
  --db-danger: #dc3545;
  --db-warning: #F2E30C;
  --db-text-2xs: 0.6875rem;
  --db-recuo-dados: 1.5rem 1.6rem;
  --db-vao-cartoes: 1.1rem;
}

/* ------------------------------------------------------------------ *
 * O MODAL (o `.db-modal--exemplo` do sistema, num <dialog> nativo)
 * ------------------------------------------------------------------ */
.site-exemplo {
  width: min(1200px, calc(100vw - 3rem));
  max-width: none;
  max-height: calc(100dvh - 3rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--db-radius-lg);
  background: var(--db-surface);
  color: var(--db-text);
  box-shadow: 0 30px 60px rgba(6, 15, 35, 0.35);
  overflow: hidden;
  flex-direction: column;
}
.site-exemplo[open] { display: flex; }
.site-exemplo::backdrop { background: rgba(6, 15, 35, 0.5); backdrop-filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) {
  .site-exemplo[open] { animation: site-sobe 0.25s cubic-bezier(0.22, 1, 0.36, 1) both; }
}

.site-exemplo .db-modal__head,
.site-exemplo .db-modal__foot,
.site-exemplo .cl-exemplo-pitch { flex-shrink: 0; }
.site-exemplo .db-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem 1rem 1.3rem;
  background:
    radial-gradient(120% 150% at 0% 0%, color-mix(in srgb, var(--db-accent) 9%, transparent) 0%, transparent 55%),
    var(--db-surface);
  border-bottom: 1px solid var(--db-border);
}
.site-exemplo .db-modal__title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  margin: 0;
  font-size: 1.1rem;
  font-weight: var(--db-fw-semibold);
  letter-spacing: -0.2px;
  color: var(--db-primary);
  line-height: 1.3;
}
.site-exemplo .db-modal__titulo { min-width: 0; overflow-wrap: anywhere; }
.site-exemplo .db-modal__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--db-primary) 0%, var(--db-accent) 100%);
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--db-accent) 28%, transparent),
    0 0 0 5px color-mix(in srgb, var(--db-accent) 9%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -6px 12px rgba(0, 0, 0, 0.10);
}
.site-exemplo .db-modal__ico svg { width: 21px; height: 21px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); }
.site-exemplo .db-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--db-surface-2);
  color: var(--db-text-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-exemplo .db-modal__close:hover { background: var(--db-danger); color: #fff; }
.site-exemplo .db-modal__close svg { width: 18px; height: 18px; }

.site-exemplo .db-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.1rem 1.4rem;
  background: var(--db-bg);
}

/* A frase do modo tour, encostada no rodapé. */
.site-exemplo .cl-exemplo-pitch {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.9rem 1.3rem 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--db-text-muted);
}
.site-exemplo .cl-exemplo-pitch svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; }

.site-exemplo .db-modal__foot {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 0.7rem;
  padding: 1rem 1.3rem 1.3rem;
}
/* No sistema os botões são filhos diretos do rodapé; aqui o "Fechar" mora num
   <form method="dialog">, que fecha sem JS. O form faz o papel do botão. */
.site-exemplo .db-modal__foot > * { flex: 1 1 0; min-width: max-content; }
.site-exemplo .db-modal__foot form { display: flex; }
.site-exemplo .db-modal__foot .db-btn { width: 100%; justify-content: center; white-space: nowrap; }
.site-exemplo .db-btn svg { width: 18px; height: 18px; }
.site-exemplo .db-modal__foot .db-btn--neutral {
  background: #eef1f6;
  color: var(--db-text-muted);
  outline: 1px solid var(--db-border);
  outline-offset: -1px;
}
.site-exemplo .db-modal__foot .db-btn--neutral:hover {
  background: #e2e7f0;
  color: var(--db-primary);
  outline-color: var(--db-primary-soft);
  transform: none;
  box-shadow: var(--db-shadow-sm);
}

/* No celular o modal vira folha que sobe da base, como no sistema. */
@media (max-width: 575.98px) {
  .site-exemplo {
    width: 100%;
    max-height: calc(100dvh - 1.5rem);
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .site-exemplo .db-modal__head { padding-top: 1.35rem; }
}

/* ------------------------------------------------------------------ *
 * A MOLDURA DA PRÉVIA (`resultados/_preview_base.html`)
 * ------------------------------------------------------------------ */
/* A marca d'água fica por cima do conteúdo e bem clara (8%): atravessa a
   tela inteira e sobrevive a um print do meio da página. `clip` nos dois
   eixos (o sistema corta só o x): girada, ela passa da altura do conteúdo, e o
   corpo do modal rolava até um vão em branco embaixo. `clip` não cria
   contêiner de rolagem, então a faixa continua presa no topo. */
.site-exemplo .pv-wrap { position: relative; isolation: isolate; overflow: clip; }
.site-exemplo .pv-wrap::before {
  content: "EXEMPLO  EXEMPLO  EXEMPLO  EXEMPLO  EXEMPLO  EXEMPLO  EXEMPLO  EXEMPLO";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-24deg);
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 3.2;
  word-spacing: 1.5rem;
  text-align: center;
  color: color-mix(in srgb, var(--db-primary) 8%, transparent);
  overflow: hidden;
}
/* Presa no topo do corpo que rola: quem rolar até o meio continua vendo que
   é exemplo. */
.site-exemplo .pv-faixa {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  margin-bottom: 0.4rem;
  border-radius: var(--db-radius-sm);
  /* Presa, ela para 1rem abaixo da borda (o respiro do corpo), e o conteúdo
     aparecia rolando nesse vão: a sombra pinta o fundo por cima dele. */
  box-shadow: 0 -1rem 0 var(--db-bg);
  background: color-mix(in srgb, var(--db-warning) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--db-warning) 48%, var(--db-border));
  color: #6d4d00;
  font-size: 0.84rem;
  line-height: 1.45;
}
.site-exemplo .pv-faixa svg { flex: 0 0 auto; width: 17px; height: 17px; color: #a37500; }
.site-exemplo .pv-faixa strong { color: #5b4000; }

/* ------------------------------------------------------------------ *
 * A TELA DE RESULTADO (`resultados/resultado_agregados.html`)
 * ------------------------------------------------------------------ */
.site-tela .db-surface {
  background: var(--db-surface);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius);
  box-shadow: var(--db-shadow-sm);
}
.site-tela .db-eyebrow {
  font-size: 0.72rem;
  font-weight: var(--db-fw-semibold);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--db-accent);
}

/* --- Cabeçalho do resultado --- */
.site-tela .db-result-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.6rem 10.5rem 1.6rem 1.6rem;
  margin-bottom: 1.1rem;
  background:
    radial-gradient(460px 240px at 0% 0%, color-mix(in srgb, var(--db-primary-soft) 7%, transparent), transparent 72%),
    linear-gradient(115deg, #fff 35%, #ecf3fc 100%);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  box-shadow: 0 1px 2px rgba(2, 51, 115, 0.05), 0 12px 30px -18px rgba(2, 51, 115, 0.32);
}
.site-tela .db-result-head::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 #fff;
  pointer-events: none;
  z-index: 2;
}
.site-tela .db-result-head__stripes { z-index: 0; }
.site-tela .db-result-head__aside { position: relative; z-index: 1; flex-shrink: 0; }
.site-tela .db-result-head__info { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
.site-tela .db-result-head__info .db-eyebrow {
  margin: 0 0 0.5rem;
  font-size: var(--db-text-2xs);
  letter-spacing: 0.14em;
  color: var(--db-primary-soft);
}
.site-tela .db-result-title {
  margin: 0 0 0.75rem;
  font-size: var(--db-text-2xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: var(--db-fw-bold);
  color: var(--db-primary);
  text-transform: capitalize;
}
.site-tela .db-result-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.site-tela .db-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--db-radius-pill);
  background: var(--db-surface-2);
  border: 1px solid var(--db-border);
  font-size: 0.82rem;
  font-weight: var(--db-fw-medium);
  color: var(--db-text);
  text-transform: capitalize;
  white-space: nowrap;
}
.site-tela .db-chip svg { width: 14px; height: 14px; color: var(--db-accent); }
.site-tela .db-result-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.site-tela .db-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--db-radius-pill);
  border: 1px solid transparent;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.site-tela .db-status svg { width: 13px; height: 13px; }
.site-tela .db-status--ok { background: var(--db-ok-fundo); color: var(--db-ok); border-color: var(--db-ok-borda); }
.site-tela .db-result-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--db-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.site-tela .db-result-date svg { width: 15px; height: 15px; }

/* --- Placa (o desenho em HTML do sistema, `resultados/_plate.html`) ---
   Toda medida é múltipla de `--pu` ("plate unit"): a placa tem proporção
   fixa e encolhe inteira com a tela. */
.site-tela .plate-wrapper { --pu: min(1px, (100vw - 78px) / 380); display: flex; justify-content: center; }
.site-tela .mercosul-plate-bg {
  width: calc(380 * var(--pu));
  height: calc(126 * var(--pu));
  background-color: #fff;
  border: calc(2 * var(--pu)) solid #343a40;
  border-radius: calc(9 * var(--pu));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.site-tela .plate-header-mercosul {
  background-color: #0033A0;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(4 * var(--pu)) calc(12 * var(--pu));
  height: calc(32 * var(--pu));
}
.site-tela .mercosul-symbol { display: flex; align-items: center; gap: calc(5 * var(--pu)); font-size: calc(11 * var(--pu)); font-weight: bold; }
.site-tela .mercosul-symbol svg { width: calc(22 * var(--pu)); height: calc(16 * var(--pu)); flex-shrink: 0; }
.site-tela .country-name-plate { font-size: calc(16 * var(--pu)); font-weight: bold; letter-spacing: calc(2 * var(--pu)); margin-right: calc(34 * var(--pu)); }
.site-tela .brasil-flag-plate { width: calc(30 * var(--pu)); height: calc(20 * var(--pu)); background-color: #009c3b; position: relative; flex-shrink: 0; }
.site-tela .flag-yellow {
  position: absolute;
  top: calc(2.5 * var(--pu));
  left: calc(2.5 * var(--pu));
  width: calc(25 * var(--pu));
  height: calc(15 * var(--pu));
  background: #ffdf00;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.site-tela .flag-blue {
  position: absolute;
  top: calc(6.5 * var(--pu));
  left: calc(11 * var(--pu));
  width: calc(8 * var(--pu));
  height: calc(8 * var(--pu));
  background: #0033a0;
  border-radius: 50%;
}
.site-tela .plate-body-mercosul { flex-grow: 1; display: flex; justify-content: center; align-items: center; }
.site-tela .plate-number-main {
  font-family: 'FE-Schrift', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: calc(52 * var(--pu));
  color: #000;
  letter-spacing: calc(4 * var(--pu));
  text-transform: uppercase;
}

/* --- Cartão de dados --- */
.site-tela .db-data-card { padding: var(--db-recuo-dados); }
.site-tela .db-card-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.15rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--db-border);
}
.site-tela .db-card-head__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--db-primary), var(--db-accent));
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--db-primary) 28%, transparent);
}
.site-tela .db-card-head__icon svg { width: 24px; height: 24px; }
.site-tela .db-card-head__text { min-width: 0; flex: 1 1 auto; }
.site-tela .db-card-head__title { margin: 0; font-size: 1.15rem; font-weight: var(--db-fw-semibold); color: var(--db-primary); line-height: 1.2; }
.site-tela .db-card-head__sub { margin: 0.1rem 0 0; font-size: 0.82rem; color: var(--db-text-muted); }

.site-tela .db-section-head { display: flex; align-items: center; gap: 0.6rem; margin: 1.6rem 0 0.9rem; }
.site-tela .db-card-head + .db-section-head { margin-top: 0.5rem; }
.site-tela .db-section-head::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  height: 1px;
  min-width: 1.2rem;
  background: linear-gradient(90deg, var(--db-border), transparent);
}
.site-tela .db-section-head__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--db-primary) 10%, #fff);
  color: var(--db-primary);
}
.site-tela .db-section-head__icon svg { width: 17px; height: 17px; }
.site-tela .db-section-head__text { font-size: 0.95rem; font-weight: var(--db-fw-semibold); color: var(--db-primary); white-space: nowrap; }

/* --- Campos --- */
.site-tela .db-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}
.site-tela .db-info-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 1rem;
  border: 1px solid var(--db-borda-campo);
  border-radius: var(--db-radius-sm);
  background: var(--db-surface-2);
  transition: border-color 0.15s ease;
}
.site-tela .db-info-card:hover { border-color: color-mix(in srgb, var(--db-accent) 45%, var(--db-border)); }
.site-tela .db-info-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: color-mix(in srgb, var(--db-accent) 11%, #fff);
  color: var(--db-accent);
}
.site-tela .db-info-card__icon svg { width: 20px; height: 20px; }
.site-tela .db-info-card__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.site-tela .db-info-card__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--db-text-muted);
  font-weight: var(--db-fw-semibold);
}
.site-tela .db-info-card__value { font-size: 0.98rem; font-weight: var(--db-fw-semibold); color: var(--db-text); line-height: 1.3; word-break: break-word; }
.site-tela .db-info-card--mono .db-info-card__value { font-family: 'JetBrains Mono', 'Courier New', monospace; letter-spacing: 0.5px; font-size: 0.92rem; }

/* Identificação em destaque: chassi e motor. */
.site-tela .db-info-grid--id { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.site-tela .db-info-grid--id .db-info-card {
  padding: 1.1rem 1.2rem;
  border-color: color-mix(in srgb, var(--db-accent) 35%, var(--db-border));
  background: color-mix(in srgb, var(--db-accent) 5%, #fff);
}
.site-tela .db-info-grid--id .db-info-card__icon { width: 48px; height: 48px; border-radius: 13px; background: var(--db-accent); color: #fff; }
.site-tela .db-info-grid--id .db-info-card__icon svg { width: 24px; height: 24px; }
.site-tela .db-info-grid--id .db-info-card--mono .db-info-card__value { font-size: 1.1rem; letter-spacing: 1px; }

/* --- Tablet e celular: as mesmas quebras do sistema --- */
@media (max-width: 767px) {
  .site-tela .db-result-head { flex-direction: column; align-items: stretch; gap: 0; padding: 1.05rem 1.1rem 1.2rem; border-radius: var(--db-radius); }
  .site-tela .db-result-head__info { display: contents; }
  .site-tela .db-result-head__info > * { position: relative; z-index: 1; }
  .site-tela .db-result-head__info > .db-eyebrow { order: -1; margin: 0 0 0.9rem; padding-right: 3.9rem; }
  .site-tela .db-result-head__aside { width: 100%; min-width: 0; margin-bottom: 1rem; }
  .site-tela .db-result-head .plate-wrapper { justify-content: flex-start; }
  .site-tela .db-result-head__stripes { --db-stripe-w: 12px; top: -40px; right: 30px; height: 84px; }
}
@media (max-width: 575.98px) {
  /* A linha fina de três cores no topo (a regra de 767px acima, mais
     específica, ganharia da `.db-flag-stripes--linha-no-celular`). */
  .site-tela .db-result-head__stripes { top: 0; right: 0; left: 0; width: auto; height: 4px; transform: none; z-index: 3; }
  .site-tela .db-result-head__info > .db-eyebrow { padding-right: 0; }
  .site-tela .db-result-date__dia { display: none; }

  .site-tela .db-card-head { gap: 0.65rem; margin-bottom: 0.85rem; padding-bottom: 0.7rem; }
  .site-tela .db-card-head__icon { width: 36px; height: 36px; border-radius: 10px; }
  .site-tela .db-card-head__icon svg { width: 19px; height: 19px; }
  .site-tela .db-card-head__title { font-size: 1.02rem; }
  .site-tela .db-card-head__sub { font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .site-tela .db-result-tags { gap: 0.35rem; margin-bottom: 0.75rem; }
  .site-tela .db-result-tags .db-chip { font-size: 0.74rem; padding: 0.2rem 0.55rem; gap: 0.3rem; }
  .site-tela .db-result-tags .db-chip svg { width: 12px; height: 12px; }
  .site-tela .db-section-head::after { display: none; }

  .site-tela .db-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .site-tela .db-info-grid--id { grid-template-columns: 1fr; }
  .site-tela .db-info-grid > .db-info-card--longo { grid-column: 1 / -1; }
  .site-tela .db-info-grid:not(.db-info-grid--id) > .db-info-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0.2rem;
    padding: 0.55rem 0.65rem;
  }
  .site-tela .db-info-grid:not(.db-info-grid--id) .db-info-card__body { display: contents; }
  .site-tela .db-info-grid:not(.db-info-grid--id) .db-info-card__icon { grid-column: 1; grid-row: 1; width: 22px; height: 22px; border-radius: 6px; }
  .site-tela .db-info-grid:not(.db-info-grid--id) .db-info-card__icon svg { width: 13px; height: 13px; }
  .site-tela .db-info-grid:not(.db-info-grid--id) .db-info-card__label { grid-column: 2; grid-row: 1; font-size: 0.64rem; letter-spacing: 0.03em; line-height: 1.25; }
  .site-tela .db-info-grid:not(.db-info-grid--id) .db-info-card__value { grid-column: 1 / -1; font-size: 0.9rem; overflow-wrap: break-word; word-break: normal; }
  .site-tela .db-info-grid--id .db-info-card { gap: 0.7rem; padding: 0.7rem 0.8rem; }
  .site-tela .db-info-grid--id .db-info-card__icon { width: 40px; height: 40px; border-radius: 11px; }
  .site-tela .db-info-grid--id .db-info-card__icon svg { width: 20px; height: 20px; }
  .site-tela .db-info-grid--id .db-info-card--mono .db-info-card__value { font-size: 1rem; letter-spacing: 0.3px; }
}