/* Fin Farma — ff-ui.css: a camada de identidade COMPARTILHADA entre o site
   institucional e a plataforma. Fonte da regra: brand/IDENTIDADE.md.

   O que mora aqui é SÓ o que os dois lados usam e usam IGUAL — cor,
   tipografia, a voz do título, botão (cor e comportamento), chip de estado,
   foco visível e o símbolo da marca. Tamanho, espaçamento e layout de cada
   lado continuam nos arquivos locais: o site é peça de venda, a plataforma é
   ferramenta de oito horas por dia, e as métricas de cada um são decisão de
   cada um.

   Nomes: os canônicos são os da plataforma (btn-primario, overline); os do
   site (btn-primary, eyebrow) saem daqui como alias, no MESMO seletor —
   nenhum HTML precisou mudar e nada quebra.

   Este arquivo existe em frontend/app/ e frontend/site/ e as duas cópias são
   conferidas byte a byte por teste (core.test.js): divergiram, o teste
   quebra. Ele absorveu o antigo tokens.css — que já era idêntico nos dois
   lados — e é o único lugar onde cor de marca se define. */

/* ---------------- 1 · Tokens de marca (o antigo tokens.css) ---------------- */
:root {
  /* ---- Marca ---- */
  --ff-marinho: #16305E;   /* ação primária, botão, link, foco */
  --ff-tinta:   #0F1B33;   /* texto principal, fundo de sidebar */
  --ff-dourado: #D1A13A;   /* SÓ marca e reconhecimento — nunca botão */
  --ff-cinza:   #EDEFF3;   /* superfície secundária */
  --ff-branco:  #FFFFFF;   /* card, topbar */

  /* ---- Estado ---- */
  --ff-verde:    #0E7C5A;  /* dentro da meta, concluído, validado */
  --ff-vermelho: #B3261E;  /* fora da meta, erro */
  --ff-ambar:    #B45309;  /* atenção, pendente */

  /* ---- Escala de apoio (interface, não é cor de marca) ---- */
  --ff-fundo-app:      #F7F8FA;
  --ff-borda-card:     #E2E5EB;
  --ff-divisor:        #EDEFF3;
  --ff-superficie:     #F4F6F9;
  --ff-texto-2:        #41506B;
  --ff-texto-3:        #5B6577;
  --ff-texto-apoio:    #6B7383;
  --ff-texto-inativo:  #9AA3B2;

  /* sobre fundo tinta */
  --ff-sobre-tinta-inativo: #A9B2C2;
  --ff-sobre-tinta-corpo:   #C7D0DE;
  --ff-sobre-tinta-apoio:   #8A93A3;

  /* ---- Tipografia ---- */
  --ff-fonte: Archivo, "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-fonte-marca: Jost, Archivo, sans-serif;  /* wordmark e números grandes */
}

/* ------------- 2 · Tokens de trabalho (os nomes que o CSS usa) ------------- */
:root {
  --marinho: #16305E;
  --marinho-escuro: #0F1B33;   /* tinta — não existe token próprio de hover */
  --tinta: #0F1B33;
  --dourado: #D1A13A;
  --cinza: #EDEFF3;
  --branco: #FFFFFF;

  --verde: #0E7C5A;
  --vermelho: #B3261E;
  --ambar: #B45309;

  --fundo-app: #F7F8FA;
  --borda: #E2E5EB;
  --superficie: #F4F6F9;
  --texto: #0F1B33;
  --texto-suave: #41506B;
  --texto-apoio: #6B7383;

  /* dourado escurecido só para TEXTO — o #D1A13A puro não tem contraste em
     fundo claro (2.2:1). Este tom mantém a cor da marca e passa em 4.5:1. */
  --dourado-texto: #8A6D1F;
}

/* --------------------------- 3 · Base tipográfica -------------------------- */
/* nunca fabricar peso ou itálico: fonte sintética é o que "treme" na tela */
body { font-synthesis: none; text-rendering: optimizeLegibility; }

/* Todo número exibido usa tabular-nums. */
.num, .ff-num { font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }

/* ------------- 4 · A voz (título) e os rótulos de seção ------------- */
/* Três fontes, três papéis: Instrument Serif é a VOZ (título de display),
   Archivo é o TRABALHO (interface e texto), Jost é o DADO (número grande).
   A segunda metade do título vai em itálico dourado — o acento editorial.
   TAMANHO é local: o site fala mais alto que a ferramenta de trabalho. */
.titulo-display {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400; letter-spacing: -0.015em;
}
.titulo-display em { font-style: italic; color: var(--dourado-texto); }

/* rótulo pequeno em caixa alta sobre fundo claro (a plataforma o chama
   overline; é o padrão canônico) */
.overline {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-apoio); margin-bottom: 8px;
}
/* rótulo de seção sobre fundo escuro, em Jost dourado (o site o chama
   eyebrow). NÃO é alias do overline: são dois padrões, os dois escritos. */
.eyebrow {
  font-family: Jost, Archivo, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; color: var(--dourado); margin-bottom: 16px;
}

/* ------------- 5 · Botões: cor e comportamento (tamanho é local) ------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* ação primária é MARINHO — dourado nunca é botão */
.btn-primario, .btn-primary { background: var(--marinho); color: var(--branco); }
.btn-primario:hover, .btn-primary:hover { background: var(--tinta); }

/* ----------------------------- 6 · Foco visível ---------------------------- */
a:focus-visible, button:focus-visible, select:focus-visible,
.btn:focus-visible, .aba:focus-visible {
  outline: 3px solid var(--dourado); outline-offset: 2px;
}

/* --------------------------- 7 · Chip de estado ---------------------------- */
.estado {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px;
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado-neutro { color: var(--texto-apoio); background: var(--superficie); border: 1px solid var(--borda); }
.estado-atencao { color: var(--ambar); background: #FBF0E4; border: 1px solid #F0DCC0; }
.estado-erro { color: var(--vermelho); background: #FBEAE9; border: 1px solid #F2D3D1; }
.estado-ok { color: var(--verde); background: #E7F3EE; border: 1px solid #CBE4DA; }

/* ---------------------------- 8 · Símbolo da marca -------------------------
   Único logo válido: brand/logo/fin-farma-simbolo-plano.svg.
   Em fundo escuro as duas barras marinho viram brancas; a dourada nunca muda. */
.ff-simbolo path {
  fill: none;
  stroke-width: 37.5;
  stroke-linecap: round;
}
.ff-simbolo .ff-barra-marinho { stroke: var(--ff-marinho); }
.ff-simbolo .ff-barra-dourada { stroke: var(--ff-dourado); }
.ff-simbolo .ff-barra-branca { stroke: #FFFFFF; }

/* variante para fundo escuro */
.ff-simbolo--escuro .ff-barra-marinho { stroke: var(--ff-branco); }

/* ==========================================================================
   O PADRÃO DOS QUATRO QUADRANTES (rodada QQ · 04/09/2026)
   ==========================================================================
   Ele mora na camada COMPARTILHADA de propósito: o mesmo componente serve o
   site institucional, a plataforma logada e a demonstração. Uma cópia
   paralela no site era o caminho garantido para as duas divergirem na
   primeira correção — e foi assim que o site ficou com uma aba que a
   plataforma não tinha mais.

   A geometria é DERIVADA de uma escala de 4px e publicada em
   `ESCALA_QUADRANTE` (core.js), com teste que falha se as duas pontas
   divergirem. A régua `tools/telaquadrante.mjs` mede a igualdade ENTRE
   módulos — altura, largura, gap e raio — não o valor específico.

   A REGRA: o conteúdo se adapta à caixa, nunca o contrário. */
:root {
  --q-gap: 16px;     /* 4×4 — entre colunas, entre linhas e entre as faixas */
  --q-raio: 14px;    /* o raio do cartão da casa */
  --q-alt: 220px;    /* 44×5 — a altura em que o desenho ainda é desenho */
  --q-faixa2: 352px; /* 44×8 — gráfico principal e Copiloto na MESMA altura */
}

/* ---- faixa 1: quatro quadrantes ------------------------------------------ */
.faixa-quadrantes {
  display: grid; gap: var(--q-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--q-gap);
}
/* `min-width: 0` é obrigatório: item de grade nasce com `auto`, e um conteúdo
   largo (um selo, um valor comprido) empurra a coluna além do container —
   foi o defeito que fez o cartão do cockpit medir 388px numa tela de 390. */
.faixa-quadrantes > * { min-width: 0; }

.quadrante {
  display: grid;
  /* quatro faixas: rótulo · âncora · gráfico · apoio. A peça que não existe
     deixa a faixa DELA vazia em vez de puxar as outras — é a regra do KPI que
     nunca desmonta, aplicada à altura. */
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  height: var(--q-alt);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--q-raio);
  padding: 12px 14px;
  text-decoration: none; color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.quadrante:hover, .quadrante:focus-visible {
  transform: translateY(-2px); border-color: var(--marinho);
  box-shadow: 0 8px 20px rgba(15,27,51,.10);
}
.q-rot {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-apoio);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.q-ancora { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.q-ancora .valor {
  font-family: var(--ff-fonte-marca); font-size: 26px; line-height: 1.05;
  font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums;
}
.q-ancora .valor-vazio { color: var(--ff-texto-inativo); }
.q-ancora .q-unidade { font-size: 12px; color: var(--texto-apoio); }
.q-graf { display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
.q-graf > * { max-width: 100%; }
/* o svg dos gráficos carrega width/height explícitos (o viz.js desenha em px);
   sem isto o arco de 168px estoura a coluna de 149px do celular */
.q-graf svg { max-width: 100%; height: auto; }
.q-apoio {
  margin: 0; font-size: 12px; line-height: 1.35; color: var(--texto-suave);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- faixa 2: o gráfico principal e o Copiloto DELE, na mesma altura ------
   O gráfico é maior que o Copiloto de propósito: ele é a resposta, o Copiloto
   é a leitura. As duas colunas terminam juntas — alturas diferentes aqui
   deixariam o buraco que a `telaorfao` acusa. */
.faixa-principal {
  display: grid; gap: var(--q-gap);
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  margin-top: var(--q-gap);
}
.faixa-principal > * { min-width: 0; }
.fp-grafico, .fp-copiloto {
  height: var(--q-faixa2); border-radius: var(--q-raio);
  border: 1px solid var(--borda); padding: 14px;
  display: flex; flex-direction: column; overflow: hidden;
}
.fp-grafico { background: var(--branco); }
.fp-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.fp-titulo { font-size: 14px; font-weight: 600; color: var(--tinta); margin: 0; }
.fp-palco { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; }
.fp-palco > * { max-width: 100%; }

.fp-copiloto { background: var(--tinta); border-color: var(--tinta); color: var(--ff-sobre-tinta-corpo); }
.fp-copiloto .fp-titulo { color: var(--branco); }
.fp-cop-estrela { color: var(--dourado); font-size: 15px; }
.fp-cop-lista {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0;
  list-style: none; display: grid; gap: 8px; align-content: start;
}
.fp-cop-linha {
  display: block; text-decoration: none; color: var(--ff-sobre-tinta-corpo);
  border-left: 3px solid var(--ff-sobre-tinta-inativo); padding: 4px 0 4px 10px;
  font-size: 12.5px; line-height: 1.35;
}
.fp-cop-linha:hover, .fp-cop-linha:focus-visible { color: var(--branco); }
.fp-cop-linha[data-nivel="Crítica"] { border-left-color: var(--vermelho); }
.fp-cop-linha[data-nivel="Alta"] { border-left-color: var(--ambar); }
.fp-cop-nivel {
  display: block; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ff-sobre-tinta-inativo);
}
.fp-cop-pe { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-cop-nota { font-size: 11px; color: var(--ff-sobre-tinta-inativo); margin: 0; }

/* ELE É CONVERSÁVEL. O campo abre a conversa DESTA aba com a pergunta feita —
   responder aqui exigiria um segundo fio sobre o mesmo assunto, e dois fios
   são duas respostas que divergem. No site, onde não há conversa para abrir,
   o mesmo lugar recebe as perguntas de exemplo (.fp-cop-sug) apontando para a
   demonstração: campo que não responde é pior do que campo nenhum. */
.fp-cop-forma { margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.fp-cop-campo {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12.5px;
  padding: 8px 10px; border-radius: 8px; color: var(--branco);
  background: rgba(255, 255, 255, .08); border: 1px solid var(--ff-sobre-tinta-inativo);
}
.fp-cop-campo::placeholder { color: var(--ff-sobre-tinta-inativo); }
.fp-cop-campo:focus-visible { outline: 2px solid var(--dourado); outline-offset: 1px; }
.fp-cop-forma .btn { flex: 0 0 auto; }
.fp-cop-sug { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.fp-cop-sug a {
  font-size: 11.5px; line-height: 1.2; text-decoration: none;
  color: var(--ff-sobre-tinta-corpo); border: 1px solid var(--ff-sobre-tinta-inativo);
  border-radius: 999px; padding: 6px 10px;
}
.fp-cop-sug a:hover, .fp-cop-sug a:focus-visible { color: var(--branco); border-color: var(--dourado); }

/* ---- tablet: 2×2, e a faixa 2 empilha com o GRÁFICO primeiro -------------- */
@media (max-width: 1024px) {
  .faixa-quadrantes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faixa-principal { grid-template-columns: minmax(0, 1fr); }
  .fp-copiloto { height: auto; min-height: 200px; }
}
/* ---- celular: continua 2×2 — uma coluna vira lista, e lista ninguém lê no
   meio do turno. O alvo cresce por dentro do próprio quadrante. ------------- */
@media (max-width: 560px) {
  .faixa-quadrantes { gap: 12px; }
  /* No celular a coluna tem ~130px e o RÓTULO quebra em duas ou três linhas —
     o que sobrava para o desenho caía a 41px e o gráfico saía cortado sem
     avisar (achado da telacelular a 360). A altura sobe aqui, e só aqui: no
     computador o quadrante continua nos 220px da escala. */
  .quadrante { height: 248px; padding: 10px 12px; }
  /* numa coluna de 130px a linha de apoio em duas linhas é uma parede; ela
     clampa em UMA (com as reticências, que é aviso — corte mudo é outra
     coisa) e o que sobra vai para o desenho, que é o que se lê num relance */
  .q-apoio { -webkit-line-clamp: 1; }
  .q-ancora .valor { font-size: 22px; }
  .fp-grafico { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .quadrante { transition: none; }
  .quadrante:hover, .quadrante:focus-visible { transform: none; }
}

/* O alvo do dedo no pé do Copiloto (achado da telacelular, 04/09/2026): o
   "Abrir a conversa →" media 32px de altura. No ponteiro grosso ele cresce
   para 44px — e a régua da casa é a mesma desde a rodada do celular. */
@media (pointer: coarse) {
  .fp-cop-pe .link-quieto { min-height: 44px; display: inline-flex; align-items: center; }
  /* o campo do Copiloto no dedo: 44px de alvo e 16px de fonte — abaixo disso
     o Safari AMPLIA a página inteira e não desamplia sozinha */
  .fp-cop-campo { min-height: 44px; font-size: 16px; }
  .fp-cop-sug a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ==========================================================================
   PAREADO (rodada SP2 · 04/09/2026): a linguagem gráfica de COMPRAS
   ==========================================================================
   "O que tem contra o que a regra pede": duas barras na MESMA escala, uma
   embaixo da outra — a de cima é o que a loja tem (ou comprou), na cor do
   estado; a de baixo é a RÉGUA, em traço dourado (o mesmo papel do risco do
   medidor: a marca da casa, nunca estado). O manual de compras decide toda
   compra por uma comparação, e comparação é o que o olho mede sem errar.

   Mora na camada COMPARTILHADA porque o site e a plataforma desenham a MESMA
   peça com a MESMA marcação (`vizPareado` em viz.js; HTML estático no site);
   só a largura das barras é dado. Sem medida de caixa: quem dá o tamanho é
   o quadrante que a contém. */
.pareado { display: grid; gap: 6px; width: 100%; min-width: 0; align-self: center; font-size: 11px; line-height: 1.2; }
.par-linha { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.par-rot { color: var(--texto-apoio); overflow-wrap: anywhere; }
.par-trilho { display: block; height: 10px; border-radius: 999px; background: var(--cinza); overflow: hidden; }
.par-barra { display: block; height: 100%; border-radius: 999px; background: var(--marinho); }
.pareado.tom-bom .par-tem .par-barra { background: var(--verde); }
.pareado.tom-atencao .par-tem .par-barra { background: var(--ambar); }
.pareado.tom-ruim .par-tem .par-barra { background: var(--vermelho); }
/* a régua: contorno dourado e traço pontilhado — é referência, não medição */
.par-regra .par-trilho { background: transparent; box-shadow: inset 0 0 0 1px var(--dourado); }
.par-regra .par-barra { border-radius: 0; background: repeating-linear-gradient(90deg, var(--dourado) 0 6px, transparent 6px 10px); }
.par-val { font-weight: 600; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .par-barra { transition: none !important; } }

/* Cartões de leitura: mesma composição do Chat, uma miniatura por indicador. */
.faixa-quadrantes { grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.quadrante.ff-quadrante-chat { position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:7px;min-width:0;height:auto;min-height:158px;padding:18px 16px;border:1px solid #D5DFEB;border-radius:16px;background:#fff;color:#16305E;box-shadow:0 4px 14px rgba(22,48,94,.04);isolation:isolate;overflow:hidden; }
.ff-quadrante-chat:hover,.ff-quadrante-chat:focus-visible { background:#EEF3FA;border-color:#16305E;transform:translateY(-2px); }
.ff-quadrante-chat:focus-visible { outline:2px solid #16305E;outline-offset:3px; }
.ff-quadrante-chat .q-rot { font:600 14px/1.35 var(--ff-fonte);text-transform:none;letter-spacing:0;color:#41506B; }
.ff-quadrante-chat .q-ancora { display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;width:100%;font:600 21px/1.2 var(--ff-fonte-marca);color:#16305E; }
.ff-quadrante-chat .q-ancora .valor { font-size:23px;line-height:1.2;color:#16305E; }
.ff-quadrante-chat .q-unidade { color:#526079;font-size:12px; }
.ff-quadrante-chat .q-apoio { display:block;color:#526079;font:400 12px/1.45 var(--ff-fonte);max-width:calc(100% - 65px);margin:0;overflow:visible;overflow-wrap:anywhere; }
.ff-quadrante-chat .q-graf { position:absolute;right:8px;bottom:8px;width:68px;height:58px;pointer-events:none; }
.ff-quadrante-chat:not([data-loop]) .q-graf:not(:has(.ff-mini-indicador)) { position:static;width:auto;height:auto; }
.ff-quadrante-chat::after { display:none!important; }
.ff-mini-indicador { display:block;width:100%;height:100%;color:#16305E; }
.ff-mini-indicador svg { width:100%;height:100%;overflow:visible;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; }
.ff-mini-base { stroke:#AFBFD5; }
.ff-mini-luz { stroke:#16305E;stroke-dasharray:24 180;animation:ff-percurso 6s linear infinite; }
.ff-mini-indicador[data-icone="giro"] svg { animation:ff-girar 12s linear infinite; }
.ff-mini-indicador[data-icone="meta"] svg,.ff-mini-indicador[data-icone="mentalidade"] svg { animation:ff-respirar 4s ease-in-out infinite; }
.ff-mini-indicador[data-icone="relacionamento"] svg,.ff-mini-indicador[data-icone="conversar"] svg { animation:ff-flutuar 4.5s ease-in-out infinite; }
.ff-quadrante-chat:nth-child(2n) .ff-mini-luz { animation-delay:-1.5s; }
.ff-quadrante-chat:nth-child(3n) .ff-mini-luz { animation-delay:-3s; }
.ff-mini-indicador[data-movimento="parado"] * { animation:none!important; }
@keyframes ff-percurso { to { stroke-dashoffset:-204; } }
@keyframes ff-girar { to { transform:rotate(360deg); } }
@keyframes ff-respirar { 50% { transform:scale(.91); } }
@keyframes ff-flutuar { 50% { transform:translateY(-4px); } }
@media(max-width:1000px) { .faixa-quadrantes { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) {
 .quadrante.ff-quadrante-chat { padding:14px 12px;min-height:165px;gap:7px; }
 .ff-quadrante-chat .q-ancora .valor { font-size:22px; }
 .ff-quadrante-chat .q-apoio { max-width:calc(100% - 40px);font-size:12px; }
 .ff-quadrante-chat .q-graf { width:45px;height:44px;right:5px;bottom:12px; }
 .ff-quadrante-chat .q-unidade { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .ff-mini-indicador * { animation:none!important; } .ff-quadrante-chat { transition:none; } .ff-quadrante-chat:hover { transform:none; } }

.quadrante.ff-quadrante-chat { text-align:left; }