/* CRM da Nimu Cloud. Usa /styles.css (identidade A: papel, grafite, pedra, luz) e acrescenta só o que é do CRM.
   Verde só na luz de "ligado" (.led.acesa); âmbar (.led.atencao) para "em andamento"; coral (.led.falha) para erro. */

[hidden]{display:none!important}

body.crm{font-size:16px;line-height:1.5}
.crm main{outline:0}
.crm [tabindex="-1"]:focus{outline:0}
.crm p{max-width:72ch}
.crm h1{font-size:clamp(30px,3.4vw,40px);line-height:1.08;letter-spacing:-0.035em;max-width:none}
.crm h2{font-size:20px;line-height:1.25;letter-spacing:-0.015em;max-width:none;text-wrap:pretty}
.crm h3{font-size:16px;line-height:1.3;letter-spacing:-0.005em}
.crm .dica{font-size:14px}

/* ---------- pular para o conteúdo ---------- */
.pular{position:absolute;left:16px;top:-80px;z-index:50;padding:10px 18px;border-radius:999px;background:var(--grafite);color:var(--papel);font-size:15px;font-weight:600;text-decoration:none}
.pular:focus{top:12px}

/* ---------- cabeçalho e abas ---------- */
.crm .cabecalho{position:relative}
@media (min-width:960px){.crm .cabecalho{position:sticky}}
.crm .cabecalho .wrap{flex-wrap:wrap;gap:12px 20px;min-height:68px;padding-top:12px;padding-bottom:12px}
.crm .marca{margin-right:0}
.marca-crm{margin-left:1px;padding-left:12px;border-left:1px solid var(--linha);font-size:15px;font-weight:600;line-height:30px;color:var(--pedra)}
.crm #sair{margin-left:auto}
/* as abas quebram linha em vez de rolar de lado: no celular as sete aparecem, nenhuma fica fora da tela */
.abas{order:3;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:22px;background:var(--aluminio)}
.abas a{flex:none;padding:8px 14px;border-radius:999px;font-size:15px;font-weight:500;line-height:1.35;color:var(--texto);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.abas a:hover{background:var(--branco);color:var(--grafite)}
.abas a:focus-visible{outline-offset:-3px}
.abas a[aria-current=page]{background:var(--grafite);color:var(--papel)}
.abas a[aria-current=page]:focus-visible{outline-color:var(--papel)}
@media (max-width:519px){.abas a{flex:1 1 auto;padding:8px 10px;text-align:center}}
@media (max-width:379px){.abas a{padding:8px 7px;font-size:14px}.abas .contador{margin-left:5px}}
@media (min-width:1100px){.abas{order:0;flex:0 1 auto}}
/* número de e-mails novos na caixa de entrada */
.abas .contador{display:inline-block;min-width:21px;margin-left:7px;padding:0 6px;border-radius:999px;background:var(--grafite);color:var(--papel);font-size:12px;font-weight:600;line-height:19px;text-align:center;font-variant-numeric:tabular-nums;vertical-align:1px}
.abas a[aria-current=page] .contador{background:var(--papel);color:var(--grafite)}
/* aviso de "não deu para sair": linha própria embaixo do cabeçalho; vazio, não ocupa espaço */
.crm .cabecalho .sair-msg{order:4;flex:1 1 100%;margin:0}
.crm .cabecalho .sair-msg:empty{position:absolute}
@media (min-width:960px){.crm .cabecalho .sair-msg{margin-left:auto;text-align:right}}

/* ---------- telas ---------- */
.abrindo{margin:0;padding:64px 0;color:var(--pedra)}
.tela{padding:36px 0 96px}
.tela-topo{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin-bottom:28px}
.tela-desc{margin:8px 0 0;color:var(--pedra)}
.tela-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.hora{margin:0;font-size:14px;color:var(--pedra);font-variant-numeric:tabular-nums}
.bloco + .bloco{margin-top:44px}
.bloco > h2{margin:0 0 14px}
.calmo{margin:0;color:var(--pedra)}
.texto-erro{color:var(--coral)}
.vazio{color:var(--pedra)}
.quebra{overflow-wrap:anywhere}
.inteiro{white-space:nowrap}
/* o endereço comprido (até 64 letras antes do @) quebra em qualquer ponto: com break-word, ele não
   quebra na conta da largura mínima, e a grade ou a linha flexível que o contém empurra a página
   para o lado no celular. Nas tabelas, ele rola junto com a tabela, sem espremer a coluna. */
.email{overflow-wrap:anywhere}
.tabela .email{overflow-wrap:break-word}
.sub{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--pedra)}
.estado{display:inline-flex;align-items:center;gap:8px}
.sub-estado{display:flex;align-items:center;gap:8px;margin-top:2px;font-size:13px;line-height:1.35;color:var(--pedra)}
/* "dados pendentes" na lista: texto e luz, nunca só a cor */
.sub-estado.pendente{font-weight:600;color:var(--texto)}
.linha-dado{display:block}
.total-linhas{margin:0 0 10px;font-size:15px;color:var(--pedra)}

/* mensagens (vazias continuam no lugar: são regiões aria-live) */
.msg{margin:0;font-size:15px;font-weight:500;color:var(--texto)}
.msg:not(:empty){margin-top:12px}
.msg[data-tipo=ok]{color:var(--grafite);font-weight:600}
.msg[data-tipo=erro]{color:var(--coral)}
/* resultado que não é o de sempre (a API mandou "aviso"): âmbar, a cor de "pede atenção" */
.msg[data-tipo=aviso]{color:var(--ambar-texto);font-weight:600}
.tela > .msg:not(:empty){margin:-12px 0 20px}

/* ---------- botões a mais ---------- */
.botao.pequeno{min-height:40px;padding:0 18px;font-size:15px}
.botao-vazio.perigo{color:var(--coral)}
.botao-vazio.perigo:hover{border-color:var(--coral)}
.botao-cheio.perigo{background:var(--coral);color:var(--branco)}
.botao-cheio.perigo:hover{background:#9E2F1D}
.link-botao{padding:0;border:0;background:none;font:inherit;font-weight:600;color:inherit;text-decoration:underline;text-decoration-color:var(--linha);text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
.link-botao:hover{text-decoration-color:var(--grafite)}
.link-calmo{color:inherit;text-decoration:underline;text-decoration-color:var(--linha);text-decoration-thickness:1.5px}
.link-calmo:hover{text-decoration-color:var(--grafite)}

/* ---------- formulários do CRM (sem o cartão branco da landing) ---------- */
.crm .form-plano{background:none;border:0;border-radius:0;padding:0}
.crm .form-plano .botao{width:auto}
.crm .form-plano .campo{margin-bottom:16px}
.crm input[type=search],.crm textarea,.crm .form-plano input[type=text],.crm .form-plano select{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--linha);border-radius:var(--raio);background:var(--branco);font:inherit;font-size:16px;color:var(--grafite)}
.crm input[type=search]{-webkit-appearance:none;appearance:none}
.crm textarea{display:block;min-height:96px;padding:12px 14px;line-height:1.5;resize:vertical}
.crm input[type=search]:hover,.crm textarea:hover,.crm .form-plano select:hover{border-color:#BFC1BA}
.crm input:focus-visible,.crm select:focus-visible,.crm textarea:focus-visible{border-color:var(--grafite);outline:2px solid var(--grafite);outline-offset:2px;border-radius:var(--raio)}
.crm textarea[aria-invalid=true],.crm .form-plano input[aria-invalid=true]{border-color:var(--coral)}
.crm .dlg-texto.dlg-atual{margin-top:-8px;font-weight:600;color:var(--grafite)}
.crm .dlg-texto.dlg-pendente{margin-top:-8px;font-weight:500;color:var(--ambar-texto)}
.escolha{position:relative;display:block}
.escolha select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer}
.escolha::after{content:"";position:absolute;top:50%;right:18px;width:8px;height:8px;border-right:2px solid var(--grafite);border-bottom:2px solid var(--grafite);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.busca{display:grid;gap:0 16px;align-items:end;margin-bottom:20px}
.busca .botao{justify-self:start;margin-bottom:16px}
@media (min-width:760px){.busca{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.busca .campo-busca{grid-column:1 / -1}.busca .botao{min-height:48px}}
@media (min-width:1100px){.busca{grid-template-columns:minmax(0,1fr) 14em 13em auto}.busca .campo-busca{grid-column:auto}}
.filtro{max-width:20em;margin-bottom:12px}

/* ---------- portões: entrar, código, sem acesso ---------- */
.portao{max-width:520px;padding:56px 0 96px}
.portao h1{font-size:clamp(34px,4.6vw,48px);text-wrap:balance}
.portao-texto{margin:16px 0 28px;font-size:17px;color:var(--texto)}
.portao form .msg:not(:empty),.portao > .msg:not(:empty){margin-top:16px}
.portao-rodape{margin:20px 0 0;font-size:15px;color:var(--pedra)}
.portao-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
/* comando do servidor (perdeu o celular): quebra em qualquer ponto para caber no celular */
.crm code.comando{padding:1px 6px;border-radius:6px;background:var(--aluminio);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;color:var(--grafite);overflow-wrap:anywhere}
.comando-var{font-style:italic}
.crm input[type=text].entrada-codigo{font-size:24px;letter-spacing:.12em;font-variant-numeric:tabular-nums}

/* ---------- resumo: lembrete do autenticador desligado ---------- */
.lembrete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin:0 0 24px;padding:10px 10px 10px 20px;border-radius:22px;background:var(--aluminio)}
.crm .lembrete-texto{flex:1 1 24em;max-width:none;margin:0;font-size:15px;color:var(--texto)}
@media (max-width:519px){.lembrete{padding:14px 16px}}

/* ---------- resumo: o rack das vagas ---------- */
.rack{margin:0 0 48px;padding:22px 20px 20px;border-radius:24px;background:var(--grafite);color:var(--papel)}
@media (min-width:760px){.rack{padding:28px 32px 26px}}
.rack-topo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px}
.crm .rack-titulo{margin:0;font-size:24px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.rack-sub{margin:0;font-size:15px;color:#C4C7CD}
.baias-caixa{margin-top:20px;border:1px solid #30343C;border-radius:16px;overflow:hidden}
.baias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:-1px 0 0 -1px;padding:0;list-style:none}
@media (min-width:560px){.baias{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1100px){.baias{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}}
.baia{min-width:0;border-top:1px solid #30343C;border-left:1px solid #30343C}
.baia-link,.baia-vazia{display:flex;flex-direction:column;gap:3px;min-height:100px;height:100%;padding:14px 14px 13px;color:inherit;text-decoration:none}
.baia-link{transition:background-color .2s}
.baia-link:hover{background:#1E2127}
.baia-link:focus-visible{outline:2px solid var(--papel);outline-offset:-5px;border-radius:12px}
.baia-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:16px;margin-bottom:7px}
.baia-num{font-size:13px;line-height:1;color:#9AA0A9;font-variant-numeric:tabular-nums}
.baia-nome{overflow:hidden;font-size:16px;font-weight:600;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.baia-estado{font-size:14px;line-height:1.3;color:#C4C7CD}
.baia.livre .baia-nome{font-weight:500;color:#9AA0A9}
.soquete{flex:none;width:10px;height:10px;border:1.5px dashed #6E737C;border-radius:50%}
.rack .led.apagada{background:#6E737C}
.led.falha{background:var(--coral);box-shadow:0 0 0 3px rgba(185,58,38,.16)}
.rack .led.falha{background:#E2634B;box-shadow:0 0 0 3px rgba(226,99,75,.22),0 0 10px rgba(226,99,75,.4)}
.rack-explica{margin:18px 0 0;font-size:14px;color:#C4C7CD}
.legenda{display:flex;flex-wrap:wrap;gap:8px 22px;margin:8px 0 0;padding:0;list-style:none;font-size:14px;color:#C4C7CD}
.legenda li{display:inline-flex;align-items:center;gap:9px}
/* a única animação sem clique: as luzes acendem uma vez quando o resumo abre */
@keyframes acende{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.rack.ligando .baia .led{animation:acende .45s var(--mola) both}
.rack.ligando .baia:nth-child(2) .led{animation-delay:.05s}
.rack.ligando .baia:nth-child(3) .led{animation-delay:.1s}
.rack.ligando .baia:nth-child(4) .led{animation-delay:.15s}
.rack.ligando .baia:nth-child(5) .led{animation-delay:.2s}
.rack.ligando .baia:nth-child(6) .led{animation-delay:.25s}
.rack.ligando .baia:nth-child(7) .led{animation-delay:.3s}
.rack.ligando .baia:nth-child(8) .led{animation-delay:.35s}
.rack.ligando .baia:nth-child(9) .led{animation-delay:.4s}
.rack.ligando .baia:nth-child(n+10) .led{animation-delay:.45s}

/* ---------- resumo: atenção, números, eventos ---------- */
.resumo-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
@media (min-width:1000px){.resumo-grade{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}}
.atencao-lista{margin:0;padding:0;list-style:none;border-top:1px solid var(--linha)}
.atencao-item{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px;padding:12px 0;border-bottom:1px solid var(--linha)}
/* o nome do cliente pode ser uma palavra só de até 80 letras (seguranca.NomeValido) */
.atencao-texto{flex:1 1 20em;min-width:0;overflow-wrap:anywhere}
.atencao-item.forte .atencao-texto{font-weight:600}
.livros{display:grid;gap:28px 40px}
@media (min-width:600px){.livros{grid-template-columns:repeat(2,minmax(0,1fr))}}
.livro h3{margin:0 0 8px}
.contagem{width:100%;border-collapse:collapse;font-size:15px}
.contagem th,.contagem td{padding:7px 0;border-top:1px solid var(--linha);font-weight:400;text-align:left;vertical-align:baseline}
.contagem td{padding-left:12px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.contagem .rotulo{display:inline-flex;align-items:center;gap:9px}
.contagem .link-calmo{display:inline-block;padding:2px 0}
.contagem tr.zero th,.contagem tr.zero td{color:var(--pedra)}
.contagem tr.zero td{font-weight:400}
.contagem tr.soma th,.contagem tr.soma td{border-top-color:#C9CBC4;font-weight:600}
.contagem tr.alerta td,.contagem tr.erro-conta td{color:var(--coral)}

/* linha do tempo e eventos */
.tempo{margin:0;padding:0;list-style:none;border-top:1px solid var(--linha)}
.tempo li{display:grid;grid-template-columns:9.6em minmax(0,1fr);gap:2px 16px;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15px;line-height:1.45}
.tempo time{color:var(--pedra);font-variant-numeric:tabular-nums}
.tempo-quem{display:block;width:fit-content;padding:2px 0;font-weight:600;overflow-wrap:anywhere}
.tempo-tipo{display:block;font-size:13px;color:var(--pedra)}
.tempo li.tempo-erro .tempo-texto{color:var(--coral)}
@media (max-width:519px){.tempo li{grid-template-columns:minmax(0,1fr)}}

/* ---------- tabelas ---------- */
.tabela-caixa{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
.tabela th,.tabela td{padding:10px 16px 10px 0;border-bottom:1px solid var(--linha);font-weight:400;text-align:left;vertical-align:top}
.tabela th:last-child,.tabela td:last-child{padding-right:0}
.tabela thead th{padding-top:0;border-bottom-color:#C9CBC4;font-size:14px;font-weight:600;line-height:1.3;color:var(--pedra);vertical-align:bottom}
.tabela tbody th{font-weight:600}
.tabela.registro tbody th{font-weight:400}
.tabela .num{text-align:right;font-variant-numeric:tabular-nums}
.tabela time{font-variant-numeric:tabular-nums}
.tabela .botao.pequeno{min-height:36px;padding:0 14px;font-size:14px}
/* celular: cada linha vira um bloco com o nome da coluna ao lado do valor */
@media (max-width:719px){
  .tabela,.tabela tbody,.tabela tr,.tabela th,.tabela td{display:block}
  .tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabela tr{padding:12px 0;border-bottom:1px solid var(--linha)}
  .tabela th,.tabela td{padding:2px 0;border:0}
  .tabela tbody th{padding-bottom:6px;font-size:16px}
  .tabela td{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);gap:12px}
  .tabela td::before{content:attr(data-rotulo);font-size:14px;color:var(--pedra)}
  .tabela td::before{content:attr(data-rotulo) / ""}
  .tabela td.num{text-align:left}
  .tabela td.cel-acao{display:block;padding-top:8px}
  .tabela td.cel-acao::before{content:none}
  .tabela td:has(> .cel:empty){display:none}
  /* aqui a coluna do valor é estreita: o nome comprido quebra em vez de sair da célula */
  .tabela th .cel,.tabela td .cel{overflow-wrap:anywhere}
}
@media (min-width:720px) and (max-width:959px){
  .tabela.larga,.tabela.larga tbody,.tabela.larga tr,.tabela.larga th,.tabela.larga td{display:block}
  .tabela.larga thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabela.larga tr{padding:12px 0;border-bottom:1px solid var(--linha)}
  .tabela.larga th,.tabela.larga td{padding:2px 0;border:0}
  .tabela.larga tbody th{padding-bottom:6px;font-size:16px}
  .tabela.larga td{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:12px}
  .tabela.larga td::before{content:attr(data-rotulo);font-size:14px;color:var(--pedra)}
  .tabela.larga td::before{content:attr(data-rotulo) / ""}
  .tabela.larga td.num{text-align:left}
  .tabela.larga td.cel-acao{display:block;padding-top:8px}
  .tabela.larga td.cel-acao::before{content:none}
  .tabela.larga td:has(> .cel:empty){display:none}
  .tabela.larga th .cel,.tabela.larga td .cel{overflow-wrap:anywhere}
}
.falha-carga{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.falha-carga p{margin:0}

/* ---------- ficha do cliente ---------- */
.volta{margin:0 0 14px;font-size:15px}
.fatos{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:12px;font-size:15px;color:var(--texto)}
.fatos .link{padding:2px 0}
.ficha-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:1000px){
  .ficha-grade{grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto 1fr;grid-template-areas:"principal acoes" "principal notas";gap:32px 56px}
  .ficha-acoes{grid-area:acoes}
  .ficha-principal{grid-area:principal}
  .ficha-notas{grid-area:notas;align-self:start}
}
.painel-lado{padding:22px;border:1px solid var(--linha);border-radius:20px;background:var(--branco)}
.painel-lado > h2{margin:0 0 4px}
.acoes-lista{margin:12px 0 0;padding:0;list-style:none}
.acoes-lista li{display:grid;gap:6px;padding:12px 0;border-top:1px solid var(--aluminio)}
.acoes-lista li:first-child{border-top:0}
.acoes-lista .botao{justify-self:start}
.acao-desc{margin:0;font-size:14px;line-height:1.4;color:var(--pedra)}
.crm .acoes-fora{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--linha);font-size:14px;color:var(--pedra)}
.acoes-fora + .acoes-lista li{padding:8px 0}
.dados{margin:0;border-top:1px solid var(--linha)}
.dados > div{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:2px 20px;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15px}
.dados dt{color:var(--pedra)}
.dados dd{margin:0;overflow-wrap:anywhere}
@media (max-width:519px){.dados > div{grid-template-columns:minmax(0,1fr)}}
.crm .nota-maquina{margin:0 0 12px}
.crm .sub-titulo{margin:24px 0 8px;font-size:15px;color:var(--texto)}
.anteriores{margin:0;padding:0;list-style:none;font-size:15px}
.anteriores li{padding:6px 0;border-bottom:1px solid var(--linha)}
.form-nota .botao{margin-top:2px}
.notas-lista{margin:20px 0 0;padding:0;list-style:none}
.notas-lista li{padding:12px 0;border-top:1px solid var(--linha)}
.crm .nota-texto{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.crm .nota-quem{margin:4px 0 0;font-size:13px;color:var(--pedra)}
#notas > .calmo{margin-top:18px}
/* troca de e-mail esperando a confirmação da pessoa */
.sub-estado.troca-email{align-items:flex-start;margin-top:6px}
.troca-email .led{margin-top:4px}

/* ---------- caixa de entrada e e-mail recebido ---------- */
/* coluna com mínimo zero: sem ela, a coluna "auto" cresce até a palavra mais comprida de dentro */
.recebido-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
@media (min-width:1000px){.recebido-grade{grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start}}
#recebido-dados{margin-bottom:40px}
/* colunas da caixa de entrada: o e-mail comprido de quem mandou não espreme a conta e a situação */
@media (min-width:720px){
  #entrada-lista .tabela{table-layout:fixed}
  #entrada-lista .tabela thead th:nth-child(1){width:29%}
  #entrada-lista .tabela thead th:nth-child(2){width:25%}
  #entrada-lista .tabela thead th:nth-child(3){width:13%}
  #entrada-lista .tabela thead th:nth-child(4){width:18%}
}
/* o texto que a pessoa escreveu: uma folha branca, só texto, quebras de linha como vieram */
.carta{max-width:72ch;padding:20px 22px;border:1px solid var(--linha);border-radius:16px;background:var(--branco);font-size:16px;line-height:1.6;color:var(--grafite);white-space:pre-wrap;overflow-wrap:anywhere}
.carta-resposta{background:none}
.recebido-principal .carta{max-width:none}
@media (max-width:519px){.carta{padding:16px}}
.anexos{margin:0;padding:0;list-style:none;border-top:1px solid var(--linha)}
.anexos li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15px}
.anexos .sub{margin:0;white-space:nowrap}
.crm .anexos-nota{margin-top:10px;font-size:14px}
.respostas{margin:0;padding:0;list-style:none}
.respostas li + li{margin-top:22px}
.crm .resposta-quem{margin:0 0 8px;font-size:14px;color:var(--pedra)}
.crm .resposta-como{margin:6px 0 18px}
.conta-letras{margin:0;font-size:14px;color:var(--pedra);font-variant-numeric:tabular-nums}
.conta-letras.passou{color:var(--coral);font-weight:600}

/* ---------- segurança: o autenticador ---------- */
.autenticador{max-width:880px}
.crm .aut-titulo{display:flex;align-items:center;gap:12px;margin:0;font-size:24px;letter-spacing:-0.02em}
.aut-titulo .led{width:12px;height:12px}
.crm .aut-explica{margin:10px 0 24px;color:var(--texto)}
.aut-ativar{display:grid;gap:28px;padding:22px;border:1px solid var(--linha);border-radius:24px;background:var(--branco)}
@media (min-width:760px){.aut-ativar{grid-template-columns:auto minmax(0,1fr);gap:40px;padding:32px;align-items:start}}
.aut-qr{margin:0;justify-self:center}
.aut-qr img{width:216px;height:216px;border-radius:10px;background:var(--branco)}
.aut-qr figcaption{margin-top:10px;font-size:14px;color:var(--pedra);text-align:center}
.passos{margin:0;padding:0;list-style:none;counter-reset:passo}
.passos > li{position:relative;padding:0 0 22px 42px;counter-increment:passo}
.passos > li + li{padding-top:22px;border-top:1px solid var(--aluminio)}
.passos > li:last-child{padding-bottom:0}
.passos > li::before{content:counter(passo);position:absolute;left:0;width:28px;height:28px;border:1.5px solid var(--linha);border-radius:50%;font-size:14px;font-weight:600;line-height:25px;text-align:center;color:var(--grafite)}
.passos > li + li::before{top:22px}
.crm .passos h3{margin:2px 0 6px;font-size:17px}
.crm .passos p{margin:0;font-size:15px;color:var(--texto)}
.crm .passos .aut-chave{margin:6px 0 12px}
.aut-segredo{font-size:20px;font-weight:600;letter-spacing:.06em;color:var(--grafite);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.passos .msg:not(:empty){margin-top:10px}
/* "Abrir no app autenticador" só faz sentido no próprio celular */
.crm .passos .aut-celular{display:none;margin-top:10px}
@media (hover:none) and (pointer:coarse){.crm .passos .aut-celular{display:block}}
.passos form{margin-top:12px}
.passos .campo{max-width:15em}
.aut-botoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.aut-desligar{max-width:32em;padding-top:24px;border-top:1px solid var(--linha)}
.crm .aut-desligar h3{margin:0 0 6px}
.aut-desligar .calmo{margin-bottom:18px}
.aut-desligar .campo{max-width:15em}
.crm .aut-msg{margin:0}
.crm .aut-msg:not(:empty){margin:-8px 0 24px}
.crm .aut-perdeu{margin:32px 0 0;font-size:14px}
/* a luz acende uma vez quando o autenticador liga */
.led.acendeu{animation:acende .5s var(--mola) both}

/* ---------- diálogos ---------- */
.dialogo{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:28px;border:0;border-radius:24px;background:var(--branco);color:var(--grafite);box-shadow:0 30px 80px rgba(21,23,28,.25)}
.dialogo::backdrop{background:rgba(21,23,28,.45)}
.crm .dialogo h2{margin:0 0 10px;font-size:24px;letter-spacing:-0.02em;text-wrap:balance}
.crm .dlg-texto{margin:0 0 20px;color:var(--texto)}
.dlg-botoes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:20px}
@media (max-width:440px){.dlg-botoes .botao{flex:1 1 100%}}

@media (prefers-reduced-motion:reduce){.rack.ligando .baia .led,.led.acendeu{animation:none}}