/* ACTUS HUB - components (botoes, cards, tabelas, forms, modais, etc) */

/* Botoes */
.btn{display:inline-flex; align-items:center; gap:8px; height:var(--h-controle); box-sizing:border-box; padding:0 14px; border:1px solid var(--borda-forte); border-radius:var(--raio-sm); background:var(--branco); color:var(--texto); font-size:13px; font-weight:500; font-family:inherit; cursor:pointer; transition:var(--transicao); line-height:1;}
.btn:hover{border-color:var(--cor-primaria); color:var(--cor-primaria-escura);}
.btn-sm{height:var(--h-controle-sm); padding:0 10px; font-size:12px; font-weight:500;}
.btn-primary{display:inline-flex; align-items:center; gap:8px; height:var(--h-controle); box-sizing:border-box; padding:0 16px; border:none; border-radius:var(--raio-sm); background:linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura)); color:#fff; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; transition:var(--transicao); line-height:1;}
.btn-primary:hover{color:#fff; filter:brightness(1.06); box-shadow:var(--sombra);}
.btn-perigo{display:inline-flex; align-items:center; gap:8px; height:var(--h-controle); box-sizing:border-box; padding:0 16px; border:none; border-radius:var(--raio-sm); background:var(--vermelho); color:#fff; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; transition:var(--transicao); line-height:1;}
.btn-perigo:hover{color:#fff; filter:brightness(1.05); box-shadow:var(--sombra);}
.btn-bloco{width:100%; justify-content:center; padding:11px;}
.btn-icone{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--raio-sm); border:1px solid transparent; background:transparent; color:var(--texto-secundario); cursor:pointer; transition:var(--transicao); text-decoration:none;}
.btn-icone:hover{background:var(--fundo); color:var(--cor-primaria);}
.btn-icone.perigo:hover{color:var(--vermelho);}
.icon-danger{color:var(--vermelho);}
/* Slot de acao indisponivel pra esta linha: mantem o alinhamento vertical
   das colunas de acoes, mas nao pode ser clicado. Ao passar o mouse, o
   title="..." explica o porque. Usar em <span class="btn-icone desabilitado">. */
.btn-icone.desabilitado{opacity:.30; cursor:not-allowed;}
.btn-icone.desabilitado:hover{background:transparent; color:var(--texto-secundario);}
.btn-icone.desabilitado.perigo:hover{color:var(--texto-secundario);}
/* Wrapper das acoes da linha: cada acao e um slot de 32px, alinhados a
   direita, com gap fixo. Mantem alinhamento vertical entre linhas mesmo
   que uma linha tenha slots desabilitados. */
.celula-acoes{display:inline-flex; gap:4px; align-items:center; justify-content:flex-end;}

/* Cards */
.card, .cd{background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); padding:18px; box-shadow:var(--sombra-sm);}
.card h3{margin-bottom:10px;}
.passos{padding-left:20px;} .passos li{margin:6px 0;}

/* Tabelas */
/* overflow:visible, NAO hidden: com o menu sanduiche dentro do card, o
   hidden cortava o popup e o ultimo item ficava invisivel e sem clique.
   O arredondamento passou pro .tabela-scroll, que ja recorta por causa do
   overflow-x. */
.tabela-wrap{background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra-sm);}
.tabela-scroll{overflow-x:auto; border-radius:0 0 var(--raio) var(--raio);}
/* Card sem cabecalho proprio: a tabela comeca no topo e precisa do
   arredondamento de cima tambem. */
.tabela-wrap > .tabela-scroll:first-child{border-radius:var(--raio);}
.tabela{width:100%; border-collapse:collapse;}
.tabela th,.tabela td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--borda); white-space:nowrap;}
.tabela td{font-size:14px;}
.tabela th{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-suave); background:var(--branco);}
.tabela tbody tr:last-child td{border-bottom:none;}
.tabela tbody tr:hover td{background:var(--fundo-2);}
.tabela .col-acoes{text-align:right;}
.tabela-vazia{padding:34px; text-align:center; color:var(--texto-suave); white-space:normal;}
.tabela-vazia .icon{color:var(--texto-fraco); display:block; margin:0 auto 8px;}

/* Forms (padrao v900: label 13px 600, sem uppercase, sem hierarquia excessiva) */
.campo{margin-bottom:14px;}
.campo label{display:block; font-size:13px; font-weight:600; color:var(--texto); margin-bottom:6px;}
.input,.textarea{width:100%; height:var(--h-controle); box-sizing:border-box; padding:0 12px; background:var(--branco); border:1px solid var(--borda-forte); border-radius:var(--raio-sm); color:var(--texto); font-size:14px; font-family:inherit; transition:var(--transicao);}
.textarea{height:auto; padding:10px 12px; min-height:90px; resize:vertical; line-height:1.5;}
.input:focus,.textarea:focus{outline:none; border-color:var(--cor-primaria); box-shadow:0 0 0 3px var(--cor-primaria-suave);}
.input-senha{position:relative;}
.input-senha .input{padding-right:42px;}
.toggle-senha{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--texto-suave); padding:6px;}
/* Lupa dentro do input a direita: mesmo padrao do .input-senha */
.input-com-lupa{position:relative;}
.input-com-lupa .input{padding-right:42px;}
.btn-lupa{position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--texto-suave); padding:6px 8px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--raio-sm); transition:var(--transicao);}
.btn-lupa:hover{background:var(--cor-primaria-suave); color:var(--cor-primaria);}
.btn-lupa:disabled{opacity:.5; cursor:not-allowed;}
.btn-lupa .icon{font-size:16px;}
/* Marca visual de obrigatorio no label */
.campo label .obrig{color:var(--vermelho); margin-left:2px;}
/* Campos especiais (evitar style inline no template) */
.form-linha .campo.campo-uf{flex:0 0 108px; min-width:0;}
.form-linha .campo.campo-cep{flex:0 0 140px; min-width:0;}
.form-linha .campo.campo-numero{flex:0 0 110px; min-width:0;}
.input-uf{text-transform:uppercase;}
.hint-campo{font-weight:500; font-size:11.5px;}
.hint-campo.hint-ok{color:var(--verde);}
.hint-campo.hint-erro{color:var(--vermelho);}
.form-linha{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px;}
.form-linha:last-child,.campo:last-child{margin-bottom:0;}
.form-linha .campo{flex:1; min-width:180px; margin-bottom:0;}
/* Altura de 40px agora vem da base (--h-controle) aplicada em .btn, .input,
   .sb-display etc, e nao mais da regra local .form-linha. Removida pra nao
   mascarar o Font_Inherit_em_Form nos filhos e pra evitar height duplicado.
   .btn-sm dentro de .form-linha herda --h-controle-sm da base. */

/* Badges */
.badge{display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:var(--raio-full); font-size:11.5px; font-weight:600;}
.badge-ok{background:var(--verde-suave); color:var(--verde);}
.badge-off{background:var(--vermelho-suave); color:var(--vermelho);}
.badge-aviso{background:var(--ambar-suave); color:var(--ambar);}
.badge-info{background:var(--azul-info-suave); color:var(--azul-info);}
.badge-neutro{background:var(--fundo); color:var(--texto-secundario);}

/* Flash */
.flash{display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:var(--raio-sm); font-size:13.5px; font-weight:500; border:1px solid transparent;}
.flash .icon{flex-shrink:0;}
.flash.success{background:var(--verde-suave); color:var(--verde); border-color:#bfe6cd;}
.flash.error{background:var(--vermelho-suave); color:var(--vermelho); border-color:#f3c4c4;}

/* Login */
.tela-login{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; background:linear-gradient(135deg, var(--fundo), var(--cor-primaria-suave));}
.login-card{width:100%; max-width:400px; padding:28px;}
.login-marca{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.login-logo{width:46px; height:46px; border-radius:10px; object-fit:contain;}
.login-marca .nm{font-weight:700; font-size:16px; color:var(--cor-primaria-escura);}
.login-marca .sb{font-size:12px; color:var(--texto-suave);}
.login-card h1{font-size:20px; margin-bottom:4px;}
.login-card .intro{color:var(--texto-suave); font-size:13px; margin-bottom:16px;}
.login-alt{margin-top:16px; text-align:center; font-size:13px;}
.login-dica{margin-top:14px; padding:10px 12px; background:var(--fundo-2); border:1px dashed var(--borda-forte); border-radius:var(--raio-sm); font-size:12px; color:var(--texto-suave); text-align:center; line-height:1.6;}

/* Modal */
.modal-bg{position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); z-index:200; display:none; align-items:center; justify-content:center; padding:16px;}
.modal-bg.aberto{display:flex;}
.modal-caixa{background:var(--branco); border-radius:var(--raio-lg); width:100%; max-width:480px; max-height:90vh; overflow:auto; box-shadow:var(--sombra-lg); animation:modalSobe .2s ease;}
.modal-largo{max-width:720px;}
.modal-caixa.modal-sb{overflow:visible; max-height:none;}
/* modal 70x70: viewport ampla; altura se adapta ao conteudo (limite 70vh) */
.modal-caixa.modal-70{width:70vw; max-width:70vw; max-height:70vh; display:flex; flex-direction:column;}
.modal-caixa.modal-70 .modal-corpo{flex:1; overflow-y:auto;}
@media (max-width:880px){
  .modal-caixa.modal-70{width:96vw; max-width:96vw; max-height:92vh;}
}
.modal-confirm{max-width:420px;}
.modal-confirm .modal-corpo{text-align:center;}
.modal-confirm .modal-rodape{justify-content:center;}
.confirm-ico{color:var(--ambar); margin-bottom:8px;}
@keyframes modalSobe{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.modal-cab{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--borda);}
.modal-cab h3{margin:0;}
.modal-x{background:none; border:none; cursor:pointer; color:var(--texto-suave); font-size:18px; padding:4px; line-height:1;}
.modal-corpo{padding:18px 20px;}
.modal-rodape{display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:16px 20px; border-top:1px solid var(--borda);}
/* Lembrete no rodape do modal (esquerda do Cancelar). margin-right:auto
   ocupa todo o espaco livre e empurra o proprio elemento pra esquerda, deixando
   os botoes de acao colados na direita. Cor vermelha porque a regra que
   comunica e uma restricao (nao aceita filial no cadastro, etc). */
.modal-info-lembrete{margin-right:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--vermelho); font-weight:600; line-height:1.3; max-width:60%;}
.modal-info-lembrete .icon{color:var(--vermelho); font-size:14px; flex-shrink:0;}
/* Sem isso, o display:inline-flex acima venceria o hidden do HTML (user-agent
   aplica display:none, mas classe explicita tem prioridade maior). */
.modal-info-lembrete[hidden]{display:none;}
@media (max-width:640px){.modal-info-lembrete{display:none;}}

/* dialog popup centrado (para modais que contem SelectBusca).
   Padrao vault (Padrao_Modal_Popup_Centrado.md): <dialog> HTML5 nativo com
   overflow visible pra o dropdown do SelectBusca extrapolar as bordas do
   modal. Uso: <dialog class="popup-centrado"> + .showModal(). */
dialog.popup-centrado{
  border:none; padding:0; margin:auto;
  width:100%; max-width:520px;
  border-radius:var(--raio-lg);
  box-shadow:var(--sombra-lg);
  color:var(--texto); background:var(--branco);
  overflow:visible !important;
}
dialog.popup-centrado::backdrop{background:rgba(15,23,42,.55); backdrop-filter:blur(2px);}
/* dialog HTML5 e display:none por default; so aparece com .showModal(). */
dialog.popup-centrado:not([open]){display:none;}
/* Variante grande: largura em proporcao aurea (Fibonacci ~= 55/89 = 0.618). */
dialog.popup-centrado.modal-70{width:55vw; max-width:55vw; max-height:70vh;}
dialog.popup-centrado.modal-70[open]{display:flex; flex-direction:column;}
dialog.popup-centrado.modal-70 .modal-corpo{flex:1; overflow-y:auto;}
@media (max-width:1280px){
  dialog.popup-centrado.modal-70{width:68vw; max-width:68vw;}
}
@media (max-width:880px){
  dialog.popup-centrado.modal-70{width:96vw; max-width:96vw; max-height:92vh;}
}

/* SelectBusca (substitui select nativo) */
.selectbusca{position:relative;}
.sb-display{height:var(--h-controle); box-sizing:border-box; padding:0 12px; background:var(--branco); border:1px solid var(--borda-forte); border-radius:var(--raio-sm); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:14px;}
.sb-display .sb-label{color:var(--texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.selectbusca.open .sb-display{border-color:var(--cor-primaria);}
.sb-panel{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:250; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio-sm); box-shadow:var(--sombra-md); max-height:260px; overflow:auto; display:none;}
.selectbusca.open .sb-panel{display:block;}
.sb-search{width:100%; height:38px; padding:0 12px; border:none; border-bottom:1px solid var(--borda); font-size:13px; font-family:inherit;}
.sb-search:focus{outline:none;}
.sb-opt{padding:9px 12px; cursor:pointer; font-size:13.5px;}
.sb-opt:hover{background:var(--cor-primaria-suave); color:var(--cor-primaria-texto);}

/* Toggle on/off */
.cv-sw{display:inline-flex; align-items:center; cursor:pointer;}
.cv-sw input{display:none;}
.cv-sw .pista{display:inline-block; width:42px; height:24px; border-radius:var(--raio-full); background:var(--borda-forte); position:relative; transition:var(--transicao); flex-shrink:0;}
.cv-sw .pista::after{content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--sombra-sm); transition:var(--transicao);}
.cv-sw input:checked + .pista{background:var(--verde);}
.cv-sw input:checked + .pista::after{transform:translateX(18px);}
.cv-sw.desabilitado{opacity:.35; cursor:not-allowed;}
.cv-sw.desabilitado input{pointer-events:none;}

/* Matriz de permissoes */
.pp-cab{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.pp-cab .nm{font-weight:700; font-size:18px; display:flex; align-items:center; gap:8px;}
.pp-cab .ds{color:var(--texto-suave); font-size:13px;}
.pp-barra{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 14px; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); margin-bottom:14px; box-shadow:var(--sombra-sm);}
.pp-barra strong{margin-right:4px; font-size:13px;}
.pp-mini{padding:5px 10px; font-size:12px; border:1px solid var(--borda-forte); background:var(--branco); border-radius:var(--raio-sm); cursor:pointer; font-family:inherit;}
.pp-mini:hover{border-color:var(--cor-primaria); color:var(--cor-primaria);}
.pp-grupo{background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); margin-bottom:14px; overflow:hidden; box-shadow:var(--sombra-sm);}
.pp-grupo-cab{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:var(--fundo-2); border-bottom:1px solid var(--borda); flex-wrap:wrap;}
.pp-grupo-cab h4{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--texto-secundario);}
.pp-grupo-cab .qtd{color:var(--texto-fraco); font-weight:500; margin-left:6px;}
.pp-grupo-cab .acoes{display:flex; gap:6px; flex-wrap:wrap;}
.pp-auto{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 14px; background:var(--cor-primaria-suave); border-bottom:1px solid var(--borda); font-size:12.5px; color:var(--cor-primaria-texto);}
.pp-auto label{display:flex; align-items:center; gap:6px; cursor:pointer;}
.pp-tab{width:100%; border-collapse:collapse;}
.pp-tab th,.pp-tab td{padding:10px 14px; border-bottom:1px solid var(--borda); text-align:left;}
.pp-tab th:not(:first-child), .pp-tab td:not(:first-child){text-align:center; width:96px;}
.pp-tab tbody tr:last-child td{border-bottom:none;}
.pp-rodape{position:sticky; bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra-md); flex-wrap:wrap; margin-top:14px;}

/* Tela de liberacoes */
.lib-eixo{display:flex; flex-direction:column; gap:14px;}
.lib-tabs{display:flex; gap:6px;}
.lib-tab{padding:8px 14px; background:transparent; border:1px solid var(--borda); border-radius:var(--raio-sm); cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; color:var(--texto-suave); display:inline-flex; align-items:center; gap:6px;}
.lib-tab:hover{background:var(--fundo);}
.lib-tab.active{background:var(--cor-primaria-suave); color:var(--cor-primaria-escura); border-color:var(--cor-primaria);}
.lib-selects{display:flex; gap:14px; align-items:flex-end;}
.lib-sel{flex:1; max-width:520px;}
.lib-sel label{display:block; font-size:13px; font-weight:600; color:var(--texto); margin-bottom:6px;}
.lib-cab{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
.lib-cab .lib-nome{font-family:var(--font-titulo); font-weight:700; font-size:18px; letter-spacing:-.02em;}
.lib-flag{display:flex; align-items:center; gap:10px;}
.banner-ve-todos{margin-top:12px; padding:10px 14px; background:var(--azul-info-suave); color:var(--azul-info); border-radius:var(--raio-sm); font-size:13px; display:flex; align-items:center; gap:8px;}
.opcao-radio{display:flex; flex-direction:column; gap:10px;}
.opcao-radio label{display:flex; flex-direction:column; padding:10px 12px; border:1px solid var(--borda); border-radius:var(--raio-sm); cursor:pointer;}
.opcao-radio label:hover{border-color:var(--cor-primaria);}
.opcao-radio input{margin-right:4px;}

/* Utilidades */
.secao{margin-top:16px;}
.txt-centro{text-align:center;}
.muted{color:var(--texto-suave);}
.escondido{display:none !important;}
.flex-1{flex:1;}
.align-self-end{align-self:flex-end;}
.icon-verde{color:var(--verde);}
.icon-ambar{color:var(--ambar);}
.icon-vermelho{color:var(--vermelho);}
.icon-primaria{color:var(--cor-primaria);}

/* Painel de dados vindos de API externa (ex.: ReceitaWS) */
.painel-api{margin-top:14px; background:var(--cor-primaria-suave); border:1px solid var(--borda); border-radius:var(--raio); padding:14px 16px;}
.painel-api-cab{display:flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--cor-primaria-texto); font-weight:700; font-size:13px;}
.painel-api-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 20px;}
@media (max-width:720px){.painel-api-grid{grid-template-columns:1fr;}}
.painel-api-item{display:flex; flex-direction:column; gap:2px; min-width:0;}
.painel-api-item .lb{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--texto-suave);}
.painel-api-item .vl{font-size:14px; color:var(--texto); word-break:break-word;}
.painel-api-item.full{grid-column:1 / -1;}
.painel-api .sit-ativa{color:var(--verde); font-weight:700;}
.painel-api .sit-outra{color:var(--vermelho); font-weight:700;}

/* Filtro popover (padrao Padrao_Barra_de_Filtros do vault, inspirado no
   caixa.html do DataEvo v902). Botao funnel na topbar, ao lado do "+ Novo X".
   Badge = bolinha vermelha visivel quando ha 1+ filtro preenchido. */
.filtro-pop{position:relative; display:inline-flex;}
.filtro-pop .btn-filtro,
.cn-tb-menu .btn-filtro{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:0 14px;
  border:1px solid var(--borda-forte); border-radius:var(--raio-sm);
  background:var(--branco); color:var(--texto-secundario);
  cursor:pointer; font-family:inherit; font-size:13px; font-weight:500;
  line-height:1; transition:var(--transicao);
  box-sizing:border-box;
}
/* Nivela alturas dos botoes de acao na topbar (funnel + "+ Novo X" + Sair +
   Minha conta + futuros). Seletor DESCENDENTE (sem ">"): pega .btn tambem
   quando envolvido por <form> pro CSRF do logout (bug do print: form
   intermediando quebrava o alinhamento com "filho direto"). Botoes dentro
   do popover de filtro sao protegidos por escopo proprio (.filtro-pop-caixa
   nao herda esta regra pois tem grid/layout diferente).
   Padrao_Acao_Primaria_na_Topbar: botao usa .btn-primary.btn-sm (36px). */
.tb-acoes .btn-primary,
.tb-acoes .btn,
.tb-acoes .btn-filtro{
  height:var(--h-controle-sm); box-sizing:border-box;
}
/* Excecao: botoes DENTRO do popover de filtro voltam pra base. O popover
   e um container flutuante que abre a partir do .btn-filtro; os botoes
   Aplicar/Limpar de dentro dele nao sao "botoes da topbar". */
.tb-acoes .filtro-pop-caixa .btn,
.tb-acoes .filtro-pop-caixa .btn-primary{
  height:var(--h-controle);
}
/* Form transparente pra envolver botao que precisa de CSRF (ex: logout na
   topbar). Sem isso, style="display:inline" espalhado nos templates. */
.form-inline{display:inline-flex; align-items:center; margin:0;}
.filtro-pop .btn-filtro:hover,
.cn-tb-menu .btn-filtro:hover{border-color:var(--cor-primaria); color:var(--cor-primaria);}
.filtro-pop.aberto .btn-filtro{border-color:var(--cor-primaria); color:var(--cor-primaria);}
.filtro-pop .btn-filtro .icon,
.cn-tb-menu .btn-filtro .icon{font-size:15px;}
.filtro-pop .filtro-badge{
  position:absolute; top:-3px; right:-3px;
  width:10px; height:10px; border-radius:50%;
  background:var(--vermelho); border:2px solid var(--branco);
  box-shadow:0 1px 3px rgba(220,38,38,.4);
}
.filtro-pop .filtro-badge[hidden]{display:none;}
.filtro-pop-caixa{
  display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:150;
  background:var(--branco); border:1px solid var(--borda-forte); border-radius:var(--raio);
  box-shadow:var(--sombra-md); padding:16px; width:360px;
}
.filtro-pop.aberto .filtro-pop-caixa{display:block;}
.filtro-pop-titulo{
  font-family:var(--font-titulo); font-size:14px; font-weight:700; color:var(--texto);
  display:flex; align-items:center; gap:8px;
  margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--borda);
  letter-spacing:-.01em;
}
.filtro-pop-titulo .icon{color:var(--cor-primaria);}
.filtro-pop-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.filtro-pop-grid label{
  display:flex; flex-direction:column; gap:4px;
  font-size:13px; font-weight:600; color:var(--texto); margin:0;
}
.filtro-pop-grid label.full{grid-column:1 / -1;}
.filtro-pop-grid .input{height:var(--h-controle-sm); font-size:13px;}
.filtro-pop-grid select.input{padding:0 8px; background:var(--branco);}
.filtro-pop-acoes{
  display:flex; justify-content:space-between; gap:8px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--borda);
}
.filtro-pop-acoes .btn-primary,
.filtro-pop-acoes .btn{padding:7px 14px; font-size:13px;}
@media (max-width:640px){
  .filtro-pop-caixa{width:calc(100vw - 24px); max-width:360px;}
  .filtro-pop-grid{grid-template-columns:1fr;}
}

/* Hard delete (acao irreversivel: DROP schema + DELETE cascade). Confirmacao
   forte: usuario le, aguarda countdown, digita a palavra sorteada. So entao
   o botao Apagar libera. Modal proprio em base.html + hard_delete.js. */
.modal-caixa.modal-hd{max-width:460px;}
.hd-msg{font-size:14px; line-height:1.55; margin:0 0 16px; color:var(--texto); white-space:pre-line;}
.hd-instrucao{font-size:13px; color:var(--texto-secundario); text-align:center; margin:0 0 10px;}
.hd-palavra{
  display:inline-block; background:var(--vermelho-suave); color:var(--vermelho);
  padding:3px 12px; border-radius:var(--raio-sm);
  font-family:var(--font-titulo); font-size:15px; font-weight:700; letter-spacing:.15em;
}
input.hd-input{
  text-transform:uppercase; font-family:var(--font-titulo);
  font-size:16px; font-weight:700; letter-spacing:.15em; text-align:center;
}
.btn-perigo[disabled],.btn-perigo:disabled{
  opacity:.35; cursor:not-allowed; filter:grayscale(.4); box-shadow:none;
}
.btn-perigo[disabled]:hover,.btn-perigo:disabled:hover{filter:grayscale(.4); box-shadow:none;}

/* Mini spinner (branco para dentro de botao primario) */
.mini-spin{display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:mini-spin-rot .8s linear infinite; vertical-align:middle;}
/* Mini spinner (escuro para dentro de hint/label inline) */
.mini-spin-dark{display:inline-block; width:12px; height:12px; border:2px solid var(--borda-forte); border-top-color:var(--cor-primaria); border-radius:50%; animation:mini-spin-rot .8s linear infinite; vertical-align:-2px;}
@keyframes mini-spin-rot{to{transform:rotate(360deg);}}

/* Hint inline ao lado do label do campo (usado no fluxo auto-consulta CNPJ) */
.hint-ok{color:var(--verde); font-weight:600;}
.hint-erro{color:var(--vermelho); font-weight:600;}
.hint-ok a,.hint-erro a{color:inherit; text-decoration:underline; font-weight:700;}
.chk{width:18px; height:18px; accent-color:var(--cor-primaria); cursor:pointer;}
.pill-perfil{display:inline-block; padding:3px 10px; border-radius:var(--raio-full); font-size:11.5px; font-weight:600; background:var(--cor-primaria-suave); color:var(--cor-primaria-texto);}
.dl-info{margin-top:12px; padding:12px; background:var(--fundo-2); border:1px solid var(--borda); border-radius:var(--raio-sm); font-size:13px; word-break:break-all;}

/* Topbar do Mapeamento: tag ambar "Alterações não salvas" + botao Salvar.
   Botao Salvar segue o .btn-primary.btn-sm mas com estado disabled esmaecido. */
.mp-tag-pendente{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:var(--raio-full); background:#fff5e0; border:1px solid #f6d78a; color:#a06400; font-size:12.5px; font-weight:600; line-height:1; user-select:none;}
.mp-tag-pendente[hidden]{display:none;}
.mp-tag-pendente .icon{font-size:14px; animation:mpTagPulse 1.6s ease-in-out infinite;}
@keyframes mpTagPulse{0%,100%{opacity:1;} 50%{opacity:.55;}}
#mpSalvarTopo[disabled]{opacity:.45; cursor:not-allowed; filter:grayscale(.25); box-shadow:none;}
#mpSalvarTopo[disabled]:hover{filter:grayscale(.25); box-shadow:none;}

/* Flash auto-hide: transicao suave quando o JS marca .flash-sumindo */
.flash{transition: opacity .35s ease, transform .35s ease, margin .35s ease, max-height .4s ease, padding .35s ease, border-width .35s ease;}
.flash-sumindo{opacity:0; transform:translateY(-6px); margin-bottom:0; max-height:0; padding-top:0; padding-bottom:0; border-width:0; overflow:hidden;}

/* ==========================================================================
   MoCap Center - tela de mapeamento de colunas (de:para)
   ==========================================================================
   Layout da barra topo: 3 blocos com respiro claro:
       [ Cliente ]  |  [ Modelo ]  |  [ Tipo ]
   Separadores verticais e gap generoso (28px) pra dar hierarquia visual.
   Todos os controles (input, select, botao, toggle) na MESMA altura 40px
   (padrao de formulario da vault: Padrao_Formulario.md). */
.mp-topo{padding:14px 20px; margin-bottom:12px; display:flex; align-items:flex-end; gap:28px; flex-wrap:wrap;}
.mp-topo-form-cli{display:flex; align-items:flex-end; gap:10px; flex:1 1 340px; min-width:280px;}
.mp-cli-campo{margin-bottom:0; flex:1 1 auto; min-width:220px;}
.mp-cli-campo .selectbusca .sb-display{height:var(--h-controle);}
.mp-topo-form-cli .btn-primary{height:var(--h-controle); box-sizing:border-box;}
/* Divisor vertical entre blocos (Cliente | Modelo | Tipo) */
.mp-topo-sep{width:1px; height:56px; background:var(--borda); flex-shrink:0; align-self:flex-end; margin-bottom:0;}

/* Bloco Modelo: combo editavel + acoes coladas */
.mp-bloco-modelo{display:flex; align-items:flex-end; gap:10px; flex:2 1 380px; min-width:320px;}
.mp-perfil-campo{margin-bottom:0; flex:1 1 auto; min-width:220px;}
.mp-perfil-acoes-campo{margin-bottom:0;}
.mp-perfil-acoes{display:flex; align-items:flex-end; gap:6px;}
.mp-perfil-acoes .btn{height:var(--h-controle); box-sizing:border-box;}
.mp-perfil-acoes .inline{display:inline-flex; margin:0;}

/* Botao SO icone (mesma altura dos outros .btn, largura fixa quadrada) */
.btn.btn-so-icone{width:40px; padding:0; justify-content:center; flex-shrink:0;}
.btn.btn-so-icone.btn-sm{width:36px; height:36px;}
.btn.btn-so-icone .icon{margin:0; font-size:16px;}
/* Acao Novo (+) usa cor primaria pra reforcar acao construtiva */
.mp-acao-novo:hover{background:var(--cor-primaria-suave); border-color:var(--cor-primaria);}
.mp-acao-novo:hover .icon{color:var(--cor-primaria);}
/* Acao Excluir (lixeirinha) usa vermelho pra sinalizar destrutivo */
.mp-acao-excluir:hover{background:var(--vermelho-suave); border-color:var(--vermelho);}
.mp-acao-excluir:hover .icon{color:var(--vermelho);}

/* Combo do Modelo: input editavel + chevron + panel com lista.
   Click no INPUT edita o nome. Click no chevron abre lista pra trocar.
   Cursor de texto no input deixa claro que da pra escrever. */
.mp-combo{position:relative; display:flex; align-items:stretch; height:var(--h-controle); box-sizing:border-box; background:var(--branco); border:1px solid var(--borda-forte); border-radius:var(--raio-sm); transition:var(--transicao);}
.mp-combo:focus-within{border-color:var(--cor-primaria); box-shadow:0 0 0 3px var(--cor-primaria-suave);}
.mp-combo.open{border-color:var(--cor-primaria);}
.mp-combo .mp-modelo-nome{flex:1; height:auto; padding:0 12px; border:0; background:transparent; font-size:14px; font-weight:600; color:var(--texto); font-family:inherit; outline:none; min-width:0;}
.mp-combo .mp-modelo-nome::placeholder{font-weight:500; color:var(--texto-suave);}
.mp-combo .mp-modelo-nome[readonly]{cursor:default;}
.mp-combo .mp-modelo-nome:not([readonly]):hover{background:var(--fundo-2);}
.mp-combo-caret{display:inline-flex; align-items:center; justify-content:center; width:36px; border:0; border-left:1px solid var(--borda); background:transparent; color:var(--texto-suave); cursor:pointer; padding:0; transition:var(--transicao); border-radius:0 var(--raio-sm) var(--raio-sm) 0;}
.mp-combo-caret:hover{background:var(--cor-primaria-suave); color:var(--cor-primaria);}
.mp-combo-caret .icon{font-size:14px; transition:transform .15s;}
.mp-combo.open .mp-combo-caret{background:var(--cor-primaria-suave); color:var(--cor-primaria);}
.mp-combo.open .mp-combo-caret .icon{transform:rotate(180deg);}
.mp-combo-panel{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:250; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio-sm); box-shadow:var(--sombra-md); max-height:280px; overflow:hidden; display:flex; flex-direction:column;}
.mp-combo-panel[hidden]{display:none;}
.mp-combo-panel .sb-search{flex-shrink:0;}
.mp-combo-lista{overflow-y:auto; padding:4px 0;}
.mp-combo-opt{display:flex; align-items:center; padding:9px 12px; font-size:13.5px; color:var(--texto); text-decoration:none; cursor:pointer; transition:var(--transicao);}
.mp-combo-opt:hover{background:var(--cor-primaria-suave); color:var(--cor-primaria-texto);}
.mp-combo-opt.active{background:var(--cor-primaria-suave); color:var(--cor-primaria-escura); font-weight:600;}
.mp-combo-opt .muted{margin-left:4px;}
.mp-combo-opt[hidden]{display:none;}

/* Bloco Tipo: label + toggle no mesmo padrao dos outros campos */
.mp-tipo-campo{margin-bottom:0; flex:0 0 auto;}

/* Msg de upload (ok/erro) — pill inline no rodape do painel Arquivo */
.mp-drop-baixar{background:var(--branco);}

/* Toggle Entradas/Saidas — segmented control 40px pra casar com selects/inputs
   (Padrao_Formulario da vault: todos os controles na MESMA altura 40px).
   Entrada = verde pastel (credito, dinheiro entrando); Saida = vermelho pastel (debito).
   Pastel suave que combina com o azul do ACTUS sem competir com ele. */
.mp-toggle-tipo{display:inline-flex; height:var(--h-controle); box-sizing:border-box; background:var(--fundo-2); border:1px solid var(--borda-forte); border-radius:var(--raio-full); padding:4px; gap:2px;}
.mp-toggle-opc{display:inline-flex; align-items:center; gap:6px; padding:0 16px; border-radius:var(--raio-full); font-size:13px; font-weight:600; color:var(--texto-suave); text-decoration:none; transition:var(--transicao); line-height:1; white-space:nowrap;}
.mp-toggle-opc .icon{font-size:14px;}
/* Hover: previa da cor do tipo, mas ainda discreto */
.mp-toggle-entrada:hover{color:var(--verde); background:rgba(22,163,74,.06);}
.mp-toggle-saida:hover{color:var(--vermelho); background:rgba(220,38,38,.06);}
/* Ativo: pill pastel com texto na cor saturada correspondente */
.mp-toggle-entrada.active{background:var(--verde-suave); color:var(--verde); box-shadow:var(--sombra-sm);}
.mp-toggle-saida.active{background:var(--vermelho-suave); color:var(--vermelho); box-shadow:var(--sombra-sm);}
.mp-toggle-entrada.active .icon{color:var(--verde);}
.mp-toggle-saida.active .icon{color:var(--vermelho);}

/* ==========================================================================
   Tela Modelos: listagem consolidada com edicao inline (Apelido/Sistema) e
   toggle "Padrao" pra publicar como Modelo Padrao global.
   ========================================================================== */
.mod-tabela .mod-th-padrao{width:110px; text-align:center;}
.mod-tabela .mod-td-padrao{text-align:center;}
.mod-tabela .mod-cli{font-weight:600;}
.mod-tabela .input-sm{height:var(--h-controle-xs); box-sizing:border-box; padding:0 10px; font-size:12.5px;}
.mod-tabela .mod-inp{background:var(--fundo-2); border-color:var(--borda);}
.mod-tabela .mod-inp:focus{background:var(--branco); border-color:var(--cor-primaria); box-shadow:0 0 0 3px var(--cor-primaria-suave);}
/* Feedback visual: piscada verde/vermelha apos salvar */
.mod-tabela .mod-inp.mod-inp-ok{border-color:var(--verde); box-shadow:0 0 0 3px var(--verde-suave); background:var(--verde-suave);}
.mod-tabela .mod-inp.mod-inp-erro{border-color:var(--vermelho); box-shadow:0 0 0 3px var(--vermelho-suave); background:var(--vermelho-suave);}
.mod-tabela .mod-inp:disabled{opacity:.6;}
.mod-legenda{margin-top:12px; padding:10px 14px; font-size:12.5px; background:var(--fundo-2); border:1px dashed var(--borda); border-radius:var(--raio-sm); display:flex; align-items:center; gap:8px;}
.mod-legenda .icon{color:var(--azul-info); font-size:16px; flex-shrink:0;}
.mp-tab{padding:0 16px; height:var(--h-controle); box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--borda); border-radius:var(--raio-sm); cursor:pointer; font-family:inherit; font-size:13px; font-weight:600; color:var(--texto-suave); text-decoration:none;}
.mp-tab:hover{background:var(--fundo);}
.mp-tab.active{background:var(--cor-primaria-suave); color:var(--cor-primaria-escura); border-color:var(--cor-primaria);}

/* Empty state (nenhum cliente escolhido) */
.mp-vazio{text-align:center; padding:40px 24px;}
.mp-vazio .icon-lg{color:var(--texto-fraco); margin-bottom:10px;}
.mp-vazio h3{font-size:17px; margin-bottom:6px;}
.mp-vazio p{max-width:560px; margin:0 auto; line-height:1.55;}
.mp-vazio .btn-primary,.mp-vazio .btn{margin-top:18px;}   /* respiro antes do botão */

/* Painel status + upload lado a lado */
.mp-painel{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
@media (max-width:820px){.mp-painel{grid-template-columns:1fr;}}
.mp-status{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.mp-status-info{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.mp-status-tit{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-titulo); font-weight:700; font-size:15px; letter-spacing:-.01em;}
.mp-status-tit .icon{color:var(--cor-primaria);}

/* Dropzone de upload (Padrao_Upload_Arquivo). Tracejado sempre em AZUL PRIMARIA
   (mesmo tom da marca), fundo azul MUITO suave — casa com o gradiente das
   caixas de contexto. Hover aumenta a saturacao pra dar feedback. */
.mp-upload{padding:0;}
.mp-drop{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:32px 20px; border:2px dashed var(--cor-primaria); border-radius:var(--raio); cursor:pointer; transition:var(--transicao); background:var(--cor-primaria-suave);}
.mp-drop:hover,.mp-drop.over{background:hsl(var(--primaria-h), var(--primaria-s), 94%);}
.mp-drop.carregado{border-color:var(--verde); border-style:solid; background:var(--verde-suave);}
.mp-drop.carregando{opacity:.7; cursor:progress;}
.mp-drop-ico{font-size:28px; color:var(--cor-primaria);}
.mp-drop.carregado .mp-drop-ico{color:var(--verde);}
.mp-drop-tit{font-weight:600; font-size:14px; color:var(--texto);}
.mp-drop-sub{font-size:12.5px; color:var(--texto-suave); line-height:1.5; max-width:420px;}
.mp-upload-msg{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; font-size:12px; font-weight:600; border-radius:var(--raio-full); background:var(--fundo-2); color:var(--texto-secundario); border:1px solid var(--borda);}
.mp-upload-msg[hidden]{display:none;}
.mp-upload-msg.ok{background:var(--verde-suave); color:var(--verde); border-color:#bfe6cd;}
.mp-upload-msg.erro{background:var(--vermelho-suave); color:var(--vermelho); border-color:#f3c4c4;}
.mp-upload-msg .icon{font-size:13px;}
.mp-upload-msg.ok{color:var(--verde);}
.mp-upload-msg.erro{color:var(--vermelho);}

/* Grade de:para */
.mp-tabela th .icon{font-size:13px; opacity:.7; vertical-align:-1px;}
.mp-tabela td{vertical-align:middle;}
.mp-origem{font-weight:600; color:var(--texto);}
.mp-tabela .mp-expr{height:var(--h-controle-sm); max-width:220px;}
.mp-tabela .mp-exemplo{font-size:12.5px; max-width:220px; overflow:hidden; text-overflow:ellipsis;}

/* Controle do dropdown "campo interno" (visual do SelectBusca, mas widget proprio) */
.mp-sel{display:flex; align-items:center; gap:6px; width:100%; max-width:100%; height:var(--h-controle-sm); padding:0 10px; background:var(--branco); border:1px solid var(--borda-forte); border-radius:var(--raio-sm); cursor:pointer; font-size:13.5px; transition:var(--transicao); box-sizing:border-box;}
.mp-sel:hover{border-color:var(--cor-primaria);}
.mp-sel .mp-sel-lb{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--texto);}
.mp-sel .icon{color:var(--texto-suave); font-size:14px; flex-shrink:0;}
.mp-sel.vazio .mp-sel-lb{color:var(--texto-fraco);}
/* Duas origens apontando pro mesmo campo interno: so a 1a e salva. Realca ambar. */
.mp-sel.dup{border-color:var(--ambar); background:var(--ambar-suave);}
.mp-sel.dup .mp-sel-lb{color:var(--ambar);}

/* Painel compartilhado do dropdown (position:fixed, posicionado pelo JS) */
.mp-panel{position:fixed; z-index:300; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio-sm); box-shadow:var(--sombra-md); max-height:320px; display:flex; flex-direction:column; overflow:hidden;}
.mp-panel[hidden]{display:none;}
.mp-panel .sb-search{flex-shrink:0;}
.mp-panel-lista{overflow-y:auto;}
.mp-opt{padding:8px 12px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:6px;}
.mp-opt:hover{background:var(--cor-primaria-suave); color:var(--cor-primaria-texto);}
.mp-opt.sel{background:var(--cor-primaria-suave); color:var(--cor-primaria-texto); font-weight:600;}
.mp-opt-ignorar{color:var(--texto-suave); border-bottom:1px solid var(--borda);}
.mp-opt-grupo{padding:7px 12px 4px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--texto-fraco); background:var(--fundo-2);}
.mp-opt-obrig{font-size:10px; font-weight:700; color:var(--ambar); text-transform:uppercase; letter-spacing:.03em;}

/* Intro/empty dos modais de modelo (evita style inline) */
.mp-modal-intro{margin-bottom:12px; line-height:1.5;}
/* Lista de opcoes no modal de conflito do upload (Sobrepor / Verificar novas).
   Estilo casual e enxuto: sem bullets nativos, gap curto, os <strong> em cor
   primaria dao a ancora visual dos 2 caminhos. */
.mp-upload-opcoes{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
.mp-upload-opcoes li{padding:10px 12px; background:var(--fundo-2); border-radius:var(--raio-sm); line-height:1.45; font-size:13.5px;}
.mp-upload-opcoes li strong{color:var(--cor-primaria);}
/* Linha recem-adicionada por "Verificar novas": fundo verde pastel + faixa
   verde solida na borda esquerda pra o usuario identificar o que acabou de
   entrar. O destaque persiste ate o salvar (que recarrega a tela). Se o
   usuario passa o mouse, o fundo hover padrao da tabela nao deve sobrepor. */
.mp-tabela .mp-row-nova td{background:var(--verde-suave);}
.mp-tabela .mp-row-nova td:first-child{box-shadow:inset 3px 0 0 var(--verde);}
.mp-tabela tbody tr.mp-row-nova:hover td{background:var(--verde-suave);}

/* Rodape do modal de conflito: 3 botoes de tamanho IGUAL, centralizados na
   linha. flex:1 forca larguras iguais; max-width limita pra nao virarem
   barrinhas gigantes em telas largas; justify-content no botao centraliza
   icone+texto no seu proprio quadrado. */
#modalUploadConflito .modal-rodape{justify-content:center;}
#modalUploadConflito .modal-rodape > button{flex:1 1 0; max-width:170px; justify-content:center;}
.mp-modelo-campo{margin-bottom:0;}
.mp-modelo-campo .selectbusca .sb-display{height:var(--h-controle);}

/* Fontes de mapeamento (grid 50/50 desktop, empilha no mobile):
   Esquerda: Modelo Padrao pronto (aplica um mapeamento validado)
   Direita:  Arquivo-amostra do cliente (upload pra montar do zero) */
/* -----------------------------------------------------------------
   Fonte do mapeamento: card unico com 2 abas (Subir Arquivo | Modelo Salvo)
   Referencia visual: EasyPanel — tabs pill em faixa cinza no topo, corpo branco
   com padding, dropzone tracejada em azul primaria.
   ----------------------------------------------------------------- */
.mp-fonte{background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); margin-bottom:14px; overflow:hidden;}
.mp-fonte-tabs{display:flex; gap:4px; padding:8px 8px 0; background:var(--fundo-2); border-bottom:1px solid var(--borda);}
.mp-fonte-tab{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:transparent; border:0; border-radius:var(--raio-sm) var(--raio-sm) 0 0; font-family:inherit; font-size:13px; font-weight:600; color:var(--texto-suave); cursor:pointer; transition:var(--transicao); position:relative; top:1px;}
.mp-fonte-tab:hover:not(.ativo){background:rgba(255,255,255,.55); color:var(--texto);}
.mp-fonte-tab.ativo{background:var(--branco); color:var(--cor-primaria); border:1px solid var(--borda); border-bottom-color:var(--branco);}
.mp-fonte-tab .icon{font-size:14px;}
.mp-fonte-corpo{padding:16px 18px;}
.mp-fonte-painel[hidden]{display:none;}
.mp-fonte-lead{margin:0 0 12px; font-size:13px; line-height:1.5;}
.mp-fonte-form{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;}
.mp-fonte-form .mp-modelo-campo{flex:1 1 240px; min-width:0;}
.mp-fonte-form .selectbusca .sb-display{height:var(--h-controle);}
.mp-fonte-btn{height:var(--h-controle); box-sizing:border-box; flex-shrink:0;}
/* Rodape do painel Arquivo: msg de upload a esquerda, botao "Baixar modelo" a direita */
.mp-fonte-rodape{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; min-height:32px;}
.mp-fonte-rodape .mp-drop-baixar{margin-left:auto;}
/* Input file escondido via clip (nao display:none/hidden). Precisa ficar no
   fluxo do DOM pra o <label> pai conseguir programaticamente abrir o picker
   em Chromium/Firefox/Safari. Padrao 'sr-only' consagrado de acessibilidade. */
.mp-drop-input{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; opacity:0;}

/* Vista vazia discreta: enquanto nao ha arquivo/modelo carregado. Linha unica,
   sutil, sem peso visual (nao e um empty-state grande de tela). */
.mp-vista-vazia{display:flex; align-items:center; justify-content:center; gap:9px; padding:34px 24px; border:1px dashed var(--borda-forte); border-radius:var(--raio); background:var(--fundo-2); color:var(--texto-suave); font-size:13.5px; font-weight:500;}
.mp-vista-vazia[hidden]{display:none;}
.mp-vista-vazia .icon{font-size:17px; color:var(--texto-fraco);}

/* Layout Fibonacci: grade (62%) + painel de status dos campos (38%).
   align-items:stretch faz os dois cards ocuparem a mesma altura visual; assim
   o max-height (definido logo abaixo) casa nos dois lados e o rodape alinha. */
.mp-grade-com-status{display:grid; grid-template-columns:62fr 38fr; gap:14px; align-items:stretch;}
.mp-grade-com-status[hidden]{display:none;}
/* Scrolls INDEPENDENTES: cada card ganha altura maxima proporcional ao viewport
   e o miolo rola sozinho. O CABECALHO fica FORA do container de scroll — na
   grade eh a tabela .mp-tabela-cab por cima do .tabela-scroll, no painel
   direito eh o .mp-status-cab acima do .mp-status-scroll — pra o scrollbar
   comecar SO no miolo (padrao unico na pagina). 220px folga o suficiente pra
   topbar (58) + padding do content + mp-topo + mp-fonte. */
.mp-grade-com-status .tabela-wrap{max-height:calc(100vh - 220px); display:flex; flex-direction:column;}
.mp-grade-com-status .tabela-cab-fixo{flex-shrink:0;}
/* scrollbar-gutter:stable reserva o espaco do scrollbar mesmo quando ele nao
   aparece — assim a tabela de baixo (com scroll) alinha em pixel perfect com
   a tabela de cima (sem scroll) mesmo em listas curtas. */
.mp-grade-com-status .tabela-scroll{overflow:auto; flex:1; min-height:0; scrollbar-gutter:stable;}
.mp-grade-com-status .mp-status-painel{max-height:calc(100vh - 220px);}
/* colgroup + table-layout:fixed sincroniza as larguras entre cab-fixo e corpo.
   As 3 colunas obedecem esses <col>, nao mais as regras individuais dos <th>. */
.mp-tabela{table-layout:fixed;}
.mp-tabela .mp-col-origem{width:34%;}
.mp-tabela .mp-col-interna{width:30%;}
.mp-tabela .mp-col-tipo{width:auto;}
@media (max-width:1200px){
  /* Coluna unica: os dois viram cards empilhados. Cada um ainda rola sozinho
     dentro do viewport pra o painel de campos nao empurrar a grade pra fora. */
  .mp-grade-com-status{grid-template-columns:1fr;}
  .mp-grade-com-status .tabela-wrap,
  .mp-grade-com-status .mp-status-painel{max-height:calc(100vh - 160px);}
}

/* Nova grade: 3 colunas (Coluna+Exemplo empilhados | Nosso campo | Tipo · Preview) */
.mp-tabela .mp-th-origem{width:34%;}
.mp-tabela .mp-th-interna{width:30%;}
.mp-tabela .mp-th-tipo{width:auto;}
.mp-tabela .mp-origem-cel{padding:9px 14px;}
.mp-origem-nome{font-weight:600; font-size:14px; color:var(--texto); line-height:1.25;}
.mp-origem-exemplo{font-size:12px; color:var(--texto-suave); margin-top:2px; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Painel direito: overview dos campos internos com badge OK/obrig.
   SEM scroll interno — rola junto com a pagina (mesma altura visual da grade
   nao e requerida; ambas expandem naturalmente e o scroll principal atende). */
.mp-status-painel{background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra-sm); overflow:hidden; display:flex; flex-direction:column;}
/* Cabecalho do painel EM ESPELHO ao <thead> da tabela: mesmo padding, mesma
   tipografia (uppercase 11.5px 700), mesmo background. min-height:46px iguala
   a altura visual do thead da grade — que fica mais alto por causa do botao
   "Reconhecer com I.A." dentro do .mp-th-interna. Icone banco de dados em
   cor primaria: passa a ideia de "nossa base de campos internos". */
.mp-status-cab{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 14px; min-height:46px; box-sizing:border-box; border-bottom:1px solid var(--borda); background:var(--fundo-2); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-suave); white-space:nowrap; flex-shrink:0;}
.mp-status-tit{display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-weight:inherit; font-size:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit;}
.mp-status-tit .icon{color:var(--cor-primaria); font-size:14px;}
.mp-status-sub{font-size:11px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--texto-secundario);}
/* Miolo do painel: rola sozinho enquanto o cabecalho fica grudado. min-height:0
   eh obrigatorio em filhos de flex column pra o overflow interno funcionar. */
.mp-status-scroll{padding:6px 4px 8px; overflow-y:auto; flex:1; min-height:0;}
.mp-st-grupo{margin:6px 0 4px;}
.mp-st-grupo-cab{display:flex; align-items:center; justify-content:space-between; padding:6px 10px 4px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-suave);}
.mp-st-cnt{background:var(--fundo); color:var(--texto-secundario); font-weight:700; padding:1px 6px; border-radius:var(--raio-full); font-size:10px; letter-spacing:0;}
.mp-st-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.mp-st-item{display:flex; align-items:center; gap:8px; padding:5px 10px; font-size:12.5px; border-radius:var(--raio-sm);}
.mp-st-item:hover{background:var(--fundo-2);}
.mp-st-item.ok .mp-st-nm{color:var(--texto);}
.mp-st-item.obrig .mp-st-nm{color:var(--ambar); font-weight:600;}
.mp-st-item.opc .mp-st-nm{color:var(--texto-suave);}
.mp-st-nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mp-st-tag{display:inline-flex; align-items:center; gap:3px; font-family:var(--font-titulo); font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:2px 6px; border-radius:var(--raio-full); flex-shrink:0; min-width:44px; justify-content:center;}
.mp-st-tag .icon{font-size:11px;}
.mp-st-tag-ok{background:var(--verde-suave); color:var(--verde); border:1px solid #bfe6cd;}
.mp-st-tag-obrig{background:var(--ambar-suave); color:var(--ambar); border:1px solid #f5d5a5;}
.mp-st-tag-opc{background:transparent; color:var(--texto-fraco); border:1px dashed var(--borda-forte); font-weight:600;}

/* Drag-and-drop: arrastar campo NAO mapeado do painel direito ate um select
   da grade pra atalho de mapeamento. Cursor grab so nos itens marcados
   draggable="true" (o JS ja restringe aos nao-mapeados + PODE editar).
   Durante o arrasto, .mp-drag-ativo no body destaca TODOS os selects da
   grade com tracejado suave (sinaliza "solte aqui"). O alvo especifico
   sob o cursor recebe .drop-alvo com contorno solido primaria. */
.mp-st-item[draggable="true"]{cursor:grab;}
.mp-st-item[draggable="true"]:hover{background:var(--cor-primaria-suave);}
.mp-st-item[draggable="true"]:active{cursor:grabbing;}
.mp-st-item.arrastando{opacity:.4;}
body.mp-drag-ativo{cursor:grabbing;}
body.mp-drag-ativo .mp-sel{outline:1px dashed var(--borda-forte); outline-offset:-1px;}
body.mp-drag-ativo .mp-sel.drop-alvo{outline:2px solid var(--cor-primaria); outline-offset:-2px; background:var(--cor-primaria-suave);}

/* Celula compound Tipo · Preview: 2 radios + preview/pencil */
.mp-tipo-celula{padding:8px 12px !important;}
.mp-tipo-wrap{display:flex; align-items:center; gap:10px; flex-wrap:nowrap;}
/* Segmented control (Valor | Expressao): 2 icones num box unico, altura 36px
   alinhada com o input do preview ao lado. Ativo = fundo primaria + icone branco. */
.mp-tipo-seg{display:inline-flex; align-items:stretch; height:var(--h-controle-sm); background:var(--branco); border:1px solid var(--borda-forte); border-radius:var(--raio-sm); overflow:hidden; flex-shrink:0;}
.mp-tipo-seg-btn{display:inline-flex; align-items:center; justify-content:center; width:34px; height:100%; padding:0; background:transparent; border:0; border-right:1px solid var(--borda); color:var(--texto-suave); cursor:pointer; transition:var(--transicao); font-family:inherit;}
.mp-tipo-seg-btn:last-child{border-right:0;}
.mp-tipo-seg-btn:hover:not(.ativo):not(.desabilitado){background:var(--fundo-2); color:var(--texto);}
.mp-tipo-seg-btn.ativo{background:var(--cor-primaria); color:#fff;}
.mp-tipo-seg-btn.ativo:hover{background:var(--cor-primaria-escura);}
.mp-tipo-seg-btn.desabilitado{opacity:.35; cursor:not-allowed; background:var(--fundo-2);}
.mp-tipo-seg-btn .icon{font-size:16px;}
.mp-tipo-preview{display:inline-flex; align-items:center; gap:6px; flex:1; min-width:180px;}
.mp-preview-input{height:var(--h-controle-xs); font-size:13px; background:var(--fundo-2); color:var(--texto-secundario); font-family:var(--font-titulo); cursor:default;}
.mp-preview-input:focus{border-color:var(--borda-forte); box-shadow:none;}
/* Célula "Tipo · Preview" em modo Expressão: input readonly ROXO com o
   RESULTADO da expressao avaliada (backend calcula usando os valores exemplo
   da grade). Sufixo "ƒx" a direita indica funcao personalizada; lapis externo
   abre o editor. Hover no input mostra a expressao inteira em tooltip. */
.mp-tipo-expr{gap:6px; background:transparent; border:0; padding:0;}
.mp-input-fx{position:relative; flex:1; min-width:0; display:flex;}
.mp-preview-expr{background:var(--roxo-suave) !important; color:var(--roxo-texto) !important; border-color:var(--roxo-borda) !important; padding-right:44px; font-family:var(--font-titulo); font-weight:600; cursor:help;}
.mp-preview-expr[data-preview="pendente"]{color:var(--texto-suave) !important; font-style:italic; font-weight:400;}
.mp-preview-expr[data-preview="erro"]{background:var(--vermelho-suave) !important; color:var(--vermelho) !important; border-color:#f3c4c4 !important;}
.mp-preview-expr::placeholder{color:var(--roxo-claro); font-style:italic;}
.mp-fx-suffix{position:absolute; right:8px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:2px; padding:2px 8px; background:var(--roxo); color:#fff; border-radius:var(--raio-full); font-family:var(--font-titulo); font-size:10px; font-weight:800; letter-spacing:.05em; pointer-events:none;}
.mp-fx-suffix .icon{font-size:11px; color:#fff;}
.mp-tipo-expr .btn-icone{width:28px; height:28px; flex-shrink:0;}
.mp-tipo-expr .btn-icone:hover{color:var(--roxo); background:var(--roxo-suave);}

/* Bloco Avançado — campos derivados */
.mp-avancado{margin-top:14px; padding:0;}
.mp-avancado-cab{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-bottom:1px solid var(--borda); flex-wrap:wrap;}
.mp-avancado-tit{display:flex; align-items:flex-start; gap:12px;}
.mp-avancado-tit > .icon{color:var(--cor-primaria); font-size:22px; margin-top:2px;}
.mp-avancado-tit h4{margin:0 0 2px; font-size:14px; letter-spacing:-.01em;}
.mp-avancado-tit .muted{font-size:12.5px; line-height:1.5;}
.mp-tabela-deriv{margin:0;}
.mp-tabela-deriv th,.mp-tabela-deriv td{padding:10px 18px;}
.mp-tabela-vazia-slim{padding:22px 18px !important; text-align:center; color:var(--texto-suave); font-size:13px; white-space:normal;}
.mp-tabela-vazia-slim .icon{color:var(--texto-fraco); margin-right:6px; vertical-align:-2px;}
.mp-deriv-campo{font-weight:600;}
.mp-deriv-expr code{font-family:var(--font-titulo); font-size:12.5px; background:var(--cor-primaria-suave); color:var(--cor-primaria-escura); padding:3px 8px; border-radius:var(--raio-sm); border:1px dashed var(--cor-primaria); word-break:break-word;}

/* ==========================================================================
   Assistente de expressão — Python restrito + IA.
   Sempre_Marcar_IA da vault: roxo #7C3AED, icone ph-sparkle, texto explicativo.
   ========================================================================== */
/* Modal com altura FIXA — nao cresce arbitrariamente. O tooltip e position:fixed
   no <body>, entao nao e cortado pelo overflow interno do modal. */
#modalExpr.popup-centrado.modal-70{width:78vw; max-width:960px; height:85vh; max-height:85vh;}
/* Grid 2x2 preenche 100% do modal-corpo. Esquerda: instrucao (topo, cresce) +
   expressao (base, ~62% dela). Direita: colunas (altura total).
   min-height:0 e CRITICO pra as celulas do grid respeitarem seus limites e
   permitirem overflow interno (scroll da lista de colunas). */
.mp-ia-corpo{
  display:grid;
  grid-template-columns:1fr 240px;
  grid-template-rows:1fr .618fr;
  gap:12px; padding:14px 18px !important;
  height:100%; min-height:0;
}
.mp-ia-instrucao{grid-column:1; grid-row:1;}
.mp-ia-saida    {grid-column:1; grid-row:2;}
.mp-ia-colunas  {grid-column:2; grid-row:1 / span 2; min-height:0;}
@media (max-width:900px){
  .mp-ia-corpo{grid-template-columns:1fr; grid-template-rows:auto;}
  .mp-ia-instrucao,.mp-ia-saida,.mp-ia-colunas{grid-column:1; grid-row:auto;}
}
.mp-ia-corpo label{display:flex; align-items:center; gap:6px; font-weight:600; font-size:13px; margin-bottom:6px;}
.mp-ia-corpo label .icon{color:var(--roxo); font-size:14px;}

/* Bloco esquerdo topo (O QUE EU QUERO FAZER) — padrao Padrao_Marca_IA (gradiente pastel roxo).
   overflow:hidden + min-height:0 pra a caixa nao crescer alem da sua celula do grid. */
.mp-ia-instrucao{padding:14px 16px; background:linear-gradient(135deg, var(--roxo-pastel-1), var(--roxo-pastel-2)); border:1px solid var(--roxo-borda); border-radius:var(--raio); display:flex; flex-direction:column; gap:8px; min-height:0; overflow:hidden;}
.mp-ia-instrucao .mp-ia-frase{flex:1; min-height:0; resize:none;}
.mp-ia-instrucao label{color:var(--roxo-texto);}
.mp-ia-instrucao label .icon{color:var(--roxo);}
.mp-ia-frase{font-family:inherit; font-size:14px; line-height:1.5; min-height:64px; resize:vertical; background:var(--branco); border-color:var(--roxo-borda); color:var(--texto);}
.mp-ia-frase:focus{border-color:var(--roxo); box-shadow:0 0 0 3px var(--roxo-suave);}
.mp-ia-linha{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.mp-ia-dica{font-size:12px; line-height:1.5; flex:1; color:var(--roxo-texto);}
.mp-ia-dica code{background:var(--branco); padding:1px 5px; border-radius:4px; font-size:11.5px; border:1px solid var(--roxo-borda); color:var(--roxo-texto);}
.mp-ia-dica .hint-erro{display:inline-flex; align-items:center; gap:4px; margin-left:4px;}

/* Botao de IA (.btn-ia): roxo #7C3AED com ph-sparkle. Substitui .btn-primary aqui. */
.btn-ia{display:inline-flex; align-items:center; gap:6px; height:var(--h-controle); box-sizing:border-box; padding:0 16px; background:var(--roxo); color:#fff; border:0; border-radius:var(--raio-sm); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:var(--transicao); line-height:1; white-space:nowrap;}
.btn-ia:hover{background:var(--roxo-escuro); box-shadow:var(--sombra);}
.btn-ia:disabled{background:var(--roxo-claro); cursor:wait;}
.btn-ia .icon{font-size:14px;}
.btn-ia.btn-sm{padding:6px 12px; font-size:12px;}
.btn-ia.btn-ia-xs{padding:5px 10px; font-size:11.5px; font-weight:600;}
.btn-ia.btn-ia-xs .icon{font-size:13px;}

/* Reconhecer com IA — header "Nosso campo" com botao roxo a direita.
   IMPORTANTE: NAO usar display:flex no <th> (isso o remove do table-layout,
   a celula deixa de acompanhar a largura da coluna e o fundo do <th> para de
   pintar a celula inteira). O flex fica no wrapper INTERNO
   .mp-th-interna-wrap; o <th> permanece table-cell. */
.mp-tabela .mp-th-interna{vertical-align:middle;}
.mp-th-interna-wrap{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.mp-th-interna-txt{display:inline-flex; align-items:center; gap:6px;}

/* Badge de sugestao dentro do .mp-sel (some se o usuario trocar na mao).
   Mostra LETRA da fonte (A/S/H/I) num chip circular + confianca. Cor por fonte:
     A (Aprendido) verde  — historico confirmado
     S (Semantico) azul   — parser deterministico do dominio fiscal
     H (Heuristica) cinza — semelhanca de nome (fuzzy)
     I (I.A.) roxo        — modelo de linguagem */
.mp-sel .mp-sel-lb{flex:1; min-width:0;}
.mp-sug-ia{display:inline-flex; align-items:center; gap:4px; flex-shrink:0; padding:1px 6px 1px 2px; border-radius:var(--raio-full); font-family:var(--font-titulo); font-size:10px; font-weight:800; letter-spacing:.02em; cursor:help; border:1px solid transparent;}
.mp-sug-letra{display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; font-size:9px; font-weight:800; color:#fff; flex-shrink:0;}

/* Cores do badge por fonte (fundo pastel, borda e texto na cor cheia) */
.mp-sug-fonte-aprendido {background:var(--verde-suave); color:var(--verde); border-color:#bfe6cd;}
.mp-sug-fonte-semantica {background:var(--cor-primaria-suave); color:var(--cor-primaria-escura); border-color:#b8cbe9;}
.mp-sug-fonte-heuristica{background:var(--fundo-2); color:var(--texto-suave); border-color:var(--borda-forte);}
.mp-sug-fonte-ia        {background:var(--roxo-suave); color:var(--roxo); border-color:var(--roxo-borda);}
/* Letra: chip circular colorido, letra branca */
.mp-sug-fonte-aprendido  .mp-sug-letra{background:var(--verde);}
.mp-sug-fonte-semantica  .mp-sug-letra{background:var(--cor-primaria);}
.mp-sug-fonte-heuristica .mp-sug-letra{background:var(--texto-suave);}
.mp-sug-fonte-ia         .mp-sug-letra{background:var(--roxo);}

/* Linha com sugestao pendente: leve destaque na cor da fonte pra chamar revisao */
.mp-sel:has(.mp-sug-fonte-aprendido) {border-color:#bfe6cd; background:var(--verde-suave);}
.mp-sel:has(.mp-sug-fonte-semantica) {border-color:#b8cbe9; background:var(--cor-primaria-suave);}
.mp-sel:has(.mp-sug-fonte-heuristica){border-color:var(--borda-forte); background:var(--fundo-2);}
.mp-sel:has(.mp-sug-fonte-ia)        {border-color:var(--roxo-borda); background:var(--roxo-pastel-1);}

/* Modal "Reconhecer": bloco de convite roxo (padrao Marca IA da vault) */
.bloco-ia{background:linear-gradient(135deg, var(--roxo-pastel-1), var(--roxo-pastel-2)); border:1px solid var(--roxo-borda); border-radius:var(--raio); padding:14px 16px;}
.bloco-ia p{margin:0 0 8px; font-size:13px; line-height:1.55; color:var(--roxo-texto);}
.bloco-ia p:last-child{margin-bottom:0;}
.mp-reconhecer-como{color:var(--texto-secundario) !important;}
.mp-reconhecer-revisa{display:flex; align-items:flex-start; gap:6px;}
.mp-reconhecer-revisa .icon{color:var(--roxo); font-size:15px; flex-shrink:0; margin-top:1px;}
.mp-reconhecer-semianota{display:flex; align-items:flex-start; gap:6px; margin-top:4px;}
.mp-reconhecer-semianota .icon{flex-shrink:0; margin-top:1px;}

/* Opcoes do reconhecimento: limpar antes + nivel de chute */
.mp-reconhecer-opcoes{margin-top:14px; display:flex; flex-direction:column; gap:12px;}
.mp-reconhecer-limpar{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--texto); cursor:pointer; user-select:none;}
.mp-reconhecer-limpar input[type="checkbox"]{width:16px; height:16px; accent-color:var(--cor-primaria); cursor:pointer;}

.mp-nivel-grupo{border:1px solid var(--borda); border-radius:var(--raio-sm); padding:10px 12px; margin:0;}
.mp-nivel-legend{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--texto-suave); padding:0 6px;}
.mp-nivel-grupo{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
.mp-nivel-opc{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 10px; border:1px solid var(--borda); border-radius:var(--raio-sm); cursor:pointer; transition:var(--transicao); background:var(--branco);}
.mp-nivel-opc:hover{border-color:var(--cor-primaria); background:var(--cor-primaria-suave);}
.mp-nivel-opc input[type="radio"]{position:absolute; opacity:0; pointer-events:none;}
.mp-nivel-opc:has(input:checked){border-color:var(--cor-primaria); background:var(--cor-primaria-suave);}
.mp-nivel-tit{font-size:13px; font-weight:700; color:var(--texto); display:flex; align-items:center; gap:6px;}
.mp-nivel-tit::before{content:""; display:inline-block; width:14px; height:14px; border:2px solid var(--borda-forte); border-radius:50%; box-sizing:border-box; flex-shrink:0; transition:var(--transicao);}
.mp-nivel-opc:has(input:checked) .mp-nivel-tit::before{border-color:var(--cor-primaria); background:radial-gradient(circle, var(--cor-primaria) 40%, transparent 45%);}
.mp-nivel-sub{font-size:11.5px; color:var(--texto-suave); font-weight:500; padding-left:20px;}
@media (max-width:640px){
  .mp-nivel-grupo{grid-template-columns:1fr;}
}

/* Aviso ambar quando "limpar antes" ta marcado (mostra o custo da acao). */
.mp-reconhecer-aviso{margin-top:12px; padding:10px 12px; display:flex; align-items:flex-start; gap:8px; background:#fff5e0; border:1px solid #f6d78a; border-radius:var(--raio-sm); color:#a06400; font-size:12.5px; line-height:1.45; font-weight:500;}
.mp-reconhecer-aviso .icon{font-size:16px; flex-shrink:0; margin-top:1px;}
.mp-reconhecer-aviso[hidden]{display:none;}

/* Raio-x de diagnostico quando o reconhecimento nao acha nada (debug visivel) */
.mp-diag{margin-top:8px; padding-top:8px; border-top:1px dashed #f3c4c4; font-size:11.5px; font-weight:500; line-height:1.6; color:var(--texto-secundario); font-family:var(--font-titulo);}
.mp-diag b{color:var(--texto);}

/* Bloco esquerdo base (EXPRESSAO CRIADA) e bloco direito (COLUNAS).
   overflow:hidden + min-height:0 pra respeitar a celula do grid; scroll interno
   fica nos elementos-filho que precisam (textarea e lista de colunas). */
.mp-ia-colunas,.mp-ia-saida{display:flex; flex-direction:column; gap:8px; min-height:0; overflow:hidden; padding:14px 16px; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio);}
.mp-ia-saida .mp-expr-textarea{flex:1; min-height:0; resize:none;}
.mp-ia-sublabel{font-weight:400; font-size:12px; margin-left:auto;}
.mp-expr-busca{height:34px; font-size:13px; flex-shrink:0;}
/* Lista de colunas: scroll INTERNO proprio (era o que o usuario pediu). */
.mp-expr-cols{display:flex; flex-direction:column; gap:4px; overflow-y:auto; padding:4px; background:var(--fundo-2); border-radius:var(--raio-sm); border:1px solid var(--borda); min-height:0; flex:1;}
.mp-expr-cols-vazio{padding:12px; text-align:center; font-size:12.5px;}
.mp-expr-col{display:flex; align-items:center; gap:6px; padding:7px 10px; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio-sm); font-family:inherit; font-size:13px; cursor:grab; text-align:left; transition:var(--transicao); color:var(--texto);}
.mp-expr-col:hover{border-color:var(--roxo); background:var(--roxo-suave); color:var(--roxo-texto);}
.mp-expr-col:active{cursor:grabbing;}
.mp-expr-col.dragging{opacity:.4; border-style:dashed;}
.mp-expr-col .icon{color:var(--roxo); font-size:14px; flex-shrink:0;}
/* Textareas destacam quando ha uma coluna sendo arrastada por cima */
.mp-ia-frase.drag-over,.mp-expr-textarea.drag-over{border-color:var(--roxo) !important; background:var(--roxo-suave) !important; box-shadow:0 0 0 3px var(--roxo-borda) !important;}

/* Tooltip informativo (ao lado do titulo "Expressão criada").
   Aparece em hover E focus (tab pra acessibilidade). */
.mp-info-wrap{position:relative; display:inline-flex; align-items:center; margin-left:auto; cursor:help; outline:0;}
.mp-info-ico{color:var(--roxo); font-size:16px; transition:var(--transicao);}
.mp-info-wrap:hover .mp-info-ico,
.mp-info-wrap:focus-visible .mp-info-ico{color:var(--roxo-escuro); transform:scale(1.1);}
.mp-info-tip{
  /* position:fixed pra vazar pra fora de qualquer container (modal, dialog).
     top/left calculados por JS no hover — prefere ACIMA do icone; se nao
     couber, cai embaixo. Sempre garante ficar dentro da viewport. */
  visibility:hidden; opacity:0;
  position:fixed; z-index:100000;
  width:340px; max-width:min(80vw, 380px);
  padding:12px 14px 10px;
  background:var(--branco); border:1px solid var(--roxo-borda); border-radius:var(--raio);
  box-shadow:var(--sombra-md);
  font-size:12.5px; font-weight:400; line-height:1.55; color:var(--texto);
  text-transform:none; letter-spacing:0;
  transition:opacity .12s;
  text-align:left;
  pointer-events:none;   /* evita flicker: mouse nunca entra no tooltip */
}
.mp-info-tip.mp-info-tip-vis{visibility:visible; opacity:1;}
.mp-info-tip strong{display:block; font-family:var(--font-titulo); font-size:13px; color:var(--roxo-texto); margin-bottom:8px;}
.mp-info-tip ol{margin:0 0 8px; padding-left:20px;}
.mp-info-tip ol li{margin:5px 0;}
.mp-info-tip ol li strong{display:inline; font-family:inherit; font-size:12.5px; color:var(--roxo-texto); margin:0;}
.mp-info-tip em{color:var(--roxo-texto); font-style:italic;}
.mp-info-tip code{background:var(--fundo-2); padding:1px 5px; border-radius:4px; font-size:11.5px; border:1px solid var(--borda); font-family:var(--font-titulo); font-weight:600; color:var(--texto);}
.mp-info-obedeca{display:block; padding-top:8px; border-top:1px dashed var(--roxo-borda); font-size:12px; color:var(--texto-secundario); line-height:1.5;}
.mp-info-obedeca strong{display:inline; font-family:inherit; font-size:12px; color:var(--vermelho); margin:0;}
/* Dica pequena "clique ou arraste" ao lado do titulo Colunas */
.mp-ia-dica-drag{display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:600; color:var(--roxo-texto); background:var(--roxo-suave); padding:2px 8px; border-radius:var(--raio-full); border:1px solid var(--roxo-borda); text-transform:none; letter-spacing:0;}
.mp-ia-dica-drag .icon{color:var(--roxo); font-size:11px;}

/* Textarea da expressao Python: multi-linha, monospace */
.mp-expr-textarea{font-family:"JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace; font-size:13px; line-height:1.55; min-height:130px; resize:vertical; padding:12px; background:var(--branco); tab-size:2;}
.mp-expr-textarea:focus{border-color:var(--roxo); box-shadow:0 0 0 3px var(--roxo-suave);}
.mp-ia-legenda{font-size:11.5px; line-height:1.55; color:var(--texto-suave);}
.mp-ia-legenda code{background:var(--fundo-2); padding:1px 5px; border-radius:4px; font-size:11px; border:1px solid var(--borda); font-family:"JetBrains Mono", Consolas, monospace;}
.mp-expr-erro{padding:8px 10px; background:var(--vermelho-suave); color:var(--vermelho); border:1px solid #f3c4c4; border-radius:var(--raio-sm); font-weight:600; font-size:12.5px;}
.mp-expr-aviso{padding:8px 10px; background:var(--ambar-suave); color:var(--ambar); border:1px solid #f5d5a5; border-radius:var(--raio-sm); font-weight:600; font-size:12.5px;}
/* Mini-spinner ROXO para o botao IA */
.btn-ia .mini-spin{border-color:rgba(255,255,255,.35); border-top-color:#fff;}

/* Empty state pro derivado sem opções */
.mp-deriv-vazio{padding:14px; text-align:center; font-size:12.5px;}

/* SelectBusca no modal Derivado (usa .selectbusca padrão + posicionamento
   nativo do popup-centrado). Nada extra necessário — o wrapper #derivSel
   usa .selectbusca.open pra abrir; e o painel é irmão do display. */

/* =========================================================================
   CONFERE > IMPORTAR (.ci-*)
   Reusa .mp-drop (Padrao_Upload_Arquivo) e .mp-topo (barra de cliente).
   Cliente + Modelo + Tag do tipo vivem juntos na .mp-topo. O tipo NAO eh
   selecionavel: e derivado do modelo (backend anota perfis[i].tipos).
   Padrao_Formulario: TODOS os controles em 40px, alinhados pela base pelo
   flex-end da .mp-topo. Card do miolo soh tem dropzone + botao Confirmar.
   ========================================================================= */
.ci-modelo-campo{margin-bottom:0; flex:1 1 260px; min-width:220px;}
.ci-modelo-campo .selectbusca .sb-display{height:var(--h-controle);}
.ci-tag-tipo-campo{margin-bottom:0; flex:0 0 auto;}

/* Tag do tipo: container 40px (mesma altura dos demais controles), pastilha
   ocupa altura inteira. Verde/vermelho por analogia com os toggles do
   mapeamento. Somente-leitura por default (1 tipo so). Quando o modelo cobre
   AMBOS, cada pastilha vira clicavel pro usuario escolher. */
.ci-tag-tipo{display:inline-flex; align-items:center; gap:6px; height:var(--h-controle); box-sizing:border-box;}
.ci-tag-pill{display:inline-flex; align-items:center; gap:6px; height:var(--h-controle); box-sizing:border-box; padding:0 14px; border-radius:var(--raio-full); font-size:13px; font-weight:700; letter-spacing:.02em; border:1px solid transparent; user-select:none;}
.ci-tag-pill .icon{font-size:14px;}
.ci-tag-entrada{background:var(--verde-suave); color:var(--verde); border-color:#bfe6cd;}
.ci-tag-saida{background:var(--vermelho-suave); color:var(--vermelho); border-color:#f3c4c4;}
/* Pastilhas clicaveis (modelo cobre entrada+saida): as inativas ficam
   esmaecidas ate o usuario clicar. A ativa mantem cor cheia + realce sutil. */
.ci-tag-pill.clicavel{cursor:pointer; transition:var(--transicao);}
.ci-tag-pill.clicavel:not(.ativo){background:var(--fundo-2); color:var(--texto-suave); border-color:var(--borda);}
.ci-tag-pill.clicavel:not(.ativo):hover{background:var(--fundo); color:var(--texto);}
.ci-tag-pill.clicavel.ativo{box-shadow:0 0 0 2px var(--branco), 0 0 0 3px currentColor;}
.ci-tag-vazio{display:inline-flex; align-items:center; height:var(--h-controle); padding:0 12px; font-size:12.5px; color:var(--texto-fraco); font-style:italic;}

.ci-card{padding:22px; display:flex; flex-direction:column; gap:16px;}
.ci-card[hidden]{display:none;}
.ci-drop{margin:0;}
.ci-acao{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.ci-msg{font-size:13px; color:var(--texto-suave); display:inline-flex; align-items:center; gap:6px;}
.ci-msg-ok{color:var(--verde);}
.ci-msg-erro{color:var(--vermelho);}

/* Painel de progresso da importacao (fase 3). Substitui o dropzone assim que
   o job foi enfileirado; polling 2s atualiza a barra + texto. Aviso de "pode
   fechar a aba" tranquiliza o usuario (o worker roda no servidor). */
.ci-progresso{padding:22px; display:flex; flex-direction:column; gap:14px;}
.ci-progresso[hidden]{display:none;}
.ci-prog-cab{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.ci-prog-tit{display:flex; align-items:center; gap:12px;}
.ci-prog-botoes{display:flex; gap:6px;}
.ci-prog-descartar{color:var(--vermelho); border-color:#f3c4c4;}
.ci-prog-descartar:hover{background:var(--vermelho-suave);}

/* Painel de diagnostico: aparece quando existe lote antigo em erro/retry.
   Cor ambar (aviso, nao erro fatal) + botao descartar em destaque.
   ATENCAO: display:flex SOBRESCREVE o [hidden] do browser (que eh
   display:none). Sem a regra .ci-diag[hidden] abaixo, o painel aparece
   SEMPRE com o placeholder "-" no numero do lote. */
.ci-diag{padding:16px 20px; background:var(--ambar-suave); border-color:#f5d5a5; display:flex; flex-direction:column; gap:12px;}
.ci-diag[hidden]{display:none;}
.ci-diag-cab{display:flex; align-items:flex-start; gap:12px;}
.ci-diag-tit{margin:0 0 4px; font-family:var(--font-titulo); font-size:15px; font-weight:800; letter-spacing:-.01em; color:var(--ambar);}
.ci-diag-msg{margin:0; font-size:13px; color:var(--texto); line-height:1.5;}
.ci-diag-acao{display:flex; justify-content:flex-end;}
.ci-prog-tit h3{margin:0; font-family:var(--font-titulo); font-size:17px; font-weight:800; letter-spacing:-.02em;}
.ci-prog-barra-wrap{height:14px; background:var(--fundo-2); border-radius:var(--raio-full); overflow:hidden; border:1px solid var(--borda);}
.ci-prog-barra{height:100%; background:linear-gradient(90deg, var(--cor-primaria), var(--cor-primaria-escura)); transition:width .4s ease;}
.ci-prog-linha{display:flex; align-items:center; justify-content:space-between; font-size:13px;}
.ci-prog-fase{color:var(--texto-suave);}
.ci-prog-numeros{font-family:var(--font-titulo); font-weight:700; font-variant-numeric:tabular-nums;}
.ci-prog-info{margin:6px 0 0; font-size:12.5px;}

/* ==== Tela Definicoes (Admin) ==== */
.def-secao{padding:20px; margin-bottom:14px;}
.def-secao + .def-secao{margin-top:0;}
.def-cab{margin-bottom:14px;}
.def-tit{margin:0; font-family:var(--font-titulo); font-size:17px; font-weight:800; letter-spacing:-.02em; display:flex; align-items:center; gap:8px;}
.def-cab p{margin:4px 0 0;}
.def-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px;}
.def-grid .campo{margin:0;}
.def-hint{display:block; font-size:11.5px; margin-top:4px; line-height:1.35;}
.def-acoes{margin-top:14px;}
.def-mini{max-width:110px; height:34px;}
.def-sb-lane{min-width:100px;}
.def-sb-lane .sb-display{height:34px;}
.def-cell-toggle{text-align:center;}
.def-toggle{position:relative; display:inline-block; width:36px; height:20px; vertical-align:middle;}
.def-toggle input{display:none;}
.def-toggle-slider{position:absolute; inset:0; background:var(--borda-forte); border-radius:20px; transition:var(--transicao); cursor:pointer;}
.def-toggle-slider::before{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:var(--branco); border-radius:50%; transition:var(--transicao);}
.def-toggle input:checked + .def-toggle-slider{background:var(--verde);}
.def-toggle input:checked + .def-toggle-slider::before{transform:translateX(16px);}
.def-desc{font-size:11px;}
.def-tabela th, .def-tabela td{padding:8px 10px; font-size:12.5px;}
.def-tabela form.inline{display:contents;}

.def-kpis{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:16px;}
.def-kpi{background:var(--fundo-2); border:1px solid var(--borda); border-radius:var(--raio); padding:12px 14px; display:flex; flex-direction:column; gap:2px;}
.def-kpi-lbl{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-suave);}
.def-kpi-val{font-family:var(--font-titulo); font-size:24px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--texto);}
.def-kpi.processando{background:var(--cor-primaria-suave); border-color:var(--borda-forte);}
.def-kpi.processando .def-kpi-val{color:var(--cor-primaria);}
.def-kpi.erro{background:var(--vermelho-suave); border-color:#f3c4c4;}
.def-kpi.erro .def-kpi-val{color:var(--vermelho);}
.def-kpi.cancelado{background:var(--ambar-suave); border-color:#f5d5a5;}
.def-kpi.cancelado .def-kpi-val{color:var(--ambar);}
@media (max-width:700px){ .def-kpis{grid-template-columns:repeat(2, 1fr);} }

.def-badge{display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--raio-full); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
.def-badge-pendente{background:var(--fundo-2); color:var(--texto-suave); border:1px solid var(--borda);}
.def-badge-processando{background:var(--cor-primaria-suave); color:var(--cor-primaria);}
.def-badge-concluido{background:var(--verde-suave); color:var(--verde);}
.def-badge-erro{background:var(--vermelho-suave); color:var(--vermelho);}
.def-badge-cancelado{background:var(--ambar-suave); color:var(--ambar);}
.def-erro-cel{max-width:280px; color:var(--vermelho); font-size:12px;}
.def-recentes{margin-top:8px;}

/* Relatorio pos-import: cabecalho com titulo + "Ver notas", KPIs em linha. */
.ci-relatorio{padding:22px; margin-top:14px;}
.ci-relatorio-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.ci-relatorio-tit{margin:0; font-family:var(--font-titulo); font-size:18px; font-weight:800; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:8px;}
.ci-relatorio-kpis{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;}
.ci-rel-kpi{background:var(--fundo-2); border:1px solid var(--borda); border-radius:var(--raio); padding:14px 16px; display:flex; flex-direction:column; gap:4px;}
.ci-rel-kpi-lbl{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-suave);}
.ci-rel-kpi-val{font-family:var(--font-titulo); font-size:26px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--texto);}
.ci-rel-kpi.ok{background:var(--verde-suave); border-color:#bfe6cd;}
.ci-rel-kpi.ok .ci-rel-kpi-val{color:var(--verde);}
.ci-rel-kpi.upd{background:var(--cor-primaria-suave); border-color:var(--borda-forte);}
.ci-rel-kpi.upd .ci-rel-kpi-val{color:var(--cor-primaria);}
.ci-rel-kpi.err{background:var(--vermelho-suave); border-color:#f3c4c4;}
.ci-rel-kpi.err .ci-rel-kpi-val{color:var(--vermelho);}
@media (max-width:700px){ .ci-relatorio-kpis{grid-template-columns:repeat(2, 1fr);} }
/* Listagem de lotes de importacao (nova tela padrao v900) */
.ci-lista-card{padding:0;}
.ci-tab-lotes th, .ci-tab-lotes td{padding:10px 12px; font-size:12.5px; vertical-align:middle;}
.ci-tab-lotes .ci-col-id{width:64px; color:var(--texto-suave); font-family:var(--font-titulo); font-weight:700;}
.ci-tab-lotes .ci-col-data{white-space:nowrap; color:var(--texto-suave);}
.ci-tab-lotes .ci-col-tipo{white-space:nowrap;}
.ci-tab-lotes .ci-col-status{white-space:nowrap;}
.ci-tab-lotes .ci-col-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.ci-tab-lotes .ci-col-arq{max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ci-tab-lotes .ci-num-ok{color:var(--verde); font-weight:600;}
.ci-tab-lotes .ci-num-err{color:var(--vermelho); font-weight:600;}
.ci-tab-lotes .col-acoes{white-space:nowrap; text-align:right;}
.ci-tab-lotes .col-acoes .btn{margin-left:4px;}

/* Minibarra de progresso na coluna Status enquanto o lote esta em andamento.
   Layout: barra a esquerda + % a DIREITA (fora da barra), sem sobrepor o
   texto no gradiente escuro (evita contraste ruim). */
.ci-prog-mini{display:inline-flex; align-items:center; gap:8px; width:140px;}
.ci-prog-mini .ci-prog-mini-track{position:relative; flex:1; height:8px; background:var(--fundo-2); border:1px solid var(--borda); border-radius:var(--raio-full); overflow:hidden;}
.ci-prog-mini-barra{position:absolute; top:0; left:0; height:100%; background:linear-gradient(90deg, var(--cor-primaria), var(--cor-primaria-escura)); transition:width .4s ease;}
.ci-prog-mini-txt{font-family:var(--font-titulo); font-size:11px; font-weight:800; letter-spacing:-.01em; color:var(--cor-primaria); font-variant-numeric:tabular-nums; min-width:36px; text-align:right;}
/* Motivo do erro visivel embaixo do numero (sem depender de hover) */
.ci-erro-motivo{display:block; margin-top:2px; font-size:11px; color:var(--vermelho); font-weight:400; max-width:220px; line-height:1.3; white-space:normal;}
.ci-erro-hover{cursor:help; border-bottom:1px dotted var(--vermelho);}
.ci-erro-vertodos{display:inline-block; margin-top:3px; font-size:11px; font-weight:600; color:var(--cor-primaria); text-decoration:underline; cursor:pointer;}
.ci-erro-vertodos:hover{color:var(--cor-primaria-escura);}
/* Modal de erros do lote */
.ci-erros-intro{margin:0 0 12px; font-size:13px;}
.ci-erros-tab th, .ci-erros-tab td{padding:7px 12px; font-size:12.5px;}
.ci-erros-tab .ci-erros-linha{width:90px; text-align:right; font-variant-numeric:tabular-nums; font-weight:700; color:var(--texto);}
.ci-erros-tab td:last-child{color:var(--vermelho);}
.ci-erros-mais{margin:10px 0 0; font-size:12px;}

/* Badge de status do lote (cores por estado) */
.ci-lote-badge{display:inline-flex; align-items:center; padding:3px 10px; border-radius:var(--raio-full); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
.ci-lote-badge-recebido, .ci-lote-badge-enfileirado{background:var(--fundo-2); color:var(--texto-suave); border:1px solid var(--borda);}
.ci-lote-badge-parseando, .ci-lote-badge-parseado, .ci-lote-badge-processando{background:var(--cor-primaria-suave); color:var(--cor-primaria);}
.ci-lote-badge-concluido{background:var(--verde-suave); color:var(--verde);}
.ci-lote-badge-erro, .ci-lote-badge-falha{background:var(--vermelho-suave); color:var(--vermelho);}
.ci-lote-badge-cancelado{background:var(--ambar-suave); color:var(--ambar);}

/* Modal de nova importacao: Modelo + Tipo lado a lado, dropzone abaixo.
   .ci-modal-linha eh o par (Padrao_Formulario: label acima, controles em
   linha, alinhados pela base). Modelo cresce, Tipo ocupa so o necessario.
   O CONTAINER que empilha (linha, dropzone, ci-acao) eh #ciModalConfig -
   por isso o flex/gap fica NELE, nao no .modal-corpo (que so tem 1 filho). */
#ciModalConfig{display:flex; flex-direction:column; gap:18px;}
#modalImportarNovo .campo{margin:0;}
#modalImportarNovo .ci-drop{margin:0;}
#modalImportarNovo .ci-acao{display:flex; align-items:center; gap:14px; margin:0;}
.ci-modal-linha{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;}
.ci-modal-linha .ci-modal-modelo{flex:1 1 260px; min-width:220px;}
.ci-modal-linha .ci-modal-modelo .selectbusca .sb-display{height:var(--h-controle);}
.ci-modal-linha .ci-modal-tipo{flex:0 0 auto;}

/* Amostra de motivos de erro no relatorio (quando o import falha em massa) */
.ci-rel-erros{margin-top:16px; padding:14px 16px; background:var(--vermelho-suave); border:1px solid #f3c4c4; border-radius:var(--raio);}
.ci-rel-erros[hidden]{display:none;}
.ci-rel-erros-tit{display:flex; align-items:center; gap:6px; font-weight:700; font-size:13px; color:var(--vermelho); margin-bottom:8px;}
.ci-rel-erros-lista{margin:0 0 8px; padding-left:20px; font-size:12.5px; color:var(--texto); line-height:1.6;}
.ci-rel-erros-lista li{font-family:"JetBrains Mono", Consolas, monospace;}
.ci-rel-erros-dica{margin:0; font-size:12.5px;}

/* =========================================================================
   CONFERE > NOTAS (.cn-*)
   Barra de filtros (Padrao_Barra_de_Filtros) + tabela (Padrao_Tabela)
   com scroll horizontal por causa das ~40 colunas do catalogo fiscal.
   ========================================================================= */
/* .cn-card virou wrapper leve so pra JS ganchar (data-*). #cnResumo e a linha
   de STATUS transitoria (dica inicial / carregando / erro); some quando ha
   resultado (a contagem passa pro rodape da tabela). */
.cn-card{padding:0;}
.cn-resumo{padding:9px 14px; background:var(--fundo-2); border-radius:var(--raio-sm); font-size:13px; color:var(--texto-secundario); display:flex; align-items:center; gap:6px;}
.cn-resumo[hidden]{display:none;}   /* senao o display:flex acima ignora o hidden */
.cn-resumo-ok{background:var(--verde-suave); color:var(--verde);}
.cn-resumo-erro{background:var(--vermelho-suave); color:var(--vermelho);}

/* Altura relativa: a tabela preenche a area util ate perto do rodape da
   viewport (topbar + paddings + rodape do paginador ~ 185px). */
.cn-tab-wrap{margin-top:12px;}
.cn-scroll{max-height:calc(100vh - 185px); min-height:240px; overflow:auto;}
.cn-tabela{table-layout:auto; min-width:100%;}
.cn-tabela th, .cn-tabela td{padding:8px 12px; font-size:12.5px;}
.cn-td-num{text-align:right; font-variant-numeric:tabular-nums;}
.cn-col-lote{text-align:center; color:var(--texto-suave); font-weight:600; font-size:11.5px;}

/* Cabecalho em 2 linhas fixas (sticky): linha 1 = titulos ordenaveis
   (click / shift+click = multi-coluna), linha 2 = filtros por coluna (Excel). */
.cn-tabela thead tr.cn-hrow th{position:sticky; top:0; z-index:4; background:var(--branco); height:34px;}
.cn-tabela thead tr.cn-frow th{position:sticky; top:34px; z-index:3; background:var(--branco); padding:4px 6px; border-bottom:1px solid var(--borda);}
.cn-tabela thead tr.cn-hrow th[data-col]{cursor:pointer; user-select:none; white-space:nowrap;}
.cn-tabela thead tr.cn-hrow th[data-col]:hover{color:var(--cor-primaria);}
.cn-tabela thead tr.cn-hrow th.cn-th-ativo{color:var(--cor-primaria-escura);}
.cn-th-arrow{margin-left:4px; font-size:10px; vertical-align:middle; opacity:.9;}
.cn-th-ordem{font-size:9px; font-weight:800; vertical-align:super; margin-left:1px; color:var(--cor-primaria);}
.cn-fcol{width:100%; min-width:78px; height:26px; box-sizing:border-box; padding:2px 7px; font-family:inherit; font-size:11.5px; color:var(--texto); border:1px solid var(--borda); border-radius:var(--raio-sm); background:var(--branco);}
.cn-fcol::placeholder{color:var(--texto-fraco);}
.cn-fcol:focus{outline:none; border-color:var(--cor-primaria);}
.cn-fcol.tem-valor{border-color:var(--cor-primaria); background:var(--cor-primaria-suave);}

/* Rodape da tabela: contagem cinza a ESQUERDA, navegacao a direita */
.cn-rodape{margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.cn-rodape[hidden]{display:none;}
.cn-contagem{font-size:12.5px; color:var(--texto-suave);}
.cn-contagem strong{color:var(--texto); font-variant-numeric:tabular-nums;}
.cn-pag-nav{display:flex; align-items:center; gap:12px; margin-left:auto;}
.cn-pag-nav[hidden]{display:none;}
.cn-pag-info{font-size:12.5px; color:var(--texto-suave); font-weight:600;}
.cn-vazio{text-align:center; padding:34px; margin-top:14px;}
.cn-vazio .icon{color:var(--texto-fraco); display:block; margin:0 auto 8px; font-size:32px;}
.cn-vazio h3{margin:0 0 6px;}

/* Menu de ferramentas da tabela (sanduiche) — Padrao_Tabela. Reusa .btn-filtro
   pro botao. Popups ancorados no wrapper. */
.cn-tb-menu{position:relative; display:inline-flex;}
.cn-tb-pop{position:absolute; top:calc(100% + 6px); right:0; min-width:190px; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra-lg); z-index:70; padding:5px;}
.cn-tb-item{display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; border:0; background:transparent; border-radius:var(--raio-sm); font-family:inherit; font-size:13px; color:var(--texto); cursor:pointer; text-align:left;}
.cn-tb-item:hover{background:var(--cor-primaria-suave); color:var(--cor-primaria-escura);}
.cn-tb-item .icon{font-size:16px; color:var(--texto-suave);}
.cn-tb-item:hover .icon{color:var(--cor-primaria);}
.cn-tb-div{height:1px; background:var(--borda); margin:4px 6px;}

/* Popup de colunas (mostrar/ocultar) — 45 colunas, com scroll */
.cn-cols-pop{position:absolute; top:calc(100% + 6px); right:0; width:270px; max-height:64vh; overflow:auto; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra-lg); z-index:71; padding:8px;}
.cn-cols-cab{display:flex; align-items:center; justify-content:space-between; padding:4px 8px 8px; border-bottom:1px solid var(--borda); margin-bottom:6px;}
.cn-cols-cab strong{font-size:12.5px;}
.cn-cols-cab .btn{padding:3px 8px; font-size:11px;}
.cn-cols-item{display:flex; align-items:center; gap:8px; padding:6px 8px; font-size:12.5px; color:var(--texto); border-radius:var(--raio-sm); cursor:pointer;}
.cn-cols-item:hover{background:var(--fundo);}
.cn-cols-item input{accent-color:var(--cor-primaria); width:15px; height:15px; flex-shrink:0;}

/* Popup de ordenacao multi-coluna (Padrao_Tabela / DataEvo TabelaAvancada) */
.cn-ord-pop{position:absolute; top:calc(100% + 6px); right:0; width:320px; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra-lg); z-index:71;}
.cn-ord-regras{padding:10px 12px; min-height:44px; display:flex; flex-direction:column; gap:8px;}
.cn-ord-vazio{padding:12px 4px; text-align:center; color:var(--texto-fraco); font-size:12.5px;}
.cn-ord-regra{display:flex; align-items:center; gap:6px;}
.cn-ord-num{width:20px; height:20px; flex-shrink:0; border-radius:50%; background:var(--cor-primaria-suave); color:var(--cor-primaria-escura); font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;}
.cn-ord-regra select{flex:1; min-width:0; height:30px; border:1px solid var(--borda); border-radius:var(--raio-sm); font-family:inherit; font-size:12px; padding:0 6px; background:var(--branco); color:var(--texto);}
.cn-ord-dir{height:30px; padding:0 9px; flex-shrink:0; border:1px solid var(--borda); border-radius:var(--raio-sm); background:var(--branco); font-family:inherit; font-size:11.5px; font-weight:700; color:var(--texto-suave); cursor:pointer; white-space:nowrap;}
.cn-ord-dir:hover{border-color:var(--cor-primaria); color:var(--cor-primaria);}
.cn-ord-rem{height:30px; width:30px; flex-shrink:0; border:1px solid var(--borda); border-radius:var(--raio-sm); background:var(--branco); color:var(--texto-suave); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
.cn-ord-rem:hover{color:var(--vermelho); border-color:var(--vermelho);}
.cn-ord-rodape{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-top:1px solid var(--borda);}
.cn-ord-acoes{display:flex; gap:6px;}
.cn-ord-cab{padding:10px 14px; border-bottom:1px solid var(--borda); font-weight:700; font-size:13px;}
.cn-ord-dica{font-size:11.5px;}
.cn-th-ord{margin-left:4px; color:var(--cor-primaria); font-size:11px; font-weight:800;}
/* O .btn-filtro so ganhava altura dentro de .tb-acoes (topbar). Injetado
   ao lado da tabela, ficava sem altura definida e a caixa saia com
   formato estranho. Aqui ele recebe a mesma altura de botao pequeno. */
.tabela-hijack-toolbar{display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-bottom:8px;}
/* O cabecalho (titulo + contagem + menu) mora DENTRO do card branco da tabela,
   como primeira faixa. Antes ficava solto acima, sobre o fundo cinza da pagina,
   e o titulo parecia pertencer a outro bloco. */
.tabela-wrap > .tabela-hijack-toolbar{padding:15px 16px 13px; margin-bottom:0;}
/* Com titulo, a barra vira o cabecalho da tabela: nome a esquerda, menu
   sanduiche encostado a direita (Acao_Primaria_a_Direita). */
.tabela-hijack-toolbar.com-titulo{justify-content:space-between;}
.tabela-titulo{margin:0; font-family:var(--font-titulo); font-size:15px; font-weight:700; letter-spacing:-.02em; color:var(--texto);}
.tabela-hijack-toolbar .btn-filtro{height:var(--h-controle-sm); min-width:var(--h-controle-sm); padding:0 10px;}
/* Contagem do filtro por coluna: margin-left:auto gruda ela no menu, tanto na
   barra com titulo (space-between) quanto na sem titulo (flex-end). */
.tabela-contagem{margin-left:auto; font-size:12px; white-space:nowrap;}

/* Filtro por coluna (Padrao_Filtro_por_Coluna): linha de campos no <thead>,
   logo abaixo dos titulos, escondida ate o item do menu ligar. */
.tabela .th-filtro th{padding:6px 12px 10px; background:var(--branco); border-bottom:1px solid var(--borda);}
.th-filtro-inp{width:100%; height:30px; padding:0 9px; font-size:12.5px; font-weight:400; text-transform:none; letter-spacing:0;}
/* Item do menu aceso enquanto a linha de filtros esta aberta: senao o usuario
   nao sabe de onde vieram os campos que apareceram na tabela. */
.cn-tb-item.ativo{background:var(--cor-primaria-suave); color:var(--cor-primaria-escura);}
.cn-tb-item.ativo .icon{color:var(--cor-primaria);}

/* ============================================================================
   HOME (landing do staff): tiles dos modulos (Apuração Assistida / Administrador)
   ============================================================================ */
.home{max-width:1200px; margin:0 auto; padding:10px 4px 28px;}
.home-cab{margin:10px 2px 26px;}
.home-saud{font-family:var(--font-titulo); font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--texto); margin:0 0 4px;}
.home-saud .nome{color:var(--cor-primaria);}
.home-sub{margin:0; color:var(--texto-suave); font-size:13.5px;}

/* Tiles compactos e NAO esticados (auto-fill) — mesma proporcao da referencia
   DataEvo: ~220px de largura, ~160px de altura, alinhados a esquerda. */
.home-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:18px;}
.home-tile{
  position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:160px;
  padding:22px 20px 18px; background:var(--branco); border:1px solid var(--borda); border-radius:14px;
  text-decoration:none; color:inherit; box-shadow:var(--sombra-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-tile::before{content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--tile); transition:height .18s ease;}
.home-tile:hover{transform:translateY(-3px); box-shadow:var(--sombra-lg); border-color:transparent; color:inherit; text-decoration:none;}
.home-tile:hover::before{height:6px;}
.home-ic{
  width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; background:var(--tile); box-shadow:0 4px 12px rgba(0,28,99,.20); transition:transform .18s ease;
}
.home-ic i{font-size:28px; color:#fff;}
.home-tile:hover .home-ic{transform:scale(1.06) rotate(-3deg);}
.home-nome{font-family:var(--font-titulo); font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--texto); margin-bottom:4px;}
.home-desc{font-size:11.5px; color:var(--texto-suave); line-height:1.45; flex:1;}
.home-rodape{margin-top:14px; padding-top:10px; border-top:1px solid var(--borda); display:flex; align-items:center; justify-content:space-between;}
.home-qtd{font-size:11.5px; font-weight:700; color:var(--texto); font-variant-numeric:tabular-nums;}
.home-seta{font-size:16px; color:var(--tile); transition:transform .18s ease;}
.home-tile:hover .home-seta{transform:translateX(4px);}
.home-bolha{position:absolute; right:-30px; bottom:-30px; width:120px; height:120px; border-radius:50%; background:var(--tile); opacity:.05; pointer-events:none; transition:opacity .18s ease, transform .18s ease;}
.home-tile:hover .home-bolha{opacity:.09; transform:scale(1.15);}

.home-vazio{max-width:520px; margin:64px auto; text-align:center; color:var(--texto-suave);}
.home-vazio .icon{font-size:52px; color:var(--borda-forte); display:block; margin-bottom:10px;}
.home-vazio h3{font-family:var(--font-titulo); font-size:18px; margin:0 0 8px; color:var(--texto);}

/* Dica no modal de contexto de cliente */
.cc-hint{margin:0 0 14px; font-size:13px; color:var(--texto-suave); line-height:1.5;}

@media (max-width:560px){
  .home-grid{grid-template-columns:1fr;}
  .home-saud{font-size:24px;}
}

/* ===== TabelaAvancada (Padrao_Tabela): toolbar + menu 3 pontos + popups ===== */
.ta-menu-wrap{position:relative; display:inline-block;}
.ta-menu-btn{width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--borda-forte); border-radius:var(--raio-sm); background:var(--branco); color:var(--texto-secundario); cursor:pointer; transition:var(--transicao);}
.ta-menu-btn:hover{border-color:var(--cor-primaria); color:var(--cor-primaria);}
.ta-menu{position:absolute; top:calc(100% + 6px); right:0; min-width:210px; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra-md); display:none; z-index:60;}
.ta-menu.aberto{display:block;}
.ta-menu-item{display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; font-size:13px; color:var(--texto); background:none; border:0; cursor:pointer; font-family:inherit; text-align:left;}
.ta-menu-item:hover{background:var(--fundo-2); color:var(--cor-primaria);}
.ta-menu-item .icon{font-size:16px; color:var(--texto-suave);}
.ta-menu-item:hover .icon{color:var(--cor-primaria);}
.ta-menu-div{height:1px; background:var(--borda); margin:4px 0;}
.ta-pop{position:absolute; top:calc(100% + 6px); right:0; min-width:260px; max-height:60vh; overflow:auto; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:var(--sombra-md); display:none; z-index:61;}
.ta-pop.aberto{display:block;}
.ta-pop-cab{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--borda); font-weight:700; font-size:13px;}
.ta-pop-cab .icon{color:var(--cor-primaria);}
.ta-pop-corpo{padding:6px;}
.ta-pop-item{display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--raio-sm); cursor:pointer; font-size:13px;}
.ta-pop-item:hover{background:var(--fundo-2);}
.ta-pop-item input{accent-color:var(--cor-primaria);}
.ta-pop-rodape{padding:10px 14px; border-top:1px solid var(--borda); display:flex; justify-content:flex-end;}
.ta-ord-regra{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; font-size:12.5px;}
.ta-ord-x{border:0; background:none; cursor:pointer; color:var(--texto-suave); font-size:16px; line-height:1;}
.ta-ord-x:hover{color:var(--vermelho);}
.ta-tabela th.ta-th{cursor:pointer; user-select:none;}
.ta-tabela th.ta-th:hover{color:var(--cor-primaria);}
.ta-sort{color:var(--cor-primaria); font-size:10px;}
.ta-tabela tr.ta-filtro-row th{background:var(--branco); padding:6px 8px;}
.ta-filtro-inp{width:100%; box-sizing:border-box; height:30px; padding:0 8px; border:1px solid var(--borda); border-radius:var(--raio-sm); font-size:12px; font-family:inherit;}

/* ===== Auditorias: KPIs (Padrao_KPI_Dashboard) ===== */
.au-kpis{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:18px;}
@media(max-width:1300px){.au-kpis{grid-template-columns:repeat(3,1fr);}}
@media(max-width:720px){.au-kpis{grid-template-columns:repeat(2,1fr); gap:8px;}}
.au-kpi{position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); padding:14px; box-shadow:var(--sombra-sm);}
.au-kpi::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--borda-forte);}
.au-kpi.grave::before{background:linear-gradient(90deg,#f87171,#dc2626);}
.au-kpi.alerta::before{background:linear-gradient(90deg,#fbbf24,#d97706);}
.au-kpi .ico{width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:20px; flex-shrink:0; background:var(--fundo); color:var(--texto-secundario);}
.au-kpi.grave .ico{background:var(--vermelho-suave); color:var(--vermelho);}
.au-kpi.alerta .ico{background:var(--ambar-suave); color:var(--ambar);}
.au-kpi .corpo{min-width:0; flex:1; display:flex; flex-direction:column;}
.au-kpi .lbl{font-size:10.5px; color:var(--texto-secundario); text-transform:uppercase; letter-spacing:.03em; font-weight:700; line-height:1.2; min-height:25px; display:flex; align-items:flex-end;}
.au-kpi .val{font-size:22px; font-weight:800; letter-spacing:-.5px; line-height:1; font-variant-numeric:tabular-nums; margin-top:3px; color:var(--texto);}

/* ===== Auditorias: barra de filtros (Padrao_Barra_de_Filtros) ===== */
.au-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; --au-h:38px;}
.au-bar .g{display:flex; flex-direction:column; gap:4px;}
.au-lbl{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--texto-secundario);}
.au-bar input,.au-bar select,.au-bar .btn,.au-bar .btn-primary{height:var(--au-h); box-sizing:border-box;}
.au-presets{display:inline-flex; align-items:center; gap:4px; height:var(--au-h); padding:3px; border:1px solid var(--borda); border-radius:7px; background:var(--branco);}
.au-presets button{height:calc(var(--au-h) - 8px); border:1px solid transparent; background:var(--branco); border-radius:5px; padding:0 10px; font-size:12px; font-weight:600; color:var(--texto-secundario); cursor:pointer; white-space:nowrap; font-family:inherit;}
.au-presets button:hover{color:var(--cor-primaria);}
.au-presets button.on{border-color:var(--cor-primaria); background:var(--cor-primaria-suave); color:var(--cor-primaria-escura);}
@media(max-width:720px){.au-bar .g{flex:1 1 100%;} .au-presets{flex-wrap:wrap; height:auto;}}

/* Form da topbar (seletor de dias dos KPIs). Substitui os style="gap:6px",
   style="margin:0", style="height:34px" antes inline no template. */
.au-form-dias{gap:6px;}
.au-form-dias .au-lbl{margin:0;}
.au-sb-dias{min-width:200px;}
.au-sb-dias .sb-display{height:var(--h-controle-sm);}

/* ===== Auditorias: reincidencia + ferramentas ===== */
.au-sec-tit{font-family:var(--font-titulo); font-size:16px; font-weight:700; letter-spacing:-.02em; margin:18px 0 10px; display:flex; align-items:center; gap:8px;}
.au-sec-tit .icon{color:var(--cor-primaria);}
.au-pill{display:inline-flex; align-items:center; padding:2px 9px; border-radius:var(--raio-full); font-size:11px; font-weight:700; background:var(--vermelho-suave); color:var(--vermelho); font-variant-numeric:tabular-nums;}
.au-evt{font-family:var(--font); font-size:12px; font-weight:600; color:var(--texto-secundario);}

/* Badge de 2FA na listagem de usuarios */
.pill-2fa{display:inline-flex; align-items:center; padding:2px 9px; border-radius:var(--raio-full); font-size:11px; font-weight:700;}
.pill-2fa.on{background:var(--verde-suave); color:var(--verde);}
.pill-2fa.pend{background:var(--ambar-suave); color:var(--ambar);}
/* Toggle rapido de 2FA na coluna (switch + hint "pendente") */
.cv-2fa-cell{display:inline-flex; align-items:center; gap:8px;}
.cv-2fa-hint{font-size:11px; font-weight:700; color:var(--texto-suave);}
.cv-2fa-hint.pend{color:var(--ambar);}

/* Minha conta: largura contida pra o form nao esticar a tela toda (respiro) */
.conta-wrap{max-width:640px;}
.conta-wrap form > button{margin-top:10px;}   /* respiro antes do botao de acao */

/* Alerta dentro de modal (ex.: salvar usuario): acento colorido tipo KPI.
   .erro = problema (vermelho), .aviso = atencao (ambar). So aparece com msg. */
.form-alerta{display:flex; align-items:flex-start; gap:9px; padding:10px 12px; border-radius:var(--raio-sm); font-size:12.5px; font-weight:500; line-height:1.4; margin-bottom:14px; border-left:3px solid;}
.form-alerta[hidden]{display:none;}
.form-alerta .icon{font-size:16px; flex-shrink:0; margin-top:1px;}
.form-alerta.erro{background:var(--vermelho-suave); border-color:var(--vermelho); color:var(--vermelho);}
.form-alerta.aviso{background:var(--ambar-suave); border-color:var(--ambar); color:var(--ambar);}

/* 2FA no modal: toggle a esquerda, texto a direita */
.mfa-toggle-row{display:flex; align-items:center; gap:12px; margin-top:2px;}
.mfa-toggle-row .cv-sw{margin:0;}
.mfa-toggle-txt{font-size:12px; line-height:1.4;}

/* ============================================================================
   EDITOR DE MENU (templates/admin/sidebars.html) — Sistema_de_Estilos manda
   todo CSS fora do template. Movido do <style> head_extra em 2026-07-29.
   ============================================================================ */
.sbe-wrap{max-width:920px;}
.sbe-aviso{margin-bottom:12px;}
.sbe-toast{padding:10px 14px; border-radius:9px; font-size:13px; font-weight:600; display:flex; gap:8px; align-items:center;}
.sbe-toast.ok{background:var(--verde-suave); color:var(--verde); border:1px solid var(--verde);}
.sbe-toast.err{background:var(--vermelho-suave); color:var(--vermelho); border:1px solid var(--vermelho);}
.sbe-ajuda{font-size:12px; color:var(--texto-secundario); background:var(--fundo-2); border:1px solid var(--borda); border-radius:9px; padding:10px 13px; margin-bottom:12px; line-height:1.5;}
.sbe-ajuda b{color:var(--texto);}
.sbe-arvore{background:var(--branco); border:1px solid var(--borda); border-radius:12px; padding:8px; min-height:180px;}
.sbe-vazio{text-align:center; padding:44px 20px; color:var(--texto-secundario); font-size:13px;}
.sbe-row{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; border:1px solid transparent; transition:.08s; user-select:none;}
.sbe-row+.sbe-row{margin-top:2px;}
.sbe-row.dragging{opacity:.4;}
.sbe-row.oculto{opacity:.45;}
.sbe-row.oculto .sbe-nome{text-decoration:line-through;}
.sbe-row.sel{outline:2px solid var(--cor-primaria); outline-offset:-1px;}
.sbe-row.drop-before{box-shadow:0 -2px 0 0 var(--cor-primaria);}
.sbe-arvore.drop-end::after{content:""; display:block; height:2px; background:var(--cor-primaria); border-radius:2px; margin:4px 8px 0;}
.sbe-handle{cursor:grab; color:var(--texto-fraco); font-size:15px; display:inline-flex; flex-shrink:0;}
.sbe-row:active .sbe-handle{cursor:grabbing;}
.sbe-sub{background:var(--fundo-2); border-color:var(--borda);}
.sbe-sub .sbe-nome{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--texto-secundario); flex:1;}
.sbe-sub.semsec .sbe-nome{font-style:italic; text-transform:none; letter-spacing:0; color:var(--texto-fraco);}
.sbe-folder{background:var(--cor-primaria-suave); border-color:var(--borda-forte);}
.sbe-folder .sbe-nome{font-size:13px; font-weight:700; color:var(--cor-primaria-escura); flex:1;}
.sbe-folder .sbe-fico{color:var(--cor-primaria); font-size:16px;}
.sbe-item .sbe-nome{font-size:13.5px; font-weight:600; color:var(--texto); flex:1;}
.sbe-item.off .sbe-nome{color:var(--texto-fraco);}
.sbe-ico{width:30px; height:30px; border:1px solid var(--borda); border-radius:7px; background:var(--fundo-2); display:inline-flex; align-items:center; justify-content:center; font-size:16px; color:var(--texto); cursor:pointer; flex-shrink:0; transition:.1s;}
.sbe-ico:hover{border-color:var(--cor-primaria); color:var(--cor-primaria);}
.sbe-badge{font-size:9.5px; font-weight:800; text-transform:uppercase; padding:2px 6px; border-radius:5px; letter-spacing:.03em;}
.sbe-badge.eb{background:var(--ambar-suave); color:var(--ambar);}
.sbe-badge.in{background:var(--fundo); color:var(--texto-secundario);}
.sbe-badge.cust{background:var(--cor-primaria-suave); color:var(--cor-primaria-escura);}
.sbe-acts{display:inline-flex; gap:2px; flex-shrink:0;}
.sbe-ib{width:26px; height:26px; border:none; background:none; border-radius:6px; color:var(--texto-fraco); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:14px;}
.sbe-ib:hover{background:var(--fundo); color:var(--texto);}
.sbe-ib:disabled{opacity:.28; cursor:default;}
.sbe-ib.del:hover{background:var(--vermelho-suave); color:var(--vermelho);}
.sbe-topbar{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;}
.sbe-drop{position:relative;}
/* position:fixed + coordenadas via JS: nao e cortado por nenhum ancestral
   (mesmo motivo do SelectBusca do ACTUS). */
.sbe-drop-menu{display:none; position:fixed; background:var(--branco); border:1px solid var(--borda); border-radius:9px; box-shadow:var(--sombra-md); min-width:220px; padding:5px; z-index:9000; max-height:320px; overflow-y:auto;}
.sbe-drop.on .sbe-drop-menu{display:block;}
.sbe-drop-item{display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border:none; background:transparent; text-align:left; font-size:13px; font-weight:600; color:var(--texto); border-radius:7px; cursor:pointer; font-family:inherit;}
.sbe-drop-item:hover{background:var(--fundo-2);}
.sbe-drop-item.sel{background:var(--cor-primaria); color:#fff;}
.sbe-drop-nome{flex:1;}
.sbe-drop-qt{font-size:10.5px; font-weight:700; color:var(--texto-fraco); background:var(--fundo); padding:2px 7px; border-radius:999px;}
.sbe-drop-item.sel .sbe-drop-qt{background:rgba(255,255,255,.24); color:#fff;}
/* Seletor de MODULO (menu da Home) na faixa fixa, sobre o SelectBusca. */
.sbe-area-sb{width:240px;}
.sbe-area-sb .sb-display{font-weight:700;}
.sbe-area-sb .sb-label{flex:1; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sbe-area-ic{color:var(--cor-primaria); font-size:15px; flex-shrink:0;}
.sbe-area-cr{font-size:11px; opacity:.55; flex-shrink:0; transition:transform .15s;}
.sbe-area-sb.open .sbe-area-cr{transform:rotate(180deg);}
.sbe-area-sb .sb-panel{min-width:250px; padding:4px; z-index:9000;}
.sbe-menu-op{display:flex; align-items:center; gap:9px; width:100%; padding:10px 11px; border:none; background:transparent; text-align:left; font-size:13.5px; font-weight:600; color:var(--texto); cursor:pointer; font-family:inherit; border-radius:7px;}
.sbe-menu-op:hover{background:var(--cor-primaria-suave); color:var(--cor-primaria-texto);}
.sbe-menu-op>i:first-child{color:var(--cor-primaria); font-size:16px; flex-shrink:0;}
.sbe-mo-nome{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sbe-opt-qt{font-size:10.5px; font-weight:700; background:var(--fundo); color:var(--texto-fraco); padding:1px 8px; border-radius:999px; flex-shrink:0;}
.sbe-menu-op:hover .sbe-opt-qt{background:rgba(255,255,255,.5);}
.sbe-optgrp{padding:11px 12px; font-size:12.5px; color:var(--texto-fraco);}
/* Cabecalho RICO de SUBMENU (grupo): faixa preenchida, arrastavel, com acoes. */
.sbe-grupo{background:var(--cor-primaria-suave); border-color:var(--borda-forte); margin-top:10px;}
.sbe-grupo:first-child{margin-top:0;}
.sbe-gico{color:var(--cor-primaria); font-size:16px; flex-shrink:0;}
.sbe-gnome{flex:1; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--cor-primaria-escura);}
.sbe-toggle{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--borda-forte); border-radius:8px; background:var(--branco); cursor:pointer; user-select:none; opacity:.55;}
.sbe-toggle.ativo{opacity:1;}
.sbe-toggle input{position:absolute; opacity:0; pointer-events:none;}
.sbe-toggle-sw{position:relative; width:30px; height:16px; background:var(--borda-forte); border-radius:999px; transition:.15s; flex-shrink:0;}
.sbe-toggle-sw::after{content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; background:#fff; border-radius:50%; transition:.15s;}
.sbe-toggle input:checked+.sbe-toggle-sw{background:var(--cor-primaria);}
.sbe-toggle input:checked+.sbe-toggle-sw::after{transform:translateX(14px);}
.sbe-toggle-lbl{font-size:12.5px; font-weight:700; color:var(--texto-secundario);}
.sbe-toggle input:checked~.sbe-toggle-lbl{color:var(--cor-primaria);}
.sbe-menu-btn{padding:6px 10px;}
.sbe-menu-menu{min-width:200px;}
/* Altura uniforme dos elementos da faixa fixa, todos iguais ao botao Salvar. */
.sbe-topbar .sbe-area-sb .sb-display,
.sbe-topbar .sbe-toggle,
.sbe-topbar .sbe-menu-btn,
.sbe-topbar .btn-primary{height:var(--h-controle-sm); box-sizing:border-box; padding-top:0; padding-bottom:0; display:inline-flex; align-items:center;}
.sbe-mbg{position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:center; justify-content:center; z-index:6000; padding:20px;}
.sbe-mbg.on{display:flex;}
.sbe-modal{background:var(--branco); border-radius:14px; width:100%; max-width:440px; box-shadow:var(--sombra-lg); overflow:hidden;}
.sbe-modal.wide{max-width:640px;}
.sbe-mh{padding:14px 18px; border-bottom:1px solid var(--borda); font-weight:800; font-size:15px; display:flex; align-items:center; gap:8px;}
.sbe-mb{padding:18px;}
.sbe-conf-msg{font-size:13.5px; line-height:1.5;}
.sbe-mf{padding:12px 18px; border-top:1px solid var(--borda); display:flex; justify-content:flex-end; gap:8px;}
.sbe-inp{width:100%; padding:10px 12px; border:1px solid var(--borda-forte); border-radius:8px; font-size:14px; font-family:inherit;}
.sbe-inp:focus{outline:none; border-color:var(--cor-primaria);}
.sbe-ico-busca{margin-bottom:12px;}
.sbe-ico-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(48px, 1fr)); gap:6px; max-height:340px; overflow-y:auto;}
.sbe-ico-op{aspect-ratio:1; border:1px solid var(--borda); border-radius:8px; background:var(--fundo-2); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--texto); cursor:pointer; transition:.08s;}
.sbe-ico-op:hover{border-color:var(--cor-primaria); color:var(--cor-primaria); transform:translateY(-1px);}
.sbe-ico-op.sel{background:var(--cor-primaria); color:#fff; border-color:var(--cor-primaria);}
.sbe-ico-vazio{grid-column:1/-1; text-align:center; color:var(--texto-secundario); padding:24px; font-size:13px;}

/* Padrao_Formulario: .ra-bar (form standalone com controles a 40px, label 13px 600 sem uppercase,
   botao alinha com truque <label>&nbsp;</label>). Copia canonica da nota vault. */
.ra-bar{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); padding:14px 18px;}
.ra-bar .campo{display:flex; flex-direction:column; gap:5px; margin-bottom:0; min-width:160px;}
/* Padrao_Formulario:129 "botao ancora na direita". Sem isto o botao fica
   colado no ultimo campo e sobra um vao morto ate a borda do card. */
.ra-bar .ra-acao{margin-left:auto;}
.ra-bar .campo label{font-size:13px; font-weight:600; color:var(--texto-secundario); margin-bottom:0;}
.ra-bar .campo .input,
.ra-bar .campo .selectbusca .sb-display,
.ra-bar > .btn,
.ra-bar > .btn-primary,
.ra-bar .ra-acao .btn,
.ra-bar .ra-acao .btn-primary{height:var(--h-controle); box-sizing:border-box;}

/* Chupa-cabra: tela one-shot de migracao actus_bpo -> reftrib. */
.mig-hint{font-size:13px; color:var(--texto-secundario); margin-bottom:14px; line-height:1.55;}
.mig-form .mig-campo-cresce{flex:1 1 260px;}
.mig-form .mig-campo-porta{flex:0 0 100px; min-width:100px;}
.mig-form .mig-campo-lote{flex:0 0 140px; min-width:140px;}
/* .mig-bloco perdeu o margin-bottom: o gap do .content afasta os blocos
   agora (Padrao_Espacamento_e_Respiro). A classe continua viva pelo
   estilo do h3 abaixo, entao NAO tirar do HTML. */
.mig-bloco h3{display:inline-flex; align-items:center; gap:8px; margin-bottom:8px;}
.mig-bloco h3 .icon{color:var(--cor-primaria);}
.mig-hint-bloco{font-size:13px; line-height:1.55; margin-bottom:12px;}
.mig-sb-cliente{max-width:520px;}
.mig-chk-lista{display:flex; flex-direction:column; gap:6px;}
.mig-chk-linha{display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--borda); border-radius:var(--raio-sm); background:var(--fundo-2); cursor:pointer; transition:var(--transicao); font-size:13.5px;}
.mig-chk-linha:hover{border-color:var(--cor-primaria);}
.mig-chk-linha input[type=checkbox]{margin:0;}
.mig-chk-linha code{background:var(--branco); padding:2px 6px; border-radius:var(--raio-sm); font-size:12.5px; border:1px solid var(--borda);}
.mig-chk-nome{font-weight:600;}
.mig-chk-seta{color:var(--texto-suave);}
.mig-chk-destino{display:inline-flex; align-items:center; gap:8px; color:var(--texto-secundario);}
.mig-chk-inline{border:none; background:transparent; padding:0;}
.mig-chk-inline:hover{border-color:transparent;}
.mig-form-acao .mig-campo-cresce{flex:1 1 320px;}
.mig-icone-girando{display:inline-block; animation:mig-rotate .8s linear infinite;}
@keyframes mig-rotate{to{transform:rotate(360deg);}}
.mig-job{padding:12px 14px; border:1px solid var(--borda); border-radius:var(--raio-sm); background:var(--fundo-2); margin-bottom:8px;}
.mig-job-cab{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; flex-wrap:wrap;}
.mig-job-tit{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;}
.mig-job-tit .icon{color:var(--texto-suave);}
.mig-job-tit code{background:var(--branco); padding:2px 6px; border-radius:var(--raio-sm); font-size:12.5px; border:1px solid var(--borda);}
.mig-pb-track{height:8px; background:var(--borda); border-radius:var(--raio-full); overflow:hidden; margin-bottom:6px;}
.mig-pb-fill{height:100%; background:linear-gradient(90deg, var(--cor-primaria), var(--cor-primaria-escura)); width:0; transition:width .3s ease;}
.loading-sub{font-size:12px; color:var(--texto-secundario); font-variant-numeric:tabular-nums; margin-bottom:8px;}
.mig-job-acoes{display:flex; justify-content:flex-end;}
.mig-esmaecida{opacity:.3;}
/* uiAlerta escreve com textContent: sem isto o \n do diagnostico do motor de
   jobs colapsa e vira um paragrafo unico ilegivel. */
#uiAlertaMsg{white-space:pre-line; text-align:left; line-height:1.55;}
.mig-avancado{margin-bottom:14px;}
.mig-avancado > summary{cursor:pointer; padding:8px 12px; border:1px dashed var(--borda-forte); border-radius:var(--raio-sm); background:var(--fundo-2); font-size:13px; font-weight:600; color:var(--texto-secundario); list-style:none; display:inline-flex; align-items:center; gap:8px;}
.mig-avancado > summary:hover{border-color:var(--cor-primaria); color:var(--cor-primaria);}
.mig-avancado > summary::-webkit-details-marker{display:none;}
.mig-avancado[open] > summary{margin-bottom:10px;}
.mig-avancado[open] > summary .icon{transform:rotate(180deg);}
.mig-avancado > summary .icon{transition:transform .18s;}

/* ============================================================================
   BARRA DE FILTROS DE PAGINA  (Padrao_Barra_de_Filtros)
   Faltava no projeto: ate 30/07 so existia a .ra-bar (form standalone). A nota
   distingue as duas: .fu-bar filtra uma listagem, .ra-bar e formulario de acao
   unica. Primeira tela a usar: /sam/on/cte e /sam/on/duplicados.
   Regra 1 da nota: altura unica via --fu-h em TODO elemento da barra, inclusive
   no .sb-display do SelectBusca (que aqui substitui o <select> nativo dos
   exemplos da nota, proibido por Sem_Select_Nativo).
   ========================================================================== */
/* A barra mora num container branco, igual a .ra-bar. Sem isto os campos
   ficam soltos sobre o fundo da pagina e a faixa de filtro nao existe como
   bloco: foi o "filtro grudado no fundo da tela" apontado em 30/07. */
.fu-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio); padding:14px 18px; --fu-h:38px;}
.fu-bar .g{display:flex; flex-direction:column; gap:4px;}
.fu-lbl{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--texto-secundario);}
.fu-bar .input,
.fu-bar .btn,
.fu-bar .btn-primary,
.fu-bar .selectbusca .sb-display{height:var(--fu-h); box-sizing:border-box;}
.fu-bar .selectbusca{min-width:170px;}
/* Espacador: empurra a acao principal pro canto direito (regra 4 da nota). */
.fu-bar .sp{flex:1;}
@media (max-width:720px){
  .fu-bar .g{flex:1 1 100%;}
  .fu-bar .sp{display:none;}
}

/* ---- Faixa de ACOES sobre a selecao (telas ON) ----------------------------
   Nao e barra de filtro: fica ABAIXO dela. Antes se chamava .oc-resultado e
   carregava tambem a contagem; a contagem foi pro rodape, junto da paginacao
   (Padrao_Cabecalho_da_Tabela), e aqui sobraram so as acoes. */
.tabela-acoes{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:34px;}
.tabela-acoes .sp{flex:1;}
.btn.desabilitado{opacity:.30; cursor:not-allowed;}
.btn.desabilitado:hover{border-color:var(--borda-forte); color:var(--texto);}
.btn.perigo{color:var(--vermelho); border-color:var(--vermelho);}
.btn.perigo:hover:not(:disabled){background:var(--vermelho-suave);}
.btn.perigo:disabled{opacity:.45; cursor:not-allowed;}

/* ---- Paginacao server-side ------------------------------------------------ */
/* Rodape da tabela: contagem a ESQUERDA, controles de pagina no centro,
   mesma linha. Antes a contagem ficava numa faixa solta ACIMA da tabela,
   longe da paginacao que ela descreve. Mesmo desenho do .cn-rodape. */
/* Grid de 3 colunas em vez de position:absolute: a contagem ocupa a coluna 1,
   os controles a 2 (centro real, porque as colunas 1 e 3 sao 1fr iguais) e a 3
   fica vazia. Com absolute o texto ficava POR CIMA dos controles quando a
   janela apertava; com grid isso nao acontece por construcao, sem depender de
   media query pra salvar. */
.oc-pag{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-top:14px; min-height:32px;}
.oc-pag .btn{padding:0 10px;}
.oc-pag-info{grid-column:1; justify-self:start; font-size:12.5px;}
.oc-pag-nav{grid-column:2; display:flex; align-items:center; gap:8px;}
.oc-pag-nav[hidden]{display:none;}
@media (max-width:820px){
  /* Estreito demais pras tres colunas: empilha, contagem em cima. */
  .oc-pag{grid-template-columns:1fr; justify-items:center; gap:10px;}
  .oc-pag-info,.oc-pag-nav{grid-column:1;}
}

/* ---- Bloco de loading fora do botao  (Padrao_Loading_Estado) --------------
   Spinner 44x44 com borda 4px e texto descritivo obrigatorio. NUNCA dentro do
   botao: o botao recebe so o trifeedback (disabled + texto + icone girando). */
.loading-box{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:34px 16px; background:var(--branco); border:1px solid var(--borda); border-radius:var(--raio);}
/* Reusa o keyframe mig-rotate (linha 1489) em vez de criar um quarto keyframe
   de rotacao identico no mesmo arquivo. */
.loading-spin{width:44px; height:44px; border:4px solid var(--borda); border-top-color:var(--cor-primaria); border-radius:var(--raio-full); animation:mig-rotate .8s linear infinite;}
.loading-txt{font-size:14px; font-weight:600; color:var(--texto);}
.loading-box .loading-sub{margin-bottom:0;}

/* ---- Comparador de duplicados: destaca o campo que difere ------------------
   Sem isso o usuario le 56 linhas iguais procurando a diferenca no olho. */
.cmp-difere td{background:var(--vermelho-suave);}
.cmp-difere td:first-child{font-weight:700;}

/* ---- Linha CNPJ + botao de consulta na Receita ---------------------------- */
.sn-cnpj-linha{display:flex; gap:8px; align-items:center;}
.sn-cnpj-linha .input{flex:1;}


/* ============================================================================
   UPLOAD DE ARQUIVO  (Padrao_Upload_Arquivo)
   FALTAVA INTEIRO no projeto. A tela /sam/lns/importacao usava .im-drop e
   .im-inp sem uma linha de CSS por tras, entao o navegador desenhava o
   <input type="file"> nativo: exatamente o que a regra 2 da nota proibe
   ("input file escondido off-screen, nunca o visual nativo").
   Valores copiados literalmente da nota (linhas 68-152).
   ========================================================================== */

/* Dropzone: clique e arraste no MESMO <label> (regra 1 da nota). */
.im-drop{display:block; border:2px dashed var(--borda); border-radius:var(--raio); padding:32px; text-align:center; color:var(--texto-secundario); cursor:pointer; transition:var(--transicao); user-select:none;}

/* Estado 2: passando o mouse ou arrastando arquivo por cima. */
.im-drop:hover,
.im-drop.over{border-color:var(--cor-primaria); background:var(--cor-primaria-suave); color:var(--cor-primaria-escura); border-style:solid;}

/* Estado 3: arquivo escolhido. Verde vem da nota (tabela de estados). */
.im-drop.loaded{border-style:solid; border-color:var(--verde); background:var(--verde-suave); color:var(--verde-escuro);}

/* Icone central, 36px, troca conforme o estado (regra 3). */
.im-drop i{font-size:36px; display:block; margin-bottom:6px;}

/* Input fora da tela. E ISTO que impede o visual nativo do navegador. */
.im-inp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}

/* Rotulo de etapa acima da dropzone: 11px uppercase, igual .fu-lbl. */
.im-lbl{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--texto-secundario); display:block; margin-bottom:8px;}

/* Linha de acao: botao Confirmar + mensagem inline ao lado (regra 6). */
/* Acao primaria ancorada na DIREITA. A nota de upload e a unica com botao
   primario que nao dizia isso, e por isso o botao saiu na esquerda: as
   outras tres (Barra_de_Filtros:238, Modal:78, Formulario:129) mandam
   direita. A mensagem inline fica na esquerda pelo margin-right:auto,
   entao continua "ao lado do botao" como manda a regra 6 da nota. */
.im-acao{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; margin-top:14px;}
.im-acao .im-msg{margin-right:auto;}
.im-acao button:disabled{opacity:.45; cursor:not-allowed;}
.im-msg{font-size:12.5px; color:var(--texto-secundario);}
.im-msg.ok{color:var(--verde-escuro); font-weight:600;}
.im-msg.erro{color:var(--vermelho); font-weight:600;}

/* ============================================================================
   Faixa de sessao impersonada (Padrao_Impersonacao_Segura)
   ============================================================================
   Sticky logo ABAIXO da topbar (que e sticky em top:0 com 58px): a marca nao
   pode sumir ao rolar, senao o admin esquece que esta na conta de outro. Cor
   ambar de aviso, nunca a cor da marca — nao e estado normal do sistema. */
.imp-faixa{position:sticky; top:var(--topbar-h); z-index:19;
           display:flex; align-items:center; gap:12px; flex-wrap:wrap;
           padding:10px 20px; background:var(--ambar-suave);
           border-bottom:1px solid var(--ambar); color:var(--ambar);
           font-size:13px;}
.imp-faixa .icon{font-size:18px; flex:none;}
.imp-txt{flex:1; min-width:0;}
.imp-txt strong{color:var(--ambar);}
/* Acao_Primaria_a_Direita: o .imp-txt com flex:1 empurra o botao pra borda. */
.imp-sair-form{flex:none; margin:0;}
.imp-faixa .btn{background:var(--branco); border-color:var(--ambar); color:var(--ambar);}
.imp-faixa .btn:hover{background:var(--ambar); color:var(--branco);}
@media (max-width:640px){
  .imp-faixa{padding:10px 14px;}
  .imp-txt{flex:1 1 100%;}
}

/* ============================================================================
   Convite de usuario: escolha manual x convite, e o resultado
   ============================================================================ */
/* Modal estreita pra pergunta unica (Padrao_Modal: tamanho por classe, nunca
   max-width inline). A .modal-sb do projeto e a larga de formulario. */
.modal-sm{width:min(92vw, 440px);}

/* Cartao de escolha: alvo grande, com a CONSEQUENCIA escrita embaixo. "Manual
   x convite" nao diz nada sozinho — o que muda e quem define a senha. */
.escolha-card{display:flex; align-items:center; gap:14px; width:100%;
              padding:14px 16px; margin-bottom:10px; text-align:left;
              background:var(--branco); border:1px solid var(--borda);
              border-radius:var(--raio); cursor:pointer;
              font-family:inherit; color:var(--texto);
              transition:border-color .12s, background .12s;}
.escolha-card:last-child{margin-bottom:0;}
.escolha-card:hover{border-color:var(--cor-primaria);
                    background:var(--cor-primaria-suave);}
.escolha-card > .icon{font-size:26px; color:var(--cor-primaria); flex:none;}
.escolha-txt{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0;}
.escolha-txt strong{font-size:14px; font-weight:600;}
.escolha-txt small{font-size:12px; color:var(--texto-suave); line-height:1.45;}
.escolha-seta{font-size:15px; color:var(--texto-suave); flex:none;}
.escolha-card:hover .escolha-seta{color:var(--cor-primaria);}

/* Mensagem pronta do WhatsApp: monoespacada pra quebra de linha ficar fiel ao
   que a pessoa vai receber. */
.cf-msg{font-family:var(--font); font-size:12.5px; line-height:1.5;
        resize:vertical; min-height:120px; white-space:pre-wrap;}

/* Badge de convite pendente na lista de usuarios. Ambar: nao e erro, e um
   estado de espera que o staff precisa enxergar. */
.badge-convite{display:inline-flex; align-items:center; gap:5px;
               padding:2px 8px; border-radius:999px; font-size:11px;
               font-weight:600; background:var(--ambar-suave); color:var(--ambar);}
.badge-convite .icon{font-size:12px;}