/* Ficha da direita: barra de pílulas das seções (web/js/ficha-compacto.js).
   20/09, pedido do Daniel: "Dados pessoais", "Filhos", "Características do caso"
   e "Etiquetas" viraram pílulas compactas; o conteúdo de cada uma fica num balão
   que abre no hover, com foco (:focus-within) ou por clique/toque
   ([data-aberto="true"]) — a mesma linguagem dos filtros compactos da lista
   (css/lista.css). 20/09 (tarde): "Dados do contato", "Leitura da IA" e "Próxima
   ação" entraram na barra e toda pílula mostra o nome escrito (ícone + rótulo em
   caixa alta pequena + resumo em destaque, igual ao "Ordenar · Recentes" da
   lista). Sete pílulas numa coluna de ~320px: a barra quebra linha.
   Só tokens do tema: funciona no escuro e no claro. */

.ficha-secoes { padding-top: 10px; padding-bottom: 10px; }
.ficha-barra { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
/* ficha-pessoa.js guarda "Dados pessoais" e "Filhos" num nó só: o nó some do layout e as duas pílulas entram na barra */
.ficha-barra-grupo { display: contents; }
/* responsável: última pílula, encostada à direita (20/09 noite, Daniel) */
.ficha-compacto[data-secao="dono"] { margin-left: auto; }
.ficha-dono-sem { color: var(--alerta); }
.ficha-compacto { display: flex; min-width: 0; }

.ficha-compacto-gatilho {
  position: relative; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 28px; padding: 0 9px 0 7px;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--input); color: var(--texto-2);
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s, opacity .12s;
}
.ficha-compacto-gatilho .icone-svg { display: block; flex: none; color: var(--texto-3); }
/* rótulo escrito (mesmo desenho do .ordem-lista-rotulo da lista) */
.ficha-compacto-rotulo { flex: none; font-size: 10px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
/* nada preenchido: pílula mais apagada — o balão explica o que vai ali */
.ficha-compacto-vazio > .ficha-compacto-gatilho { opacity: .6; }
.ficha-compacto-vazio:hover > .ficha-compacto-gatilho, .ficha-compacto-vazio:focus-within > .ficha-compacto-gatilho,
.ficha-compacto-vazio[data-aberto="true"] > .ficha-compacto-gatilho { opacity: 1; }
/* "opção atual" (2, 4/5, hoje 14:00, resumo pronto): mesma cor/peso do .filtro-compacto-atual */
.ficha-compacto-resumo { min-width: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.ficha-compacto-resumo.fc-completa { color: var(--marca); }
/* ponte invisível entre a pílula e o balão: o mouse desce sem "cair" no vão e fechar */
.ficha-compacto:hover > .ficha-compacto-gatilho::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.ficha-compacto:hover > .ficha-compacto-gatilho, .ficha-compacto:focus-within > .ficha-compacto-gatilho,
.ficha-compacto[data-aberto="true"] > .ficha-compacto-gatilho {
  border-color: var(--ouro); color: var(--texto); background: color-mix(in srgb, var(--ouro) 12%, var(--input));
}
.ficha-compacto:hover > .ficha-compacto-gatilho .icone-svg, .ficha-compacto:focus-within > .ficha-compacto-gatilho .icone-svg,
.ficha-compacto[data-aberto="true"] > .ficha-compacto-gatilho .icone-svg { color: var(--ouro); }
.coluna-ficha .ficha-compacto-gatilho:focus-visible { outline: 2px solid var(--ouro); outline-offset: 1px; }

/* balão: absoluto, na largura inteira da barra (a coluna tem 320px — ao lado não cabe),
   logo abaixo da barra inteira (não da linha da pílula: com a barra em várias linhas o
   balão nunca cobre as outras pílulas), sobre o que vem abaixo; alto demais rola por
   dentro — os de "Dados do contato" e "Leitura da IA" são os mais altos */
.ficha-balao {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  max-height: min(70vh, 540px); overflow: auto; overscroll-behavior: contain; padding: 10px 12px 12px;
  background: var(--fundo-2); border: 1px solid var(--borda-forte); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.26);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease;
}
.ficha-compacto:hover > .ficha-balao, .ficha-compacto:focus-within > .ficha-balao,
.ficha-compacto[data-aberto="true"] > .ficha-balao { opacity: 1; visibility: visible; pointer-events: auto; }
/* com uma pílula travada por clique (20/09, Daniel): o hover nas outras só acende a pílula,
   não abre o balão delas — o travado fica na tela. Clicar em outra troca; clicar fora destrava
   e o hover volta a abrir (ficha-compacto.js). */
.ficha-barra:has(.ficha-compacto[data-aberto="true"]) .ficha-compacto:not([data-aberto="true"]) > .ficha-balao {
  opacity: 0; visibility: hidden; pointer-events: none;
}
/* acabou de fechar (Esc / clique na pílula) com o mouse ainda em cima: fica fechado até o mouse sair */
.ficha-compacto[data-fechado="true"] > .ficha-balao { opacity: 0; visibility: hidden; pointer-events: none; }
.ficha-balao > h3 { margin: 0 0 9px; }
.ficha-balao-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ficha-balao-cab h3 { margin-bottom: 9px; }
.ficha-balao .ficha-vazio:last-child { margin-bottom: 0; }
/* dentro do balão, os blocos que antes eram seções próprias não trazem margem de seção */
.ficha-balao .ficha-contato-corpo { margin-top: 0; }
.ficha-balao .proxima-acao { margin-bottom: 0; }
.ficha-balao .nova-acao { margin-top: 8px; }
/* touch: sem hover de verdade; só o toque na pílula abre (JS) */
@media (pointer: coarse) {
  .ficha-compacto:hover:not([data-aberto="true"]):not(:focus-within) > .ficha-balao { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* etiquetas ligadas, de relance, logo abaixo da barra (só leitura; para mudar, o balão) */
.ficha-barra-ativas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ficha-barra-ativas .tag-mini { max-width: 100%; border: 1px solid; border-radius: 999px; padding: 0 7px; font-size: 10.5px; line-height: 1.6; font-weight: 600; }