/* ============================================================
   FreedomV2 — Componentes (núcleo v1)
   Botões, Cards, Badges, Alerts, Modals, Tabs, Tabelas, Forms,
   Dropdown, Avatar, Breadcrumb, Paginação, Stat tile.
   Todos consomem tokens.css — nenhuma cor hardcoded aqui.
   Comportamento (abrir modal, trocar tab...) fica em freedomv2.js
   ============================================================ */

/* =====================================================
   Botões
   ===================================================== */
.fv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fv-space-2);
  padding: var(--fv-space-3) var(--fv-space-5);
  border: none;
  border-radius: var(--fv-radius-lg);
  font-family: var(--fv-font-sans);
  font-size: var(--fv-text-sm);
  font-weight: var(--fv-font-semibold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.fv-btn:active { transform: translateY(1px); }

.fv-btn-primary { background: var(--fv-primary); color: var(--fv-on-primary, #fff); }
.fv-btn-primary:hover { background: var(--fv-primary-800); }
/* No escuro o primário é lilás com letra noite: o hover clareia, porque o
   800 (#2C1A52) é quase a cor da superfície e o botão sumiria. */
:root[data-theme="dark"] .fv-btn-primary:hover { background: var(--fv-primary-300); }

.fv-btn-accent { background: var(--fv-accent); color: #fff; }
.fv-btn-accent:hover { background: var(--fv-accent-700); }

.fv-btn-outline {
  background: transparent;
  color: var(--fv-primary);
  border: 1.5px solid var(--fv-primary);
}
.fv-btn-outline:hover { background: var(--fv-primary-50); }

.fv-btn-ghost { background: transparent; color: var(--fv-primary); }
.fv-btn-ghost:hover { background: var(--fv-primary-50); }

.fv-btn-danger { background: var(--fv-danger-600); color: #fff; }
.fv-btn-danger:hover { background: var(--fv-danger-700); }

.fv-btn-sm { padding: var(--fv-space-2) var(--fv-space-4); font-size: var(--fv-text-xs); }
.fv-btn-lg { padding: var(--fv-space-4) var(--fv-space-6); font-size: var(--fv-text-base); }

.fv-btn-icon { padding: var(--fv-space-3); border-radius: var(--fv-radius-lg); }
.fv-btn-icon.fv-btn-sm { padding: var(--fv-space-2); }

.fv-btn:disabled,
.fv-btn-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.fv-btn-loading { color: transparent !important; position: relative; pointer-events: none; }
.fv-btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  border-top-color: #fff;
  animation: fv-spin .6s linear infinite;
}
.fv-btn-outline.fv-btn-loading::after,
.fv-btn-ghost.fv-btn-loading::after {
  border: 2px solid var(--fv-primary-200);
  border-top-color: var(--fv-primary);
}
@keyframes fv-spin { to { transform: rotate(360deg); } }

/* =====================================================
   Cards
   ===================================================== */
.fv-card {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-xl);
  box-shadow: var(--fv-shadow-sm);
  overflow: hidden;
  color: var(--fv-text);
}
.fv-card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.fv-card-hover:hover { transform: translateY(-3px); box-shadow: var(--fv-shadow-md); }

.fv-card-header {
  padding: var(--fv-space-5) var(--fv-space-6);
  border-bottom: 1px solid var(--fv-border);
  font-weight: var(--fv-font-semibold);
  color: var(--fv-text);
}
.fv-card-body   { padding: var(--fv-space-6); color: var(--fv-text); }
.fv-card-footer {
  padding: var(--fv-space-4) var(--fv-space-6);
  border-top: 1px solid var(--fv-border);
  background: var(--fv-surface-alt);
}

/* =====================================================
   Badges / Pills
   ===================================================== */
.fv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fv-space-1);
  padding: var(--fv-space-1) var(--fv-space-3);
  border-radius: var(--fv-radius-full);
  font-size: var(--fv-text-xs);
  font-weight: var(--fv-font-semibold);
  line-height: 1.4;
}
.fv-badge-primary { background: var(--fv-primary-100); color: var(--fv-primary-700); }
.fv-badge-accent  { background: var(--fv-accent-100);  color: var(--fv-accent-800); }
.fv-badge-success { background: var(--fv-success-100); color: var(--fv-success-700); }
.fv-badge-danger  { background: var(--fv-danger-100);  color: var(--fv-danger-700); }
.fv-badge-warning { background: var(--fv-warning-100); color: var(--fv-warning-700); }
.fv-badge-info    { background: var(--fv-info-100);    color: var(--fv-info-700); }
.fv-badge-gray    { background: var(--fv-gray-100);    color: var(--fv-gray-700); }

/* Os tons -100/-700/-800 acima são fixos (não redefinidos em
   :root[data-theme="dark"] — só os tokens semânticos como --fv-surface/
   --fv-text são). Sem isso, todo badge ficava sempre com o par claro do
   modo claro (fundo quase branco, texto escuro) mesmo no escuro — lia
   como "elemento ainda preto/errado" porque destoava de tudo à volta.
   Aqui cada badge ganha um par escuro equivalente: fundo bem translúcido
   na cor + texto na própria cor (bem visível sobre fundo escuro). */
:root[data-theme="dark"] .fv-badge-primary { background: rgba(169, 139, 239, .18); color: #C8B6F4; }
:root[data-theme="dark"] .fv-badge-accent  { background: rgba(45, 212, 191, .18);  color: #5eead4; }
:root[data-theme="dark"] .fv-badge-success { background: rgba(34, 197, 94, .18);   color: #4ade80; }
:root[data-theme="dark"] .fv-badge-danger  { background: rgba(239, 68, 68, .18);   color: #f87171; }
:root[data-theme="dark"] .fv-badge-warning { background: rgba(245, 158, 11, .18);  color: #fbbf24; }
:root[data-theme="dark"] .fv-badge-info    { background: rgba(99, 102, 241, .18);  color: #a5b4fc; }
:root[data-theme="dark"] .fv-badge-gray    { background: var(--fv-surface-alt);    color: var(--fv-text-muted); }

.fv-badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* =====================================================
   Alerts
   ===================================================== */
.fv-alert {
  display: flex;
  gap: var(--fv-space-3);
  padding: var(--fv-space-4) var(--fv-space-5);
  border-radius: var(--fv-radius-lg);
  border: 1px solid transparent;
  font-size: var(--fv-text-sm);
}
.fv-alert-icon { flex-shrink: 0; font-size: var(--fv-text-lg); line-height: 1; }
.fv-alert-title { font-weight: var(--fv-font-semibold); margin-bottom: 2px; }
.fv-alert-desc   { color: var(--fv-text-muted); }

.fv-alert-success { background: var(--fv-success-50); border-color: var(--fv-success-100); color: var(--fv-success-700); }
.fv-alert-danger  { background: var(--fv-danger-50);  border-color: var(--fv-danger-100);  color: var(--fv-danger-700); }
.fv-alert-warning { background: var(--fv-warning-50); border-color: var(--fv-warning-100); color: var(--fv-warning-700); }
.fv-alert-info    { background: var(--fv-info-50);    border-color: var(--fv-info-100);    color: var(--fv-info-700); }

/* No escuro os tons 50/100/700 são de tema claro: o aviso aparecia como
   uma faixa clara no meio da página. Mesmo esquema dos badges: cor a 12%
   sobre a superfície, fio a 28% e texto no passo 400. */
:root[data-theme="dark"] .fv-alert-success { background: rgba(34, 197, 94, .12);  border-color: rgba(34, 197, 94, .28);  color: var(--fv-success-400); }
:root[data-theme="dark"] .fv-alert-danger  { background: rgba(239, 68, 68, .12);  border-color: rgba(239, 68, 68, .28);  color: var(--fv-danger-400); }
:root[data-theme="dark"] .fv-alert-warning { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .28); color: var(--fv-warning-400); }
:root[data-theme="dark"] .fv-alert-info    { background: rgba(99, 102, 241, .14); border-color: rgba(99, 102, 241, .32); color: #a5b4fc; }

/* =====================================================
   Modal
   ===================================================== */
.fv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 11, 26, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--fv-space-4);
  z-index: 5000;
}
.fv-modal-overlay.fv-open { display: flex; }

.fv-modal {
  background: var(--fv-surface);
  border-radius: var(--fv-radius-2xl);
  box-shadow: var(--fv-shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fv-modal-lg { max-width: 720px; }
.fv-modal-sm { max-width: 360px; }
.fv-modal-xl { max-width: 1100px; }

.fv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--fv-space-5) var(--fv-space-6);
  border-bottom: 1px solid var(--fv-border);
  font-weight: var(--fv-font-semibold);
  font-size: var(--fv-text-lg);
  color: var(--fv-text);
}
.fv-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fv-text-muted);
  font-size: var(--fv-text-xl);
  line-height: 1;
}
.fv-modal-body   { padding: var(--fv-space-6); overflow-y: auto; color: var(--fv-text); }
.fv-modal-footer {
  padding: var(--fv-space-4) var(--fv-space-6);
  border-top: 1px solid var(--fv-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--fv-space-3);
}

/* =====================================================
   Tabs
   ===================================================== */
.fv-tabs-list {
  display: flex;
  gap: var(--fv-space-2);
  border-bottom: 1px solid var(--fv-border);
  margin-bottom: var(--fv-space-5);
}
.fv-tab {
  background: none;
  border: none;
  padding: var(--fv-space-3) var(--fv-space-4);
  font-size: var(--fv-text-sm);
  font-weight: var(--fv-font-medium);
  color: var(--fv-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.fv-tab:hover { color: var(--fv-primary); }
.fv-tab.fv-active { color: var(--fv-primary); border-bottom-color: var(--fv-primary); font-weight: var(--fv-font-semibold); }

.fv-tab-panel { display: none; }
.fv-tab-panel.fv-active { display: block; }

/* =====================================================
   Chips (seleção múltipla estilo "tag" clicável)
   ===================================================== */
.fv-chip-group { display: flex; flex-wrap: wrap; gap: var(--fv-space-2); }
.fv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fv-space-1);
  padding: var(--fv-space-2) var(--fv-space-4);
  border-radius: var(--fv-radius-full);
  border: 1.5px solid var(--fv-border);
  background: var(--fv-surface);
  color: var(--fv-text-muted);
  font-size: var(--fv-text-sm);
  font-weight: var(--fv-font-medium);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fv-chip:hover { border-color: var(--fv-primary-300, var(--fv-primary)); }
.fv-chip .fv-chip-check { display: none; font-weight: var(--fv-font-bold); }
.fv-chip.selected {
  background: var(--fv-primary-100);
  border-color: var(--fv-primary);
  color: var(--fv-primary-700);
}
.fv-chip.selected .fv-chip-check { display: inline; }

:root[data-theme="dark"] .fv-chip.selected {
  background: rgba(169, 139, 239, .18);
  color: #C8B6F4;
}

/* =====================================================
   Tabela
   ===================================================== */
.fv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fv-text-sm);
}
.fv-table thead th {
  text-align: left;
  padding: var(--fv-space-3) var(--fv-space-4);
  font-size: var(--fv-text-xs);
  font-weight: var(--fv-font-semibold);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--fv-text-muted);
  border-bottom: 1px solid var(--fv-border);
}
/* O comentário do freedomv2.css supõe empate de especificidade entre
   utilitário e componente, mas aqui não há empate: ".fv-table thead th"
   (0,1,2) vence ".fv-text-center" (0,1,0), então <th class="fv-text-center">
   ficava alinhado à esquerda mesmo com a classe. Estas duas regras
   devolvem ao utilitário o poder de sobrepor o padrão do thead. */
.fv-table thead th.fv-text-center { text-align: center; }
.fv-table thead th.fv-text-right  { text-align: right; }

.fv-table tbody td {
  padding: var(--fv-space-4);
  border-bottom: 1px solid var(--fv-border);
  color: var(--fv-text);
}
.fv-table tbody tr:last-child td { border-bottom: none; }
.fv-table tbody tr:hover { background: var(--fv-surface-alt); }
.fv-table-striped tbody tr:nth-child(even) { background: var(--fv-surface-alt); }

/* =====================================================
   Forms
   ===================================================== */
.fv-form-group { margin-bottom: var(--fv-space-5); }
.fv-label {
  display: block;
  margin-bottom: var(--fv-space-2);
  font-size: var(--fv-text-sm);
  font-weight: var(--fv-font-medium);
  color: var(--fv-text);
}
.fv-form-hint  { margin-top: var(--fv-space-1); font-size: var(--fv-text-xs); color: var(--fv-text-muted); }
.fv-form-error { margin-top: var(--fv-space-1); font-size: var(--fv-text-xs); color: var(--fv-danger-600); }

.fv-input, .fv-textarea, .fv-select {
  width: 100%;
  padding: var(--fv-space-3) var(--fv-space-4);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-lg);
  background: var(--fv-surface);
  color: var(--fv-text);
  font-family: var(--fv-font-sans);
  font-size: var(--fv-text-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fv-input:focus, .fv-textarea:focus, .fv-select:focus {
  outline: none;
  border-color: var(--fv-primary-500);
  box-shadow: 0 0 0 3px var(--fv-primary-100);
}
.fv-input.fv-input-error { border-color: var(--fv-danger-500); }
.fv-input:disabled, .fv-textarea:disabled, .fv-select:disabled {
  background: var(--fv-surface-alt);
  color: var(--fv-text-muted);
  border-color: var(--fv-border);
  cursor: not-allowed;
}
.fv-textarea { resize: vertical; min-height: 96px; }

.fv-checkbox, .fv-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--fv-space-2);
  font-size: var(--fv-text-sm);
  color: var(--fv-text);
  cursor: pointer;
}
.fv-checkbox input, .fv-radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--fv-primary);
  cursor: pointer;
}

.fv-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.fv-switch input { opacity: 0; width: 0; height: 0; }
.fv-switch-track {
  position: absolute;
  inset: 0;
  background: var(--fv-gray-300);
  border-radius: var(--fv-radius-full);
  transition: background-color .15s ease;
  cursor: pointer;
}
.fv-switch-track::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s ease;
}
.fv-switch input:checked + .fv-switch-track { background: var(--fv-primary); }
.fv-switch input:checked + .fv-switch-track::before { transform: translateX(18px); }
:root[data-theme="dark"] .fv-switch-track { background: var(--fv-border); }

/* Segmentado (toggle de 2 opções tipo Bloqueado/Liberado ou Não/Sim) —
   sem JS: o :has() detecta qual radio está marcado e colore o label
   correspondente. Cada opção ocupa metade do espaço (flex:1). Marque a
   opção "negativa" (Bloqueado/Não) com data-fv-segmentado-negativo no
   label pra ela pintar de vermelho em vez de roxo quando marcada. */
.fv-segmentado { display: flex; width: 100%; border: 1px solid var(--fv-border); border-radius: var(--fv-radius-md); overflow: hidden; }
.fv-segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.fv-segmentado label { flex: 1; text-align: center; padding: var(--fv-space-2) var(--fv-space-3); font-size: var(--fv-text-sm); font-weight: var(--fv-font-medium); color: var(--fv-text-muted); cursor: pointer; user-select: none; white-space: nowrap; }
.fv-segmentado label:first-of-type { border-right: 1px solid var(--fv-border); }
.fv-segmentado label:has(input:checked) { background: var(--fv-primary); color: var(--fv-on-primary, #fff); }
.fv-segmentado label[data-fv-segmentado-negativo]:has(input:checked) { background: var(--fv-danger-600); color: #fff; }

/* =====================================================
   Dropdown
   ===================================================== */
.fv-dropdown { position: relative; display: inline-block; }
.fv-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-lg);
  box-shadow: var(--fv-shadow-md);
  padding: var(--fv-space-2);
  display: none;
  z-index: 100;
}
.fv-dropdown-menu.fv-open { display: block; }
.fv-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--fv-space-2);
  padding: var(--fv-space-2) var(--fv-space-3);
  border-radius: var(--fv-radius-md);
  font-size: var(--fv-text-sm);
  color: var(--fv-text);
  text-decoration: none;
  cursor: pointer;
}
.fv-dropdown-item:hover { background: var(--fv-primary-50); color: var(--fv-primary); }

/* =====================================================
   Combobox (busca com autocomplete — data-fv-combobox)
   Menu é criado dinamicamente via JS, position:fixed calculado a
   partir do input (mesma técnica do dropdown, evita clipping).
   ===================================================== */
.fv-combobox-menu {
  position: fixed;
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-lg);
  box-shadow: var(--fv-shadow-md);
  padding: var(--fv-space-2);
  max-height: 260px;
  overflow-y: auto;
  z-index: 6000;
}
.fv-combobox-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--fv-space-2) var(--fv-space-3);
  border-radius: var(--fv-radius-md);
  font-size: var(--fv-text-sm);
  color: var(--fv-text);
  background: none;
  border: none;
  cursor: pointer;
}
.fv-combobox-item:hover,
.fv-combobox-item.fv-active { background: var(--fv-primary-50); color: var(--fv-primary); }
.fv-combobox-empty {
  padding: var(--fv-space-3);
  font-size: var(--fv-text-sm);
  color: var(--fv-text-muted);
  text-align: center;
}
.fv-combobox-loading {
  padding: var(--fv-space-3);
  font-size: var(--fv-text-xs);
  color: var(--fv-text-muted);
  text-align: center;
}

/* =====================================================
   Avatar
   ===================================================== */
.fv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--fv-primary-100);
  color: var(--fv-primary-700);
  font-weight: var(--fv-font-semibold);
  font-size: var(--fv-text-sm);
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}
.fv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fv-avatar-sm { width: 28px; height: 28px; font-size: var(--fv-text-xs); }
.fv-avatar-lg { width: 56px; height: 56px; font-size: var(--fv-text-lg); }

/* =====================================================
   Breadcrumb
   ===================================================== */
.fv-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--fv-space-2);
  font-size: var(--fv-text-sm);
  color: var(--fv-text-muted);
}
.fv-breadcrumb a { color: var(--fv-text-muted); text-decoration: none; }
.fv-breadcrumb a:hover { color: var(--fv-primary); }
.fv-breadcrumb-current { color: var(--fv-text); font-weight: var(--fv-font-medium); }
.fv-breadcrumb-sep { color: var(--fv-border); }

/* =====================================================
   Paginação
   ===================================================== */
.fv-pagination { display: flex; align-items: center; gap: var(--fv-space-1); }
.fv-page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 var(--fv-space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-md);
  background: var(--fv-surface);
  color: var(--fv-text);
  font-size: var(--fv-text-sm);
  font-weight: var(--fv-font-medium);
  cursor: pointer;
  text-decoration: none;
}
.fv-page-btn:hover { border-color: var(--fv-primary); color: var(--fv-primary); }
.fv-page-btn.fv-active { background: var(--fv-primary); border-color: var(--fv-primary); color: var(--fv-on-primary, #fff); }
.fv-page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* =====================================================
   Stat tile (KPI)
   ===================================================== */
.fv-stat {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-xl);
  padding: var(--fv-space-5);
}
.fv-stat-label { font-size: var(--fv-text-xs); font-weight: var(--fv-font-semibold); text-transform: uppercase; letter-spacing: .03em; color: var(--fv-text-muted); }
.fv-stat-value { font-size: var(--fv-text-3xl); font-weight: var(--fv-font-bold); color: var(--fv-text); margin-top: var(--fv-space-1); }
.fv-stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fv-text-xs); font-weight: var(--fv-font-semibold); margin-top: var(--fv-space-2); }
.fv-stat-delta-up   { color: var(--fv-success-600); }
.fv-stat-delta-down { color: var(--fv-danger-600); }

/* =====================================================
   Tooltip (data-fv-tooltip="texto") — elemento único, portado pro
   <body> via JS (freedomv2.js) e posicionado com position:fixed a
   partir do gatilho. Precisou deixar de ser CSS puro (pseudo-elemento
   ::after/::before relativo ao próprio gatilho) porque qualquer
   ancestral com overflow:hidden (ex.: .fv-card, pra recortar cantos
   arredondados) cortava o tooltip na borda do container.
   ===================================================== */
.fv-tooltip-portal {
  display: none;
  position: fixed;
  z-index: 9999;
  background: var(--fv-gray-900);
  color: #fff;
  padding: var(--fv-space-1) var(--fv-space-3);
  border-radius: var(--fv-radius-md);
  font-size: var(--fv-text-xs);
  font-weight: var(--fv-font-medium);
  white-space: nowrap;
  pointer-events: none;
}

/* =====================================================
   Accordion
   ===================================================== */
.fv-accordion-item { border-bottom: 1px solid var(--fv-border); }
.fv-accordion-item:first-child { border-top: 1px solid var(--fv-border); }
.fv-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fv-space-3);
  padding: var(--fv-space-4) var(--fv-space-2);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--fv-font-sans);
  font-size: var(--fv-text-sm);
  font-weight: var(--fv-font-semibold);
  color: var(--fv-text);
  cursor: pointer;
}
.fv-accordion-header i { transition: transform .2s ease; color: var(--fv-text-muted); }
.fv-accordion-item.fv-open .fv-accordion-header i { transform: rotate(180deg); }

.fv-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.fv-accordion-body {
  padding: 0 var(--fv-space-2) var(--fv-space-4);
  font-size: var(--fv-text-sm);
  color: var(--fv-text-muted);
}

/* =====================================================
   Toast / Notification
   ===================================================== */
.fv-toast-container {
  position: fixed;
  bottom: var(--fv-space-5);
  right: var(--fv-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--fv-space-3);
  z-index: 8000;
  max-width: 340px;
}
.fv-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--fv-space-3);
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-left: 4px solid var(--fv-gray-400);
  border-radius: var(--fv-radius-lg);
  box-shadow: var(--fv-shadow-lg);
  padding: var(--fv-space-4);
  opacity: 0;
  transform: translateX(16px);
  transition: opacity .2s ease, transform .2s ease;
}
.fv-toast.fv-show { opacity: 1; transform: translateX(0); }
.fv-toast-icon { font-size: var(--fv-text-lg); line-height: 1; flex-shrink: 0; }
.fv-toast-title { font-size: var(--fv-text-sm); font-weight: var(--fv-font-semibold); color: var(--fv-text); }
.fv-toast-desc  { font-size: var(--fv-text-xs); color: var(--fv-text-muted); margin-top: 2px; }
.fv-toast-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--fv-text-muted); flex-shrink: 0; }

.fv-toast-success { border-left-color: var(--fv-success-500); }
.fv-toast-success .fv-toast-icon { color: var(--fv-success-600); }
.fv-toast-danger { border-left-color: var(--fv-danger-500); }
.fv-toast-danger .fv-toast-icon { color: var(--fv-danger-600); }
.fv-toast-warning { border-left-color: var(--fv-warning-500); }
.fv-toast-warning .fv-toast-icon { color: var(--fv-warning-600); }
.fv-toast-info { border-left-color: var(--fv-info-500); }
.fv-toast-info .fv-toast-icon { color: var(--fv-info-600); }

/* =====================================================
   Skeleton loading
   ===================================================== */
.fv-skeleton {
  background: linear-gradient(90deg, var(--fv-gray-200) 25%, var(--fv-gray-100) 37%, var(--fv-gray-200) 63%);
  background-size: 400% 100%;
  animation: fv-skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--fv-radius-md);
}
:root[data-theme="dark"] .fv-skeleton {
  background: linear-gradient(90deg, #241c33 25%, #2e2440 37%, #241c33 63%);
  background-size: 400% 100%;
}
@keyframes fv-skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.fv-skeleton-text   { height: 12px; margin-bottom: var(--fv-space-2); }
.fv-skeleton-text:last-child { margin-bottom: 0; width: 70%; }
.fv-skeleton-title  { height: 18px; margin-bottom: var(--fv-space-3); width: 50%; }
.fv-skeleton-circle { border-radius: 50%; width: 40px; height: 40px; }
.fv-skeleton-rect    { width: 100%; height: 120px; }

/* =====================================================
   Progress (geração de relatório/PDF — data-fv-download-progress)
   Usado pelos forms de download (data-fv-blob-download) pra mostrar uma
   barra de progresso com percentual enquanto o arquivo é gerado no
   servidor, em vez de só um spinner no botão.
   ===================================================== */
/* Botão "ampliar gráfico" no cabeçalho dos cards de gráfico */
.fv-chart-expand-btn {
  border: none; background: transparent; cursor: pointer;
  color: var(--fv-text-muted); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--fv-radius);
}
.fv-chart-expand-btn:hover { background: var(--fv-surface-alt); color: var(--fv-text); }
.fv-chart-expand-btn i { font-size: 15px; }

.fv-progress {
  display: none;
  margin-top: var(--fv-space-3);
  background: var(--fv-primary-50);
  border: 1px solid var(--fv-primary-200);
  border-radius: var(--fv-radius-md);
  padding: var(--fv-space-3);
}
:root[data-theme="dark"] .fv-progress {
  background: rgba(107, 79, 184, .12);
  border-color: rgba(107, 79, 184, .35);
}
.fv-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--fv-text-xs);
  font-weight: 600;
  color: var(--fv-primary);
  margin-bottom: var(--fv-space-2);
}
.fv-progress-track {
  width: 100%;
  height: 8px;
  background: var(--fv-primary-100);
  border-radius: 99px;
  overflow: hidden;
}
:root[data-theme="dark"] .fv-progress-track { background: rgba(107, 79, 184, .25); }
.fv-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--fv-primary);
  transition: width .4s ease;
}
.fv-progress-step {
  font-size: var(--fv-text-xs);
  color: var(--fv-text-muted);
  margin-top: var(--fv-space-2);
  font-style: italic;
}

/* =====================================================
   Empty state
   ===================================================== */
.fv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--fv-space-16) var(--fv-space-6);
}
.fv-empty-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fv-surface-alt);
  color: var(--fv-text-muted);
  font-size: 26px;
  margin-bottom: var(--fv-space-4);
}
.fv-empty-title { font-size: var(--fv-text-base); font-weight: var(--fv-font-semibold); color: var(--fv-text); }
.fv-empty-desc  { font-size: var(--fv-text-sm); color: var(--fv-text-muted); margin-top: var(--fv-space-1); max-width: 320px; }
.fv-empty-action { margin-top: var(--fv-space-5); }

/* =====================================================
   Shell — Sidebar + Topbar (layout de app)
   Uso:
   <div class="fv-shell">
     <aside class="fv-sidebar">...</aside>
     <div class="fv-shell-main">
       <header class="fv-topbar">...</header>
       <main class="fv-shell-content">...</main>
     </div>
   </div>
   ===================================================== */
/* Shell de altura fixa (100vh, sem crescer com o conteúdo) — sidebar e
   área de conteúdo rolam CADA UM por conta própria dentro dela. Antes o
   shell usava min-height:100vh (crescia com a página) + sidebar com
   position:sticky — funciona enquanto a página é mais baixa que a
   sidebar, mas quando o conteúdo principal fica mais alto que 100vh (ex:
   uma lista longa sem paginação visível na tela toda), a caixa da
   sidebar "acaba" no meio do scroll e o fundo dela some, revelando o
   fundo da página por trás. Com altura fixa + overflow:hidden no shell,
   isso não acontece mais: a sidebar sempre ocupa 100% da tela. */
.fv-shell { position: relative; display: flex; height: 100vh; overflow: hidden; background: var(--fv-bg); }

/* ---- Sidebar ---- */
.fv-sidebar {
  width: var(--fv-sidebar-width);
  flex-shrink: 0;
  background: var(--fv-sidebar-bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .2s ease;
  z-index: 40;
}
.fv-sidebar.fv-collapsed { width: var(--fv-sidebar-width-collapsed); }

.fv-sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--fv-space-3);
  padding: var(--fv-space-5) var(--fv-space-5);
  white-space: nowrap;
}
.fv-sidebar-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--fv-radius-md);
  background: linear-gradient(135deg, var(--fv-primary-500), var(--fv-primary-800));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.fv-sidebar-brand-text { color: #fff; font-weight: 700; font-size: var(--fv-text-base); }
.fv-sidebar.fv-collapsed .fv-sidebar-brand-text,
.fv-sidebar.fv-collapsed .fv-nav-label,
.fv-sidebar.fv-collapsed .fv-nav-badge,
.fv-sidebar.fv-collapsed .fv-sidebar-section-title { display: none; }

.fv-sidebar-nav { flex: 1; padding: var(--fv-space-2) var(--fv-space-3); }
.fv-sidebar-section-title {
  padding: var(--fv-space-4) var(--fv-space-3) var(--fv-space-2);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fv-sidebar-text-muted);
}

.fv-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--fv-space-3);
  padding: var(--fv-space-3);
  margin-bottom: 2px;
  border-radius: var(--fv-radius-lg);
  color: var(--fv-sidebar-text);
  text-decoration: none;
  font-size: var(--fv-text-sm);
  font-weight: var(--fv-font-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.fv-nav-item i { font-size: 19px; flex-shrink: 0; width: 20px; text-align: center; }
.fv-nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.fv-nav-item.fv-active { background: var(--fv-sidebar-active-bg); color: var(--fv-sidebar-active-text); }

.fv-nav-badge {
  margin-left: auto;
  background: var(--fv-danger-600);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--fv-radius-full);
  flex-shrink: 0;
}
.fv-sidebar.fv-collapsed .fv-nav-item { justify-content: center; }

/* Grupo de navegação expansível (ex: "Mapeamentos" com sub-itens DISC/
   Valores/...) — usa <details>/<summary> nativo, sem JS. */
.fv-nav-group summary { list-style: none; }
.fv-nav-group summary::-webkit-details-marker { display: none; }
.fv-nav-group-caret { margin-left: auto; font-size: 14px; transition: transform .15s ease; flex-shrink: 0; }
.fv-nav-group[open] > summary .fv-nav-group-caret { transform: rotate(180deg); }
.fv-nav-sub { display: flex; flex-direction: column; gap: 2px; padding-left: var(--fv-space-5); margin-top: var(--fv-space-2); }
.fv-nav-sub .fv-nav-item { padding-top: var(--fv-space-2); padding-bottom: var(--fv-space-2); border-left: 2px solid transparent; border-radius: 0 var(--fv-radius-lg) var(--fv-radius-lg) 0; }
.fv-nav-sub .fv-nav-item.fv-active {
  background: transparent;
  border-left-color: var(--fv-primary-300);
  color: #fff;
  font-weight: var(--fv-font-semibold);
}
.fv-sidebar.fv-collapsed .fv-nav-group-caret { display: none; }

/* Modo recolhido: exibe sub-itens como ícones (icon-rail).
   display:flex !important é necessário para vencer tanto a regra acima
   quanto a UA stylesheet do <details> (que esconde o conteúdo quando
   o atributo [open] está ausente). O JS em freedomv2.js complementa
   forçando [open] em todos os grupos para garantia cross-browser. */
.fv-sidebar.fv-collapsed .fv-nav-sub {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  padding-left: 0;
  margin-top: 2px;
}
.fv-sidebar.fv-collapsed .fv-nav-sub .fv-nav-item {
  justify-content: center;
  border-left: none !important;
  border-radius: var(--fv-radius-lg);
  padding-top: var(--fv-space-2);
  padding-bottom: var(--fv-space-2);
}
.fv-sidebar.fv-collapsed .fv-nav-sub .fv-nav-item.fv-active {
  background: var(--fv-sidebar-active-bg) !important;
  color: var(--fv-sidebar-active-text) !important;
  font-weight: var(--fv-font-semibold);
}

.fv-sidebar-footer { padding: var(--fv-space-3); border-top: 1px solid var(--fv-sidebar-border); }

/* Botão de recolher/expandir — fica FORA da .fv-sidebar (que tem
   overflow-x:hidden) para não ser cortado. Deve vir logo depois da
   </aside> no HTML, como filho direto de .fv-shell, para o seletor
   de irmão abaixo sincronizar com o estado fv-collapsed. */
.fv-sidebar-toggle {
  position: absolute;
  top: var(--fv-space-5);
  left: calc(var(--fv-sidebar-width) - 14px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  color: var(--fv-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  box-shadow: var(--fv-shadow-md);
  transition: left .2s ease, color .15s ease, border-color .15s ease;
  z-index: 50;
}
.fv-sidebar-toggle i { transition: transform .2s ease; }
.fv-sidebar-toggle:hover { color: var(--fv-primary); border-color: var(--fv-primary-200); }
.fv-sidebar.fv-collapsed ~ .fv-sidebar-toggle {
  left: calc(var(--fv-sidebar-width-collapsed) - 14px);
}
.fv-sidebar.fv-collapsed ~ .fv-sidebar-toggle i { transform: rotate(180deg); }

/* ---- Topbar ---- */
/* overflow-x:hidden explícito — sem isso, o navegador computa overflow-x
   como "auto" automaticamente (regra do spec: overflow-y != visible sem
   overflow-x definido vira auto nos dois eixos). Pseudo-elementos de
   tooltip (data-fv-tooltip::after) ficam visibility:hidden mas ainda
   contam pra área de rolagem do ancestral mais próximo com overflow-x
   != visible — um botão com tooltip longo perto da borda direita da
   página já bastava pra criar uma barra de rolagem horizontal fantasma
   aqui, mesmo com todo conteúdo largo (tabelas etc.) já tendo seu
   próprio overflow-x:auto interno. */
.fv-shell-main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }

.fv-topbar {
  height: var(--fv-topbar-height);
  flex-shrink: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--fv-space-4);
  padding: 0 var(--fv-space-6);
  background: var(--fv-surface);
  border-bottom: 1px solid var(--fv-border);
  position: sticky;
  top: 0;
  z-index: 30;
  overflow-x: auto;
  overflow-y: hidden;
}
.fv-topbar-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--fv-text-muted);
  cursor: pointer;
}
.fv-topbar-badges { display: flex; align-items: center; gap: var(--fv-space-2); flex-wrap: wrap; }
.fv-topbar-spacer { flex: 1; }
.fv-topbar-actions { display: flex; align-items: center; gap: var(--fv-space-3); }

.fv-topbar-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: var(--fv-text-muted);
  cursor: pointer;
}
.fv-topbar-icon-btn:hover { background: var(--fv-primary-50); color: var(--fv-primary); }
.fv-topbar-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fv-danger-500);
  border: 2px solid var(--fv-surface);
}

.fv-shell-content { flex: 1; min-width: 0; padding: var(--fv-space-6); color: var(--fv-text); background: var(--fv-bg); }

/* ---- Responsivo ----
   Abaixo de 1024px o JS já inicia a sidebar recolhida (ícone-rail);
   o botão fv-topbar-menu-btn aparece pra alternar com o mesmo
   data-fv-sidebar-toggle usado no botão de dentro da sidebar. */
@media (max-width: 1023px) {
  .fv-topbar-menu-btn { display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 640px) {
  .fv-topbar-badges { display: none; }
}

/* =====================================================
   Rich Text (editor de texto — Quill via data-fv-richtext)
   Uso: <textarea data-fv-richtext name="conteudo">...</textarea>
   O JS esconde o textarea, monta o Quill num <div> ao lado e
   sincroniza o HTML de volta pro textarea antes do submit —
   nenhum endpoint precisa saber que existe um editor.
   ===================================================== */
.fv-richtext-wrap { border: 1px solid var(--fv-border); border-radius: var(--fv-radius-lg); overflow: hidden; }
.fv-richtext-wrap .ql-toolbar {
  border: none;
  border-bottom: 1px solid var(--fv-border);
  background: var(--fv-surface-alt);
  font-family: var(--fv-font-sans);
}
.fv-richtext-wrap .ql-container {
  border: none;
  font-family: var(--fv-font-sans);
  font-size: var(--fv-text-sm);
  min-height: 220px;
}
.fv-richtext-wrap .ql-editor { color: var(--fv-text); min-height: 220px; }

/* =====================================================
   Barra DISC (fv-disc-cell)
   Composição D/I/S/C de uma posição ou time — os quatro
   valores somam 100%, então a largura de cada faixa É a
   porcentagem, e o rótulo abaixo apenas nomeia o que a
   faixa já mostra.

   A legenda existe porque só a barra não comunicava: o
   cliente via as cores mas não sabia o peso de cada fator,
   e a porcentagem só aparecia no tooltip (hover), que em
   tabela ninguém descobre.

   Cores: bar usa o passo 600 (bloco grande, 3:1 basta);
   o texto usa 700 no claro e 400 no escuro, onde a fonte
   de 11px precisa de 4.5:1.

   <div class="fv-disc-cell">
     <div class="fv-disc-bar"><span class="d" style="width:37%"></span>...</div>
     <div class="fv-disc-legend"><span class="d fv-disc-top">D 37%</span>...</div>
   </div>
   ===================================================== */
.fv-disc-cell { display: inline-flex; flex-direction: column; gap: 5px; cursor: default; }

.fv-disc-bar {
  display: flex;
  width: 100%;
  min-width: 140px;
  height: 14px;
  border-radius: var(--fv-radius-md, 6px);
  overflow: hidden;
  background: var(--fv-surface-alt, #f1f1f4);
}
.fv-disc-bar span { height: 100%; }
.fv-disc-bar .d { background: var(--fv-danger-600, #dc2626); }
.fv-disc-bar .i { background: var(--fv-warning-600, #d97706); }
.fv-disc-bar .s { background: var(--fv-success-600, #16a34a); }
.fv-disc-bar .c { background: var(--fv-info-600, #4f46e5); }

.fv-disc-legend {
  display: flex;
  gap: 9px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fv-disc-legend span { font-weight: 500; }
.fv-disc-legend .d { color: var(--fv-danger-700, #b91c1c); }
.fv-disc-legend .i { color: var(--fv-warning-700, #b45309); }
.fv-disc-legend .s { color: var(--fv-success-700, #15803d); }
.fv-disc-legend .c { color: var(--fv-info-700, #3730a3); }
/* Fator dominante — o cliente bate o olho e lê o perfil sem comparar os quatro. */
.fv-disc-legend .fv-disc-top { font-weight: 700; }

:root[data-theme="dark"] .fv-disc-legend .d { color: var(--fv-danger-400, #f87171); }
:root[data-theme="dark"] .fv-disc-legend .i { color: var(--fv-warning-400, #fbbf24); }
:root[data-theme="dark"] .fv-disc-legend .s { color: var(--fv-success-400, #4ade80); }
:root[data-theme="dark"] .fv-disc-legend .c { color: var(--fv-info-400, #818cf8); }

/* =====================================================
   Chip de status de regra (fv-chip-status)
   Checklist ao vivo das regras de seleção D/I/S/C nos
   modais de Posição e de Time (criar e editar).

   Três estados, e o pendente é vermelho de propósito: antes
   ele era cinza, igual a "neutro", e o usuário não percebia
   que faltava algo — só notava que o botão Salvar seguia
   desabilitado, sem saber por quê.

   O estado padrão (sem classe) é o pendente, então o JS só
   precisa ligar/desligar .fv-ok.

   .fv-chip-status         → pendente (vermelho)
   .fv-chip-status.fv-ok   → cumprida (verde)
   ===================================================== */
.fv-chip-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--fv-danger-50, #fef2f2); color: var(--fv-danger-700, #b91c1c);
  transition: background .15s, color .15s;
}
.fv-chip-status.fv-ok { background: var(--fv-success-50, #f0fdf4); color: var(--fv-success-700, #15803d); }

/* =====================================================
   Impressão de um resultado da Freedom IA
   O botão (data-fv-print) marca o .fv-ia-print-area mais
   próximo com .fv-print-alvo e chama window.print().

   Isola por visibility, não por display:none nos irmãos:
   esconder ancestrais por display quebraria o layout do
   próprio alvo. Com visibility tudo some, o alvo volta a
   aparecer e é reposicionado no topo da folha.
   ===================================================== */
.fv-print-so { display: none; }

.fv-ia-print-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fv-space-3); margin-bottom: var(--fv-space-3);
  flex-wrap: wrap;
}

@media print {
  /* Sem a classe no body, imprimir pela tecla do navegador segue
     imprimindo a página inteira, que é o comportamento esperado. */
  body.fv-imprimindo * { visibility: hidden !important; }
  body.fv-imprimindo .fv-print-alvo,
  body.fv-imprimindo .fv-print-alvo * { visibility: visible !important; }
  body.fv-imprimindo .fv-print-alvo {
    position: absolute; left: 0; top: 0; width: 100%;
    margin: 0; padding: 0; background: #fff; color: #000;
  }

  .fv-print-so { display: block !important; }
  .fv-nao-imprimir { display: none !important; }

  .fv-ia-print-cabecalho {
    border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 16px;
  }
  .fv-ia-print-marca { font-size: 10pt; letter-spacing: .12em; text-transform: uppercase; color: #555; }
  .fv-ia-print-titulo { font-size: 18pt; font-weight: 700; margin-top: 2px; }
  .fv-ia-print-pessoa { font-size: 12pt; margin-top: 4px; }
  .fv-ia-print-data { font-size: 9pt; color: #555; margin-top: 2px; }

  /* Evita quebrar título separado do texto que ele encabeça. */
  .fv-print-alvo h3, .fv-print-alvo h4, .fv-print-alvo strong { break-after: avoid; }
  .fv-print-alvo li, .fv-print-alvo p { break-inside: avoid; }

  @page { margin: 1.6cm; }
}

/* =====================================================
   Wizard de etapas (fv-steps)
   Divide um formulário longo em passos, sem virar vários
   formulários: os painéis escondidos continuam no DOM e
   o submit final manda tudo de uma vez. Quem usa hoje é
   "Nova Posição" e "Editar Posição", que juntavam
   identificação, contexto da IA e 76 características DISC
   numa tela só.

   O painel escondido usa display:none, e isso tem uma
   consequência que o JS precisa respeitar: campo required
   invisível não pode ser focado, e o navegador cancela o
   submit em silêncio. Por isso avançar valida a etapa
   atual — chegar na última significa que as anteriores
   já passaram.

   .fv-step.fv-atual → etapa aberta
   .fv-step.fv-feito → etapa já validada (clicável)
   ===================================================== */
.fv-steps-nav {
  display: flex; align-items: stretch; gap: var(--fv-space-2);
  border-bottom: 1px solid var(--fv-border);
  margin-bottom: var(--fv-space-5);
  overflow-x: auto;
}

.fv-step {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 4px 12px; margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--fv-text-muted); white-space: nowrap; cursor: default;
  transition: color .15s, border-color .15s;
}
.fv-step + .fv-step { margin-left: var(--fv-space-4); }

/* Só etapa cumprida volta a ser clicável — pular pra frente sem
   preencher deixaria um required escondido barrando o submit. */
.fv-step.fv-feito { cursor: pointer; color: var(--fv-text); }
.fv-step.fv-feito:hover { color: var(--fv-primary); }
.fv-step.fv-atual { color: var(--fv-primary); border-bottom-color: var(--fv-primary); }

.fv-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: var(--fv-surface-alt); border: 1px solid var(--fv-border);
  font-size: 11px; font-weight: 700; line-height: 1;
}
/* fv-feito antes de fv-atual de propósito: a etapa aberta acumula as duas
   classes (ela já foi validada antes de você voltar pra ela), e quem vem
   depois vence no empate de especificidade. */
.fv-step.fv-feito .fv-step-num {
  background: var(--fv-success-50, #f0fdf4);
  border-color: var(--fv-success-600, #16a34a);
  color: var(--fv-success-700, #15803d);
}
.fv-step.fv-atual .fv-step-num {
  background: var(--fv-primary); border-color: var(--fv-primary); color: var(--fv-on-primary, #fff);
}

.fv-step-panel { display: none; }
.fv-step-panel.fv-atual { display: block; }

.fv-steps-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fv-space-3); margin-top: var(--fv-space-5);
  padding-top: var(--fv-space-4); border-top: 1px solid var(--fv-border);
}
.fv-steps-footer-dir { display: flex; gap: var(--fv-space-3); margin-left: auto; }

@media (max-width: 640px) {
  .fv-step-rotulo { display: none; }
  .fv-step + .fv-step { margin-left: var(--fv-space-3); }
}

/* =====================================================
   Hero dos mapeamentos (fv-disc-hero)
   Faixa do topo dos dashboards de uma pessoa (DISC, Âncoras,
   Valores, Linguagens, Sabotadores, Roda da Vida, PDI, 360,
   Freedom ID, posições...). Mora aqui, numa regra só; antes
   cada uma das 14 telas trazia a sua cópia.

   Fundo noite chapado, o mesmo do menu lateral, nos dois temas.
   O degradê antigo partia de --fv-primary, que no escuro vira
   lilás, e o manual de marca não usa degradê. A barra colorida
   virou a linha de espectro do manual: segmentos separados por
   uma fresta e inclinados no ângulo da lâmina (66,5°, ou seja,
   skew de 23,5°), colados na borda de baixo. As cores de cada
   segmento continuam vindo da tela (DISC, áreas, valores...).

   <div class="fv-disc-hero">
     <img class="fv-disc-hero-photo" src="..." alt="">
     <div>
       <p class="fv-disc-hero-nome"><i class="ph ph-..."></i> Nome</p>
       <span class="fv-disc-hero-badge">Seu Perfil: ...</span>
       <span class="fv-disc-hero-hashtag">#... </span>
       <div class="fv-disc-hero-bar"><span style="background:..."></span>...</div>
     </div>
   </div>
   ===================================================== */
.fv-disc-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--fv-space-5);
  flex-wrap: wrap;
  padding: var(--fv-space-6);
  margin-bottom: var(--fv-space-4);
  background: var(--fv-sidebar-bg, #170A33);
  border-radius: var(--fv-radius-lg);
  color: #fff;
}
/* No escuro a página é um tom abaixo do noite; o fio separa o hero dela */
:root[data-theme="dark"] .fv-disc-hero { box-shadow: inset 0 0 0 1px var(--fv-border); }

/* Anel duplo: fresta noite e aro lilás */
.fv-disc-hero-photo {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--fv-ativo-bg, #312155);
  box-shadow: 0 0 0 3px var(--fv-sidebar-bg, #170A33), 0 0 0 5px rgba(169, 139, 239, .55);
}

.fv-disc-hero-nome {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: 'Montserrat', var(--fv-font-sans);
  font-size: var(--fv-text-2xl);
  font-weight: var(--fv-font-extrabold);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
}
.fv-disc-hero-nome i { font-size: .85em; color: var(--fv-primary-400, #A98BEF); }

.fv-disc-hero-badge,
.fv-disc-hero-hashtag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 6px 6px 0;
  padding: 4px 12px;
  border-radius: var(--fv-radius-full);
  background: rgba(169, 139, 239, .16);
  color: #fff;
  font-size: var(--fv-text-xs);
  font-weight: var(--fv-font-semibold);
}
.fv-disc-hero-badge i { color: var(--fv-primary-400, #A98BEF); }
.fv-disc-hero-hashtag {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(169, 139, 239, .45);
  color: var(--fv-primary-400, #A98BEF);
}

/* Linha de espectro. Passa um pouco das bordas para a inclinação não
   deixar ponta reta; o overflow do hero corta na curva do canto. */
.fv-disc-hero-bar {
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: 0;
  display: flex;
  gap: 6px;
  height: 6px;
  transform: skewX(-23.5deg);
}
.fv-disc-hero-bar span { flex: 1; }