/* Bankap — Prospecção de Cedentes.
 * Linguagem visual do Instagram @bankapdigital (medido em 07/11/2026): fundo claro quase branco, carmesim SÓLIDO
 * (#a00830) só em destaques, títulos pretos em negrito com palavra-chave em carmesim, "marca-texto" carmesim com
 * letra branca, linhas finas carmesim e o ícone "bx" no quadrado arredondado. Sem faixas de gradiente.
 * Tokens: identidade-visual/tokens.css (manter os valores iguais). */
:root {
  --bk-carmesim: #a00830;        /* cor da marca nos posts */
  --bk-carmesim-escuro: #810a2c; /* hover */
  --bk-carmesim-claro: #f7e6ea;  /* fundo de destaque suave */
  --bk-tinta: #111111;           /* títulos e texto forte */
  --bk-grafite: #3f3f46;         /* texto corrido */
  --bk-cinza: #c9c9cc;           /* bordas */
  --bk-cinza-claro: #ececee;     /* divisores */
  --bk-fundo: #f6f5f4;           /* fundo da página (off-white dos posts) */
  --bk-branco: #ffffff;
  --bk-ok: #1f7a52;
  --bk-alerta: #a66a00;
  --bk-erro: #b42318;
  --bk-info: #2f5f9e;
  --bk-fonte: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bk-raio: 10px;
  --bk-raio-card: 18px;
  --bk-raio-pilula: 999px;
  --bk-sombra-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px rgba(17, 17, 17, 0.06);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--bk-fonte); color: var(--bk-grafite); background: var(--bk-fundo); font-size: 15px; line-height: 1.55; }
a { color: var(--bk-carmesim); }
h1, h2, h3 { color: var(--bk-tinta); font-weight: 700; line-height: 1.2; margin: 0 0 10px; letter-spacing: -0.01em; }
h1 { font-size: 28px; }
h2 { font-size: 18px; }
p { margin: 0 0 12px; }
.destaque { color: var(--bk-carmesim); }
.marca-texto { background: var(--bk-carmesim); color: #fff; padding: 0 8px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.subtitulo { color: var(--bk-grafite); margin-top: -4px; margin-bottom: 20px; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 8px; background: #fff; padding: 8px 12px; z-index: 10; }

/* Menu lateral carmesim (ícone + rótulo), barra superior branca. No celular a lateral vira barra inferior. */
.com-lateral { padding-left: 92px; }
.lateral { position: fixed; inset: 0 auto 0 0; width: 92px; background: #fff; border-right: 1px solid var(--bk-cinza-claro); display: flex; flex-direction: column; align-items: center; padding: 14px 0; z-index: 20; }
.lateral-marca { display: block; margin-bottom: 22px; }
.lateral-marca img { display: block; width: 42px; height: 42px; }
.lateral-menu { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 8px; }
.lateral-menu a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; color: #6b6b72; text-decoration: none; font-size: 12px; font-weight: 600; border-radius: 12px; text-align: center; position: relative; }
.lateral-menu a:hover { color: var(--bk-carmesim); background: #faf3f5; }
.lateral-menu a[aria-current="page"] { color: var(--bk-carmesim); background: var(--bk-carmesim-claro); }
.lateral-menu a[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--bk-carmesim); }
.barra { background: #fff; border-bottom: 1px solid var(--bk-cinza-claro); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; position: sticky; top: 0; z-index: 10; }
.barra-titulo { font-weight: 700; color: var(--bk-tinta); font-size: 15px; }
.barra-titulo small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bk-carmesim); line-height: 1.1; }
.quem { display: flex; align-items: center; gap: 12px; font-size: 13px; text-align: right; }
.quem strong { display: block; color: var(--bk-tinta); font-weight: 600; }
.quem form { margin: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bk-carmesim-claro); color: var(--bk-carmesim); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.botao-sair { display: inline-flex; align-items: center; gap: 6px; }
.botao-sair svg { width: 16px; height: 16px; }

main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 56px; }

/* Cartões */
.cartao { background: #fff; border-radius: var(--bk-raio-card); box-shadow: var(--bk-sombra-card); padding: 22px; margin-bottom: 16px; }
.cartao-acento { border-top: 3px solid var(--bk-carmesim); }
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grade .cartao { margin: 0; display: flex; flex-direction: column; }
.grade .cartao > :last-child { margin-top: auto; }
.icone-cartao { width: 40px; height: 40px; border-radius: 50%; background: var(--bk-carmesim); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 12px; }
.em-breve { display: inline-block; color: var(--bk-carmesim); background: var(--bk-carmesim-claro); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--bk-raio-pilula); }

/* Botões — carmesim sólido, como nos posts */
.botao { display: inline-block; border: 1px solid transparent; border-radius: var(--bk-raio); padding: 10px 18px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; }
.botao-primario { background: var(--bk-carmesim); color: #fff; }
.botao-primario:hover { background: var(--bk-carmesim-escuro); }
.botao-escuro { background: var(--bk-tinta); color: #fff; }
.botao-escuro:hover { background: #000; }
.botao-secundario { background: #fff; color: var(--bk-tinta); border-color: var(--bk-cinza); font-weight: 600; }
.botao-secundario:hover { border-color: var(--bk-carmesim); color: var(--bk-carmesim); }
.botao-pequeno { padding: 6px 12px; font-size: 13px; }

/* Formulários */
label { display: block; font-weight: 600; color: var(--bk-tinta); font-size: 13px; margin-bottom: 5px; }
input, select { width: 100%; font: inherit; padding: 11px 12px; border: 1px solid var(--bk-cinza); border-radius: var(--bk-raio); background: #fff; color: var(--bk-tinta); }
input:focus, select:focus { outline: none; border-color: var(--bk-carmesim); box-shadow: 0 0 0 3px var(--bk-carmesim-claro); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--bk-carmesim-claro); outline-offset: 2px; }
.campo { margin-bottom: 14px; }
.dica { font-size: 13px; color: var(--bk-grafite); margin-top: 6px; }
.linha-form { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }

/* Avisos — erro nunca só pela cor: sempre ícone + texto */
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--bk-raio); margin-bottom: 16px; border-left: 4px solid; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.aviso .icone { font-weight: 700; flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; }
.aviso-erro { border-color: var(--bk-erro); color: var(--bk-erro); }
.aviso-erro .icone { background: var(--bk-erro); }
.aviso-ok { border-color: var(--bk-ok); color: var(--bk-ok); }
.aviso-ok .icone { background: var(--bk-ok); }
.aviso-info { border-color: var(--bk-info); color: var(--bk-info); }
.aviso-info .icone { background: var(--bk-info); }

/* Listas */
.cabecalho-lista { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cabecalho-lista h1 { margin: 0; }
.filtros { display: grid; gap: 10px; grid-template-columns: 2fr 1fr 1fr auto; align-items: end; margin-bottom: 14px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bk-grafite); border-bottom: 1px solid var(--bk-cinza); padding: 8px; font-weight: 700; }
.tabela td { border-bottom: 1px solid var(--bk-cinza-claro); padding: 12px 8px; vertical-align: middle; }
.tabela tbody tr:hover td { background: #fbfafa; }
.tabela .principal { color: var(--bk-tinta); font-weight: 600; }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.acoes form { margin: 0; }
.selo { display: inline-block; padding: 2px 10px; border-radius: var(--bk-raio-pilula); font-size: 12px; font-weight: 700; background: var(--bk-cinza-claro); color: var(--bk-tinta); }
.selo-ativo { background: #e2f2ea; color: var(--bk-ok); }
.selo-inativo { background: var(--bk-cinza-claro); color: var(--bk-grafite); }
.selo-pendente { background: var(--bk-carmesim-claro); color: var(--bk-carmesim); }
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; flex-wrap: wrap; }
.vazio { text-align: center; padding: 28px; color: var(--bk-grafite); }
details.novo > summary { list-style: none; display: inline-block; cursor: pointer; }
details.novo > summary::-webkit-details-marker { display: none; }
details.novo[open] > summary { margin-bottom: 16px; }
.link-gerado { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* Entrada (telas sem login): fundo claro, chamada em negrito com destaque carmesim, linha curva fina */
.entrada { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--bk-fundo); position: relative; overflow: hidden; }
.entrada::after { content: ""; position: absolute; width: 900px; height: 900px; border: 2px solid var(--bk-carmesim); border-radius: 50%; right: -520px; bottom: -560px; opacity: 0.55; pointer-events: none; }
.entrada-marca { display: flex; flex-direction: column; justify-content: center; padding: 48px 56px; }
.entrada-marca img { width: 64px; height: 64px; margin-bottom: 28px; }
.entrada-marca h1 { font-size: 44px; line-height: 1.1; font-weight: 800; margin-bottom: 18px; }
.entrada-marca p { max-width: 440px; font-size: 17px; }
.entrada-marca .marca-texto { font-weight: 700; }
.entrada-form { display: flex; align-items: center; justify-content: center; padding: 32px 16px; position: relative; z-index: 1; }
.entrada-form .cartao { width: 100%; max-width: 420px; padding: 28px; }
.entrada-form .botao { width: 100%; }
.entrada-form h2 { font-size: 22px; }

/* Celular */
@media (max-width: 760px) {
  h1 { font-size: 24px; }
  .entrada { grid-template-columns: 1fr; align-content: start; }
  .entrada-form { padding-top: 20px; align-items: flex-start; }
  .entrada::after { width: 520px; height: 520px; right: -320px; bottom: -340px; }
  .entrada-marca { padding: 28px 20px 0; }
  .entrada-marca img { width: 48px; height: 48px; margin-bottom: 16px; }
  .entrada-marca h1 { font-size: 30px; }
  .entrada-marca p { font-size: 15px; }
  .filtros { grid-template-columns: 1fr 1fr; }
  .filtros .busca { grid-column: 1 / -1; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { border: 1px solid var(--bk-cinza-claro); border-radius: var(--bk-raio); margin-bottom: 10px; padding: 6px 4px; background: #fff; }
  .tabela td { border: 0; padding: 4px 8px; }
  .tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: 600; color: var(--bk-tinta); }
  .quem .nome { display: none; }
  .com-lateral { padding-left: 0; padding-bottom: 72px; }
  .lateral { inset: auto 0 0 0; width: auto; height: 64px; flex-direction: row; padding: 0 6px; border-right: 0; border-top: 1px solid var(--bk-cinza-claro); box-shadow: 0 -2px 10px rgba(0,0,0,.05); }
  .lateral-marca { display: none; }
  .lateral-menu { flex-direction: row; justify-content: space-around; padding: 0; gap: 0; }
  .lateral-menu a { flex: 1; padding: 8px 2px; font-size: 11px; border-radius: 10px; }
  .lateral-menu a[aria-current="page"]::before { left: 20%; right: 20%; top: -1px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .barra { padding: 10px 16px; }
  .avatar { width: 34px; height: 34px; font-size: 13px; }
  main { padding: 20px 16px 32px; }
}

/* ---------- Indicadores (kpis) e números em tabela ---------- */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 16px; }
.kpi { background: #fff; border-radius: var(--bk-raio-card); box-shadow: var(--bk-sombra-card); padding: 16px 18px; }
.kpi .rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--bk-grafite); }
.kpi .valor { font-size: 28px; font-weight: 800; color: var(--bk-tinta); line-height: 1.15; margin-top: 4px; }
.kpi .det { font-size: 12px; color: var(--bk-grafite); }
.tabela .numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grade-tabelas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.grade-tabelas .cartao { margin: 0; }

/* ---------- Parâmetros ---------- */
fieldset.opcoes { border: 0; padding: 0; margin: 0; }
fieldset.opcoes legend { font-weight: 600; color: var(--bk-tinta); font-size: 13px; margin-bottom: 6px; }
fieldset.opcoes label { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; margin: 0 0 6px; }
input[type=checkbox] { width: 18px; height: 18px; padding: 0; accent-color: var(--bk-carmesim); flex: none; }
details.criterio { border-top: 1px solid var(--bk-cinza-claro); padding: 10px 0; }
details.criterio > summary { cursor: pointer; font-weight: 600; color: var(--bk-tinta); }
details.criterio[open] > summary { margin-bottom: 10px; color: var(--bk-carmesim); }
.faixas { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.faixa { display: grid; grid-template-columns: 1fr 90px; gap: 10px; align-items: center; }
.faixa label { margin: 0; font-weight: 400; font-size: 14px; }
.aviso ul { margin: 6px 0 0 18px; padding: 0; }
/* Distribuição das notas */
.barras { display: grid; gap: 8px; }
.barra-nota { display: grid; grid-template-columns: 70px 1fr 64px; gap: 10px; align-items: center; font-size: 13px; }
/* <progress> em vez de largura inline: a CSP não aceita style="" */
.barra-nota progress { appearance: none; -webkit-appearance: none; width: 100%; height: 14px; border: 0; border-radius: 4px; background: var(--bk-cinza-claro); overflow: hidden; }
.barra-nota progress::-webkit-progress-bar { background: var(--bk-cinza-claro); border-radius: 4px; }
.barra-nota progress::-webkit-progress-value { background: var(--bk-carmesim); border-radius: 4px; }
.barra-nota progress::-moz-progress-bar { background: var(--bk-carmesim); border-radius: 4px; }
.barra-nota .n { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Território, carteira e ficha ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rotulo-linha { display: inline; margin: 0; font-weight: 600; font-size: 14px; cursor: pointer; }
.lote { border-top: 1px solid var(--bk-cinza-claro); margin-top: 14px; padding-top: 14px; }
label.opcao { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; margin-bottom: 12px; }
.selo-alerta { background: #fdecef; color: var(--bk-erro); }
.selo-aviso { background: #fff4de; color: #8a5a00; }
.nota { display: inline-block; min-width: 38px; text-align: center; font-weight: 800; color: var(--bk-carmesim); background: var(--bk-carmesim-claro); border-radius: var(--bk-raio-pilula); padding: 2px 8px; }
.nota-grande { font-size: 22px; padding: 6px 14px; }
.filtros-carteira { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.alertas-ficha .selo { margin: 0 6px 6px 0; }
dl.dados { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; margin: 0; font-size: 14px; }
dl.dados dt { color: var(--bk-grafite); font-weight: 600; }
dl.dados dd { margin: 0; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: 8px 0; border-bottom: 1px solid var(--bk-cinza-claro); font-size: 14px; }
@media (max-width: 760px) { dl.dados { grid-template-columns: 1fr; } dl.dados dd { margin-bottom: 6px; } .filtros-carteira { grid-template-columns: 1fr; } }

/* ---------- Faixa de ambiente (homologação / local): fixa no topo, nunca confundir com a produção ---------- */
.faixa-ambiente { position: sticky; top: 0; z-index: 30; background: #fff4de; color: #6b4500; border-bottom: 2px solid #e0a43a; font-size: 12px; font-weight: 700; text-align: center; padding: 6px 12px; letter-spacing: .02em; }
.com-faixa .barra { top: 30px; }