/* ==========================================================================
   style.css — Visual do XBD Connect.
   Paleta "Marinho & Esmeralda" (escolhida pelo usuário): fundo marinho (não preto puro),
   cartões um pouco mais claros que o fundo, texto branco-acinzentado, destaque esmeralda
   e azul-turquesa de apoio. Cores em variáveis no :root. Tema escuro por padrão; claro
   automático se o sistema operacional estiver no modo claro (mesma paleta, adaptada).
   ========================================================================== */

:root {
  /* Espaçamentos padrão das páginas: topo da página e entre os blocos principais */
  --espaco-topo: 32px;
  --espaco-secao: 28px;
  /* Tipos de escrita (escala única, escolhida pelo usuário; padrão de mercado: o nome é o PAPEL do texto
     e a cor é escolhida à parte, branco ou cinza). Texto novo usa um destes; nada de tamanho solto.
     Exceções de propósito (são "desenho"): selo do banco, avatar, contador, valores muito altos, campos do login. */
  --escrita-destaque: 22px; --escrita-destaque-peso: 700;   /* saldo em aberto */
  --escrita-valor: 18px;    --escrita-valor-peso: 700;      /* valores em R$ e números do resumo */
  --escrita-titulo: 18px;   --escrita-titulo-peso: 700;     /* título de janela e de formulário */
  --escrita-secao: 14px;    --escrita-secao-peso: 700;      /* MAIÚSCULAS: título de página e grupos do menu */
  --escrita-nome: 14px;     --escrita-nome-peso: 600;       /* nomes (pagador, conta, usuário, perfil) */
  --escrita-texto: 13px;                                    /* texto normal, subtítulo, subitem do menu */
  --escrita-legenda: 12px;                                  /* rótulo de campo, detalhe (banco · data), "lançado por" */
  --escrita-coluna: 11px;   --escrita-coluna-peso: 600;     /* MAIÚSCULAS: cabeçalho das colunas */
  --escrita-botao: 13px;                                    /* componente: botões (peso de cada tipo de botão) */
  --escrita-etiqueta: 11px; --escrita-etiqueta-peso: 700;   /* componente: etiqueta em pílula */
  --fundo: #0B1020;          /* marinho */
  --superficie: #121A30;     /* cartões */
  --superficie-2: #19223F;   /* elevado (hover, item ativo) */
  --borda: #253052;
  --texto: #E5EAF3;
  --suave: #8C97B4;
  /* "--verde" = cor de destaque do sistema (esmeralda); o nome ficou por compatibilidade */
  --verde: #2FBF71;
  --verde-fundo: rgba(47, 191, 113, 0.13);
  --verde-texto: #04130A;    /* texto sobre fundo esmeralda (botões) */
  --turquesa: #2EA8D8;       /* destaque 2 (apoio) */
  --ambar: #F5A524;
  --ambar-fundo: rgba(245, 165, 36, 0.14);
  --vermelho: #F0707A;
  --vermelho-fundo: rgba(240, 112, 122, 0.14);
  --faixa: linear-gradient(135deg, rgba(47, 191, 113, 0.30), rgba(46, 168, 216, 0.08) 70%); /* faixa do topo das janelas e do login */
  --faixa-fim: #14253D;      /* cor da ponta direita da faixa (fundo da bolinha do logo nas janelas: opção "2E") */
  --logo-janela: #FFFFFF;    /* logo XBD liso dentro da bolinha */
  --brilho-discreto: 0.70;   /* botão tipo 2 ("Enviado", "Editar") sem o mouse; no claro é outro */
  /* Degradê padrão da marca: esmeralda → azul-claro (avatar e botões principais) */
  --gradiente: linear-gradient(135deg, var(--verde), var(--turquesa));
  /* Verde-azulado (meio do degradê): cor dos botões de apoio ao passar o mouse */
  --verde-azulado: #2EB3A4;
  --dourado: #E8C14A;        /* etiqueta do perfil Master (Gerenciar usuários) */
  --rolagem: #33405F;
  --raio: 12px;
  /* Selos dos bancos */
  --c6-fundo: #2A3047;
  --c6-texto: #F3F4F6;
  --bb-fundo: #F8D117;
  --bb-texto: #1F2A5A;
}

/* Tema claro: o tema.js marca <html data-tema="claro"> (escolha do botão de sol/lua no topo
   ou, sem escolha salva, o modo do computador). Sem a marca, vale o escuro acima. */
:root[data-tema="claro"] {
  color-scheme: light;
  --fundo: #F3F4F6;
  --superficie: #FFFFFF;
  --superficie-2: #EEF1F7;
  --borda: #DDE2EC;
  --texto: #0B1020;
  --suave: #5B6582;
  --verde: #1E9E5A;
  --verde-fundo: rgba(30, 158, 90, 0.10);
  --verde-texto: #FFFFFF;
  --turquesa: #1E8FC0;
  --ambar: #B45309;
  --ambar-fundo: rgba(245, 158, 11, 0.16);
  --vermelho: #D2414D;
  --vermelho-fundo: rgba(210, 65, 77, 0.10);
  --faixa: linear-gradient(135deg, rgba(30, 158, 90, 0.24), rgba(30, 143, 192, 0.07) 70%);
  --faixa-fim: #EFF7FB;
  --logo-janela: var(--texto); /* branco sumiria no fundo quase branco */
  --brilho-discreto: 0.85;
  --verde-azulado: #1E968D;
  --dourado: #A87C0C;
  --rolagem: #C5CCDA;
  --c6-fundo: #1F2328;
  --c6-texto: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  /* Fonte Outfit (escolhida pelo usuário). Tamanhos: variáveis --escrita-* no :root */
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
}

[hidden] { display: none !important; }

/* Barras de rolagem do sistema todo, nas cores do tema: trilho transparente, alça arredondada
   (--rolagem) que fica verde-azulada ao passar o mouse. Chrome/Edge usam as regras ::-webkit-*;
   o Firefox (que não tem essas regras) usa scrollbar-width/scrollbar-color. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rolagem); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--verde-azulado); }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--rolagem) transparent; }
}

/* ---------- Ícones (desenhos em linha, herdam a cor do texto) ---------- */
.icone {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Estrutura: menu lateral + área principal ---------- */
/* Largura mínima da página: o site não pode impedir o usuário de diminuir a janela, mas
   abaixo de 720 px o sistema para de encolher e aparece a rolagem horizontal (valor
   escolhido pelo usuário). Abaixo de ~880 px com o menu aberto, a coluna Pagador do
   Histórico fica estreita demais para mostrar o nome; recolher o menu devolve espaço. */
.com-menu { display: flex; min-height: 100vh; min-width: 720px; }
.area { flex: 1; min-width: 0; }

/* ---------- Menu lateral ---------- */
.menu {
  --largura-menu: 248px;
  width: var(--largura-menu); flex: none;
  position: sticky; top: 0; height: 100vh; z-index: 3;
  background: var(--superficie); border-right: 1px solid var(--borda);
  transition: width 0.2s ease;
}
/* Recolhido: só os ícones (a classe é colocada pelo app.js) */
.menu.recolhido { --largura-menu: 68px; }
.menu.recolhido .menu-texto { display: none; }

.menu-rolagem { height: 100%; overflow-y: auto; overflow-x: hidden; padding: 16px 12px; display: flex; flex-direction: column; }
/* Conexões: separada dos outros itens, presa na parte de baixo do menu (margin-top: auto empurra
   para baixo). Some junto com o divisor para quem não pode ver os Pix. */
.menu-rodape { margin-top: auto; }
.menu-rodape:has(#botaoConexoes[hidden]) { display: none; }
/* Versão do sistema no pé do menu (Legenda, cinza), com divisor acima. Sem Conexões (perfil sem pix.ver),
   ela mesma vai para baixo; com Conexões, fica logo abaixo dela. */
.menu-versao-bloco { margin-top: auto; }
.menu-versao-bloco:has(#versaoSistema:empty) { display: none; }
.menu-rodape:not(:has(#botaoConexoes[hidden])) ~ .menu-versao-bloco { margin-top: 0; }
/* Centralizada na largura do menu: símbolo XBD – versão */
.menu-versao { margin: 0; padding: 0 10px; font-size: var(--escrita-legenda); color: var(--suave);
  display: flex; align-items: center; justify-content: center; gap: 8px; white-space: pre; }
/* Símbolo XBD liso (branco no tema escuro, escuro no claro) no lugar da palavra "XBD" */
.versao-simbolo { width: 31px; height: 10px; flex: none; color: var(--texto); }
#botaoConexoes .seta { transform: rotate(180deg); }
#botaoConexoes[aria-expanded="true"] .seta { transform: none; }

/* Botão redondo na borda do menu que expande/recolhe */
.menu-alternar {
  position: absolute; top: 22px; right: -14px; z-index: 1;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borda); cursor: pointer;
}
.menu-alternar .icone { width: 16px; height: 16px; transition: transform 0.2s; }
.menu.recolhido .menu-alternar .icone { transform: rotate(180deg); }
.menu-alternar:hover { border-color: var(--suave); }

.menu-marca {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px;
  color: var(--texto); text-decoration: none; min-height: 40px;
  justify-content: center; /* logo centralizado na barra lateral */
}
.menu-marca .logo { flex: none; }
/* Logo: símbolo XBD (sem "Connect") grande com o menu aberto; pequeno com o menu recolhido */
.sprite-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
.marca-logo { width: 98px; height: 32px; color: var(--texto); }
/* Símbolo do menu recolhido: 34 px de largura para não encostar no botão de expandir (sobra a borda direita) */
.marca-icone { display: none; width: 34px; height: 11px; flex: none; }
.menu.recolhido .menu-marca { padding-inline: 0; }
.menu.recolhido .marca-icone { display: block; }
/* Texto escondido na tela, mas lido por leitores de tela */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.menu-divisor { border: none; border-top: 1px solid var(--borda); margin: 14px 0; }

.menu-grupo { display: flex; flex-direction: column; gap: 2px; }

/* Itens do menu (usuário, Dashboard) e subitens */
.menu-item, .submenu-item {
  font: inherit; display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; border-radius: 8px; cursor: pointer; text-align: left;
  color: var(--texto); white-space: nowrap; position: relative;
}
.menu-item { padding: 10px; font-size: var(--escrita-nome); font-weight: var(--escrita-nome-peso); }
.menu-item.titulo { font-size: var(--escrita-secao); font-weight: var(--escrita-secao-peso); letter-spacing: 0.04em; text-transform: uppercase; }
.menu-item > .menu-texto:not(.seta) { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.menu-item .seta { width: 16px; height: 16px; color: var(--suave); transition: transform 0.2s; }
.menu-item[aria-expanded="true"] .seta { transform: rotate(180deg); }
.menu-item:hover, .submenu-item:hover { background: var(--superficie-2); }

.submenu { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px; }
.submenu-item { padding: 8px 10px 8px 18px; font-size: var(--escrita-texto); color: var(--suave); }
.submenu-item .icone { width: 18px; height: 18px; }
.submenu-item .menu-texto { flex: 1; }
/* Subitem da lista aberta agora: destaque verde */
.submenu-item[aria-current="page"] { color: var(--texto); background: var(--superficie-2); }
.submenu-item[aria-current="page"]::before {
  content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--verde);
}
.menu.recolhido .submenu-item { padding-left: 13px; }
.menu.recolhido .submenu-item[aria-current="page"]::before { left: 2px; }
/* Recolhido: o contador vira uma "bolinha" no canto do ícone */
.menu.recolhido .submenu-item .contador {
  position: absolute; top: 2px; left: 26px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px;
}

/* Conexões bancárias: ícone com a bolinha geral no canto */
.icone-com-ponto { position: relative; display: grid; flex: none; }
.icone-com-ponto .ponto {
  position: absolute; top: -2px; right: -3px; width: 9px; height: 9px;
  box-shadow: 0 0 0 2px var(--superficie);
}
.icone-com-ponto .ponto:not(.ok):not(.erro) { display: none; }

/* Uma linha por conta: bolinha + nome + situação */
/* Mesma letra dos subitens do Dashboard (cinza, peso normal), um pouco menor */
.conexao {
  display: flex; align-items: center; gap: 12px; padding: 7px 10px 7px 24px;
  font-size: var(--escrita-legenda); color: var(--suave); border-radius: 8px; cursor: default;
}
.conexao-textos { display: flex; flex: 1; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.conexao-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conexao-situacao { font-size: var(--escrita-legenda); white-space: nowrap; }
.conexao-situacao.ok { color: var(--verde); }
.conexao-situacao.erro { color: var(--vermelho); }
.menu.recolhido .conexao { padding-left: 18px; }

/* Bolinha com as iniciais do usuário */
.avatar {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; margin: -4px;
  background: var(--gradiente); color: var(--verde-texto); font-size: 12px; font-weight: 700;
}
.menu-item:has(.avatar) { gap: 16px; }

/* ---------- Barra superior ---------- */
.topo {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 24px; border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; background: var(--fundo); z-index: 2;
}
.titulo-pagina { display: flex; align-items: center; gap: 10px; }
/* Chave de tema (direita do topo): trilho em pílula com sol (esquerda) e lua (direita); a bolinha
   no degradê da marca desliza para o lado do tema em uso e o ícone dela fica destacado.
   Mouse em cima: contorno verde-azulado (padrão dos botões de apoio). */
.chave-tema {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 60px; height: 30px; padding: 0 7px; margin: -5px 0 -5px auto; /* margem negativa: não aumenta a altura do topo */
  border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie-2);
  cursor: pointer; transition: border-color 0.15s;
}
.chave-tema:hover { border-color: var(--verde-azulado); }
.chave-tema:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.chave-tema .icone { position: relative; z-index: 1; width: 14px; height: 14px; color: var(--suave); transition: color 0.2s; }
.chave-bolinha {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gradiente); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); transition: transform 0.2s;
  transform: translateX(30px); /* escuro: do lado da lua */
}
.chave-tema .icone-lua { color: var(--verde-texto); }
:root[data-tema="claro"] .chave-bolinha { transform: none; } /* claro: do lado do sol */
:root[data-tema="claro"] .chave-tema .icone-sol { color: var(--verde-texto); }
:root[data-tema="claro"] .chave-tema .icone-lua { color: var(--suave); }
.titulo-pagina h1 { font-size: var(--escrita-secao); font-weight: var(--escrita-secao-peso); letter-spacing: 0.04em; text-transform: uppercase; }
/* "· Pendentes" ao lado de RECEBIMENTOS */
.subtitulo-pagina { font-size: var(--escrita-texto); color: var(--suave); }
.subtitulo-pagina:not(:empty)::before { content: '·'; margin-right: 10px; }
.marca { display: flex; align-items: center; gap: 10px; }
.logo {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  background: var(--verde-fundo); color: var(--verde); font-weight: 700;
}
h1 { font-size: var(--escrita-titulo); margin: 0; font-weight: var(--escrita-titulo-peso); }
.controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--escrita-texto); }

/* Bolinha de situação: verde = ok, vermelha = erro, cinza = aguardando; vazada = desligada */
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--suave); flex: none; }
.ponto.ok { background: var(--verde); }
.ponto.erro { background: var(--vermelho); }
.ponto.desligada { background: transparent; border: 1.5px solid var(--suave); }

/* ---------- Botões ---------- */
.botao {
  font: inherit; font-size: var(--escrita-botao); cursor: pointer; white-space: nowrap;
  padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto);
}
.botao:hover:not(:disabled) { border-color: var(--suave); }
.botao:disabled { opacity: 0.5; cursor: default; }
/* Botões de apoio (Limpar, Anterior/Próxima, Mostrar mais antigos, Copiar): contorno cinza fino, sem
   chamar atenção; ao passar o mouse, contorno e texto ficam verde-azulado (padrão "B", escolhido pelo usuário) */
.botao.apoio { background: transparent; border-color: var(--borda); color: var(--suave); font-weight: 500; }
.botao.apoio:hover:not(:disabled) { border-color: var(--verde-azulado); color: var(--verde-azulado); }
.botao:focus-visible, input:focus-visible, select:focus-visible,
.menu-item:focus-visible, .submenu-item:focus-visible, .menu-alternar:focus-visible, .menu-marca:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 2px;
}

/* ---------- Conteúdo ---------- */
/* Largura máxima pensada para a lista em colunas (Recebido em | Pagador | Valor) */
.conteudo { max-width: 1240px; margin: 0 auto; padding: var(--espaco-topo) 24px 64px; }

/* Resumo: um único card em uma linha — "Pendentes 6 │ Valor pendente R$ … │ Enviados hoje 6".
   Letras no tamanho das usadas na linha do Pix. */
.resumo {
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 12px 18px; margin-bottom: 12px;
}
.resumo-item { display: flex; align-items: baseline; gap: 8px; padding: 0 22px; }
.resumo-item:first-child { padding-left: 0; }
.resumo-item + .resumo-item { border-left: 1px solid var(--borda); }
.rotulo { font-size: var(--escrita-legenda); color: var(--suave); }
.resumo-item strong { font-size: var(--escrita-valor); font-weight: var(--escrita-valor-peso); }
.resumo-item .destaque { color: var(--verde); }

/* ---------- Contador (número de pendentes no menu) ---------- */
.contador {
  min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--verde-fundo); color: var(--verde); text-align: center;
}
.contador.zero { background: var(--superficie-2); color: var(--suave); }

/* ---------- Filtros (recolhíveis, como "Conexões" no menu) ---------- */
.filtros-caixa {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  margin-bottom: var(--espaco-secao);
}
.filtros-titulo {
  font: inherit; font-size: var(--escrita-botao); font-weight: 600; color: var(--texto);
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; padding: 10px 14px; text-align: left;
}
.filtros-titulo .icone { width: 16px; height: 16px; color: var(--suave); }
.filtros-titulo .seta { margin-left: auto; transition: transform 0.2s; }
.filtros-titulo[aria-expanded="true"] .seta { transform: rotate(180deg); }
/* Mouse em cima da barra (Filtros, Perfis e permissões): mesmo padrão dos botões de apoio —
   contorno da caixa, ícone, texto e seta ficam verde-azulado */
.filtros-titulo { transition: color 0.15s; }
.filtros-titulo .icone { transition: color 0.15s; }
.filtros-titulo:hover, .filtros-titulo:hover .icone { color: var(--verde-azulado); }
.filtros-caixa { transition: border-color 0.15s; }
.filtros-caixa:has(> .filtros-titulo:hover) { border-color: var(--verde-azulado); }
.filtros-titulo:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; border-radius: var(--raio); }
.filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  padding: 2px 14px 14px;
}
.campo { display: flex; flex-direction: column; gap: 4px; font-size: var(--escrita-legenda); color: var(--suave); }
/* Janelas e cartões de login/criar senha: mais espaço entre o rótulo e o campo, para o contorno
   verde de foco (2 px + 2 px de afastamento) não encostar no texto de cima */
.caixa-dialogo .campo, .cartao-login .campo { gap: 8px; }
.campo-largo { flex: 1 1 200px; }
.campo-valor input { width: 110px; }
.campo input, .campo select {
  font: inherit; font-size: var(--escrita-texto); color: var(--texto);
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px;
  padding: 7px 10px; min-height: 34px;
}
.campo input[type="date"] { color-scheme: dark; }
:root[data-tema="claro"] .campo input[type="date"] { color-scheme: light; }
.campo input[aria-invalid="true"] { border-color: var(--vermelho); }
/* Filtro "Banco / conta": a linha do banco em negrito (as contas vêm recuadas abaixo) */
.campo option.opcao-banco { font-weight: 600; }

/* Linha acima dos títulos das colunas: totais à esquerda, paginador compacto à direita */
.lista-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 18px 2px; min-height: 32px; }
.totais { font-size: var(--escrita-texto); color: var(--suave); margin: 0; min-height: 18px; }
.totais strong { color: var(--texto); font-weight: 600; }

/* ---------- Lista e cards ---------- */
.lista { display: flex; flex-direction: column; gap: 8px; transition: opacity 0.15s; }
.lista.carregando { opacity: 0.55; }
.vazio {
  text-align: center; color: var(--suave); padding: 48px 16px; margin: 0;
  border: 1px dashed var(--borda); border-radius: var(--raio);
}
.vazio.erro { color: var(--vermelho); }

/* Cada Pix é uma linha de "tabela" com 3 colunas:
   Recebido em (fixa) | Pagador (o espaço que sobra) | Valor (fixa: etiqueta + valor + botão)
   As colunas fixas têm o mínimo medido com a fonte real (+ folga de arredondamento):
   conta = selo 38 + 10 + "Banco do Brasil"; valor = "Pendente" | "R$ 99.999,99" | botão "✓ Enviado". */
:root {
  --col-conta: 140px;
  --vaga-etiqueta: 68px; --vaga-valor: 122px; --vaga-botao: 92px; --vao-valor: 10px;
  --col-valor: calc(var(--vaga-etiqueta) + var(--vaga-valor) + var(--vaga-botao) + 2 * var(--vao-valor));
}
/* Pendentes não tem etiqueta: a coluna Valor é só valor + botão (mais espaço para o Pagador). */
#painelPendentes { --col-valor: calc(var(--vaga-valor) + var(--vaga-botao) + var(--vao-valor)); }
/* Layout único em qualquer largura de tela (a versão empilhada para celular foi desativada
   temporariamente, a pedido): o que não couber na coluna Pagador é cortado com "…". */
.cabecalho-lista, .pix {
  display: grid; grid-template-columns: var(--col-conta) minmax(0, 1fr) var(--col-valor); gap: 16px;
}
.cabecalho-lista {
  padding: 0 18px 6px 21px; font-size: var(--escrita-coluna); font-weight: var(--escrita-coluna-peso); color: var(--suave);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cabecalho-lista .direita { text-align: right; }
/* Lista vazia ("Nenhum Pix..."): os títulos das colunas somem */
.cabecalho-lista:has(+ .lista > .vazio) { display: none; }

.pix {
  align-items: center;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  border-left: 3px solid var(--verde); padding: 15px 18px;
  transition: opacity 0.25s, transform 0.25s;
}
/* Barra lateral: sempre na cor da marca (pendentes e histórico ficam em páginas separadas) */
.pix.novo { animation: chegou 2.4s ease-out; }
@keyframes chegou {
  0%   { opacity: 0; transform: translateY(-6px); background: var(--verde-fundo); }
  15%  { opacity: 1; transform: none; }
  100% { background: var(--superficie); }
}
.pix.saindo { opacity: 0; transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) {
  .pix.novo { animation: none; }
  .pix, .lista { transition: none; }
}

.selo-banco {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; flex: none;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  background: var(--superficie-2); color: var(--texto);
}
.selo-banco.banco-c6 { background: var(--c6-fundo); color: var(--c6-texto); }
.selo-banco.banco-bb { background: var(--bb-fundo); color: var(--bb-texto); }
/* Inter: laranja da marca; sigla mais longa, letra menor para caber no selo */
.selo-banco.banco-inter { background: #ff7a00; color: #ffffff; font-size: 9px; letter-spacing: 0; }

/* 1. Recebido em: selo + apelido da conta + banco */
.pix-conta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pix-conta-textos { display: flex; flex-direction: column; min-width: 0; }
.pix-conta-apelido { font-weight: var(--escrita-nome-peso); font-size: var(--escrita-nome); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pix-conta-banco { font-size: var(--escrita-legenda); color: var(--suave); margin-top: 2px; white-space: nowrap; }

/* 2. Pagador: nome em cima; banco de origem · data e hora embaixo */
.pix-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pix-pagador { font-weight: var(--escrita-nome-peso); font-size: var(--escrita-nome); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pix-detalhes, .pix-processado-em {
  font-size: var(--escrita-legenda); color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 3. Valor: três vagas fixas — etiquetas, valores (pela direita) e botões sempre alinhados */
.pix-lado {
  display: grid; grid-template-columns: var(--vaga-etiqueta) var(--vaga-valor) var(--vaga-botao);
  gap: var(--vao-valor); align-items: center;
}
.pix.pendente .pix-lado { grid-template-columns: var(--vaga-valor) var(--vaga-botao); }
.vaga-etiqueta { display: flex; justify-content: flex-end; }
.etiqueta-status {
  font-size: var(--escrita-etiqueta); font-weight: var(--escrita-etiqueta-peso); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
/* Pendente = verde; Enviado = amarelo */
.etiqueta-status.pendente { background: var(--verde-fundo); color: var(--verde); }
.etiqueta-status.processado { background: var(--ambar-fundo); color: var(--ambar); }
.pix-valor { color: var(--verde); font-weight: var(--escrita-valor-peso); font-size: var(--escrita-valor); white-space: nowrap; text-align: right; overflow: hidden; }
/* Pix raros acima de R$ 99.999,99: letra menor para caber na mesma vaga (o app.js marca a classe) */
.pix-valor.grande { font-size: 15px; }   /* a partir de R$ 100.000,00 */
.pix-valor.enorme { font-size: 13px; }   /* a partir de R$ 1.000.000,00 */
/* Botão com 88 px encostado à direita da vaga de 92 px: sobram 4 px a mais entre o valor e o botão */
.pix-acao { width: calc(var(--vaga-botao) - 4px); justify-self: end; padding-left: 0; padding-right: 0; font-weight: 600; text-align: center; }
/* Botão de contorno verde, fundo transparente (ex.: "Editar" das Permissões) */
.botao.contorno { background: transparent; border-color: var(--verde); color: var(--verde); }
.botao.contorno:hover:not(:disabled) { background: var(--verde-fundo); border-color: var(--verde); }
/* Botão principal com o degradê da marca ("Lançar", "Confirmar", "Salvar") */
.botao.gradiente { background: var(--gradiente); border-color: transparent; color: var(--verde-texto); font-weight: 600; }
.botao.gradiente:hover:not(:disabled) { background: var(--gradiente); border-color: transparent; filter: brightness(1.08); }
/* Variante "discreta" ("Enviado" do Dashboard e "Editar" das Permissões): degradê mais escuro,
   que fica claro (o degradê normal) só ao passar o mouse */
.botao.gradiente.discreto { filter: brightness(var(--brilho-discreto)); }
.botao.gradiente.discreto:hover:not(:disabled) { filter: none; }
/* "Desfazer" do histórico e "Cancelar" das janelas: discretos (contorno cinza); ao passar o mouse
   ficam vermelho-suave, avisando que a ação desfaz/desiste */
.botao.desfazer, .botao.cancelar { background: transparent; border-color: var(--borda); color: var(--suave); font-weight: 500; }
.botao.desfazer:hover:not(:disabled), .botao.cancelar:hover:not(:disabled) { background: var(--vermelho-fundo); border-color: var(--vermelho); color: var(--vermelho); }

/* ---------- Paginação ---------- */
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: var(--escrita-texto); color: var(--suave); flex-wrap: wrap; }
.paginacao .botoes { display: flex; align-items: center; gap: 8px; }
/* Números de página: 7 vagas de largura fixa, para as setas ‹ › ficarem sempre no mesmo lugar */
.paginas { display: flex; align-items: center; gap: 4px; }
.paginas .botao { min-width: 34px; padding: 5px 8px; text-align: center; }
.paginas .reticencias { min-width: 34px; text-align: center; color: var(--suave); }
/* Página atual: visual de "mouse em cima" dos botões de apoio */
.botao.apoio[aria-current="page"] { border-color: var(--verde-azulado); color: var(--verde-azulado); font-weight: 600; }

/* ---------- Financeiro dos sócios ---------- */
/* Saldo em aberto do sócio aberto (o sócio é escolhido no menu lateral) */
.fin-cabecalho {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 14px 18px; margin-bottom: 12px; /* saldo e lançamento ficam juntos (pedido do usuário) */
}
.fin-saldo { display: flex; flex-direction: column; gap: 2px; }
.fin-saldo strong { font-size: var(--escrita-destaque); font-weight: var(--escrita-destaque-peso); }
.fin-saldo.negativo strong { color: var(--vermelho); }
.fin-saldo.positivo strong { color: var(--verde); }

/* Formulário de lançamento */
.fin-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 14px; margin-bottom: var(--espaco-secao);
}
.fin-form .botao.gradiente { min-height: 34px; padding: 7px 20px; }
/* Entrada / Saída: dois botões grudados, da MESMA largura; o escolhido fica colorido.
   A linha entre eles é um vão de 1 px mostrando o fundo (e não uma borda dentro do "Saída",
   que empurrava o texto dele meio pixel para a direita). */
.fin-tipo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: 191px;
  background: var(--borda); border: 1px solid var(--borda); border-radius: 8px; overflow: hidden;
}
.fin-tipo-opcao { position: relative; cursor: pointer; }
.fin-tipo-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.fin-tipo-opcao span {
  display: block; padding: 8px 6px; font-size: var(--escrita-botao); font-weight: 600; text-align: center;
  color: var(--suave); background: var(--fundo);
}
.fin-tipo-opcao.entrada input:checked + span { background: var(--verde-fundo); color: var(--verde); }
.fin-tipo-opcao.saida input:checked + span { background: var(--vermelho-fundo); color: var(--vermelho); }
.fin-tipo-opcao input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: -2px; }

/* Descrição: lista de sugestões própria, logo abaixo do campo, sempre inteira (sem rolagem) */
.fin-descricao-campo { position: relative; }
.fin-sugestoes {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin: 4px 0 0; padding: 4px;
  list-style: none; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); overflow: visible;
}
.fin-sugestoes li {
  padding: 7px 10px; border-radius: 6px; font-size: var(--escrita-texto); color: var(--texto); cursor: pointer;
}
.fin-sugestoes li:hover, .fin-sugestoes li.ativa { background: var(--superficie-2); }

/* Extrato: Data | Descrição | Valor | Saldo | Lançado por | copiar */
.fin-linha {
  display: grid; gap: 14px; align-items: center;
  grid-template-columns: 124px minmax(0, 1fr) 112px 112px 110px 36px;
}
/* Página estreita (menu aberto em janela pequena): some a coluna "Lançado por" */
#paginaFinanceiro { container-type: inline-size; }
@container (max-width: 640px) {
  .fin-linha { grid-template-columns: 124px minmax(0, 1fr) 104px 104px 36px; gap: 10px; }
  .fin-quem, .fin-titulos > span:nth-child(5) { display: none; }
}
.fin-titulos {
  padding: 0 14px 6px; font-size: var(--escrita-coluna); font-weight: var(--escrita-coluna-peso); color: var(--suave);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.fin-titulos .direita, .fin-item .direita { text-align: right; }
.fin-titulos:has(+ .fin-lista > .vazio) { display: none; }
.fin-lista { gap: 6px; }
.fin-item {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  padding: 9px 14px; font-size: var(--escrita-texto); min-height: 50px;
}
.fin-data, .fin-quem { color: var(--suave); font-size: var(--escrita-legenda); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-descricao { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-valor { font-weight: 700; white-space: nowrap; }
.fin-valor.entrada { color: var(--verde); }
.fin-valor.saida { color: var(--vermelho); }
.fin-saldo-linha { white-space: nowrap; }
.fin-acoes { display: flex; justify-content: flex-end; }
.fin-acoes .fin-icone { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; }
.fin-acoes .fin-icone .icone { width: 17px; height: 17px; }
/* "Mostrando 10 de 212" + botão "Mostrar mais antigos" */
/* Página de escolha (Agentes / Parceiros): busca + uma linha por pessoa, visual das listas de Pix */
.fin-busca {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 14px; margin-bottom: var(--espaco-secao);
}
/* Linha de cima: Tag e Ordenar à esquerda, "+ Criar agência" encostado à direita */
.fin-busca-topo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
#finNovaAgencia { margin-left: auto; }
.fin-resumo { margin: 0; } /* dentro da .lista-topo (a margem vem dela) */
.fin-pessoa-linha {
  /* Nome | Tags (coluna própria, alinhada) | Último lançamento | Saldo */
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 128px 150px; gap: 14px; align-items: center;
  padding: 0 18px 6px 21px;
}
.fin-pessoa-linha.fin-titulos {
  font-size: var(--escrita-coluna); font-weight: var(--escrita-coluna-peso); color: var(--suave);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fin-titulos:has(+ .fin-pessoas > .vazio) { display: none; }
.fin-pessoas { gap: 8px; }
.fin-pessoa {
  font: inherit; color: var(--texto); text-align: left; cursor: pointer; width: 100%;
  background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--verde);
  border-radius: var(--raio); padding: 14px 18px; transition: border-color 0.15s;
}
/* Mouse em cima: contorno verde-azulado (como os botões de apoio); a barra lateral continua verde */
.fin-pessoa:hover { border-color: var(--verde-azulado); border-left-color: var(--verde); }
.fin-pessoa:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
/* Nome + tags: o nome encolhe (com "…") e as etiquetas ficam sempre inteiras ao lado */
.fin-pessoa-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fin-pessoa-texto { font-size: var(--escrita-nome); font-weight: var(--escrita-nome-peso); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* " · Apelido" na mesma linha do nome, em cinza (o nick atual do agente) */
.fin-pessoa-apelido { color: var(--suave); font-weight: 400; }
.fin-pessoa-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.fin-pessoa-tags .etiqueta-status { flex: none; }
/* Tags das agências: Financeiro = verde; Profit = verde-azulado */
.etiqueta-status.tag-financeiro { background: var(--verde-fundo); color: var(--verde); }
.etiqueta-status.tag-profit { background: color-mix(in srgb, var(--verde-azulado) 16%, transparent); color: var(--verde-azulado); }
.fin-pessoa-data { font-size: var(--escrita-legenda); color: var(--suave); white-space: nowrap; }
.fin-pessoa-saldo { font-size: var(--escrita-valor); font-weight: var(--escrita-valor-peso); text-align: right; white-space: nowrap; }
.fin-pessoa-saldo.negativo { color: var(--vermelho); }
.fin-pessoa-saldo.positivo { color: var(--verde); }
/* Página da pessoa: "← Voltar" acima do saldo */
/* Página da agência: "← Voltar", as tags e "Editar agência" (à direita) */
.fin-topo-pessoa { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fin-tags { display: flex; gap: 6px; }
/* "Apelidos antigos" e "Editar agência" à direita (o primeiro deles empurra os dois); ícone do mesmo tamanho do "Editar" */
.fin-apelidos-botao { display: inline-flex; align-items: center; gap: 6px; }
.fin-apelidos-botao .icone { width: 14px; height: 14px; stroke-width: 2; }
.fin-topo-pessoa #finApelidosAntigos { margin-left: auto; }
/* Janela "Apelidos antigos": o atual em cima e a lista (mais recente primeiro), que rola se for longa */
.fin-apelido-atual { color: var(--suave); }
.fin-apelido-atual strong { color: var(--texto); }
.fin-apelidos-lista { display: flex; flex-direction: column; gap: 0; max-height: min(320px, 50vh); overflow-y: auto; padding: 4px 16px; }
.fin-apelido-linha { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.fin-apelido-linha:last-child { border-bottom: none; }
.fin-apelido-linha strong { font-size: var(--escrita-nome); font-weight: var(--escrita-nome-peso); }
.fin-apelido-linha span { font-size: var(--escrita-legenda); color: var(--suave); }
.fin-apelidos-lista .vazio { margin: 0; padding: 14px 0; border: none; text-align: left; }
/* Janela "Editar agência": tags como opções marcáveis lado a lado */
.fin-tags-escolha { border: none; margin: 0; padding: 0; min-width: 0; }
.fin-tags-escolha legend { padding: 0; margin-bottom: 8px; font-size: var(--escrita-legenda); color: var(--suave); }
#finAgenciaTags { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-tag-opcao {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); font-size: var(--escrita-texto);
}
.fin-tag-opcao:has(input:checked) { border-color: var(--verde); background: var(--verde-fundo); }
.fin-tag-opcao input { accent-color: var(--verde); margin: 0; }

.fin-mais { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: var(--escrita-texto); color: var(--suave); }
/* Campo escondido usado só para copiar a mensagem quando o navegador não deixa do jeito novo */
.fin-copia-oculta { position: fixed; top: 0; left: -9999px; opacity: 0; }

/* Caixa de diálogo (confirmar lançamento) */
.caixa-dialogo {
  width: min(460px, calc(100vw - 32px)); padding: 22px;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.caixa-dialogo::backdrop { background: rgba(0, 0, 0, 0.55); }
.caixa-dialogo h2 { margin: 0 0 12px; font-size: var(--escrita-titulo); font-weight: var(--escrita-titulo-peso); }
.caixa-dialogo p { margin: 0 0 10px; font-size: var(--escrita-texto); line-height: 1.45; }
/* Janela "Confirmar lançamento" (visual B3) */
.fin-dialogo { width: min(460px, calc(100vw - 32px)); }
.fin-conf-linhas { display: flex; flex-direction: column; gap: 10px; }
.fin-conf-linha { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: var(--escrita-texto); }
.fin-conf-linha > span:first-child { color: var(--suave); flex: none; }
.fin-conf-linha > span:last-child, .fin-conf-linha > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.fin-conf-valor { font-size: var(--escrita-valor); font-weight: var(--escrita-valor-peso); }
/* Caixa de baixo: só o saldo atualizado (após o lançamento) */
.fin-conf-saldo { margin-top: 12px; }
.fin-conf-saldo strong { font-size: var(--escrita-valor); font-weight: var(--escrita-valor-peso); }
/* Verde/vermelho: no tipo e no valor = entrada/saída; no saldo atualizado = positivo/negativo */
.fin-conf-entrada { color: var(--verde); }
.fin-conf-saida { color: var(--vermelho); }
.etiqueta-status.saida { background: var(--vermelho-fundo); color: var(--vermelho); }
.dialogo-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- Permissões (perfil de cada usuário) ---------- */
/* Item PERMISSÕES aberto no menu: mesmo destaque dos subitens */
.menu-item[aria-current="page"] { background: var(--superficie-2); }
.menu-item[aria-current="page"]::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--verde);
}
/* Botão de enviar/desfazer sem a permissão pix.enviar: invisível, mas a vaga continua (alinhamento) */
.pix-acao.sem-permissao { visibility: hidden; }

/* Lista dos perfis (formato "D", escolhido pelo usuário): uma linha por perfil; clicar abre
   (um por vez) a lista das permissões que ele tem, com ✓ verde. */
.perm-perfis-caixa { margin: var(--espaco-secao) 0 0; }
.perm-perfis { display: flex; flex-direction: column; gap: 6px; padding: 2px 14px 14px; }
.perm-perfil { border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo); }
.perm-perfil.aberto { border-color: var(--verde); }
.perm-perfil-topo {
  font: inherit; color: var(--texto); background: none; border: none; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  width: 100%; padding: 12px 14px; font-size: var(--escrita-texto); border-radius: 10px;
}
.perm-perfil-topo:hover { background: var(--superficie-2); }
.perm-perfil-topo:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.perm-perfil-descricao { color: var(--suave); font-size: var(--escrita-legenda); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perm-perfil-topo .seta { width: 16px; height: 16px; color: var(--suave); transition: transform 0.2s; }
.perm-perfil.aberto .perm-perfil-topo .seta { transform: rotate(180deg); color: var(--verde); }
.perm-perfil-lista {
  margin: 0; padding: 10px 14px 12px; list-style: none; border-top: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: 6px; font-size: var(--escrita-texto); /* uma permissão por linha */
}
.perm-perfil-lista li { display: flex; gap: 8px; align-items: baseline; }
.perm-perfil-lista li::before { content: '✓'; color: var(--verde); font-weight: 800; }
.perm-perfil-lista li.sem-permissao { color: var(--suave); }
.perm-perfil-lista li.sem-permissao::before { content: '–'; color: var(--suave); }

/* Usuários: (etiqueta Ativo/Inativo) | Usuário | Perfil (etiqueta, à esquerda da coluna) | botão Editar */
.perm-linha {
  display: grid; gap: 14px; align-items: center;
  /* Perfil: 107 px = "Operacional" (83 px medidos) + folga; Editar: 83 px = o botão. Com o vão de 14 px entre
     as colunas, sobram 38 px entre a etiqueta e o botão, igual ao espaço entre "Ativo" e a coluna do nome. */
  grid-template-columns: 80px minmax(0, 1fr) 107px 83px; /* situação: 80 px cabem "Pendente" e "Expirado" */
}
/* "+ Novo usuário" acima da lista, à direita */
.perm-topo { display: flex; justify-content: flex-end; margin-bottom: 14px; }
/* Situação do convite: âmbar = pendente (link ainda vale); vermelho = expirado (gerar outro) */
.etiqueta-status.convite { background: var(--ambar-fundo); color: var(--ambar); }
.etiqueta-status.expirado { background: var(--vermelho-fundo); color: var(--vermelho); }
.perm-titulos {
  padding: 0 14px 6px; font-size: var(--escrita-coluna); font-weight: var(--escrita-coluna-peso); color: var(--suave);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.perm-titulos:has(+ .perm-lista > .vazio) { display: none; }
.perm-situacao { display: flex; }
/* Título "Perfil" começa junto com o texto da etiqueta (medido na tela) */
.perm-titulos .col-perfil { padding-left: 8px; }
.perm-lista { gap: 6px; }
.perm-item {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
  padding: 9px 14px; font-size: var(--escrita-texto); min-height: 50px;
}
.perm-item.desligado { opacity: 0.6; }
.perm-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Etiqueta da situação, no mesmo formato da "Enviado" do Histórico */
.etiqueta-status.ativo { background: var(--verde-fundo); color: var(--verde); }
.etiqueta-status.desligado { background: var(--superficie-2); color: var(--suave); }
/* Perfil do usuário: etiqueta verde */
.perm-perfis-usuario { display: flex; gap: 6px; flex-wrap: wrap; }
/* Botão Editar (degradê discreto, com lápis) */
.perm-editar { display: inline-flex; align-items: center; gap: 6px; justify-self: end; font-weight: 600; }
.perm-editar .icone { width: 14px; height: 14px; stroke-width: 2; }

/* ---------- Visual padrão das janelas ("B3", escolhido pelo usuário) ----------
   faixa verde suave no topo com o ícone "₱" do projeto + título e subtítulo; corpo com 30 px de margem;
   blocos de informação em caixas cinza arredondadas; botões dentro do corpo. Janela nova segue este padrão:
   <dialog class="caixa-dialogo dialogo-b3"> <header class="dialogo-faixa">…</header> <div class="dialogo-corpo">… */
.dialogo-b3 { padding: 0; overflow: hidden; }
.dialogo-faixa {
  display: flex; align-items: center; gap: 14px; padding: 22px 30px;
  background: var(--faixa);
  border-bottom: 1px solid var(--borda);
}
/* Bolinha do logo: mesma cor da ponta direita da faixa, logo XBD numa cor só (escolha "2E" do usuário) */
.dialogo-logo { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--faixa-fim); }
.dialogo-logo svg { width: 28px; height: 9px; color: var(--logo-janela); }
.dialogo-faixa h2 { margin: 0 !important; font-size: var(--escrita-titulo); font-weight: var(--escrita-titulo-peso); }
.dialogo-sub { margin: 3px 0 0 !important; font-size: var(--escrita-texto) !important; color: var(--suave); }
.dialogo-corpo { padding: 26px 30px; }
.dialogo-caixa { background: var(--superficie-2); border-radius: 11px; padding: 14px 16px; }
.dialogo-b3 .dialogo-botoes { margin-top: 24px; }
/* Aviso que exige atenção (ex.: desfazer um envio): caixa vermelha, ícone ⚠ à esquerda;
   destaque (negrito vermelho) só na instrução principal */
.dialogo-aviso {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 14px 16px;
  border: 1px solid var(--vermelho); border-radius: 11px; background: var(--vermelho-fundo);
  font-size: var(--escrita-texto); line-height: 1.55;
}
.dialogo-aviso .icone { flex: none; width: 20px; height: 20px; color: var(--vermelho); margin-top: 1px; }
.dialogo-aviso p { margin: 0 !important; font-size: var(--escrita-texto) !important; }
.dialogo-aviso strong { color: var(--vermelho); font-weight: var(--escrita-nome-peso); }

/* Janela "Perfil de <usuário>": cartões dos perfis 2 por linha (rolagem só se um dia houver muitos);
   resumo em lista. */
.perm-dialogo { width: min(540px, calc(100vw - 32px)); }
/* Campos de dados (nome, usuário, e-mail) em duas colunas, acima dos cartões de perfil */
.perm-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.perm-dados-largo { grid-column: span 2; }
.perm-dados-um { grid-template-columns: 1fr; }
/* Login e e-mail da pessoa (só leitura: são escolhidos por ela no primeiro acesso) */
.perm-credenciais { margin: 0 !important; font-size: var(--escrita-legenda) !important; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perm-credenciais strong { color: var(--texto); font-weight: var(--escrita-nome-peso); }
/* Inativos (barra recolhível separada): mesmas linhas da lista principal */
.perm-inativos { padding: 0 6px 6px; }

/* ---------- Meus Dados ---------- */
/* Cartões no visual das janelas (B3): faixa verde com ícone + corpo */
.dados-cartao {
  max-width: 680px; margin-bottom: var(--espaco-secao); overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
}
.dados-cartao .dialogo-faixa { padding: 18px 24px; }
.dados-cartao .dialogo-logo .icone { width: 20px; height: 20px; color: var(--verde); }
/* Tabela: 3 colunas fixas (rótulo | valor | ações) e todas as linhas com a MESMA altura */
.dados-tabela { padding: 6px 24px 0; }
.dados-linha {
  display: grid; grid-template-columns: 170px minmax(0, 1fr) 132px; gap: 14px; align-items: center;
  height: 50px; border-bottom: 1px solid var(--borda);
}
.dados-linha:last-child { border-bottom: none; }
.dados-rotulo { font-size: var(--escrita-legenda); color: var(--suave); }
.dados-valor { font-size: var(--escrita-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
strong.dados-valor { font-weight: var(--escrita-nome-peso); }
/* Escondido: pontos em cinza, com espaçamento (como uma senha) */
.dados-valor.dados-oculto { color: var(--suave); letter-spacing: 0.18em; }
.dados-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
/* Botões menores (28 px), para não aumentarem a altura da linha */
.dados-acoes .botao { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; }
.dados-olho { width: 28px; justify-content: center; padding: 0 !important; }
.dados-olho .icone { width: 15px; height: 15px; }
.dados-nota { margin: 0; padding: 12px 24px 16px; font-size: var(--escrita-legenda); color: var(--suave); border-top: 1px solid var(--borda); }
/* Perfil: só o nome e a descrição */
.dados-perfil { display: flex; flex-direction: column; gap: 4px; padding: 18px 24px 20px; }
.dados-perfil strong { font-size: var(--escrita-nome); font-weight: var(--escrita-nome-peso); }
.dados-perfil span { font-size: var(--escrita-texto); color: var(--suave); }
.perm-erro { margin-top: 10px !important; }
/* Área "Acesso" da janela de edição: texto à esquerda, botões à direita */
.perm-acesso { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.perm-acesso strong { display: block; font-size: var(--escrita-nome); font-weight: var(--escrita-nome-peso); }
.perm-acesso-texto { display: block; font-size: var(--escrita-legenda); color: var(--suave); line-height: 1.5; min-height: 3em; } /* sempre 2 linhas: janela de tamanho fixo */
.perm-acesso-botoes { display: flex; gap: 8px; flex: none; }
/* Janela do link: o endereço inteiro, quebrando onde precisar */
.perm-link {
  display: block; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px;
  background: var(--fundo); color: var(--texto); font-family: Consolas, monospace; font-size: var(--escrita-legenda);
  word-break: break-all; user-select: all;
}
.perm-link-dica { margin: 12px 0 0 !important; font-size: var(--escrita-legenda) !important; color: var(--suave); line-height: 1.5; }
/* Cartões: área de altura máxima; a barra de rolagem só aparece se não couber */
.perm-cartoes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-height: min(290px, 45vh); overflow-y: auto; padding: 3px; margin: -3px;
}
.perm-cartao {
  position: relative; display: block; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 11px; padding: 14px; background: var(--fundo);
}
.perm-cartao:hover { border-color: var(--suave); }
.perm-cartao:has(input:checked) { border-color: var(--verde); background: var(--verde-fundo); box-shadow: 0 0 0 3px var(--verde-fundo); }
.perm-cartao:has(input:focus-visible) { outline: 2px solid var(--verde); outline-offset: 2px; }
.perm-cartao input { position: absolute; opacity: 0; pointer-events: none; }
.perm-cartao .icone { display: block; width: 20px; height: 20px; color: var(--suave); margin-bottom: 10px; }
.perm-cartao:has(input:checked) .icone { color: var(--verde); }
.perm-cartao b { display: block; font-size: var(--escrita-nome); font-weight: var(--escrita-nome-peso); margin-bottom: 4px; }
.perm-cartao small { display: block; font-size: var(--escrita-legenda); color: var(--suave); line-height: 1.45; }
/* ✓ verde no canto do cartão escolhido */
.perm-cartao-marca { position: absolute; top: 12px; right: 12px; width: 19px; height: 19px; border-radius: 50%; background: var(--verde); display: none; place-items: center; }
.perm-cartao-marca::after { content: ''; width: 4px; height: 8px; border: solid var(--verde-texto); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.perm-cartao:has(input:checked) .perm-cartao-marca { display: grid; }
/* "Usuário poderá:" — ícone + lista de pontos verdes */
.perm-poder { display: grid; grid-template-columns: auto 1fr; gap: 14px; margin-top: 20px; }
.perm-poder > .icone { width: 22px; height: 22px; color: var(--verde); margin-top: 1px; }
.perm-poder strong { display: block; font-size: var(--escrita-nome); font-weight: var(--escrita-nome-peso); margin-bottom: 6px; }
/* Altura FIXA de 3 linhas (a janela não muda de tamanho entre os perfis); se um dia passar disso, a lista rola */
.perm-poder ul { margin: 0; padding: 0; list-style: none; font-size: var(--escrita-texto); line-height: 1.75; height: calc(3 * 1.75em); overflow-y: auto; }
.perm-poder li { display: flex; gap: 9px; align-items: baseline; }
.perm-poder li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--verde); flex: none; transform: translateY(-2px); }

/* ---------- Página de login ---------- */
.pagina-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
/* Mesmo visual das janelas (B3): faixa verde com o "₱", corpo com 30 px de margem */
.cartao-login {
  width: 100%; max-width: 400px; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
/* Login: logo completo centralizado na faixa */
.login-faixa { justify-content: center; padding: 24px 30px 20px; }
.login-logo { width: 131px; height: 43px; color: var(--texto); }
/* Subtítulo do formulário (acima de "Usuário") */
.login-sub { margin: 0 0 10px; font-size: var(--escrita-titulo); font-weight: var(--escrita-titulo-peso); line-height: 1.3; color: var(--texto); }
.cartao-login form { display: flex; flex-direction: column; gap: 14px; padding: 28px 30px 30px; }
.cartao-login .campo input { font-size: 14px; padding: 9px 12px; }
.cartao-login .botao.gradiente { font-size: 14px; padding: 10px 12px; }
/* Linha da mensagem de erro: altura fixa, com ou sem texto (espaço igual entre senha e botão) */
.erro-login { margin: 0; font-size: var(--escrita-texto); line-height: 18px; min-height: 18px; color: var(--vermelho); }

/* ---------- Página "Crie sua senha" (link de convite / redefinição): mesmo cartão do login ---------- */
.definir-estado { display: flex; flex-direction: column; gap: 14px; padding: 28px 30px 30px; }
.definir-texto { margin: 0; font-size: var(--escrita-texto); color: var(--suave); line-height: 1.5; }
.definir-texto strong { color: var(--texto); font-weight: var(--escrita-nome-peso); }
.definir-regras { margin: 0; font-size: var(--escrita-legenda); color: var(--suave); line-height: 1.5; }
.definir-voltar { text-decoration: none; text-align: center; }
/* Convite: login e e-mail escolhidos pela pessoa; aviso "disponível / já em uso" enquanto digita */
.definir-credenciais { display: flex; flex-direction: column; gap: 10px; }
.definir-regras.aviso-ok { color: var(--verde); }
.definir-regras.aviso-erro { color: var(--vermelho); }

/* ---------- Avisos (toasts) ---------- */
.avisos {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 10; width: max-content; max-width: calc(100vw - 32px);
}
.aviso {
  display: flex; align-items: center; gap: 14px;
  background: var(--texto); color: var(--fundo); border-radius: 10px;
  padding: 10px 14px; font-size: var(--escrita-texto); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.aviso.erro { background: var(--vermelho); color: #fff; }
.aviso button {
  font: inherit; font-weight: 600; cursor: pointer; background: none; border: none; color: inherit;
  text-decoration: underline; padding: 0;
}

/* ---------- Financeiro: card "Adiantamento de rakeback" (página do agente) ----------
   Recolhível como a barra "Filtros"; tabela compacta de largura fixa para caber num print. */
.rb-caixa { margin-bottom: 12px; }  /* fica entre o saldo e o lançamento (mesmo vão de 12 px) */
.rb-caixa .filtros-titulo #rbSituacao { margin-left: 4px; }
.etiqueta-status.rb-ativo { background: var(--verde-fundo); color: var(--verde); }
.etiqueta-status.tag-rakeback_bloqueado { background: var(--vermelho-fundo); color: var(--vermelho); }  /* tag "RB Bloqueado" (lista e card) */
.etiqueta-status.rb-nao-configurado { background: var(--ambar-fundo); color: var(--ambar); }
.rb-corpo { padding: 2px 14px 14px; }
.rb-aviso-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rb-aviso-linha .dialogo-aviso { flex: 1; margin: 0; }
.rb-texto { margin: 0; font-size: var(--escrita-texto); color: var(--suave); }
.rb-quem { display: block; font-size: var(--escrita-titulo); font-weight: var(--escrita-titulo-peso); color: var(--texto); }  /* nome do agente em destaque */
/* Faixa do topo no visual das janelas (B3), de ponta a ponta do card */
.rb-faixa { margin: 4px -14px 16px; padding: 16px 20px; border-top: 1px solid var(--borda); }
.rb-faixa .rb-botoes { margin-left: auto; }
.rb-botoes { display: flex; gap: 8px; }
.rb-tabela { display: flex; flex-direction: column; gap: 6px; }
.rb-linha {
  display: grid; gap: 14px; align-items: center;
  grid-template-columns: minmax(0, 1fr) 90px 150px 70px 140px;
}
.rb-titulos {
  padding: 0 14px; font-size: var(--escrita-coluna); font-weight: var(--escrita-coluna-peso); color: var(--suave);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.rb-linha .direita { text-align: right; }
.rb-clube {
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 10px;
  padding: 6px 14px; font-size: var(--escrita-texto);
}
.rb-nome { font-weight: var(--escrita-nome-peso); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-grupo, .rb-pct { color: var(--suave); }
.rb-valor { font-weight: 700; white-space: nowrap; }
.rb-campo {
  font: inherit; font-size: var(--escrita-texto); color: var(--texto); text-align: right; width: 100%;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; min-height: 32px;
}
.rb-resumo {
  margin: 26px 0 0 auto; width: 400px; max-width: 100%;  /* vão maior entre a última linha e a soma */
  display: flex; flex-direction: column; gap: 12px;
}
/* Resumo nas caixas das janelas (.fin-conf-linha); valores: cor pelo sinal */
.rb-resumo strong { color: var(--texto); font-weight: 700; }
.rb-resumo strong.negativo { color: var(--vermelho); }
.rb-resumo strong.positivo { color: var(--verde); }
.rb-disponivel .fin-conf-linha > span:first-child { color: var(--texto); font-weight: 600; }
.rb-disponivel strong { font-size: var(--escrita-valor); font-weight: var(--escrita-valor-peso); }
/* Janela "Configurar rakeback" */
.rb-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-opcoes .fin-tag-opcao input { accent-color: var(--verde); }
.rb-config-ativo { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.rb-grupos { display: flex; flex-direction: column; gap: 10px; }
.rb-grupo-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--escrita-texto); }
.rb-grupo-pct { display: flex; align-items: center; gap: 8px; font-size: var(--escrita-legenda); color: var(--suave); }
.rb-grupo-pct input {
  font: inherit; font-size: var(--escrita-texto); color: var(--texto); width: 72px; text-align: right;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 5px 10px;
}
.rb-grupo-pct input:disabled { opacity: 0.45; }
.rb-grupo-pct input[aria-invalid="true"] { border-color: var(--vermelho); }
.rb-dialogo .erro-login { margin-top: 12px; }
/* Linha do Spin Stake (logo abaixo do clube da Suprema): recuada e com o nome em cinza */
/* Spin Stake: linha da largura toda logo abaixo do clube da Suprema; "Spin Stake" na coluna Clube, em cinza */
.rb-spin .rb-nome { font-weight: 400; color: var(--suave); padding-left: 18px; }  /* um "tab" a mais */
.rb-spin .rb-nome::before { content: "•"; margin-right: 8px; }  /* marcador de lista */
/* Janela "Configurar rakeback": % rakeback e % spin lado a lado no cabeçalho do grupo */
.rb-grupo-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* Janela "Configurar rakeback": cada app (grupo) abre e fecha pela seta; dentro, Faixas e Clubes
   também abrem e fecham (mesmo jeito das barras recolhíveis: seta cinza, verde-azulado no mouse) */
.rb-expandir {
  font: inherit; color: var(--texto); background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 8px; transition: color 0.15s;
}
.rb-expandir .seta { width: 16px; height: 16px; flex: none; color: var(--suave); transform: rotate(-90deg); transition: transform 0.2s, color 0.15s; }
.rb-expandir[aria-expanded="true"] .seta { transform: none; }
.rb-expandir:hover, .rb-expandir:hover .seta { color: var(--verde-azulado); }
.rb-expandir:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 6px; }
.rb-app { width: 100%; }
/* Parte geral (% rakeback, % spin e faixas, valem para todos os apps) */
.rb-geral { display: flex; flex-direction: column; gap: 10px; }
.rb-app-titulo { display: flex; align-items: baseline; gap: 8px; }
.rb-app-titulo strong { font-size: var(--escrita-nome); font-weight: var(--escrita-nome-peso); }
.rb-app-resumo { font-size: var(--escrita-legenda); color: var(--suave); }
.rb-app-em-uso .rb-app-resumo { color: var(--verde); }
.rb-app-opcoes { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }
.rb-app-opcoes[hidden] { display: none; }
/* Sub-seções "Faixas progressivas" e "Clubes": título com seta e o contador à direita */
.rb-sub { width: 100%; font-size: var(--escrita-texto); padding: 4px 0; }
.rb-contador { margin-left: auto; font-size: var(--escrita-legenda); color: var(--suave); }
/* Clubes: um embaixo do outro, recuados para alinhar com o texto do título */
.rb-clubes { display: flex; flex-direction: column; gap: 2px; padding-left: 24px; margin-top: 10px; }
.rb-clubes[hidden] { display: none; }
.rb-clube-opcao { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; padding: 2px 8px; border-radius: 6px; font-size: var(--escrita-texto); }
.rb-clube-opcao:hover { background: var(--fundo); }
.rb-clube-nome { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.rb-clube-nome input { accent-color: var(--verde); margin: 0; }
/* "Editar % do Clube" + campo, à direita do clube marcado */
.rb-pct-clube { display: inline-flex; align-items: center; gap: 8px; }
.rb-pct-clube[hidden], .rb-pct-clube-campo[hidden] { display: none; }
.rb-pct-clube-campo {
  font: inherit; font-size: var(--escrita-texto); color: var(--texto); width: 58px; text-align: right;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 4px 8px;
}
.rb-pct-clube-campo[aria-invalid="true"] { border-color: var(--vermelho); }
/* % de spin travada no automático (só leitura) até marcar "Editar % de spin manualmente" */
.rb-grupo-pct input[readonly] { background: transparent; color: var(--suave); cursor: default; }
/* "Editar spin": caixa pequena ao lado da % de spin */
.rb-editar { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: var(--escrita-legenda); color: var(--suave); white-space: nowrap; }
.rb-editar:has(input:checked) { color: var(--texto); }
.rb-editar:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.rb-editar input { accent-color: var(--verde); margin: 0; }
/* Janela alta (vários apps, clubes e faixas): o corpo rola e Cancelar/Salvar ficam sempre à vista */
.rb-dialogo { max-height: calc(100vh - 32px); width: min(470px, calc(100vw - 32px)); } /* 460 + a barra de rolagem */
.rb-dialogo[open] { display: flex; flex-direction: column; }
.rb-dialogo #rbForm { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.rb-dialogo .dialogo-faixa { flex: none; }
.rb-dialogo .dialogo-corpo { overflow-y: auto; min-height: 0; padding-bottom: 0; scrollbar-gutter: stable; } /* lugar da barra sempre reservado: o conteúdo não encolhe quando ela aparece */
/* A área que rola recebe o foco ao abrir a janela: sem o contorno do navegador (os campos têm o próprio) */
.rb-dialogo .dialogo-corpo:focus { outline: none; }
.rb-dialogo .dialogo-botoes {
  position: sticky; bottom: 0; z-index: 1; background: var(--superficie);
  margin: 16px -30px 0; padding: 14px 30px 26px; border-top: 1px solid var(--borda);
}
/* Faixas progressivas (janela "Configurar rakeback"): "A partir de R$ [10.000,00] → [70] %  ×" */
.rb-faixas { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-left: 24px; }
.rb-faixas[hidden] { display: none; }
.rb-faixas-lista { display: flex; flex-direction: column; gap: 6px; }
.rb-faixas-lista:empty { display: none; }
.rb-faixa-linha { display: flex; align-items: center; gap: 6px; font-size: var(--escrita-legenda); color: var(--suave); white-space: nowrap; }
.rb-faixa-linha input {
  font: inherit; font-size: var(--escrita-texto); color: var(--texto); text-align: right;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 5px 10px;
}
.rb-faixa-valor { width: 104px; }
.rb-faixa-pct { width: 58px; }
.rb-faixa-linha input:disabled, .rb-faixas button:disabled { opacity: 0.45; }
.rb-faixa-linha input[aria-invalid="true"] { border-color: var(--vermelho); }
.botao.rb-faixa-remover { padding: 4px 10px; line-height: 1; }
.botao.rb-faixa-adicionar { padding: 5px 12px; }
/* Card de cálculo: % que subiu de faixa (rakeback progressivo) em verde */
.rb-pct.rb-faixa-ativa { color: var(--verde); font-weight: 700; }
/* Card de cálculo: clube com % própria ("Editar % do Clube") em turquesa */
.rb-pct.rb-pct-proprio { color: var(--turquesa); font-weight: 700; }
/* Botão "Preencher lançamento" embaixo da soma, à direita */
.rb-resumo-acao { display: flex; justify-content: flex-end; }
/* Meus Dados → Alterar senha: dica das regras, em cinza */
.dados-nota-senha { margin: 0; font-size: var(--escrita-legenda); color: var(--suave); }
/* Gerenciar usuários → coluna Perfil: uma cor por cargo (perfil novo sem classe = cinza do Básico) */
.perm-perfis-usuario .etiqueta-status { background: var(--superficie-2); color: var(--suave); }
.etiqueta-status.perfil-master { background: color-mix(in srgb, var(--dourado) 16%, transparent); color: var(--dourado); }
.etiqueta-status.perfil-operacional { background: var(--verde-fundo); color: var(--verde); }
.etiqueta-status.perfil-financeiro { background: color-mix(in srgb, var(--turquesa) 16%, transparent); color: var(--turquesa); }
.etiqueta-status.perfil-basico { background: var(--superficie-2); color: var(--suave); }