/*
 * Base comum às três telas: vitrine, sistema e viabilidade.
 *
 * Aqui mora só o que as três realmente compartilham — as cores da marca, a
 * tipografia, o botão e o rodapé de direitos. Layout de mapa fica em
 * styles.css, layout de viabilidade em vendas.css, layout da vitrine em
 * site.css. A regra para decidir onde uma coisa vai: se mudar aqui e o efeito
 * for indesejado em alguma das três, o lugar não era aqui.
 */

:root {
  /* Azul-noite do mapa por satélite, que é o fundo de tudo no sistema. */
  --fundo: #0a1526;
  --fundo-alto: #0d1c30;
  --borda: #2a4162;
  --borda-clara: #345371;
  --texto: #e8f2fb;
  --texto-suave: #8caac3;
  --texto-fraco: #6d87a4;
  /*
   * Azul da marca — a cor de ação em todo o produto.
   *
   * O verde saiu por dois motivos: é a cor que o concorrente mais conhecido do
   * mercado usa, e disputava significado com o verde de status ("ativo",
   * "conectado", "atende"). Com a marca em azul, verde volta a significar
   * uma coisa só na tela.
   */
  --acento: #2b7fd4;
  --acento-claro: #7cc4f5;
  --perigo: #a0525e;
  --perigo-claro: #ffb4bd;
  --alerta: #ffd28a;
  --raio: 10px;
  --sombra: 0 18px 48px rgba(0, 0, 0, .45);
  --fonte: system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; }

body {
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* Foco visível sempre: navegar por teclado não pode ser adivinhação. */
:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }

/*
 * BARRAS DE ROLAGEM.
 *
 * A barra padrão do Windows é branca e larga — num painel escuro ela vira o
 * elemento mais claro da tela, roubando atenção de tudo o que importa. Aqui
 * ela some no fundo e só ganha contraste quando o ponteiro se aproxima.
 *
 * `scrollbar-width`/`scrollbar-color` é o padrão (Firefox e Chrome novos);
 * o bloco `::-webkit-scrollbar` cobre os Chrome e Edge anteriores. Manter os
 * dois é o que faz a barra ficar igual nos dois motores.
 */
* {
  scrollbar-color: #2a4162 transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2a4162;
  border: 2px solid transparent;      /* afina a haste sem mudar a área de clique */
  background-clip: content-box;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: #3b5b80; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/*
 * Cursor de digitação só onde se digita.
 *
 * Clicar num parágrafo, num título ou num cartão fazia aparecer a barrinha
 * piscando de escrita — acontece quando o navegador está com a navegação por
 * cursor ligada (F7 no Chrome e no Edge, fácil de acionar sem querer) e
 * confunde: dá a impressão de que aquele texto é editável.
 *
 * Escondê-lo no corpo e devolvê-lo aos campos resolve nos dois casos, com ou
 * sem F7, e não atrapalha quem digita.
 */
body { caret-color: transparent; }
input, textarea, select, [contenteditable="true"], [contenteditable=""] { caret-color: auto; }

/*
 * Aviso de direitos.
 *
 * Aparece nas três telas, com o mesmo texto vindo do mesmo lugar (config.js no
 * servidor). No sistema ele é discreto porque o mapa é o que importa; na
 * vitrine ele fecha a página.
 */
.direitos {
  color: var(--texto-fraco);
  font-size: 11px;
  line-height: 1.7;
}
.direitos a { color: var(--texto-suave); text-decoration: none; }
.direitos a:hover { color: var(--acento-claro); text-decoration: underline; }

/* Botão de ação, igual nas três telas. */
.botao {
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: var(--raio);
  color: #eaf4ff;
  cursor: pointer;
  display: inline-block;
  font: 700 13px/1 var(--fonte);
  padding: 12px 20px;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.botao:hover { filter: brightness(1.12); }
.botao:active { transform: translateY(1px); }
.botao-secundario {
  background: transparent;
  border-color: var(--borda-clara);
  color: var(--texto);
}
.botao-secundario:hover { background: rgba(52, 83, 113, .25); filter: none; }

/* Quem prefere menos movimento não recebe movimento nenhum. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}