/* Cofre de senhas (Central → Cofre, #/cofre; views/cofre.js).
   Navy só no bloco da trava (ou no da primeira entrada): um por tela. Amarelo só no asterisco. Valores em Chivo Mono. */

/* ---------- Bloco da trava: trancado, aberto ou bloqueado ---------- */
.cf-trava { display: flex; align-items: center; justify-content: space-between; gap: 20px 36px; flex-wrap: wrap; margin-bottom: 24px; padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 34px); }
.cf-trava__texto { display: grid; gap: 8px; max-width: 64ch; min-width: 0; }
.cf-trava h2 { font-size: clamp(20px, 2.1vw, 27px); }
.cf-trava .rotulo { display: inline-flex; align-items: center; gap: 8px; }
.cf-trava .rotulo .ico { width: 15px; height: 15px; }
.cf-trava__acao { display: grid; gap: 8px; justify-items: start; }
.cf-trava__tempo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 0; font-family: var(--display); font-weight: 500; font-size: clamp(36px, 4.4vw, 56px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--papel); }
.cf-trava__tempo small { font: 400 calc(11.5px * var(--fs, 1)) var(--dados); letter-spacing: .1em; text-transform: uppercase; color: rgba(241, 239, 232, .64); }
.cf-ast { color: var(--amarelo); }
.cf-trava .botao, .cf-cadastro__intro .botao { background: var(--papel); color: var(--navy); }
.cf-trava .botao--fantasma { background: transparent; color: var(--papel); border-color: rgba(241, 239, 232, .32); }
.cf-trava[data-estado="bloqueado"] .cf-trava__tempo { color: #F4A39C; }
/* Aberto: faixa de uma linha (a lista é o que importa). Trancado e bloqueado continuam como bloco grande. */
.cf-trava[data-estado="aberto"] { padding: 10px clamp(16px, 2vw, 22px) 10px clamp(18px, 2.2vw, 26px); min-height: 56px; gap: 10px 20px; margin-bottom: 20px; border-radius: 18px; }
.cf-trava__faixa { display: flex; align-items: baseline; gap: 6px 12px; margin: 0; color: var(--papel); flex-wrap: wrap; min-width: 0; }
.cf-trava__faixa strong { font: 600 calc(15px * var(--fs, 1)) var(--texto); letter-spacing: -.005em; }
.cf-trava__mini { font: 400 calc(13px * var(--fs, 1)) var(--dados); font-variant-numeric: tabular-nums; color: rgba(241, 239, 232, .72); cursor: help; }
.cf-trava__mini [data-relogio] { font: 500 calc(18px * var(--fs, 1)) var(--dados); letter-spacing: .02em; color: var(--papel); }
.cf-trava[data-estado="aberto"] .botao { min-height: 36px; }
[data-tema="escuro"] .cf-trava { box-shadow: inset 0 0 0 1px rgba(241, 239, 232, .08); } /* navy sobre o preto: a borda separa o bloco do fundo */
.cf-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Código de 6 dígitos (trava, janela de desbloqueio, cadastro, zerar 2FA) ---------- */
.cf-codigo { display: grid; gap: 8px; justify-items: start; }
.cf-codigo__rotulo { font: 400 calc(11px * var(--fs, 1)) var(--dados); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.cf-codigo__linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* 6 dígitos + o espaçamento entre letras + as margens (o espaçamento também entra depois do último dígito: a margem esquerda compensa). */
input.cf-codigo__campo {
  width: calc(6ch + 1.8em + 30px); padding: 9px 10px 9px calc(10px + .3em); border-radius: 14px; text-align: center;
  font: 500 calc(26px * var(--fs, 1))/1.15 var(--dados); letter-spacing: .3em; font-variant-numeric: tabular-nums;
}
input.cf-codigo__campo--rec { width: calc(11ch + 1.1em + 30px); padding-left: calc(10px + .1em); letter-spacing: .1em; font-size: calc(19px * var(--fs, 1)); text-transform: uppercase; }
input.cf-codigo__campo::placeholder { color: var(--tinta-3); }
input.cf-codigo__campo:disabled { opacity: .5; }
.cf-codigo__msg { min-height: 1.35em; max-width: 46ch; font-size: calc(13.5px * var(--fs, 1)); line-height: 1.35; color: var(--erro); }
.cf-codigo__msg:empty { min-height: 0; }
.cf-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--tinta-2); font: 500 calc(13px * var(--fs, 1)) var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.cf-link:hover { color: var(--tinta); }
/* sobre o navy */
.cf-trava .cf-codigo__rotulo, .cf-trava .cf-link { color: rgba(241, 239, 232, .72); }
.cf-trava .cf-link:hover { color: var(--papel); }
.cf-trava input.cf-codigo__campo { background: rgba(241, 239, 232, .08); border-color: rgba(241, 239, 232, .3); color: var(--papel); }
.cf-trava input.cf-codigo__campo::placeholder { color: rgba(241, 239, 232, .3); }
.cf-trava input.cf-codigo__campo:hover { border-color: rgba(241, 239, 232, .5); }
.cf-trava input.cf-codigo__campo:focus { border-color: var(--papel); box-shadow: 0 0 0 4px rgba(241, 239, 232, .14); }
.cf-trava .cf-codigo__msg { color: #F4A39C; }
.cf-trava :focus-visible { outline-color: var(--amarelo); }

/* ---------- Abas e filtros ---------- */
.cf-aba-num { font: 400 calc(11px * var(--fs, 1)) var(--dados); color: var(--tinta-2); margin-left: 2px; }
.cf-aba-num:empty { display: none; }
.cf-filtros { gap: 10px; }
.cf-busca { flex: 1 1 260px; }

/* Controle segmentado dos tipos (lista e formulário). Ativo = tinta sobre o fundo: sem amarelo, o acento continua no asterisco. */
.cf-tipos { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); }
.cf-tipos button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: none; font: 600 calc(13px * var(--fs, 1)) var(--texto); color: var(--tinta-2); cursor: pointer; white-space: nowrap; transition: background-color var(--t-rapido), color var(--t-rapido); }
.cf-tipos button:hover { color: var(--tinta); background: var(--linha-suave); }
.cf-tipos button[aria-pressed="true"] { background: var(--tinta); color: var(--fundo, #F1EFE8); }
.cf-tipos button:active { transform: translateY(1px); }
.cf-tipos button:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.cf-tipos__n { font: 400 calc(11.5px * var(--fs, 1)) var(--dados); font-variant-numeric: tabular-nums; opacity: .75; }
.cf-tipos .ico { width: 15px; height: 15px; }
.cf-filtros__sel { display: contents; }
.cf-filtros .sel { min-height: 40px; max-width: 260px; }
.cf-contagem { margin-left: auto; font: 400 calc(12px * var(--fs, 1)) var(--dados); letter-spacing: .04em; color: var(--tinta-2); white-space: nowrap; }

/* ---------- Lista: organização → grupo → segredos ---------- */
.cf-lista { display: grid; gap: 16px; }
.cf-org { padding: 16px 20px 8px; }
.cf-org__cab { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; }
.cf-org__cab h2 { margin: 0; font-size: calc(17px * var(--fs, 1)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-org__resumo { margin-left: auto; white-space: nowrap; font: 400 calc(12px * var(--fs, 1)) var(--dados); color: var(--tinta-2); }
.cf-org .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: calc(12.5px * var(--fs, 1)); }
.cf-tipo-cab { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; padding-top: 16px; border-top: 1px solid var(--linha); font: 650 calc(14px * var(--fs, 1)) var(--texto); color: var(--tinta); }
.cf-grupo:first-of-type .cf-tipo-cab { border-top: 0; padding-top: 4px; margin-top: 8px; }
/* Ícone do tipo num quadradinho: é o que separa Logins, Chaves e MCPs de relance. */
.cf-tipo-cab .ico { box-sizing: content-box; width: 15px; height: 15px; padding: 5px; border-radius: 8px; background: var(--linha-suave); border: 1px solid var(--linha); color: var(--tinta); flex: none; }
.cf-tipo-cab__n { font: 400 calc(12px * var(--fs, 1)) var(--dados); color: var(--tinta-2); }
.cf-tipo-cab .selo { margin-left: 4px; }
.cf-selo-tipo { font: 500 calc(11.5px * var(--fs, 1)) var(--dados); padding: 2px 8px; border: 1px solid var(--linha); border-radius: 999px; color: var(--tinta-2); white-space: nowrap; }
.cf-item__falta { font-size: calc(13px * var(--fs, 1)); color: var(--tinta-2); }
.cf-itens { list-style: none; margin: 0; padding: 0; }
.cf-item {
  display: grid; align-items: center; gap: 4px 16px; padding: 9px 6px; margin: 0 -6px; border-top: 1px solid var(--linha-suave); border-radius: 10px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.15fr) minmax(0, .95fr) minmax(176px, auto) auto;
  grid-template-areas: "nome usuario url valor acoes";
  transition: background-color var(--t-rapido);
}
.cf-itens > .cf-item:first-child { border-top-color: transparent; }
.cf-item:hover, .cf-item.cf--revelado { background: var(--linha-suave); }
.cf-item__nome { grid-area: nome; display: grid; min-width: 0; }
.cf-item__nome strong { font-weight: 600; }
.cf-item__nome small { color: var(--tinta-2); font-size: calc(12.5px * var(--fs, 1)); }
.cf-item__meta { display: contents; }
.cf-item__usuario { grid-area: usuario; }
.cf-item__url { grid-area: url; }
.cf-item__mcp { grid-area: mcp; display: flex; align-items: center; min-width: 0; }
/* Grade por tipo: chave sem a coluna do usuário; MCP com a coluna "gera .mcp.json". */
.cf-item[data-tipo="KEY"] { grid-template-areas: "nome nome url valor acoes"; } /* mesma grade dos outros tipos: o endereço fica na mesma coluna */
.cf-item[data-tipo="MCP"] { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.15fr) minmax(0, .95fr) minmax(176px, auto) auto; grid-template-areas: "nome mcp url valor acoes"; }
.cf-item__valor { grid-area: valor; }
.cf-item__acoes { grid-area: acoes; }
.cf-item__usuario, .cf-item__url, .cf-item__valor { display: flex; align-items: center; gap: 2px; min-width: 0; }
.cf-item__usuario .mono { font-size: calc(13px * var(--fs, 1)); min-width: 0; }
.cf-item__url a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--tinta-2); text-decoration: none; font-size: calc(14px * var(--fs, 1)); }
.cf-item__url a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.cf-item__url .ico { width: 14px; height: 14px; }
.cf-item__revelado { grid-column: 1 / -1; margin-top: 4px; }
.cf-mascara { font: 500 calc(13px * var(--fs, 1)) var(--dados); letter-spacing: .08em; color: var(--tinta-2); min-width: 0; width: 9.5ch; text-align: right; white-space: nowrap; }
.cf-mascara--texto { letter-spacing: 0; width: auto; font-size: calc(12px * var(--fs, 1)); }
.cf-item__valor { justify-content: flex-end; }
.icone-botao.cf-mini { width: 30px; height: 30px; border-radius: 10px; flex: none; }
.cf-mini .ico { width: 17px; height: 17px; }
.cf-mini[aria-pressed="true"] { color: var(--tinta); background: var(--superficie); box-shadow: var(--sombra); }
.cf-item__acoes { margin-left: -10px; }
/* Trancado, revelar e copiar continuam clicáveis (pedem o código), mas não parecem liberados. */
.cf-trava[data-estado="trancado"] ~ .painel-aba .cf-item [data-revelar],
.cf-trava[data-estado="trancado"] ~ .painel-aba .cf-item [data-copiar],
.cf-trava[data-estado="bloqueado"] ~ .painel-aba .cf-item [data-revelar],
.cf-trava[data-estado="bloqueado"] ~ .painel-aba .cf-item [data-copiar] { opacity: .45; }
.cf-trava[data-estado="trancado"] ~ .painel-aba .cf-item [data-revelar]:hover,
.cf-trava[data-estado="trancado"] ~ .painel-aba .cf-item [data-copiar]:hover { opacity: 1; }
@media (hover: hover) {
  .cf-item [data-mais] { opacity: .55; transition: opacity var(--t-rapido); }
  .cf-item:hover [data-mais], .cf-item:focus-within [data-mais], .cf-item [data-mais][aria-expanded="true"] { opacity: 1; }
}
.cf-perigo { color: var(--erro); }

@media (max-width: 1100px) {
  .cf-item, .cf-item[data-tipo] { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "nome valor acoes" "meta meta meta"; row-gap: 2px; }
  .cf-item__meta { grid-area: meta; display: flex; align-items: center; gap: 4px 14px; min-width: 0; flex-wrap: wrap; }
  .cf-item__meta:not(:has(a, .mono, .cf-selo-tipo, .cf-item__falta)) { display: none; }
  .cf-item__usuario, .cf-item__url, .cf-item__mcp { grid-area: auto; font-size: calc(12.5px * var(--fs, 1)); color: var(--tinta-2); }
  .cf-item__usuario:empty, .cf-item__url:empty { display: none; }
  .cf-item__url a { font-size: calc(12.5px * var(--fs, 1)); }
  .cf-item__usuario .mono { font-size: calc(12px * var(--fs, 1)); }
}
@media (max-width: 560px) { .cf-filtros .cf-contagem { flex-basis: 100%; margin-left: 0; } }
@media (max-width: 640px) {
  .cf-org__resumo { display: none; }
  .cf-tipos { overflow-x: auto; max-width: 100%; }
  .cf-item, .cf-item[data-tipo] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome acoes" "meta meta" "valor valor"; }
  .cf-item__valor { justify-content: flex-start; }
}
.modo-movel .icone-botao.cf-mini { width: 40px; height: 40px; }

/* ---------- Valor revelado (some sozinho) ---------- */
.cf-revelado { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra); animation: escalar var(--t-medio) var(--ease); }
.cf-revelado__valor { margin: 0; max-height: 240px; overflow: auto; font: 500 calc(14px * var(--fs, 1))/1.5 var(--dados); white-space: pre-wrap; word-break: break-all; user-select: all; color: var(--tinta); }
.cf-revelado__barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-revelado__tempo { flex: 1 1 100px; height: 3px; border-radius: 3px; background: var(--linha); overflow: hidden; }
.cf-revelado__tempo i { display: block; height: 100%; background: var(--tinta); transform-origin: left; animation: cf-esvaziar linear forwards; }
.cf-revelado small { font: 400 calc(11.5px * var(--fs, 1)) var(--dados); color: var(--tinta-2); white-space: nowrap; }
@keyframes cf-esvaziar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Formulário (janela) ---------- */
.cf-form__nota { font-size: calc(13.5px * var(--fs, 1)); }
.cf-form__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.cf-form__largo { grid-column: 1 / -1; }
.cf-form__erro { min-height: 0; margin-top: 12px; color: var(--erro); font-size: calc(14px * var(--fs, 1)); }
.cf-form__erro:empty { display: none; }
.cf-segredo { display: flex; gap: 6px; align-items: flex-start; }
.cf-segredo textarea { flex: 1; min-height: 0; resize: none; overflow-y: auto; font: 500 calc(15px * var(--fs, 1))/1.45 var(--dados); word-break: break-all; }
.cf-segredo__oculto { -webkit-text-security: disc; }
.cf-segredo .icone-botao { margin-top: 4px; }
.cf-segredo .botao { margin-top: 5px; }
.cf-sugestoes { z-index: 450; max-height: 280px; }
.cf-form [hidden] { display: none !important; }
.cf-form__tipo .cf-tipos { justify-self: start; max-width: 100%; overflow-x: auto; }
.cf-form[data-tipo="KEY"] .cf-form__url, .cf-form[data-tipo="MCP"] .cf-form__url { grid-column: 1 / -1; }
.cf-form textarea[name=observacao], .cf-form textarea[name=observacao]::placeholder { font-family: var(--texto); letter-spacing: normal; }
@media (max-width: 560px) { .cf-form__grade { grid-template-columns: 1fr; } }

/* ---------- Histórico ---------- */
.cf-versoes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; }
.cf-versao { padding: 8px 10px; border-radius: 12px; border: 1px solid var(--linha-suave); }
.cf-versao.cf--revelado { border-color: var(--linha); background: var(--linha-suave); }
.cf-versao__linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-versao__quem { font-size: calc(13px * var(--fs, 1)); }
.cf-versao__acoes { margin-left: auto; display: flex; gap: 2px; }
.cf-versao .cf-item__revelado { margin-top: 8px; }

/* ---------- Primeira entrada (cadastro do 2FA) ---------- */
.cf-cadastro { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; align-items: stretch; }
.cf-cadastro__intro { display: grid; gap: 14px; align-content: start; }
.cf-cadastro__intro h2 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; }
.cf-passos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: p; }
.cf-passos li { counter-increment: p; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; color: rgba(241, 239, 232, .6); transition: color var(--t-medio); }
.cf-passos li::before { content: counter(p); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(241, 239, 232, .3); font: 500 12px var(--dados); }
.cf-passos li[data-atual] { color: var(--papel); }
.cf-passos li[data-atual]::before { background: var(--papel); color: var(--navy); border-color: var(--papel); }
.cf-passos li[data-feito]::before { content: '✓'; border-color: rgba(241, 239, 232, .55); color: var(--papel); }
.cf-cadastro__corpo { display: grid; gap: 14px; align-content: start; }
.cf-cadastro__corpo h2 { margin: 0; font-size: calc(20px * var(--fs, 1)); }
.cf-cadastro__corpo > p { color: var(--tinta-2); max-width: 62ch; }
.cf-nota { padding: 10px 12px; border-radius: 12px; background: var(--aviso-fundo); color: var(--aviso); font-size: calc(13.5px * var(--fs, 1)); }
.cf-qr-area { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.cf-qr { margin: 0; padding: 8px; width: 216px; background: #fff; border-radius: 16px; border: 1px solid var(--linha); box-shadow: var(--sombra); }
.cf-qr img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.cf-qr__lado { display: grid; gap: 14px; min-width: 0; justify-items: start; }
.cf-instrucoes { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--tinta-2); }
.cf-instrucoes b { color: var(--tinta); }
.cf-manual summary { cursor: pointer; color: var(--tinta-2); font-size: calc(13.5px * var(--fs, 1)); }
.cf-manual summary:hover { color: var(--tinta); }
.cf-manual[open] { display: grid; gap: 8px; }
.cf-manual__chave { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); font: 500 calc(15px * var(--fs, 1))/1.5 var(--dados); letter-spacing: .06em; word-break: break-all; user-select: all; }
.cf-manual p.mudo { font-size: calc(13px * var(--fs, 1)); }
.cf-manual .botao { justify-self: start; }
.cf-recuperacao { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; counter-reset: r; }
.cf-recuperacao li { counter-increment: r; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); font: 500 calc(15px * var(--fs, 1)) var(--dados); letter-spacing: .08em; user-select: all; }
.cf-recuperacao li::before { content: counter(r, decimal-leading-zero); margin-right: 10px; color: var(--tinta-3); font-size: .78em; letter-spacing: 0; user-select: none; }
.cf-recuperacao__acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-guardei { font-size: calc(14.5px * var(--fs, 1)); }
@media (max-width: 1060px) { .cf-cadastro { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cf-qr-area { grid-template-columns: 1fr; justify-items: center; } .cf-recuperacao { grid-template-columns: 1fr; } }

/* ---------- Registro ---------- */
.cf-reg__topo { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cf-reg__topo p { max-width: 80ch; font-size: calc(13.5px * var(--fs, 1)); }
.cf-reg td { vertical-align: top; }
.cf-reg__quando { font-family: var(--dados); font-size: calc(12.5px * var(--fs, 1)); white-space: nowrap; color: var(--tinta-2); }
.cf-reg__detalhe { color: var(--tinta-2); font-size: calc(13px * var(--fs, 1)); max-width: 44ch; }
.cf-reg__ip { font-family: var(--dados); font-size: calc(12px * var(--fs, 1)); color: var(--tinta-2); white-space: nowrap; }
.cf-reg__mais { display: flex; justify-content: center; margin-top: 16px; }
.cf-alerta { padding: 12px 14px; border-radius: 12px; background: var(--erro-fundo); color: var(--erro); font-size: calc(14px * var(--fs, 1)); }

/* ---------- Segurança ---------- */
.cf-seg__cartao { display: grid; gap: 12px; align-content: start; }
.cf-seg__cartao h2 { margin: 0; }
.cf-seg__cartao > p { color: var(--tinta-2); font-size: calc(14px * var(--fs, 1)); }
.cf-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.cf-dados div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--superficie-2); }
.cf-dados dt { font: 400 calc(10.5px * var(--fs, 1)) var(--dados); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.cf-dados dd { margin: 0; font-weight: 600; }
.cf-dados dd b { font-family: var(--display); font-weight: 500; font-size: calc(22px * var(--fs, 1)); }
.cf-pessoas .avatar { width: 34px; height: 34px; border-radius: 11px; font-size: calc(12px * var(--fs, 1)); }
.cf-pessoas .fim { display: flex; align-items: center; gap: 8px; }
.cf-seg__acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.cf-kcv { font: 500 calc(22px * var(--fs, 1)) var(--dados); letter-spacing: .14em; }
.cf-modos { border: 0; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.cf-modo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linha); cursor: pointer; transition: border-color var(--t-rapido), background-color var(--t-rapido); }
.cf-modo:hover { border-color: var(--tinta-3); }
.cf-modo:has(input:checked) { border-color: var(--tinta); background: var(--linha-suave); }
.cf-modo input { margin-top: 3px; accent-color: var(--navy); }
.cf-modo span { display: grid; gap: 2px; }
.cf-modo small { color: var(--tinta-2); font-size: calc(13px * var(--fs, 1)); }
.cf-fora__motivo { text-align: center; font-size: calc(13px * var(--fs, 1)); }
.cf-vazio__acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- Importar planilha (views/cofre-importar.js): origem → prévia → resultado ---------- */
.modal-fundo.cf-imp-fundo { padding-top: 4vh; }
.modal.cf-imp-modal { max-height: 92vh; padding-bottom: 0; }
.cf-imp__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cf-imp__cab .modal__titulo { outline: none; }
.cf-imp__fechar { flex: none; margin: -4px -6px 0 0; }
.cf-imp__intro { max-width: 90ch; }
.modal p.cf-imp__nota, .cf-imp__nota { color: var(--tinta-2); font-size: calc(13px * var(--fs, 1)); line-height: 1.45; max-width: 92ch; }
.cf-imp__origens { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.cf-imp__origem { display: grid; gap: 12px; align-content: start; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--linha); background: var(--fundo); }
.cf-imp__status { margin-top: 14px; font: 400 calc(12.5px * var(--fs, 1)) var(--dados); letter-spacing: .04em; }
.cf-imp__erro { display: grid; gap: 10px; justify-items: start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--erro-fundo); }
.modal .cf-imp__erro p { color: var(--erro); font-size: calc(14px * var(--fs, 1)); }
.cf-imp__erro .botao .ico { width: 14px; height: 14px; }

.cf-imp__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 4px 0 10px; }
.cf-imp__fonte { min-width: 0; }
.cf-imp__fonte h3 { margin: 4px 0 0; font-size: calc(19px * var(--fs, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-imp__totais { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cf-imp__dup { border: 0; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf-imp__dup legend { grid-column: 1 / -1; margin-bottom: 8px; }
.cf-imp__orgs { display: grid; gap: 8px; margin-top: 18px; }
.cf-imp-orgs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px 16px; }
.cf-imp-orgs li { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr) auto; align-items: center; gap: 8px; }
.cf-imp-orgs__de { font-weight: 600; font-size: calc(14px * var(--fs, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-imp-orgs__seta { color: var(--tinta-3); }
.cf-imp-orgs input[type=text] { min-width: 0; padding: 7px 10px; }
.cf-imp-orgs__selos { display: flex; gap: 4px; }

/* minmax(0, 1fr): sem isso, o cartão da aba cresce até a largura mínima da tabela e a janela ganha rolagem lateral. */
.cf-imp__abas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.cf-imp-aba { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; padding: 16px 18px; }
.cf-imp-aba[data-fora] > :not(.cf-imp-aba__cab):not(.cf-imp-aba__previa) { opacity: .55; }
.cf-imp-aba__cab { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.cf-imp-aba__cab h3 { margin: 0; font-size: calc(17px * var(--fs, 1)); min-width: 0; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-imp-aba__incluir { align-items: center; font-weight: 600; }
.cf-imp-aba__resumo { margin-left: auto; font: 400 calc(12px * var(--fs, 1)) var(--dados); letter-spacing: .03em; color: var(--tinta-2); }
.cf-imp-aba__opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; align-items: start; }
.cf-imp-aba__opcoes .sel { width: 100%; min-height: 40px; }
.cf-imp-aba__repetir { align-self: center; font-size: calc(13.5px * var(--fs, 1)); }
.cf-imp-aba__repetir small { display: block; color: var(--tinta-2); font-size: calc(12px * var(--fs, 1)); }
.cf-imp-colunas { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-imp-col { display: grid; gap: 6px; width: 178px; padding: 8px 10px 9px; border-radius: 14px; border: 1px solid var(--linha); background: var(--fundo); }
.cf-imp-col[data-campo="ignorar"] { border-style: dashed; background: transparent; }
.cf-imp-col[data-campo="valor"] { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.cf-imp-col__topo { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.cf-imp-col__letra { font: 500 calc(11px * var(--fs, 1)) var(--dados); color: var(--tinta-3); }
.cf-imp-col__titulo { font-weight: 600; font-size: calc(13.5px * var(--fs, 1)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-imp-col small { font: 400 calc(11px * var(--fs, 1)) var(--dados); color: var(--tinta-3); }
.cf-imp-col .sel { width: 100%; min-height: 34px; }
.cf-imp-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cf-imp-alertas:empty { display: none; }
.cf-imp-alerta { padding: 8px 12px; border-radius: 10px; background: var(--aviso-fundo); color: var(--aviso); font-size: calc(13px * var(--fs, 1)); }
.cf-imp-alerta--info { background: var(--superficie-2); color: var(--tinta-2); }
.cf-imp-tabela { max-height: 340px; overflow: auto; margin: 0; border: 1px solid var(--linha-suave); border-radius: 12px; }
.cf-imp-tabela th { position: sticky; top: 0; z-index: 1; background: var(--superficie); }
.cf-imp-tabela td { padding: 7px 10px; font-size: calc(13px * var(--fs, 1)); }
.cf-imp-c { display: block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-imp-c--nome { font-weight: 600; }
.cf-imp-dica { display: block; max-width: 30ch; color: var(--tinta-2); font-size: calc(11.5px * var(--fs, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-imp-linha[data-situacao="sem-valor"] td, .cf-imp-linha[data-situacao="secao"] td, .cf-imp-linha[data-situacao="repetido"] td, .cf-imp-linha[data-situacao="igual"] td { color: var(--tinta-3); }
.cf-imp-linha[data-situacao="sem-valor"] .cf-imp-c--nome, .cf-imp-linha[data-situacao="secao"] .cf-imp-c--nome { font-weight: 400; }
.modal p.cf-imp-aba__fora, .modal p.cf-imp-aba__mais { color: var(--tinta-2); font-size: calc(13px * var(--fs, 1)); }
.cf-imp-aba__mais { margin-top: 8px; }

.cf-imp__acoes { position: sticky; bottom: 0; z-index: 2; margin: 18px -26px 0; padding: 14px 26px 22px; background: var(--superficie); border-top: 1px solid var(--linha-suave); flex-wrap: wrap; }
.cf-imp__voltar { margin-right: auto; }
.cf-imp__fim { display: grid; gap: 12px; justify-items: start; padding: 8px 0 4px; }
.cf-imp__fim h3 { margin: 0; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.01em; }
.cf-imp__numeros { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--tinta-2); }
.cf-imp__ignorados summary { cursor: pointer; color: var(--tinta-2); font-size: calc(14px * var(--fs, 1)); }
.cf-imp__ignorados ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; max-height: 240px; overflow: auto; font-size: calc(13px * var(--fs, 1)); color: var(--tinta-2); }
@media (max-width: 900px) { .cf-imp__origens, .cf-imp__dup { grid-template-columns: 1fr; } }

/* ---- Modelo de MCP (formulário) e Exportar MCPs (janela) ---------------------------------------------------------------- */
.cf-mcp { border: 1px solid var(--linha-suave); border-radius: 14px; padding: 10px 14px; }
.cf-mcp > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-weight: 600; }
.cf-mcp > summary .mudo { font-weight: 400; font-size: calc(12.5px * var(--fs, 1)); }
.cf-mcp[open] > summary { margin-bottom: 8px; }
.cf-mcp__nota { margin: 6px 0 0; color: var(--tinta-2); font-size: calc(13px * var(--fs, 1)); }
.cf-mcp__ajuda { margin: 0 0 10px; }
.cf-mcp__ajuda summary { display: list-item; cursor: pointer; color: var(--tinta-2); font-weight: 400; font-size: calc(12.5px * var(--fs, 1)); }
.cf-mcp__ajuda summary:hover { color: var(--tinta); }
.cf-mcp__nota code, .cf-mcps code, .cf-mcpi code { font: 500 calc(12px * var(--fs, 1)) var(--dados); }
.cf-mcp__estado { margin: 0 0 8px; color: var(--tinta-2); font-size: calc(13px * var(--fs, 1)); }
.cf-mcp__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.cf-mcp__tipo { display: grid; gap: 12px; }
.cf-mcp__tipo[hidden] { display: none; }
.cf-mcp__grade textarea, .cf-mcp__grade input { font-family: var(--dados); font-size: calc(13px * var(--fs, 1)); }
.cf-mcp__grade .sel { width: 100%; min-height: 40px; }
.cf-mcp__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .cf-mcp__grade { grid-template-columns: 1fr; } }

.cf-mcps__topo { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 14px 0 10px; }
.cf-mcps__topo .cf-busca { flex: 1 1 260px; }
.cf-mcps__lista { list-style: none; margin: 0; padding: 4px; max-height: 340px; overflow: auto; border: 1px solid var(--linha-suave); border-radius: 12px; display: grid; gap: 2px; }
.cf-mcps__item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.cf-mcps__item:hover { background: var(--superficie-2); }
.cf-mcps__item small { color: var(--tinta-2); }
.cf-mcps__nada { padding: 10px; }
.cf-mcps__acoes { flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
.cf-mcps__dir { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cf-mcps__item small.mono { font: 400 calc(11.5px * var(--fs, 1)) var(--dados); }
@media (max-width: 640px) { .cf-mcps__acoes { flex-wrap: wrap; } }
.cf-mcps__cont { font: 400 calc(12px * var(--fs, 1)) var(--dados); }

.cf-mcpi__origem { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 4px; }
.cf-mcpi__lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; max-height: 380px; overflow: auto; }
.cf-mcpi__srv { padding: 10px 12px; border: 1px solid var(--linha-suave); border-radius: 12px; display: grid; gap: 6px; }
.cf-mcpi__srv--fora { border-style: dashed; color: var(--tinta-2); }
.cf-mcpi__srv p { margin: 0; font-size: calc(13px * var(--fs, 1)); }
.cf-mcpi__chaves { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: calc(13px * var(--fs, 1)); }
.cf-mcpi__srv summary { cursor: pointer; color: var(--tinta-2); font-size: calc(13px * var(--fs, 1)); }
.cf-mcpi__modelo { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); font: 400 calc(12px * var(--fs, 1))/1.5 var(--dados); white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow: auto; }

/* Mesmo valor em dois lugares (cliente × n8n): selo clicável e destaque passageiro */
.cf-elo { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 0 8px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; background: transparent; color: inherit; font: 500 11px/18px 'Chivo Mono', ui-monospace, monospace; cursor: pointer; vertical-align: middle; white-space: nowrap; flex: none; }
.cf-elo svg { width: 12px; height: 12px; }
.cf-elo:hover, .cf-elo:focus-visible { border-color: currentColor; }
@keyframes cf-elo-pisca { 0%, 60% { box-shadow: inset 3px 0 0 #FFD434; background: color-mix(in srgb, #FFD434 14%, transparent); } 100% { box-shadow: inset 3px 0 0 transparent; background: transparent; } }
.cf-item--elo { animation: cf-elo-pisca 2.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .cf-item--elo { animation: none; box-shadow: inset 3px 0 0 #FFD434; } }