/* ============================================================
   Freedom Consulting — Design System
   ============================================================

   O sistema opera sobre o CTDC, a Freedom Consulting (Centro de Tecnologia e
   Desenvolvimento de Consultores). Este arquivo traduz para tela o manual de
   marca v1.0 (v2/manual-marca/freedom-start-manual-de-marca.html). Quando uma
   regra daqui citar "seção 05" ou "seção 15", é a seção do manual.

   Ele corre EM PARALELO ao FreedomV2 (assets/freedomV2/). As telas migram uma
   por uma; uma tela usa um dos dois, nunca os dois juntos. Por isso tudo aqui
   tem prefixo fc- (classes e variáveis): nada colide com fv-, com o Bootstrap
   nem com o CSS legado da raiz.

   Medidas em px, e não em rem. O tokens.css do FreedomV2 encolhe a raiz para
   14px; em rem, este arquivo mudaria de tamanho conforme a página que o
   carrega. O manual dá as medidas em px, e é nelas que elas ficam.

   Arquivos da marca (logo, símbolo, supergráfico) ficam em v2/marca/arquivos/.
   São cópias dos arquivos oficiais embutidos no manual. Nunca redesenhe nem
   recolora: se faltar um, extraia do manual.

   Os elementos da marca usam o tema do CHÃO onde estão (.fc-chao-*), e os
   componentes de interface usam o tema do PRODUTO (papel, branco e tinta).
   É a regra da seção 15: "dentro do produto a marca fica quieta".
   ============================================================ */


/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root {
  /* ---- Cor do grupo (seção 05) ---- */
  --fc-roxo-freedom: #440897;   /* faixa de assinatura, ação principal */
  --fc-lilas:        #A98BEF;   /* acento do grupo sobre roxo e noite */
  --fc-noite:        #170A33;   /* o escuro da marca, no lugar do preto */

  /* ---- Neutros ---- */
  --fc-papel:        #F7F8FA;   /* chão claro: fundo do produto */
  --fc-papel-fundo:  #DCE0E7;   /* fios e áreas de apoio */
  --fc-tinta:        #10151C;   /* texto sobre papel */
  --fc-grafite:      #515151;   /* texto de apoio, borda de campo */
  --fc-lavanda:      #E2E8F8;   /* texto secundário na faixa roxa, etiqueta */
  --fc-branco:       #FFFFFF;

  /* ---- Espectro DISC ----
     Só no gráfico de perfil, na linha de espectro e na faixa. Nunca em
     botão, aviso ou enfeite. Sempre na ordem D, I, S, C e com a letra. */
  --fc-disc-d: #FF3131;
  --fc-disc-i: #FBCD18;
  --fc-disc-s: #6ACE26;
  --fc-disc-c: #458CE6;

  /* ---- Freedom Consulting ---- */
  --fc-consulting-amarelo: #FBCD18;   /* o chão do centro */
  --fc-cta-azul:           #458CE6;   /* aqui só como cor do foco */

  /* Tons do supergráfico. Existem SÓ dentro do SVG do supergráfico, ficam
     aqui como registro. Não use em texto, fundo, botão nem etiqueta. */
  --fc-sg-consulting-1: #FFDC55;
  --fc-sg-consulting-2: #E8B800;

  /* ---- Estados ----
     O manual não define cor de sucesso e erro. Estes dois são os que a
     própria página do manual usa para "sim" e "não". Ficam como provisórios
     até a paleta de status ser aprovada. */
  --fc-erro: #C41417;
  --fc-ok:   #2B7A12;

  /* ---- Papéis no produto (seção 15) ---- */
  --fc-bg:          var(--fc-papel);
  --fc-superficie:  var(--fc-branco);
  --fc-texto:       var(--fc-tinta);
  --fc-texto-apoio: var(--fc-grafite);
  --fc-fio:         var(--fc-papel-fundo);
  --fc-fio-campo:   var(--fc-grafite);
  --fc-primaria:    var(--fc-roxo-freedom);
  /* O manual não define hover. Escurecer para noite usa só cor da paleta;
     um roxo inventado seria uma cor fora da marca. */
  --fc-primaria-hover: var(--fc-noite);
  --fc-foco:        var(--fc-cta-azul);

  /* ---- Tipografia (seção 06) ---- */
  --fc-font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fc-font-serif:   'Newsreader', Georgia, serif;
  --fc-font-mono:    'Azeret Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* ---- Raio ---- */
  --fc-raio-sm: 8px;
  --fc-raio-md: 14px;   /* botão, campo e cartão do produto */
  --fc-raio-lg: 22px;

  /* ---- Espaço (escala do manual) ---- */
  --fc-espaco-1: 4px;
  --fc-espaco-2: 8px;
  --fc-espaco-3: 16px;
  --fc-espaco-4: 24px;
  --fc-espaco-5: 40px;
  --fc-espaco-6: 60px;

  /* ---- Lâmina ----
     As hastes do A sobem a 66,5° da base. Em CSS isso é um skewX de 23,5°. */
  --fc-inclinacao-skew: 23.5deg;

  /* ---- Controles ---- */
  --fc-altura-controle: 44px;
}


/* ------------------------------------------------------------
   2. Base
   Escopo em .fc para o arquivo poder entrar numa página que já tem outro
   CSS sem mexer no resto dela.
   ------------------------------------------------------------ */
.fc {
  font-family: var(--fc-font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fc-texto);
  background: var(--fc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fc *, .fc *::before, .fc *::after { box-sizing: border-box; }
.fc img, .fc svg { display: block; }

/* Foco visível em todo elemento que recebe foco (seção 15). Afastado 2 px. */
.fc :focus-visible {
  outline: 3px solid var(--fc-foco);
  outline-offset: 2px;
}

/* Ícones Lucide, inline, traço de 2 px, na cor do texto (seção 10). */
.fc-icone {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ------------------------------------------------------------
   3. Texto
   Os papéis da seção 06, com os tamanhos da coluna "tela e site".
   ------------------------------------------------------------ */

/* Etiqueta: Azeret Mono 500, caixa alta, espaçada. Só texto curto. */
.fc-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fc-font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Título: Montserrat 900, entrelinha apertada, letras quase se tocando. */
.fc-titulo {
  margin: 0;
  font-family: var(--fc-font-display);
  font-weight: 900;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -.035em;
}

/* Subtítulo e nome: Montserrat 800. */
.fc-subtitulo {
  margin: 0;
  font-family: var(--fc-font-display);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -.025em;
}

/* Texto de apoio: Newsreader 400. Nunca escreve título. */
.fc-apoio {
  margin: 0;
  font-family: var(--fc-font-serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
}

/* Um trecho do título na cor de acento do chão. Um trecho só, de preferência
   a segunda frase. Com -bloco, a frase começa numa linha própria: sem isso a
   quebra natural pode separar o artigo da palavra ("termina. O / trabalho"). */
.fc-destaque { color: var(--fc-destaque, var(--fc-primaria)); }
.fc-destaque-bloco { display: block; }


/* ------------------------------------------------------------
   4. Chão
   Define as cores de quem está em cima. Elemento da marca nunca escolhe a
   própria cor, herda do chão.
   ------------------------------------------------------------ */

/* Chão da Freedom Consulting: amarelo, texto noite, destaque roxo.
   Branco sobre amarelo é proibido (contraste 1,5:1). */
.fc-chao-consulting {
  --fc-destaque: var(--fc-roxo-freedom);
  background: var(--fc-consulting-amarelo);
  color: var(--fc-noite);
}

/* Faixa roxa: texto branco, secundário em lavanda. */
.fc-chao-roxo {
  --fc-destaque: var(--fc-lilas);
  background: var(--fc-roxo-freedom);
  color: var(--fc-branco);
}


/* ------------------------------------------------------------
   5. Elementos da marca (seção 07)
   ------------------------------------------------------------ */

/* Linha de espectro: quatro segmentos iguais, D I S C, inclinados e
   separados por uma fresta. Só sobre roxo, noite ou papel: sobre o
   amarelo o segmento I some. */
.fc-espectro {
  display: block;
  height: 6px;
  border-radius: 2px;
  transform: skewX(calc(var(--fc-inclinacao-skew) * -1));
  background: linear-gradient(90deg,
    var(--fc-disc-d) 0 calc(25% - 6px), transparent 0 25%,
    var(--fc-disc-i) 0 calc(50% - 6px), transparent 0 50%,
    var(--fc-disc-s) 0 calc(75% - 6px), transparent 0 75%,
    var(--fc-disc-c) 0);
}

/* Marca de perfil: quatro traços inclinados com 100, 60, 38 e 80% da
   altura, na cor do texto. Vai antes de etiqueta, nunca sozinha. */
.fc-pf {
  display: inline-block;
  flex: none;
  width: 21px;
  height: 14px;
  transform: skewX(calc(var(--fc-inclinacao-skew) * -1));
  background:
    linear-gradient(currentColor 0 0) 0    100% / 3.5px 100% no-repeat,
    linear-gradient(currentColor 0 0) 6px  100% / 3.5px 60%  no-repeat,
    linear-gradient(currentColor 0 0) 12px 100% / 3.5px 38%  no-repeat,
    linear-gradient(currentColor 0 0) 18px 100% / 3.5px 80%  no-repeat;
}

/* Selo: o símbolo do centro na placa branca, com o nome ao lado.
   Toda medida sai do lado da placa (L), como na construção do manual:
   raio 1/4 L, símbolo 73%, espaço 23%, nome 38%, descritor 25%. */
.fc-selo {
  --fc-L: 56px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--fc-L) * .23);
  color: inherit;
}
.fc-placa {
  flex: none;
  width: var(--fc-L);
  height: var(--fc-L);
  border-radius: calc(var(--fc-L) / 4);
  background: var(--fc-branco);
  display: grid;
  place-items: center;
}
.fc-placa img { width: 73%; height: 73%; }
.fc-selo-nome {
  display: block;
  font-weight: 800;
  font-size: calc(var(--fc-L) * .38);
  line-height: 1;
  letter-spacing: -.02em;
}
.fc-selo-descritor {
  display: block;
  margin-top: calc(var(--fc-L) * .115);
  font-family: var(--fc-font-mono);
  font-weight: 500;
  font-size: calc(var(--fc-L) * .25);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Sobre papel ou branco a placa some sem um fio de 1 px. */
.fc-selo-no-papel .fc-placa { box-shadow: 0 0 0 1px var(--fc-papel-fundo); }

/* Faixa de assinatura: roxa, linha de espectro perto do topo, logo branco à
   esquerda e o site em mono à direita. Sempre roxa, em qualquer chão. */
.fc-faixa {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-espaco-3);
  padding: 30px var(--fc-espaco-5) 20px;
  background: var(--fc-roxo-freedom);
  color: var(--fc-lavanda);
}
.fc-faixa::before {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  top: 10px;
  height: 6px;
  border-radius: 2px;
  transform: skewX(calc(var(--fc-inclinacao-skew) * -1));
  background: linear-gradient(90deg,
    var(--fc-disc-d) 0 calc(25% - 6px), transparent 0 25%,
    var(--fc-disc-i) 0 calc(50% - 6px), transparent 0 50%,
    var(--fc-disc-s) 0 calc(75% - 6px), transparent 0 75%,
    var(--fc-disc-c) 0);
}
/* 140 px é a largura do logo no cabeçalho do sistema; o mínimo é 120. */
.fc-faixa-logo { width: 140px; height: auto; }
.fc-faixa-site {
  font-family: var(--fc-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Supergráfico: o símbolo do centro ampliado e cortado pela borda, tom sobre
   tom. Quem posiciona é o layout; aqui só o que vale em qualquer lugar. Não
   gire, não distorça e não ponha texto sobre a parte de acento. */
.fc-supergrafico {
  position: absolute;
  max-width: none;
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
}


/* Marca da Consulting em fundo escuro: o símbolo na versão própria para
   escuro (triângulo interno branco), sem placa, com o nome em branco. Só
   sobre roxo, noite ou preto. Em fundo claro, use o .fc-selo com a placa. */
.fc-marca-escura { display: inline-flex; align-items: center; gap: 14px; color: var(--fc-branco); }
.fc-marca-escura img { width: 52px; height: 52px; flex: none; }
.fc-marca-escura b { display: block; font-weight: 800; font-size: 21px; line-height: 1; letter-spacing: -.02em; }
.fc-marca-escura small {
  display: block;
  margin-top: 7px;
  font-family: var(--fc-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fc-lavanda);
}

/* Os quatro centros, cada um na placa branca, lado a lado e sem nome (o
   manual pede assim quando mais de um centro aparece). O centro da tela leva
   uma lâmina amarela embaixo. */
.fc-centros { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fc-centro {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--fc-branco);
}
.fc-centro img { width: 73%; height: 73%; }
.fc-centro-atual::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -11px;
  height: 4px;
  border-radius: 2px;
  background: var(--fc-consulting-amarelo);
  transform: skewX(calc(var(--fc-inclinacao-skew) * -1));
}
/* Versão pequena e quieta: assinatura da casa, não chamada para clique. */
.fc-centros-pequenos { gap: 8px; }
.fc-centros-pequenos .fc-centro { width: 32px; height: 32px; border-radius: 8px; }
.fc-centros-pequenos .fc-centro-atual::after { left: 8px; right: 8px; bottom: -8px; height: 3px; }
/* Sem a placa branca, só sobre fundo escuro. Exceção ao manual (que pede a
   placa fora da faixa), decidida em 2026-10-06 para as telas de acesso. A
   Consulting entra na versão de fundo escuro, com o triângulo interno branco:
   a padrão tem o interno cinza-chumbo, que some no roxo. */
.fc-centros-sem-placa .fc-centro { background: none; }
.fc-centros-sem-placa .fc-centro img { width: 88%; height: 88%; }


/* ------------------------------------------------------------
   6. Componentes de interface (seção 15)
   ------------------------------------------------------------ */

/* Botão: retângulo de canto raio-md, 44 px de altura. A lâmina inclinada é
   das peças de comunicação e não entra no produto. Ícone depois do texto. */
.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-espaco-2);
  height: var(--fc-altura-controle);
  padding: 0 20px;
  border: 0;
  border-radius: var(--fc-raio-md);
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.fc-btn:disabled, .fc-btn[aria-disabled="true"] { cursor: default; opacity: .7; }

.fc-btn-primario { background: var(--fc-primaria); color: var(--fc-branco); }
.fc-btn-primario:hover:not(:disabled) { background: var(--fc-primaria-hover); }

.fc-btn-secundario {
  background: var(--fc-branco);
  color: var(--fc-primaria);
  box-shadow: inset 0 0 0 1.5px var(--fc-primaria);
}
.fc-btn-secundario:hover:not(:disabled) { background: var(--fc-lavanda); }

/* Botão só com ícone, para ação de apoio dentro de um campo. */
.fc-btn-icone {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fc-texto-apoio);
}
.fc-btn-icone:hover { background: var(--fc-papel); color: var(--fc-texto); }

/* Botão de alternância com dois ícones (mostrar/ocultar senha). O segundo
   ícone aparece quando aria-pressed vira true; o JS só troca o atributo. */
.fc-alterna .fc-icone + .fc-icone { display: none; }
.fc-alterna[aria-pressed="true"] .fc-icone:first-child { display: none; }
.fc-alterna[aria-pressed="true"] .fc-icone + .fc-icone { display: block; }

.fc-btn-bloco { display: flex; width: 100%; }

/* Terciário: ação de menor peso, sem caixa. */
.fc-btn-terciario { background: transparent; color: var(--fc-primaria); }
.fc-btn-terciario:hover:not(:disabled) { background: var(--fc-lavanda); }

/* Perigo: excluir, cancelar assinatura. Provisório, como --fc-erro. */
.fc-btn-perigo { background: var(--fc-erro); color: var(--fc-branco); }
.fc-btn-perigo:hover:not(:disabled) { background: var(--fc-noite); }

/* Pequeno: dentro de tabela e de cartão. 36 px ainda é alvo de toque. */
.fc-btn-pequeno { height: 36px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.fc-btn-pequeno .fc-icone { width: 16px; height: 16px; }

/* Campo */
/* align-content: start, para dois campos lado a lado alinharem pelo topo
   mesmo quando só um deles tem texto de ajuda embaixo. */
.fc-campo { display: grid; gap: 6px; align-content: start; margin-bottom: var(--fc-espaco-3); }
.fc-rotulo { font-weight: 600; font-size: 14px; color: var(--fc-texto); }
.fc-ajuda  { font-weight: 500; font-size: 13px; color: var(--fc-texto-apoio); }

.fc-entrada {
  width: 100%;
  height: var(--fc-altura-controle);
  padding: 0 14px;
  border: 1px solid var(--fc-fio-campo);
  border-radius: var(--fc-raio-md);
  background: var(--fc-superficie);
  color: var(--fc-texto);
  font-family: var(--fc-font-display);
  font-weight: 500;
  font-size: 15px;
  transition: border-color .15s ease;
}
.fc-entrada::placeholder { color: var(--fc-grafite); opacity: .75; }
/* Em foco a borda vira roxa e o contorno azul aparece por fora. */
.fc-entrada:focus { border-color: var(--fc-primaria); outline: none; }
.fc-entrada:focus-visible { outline: 3px solid var(--fc-foco); outline-offset: 2px; }

.fc-entrada:disabled {
  background: var(--fc-papel);
  border-color: var(--fc-papel-fundo);
  color: var(--fc-texto-apoio);
  cursor: not-allowed;
}

/* Lista de seleção: a mesma caixa do campo, com a seta Lucide desenhada. */
select.fc-entrada {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23515151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  cursor: pointer;
}

/* Texto longo: cresce para baixo, entrelinha de texto corrido. */
textarea.fc-entrada {
  height: auto;
  min-height: 112px;
  padding: 10px 14px;
  line-height: 1.5;
  resize: vertical;
}

/* Erro no campo: borda e mensagem na cor de erro. A mensagem diz o que
   fazer, não só que está errado. */
.fc-campo-erro .fc-entrada { border-color: var(--fc-erro); }
.fc-campo-erro .fc-ajuda { color: var(--fc-erro); font-weight: 600; }

/* Campo com ícone à esquerda (busca). */
.fc-entrada-com-icone { position: relative; }
.fc-entrada-com-icone .fc-entrada { padding-left: 42px; }
.fc-entrada-com-icone > .fc-icone {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fc-texto-apoio);
  pointer-events: none;
}

/* Caixa de marcar e opção única. O input real continua lá, só muda a cara:
   teclado, leitor de tela e envio do formulário seguem funcionando. */
.fc-opcao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.fc-opcao input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--fc-fio-campo);
  border-radius: 6px;
  background: var(--fc-superficie) center / 14px no-repeat;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.fc-opcao input[type="radio"] { border-radius: 50%; }
.fc-opcao input:checked {
  border-color: var(--fc-primaria);
  background-color: var(--fc-primaria);
}
.fc-opcao input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.fc-opcao input[type="radio"]:checked {
  background: var(--fc-superficie);
  box-shadow: inset 0 0 0 4px var(--fc-primaria);
}
.fc-opcao input:disabled { background-color: var(--fc-papel); border-color: var(--fc-papel-fundo); cursor: not-allowed; }
.fc-opcao input:disabled + span { color: var(--fc-texto-apoio); }
.fc-opcao small { display: block; margin-top: 2px; font-size: 13px; color: var(--fc-texto-apoio); }

/* Chave liga/desliga. Trilho de canto raio-sm, não pílula: pílula é
   repertório genérico que o manual deixa de fora. */
.fc-chave {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
}
.fc-chave input {
  appearance: none;
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0;
  border-radius: var(--fc-raio-sm);
  background: var(--fc-papel-fundo);
  cursor: pointer;
  transition: background-color .15s ease;
}
.fc-chave input::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--fc-branco);
  transition: transform .15s ease;
}
.fc-chave input:checked { background: var(--fc-primaria); }
.fc-chave input:checked::after { transform: translateX(18px); }

/* Grupo de opções: o fieldset sem moldura, com a legenda no papel de rótulo.
   É o que dá nome a um conjunto de caixas de marcar ou de opções únicas para
   o leitor de tela. */
.fc-grupo { min-width: 0; margin: 0 0 var(--fc-espaco-3); padding: 0; border: 0; }
.fc-grupo > legend { margin-bottom: 12px; padding: 0; font-weight: 600; font-size: 14px; color: var(--fc-texto); }
.fc-grupo .fc-opcao + .fc-opcao,
.fc-grupo .fc-chave + .fc-chave { margin-top: 12px; }
.fc-grupo .fc-chave { display: flex; }

/* Grupo de campos lado a lado. Em tela pequena empilha. */
.fc-campos-linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0 var(--fc-espaco-3);
}

/* Campo com um botão dentro, à direita (mostrar senha). */
.fc-entrada-com-botao { position: relative; }
.fc-entrada-com-botao .fc-entrada { padding-right: 48px; }
.fc-entrada-com-botao .fc-btn-icone {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

/* Aviso: chapado, sem sombra, ícone de traço na cor do estado. */
.fc-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--fc-espaco-4);
  padding: 12px 14px;
  border: 1px solid currentColor;
  border-radius: var(--fc-raio-md);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
}
.fc-aviso .fc-icone { margin-top: 1px; }
.fc-aviso > div { color: var(--fc-texto); }
.fc-aviso-erro {
  color: var(--fc-erro);
  background: color-mix(in srgb, var(--fc-erro) 6%, var(--fc-branco));
}
.fc-aviso-ok {
  color: var(--fc-ok);
  background: color-mix(in srgb, var(--fc-ok) 6%, var(--fc-branco));
}
/* Informação neutra. Não usa roxo: roxo é da ação principal. */
.fc-aviso-neutro {
  color: var(--fc-texto-apoio);
  background: var(--fc-superficie);
  border-color: var(--fc-fio);
}

/* Etiqueta de status (Concluído, Rascunho). Retângulo de canto raio-sm,
   nunca pílula. */
.fc-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--fc-raio-sm);
  background: var(--fc-lavanda);
  color: var(--fc-roxo-freedom);
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
}
.fc-tag-neutra { background: var(--fc-papel-fundo); color: var(--fc-tinta); }

/* Cartão: fundo branco, fio papel-fundo, raio-md. Sem sombra. */
.fc-cartao {
  padding: 18px 20px;
  background: var(--fc-superficie);
  border: 1px solid var(--fc-fio);
  border-radius: var(--fc-raio-md);
}
.fc-cartao-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-espaco-3);
  margin-bottom: 12px;
}
.fc-cartao-titulo {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.015em;
}

/* Link de interface */
.fc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--fc-primaria);
  text-decoration: none;
}
.fc-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Avatar: iniciais em roxo sobre lavanda, como no cabeçalho do manual. */
.fc-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fc-lavanda);
  color: var(--fc-roxo-freedom);
  font-weight: 700;
  font-size: 14px;
}


/* ------------------------------------------------------------
   7. Navegação
   ------------------------------------------------------------ */

/* Cabeçalho do sistema: barra branca, logo grafite de 140 px à esquerda,
   navegação em Montserrat 600. O item ativo é roxo, com fio embaixo. */
.fc-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--fc-espaco-5);
  height: 64px;
  padding: 0 var(--fc-espaco-4);
  background: var(--fc-superficie);
  border-bottom: 1px solid var(--fc-fio);
}
.fc-cabecalho-logo { width: 140px; height: auto; flex: none; }
/* min-width: 0 deixa o menu encolher e rolar por dentro; sem isso, item de
   flex não fica menor que o próprio conteúdo e o cabeçalho estoura a tela. */
.fc-cabecalho-nav { display: flex; align-self: stretch; flex: 0 1 auto; min-width: 0; gap: var(--fc-espaco-4); overflow-x: auto; overflow-y: hidden; }
.fc-cabecalho-nav a {
  display: flex;
  align-items: center;
  border-block: 3px solid transparent;
  font-weight: 600;
  font-size: 15px;
  color: var(--fc-grafite);
  text-decoration: none;
  white-space: nowrap;
}
.fc-cabecalho-nav a:hover { color: var(--fc-texto); }
.fc-cabecalho-nav a[aria-current="page"] { color: var(--fc-primaria); border-bottom-color: var(--fc-primaria); }
.fc-cabecalho-fim { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--fc-espaco-3); }

/* No celular: menos espaço entre as partes e o logo no mínimo do manual. */
@media (max-width: 640px) {
  .fc-cabecalho { gap: var(--fc-espaco-3); padding: 0 var(--fc-espaco-3); }
  .fc-cabecalho-logo { width: 120px; }
  .fc-cabecalho-nav { gap: var(--fc-espaco-3); }
}

/* Trilha: onde a pessoa está. Etiqueta em mono, separada por ponto. */
.fc-trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  font-family: var(--fc-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fc-grafite);
}
.fc-trilha li + li::before { content: "·"; margin-right: 8px; }
.fc-trilha a { color: inherit; text-decoration: none; }
.fc-trilha a:hover { color: var(--fc-primaria); }

/* Cabeça de página: trilha e título à esquerda, ações à direita. */
.fc-pagina-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fc-espaco-3);
  margin-bottom: var(--fc-espaco-4);
}
.fc-pagina-titulo {
  margin: 0;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.fc-pagina-acoes { display: flex; flex-wrap: wrap; gap: var(--fc-espaco-2); }

/* Abas: o mesmo desenho da navegação, num fio de papel-fundo. */
/* O fio de baixo é sombra interna, e não borda: com borda, a linha de 3 px
   da aba ativa precisava de margem negativa, que estourava a altura e fazia
   aparecer uma barra de rolagem vertical. */
.fc-abas {
  display: flex;
  gap: var(--fc-espaco-4);
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: var(--fc-espaco-4);
  box-shadow: inset 0 -1px 0 var(--fc-fio);
}
.fc-aba {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--fc-grafite);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.fc-aba:hover { color: var(--fc-texto); }
.fc-aba[aria-selected="true"], .fc-aba[aria-current="page"] { color: var(--fc-primaria); border-bottom-color: var(--fc-primaria); }
.fc-aba .fc-tag { height: 22px; padding: 0 7px; font-size: 12px; }

/* Paginação: quadrados de canto raio-sm. */
.fc-paginacao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fc-paginacao a, .fc-paginacao span {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--fc-fio);
  border-radius: var(--fc-raio-sm);
  background: var(--fc-superficie);
  font-weight: 600;
  font-size: 14px;
  color: var(--fc-texto);
  text-decoration: none;
}
.fc-paginacao a:hover { border-color: var(--fc-primaria); color: var(--fc-primaria); }
.fc-paginacao [aria-current="page"] { background: var(--fc-primaria); border-color: var(--fc-primaria); color: var(--fc-branco); }
.fc-paginacao .fc-paginacao-vazio { border-color: transparent; background: none; color: var(--fc-texto-apoio); }


/* ------------------------------------------------------------
   8. Dados
   ------------------------------------------------------------ */

/* Tabela: cabeçalho em etiqueta mono, linhas com fio, sem zebra. A rolagem
   lateral fica no invólucro, nunca na página. */
/* position: relative prende dentro da rolagem o que for absoluto lá dentro
   (como o .fc-oculto-visual do cabeçalho "Ações"). Sem isso ele escapa e
   estica a página inteira até a última coluna no celular. */
.fc-tabela-envoltorio {
  position: relative;
  overflow-x: auto;
  background: var(--fc-superficie);
  border: 1px solid var(--fc-fio);
  border-radius: var(--fc-raio-md);
}
.fc-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.fc-tabela th {
  padding: 12px 16px;
  text-align: left;
  font-family: var(--fc-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fc-grafite);
  background: var(--fc-papel);
  border-bottom: 1px solid var(--fc-fio);
  white-space: nowrap;
}
.fc-tabela td { padding: 12px 16px; border-bottom: 1px solid var(--fc-fio); vertical-align: middle; }
.fc-tabela tbody tr:last-child td { border-bottom: 0; }
.fc-tabela tbody tr:hover td { background: var(--fc-papel); }
.fc-tabela .fc-num { text-align: right; font-variant-numeric: tabular-nums; }
.fc-tabela-pessoa { display: flex; align-items: center; gap: 10px; }
.fc-tabela-pessoa b { display: block; font-weight: 700; }
.fc-tabela-pessoa small { display: block; font-size: 13px; color: var(--fc-texto-apoio); }

/* Número de destaque: etiqueta, o número em Montserrat 900 e a fonte. */
.fc-numero-rotulo { display: block; margin-bottom: 8px; }
.fc-numero-valor {
  display: block;
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.fc-numero-fonte {
  display: block;
  margin-top: 10px;
  font-family: var(--fc-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fc-texto-apoio);
}

/* DISC: a cor sempre acompanhada da letra (seção 15, "não dependa só da
   cor"). A letra é noite: branco sobre o amarelo e o verde não se lê. */
.fc-disc-d { --fc-c: var(--fc-disc-d); }
.fc-disc-i { --fc-c: var(--fc-disc-i); }
.fc-disc-s { --fc-c: var(--fc-disc-s); }
.fc-disc-c { --fc-c: var(--fc-disc-c); }

.fc-disc-letra {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--fc-c);
  color: var(--fc-noite);
  font-style: normal;
  font-weight: 800;
  font-size: 13px;
}
.fc-disc-fator { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; }

/* Gráfico de perfil em barras: D, I, S, C da esquerda para a direita.
   A altura vem de --fc-v (0 a 100) em cada barra. */
.fc-disc-barras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: end;
  height: 180px;
  padding-top: 24px;
}
.fc-disc-barra { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.fc-disc-barra i {
  display: block;
  width: 100%;
  max-width: 56px;
  height: calc(var(--fc-v) * 1%);
  border-radius: 6px 6px 0 0;
  background: var(--fc-c);
}
.fc-disc-barra b { font-weight: 800; font-size: 14px; line-height: 1; }
.fc-disc-barra span { font-weight: 700; font-size: 13px; color: var(--fc-texto-apoio); font-variant-numeric: tabular-nums; }


/* ------------------------------------------------------------
   9. Sobreposição e vazio
   ------------------------------------------------------------ */

/* Janela (modal). Sem sombra: o fundo noite translúcido já separa.
   Clique fora não fecha, mesma decisão do FreedomV2. */
.fc-modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: grid;
  place-items: center;
  padding: var(--fc-espaco-3);
  background: color-mix(in srgb, var(--fc-noite) 62%, transparent);
}
.fc-modal-fundo[hidden] { display: none; }
.fc-modal {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--fc-superficie);
  border-radius: var(--fc-raio-lg);
}
.fc-modal-cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fc-espaco-3);
  padding: var(--fc-espaco-4) var(--fc-espaco-4) 0;
}
.fc-modal-titulo { margin: 0; font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -.025em; }
.fc-modal-corpo { padding: var(--fc-espaco-3) var(--fc-espaco-4) var(--fc-espaco-4); }
.fc-modal-pe {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--fc-espaco-2);
  padding: var(--fc-espaco-3) var(--fc-espaco-4);
  background: var(--fc-papel);
  border-top: 1px solid var(--fc-fio);
  border-radius: 0 0 var(--fc-raio-lg) var(--fc-raio-lg);
}

/* Estado vazio: diz o que falta e oferece a ação que resolve. */
.fc-vazio {
  display: grid;
  justify-items: start;
  gap: var(--fc-espaco-2);
  padding: var(--fc-espaco-5);
  background: var(--fc-superficie);
  border: 1px dashed var(--fc-papel-fundo);
  border-radius: var(--fc-raio-md);
}
.fc-vazio .fc-btn { margin-top: var(--fc-espaco-2); }
.fc-vazio > .fc-icone { width: 32px; height: 32px; margin-bottom: 4px; color: var(--fc-texto-apoio); stroke-width: 1.75; }

/* Fala: Newsreader itálico com a lâmina fina de acento fazendo as aspas.
   Só fala literal de pessoa, sem aspas tipográficas. */
.fc-fala {
  position: relative;
  margin: 0;
  padding-left: 28px;
}
.fc-fala::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: 8px;
  border-radius: 4px;
  background: var(--fc-destaque, var(--fc-primaria));
  transform: skewX(var(--fc-inclinacao-skew));
}
.fc-fala p { margin: 0; font-family: var(--fc-font-serif); font-style: italic; font-size: 22px; line-height: 1.35; }
.fc-fala footer { margin-top: 12px; }
.fc-fala footer b { display: block; font-weight: 800; font-size: 16px; }
.fc-fala footer span { display: block; margin-top: 2px; font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fc-texto-apoio); }


/* ------------------------------------------------------------
   10. Telas de acesso (login, senha)
   Escolhida em 2026-10-06, na segunda rodada ("coluna com lâmina"). A
   primeira versão aplicada, com supergráfico grande e coisa nos quatro
   cantos, foi achada carregada: aqui o cartão é o único ponto de foco.

   Roxo liso e uma coluna no centro: a marca da Consulting em fundo escuro, o
   slogan da Freedom Start em uma linha, o cartão branco, os centros pequenos
   e, no pé da tela, o logo do grupo. No fundo, um elemento só: a lâmina
   amarela larga com a fina partida ao lado, no ângulo das hastes do A.

   Dentro do cartão vale o produto: papel, tinta e o botão roxo.
   ------------------------------------------------------------ */
.fc-acesso {
  --fc-destaque: var(--fc-consulting-amarelo);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 48px 20px 96px;   /* a base reserva o lugar do logo */
  background: var(--fc-noite);   /* o roxo-noite do site (v2/site/); antes, o roxo liso da Freedom */
  color: var(--fc-branco);
}

/* A lâmina larga sai pela borda de cima e pela de baixo, à direita. */
.fc-acesso-lamina {
  position: absolute;
  top: -10%;
  bottom: -10%;
  right: 9%;
  width: 120px;
  border-radius: 32px;
  background: var(--fc-consulting-amarelo);
  transform: skewX(var(--fc-inclinacao-skew));
}
/* A fina, partida em 64% de acento e 36% da cor do texto, a 16 px da larga. */
.fc-acesso-lamina-fina {
  position: absolute;
  top: -10%;
  bottom: -10%;
  right: calc(9% + 136px);
  width: 20px;
  display: grid;
  grid-template-rows: 64fr 36fr;
  gap: 12px;
  transform: skewX(var(--fc-inclinacao-skew));
}
.fc-acesso-lamina-fina i { display: block; border-radius: 10px; background: var(--fc-consulting-amarelo); }
.fc-acesso-lamina-fina i + i { background: var(--fc-branco); opacity: .9; }

.fc-acesso-coluna {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;
  min-width: 0;   /* item de grade: sem isto, um e-mail comprido alargava a coluna além da tela */
}

/* Marca menor que o padrão: aqui ela abre a coluna, não disputa com o cartão. */
.fc-acesso .fc-marca-escura { gap: 12px; }
.fc-acesso .fc-marca-escura img { width: 44px; height: 44px; }
.fc-acesso .fc-marca-escura b { font-size: 18px; }
.fc-acesso .fc-marca-escura small { margin-top: 6px; font-size: 10px; }
/* "By Freedom Start" em texto pequeno, como no site: sem a mono em caixa alta */
.fc-acesso .fc-marca-escura .fc-marca-by {
  margin-top: 5px; font-family: var(--fc-font-display); font-weight: 600; font-size: 12px;
  letter-spacing: .02em; text-transform: none; color: var(--fc-lavanda);
}
.fc-acesso .fc-marca-escura .fc-marca-by em { font-family: var(--fc-font-serif); font-style: italic; font-weight: 400; font-size: 13px; }

.fc-acesso-slogan {
  margin: 28px 0 24px;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-align: center;
}

.fc-acesso-cartao {
  --fc-destaque: var(--fc-roxo-freedom);
  /* Botão e links do cartão no roxo-noite do fundo (pedido de 2026-10-12) */
  --fc-primaria: var(--fc-noite);
  --fc-primaria-hover: #2E1C5C;
  width: 100%;
  padding: 40px;
  background: var(--fc-branco);
  color: var(--fc-texto);
  border-radius: var(--fc-raio-lg);
}

.fc-acesso-cabeca { margin-bottom: 28px; }
.fc-acesso-etiqueta { display: flex; margin-bottom: 10px; color: var(--fc-texto-apoio); }
.fc-acesso-cabeca .fc-subtitulo { font-size: 24px; }
.fc-acesso-cabeca .fc-apoio { margin-top: 6px; font-size: 17px; color: var(--fc-texto-apoio); }

/* O e-mail já informado, com a saída para trocar de conta. */
.fc-acesso-conta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-espaco-3);
  margin-bottom: var(--fc-espaco-4);
  padding: 10px 14px;
  background: var(--fc-papel);
  border: 1px solid var(--fc-fio);
  border-radius: var(--fc-raio-md);
  font-size: 14px;
}
/* min-width: 0 deixa o e-mail encolher com reticências: sem ele, um e-mail
   comprido alargava o cartão e passava da borda no celular. */
.fc-acesso-conta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fc-acesso-conta .fc-link { flex: none; font-size: 14px; }

.fc-acesso-acao { margin-top: var(--fc-espaco-2); }
.fc-acesso-alternativa { margin: 18px 0 0; text-align: center; }
.fc-acesso-alternativa .fc-link { font-size: 14px; }

/* Aviso de Termos e Política: uma linha discreta no fim do cartão, sem
   divisória nem ícone. */
.fc-acesso-lgpd {
  margin: 24px 0 0;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--fc-texto-apoio);
}
.fc-acesso-lgpd a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fc-acesso-lgpd a:hover { color: var(--fc-primaria); }

.fc-acesso-centros { margin-top: 36px; }

.fc-acesso-logo {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
}
.fc-acesso-logo img { display: block; width: 104px; height: auto; }

/* Tela até 1360 px: as lâminas encostam mais na borda. Na posição padrão a
   ponta de cima, inclinada, passava por trás do canto do cartão. */
@media (max-width: 1360px) and (min-width: 761px) {
  .fc-acesso-lamina { right: 1%; width: 100px; }
  .fc-acesso-lamina-fina { right: calc(1% + 116px); }
}

/* Notebook de tela baixa (1280 × 720): aperta o vertical para caber sem rolar. */
@media (max-height: 760px) and (min-width: 761px) {
  .fc-acesso { padding-top: 28px; padding-bottom: 80px; }
  .fc-acesso-slogan { margin: 20px 0 18px; }
  .fc-acesso-cartao { padding: 32px 40px; }
  .fc-acesso-centros { margin-top: 26px; }
  .fc-acesso-logo { bottom: 22px; }
}

/* Celular: a coluna sobe para o topo e as lâminas descem para o canto de
   baixo, onde não passam por trás de texto. */
@media (max-width: 760px) {
  .fc-acesso { place-items: start center; padding: 40px 16px 88px; }
  .fc-acesso-cartao { padding: 28px 22px; }
  /* Curtas, para não passar por trás dos ícones dos centros, que aqui não
     têm placa para cobri-las. */
  .fc-acesso-lamina { top: auto; bottom: -40px; right: -36px; height: 150px; width: 72px; border-radius: 20px; }
  .fc-acesso-lamina-fina { top: auto; bottom: -40px; right: 52px; height: 116px; width: 12px; gap: 8px; }
}
/* Celular bem estreito (320 px): sem lâminas. Não há canto livre, e elas
   passavam por trás do ícone da Freedom CTA. */
@media (max-width: 340px) {
  .fc-acesso-lamina, .fc-acesso-lamina-fina { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-btn, .fc-entrada, .fc-opcao input, .fc-chave input, .fc-chave input::after { transition: none; }
}


/* ------------------------------------------------------------
   11. Layout
   ------------------------------------------------------------ */

/* Área de conteúdo da página. 1200 px de largura útil. */
.fc-conteudo { width: 100%; max-width: 1248px; margin: 0 auto; padding: var(--fc-espaco-5) var(--fc-espaco-4); }

/* Pilha: filhos um embaixo do outro, com o mesmo espaço entre eles. */
.fc-pilha { display: flex; flex-direction: column; gap: var(--fc-gap, var(--fc-espaco-3)); }

/* Linha: filhos lado a lado, quebrando quando não cabem. */
.fc-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fc-gap, var(--fc-espaco-3)); }
.fc-linha-entre { justify-content: space-between; }

/* Grade: colunas que se ajustam à largura, de 260 px para cima. O min() deixa
   a coluna encolher quando a tela é mais estreita que ela; sem isso uma
   coluna de 460 px num celular de 390 vira rolagem lateral. */
.fc-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--fc-coluna, 260px), 100%), 1fr));
  gap: var(--fc-gap, var(--fc-espaco-4));
}

/* Texto corrido: até 66 caracteres por linha, entrelinha de tela. */
.fc-texto-corrido { max-width: 66ch; font-family: var(--fc-font-serif); font-size: 17px; line-height: 1.55; }

.fc-divisor { height: 0; margin: var(--fc-espaco-4) 0; border: 0; border-top: 1px solid var(--fc-fio); }


/* ------------------------------------------------------------
   12. Utilitários de espaço
   A escala é a do manual: 1=4, 2=8, 3=16, 4=24, 5=40, 6=60 px.
   m = margem, p = padding; t/b/l/r = topo, base, esquerda, direita;
   x = esquerda e direita; y = topo e base.
   ------------------------------------------------------------ */
.fc-m-0 { margin: 0 !important; }
.fc-m-1 { margin: var(--fc-espaco-1) !important; }
.fc-m-2 { margin: var(--fc-espaco-2) !important; }
.fc-m-3 { margin: var(--fc-espaco-3) !important; }
.fc-m-4 { margin: var(--fc-espaco-4) !important; }
.fc-m-5 { margin: var(--fc-espaco-5) !important; }
.fc-m-6 { margin: var(--fc-espaco-6) !important; }

.fc-mt-0 { margin-top: 0 !important; }
.fc-mt-1 { margin-top: var(--fc-espaco-1) !important; }
.fc-mt-2 { margin-top: var(--fc-espaco-2) !important; }
.fc-mt-3 { margin-top: var(--fc-espaco-3) !important; }
.fc-mt-4 { margin-top: var(--fc-espaco-4) !important; }
.fc-mt-5 { margin-top: var(--fc-espaco-5) !important; }
.fc-mt-6 { margin-top: var(--fc-espaco-6) !important; }

.fc-mb-0 { margin-bottom: 0 !important; }
.fc-mb-1 { margin-bottom: var(--fc-espaco-1) !important; }
.fc-mb-2 { margin-bottom: var(--fc-espaco-2) !important; }
.fc-mb-3 { margin-bottom: var(--fc-espaco-3) !important; }
.fc-mb-4 { margin-bottom: var(--fc-espaco-4) !important; }
.fc-mb-5 { margin-bottom: var(--fc-espaco-5) !important; }
.fc-mb-6 { margin-bottom: var(--fc-espaco-6) !important; }

.fc-ml-auto { margin-left: auto !important; }
.fc-mr-auto { margin-right: auto !important; }
.fc-mx-auto { margin-left: auto !important; margin-right: auto !important; }

.fc-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.fc-my-3 { margin-top: var(--fc-espaco-3) !important; margin-bottom: var(--fc-espaco-3) !important; }
.fc-my-4 { margin-top: var(--fc-espaco-4) !important; margin-bottom: var(--fc-espaco-4) !important; }
.fc-my-5 { margin-top: var(--fc-espaco-5) !important; margin-bottom: var(--fc-espaco-5) !important; }

.fc-p-0 { padding: 0 !important; }
.fc-p-1 { padding: var(--fc-espaco-1) !important; }
.fc-p-2 { padding: var(--fc-espaco-2) !important; }
.fc-p-3 { padding: var(--fc-espaco-3) !important; }
.fc-p-4 { padding: var(--fc-espaco-4) !important; }
.fc-p-5 { padding: var(--fc-espaco-5) !important; }
.fc-p-6 { padding: var(--fc-espaco-6) !important; }

.fc-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.fc-px-2 { padding-left: var(--fc-espaco-2) !important; padding-right: var(--fc-espaco-2) !important; }
.fc-px-3 { padding-left: var(--fc-espaco-3) !important; padding-right: var(--fc-espaco-3) !important; }
.fc-px-4 { padding-left: var(--fc-espaco-4) !important; padding-right: var(--fc-espaco-4) !important; }
.fc-px-5 { padding-left: var(--fc-espaco-5) !important; padding-right: var(--fc-espaco-5) !important; }

.fc-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.fc-py-2 { padding-top: var(--fc-espaco-2) !important; padding-bottom: var(--fc-espaco-2) !important; }
.fc-py-3 { padding-top: var(--fc-espaco-3) !important; padding-bottom: var(--fc-espaco-3) !important; }
.fc-py-4 { padding-top: var(--fc-espaco-4) !important; padding-bottom: var(--fc-espaco-4) !important; }
.fc-py-5 { padding-top: var(--fc-espaco-5) !important; padding-bottom: var(--fc-espaco-5) !important; }

/* Espaço entre filhos de .fc-pilha, .fc-linha e .fc-grade. */
.fc-gap-1 { --fc-gap: var(--fc-espaco-1); }
.fc-gap-2 { --fc-gap: var(--fc-espaco-2); }
.fc-gap-3 { --fc-gap: var(--fc-espaco-3); }
.fc-gap-4 { --fc-gap: var(--fc-espaco-4); }
.fc-gap-5 { --fc-gap: var(--fc-espaco-5); }
.fc-gap-6 { --fc-gap: var(--fc-espaco-6); }

/* Texto */
.fc-texto-apoio { color: var(--fc-texto-apoio) !important; }
.fc-texto-mono  { font-family: var(--fc-font-mono) !important; }
.fc-texto-centro { text-align: center !important; }
.fc-largura-total { width: 100% !important; }
.fc-oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ------------------------------------------------------------
   13. Ponte: menu lateral do FreedomV2
   O menu da área do cliente (v2/cliente/includes/shell-open.php) ainda é o
   .fv-sidebar do FreedomV2. A classe .fc-menu no <aside> dá a ele a
   identidade nova sem mexer no resto da casca nem no menu do admin.

   Funciona redefinindo as variáveis --fv-sidebar-* no próprio elemento: o
   CSS do FreedomV2 continua lendo as mesmas variáveis, só que com os valores
   da marca. O resto são ajustes por cima, todos presos em .fc-menu.

   Histórico das decisões (2026-10-06): uma lâmina amarela de "você está
   aqui" no item ativo foi testada e recusada; a barra de rolagem aparente
   também. O menu foi organizado em seções e ganhou a conta no rodapé.
   ------------------------------------------------------------ */
.fv-sidebar.fc-menu {
  --fv-sidebar-bg: var(--fc-noite);
  --fv-sidebar-text: #C9D0E4;          /* texto secundário sobre noite, do manual */
  --fv-sidebar-text-muted: #8F86B0;
  --fv-sidebar-border: rgba(226, 232, 248, .10);
  /* Ativo: lilás a 18% sobre o noite, o acento do grupo sobre escuro. Com o
     roxo cheio, o item do menu pesava mais que o conteúdo da página. Vem do
     token --fv-ativo-bg, o mesmo das abas e seletores das páginas, para as
     duas cores nunca se separarem. */
  --fv-sidebar-active-bg: var(--fv-ativo-bg, rgba(169, 139, 239, .18));
  --fv-sidebar-active-text: var(--fc-branco);
  font-family: var(--fc-font-display);
}
/* 16 px mais largo que o do FreedomV2: a Montserrat é mais larga que a
   Inter, e "Links Para Mapeamentos" passava da borda. Fica na casca, e não
   só no <aside>, porque o botão de recolher (irmão do menu) usa a mesma
   medida para se posicionar. */
.fv-shell:has(> .fv-sidebar.fc-menu) { --fv-sidebar-width: 264px; }

/* Sem barra de rolagem à vista: a barra clara do sistema destoava do fundo
   noite. O menu continua rolando com a roda do mouse, o toque e o Tab. */
.fv-sidebar.fc-menu { scrollbar-width: none; }
.fv-sidebar.fc-menu::-webkit-scrollbar { display: none; }

/* ---- Marca ----
   O símbolo da Consulting na versão de fundo escuro e o nome. No menu
   recolhido sobra só o símbolo. */
.fc-menu .fv-sidebar-brand { gap: 10px; padding: 22px 21px 14px; }
.fc-menu-simbolo { display: block; width: 34px; height: 34px; flex: none; }
.fc-menu .fv-sidebar-brand-text { font-weight: 700; font-size: 14.5px; letter-spacing: -.02em; }
/* "By Freedom Start" sob o nome (teste de 09/10/2026): pequeno e apagado,
   assina sem competir com a marca. Some com o menu recolhido, junto do nome. */
.fc-menu-marca { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fc-menu-by { font-family: var(--fc-font-display); font-weight: 500; font-size: 10.5px; line-height: 1.2; letter-spacing: .01em; color: #8F86B0; white-space: nowrap; }
.fv-sidebar.fc-menu.fv-collapsed .fc-menu-marca { display: none; }

/* ---- Seções ----
   Título em etiqueta mono, pequeno e apagado: organiza sem competir com os
   itens. Recolhido, o título vira um fio, para a separação continuar. */
.fc-menu .fv-sidebar-section-title {
  padding: 20px 12px 6px;
  font-family: var(--fc-font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--fv-sidebar-text-muted);
}
.fv-sidebar.fc-menu.fv-collapsed .fv-sidebar-section-title {
  display: block;
  height: 1px;
  margin: 12px 14px;
  padding: 0;
  overflow: hidden;
  font-size: 0;
  background: var(--fv-sidebar-border);
}

/* ---- Itens ----
   Leve (2026-10-09): peso 500 e o texto um tom abaixo do branco; só o item
   ativo fica branco e em 600. Os ícones descem para o lilás apagado e só
   acendem no ativo e no hover. Com tudo em 600 e ícone claro de 18px, o
   menu pesava mais que a página. */
.fc-menu .fv-nav-item {
  padding-top: 8px;
  padding-bottom: 8px;
  font-weight: 500;
  font-size: 13px;
  color: #B9B3CF;
  border-radius: 10px;
}
.fc-menu .fv-nav-item i { font-size: 17px; color: #8F86B0; transition: color .15s ease; }
.fc-menu .fv-nav-item:hover { background: rgba(226, 232, 248, .05); color: var(--fc-branco); }
.fc-menu .fv-nav-item:hover i { color: var(--fc-lilas); }
.fc-menu .fv-nav-item.fv-active { font-weight: 600; color: var(--fc-branco); }
.fc-menu .fv-nav-item.fv-active i { color: var(--fc-lilas); }

/* O grupo aberto (Mapeamentos) não leva fundo: quem marca a página é o
   subitem. Dois realces empilhados diziam a mesma coisa duas vezes. */
.fc-menu .fv-nav-group > summary.fv-active { background: none; color: #B9B3CF; font-weight: 500; }
.fc-menu .fv-nav-group > summary.fv-active:hover { background: rgba(226, 232, 248, .06); }
.fc-menu .fv-nav-group > summary.fv-active i { color: #8F86B0; }

/* Subitens pendurados numa linha-guia, no lugar do recuo solto. */
.fc-menu .fv-nav-sub {
  margin: 2px 0 6px 21px;
  padding-left: 8px;
  border-left: 1px solid var(--fv-sidebar-border);
}
.fc-menu .fv-nav-sub .fv-nav-item { padding-top: 7px; padding-bottom: 7px; border-left: 0; border-radius: 10px; }
.fc-menu .fv-nav-sub .fv-nav-item.fv-active {
  background: var(--fv-sidebar-active-bg);
  color: var(--fv-sidebar-active-text);
  font-weight: 600;
}
.fv-sidebar.fc-menu.fv-collapsed .fv-nav-sub { margin-left: 0; padding-left: 0; border-left: 0; }

/* Contador de novidades: amarelo com letra noite, retângulo de canto
   pequeno (pílula fica de fora da marca). */
.fc-menu .fv-nav-badge {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--fc-consulting-amarelo);
  color: var(--fc-noite);
  font-weight: 800;
  font-size: 11px;
  line-height: 1.3;
}

/* ---- Rodapé: a conta ----
   Preso na base: com a barra de rolagem escondida, nada avisaria que há mais
   menu embaixo, e o sair ficaria perdido. O resto rola por trás. */
.fc-menu .fv-sidebar-footer {
  position: sticky;
  bottom: 0;
  padding: 10px 12px 14px;
  background: var(--fv-sidebar-bg);
}
.fc-menu-conta { display: flex; align-items: center; gap: 4px; }
.fc-menu-pessoa {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 12px;
  color: var(--fc-branco);
  text-decoration: none;
}
.fc-menu-pessoa:hover { background: rgba(226, 232, 248, .06); }
.fc-menu-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--fc-lavanda);
  color: var(--fc-roxo-freedom);
  font-weight: 800;
  font-size: 14px;
}
.fc-menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fc-menu-pessoa-texto { min-width: 0; display: grid; gap: 2px; }
.fc-menu-pessoa-texto b,
.fc-menu-pessoa-texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-menu-pessoa-texto b { font-weight: 600; font-size: 13px; line-height: 1.2; }
.fc-menu-pessoa-texto small { font-weight: 500; font-size: 12px; line-height: 1.2; color: var(--fv-sidebar-text-muted); }
.fc-menu-sair {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--fv-sidebar-text-muted);
  font-size: 18px;
}
/* Vermelho claro do manual para "não" sobre escuro, só no hover. */
.fc-menu-sair:hover { background: rgba(255, 154, 154, .12); color: #FF9A9A; }
.fv-sidebar.fc-menu.fv-collapsed .fc-menu-conta { flex-direction: column; gap: 6px; }
.fv-sidebar.fc-menu.fv-collapsed .fc-menu-pessoa { flex: none; padding: 6px; }
.fv-sidebar.fc-menu.fv-collapsed .fc-menu-pessoa-texto { display: none; }

/* ---- Botão de recolher ----
   No escuro do menu, alinhado ao símbolo, no lugar da bolinha branca com
   sombra que flutuava sobre a página. */
.fv-shell:has(> .fv-sidebar.fc-menu) .fv-sidebar-toggle {
  top: 25px;
  background: var(--fc-noite);
  border-color: rgba(226, 232, 248, .18);
  color: #C9D0E4;
  box-shadow: none;
}
.fv-shell:has(> .fv-sidebar.fc-menu) .fv-sidebar-toggle:hover { color: var(--fc-branco); border-color: var(--fc-lilas); }


/* ------------------------------------------------------------
   14. Ponte: coluna de lista das páginas do FreedomV2
   A coluna à esquerda que filtra o painel da direita: unidades em Links
   Para Mapeamentos e na Matriz 9-Box, empresas na Pesquisa de Clima. Fica no
   mesmo noite do menu lateral, com o mesmo item ativo (--fv-ativo-*), e foi
   aprovada primeiro na página de links (2026-10-06).

   Duas caixas: .fc-lista-coluna estica até o fim do cartão e pinta o fundo;
   .fc-lista-rolagem ocupa a coluna inteira por posição absoluta e rola, sem
   barra à vista. Com uma caixa só e limite de altura, o fundo escuro parava
   antes do fim do cartão. O topo (.fc-lista-topo) fica preso enquanto a
   lista rola por baixo dele.

   As classes antigas de cada página (nb-un-item, fv-clima-empresa,
   fv-unidade-link-item) continuam nos itens: o JavaScript de cada tela
   procura por elas.
   ------------------------------------------------------------ */
.fc-lista-coluna {
  position: relative;
  width: 260px;
  flex-shrink: 0;
  background: var(--fv-sidebar-bg, var(--fc-noite));
  color: #C9D0E4;
  font-family: var(--fc-font-display);
}
.fc-lista-rolagem {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 0 12px 12px;
  scrollbar-width: none;
}
.fc-lista-rolagem::-webkit-scrollbar { display: none; }

.fc-lista-topo {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 0;
  background: var(--fv-sidebar-bg, var(--fc-noite));
}
.fc-lista-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.fc-lista-rotulo,
.fc-lista-secao {
  font-family: var(--fc-font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8F86B0;
}
.fc-lista-secao { display: block; margin: 8px 0 4px; padding: 12px 12px 4px; border-top: 1px solid rgba(226, 232, 248, .10); }
.fc-lista-sep { height: 1px; margin: 8px 0; background: rgba(226, 232, 248, .10); }

/* Botão de ação no topo da coluna (o "+" da Pesquisa de Clima): o primário
   é noite e sumiria no fundo, então leva o tom do item ativo do menu. */
.fc-lista-coluna .fv-btn-primary { background: var(--fv-ativo-bg); color: var(--fv-ativo-texto); }
.fc-lista-coluna .fv-btn-primary:hover { background: var(--fv-ativo-icone); color: var(--fc-noite); }

.fc-lista-busca { position: relative; }
.fc-lista-busca > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #8F86B0; pointer-events: none; }
.fc-lista-busca .fv-input {
  margin: 0;
  padding-left: 36px;
  background: rgba(226, 232, 248, .06);
  border-color: rgba(226, 232, 248, .12);
  color: var(--fc-branco);
}
.fc-lista-busca .fv-input::placeholder { color: #8F86B0; }
.fc-lista-busca .fv-input:focus { border-color: var(--fv-ativo-icone); box-shadow: 0 0 0 3px rgba(169, 139, 239, .18); }

.fc-lista-vazio { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #C9D0E4; }

/* ---- Itens ----
   Leve como o menu lateral (2026-10-09): nome em 500 e cinza lilás, só o
   ativo em branco e 600; etiquetas em contorno fino em vez de bloco. */
.fc-lista-item {
  display: block;
  margin-bottom: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}
.fc-lista-item:hover { background: rgba(226, 232, 248, .05); }
.fc-lista-item:hover .fc-lista-nome { color: var(--fc-branco); }
.fc-lista-nome { display: block; font-weight: 500; font-size: 13px; line-height: 1.3; color: #B9B3CF; }
.fc-lista-nome-apagado { color: #8F86B0; }
/* Nome e número na mesma linha ("Todas as Matrizes · 9"). */
.fc-lista-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fc-lista-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }

/* Etiqueta ("Links", "9-Box", "2 pesquisas") e contador. As páginas ainda
   usam .fv-badge em alguns deles porque o JavaScript atualiza o número por
   essa classe; aqui elas perdem a aparência de pílula do FreedomV2. */
.fc-lista-coluna .fc-lista-tag,
.fc-lista-coluna .fv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border: 1px solid rgba(226, 232, 248, .12);
  border-radius: 5px;
  background: transparent;
  font-family: var(--fc-font-display);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1.5;
  color: #8F86B0;
}
/* Alerta (cadastro incompleto na Pesquisa de Clima): amarelo da marca. */
.fc-lista-coluna .fv-badge-warning { border-color: var(--fc-consulting-amarelo); background: var(--fc-consulting-amarelo); color: var(--fc-noite); }
.fc-lista-coluna .fc-lista-numero { font-size: 12px; color: #8F86B0; font-variant-numeric: tabular-nums; }

.fc-lista-item.fv-active { background: var(--fv-ativo-bg); }
.fc-lista-item.fv-active .fc-lista-nome { font-weight: 600; color: var(--fv-ativo-texto); }
.fc-lista-item.fv-active .fc-lista-tag,
.fc-lista-item.fv-active .fv-badge:not(.fv-badge-warning) { border-color: rgba(169, 139, 239, .35); color: var(--fv-ativo-texto); }
.fc-lista-item.fv-active .fc-lista-numero { color: var(--fv-ativo-icone); }


/* ------------------------------------------------------------
   15. Ponte: painéis de mapeamento do FreedomV2
   ------------------------------------------------------------
   Peças dos dashboards de uma pessoa (Freedom ID, Mapa de
   Satisfação...) na linguagem da Consulting, para páginas que
   continuam no FreedomV2. Ficam sob .fc-mp e leem os tokens do
   FreedomV2 (superfície, fio, texto, primária), então seguem o
   tema claro ou escuro da página sozinhas.

   Regra de cor: etiqueta em mono, número em Montserrat, barras no
   par noite e lilás, com a maior em cor cheia. Cor de dado (DISC,
   zona de satisfação) só onde ela é a informação, e sempre com o
   texto junto.

   <div class="fc-mp">
     <div class="fc-mp-ficha">
       <div class="fc-mp-ficha-item">
         <span class="fc-etiqueta">Média geral</span>
         <span class="fc-mp-ficha-valor">6,5</span>
         <span class="fc-mp-ficha-det">Bom</span>
       </div>
     </div>
     <article class="fc-mp-cartao">
       <div class="fc-mp-cabeca">
         <span class="fc-etiqueta"><span class="fc-mp-num">01</span> DISC</span>
         <span class="fc-mp-cabeca-fim"><span class="fc-mp-data">27/07/2026</span></span>
       </div>
       <div class="fc-mp-linhas">
         <div class="fc-mp-linha fc-mp-linha-top">
           <span class="fc-mp-linha-nome">Social</span>
           <span class="fc-mp-linha-valor">37,9%</span>
           <span class="fc-mp-linha-barra"><i style="width:37.9%"></i></span>
         </div>
       </div>
     </article>
   </div> */
.fc-mp {
  --fc-mp-acento: var(--fv-primary-500, #6B4FB8);
  --fc-mp-barra:  var(--fv-primary-300, #C8B6F4);
  --fc-mp-trilho: color-mix(in srgb, var(--fv-text, #10151C) 7%, transparent);
}
:root[data-theme="dark"] .fc-mp {
  --fc-mp-acento: var(--fv-primary-400, #A98BEF);
  --fc-mp-barra:  color-mix(in srgb, var(--fv-primary-400, #A98BEF) 40%, transparent);
}
.fc-mp .fc-etiqueta { gap: 4px 10px; flex-wrap: wrap; font-size: 11px; color: var(--fv-text-muted, var(--fc-grafite)); }
/* (quebra a linha em tela estreita: a etiqueta é flex, e o texto longo de
   uma barra de ferramentas passava da borda no celular) */
.fc-mp .fc-pf { color: var(--fc-mp-acento); }

/* Ficha: resultados lado a lado. Cada célula tem fio à esquerda e em
   cima; a margem de -1px esconde o que cairia na borda, com qualquer
   número de colunas. */
.fc-mp-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  overflow: hidden;
  background: var(--fv-surface, #fff);
  border: 1px solid var(--fv-border, var(--fc-fio));
  border-radius: var(--fv-radius-lg, 14px);
}
.fc-mp-ficha-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 18px 20px;
  margin: -1px 0 0 -1px;
  border-left: 1px solid var(--fv-border, var(--fc-fio));
  border-top: 1px solid var(--fv-border, var(--fc-fio));
}
.fc-mp-ficha-valor {
  font-family: var(--fc-font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--fv-text, var(--fc-tinta));
}
/* Número grande (média, índice): Montserrat 900 e a unidade menor */
.fc-mp-ficha-valor.fc-mp-numero { font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.fc-mp-numero small { margin-left: 2px; font-size: .42em; font-weight: 700; letter-spacing: 0; color: var(--fv-text-muted, var(--fc-grafite)); }
.fc-mp-ficha-det {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fc-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--fv-text-muted, var(--fc-grafite));
  font-variant-numeric: tabular-nums;
}
/* Ponto de cor de dado ao lado do texto (zona, fator): a cor nunca sozinha */
.fc-mp-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--fc-mp-acento)); }

/* Cartão */
.fc-mp-cartao {
  min-width: 0;
  padding: 20px 22px 22px;
  background: var(--fv-surface, #fff);
  border: 1px solid var(--fv-border, var(--fc-fio));
  border-radius: var(--fv-radius-lg, 14px);
}
.fc-mp-cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.fc-mp-cabeca .fc-etiqueta { color: var(--fv-text, var(--fc-tinta)); }
.fc-mp-num { color: var(--fc-mp-acento); }
.fc-mp-cabeca-fim { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.fc-mp-data { font-family: var(--fc-font-mono); font-size: 11px; color: var(--fv-text-muted, var(--fc-grafite)); font-variant-numeric: tabular-nums; }
.fc-mp-abrir {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--fv-border, var(--fc-fio));
  border-radius: 8px;
  color: var(--fv-text-muted, var(--fc-grafite));
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.fc-mp-abrir:hover { color: var(--fv-text, var(--fc-tinta)); border-color: var(--fc-mp-acento); }
.fc-mp-vazio { margin: 0; font-size: 13px; color: var(--fv-text-muted, var(--fc-grafite)); }

/* Fio com acento: linha fina em cima e um traço lilás no começo */
.fc-mp-fio { position: relative; padding-top: 16px; border-top: 1px solid var(--fv-border, var(--fc-fio)); }
.fc-mp-fio::before { content: ''; position: absolute; left: 0; top: -1px; width: 28px; height: 2px; background: var(--fc-mp-acento); }

/* Linhas de barra: nome e valor em cima, barra fina embaixo. A
   primeira (a maior, as listas chegam ordenadas) sai em cor cheia. */
.fc-mp-linhas { display: flex; flex-direction: column; gap: 12px; }
.fc-mp-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 12px; font-size: 13px; }
.fc-mp-linha-nome { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--fv-text-muted, var(--fc-grafite)); }
.fc-mp-linha-valor { font-family: var(--fc-font-mono); font-size: 12px; color: var(--fv-text-muted, var(--fc-grafite)); font-variant-numeric: tabular-nums; }
.fc-mp-linha-barra { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--fc-mp-trilho); }
.fc-mp-linha-barra i { display: block; height: 100%; border-radius: 3px; background: var(--fc-mp-barra); }
.fc-mp-linha-top .fc-mp-linha-nome { font-weight: 700; color: var(--fv-text, var(--fc-tinta)); }
.fc-mp-linha-top .fc-mp-linha-valor { font-weight: 600; color: var(--fv-text, var(--fc-tinta)); }
.fc-mp-linha-top .fc-mp-linha-barra i { background: var(--fv-primary, var(--fc-noite)); }
/* Barra na cor do próprio dado (cada sabotador, cada área), passada em
   --c na linha: <div class="fc-mp-linha fc-mp-linha-cor" style="--c:#f97316">.
   Vence o noite da linha principal; o texto continua neutro. */
.fc-mp-linha-cor .fc-mp-linha-barra i,
.fc-mp-linha-cor.fc-mp-linha-top .fc-mp-linha-barra i { background: var(--c); }
/* Posição no ranking, antes do nome */
.fc-mp-pos { flex: none; min-width: 18px; font-family: var(--fc-font-mono); font-size: 11px; font-weight: 400; color: var(--fc-mp-acento); }

/* Histórico: cartão noite como o menu e a coluna de lista. Serve para a
   lista de mapeamentos (.fc-mp-hist-item) e para a de análises da IA
   (.fv-ia-hist-item, que o JavaScript das abas de IA procura). */
.fc-mp-hist { padding: 18px 12px 12px; background: var(--fv-sidebar-bg, var(--fc-noite)); border-radius: var(--fv-radius-lg, 14px); color: #fff; }
:root[data-theme="dark"] .fc-mp-hist { box-shadow: inset 0 0 0 1px var(--fv-border); }
.fc-mp-hist > .fc-etiqueta { display: flex; padding: 0 8px; margin-bottom: 12px; color: var(--fc-lilas); }
.fc-mp-hist > .fc-etiqueta small { margin-left: auto; font-size: inherit; color: #8F86B0; }
.fc-mp-hist .fv-ia-hist-list { display: flex; flex-direction: column; gap: 2px; }
.fc-mp-hist-item,
.fc-mp-hist .fv-ia-hist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #C7C1D6;
  font-size: 13px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.fc-mp-hist-item { display: block; }
.fc-mp-hist-item + .fc-mp-hist-item,
.fc-mp-hist .fv-ia-hist-item + .fv-ia-hist-item { margin-top: 2px; }
.fc-mp-hist-item:hover,
.fc-mp-hist .fv-ia-hist-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.fc-mp-hist-item.fc-mp-hist-ativo,
.fc-mp-hist .fv-ia-hist-item.fv-active { background: var(--fv-ativo-bg, #312155); color: var(--fv-ativo-texto, #fff); }
.fc-mp-hist-data { display: block; font-weight: 600; color: inherit; font-variant-numeric: tabular-nums; }
.fc-mp-hist-sub { display: block; margin-top: 2px; font-size: 11.5px; color: #8F86B0; }
.fc-mp-hist-ativo .fc-mp-hist-sub { color: #C8B6F4; }
.fc-mp-hist .fv-ia-hist-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #786F8F; opacity: 1; }
.fc-mp-hist .fv-ia-hist-item.fv-active .fv-ia-hist-dot { background: var(--fv-ativo-icone, #A98BEF); }
.fc-mp-hist .fv-ia-hist-data { font-weight: 600; font-variant-numeric: tabular-nums; }
.fc-mp-hist .fv-ia-hist-hora { margin-left: auto; font-family: var(--fc-font-mono); font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }
.fc-mp-hist .fv-ia-hist-vazio { display: block; padding: 2px 8px 6px; font-size: 12px; line-height: 1.5; color: #C7C1D6; }
.fc-mp-hist .fv-ia-hist-vazio i { display: none; }
.fc-mp-hist-vazio { margin: 0; padding: 2px 8px 6px; font-size: 12px; line-height: 1.5; color: #C7C1D6; }

/* Aba Freedom IA: histórico, bloco de gerar e o documento da análise */
.fc-mp-ia-grade { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--fv-space-4, 16px); align-items: start; }
.fc-mp-preso { position: sticky; top: calc(var(--fv-topbar-height, 68px) + 16px); }
/* O aviso verde de "objetivo definido" vira uma linha neutra */
/* (a segunda linha vence o .fv-alert-success do modo escuro do components.css) */
.fc-mp-ia-status .fv-alert-success,
:root[data-theme="dark"] .fc-mp-ia-status .fv-alert-success { background: var(--fv-surface, #fff); border-color: var(--fv-border, var(--fc-fio)); color: var(--fv-text-muted, var(--fc-grafite)); }
.fc-mp-ia-status .fv-alert-success .fv-alert-icon { color: var(--fc-mp-acento); }
.fc-mp-ia-status .fv-alert-success strong { color: var(--fv-text, var(--fc-tinta)); }
.fc-mp-ia-acao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding: 22px 24px;
  margin-bottom: var(--fv-space-4, 16px);
  background: var(--fv-surface, #fff);
  border: 1px solid var(--fv-border, var(--fc-fio));
  border-radius: var(--fv-radius-lg, 14px);
}
.fc-mp-ia-acao-texto { flex: 1 1 360px; min-width: 0; }
.fc-mp-ia-acao-texto p { margin: 10px 0 0; font-family: var(--fc-font-serif); font-size: 16px; line-height: 1.5; color: var(--fv-text-muted, var(--fc-grafite)); }
.fc-mp-ia-acao-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fc-mp-ia-custo { margin-left: 6px; padding-left: 10px; border-left: 1px solid currentColor; font-family: var(--fc-font-mono); font-size: 11px; font-weight: 500; opacity: .75; }
.fc-mp-ia-saldo { font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fv-text-muted, var(--fc-grafite)); }
.fc-mp-ia-doc { padding: 24px 28px 28px; background: var(--fv-surface, #fff); border: 1px solid var(--fv-border, var(--fc-fio)); border-radius: var(--fv-radius-lg, 14px); }
.fc-mp-ia-doc-cabeca { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--fv-border, var(--fc-fio)); }
.fc-mp-ia-doc-cabeca .fc-etiqueta { color: var(--fv-text, var(--fc-tinta)); }

/* Em página que já tem coluna lateral (Mapa de Satisfação, Sabotadores), o
   histórico da IA vira uma faixa noite em cima do conteúdo: como terceira
   coluna, ficavam dois cartões noite lado a lado e o texto da análise espremido. */
.fc-mp-ia-grade.fc-mp-ia-faixa { grid-template-columns: minmax(0, 1fr); }
.fc-mp-ia-faixa > .fc-mp-hist { position: static; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px; }
.fc-mp-ia-faixa > .fc-mp-hist > .fc-etiqueta { margin: 0; padding: 0 4px; }
.fc-mp-ia-faixa > .fc-mp-hist > div { display: flex; flex-wrap: wrap; gap: 4px; }
.fc-mp-ia-faixa .fc-mp-hist .fv-ia-hist-item { padding: 6px 10px; }
.fc-mp-ia-faixa .fc-mp-hist .fv-ia-hist-item + .fv-ia-hist-item { margin-top: 0; }
.fc-mp-ia-faixa .fc-mp-hist .fc-mp-hist-vazio { padding: 0 4px; }
/* Histórico que vem numa lista (.fv-ia-hist-list, data e hora em spans): em linha na faixa */
.fc-mp-ia-faixa .fc-mp-hist .fv-ia-hist-list { flex-direction: row; flex-wrap: wrap; gap: 4px; }
.fc-mp-ia-faixa .fc-mp-hist .fv-ia-hist-hora { margin-left: 6px; }
.fc-mp-ia-faixa .fc-mp-hist .fv-ia-hist-vazio { padding: 0 4px; }

@media (max-width: 960px) {
  .fc-mp-ia-grade { grid-template-columns: 1fr; }
  .fc-mp-preso { position: static; }
}
@media (max-width: 640px) {
  .fc-mp-ia-acao-lado { align-items: stretch; width: 100%; }
  .fc-mp-ia-doc { padding: 20px 16px 22px; }
}

/* O atalho também serve como botão (ampliar gráfico) */
button.fc-mp-abrir { padding: 0; background: transparent; font: inherit; cursor: pointer; }

/* Texto de análise da Freedom IA em HTML simples (h3, h4, p, listas),
   como o do Mapa de Satisfação. Só tipografia: as análises antigas
   guardam esse mesmo HTML. Seção numerada em mono, item de lista com a
   lâmina pequena, lista numerada em mono. */
.fc-mp-ia-texto { counter-reset: fc-mp-sec; font-size: 14px; line-height: 1.7; color: var(--fv-text, var(--fc-tinta)); }
.fc-mp-ia-texto > :first-child { margin-top: 0; }
.fc-mp-ia-texto h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 32px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--fv-border, var(--fc-fio));
  font-family: var(--fc-font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--fv-text, var(--fc-tinta));
}
.fc-mp-ia-texto h3::before {
  counter-increment: fc-mp-sec;
  content: counter(fc-mp-sec, decimal-leading-zero);
  flex: none;
  font-family: var(--fc-font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--fc-mp-acento);
}
.fc-mp-ia-texto h4 { margin: 22px 0 8px; font-family: var(--fc-font-display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: var(--fv-text, var(--fc-tinta)); }
.fc-mp-ia-texto p { margin: 0 0 12px; }
.fc-mp-ia-texto strong { font-weight: 700; color: var(--fv-text, var(--fc-tinta)); }
.fc-mp-ia-texto ul,
.fc-mp-ia-texto ol { margin: 0 0 14px; padding: 0; list-style: none; }
.fc-mp-ia-texto li { position: relative; padding: 10px 0 10px 24px; border-bottom: 1px solid var(--fv-border, var(--fc-fio)); }
.fc-mp-ia-texto li:last-child { border-bottom: 0; }
.fc-mp-ia-texto ul > li::before { content: ''; position: absolute; left: 2px; top: 19px; width: 8px; height: 8px; background: var(--fc-mp-acento); transform: skewX(-23.5deg); }
.fc-mp-ia-texto ol { counter-reset: fc-mp-item; }
.fc-mp-ia-texto ol > li { counter-increment: fc-mp-item; padding-left: 36px; }
.fc-mp-ia-texto ol > li::before { content: counter(fc-mp-item, decimal-leading-zero); position: absolute; left: 0; top: 13px; font-family: var(--fc-font-mono); font-size: 11px; letter-spacing: .1em; color: var(--fc-mp-acento); }