/* ------------------------------------------------------------
   Barra de abas em doca (Freedom Consulting)
   ------------------------------------------------------------
   Usada nas abas DISC / Valores / Linguagens... da tela Mapeamentos,
   no menu dos painéis de uma pessoa (_partials/menu-mapeamentos.php)
   e nas abas do painel da empresa no admin. Vira uma doca: cápsula
   com fundo translúcido, ícone em cima e rótulo embaixo, o ativo
   numa placa lilás com um ponto logo abaixo.

   Cada ícone tem um movimento próprio, em ciclo de cinco pela ordem
   (pulo, giro, batida, balanço, respiro), que toca uma vez no ativo
   quando a página abre e de novo ao passar o mouse nos outros.
   Quem pediu menos movimento no sistema não vê nenhum.

   Arquivo à parte, e não dentro do CSS da marca, porque o admin não
   carrega a marca (só o FreedomV2). Entra pelo fcConsultingHead() e,
   no admin, pelo shell. Segue o tema claro ou escuro pelos tokens do
   FreedomV2; onde a fonte da marca não existe, herda a da página.
   ------------------------------------------------------------ */
.fv-disc-menu-wrap {
  --fc-dock-acento: var(--fv-primary-500, #6B4FB8);
  --fc-dock-placa:  rgba(107, 79, 184, .10);
  overflow-x: auto;
  margin-bottom: var(--fv-space-4, 16px);
  padding: 2px 2px 10px;            /* folga para a sombra não ser cortada pelo overflow */
  scrollbar-width: thin;
}
:root[data-theme="dark"] .fv-disc-menu-wrap {
  --fc-dock-acento: var(--fv-primary-400, #A98BEF);
  --fc-dock-placa:  rgba(169, 139, 239, .16);
}
.fv-disc-menu {
  display: flex;
  gap: 4px;
  width: max-content;
  min-width: 0;
  padding: 6px;
  background: color-mix(in srgb, var(--fv-surface, #fff) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--fv-border, var(--fc-fio));
  border-radius: 22px;
  box-shadow: 0 6px 20px rgba(23, 10, 51, .07);
  overflow: visible;
  margin: 0;                        /* .fv-tabs-list (abas por JS) traz margem e fio embaixo */
}
:root[data-theme="dark"] .fv-disc-menu { box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }

.fv-disc-menu-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 76px;
  margin: 0;                        /* .fv-tab traz margin-bottom: -1px */
  padding: 10px 14px 13px;
  border: 0;
  cursor: pointer;
  border-radius: 16px;
  background: transparent;
  font-family: var(--fc-font-display, inherit);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--fv-text-muted, var(--fc-grafite));
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.fv-disc-menu-item > i {
  font-size: 21px;
  color: inherit;
  transition: transform .2s ease;
}
.fv-disc-menu-item:hover:not(.fv-active) {
  background: var(--fv-surface-alt, rgba(23, 10, 51, .04));
  color: var(--fv-text, var(--fc-tinta));
}
.fv-disc-menu-item:focus-visible { outline: 2px solid var(--fc-dock-acento); outline-offset: 2px; }

.fv-disc-menu-item.fv-active {
  background: var(--fc-dock-placa);
  color: var(--fc-dock-acento);
}
.fv-disc-menu-item.fv-active > i { color: var(--fc-dock-acento); }
.fv-disc-menu-item.fv-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--fc-dock-acento);
}

/* Contador ou marca no canto do ícone (ex.: total de comentários, parecer
   pronto), no lugar do selo que ficava ao lado do rótulo. */
.fc-dock-contador {
  position: absolute;
  top: 4px;
  left: calc(50% + 7px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--fc-dock-acento);
  color: #fff;
  font-family: var(--fc-font-mono, inherit);
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fc-dock-contador i { font-size: 11px; line-height: 18px; animation: none !important; }
:root[data-theme="dark"] .fc-dock-contador { color: var(--fc-noite, #170A33); }

/* Movimento de cada ícone, em ciclo pela ordem do item */
.fv-disc-menu-item:nth-child(5n+1) { --fc-dock-anim: fc-dock-pulo; }
.fv-disc-menu-item:nth-child(5n+2) { --fc-dock-anim: fc-dock-giro; }
.fv-disc-menu-item:nth-child(5n+3) { --fc-dock-anim: fc-dock-batida; }
.fv-disc-menu-item:nth-child(5n+4) { --fc-dock-anim: fc-dock-balanco; }
.fv-disc-menu-item:nth-child(5n+5) { --fc-dock-anim: fc-dock-respiro; }

.fv-disc-menu-item.fv-active > i,
.fv-disc-menu-item:hover:not(.fv-active) > i {
  animation: var(--fc-dock-anim) .65s cubic-bezier(.3, .7, .4, 1) 1;
}

@keyframes fc-dock-pulo {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(-6px); }
  60%      { transform: translateY(0); }
  78%      { transform: translateY(-2px); }
}
@keyframes fc-dock-giro {
  0%   { transform: rotate(0) scale(1); }
  60%  { transform: rotate(360deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes fc-dock-batida {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.22); }
  40%      { transform: scale(.94); }
  60%      { transform: scale(1.12); }
}
@keyframes fc-dock-balanco {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-16deg); }
  45%      { transform: rotate(12deg); }
  70%      { transform: rotate(-6deg); }
}
@keyframes fc-dock-respiro {
  0%, 100% { transform: scale(1, 1); }
  30%      { transform: scale(1.18, .86); }
  55%      { transform: scale(.9, 1.12); }
  80%      { transform: scale(1.04, .97); }
}

@media (prefers-reduced-motion: reduce) {
  .fv-disc-menu-item > i { animation: none !important; transition: none; }
}

/* Seletor Assessments / Desenvolvimento dos painéis: mesma cápsula */
.fv-disc-menu-toggle {
  display: inline-flex;
  gap: 2px;
  margin-bottom: var(--fv-space-2, 8px);
  padding: 3px;
  background: color-mix(in srgb, var(--fv-surface, #fff) 82%, transparent);
  border: 1px solid var(--fv-border, var(--fc-fio));
  border-radius: 999px;
  overflow: visible;
}
.fv-disc-menu-toggle button {
  padding: 5px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--fc-font-display, inherit);
  font-size: 12px;
  font-weight: 600;
  color: var(--fv-text-muted, var(--fc-grafite));
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.fv-disc-menu-toggle button:hover:not(.fv-active) { color: var(--fv-text, var(--fc-tinta)); }
.fv-disc-menu-toggle button.fv-active {
  background: rgba(107, 79, 184, .10);
  color: var(--fv-primary-500, #6B4FB8);
}
:root[data-theme="dark"] .fv-disc-menu-toggle button.fv-active {
  background: rgba(169, 139, 239, .16);
  color: var(--fv-primary-400, #A98BEF);
}

/* ------------------------------------------------------------
   Painel da pessoa: coluna recolhível e abas em doca vertical
   ------------------------------------------------------------
   Telas da pessoa (DISC, Valores, Linguagens, Âncoras, Sabotadores, Mapa
   de Satisfação, Freedom ID, Feedback 360, Objetivos, Comparativo), desenho
   de 11/10/2026. Na ordem do DOM:

     <div class="... fc-painel fc-recolhida">   (+ fc-painel-sem-doca ou fc-painel-sem-coluna)
       <div class="... fc-painel-lado"> coluna ... + _partials/coluna-mini.php </div>
       <aside class="fc-vdoca-col"><nav class="fv-disc-menu fc-vdoca"> abas </nav></aside>
       <div class="... fc-painel-main"> conteúdo </div>

   - A coluna abre recolhida (fc-recolhida no HTML) numa faixa de 64px com
     foto, ícones e o rótulo na vertical; clicar nela abre a coluna.
   - As abas viram uma doca vertical entre a coluna e o conteúdo, presa ao
     rolar. O "Recolher/Mostrar" fica no alto da doca; tela sem doca usa o
     botão redondo na borda da coluna.
   - O grid vem com a classe dobrada (.fc-painel.fc-painel) para vencer o
     grid que cada tela define no próprio <style>, que carrega depois deste.
   ------------------------------------------------------------ */
.fc-painel.fc-painel {
  display: grid;
  grid-template-columns: 300px 86px minmax(0, 1fr);
  grid-template-areas: "lado doca main";
  gap: 24px;
  align-items: start;
}
.fc-painel.fc-painel-sem-doca   { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "lado main"; }
.fc-painel.fc-painel-sem-coluna { grid-template-columns: 86px minmax(0, 1fr);  grid-template-areas: "doca main"; }
.fc-painel > .fc-painel-lado { grid-area: lado; align-self: stretch; min-width: 0; width: auto; position: relative; }
.fc-painel > .fc-vdoca-col   { grid-area: doca; }
.fc-painel > .fc-painel-main { grid-area: main; min-width: 0; }

/* Doca vertical das abas */
.fc-vdoca-col {
  position: sticky;
  top: calc(var(--fv-topbar-height, 68px) + 16px);
  max-height: calc(100vh - var(--fv-topbar-height, 68px) - 32px);
  overflow-y: auto;
  scrollbar-width: none;
}
.fc-vdoca-col::-webkit-scrollbar { display: none; }
.fc-vdoca {
  --fc-dock-acento: var(--fv-primary-500, #6B4FB8);
  --fc-dock-placa:  rgba(107, 79, 184, .10);
}
:root[data-theme="dark"] .fc-vdoca {
  --fc-dock-acento: var(--fv-primary-400, #A98BEF);
  --fc-dock-placa:  rgba(169, 139, 239, .16);
}
/* Docas do painel da pessoa (a horizontal do _partials/menu-mapeamentos.php
   e a vertical) sem a sombra por fora: só o fio da borda */
.pc-doca .fv-disc-menu.fv-disc-menu, .fc-vdoca.fv-disc-menu.fv-disc-menu { box-shadow: none; }
.fc-vdoca.fv-disc-menu { flex-direction: column; width: 86px; padding: 4px; gap: 1px; border-radius: 22px; }
.fc-vdoca .fv-disc-menu-item {
  width: 100%; min-width: 0; margin: 0; padding: 6px 4px 8px; gap: 2px; border: 0; border-radius: 15px;
  font-size: 10px; white-space: normal; text-align: center;
}
.fc-vdoca .fv-disc-menu-item > i { font-size: 16px; }
/* As abas Visão Geral | Freedom IA das telas usam .fvia-active como ativo */
.fc-vdoca .fv-disc-menu-item.fvia-active { background: var(--fc-dock-placa); color: var(--fc-dock-acento); }
.fc-vdoca .fv-disc-menu-item.fvia-active > i { color: var(--fc-dock-acento); }
/* Sem a bolinha do ativo da doca horizontal: a placa já marca o item */
.fc-vdoca .fv-disc-menu-item::after { display: none !important; }
.fc-vdoca-fio { flex-shrink: 0; height: 1px; margin: 3px 12px; background: var(--fv-border, var(--fc-fio)); }
.fc-vdoca .fc-vdoca-ia > i { color: #C9A20F; }
.fc-vdoca .fc-vdoca-ia.fv-active > i,
.fc-vdoca .fc-vdoca-ia.fvia-active > i,
.fc-vdoca .fc-vdoca-ia:hover > i { color: inherit; }
.fc-vdoca .fc-recolher { color: var(--fv-text-muted, var(--fc-grafite)); }
.fc-vdoca .fc-recolher > i { font-size: 15px; transition: transform .25s; }
.fc-painel.fc-recolhida .fc-recolher > i { transform: scaleX(-1); }

/* Respiro entre os blocos do conteúdo: o sistema usa 14px (1rem) entre
   cartões, e nas telas da pessoa ficava tudo encostado. Classe da tela
   dentro de .fc-painel-main para vencer o <style> da própria página. */
.fc-painel-main .fv-mb-4 { margin-bottom: 20px; }
.fc-painel-main :is(.val-toolbar, .ling-toolbar, .anc-toolbar, .sb-toolbar, .as-toolbar, .fv-disc-toolbar, .f360-toolbar) { margin-bottom: 18px; }
.fc-painel-main :is(.val-grade-2, .ling-grade-2, .anc-grade-2, .sb-grade-2, .as-grade-2, .fid-cards-top, .fid-cards-bot) { gap: 20px; }
.fc-painel-main .fv-grid.fv-gap-3 { gap: 16px; }

/* Coluna recolhida: a faixa estreita (só existe em tela larga) */
.fc-coluna-mini { display: none; }
.fc-coluna-recolher {
  position: absolute; top: 10px; right: -13px; z-index: 6;
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; border: 1px solid var(--fv-border, var(--fc-fio)); background: var(--fv-surface, #fff);
  color: var(--fv-text-muted, var(--fc-grafite)); box-shadow: 0 4px 10px rgba(23, 10, 51, .12); cursor: pointer;
}
.fc-coluna-recolher:hover { color: var(--fv-text, var(--fc-tinta)); border-color: var(--fv-primary-400, #A98BEF); }
.fc-coluna-recolher i { font-size: 13px; }
@media (min-width: 961px) {
  .fc-painel.fc-recolhida { grid-template-columns: 64px 86px minmax(0, 1fr); }
  .fc-painel.fc-painel-sem-doca.fc-recolhida { grid-template-columns: 64px minmax(0, 1fr); }
  .fc-painel.fc-recolhida > .fc-painel-lado > :not(.fc-coluna-mini) { display: none !important; }
  .fc-painel.fc-recolhida .fc-coluna-mini {
    position: sticky; top: calc(var(--fv-topbar-height, 68px) + 16px);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    width: 64px; min-height: 340px; padding: 14px 0 18px; border: 0; border-radius: 20px; cursor: pointer;
    background: var(--fv-sidebar-bg, #170A33); color: var(--fv-primary-400, #A98BEF);
    transition: box-shadow .2s;
  }
}
.fc-coluna-mini:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fv-primary-400, #A98BEF) 45%, transparent); }
.fc-coluna-mini:focus-visible { outline: 3px solid var(--fv-primary-400, #A98BEF); outline-offset: 2px; }
.fc-coluna-mini-abrir { font-size: 16px; color: #fff; }
.fc-coluna-mini-foto { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--fv-ativo-bg, #312155); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fv-primary-400, #A98BEF) 60%, transparent); }
.fc-coluna-mini-icones { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 18px; }
.fc-coluna-mini-rotulo {
  margin-top: 4px; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--fc-font-mono, inherit); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8F86B0; white-space: nowrap;
}

/* Sem espaço para três colunas: a doca vai para cima do conteúdo, na horizontal */
@media (max-width: 1180px) {
  .fc-painel.fc-painel             { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "lado doca" "lado main"; }
  .fc-painel.fc-painel-sem-doca    { grid-template-areas: "lado main"; }
  .fc-painel.fc-painel-sem-coluna  { grid-template-columns: minmax(0, 1fr); grid-template-areas: "doca" "main"; }
  .fc-painel.fc-recolhida          { grid-template-columns: 64px minmax(0, 1fr); }
  .fc-vdoca-col { position: static; max-height: none; overflow-x: auto; padding-bottom: 6px; }
  .fc-vdoca.fv-disc-menu { flex-direction: row; width: max-content; }
  .fc-vdoca .fv-disc-menu-item { width: auto; padding: 7px 11px 10px; white-space: nowrap; }
  .fc-vdoca-fio { width: 1px; height: auto; margin: 8px 3px; }
}
/* Tudo empilhado: não há o que recolher */
@media (max-width: 960px) {
  .fc-painel.fc-painel, .fc-painel.fc-recolhida { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lado" "doca" "main"; }
  .fc-painel.fc-painel-sem-doca   { grid-template-areas: "lado" "main"; }
  .fc-painel.fc-painel-sem-coluna { grid-template-areas: "doca" "main"; }
  .fc-vdoca .fc-recolher, .fc-vdoca .fc-recolher + .fc-vdoca-fio, .fc-coluna-recolher { display: none; }
}

/* ------------------------------------------------------------
   Gaveta da Freedom IA
   ------------------------------------------------------------
   Nas telas da pessoa, a Freedom IA abre num painel que desliza da
   direita, por cima da tela (v2/cliente/pages/_partials/gaveta-ia.php).
   Camadas: acima do botão "Ajuda" (4500) e abaixo dos modais (5000) e
   dos avisos (8000), que podem abrir por cima dela.
   ------------------------------------------------------------ */
.fc-gaveta-veu {
  position: fixed; inset: 0; z-index: 4600;
  background: rgba(15, 11, 26, .45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
body.fc-gaveta-aberta .fc-gaveta-veu { opacity: 1; visibility: visible; transition: opacity .28s ease; }
.fc-gaveta {
  position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 4601;
  display: flex; flex-direction: column;
  width: min(880px, calc(100vw - 24px));
  border-radius: 24px; overflow: hidden;
  background: var(--fv-bg, #F6F4FA);
  box-shadow: 0 30px 80px rgba(23, 10, 51, .30), 0 0 0 1px var(--fv-border, var(--fc-fio));
  transform: translateX(calc(100% + 24px)); visibility: hidden;
  transition: transform .34s cubic-bezier(.22, .8, .24, 1), visibility 0s linear .34s;
}
.fc-gaveta.fc-gaveta-ligada { transform: none; visibility: visible; transition: transform .34s cubic-bezier(.22, .8, .24, 1); }
.fc-gaveta-cabeca {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  padding: 18px 20px 18px 22px;
  background: var(--fv-sidebar-bg, #170A33); color: #fff;
}
.fc-gaveta-selo {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 13px;
  background: rgba(251, 205, 24, .14); color: #FBCD18; font-size: 21px;
}
.fc-gaveta-nome { min-width: 0; }
.fc-gaveta-titulo { margin: 0; font: 700 19px/1.2 var(--fc-font-display, var(--fv-font-sans)); color: #fff; }
.fc-gaveta-sub {
  margin: 3px 0 0; font-family: var(--fc-font-mono, inherit); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: #A99FD0;
}
/* Ações do cabeçalho (ex.: "Todas as análises em PDF" no Freedom ID) */
.fc-gaveta-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fc-gaveta-acoes + .fc-gaveta-fechar { margin-left: 0; }
.fc-gaveta-acao {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(255, 255, 255, .06);
  color: #fff; font: 600 13px var(--fc-font-display, var(--fv-font-sans)); white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.fc-gaveta-acao i { font-size: 16px; color: #FBCD18; }
.fc-gaveta-acao:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.fc-gaveta-acao:focus-visible { outline: 3px solid var(--fv-primary-400, #A98BEF); outline-offset: 2px; }
.fc-gaveta-fechar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; margin-left: auto; padding: 0;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: #fff; font-size: 18px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.fc-gaveta-fechar:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.fc-gaveta-fechar:focus-visible { outline: 3px solid var(--fv-primary-400, #A98BEF); outline-offset: 2px; }
.fc-gaveta-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; }

/* O item da doca fica marcado enquanto a gaveta está aberta */
.fc-vdoca .fv-disc-menu-item.fc-gaveta-botao-ligado { background: var(--fc-dock-placa); color: var(--fc-dock-acento); }
.fc-vdoca .fc-vdoca-ia.fc-gaveta-botao-ligado > i { color: var(--fc-dock-acento); }

@media (max-width: 640px) {
  .fc-gaveta { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; }
  .fc-gaveta-acao { width: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .fc-gaveta-corpo { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-gaveta, .fc-gaveta.fc-gaveta-ligada, .fc-gaveta-veu { transition: none; }
}