/* =========================================================================
   VisiteNE — Componentes de interface
   Requer visitene-tokens.css carregado antes.
   Versão 1.0 — agosto de 2026 · Mandacaru Tech
   ========================================================================= */

/* ---- Base --------------------------------------------------------------- */
.vne-raiz, body.vne {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.vne h1, .vne h2, .vne h3, .vne h4,
.vne-titulo {
  font-family: var(--f-marca);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
.vne-mono, .vne code { font-family: var(--f-dado); font-size: .875em; }

/* Foco visível em tudo que recebe teclado. Nunca remova sem substituir. */
.vne :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--raio-sm);
}

/* Algarismo tabular em toda coluna de número: distância, altitude, preço,
   contagem de carimbo. Sem isso a coluna dança a cada linha. */
.vne-num, .vne table td.num, .vne table th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}

/* ---- Botões -------------------------------------------------------------- */
.vne-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;                     /* alvo de toque: inegociável */
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  font: inherit; font-weight: 600; font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms var(--ease), border-color 120ms var(--ease),
              color 120ms var(--ease);
}
.vne-btn--primario {
  background: var(--azul-800); color: #fff; border-color: var(--azul-800);
}
.vne-btn--primario:hover { background: var(--azul-900); border-color: var(--azul-900); }

/* O botão dourado existe para UMA ação em toda a tela: carimbar. Se aparecer
   duas vezes na mesma vista, ele deixou de significar conquista. */
.vne-btn--carimbo {
  background: var(--ouro-500); color: var(--azul-950); border-color: var(--ouro-600);
  font-weight: 700; letter-spacing: .01em;
}
.vne-btn--carimbo:hover { background: var(--ouro-400); }

.vne-btn--secundario {
  background: var(--superficie); color: var(--texto); border-color: var(--borda-forte);
}
.vne-btn--secundario:hover { background: var(--superficie-alt); }

.vne-btn--sutil { background: transparent; color: var(--acento); }
.vne-btn--sutil:hover { background: var(--acento-fraco); }

/* Destrutivo é contorno em repouso e sólido só no hover: a ação perigosa
   não pode ser o elemento mais chamativo da tela. */
.vne-btn--perigo { background: transparent; color: var(--perigo); border-color: var(--perigo); }
.vne-btn--perigo:hover { background: var(--perigo); color: #fff; }

.vne-btn[disabled], .vne-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* ---- Campos --------------------------------------------------------------- */
.vne-campo { display: flex; flex-direction: column; gap: 6px; }
.vne-campo > label {
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--texto-suave);
}
.vne-campo input, .vne-campo select, .vne-campo textarea {
  min-height: 44px;
  padding: 10px 12px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  font: inherit; font-size: 15px;
}
.vne-campo .ajuda { font-size: 13px; color: var(--texto-fraco); }
/* O erro diz o que houve e como resolver — nunca "campo inválido". */
.vne-campo .erro { font-size: 13px; color: var(--perigo); font-weight: 500; }
.vne-campo[data-estado="erro"] input { border-color: var(--perigo); }

/* ---- Chips de estado ------------------------------------------------------ */
/* Todo chip carrega marcador + rótulo. A cor é reforço, não portadora. */
.vne-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 9px;
  border-radius: var(--pill);
  background: var(--superficie-alt);
  border: 1px solid var(--borda);
  font-size: 13px; font-weight: 600; color: var(--texto);
  white-space: nowrap;
}
.vne-chip::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--n-500); flex: none;
}
.vne-chip[data-f="conectado"]::before      { background: var(--f-conectado); }
.vne-chip[data-f="sincronizando"]::before  { background: var(--f-sincronizando); }
.vne-chip[data-f="defasado"]::before       { background: var(--f-defasado); }
.vne-chip[data-f="degradado"]::before      { background: var(--f-degradado); }
.vne-chip[data-f="suspenso"]::before       { background: var(--f-suspenso); }
/* Desconectado também muda de forma — quadrado. Quem não distingue matiz
   ainda distingue silhueta. */
.vne-chip[data-f="desconectado"]::before   { background: var(--f-desconectado); border-radius: 2px; }

.vne-chip[data-c="disponivel"]::before   { background: var(--c-disponivel); }
.vne-chip[data-c="fora-de-raio"]::before { background: var(--c-fora-de-raio); border-radius: 2px; }
.vne-chip[data-c="na-fila"]::before      { background: var(--c-na-fila); }
.vne-chip[data-c="obtido"]::before       { background: var(--c-obtido); }
.vne-chip[data-c="recusado"]::before     { background: var(--c-recusado); border-radius: 2px; }

/* ---- Identificação da base estadual --------------------------------------- */
/* O VisiteNE tem UM cromo. A base de origem nunca é indicada por cor: são
   nove estados, e nove matizes distinguíveis não existem dentro de uma
   paleta coerente. A origem é indicada por sigla, sempre com o nome por
   extenso disponível ao leitor de tela. */
.vne-origem {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--texto-suave);
}
.vne-origem .sigla {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--raio-sm);
  background: var(--azul-800); color: #fff;
  font-family: var(--f-marca); font-weight: 700; font-size: 12px;
  letter-spacing: .02em;
}
.vne-origem[data-situacao="degradado"] .sigla { background: var(--n-500); }

/* ---- Selo de conquista ----------------------------------------------------- */
.vne-selo {
  display: inline-grid; place-items: center;
  width: 104px; height: 104px;
  border-radius: 50%;
  background: var(--ouro-50);
  border: 2px solid var(--azul-800);
  box-shadow: inset 0 0 0 3px var(--ouro-50), inset 0 0 0 4px var(--azul-800);
  color: var(--azul-800);
  font-family: var(--f-marca); font-weight: 700; font-size: 13px;
  text-align: center; line-height: 1.2; padding: 12px;
  transform: rotate(-6deg);
}
.vne-selo[data-estado="pendente"] {
  background: var(--superficie-alt); border-color: var(--borda-forte);
  box-shadow: inset 0 0 0 3px var(--superficie-alt), inset 0 0 0 4px var(--borda-forte);
  color: var(--texto-fraco); transform: none;
}

/* ---- Painel e faixa de severidade ------------------------------------------ */
.vne-painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: 24px;
}
.vne-aviso {
  display: flex; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--raio);
  border-left: 3px solid var(--info);
  background: var(--info-fraco);
  color: var(--texto);
  font-size: 15px;
}
.vne-aviso[data-tipo="sucesso"] { border-left-color: var(--sucesso); background: var(--sucesso-fraco); }
.vne-aviso[data-tipo="atencao"] { border-left-color: var(--atencao); background: var(--atencao-fraco); }
.vne-aviso[data-tipo="perigo"]  { border-left-color: var(--perigo);  background: var(--perigo-fraco); }

/* ---- Selo de projeção ------------------------------------------------------- */
/* Herdado do VisitePB e obrigatório: número estimado nunca se apresenta como
   número medido. */
.vne-projecao {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--raio-sm);
  background: var(--atencao-fraco); color: var(--atencao);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.vne-ia {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--raio-sm);
  background: var(--ia-fundo); color: var(--ia-texto);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* ---- Tabela ------------------------------------------------------------------ */
.vne-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.vne-tabela thead th {
  text-align: left; padding: 10px 12px;
  background: var(--azul-800); color: #fff;
  font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
}
.vne-tabela tbody td { padding: 10px 12px; border-bottom: 1px solid var(--borda); }
.vne-tabela tbody tr:hover { background: var(--superficie-alt); }

/* ---- Motion -------------------------------------------------------------------- */
/* Curto e discreto. Nada anima em cima de quem está no meio de uma trilha. */
.vne-transicao { transition-duration: 180ms; transition-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .vne *, .vne *::before, .vne *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}