/* ============================================================================
   TEMA ÚNICO DA CENTRAL VIA VALE — v2, baseado no mockup da Plataforma (2026-09-04)
   Barra azul-marinho, fundo creme quente, monoespaçada nos números.
   Nenhum seletor de elemento sem classe — só tokens e classes .vv-*.
   ========================================================================== */

:root {
  /* Marca — azul-marinho do mockup (barra, botões, cartão de meta) */
  --vv-marca:        #16304f;
  --vv-marca-hover:  #1e3d64;
  --vv-marca-2:      #2f5f96;   /* azul aceso: aba ativa, destaques */
  --vv-marca-suave:  #eef3f8;
  --vv-marca-borda:  #cdddec;
  --vv-marca-texto:  #1e3d64;

  /* Superfícies — creme quente */
  --vv-fundo:        #f4f1ea;
  --vv-superficie:   #ffffff;
  --vv-superficie-2: #faf8f3;
  --vv-borda:        #e7e2d8;
  --vv-borda-forte:  #d8d2c6;

  /* Texto — neutros quentes */
  --vv-texto:        #191b22;
  --vv-texto-medio:  #55585f;
  --vv-texto-fraco:  #8a8d94;
  --vv-texto-claro:  #ffffff;

  /* Semânticas — paleta do mockup */
  --vv-ok:           #2f8f5b;   --vv-ok-bg:      #e6f1ea;
  --vv-atencao:      #b8882b;   --vv-atencao-bg: #f6edd6;
  --vv-erro:         #c0563f;   --vv-erro-bg:    #fbeae4;
  --vv-info:         #3a6ea5;

  /* Escala de azuis para gráficos/funil (escuro -> claro) */
  --vv-azul-1: #16304f;  --vv-azul-2: #2d5a8c;  --vv-azul-3: #4f7fb0;
  --vv-azul-4: #7ba3cc;  --vv-azul-5: #a9c3dd;

  /* Forma e tipografia */
  --vv-r-sm: 8px;  --vv-r-md: 12px;  --vv-r-lg: 16px;
  --vv-sombra: 0 1px 2px rgba(25,27,34,.05), 0 2px 8px rgba(25,27,34,.04);
  --vv-fonte: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vv-mono:  'Roboto Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  --vv-nav-altura: 56px;
}

.vv-app {
  margin: 0; background: var(--vv-fundo); color: var(--vv-texto);
  font-family: var(--vv-fonte); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.vv-container { max-width: 1120px; margin: 0 auto; padding: 24px 16px; }
.vv-cartao {
  background: var(--vv-superficie); border: 1px solid var(--vv-borda);
  border-radius: var(--vv-r-lg); box-shadow: var(--vv-sombra); padding: 20px;
}
.vv-titulo { font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
.vv-sub    { color: var(--vv-texto-fraco); font-size: .875rem; margin: 0 0 20px; }
.vv-rotulo { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
             letter-spacing: .04em; color: var(--vv-texto-fraco); margin: 14px 0 6px; }
.vv-num    { font-family: var(--vv-mono); font-feature-settings: 'tnum' 1; }

.vv-campo {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  background: var(--vv-superficie); color: var(--vv-texto);
  border: 1px solid var(--vv-borda-forte); border-radius: var(--vv-r-sm);
  font-family: inherit; font-size: .9375rem;
}
.vv-campo:focus { outline: 2px solid var(--vv-marca-borda); outline-offset: 0; border-color: var(--vv-marca-2); }

.vv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border: 0; border-radius: var(--vv-r-sm);
  background: var(--vv-marca); color: var(--vv-texto-claro);
  font-family: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
}
.vv-btn:hover:not(:disabled) { background: var(--vv-marca-hover); }
.vv-btn:disabled { opacity: .55; cursor: default; }
.vv-btn--bloco { width: 100%; }
.vv-btn--suave { background: var(--vv-marca-suave); color: var(--vv-marca-texto); border: 1px solid var(--vv-marca-borda); }
.vv-btn--suave:hover:not(:disabled) { background: #e2ecf5; }

.vv-aviso { border-radius: var(--vv-r-md); padding: 12px 14px; font-size: .875rem;
            border: 1px solid var(--vv-marca-borda); background: var(--vv-marca-suave); color: var(--vv-marca-texto); }
.vv-aviso--erro { border-color: #f3cabc; background: var(--vv-erro-bg); color: #8f3a28; }
.vv-aviso--ok   { border-color: #bfe0cc; background: var(--vv-ok-bg);  color: #1f6a42; }

@media (prefers-reduced-motion: no-preference) {
  .vv-btn, .vv-campo { transition: background-color .12s ease, border-color .12s ease; }
}