/* NotaFácil — componentes e cores no padrão da retaguarda Responde RH
   (índigo, Geist, cartões rounded-xl, tabelas com rótulo mono, selos suaves, abas sublinhadas). Escala compacta. */
:root {
  --indigo: #3d4fd6; --indigo-escuro: #2f3eb8; --indigo-suave: #eef0fc; --indigo-claro: #a9b4f5; --noite: #141a33;
  --texto: #0f172a; --texto-2: #64748b; --texto-3: #94a3b8; --borda: #e2e8f0; --borda-suave: #f1f5f9; --fundo: #f6f7fa;
  --ok: #047857; --ok-fundo: #ecfdf5; --aviso: #92400e; --aviso-fundo: #fef3c7; --erro: #b91c1c; --erro-fundo: #fee2e2;
  --andamento: #2f3eb8; --andamento-fundo: #eef0fc; --neutro: #475569; --neutro-fundo: #f1f5f9;
  --lateral: 280px;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; color: var(--texto); background: var(--fundo); -webkit-font-smoothing: antialiased; }
a { color: var(--indigo-escuro); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.ic { flex-shrink: 0; }
.oculto { display: none !important; }
.mono { font-family: var(--mono); }

/* ───────── Estrutura: a tela cabe na janela; só o conteúdo rola ───────── */
.app { display: flex; height: 100dvh; overflow: hidden; }
.lateral { position: relative; z-index: 30; width: var(--lateral); flex-shrink: 0; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--borda); transition: width .15s; }
.marca-area { position: relative; height: 76px; display: flex; align-items: center; padding: 0 22px; flex-shrink: 0; }
.marca { display: flex; align-items: center; gap: 9px; color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca-icone { width: 36px; height: 36px; border-radius: 10px; background: var(--indigo); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.marca-nome { font-size: 20px; font-weight: 600; letter-spacing: -.035em; white-space: nowrap; }
.marca-nome b { color: var(--indigo); font-weight: 600; }
.recolher { position: absolute; top: 22px; right: -16px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--indigo); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 10px rgba(61,79,214,.3); z-index: 2; }

.criar { position: relative; display: flex; margin: 0 16px 14px; }
.criar-principal { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border: 0; border-radius: 10px 0 0 10px; background: var(--indigo); color: #fff; font-weight: 600; font-size: 14.5px; cursor: pointer; white-space: nowrap; }
.criar-seta { width: 42px; height: 42px; border: 0; border-left: 1px solid rgba(255,255,255,.3); border-radius: 0 9px 9px 0; background: var(--indigo); color: #fff; display: grid; place-items: center; cursor: pointer; }
.criar-principal:hover, .criar-seta:hover { background: var(--indigo-escuro); }

.menu { flex: 1; overflow-y: auto; padding: 0 14px 20px; }
.menu-grupo { margin-bottom: 2px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 12px 0 14px; border: 0; border-radius: 11px; background: none; cursor: pointer; font-size: 15.5px; font-weight: 500; color: rgba(15,23,42,.85); text-align: left; white-space: nowrap; }
.menu-item:hover { background: var(--fundo); text-decoration: none; }
.menu-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-item .seta { color: var(--texto-3); }
.menu-item.ativo { background: var(--indigo-suave); color: var(--indigo-escuro); font-weight: 600; }
.menu-item.grupo-ativo { color: var(--texto); font-weight: 600; }
.submenu { display: none; flex-direction: column; gap: 2px; margin: 2px 0 6px; }
.menu-grupo.aberto .submenu { display: flex; }
.submenu a { display: flex; align-items: center; height: 42px; padding: 0 12px 0 46px; border-radius: 11px; font-size: 14.5px; font-weight: 500; color: rgba(15,23,42,.8); white-space: nowrap; }
.submenu a:hover { background: var(--fundo); text-decoration: none; }
.submenu a.ativo { background: var(--indigo-suave); color: var(--indigo-escuro); font-weight: 600; }
.menu-contador { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--erro); color: #fff; font-size: 11px; font-weight: 600; }
body.recolhido { --lateral: 68px; }
body.recolhido .marca-nome, body.recolhido .menu-item span, body.recolhido .menu-item .seta, body.recolhido .menu-contador, body.recolhido .criar-seta, body.recolhido .criar-principal span { display: none; }
body.recolhido .menu-item { justify-content: center; padding: 0; }
body.recolhido .criar-principal { border-radius: 9px; }
body.recolhido .submenu { display: none !important; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo { height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 36px; background: #fff; border-bottom: 1px solid var(--borda); z-index: 20; }
.topo .abrir-menu { display: none; border: 0; background: none; cursor: pointer; }
.empresa-chip { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 4px; border: 1px solid var(--borda); border-radius: 10px; color: var(--texto); max-width: 260px; }
.empresa-chip:hover { border-color: rgba(15,23,42,.3); text-decoration: none; }
.empresa-chip .ic-box { width: 26px; height: 26px; border-radius: 7px; background: var(--indigo-suave); color: var(--indigo-escuro); display: grid; place-items: center; flex-shrink: 0; }
.empresa-chip b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empresa-chip small { display: block; font-size: 11.5px; color: var(--texto-2); white-space: nowrap; }
.topo-busca { position: relative; flex: 1; max-width: 480px; }
.topo-busca .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--texto-2); }
.topo-busca .campo { padding-left: 34px; background: var(--fundo); border-color: transparent; }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; border: 1px solid var(--borda); border-radius: 11px; font-size: 13px; color: var(--texto-2); white-space: nowrap; }
.chip b { color: var(--texto); font-weight: 600; }
a.chip:hover { border-color: rgba(15,23,42,.3); text-decoration: none; }
.ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ponto-ok { background: #10b981; } .ponto-aviso { background: #f59e0b; } .ponto-erro { background: #ef4444; } .ponto-andamento { background: var(--indigo); } .ponto-neutro { background: #94a3b8; }
.conteudo { flex: 1; min-height: 0; overflow-y: auto; }
.conteudo-interno { min-height: 100%; display: flex; flex-direction: column; padding: 24px 36px; }

/* ───────── Cabeçalho da tela ───────── */
.cabecalho { margin-bottom: 14px; flex-shrink: 0; }
.migalhas { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12.5px; color: var(--texto-2); flex-wrap: wrap; }
.migalhas a { color: var(--texto-2); }
.migalhas .atual { color: var(--texto); font-weight: 600; }
.cabecalho-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cabecalho h1 { font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -.03em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cabecalho .subtitulo { margin-top: 2px; font-size: 13.5px; color: var(--texto-2); }
.acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ───────── Botões e campos ───────── */
.botao, .botao-primario, .botao-perigo, .botao-escuro, .botao-ok { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: .12s; text-decoration: none !important; border: 1px solid var(--borda); }
.botao { background: #fff; color: var(--texto); }
.botao:hover { border-color: rgba(15,23,42,.3); }
.botao-primario { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.botao-primario:hover { background: var(--indigo-escuro); border-color: var(--indigo-escuro); }
.botao-escuro { background: var(--texto); border-color: var(--texto); color: #fff; }
.botao-perigo { background: #fff; color: var(--erro); border-color: #fecaca; }
.botao-perigo:hover { background: var(--erro-fundo); }
.botao-perigo.cheio { background: var(--erro); border-color: var(--erro); color: #fff; }
.botao-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.botao-ok:hover { background: #065f46; }
.botao[disabled], .botao-primario[disabled], .botao-ok[disabled] { opacity: .5; cursor: not-allowed; }
.pequeno { height: 32px; padding: 0 12px; font-size: 13px; }
.botao-icone { width: 32px; height: 32px; border: 0; border-radius: 7px; background: none; color: var(--texto-2); display: inline-grid; place-items: center; cursor: pointer; }
.botao-icone:hover { background: var(--fundo); color: var(--texto); }
.botao-icone.perigo:hover { background: var(--erro-fundo); color: var(--erro); }
.link { font-weight: 600; color: var(--indigo-escuro); background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.campo { height: 36px; width: 100%; padding: 0 12px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; font-size: 13.5px; outline: none; transition: .12s; }
textarea.campo { height: auto; min-height: 72px; padding: 7px 11px; resize: vertical; line-height: 1.5; }
select.campo { padding-right: 30px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center; }
.campo::placeholder { color: var(--texto-3); }
.campo:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-suave); }
.campo[readonly] { background: var(--fundo); color: var(--texto-2); }
.campo.invalido { border-color: var(--erro); box-shadow: 0 0 0 3px var(--erro-fundo); }
input[type=file].campo { padding: 5px 8px; }
.rotulo { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.form-campo { display: block; }
.form-campo > .nome { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; }
.form-campo > .nome .opc { color: var(--texto-2); font-weight: 400; }
.form-campo .ajuda { margin-top: 4px; font-size: 12px; color: var(--texto-2); line-height: 1.4; }
.prefixo, .sufixo { display: flex; }
.prefixo > span, .sufixo > span { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto-2); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.prefixo > span { border-right: 0; border-radius: 8px 0 0 8px; }
.prefixo .campo { border-radius: 0 8px 8px 0; }
.sufixo > span { border-left: 0; border-radius: 0 8px 8px 0; }
.sufixo .campo { border-radius: 8px 0 0 8px; }
.grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade .inteiro { grid-column: 1 / -1; }
.secao { font-size: 13px; font-weight: 600; margin: 16px 0 10px; padding-top: 12px; border-top: 1px solid var(--borda-suave); }
.secao:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.opcao { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; cursor: pointer; transition: .12s; }
.opcao:hover { border-color: rgba(15,23,42,.3); }
.opcao:has(input:checked) { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo), 0 0 0 3px var(--indigo-suave); }
.opcao input { margin: 2px 0 0; accent-color: var(--indigo); }
.opcao b { display: block; font-size: 13.5px; font-weight: 600; }
.opcao small { display: block; font-size: 12px; color: var(--texto-2); line-height: 1.35; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 13.5px; font-weight: 600; }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor .trilho { position: relative; width: 36px; height: 20px; border-radius: 10px; background: #cbd5e1; flex-shrink: 0; transition: .15s; }
.interruptor .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor input:checked + .trilho { background: var(--indigo); }
.interruptor input:checked + .trilho::after { left: 19px; }
.interruptor small { display: block; font-weight: 400; color: var(--texto-2); font-size: 11.5px; }

/* ───────── Cartões, indicadores, avisos ───────── */
.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 12px; }
.cartao.p { padding: 16px; }
.cartao-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.cartao-titulo h2 { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.cartao-titulo p { margin-top: 2px; font-size: 13px; color: var(--texto-2); }
.empilhado > * + * { margin-top: 14px; }
.colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.colunas-lado { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; overflow: hidden; }
.indicadores > * { padding: 14px 16px; }
.indicadores > * + * { border-left: 1px solid var(--borda); }
.indicador .rot { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); }
.indicador .val { margin-top: 5px; font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.indicador .det { margin-top: 4px; font-size: 12.5px; color: var(--texto-2); }
a.indicador { color: inherit; }
a.indicador:hover { background: var(--fundo); text-decoration: none; }
.aviso { display: flex; gap: 10px; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; margin-bottom: 12px; }
.aviso .ic { margin-top: 2px; }
.aviso b { font-weight: 600; }
.aviso-andamento { background: var(--andamento-fundo); color: var(--andamento); }
.aviso-ok { background: var(--ok-fundo); color: var(--ok); }
.aviso-erro { background: var(--erro-fundo); color: var(--erro); }
.aviso-aviso { background: var(--aviso-fundo); color: var(--aviso); }
.aviso-neutro { background: var(--neutro-fundo); color: var(--neutro); }
a.aviso { align-items: center; }
a.aviso:hover { text-decoration: none; filter: brightness(.98); }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.selo-ok { background: var(--ok-fundo); color: var(--ok); } .selo-aviso { background: var(--aviso-fundo); color: var(--aviso); } .selo-erro { background: var(--erro-fundo); color: var(--erro); }
.selo-andamento { background: var(--andamento-fundo); color: var(--andamento); } .selo-neutro { background: var(--neutro-fundo); color: var(--neutro); }
.selo .ponto { width: 6px; height: 6px; }
.tag { display: inline-block; padding: 1px 6px; border-radius: 5px; background: var(--neutro-fundo); color: var(--neutro); font-size: 11px; font-weight: 600; font-family: var(--mono); }

/* ───────── Abas e filtros ───────── */
.abas { display: flex; flex-wrap: wrap; gap: 0 4px; margin-bottom: 16px; box-shadow: inset 0 -1px 0 var(--borda); flex-shrink: 0; }
.aba { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 500; color: var(--texto-2); white-space: nowrap; }
.aba:hover { color: var(--texto); text-decoration: none; }
.aba.ativa { border-color: var(--indigo); color: var(--indigo-escuro); font-weight: 600; }
.aba .cont { padding: 0 7px; border-radius: 999px; background: var(--neutro-fundo); color: var(--neutro); font-size: 11.5px; font-weight: 600; }
.pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.pilula { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; color: var(--texto); font-size: 13px; font-weight: 600; }
.pilula:hover { border-color: rgba(15,23,42,.3); text-decoration: none; }
.pilula span { font-size: 11.5px; color: var(--texto-2); }
.pilula.ativa { background: var(--texto); border-color: var(--texto); color: #fff; }
.pilula.ativa span { color: rgba(255,255,255,.7); }
.barra-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; flex-shrink: 0; }
.barra-filtros .acoes { margin-left: auto; }
.busca { position: relative; width: 300px; max-width: 100%; }
.busca .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--texto-2); }
.busca .campo { padding-left: 33px; }

/* ───────── Tabelas ───────── */
.tabela-cartao { background: #fff; border: 1px solid var(--borda); border-radius: 12px; overflow: clip; }
.tabela-rolagem { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; text-align: left; font-size: 13.5px; }
.tabela th { padding: 10px 16px; border-bottom: 1px solid var(--borda); white-space: nowrap; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.tabela td { padding: 8px 16px; border-bottom: 1px solid var(--borda-suave); vertical-align: middle; height: 52px; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover { background: rgba(246,247,250,.8); }
.tabela td.seta { width: 30px; padding-right: 14px; color: var(--texto-3); }
.tabela tr.clicavel:hover td.seta { color: var(--texto); }
.tabela .forte { font-weight: 600; }
.tabela .fraco { color: var(--texto-2); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-rodape { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-top: 1px solid var(--borda); background: #fff; font-size: 12.5px; color: var(--texto-2); }
.tabela-rodape { padding: 10px 16px; font-size: 13px; }
.rodape-direita { display: flex; align-items: center; gap: 18px; }
.por-pagina label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); }
.por-pagina select { height: 30px; padding: 0 6px; border: 1px solid var(--borda); border-radius: 7px; background: #fff; font: inherit; font-size: 13px; color: var(--texto); cursor: pointer; }
.paginas { display: flex; align-items: center; gap: 4px; }
.paginas a, .paginas span { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.paginas a:hover { background: var(--indigo-suave); color: var(--indigo-escuro); text-decoration: none; }
.paginas .atual { background: var(--indigo); color: #fff; }
.paginas .desab { color: #cbd5e1; }
.paginas .reticencias { min-width: 18px; padding: 0; color: var(--texto-2); }
@media (max-width: 720px) { .por-pagina { display: none; } }
.vazio { padding: 40px 20px; text-align: center; color: var(--texto-2); font-size: 13px; }
.vazio .ic { color: var(--texto-3); margin-bottom: 8px; }
.vazio h3 { font-size: 14.5px; color: var(--texto); margin-bottom: 3px; }
.vazio .botao-primario { margin-top: 12px; }
.pessoa { display: flex; align-items: center; gap: 9px; min-width: 0; }
.avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--texto-2); background: repeating-linear-gradient(135deg, #e2e8f0 0 5px, #edf1f6 5px 10px); }
.pessoa .nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pessoa small { display: block; color: var(--texto-2); font-size: 11.5px; }
.truncar { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.linha-dado { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--borda-suave); font-size: 13.5px; }
.linha-dado:last-child { border-bottom: 0; }
.linha-dado > span:first-child { color: var(--texto-2); flex-shrink: 0; }
.linha-dado > span:last-child { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.chave-acesso { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.historico { list-style: none; margin: 0; padding: 0; }
.historico li { position: relative; padding: 0 0 12px 18px; font-size: 12.5px; }
.historico li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--indigo-claro); }
.historico li::after { content: ""; position: absolute; left: 6px; top: 15px; bottom: 0; width: 1px; background: var(--borda); }
.historico li:last-child::after { display: none; }
.historico .quando { font-size: 11.5px; color: var(--texto-2); }

/* ───────── Menus suspensos ───────── */
.suspenso { position: relative; display: inline-flex; }
.suspenso-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; padding: 5px; background: #fff; border: 1px solid var(--borda); border-radius: 11px; box-shadow: 0 16px 40px -12px rgba(15,23,42,.35); z-index: 50; display: none; }
.suspenso.aberto .suspenso-menu { display: block; }
.suspenso-menu a, .suspenso-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font-size: 13.5px; color: var(--texto); text-align: left; cursor: pointer; }
.suspenso-menu a:hover, .suspenso-menu button:hover { background: var(--fundo); text-decoration: none; }
.suspenso-menu .ic { color: var(--texto-2); }
.criar .suspenso-menu { left: 0; right: 0; }
.painel-filtros { width: 300px; padding: 12px; left: 0; right: auto; }

/* ───────── Modal com etapas ───────── */
.modal-fundo { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.modal-fundo.aberto { display: flex; }
.modal { width: 100%; max-width: 580px; max-height: calc(100dvh - 48px); display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 32px 80px -16px rgba(15,23,42,.55), 0 0 0 1px rgba(15,23,42,.08); }
.modal.largo { max-width: 720px; }
.modal-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.modal-cab h2 { font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; }
.modal-cab p { margin-top: 2px; font-size: 13px; color: var(--texto-2); }
.modal-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; }
.modal-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--borda); background: #f8fafc; border-radius: 0 0 16px 16px; }
.modal-rodape .esquerda { margin-right: auto; font-size: 12px; color: var(--texto-2); }
.etapas { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--borda); background: #fbfbfe; }
.etapas li { display: flex; align-items: center; gap: 8px; flex: 1; list-style: none; font-size: 13.5px; font-weight: 600; color: var(--texto-3); white-space: nowrap; }
.etapas li:last-child { flex: none; }
.etapas li::after { content: ""; flex: 1; height: 1px; min-width: 12px; background: var(--borda); }
.etapas li:last-child::after { display: none; }
.etapas .n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--borda); font-size: 12.5px; flex-shrink: 0; }
.etapas li.atual { color: var(--texto); }
.etapas li.atual .n { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.etapas li.feita { color: var(--texto-2); }
.etapas li.feita .n { background: #10b981; border-color: #10b981; color: #fff; }
.etapa { display: none; }
.etapa.atual { display: block; }

/* Autocomplete */
.auto { position: relative; }
.auto .ic-busca { position: absolute; right: 10px; top: 10px; color: var(--texto-2); pointer-events: none; }
.auto .campo { padding-right: 30px; }
.auto-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); max-height: 250px; overflow-y: auto; padding: 4px; background: #fff; border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 16px 40px -12px rgba(15,23,42,.35); z-index: 60; }
.auto-lista button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.auto-lista button:hover, .auto-lista button.foco { background: var(--indigo-suave); }
.auto-lista mark { background: none; color: var(--indigo); font-weight: 600; }
.auto-lista small { display: block; color: var(--texto-2); font-size: 12px; }
.auto-lista .vazio-auto { padding: 9px; color: var(--texto-2); font-size: 12.5px; }

.resumo { border: 1px solid var(--borda); border-radius: 11px; padding: 2px 13px; }
.resumo .total { display: flex; justify-content: space-between; padding: 10px 0 8px; font-size: 14.5px; font-weight: 600; border-top: 1px solid var(--borda); }

.rodape-tela { position: sticky; bottom: -24px; margin: 16px -36px -24px; padding: 0 36px; height: 64px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: #fff; border-top: 1px solid var(--borda); z-index: 10; flex-shrink: 0; }
.rodape-tela .esquerda { margin-right: auto; font-size: 12.5px; color: var(--texto-2); }
.espacador { flex: 1; }

.toast { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; align-items: flex-start; gap: 9px; max-width: 440px; padding: 11px 14px; border-radius: 11px; background: var(--texto); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.45; box-shadow: 0 16px 40px -12px rgba(15,23,42,.5); animation: toast 6s forwards; }
.toast.erro { background: var(--erro); }
.toast .ic { color: #6ee7b7; margin-top: 1px; }
.toast.erro .ic { color: #fff; }
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 5%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; visibility: hidden; } }

.tela-solo { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.caixa-solo { width: 100%; max-width: 400px; padding: 28px; background: #fff; border: 1px solid var(--borda); border-radius: 16px; }
.caixa-solo .marca { margin-bottom: 20px; }
.caixa-solo h1 { font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.caixa-solo .sub { margin: 3px 0 18px; color: var(--texto-2); font-size: 13px; }

pre.codigo { margin: 6px 0 12px; padding: 11px 13px; border-radius: 10px; background: var(--noite); color: #e2e8f0; font-family: var(--mono); font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre; }
code.inline { padding: 1px 5px; border-radius: 5px; background: var(--neutro-fundo); font-family: var(--mono); font-size: 11.5px; }
.texto-2 { color: var(--texto-2); } .verde { color: var(--ok); } .vermelho { color: var(--erro); } .laranja { color: var(--aviso); }
.doc p { font-size: 13px; line-height: 1.6; margin: 0 0 8px; }

@media (max-width: 1100px) {
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicadores > *:nth-child(3) { border-left: 0; }
  .indicadores > *:nth-child(n+3) { border-top: 1px solid var(--borda); }
  .colunas, .colunas-lado { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .lateral { position: fixed; left: -280px; height: 100dvh; transition: left .2s; box-shadow: 0 0 40px rgba(0,0,0,.2); }
  body.menu-aberto .lateral { left: 0; }
  .recolher { display: none; }
  .topo { padding: 0 14px; }
  .topo .abrir-menu { display: block; }
  .empresa-chip, .topo-busca, .chip.usuario { display: none; }
  .conteudo-interno { padding: 14px; }
  .rodape-tela { margin: 14px -14px -14px; padding: 0 14px; bottom: -14px; }
  .grade, .grade-3, .grade-4 { grid-template-columns: 1fr; }
  .busca { width: 100%; }
  .tabela .some-celular { display: none; }
}
.menu-item .menu-contador { flex: none; }

/* Modal de formulário (como o do Asaas): altura fixa, cabeçalho e rodapé presos, só o corpo rola */
.modal.fixo { max-width: 720px; height: min(660px, calc(100dvh - 64px)); }
.modal.fixo .modal-corpo { padding: 20px 28px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.modal.fixo .modal-corpo::-webkit-scrollbar { width: 8px; }
.modal.fixo .modal-corpo::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.modal.fixo .modal-cab, .modal.fixo .etapas, .modal.fixo .modal-rodape { padding-left: 28px; padding-right: 28px; flex-shrink: 0; }
.modal.fixo .modal-rodape { padding-top: 14px; padding-bottom: 14px; }
.titulo-secao { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; margin: 22px 0 12px; }
.titulo-secao:first-child { margin-top: 0; }
.titulo-secao .opc { font-size: 13px; font-weight: 400; color: var(--texto-2); }
.interruptor > span:not(.trilho) { flex: 1; }
.interruptor .trilho { flex: none; }
/* ver → Editar */
[data-editavel] .so-edicao { display: none; }
[data-editavel].editando .so-edicao { display: flex; }
[data-editavel].editando [data-editar] { display: none; }
[data-editavel] .campo:disabled { background: var(--fundo); color: var(--texto-2); border-color: transparent; opacity: 1; cursor: default; }
.cartao-cab-faixa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--borda); background: #fbfbfe; border-radius: 12px 12px 0 0; }
.cartao-cab-faixa h2 { font-size: 15px; font-weight: 600; }
.cartao-corpo { padding: 18px; }
.acoes-edicao { gap: 8px; justify-content: flex-start; margin-top: 16px; }
.dropzone { display: grid; place-items: center; gap: 6px; padding: 26px; border: 1.5px dashed var(--borda); border-radius: 12px; background: var(--fundo); color: var(--texto-2); text-align: center; cursor: pointer; }
.dropzone:hover { border-color: var(--indigo); color: var(--indigo-escuro); }
.dropzone input { display: none; }
.selo-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--indigo-suave); color: var(--indigo-escuro); border: 1px solid var(--indigo-claro); }

/* modal empilhado (ex.: adicionar cliente por cima da cobrança) */
.modal-fundo.empilhado { z-index: 85; background: rgba(15,23,42,.35); }

/* ───────── Primeiros passos ───────── */
.link-botao { border: 0; background: none; padding: 0 4px; color: var(--indigo); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.link-botao:hover { text-decoration: underline; }
.passos-pagina { max-width: 860px; margin: 8px auto 0; }
.passos-topo { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.passos-topo h1 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.passos-topo p { margin-top: 3px; color: var(--texto-2); font-size: 14px; }
.passos-icone { width: 42px; height: 42px; border-radius: 11px; background: var(--indigo-suave); color: var(--indigo-escuro); display: grid; place-items: center; flex: none; }
.passos-progresso { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.passos-progresso .barra { flex: 1; height: 6px; border-radius: 99px; background: var(--borda); overflow: hidden; }
.passos-progresso .barra span { display: block; height: 100%; background: var(--indigo); border-radius: 99px; transition: width .3s; }
.passos-progresso small { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.passos-lista { padding: 0; }
.passo { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--borda); }
.passo:first-child { border-top: 0; }
.passo-num { width: 28px; height: 28px; border-radius: 99px; border: 1.5px solid var(--borda); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--texto-2); flex: none; font-family: var(--mono); }
.passo.concluido .passo-num { background: var(--ok-fundo, #ecfdf3); border-color: transparent; color: var(--ok, #16a34a); }
.passo-texto { flex: 1; min-width: 0; }
.passo-texto b { display: block; font-size: 14.5px; font-weight: 600; }
.passo-texto small { display: block; margin-top: 2px; font-size: 13px; color: var(--texto-2); }
.passo.concluido .passo-texto b { color: var(--texto-2); }
.passo-acoes { display: flex; align-items: center; gap: 10px; flex: none; }
.passos-depois { text-align: center; margin: 16px 0 8px; }

/* ───────── Troca de empresa ───────── */
.empresa-troca { position: relative; }
.empresa-troca .empresa-chip { background: #fff; cursor: pointer; font: inherit; text-align: left; }
.empresa-troca .suspenso-menu { left: 0; right: auto; min-width: 290px; }
.empresa-troca .suspenso-menu .rotulo { padding: 6px 10px 4px; font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); }
.empresa-troca .suspenso-menu button small { display: block; font-size: 11.5px; color: var(--texto-2); }
.empresa-troca .suspenso-menu .marcada { background: var(--indigo-suave); }
.empresa-troca .suspenso-menu hr { border: 0; border-top: 1px solid var(--borda); margin: 5px 0; }
@media (max-width: 720px) { .passo { flex-wrap: wrap; } .passo-acoes { width: 100%; justify-content: flex-end; } }

/* ───────── Abas dentro do modal (cobrança/assinatura) ───────── */
.modal .abas-modal { position: sticky; top: -20px; z-index: 3; margin: -20px -28px 18px; padding: 0 20px; background: #fff; }
.abas-modal .aba { height: 46px; border: 0; border-bottom: 3px solid transparent; background: none; font-family: inherit; font-size: 14px; cursor: pointer; }
.abas-modal .aba.ativa { border-bottom-color: var(--indigo); }
[data-painel][hidden] { display: none !important; }
.lista-dados { display: grid; grid-template-columns: 120px 1fr; gap: 9px 12px; font-size: 13.5px; }
.lista-dados dt { color: var(--texto-2); }
.lista-dados dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lista-marcar { max-height: 340px; overflow-y: auto; border: 1px solid var(--borda); border-radius: 10px; }
.lista-marcar label { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--borda); font-size: 13.5px; cursor: pointer; }
.lista-marcar label:first-child { border-top: 0; }
.lista-marcar label:hover { background: var(--fundo); }
.lista-marcar label[hidden] { display: none; }
.lista-marcar input { width: 16px; height: 16px; accent-color: var(--indigo); flex: none; }
.lista-marcar small { display: block; font-size: 12px; color: var(--texto-2); }

/* ───────── Documentação da API ───────── */
.doc-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.doc-indice { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 2px; }
.doc-indice .rotulo { margin: 14px 0 6px 10px; }
.doc-indice .rotulo:first-child { margin-top: 0; }
.doc-indice a { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--texto-2); }
.doc-indice a:hover { background: #fff; color: var(--texto); text-decoration: none; }
.doc-indice a.ativo { background: var(--indigo-suave); color: var(--indigo-escuro); font-weight: 600; }
.doc-indice .cont { font-family: var(--mono); font-size: 11px; color: var(--texto-2); }
.doc-conteudo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.doc-conteudo section { scroll-margin-top: 12px; }
.doc-h2 { font-size: 16px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 10px; }
.doc-h3 { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); margin: 16px 0 8px; }
.doc-conteudo p { font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; }
.doc-nota { color: var(--texto-2); font-size: 13px !important; }
.doc-passos { margin: 0 0 14px; padding-left: 20px; font-size: 13.5px; line-height: 1.9; }
.doc-exemplo { border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.doc-exemplo-cab { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 12px; background: var(--fundo); border-bottom: 1px solid var(--borda); font-size: 12.5px; font-weight: 600; }
.doc-exemplo .codigo { margin: 0; border-radius: 0; }
.doc-tabela td { font-size: 13px; vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
.doc-grupo .doc-h2 { margin: 6px 0 8px 2px; }
.doc-rota { border-top: 1px solid var(--borda); }
.doc-rota:first-child { border-top: 0; }
.doc-rota summary { display: flex; align-items: center; gap: 14px; padding: 11px 16px; cursor: pointer; list-style: none; }
.doc-rota summary::-webkit-details-marker { display: none; }
.doc-rota summary:hover { background: var(--fundo); }
.doc-rota[open] summary { background: var(--fundo); border-bottom: 1px solid var(--borda); }
.doc-metodo { flex: none; width: 62px; padding: 3px 0; border-radius: 6px; text-align: center; font-family: var(--mono); font-size: 11px; font-weight: 600; }
.doc-metodo.get { background: var(--ok-fundo); color: var(--ok); }
.doc-metodo.post { background: var(--indigo-suave); color: var(--indigo-escuro); }
.doc-metodo.put { background: var(--aviso-fundo); color: var(--aviso); }
.doc-metodo.delete { background: var(--erro-fundo); color: var(--erro); }
.doc-caminho { flex: none; min-width: 230px; font-family: var(--mono); font-size: 12.5px; color: var(--texto); }
.doc-resumo { flex: 1; min-width: 0; font-size: 13.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-seta { flex: none; color: var(--texto-2); transition: transform .15s; }
.doc-rota[open] .doc-seta { transform: rotate(180deg); }
.doc-detalhe { padding: 14px 18px 18px; }
.doc-detalhe .doc-h3:first-child { margin-top: 0; }
.obrig { font-size: 10.5px; font-weight: 600; color: var(--erro); }
.doc-respostas { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-resp { padding: 4px 9px; border-radius: 7px; font-size: 12.5px; background: var(--fundo); color: var(--texto-2); }
.doc-resp b { font-family: var(--mono); margin-right: 4px; }
.doc-resp.ok b { color: var(--ok); } .doc-resp.erro b { color: var(--erro); }
@media (max-width: 960px) { .doc-layout { grid-template-columns: 1fr; } .doc-indice { display: none; } .doc-caminho { min-width: 0; } .doc-resumo { display: none; } }

/* ───────── Acordeões (tributos, como no Asaas) ───────── */
.acordeoes { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.acordeao { border: 1px solid var(--borda); border-radius: 12px; background: #fff; }
.acordeao > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; font-size: 14.5px; }
.acordeao > summary::-webkit-details-marker { display: none; }
.acordeao > summary .opc { color: var(--texto-2); font-weight: 400; font-size: 13px; }
.acordeao > summary .seta { color: var(--texto-2); transition: transform .15s; }
.acordeao[open] > summary { border-bottom: 1px solid var(--borda); }
.acordeao[open] > summary .seta { transform: rotate(180deg); }
.acordeao-corpo { padding: 14px 16px 16px; }
.ajuda-bloco { font-size: 13px; color: var(--texto-2); line-height: 1.5; margin: 0 0 12px; }
.titulo-sub { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); margin: 16px 0 8px; }
.info-aliq { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); }
.info-aliq span { font-size: 12.5px; color: var(--texto-2); }
.info-aliq b { font-size: 16px; font-variant-numeric: tabular-nums; }
.info-aliq small { font-size: 12.5px; color: var(--texto-2); }
.resumo-liquido { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borda); font-size: 13px; color: var(--texto-2); }
.resumo-liquido b { color: var(--texto); margin-left: 4px; font-variant-numeric: tabular-nums; }
.auto.desabilitado .campo { background: #eef1f5; color: var(--texto-2); cursor: not-allowed; }

/* ───────── Importar planilha ───────── */
.importar { align-items: start; }
.modelos { display: flex; flex-direction: column; gap: 8px; }
.modelo { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--borda); border-radius: 10px; color: var(--texto); }
.modelo:hover { border-color: var(--indigo); background: var(--indigo-suave); text-decoration: none; }
.modelo .ic-box { width: 34px; height: 34px; border-radius: 9px; background: var(--indigo-suave); color: var(--indigo-escuro); display: grid; place-items: center; flex: none; }
.modelo > span:nth-child(2) { flex: 1; min-width: 0; }
.modelo b { display: block; font-size: 14px; font-weight: 600; }
.modelo small { display: block; font-size: 12.5px; color: var(--texto-2); margin-top: 1px; }
.modelo .seta { color: var(--texto-2); flex: none; }
.colunas-csv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13px; max-height: 420px; overflow-y: auto; }
.colunas-csv dt { margin: 0; }
.colunas-csv dd { margin: 0; color: var(--texto-2); }
.importar { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.cartao-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--borda); background: #f8fafc; border-radius: 0 0 12px 12px; }
@media (max-width: 960px) { .importar { grid-template-columns: 1fr; } }

/* ───────── Ações da nota (como no Asaas: no cartão, coloridas, desabilitadas quando não valem) ───────── */
.botao-perigo-cheio { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1px solid var(--erro); background: var(--erro); color: #fff; transition: .12s; }
.botao-perigo-cheio:hover { filter: brightness(.92); }
.acoes-nota { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acoes-nota form { display: contents; }
.acoes-nota.secundarias { margin: -2px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.acoes-nota button[disabled], .acoes-nota a[aria-disabled="true"] { opacity: .4; cursor: not-allowed; pointer-events: none; filter: grayscale(.3); }

.botao-contorno { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1.5px solid var(--indigo); background: #fff; color: var(--indigo) !important; text-decoration: none !important; transition: .12s; }
.botao-contorno:hover { background: var(--indigo-suave); }

/* lista do autocompletar: título e "Novo cliente" fixo no fim */
.auto-titulo { padding: 8px 12px 4px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.auto-lista .auto-novo { display: flex; align-items: center; gap: 8px; width: 100%; border-top: 1px solid var(--borda) !important; color: var(--indigo); font-weight: 600; position: sticky; bottom: 0; background: #fff; }
.auto-lista .auto-novo:hover { background: var(--indigo-suave); }
.auto-novo .mais { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--indigo); color: #fff; font-size: 14px; line-height: 1; }

/* ───────── Seletor de cliente em modal ───────── */
.modal.seletor-cliente { max-width: 560px; height: min(560px, calc(100dvh - 64px)); display: flex; flex-direction: column; }
.seletor-busca { padding: 12px 20px; border-bottom: 1px solid var(--borda); }
.seletor-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 10px !important; }
.seletor-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 9px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--texto); }
.seletor-item:hover, .seletor-item:focus-visible { background: var(--indigo-suave); outline: none; }
.seletor-item b { display: block; font-size: 14px; font-weight: 600; }
.seletor-item small { display: block; font-size: 12.5px; color: var(--texto-2); margin-top: 1px; }
.seletor-item .avatar { flex: none; }
.campo-seletor { cursor: pointer; background: #fff; caret-color: transparent; }
#modal-escolher-cliente.empilhado { z-index: 86; }

/* ───────── Boas-vindas (primeiro acesso) ───────── */
.boas-vindas { display: flex; gap: 24px; align-items: center; padding: 26px 28px; margin-bottom: 16px; background: linear-gradient(135deg, var(--indigo-suave), #fff 60%); }
.bv-texto { flex: 1; min-width: 0; }
.bv-selo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: var(--ok-fundo); color: var(--ok); font-size: 12.5px; font-weight: 600; }
.boas-vindas h2 { font-size: 22px; letter-spacing: -.02em; margin: 10px 0 6px; }
.boas-vindas p { color: var(--texto-2); font-size: 14.5px; margin: 0 0 10px; max-width: 620px; }
.bv-passos { margin: 0 0 16px; padding-left: 20px; font-size: 14px; line-height: 1.9; }
.bv-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.bv-arte { flex: none; width: 140px; height: 140px; border-radius: 28px; background: var(--indigo); color: #fff; display: grid; place-items: center; box-shadow: 0 24px 50px -20px var(--indigo); }
@media (max-width: 760px) { .bv-arte { display: none; } }

/* Ações em lote (lista de notas) */
.tabela .marcar { width: 36px; padding-right: 0; }
.tabela .marcar label { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px 0; cursor: pointer; }
.tabela .marcar input { width: 16px; height: 16px; accent-color: var(--indigo); cursor: pointer; }
.tabela tr.marcada td { background: var(--indigo-suave); }
.lote .suspenso-menu { min-width: 280px; }
.lote .suspenso-menu button > span { display: flex; flex-direction: column; }
.lote .suspenso-menu small { font-size: 11.5px; color: var(--texto-2); }
.lote .suspenso-menu button:disabled { opacity: .45; cursor: not-allowed; }
.lote .suspenso-menu button:disabled:hover { background: none; }
.lote-qtd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--indigo); color: #fff; font-size: 11.5px; font-weight: 600; }
.lote-qtd[hidden] { display: none; }

/* Configurações › Arquivos (nome do PDF/XML e pasta) */
.opcoes-nome { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-bottom: 14px; }
.opcao-nome { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 12px; cursor: pointer; transition: .12s; }
.opcao-nome:hover { background: var(--fundo); }
.opcao-nome:has(input:checked) { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-suave); }
.opcao-nome input { margin-top: 3px; accent-color: var(--indigo); }
.opcao-nome > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13.5px; }
.opcao-nome code { align-self: flex-start; }
.opcao-nome small { color: var(--texto-2); font-size: 12px; word-break: break-all; }
.nome-personalizado { margin-bottom: 12px; }
.variaveis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.variaveis .botao { font-family: var(--mono); font-size: 12px; }
.previa-nome b { word-break: break-all; }
.teste-pasta { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.teste-pasta li { display: flex; gap: 8px; font-size: 13px; color: var(--texto); }
.teste-pasta li > span { flex: none; width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; margin-top: 1px; }
.teste-pasta li.ok > span { background: var(--ok); }
.teste-pasta li.aviso > span { background: #d97706; }
.teste-pasta li.erro > span { background: var(--erro); }