/* ==========================================================================
   Base visual SoftSul.
   SoftSul Software & Network

   Recorte do tema do ERP com o que serve a qualquer produto da casa: fichas,
   tabelas, formulários, modais, avisos, barra lateral e barra do topo. O que
   ficou de fora é o que só existe no ERP (funil de vendas, chat da equipe,
   triagem de WhatsApp, quadro de chamados, seletor de empresa do grupo), e
   sai daqui justamente para não ensinar um vocabulário que o outro produto
   não tem.

   A regra que sustenta o arquivo: cor, raio, sombra e tipografia existem uma
   vez só, no :root. Nenhuma tela escreve cor direto no elemento. Trocar a
   paleta é trocar as variáveis, e não caçar hexadecimal em vinte telas.

   Referência completa: docs/ui/design-softsul.md no repositório do ERP.
   ========================================================================== */


/* ======================================================================
   base, controles, avisos, login, shell, tabelas, filtros, formulários
   ====================================================================== */

/* --------------------------------------------------------------------------
   Origem: tema do ERP SoftSul.
   SoftSul Software & Network

   Este é o ÚNICO lugar onde cor, raio, sombra e tipografia são definidos.
   Nenhuma tela escreve cor direto no elemento: tudo sai das variáveis abaixo.
   Quando a identidade do UX chegar, trocar este arquivo aplica o visual novo
   sem reescrever tela nenhuma, desde que os nomes das variáveis se mantenham.

   O logotipo é monocromático, então ele define os NEUTROS. O acento é uma
   escolha de interface, porque uma marca preta não dá à tela nenhum ponto de
   energia.
   ========================================================================== */

:root{
  /* --- neutros, vindos da rampa de grafite da marca --- */
  --nuvem:#F4F7FD;        /* fundo da aplicação */
  --branco:#FFFFFF;       /* superfícies */
  --leve:#EFF3FB;         /* campos, faixas alternadas */
  --traco:#E3EAF6;        /* bordas discretas */
  --traco2:#D3DDEF;       /* bordas de controle */
  --tinta:#151D33;        /* texto principal */
  --suave:#5E6C8B;        /* texto secundário */
  --fraca:#8794AF;        /* texto terciário, ícones em repouso */

  /* --- acento ---
     Acento proprio do Monitoramento: ciano/azul-aco, e nao o indigo do ERP.
     Neutros e semanticas ficam identicos (e o que faz os produtos da casa
     parecerem familia); so o acento muda, conforme design-softsul.md secao
     2 ("Como dar identidade propria a um produto sem quebrar a familia").
     Os nomes das variaveis (--indigo etc.) ficam os mesmos de proposito,
     e' so o VALOR que muda -- e' o que o guia manda fazer, pra nao ter que
     reescrever nenhuma regra do resto do arquivo. */
  --indigo:#0E7BA6;
  --indigo-fte:#0A6483;
  --indigo-sup:#E4F3F8;
  --ciano:#57C2E8;
  --acento-borda:#BFE2ED; /* borda de superfície em destaque pelo acento */
  --gradiente:linear-gradient(96deg, var(--indigo) 0%, #1C9CC9 58%, var(--ciano) 165%);

  /* --- semânticas, sempre separadas do acento --- */
  --verde:#0E8F6A;  --verde-sup:#E4F5EF;
  --ambar:#B06A0C;  --ambar-sup:#FCF0DF;
  --rubi:#C23A47;   --rubi-sup:#FCE9EB;

  /* --- forma --- */
  --r:12px; --r-g:16px; --r-p:10px;
  --sombra:0 1px 2px rgba(21,29,51,.05);
  --sombra-alta:0 2px 4px rgba(21,29,51,.06), 0 24px 60px -28px rgba(21,29,51,.4);
  --anel:0 0 0 3px rgba(14,123,166,.16);

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

*,*::before,*::after{box-sizing:border-box}
/* Rolagem lateral acontece dentro de .rolagem e do quadro do funil, nunca na
   página: barra horizontal no corpo é sempre um vazamento de largura. */
html,body{max-width:100%; overflow-x:clip}

html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--nuvem); color:var(--tinta);
  font-family:var(--ui); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0; letter-spacing:-.025em; text-wrap:balance}
p{margin:0}
a{color:var(--indigo); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
svg{width:1em; height:1em; display:inline-block; vertical-align:middle; flex:none}
/* Sprite de simbolos SVG (src/partials/sprite-svg.php): so guarda <symbol>
   reutilizados via <use>, nunca aparece sozinho. position:absolute aqui
   (nao no atributo style="", que a CSP style-src bloqueia sem
   unsafe-inline) tira ele do fluxo, senao herda o "svg{width:1em;
   height:1em}" acima e empurra a pagina inteira pra baixo. */
.sprite-svg{position:absolute; width:0; height:0}

/* Foco visível em tudo que recebe teclado. Nunca remover sem repor. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--indigo); outline-offset:2px; border-radius:4px;
}

/* Blindagem contra seletor generico de <input>/<button> sem classe, que a
   folha antiga (base.css) ainda usa pra vestir telas nao convertidas
   (ex.: totp-setup.php, com <input>/<button> crus). Por colidir por
   ELEMENTO (nao por classe), a especificidade empata com ":focus-visible"
   acima em alguma propriedade (ex.: outline) e PERDE feio em outras que a
   regra nova do componente nunca precisou redefinir (largura, margem) --
   sobrando outline azul velho no foco e botao sem classe de largura indo
   a 100% dentro de .entrada (visto na pratica: o botao de mostrar senha
   virando quase do tamanho do campo inteiro, com o icone "no meio"). Componente novo sempre reafirma aqui, sem depender de empate de especificidade.
   Ver design-softsul.md, componentes "Formulario"/"Botões". */
.entrada input{width:auto; margin:0; padding:12px 0; border-radius:0; border:0; background:transparent; color:var(--tinta); font-size:14.5px}
.entrada input:focus{outline:none}
.entrada .revelar, .topo .perfil, .abrir-menu{width:auto; margin-top:0}
.botao{margin-top:0}

.dado{font-family:var(--dado); font-variant-numeric:tabular-nums}
.rotulo{font-family:var(--dado); font-size:10.5px; font-weight:500;
        letter-spacing:.14em; text-transform:uppercase; color:var(--fraca)}
.oculto-visual{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
               overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ============================================================ CONTROLES */
.campo{display:flex; flex-direction:column; gap:7px}
.campo > label{font-size:12.5px; font-weight:600; color:var(--suave)}
.campo .ajuda{font-size:12px; color:var(--fraca); line-height:1.45}

.entrada{
  display:flex; align-items:center; gap:10px;
  background:var(--leve); border:1px solid var(--traco);
  border-radius:var(--r); padding:0 14px;
  transition:border-color .12s, background-color .12s, box-shadow .12s;
}
.entrada svg{color:var(--fraca); font-size:16px}
.entrada input{
  flex:1; min-width:0; border:0; background:transparent; padding:12px 0;
  font-family:inherit; font-size:14.5px; color:var(--tinta); outline:none;
}
/* Preenchimento automatico do navegador (ex.: e-mail salvo) pinta o
   <input> com uma cor propria dele por baixo do nosso CSS -- nao e'
   especificidade, e' um mecanismo interno do Chrome que ignora
   "background:transparent" comum. Como o input nao cobre a entrada
   inteira (sobra espaco do icone e do padding lateral), a cor errada
   aparecia so numa faixa, no meio do campo. Truque padrao: um
   box-shadow inset do tamanho do campo, na MESMA cor de fundo da
   .entrada em cada estado (repouso/foco), sobrepondo a pintura do
   navegador. */
.entrada input:-webkit-autofill,
.entrada input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--tinta);
  -webkit-box-shadow: 0 0 0 1000px var(--leve) inset;
  box-shadow: 0 0 0 1000px var(--leve) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.entrada:focus-within input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--branco) inset;
  box-shadow: 0 0 0 1000px var(--branco) inset;
}
.entrada input::placeholder{color:var(--fraca)}
.entrada:focus-within{background:var(--branco); border-color:var(--indigo); box-shadow:var(--anel)}
.entrada:focus-within svg{color:var(--indigo)}
.entrada.erro{border-color:var(--rubi); background:var(--rubi-sup)}
.entrada .revelar{
  border:0; background:transparent; color:var(--fraca); cursor:pointer;
  padding:6px; margin-right:-6px; font-size:16px; line-height:0;
}
.entrada .revelar:hover{color:var(--suave)}

.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:var(--r); padding:13px 18px; width:100%;
  font-family:inherit; font-size:14.5px; font-weight:700; color:#fff;
  background:var(--gradiente); cursor:pointer;
  box-shadow:0 1px 2px rgba(10,100,131,.28), 0 10px 22px -12px rgba(10,100,131,.7);
  transition:transform .1s, box-shadow .15s, filter .15s;
}
.botao:hover{filter:saturate(1.08) brightness(1.04); box-shadow:0 2px 4px rgba(10,100,131,.3), 0 14px 26px -12px rgba(10,100,131,.8)}
.botao:active{transform:translateY(1px)}
.botao[disabled]{opacity:.55; cursor:not-allowed; box-shadow:none; filter:none}
.botao.claro{
  background:var(--branco); color:var(--tinta); border:1px solid var(--traco2);
  box-shadow:none; font-weight:600;
}
.botao.claro:hover{background:var(--leve); filter:none; box-shadow:none}

.check{display:inline-flex; align-items:center; gap:9px; color:var(--suave); font-size:13px; cursor:pointer}
.check input{position:absolute; opacity:0; width:0; height:0}
.check i{
  width:17px; height:17px; border-radius:5px; border:1.5px solid var(--traco2);
  background:var(--branco); display:block; position:relative; flex:none; transition:.12s;
}
.check input:checked + i{background:var(--indigo); border-color:var(--indigo)}
.check input:checked + i::after{
  content:""; position:absolute; left:5px; top:2px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.check input:focus-visible + i{box-shadow:var(--anel)}

/* ================================================================ AVISOS */
.aviso{
  display:flex; gap:10px; align-items:flex-start;
  font-size:12.8px; line-height:1.45; border-radius:var(--r); padding:11px 13px;
}
.aviso svg{font-size:15px; margin-top:1px}
.aviso.info{background:var(--indigo-sup); color:var(--suave)}
.aviso.info svg{color:var(--indigo)}
.aviso.ruim{background:var(--rubi-sup); color:#7E2630}
.aviso.ruim svg{color:var(--rubi)}
.aviso.atencao{background:var(--ambar-sup); color:#7A4808}
.aviso.atencao svg{color:var(--ambar)}
.aviso.bom{background:var(--verde-sup); color:#0A6B4F}
.aviso.bom svg{color:var(--verde)}

/* ================================================================= LOGIN */
.tela-acesso{min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr}

.acesso-marca{
  position:relative; overflow:hidden; padding:56px 56px;
  background:
    radial-gradient(120% 95% at 8% 12%, #EDF0FE 0%, rgba(237,240,254,0) 62%),
    radial-gradient(110% 90% at 96% 96%, #E2F2FC 0%, rgba(226,242,252,0) 58%),
    #F7F9FE;
  display:flex; flex-direction:column; justify-content:space-between; gap:40px;
}
.acesso-marca .agua{
  position:absolute; right:-86px; bottom:-104px; width:400px; height:auto;
  opacity:.14; pointer-events:none;
}
/* align-self:flex-start -- sem isto, o <svg> (item flex numa coluna sem
   align-items proprio, ou seja "stretch" por padrao) estica pra ocupar a
   largura inteira do painel, e o "preserveAspectRatio" padrao do SVG
   ("xMidYMid") centraliza o desenho DENTRO dessa caixa esticada -- o
   logo saia visualmente deslocado pra direita do que o resto do texto
   abaixo (h1/p), que fica flush na borda esquerda. Com flex-start o
   <svg> nao estica: fica do tamanho natural (altura fixa, largura pela
   proporcao do viewBox) e ancorado a esquerda, alinhado com o texto. */
.acesso-marca .logo{height:104px; width:auto; color:var(--tinta); position:relative; align-self:flex-start}
.acesso-marca .dizer{position:relative; display:flex; flex-direction:column; gap:14px}
.acesso-marca h1{font-size:clamp(26px,2.9vw,34px); font-weight:800; line-height:1.16; max-width:15ch}
.acesso-marca p{font-size:15px; color:var(--suave); max-width:36ch; line-height:1.6}
.acesso-marca .assinatura{position:relative; font-size:12px; color:var(--fraca)}

.acesso-form{
  background:var(--branco); padding:48px 46px;
  display:flex; flex-direction:column; justify-content:center; gap:20px;
}
.acesso-form .interno{width:100%; max-width:392px; margin:0 auto;
                      display:flex; flex-direction:column; gap:20px}
.acesso-form .titulo{display:flex; flex-direction:column; gap:5px}
.acesso-form .titulo h2{font-size:23px; font-weight:800}
.acesso-form .titulo p{font-size:14px; color:var(--suave)}
.linha-op{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px}
.linha-op a{font-weight:600}

/* --- passos do primeiro acesso --- */
.passos{display:flex; align-items:center; gap:9px}
.passos b{
  display:flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:var(--leve); color:var(--fraca);
  font-size:11.5px; font-weight:700; flex:none;
}
.passos b.ok{background:var(--verde-sup); color:var(--verde)}
.passos b.ativo{background:var(--indigo); color:#fff}
.passos .risco{flex:1; height:1px; background:var(--traco)}

.segredo{
  font-family:var(--dado); font-size:17px; font-weight:500; letter-spacing:.14em;
  background:var(--leve); border:1px dashed var(--traco2); border-radius:var(--r);
  padding:15px 16px; text-align:center; word-break:break-all; user-select:all;
}
.codigo-2fa{display:flex; gap:9px}
.codigo-2fa input{
  flex:1; width:100%; min-width:0; height:54px; text-align:center;
  border:1px solid var(--traco2); border-radius:var(--r); background:var(--leve);
  font-family:var(--dado); font-size:22px; font-weight:600; color:var(--tinta);
  outline:none; transition:.12s;
}
.codigo-2fa input:focus{border-color:var(--indigo); background:var(--branco); box-shadow:var(--anel)}

.forca{display:flex; gap:4px; margin-top:2px}
.forca i{flex:1; height:3px; border-radius:2px; background:var(--traco); transition:background-color .2s}
.forca.n1 i:nth-child(-n+1){background:var(--rubi)}
.forca.n2 i:nth-child(-n+2){background:var(--ambar)}
.forca.n3 i:nth-child(-n+3){background:var(--ambar)}
.forca.n4 i{background:var(--verde)}

@media (max-width:880px){
  .tela-acesso{grid-template-columns:1fr}
  .acesso-marca{padding:36px 28px; gap:24px; min-height:auto}
  .acesso-marca .logo{height:62px}
  .acesso-marca h1{font-size:23px}
  .acesso-marca p,.acesso-marca .assinatura{display:none}
  .acesso-marca .agua{width:230px; right:-56px; bottom:-70px}
  .acesso-form{padding:34px 24px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ================================================================= SHELL */
.shell{display:grid; grid-template-columns:232px 1fr; min-height:100vh}

.rail{
  background:var(--branco); border-right:1px solid var(--traco);
  padding:18px 12px; display:flex; flex-direction:column; gap:2px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.rail .marca{display:flex; align-items:center; gap:10px; padding:6px 10px 20px}
.rail .marca .marca-link{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.rail .marca .marca-link:hover{text-decoration:none}
.rail .marca .logo{height:35px; width:auto; color:var(--tinta)}
.rail .marca .sufixo{
  font-family:var(--dado); font-size:10px; font-weight:600; letter-spacing:.14em;
  color:var(--fraca); border-left:1px solid var(--traco2); padding-left:9px;
}
.rail .grupo{font-family:var(--dado); font-size:10px; letter-spacing:.14em;
             text-transform:uppercase; color:var(--fraca); padding:18px 12px 6px}
.rail .item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--r-p);
  font-size:13.5px; font-weight:500; color:var(--suave); text-decoration:none;
}
.rail .item svg{color:var(--fraca); font-size:17px}
.rail .item:hover{background:var(--leve); color:var(--tinta); text-decoration:none}
.rail .item.ativo{background:var(--indigo-sup); color:var(--indigo-fte); font-weight:700}
.rail .item.ativo svg{color:var(--indigo)}
.rail .item .conta{margin-left:auto; font-family:var(--dado); font-size:11px; color:var(--fraca)}
.rail .rodape{margin-top:auto; padding-top:14px}

.painel-shell{display:flex; flex-direction:column; min-width:0}
.topo{
  display:flex; align-items:center; gap:16px; padding:12px 22px;
  background:var(--branco); border-bottom:1px solid var(--traco);
  position:sticky; top:0; z-index:5;
}
.topo .busca{
  flex:1; max-width:400px; min-width:0; display:flex; align-items:center; gap:9px;
  background:var(--leve); border:1px solid var(--traco); border-radius:var(--r-p);
  padding:0 12px;
}
.topo .busca svg{color:var(--fraca); font-size:15px}
.topo .busca input{flex:1; min-width:0; border:0; background:transparent; padding:9px 0;
                   font-family:inherit; font-size:13px; color:var(--tinta); outline:none}
.topo .dir{margin-left:auto; display:flex; align-items:center; gap:14px}
.topo .perfil{display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit}
.topo .perfil .avatar{
  width:31px; height:31px; border-radius:50%; object-fit:cover; background:var(--indigo-sup);
  color:var(--indigo-fte); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex:none;
}
.topo .perfil .quem{display:flex; flex-direction:column; line-height:1.25}
.topo .perfil b{font-size:13px; font-weight:700}
.topo .perfil span{font-size:11px; color:var(--fraca)}

.conteudo{padding:22px; display:flex; flex-direction:column; gap:18px; min-width:0}
.cab-pag{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  /* O bloco do título e do botão Salvar precisa respirar antes da primeira
     seção; sem isto ele encosta no cartão de Identificação. */
  padding-bottom:6px;
  margin-bottom:4px;
}
.cab-pag h1{font-size:22px; font-weight:800}
.cab-pag p{font-size:13px; color:var(--suave); margin-top:2px}

.cartao{background:var(--branco); border:1px solid var(--traco); border-radius:var(--r-g); padding:20px 22px}
.metricas{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr)); gap:12px}
/* Dentro de um cartão a métrica não precisa da própria moldura: duas bordas
   encaixadas viram ruído. O destaque continua, pela cor. */
.cartao > .metricas .metrica{border:0; background:var(--leve); padding:12px 14px}
.cartao > .metricas .metrica.destaque{background:linear-gradient(150deg,#F0F2FE,#EAF4FD)}
.metrica{background:var(--branco); border:1px solid var(--traco); border-radius:var(--r-g);
         padding:15px 17px; display:flex; flex-direction:column; gap:3px}
.metrica .rot{font-size:12px; color:var(--suave); font-weight:600}
.metrica .val{font-family:var(--dado); font-size:25px; font-weight:600; letter-spacing:-.02em}
.metrica .nota{font-size:11.5px; color:var(--fraca)}
.metrica.destaque{background:linear-gradient(150deg,#F0F2FE,#EAF4FD); border-color:#DADFFB}
.metrica.destaque .val{color:var(--indigo-fte)}

/* O botão de menu só existe no celular; na tela cheia a barra lateral está
   sempre à vista e um botão para abri-la seria um clique inventado. */
.abrir-menu{display:none}
.onde-estou{display:none}

@media (max-width:820px){
  /* align-content:start -- sem isto, o grid de 1 coluna (.rail numa
     "row" auto, .painel-shell noutra) reparte o espaco sobrante do
     min-height:100vh entre as duas rows quando o CONTEUDO da pagina e
     curto (poucos itens, tabela vazia): a row do .rail (que perdeu o
     height:100vh fixo do desktop, agora e' so "auto") estica pra
     ocupar uma fatia da tela toda, abrindo um vao vazio enorme entre o
     cabecalho movel (logo+hamburguer) e o resto -- visto na pratica em
     paginas com pouco conteudo (Usuarios, Ignorar). Com align-content:
     start, cada row fica so do tamanho do proprio conteudo, sobra de
     tela vazia (se houver) fica onde sempre esteve: embaixo de tudo. */
  .shell{grid-template-columns:1fr; align-content:start}
  .rail{
    position:sticky; top:0; z-index:40; height:auto; flex-direction:column;
    border-right:0; border-bottom:1px solid var(--traco); gap:0; padding:0;
    background:var(--branco);
  }
  .rail .marca{
    width:100%; padding:10px 14px; margin:0; gap:10px;
    display:flex; align-items:center;
  }
  .rail .marca .logo{height:26px}
  .abrir-menu{
    display:flex; align-items:center; justify-content:center; width:36px; height:36px;
    border:1px solid var(--traco); background:var(--branco); border-radius:var(--r-p);
    cursor:pointer; padding:0; flex:none; color:var(--tinta);
  }
  .abrir-menu .tracos{display:flex; flex-direction:column; gap:4px; width:16px}
  .abrir-menu .tracos span{height:2px; background:currentColor; border-radius:2px; transition:.15s}
  .abrir-menu[aria-expanded=true] .tracos span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .abrir-menu[aria-expanded=true] .tracos span:nth-child(2){opacity:0}
  .abrir-menu[aria-expanded=true] .tracos span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* Onde a pessoa está, ao lado do logotipo: com o menu fechado, é a única
     coisa que diz em que tela ela abriu. */
  .onde-estou{
    display:block; font-size:12.5px; font-weight:700; color:var(--suave); margin-left:auto;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:45%;
  }

  .itens-rail{display:none; flex-direction:column; padding:4px 8px 10px;
              border-top:1px solid var(--traco); max-height:70vh; overflow-y:auto}
  .rail.aberto .itens-rail{display:flex}
  .rail .grupo{display:block; padding:12px 12px 4px}
  .rail .rodape{display:none}
  .rail .item{width:100%}
  .topo .perfil .quem{display:none}
  .conteudo{padding:16px}
  /* Endereço e e-mail longos são o que mais estica coluna no celular: sem
     isto, uma única palavra de 40 caracteres empurra a tela toda. */
  .conteudo{overflow-wrap:anywhere}
  .cartao{padding:16px 14px}
  .cab-pag h1{font-size:19px}
  .acoes .botao{flex:1 1 auto; justify-content:center}
  /* A busca e o seletor de empresa continuam, mas encolhem: são as duas
     coisas que se usam de pé, no corredor. */
  .topo{padding:10px 14px; gap:8px}
  .busca{min-width:0; flex:1}
  .atalho-busca{display:none}
  .troca-empresa .quem span{display:none}
  .troca-empresa{max-width:130px; padding:5px 8px}
}

/* --- QR Code do cadastro do segundo fator --- */
.qr{
  align-self:center; width:200px; padding:12px; background:#fff;
  border:1px solid var(--traco); border-radius:var(--r-g); box-shadow:var(--sombra);
}
.qr svg{display:block; width:100%; height:auto}

.manual{border:1px solid var(--traco); border-radius:var(--r); background:var(--leve)}
.manual summary{
  padding:11px 14px; font-size:13px; font-weight:600; color:var(--suave);
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px;
}
.manual summary::-webkit-details-marker{display:none}
.manual summary::before{
  content:""; width:6px; height:6px; flex:none; margin-left:2px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); transition:transform .15s;
}
.manual[open] summary::before{transform:rotate(45deg)}
.manual summary:hover{color:var(--tinta)}
.manual > p{padding:0 14px; font-size:13px; color:var(--suave)}
.manual .segredo{margin:10px 14px 14px; background:var(--branco)}

/* --- menu do usuário na barra superior --- */
.menu-usuario{position:relative}
.topo .perfil{
  display:flex; align-items:center; gap:9px; border:1px solid transparent;
  background:transparent; border-radius:var(--r-p); padding:5px 9px 5px 5px;
  font-family:inherit; color:inherit; cursor:pointer; text-align:left;
}
.topo .perfil:hover{background:var(--leve)}
.topo .perfil.aberto{background:var(--leve); border-color:var(--traco)}
.topo .perfil .chevron{font-size:15px; color:var(--fraca); transform:rotate(90deg); transition:transform .15s}
.topo .perfil.aberto .chevron{transform:rotate(-90deg)}
.avatar{
  width:32px; height:32px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--indigo-sup); color:var(--indigo-fte);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; border:1px solid var(--traco);
}
.avatar.grande{width:44px; height:44px; font-size:15px}

.suspenso{
  position:absolute; right:0; top:calc(100% + 8px); z-index:20; width:264px;
  background:var(--branco); border:1px solid var(--traco); border-radius:var(--r-g);
  box-shadow:var(--sombra-alta); padding:6px; display:flex; flex-direction:column; gap:1px;
}
/* O [hidden]{display:none} do navegador é folha do USUÁRIO e perde para
   qualquer display do autor, então .suspenso{display:flex} deixava o menu
   permanentemente aberto. Vale para todo elemento que o código esconde por
   atributo: se a classe define display, o estado escondido precisa dizer o
   contrário aqui. */
[hidden]{display:none !important}
.suspenso .cabeca{display:flex; gap:11px; align-items:center; padding:12px 12px 14px}
.suspenso .cabeca > div{min-width:0; display:flex; flex-direction:column; gap:1px}
.suspenso .cabeca b{font-size:13.5px; font-weight:700}
.suspenso .cabeca span{font-size:11.5px; color:var(--fraca);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.suspenso .cabeca .cracha{color:var(--indigo-fte); font-weight:600}
.suspenso a, .suspenso button{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-p);
  font-size:13.5px; font-weight:500; color:var(--suave); text-decoration:none;
}
/* .suspenso button: mesmo desenho de item de menu que .suspenso a, so que
   pra acao que nao navega (ativar/desativar push fica no lugar, so muda
   o texto do proprio botao -- um link pra lugar nenhum seria enganoso). */
.suspenso button{width:100%; margin-top:0; border:0; background:transparent; font-family:inherit; cursor:pointer; text-align:left}
.suspenso a svg, .suspenso button svg{font-size:16px; color:var(--fraca)}
.suspenso a:hover, .suspenso button:hover{background:var(--leve); color:var(--tinta); text-decoration:none}
.suspenso a:hover svg, .suspenso button:hover svg{color:var(--indigo)}
.suspenso button[disabled]{opacity:.55; cursor:not-allowed}
.suspenso button[aria-pressed="true"] svg{color:var(--indigo)}
.suspenso a.sair{color:var(--rubi)}
.suspenso a.sair svg{color:var(--rubi)}
.suspenso a.sair:hover{background:var(--rubi-sup); color:var(--rubi)}
.suspenso .risco{height:1px; background:var(--traco); margin:5px 6px}
.marca-atencao{
  margin-left:auto; font-family:var(--dado); font-size:10px; font-weight:600;
  background:var(--ambar-sup); color:var(--ambar); padding:2px 7px; border-radius:999px;
}

/* --- cadastro do segundo fator: QR e chave, os dois visíveis --- */
.cadastro-2fa{display:flex; gap:18px; align-items:flex-start}
.cadastro-2fa .qr{
  flex:none; width:168px; padding:10px; background:#fff;
  border:1px solid var(--traco); border-radius:var(--r-g); box-shadow:var(--sombra);
}
.cadastro-2fa .qr svg{display:block; width:100%; height:auto}
.cadastro-2fa .ou-chave{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px}
.cadastro-2fa .ou{
  font-family:var(--dado); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fraca);
}
.cadastro-2fa .segredo{font-size:14px; letter-spacing:.1em; padding:12px; text-align:left}
.cadastro-2fa .ajuda{font-size:12px; color:var(--fraca); line-height:1.45}
@media (max-width:520px){
  .cadastro-2fa{flex-direction:column; align-items:stretch}
  .cadastro-2fa .qr{align-self:center}
}

/* --- cartão com cabeçalho e fichas resumidas --- */
.cab-cartao{display:flex; align-items:baseline; justify-content:space-between; gap:14px;
            flex-wrap:wrap; margin-bottom:14px}
.cab-cartao h2{font-size:16px; font-weight:700}
.cab-cartao a{font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:4px}
.cab-cartao a svg{font-size:14px}

.fichas{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(212px,100%),1fr)); gap:10px}
.ficha{
  display:grid; grid-template-columns:36px 1fr; grid-template-rows:auto auto;
  column-gap:11px; align-items:center; padding:11px 12px; text-decoration:none;
  border:1px solid var(--traco); border-radius:var(--r); color:inherit;
}
.ficha:hover{border-color:var(--traco2); background:var(--leve); text-decoration:none}
.ficha img,.ficha .sem-foto{
  grid-row:1/3; width:36px; height:36px; border-radius:9px; object-fit:contain;
  background:var(--branco); border:1px solid var(--traco); padding:2px;
}
.ficha .sem-foto{display:flex; align-items:center; justify-content:center; color:var(--fraca); font-size:18px}
.ficha .nome{
  font-size:13px; font-weight:700; line-height:1.3;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.ficha .dado{font-family:var(--dado); font-size:11px; color:var(--fraca)}

/* ================================================================ TABELAS */
.rolagem{overflow-x:auto; background:var(--branco); border:1px solid var(--traco); border-radius:var(--r-g)}
table.dados{border-collapse:collapse; width:100%; min-width:680px; font-size:14px}
table.dados th{
  font-family:var(--dado); font-size:10.5px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fraca); text-align:left; white-space:nowrap;
  padding:11px 16px; border-bottom:1px solid var(--traco2); background:#FAFCFF;
}
table.dados td{padding:10px 16px; border-bottom:1px solid var(--traco); vertical-align:middle}
table.dados tr:last-child td{border-bottom:0}
table.dados tbody tr:hover{background:#FBFCFF}
/* Dinheiro não quebra linha: "R$" em cima e "1.538,14" embaixo é ilegível
   numa coluna que existe para ser lida de cima a baixo e comparada. */
/* Conciliação: as parcelas vêm em grupos, das mais certas para as menos, e
   o que difere de valor precisa saltar aos olhos antes do clique. */
/* Abas dentro do modal: casar com o que já existe, ou criar dali mesmo. */
.abas-modal{display:flex; gap:4px; margin:12px 0 4px; border-bottom:1px solid var(--traco)}
.abas-modal .aba{
  border:0; background:none; padding:8px 12px; font:inherit; font-size:13px; font-weight:600;
  color:var(--suave); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.abas-modal .aba:hover{color:var(--tinta)}
.abas-modal .aba.ativa{color:var(--indigo-fte); border-bottom-color:var(--indigo)}

.rotulo-grupo{
  margin:12px 0 4px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fraca);
}
.rotulo-grupo:first-child{margin-top:0}
.linha-checks{max-height:46vh; overflow-y:auto}
.atencao-valor{color:var(--ambar); font-weight:600}

table.dados .num{text-align:right; white-space:nowrap}
table.dados td.num{width:1%}
table.dados .acao{width:44px; text-align:right}
table.dados .acao a{color:var(--fraca); font-size:17px; display:inline-flex}
table.dados .acao a:hover{color:var(--indigo)}
.nulo{color:var(--fraca)}
td.dado,.dado{font-family:var(--dado); font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--suave)}

.cli{display:flex; align-items:center; gap:11px; min-width:0; text-decoration:none; color:inherit}
.cli:hover{text-decoration:none}
.cli:hover b{color:var(--indigo-fte)}
.cli img,.cli .sem-foto{
  width:34px; height:34px; border-radius:9px; object-fit:contain; flex:none;
  background:var(--branco); border:1px solid var(--traco); padding:2px;
}
.cli .sem-foto{display:flex; align-items:center; justify-content:center; color:var(--fraca); font-size:16px}
.cli .txt{min-width:0; display:flex; flex-direction:column; line-height:1.3}
.cli b{font-size:13.5px; font-weight:700}
.cli .txt span{font-size:11.5px; color:var(--fraca);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38ch}

.pilula{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
        padding:3px 9px; border-radius:999px; white-space:nowrap}
.pilula::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none}
.pilula.ok{background:var(--verde-sup); color:var(--verde)}
.pilula.at{background:var(--ambar-sup); color:var(--ambar)}
.pilula.ruim{background:var(--rubi-sup); color:var(--rubi)}
.pilula.nu{background:var(--leve); color:var(--fraca)}

/* ---------------------------------------------------------------- FILTROS */
.filtros{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.filtros .entrada{flex:1; min-width:220px; max-width:360px; background:var(--branco)}
/* Mês com passo para os lados: o calendário serve para saltar longe, as
   setas para andar de mês em mês, que é o uso de todo dia. */
.nav-mes{display:flex; align-items:center; gap:4px}
.nav-mes .entrada{flex:0 0 auto; min-width:0; width:158px; background:var(--branco)}
.passo-mes{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:38px;
  border:1px solid var(--traco); border-radius:9px; background:var(--branco);
  color:var(--suave); text-decoration:none; flex:none;
}
.passo-mes:hover{border-color:var(--traco2); color:var(--tinta); background:var(--leve)}
.passo-mes svg{width:16px; height:16px}
.passo-mes.para-tras svg{transform:rotate(180deg)}

.pilulas-filtro{display:flex; gap:6px; flex-wrap:wrap}
.pf{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--traco); background:var(--branco); font-size:12.5px; font-weight:600;
  color:var(--suave); text-decoration:none;
}
.pf:hover{border-color:var(--traco2); color:var(--tinta); text-decoration:none}
.pf.ativa{background:var(--indigo-sup); border-color:var(--acento-borda,#BFE2ED); color:var(--indigo-fte)}
.pf span{font-family:var(--dado); font-size:11px; color:var(--fraca)}
.pf.ativa span{color:var(--indigo)}

.acoes{display:flex; gap:9px; flex-wrap:wrap}
.acoes .botao{width:auto; padding:10px 16px; font-size:13.5px; text-decoration:none}
.acoes .botao:hover{text-decoration:none}

.vazio{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:56px 24px; background:var(--branco); border:1px solid var(--traco);
  border-radius:var(--r-g); color:var(--suave);
}
.vazio svg{font-size:28px; color:var(--fraca); margin-bottom:6px}

/* ============================================================ FORMULÁRIOS */
.colunas{display:flex; flex-direction:column; gap:16px}
.titulo-secao{font-size:15px; font-weight:700; margin-bottom:14px}
.grade{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.c-3{grid-column:span 3} .c-4{grid-column:span 4} .c-5{grid-column:span 5}
.c-6{grid-column:span 6} .c-8{grid-column:span 8} .c-9{grid-column:span 9}
.c-12{grid-column:span 12}
@media (max-width:760px){
  /* Todas, e não só algumas: c-1 e c-2 ficavam com uma fatia de 30px, o
     rótulo não cabia, e a linha inteira empurrava a página de lado. */
  .c-1,.c-2,.c-3,.c-4,.c-5,.c-6,.c-7,.c-8,.c-9,.c-10,.c-11{grid-column:span 12}
}
.campo textarea{
  border:1px solid var(--traco); background:var(--leve); border-radius:var(--r);
  padding:11px 14px; font-family:inherit; font-size:14.5px; color:var(--tinta);
  resize:vertical; outline:none; transition:.12s;
}
.campo textarea:focus{background:var(--branco); border-color:var(--indigo); box-shadow:var(--anel)}
.campo .ajuda.erro{color:var(--rubi)}
.campo .ajuda.bom{color:var(--verde)}
.obrig{
  font-family:var(--dado); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fraca); font-weight:500; margin-left:6px;
}
.entrada input[readonly]{color:var(--suave)}

.trilha{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px;
        color:var(--fraca); margin-bottom:-4px; min-width:0}
.trilha span,.trilha a{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.trilha a{color:var(--suave); font-weight:600}
.trilha svg{font-size:13px}

.titulo-cliente{display:flex; align-items:center; gap:14px; min-width:0}
.brasao{
  width:52px; height:52px; border-radius:var(--r); object-fit:contain; flex:none;
  background:var(--branco); border:1px solid var(--traco); padding:4px;
}
.brasao.sem-foto{display:flex; align-items:center; justify-content:center; color:var(--fraca); font-size:22px}

.conta-titulo{
  font-family:var(--dado); font-size:11px; font-weight:600; margin-left:8px;
  background:var(--leve); color:var(--fraca); padding:2px 8px; border-radius:999px;
}
.rolagem.sem-borda{border:0; border-radius:0}
.rolagem.sem-borda table.dados{min-width:600px}
.etiq{
  display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px;
  background:var(--indigo-sup); color:var(--indigo-fte); margin-right:4px;
}
.rodape-ficha{font-size:12px; color:var(--fraca)}

/* --- select dentro do padrão de entrada --- */
.entrada select{
  flex:1; min-width:0; border:0; background:transparent; padding:12px 0;
  font-family:inherit; font-size:14.5px; color:var(--tinta); outline:none;
  appearance:none; cursor:pointer;
}
.entrada select:disabled{color:var(--suave); cursor:default}
.linha-checks{display:flex; gap:20px; flex-wrap:wrap; padding-top:4px}

/* --- equipe --- */
.pessoas{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr)); gap:12px}
.pessoa{
  display:grid; grid-template-columns:56px 1fr; gap:14px; align-items:start;
  background:var(--branco); border:1px solid var(--traco); border-radius:var(--r-g); padding:18px;
}
.pessoa img,.pessoa .avatar{width:56px; height:56px; border-radius:50%; object-fit:cover; font-size:17px}
.pessoa .quem{display:flex; flex-direction:column; gap:2px; min-width:0}
.pessoa .quem b{font-size:15px; font-weight:700}
.pessoa .quem .cargo{font-size:12.5px; color:var(--indigo-fte); font-weight:600}
.pessoa .quem a{font-size:12.5px; word-break:break-all}
.pessoa .quem .dado{font-size:12px}
.pessoa .situacao{grid-column:2; display:flex; flex-direction:column; gap:5px; align-items:flex-start; margin-top:8px}
.pessoa .situacao .dado{font-size:11px; color:var(--fraca)}

/* --- ações em linha na tabela e paginação --- */
.acoes-linha{display:flex; gap:4px; justify-content:flex-end; align-items:center}
/* Link e botão na mesma linha de ações precisam do mesmo desenho, senão o
   ícone de abrir fica de um tamanho e o de excluir de outro, desalinhados. */
.acoes-linha a,
.acoes-linha button{
  border:1px solid var(--traco); background:var(--branco); border-radius:8px;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  color:var(--fraca); cursor:pointer; font-size:15px; padding:0;
}
.acoes-linha a:hover,
.acoes-linha button:hover{border-color:var(--traco2); color:var(--indigo); background:var(--leve);
                          text-decoration:none}
.acoes-linha form{display:flex}
.avatar.iniciais{font-size:11px}
table.dados .cli .avatar{width:34px; height:34px; border-radius:50%; padding:0}

.paginacao{display:flex; align-items:center; gap:16px; justify-content:center; padding:4px}
.paginacao a{font-size:13px; font-weight:600}


/* ======================================================================
   visor de documento, upload, busca viva, aviso de etapa futura, ação destrutiva, paginação
   ====================================================================== */

/* --- visualizador de documento em modal ---
   A mesma armadilha do menu suspenso: o navegador esconde dialog fechado com
   dialog:not([open]){display:none}, que é folha de USUÁRIO e perde para
   qualquer display do autor. Sem a regra abaixo, .visor{display:flex} deixa o
   modal permanentemente na tela, e fechar não surte efeito visível. */
dialog:not([open]){display:none !important}

.visor{
  width:min(1080px, 94vw); height:min(88vh, 900px); max-width:none; max-height:none;
  padding:0; border:0; border-radius:var(--r-g); overflow:hidden;
  background:var(--branco); box-shadow:0 30px 90px -20px rgba(21,29,51,.55);
  display:flex; flex-direction:column;
}
.visor[open]{display:flex}
.visor::backdrop{background:rgba(21,29,51,.55); backdrop-filter:blur(2px)}
.visor header{
  display:flex; align-items:center; gap:14px; padding:12px 14px 12px 18px;
  border-bottom:1px solid var(--traco); background:var(--branco); flex:none;
}
.visor header b{
  font-size:14px; font-weight:700; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.visor header a{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:var(--suave); padding:6px 11px; border:1px solid var(--traco); border-radius:var(--r-p);
  text-decoration:none; white-space:nowrap;
}
.visor header a:hover{background:var(--leve); color:var(--indigo-fte); text-decoration:none}
.visor header a svg{font-size:14px}
.visor header button{
  border:0; background:transparent; color:var(--fraca); font-size:26px; line-height:1;
  cursor:pointer; padding:0 6px; border-radius:8px;
}
.visor header button:hover{background:var(--leve); color:var(--tinta)}
.visor iframe{flex:1; width:100%; border:0; background:var(--leve)}
a.ver-pdf{color:var(--fraca)}
a.ver-pdf:hover{color:var(--indigo)}
@media (max-width:640px){
  .visor{width:100vw; height:100vh; border-radius:0}
  .visor header a span,.visor header a{padding:6px 8px}
}

/* --- zona de arrastar e soltar --- */
.zona-upload{width:100%; margin-top:16px; padding-top:16px; border-top:1px dashed var(--traco2)}
.zona-alvo{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:100%; padding:34px 20px; text-align:center; cursor:pointer;
  border:2px dashed var(--traco2); border-radius:var(--r-g); background:var(--leve);
  transition:border-color .14s, background-color .14s, transform .1s;
}
.zona-alvo:hover{border-color:var(--indigo); background:var(--indigo-sup)}
.zona-alvo:focus-visible{outline:2px solid var(--indigo); outline-offset:3px}
.zona-icone{font-size:26px; color:var(--fraca); transition:color .14s}
.zona-alvo:hover .zona-icone{color:var(--indigo)}
.zona-texto{font-size:14.5px; font-weight:700; color:var(--tinta)}
.zona-ajuda{font-size:12.5px; color:var(--suave); max-width:44ch; line-height:1.45}

/* Enquanto o arquivo está sobre a zona, ela cresce um pouco e se acende: sem
   um sinal claro, quem arrasta não sabe se pode soltar. */
.zona-upload.sobre .zona-alvo{
  border-color:var(--indigo); background:var(--indigo-sup);
  transform:scale(1.01); border-style:solid;
}
.zona-upload.sobre .zona-icone{color:var(--indigo)}
.zona-upload.enviando .zona-alvo{opacity:.6; pointer-events:none; border-style:solid}

.zona-escolhido{
  margin-top:10px; font-family:var(--dado); font-size:12.5px; color:var(--verde);
  background:var(--verde-sup); border-radius:var(--r-p); padding:9px 12px;
}
.zona-escolhido.erro{color:var(--rubi); background:var(--rubi-sup)}
.zona-upload noscript .botao{margin-top:12px; width:auto}

/* --- busca ao vivo --- */
#lista-viva{transition:opacity .12s}
#lista-viva.carregando{opacity:.5}
.contagem{font-size:12.5px; color:var(--fraca); margin-bottom:-6px}

/* --- aviso de funcionalidade que chega numa etapa futura --- */
.nota-etapa{
  display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--suave);
  background:var(--leve); border:1px dashed var(--traco2); border-radius:var(--r);
  padding:12px 14px; line-height:1.45;
}
.nota-etapa svg{font-size:16px; color:var(--fraca); flex:none}
.envio .campo{margin-bottom:4px}

/* --- ação destrutiva ---
   Fundo claro e não vermelho cheio: o botão perigoso fica ao lado do Salvar,
   e dois botões sólidos disputando atenção fazem a pessoa clicar no errado.
   O vermelho aparece no texto e na borda, e só se enche no hover. */
.botao.perigo{
  background:var(--branco); color:var(--rubi); border:1px solid var(--rubi-sup);
  box-shadow:none; font-weight:600;
}
.botao.perigo:hover{background:var(--rubi-sup); border-color:var(--rubi); filter:none; box-shadow:none}

/* --- navegação de páginas --- */
.paginacao{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding:4px 2px;
}
.paginacao .resumo{font-family:var(--dado); font-size:11.5px; color:var(--fraca)}
.paginacao .botoes{display:flex; gap:4px; flex-wrap:wrap}
.pg{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 9px; border-radius:var(--r-p);
  border:1px solid var(--traco); background:var(--branco);
  font-size:13px; font-weight:600; color:var(--suave); text-decoration:none;
}
.pg:hover{border-color:var(--traco2); color:var(--tinta); background:var(--leve); text-decoration:none}
.pg.atual{background:var(--indigo); border-color:var(--indigo); color:#fff}
.pg.desligado{opacity:.4; pointer-events:none}
.pg.reticencia{border:0; background:transparent; min-width:20px; padding:0}
table.dados tr.inativa{opacity:.6}
table.dados tr.inativa b{color:var(--suave)}


/* ======================================================================
   modais e permissões
   ====================================================================== */

/* --- modal de confirmação --- */
.confirmador{
  width:min(430px,92vw); max-width:none; border:0; padding:26px 28px;
  border-radius:var(--r-g); background:var(--branco); box-shadow:var(--sombra-alta);
  color:var(--tinta); font-family:var(--ui);
}
/* Modal de confirmação é estreito de propósito: é uma pergunta e dois botões.
   Modal com formulário precisa da mesma largura de um cartão, senão os campos
   da grade viram uma coluna de rótulos quebrados, que foi o que aconteceu no
   lançamento de despesa. */
.confirmador:has(.grade){width:min(720px,94vw)}
.confirmador::backdrop{background:rgba(21,29,51,.5)}
.confirmador h2{font-size:18px; font-weight:800; margin-bottom:8px}
.confirmador p{font-size:14px; color:var(--suave); line-height:1.55}
.acoes-modal{display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap; margin-top:22px}
.acoes-modal .botao{width:auto; padding:10px 18px}

/* --- permissões por usuário --- */
.permissoes{display:flex; flex-direction:column; gap:2px}
.grupo-perm{
  font-family:var(--dado); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fraca); margin:16px 0 4px; font-weight:600;
}
.grupo-perm:first-child{margin-top:0}
.linha-perm{
  display:grid; grid-template-columns:210px minmax(0,1fr); gap:14px; align-items:center;
  padding:9px 12px; border-radius:var(--r-p);
}
.linha-perm:nth-child(odd){background:#FBFCFF}
.nome-modulo{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600}
.nome-modulo svg{font-size:16px; color:var(--fraca)}
.verbos{display:flex; gap:16px; flex-wrap:wrap}
.verbo{font-size:12.5px}
/* A exceção fica visível: sem marcação, ninguém descobre por que uma pessoa
   pode algo que o perfil dela não dá. */
.verbo.excecao{
  color:var(--indigo-fte); font-weight:700;
  background:var(--indigo-sup); padding:2px 9px 2px 6px; border-radius:999px;
}
.cartao.convite{border-color:var(--acento-borda,#BFE2ED); background:linear-gradient(180deg,#FBFCFF,var(--branco))}
.cartao.convite .titulo-secao svg{color:var(--indigo); margin-right:6px}
@media (max-width:720px){ .linha-perm{grid-template-columns:1fr; gap:6px} }

/* --- modal largo e comparação de valores --- */
.confirmador.largo{width:min(560px,94vw)}
/* Formulário de cadastro precisa de mais fôlego que uma pergunta de sim ou
   não: com 560px os campos de três colunas ficam estreitos demais para o
   rótulo caber numa linha. */
.confirmador.form{width:min(860px,94vw); max-height:88vh; overflow-y:auto}
.confirmador .corpo p{margin-bottom:12px}
.confirmador .corpo p:last-child{margin-bottom:0}
.confirmador .corpo b{color:var(--tinta); font-weight:700}
.trocas{
  display:flex; flex-direction:column; gap:1px; background:var(--traco);
  border:1px solid var(--traco); border-radius:var(--r); overflow:hidden; margin-bottom:12px;
}
.troca{
  display:grid; grid-template-columns:92px 1fr auto 1fr; gap:10px; align-items:center;
  background:var(--branco); padding:9px 12px; font-size:13px;
}
.troca .rot{
  font-family:var(--dado); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fraca);
}
/* O valor atual fica riscado e o novo em destaque: a pessoa precisa ver o que
   PERDE, não só o que ganha. */
.troca .de{color:var(--suave); text-decoration:line-through; overflow:hidden; text-overflow:ellipsis}
.troca .seta{font-size:10.5px; color:var(--fraca); font-family:var(--dado)}
.troca .para{color:var(--verde); font-weight:700; overflow:hidden; text-overflow:ellipsis}
@media (max-width:560px){
  .troca{grid-template-columns:1fr; gap:2px}
  .troca .seta{display:none}
}


/* ======================================================================
   avatar de iniciais
   ====================================================================== */

/* --- avatar de iniciais quando não há foto --- */
.avatar.iniciais,.sem-foto.iniciais,.brasao.iniciais,.sem-logo-iniciais{
  display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:-.02em; border:1px solid var(--traco);
}
.sem-foto.iniciais{
  width:34px; height:34px; border-radius:9px; font-size:12px; flex:none;
  background:var(--leve); color:var(--suave);
}
.ficha .sem-foto.iniciais{width:36px; height:36px}
.brasao.iniciais{width:52px; height:52px; border-radius:var(--r); font-size:17px; padding:0}
.sem-logo-iniciais{width:96px; height:96px; border-radius:var(--r-g); font-size:30px}
.sugestoes li .sem-foto.iniciais{width:26px; height:26px; border-radius:7px; font-size:10px}
table.dados .cli .avatar.iniciais{width:34px; height:34px; border-radius:50%; font-size:12px; padding:0}
.filtro-cliente{flex:0 1 320px; min-width:220px}
.filtro-cliente .entrada{background:var(--branco)}


/* ======================================================================
   índice de configurações e filtro de múltipla escolha
   ====================================================================== */

/* --------------------------------------------------- CONFIGURAÇÕES (índice)
   Cartão de tabela de apoio. A contagem fica à direita, alinhada entre os
   cartões, porque é ela que a pessoa compara ao bater o olho. */
/* Título do grupo de configurações: separa o mural de catorze quadrados em
   assuntos, sem virar uma segunda navegação. */
.titulo-grupo-config{
  margin:26px 0 10px; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fraca);
}
.titulo-grupo-config:first-of-type{margin-top:8px}

.cartoes-config{display:grid; gap:12px;
  /* min(420px, 100%) porque minmax com um mínimo fixo maior que a tela força a
     coluna a estourar, e a página inteira passa a rolar de lado. */
  grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr));
}
.config{
  display:flex; align-items:flex-start; gap:14px; padding:16px 18px;
  background:var(--branco); border:1px solid var(--traco); border-radius:var(--r-g);
  color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s;
}
a.config:hover{border-color:var(--traco2); box-shadow:var(--sombra); text-decoration:none}
a.config:hover b{color:var(--indigo-fte)}
.config.futura{background:var(--leve); border-style:dashed}
.marca-config{
  flex:none; width:38px; height:38px; border-radius:var(--r-p); display:flex;
  align-items:center; justify-content:center; font-size:18px;
  background:var(--indigo-sup); color:var(--indigo);
}
.config.futura .marca-config{background:var(--branco); color:var(--fraca)}
.corpo-config{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.corpo-config b{font-size:14px; font-weight:700}
.corpo-config p{font-size:12.5px; color:var(--suave); line-height:1.45; margin:0}
.nota-config{font-size:11.5px; color:var(--fraca); font-style:italic; margin-top:2px}
.conta-config{flex:none; display:flex; flex-direction:column; align-items:flex-end; line-height:1.2}
.conta-config b{font-family:var(--dado); font-size:19px; font-weight:700; font-variant-numeric:tabular-nums}
.conta-config span{font-size:11px; color:var(--fraca)}

/* ------------------------------------------- FILTRO DE MÚLTIPLA ESCOLHA
   A pílula é o rótulo da caixa que ela envolve: a caixa some da vista mas
   continua sendo ela quem marca, quem recebe o foco do teclado e quem vai
   no formulário. */
label.pf{cursor:pointer; user-select:none}
label.pf input{position:absolute; opacity:0; width:0; height:0; pointer-events:none}
label.pf:has(input:focus-visible){box-shadow:var(--anel)}
label.pf.ativa::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--indigo); flex:none;
}
.limpar-filtros{width:auto; padding:7px 13px; font-size:12.5px; gap:6px; text-decoration:none}
.limpar-filtros:hover{text-decoration:none}
.limpar-filtros svg{font-size:13px}

/* --- formulário dentro do modal --- */
.confirmador .grade{gap:12px}
.confirmador .campo textarea{width:100%}
.confirmador form h2{margin-bottom:4px}
.sub-modal{font-size:12.5px; color:var(--suave); line-height:1.5; margin-bottom:18px}
.entrada.cor{padding:0 6px}
.entrada.cor input[type=color]{
  width:100%; height:40px; border:0; background:transparent; cursor:pointer; padding:0;
}


/* ======================================================================
   aviso passageiro
   ====================================================================== */

/* --- aviso passageiro --- */
#avisos-vivos{position:fixed; right:18px; bottom:18px; z-index:60;
              display:flex; flex-direction:column; gap:8px; max-width:min(420px,92vw)}
#avisos-vivos .aviso{box-shadow:var(--sombra-alta); transition:opacity .4s, transform .4s}
#avisos-vivos .aviso.saindo{opacity:0; transform:translateY(6px)}
.topo-cartao{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.topo-cartao .titulo-secao{margin-bottom:0}
.topo-cartao .botao{width:auto; padding:9px 14px; font-size:13px; text-decoration:none}
.topo-cartao .botao:hover{text-decoration:none}
/* Espaço entre os cartões empilhados de uma ficha. */
form + .cartao, .cartao + .cartao{margin-top:14px}
.cartao + form{margin-top:14px}

/* ======================================================================
   conversa do registro, sino e caixa de avisos
   ====================================================================== */

/* ------------------------------------------------------ CONVERSA DO REGISTRO */
.linha-conversa{display:flex; flex-direction:column; gap:12px; margin:6px 0 16px}
.fala{display:flex; gap:11px; align-items:flex-start}
.fala .quem{
  width:34px; height:34px; border-radius:50%; flex:none; object-fit:cover;
  display:flex; align-items:center; justify-content:center;
  background:var(--indigo-sup); color:var(--indigo); font-size:11px; font-weight:700;
}
.fala .corpo-fala{
  background:var(--leve); border-radius:4px 12px 12px 12px; padding:9px 13px; min-width:0; flex:1;
}
.fala.minha .corpo-fala{background:var(--indigo-sup)}
.fala.do-sistema .corpo-fala{background:transparent; border:1px dashed var(--traco); color:var(--suave)}
.cabeca-fala{display:flex; align-items:baseline; gap:8px; margin-bottom:2px}
.cabeca-fala b{font-size:12.5px}
.cabeca-fala span{font-size:11px; color:var(--fraca)}
.texto-fala{font-size:13.5px; line-height:1.5; overflow-wrap:anywhere}
.texto-fala .mencao{color:var(--indigo-fte); font-weight:700}

.escrever{position:relative; display:flex; flex-direction:column; gap:8px}
.escrever textarea{
  width:100%; border:1px solid var(--traco); background:var(--branco); border-radius:var(--r);
  padding:11px 14px; font-family:inherit; font-size:13.5px; color:var(--tinta);
  resize:vertical; outline:none; transition:.12s;
}
.escrever textarea:focus{border-color:var(--indigo); box-shadow:var(--anel)}
.pe-escrever{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.pe-escrever .botao{width:auto; padding:9px 16px; font-size:13.5px}
.mencoes-lista{bottom:auto; top:auto; margin-top:2px}

/* --- sino e caixa de entrada --- */
.sino-avisos{
  position:relative; width:38px; height:38px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:var(--fraca);
  border:1px solid var(--traco); background:var(--branco); flex:none;
}
.sino-avisos:hover{color:var(--indigo); border-color:var(--traco2); text-decoration:none}
.sino-avisos.tem{color:var(--indigo)}
.conta-sino{
  position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--rubi); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--branco);
}
.lista-avisos{display:flex; flex-direction:column; gap:9px}
.aviso-item{
  display:flex; gap:12px; align-items:flex-start; padding:13px 15px;
  background:var(--branco); border:1px solid var(--traco); border-radius:var(--r-g);
}
.aviso-item.novo{border-left:3px solid var(--indigo)}
.aviso-item .quem{
  width:36px; height:36px; border-radius:50%; flex:none; object-fit:cover;
  display:flex; align-items:center; justify-content:center;
  background:var(--indigo-sup); color:var(--indigo); font-size:12px; font-weight:700;
}
.corpo-aviso{flex:1; min-width:0}
.cabeca-aviso{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px}
.cabeca-aviso b{font-size:13px}
.cabeca-aviso .quando{font-size:11px; color:var(--fraca); margin-left:auto}
.texto-aviso{font-size:13px; color:var(--suave); line-height:1.5}
/* Só o botão de ação da linha, o "marcar como lida". Escrito por exclusão,
   esta regra pegava qualquer botão que entrasse na lista depois: a etiqueta
   da conversa virou um quadrado de 28px com o nome derramando por fora. */
.aviso-item .marcar-lida{
  border:1px solid var(--traco); background:var(--branco); border-radius:8px; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center; color:var(--fraca); cursor:pointer; flex:none;
}
.aviso-item .marcar-lida:hover{border-color:var(--verde); color:var(--verde); background:var(--verde-sup)}
/* O nome de quem está na conversa é botão porque abre a janela do chat, e não
   uma tela; a etiqueta dele fica logo abaixo, em .etiqueta-pessoa.clicavel. */
.cabeca-aviso .como-link{white-space:nowrap; text-decoration:none; font-weight:inherit}
.cabeca-aviso .como-link:hover{text-decoration:underline}
.prefixo-arroba{color:var(--fraca); font-weight:600; margin-right:-4px}
.mencoes-lista .txt span{font-family:var(--dado); font-size:11px; color:var(--indigo)}
.recibo{font-size:11px; color:var(--fraca); margin-top:5px; font-family:var(--dado)}
.aviso-item .quem svg{font-size:16px}


/* ======================================================================
   páginas de erro e valores escondidos
   ====================================================================== */

/* ------------------------------------------------------ páginas de erro */
/* O número grande e apagado dá o tom: é um aviso, não um susto. A folha
   branca do servidor com "Not Found" em serifa parece o sistema ter caído, e
   ainda conta a versão do Apache para quem estiver sondando. */
.numero-erro{
  display:block; font-family:var(--dado); font-size:56px; font-weight:700;
  line-height:1; color:var(--traco2); margin-bottom:6px;
}
.tela-erro{
  min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; text-align:center; padding:24px;
  background:var(--nuvem); color:var(--tinta);
}
.tela-erro .logo-erro{width:150px; height:auto; margin-bottom:18px}
.tela-erro .botao{width:auto; margin-top:16px}
.vazio .numero-erro{margin-bottom:10px}

/* ------------------------------------------------- esconder os valores */
/* O dashboard fica aberto enquanto alguém passa pela mesa, e é a tela que
   mostra saldo, inadimplência e funil. O borrão esconde o número sem mexer no
   tamanho de nada: a tela continua idêntica, só ilegível, e por isso não há
   pulo quando se mostra de novo. */
/* No funil o dinheiro está espalhado por dezenas de cartões, e marcar cada
   um daria uma classe a mais em cada linha do laço. Ali vale a estrutura:
   .somas e .valores existem só para mostrar dinheiro. */
.valores-ocultos .segredo,
.valores-ocultos .resumo-funil b,
.valores-ocultos .resumo-funil .conta,
.valores-ocultos .somas,
.valores-ocultos .negocio .valores{
  filter:blur(7px);
  user-select:none; -webkit-user-select:none;
  pointer-events:none;
}
.valores-ocultos .segredo *,
.valores-ocultos .somas *,
.valores-ocultos .negocio .valores *{pointer-events:none}
/* Na impressão continua escondido: quem apagou os números da tela não quer
   que a folha os traga de volta. Para imprimir com valores, é só mostrar
   antes. */

/* Na barra do topo, ao lado do sino, com a mesma forma: são os dois
   controles que acompanham a pessoa de tela em tela. */
.olho-valores{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:var(--fraca); cursor:pointer;
  border:1px solid var(--traco); background:var(--branco); flex:none;
}
.olho-valores:hover{color:var(--indigo); border-color:var(--traco2)}
.valores-ocultos .olho-valores{color:var(--indigo); border-color:var(--acento-borda,#BFE2ED)}
.olho-valores .olho-fechado,
.valores-ocultos .olho-valores .olho-aberto{display:none}
.valores-ocultos .olho-valores .olho-fechado{display:flex}


/* ======================================================================
   pessoas e e-mails como etiqueta, tela dentro de tela
   ====================================================================== */

/* ------------------------------------------- destinatários como etiqueta */
/* O formato que todo mundo já conhece do e-mail: digita, escolhe, e o nome
   vira uma etiqueta com um x. Uma lista de caixas de seleção diz "marque tudo
   que se aplica"; a pergunta aqui é outra, "para quem vai". */
.destinatarios{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  min-height:44px; padding:7px 10px; background:var(--leve);
  border:1px solid var(--traco); border-radius:var(--r); cursor:text;
}
.destinatarios:focus-within{background:var(--branco); border-color:var(--indigo); box-shadow:var(--anel)}
.destinatarios.travado{background:var(--leve); cursor:default}
.destinatarios .etiquetas{display:contents}
.destinatarios input[type=text]{
  flex:1; min-width:180px; border:0; background:none; outline:none;
  font:inherit; font-size:14px; color:var(--tinta); padding:4px 0;
}
.etiqueta-pessoa{
  display:inline-flex; align-items:center; gap:7px; max-width:100%;
  padding:3px 5px 3px 3px; border-radius:999px;
  background:var(--branco); border:1px solid var(--traco2);
  font-size:13px; font-weight:600; color:var(--tinta);
}
.etiqueta-pessoa .bolinha{
  flex:none; width:22px; height:22px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:10px; font-weight:700;
  background:var(--indigo-sup); color:var(--indigo-fte);
}
.etiqueta-pessoa button{
  border:0; background:none; padding:0 4px; font-size:16px; line-height:1;
  color:var(--fraca); cursor:pointer;
}
.etiqueta-pessoa button:hover{color:var(--rubi)}
/* A mesma etiqueta serve de botão quando abre alguma coisa: na Central de
   mensagens ela é quem leva à conversa. */
.etiqueta-pessoa.clicavel{
  padding:3px 11px 3px 3px; cursor:pointer; font:inherit; font-size:13px; font-weight:600;
  white-space:nowrap; width:auto; height:auto; flex:none;
}
.etiqueta-pessoa.clicavel:hover{border-color:var(--indigo); color:var(--indigo-fte)}
.etiqueta-pessoa img.bolinha{object-fit:cover}

/* Barra de peso: quanto uma categoria representa do total gasto. Número e
   barra juntos, porque "18%" diz o quanto e a barra diz contra o quê. */
.barra-peso{
  display:inline-block; vertical-align:middle; width:110px; height:6px; margin-right:8px;
  background:var(--leve); border-radius:999px; overflow:hidden;
}
.barra-peso span{display:block; height:100%; background:var(--indigo); border-radius:999px}
.etiqueta-pessoa .bolinha svg{width:13px; height:13px}
a.etiqueta-pessoa.clicavel{text-decoration:none; color:var(--tinta)}
a.etiqueta-pessoa.clicavel:hover{text-decoration:none; color:var(--indigo-fte)}
.destinatarios .sugestoes{top:calc(100% + 4px)}
.destinatarios .sugestoes .bolinha{
  flex:none; width:28px; height:28px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:700;
  background:var(--indigo-sup); color:var(--indigo-fte);
}

/* ------------------------------------------------------- e-mail como etiqueta */
.etiq-email{
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  padding:3px 10px 3px 7px; border:0; border-radius:999px;
  background:var(--indigo-sup); color:var(--indigo-fte);
  font-family:inherit; font-size:12.5px; font-weight:600; line-height:1.5;
  text-align:left; align-self:flex-start; cursor:pointer; transition:.12s;
}
.etiq-email svg{width:13px; height:13px; flex:none}
.etiq-email:hover{background:var(--indigo); color:#fff}
.etiq-email.sem-acao{background:var(--leve); color:var(--suave); cursor:default}
.etiq-email.sem-acao:hover{background:var(--leve); color:var(--suave)}
.pessoa .quem .etiq-email{margin-top:3px; word-break:break-all}

/* --- tela dentro de tela --- */
.confirmador.janela{
  width:min(880px,95vw); height:min(720px,92vh); padding:0;
  display:flex; flex-direction:column; overflow:hidden;
}
.cabeca-janela{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; border-bottom:1px solid var(--traco); background:var(--leve);
}
.cabeca-janela b{font-size:14px}
.cabeca-janela button{
  border:0; background:transparent; color:var(--fraca); font-size:20px; cursor:pointer;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center; padding:0;
}
.cabeca-janela button:hover{color:var(--tinta)}
.confirmador.janela iframe{flex:1; width:100%; border:0; background:var(--nuvem)}
body.em-popup{background:var(--nuvem)}
body.em-popup .conteudo{padding:18px}
body.em-popup .cab-pag h1{font-size:18px}
body.em-popup .trilha{display:none}


/* ======================================================================
   busca geral da barra do topo
   ====================================================================== */

/* --- busca geral do topo --- */
.busca{position:relative}
.atalho-busca{
  font-family:var(--dado); font-size:10px; color:var(--fraca); border:1px solid var(--traco2);
  border-radius:5px; padding:1px 6px; background:var(--branco); flex:none;
}
.busca:focus-within .atalho-busca{opacity:0}
.achados{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:50;
  background:var(--branco); border:1px solid var(--traco); border-radius:var(--r-g);
  box-shadow:var(--sombra-alta); max-height:min(440px,70vh); overflow-y:auto; padding:6px;
}
.grupo-achado{
  display:flex; align-items:center; gap:6px; font-family:var(--dado); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fraca); padding:10px 10px 4px;
}
.grupo-achado svg{font-size:12px}
.achado{
  display:flex; flex-direction:column; gap:1px; padding:8px 11px; border-radius:var(--r-p);
  color:inherit; text-decoration:none; line-height:1.35;
}
.achado:hover,.achado.marcado{background:var(--indigo-sup); text-decoration:none}
.achado b{font-size:13px}
.achado span{font-size:11.5px; color:var(--fraca);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nada-achado{font-size:12.5px; color:var(--fraca); padding:14px; text-align:center}

/* --- logotipo como caminho de volta --- */
.ir-inicio{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none;
           border-radius:var(--r-p); min-width:0}
.ir-inicio:hover{text-decoration:none; opacity:.75}


/* ======================================================================
   página de texto longo (manual, ajuda, documentação)
   ====================================================================== */

/* ---------------------------------------------------------------- MANUAL
   Duas colunas, com o sumário grudado ao lado: manual longo lido em coluna
   única obriga a rolar até o topo a cada troca de assunto, e é justamente aí
   que a pessoa desiste e abre um chamado perguntando o que estava escrito. */
.manual{display:grid; grid-template-columns:232px minmax(0,1fr); gap:16px; align-items:start}
.sumario-manual{position:sticky; top:16px; background:var(--branco);
  border:1px solid var(--traco); border-radius:var(--r-g); padding:16px 18px}
.sumario-manual > b{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fraca); margin-bottom:10px}
.sumario-manual ol{margin:0 0 12px; padding-left:20px; display:flex; flex-direction:column; gap:8px;
  font-size:14px}
.sumario-manual a{color:var(--suave); text-decoration:none}
.sumario-manual a:hover{color:var(--indigo-fte); text-decoration:underline}
.texto-manual .cartao{scroll-margin-top:16px}
.texto-manual .cartao + .cartao{margin-top:14px}
.texto-manual h2{margin:0 0 4px; font-size:19px}
.texto-manual h3{margin:18px 0 6px; font-size:15px; color:var(--tinta)}
.texto-manual p{margin:0 0 10px; max-width:68ch; line-height:1.62; color:var(--tinta)}
.resumo-manual{color:var(--suave) !important; margin-bottom:14px !important}
.lista-manual, .passos-manual{margin:0 0 12px; padding-left:22px; max-width:68ch;
  display:flex; flex-direction:column; gap:8px; line-height:1.55}
.passos-manual li::marker{color:var(--indigo); font-weight:700}
.defs-manual{margin:0 0 4px; max-width:68ch}
.defs-manual dt{font-weight:700; margin-top:12px}
.defs-manual dd{margin:2px 0 0; color:var(--suave); line-height:1.55}

@media (max-width:900px){
  .manual{grid-template-columns:1fr}
  .sumario-manual{position:static}
}