/* ==========================================================================
   BASE - cores (tema claro/escuro), tipografia, botoes e campos.
   Todas as cores sao variaveis: trocar o tema = trocar os valores abaixo.
   Identidade: azul-marinho do desktop (clNavy) no menu + amarelo de
   etiqueta de preco, usado SO no preco.
   Densidade: tela de trabalho (ERP), corpo em 13px e campos com 30px de altura.
   ========================================================================== */

/* Fonte servida pelo proprio sistema (sem depender da internet).
   Archivo (SIL Open Font License), eixos de peso 400-700 e largura 75-100%. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fontes/archivo-latin.woff2") format("woff2");
}

:root {
  /* Superficies e texto */
  --fundo: #ECEFF3;
  --superficie: #FFFFFF;
  --superficie-2: #F4F6F9;
  --linha: #DFE3EA;
  --linha-forte: #BEC6D2;
  --texto: #18202C;
  --texto-suave: #5A6474;

  /* Acao (botoes, links, aba ativa) */
  --acento: #1D4FBF;
  --acento-hover: #173F9C;
  --acento-suave: #E5ECFB;
  --sobre-acento: #FFFFFF;

  /* Menu lateral (igual nos dois temas: identidade do Absoluto) */
  --menu-fundo: #10234A;
  --menu-fundo-2: #0C1B3A;
  --menu-texto: rgba(255, 255, 255, 0.72);
  --menu-texto-forte: #FFFFFF;
  --menu-realce: rgba(255, 255, 255, 0.09);
  --menu-linha: rgba(255, 255, 255, 0.09);

  /* Estados */
  --etiqueta: #F5C518;
  --sobre-etiqueta: #14213D;
  --erro: #B42318;
  --sucesso: #1A7F37;      /* margem boa (verde) */
  --alerta-suave: #FDECEA;

  /* Mapa da prospecção: cor de cada cidade (venda, atendimento ou prospecção, clientes parados, nada), o texto
     por cima dela (número do marcador) e o contorno dos círculos do mapa da região */
  --mapa-venda: #1A7F37;
  --mapa-sobre-venda: #FFFFFF;
  --mapa-atendimento: #D99A00;
  --mapa-sobre-atendimento: #14213D;
  --mapa-parado: #0369A1;
  --mapa-sobre-parado: #FFFFFF;
  --mapa-nada: #8A94A3;
  --mapa-sobre-nada: #14213D;
  --mapa-contorno: #18202C;
  /* Painel gerencial (central-clientes-painel.js): variação boa/ruim e as duas séries dos gráficos */
  --painel-sobe: #1A7F37;
  --painel-desce: #B42318;
  --painel-serie1: #2F62D0;
  --painel-serie2: #C26A00;
  /* Fluxo de caixa: entradas, saídas e saldo projetado */
  --fluxo-entrada: #1A7F37;
  --fluxo-saida: #C26A00;
  --fluxo-saldo: #2F62D0;
  --fluxo-negativo: #B42318;

  --fin-credito: #1A7F37;

  --fin-debito: #B42318;
  --fluxo-hoje: rgba(47, 98, 208, 0.10);
  --fluxo-camada: rgba(176, 125, 20, 0.12);

  /* Tipografia: corpo 13px; titulos condensados (largura 80%), como a marca */
  --fonte: "Archivo", "Segoe UI", system-ui, sans-serif;
  --t-mini: 0.6875rem;      /* 11px */
  --t-pequeno: 0.75rem;     /* 12px */
  --t-tabela: 0.8125rem;    /* 13px */
  --t-corpo: 0.8125rem;     /* 13px */
  --t-subtitulo: 0.9375rem; /* 15px */
  --t-titulo: 1.375rem;     /* 22px */
  --t-preco: 2rem;
  --largura-titulo: 80%;

  /* Medidas de controle */
  --altura-campo: 1.875rem;   /* 30px: campos e botoes */
  --altura-pequena: 1.625rem; /* 26px: botoes pequenos */

  /* Forma: controles com canto pequeno, paineis um pouco maior */
  --raio: 4px;
  --raio-grande: 6px;
  --foco: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento);
  --sombra-painel: 0 10px 28px rgba(15, 28, 52, 0.16);
  --sombra-leve: 0 1px 2px rgba(15, 28, 52, 0.06);

  color-scheme: light;
}

/* Tema escuro: escolhido no menu, ou automatico quando o Windows esta escuro */
:root[data-tema="escuro"] {
  --fundo: #0D1219;
  --superficie: #141A23;
  --superficie-2: #19202A;
  --linha: #242D39;
  --linha-forte: #354152;
  --texto: #E3E7ED;
  --texto-suave: #96A0B0;
  --acento: #5B8DEF;
  --acento-hover: #7AA3F3;
  --acento-suave: rgba(91, 141, 239, 0.16);
  --sobre-acento: #0D1219;
  --menu-fundo: #0A1426;
  --menu-fundo-2: #0E1B31;
  --erro: #F07167;
  --sucesso: #4CC38A;
  --alerta-suave: rgba(240, 113, 103, 0.14);
  --mapa-venda: #3FB97A;
  --mapa-sobre-venda: #0D1219;
  --mapa-atendimento: #F2B92E;
  --mapa-sobre-atendimento: #0D1219;
  --mapa-parado: #4FB3F0;
  --mapa-sobre-parado: #0D1219;
  --mapa-nada: #7D8796;
  --mapa-sobre-nada: #0D1219;
  --mapa-contorno: #0D1219;
  --painel-sobe: #4CC38A;
  --painel-desce: #F07167;
  --painel-serie1: #5B8DEF;
  --painel-serie2: #F2B92E;
  --fluxo-entrada: #4CC38A;
  --fluxo-saida: #F2B92E;
  --fluxo-saldo: #5B8DEF;
  --fluxo-negativo: #F07167;

  --fin-credito: #4CC38A;

  --fin-debito: #F07167;
  --fluxo-hoje: rgba(91, 141, 239, 0.16);
  --fluxo-camada: rgba(224, 168, 60, 0.16);
  --sombra-painel: 0 10px 28px rgba(0, 0, 0, 0.5);
  --sombra-leve: none;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0D1219;
    --superficie: #141A23;
    --superficie-2: #19202A;
    --linha: #242D39;
    --linha-forte: #354152;
    --texto: #E3E7ED;
    --texto-suave: #96A0B0;
    --acento: #5B8DEF;
    --acento-hover: #7AA3F3;
    --acento-suave: rgba(91, 141, 239, 0.16);
    --sobre-acento: #0D1219;
    --menu-fundo: #0A1426;
    --menu-fundo-2: #0E1B31;
    --erro: #F07167;
    --sucesso: #4CC38A;
    --alerta-suave: rgba(240, 113, 103, 0.14);
    --mapa-venda: #3FB97A;
    --mapa-sobre-venda: #0D1219;
    --mapa-atendimento: #F2B92E;
    --mapa-sobre-atendimento: #0D1219;
    --mapa-parado: #4FB3F0;
    --mapa-sobre-parado: #0D1219;
    --mapa-nada: #7D8796;
    --mapa-sobre-nada: #0D1219;
    --mapa-contorno: #0D1219;
    --painel-sobe: #4CC38A;
    --painel-desce: #F07167;
    --painel-serie1: #5B8DEF;
    --painel-serie2: #F2B92E;
    --fluxo-entrada: #4CC38A;
    --fluxo-saida: #F2B92E;
    --fluxo-saldo: #5B8DEF;
    --fluxo-negativo: #F07167;

    --fin-credito: #4CC38A;

    --fin-debito: #F07167;
    --fluxo-hoje: rgba(91, 141, 239, 0.16);
    --fluxo-camada: rgba(224, 168, 60, 0.16);
    --sombra-painel: 0 10px 28px rgba(0, 0, 0, 0.5);
    --sombra-leve: none;
    color-scheme: dark;
  }
}

/* ---------- Reset leve ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: var(--acento); }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--raio); }
::selection { background: var(--acento-suave); }

/* ---------- Utilitarios ---------- */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.texto-suave { color: var(--texto-suave); }
.maiusculas { text-transform: uppercase; }
/* Visibilidade por tamanho de tela (!important: vence o display dos componentes) */
.so-celular { display: none !important; }

/* Icones SVG do index.html: herdam a cor do texto */
.icone {
  width: 1.125rem; height: 1.125rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Marca ---------- */
.marca { margin: 0; font-weight: 700; font-stretch: 75%; letter-spacing: -0.01em; }

/* ---------- Botoes ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: var(--altura-campo);
  font: inherit; font-weight: 600; line-height: 1.1;
  border-radius: var(--raio);
  padding: 0.25rem 0.85rem;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none; /* links com cara de botao */
}
.botao:disabled { opacity: 0.45; cursor: default; }
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao--primario { background: var(--acento); color: var(--sobre-acento); }
.botao--primario:hover:not(:disabled) { background: var(--acento-hover); }
.botao--secundario { background: var(--superficie); color: var(--texto); border-color: var(--linha-forte); box-shadow: var(--sombra-leve); }
.botao--secundario:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
/* a sombra do botao secundario venceria o anel de foco geral (:focus-visible): repete o anel */
.botao--secundario:focus-visible { box-shadow: var(--foco); }

.botao-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--altura-campo); height: var(--altura-campo);
  border: 0; border-radius: var(--raio);
  background: transparent; color: var(--texto-suave);
  cursor: pointer;
}
.botao-icone:hover { background: var(--superficie-2); color: var(--texto); }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: 0.2rem; }
.campo label { font-weight: 600; font-size: var(--t-pequeno); color: var(--texto-suave); }
.campo input {
  min-height: var(--altura-campo);
  font: inherit; color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  padding: 0.25rem 0.5rem;
}
.campo input:hover:not(:focus-visible):not(:read-only) { border-color: var(--texto-suave); }
.campo input:focus-visible { border-color: var(--acento); }
.mensagem-erro { margin: 0; min-height: 1.4em; color: var(--erro); font-size: var(--t-pequeno); font-weight: 600; }

/* ---------- Selo (ex.: "em breve", "inativo") ---------- */
.selo {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: var(--t-mini);
  font-weight: 600;
  line-height: 1.5;
  background: var(--superficie-2);
  color: var(--texto-suave);
  vertical-align: 0.1em;
}
.selo--alerta { background: var(--alerta-suave); color: var(--erro); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}