/* =====================================================================
   CRM Zap Tecnologia — base.css
   Variáveis, reset, tipografia e a barra do topo.

   Por que três arquivos e não um: o estilo.css passou de 450 linhas e a
   Etapa 11 dobra isso. Sem build no servidor, a única separação possível
   é por <link>. base → componentes → telas, nesta ordem.

   As cores vêm do arquivo da logo, medidas com conta-gotas — não são
   aproximações. O azul da asa varia de #8BDDEC a #284EA0 e o verde de
   #8ACC3D a #076F3A; foram escolhidos os pontos médios legíveis.
   ===================================================================== */

:root {
  /* ---- cores da marca (extraídas da logo) ---- */
  --azul:        #284EA0;   /* azul profundo da asa esquerda */
  --azul-escuro: #1B3A78;   /* hover e gradiente */
  --azul-claro:  #5B8FE0;   /* realce sobre fundo escuro */
  --ciano:       #21A1CE;   /* topo da asa azul */
  --verde:       #3F953C;   /* corpo da asa direita */
  --verde-claro: #6FB84A;
  --verde-lima:  #8ACC3D;   /* ponta da asa verde */

  /* ---- neutros ---- */
  --texto:       #2D2E33;   /* mesmo cinza do wordmark ZAP */
  --texto-fraco: #5A6472;
  --texto-tenue: #8A94A6;
  --borda:       #DDE2E8;
  --borda-forte: #C3CFDD;
  --fundo:       #EDF1F7;
  --branco:      #FFFFFF;
  --superficie-2:#F5F8FC;
  --superficie-3:#E9EFF6;

  /* ---- status ---- */
  --alerta:      #B3261E;   /* perda, atraso, risco */
  --alerta-fundo:#FBE3E1;
  --atencao:     #A96700;
  --atencao-fundo:#FBF0DC;
  --ok-fundo:    #DEF0DC;

  /* ---- faixas do funil ----
     Verde = comprando, vermelho = perdendo. O meio caminha do ciano ao
     azul profundo. Nada de laranja: não é cor da marca. */
  --ativo:  var(--verde);
  --mes1:   var(--ciano);
  --mes2:   var(--azul);
  --mes3:   var(--azul-escuro);
  --mais3:  var(--alerta);

  /* ---- apelidos da Etapa 10 ----
     Mantidos de propósito: dezenas de regras e telas ainda usam --navy.
     Trocar tudo de uma vez seria varredura desnecessária nesta etapa. */
  --navy:       var(--azul);
  --navy-claro: var(--azul-escuro);

  --raio: 8px;
  --raio-g: 10px;
  --sombra: 0 1px 3px rgba(45,46,51,.07), 0 1px 2px rgba(45,46,51,.05);
  --sombra-alta: 0 2px 4px rgba(45,46,51,.08), 0 10px 24px rgba(45,46,51,.10);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 25px; margin: 0 0 4px; letter-spacing: -.3px; font-weight: 600; }
h2 { font-size: 19px; margin: 26px 0 12px; font-weight: 600; }
.subtitulo { color: var(--texto-fraco); margin: 0 0 22px; }

/* Foco visível em tudo que recebe teclado — a equipe usa Tab nas listas. */
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------- topo
   Era uma barra azul-marinho com 13 links soltos, que estourava em
   1280px. Agora é branca (a logo tem fundo claro e some no azul) e os
   links vêm rotulados em Operação e Gestão. */
.topo {
  background: var(--branco);
  color: var(--texto);
  border-bottom: 1px solid var(--borda);
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: var(--sombra);
}
.topo .marca { display: flex; align-items: center; flex: 0 0 auto; }
.topo .marca img { display: block; height: 32px; width: auto; }
.topo .marca .marca-simbolo { display: none; height: 30px; }

/* Contador de tarefas no menu. Fica ao lado do rótulo, não sobre o ícone:
   número sobreposto em ícone de 17px vira borrão. */
.contador {
  display: inline-block; min-width: 18px; padding: 0 5px;
  margin-left: 6px; border-radius: 999px;
  background: var(--superficie-3); color: var(--texto-fraco);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.contador-alerta { background: var(--alerta); color: #fff; }
.topo nav a.ativo .contador { background: rgba(255,255,255,.25); color: #fff; }

/* Quebra em segunda linha em vez de rolar: link que sai da vista é link
   que a equipe não encontra. Só no celular vira rolagem, onde não há
   espaço para duas linhas de menu. */
.topo nav { display: flex; gap: 6px 20px; flex: 1 1 360px; min-width: 0; flex-wrap: wrap; }
.grupo-menu { display: flex; align-items: center; gap: 2px; }
.grupo-menu > .rotulo-grupo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--texto-tenue); font-weight: 700; margin-right: 7px; white-space: nowrap;
}
.topo nav a {
  color: var(--texto-fraco);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--raio);
  font-weight: 500;
  font-size: 14.5px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topo nav a svg { flex: 0 0 auto; opacity: .75; }
.topo nav a:hover { background: var(--superficie-2); color: var(--texto); }
.topo nav a.ativo { background: var(--azul); color: #fff; font-weight: 600; }
.topo nav a.ativo svg { opacity: 1; }

.topo .usuario {
  font-size: 14px; color: var(--texto-fraco);
  display: flex; align-items: center; gap: 10px;
  padding-left: 16px; border-left: 1px solid var(--borda); white-space: nowrap;
}
.topo .usuario a { color: var(--azul); font-weight: 600; text-decoration: none; }
.topo .usuario a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- conteúdo */
.pagina { max-width: 1320px; margin: 0 auto; padding: 24px 22px 60px; }
.rodape-versao { text-align: center; color: var(--texto-tenue); font-size: 12.5px; margin: 34px 0 8px; }

@media (max-width: 720px) {
  .topo { padding: 10px 14px; gap: 12px; }
  /* No celular a barra precisa caber o menu: a borboleta sozinha
     identifica a marca e devolve cerca de 90px para os links. */
  .topo .marca .marca-completa { display: none; }
  .topo .marca .marca-simbolo  { display: block; }
  .topo nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .topo .usuario { padding-left: 0; border-left: 0; margin-left: auto; }
  .pagina { padding: 18px 14px 50px; }
}