/* CRM33 Comercial — ficha do cliente. Só layout (prefixo .fi-).
 * Cores vêm de tokens.css; componentes de base.css. Texto da ficha em 13 ou 14 px. */

.fi { display: flex; flex-direction: column; min-height: 0; height: 100%; min-width: 0; }

/* Componentes de base reduzidos para a densidade da ficha (sem 12 px) */
.fi .badge, .fi .chip, .fi .btn-sm, .fi .freshness { font-size: var(--fs-2); }
.fi .input, .fi .select { height: 30px; font-size: var(--fs-2); }
.fi textarea.input { height: auto; min-height: 56px; }
.fi .seg button { font-size: var(--fs-2); padding: 3px 10px; }
.fi .empty { padding: 20px 12px; font-size: var(--fs-2); }
.fi .avatar { width: 36px; height: 36px; }

/* Cabeçalho */
.fi-cab { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); }
.fi-perfis { align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fi-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fi-id-txt { min-width: 0; display: flex; flex-direction: column; }
.fi-nome { font-size: var(--fs-3); font-weight: var(--fw-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-tel { font-size: var(--fs-2); color: var(--ink-soft); }
.fi-origem { font-size: var(--fs-1); color: var(--ink-soft); margin-top: 2px; }

/* Abas da ficha */
.fi-tabs { padding: 0 6px; flex: none; }
.fi-tabs .tab { padding: 8px 8px 7px; font-size: var(--fs-2); }
.fi-corpo { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px 14px; }

/* Blocos */
.fi-ficha { display: flex; flex-direction: column; gap: 16px; }
.fi-bloco { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fi-titulo { margin: 0; font-size: var(--fs-3); font-weight: var(--fw-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.fi-dica { font-size: var(--fs-2); color: var(--ink-faint); line-height: 1.35; }
.fi-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.fi-direita { justify-content: flex-end; }
.fi-erro { font-size: var(--fs-2); color: var(--danger); }
.fi-erro:empty { display: none; }
.fi-aviso { width: 100%; font-size: var(--fs-2); }

/* Campos editáveis em linha */
.fi-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fi-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fi-full { grid-column: 1 / -1; }
.fi-campo > label, .fi-rotulo { font-size: var(--fs-2); color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.fi-campo > .fi-dica { margin-top: 1px; }
.fi-etapa { flex-wrap: nowrap; }
.fi-etapa .select { flex: 1; min-width: 0; }

/* Selos */
.fi-selos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fi-selo { height: 24px; padding: 0 4px 0 10px; }
.fi-x { border: 0; background: none; cursor: pointer; padding: 2px; border-radius: 50%; display: inline-flex; color: var(--ink-faint); }
.fi-x:hover { background: var(--surface-muted); color: var(--ink); }
.fi-add { display: flex; gap: 6px; align-items: center; }
.fi-add .input { flex: 1; min-width: 0; }

/* Listas genéricas (mensagens, acompanhamentos, orçamentos, guias) */
.fi-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.fi-lista > li { min-width: 0; }
.fi-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-2); }
.fi-item:last-child { border-bottom: 0; }
.fi-item-main { flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.fi-item-main:hover .strong { color: var(--accent); }
.fi-item-main-txt { display: flex; flex-direction: column; min-width: 0; }
.fi-item .num { margin-left: auto; }
.fi-acoes { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.fi-guia .fi-selos { flex: 1 1 auto; }

/* Mensagens importantes */
.fi-msg { width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: var(--radius-xs); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: inherit; font-size: var(--fs-2); }
.fi-msg:hover { background: var(--surface-soft); }
.fi-msg-texto { min-width: 0; flex: 1; }

/* Formulário de acompanhamento */
.fi-form { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.fi-atalhos { display: flex; gap: 6px; flex-wrap: wrap; }

/* Resultado da busca no HubMed */
.fi-cand { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fi-cand li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 8px; }
.fi-cand-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: var(--fs-2); }

/* Orçamentos: faixa de orçamentos logo abaixo do cabeçalho (como o CRM33). O topo (faixa + busca de
 * exame) gruda no alto da aba enquanto os itens rolam. Cores e superfícies vêm de tokens.css. */
.fi-orc { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fi-orc-topo {
  position: sticky; top: 0; z-index: 4; margin: -10px -12px 0; padding: 10px 12px 8px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  background: var(--surface); box-shadow: 0 1px 0 var(--line);
}
.fi-orc-busca { position: relative; min-width: 0; }
.fi-editor { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.fi-vazio { margin: 0; padding: 24px 12px; text-align: center; font-size: var(--fs-3); font-weight: var(--fw-2); color: var(--ink-soft); }
.fi-orc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cor); flex: none; }

/* Faixa: rascunhos e orçamentos salvos em pílulas; "+ Novo" no fim. Rola na horizontal (roda do mouse). */
.fi-faixa { min-width: 0; }
.fi-faixa-trilho { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 4px; min-width: 0; }
.fi-faixa-item {
  flex: none; display: inline-flex; align-items: center; height: 28px; padding-right: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface);
}
.fi-faixa-item.is-ativo { border-color: var(--accent); background: var(--accent-softer); }
.fi-faixa-tab {
  flex: none; display: inline-block; max-width: 160px; height: 26px; padding: 0 10px; margin: 0;
  border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-soft);
  font: inherit; font-size: var(--fs-1); line-height: 26px; text-align: left; white-space: nowrap; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.fi-faixa-tab[aria-selected="true"] { color: var(--accent); font-weight: var(--fw-2); }
.fi-faixa-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fi-faixa-tab .fi-orc-dot { display: inline-block; vertical-align: middle; margin-right: 6px; }
.fi-faixa-x {
  flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: none; color: var(--ink-faint); cursor: pointer;
}
.fi-faixa-x:hover { background: var(--surface-muted); color: var(--danger); }
.fi-faixa-mais {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); background: none;
  color: var(--accent); font: inherit; font-size: var(--fs-1); cursor: pointer; white-space: nowrap;
}
.fi-faixa-mais:hover { background: var(--accent-softer); border-style: solid; }
.fi-faixa-mais:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fi-faixa-skel { flex: none; width: 96px; height: 28px; border-radius: var(--radius-pill); }
.fi-faixa-sujo { color: var(--accent); }
.fi-faixa-st { margin-left: 4px; font-size: 11px; color: var(--ink-faint); }
.fi-faixa-erro { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.fi-faixa-ren { flex: none; width: 150px; height: 28px; font-size: var(--fs-1); }

/* Histórico */
.fi-tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fi-tempo-item { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-2); }
.fi-tempo-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-muted); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Esqueleto da primeira carga */
.fi-esq { height: 34px; margin-bottom: 8px; }
.fi-esq-curto { width: 60%; height: 14px; }

@media (max-width: 767px) {
  .fi-campos { grid-template-columns: 1fr; }
}

/* Rodada 3: densidade da ficha (como o CRM33), sem chevrons */
.fi-etapas { padding: 8px 0 0; }
.fi-etapas:empty { display: none; }
.fi-campos { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 6px 8px; }
.fi-campos .fi-full { grid-column: 1 / -1; }
.fi-campos .fi-cpf { grid-column: 2; }
.fi-campo { gap: 2px; }
.fi-campo > label { font-size: var(--fs-1); }
/* Observações: 1 linha que cresce até 3 (ajustarObs no JS) e depois rola por dentro. Seletor com 3 níveis para vencer
 * .fi textarea.input (min-height 56px) e textarea.input do base.css (min-height 72px, padding 8px 10px, resize). */
.fi textarea.input.fi-obs { resize: none; height: auto; min-height: 0; padding: 5px 10px; line-height: 1.35; font-size: var(--fs-2); overflow-y: hidden; }
.fi-titulo { flex-wrap: nowrap; gap: 6px; }
.fi-titulo .grow, .fi-tit-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-novo { flex: none; height: 26px; padding: 0 8px; gap: 4px; }
.fi-icone { width: 24px; height: 24px; flex: none; color: var(--ink-soft); }
.fi-icone:hover { color: var(--ink); }
.fi-perfis-linha { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fi-perfis-linha .fi-perfis { flex: 1 1 auto; min-width: 0; }
.fi-hub { justify-content: space-between; }
.fi-semaforo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--ink-soft); }
.fi-semaforo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.fi-semaforo.is-ok { color: var(--ok); }
.fi-semaforo.is-ok::before { background: var(--ok); }
.fi-perfis { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
.fi-perfis button { white-space: nowrap; flex: none; }
.fi-perfis-linha .fi-icone { width: 26px; height: 26px; }

/* Ordem da ficha: Cadastro, Etapas, Importantes (se houver), Acompanhamentos, Vínculo HubMed (uma linha) */
.fi-hub-bloco { padding-top: 4px; border-top: 1px solid var(--line); }
.fi-hub { flex-wrap: nowrap; gap: 8px; min-height: 26px; }
.fi-hub-titulo { font-size: var(--fs-2); font-weight: var(--fw-2); color: var(--ink-soft); white-space: nowrap; }
.fi-etapas-bloco { gap: 4px; }
.fi-hub-esq { height: 26px; }
.fi-hub-titulo { flex: none; }
.fi-hub .fi-semaforo { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-hub .btn-sm { flex: none; }

/* Data de nascimento: máscara dd/mm/aaaa em campo de texto; erro curto sob o campo */
.fi-campo-erro { font-size: var(--fs-1); color: var(--danger); line-height: 1.3; }
.fi-campo-erro:empty { display: none; }
.fi-campo input[aria-invalid="true"] { border-color: var(--danger); }

/* Vínculo HubMed: título, status e botão na mesma linha; o status usa rótulo curto (sem corte) */
.fi-hub { justify-content: flex-start; flex-wrap: wrap; }
.fi-hub .grow { display: none; }
.fi-hub .fi-semaforo { flex: none; min-width: max-content; white-space: nowrap; overflow: visible; text-overflow: clip; }
.fi-procurar { flex: none; white-space: nowrap; }
.fi-procurar svg { flex: none; }

/* Aviso discreto: etapa mudou sem ação nesta ficha */
.fi-aviso-etapa {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  padding: 5px 8px; border-radius: var(--radius-xs); background: var(--warn-soft); color: var(--ink);
  font-size: var(--fs-2); line-height: 1.35;
}
.fi-aviso-etapa > .grow { min-width: 0; }

/* Funil: etapas percorridas sempre na mesma cor (neutra); só a etapa atual leva a cor da própria etapa */
.fi-etapas .et-bola-item.is-feita::before { background: var(--ink-soft); }
.fi-etapas .et-bola-item.is-feita .et-bola { background: var(--ink-soft); border-color: var(--ink-soft); }