/* ================================================================
   FolhaLab v2 — CSS do MVP (sem build; design system completo virá
   em fase posterior). Identidade: vermelho institucional + grafite.
   ================================================================ */
:root {
    --vermelho: #DA291C;
    --grafite: #1f2430;
    --cinza: #f4f4f6;
    --borda: #e3e3e8;
    --texto: #2b2b33;
    --texto-suave: #6b6b7a;
    --verde: #059669;
    --ambar: #b45309;
    --radius: .6rem;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--texto);
    background: #fafafa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Acessibilidade: skip-link e foco ───────────────────────── */
.skip-link {
    position: absolute;
    left: .6rem;
    top: -3.5rem;
    z-index: 1000;
    background: var(--vermelho);
    color: #fff;
    padding: .55rem .9rem;
    border-radius: .45rem;
    text-decoration: none;
    font-size: .9rem;
    transition: top .15s ease-in-out;
}
.skip-link:focus { top: .6rem; }

/* Foco visível e consistente em qualquer elemento interativo. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--vermelho);
    outline-offset: 2px;
}
/* O <main> recebe foco programático via skip-link, sem moldura visual. */
#conteudo:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    .skip-link { transition: none; }
}

/* ── Topo ───────────────────────────────────────────────────── */
.topo {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: .6rem 1.2rem;
    background: #fff;
    border-bottom: 1px solid var(--borda);
    flex-wrap: wrap;
}
.logo { font-size: 1.15rem; text-decoration: none; color: var(--grafite); display: inline-flex; align-items: center; gap: .45rem; }
.logo strong { color: var(--vermelho); }
/* Marca: frasco de laboratório (Erlenmeyer) em SVG inline. Mantém a proporção
   própria (22x26); um nudge vertical encaixa o gargalo na linha do nome. */
.logo-marca { flex: none; display: block; transform: translateY(-1px); }
.menu { display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; }
.menu a {
    padding: .4rem .7rem;
    border-radius: .45rem;
    text-decoration: none;
    color: #444;
    font-size: .92rem;
}
.menu a:hover { background: var(--cinza); }
.menu a.ativo,
.menu a[aria-current="page"] { color: var(--vermelho); font-weight: 600; }
/* "Outros módulos" é catálogo, não uso diário: tom mais claro que os itens
   principais, mantendo legível e clicável (ativo/hover continuam valendo). */
.menu a.menu-discreto { color: #9a9aa5; }
.menu a.menu-discreto:hover { color: #6b6b7a; }
.topo-direita { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

/* ── Menu de perfil ─────────────────────────────────────────────
   Agrupa usuário, entidade, nível de acesso e Sair atrás de um ícone
   discreto. Abre no hover/foco (CSS) e no clique/toque (JS). */
.perfil { position: relative; display: inline-flex; }
.perfil-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    color: var(--grafite);
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 50%;
    cursor: pointer;
}
.perfil-botao:hover { background: var(--cinza); }
.perfil-botao:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.perfil-menu {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 40;
    min-width: 230px;
    padding: .55rem;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: 0 12px 30px -12px rgba(20,23,31,.35);
    display: none;
}
/* Abre pelo clique no botão (JS, aria-expanded) ou pelo foco do teclado
   (focus-within, também o caminho sem JS). NÃO abre por hover passivo do mouse:
   hover-reveal disputava com o clique e, em telas de toque, fazia o primeiro
   toque "abrir o menu" em vez de ativar o gatilho. */
.perfil--aberto .perfil-menu { display: block; }
/* Fallback sem JS: o foco abre. Com JS (html.topbar-js) a abertura é só pela
   classe, para o clique no botão fechar de verdade (sem o foco reabrir). */
html:not(.topbar-js) .perfil:focus-within .perfil-menu { display: block; }
.perfil-cab {
    display: flex;
    flex-direction: column;
    padding: .25rem .4rem .55rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--borda);
}
.perfil-rotulo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-suave);
}
.perfil-nome { font-weight: 600; color: var(--grafite); font-size: .92rem; }
.perfil-username { font-size: .82rem; color: var(--texto-suave); }
/* Nome e usuário longos truncam com reticências (mesmo padrão de .perfil-valor)
   em vez de esticar o menu de perfil. Nome completo fica no atributo title. */
.perfil-nome,
.perfil-username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 230px;
}
.perfil-linha {
    display: flex;
    flex-direction: column;
    padding: .4rem;
    border-radius: .45rem;
}
.perfil-valor {
    font-size: .9rem;
    color: var(--grafite);
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 230px;
}
.perfil-linha-link { text-decoration: none; }
.perfil-linha-link:hover { background: var(--cinza); }
.perfil-linha-link:focus-visible { outline: 2px solid var(--vermelho); outline-offset: -2px; }
.perfil-sair {
    margin-top: .35rem;
    padding-top: .5rem;
    border-top: 1px solid var(--borda);
}
.perfil-sair .botao { width: 100%; }

/* ── Sininho de notificações ────────────────────────────────────
   Ao lado do perfil; mesma interação (button + aria-expanded). O contador é
   um selo discreto; a lista carrega só quando o painel abre. */
.sininho { position: relative; display: inline-flex; }
.sininho-botao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    color: var(--grafite);
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 50%;
    cursor: pointer;
}
.sininho-botao:hover { background: var(--cinza); }
.sininho-botao:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.sininho-contador {
    position: absolute;
    top: -.3rem;
    right: -.3rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .28rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--vermelho);
    border-radius: 999px;
}
.sininho-contador--zero { display: none; }
.sininho-menu {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 40;
    width: 340px;
    max-width: 92vw;
    max-height: 70vh;
    overflow-y: auto;
    padding: .55rem;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: 0 12px 30px -12px rgba(20,23,31,.35);
    display: none;
}
/* Mesma regra do perfil: abre pelo clique (JS) ou foco do teclado, nunca por
   hover passivo (que sequestrava o primeiro toque no topbar). */
.sininho--aberto .sininho-menu { display: block; }
html:not(.topbar-js) .sininho:focus-within .sininho-menu { display: block; }
.sininho-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: .25rem .4rem .55rem;
    margin-bottom: .35rem;
    border-bottom: 1px solid var(--borda);
}
.sininho-fallback { padding: .4rem; }

/* ── Itens de notificação (lista do sininho e página completa) ── */
.nfc-item {
    display: flex;
    gap: .6rem;
    justify-content: space-between;
    align-items: flex-start;
    padding: .55rem .4rem;
    border-bottom: 1px solid var(--cinza);
}
.nfc-item:last-child { border-bottom: 0; }
.nfc-item--nao-lida { background: #fcfcfd; }
.nfc-item-titulo {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .2rem;
    font-size: .92rem;
    color: var(--grafite);
}
.nfc-ponto {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--vermelho);
    flex: 0 0 auto;
}
.nfc-item-texto { margin: 0 0 .25rem; font-size: .85rem; color: var(--texto-suave); line-height: 1.45; }
.nfc-item-acoes { display: flex; flex-direction: column; gap: .3rem; flex: 0 0 auto; }
.nfc-item-acoes .botao { font-size: .78rem; padding: .3rem .6rem; white-space: nowrap; }
.nfc-trecho { display: block; }
.nfc-pagina .nfc-item { padding: .8rem .2rem; }

/* Em telas estreitas o topo empilha: logo, menu (largura total) e perfil. */
@media (max-width: 640px) {
    .topo { gap: .55rem .8rem; }
    .menu { order: 3; width: 100%; }
    .topo-direita { width: 100%; justify-content: flex-end; }
    .perfil-menu { right: 0; }
}

/* ── Conteúdo ───────────────────────────────────────────────── */
.conteudo { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 1.6rem 1.2rem; }
.rodape { text-align: center; color: #aaa; font-size: .8rem; padding: 1rem; }

/* Títulos de página quebram nomes longos (entidade/usuário) em vez de
   esticar o layout — quebra é aceitável num título, ao contrário do menu. */
h1 { font-size: 1.45rem; margin: 0 0 .35rem; color: var(--grafite); overflow-wrap: anywhere; }
.subtitulo { color: var(--texto-suave); margin: 0 0 1.4rem; font-size: .95rem; }

/* ── Cartões / grades ───────────────────────────────────────── */
.cartao {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.2rem;
}
.cartao h2 { font-size: 1.02rem; margin: 0 0 .8rem; color: var(--grafite); }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.cabecalho-secao {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}
.cabecalho-secao h2 { margin-bottom: .2rem; }
.texto-apoio { color: var(--texto-suave); font-size: .84rem; margin: 0; }
.link-acao { color: var(--vermelho); font-weight: 600; text-decoration: none; }
.link-acao:hover { text-decoration: underline; }

/* ── Alertas ────────────────────────────────────────────────── */
.alerta {
    padding: .7rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: .92rem;
    border: 1px solid var(--borda);
}
.alerta.sucesso { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alerta.aviso { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alerta.erro { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ── Formulários ────────────────────────────────────────────── */
label { display: block; font-size: .88rem; margin-bottom: .9rem; color: var(--grafite); }
label > span { display: block; margin-bottom: .25rem; font-weight: 600; }
input[type="text"], input[type="password"], input[type="email"], input[type="file"], input[type="date"], select {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--borda);
    border-radius: .45rem;
    font: inherit;
    background: #fff;
}
/* Campo travado: valor apurado pelo sistema (ex.: previdência do IRRF = INSS
   calculado). Fundo neutro + cadeado discreto deixam claro que não se edita. */
.campo-travado {
    background: var(--cinza);
    color: var(--grafite);
    cursor: not-allowed;
    font-variant-numeric: tabular-nums;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236b6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    padding-right: 1.9rem;
}
.erro-campo { color: var(--vermelho); font-size: .82rem; margin-top: .25rem; display: block; }
.rotulo-campo { display: block; margin-bottom: .25rem; font-weight: 600; font-size: .88rem; color: var(--grafite); }
.form-grid, .filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .9rem 1rem;
    align-items: end;
}
.filtros {
    padding: .85rem;
    background: var(--cinza);
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.grupo-checkboxes { margin-bottom: .9rem; }
.checkbox-linha {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .35rem 0;
}
.checkbox-linha input { width: auto; }
.linha-acoes {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}
.bloco-formulario {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borda);
}
.form-inline { margin-top: .75rem; }

.botao {
    display: inline-block;
    background: var(--vermelho);
    color: #fff;
    border: 0;
    border-radius: .5rem;
    padding: .55rem 1.1rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.botao:hover { filter: brightness(.94); }
.botao.discreto { background: transparent; color: #555; border: 1px solid var(--borda); font-weight: 500; }
.botao.discreto:hover { background: var(--cinza); filter: none; }

/* ── Tabelas ────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Totalizador consolidado (relatório por seção) ──────────── */
.tz-consolidado { margin-top: .3rem; }
.tz-consolidado td { padding: .55rem .7rem; }
.tz-secao td {
    background: var(--cinza);
    color: var(--grafite);
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--borda);
}
.tz-secao td:first-child { border-left: 3px solid var(--vermelho); }
.tz-total td { font-weight: 700; color: var(--grafite); border-top: 2px solid var(--grafite); }
.tz-total td.num { font-size: .98rem; }
.tz-total td.num.tz-diferenca-alerta { color: var(--vermelho); }
.tz-aberto { color: var(--ambar); font-weight: 600; font-size: .82rem; }
.tz-aviso { color: var(--texto-suave); font-size: .88rem; line-height: 1.5; }
.tz-rodape { margin: .9rem 0 0; }

/* ── Selos de situação ──────────────────────────────────────── */
.selo {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 2rem;
    white-space: nowrap;
}
.selo.ok { background: #ecfdf5; color: var(--verde); }
.selo.atencao { background: #fffbeb; color: var(--ambar); }
.selo.problema { background: #fef2f2; color: var(--vermelho); }
.selo.neutro { background: var(--cinza); color: #666; }

/* ── Tela de login (sem menu) ───────────────────────────────── */
.caixa-login {
    max-width: 400px;
    margin: 8vh auto 0;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: 1.8rem;
}
.caixa-login .logo { display: block; text-align: center; font-size: 1.5rem; margin-bottom: 1.2rem; }

/* ── Memória de cálculo ─────────────────────────────────────── */
details.memoria { margin-top: .3rem; }
details.memoria summary { cursor: pointer; color: var(--vermelho); font-size: .82rem; font-weight: 600; }
.memoria-bloco { background: var(--cinza); border-radius: .45rem; padding: .7rem .9rem; margin-top: .5rem; font-size: .85rem; }
.memoria-bloco h4 { margin: .6rem 0 .3rem; font-size: .8rem; color: var(--grafite); }
.memoria-bloco table { font-size: .82rem; background: #fff; border-radius: .35rem; }
/* Bloco patronal da simulação por base: complementar e discreto, separado do
   segurado (que é o destaque) por uma linha tênue e cor mais suave. */
.memoria-patronal { margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid var(--borda); }
.memoria-patronal h5 { margin: 0 0 .4rem; font-size: .78rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }

.acoes-rapidas { display: flex; gap: .7rem; flex-wrap: wrap; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: .45rem 0; border-bottom: 1px solid var(--cinza); font-size: .9rem; }
/* Nome em destaque (entidade/usuário) trunca com reticências como em
   .perfil-valor, para não estourar o cartão da lista. */
.lista-simples strong {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.vazio { color: var(--texto-suave); font-size: .9rem; padding: .4rem 0; }
.paginacao { margin-top: 1rem; }
.pag { display: flex; flex-direction: column; gap: .5rem; }
.pag-resumo { color: var(--texto-suave); font-size: .82rem; margin: 0; }
.pag-lista { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.pag-item a, .pag-item > span { display: inline-flex; align-items: center; gap: .15rem; min-width: 2rem; justify-content: center; padding: .3rem .55rem; font-size: .85rem; line-height: 1; border: 1px solid var(--borda); border-radius: var(--radius); text-decoration: none; color: var(--texto); background: #fff; }
.pag-item a:hover { background: var(--cinza); }
.pag-item--atual > span { background: var(--grafite); border-color: var(--grafite); color: #fff; font-weight: 600; }
.pag-item--inerte > span { color: var(--texto-suave); background: var(--cinza); cursor: default; }
.pag-reticencias > span { border: 0; background: transparent; min-width: 0; padding: .3rem .2rem; }
.metricas .cartao { margin-bottom: 0; }
.metricas span { display: block; color: var(--texto-suave); font-size: .82rem; margin-bottom: .25rem; }
.metricas strong { font-size: 1.45rem; color: var(--grafite); }
.bloco-acoes { margin: .5rem 0 1.2rem; }
.mini-form { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: .2rem 0; }
.mini-form.coluna { align-items: stretch; flex-direction: column; }
.mini-form input[type="text"], .mini-form input[type="email"], .mini-form input[type="date"], .mini-form select { width: auto; min-width: 130px; }
.linha-resumo { margin: .4rem 0 .8rem; font-size: .9rem; }
/* Trunca nome inline em espaços apertados (botões/formulários de tabela).
   Mesmo padrão de reticências de .perfil-valor; nome completo fica no title. */
.nome-trunc {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ================================================================
   Painel do cliente — identidade FolhaLab.
   Motivos próprios: o "losango" vermelho como marca recorrente, o
   bloco grafite de Próximo passo com "folhas empilhadas" e a cor
   guiada pelo ESTADO (não pelo módulo). Sem barra de topo colorida.
   ================================================================ */
.pnl-kicker {
    display: inline-block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vermelho);
}
.pnl-kicker-claro { color: #ffb4ac; }

/* 1) Contexto da entidade ------------------------------------------------ */
.pnl-contexto {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.1rem;
}
.pnl-contexto-nome {
    font-size: 1.55rem;
    line-height: 1.15;
    margin: .25rem 0 .35rem;
    color: var(--grafite);
    letter-spacing: -.01em;
}
/* Assinatura: traço curto vermelho sob o nome (não é barra de topo). */
.pnl-contexto-nome::after {
    content: '';
    display: block;
    width: 38px;
    height: 3px;
    margin-top: .55rem;
    border-radius: 3px;
    background: var(--vermelho);
}
.pnl-contexto-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.pnl-chip {
    font-size: .78rem;
    font-weight: 600;
    color: var(--grafite);
    background: var(--cinza);
    border: 1px solid var(--borda);
    border-radius: 2rem;
    padding: .22rem .7rem;
}
.pnl-chip-papel { text-transform: capitalize; color: var(--texto-suave); }

/* 2) Próximo passo (bloco grafite com folhas empilhadas) ----------------- */
.pnl-proximo {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 140% at 100% 0, #2a3142 0%, var(--grafite) 55%);
    color: #fff;
    border-radius: 16px;
    padding: 1.4rem 1.5rem 1.5rem;
    margin-bottom: 1.8rem;
}
.pnl-proximo-titulo { font-size: 1.25rem; margin: .35rem 0 .4rem; color: #fff; }
.pnl-proximo-desc { color: #c9ccd6; font-size: .95rem; line-height: 1.55; margin: 0 0 1.1rem; max-width: 56ch; }
.pnl-proximo-acao { box-shadow: 0 6px 18px -6px rgba(218,41,28,.6); }
/* "Folhas empilhadas": três retângulos girados, o de baixo na cor da marca. */
.pnl-proximo-sheets {
    position: absolute;
    top: 16px;
    right: 26px;
    width: 56px;
    height: 70px;
    border-radius: 8px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    transform: rotate(9deg);
    pointer-events: none;
}
.pnl-proximo-sheets::before,
.pnl-proximo-sheets::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
}
.pnl-proximo-sheets::before {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    transform: translate(-9px, 7px) rotate(-7deg);
}
.pnl-proximo-sheets::after {
    background: rgba(218,41,28,.22);
    border: 1px solid rgba(218,41,28,.45);
    transform: translate(-17px, 13px) rotate(-13deg);
}

/* 3-5) Seções e cartões de módulo --------------------------------------- */
.pnl-secao { margin-bottom: 1.6rem; }
.pnl-secao-titulo {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texto-suave);
    margin: 0 0 .85rem;
}
/* Losango vermelho: marca recorrente do FolhaLab. */
.pnl-lozango {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--vermelho);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ── Ícone de informação (x-info-dica) ──────────────────────────
   Losango discreto com "i"; a instrução só aparece ao passar o mouse
   (desktop) ou tocar (mobile). O gatilho é um <button> real. */
.info-dica { position: relative; display: inline-flex; vertical-align: middle; }
.info-dica-gatilho {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    margin: 0;
    line-height: 0;
    color: var(--vermelho);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: help;
}
.info-dica-gatilho:hover { opacity: .82; }
.info-dica-gatilho:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.info-dica-losango { display: inline-flex; }
.info-dica-balao {
    position: absolute;
    top: calc(100% + .4rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    width: max-content;
    max-width: 280px;
    padding: .5rem .65rem;
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    color: #fff;
    background: var(--grafite);
    border-radius: 8px;
    box-shadow: 0 12px 30px -12px rgba(20,23,31,.45);
    display: none;
}
/* Aparece com JS (aria-expanded/--aberto) ou sem JS (hover/foco). */
.info-dica:hover .info-dica-balao,
.info-dica:focus-within .info-dica-balao,
.info-dica--aberto .info-dica-balao { display: block; }
@media (max-width: 640px) {
    /* Em telas estreitas, ancorar à esquerda evita corte na borda direita. */
    .info-dica-balao { left: 0; transform: none; max-width: min(280px, 80vw); }
}
.pnl-secao-contagem {
    font-size: .72rem;
    font-weight: 700;
    color: var(--texto-suave);
    background: var(--cinza);
    border-radius: 2rem;
    padding: .05rem .5rem;
    letter-spacing: 0;
}
.pnl-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: .9rem;
}
.pnl-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 1.1rem 1.15rem 1rem;
    box-shadow: 0 1px 2px rgba(20,23,31,.04);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pnl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -14px rgba(20,23,31,.28);
    border-color: #d4d4dc;
}
/* Cartões sem ação (em desenvolvimento / não vigente) ficam mais quietos. */
.pnl-card--em_desenvolvimento,
.pnl-card--nao_vigente { background: #fcfcfd; }
.pnl-card-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .5rem;
    /* Selo é etiqueta nowrap/flex-shrink:0. Em card estreito, um selo longo
       (ex. "Resultado desatualizado") desce para a própria linha em vez de
       vazar a borda ou cobrir o título; selos curtos seguem no canto. */
    flex-wrap: wrap;
}
/* min-width:0 deixa o título ceder em vez de empurrar o selo para fora da borda;
   junto com o flex-wrap do topo, o título fica inteiro e o selo nunca sobrepõe. */
.pnl-card-nome { font-size: 1.02rem; margin: 0; color: var(--grafite); min-width: 0; }
.pnl-card-desc { font-size: .88rem; color: var(--texto-suave); line-height: 1.5; margin: 0 0 1rem; flex: 1; }
.pnl-card-rodape { margin-top: auto; }
.pnl-card-acao { font-size: .85rem; padding: .45rem .9rem; }
.pnl-card-nota { font-size: .82rem; color: var(--texto-suave); font-style: italic; }

/* Tag de estado: canto inferior esquerdo recortado (etiqueta de dossiê). */
.pnl-estado {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .25rem .6rem .25rem .55rem;
    border-radius: 4px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    white-space: nowrap;
}
.pnl-estado--pronto { background: #ecfdf5; color: var(--verde); }
.pnl-estado--requer_config { background: #fffbeb; color: var(--ambar); }
.pnl-estado--em_desenvolvimento { background: #eef0f4; color: #4b5160; }
.pnl-estado--nao_vigente { background: #f4f4f6; color: #8a8a96; }
/* Estados extras do hub de conferências — mesma lógica: cor pelo ESTADO. */
.pnl-estado--sem_folha_ativa { background: #fffbeb; color: var(--ambar); }
.pnl-estado--falta_conferir { background: #fffbeb; color: var(--ambar); }
.pnl-estado--obsoleta { background: #fffbeb; color: var(--ambar); }
.pnl-estado--processando { background: #eef0f4; color: #4b5160; }
.pnl-estado--falha { background: #fef2f2; color: var(--vermelho); }
.pnl-estado--com_divergencias { background: #fef2f2; color: var(--vermelho); }
.pnl-estado--ultima_concluida { background: #ecfdf5; color: var(--verde); }
.pnl-card--falha,
.pnl-card--com_divergencias { background: #fffdfd; }

@media (max-width: 640px) {
    .pnl-proximo-sheets { display: none; }
    .pnl-contexto-nome { font-size: 1.35rem; }
}

/* ================================================================
   Mesa de trabalho — dossiê operacional. Reaproveita o vocabulário do
   painel (losango, etiqueta recortada, grafite/vermelho) sem virar um
   dashboard de cards idênticos: contexto em duas colunas, ferramentas
   como faixa de atalhos editoriais e atividade como linha do tempo.
   ================================================================ */
.mesa-contexto {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.4rem;
}
.mesa-contexto-corpo { min-width: 14rem; flex: 1 1 16rem; }
/* Fatos operacionais à direita: lista de definição compacta, sem cards. */
.mesa-contexto-fatos {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 0;
    padding-left: 1.4rem;
    border-left: 2px solid var(--borda);
}
.mesa-fato { display: flex; flex-direction: column; gap: .15rem; }
.mesa-fato dt {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texto-suave);
}
.mesa-fato dd { margin: 0; font-size: .95rem; color: var(--grafite); font-weight: 600; }

/* Ferramentas ativas: faixa de atalhos (não grade de cards grandes).
   Grade responsiva explícita: 1 coluna no mobile, 2 em larguras
   intermediárias e 4 só quando há largura real — sem rolagem horizontal
   (os cards são 1fr e nunca estouram o contêiner). */
.mesa-ferramentas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
}
@media (min-width: 600px) {
    .mesa-ferramentas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .mesa-ferramentas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mesa-ferramenta {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: .85rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0; /* permite que o conteúdo encolha sem forçar overflow */
}
/* Selo acima do título (etiqueta de dossiê): mantém largura própria e nunca
   se sobrepõe ao título, que pode ocupar até duas linhas livremente. */
.mesa-ferramenta-cab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
}
.mesa-ferramenta-cab .pnl-estado { align-self: flex-start; }
.mesa-ferramenta-nome {
    margin: 0;
    font-weight: 700;
    color: var(--grafite);
    font-size: .98rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
/* Ação ancorada na base → alturas coerentes entre cards da mesma linha. */
.mesa-ferramenta-acao,
.mesa-ferramenta-nota { margin-top: auto; }
.mesa-ferramenta-acao { font-size: .85rem; }
.mesa-ferramenta-nota { font-size: .8rem; color: var(--texto-suave); font-style: italic; }

/* Resumo + atividade: duas colunas no desktop, empilhadas no mobile. */
.mesa-grade-baixa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.4rem;
    align-items: start;
}
.mesa-coluna { margin-bottom: 0; }

/* Indicadores do resumo: linhas de ficha, sem números coloridos gigantes. */
.mesa-indicadores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.mesa-indicador {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .2rem .8rem;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: .65rem .85rem;
}
.mesa-indicador-rotulo { font-size: .82rem; color: var(--texto-suave); }
.mesa-indicador-valor { font-size: 1.05rem; font-weight: 800; color: var(--grafite); text-align: right; }
.mesa-indicador-nota { font-size: .78rem; color: var(--texto-suave); grid-column: 1 / -1; }
.mesa-indicador-link { font-size: .8rem; grid-column: 1 / -1; }

/* Atividade recente: linha do tempo vertical com marca-losango. */
.mesa-timeline { list-style: none; margin: 0; padding: 0; }
.mesa-timeline-item {
    position: relative;
    display: flex;
    gap: .7rem;
    padding: 0 0 .85rem 0;
}
.mesa-timeline-item::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 14px;
    bottom: -2px;
    width: 1px;
    background: var(--borda);
}
.mesa-timeline-item:last-child::before { display: none; }
.mesa-timeline-marca {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-radius: 2px;
    background: var(--vermelho);
    transform: rotate(45deg);
}
.mesa-timeline-corpo { display: flex; flex-direction: column; gap: .1rem; }
.mesa-timeline-texto { font-size: .92rem; color: var(--grafite); }
.mesa-timeline-texto a { color: var(--grafite); font-weight: 600; text-decoration: none; }
.mesa-timeline-texto a:hover { color: var(--vermelho); text-decoration: underline; }
.mesa-timeline-quando { font-size: .76rem; color: var(--texto-suave); }

@media (max-width: 820px) {
    .mesa-grade-baixa { grid-template-columns: 1fr; }
    .mesa-contexto-fatos {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--borda);
        padding-top: 1rem;
        width: 100%;
    }
}

/* ================================================================
   Mesa de trabalho — redesign autoexplicativo (handoff 2026-06):
   seletor de competência, stepper do mês, grade de conferências,
   cartão escuro de Utilitários e atalho "Amplie sua mesa". Reaproveita
   os tokens da marca (vermelho/grafite/verde) e o losango/etiqueta.
   ================================================================ */

/* Seletor de competência (regra das 2 folhas vivas) -------------------- */
.mesa-comp { min-width: 12rem; text-align: right; }
.mesa-comp-label {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texto-suave);
    margin-bottom: .45rem;
}
.mesa-comp-botoes { display: inline-flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.mesa-comp-btn {
    font-size: .85rem;
    font-weight: 800;
    color: var(--texto-suave);
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: .4rem .7rem;
    text-decoration: none;
    transition: border-color .14s, color .14s;
}
.mesa-comp-btn:hover { border-color: #c9c9d2; color: var(--grafite); }
.mesa-comp-btn.is-sel { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.mesa-comp-nota { font-size: .76rem; color: var(--texto-suave); margin: .55rem 0 0; }

/* Seu fluxo deste mês: stepper de 3 passos ----------------------------- */
.mesa-fluxo {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 1.2rem 1.4rem 1.3rem;
    margin-bottom: 1.8rem;
}
.mesa-fluxo-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.mesa-setup { font-size: .82rem; font-weight: 600; text-decoration: none; }
.mesa-setup--ok { color: var(--verde); }
.mesa-setup--pendente { color: var(--vermelho); }

.mesa-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}
.mesa-passo { padding: 0 1.5rem; }
.mesa-passo + .mesa-passo { border-left: 1px dashed var(--borda); }
.mesa-passo:first-child { padding-left: 0; }
.mesa-passo:last-child { padding-right: 0; }
.mesa-passo-topo { display: flex; align-items: center; gap: 0; margin-bottom: .8rem; }
.mesa-passo-bolha {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 800;
}
.mesa-passo-linha { flex: 1; height: 2px; margin-left: 10px; border-radius: 2px; }
.mesa-passo-linha--ok { background: rgba(5,150,105,.4); }
.mesa-passo-linha--neutro { background: var(--borda); }
.mesa-passo-kicker {
    display: block;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .3rem;
    color: var(--texto-suave);
}
.mesa-passo-kicker--ativo { color: var(--vermelho); }
.mesa-passo-titulo { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--grafite); }
.mesa-passo-sub { margin: 0; font-size: .85rem; color: var(--texto-suave); line-height: 1.5; }
.mesa-passo-acao { display: inline-block; margin-top: .6rem; }

.mesa-passo--concluido .mesa-passo-bolha { background: #ecfdf5; color: var(--verde); }
.mesa-passo--andamento .mesa-passo-bolha { background: var(--vermelho); color: #fff; }
.mesa-passo--aguardando .mesa-passo-bolha { background: var(--cinza); color: #a3a3af; }
.mesa-passo--aguardando .mesa-passo-titulo { color: #a3a3af; }

/* Ferramentas ativas: grade de conferências ---------------------------- */
.mesa-conf-grade {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: .9rem;
}
.mesa-conf-card {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
    box-shadow: 0 1px 2px rgba(20,23,31,.04);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mesa-conf-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -14px rgba(20,23,31,.28);
    border-color: #d4d4dc;
}
.mesa-conf-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.mesa-conf-nome { margin: 0; font-size: 1.05rem; color: var(--grafite); line-height: 1.25; }
.mesa-conf-detalhe { margin: 0; font-size: .85rem; color: var(--texto-suave); line-height: 1.5; flex: 1; }
.mesa-conf-divisor { height: 1px; background: #f0f0f3; }
.mesa-conf-acao { font-size: .88rem; font-weight: 700; }
.mesa-conf-nota { font-size: .82rem; color: var(--texto-suave); font-style: italic; }

/* Cartão escuro de Utilitários ----------------------------------------- */
.mesa-util {
    background: var(--grafite);
    border-radius: 16px;
    padding: 1.3rem 1.4rem;
    color: #fff;
}
.mesa-util-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.mesa-util-titulo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.mesa-util-todos { color: #ff8980; font-size: .82rem; font-weight: 700; text-decoration: none; }
.mesa-util-todos:hover { color: #fff; }
.mesa-util-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.mesa-util-sub {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 11px;
    padding: .9rem 1rem;
    text-decoration: none;
    transition: background .14s;
}
.mesa-util-sub:hover { background: rgba(255,255,255,.14); }
.mesa-util-sub-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: #fff;
    font-size: .98rem;
}
.mesa-util-sub-topo span { color: var(--vermelho); }
.mesa-util-sub-desc { font-size: .8rem; color: #c3c8d4; line-height: 1.5; }

/* Amplie sua mesa: atalho discreto para Outros módulos ----------------- */
.mesa-amplie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.4rem;
    padding: .95rem 1.2rem;
    background: #fff;
    border: 1px dashed #d4d0c6;
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .14s, background .14s;
}
.mesa-amplie:hover { border-color: var(--vermelho); background: #fffaf9; }
.mesa-amplie-texto { display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; color: var(--texto-suave); }
.mesa-amplie-texto strong { color: var(--grafite); font-size: .92rem; }
.mesa-amplie-seta { color: var(--vermelho); font-weight: 800; flex-shrink: 0; }

@media (max-width: 820px) {
    .mesa-comp { text-align: left; min-width: 0; width: 100%; }
    .mesa-comp-botoes { justify-content: flex-start; }
    .mesa-stepper { grid-template-columns: 1fr; }
    .mesa-passo { padding: 1rem 0; }
    .mesa-passo + .mesa-passo { border-left: 0; border-top: 1px dashed var(--borda); }
    .mesa-passo-linha { display: none; }
    .mesa-util-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Configuração e Prontidão da entidade — mesma identidade do painel:
   losango vermelho, etiqueta de dossiê com canto recortado e cor
   guiada pelo ESTADO de cada passo (não pelo módulo).
   ================================================================ */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Título de cartão com o losango da marca. */
.cfg-titulo {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.02rem;
    margin: 0 0 .2rem;
    color: var(--grafite);
}
.cfg-subtitulo { margin: 0 0 1rem; }

/* Etiqueta de estado (canto inferior esquerdo recortado, igual ao painel). */
.cfg-estado {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .25rem .6rem .25rem .55rem;
    border-radius: 4px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    white-space: nowrap;
}
.cfg-estado--concluido { background: #ecfdf5; color: var(--verde); }
.cfg-estado--pendente { background: #fffbeb; color: var(--ambar); }
.cfg-estado--aguardando { background: #eef0f4; color: #4b5160; }
.cfg-estado--indisponivel { background: #f4f4f6; color: #8a8a96; }

/* 1) Situação da entidade ------------------------------------------------ */
.cfg-situacao-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .35rem;
}
.cfg-situacao-nome {
    font-size: 1.4rem;
    line-height: 1.15;
    margin: 0;
    color: var(--grafite);
    letter-spacing: -.01em;
}
.cfg-situacao-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.cfg-situacao-desc { color: var(--texto-suave); font-size: .92rem; margin: .85rem 0 0; max-width: 64ch; }
.cfg-somente-leitura { margin-top: 1rem; }

/* 2) Checklist de prontidão --------------------------------------------- */
.cfg-checklist { list-style: none; margin: 0; padding: 0; }
.cfg-check {
    display: flex;
    gap: .85rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--borda);
}
.cfg-check:last-child { border-bottom: 0; padding-bottom: .2rem; }
/* Marcador circular colorido pelo estado — sinal visual rápido de progresso. */
.cfg-check-marca {
    flex-shrink: 0;
    width: 14px; height: 14px;
    margin-top: .2rem;
    border-radius: 50%;
    border: 2px solid var(--borda);
    background: #fff;
}
.cfg-check--concluido .cfg-check-marca { background: var(--verde); border-color: var(--verde); }
.cfg-check--pendente .cfg-check-marca { background: #fff; border-color: var(--ambar); }
.cfg-check--aguardando .cfg-check-marca { background: #fff; border-color: #c4c7d0; }
.cfg-check--indisponivel .cfg-check-marca { background: #f0f0f3; border-color: #d6d6dd; }
.cfg-check-corpo { flex: 1; min-width: 0; }
.cfg-check-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .25rem;
}
.cfg-check-titulo { font-size: .96rem; margin: 0; color: var(--grafite); }
.cfg-check-desc { font-size: .88rem; color: var(--texto-suave); line-height: 1.5; margin: 0; }
.cfg-check-acao { margin-top: .6rem; font-size: .82rem; padding: .4rem .85rem; }
.cfg-check-nota { font-size: .82rem; color: var(--texto-suave); font-style: italic; margin: .5rem 0 0; }

/* Subtítulo dentro de um cartão (ex.: blocos de parâmetros patronais). */
.cfg-subtitulo { font-size: .98rem; margin: 1.3rem 0 .5rem; }
.cfg-subtitulo:first-of-type { margin-top: .4rem; }

/* Conferências defasadas: pendência de reconferência após editar parâmetro. */
.cfg-defasadas-lista { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .6rem; }
.cfg-defasada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1rem;
    flex-wrap: wrap;
    border: 1px solid var(--borda);
    border-left: 3px solid var(--vermelho);
    border-radius: 10px;
    padding: .7rem .9rem;
}
.cfg-defasada-corpo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cfg-defasada-acoes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cfg-defasada-acoes form { margin: 0; }

/* Aviso de defasagem na tela da conferência: texto + ação lado a lado. */
.cfg-aviso-defasada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1rem;
    flex-wrap: wrap;
}
.cfg-aviso-defasada form { margin: 0; flex: none; }

/* 3) Tabela de eventos --------------------------------------------------- */
.cfg-tabela-rolagem { overflow-x: auto; }
.cfg-tabela-eventos { min-width: 560px; }
/* Lista de eventos: sem overflow (o kebab de ações não pode ser cortado) e
   fluida (a tabela quebra/reflui em vez de rolar). */
.cfg-eventos-lista { overflow: visible; }
.cfg-tabela-eventos--fluida { min-width: 0; }
.cfg-tabela-eventos td { vertical-align: middle; }
.cfg-col-codigo { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--grafite); white-space: nowrap; }
.cfg-col-acao { text-align: right; white-space: nowrap; }
.cfg-vazio { padding: .9rem 0; }

/* Grupo de selos "encargo: código" — substitui colunas largas por badges
   compactos, um por encargo, que ficam legíveis mesmo lado a lado. */
.cfg-incid-grupo { display: flex; flex-wrap: wrap; gap: .3rem; }
.cfg-encargos .selo { font-size: .82rem; padding: .32rem .75rem; }

/* ================================================================
   Duas janelas de trabalho (Prontidão / Eventos) como tabs WAI-ARIA.
   Não são "abas de navegador" nem botões genéricos: são duas FICHAS de
   dossiê (kicker recortado + título + descritor). A ficha ativa vira
   grafite — o estado não depende só de cor (fundo, peso e o losango
   vermelho mudam juntos). Sem stepper, sem underline genérico, sem
   barra lateral colorida.
   ================================================================ */
.cfg-abas {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0 0 1.4rem;
}
.cfg-aba {
    position: relative;
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .85rem 1.05rem .9rem;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 12px;
    color: var(--texto-suave);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.cfg-aba:hover { border-color: #c7c7d2; transform: translateY(-1px); }
.cfg-aba-kicker {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vermelho);
}
.cfg-aba-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--grafite);
    line-height: 1.2;
}
.cfg-aba-desc { font-size: .82rem; color: var(--texto-suave); }
.cfg-aba-contagem {
    font-size: .72rem;
    font-weight: 700;
    color: var(--texto-suave);
    background: var(--cinza);
    border: 1px solid var(--borda);
    border-radius: 2rem;
    padding: .02rem .5rem;
}
/* Ficha ativa: vira o bloco grafite (mesma cor do "Próximo passo" do painel).
   aria-selected é a fonte da verdade do estado, espelhada no visual. */
.cfg-aba[aria-selected="true"] {
    background: radial-gradient(140% 160% at 100% 0, #2a3142 0%, var(--grafite) 60%);
    border-color: var(--grafite);
    color: #fff;
}
.cfg-aba[aria-selected="true"] .cfg-aba-titulo { color: #fff; }
.cfg-aba[aria-selected="true"] .cfg-aba-kicker { color: #ffb4ac; }
.cfg-aba[aria-selected="true"] .cfg-aba-desc { color: #c9ccd6; }
.cfg-aba[aria-selected="true"] .cfg-aba-contagem {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.28);
    color: #fff;
}
/* Marca de ficha ativa: traço curto vermelho no topo (recorte), não barra. */
.cfg-aba[aria-selected="true"]::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 1.05rem;
    width: 34px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--vermelho);
}
.cfg-aba:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.cfg-painel:focus { outline: none; }
.cfg-painel:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 4px; }
.cfg-painel[hidden] { display: none; }

@media (max-width: 640px) {
    .cfg-situacao-topo { flex-direction: column; }
    .cfg-situacao-nome { font-size: 1.25rem; }
    .cfg-aba { flex-basis: 100%; }
}

/* ================================================================
   Formulário de evento — situação geral das incidências e edição por
   encargo em accordion nativo (<details>), sem dependência de JS.
   ================================================================ */
.cfg-resumo-incid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.cfg-resumo-incid .selo { font-size: .78rem; padding: .3rem .7rem; }

/* Grade de incidências do cadastro unificado: um campo por encargo, lado a
   lado, sem virar um card repetitivo para cada um. */
.cfg-incid-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.2rem;
    margin-top: .9rem;
}
.cfg-incid-campo { display: block; margin: 0; }
.cfg-incid-rotulo {
    display: block;
    margin-bottom: .25rem;
    font-weight: 600;
    font-size: .88rem;
    color: var(--grafite);
}
.cfg-incid-campo small { display: block; margin-top: .3rem; line-height: 1.4; }

/* Linha de revisões dentro de uma competência (histórico do evento). */
.cfg-revisoes-linha td { background: #fbfbfc; }
.cfg-revisoes-linha .link-acao { margin-left: .6rem; }

/* Comparação entre versões: só os campos alterados, anterior → novo. */
.cfg-comparacao th[scope="row"] { text-align: left; font-weight: 600; color: var(--grafite); }
.cfg-comp-de { color: var(--texto-suave); }
.cfg-comp-para { color: var(--grafite); font-weight: 600; }

/* Accordion nativo: <summary> com a mesma etiqueta de dossiê do resto da
   tela, para não introduzir um padrão visual novo. */
.cfg-encargo { border: 1px solid var(--borda); border-radius: var(--radius); padding: 0; }
.cfg-encargo + .cfg-encargo { margin-top: .9rem; }
.cfg-encargo > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .9rem 1.1rem;
}
.cfg-encargo > summary::-webkit-details-marker { display: none; }
.cfg-encargo > summary::before {
    content: '';
    width: 8px; height: 8px;
    flex-shrink: 0;
    margin-right: .2rem;
    border-radius: 2px;
    background: var(--vermelho);
    transform: rotate(45deg);
}
.cfg-encargo-titulo { display: flex; align-items: center; gap: .6rem; font-size: 1rem; color: var(--grafite); font-weight: 700; }
.cfg-encargo-corpo { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--borda); }
.cfg-encargo-explicacao { color: var(--texto-suave); font-size: .88rem; line-height: 1.5; margin: .9rem 0; }
.cfg-encargo-aviso {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: .45rem;
    padding: .6rem .8rem;
    font-size: .85rem;
    margin: .8rem 0;
}

/* ================================================================
   Fluxo guiado de importação da folha — dossiê de competência em três
   movimentos (Preparar / Enviar e processar / Conferir). Motivos próprios:
   etiqueta-ordinal de dossiê com canto recortado, bandeja de documento e o
   bloco grafite de folhas empilhadas reaproveitado para o próximo passo.
   ================================================================ */

/* Movimentos: faixa-cabeçalho com etiqueta-ordinal recortada — leitura de
   dossiê/etapas de conferência, nunca stepper de círculos numerados. */
.flh-mov { margin-bottom: 1.7rem; }
.flh-mov-cab {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-bottom: .7rem;
    margin-bottom: 1.05rem;
    border-bottom: 1px solid var(--borda);
}
.flh-mov-ordinal {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    background: var(--grafite);
    padding: .3rem .72rem .3rem .62rem;
    border-radius: 4px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    white-space: nowrap;
}
.flh-mov-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.12rem;
    margin: 0;
    color: var(--grafite);
}
.flh-mov > .cartao:last-child,
.flh-mov > .pnl-proximo:last-child { margin-bottom: 0; }

/* Importar eventos: as DUAS etapas (Preparar | Enviar e pré-visualizar) lado a
   lado, como passos de um fluxo. Sao exatamente duas; nao ha etapa III. Em telas
   estreitas, empilham. */
.ev-importar-fluxo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}
.ev-importar-fluxo .flh-mov { margin-bottom: 0; }
.ev-importar-fluxo .flh-orientacoes { grid-template-columns: 1fr; }
.ev-importar-fecho { margin: 1rem 0 0; }
@media (max-width: 880px) {
    .ev-importar-fluxo { grid-template-columns: 1fr; }
}

/* Navegação em etapas (fichas de dossiê) -------------------------------- */
/* Tablist horizontal: cada etapa é uma ficha recortada, não um stepper de
   bolinhas. A ficha ativa encosta no conteúdo (filete vermelho no topo,
   borda grafite). Sem linha colorida ligando círculos. */
.flh-etapas {
    display: flex;
    gap: .6rem;
    margin-bottom: 1.5rem;
    list-style: none;
    padding: 0;
}
.flh-etapa {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    text-align: left;
    padding: .85rem .95rem .9rem;
    background: #fbfbfc;
    border: 1px solid var(--borda);
    border-top: 3px solid var(--borda);
    border-radius: 7px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    position: relative;
    transition: background .12s, border-color .12s;
}
.flh-etapa:hover { background: #fff; border-color: #c9c9d2; }
.flh-etapa:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.flh-etapa[aria-selected="true"] {
    background: #fff;
    border-color: var(--grafite);
    border-top-color: var(--vermelho);
}
.flh-etapa[aria-selected="true"] .flh-mov-ordinal { background: var(--vermelho); }

.flh-etapa-corpo { min-width: 0; }
.flh-etapa-nome {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .96rem;
    font-weight: 700;
    color: var(--grafite);
    line-height: 1.2;
}
.flh-etapa[aria-selected="false"] .flh-etapa-nome { color: #50515c; }
.flh-etapa-desc {
    display: block;
    margin-top: .25rem;
    font-size: .76rem;
    color: var(--texto-suave);
    line-height: 1.35;
}

/* Painéis: só o ativo aparece (JS aplica hidden). Sem JS, todos visíveis. */
.flh-painel[hidden] { display: none; }
.flh-painel:focus { outline: none; }

/* Barra de navegação Anterior / Próximo dentro do painel */
.flh-nav-etapas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--borda);
}
.flh-nav-etapas:has(> :only-child) { justify-content: flex-end; }
.flh-nav-prox { margin-left: auto; }

@media (max-width: 720px) {
    /* Rolagem horizontal elegante — fichas não empilham nem comprimem texto */
    .flh-etapas {
        overflow-x: auto;
        flex-wrap: nowrap;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .35rem;
    }
    .flh-etapa { flex: 0 0 auto; width: 15rem; scroll-snap-align: start; }
}

/* Contexto / resultado --------------------------------------------------- */
.flh-contexto-topo,
.flh-folha-ativa {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
/* Selo de situação + kebab de ações (reimportar/excluir) da folha aberta. */
.flh-contexto-acoes {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.flh-entidade {
    font-size: 1.35rem;
    line-height: 1.15;
    margin: 0;
    color: var(--grafite);
    /* Nome longo da entidade quebra em vez de empurrar o selo de estado. */
    overflow-wrap: anywhere;
}

/* Faixa de totais — tally de bancada, itens separados por filete; sem
   metric-cards de dashboard. Rejeitadas em vermelho quando houver. */
.flh-totais {
    display: flex;
    flex-wrap: wrap;
    margin: 1.1rem 0 0;
    border: 1px solid var(--borda);
    border-radius: 8px;
    overflow: hidden;
    background: #fcfcfd;
}
.flh-totais-item {
    flex: 1 1 0;
    min-width: 140px;
    padding: .7rem .9rem;
    border-left: 1px solid var(--borda);
}
.flh-totais-item:first-child { border-left: 0; }
.flh-totais dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800;
    color: var(--texto-suave);
}
.flh-totais dd {
    margin: .25rem 0 0;
    color: var(--grafite);
    font-weight: 700;
    font-size: 1.02rem;
    font-variant-numeric: tabular-nums;
}
.flh-totais-item--alerta dd { color: var(--vermelho); }

/* Orientações de preparo ------------------------------------------------- */
.flh-orientacoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.flh-orientacoes h3 {
    font-size: .9rem;
    margin: 0 0 .35rem;
    color: var(--grafite);
}
.flh-orientacoes p,
.flh-folha-ativa p {
    color: var(--texto-suave);
    line-height: 1.5;
    margin: 0;
}

/* Lista de folhas importadas (entrada de Folha) — cada folha é um cartão com
   cabeçalho (competência + situação) e kebab de ações; meta em faixa de totais. */
.flh-lista-vazia .botao { margin-top: 1rem; }
.flh-folha-item { margin-bottom: 1rem; }
.flh-folha-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.flh-folha-id {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}
.flh-folha-comp {
    font-size: 1.05rem;
    color: var(--grafite);
    font-variant-numeric: tabular-nums;
}
.flh-folha-meta { margin-top: .9rem; }
.flh-folha-arquivo {
    font-weight: 600;
    font-size: .92rem;
    overflow-wrap: anywhere;
}

/* Bandeja de documento (intake) — sem nuvem central; o nome do arquivo
   selecionado aparece como etiqueta de dossiê truncada. Funciona sem JS. */
.flh-intake {
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: #fcfcfd;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
.flh-intake-campo { margin-bottom: .55rem; }
.flh-intake-arquivo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .85rem;
    color: var(--texto-suave);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.flh-intake-arquivo::before {
    content: '';
    width: 8px; height: 8px;
    flex-shrink: 0;
    border-radius: 2px;
    background: #c4c7d0;
    transform: rotate(45deg);
}
.flh-intake--ativo { border-color: #d0d2da; background: #fff; }
.flh-intake--ativo .flh-intake-arquivo { color: var(--grafite); font-weight: 600; }
.flh-intake--ativo .flh-intake-arquivo::before { background: var(--vermelho); }

/* ================================================================
   Componente de upload FolhaLab (x-upload-campo).
   Bandeja escura grafite com presença própria — destaca o upload do
   restante da página sem virar dashboard. Superfície única com 5
   estados (idle / arrastando / pronto / erro / processando) trocados
   por data-upl-estado no wrapper. Motivo de documento, losango,
   vermelho institucional. Sem nuvem genérica, sem borda tracejada,
   sem caixas duplicadas.
   ================================================================ */

/* ── Wrapper ──────────────────────────────────────────────────── */
.upl-campo { position: relative; margin-bottom: .75rem; }

/* ── Bandeja: superfície grafite compartilhada (zona + arquivo) ── */
.upl-zona,
.upl-arquivo {
    background: var(--grafite);
    border: 1px solid #313846;
    border-radius: 10px;
    color: #fff;
    transition: border-color .15s, background .15s;
}

/* ── Zona: idle / arrastando / erro ──────────────────────────── */
.upl-zona {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    padding: 1.35rem 1.5rem;
}

/* Motivo de documento — retângulo com canto dobrado em CSS puro */
.upl-doc {
    flex-shrink: 0;
    width: 34px; height: 42px;
    background: #2a313e;
    border: 1.5px solid #4a5263;
    border-radius: 3px;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
    transition: border-color .15s;
}
.upl-doc::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 11px; height: 11px;
    background: #4a5263;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    transition: background .15s;
}
/* Filetes internos sugerindo linhas do documento */
.upl-doc::before {
    content: '';
    position: absolute;
    left: 6px; right: 7px; top: 16px;
    height: 1px;
    background: #4a5263;
    box-shadow: 0 6px 0 #4a5263, 0 12px 0 #4a5263;
}

.upl-zona-corpo { flex: 1; min-width: 0; }
.upl-titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
}
.upl-instrucao {
    margin: .2rem 0 0;
    font-size: .86rem;
    color: #c2c6d2;
    font-weight: 400;
}

/* Botão label — ação principal vermelha do estado vazio */
.upl-btn-selecionar {
    flex-shrink: 0;
    display: inline-block;
    background: var(--vermelho);
    color: #fff;
    border: 1px solid var(--vermelho);
    border-radius: .5rem;
    padding: .55rem 1.15rem;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .1s;
}
.upl-btn-selecionar:hover { filter: brightness(1.08); }
.upl-btn-selecionar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.upl-meta {
    margin: .55rem 0 0;
    font-size: .73rem;
    color: #8b90a0;
    line-height: 1.4;
    letter-spacing: .01em;
}

/* ── Estado: arrastando ───────────────────────────────────────── */
[data-upl-estado="arrastando"] .upl-zona { border-color: var(--vermelho); background: #2a2024; }
[data-upl-estado="arrastando"] .upl-doc { border-color: var(--vermelho); }
[data-upl-estado="arrastando"] .upl-doc::after { background: var(--vermelho); }

/* ── Estado: erro ─────────────────────────────────────────────── */
[data-upl-estado="erro"] .upl-zona { border-color: var(--vermelho); }

/* ── Arquivo: oculto por padrão (display: none supera hidden) ─── */
.upl-arquivo {
    display: none;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
}

/* ── Estado: pronto — oculta zona, exibe arquivo ──────────────── */
[data-upl-estado="pronto"] .upl-zona { display: none; }
[data-upl-estado="pronto"] .upl-arquivo { display: flex; }

/* Estado processando: mesmo layout do pronto */
[data-upl-estado="processando"] .upl-zona { display: none; }
[data-upl-estado="processando"] .upl-arquivo { display: flex; }

/* Ícone de documento selecionado — canto dobrado em vermelho */
.upl-arquivo-doc {
    flex-shrink: 0;
    width: 28px; height: 34px;
    background: #2a313e;
    border: 1.5px solid var(--vermelho);
    border-radius: 3px;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.upl-arquivo-doc::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 9px; height: 9px;
    background: var(--vermelho);
    clip-path: polygon(0 0, 100% 100%, 100% 0);
}

/* Info do arquivo */
.upl-arquivo-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.upl-arquivo-nome-linha {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    min-width: 0;
}
.upl-arquivo-nome {
    font-weight: 600;
    font-size: .9rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 32ch;
}
.upl-arquivo-ext {
    flex-shrink: 0;
    font-size: .67rem;
    font-weight: 700;
    color: #ff9a90;
    background: rgba(218, 41, 28, .18);
    border: 1px solid rgba(218, 41, 28, .5);
    border-radius: 3px;
    padding: .1rem .35rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.upl-arquivo-detalhe { display: flex; align-items: center; gap: .55rem; }
.upl-arquivo-tamanho { font-size: .76rem; color: #9aa0b0; font-variant-numeric: tabular-nums; }
.upl-pronto-selo {
    display: inline-block;
    font-size: .67rem;
    font-weight: 700;
    color: #5fd39a;
    background: rgba(5, 150, 105, .16);
    border: 1px solid rgba(5, 150, 105, .45);
    border-radius: 2rem;
    padding: .1rem .5rem;
    white-space: nowrap;
}
/* No processando o selo vira âmbar, sem depender só de animação */
[data-upl-estado="processando"] .upl-pronto-selo {
    color: #f0c674;
    background: rgba(180, 83, 9, .18);
    border-color: rgba(180, 83, 9, .5);
}

/* Ações do arquivo — Trocar (secundária) e Remover (terciária) */
.upl-arquivo-acoes { flex-shrink: 0; display: flex; align-items: center; gap: .35rem; }
.upl-acao-trocar,
.upl-acao-remover {
    background: none;
    padding: .35rem .7rem;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
    border-radius: .4rem;
    transition: color .1s, background .1s, border-color .1s;
}
.upl-acao-trocar {
    color: #e6e8ee;
    font-weight: 600;
    border: 1px solid #4a5263;
}
.upl-acao-trocar:hover { background: #2a313e; border-color: #5e6678; }
.upl-acao-trocar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.upl-acao-remover {
    color: #9aa0b0;
    border: 1px solid transparent;
}
.upl-acao-remover:hover { color: #ff9a90; }
.upl-acao-remover:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Erro de validação front-end — abaixo da bandeja, sobre fundo claro */
.upl-erro { margin-top: .4rem; font-size: .82rem; color: var(--vermelho); font-weight: 500; }
.upl-erro::before { content: '◆'; font-size: .55rem; margin-right: .35rem; vertical-align: middle; }

/* ── Estado: processando — ações desabilitadas visualmente ───── */
[data-upl-estado="processando"] .upl-acao-trocar,
[data-upl-estado="processando"] .upl-acao-remover { opacity: .4; pointer-events: none; }

/* ── Responsivo ───────────────────────────────────────────────── */
@media (max-width: 560px) {
    .upl-zona { flex-direction: column; align-items: flex-start; gap: .9rem; padding: 1.15rem 1.2rem; }
    .upl-doc { display: none; }
    .upl-btn-selecionar { width: 100%; text-align: center; }
    .upl-arquivo { flex-wrap: wrap; padding: 1rem 1.2rem; }
    .upl-arquivo-nome { max-width: 20ch; }
    .upl-arquivo-acoes { margin-left: auto; }
}

/* Prévia de importação de eventos */
.ev-previa-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}
.ev-previa-contador {
    flex: 1 1 120px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: .6rem .9rem;
    background: #fff;
}
.ev-previa-contador strong { display: block; font-size: 1.35rem; color: var(--grafite); line-height: 1.1; }
.ev-previa-contador span  { display: block; font-size: .75rem; color: var(--texto-suave); margin-top: .2rem; }
.ev-previa-contador--criados  { border-color: #a7f3d0; background: #f0fdf4; }
.ev-previa-contador--criados strong { color: var(--verde); }
.ev-previa-contador--atualizados { border-color: #fde68a; background: #fffbeb; }
.ev-previa-contador--atualizados strong { color: var(--ambar); }
.ev-previa-contador--invalidos { border-color: #fecaca; background: #fef2f2; }
.ev-previa-contador--invalidos strong { color: var(--vermelho); }
.ev-previa-contador--pulados { border-color: var(--borda); background: var(--cinza); }
.ev-previa-tabela { min-width: 560px; }
.ev-previa-tabela .selo { font-size: .7rem; }

/* Resumo de rejeição no detalhe — torna os erros fáceis de localizar. */
.flh-rejeicao-resumo {
    font-size: .9rem;
    color: var(--grafite);
    margin: 0 0 .9rem;
}
.flh-rejeicao-resumo strong { color: var(--vermelho); }

.flh-tabela { min-width: 720px; }

/* Remoção de linha(s) da folha em uso: coluna de marcar, coluna de ação e
   barra do lote acima da tabela. */
.flh-remover-lote {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 .9rem;
}
.flh-remover-contagem { color: var(--grafite); }
.flh-col-marcar { width: 1%; white-space: nowrap; text-align: center; }
.flh-col-acao { width: 1%; white-space: nowrap; }
.flh-remover-linha {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--vermelho);
}

/* Linha do tempo de Folha: seletor de ano + grade de 12 meses. */
.flh-timeline { display: grid; gap: 1.2rem; }
.flh-ano {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.flh-ano-atual {
    min-width: 5ch;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--grafite);
}
.flh-ano-seta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--borda);
    border-radius: .55rem;
    background: #fff;
    color: var(--grafite);
    font-size: 1.4rem;
    line-height: 1;
    text-decoration: none;
}
.flh-ano-seta:hover { background: var(--cinza); }
.flh-ano-seta--inerte { color: var(--borda); background: var(--cinza); cursor: default; }

/* Atalho de salto: clicar no ano abre a lista dos anos com folha (dropdown
   padrão, por clique). O caret sinaliza que é um menu. */
.flh-ano-gatilho {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    list-style: none;
}
.flh-ano-gatilho::-webkit-details-marker { display: none; }
.flh-ano-gatilho::marker { content: ''; }
.flh-ano-gatilho::after {
    content: '';
    width: 0;
    height: 0;
    border-left: .32rem solid transparent;
    border-right: .32rem solid transparent;
    border-top: .36rem solid currentColor;
}
.flh-ano-menu[open] .flh-ano-gatilho::after { transform: rotate(180deg); }
.flh-ano-gatilho:hover { color: var(--vermelho); }
.flh-ano-gatilho:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 3px; border-radius: .3rem; }
/* Lista centralizada sob o ano; rola se houver muitos anos (sem clipping). */
.flh-ano-lista {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    min-width: 6rem;
    max-height: 15rem;
    overflow-y: auto;
}
.flh-ano-item { text-align: center; }
.flh-ano-item--atual { font-weight: 700; color: var(--vermelho); }

.flh-meses {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .7rem;
}
/* A célula é a âncora do menu de processamentos; nada de overflow aqui para o
   menu não ser cortado (lição das frentes anteriores). */
.flh-mes-celula { position: relative; min-width: 0; }
.flh-mes {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    width: 100%;
    min-height: 4.6rem;
    padding: .85rem .9rem;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: #fff;
    color: var(--grafite);
    text-decoration: none;
}
.flh-mes-nome { font-weight: 600; }
.flh-mes-estado { font-size: .8rem; color: var(--texto-suave); }

.flh-mes--cheio { cursor: pointer; border-color: var(--grafite); }
.flh-mes--cheio:hover { background: var(--cinza); }
.flh-mes--cheio .flh-mes-estado { color: var(--vermelho); }

.flh-mes--vazio { background: var(--cinza); border-style: dashed; }
.flh-mes--vazio .flh-mes-nome { font-weight: 500; color: var(--texto-suave); }

/* Mês com vários processamentos: o <details> kebab abre por clique. */
.flh-mes-menu { position: relative; }
.flh-mes-menu > summary { list-style: none; }
.flh-mes-menu > summary::-webkit-details-marker { display: none; }
.flh-mes-menu > summary:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.flh-mes-menu .kebab-menu { left: 0; right: auto; }

.flh-timeline-vazio { margin: 0; }

/* Seletor de colunas da folha: ocupa a linha inteira do grid de filtros para a
   lista de checkboxes respirar. */
.flh-colunas { grid-column: 1 / -1; }
.flh-colunas summary {
    cursor: pointer;
    font-weight: 600;
    padding: .35rem 0;
}
.flh-colunas .grupo-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .2rem .9rem;
    margin: .5rem 0 0;
}

@media (max-width: 760px) {
    .flh-contexto-topo,
    .flh-folha-ativa { flex-direction: column; }
    .flh-orientacoes { grid-template-columns: 1fr; }
    .flh-entidade { font-size: 1.2rem; }
    .flh-totais-item { flex-basis: 50%; }
}

/* ── Abas da conferência (itens / totalizador) ──────────────────
   Tira leve, na identidade do FolhaLab: rótulo grafite, sublinhado
   vermelho da marca na aba ativa. Botões reais (WAI-ARIA Tabs). */
.cnf-abas {
    display: flex;
    gap: .2rem;
    border-bottom: 1px solid var(--borda);
    margin: 0 0 1.1rem;
}
.cnf-aba {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: .6rem .9rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texto-suave);
    cursor: pointer;
}
.cnf-aba:hover { color: var(--grafite); }
.cnf-aba[aria-selected="true"] {
    color: var(--grafite);
    border-bottom-color: var(--vermelho);
}
.cnf-aba:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.cnf-aba-contagem {
    display: inline-block;
    margin-left: .35rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--texto-suave);
    background: var(--cinza);
    border-radius: 2rem;
    padding: .05rem .45rem;
}
.cnf-aba[aria-selected="true"] .cnf-aba-contagem { color: var(--vermelho); }

/* ================================================================
   Hub de conferências — mesma identidade do painel (losango, etiqueta
   de dossiê, cor pelo ESTADO). O resumo geral usa a faixa de totais já
   usada no fluxo de importação, para não introduzir um padrão visual novo.
   ================================================================ */
/* Cabeçalho da página: título à esquerda, selo da competência em uso à direita. */
.cnf-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cnf-competencia {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}
.cnf-competencia-rotulo {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-suave);
}
.cnf-competencia-selo {
    font-size: .85rem;
    font-weight: 800;
    color: #fff;
    background: var(--grafite);
    border-radius: 8px;
    padding: .5rem .85rem;
    font-variant-numeric: tabular-nums;
}

.cnf-resumo {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.4rem;
}
.cnf-resumo-topo { margin-bottom: .9rem; }
/* Colunas direto sobre o card branco, separadas por filetes verticais finos. */
.cnf-resumo-grade {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}
.cnf-resumo-item {
    flex: 1 1 0;
    min-width: 150px;
    padding: .7rem .9rem;
    border-left: 1px solid var(--borda);
}
.cnf-resumo-item:first-child { border-left: 0; }
.cnf-resumo-item dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800;
    color: var(--texto-suave);
    margin: 0;
}
.cnf-resumo-item dd {
    margin: .25rem 0 0;
    color: var(--grafite);
    font-weight: 700;
    font-size: 1.02rem;
    font-variant-numeric: tabular-nums;
}
.cnf-resumo-item--alerta dd { color: var(--vermelho); }

.cnf-card-ultima { font-size: .82rem; color: var(--texto-suave); margin: 0 0 .6rem; }
.cnf-card-rodape { display: flex; flex-direction: column; align-items: stretch; gap: .7rem; }
/* Ações primárias do card (Individual/Coletivo) lado a lado. */
.cnf-card-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.cnf-card-acoes .pnl-card-acao { font-size: .85rem; }
/* Linha-ação destacada: atalho para o último resultado, ancorada no rodapé do card. */
.cnf-linha-acao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    background: #F7F5F0;
    border: 1px solid #EFEBE3;
    border-radius: 9px;
    padding: .7rem .8rem;
    text-decoration: none;
}
.cnf-linha-acao:hover { background: #F0ECE3; }
.cnf-linha-acao-texto {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--grafite);
}
.cnf-linha-acao-texto svg { color: var(--vermelho); flex: none; }
.cnf-linha-acao-seta { color: var(--vermelho); font-weight: 700; }

/* Abas de modo (Individual/Coletivo) e subabas (folha/manual): navegação real
   por links, sem <select>. A ativa usa aria-current (não depende só de cor). */
.conf-abas, .conf-subabas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; }
.conf-aba, .conf-subaba {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: #fff;
    color: var(--grafite);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}
.conf-subaba { font-weight: 500; font-size: .85rem; border-radius: 2rem; }
.conf-aba:hover, .conf-subaba:hover { border-color: #d4d4dc; }
.conf-aba[aria-current="page"] {
    background: var(--grafite);
    color: #fff;
    border-color: var(--grafite);
}
.conf-subaba[aria-current="page"] {
    background: var(--cinza);
    border-color: #d4d4dc;
    color: var(--grafite);
}
.conf-aba:focus-visible, .conf-subaba:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }

.conf-manual-eventos input, .conf-manual-eventos select { width: 100%; }

@media (max-width: 640px) {
    .cnf-resumo-item { flex-basis: 50%; }
    .cnf-card-acoes { flex-direction: column; align-items: stretch; }
}

/* ================================================================
   Seletor visual de competência (grade ano → mês). Substitui o
   <select> gigante da Conferência Individual nos dois modos. Passo 1
   escolhe o ano (faixa de 9, com setas); passo 2 escolhe o mês.
   Identidade dossiê: losango + vermelho da marca como acento, grafite
   como seleção. Estados: selecionável, selecionado, desabilitado, hoje.
   ================================================================ */
/* Recolhido num popover: o grid ano→mês vive dentro de um painel ancorado. */
.selcomp {
    position: relative;
    margin: 0 0 1.1rem;
}
.selcomp-eyebrow {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .45rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--texto-suave);
}

/* Gatilho recolhido: campo discreto que mostra a competência escolhida. */
.selcomp-gatilho {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    min-width: 12rem;
    max-width: 20rem;
    padding: .5rem .7rem .5rem .85rem;
    border: 1px solid var(--borda);
    border-radius: .5rem;
    background: #fff;
    color: var(--grafite);
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .12s ease;
}
.selcomp-gatilho:hover { border-color: #c9c9d2; }
.selcomp-gatilho[aria-expanded="true"] { border-color: var(--grafite); }
.selcomp-gatilho-valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selcomp-gatilho-seta { flex-shrink: 0; color: var(--texto-suave); transition: transform .15s ease; }
.selcomp-gatilho[aria-expanded="true"] .selcomp-gatilho-seta { transform: rotate(180deg); }

/* Popover: painel flutuante ancorado no gatilho, com o mesmo grid ano→mês. */
.selcomp-popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + .4rem);
    left: 0;
    width: max-content;
    min-width: 19rem;
    max-width: 23rem;
    padding: .9rem 1rem 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #fff, #fcfcfd);
    box-shadow: 0 12px 32px rgba(31, 36, 48, .16);
}
.selcomp-popover[hidden] { display: none; }
.selcomp-ajuda {
    margin: 0 0 .8rem;
    color: var(--texto-suave);
    font-size: .82rem;
    line-height: 1.5;
}

/* Passo 1: faixa de anos (janela de 9). */
.selcomp-anos {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .35rem 0 1rem;
}
.selcomp-anos-trilha {
    display: flex;
    gap: .3rem;
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
}
.selcomp-ano {
    appearance: none;
    position: relative;
    border: 1px solid transparent;
    background: transparent;
    color: var(--texto-suave);
    font-weight: 600;
    font-size: .9rem;
    padding: .35rem .65rem;
    border-radius: .45rem;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background .12s ease, color .12s ease;
}
.selcomp-ano:hover { color: var(--grafite); background: var(--cinza); }
.selcomp-ano.ativo {
    background: var(--grafite);
    color: #fff;
    border-color: var(--grafite);
}
.selcomp-hoje-ponto {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--vermelho);
    transform: rotate(45deg);
    margin-left: .35rem;
    vertical-align: middle;
}
.selcomp-ano.ativo .selcomp-hoje-ponto { background: #fff; }
.selcomp-seta {
    appearance: none;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--borda);
    background: #fff;
    color: var(--grafite);
    border-radius: .45rem;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .12s ease;
}
.selcomp-seta:hover:not(:disabled) { border-color: #c9c9d2; }
/* Sem anos para deslizar (range curto), a seta some: nada de botão morto no
   popover. Reaparece quando há mais de uma janela de anos para navegar. */
.selcomp-seta:disabled { display: none; }

/* Passo 2: grade de meses (4 × 3). */
.selcomp-meses {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}
/* display:grid vence o UA [hidden]{display:none}; reforça o ocultar do painel. */
.selcomp-meses[hidden] { display: none; }
.selcomp-ano[hidden] { display: none; }
.selcomp-mes {
    appearance: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    min-height: 3rem;
    padding: .5rem .3rem;
    border: 1px solid var(--borda);
    border-radius: .5rem;
    background: #fff;
    color: var(--grafite);
    font-weight: 600;
    font-size: .9rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
button.selcomp-mes:hover { border-color: var(--grafite); }
.selcomp-mes-nome { line-height: 1.1; }
.selcomp-mes-tipo {
    font-size: .66rem;
    font-weight: 600;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.selcomp-mes.selecionado {
    background: var(--grafite);
    color: #fff;
    border-color: var(--grafite);
}
.selcomp-mes.selecionado .selcomp-mes-tipo { color: rgba(255, 255, 255, .72); }
.selcomp-mes.desabilitado {
    background: var(--cinza);
    color: #b7b7c2;
    border-style: dashed;
    cursor: not-allowed;
    font-weight: 500;
}
/* Mês de hoje: losango vermelho no canto (marca discreta). */
.selcomp-mes[data-hoje]::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--vermelho);
    transform: rotate(45deg);
}
.selcomp-mes.selecionado[data-hoje]::after { background: #fff; }

/* Mês com mais de uma folha (ex.: mensal + 13º): opções por tipo. */
.selcomp-mes-multi { cursor: default; gap: .3rem; }
.selcomp-mes-opcoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
}
.selcomp-opcao {
    appearance: none;
    border: 1px solid var(--borda);
    background: #fff;
    color: var(--grafite);
    font-size: .7rem;
    font-weight: 600;
    padding: .16rem .45rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.selcomp-opcao:hover { border-color: var(--grafite); }
.selcomp-opcao.selecionado {
    background: var(--grafite);
    color: #fff;
    border-color: var(--grafite);
}

.selcomp-busca { max-width: 24rem; margin-top: .2rem; }
.selcomp-busca input { width: 100%; }

@media (max-width: 560px) {
    .selcomp-meses { grid-template-columns: repeat(3, 1fr); }
    .selcomp-gatilho { width: 100%; max-width: none; }
    .selcomp-popover { min-width: 0; width: 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .selcomp-ano, .selcomp-seta, .selcomp-mes, .selcomp-opcao,
    .selcomp-gatilho, .selcomp-gatilho-seta { transition: none; }
}

/* ================================================================
   Trilha hierárquica (breadcrumb) — orientação de "onde estou".
   Texto pequeno, segmentos separados por "/", último em destaque.
   Posicionada pelo layout logo abaixo do topbar, acima do título.
   ================================================================ */
.trilha { margin: 0 0 1rem; }
.trilha-lista {
    list-style: none; display: flex; flex-wrap: wrap; align-items: center;
    gap: .4rem; margin: 0; padding: 0; font-size: .8rem;
}
.trilha-item { display: inline-flex; align-items: center; gap: .4rem; }
.trilha-link { color: var(--texto-suave); text-decoration: none; font-weight: 600; }
.trilha-link:hover { color: var(--vermelho); text-decoration: underline; }
.trilha-link:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; border-radius: 3px; }
.trilha-texto { color: var(--texto-suave); font-weight: 600; }
.trilha-atual { color: var(--grafite); font-weight: 800; }
.trilha-sep { color: #b7b2a8; }

/* ================================================================
   Detalhe da conferência INSS — tela-molde (FGTS/IRRF reusam depois).
   Apresentação apenas: lê os valores do motor e os exibe. Identidade
   FolhaLab (Archivo, vermelho da marca, neutros, diamante, etiquetas).
   ================================================================ */

/* Cabeçalho: diamante + título + tag de natureza; meta em linha. */
.cnf-det-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin: 0; }
.cnf-det-tag {
    font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--texto-suave); background: var(--cinza); border: 1px solid var(--borda);
    border-radius: 6px; padding: .2rem .5rem;
}
.cnf-det-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; }
.selo.escuro { background: var(--grafite); color: #fff; letter-spacing: .04em; }
.cnf-det-cadeado { display: inline-flex; align-items: center; gap: .3rem; color: var(--texto-suave); }
.cnf-det-cadeado svg { width: 14px; height: 14px; }

/* Card de resultado: alerta + strip de 4 indicadores + regime/tabela. */
.cnf-det-resultado {
    background: #fff; border: 1px solid var(--borda); border-radius: 14px;
    padding: 1.1rem 1.3rem; margin-bottom: 1.4rem;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.cnf-det-resultado-esq { display: flex; flex-direction: column; gap: 1rem; flex: 1 1 420px; }
.cnf-det-alerta {
    display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
    background: #FBE6E4; border: 1px solid #F3CBC7; color: var(--vermelho);
    border-radius: 999px; padding: .35rem .8rem; font-size: .85rem; font-weight: 800;
}
.cnf-det-alerta.ok { background: #E2F1E9; border-color: #C5E2D3; color: var(--verde); }
.cnf-det-alerta svg { width: 16px; height: 16px; flex: none; }
.cnf-det-indicadores { display: flex; flex-wrap: wrap; gap: 0; }
.cnf-det-indicador { padding: 0 1.3rem; border-left: 1px solid var(--borda); }
.cnf-det-indicador:first-child { padding-left: 0; border-left: 0; }
.cnf-det-indicador dt {
    font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--texto-suave); margin: 0 0 .35rem;
}
.cnf-det-indicador dd { margin: 0; font-size: 1.5rem; font-weight: 900; color: var(--grafite); font-variant-numeric: tabular-nums; line-height: 1; }
.cnf-det-indicador--div dd { color: var(--vermelho); }
.cnf-det-indicador--ok dd { color: var(--verde); }
.cnf-det-regime { text-align: right; font-size: .85rem; color: var(--texto-suave); line-height: 1.6; }
.cnf-det-regime strong { color: var(--grafite); }

/* Toolbar da aba de itens: título+contador, busca, toggle. */
.cnf-det-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; margin-bottom: 1rem; }
.cnf-det-toolbar h2 { margin: 0; }
.cnf-det-contador { font-size: .85rem; font-weight: 600; color: var(--texto-suave); margin-left: .4rem; }
.cnf-det-busca { position: relative; flex: 1 1 280px; max-width: 420px; margin-left: auto; }
.cnf-det-busca svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-suave); pointer-events: none; }
.cnf-det-busca input {
    width: 100%; padding: .55rem .9rem .55rem 2.1rem; font: inherit; font-size: .9rem;
    border: 1px solid var(--borda); border-radius: 10px; background: #fff; color: var(--grafite);
}
.cnf-det-busca input:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 1px; }
.cnf-det-busca-limpar {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    border: 0; background: none; cursor: pointer; color: var(--texto-suave); font-size: 1.1rem; line-height: 1;
    padding: .1rem .35rem; border-radius: 6px;
}
.cnf-det-busca-limpar:hover { color: var(--grafite); background: var(--cinza); }
.cnf-det-busca-limpar[hidden] { display: none; }
.cnf-det-toggle { display: inline-flex; align-items: center; gap: .55rem; font-size: .85rem; font-weight: 600; color: var(--grafite); cursor: pointer; user-select: none; }
.cnf-det-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cnf-det-switch { width: 38px; height: 22px; border-radius: 999px; background: #d7d4cd; position: relative; transition: background .15s ease; flex: none; }
.cnf-det-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.cnf-det-toggle input:checked + .cnf-det-switch { background: var(--vermelho); }
.cnf-det-toggle input:checked + .cnf-det-switch::after { transform: translateX(16px); }
.cnf-det-toggle input:focus-visible + .cnf-det-switch { outline: 2px solid var(--vermelho); outline-offset: 2px; }

/* Tabela de pessoas. */
.cnf-pessoas { width: 100%; border-collapse: collapse; }
.cnf-pessoas thead th {
    font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--texto-suave); text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--borda);
}
.cnf-pessoas thead th.num { text-align: right; }
.cnf-pessoas tbody td { padding: .7rem .7rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.cnf-pessoas .cnf-pessoa-mat a { color: var(--vermelho); font-weight: 800; text-decoration: none; font-variant-numeric: tabular-nums; }
.cnf-pessoas .cnf-pessoa-mat a:hover { text-decoration: underline; }
.cnf-pessoa-cpf { display: block; font-size: .76rem; color: var(--texto-suave); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.cnf-pessoa-nome { font-weight: 700; color: var(--grafite); }
.cnf-pessoas td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cnf-pessoa-dif { font-weight: 800; }
.cnf-pessoa-dif--div { color: var(--vermelho); }
/* Matrícula sem link (FGTS não tem página de caso): mesmo peso visual da do INSS. */
.cnf-pessoa-mat-num { color: var(--vermelho); font-weight: 800; font-variant-numeric: tabular-nums; }
.cnf-mem-toggle {
    margin-top: .4rem; display: inline-flex; align-items: center; gap: .35rem;
    border: 0; background: none; padding: 0; cursor: pointer;
    color: var(--vermelho); font: inherit; font-size: .8rem; font-weight: 700;
}
.cnf-mem-toggle:hover { text-decoration: underline; }
.cnf-mem-toggle .cnf-caret { transition: transform .15s ease; display: inline-block; }
.cnf-mem-toggle[aria-expanded="true"] .cnf-caret { transform: rotate(90deg); }
.cnf-mem-toggle:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; border-radius: 4px; }
.cnf-pessoa-memoria[hidden] { display: none; }
.cnf-pessoa-memoria > td { background: #FAF8F3; padding: 0 .7rem 1rem; }
/* Fallback sem JS de "Só as divergências": o servidor marca a tabela com
   .cnf-so-div e o CSS esconde quem confere (e a memória logo abaixo). Com JS,
   o toggle remove a classe e passa a filtrar no cliente (busca + divergências). */
.cnf-so-div tbody tr.cnf-pessoa-linha:not([data-situacao="DIVERGENTE"]),
.cnf-so-div tbody tr.cnf-pessoa-linha:not([data-situacao="DIVERGENTE"]) + tr.cnf-pessoa-memoria { display: none; }

/* Divergência justificada: aceitar (details nativo, funciona sem JS) e reverter,
   dentro da própria célula "Situação" (sem linha nova, não mexe no JS de filtro). */
.cnf-aceite { margin-top: .5rem; }
.cnf-aceite-gatilho {
    display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
    color: var(--vermelho); font-size: .78rem; font-weight: 700; list-style: none;
}
.cnf-aceite-gatilho::-webkit-details-marker { display: none; }
.cnf-aceite-gatilho::before { content: "▸"; display: inline-block; transition: transform .15s ease; }
.cnf-aceite[open] .cnf-aceite-gatilho::before { transform: rotate(90deg); }
.cnf-aceite-gatilho:hover { text-decoration: underline; }
.cnf-aceite-gatilho:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; border-radius: 4px; }
.cnf-aceite-form { margin-top: .5rem; display: flex; flex-direction: column; gap: .5rem; width: 260px; max-width: 60vw; }
.cnf-aceite-label {
    font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--texto-suave);
}
.cnf-aceite-textarea {
    width: 100%; font: inherit; font-size: .85rem; padding: .5rem .6rem; resize: vertical;
    border: 1px solid var(--borda); border-radius: 8px; background: #fff; color: var(--grafite);
}
.cnf-aceite-textarea:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 1px; }
.cnf-aceite-confirmar { align-self: flex-start; }
.cnf-aceite-area { margin-top: .5rem; display: flex; flex-direction: column; gap: .35rem; max-width: 260px; }
.cnf-aceite-nota { margin: 0; font-size: .74rem; color: var(--texto-suave); }
.cnf-aceite-motivo { margin: 0; font-size: .82rem; color: var(--grafite); white-space: pre-line; }
.cnf-aceite-reverter { align-self: flex-start; margin-top: .15rem; }

/* Estado vazio da busca. */
.cnf-det-vazio { text-align: center; padding: 2.4rem 1rem; color: var(--texto-suave); }
.cnf-det-vazio svg { width: 30px; height: 30px; opacity: .5; margin-bottom: .5rem; }
.cnf-det-vazio p { margin: 0; font-size: .92rem; }

/* Painel de memória redesenhado (compacto). */
.cnf-mem { background: #FAF8F3; border: 1px solid var(--borda); border-radius: 11px; padding: .9rem 1rem; margin-top: .6rem; }
.cnf-mem-cab { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--borda); margin-bottom: .7rem; }
.cnf-mem-cab h3 { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .92rem; font-weight: 800; color: var(--grafite); }
.cnf-mem-cab .cnf-mem-tabela { margin-left: auto; font-size: .76rem; color: var(--texto-suave); text-align: right; }
.cnf-mem-veredito {
    display: flex; align-items: center; gap: .5rem;
    background: #FBE6E4; border: 1px solid #F3CBC7; color: #8A2018;
    border-radius: 9px; padding: .55rem .8rem; margin-bottom: .8rem; font-size: .86rem; font-weight: 700;
}
.cnf-mem-veredito.ok { background: #E2F1E9; border-color: #C5E2D3; color: #1F6E4A; }
.cnf-mem-veredito svg { width: 15px; height: 15px; flex: none; }
.cnf-mem-secao-titulo { display: flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--grafite); margin: 0 0 .5rem; }
.cnf-mem-secao-titulo .cnf-aba-contagem { text-transform: none; letter-spacing: 0; }
/* Tabela de eventos enxuta dentro da memória. */
.cnf-mem table.conf-eventos { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.cnf-mem table.conf-eventos th { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); text-align: left; padding: .4rem .6rem; background: #FBFAF7; border-bottom: 1px solid var(--borda); }
.cnf-mem table.conf-eventos th.num { text-align: right; }
.cnf-mem table.conf-eventos td { padding: .45rem .6rem; border-bottom: 1px solid var(--borda); font-size: .82rem; vertical-align: top; }
.cnf-mem table.conf-eventos tr:last-child td { border-bottom: 0; }
.cnf-mem table.conf-eventos td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Seção recolhível "Cálculo do INSS devido". */
.cnf-mem-calc { margin-top: .8rem; background: #fff; border: 1px solid var(--borda); border-radius: 9px; overflow: hidden; }
.cnf-mem-calc > summary { display: flex; align-items: center; gap: .45rem; cursor: pointer; padding: .6rem .8rem; font-size: .82rem; font-weight: 800; color: var(--grafite); list-style: none; }
.cnf-mem-calc > summary::-webkit-details-marker { display: none; }
.cnf-mem-calc > summary .cnf-caret { transition: transform .15s ease; color: var(--vermelho); }
.cnf-mem-calc[open] > summary .cnf-caret { transform: rotate(90deg); }
.cnf-mem-calc > summary .cnf-mem-calc-dica { margin-left: auto; font-weight: 600; color: var(--texto-suave); font-size: .76rem; }
.cnf-mem-calc-corpo { padding: 0 .8rem .8rem; }
.cnf-mem-base { background: #FBFAF7; border: 1px solid var(--borda); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .7rem; }
.cnf-mem-base dt { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin: 0 0 .2rem; }
.cnf-mem-base dd { margin: 0; font-size: 1.05rem; font-weight: 900; color: var(--grafite); font-variant-numeric: tabular-nums; }
.cnf-mem-faixas-titulo { margin-top: .3rem; }
.cnf-mem-aviso { font-size: .85rem; color: #9A6B08; background: #FBEFD6; border: 1px solid #F2DFB5; border-radius: 8px; padding: .5rem .7rem; margin: 0 0 .8rem; }
.cnf-mem-origem { margin: .6rem 0 0; }
.cnf-mem-calc table { width: 100%; border-collapse: collapse; }
.cnf-mem-calc table th { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--borda); }
.cnf-mem-calc table th.num, .cnf-mem-calc table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cnf-mem-calc table td { padding: .4rem .5rem; border-bottom: 1px solid var(--borda); font-size: .82rem; }
.cnf-mem-calc table tr.cnf-mem-calc-total td { font-weight: 800; color: var(--grafite); border-top: 1.5px solid var(--grafite); border-bottom: 0; }

@media (max-width: 720px) {
    .cnf-det-indicador { padding: 0 .8rem; }
    .cnf-det-indicador dd { font-size: 1.25rem; }
    .cnf-det-busca { margin-left: 0; max-width: none; }
    .cnf-pessoas thead { display: none; }
}

/* ================================================================
   Utilitários — gestão de templates versionados. Mesma identidade do
   resto do app (losango, etiquetas via .selo, hierarquia editorial).
   A "grade de campos" é a representação guiada do payload: pares
   campo→rótulo em vez de um textarea de JSON cru.
   ================================================================ */
.utl-campos { margin: .9rem 0 1.1rem; }
.utl-campos-grade {
    border: 1px solid var(--borda);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: .9rem;
}
.utl-campos-cabecalho,
.utl-campos-linha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}
.utl-campos-cabecalho {
    padding: .5rem .7rem;
    background: var(--cinza);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800;
    color: var(--texto-suave);
}
.utl-campos-linha { padding: .4rem .7rem; }
.utl-campos-linha:not(:last-child) { border-bottom: 1px solid var(--borda); }
.utl-campos-linha input { margin: 0; }
.utl-modo { max-width: 280px; }

@media (max-width: 640px) {
    .utl-campos-cabecalho { display: none; }
    .utl-campos-linha { grid-template-columns: 1fr; gap: .3rem; }
}

/* ── De-Para: execução assistida ───────────────────────────────────────────
   Usa a identidade já existente (losango, etiqueta de dossiê, flh-mov, cartao).
   Apenas o aviso de modelo e o fundo do aviso genérico são adicionados aqui. */
.dp-aviso-modelo {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm);
    color: #1e40af;
    padding: .65rem .9rem;
    font-size: .9rem;
    margin: .6rem 0 .9rem;
    line-height: 1.4;
}
.dp-aviso {
    background: #fef3c7;
    border-left: 3px solid #d97706;
    color: #78350f;
}

/* ── De-Para: diagnóstico de compatibilidade ───────────────────────────────
   Verde para "Pronto para importar", vermelho escuro para erros por campo. */
.dp-compat-ok {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--radius-sm);
    color: #166534;
    padding: .65rem .9rem;
    font-size: .9rem;
    margin: .6rem 0 .9rem;
}
.dp-erros-campo {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .3rem .8rem;
    font-size: .88rem;
    margin: .4rem 0;
}
.dp-erros-campo dt { font-weight: 600; color: var(--texto); align-self: start; }
.dp-erros-campo dd { margin: 0; color: var(--texto-suave); }
.dp-erros-campo dd ul { margin: 0; padding-left: 1.1rem; }
.dp-erros-campo dd li { margin: .15rem 0; }

/* ================================================================
   Utilitários — submenu do topbar (menu-button) e bancada de áreas.
   Linguagem de dossiê: losango, grafite/vermelho, fichas recortadas.
   Sem barra lateral colorida, sem cards SaaS idênticos, sem gradiente.
   ================================================================ */

/* Submenu do topbar: link principal (navega) + caret (abre o submenu). O
   submenu revela no foco do teclado (fallback sem JS) e no aria-expanded (com
   JS); nunca por hover, para o link navegar de primeira. */
.menu-grupo { position: relative; display: inline-flex; align-items: center; }
/* Encosta o caret no link reduzindo o padding direito DO LINK, sem margem
   negativa: assim o botão do caret não invade a área clicável do link (antes a
   margem -.35rem fazia o clique na borda direita do link cair no caret e abrir o
   submenu em vez de navegar). */
.menu a.menu-grupo-link { padding-right: .35rem; }
.menu-grupo-caret {
    border: 0;
    background: transparent;
    color: var(--texto-suave);
    font-size: .7rem;
    line-height: 1;
    padding: .35rem .4rem;
    margin-left: 0;
    border-radius: .4rem;
    cursor: pointer;
}
.menu-grupo-caret:hover { background: var(--cinza); color: var(--grafite); }
.menu-grupo-caret:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.menu-submenu {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    z-index: 40;
    min-width: 230px;
    margin: 0;
    padding: .35rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: 0 12px 30px -12px rgba(20,23,31,.35);
    display: none;
}
/* O submenu abre pelo caret (botão, JS, classe .--aberto) ou, sem JS, pelo foco
   do teclado. Nunca por hover do grupo: abrir por hover fazia o primeiro clique/
   toque no link "abrir o submenu" em vez de navegar (e, em telas de toque, exigia
   tocar duas vezes). O link navega sempre; só o caret abre o submenu. */
.menu-grupo--aberto .menu-submenu { display: block; }
html:not(.topbar-js) .menu-grupo:focus-within .menu-submenu { display: block; }
.menu-submenu li { margin: 0; }
.menu-submenu > li > a {
    display: block;
    width: 100%;
    padding: .5rem .7rem;
    border-radius: .45rem;
    text-decoration: none;
    color: var(--grafite);
    font-size: .9rem;
}
.menu-submenu > li > a:hover { background: var(--cinza); }
.menu-submenu > li > a.ativo { color: var(--vermelho); font-weight: 600; }
.menu-submenu > li > a:focus-visible { outline: 2px solid var(--vermelho); outline-offset: -2px; }

/* Terceiro nível (Conferências -> encargo -> modo): acordeão inline dentro do
   dropdown. O encargo é um <button> que expande Individual/Coletiva ao clicar
   (um aberto por vez), nunca por hover. Mais usável e à prova do bug de toque
   que um flyout lateral. */
.menu-sub-grupo { position: relative; }
.menu-sub-caret {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    width: 100%;
    padding: .5rem .7rem;
    border: 0;
    background: transparent;
    border-radius: .45rem;
    color: var(--grafite);
    font: inherit;
    font-size: .9rem;
    text-align: left;
    cursor: pointer;
}
.menu-sub-caret:hover { background: var(--cinza); }
.menu-sub-caret:focus-visible { outline: 2px solid var(--vermelho); outline-offset: -2px; }
.menu-sub-caret-seta { font-size: .65rem; color: var(--texto-suave); flex: none; }
.menu-sub-grupo--aberto > .menu-sub-caret { font-weight: 600; }
.menu-subsubmenu { list-style: none; margin: 0; padding: 0; display: none; }
.menu-sub-grupo--aberto > .menu-subsubmenu { display: block; }
html:not(.topbar-js) .menu-sub-grupo:focus-within > .menu-subsubmenu { display: block; }
.menu-subsubmenu a {
    display: block;
    padding: .45rem .7rem .45rem 1.5rem;
    border-radius: .45rem;
    text-decoration: none;
    color: var(--grafite);
    font-size: .88rem;
}
.menu-subsubmenu a:hover { background: var(--cinza); }
.menu-subsubmenu a.ativo { color: var(--vermelho); font-weight: 600; }
.menu-subsubmenu a:focus-visible { outline: 2px solid var(--vermelho); outline-offset: -2px; }

/* Bancada: as três áreas como fichas de navegação (links reais). A ativa
   vira grafite — estado não depende só de cor (fundo + losango + aria-current). */
.util-abas {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0 0 1.4rem;
}
.util-aba {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: .12rem;
    padding: .7rem .95rem .75rem;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 11px;
    color: var(--texto-suave);
    transition: border-color .16s ease, transform .16s ease;
}
.util-aba:hover { border-color: #c7c7d2; transform: translateY(-1px); }
.util-aba:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.util-aba-rotulo {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .98rem;
    font-weight: 700;
    color: var(--grafite);
    line-height: 1.2;
}
.util-aba-desc { font-size: .8rem; color: var(--texto-suave); }
.util-aba[aria-current="page"] {
    background: radial-gradient(140% 160% at 100% 0, #2a3142 0%, var(--grafite) 60%);
    border-color: var(--grafite);
}
.util-aba[aria-current="page"] .util-aba-rotulo { color: #fff; }
.util-aba[aria-current="page"] .util-aba-desc { color: #c9ccd6; }

/* Conteúdo das áreas */
.util-area .cabecalho-secao { align-items: flex-start; }
.util-acao-principal { box-shadow: 0 6px 18px -6px rgba(218,41,28,.55); }

/* Tabelas oficiais (consulta) — cada vigência é um bloco; a vigente recebe
   filete vermelho à esquerda, sem virar card colorido. */
.to-vigencia {
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-top: .9rem;
}
.to-vigencia--atual {
    border-color: var(--vermelho);
    box-shadow: inset 3px 0 0 var(--vermelho);
}
.to-vig-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .9rem;
    margin-bottom: .85rem;
}
.to-vig-id { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.to-vig-fonte { font-size: .85rem; color: var(--grafite); }
.to-vig-fonte-rotulo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-suave);
    margin-right: .25rem;
}
.to-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1.8rem;
    margin: 0 0 .85rem;
    padding: 0;
}
.to-meta div { display: flex; flex-direction: column; gap: .1rem; }
.to-meta dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
}
.to-meta dd { margin: 0; font-weight: 600; color: var(--grafite); }
.to-sub { font-size: .9rem; margin: 1rem 0 .4rem; color: var(--grafite); }
.to-vig-nota { margin-top: .7rem; }

/* Tela de tabelas oficiais (admin): um cartão por tipo, vigência atual em
   destaque e ações no menu kebab. */
.to-tipo-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem 1rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}
.to-tipo-id {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .8rem;
}
.to-tipo-id .cfg-titulo { margin: 0; }

/* Vigências anteriores recolhidas, para não poluir a tela principal. */
.to-historicos {
    margin-top: .9rem;
    border-top: 1px solid var(--borda);
    padding-top: .4rem;
}
.to-historicos-gatilho {
    cursor: pointer;
    font-weight: 600;
    color: var(--grafite);
    padding: .4rem 0;
}
.to-vigencia--futura { border-style: dashed; }

/* Painel de rascunho: editável, destacado, ainda não oficial. Recolhido por
   padrão numa faixa (igual aos históricos); expande sob demanda. */
.to-rascunho {
    border-color: var(--vermelho);
    box-shadow: inset 3px 0 0 var(--vermelho);
    margin-top: 1rem;
}
.to-rascunho > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--grafite);
    padding: .35rem 0;
}
.to-rascunho > summary .selo { margin-left: .4rem; }
.to-rascunho-faixa-dica { display: block; font-weight: 400; margin-top: .2rem; }
.to-rascunho[open] > summary { margin-bottom: .6rem; }
.to-rascunho-nota { margin: 0 0 .8rem; }
.to-rascunho-descartar { margin-top: .8rem; }
.to-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .9rem 1rem;
    align-items: end;
}

/* Faixas: a tabela de inputs ocupa a largura toda e CABE no cartão (rola só
   dentro do próprio bloco se faltar espaço; nunca vaza para fora da área). */
.to-faixas {
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: .7rem .9rem;
    margin: 1rem 0;
}
.to-faixas > legend {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-suave);
    padding: 0 .35rem;
}
.to-faixas-tabela { width: 100%; min-width: 460px; }
.to-faixas-tabela td { padding: .25rem .35rem; }
.to-faixas-tabela input { width: 100%; min-width: 0; box-sizing: border-box; }

/* Item de menu inerte (ação indisponível, ex.: editar uma publicada). */
.kebab-item--inerte {
    color: var(--texto-suave);
    cursor: default;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.kebab-item--inerte:hover { background: transparent; }
/* Item de ação bloqueado com o motivo à mostra (ex.: Excluir travado por
   conferência): empilha rótulo + nota e sinaliza claramente o desabilitado.
   Usa blocos (não flex) porque .kebab-item já força display:block. */
.kebab-item--bloqueada { cursor: not-allowed; }
.kebab-item--bloqueada .kebab-item-rotulo { display: block; font-weight: 600; }
.kebab-item-nota { display: block; font-size: .75rem; color: var(--texto-suave); }
.botao-perigo { color: var(--vermelho); border-color: var(--vermelho); }

/* Tela de tabelas oficiais em abas: cada aba é um cartão com a corrente. */
.to-aba { margin-top: 0; }
.to-corrente-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem 1rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}

/* Editar legislação (cirúrgico): recolhido, abre pelo menu. */
.to-legislacao {
    margin: 1rem 0;
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: .2rem .9rem;
}
.to-legislacao-gatilho {
    cursor: pointer;
    font-weight: 600;
    color: var(--grafite);
    padding: .55rem 0;
}
.to-legislacao[open] > .to-legislacao-gatilho { margin-bottom: .4rem; }

/* Painel de Históricos: overlay <dialog> sobre a tela. */
.to-hist-dialog {
    width: min(680px, 92vw);
    max-height: 86vh;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 1.3rem 1.4rem;
    color: var(--grafite);
    background: var(--branco, #fff);
    overflow: auto;
}
.to-hist-dialog::backdrop { background: rgba(20, 18, 16, .45); }
/* Campo de motivo na exclusão de conferência (dentro do overlay). */
.flh-excluir-motivo { display: block; margin: .9rem 0; }
.flh-excluir-motivo span { display: block; font-weight: 600; margin-bottom: .3rem; }
.flh-excluir-motivo textarea {
    width: 100%;
    font: inherit;
    padding: .5rem .6rem;
    border: 1px solid var(--borda);
    border-radius: .5rem;
    resize: vertical;
}
.to-hist-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .35rem;
}
.to-hist-titulo { margin: 0; }
.to-hist-lista { list-style: none; margin: .8rem 0 0; padding: 0; }
.to-hist-item { border-top: 1px solid var(--borda); }
.to-hist-faixa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem 1rem;
    flex-wrap: wrap;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: .85rem .2rem;
    font: inherit;
    color: var(--grafite);
}
.to-hist-faixa:hover { background: var(--cinza); }
.to-hist-faixa:focus-visible { outline: 2px solid var(--vermelho); outline-offset: -2px; }
/* Linha de histórico apenas informativa (sem carregar sob demanda): a faixa de
   parâmetros já traz todos os valores, então a linha não é clicável. */
.to-hist-faixa--estatica { cursor: default; }
.to-hist-faixa--estatica:hover { background: transparent; }
.to-hist-periodo { font-weight: 600; }
.to-hist-legis { font-size: .85rem; color: var(--texto-suave); }
/* Corpo do histórico aberto: tabela completa (sob demanda) + editar legislação. */
.to-hist-corpo { padding-bottom: .4rem; }
.to-hist-detalhe { padding: .2rem .2rem .6rem; }
.to-hist-corpo .to-legislacao { margin: .2rem 0 0; }

/* Prévia do cálculo (motor real, em memória) antes de publicar. */
.to-previa {
    border-top: 1px dashed var(--borda);
    margin-top: .9rem;
    padding-top: .9rem;
}
.to-previa-resultado {
    margin-top: .8rem;
    border: 1px solid var(--vermelho);
    border-radius: 10px;
    padding: .85rem 1rem;
    background: var(--areia, #faf7f2);
}
.to-previa-frase { margin: 0 0 .6rem; color: var(--grafite); }
.to-previa-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    margin: 0 0 .6rem;
    font-size: 1.05rem;
}
.to-previa-total strong { color: var(--vermelho); }
.to-previa-detalhe { display: flex; flex-direction: column; gap: .25rem; }
.to-previa-linha {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    font-size: .88rem;
    color: var(--grafite);
    padding: .2rem 0;
    border-top: 1px solid var(--borda);
}

/* Fluxo do De-Para: quatro movimentos, sem stepper de círculos. */
.util-fluxo {
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.util-fluxo li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    font-size: .9rem;
    color: var(--texto);
}
.util-fluxo-n {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: .8rem;
    color: var(--vermelho);
    min-width: 1.1rem;
}

/* Modelo em uso (De-Para) */
.util-modelo-topo {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: .5rem;
}
.util-modelo-nome { font-size: 1.15rem; margin: .1rem 0 .35rem; color: var(--grafite); }
.util-modelo-versao { font-size: .82rem; color: var(--texto-suave); margin-left: .4rem; }

/* Lista editorial (modelos publicados, modelos de transformação, folhas) */
.util-lista { list-style: none; margin: .2rem 0 0; padding: 0; }
.util-lista-item {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 0;
    border-bottom: 1px solid var(--cinza);
}
.util-lista-item:last-child { border-bottom: 0; }
.util-lista-corpo { min-width: 0; }
.util-lista-corpo strong { color: var(--grafite); }
.util-lista-meta { margin: .25rem 0 0; }

/* ── Menu de três pontos (kebab) das ações de template ──────────
   <details> nativo: abre no clique sem JS. A seta padrão do summary
   é removida em favor do ícone de três pontos. */
.util-lista-acoes { position: relative; flex-shrink: 0; }
.kebab { position: relative; }
.kebab-gatilho {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--texto-suave);
    border-radius: .45rem;
    cursor: pointer;
    list-style: none;
}
.kebab-gatilho::-webkit-details-marker { display: none; }
.kebab-gatilho::marker { content: ''; }
.kebab-gatilho:hover { background: var(--cinza); color: var(--grafite); }
.kebab-gatilho:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.kebab[open] .kebab-gatilho { background: var(--cinza); color: var(--grafite); }
.kebab-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .3rem);
    z-index: 40;
    min-width: 190px;
    padding: .35rem;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: 0 12px 30px -12px rgba(20,23,31,.35);
    display: flex;
    flex-direction: column;
}
.kebab-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: .5rem .7rem;
    border: 0;
    background: transparent;
    border-radius: .45rem;
    text-decoration: none;
    color: var(--grafite);
    font-size: .9rem;
    font-family: inherit;
    cursor: pointer;
}
.kebab-item:hover { background: var(--cinza); }
.kebab-item:focus-visible { outline: 2px solid var(--vermelho); outline-offset: -2px; }
.kebab-item--perigo { color: var(--vermelho); }
.kebab-item-form { margin: 0; }

/* Critérios resumidos (Correlação) */
.util-criterios { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--texto-suave); font-size: .88rem; }
.util-criterios li { margin: .2rem 0; }

.util-vazio { border-style: dashed; }

@media (max-width: 640px) {
    .util-aba { flex-basis: 100%; }
    /* No mobile o submenu ocupa a largura disponível, ancorado à esquerda. */
    .menu-submenu { left: 0; right: auto; min-width: 200px; }
}

/* ── Histórico de conferências por competência ──────────────────
   A tela agrupa as conferências por competência: uma navegação à
   esquerda e, à direita, a progressão de divergências de cada encargo
   (rodada a rodada) com o status geral da competência. Pura leitura;
   reusa .cartao, .selo e os tokens do sistema. */
.cf-filtros-cartao .filtros { margin-bottom: 0; }

.cf-hist-grid {
    display: grid;
    grid-template-columns: minmax(210px, 260px) 1fr;
    gap: 1.1rem;
    align-items: start;
    margin-bottom: 1.2rem;
}

.cf-competencias { position: sticky; top: 1rem; }
.cf-competencias-titulo { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin: 0 0 .7rem; }
.cf-competencias-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }

.cf-competencia-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "rotulo selo" "tipo selo";
    gap: .1rem .5rem;
    align-items: center;
    padding: .6rem .7rem;
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--texto);
    background: #fff;
    transition: border-color .12s ease, background .12s ease;
}
.cf-competencia-item:hover { border-color: #c9c9d2; background: #fcfcfd; }
.cf-competencia-item--ativa { border-color: var(--vermelho); background: #fdf5f4; }
.cf-competencia-rotulo { grid-area: rotulo; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-competencia-tipo { grid-area: tipo; font-size: .74rem; color: var(--texto-suave); text-transform: lowercase; }
.cf-competencia-selo { grid-area: selo; font-size: .68rem; padding: .2rem .5rem; }

.cf-competencia-aberta { display: flex; flex-direction: column; gap: 1.1rem; }

.cf-status-geral { display: flex; flex-direction: column; gap: .5rem; }
.cf-status-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.cf-status-eyebrow { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); margin-bottom: .2rem; }
.cf-status-titulo { margin: 0; font-size: 1.25rem; }
.cf-status-selo { flex-shrink: 0; }
.cf-status-resumo { margin: 0; color: var(--texto-suave); font-size: .92rem; }

.cf-modulo { display: flex; flex-direction: column; gap: .9rem; }
.cf-modulo-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cf-modulo-identidade { display: flex; align-items: center; gap: .5rem; }
.cf-modulo-titulo { margin: 0; font-size: 1.05rem; letter-spacing: .02em; }
.cf-modulo-tag { font-size: .68rem; padding: .2rem .5rem; }

/* Curva de divergências: uma barra por rodada, a queda fica evidente. */
.cf-curva {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    height: 90px;
    padding: .4rem .2rem 0;
    border-bottom: 1px solid var(--borda);
}
.cf-curva-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .3rem; flex: 1 1 0; min-width: 14px; height: 100%; }
.cf-curva-barra {
    width: 100%;
    max-width: 34px;
    min-height: 3px;
    background: var(--vermelho);
    border-radius: 4px 4px 0 0;
    transition: height .2s ease;
}
.cf-curva-barra--zero { background: var(--verde); }
.cf-curva-num { font-size: .72rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.cf-rodadas { width: 100%; }
.cf-rodadas th, .cf-rodadas td { vertical-align: middle; }
.cf-rodada-numero { font-weight: 700; }
.cf-rodada--atual td { background: #fbfbfc; }
.cf-divergencias { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--vermelho); }
.cf-divergencias--zero { color: var(--verde); }
.cf-selo-obsoleta { font-size: .66rem; padding: .16rem .45rem; margin-left: .4rem; }
.cf-rodada-acoes { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; white-space: nowrap; }
.cf-rodada-inerte { color: var(--texto-suave); font-size: .82rem; text-transform: lowercase; }

@media (max-width: 820px) {
    .cf-hist-grid { grid-template-columns: 1fr; }
    .cf-competencias { position: static; }
    .cf-competencias-lista { flex-direction: row; flex-wrap: wrap; }
    .cf-competencia-item { min-width: 150px; }
}

/* ── Modo de importação: substituir vs somar (append) ───────────── */
.flh-modo {
    border: 1px solid var(--borda);
    border-radius: var(--radius);
    padding: .8rem 1rem 1rem;
    margin-bottom: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.flh-modo legend { font-weight: 700; font-size: .9rem; padding: 0 .4rem; }
.flh-modo-opcao { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.flh-modo-opcao input { margin-top: .25rem; flex-shrink: 0; }
.flh-modo-opcao span { display: flex; flex-direction: column; gap: .15rem; }
.flh-modo-opcao small { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   De-Para — Etapas de upload e mapeamento (redesign, Fatia 0)
   Reusa a identidade FolhaLab (grafite/vermelho/neutros, losango, etiquetas).
   Selos de status seguem as cores semânticas do handoff.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cabeçalho editorial das etapas */
.dp-kicker {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .5rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vermelho);
}
.dp-titulo { font-size: 1.6rem; line-height: 1.12; margin: 0 0 .5rem; color: var(--grafite); font-weight: 800; letter-spacing: -.01em; }
.dp-subtitulo { max-width: 60ch; margin: 0 0 1.3rem; color: var(--texto-suave); font-size: .95rem; line-height: 1.5; }

/* Stepper de 4 fichas (não é tablist; é a progressão do fluxo) */
.dp-stepper { display: flex; gap: .55rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.dp-stepper-item { flex: 1 1 0; min-width: 0; }
.dp-stepper-ficha {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    height: 100%;
    padding: .7rem .8rem;
    background: #fbfbfc;
    border: 1px solid var(--borda);
    border-top: 3px solid var(--borda);
    border-radius: 7px;
    text-decoration: none;
    color: inherit;
}
a.dp-stepper-ficha:hover { background: #fff; border-color: #c9c9d2; }
a.dp-stepper-ficha:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.dp-stepper-marca {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 800;
    background: #e7e7ec;
    color: #6b6b7a;
}
.dp-stepper-corpo { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.dp-stepper-ordinal { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); }
.dp-stepper-nome { font-size: .9rem; font-weight: 700; color: var(--grafite); line-height: 1.2; }
.dp-stepper-desc { font-size: .74rem; color: var(--texto-suave); line-height: 1.3; }
.dp-stepper-item.is-atual .dp-stepper-ficha { background: #fff; border-color: var(--grafite); border-top-color: var(--vermelho); }
.dp-stepper-item.is-atual .dp-stepper-marca { background: var(--vermelho); color: #fff; }
.dp-stepper-item.is-feito .dp-stepper-marca { background: var(--verde); color: #fff; }
.dp-stepper-item.is-futuro .dp-stepper-ficha { opacity: .6; }
.dp-stepper-item.is-futuro .dp-stepper-nome { color: #6b6b7a; }

/* Etapa 1: grid de envio (contexto | dropzone) */
.dp-upload-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.2rem; align-items: start; }
.dp-upload-intro { margin-bottom: 0; }
.dp-upload-zona-cartao { margin-bottom: 0; }
.dp-upload-copy { margin: 0 0 .8rem; }
.dp-exemplo-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    background: var(--vermelho);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(218, 41, 28, .24);
}
.dp-exemplo-cta:hover { filter: brightness(.95); }
.dp-exemplo-cta:focus-visible { outline: 2px solid var(--grafite); outline-offset: 2px; }
@media (max-width: 820px) {
    .dp-upload-grid { grid-template-columns: 1fr; }
    .dp-stepper { flex-wrap: wrap; }
    .dp-stepper-item { flex-basis: calc(50% - .3rem); }
}

/* Etapa 2: barra de resumo do arquivo + modo de saída */
.dp-resumo {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .85rem 1.1rem;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 10px;
    margin-bottom: .7rem;
}
.dp-resumo-doc {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 8px;
    background: var(--cinza) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6b7a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") center/1.1rem no-repeat;
}
.dp-resumo-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.dp-resumo-nome { font-weight: 700; color: var(--grafite); font-size: .95rem; overflow-wrap: anywhere; }
.dp-resumo-meta { font-size: .8rem; color: var(--texto-suave); }
.dp-seg { display: inline-flex; padding: .2rem; background: var(--cinza); border-radius: 999px; gap: .15rem; }
.dp-seg-item {
    padding: .4rem .9rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--texto-suave);
    text-decoration: none;
    white-space: nowrap;
}
.dp-seg-item:hover { color: var(--grafite); }
.dp-seg-item.is-sel { background: var(--grafite); color: #fff; }
.dp-seg-item:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.dp-explica { margin: 0 0 1.3rem; font-size: .85rem; color: var(--texto-suave); line-height: 1.5; }
.dp-explica span { color: var(--vermelho); font-weight: 800; }

/* Grid do mapeamento: rail sticky + cards. Nenhum ancestral com overflow:hidden. */
.dp-mapa-grid { display: grid; grid-template-columns: 280px 1fr; gap: 1.4rem; align-items: start; }
.dp-rail {
    position: sticky;
    top: 16px;
    background: var(--grafite);
    color: #fff;
    border-radius: 14px;
    padding: 1.15rem 1.2rem;
}
.dp-rail-kicker { margin: 0; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a6adbb; }
.dp-rail-fracao { margin: .15rem 0 .1rem; font-size: 2.1rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.dp-rail-falta { margin: 0 0 .8rem; font-size: .8rem; color: #c3c8d4; }
.dp-rail-barra { height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.dp-rail-barra-fill { display: block; height: 100%; background: var(--vermelho); border-radius: 999px; transition: width .3s ease; }
.dp-rail.is-completo .dp-rail-barra-fill { background: var(--verde); }
.dp-rail-legenda { display: flex; flex-direction: column; gap: .4rem; margin: 1rem 0; font-size: .76rem; color: #d3d7e0; }
.dp-rail-legenda span { display: flex; align-items: center; gap: .5rem; }
.dp-leg { width: .8rem; height: .8rem; border-radius: 3px; flex-shrink: 0; }
.dp-leg-obrig { background: #E7625A; }
.dp-leg-op { background: #7d8496; }
.dp-leg-ok { background: var(--verde); }
.dp-rail-nota { margin: 0; font-size: .74rem; line-height: 1.45; color: #9aa1b0; border-top: 1px solid rgba(255,255,255,.12); padding-top: .8rem; }

/* Cabeçalhos de grupo */
.dp-cards { min-width: 0; }
.dp-grupo-titulo { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grafite); margin: 0 0 .9rem; }
.dp-grupo-op { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--borda); color: var(--texto-suave); }

/* TargetCard */
.dp-card { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: .9rem; }
.dp-card:last-child { margin-bottom: 0; }
.dp-card-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.dp-card-id { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dp-card-nome { font-size: 1rem; font-weight: 800; color: var(--grafite); letter-spacing: -.01em; }
.dp-card-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; font-weight: 700; color: var(--texto-suave); background: var(--cinza); border-radius: 5px; padding: .1rem .4rem; }
.dp-selo { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 5px; padding: .12rem .45rem; }
.dp-selo-obrig { background: #FBE3E0; color: #C4362B; }
.dp-selo-op { background: #EFEDE7; color: #8A857D; }
.dp-badge { flex-shrink: 0; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; padding: .18rem .5rem; white-space: nowrap; }
.dp-badge-falta { background: #FBE3E0; color: #C4362B; }
.dp-badge-trad { background: #FBEEDA; color: #B7791F; }
.dp-badge-fixo, .dp-badge-sug { background: #E7EEFC; color: #2563EB; }
.dp-badge-ok { background: #E2F1E9; color: #1F8F5F; }
.dp-badge-op, .dp-badge-skip { background: #EFEDE7; color: #8A857D; }
.dp-card-desc { margin: .5rem 0 .85rem; font-size: .82rem; color: var(--texto-suave); line-height: 1.45; }
.dp-card-ex { color: #a7a29a; }

/* Segmentado de origem dentro do card (só com JS) */
.dp-modos { display: none; gap: .4rem; margin-bottom: .8rem; }
.dp-js .dp-modos { display: flex; flex-wrap: wrap; }
.dp-modo { padding: .38rem .7rem; border: 1px solid var(--borda); background: #fff; border-radius: 8px; font: inherit; font-size: .8rem; font-weight: 700; color: var(--texto-suave); cursor: pointer; }
.dp-modo:hover { border-color: #c7c7d2; color: var(--grafite); }
.dp-modo.is-sel { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.dp-modo:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }

/* Bloco de origem por coluna */
.dp-origem-linha { display: flex; align-items: center; gap: .6rem; background: #FAF9F5; border: 1px solid #EEEBE4; border-radius: 10px; padding: .6rem .75rem; flex-wrap: wrap; }
.dp-origem-rot { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a19b92; flex: none; }
.dp-select { flex: 1; min-width: 140px; padding: .45rem .6rem; border: 1px solid var(--borda); border-radius: 8px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--grafite); background: #fff; }
.dp-select:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 1px; }
.dp-traduzir { flex: none; padding: .42rem .7rem; border: 1px solid var(--borda); background: #fff; border-radius: 8px; font: inherit; font-size: .8rem; font-weight: 700; color: var(--texto-suave); cursor: not-allowed; opacity: .7; }
.dp-amostra { margin: .5rem 0 0; font-size: .78rem; color: var(--texto-suave); padding-left: .15rem; }
.dp-amostra span { color: var(--texto); font-weight: 600; }

/* Bloco de valor fixo */
.dp-fixo { display: flex; align-items: center; gap: .6rem; background: #F5F6FC; border: 1px solid #E1E6F6; border-radius: 10px; padding: .6rem .75rem; }
.dp-fixo-rot { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #7C8AB0; flex: none; }
.dp-fixo-input { flex: 1; padding: .45rem .6rem; border: 1px solid #D3DAF0; border-radius: 8px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--grafite); background: #fff; }
.dp-fixo-input:focus-visible { outline: 2px solid #2563EB; outline-offset: 1px; }

/* Bloco não usar */
.dp-skip-nota { margin: 0; font-size: .8rem; color: #a19b92; background: #FAF9F5; border: 1px dashed var(--borda); border-radius: 10px; padding: .6rem .75rem; }

/* Sem JS, mostramos select + valor fixo juntos (fallback). Com JS, só o bloco ativo. */
.dp-js [data-dp-bloco] { display: none; }
.dp-js [data-dp-bloco].is-ativo { display: block; }
.dp-js [data-dp-bloco="coluna"].is-ativo,
.dp-js [data-dp-bloco="fixo"].is-ativo { display: block; }
.dp-fixo, .dp-skip { margin-top: .6rem; }

/* Saída livre */
.dp-livre-saida { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.dp-livre-saida select, .dp-livre-saida input { flex: 1; min-width: 160px; padding: .45rem .6rem; border: 1px solid var(--borda); border-radius: 8px; font: inherit; font-size: .85rem; color: var(--grafite); background: #fff; }

/* Footer de ação */
.dp-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--borda); }
.dp-footer-msg { margin: 0; font-size: .85rem; font-weight: 600; }
.dp-footer-msg.is-ok { color: var(--verde); }
.dp-footer-msg.is-falta { color: var(--vermelho); }
.dp-footer-acoes { display: flex; gap: .6rem; }
.botao.is-bloqueado, .dp-footer .botao:disabled { opacity: .5; cursor: not-allowed; filter: none; }

@media (max-width: 900px) {
    .dp-mapa-grid { grid-template-columns: 1fr; }
    .dp-rail { position: static; }
    .dp-titulo { font-size: 1.35rem; }
}

/* ── Painel "Traduzir valores" ─────────────────────────────────────────────
   <details> nativo (abre sem JS). Corpo verde-claro do handoff. */
.dp-trad { margin-top: .6rem; }
.dp-trad-sum {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem .75rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: #fff;
    font-size: .8rem;
    font-weight: 700;
    color: var(--grafite);
    cursor: pointer;
    list-style: none;
    width: fit-content;
}
.dp-trad-sum::-webkit-details-marker { display: none; }
.dp-trad-sum::marker { content: ''; }
.dp-trad-sum:hover { border-color: #c7c7d2; }
.dp-trad-sum:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.dp-trad[open] .dp-trad-sum { border-color: #C4E4D2; background: #EEF7F1; }
.dp-trad-sum-hint { font-weight: 600; color: var(--verde); font-size: .74rem; }

.dp-trad-corpo {
    margin-top: .6rem;
    padding: .9rem 1rem;
    background: #F7FBF9;
    border: 1px solid #C4E4D2;
    border-radius: 12px;
}
.dp-trad-sugestao {
    display: block;
    width: 100%;
    text-align: left;
    padding: .5rem .7rem;
    margin-bottom: .8rem;
    border: 1px dashed #9AD3B4;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: #146043;
    cursor: pointer;
}
.dp-trad-sugestao:hover { background: #EEF7F1; }

.dp-trad-modos { display: inline-flex; gap: .15rem; padding: .2rem; background: #E6F1EB; border-radius: 999px; margin-bottom: .8rem; }
.dp-trad-modo { padding: .35rem .8rem; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: .78rem; font-weight: 700; color: #146043; cursor: pointer; }
.dp-trad-modo.is-sel { background: var(--verde); color: #fff; }
.dp-trad-modo:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.dp-trad-info { margin: 0 0 .5rem; font-size: .8rem; color: #3f6b55; }
.dp-trad-rot { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #56746a; margin-bottom: .3rem; }
.dp-trad-busca, .dp-trad-para, .dp-trad-find, .dp-trad-findto {
    padding: .42rem .6rem; border: 1px solid #CFE6DA; border-radius: 8px; font: inherit; font-size: .85rem; background: #fff; color: var(--grafite);
}
.dp-trad-busca { width: 100%; margin-bottom: .6rem; }
.dp-trad-busca:focus-visible, .dp-trad-para:focus-visible, .dp-trad-find:focus-visible, .dp-trad-findto:focus-visible { outline: 2px solid var(--verde); outline-offset: 1px; }

.dp-trad-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.dp-trad-chip {
    padding: .3rem .6rem; border: 1px solid #CFE6DA; border-radius: 999px; background: #fff;
    font: inherit; font-size: .8rem; font-weight: 600; color: var(--grafite); cursor: pointer;
    white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.dp-trad-chip:hover { border-color: #9AD3B4; }
.dp-trad-chip.is-sel { background: var(--verde); border-color: var(--verde); color: #fff; }
.dp-trad-chip:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.dp-trad-vazio { margin: .2rem 0; font-size: .78rem; color: #6f8c80; }

.dp-trad-passo2 { border-top: 1px solid #D8EAE1; padding-top: .7rem; }
.dp-trad-passo2-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dp-trad-selados { font-size: .8rem; font-weight: 600; color: #146043; min-width: 80px; }
.dp-trad-para { flex: 1; min-width: 140px; }
.dp-trad-add {
    padding: .42rem .8rem; border: 0; border-radius: 8px; background: var(--verde); color: #fff;
    font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.dp-trad-add:hover { filter: brightness(.95); }
.dp-trad-add:focus-visible { outline: 2px solid var(--grafite); outline-offset: 2px; }

.dp-trad-ajuda { margin: 0 0 .6rem; font-size: .8rem; color: #3f6b55; line-height: 1.45; }
.dp-trad-find-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.dp-trad-regras { margin: .8rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.dp-trad-regra {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .4rem .6rem; background: #fff; border: 1px solid #D8EAE1; border-radius: 8px; font-size: .82rem; color: var(--grafite);
}
.dp-trad-remover { border: 0; background: transparent; color: var(--vermelho); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.dp-trad-remover:hover { text-decoration: underline; }

.dp-trad-fallback-js { margin-top: .9rem; border-top: 1px solid #D8EAE1; padding-top: .7rem; }
.dp-trad-fb-opcoes { display: inline-flex; gap: .4rem; margin-top: .3rem; }
.dp-trad-fb { padding: .35rem .7rem; border: 1px solid #CFE6DA; border-radius: 8px; background: #fff; font: inherit; font-size: .78rem; font-weight: 700; color: var(--grafite); cursor: pointer; }
.dp-trad-fb.is-sel { background: var(--grafite); border-color: var(--grafite); color: #fff; }

/* Slots crus (fallback sem JS): visíveis só quando o JS não assumiu. */
.dp-trad-fallback { display: flex; flex-direction: column; gap: .5rem; }
.dp-js .dp-trad-fallback { display: none; }
.dp-trad-slot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dp-trad-slot select, .dp-trad-slot input { padding: .4rem .55rem; border: 1px solid #CFE6DA; border-radius: 8px; font: inherit; font-size: .82rem; background: #fff; }
.dp-trad-slot input { flex: 1; min-width: 120px; }
.dp-trad-slot-fb { border-top: 1px solid #D8EAE1; padding-top: .5rem; margin-top: .2rem; }

/* ── Etapa 3: prévia da transformação ─────────────────────────────────────── */
.dp-prev-banner {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem 1rem;
    border-radius: 12px;
    margin-bottom: 1.2rem;
    border: 1px solid transparent;
}
.dp-prev-banner p { margin: 0; font-size: .9rem; font-weight: 600; }
.dp-prev-banner.is-ok { background: #E2F1E9; border-color: #C4E4D2; color: #146043; }
.dp-prev-banner.is-pend { background: #FBEEDA; border-color: #F0DCB5; color: #B7791F; }
.dp-prev-banner-icone {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 900;
    font-size: .85rem;
}
.dp-prev-banner.is-ok .dp-prev-banner-icone { background: var(--verde); color: #fff; }
.dp-prev-banner.is-pend .dp-prev-banner-icone { background: var(--ambar); color: #fff; }
.dp-prev-aviso { margin: 0 0 .8rem; font-size: .84rem; color: var(--texto-suave); }

.dp-prev-kicker { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grafite); }

.dp-prev-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: 12px; background: #fff; }
.dp-prev-tabela { width: 100%; border-collapse: collapse; font-size: .84rem; }
.dp-prev-tabela th, .dp-prev-tabela td { padding: .55rem .8rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--borda); }
.dp-prev-tabela thead th { background: #FAF9F5; border-bottom: 1px solid var(--borda); }
.dp-prev-tabela tbody tr:last-child td { border-bottom: 0; }
.dp-prev-th-code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); }
.dp-prev-th-rot { display: block; font-size: .85rem; font-weight: 800; color: var(--grafite); }
.dp-prev-tabela td { color: var(--texto); }
.dp-prev-td-trad { background: #EEF7F1; color: #146043; font-weight: 700; }

.dp-prev-legenda { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 0; font-size: .78rem; color: var(--texto-suave); }
.dp-prev-legenda-amostra { flex-shrink: 0; width: .9rem; height: .9rem; border-radius: 3px; background: #EEF7F1; border: 1px solid #C4E4D2; }

.dp-prev-erros { margin-top: 1rem; }
.dp-prev-erros summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--grafite); }
.dp-prev-erros summary:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }

.dp-prev-acoes { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--borda); }
.dp-prev-acoes-primaria { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dp-prev-acoes-primaria form { margin: 0; }
.dp-prev-importar { background: var(--verde); box-shadow: 0 6px 16px rgba(31, 143, 95, .24); }
.dp-prev-importar:hover { filter: brightness(.95); }

/* ── Etapa 4: sucesso da importação ───────────────────────────────────────── */
.dp-sucesso-cartao { max-width: 560px; margin: 0 auto; text-align: center; padding: 2.2rem 1.6rem; }
.dp-sucesso-icone {
    width: 4rem; height: 4rem; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    background: #E2F1E9; color: var(--verde); border-radius: 16px;
    font-size: 1.8rem; font-weight: 900;
}
.dp-sucesso-titulo { font-size: 1.5rem; font-weight: 800; color: var(--grafite); margin: 0 0 .6rem; }
.dp-sucesso-texto { max-width: 44ch; margin: 0 auto 1.4rem; color: var(--texto-suave); font-size: .95rem; line-height: 1.5; }
.dp-sucesso-acoes { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }