/* ==========================================================================
   Centurion: a paleta e as fontes da Venatio por cima do tema da casa.
   Softsul Software & Network

   O desenho vem inteiro do tema.css (o do Orbit, sem mudança). Aqui, como
   manda o guia de porte da Softsul, troca-se o acento e os neutros pelas
   cores do site da Venatio (azul petróleo #182633 e cinza azulado #627180),
   e a fonte da interface pela Open Sans. O resto é só o que o Centurion tem e
   o Orbit não tem.
   ========================================================================== */

/* Fontes servidas daqui mesmo: a CSP não carrega nada de fora. Open Sans é a
   do site da Venatio; IBM Plex Mono é a de dado da casa. Licença SIL OFL em
   assets/fontes/. */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(fontes/open-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(fontes/open-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url(fontes/open-sans-latin-wght-italic.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fontes/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fontes/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fontes/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); }

:root{
  /* neutros, puxados para o cinza azulado da Venatio */
  --nuvem:#F2F4F6;
  --branco:#FFFFFF;
  --leve:#EDF0F3;
  --traco:#E2E6E9;
  --traco2:#D1D7DD;
  --tinta:#182633;
  --suave:#5A6673;
  --fraca:#87929D;

  /* acento: o azul petróleo da Venatio, e o cinza azulado como segundo tom */
  --indigo:#182633;
  --indigo-fte:#0D1720;
  --indigo-sup:#E2E6E9;
  --ciano:#627180;
  --acento-borda:#B8C0C8;
  --gradiente:linear-gradient(96deg, #182633 0%, #2B3D4F 58%, #627180 165%);
  --anel:0 0 0 3px rgba(24,38,51,.16);
  --sombra:0 1px 2px rgba(24,38,51,.05);
  --sombra-alta:0 2px 4px rgba(24,38,51,.06), 0 24px 60px -28px rgba(24,38,51,.4);

  --ui:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --dado:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Tema escuro, o padrão do Centurion (pedido do Luiz em 13/10/2026), nas
   cores da Venatio: os neutros saem do azul petróleo do site, e não do preto
   do Orbit. O acento vira o cinza claro do rodapé do site, para ter contraste
   sobre o fundo escuro, e o botão principal mantém o degradê petróleo para
   cinza azulado com texto branco. */
:root[data-tema="escuro"]{
  color-scheme:dark;
  --nuvem:#0E1821;
  --branco:#15212C;
  --leve:#1B2935;
  --traco:#233341;
  --traco2:#2E4152;
  --tinta:#E2E6E9;
  --suave:#A9B3BC;
  --fraca:#7D8A96;

  --indigo:#A9B3BC;
  --indigo-fte:#E2E6E9;
  --indigo-sup:#1F2E3B;
  --ciano:#8796A5;
  --acento-borda:#3A4E60;
  --gradiente:linear-gradient(96deg, #2B3D4F 0%, #3F566C 58%, #627180 165%);

  --sombra:0 1px 2px rgba(0,0,0,.35);
  --sombra-alta:0 2px 4px rgba(0,0,0,.3), 0 24px 60px -28px rgba(0,0,0,.75);
  --anel:0 0 0 3px rgba(169,179,188,.28);
}
/* O que o tema do Orbit pinta com preto fixo no escuro passa para os tons
   da Venatio, senão sobram faixas pretas num fundo azul. */
[data-tema="escuro"] ::selection{background:#3A4E60; color:#fff}
[data-tema="escuro"] table.dados tbody tr:hover,
[data-tema="escuro"] .linha-perm:nth-child(odd),
[data-tema="escuro"] .achado{background:#192734}
[data-tema="escuro"] .metrica.destaque,
[data-tema="escuro"] .cartao > .metricas .metrica.destaque{background:linear-gradient(150deg,#1F2E3B,#15212C); border-color:var(--acento-borda)}
[data-tema="escuro"] .ou-biometria .botao.claro,
[data-tema="escuro"] .ou-certificado .botao.claro{background:#233341; border-color:#233341; color:var(--tinta)}
[data-tema="escuro"] .ou-biometria .botao.claro:hover,
[data-tema="escuro"] .ou-certificado .botao.claro:hover{background:#2E4152; border-color:#2E4152}
[data-tema="escuro"] .acesso-form{background:var(--branco)}

/* Sair é botão (pede confirmação e vai por POST), com o mesmo vermelho do
   link de sair do Orbit. */
.suspenso > button.sair{color:var(--rubi)}
.suspenso > button.sair svg{color:var(--rubi)}
.suspenso > button.sair:hover{background:var(--rubi-sup); color:var(--rubi)}

/* ------------------------------------------------------------- marca
   Os SVGs da marca pintam com currentColor (app/Marca.php). */
.rail .logo-mini{width:auto; color:var(--tinta)}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.logo-erro{height:40px; width:auto; color:var(--tinta)}

/* ---------------------------------------------------- tela de entrada
   O painel da marca no azul petróleo, com o degradê do site da Venatio e o
   capacete grande e esmaecido no canto, como nos outros sistemas da casa.
   O lado do formulário segue o tema (escuro por padrão). */
.acesso-marca{background:linear-gradient(170deg, #627180 0%, #182633 55%, #1F3142 100%); color:#fff}
.acesso-marca .logo{height:auto; width:min(300px, 70%); color:#fff}
.acesso-marca .agua{color:#fff; opacity:.06; width:auto; height:520px; right:-60px; bottom:-110px}
.acesso-marca p{color:rgba(255,255,255,.8)}
.acesso-marca .assinatura{color:rgba(255,255,255,.6)}
@media (max-width:880px){
  .acesso-marca .logo{width:220px}
  .acesso-marca .agua{height:260px; right:-40px; bottom:-70px}
}

/* --- cadastro do autenticador: QR e código --- */
.cadastro-2fa{display:flex; flex-direction:column; gap:12px}
.cadastro-2fa .qr{align-self:center; width:200px; padding:10px; background:#fff; border-radius:var(--r); border:1px solid var(--traco)}
.cadastro-2fa .qr svg{display:block; width:100%; height:auto}
.passos-2fa{margin:0; padding-left:20px; color:var(--suave); font-size:13.5px; display:flex; flex-direction:column; gap:4px}

/* ------------------------------------------------- avatar de iniciais
   No Orbit a cor sai de um style com o matiz do nome; a CSP do Centurion
   não aceita style no elemento, então são doze matizes fixos. Saturação e
   brilho baixos, como lá, para nenhuma combinação berrar. */
.iniciais.matiz-0{background:hsl(0 62% 92%); color:hsl(0 58% 30%); border-color:hsl(0 40% 84%)}
.iniciais.matiz-1{background:hsl(30 62% 92%); color:hsl(30 58% 30%); border-color:hsl(30 40% 84%)}
.iniciais.matiz-2{background:hsl(60 62% 92%); color:hsl(60 58% 26%); border-color:hsl(60 40% 84%)}
.iniciais.matiz-3{background:hsl(90 62% 92%); color:hsl(90 58% 26%); border-color:hsl(90 40% 84%)}
.iniciais.matiz-4{background:hsl(120 62% 92%); color:hsl(120 58% 26%); border-color:hsl(120 40% 84%)}
.iniciais.matiz-5{background:hsl(150 62% 92%); color:hsl(150 58% 26%); border-color:hsl(150 40% 84%)}
.iniciais.matiz-6{background:hsl(180 62% 92%); color:hsl(180 58% 26%); border-color:hsl(180 40% 84%)}
.iniciais.matiz-7{background:hsl(210 62% 92%); color:hsl(210 58% 30%); border-color:hsl(210 40% 84%)}
.iniciais.matiz-8{background:hsl(240 62% 92%); color:hsl(240 58% 34%); border-color:hsl(240 40% 84%)}
.iniciais.matiz-9{background:hsl(270 62% 92%); color:hsl(270 58% 34%); border-color:hsl(270 40% 84%)}
.iniciais.matiz-10{background:hsl(300 62% 92%); color:hsl(300 58% 30%); border-color:hsl(300 40% 84%)}
.iniciais.matiz-11{background:hsl(330 62% 92%); color:hsl(330 58% 30%); border-color:hsl(330 40% 84%)}
[data-tema="escuro"] .iniciais[class*="matiz-"]{filter:brightness(.82) saturate(.9)}

/* O ponto colorido do seletor de box: no Orbit vem da cor da empresa, num
   style; aqui todo box usa o acento. */
.troca-empresa .ponto, .suspenso .ponto{background:var(--ciano)}
.marca-atencao.bom{background:var(--verde-sup); color:var(--verde)}

/* --- página de erro com sessão --- */
.vazio.erro-logado{padding:56px 20px}
.vazio.erro-logado .acoes{justify-content:center; margin-top:18px}
.vazio.erro-logado .ajuda{margin-top:16px}

/* ------------------------------------- aparelhos com digital (Meus dados)
   O nome sugerido pelo navegador erra, então ele é editável ali mesmo, e a
   linha diz se a chave é sincronizada na conta e de onde veio o último uso. */
.renomear-aparelho{display:flex; gap:8px; align-items:center}
.renomear-aparelho .entrada{flex:1; min-width:140px}

/* --- grade de permissões por pessoa --- */
.permissoes select{min-width:120px}
.permissoes select.excecao{border-color:var(--indigo); background:var(--indigo-sup)}

/* --- link de convite para copiar --- */
.copiavel{display:flex; gap:8px; align-items:center}
.copiavel .entrada{flex:1}

/* --- escolha de box (tela própria, para o celular) --- */
.lista-escolha{display:grid; gap:10px; max-width:560px}
.escolha{display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; text-align:left;
  background:var(--branco); border:1px solid var(--traco); border-radius:var(--r); color:var(--tinta); font:inherit; cursor:pointer}
.escolha:hover{border-color:var(--traco2)}
.escolha.atual{border-color:var(--acento-borda); background:var(--indigo-sup)}
.escolha b, .escolha small{display:block}
.escolha small{color:var(--suave)}
.pilulas-filtro.a-direita{margin-left:auto}

/* ------------------------------------------- foto vinda do WhatsApp
   A foto entra no lugar das iniciais, no mesmo círculo. A prévia aparece
   embaixo do telefone, no cadastro, antes de salvar. */
img.avatar.com-foto, img.brasao.com-foto{object-fit:cover; border-radius:50%}
.previa-zap{display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12.5px; color:var(--suave)}
.previa-zap img{width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--traco)}
.previa-zap.carregando{opacity:.6}
.previa-zap.sem-zap .recado-zap{color:var(--ambar)}

/* --------------------------------------------------- ficha em modal
   Grande, porque é um cadastro inteiro, e com o iframe ocupando o corpo. */
dialog.ficha-modal{width:min(980px, calc(100vw - 24px)); max-width:none; height:min(88vh, 900px); padding:0;
  display:flex; flex-direction:column; overflow:hidden}
dialog.ficha-modal:not([open]){display:none}
dialog.ficha-modal iframe{flex:1; width:100%; border:0; background:var(--nuvem)}
body.em-popup .cab-pag{top:0}

/* A busca das listas ocupa toda a largura que sobra na linha, e as pílulas
   de filtro ficam no canto (pedido do Luiz). */
.filtros > .entrada{flex:1 1 auto; max-width:none}

/* ------------------------------------------- combobox de múltipla escolha
   O campo tem o desenho de .entrada e mostra o escolhido em fichas; a lista
   abre por baixo, com o desenho dos menus suspensos. */
.multi-escolha{position:relative}
.multi-alvo{width:100%; min-height:44px; justify-content:space-between; gap:8px; cursor:pointer; text-align:left; font:inherit; color:var(--tinta); padding:6px 12px}
.multi-alvo .chevron{transform:rotate(90deg); color:var(--fraca); flex:none; transition:transform .12s}
.multi-escolha.aberta .multi-alvo .chevron{transform:rotate(-90deg)}
.multi-fichas{display:flex; flex-wrap:wrap; gap:6px; min-width:0}
.multi-vazio{color:var(--fraca)}
.multi-ficha{background:var(--indigo-sup); color:var(--indigo-fte)}
.multi-opcoes{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; max-height:320px; overflow:auto;
  padding:6px; background:var(--branco); border:1px solid var(--traco2); border-radius:var(--r); box-shadow:var(--sombra-alta)}
.multi-opcoes[hidden]{display:none !important}
.multi-opcao{display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:var(--r-p); margin:0}
.multi-opcao:hover{background:var(--leve)}
.multi-opcao span{display:flex; flex-direction:column; gap:1px}
.multi-opcao small{color:var(--fraca); font-size:12px}
.multi-opcao.travada{opacity:.55; cursor:not-allowed}

/* A lista nativa do select segue o tema (o Chrome no Windows usa estas cores). */
select option{background:var(--branco); color:var(--tinta)}

/* Logotipo da barra lateral em duas peças: o capacete no tamanho de sempre
   (30px) e o nome maior, para ler de longe. */
.rail .marca .logo.logo-composta{display:flex; align-items:center; gap:6px; height:auto}
.rail .marca .logo-capacete{height:30px; width:auto; color:var(--tinta)}
.rail .marca .logo-palavra{height:15px; width:auto; color:var(--tinta)}
@media (max-width:820px){
  .rail .marca .logo-capacete{height:26px}
  .rail .marca .logo-palavra{height:13px}
}

/* Prefixo e sufixo dentro do campo (R$, %, meses). */
.entrada .prefixo{padding-left:12px; color:var(--fraca)}
.entrada .sufixo{padding-right:12px; color:var(--fraca)}

/* Edição em linha (programas da modalidade): os campos lado a lado. */
.linha-edicao{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.linha-edicao .entrada{flex:1 1 160px; min-width:140px}
.linha-edicao .entrada.larga{flex:2 1 240px}
.linha-edicao.nova{margin-top:12px; padding-top:12px; border-top:1px solid var(--traco)}
.linha-edicao .botao{width:auto}

/* --------------------------------------------- PAR-Q e termo do aluno
   Uma pergunta por linha, com Sim e Não à direita: no celular a resposta
   desce para baixo da pergunta. "Sim" lido aparece em âmbar. */
.parq{display:flex; flex-direction:column; border:1px solid var(--traco); border-radius:var(--r); overflow:hidden}
.parq-linha{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 14px; font-size:13.5px}
.parq-linha + .parq-linha{border-top:1px solid var(--traco)}
.parq-linha b.sim{color:var(--ambar)}
.parq-resposta{display:flex; gap:14px; flex:none}
.parq-resposta .check{margin:0}
@media (max-width:640px){ .parq-linha{flex-direction:column; align-items:flex-start; gap:6px} }
.termo-texto{max-height:220px; overflow:auto; padding:12px 14px; margin:8px 0 12px; font-size:13px; line-height:1.6;
  color:var(--suave); background:var(--leve); border:1px solid var(--traco); border-radius:var(--r)}
.termo-publico summary{cursor:pointer; color:var(--indigo); font-weight:600; font-size:13.5px}

/* Volta da ficha de contrato para a do aluno, dentro do mesmo modal. */
.voltar-ficha{margin:0 0 10px}
.voltar-ficha a{display:inline-flex; align-items:center; gap:6px; font-size:13px}
.voltar-ficha svg{transform:rotate(180deg)}

/* ------------------------------------------ página pública do box
   A isca contra robô fica fora da vista, mas no formulário. */
.isca{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.tela-acesso.publica .acesso-form{align-items:flex-start; overflow:auto}
.interno.experimental{padding-bottom:24px}
.rotulo-campo{font-size:12.5px; font-weight:600; color:var(--suave)}
.escolhas{display:flex; flex-wrap:wrap; gap:6px}
.escolhas label.pf{display:inline-flex; align-items:center; gap:6px}

/* Link e QR Code da aula experimental, em Configurações. */
.link-publico{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:10px}
.link-publico .copiavel{flex:1 1 320px}
.qr-publico{width:150px; padding:8px; background:#fff; border-radius:var(--r); flex:none}
.qr-publico svg{display:block; width:100%; height:auto}