/* Feature Ficha Cadastral — Camada 7 (migração incremental, 12/13, última).
   O iframe e o restante do layout permanecem com estilos inline, tal como estavam (decisão já
   registrada: não redesenhar esta tela nesta camada). Única regra nova: o efeito hover do botão
   flutuante "voltar ao topo", que era feito via onmouseover/onmouseout inline — convertido para
   :hover ao remover os atributos inline. */
.fc-scroll-top-btn:hover {
    transform: scale(1.1);
}

/* Botões flutuantes de Salvar Rascunho/Finalizar/Imprimir (acima do "voltar ao topo") — só
   aparecem quando o header de ações (#fc-toolbar-acoes) sai da área visível durante a rolagem
   (ver IntersectionObserver em features/ficha-cadastral/page.js). Começam ocultos porque, ao abrir
   o formulário, o header ainda está visível no topo. */
.fc-float-action {
    opacity: 0;
    transform: translateY(14px) scale(0.85);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.fc-float-action.fc-float-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Especificidade maior que ".fc-scroll-top-btn:hover" de propósito — sem isso, a regra de hover
   compartilhada com a seta perderia para ".fc-float-visible" no empate de especificidade (ordem de
   declaração no arquivo decide o empate, e ".fc-float-visible" vem depois). */
.fc-float-action.fc-float-visible:hover {
    transform: scale(1.1);
}

/* ---- Propostas anexadas (PDFs no Supabase Storage) ----
   Fica entre a barra de ações e o iframe. Não usa as cores inline do resto desta tela (que são
   legado preservado): segue as variáveis da marca, como o CSS mais novo do projeto. */
.fc-anexos {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
    background: #fff;
}

.fc-anexos-cabecalho {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fc-anexos-cabecalho h3 {
    margin: 0;
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-navy, #0b1e3b);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fc-anexos-cabecalho h3 i {
    color: var(--primary-orange, #ea580c);
}

.fc-anexos-enviar {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s ease;
}

.fc-anexos-enviar:hover {
    background: #ffedd5;
}

/* Enquanto o envio está em curso, ou antes de a ficha existir, o rótulo deixa de parecer clicável.
   O <input type=file> dentro dele fica desabilitado — o cursor só acompanha o estado real. */
.fc-anexos-enviar.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.fc-anexos-ajuda {
    margin: 8px 0 0;
    font-size: 12px;
    color: #64748b;
}

.fc-anexos-lista {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fc-anexo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: #f8fafc;
}

.fc-anexo-icone {
    color: #dc2626;
    font-size: 18px;
    flex-shrink: 0;
}

.fc-anexo-corpo {
    flex: 1;
    min-width: 0;
}

.fc-anexo-nome {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--primary-navy, #0b1e3b);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-anexo-nome:hover {
    text-decoration: underline;
}

.fc-anexo-meta {
    font-size: 11px;
    color: #64748b;
}

.fc-anexo-remover {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 15px;
    padding: 6px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

.fc-anexo-remover:hover {
    color: #dc2626;
    background: #fef2f2;
}

.fc-anexos-vazio {
    font-size: 13px;
    color: #94a3b8;
    padding: 6px 0;
}

/* ---- Filtros da listagem (regime, grupo, período de cliente) ----
   Regime e grupo vêm da Acessorias. Seguem o desenho do #fc-filter-status, que era inline no
   HTML legado — aqui em classe, porque são controles novos e não há legado a preservar. */
.fc-select-filtro {
    padding: 10px 15px;
    font-size: 13px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    color: var(--primary-blue, #2a3b5c);
    font-family: inherit;
    box-sizing: border-box;
    min-width: 160px;
    max-width: 230px;
}

/* Força a quebra na barra de filtros: ocupa a linha inteira sem altura própria, e o que vem
   depois começa embaixo. O `gap` do container cuida do respiro entre as duas linhas. */
.fc-filtros-quebra {
    flex-basis: 100%;
    height: 0;
    margin: 0;
}

.fc-filtro-periodo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
}

.fc-filtro-periodo label {
    font-weight: 600;
    color: var(--primary-blue, #2a3b5c);
    white-space: nowrap;
}

.fc-input-data {
    padding: 9px 12px;
    font-size: 13px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    color: var(--primary-blue, #2a3b5c);
    box-sizing: border-box;
}

.fc-btn-limpar {
    background: none;
    border: none;
    color: var(--primary-orange, #ea580c);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fc-btn-limpar:hover {
    background: #fff7ed;
}

/* Fica no fim da barra, empurrado para a direita: é resultado, não controle. */
.fc-contagem {
    margin-left: auto;
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   TAGS DE GRUPO EMPRESARIAL
   ============================================================
   O chip da listagem, a barra do formulário e o modal de tags.

   A COR DO CHIP É DERIVADA DO NOME, e não escolhida nem sorteada: 65 grupos não cabem numa paleta
   feita a mão, e sortear faria a mesma tag mudar de cor a cada carregamento — cor que muda não
   ajuda a reconhecer nada. Um hash simples do nome escolhe entre 10 matizes fixas; a mesma tag sai
   sempre da mesma cor, em qualquer tela. */

.fc-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 190px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
}

/* A ficha que carrega o CNPJ principal do grupo. Sigla escrita, ao lado do chip e não dentro dele:
   é informação sobre a ficha, não sobre o grupo, e misturada ao nome se leria como parte dele. */
.fc-tag-pc {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    background: #92400e;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    vertical-align: middle;
}

/* Sem tag não é erro, é ausência — cinza claro, sem chamar atenção. */
.fc-tag-vazia {
    color: #cbd5e1;
    font-size: 12px;
}

.fc-tag-h0 { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.fc-tag-h1 { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.fc-tag-h2 { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.fc-tag-h3 { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
.fc-tag-h4 { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
.fc-tag-h5 { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.fc-tag-h6 { background: #fefce8; color: #a16207; border-color: #fef08a; }
.fc-tag-h7 { background: #f0fdfa; color: #0f766e; border-color: #99f6e4; }
.fc-tag-h8 { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.fc-tag-h9 { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* ---- Filtro "só CNPJ PC" e botão de gerenciar tags ---- */

/* Mesmo bege da marca dentro da ficha (.fc-grupo-principal): é o mesmo campo, visto de dois
   lugares — filtrar por ele e marcá-lo têm de se reconhecer como a mesma coisa. */
.fc-check-principal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 8px;
    white-space: nowrap;
}

.fc-check-principal:hover {
    background: #fef3c7;
}

.fc-btn-tags {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 9px 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.fc-btn-tags:hover {
    background: #e0e7ff;
}

/* ---- Barra do formulário ----
   Fora do iframe: um controle novo lá dentro deslocaria o índice de todos os campos das fichas
   já salvas (o snapshot é posicional). */

.fc-grupo-barra {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
}

.fc-grupo-campo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fc-grupo-campo label {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-blue, #2a3b5c);
    white-space: nowrap;
}

.fc-grupo-campo select {
    padding: 8px 12px;
    font-size: 13px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    color: var(--primary-blue, #2a3b5c);
    min-width: 230px;
    cursor: pointer;
}

.fc-btn-tag-nova {
    background: #fff;
    color: #4338ca;
    border: 1px dashed #a5b4fc;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.fc-btn-tag-nova:hover {
    background: #eef2ff;
}

.fc-grupo-principal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
}

/* ============================================
   BOTÃO "PROPOSTAS", ao lado do CNPJ PC
   ============================================

   SEGUE O VOCABULÁRIO DA BARRA, que é fundo claro + borda da mesma família + texto saturado —
   nunca preenchimento chapado (ver .fc-anexos-enviar e .fc-btn-tag-nova). A primeira versão deste
   botão usava azul-marinho sólido com um distintivo escuro: ficava mais pesado que todo o resto e
   puxava o olho para o controle menos importante da linha.

   NEUTRO, E NÃO COLORIDO. O âmbar do CNPJ PC ao lado é uma MARCA do registro — esta ficha carrega
   o CNPJ principal do grupo — e cor ali significa alguma coisa. Este é só um controle de abrir e
   fechar; pintá-lo competiria com um sinal que precisa ser lido. Quem diz que ele expande é a
   seta, não a cor. */
.fc-btn-propostas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.fc-btn-propostas:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.fc-btn-propostas:focus-visible {
    outline: 2px solid var(--primary-orange);
    outline-offset: 2px;
}

/* Aberto: um degrau de contraste, e a seta virada. O suficiente para ligar o botão à seção que
   ele abriu, sem virar o elemento mais forte da tela. */
.fc-btn-propostas.is-aberto {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: var(--primary-blue);
}

.fc-btn-propostas-icone {
    color: #dc2626;
    font-size: 13px;
}

/* Só a seta gira; o resto do botão fica parado. */
.fc-btn-propostas-seta {
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.15s ease;
}

.fc-btn-propostas.is-aberto .fc-btn-propostas-seta {
    transform: rotate(180deg);
}

/* O contador. Existe para a seção recolhida não esconder que há proposta anexada — ver
   rotuloDePropostas() em features/ficha-cadastral/page.js.
   Cinza, e não colorido: ele INFORMA quantas há, não alerta sobre nada. */
.fc-btn-propostas-conta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.fc-btn-propostas.is-aberto .fc-btn-propostas-conta {
    background: #cbd5e1;
    color: #1e293b;
}

/* Sem grupo não há do que ser principal: a marca fica apagada até escolherem uma tag. */
.fc-grupo-principal.fc-desabilitada {
    opacity: .45;
    cursor: not-allowed;
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.fc-grupo-aviso {
    flex-basis: 100%;
    margin: 0;
    font-size: 12.5px;
    color: #92400e;
    display: none;
}

.fc-grupo-aviso.fc-visivel {
    display: block;
}

/* ---- Modal de tags ---- */

.fc-tags-nova {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.fc-tags-nova input {
    flex: 1;
    padding: 10px 14px;
    font-size: 13px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    box-sizing: border-box;
}

.fc-tags-dica {
    margin: 0 0 14px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}

.fc-tags-lista {
    max-height: 46vh;
    overflow-y: auto;
    border-top: 1px solid #e2e8f0;
}

.fc-tag-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid #f1f5f9;
}

.fc-tag-linha-nome {
    flex: 1;
    min-width: 0;
}

.fc-tag-linha-principal {
    display: block;
    font-size: 11.5px;
    color: #92400e;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Duas fichas do mesmo grupo marcadas como principal é conflito, e some se for pintado de bege. */
.fc-tag-linha-principal.fc-conflito {
    color: #b91c1c;
    font-weight: 700;
}

.fc-tag-linha-contagem {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.fc-tag-acao {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
}

.fc-tag-acao:hover {
    background: #f1f5f9;
    color: var(--primary-blue, #2a3b5c);
}

.fc-tag-acao.fc-excluir:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* ---- Ordenação pelos cabeçalhos da listagem ----
   A seta só aparece na coluna ativa. Uma seta em toda coluna competiria com o conteúdo da tabela
   por atenção, e a pergunta que o cabeçalho responde é "por onde está ordenado agora", não "quais
   dão para ordenar" — essa segunda o cursor e o realce ao passar o mouse já respondem. */

/* O cabeçalho da listagem passou ao padrão da Central (.dt-*, em css/main.css). As regras
   .fc-th-ordenavel/.fc-th-seta desta aba saíram junto com a seta em texto que elas pintavam. */
/* ============================================================
   CONTROLES NO PADRÃO DA CENTRAL (css/main.css, "COMO OS BOTÕES ENTRAM NA TELA") — 30/10/2026
   ============================================================
   Os filtros e os botões da ficha tinham cada um a sua altura, borda de 2px e raio de 8px, e os
   botões de grupo e de CNPJ PC eram lilás e bege cheios. Agora: 36px de altura, borda de 1px, raio
   de 6px, 14px de texto — os mesmos da busca e dos botões.

   O BEGE DO CNPJ PC FICA, só com o tamanho acertado: ele é uma marca do registro, e o filtro e a
   marca dentro da ficha precisam se reconhecer (ver .fc-check-principal, acima). O lilás do botão
   de grupos não significava nada — virou o secundário. */

.fc-select-filtro,
.fc-input-data,
#fc-grupo-select {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--navy);
    background-color: var(--surface);
}

.fc-select-filtro:focus,
.fc-input-data:focus,
#fc-grupo-select:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgb(74 106 156 / 0.2);
}

#tab-ficha-cadastral .search-container {
    width: 360px;
    max-width: 100%;
}

.fc-filtro-periodo label {
    font-weight: 500;
    color: var(--navy);
}

/* Os "filtros que são botão": no desenho do secundário. */
.fc-btn-tags,
.fc-btn-tag-nova,
.fc-btn-propostas {
    min-height: 36px;
    box-sizing: border-box;
    padding: 7px 12px;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--slate-700);
    font-size: 14px;
    font-weight: 500;
}

.fc-btn-tags:hover,
.fc-btn-tag-nova:hover,
.fc-btn-propostas:hover {
    background: var(--slate-50);
}

.fc-check-principal,
.fc-grupo-principal {
    min-height: 36px;
    box-sizing: border-box;
    padding: 7px 12px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
}

.fc-check-principal input,
.fc-grupo-principal input {
    accent-color: #b45309;
}

.fc-btn-tags i,
.fc-btn-tag-nova i {
    color: var(--slate-400);
}

.fc-btn-limpar {
    color: var(--brand-700);
    font-size: 14px;
    font-weight: 500;
}

.fc-btn-limpar:hover {
    background: var(--slate-100);
}

.fc-contagem {
    font-weight: 400;
    color: var(--slate-500);
}