/* Ficha da direita: "Características do caso" (web/js/ficha-caso.js).
   Mesma linguagem visual da ficha de pessoa (css/ficha-pessoa.css): só tokens
   do tema, para funcionar no escuro e no claro (html[data-tema="claro"]). */

/* 20/09: a seção é uma pílula da barra de ícones da ficha (css/ficha-compacto.css);
   o que está aqui é o conteúdo do balão. */

.fc-link { background: none; border: 0; padding: 2px 0; color: var(--marca); font: inherit; font-size: 12.5px; cursor: pointer; }
.fc-link:hover { text-decoration: underline; }

.fc-tipo { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; font-size: 12.5px; }
.fc-tipo span { color: var(--texto-3); }
.fc-tipo b { font-weight: 600; color: var(--texto); }
.fc-sem-tipo { margin: 0 0 8px; padding: 7px 9px; border: 1px dashed var(--borda); border-radius: 8px;
  background: var(--fundo-2); color: var(--texto-3); font-size: 11.5px; line-height: 1.45; }

.fc-rotulo-grupo { margin: 10px 0 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-3); }
.fc-item b { font-weight: 500; }
/* resposta que a cliente ainda não deu: visível sem gritar */
.fc-pendente b { color: var(--texto-3); font-style: italic; }

/* enquanto não há rota da API: aviso discreto, uma linha, nada de alarme */
.fc-local { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--texto-3); font-style: italic; }

.fc-contagem { margin: 10px 0 0; font-size: 11.5px; color: var(--texto-3); }
.fc-contagem.fc-completa { color: var(--marca); }

/* CTA de seção vazia, dentro do balão: mesmo padrão de "Dados pessoais" */
.fc-cta-linha { display: flex; }
.fc-cta { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 10px; text-align: left;
  border: 1px dashed var(--borda-forte); border-radius: 8px; background: none; color: var(--marca); font: inherit; cursor: pointer; }
.fc-cta:hover, .fc-cta:focus-visible { border-style: solid; border-color: var(--ouro); background: var(--marca-fundo); outline: none; }
.fc-cta-icone { font-size: 14px; line-height: 1.3; }
.fc-cta-texto { display: grid; gap: 2px; min-width: 0; }
.fc-cta-texto b { font-size: 12.5px; font-weight: 600; color: var(--marca); }
.fc-cta-texto small { font-size: 11.5px; line-height: 1.4; color: var(--texto-3); }

.fc-form { display: grid; gap: 8px; }
.fc-campo { display: grid; gap: 3px; font-size: 12.5px; }
.fc-campo .fc-label { color: var(--texto-3); }
.fc-form input, .fc-form select {
  width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--input); color: var(--texto); font: inherit; font-size: 12.5px;
}
.fc-form input:focus, .fc-form select:focus { outline: none; border-color: var(--ouro); }

/* "cliente não respondeu": a saída para quem perguntou e não teve resposta */
.fc-marcar { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--texto-3); cursor: pointer; }
.fc-marcar input { width: auto; margin: 0; }
.fc-marcar:hover { color: var(--texto-2); }

/* nome e idade de filho não se respondem aqui: a seção "Filhos" é a fonte */

.fc-bens { display: grid; gap: 5px; }
.fc-bem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) 24px; gap: 5px; align-items: center; }
.fc-icone { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent;
  color: var(--texto-3); cursor: pointer; font-size: 14px; line-height: 1; }
.fc-icone:hover { background: var(--fundo-3); color: var(--texto); }
.fc-remover:hover { color: var(--erro); }
.fc-add { padding: 5px 8px; border: 1px dashed var(--borda-forte); border-radius: 8px; background: none;
  color: var(--marca); font: inherit; font-size: 12px; cursor: pointer; }
.fc-add:hover { border-style: solid; border-color: var(--ouro); background: var(--marca-fundo); }

.fc-acoes { display: flex; gap: 6px; margin-top: 4px; }