/* Portal Gonpack APP — visual limpo para trabalho: fundo claro, azul da
   marca (#0F5FBD), cartões brancos e tabelas legíveis. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background: #EEF2F7;
  color: #11181C;
  min-height: 100vh;
}
a { color: #0F5FBD; text-decoration: none; }

/* Barra do topo */
#topbar { background: #0F5FBD; color: #fff; }
/* Dois andares na mesma caixa flex. O que separa é o `flex: 1 1 100%`
   de .ferramentas: ela ocupa a largura toda e por isso cai sempre para
   a fileira de baixo, mesmo em tela larga. Assim o 1º andar fica com
   marca · menu · conta e o 2º com ponto · busca. */
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 10px 20px 11px;
  display: flex; align-items: center; column-gap: 14px; row-gap: 0;
  flex-wrap: wrap;
}
/* Marca: o mesmo logo do site (GONPACK APP) + PORTAL na sequência,
   com o mesmo peso e espaçamento das letras do logo. */
.marca { display: flex; align-items: center; gap: 9px; text-decoration: none; }
/* Ícone e nome separados: assim dá para diminuir só as letras. */
.marca img { height: 44px; display: block; }
.marca-nome {
  font-weight: 800; font-size: 12px; letter-spacing: 0.6px;
  color: #fff; line-height: 1;
}
.marca-nome b { color: #5FA9F2; font-weight: 800; }
.marca-portal { color: #5FA9F2; }
/* O menu fica SEMPRE deitado, um item ao lado do outro. O segredo é o
   flex-basis grande (420px): quando a linha de cima não tem esse espaço,
   o menu inteiro desce para a linha seguinte e lá ocupa a largura toda —
   aí os itens continuam lado a lado, quebrando só quando não couber
   mesmo. Sem isso ele espremia e virava uma coluna. */
#topbar nav {
  display: flex; gap: 2px; flex: 1 1 420px; flex-wrap: wrap; min-width: 0;
}
/* Letra 13px e menos gordura nas pastilhas: é o que faz os CINCO menus
   (…Gestão · Pessoas) caberem no 1º andar sem o último cair de linha
   (pedido dele 25/08). O dropdown continua 14px, só o topo aperta. */
#topbar nav a {
  color: #DCE6F2; padding: 6px 12px; border-radius: 8px; font-size: 14px;
  white-space: nowrap;
}
#topbar nav > a, #topbar nav .grupo-botao { font-size: 13px; padding: 6px 9px; }
#topbar nav a.ativo, #topbar nav a:hover { background: rgba(255,255,255,0.16); color: #fff; }
/* 2º andar, ponta direita: foto e nome · ⚙️ Configurações. Os dois são
   "a minha conta", então andam juntos e com folga menor entre si (8px)
   do que entre eles e a busca (10px) — é essa diferença que faz o olho
   ler um bloco só em vez de duas coisas soltas.
   `margin-left:auto` cola o bloco na direita mesmo se a busca encolher. */
.conta {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex: 0 0 auto;
}
/* Foto + nome viram um botão só, que abre o meu perfil.
   34px de altura é a medida da fileira: ponto, busca, eu e ⚙️ têm todos
   a mesma, então as pastilhas de hover acendem do mesmo tamanho. */
.quem {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  height: 34px; padding: 0 10px 0 2px; border-radius: 999px;
  text-decoration: none; color: #fff;
  transition: background .15s ease;
}
/* O `gap` não é enfeite: virando flex, os espaços do texto ("⚙️ Config…
   ▾") somem e as três partes ficam coladas. O gap devolve o respiro. */
.conta .grupo-botao {
  height: 34px; display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px;
}
.quem:hover { background: rgba(255,255,255,0.16); }
.quem-nome {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  font-size: 13px; line-height: 1.1;
}
.quem-nome b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* O cargo é etiqueta, não frase: caixa alta pequena, sem itálico. */
.quem-cargo {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: #C7DDF7;
  background: rgba(255,255,255,0.18); border-radius: 5px;
  padding: 2px 5px; flex: 0 0 auto;
}
/* 2º andar inteiro: ponto · busca · conta. O traço em cima é o que faz
   os dois andares parecerem dois de propósito, e não uma linha que
   quebrou sem querer. */
.ferramentas {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 100%; min-width: 0;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
/* ⚡ Atalhos do 2º andar: pastilhas iguais às do menu; a busca continua
   esticando e o sino fecha a fileira. No estreito eles somem — o menu
   Atendimento tem as mesmas portas. */
.atalhos { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.atalhos a {
  color: #DCE6F2; padding: 6px 10px; border-radius: 8px; font-size: 13px;
  white-space: nowrap;
}
.atalhos a.ativo, .atalhos a:hover { background: rgba(255,255,255,0.16); color: #fff; }
@media (max-width: 900px) { .atalhos { display: none; } }
/* 🔔 Contador de novidades no atalho (mesma bolinha vermelha do sino). */
.atalho-badge { margin-left: 5px; }
/* 🔕 Listinha do mute: alinhada à ESQUERDA sempre (o dropdown da
   direita herda text-align right e desalinhava tudo — achado dele). */
.atalho-mute-lista {
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
  min-width: 230px; text-align: left; align-items: stretch;
}
.atalho-mute-titulo { font-size: 12px; color: #444; font-weight: 700; }
.atalho-mute-lista label {
  display: flex; flex-direction: row; align-items: center;
  justify-content: flex-start; gap: 8px;
  font-size: 13px; color: #222; cursor: pointer; white-space: nowrap;
}
.atalho-mute-lista label input { margin: 0; flex: none; }
.atalho-mute-nota {
  font-size: 11px; color: #667; line-height: 1.35;
  border-top: 1px solid #E3E8F0; padding-top: 7px; white-space: normal;
}
.btn-link {
  background: none; border: 1px solid rgba(255,255,255,0.5); color: #fff;
  padding: 4px 10px; border-radius: 8px; cursor: pointer; font-size: 12px;
}

main { max-width: 1180px; margin: 0 auto; padding: 24px 20px 80px; }
h1 { font-size: 22px; margin-bottom: 16px; }
h2 { font-size: 16px; margin: 24px 0 10px; }

/* Cartões e grades */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.card {
  background: #fff; border-radius: 12px; padding: 16px;
  box-shadow: 0 1px 3px rgba(16, 30, 54, 0.08);
}
.card .rotulo { font-size: 12px; color: #60646C; text-transform: uppercase; letter-spacing: 0.4px; }
.card .valor { font-size: 22px; font-weight: 700; margin-top: 4px; }
.card .sub { font-size: 12px; color: #60646C; margin-top: 4px; }

.lista { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.item {
  background: #fff; border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(16, 30, 54, 0.08);
  display: flex; flex-direction: column; gap: 8px;
}
.item-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.item-titulo { font-weight: 700; flex: 1; min-width: 200px; }
.mini { font-size: 13px; color: #60646C; }
.mono { font-family: Consolas, monospace; }

/* Número de WhatsApp clicável (abre a conversa no app) */
.zap {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  background: #E7F8EF; border: 1px solid #B2E5C7; color: #1B7A43;
  border-radius: 999px; padding: 2px 10px; font-weight: 600; white-space: nowrap;
}
.zap:hover { background: #D3F2E1; }
/* Número sem código do país: atalho para abrir com o código do outro país */
.zap-duvida {
  background: #FFF3BF; border-color: #F5A623; color: #5C4400; font-weight: 600;
}
.zap-duvida:hover { background: #FFE8A3; }

/* Chips de status */
.chip {
  border-radius: 999px; padding: 3px 10px; font-size: 12px; color: #fff;
  font-weight: 600; white-space: nowrap;
}
.chip-amarelo { background: #F5A623; }
.chip-azul { background: #0F5FBD; }
.chip-verde { background: #2F9E44; }
.chip-vermelho { background: #E03131; }
.chip-cinza { background: #9AA0A6; }
.chip-roxo { background: #7048E8; }
.chip-laranja { background: #F76707; }

/* 📥 Caso que o colega passou e ainda não foi aberto */
.item-novo { border-left: 4px solid #0F5FBD; background: #F4F8FE; }

/* 🪟 Caixas dentro do site (substituem alert/confirm/prompt do navegador) */
.caixa-fundo {
  position: fixed; inset: 0; z-index: 900; background: rgba(17, 24, 28, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: caixa-entra .12s ease-out;
}
@keyframes caixa-entra { from { opacity: 0 } to { opacity: 1 } }
.caixa {
  background: #fff; border-radius: 16px; width: 100%; max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
}
.caixa-topo {
  padding: 16px 20px; font-weight: 700; font-size: 16px;
  border-bottom: 1px solid #E3E9F2;
}
.caixa-corpo { padding: 18px 20px; overflow: auto; }
.caixa-corpo p { margin: 0 0 10px; }
.caixa-corpo input, .caixa-corpo textarea, .caixa-corpo select { width: 100%; }
/* Campo com rótulo em cima, dentro das caixas: rótulo pequeno e escuro,
   campo colado embaixo. Antes cada tela inventava a sua marcação. */
.campo { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: #2B3A4A; }
/* Respostas prontas: botões pequenos, que quebram linha, para não
   empurrarem os botões de decidir para fora da caixa. */
.respostas-prontas { flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.respostas-prontas button { font-size: 12px; padding: 6px 10px; }
.campo > input, .campo > textarea, .campo > select { margin-top: 4px; font-weight: 400; }
.caixa-acoes {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid #E3E9F2; background: #F8FAFC;
}
.caixa-opcoes { display: flex; flex-direction: column; gap: 6px; }
.caixa-opcao {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; background: #fff; cursor: pointer;
  border: 1px solid #E3E9F2; border-radius: 12px; padding: 10px 14px;
  font-size: 14px; color: #11181C; font-weight: 400;
}
.caixa-opcao:hover { border-color: #0F5FBD; background: #EEF3FB; }
.caixa-opcao .mini { color: #6B7785; }

/* 📷 Foto dentro do balão do chat */
.chat-foto {
  display: block; max-width: 240px; max-height: 300px; width: auto;
  border-radius: 10px; margin: 2px 0; cursor: zoom-in; background: #EEF2F7;
}

/* 🔍 Busca global. Mora sozinha no 2º andar e por isso ESTICA até o fim
   da fileira: campo largo é melhor para o que se busca aqui (nome,
   código #0000, chamado, envio, saque) e mata o buraco que sobrava.
   A lupa é imagem de fundo, não texto do placeholder — assim ela fica
   parada na esquerda enquanto o texto digitado corre por cima. */
.busca-topo { display: flex; flex: 1 1 auto; min-width: 140px; position: relative; }
.busca-topo input {
  width: 100%; min-width: 0; height: 34px; padding: 0 40px 0 36px;
  border-radius: 999px; font-size: 13px;
  border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.14);
  color: #fff; transition: background .15s ease, border-color .15s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE6F2' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center; background-size: 15px 15px;
}
.busca-topo input::placeholder { color: #C7DDF7; }
.busca-topo input:focus {
  outline: none; background-color: rgba(255,255,255,0.24); border-color: #fff;
}
.busca-topo input:focus::placeholder { color: #DCE6F2; }
/* O X nativo do type="search" briga com o atalho no mesmo canto. */
.busca-topo input::-webkit-search-cancel-button { display: none; }
/* O "/" deixa de ser enfeite dentro do placeholder e vira tecla. */
.busca-atalho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #DCE6F2; background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22); border-radius: 5px;
  padding: 4px 7px;
}
.busca-topo input:focus ~ .busca-atalho { opacity: 0; }
/* Em tela apertada, o nome escrito da marca sai e o símbolo fica — é
   ele que dá lugar ao menu continuar deitado.
   O número não é chute: medido no navegador, a fileira de cima precisa
   de 906px para caber marca(203) + menu(601) + sino(34) + folgas(68).
   950 dá margem para o texto do menu render um pouco mais largo com
   outra fonte ou zoom. Antes era 1120 — sobra que escondia o nome da
   Gonpack em tela que ainda tinha espaço de sobra. */
@media (max-width: 950px) { .marca-nome { display: none; } }
/* Depois da marca, quem sai é o meu nome: a foto já me identifica. */
@media (max-width: 1000px) {
  .quem-nome { display: none; }
  .quem { padding: 2px; }
}
/* No celular sobra só a engrenagem, sem a palavra "Configurações" —
   medido: com ela, o bloco da direita passava 12px da margem aos 430px. */
@media (max-width: 640px) {
  .so-largo { display: none; }
  .busca-topo { min-width: 110px; }
  .ferramentas { gap: 8px; }
}

/* Menu por seções (topbar) */
#topbar .grupo { position: relative; display: inline-block; }
.grupo-botao {
  background: none; border: 0; color: #DCE6F2; padding: 6px 12px;
  border-radius: 8px; font-size: 14px; cursor: pointer; font-weight: 400;
}
.grupo-botao:hover, .grupo-botao.ativo { background: rgba(255,255,255,0.16); color: #fff; }
.grupo-lista {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  background: #fff; border-radius: 10px; padding: 6px; min-width: 215px;
  box-shadow: 0 8px 26px rgba(16, 30, 54, 0.22); z-index: 60;
  flex-direction: column;
}
.grupo.aberto .grupo-lista { display: flex; }
#topbar .grupo-lista a { color: #11181C; padding: 9px 12px; border-radius: 8px; font-size: 14px; }
#topbar .grupo-lista a:hover { background: #EEF2F7; color: #0F5FBD; }
#topbar .grupo-lista a.ativo { background: #EEF2F7; color: #0F5FBD; font-weight: 700; }
/* 🚪 Sair mora dentro de Configurações: fora dele roubava espaço do menu. */
.grupo-sair {
  background: none; border: 0; border-top: 1px solid #E3E9F2; margin-top: 4px;
  padding: 9px 12px; border-radius: 8px; font-size: 14px; color: #E03131;
  text-align: left; cursor: pointer; font-weight: 600;
}
.grupo-sair:hover { background: #FDECEC; }
.grupo-direita .grupo-lista { left: auto; right: 0; }

/* Perfil em seções que abrem e fecham.
   O cartão vale para `details.secao` E para `section.secao`: a de
   pagar freelancer não abre e fecha, mas é a MESMA caixa branca. Sem
   isso ela nascia transparente — caixa da cor do fundo, justo o que o
   dono já mandou não fazer mais. As regras de summary abaixo continuam
   presas ao details, que é quem tem summary. */
.secao {
  background: #fff; border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(16, 30, 54, 0.08); margin-bottom: 12px;
}
details.secao > summary {
  cursor: pointer; font-weight: 700; font-size: 15px; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
details.secao > summary::after { content: '▾'; margin-left: auto; color: #60646C; }
details.secao[open] > summary::after { content: '▴'; }
details.secao > summary::-webkit-details-marker { display: none; }
details.secao > .secao-corpo { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.foto-perfil {
  width: 64px; height: 64px; border-radius: 50%; background: #0F5FBD;
  color: #fff; font-size: 26px; font-weight: 800; display: inline-flex;
  align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto;
}
.foto-perfil img { width: 100%; height: 100%; object-fit: cover; }
.estrelas { display: flex; gap: 6px; font-size: 26px; cursor: pointer; user-select: none; }
.estrelas span { filter: grayscale(1); transition: filter 0.1s; }
.estrelas span.acesa { filter: none; }

/* Botões e formulários */
button, .btn {
  border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #fff; background: #0F5FBD;
}
button:disabled { opacity: 0.5; cursor: default; }
a.btn { text-decoration: none; display: inline-block; }
.btn-verde { background: #2F9E44; }
.btn-laranja { background: #F5A623; }
.btn-vermelho { background: #E03131; }
.btn-roxo { background: #7048E8; }
.btn-cinza { background: #9AA0A6; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

input, select, textarea {
  border: 1px solid #D5D8DD; border-radius: 8px; padding: 9px 12px;
  font-size: 14px; font-family: inherit; background: #fff; width: 100%;
}
textarea { min-height: 80px; resize: vertical; }
.linha-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.linha-form > * { flex: 1; min-width: 160px; }
.linha-form > button { flex: 0; min-width: 120px; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
label.check input { width: auto; }

/* Tabelas (financeiro) */
.tabela-wrap { overflow-x: auto; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(16,30,54,0.08); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #EEF0F3; white-space: nowrap; }
th { background: #F7F9FC; color: #60646C; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
td.direita, th.direita { text-align: right; }
.positivo { color: #2F9E44; font-weight: 700; }
.negativo { color: #E03131; font-weight: 700; }

/* Fotos do redirecionamento */
.fotos { display: flex; gap: 10px; flex-wrap: wrap; }
.fotos img { width: 130px; height: 130px; object-fit: cover; border-radius: 10px; }

/* Login */
.login-fundo {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #0F5FBD 0%, #0A3D7A 100%); padding: 20px;
}
.login-caixa {
  background: #fff; border-radius: 16px; padding: 32px; width: 100%;
  max-width: 380px; display: flex; flex-direction: column; gap: 14px;
}
.login-caixa h1 { text-align: center; margin-bottom: 4px; }
.login-caixa .sub { text-align: center; color: #60646C; font-size: 13px; margin-bottom: 8px; }
.login-logo { display: block; height: 34px; margin: 4px auto 0; }
.link-senha {
  background: none; border: none; color: #0F5FBD; font-size: 13px;
  cursor: pointer; align-self: center; padding: 0; text-decoration: underline;
}
.manter { color: #3B4045; font-size: 13px; }
.ou-divisor {
  display: flex; align-items: center; gap: 10px; color: #9AA0A6;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}
.ou-divisor::before, .ou-divisor::after { content: ''; flex: 1; height: 1px; background: #E3E5E9; }
.btn-social {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: #11181C; border: 1px solid #D5D8DD;
  font-weight: 600;
}
.btn-apple { background: #000; color: #fff; border-color: #000; }

/* Chat com usuários 💬 */
.chat-grade {
  display: grid; grid-template-columns: 280px 1fr; gap: 14px; margin-top: 14px;
  min-height: 480px;
}
@media (max-width: 720px) { .chat-grade { grid-template-columns: 1fr; } }
.chat-conversas {
  background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(16,30,54,0.08);
  overflow-y: auto; max-height: 620px; display: flex; flex-direction: column;
}
.chat-pessoa {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid #EEF0F3; border-radius: 0;
  color: #11181C; font-weight: 400; text-align: left; cursor: pointer;
}
.chat-pessoa.ativo, .chat-pessoa:hover { background: #EDF3FA; }
.chat-bolinha {
  width: 34px; height: 34px; border-radius: 50%; background: #0F5FBD; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.chat-nome { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-janela {
  background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(16,30,54,0.08);
  display: flex; flex-direction: column; max-height: 620px;
}
.chat-cabeca { padding: 12px 16px; border-bottom: 1px solid #EEF0F3; font-weight: 700; }
.chat-mensagens {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column;
  gap: 8px; background: #F7F9FC;
}
.chat-balao {
  max-width: 72%; padding: 9px 12px; border-radius: 14px; font-size: 14px;
  line-height: 1.45; word-break: break-word;
}
.chat-balao.meu { align-self: flex-end; background: #0F5FBD; color: #fff; border-bottom-right-radius: 4px; }
.chat-balao.dele { align-self: flex-start; background: #fff; border: 1px solid #E3E5E9; border-bottom-left-radius: 4px; }
.chat-hora { display: block; font-size: 11px; opacity: 0.7; margin-top: 3px; }
.chat-envio { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #EEF0F3; }
.chat-envio input { flex: 1; }
.chat-envio button { flex-shrink: 0; }

/* Avisos */
.nota {
  background: #FFF8E6; border: 1px solid #F5A623; border-radius: 10px;
  padding: 12px 14px; font-size: 13px; color: #5C4400;
}
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #11181C; color: #fff; padding: 12px 20px; border-radius: 10px;
  font-size: 14px; z-index: 50; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.toast-erro { background: #E03131; }
.vazio { color: #60646C; text-align: center; padding: 30px 0; }

/* bandeirinha trocada pelo flags.js (emoji -> imagem, Windows não desenha) */
.flag-img{display:inline-block;width:18px;height:13.5px;border-radius:2px;object-fit:cover;vertical-align:-1.5px;margin:0 1px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* 📋 Ficha do funcionário: grupos com rótulo e valor, mais botão de copiar */
.ficha-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; }
.ficha-grupo {
  background: #fff; border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(16, 30, 54, 0.08);
}
.ficha-grupo h3 {
  margin: 0 0 10px; font-size: 13px; color: #0F5FBD;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.ficha-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid #F0F3F8;
}
.ficha-linha:first-of-type { border-top: 0; }
.ficha-rotulo { font-size: 13px; color: #60646C; min-width: 104px; }
.ficha-valor { font-weight: 600; flex: 1; word-break: break-word; }
.btn-copiar {
  background: #EEF3FB; color: #0F5FBD; border-radius: 7px;
  padding: 5px 9px; font-size: 12px; font-weight: 600; cursor: pointer; border: 0;
}
.btn-copiar:hover { background: #DDE8F8; }
.ficha-vazia { color: #60646C; font-size: 14px; }

/* 🏦 Seletor de bancos com logo (o <select> não aceita imagem) */
.banco-botao {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #fff; color: #11181C; border: 1px solid #D5DCE6;
  border-radius: 8px; padding: 8px 12px; font-size: 14px; font-weight: 500;
  text-align: left; cursor: pointer;
}
.banco-painel {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid #D5DCE6; border-radius: 10px;
  box-shadow: 0 8px 22px rgba(16, 30, 54, 0.16); padding: 8px;
}
.banco-busca {
  width: 100%; border: 1px solid #D5DCE6; border-radius: 8px;
  padding: 8px 10px; font-size: 14px; margin-bottom: 6px;
}
.banco-lista { max-height: 260px; overflow-y: auto; }
.banco-grupo {
  font-size: 11px; color: #60646C; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 8px 8px 4px;
}
.banco-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; color: #11181C; border: 0; border-radius: 8px;
  padding: 7px 8px; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.banco-item:hover { background: #EEF3FB; }

/* ☎️ Telefone com país: bandeira + código na frente, número do lado.
   O tamanho do número muda conforme o país escolhido. */
.tel-campo { position: relative; display: block; }
.tel-caixa {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid #D5D8DD; border-radius: 8px; background: #fff; overflow: hidden;
}
.tel-pais {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: #F7F9FC; color: #11181C; border: 0; border-right: 1px solid #D5D8DD;
  padding: 9px 10px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tel-pais:hover { background: #EEF3FB; }
.tel-numero { border: 0; border-radius: 0; flex: 1; min-width: 0; }
.tel-numero:focus { outline: 2px solid #C9DCF7; outline-offset: -2px; }
.tel-dica { display: block; margin-top: 4px; }
.tel-dica.tel-ok { color: #1B7A43; }

/* 🌍 Lista de países (telefone) — mesma cara do seletor de bancos. */
.pais-painel {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; min-width: 260px;
  background: #fff; border: 1px solid #D5DCE6; border-radius: 10px;
  box-shadow: 0 8px 22px rgba(16, 30, 54, 0.16); padding: 8px;
}
.pais-busca {
  width: 100%; border: 1px solid #D5DCE6; border-radius: 8px;
  padding: 8px 10px; font-size: 14px; margin-bottom: 6px;
}
.pais-lista { max-height: 260px; overflow-y: auto; }
.pais-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; color: #11181C; border: 0; border-radius: 8px;
  padding: 7px 8px; font-size: 14px; text-align: left; cursor: pointer;
}
.pais-item:hover { background: #EEF3FB; }
.pais-item.atual { background: #E7F0FC; }
.pais-ddi { color: #0F5FBD; font-weight: 700; min-width: 46px; }

/* 💱 Seletor de moeda com bandeira (Painel) */
.moeda-botao {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #fff; color: #11181C; border: 1px solid #D5D8DD;
  border-radius: 8px; padding: 8px 12px; font-size: 14px;
  text-align: left; cursor: pointer;
}
.moeda-botao:hover { background: #F7F9FC; }

/* 💡 Sugestões que aparecem embaixo do campo enquanto a pessoa digita. */
.sugestoes {
  position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; right: 0; min-width: 220px;
  background: #fff; border: 1px solid #D5DCE6; border-radius: 10px;
  box-shadow: 0 8px 22px rgba(16, 30, 54, 0.16); padding: 5px;
  max-height: 240px; overflow-y: auto;
}
.sugestao-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; color: #11181C; border: 0; border-radius: 7px;
  padding: 7px 8px; font-size: 14px; text-align: left; cursor: pointer;
}
.sugestao-item:hover, .sugestao-item.marcado { background: #EEF3FB; }

/* 👥 Faixa de pessoas do Perfil: arrasta para o lado, foto + nome +
   bolinha de situação. Online aparece primeiro. */
.pessoas-faixa {
  display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 12px;
  scrollbar-width: thin;
}
.pessoa-card {
  flex: 0 0 auto; width: 84px; background: transparent; border: 0; padding: 4px 0;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: #11181C; font-weight: 500;
}
.pessoa-retrato { position: relative; display: inline-block; }
.pessoa-foto {
  width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid transparent; background: #EEF2F7;
}
.pessoa-inicial {
  display: flex; align-items: center; justify-content: center;
  background: #0F5FBD; color: #fff; font-size: 22px; font-weight: 700;
}
.pessoa-card.ativo .pessoa-foto { border-color: #0F5FBD; }
.pessoa-card:hover .pessoa-foto { border-color: #9DC2EC; }
.pessoa-bolinha {
  position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px;
  border-radius: 50%; border: 2.5px solid #F3F5F9;
}
.pessoa-nome {
  font-size: 13px; line-height: 1.25; text-align: center; word-break: break-word;
}
.pessoa-card.ativo .pessoa-nome { font-weight: 700; color: #0F5FBD; }

/* 📈 Caixa do gráfico de câmbio no Painel */
.grafico-caixa {
  background: #fff; border-radius: 12px; padding: 14px;
  box-shadow: 0 1px 3px rgba(16, 30, 54, 0.08); margin-top: 14px;
}
.grafico-caixa svg { display: block; }

/* 💬 Janelinha de bate-papo da equipe (canto inferior direito) */
#papo-flutuante { position: fixed; right: 20px; bottom: 20px; z-index: 80; }
#papo-botao {
  width: 54px; height: 54px; border-radius: 50%; font-size: 22px;
  box-shadow: 0 6px 18px rgba(16, 30, 54, 0.28); position: relative;
  /* O avião da Gonpack no lugar do balão (pedido de 20/08): a imagem
     preenche o círculo inteiro; o contador continua por cima. */
  padding: 0;
}
#papo-botao .papo-logo {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.papo-badge {
  position: absolute; top: -3px; right: -3px; background: #E03131; color: #fff;
  border-radius: 999px; font-size: 11px; padding: 2px 6px; font-weight: 700;
}
/* 🔔 "Novos" das caixas do Painel: pílula vermelha INLINE, ao lado do
   rótulo da caixa (não é de canto como a papo-badge). */
.painel-novos {
  display: inline-block; background: #E03131; color: #fff;
  border-radius: 999px; font-size: 11px; padding: 1px 7px; font-weight: 700;
  margin-left: 6px; vertical-align: middle;
}
#papo-janela {
  position: absolute; right: 0; bottom: 66px; width: 320px; height: 420px;
  background: #fff; border-radius: 14px; overflow: hidden; flex-direction: column;
  box-shadow: 0 12px 34px rgba(16, 30, 54, 0.3);
}
.papo-topo {
  background: #0F5FBD; color: #fff; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
}
.papo-topo b { flex: 1; }
.papo-corpo {
  flex: 1; overflow-y: auto; padding: 12px; display: flex;
  flex-direction: column; gap: 8px; background: #F7F9FC;
}
.papo-msg { display: flex; flex-direction: column; align-items: flex-start; }
.papo-msg.minha { align-items: flex-end; }
.papo-quem { font-size: 11px; color: #60646C; margin-bottom: 2px; }
.papo-bolha {
  background: #fff; border-radius: 12px; padding: 8px 11px; font-size: 14px;
  max-width: 82%; word-break: break-word; box-shadow: 0 1px 2px rgba(16,30,54,.1);
}
.papo-msg.minha .papo-bolha { background: #0F5FBD; color: #fff; }
.papo-rodape { display: flex; gap: 6px; padding: 10px; border-top: 1px solid #EEF0F3; }
.papo-rodape input { flex: 1; }
.papo-rodape button { flex: 0 0 auto; }

/* Foto do funcionário na barra do topo e no bate-papo */
.quem-foto {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.22); color: #fff; font-weight: 700; font-size: 12px;
  flex: 0 0 auto;
}
/* Na barra do topo ela é maior, para o bloco da conta ter o mesmo peso
   visual do ponto e da busca, todos na mesma fileira. */
.conta .quem-foto { width: 30px; height: 30px; font-size: 13px; }
.papo-quem { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #60646C; margin-bottom: 3px; }
.papo-msg.minha .papo-quem { justify-content: flex-end; }
.papo-foto {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0F5FBD; color: #fff; font-weight: 700; font-size: 10px;
}
/* Botão do topo: foto + nome de quem está na conversa aberta */
.papo-alvo {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.15); color: #fff; border: 0; border-radius: 8px;
  padding: 5px 8px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
}
.papo-alvo:hover { background: rgba(255,255,255,0.26); }
.papo-alvo b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.papo-seta { opacity: .8; }
.papo-foto-equipe { background: #fff; color: #0F5FBD; font-size: 11px; }

/* Lista de conversas: número vermelho na FRENTE do nome */
.papo-abas {
  position: absolute; top: 46px; left: 8px; right: 8px; z-index: 5;
  background: #fff; border-radius: 10px; padding: 5px; max-height: 240px; overflow-y: auto;
  box-shadow: 0 10px 26px rgba(16, 30, 54, 0.28);
}
.papo-aba {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; color: #11181C; border: 0; border-radius: 8px;
  padding: 7px 8px; font-size: 14px; text-align: left; cursor: pointer;
}
.papo-aba:hover { background: #EEF3FB; }
.papo-aba.atual { background: #E7F0FC; }
.papo-aba b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.papo-conta {
  background: #E03131; color: #fff; border-radius: 999px; font-size: 11px;
  font-weight: 700; padding: 1px 6px; min-width: 18px; text-align: center; flex: 0 0 auto;
}
.papo-conta-vazia { width: 18px; flex: 0 0 auto; }

/* ↩ Responder: aparece ao passar o mouse na mensagem */
.papo-responder {
  background: transparent; border: 0; color: #60646C; cursor: pointer;
  font-size: 13px; padding: 0 3px; opacity: 0; transition: opacity .12s;
}
.papo-msg:hover .papo-responder { opacity: 1; }
.papo-responder:hover { color: #0F5FBD; }

/* A mensagem citada — em cima, dentro da bolha da resposta */
.papo-citacao {
  display: block; border-left: 3px solid #0F5FBD; background: rgba(15, 95, 189, 0.07);
  border-radius: 6px; padding: 4px 7px; margin-bottom: 5px; font-size: 12px; line-height: 1.35;
}
.papo-citacao b { display: block; color: #0F5FBD; }
.papo-citacao span { display: block; color: #60646C; word-break: break-word; }
.papo-msg.minha .papo-citacao {
  border-left-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.18);
}
.papo-msg.minha .papo-citacao b { color: #fff; }
.papo-msg.minha .papo-citacao span { color: rgba(255,255,255,0.85); }

/* Barra acima do campo, mostrando o que está sendo respondido */
.papo-citando {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px 0; background: #fff;
}
.papo-citando .papo-citacao { flex: 1; min-width: 0; margin: 0; }
.papo-citacao-barra span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ✕ desistir de responder. Classe própria: o .btn-link é branco (nasceu
   para a barra azul do topo) e sumia dentro desta barra branca. */
.papo-cancelar {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  background: #EEF0F3; color: #60646C; border: 0; cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.papo-cancelar:hover { background: #FDE7E7; color: #E03131; }

/* 🧮 Calculadora de câmbio (Painel e Financeiro) */
.calc-caixa {
  background: #fff; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(16, 30, 54, 0.08); max-width: 520px;
}
.calc-linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 5px 0; font-size: 14px;
}
.calc-linha b { white-space: nowrap; }
.calc-forte { font-size: 16px; font-weight: 600; }
.calc-divisor { border-top: 1px solid #EEF0F3; margin: 6px 0; }

/* 📈 Moedas escolhidas no gráfico do câmbio */
.grafico-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.grafico-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #D5DCE6; border-radius: 999px; padding: 3px 9px;
  font-size: 13px; font-weight: 600; background: #fff; white-space: nowrap;
}
.grafico-chip-x {
  background: transparent; border: 0; color: #60646C; cursor: pointer;
  font-size: 11px; padding: 0 0 0 2px; line-height: 1;
}
.grafico-chip-x:hover { color: #E03131; }

/* 🔔 Sino de avisos na barra do topo */
/* O sino mora na ponta direita da fileira de CIMA — canto de aviso é
   ali que todo mundo procura, e é ele que fecha a fileira, que antes
   terminava no vazio depois do último item do menu. */
.sino-caixa { position: relative; display: inline-flex; margin-left: auto; flex: 0 0 auto; }
#sino {
  background: rgba(255,255,255,0.16); border: 0; color: #fff; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  padding: 0;
}
#sino:hover { background: rgba(255,255,255,0.3); }
#sino.sino-tocando { animation: sino-balanca 1.4s ease-in-out 2; }
@keyframes sino-balanca {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(12deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(6deg); }
  80% { transform: rotate(-4deg); }
}
.sino-painel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: 340px; max-width: 90vw; background: #fff; color: #11181C;
  border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 30, 54, 0.28);
  overflow: hidden;
}
.sino-topo {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid #EEF0F3; font-size: 14px;
}
.sino-topo b { flex: 1; }
.sino-mini {
  background: #EEF2F7; color: #60646C; border: 0; border-radius: 7px;
  padding: 4px 8px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.sino-mini:hover { background: #DDE6F2; color: #0F5FBD; }
.sino-lista { max-height: 340px; overflow-y: auto; }
.sino-item {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px;
  border-bottom: 1px solid #F3F5F9; color: #11181C; text-decoration: none;
}
.sino-item:hover { background: #EEF3FB; }
.sino-item.novo { background: #F0F7FF; }
.sino-item.novo:hover { background: #E3EFFC; }
.sino-emoji { font-size: 17px; flex: 0 0 auto; }
.sino-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sino-texto b { font-size: 14px; }
.sino-texto .mini { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sino-hora { flex: 0 0 auto; }
.sino-vazio { padding: 22px 12px; text-align: center; color: #60646C; font-size: 14px; }

/* 🕐 Ponto na barra do topo — a luz do expediente.
   A regra da cor é uma só e vale para tudo:
     🔴 vermelho = fora do expediente (não bateu o ponto)
     🟢 verde    = trabalhando e RECEBENDO atendimento
     🟡 amarelo  = não recebe atendimento (em pausa, ou pausa já pedida)
   Fica à ESQUERDA da busca de propósito: é a primeira coisa do dia. */
.ponto-caixa { position: relative; display: inline-flex; }
/* 🟢 Só a BOLINHA (pedido dele 26/08): círculo colorido pelo estado,
   com o emoji pequeno dentro; o texto não aparece mais em tela nenhuma. */
#ponto-botao {
  border: 0; color: #fff; cursor: pointer; width: 32px; height: 32px;
  border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; padding: 0; font-size: 13px; font-weight: 700;
  white-space: nowrap; background: #9AA0A6; transition: filter .15s;
}
#ponto-botao:hover { filter: brightness(1.12); }
#ponto-botao .ponto-emoji { font-size: 14px; line-height: 1; }
#ponto-botao .ponto-texto { display: none; }
#ponto-botao.fora { background: #E03131; }
#ponto-botao.trabalhando { background: #2F9E44; }
#ponto-botao.ausente { background: #F5A623; color: #3A2A00; }
/* Pausa pedida: ainda está atendendo, mas já saiu da fila. Pisca para
   ela não esquecer que a pausa entra sozinha quando o chat fechar. */
#ponto-botao.pedida { animation: ponto-pisca 1.8s ease-in-out infinite; }
@keyframes ponto-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (max-width: 900px) { #ponto-botao .ponto-texto { display: none; } }

.ponto-painel {
  /* No fim da fileira o painel abre alinhado pela DIREITA. */
  position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 70;
  width: 300px; max-width: 92vw; background: #fff; color: #11181C;
  border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 30, 54, 0.28);
  overflow: hidden;
}
.ponto-topo { padding: 12px 14px; border-bottom: 1px solid #EEF0F3; }
.ponto-estado { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.ponto-topo .mini { margin-top: 3px; }
.ponto-acoes { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.ponto-acoes button {
  width: 100%; text-align: left; font-size: 13px; padding: 9px 12px; border-radius: 9px;
}
.ponto-nota {
  margin: 0 10px 10px; padding: 10px 12px; border-radius: 9px;
  background: #FFF7E6; border: 1px solid #F5D9A0; color: #7A4E00; font-size: 12.5px;
  line-height: 1.5;
}
.ponto-rodape {
  padding: 9px 14px; border-top: 1px solid #EEF0F3; background: #F8FAFC;
  font-size: 12.5px;
}
.ponto-rodape a { color: #0F5FBD; text-decoration: none; font-weight: 600; }
.ponto-rodape a:hover { text-decoration: underline; }

/* 🎯 Faixa das metas de hoje no Painel.
   É a primeira coisa depois de bater o ponto, então grita um pouco —
   mas fica verde e discreta quando tudo já está feito. */
.metas-hoje {
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(100deg, #0F5FBD, #1E7BE0);
  color: #fff; text-decoration: none;
  padding: 15px 18px; border-radius: 12px; margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(15, 95, 189, 0.28);
}
.metas-hoje:hover { filter: brightness(1.08); }
.metas-hoje b { font-size: 16px; }
.metas-hoje span { font-size: 13px; opacity: 0.9; }
.metas-hoje-ok {
  background: linear-gradient(100deg, #2F9E44, #3FB255);
  box-shadow: 0 6px 18px rgba(47, 158, 68, 0.24);
}

/* 🗂️ Abas de página (ficha do funcionário).
   A ficha tinha nove blocos empilhados numa rolagem só — ponto, salário,
   bônus, documentos, carteira. Quem abria para uma coisa passava por
   todas as outras. Cada aba agora responde a UMA pergunta. */
.abas {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 18px 0 20px;
  border-bottom: 2px solid #E3E8F0; padding-bottom: 0;
}
.abas button {
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  color: #60646C; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 10px 16px; border-radius: 8px 8px 0 0; margin-bottom: -2px;
  white-space: nowrap;
}
.abas button:hover { background: #EEF3FB; color: #0F5FBD; }
.abas button.ativa { color: #0F5FBD; border-bottom-color: #0F5FBD; background: #F4F8FE; }
.aba-conteudo[hidden] { display: none; }
@media (max-width: 700px) {
  .abas { gap: 2px; }
  .abas button { padding: 9px 11px; font-size: 13px; }
}

/* 🪪 Verificação de perfil — a fila de análise.
   Uma pessoa por vez, foto grande: quem revisa precisa comparar quatro
   imagens de relance, não caçar detalhe em miniatura. */
.verif-palco {
  background: #fff; border: 1px solid #E3E8F0; border-radius: 14px;
  padding: 18px; box-shadow: 0 6px 20px rgba(16, 30, 54, 0.08);
}
.verif-contador {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 14px;
}
.verif-contador b { font-size: 17px; }
.verif-fotos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-top: 14px;
}
.verif-foto { margin: 0; }
.verif-foto img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 11px;
  background: #EEF2F7; border: 1px solid #E3E8F0; display: block; cursor: zoom-in;
}
.verif-foto figcaption {
  font-size: 12px; color: #60646C; text-align: center; margin-top: 6px; font-weight: 600;
}
.verif-sem, .verif-pdf {
  width: 100%; aspect-ratio: 3 / 4; border-radius: 11px; border: 1px solid #E3E8F0;
  background: #F3F5F9; color: #60646C; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; font-size: 13px;
  text-decoration: none;
}
.verif-pdf { background: #EEF3FB; color: #0F5FBD; font-size: 38px; cursor: pointer; }
.verif-pdf span { font-size: 14px; font-weight: 700; }
.verif-pdf:hover { background: #E3EFFC; }
/* Os botões da decisão são grandes de propósito: são o gesto que a
   pessoa repete dezenas de vezes seguidas. */
.verif-decisao { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.verif-decisao button { flex: 1; min-width: 150px; font-size: 15px; padding: 14px 18px; }
.verif-atalhos { font-size: 12px; color: #60646C; margin-top: 10px; text-align: center; }
.verif-atalhos kbd {
  background: #EEF2F7; border: 1px solid #D6DEE9; border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; font-family: Consolas, monospace; font-size: 11px;
}
.verif-antes {
  margin-top: 12px; padding: 10px 12px; border-radius: 9px;
  background: #FFF7E6; border: 1px solid #F5D9A0; color: #7A4E00; font-size: 13px;
}

/* ⭐ Estrela de favoritar na lista de moedas */
.moeda-item { display: flex; align-items: center; gap: 4px; padding: 0; }
.moeda-escolher {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  background: transparent; border: 0; color: inherit; cursor: pointer;
  padding: 7px 8px; font-size: 14px; text-align: left; border-radius: 8px;
}
.moeda-estrela {
  background: transparent; border: 0; cursor: pointer; color: #C6CDD6;
  font-size: 15px; padding: 4px 8px; line-height: 1; flex: 0 0 auto;
}
.moeda-estrela:hover { color: #F5A623; }
.moeda-estrela.acesa { color: #F5A623; }

/* Legenda do gráfico: bandeira + valor de cada moeda */
.grafico-legenda {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 16px; white-space: nowrap; font-size: 13px;
}

/* 👥 Foto na lista da equipe (20/08): redonda, à esquerda do nome —
   sem foto, entra o medalhão azul com a inicial. */
.equipe-foto {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  flex: 0 0 36px;
}
.equipe-foto-vazia {
  display: inline-flex; align-items: center; justify-content: center;
  background: #0F5FBD; color: #ffffff; font-weight: 700; font-size: 15px;
}