/* =====================================================================
   VGA SISTEMA — estilos
   Fontes declaradas aqui e no <link> das páginas.
   ===================================================================== */

:root{
  --azul:#1e40af; --azul2:#2563eb; --azul3:#3b82f6;
  --azul-claro:#eff6ff; --azul-linha:#bfdbfe;
  --roxo:#7c3aed; --roxo-claro:#faf5ff;
  --verde:#059669; --verde2:#10b981; --verde-claro:#ecfdf5; --verde-linha:#a7f3d0;
  --vermelho:#dc2626; --vermelho-claro:#fef2f2; --vermelho-linha:#fecaca;
  --ambar:#d97706; --ambar-claro:#fffbeb; --ambar-linha:#fde68a;
  --tinta:#111827; --c7:#374151; --c6:#4b5563; --c5:#6b7280; --c4:#9ca3af;
  --linha:#e5e7eb; --linha2:#f3f4f6; --fundo:#f5f7fa;
  --escuro:#0f172a; --escuro2:#1e293b; --escuro3:#334155; --escuro-txt:#94a3b8;
  --sombra:0 1px 3px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.04);
  --sombra2:0 4px 16px rgba(16,24,40,.09);
  --r:12px;
  --fonte-ui:'Inter',system-ui,-apple-system,sans-serif;
  --fonte-titulo:'Instrument Sans','Inter',sans-serif;
  --fonte-mono:ui-monospace,'SF Mono',Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--fonte-ui);background:var(--fundo);color:var(--tinta);
  -webkit-font-smoothing:antialiased;font-size:14px}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit}
a{color:var(--azul2)}
:focus-visible{outline:2px solid var(--azul2);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--fonte-mono);font-variant-numeric:tabular-nums}
.oculto{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------- LOGIN */
.tela-login{display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(140deg,var(--escuro) 0%,var(--azul) 100%)}
.login-caixa{background:#fff;border-radius:16px;padding:32px 30px;width:100%;max-width:400px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.35)}
.login-marca{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.login-logo{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--azul2),var(--azul))}
.login-logo i{width:11px;height:11px;border-radius:50%;background:#fff;display:block}
.login-marca b{display:block;font-family:var(--fonte-titulo);font-size:16px;font-weight:700}
.login-marca small{font-size:11.5px;color:var(--c5)}
.login-caixa h1{font-family:var(--fonte-titulo);font-size:21px;font-weight:600;letter-spacing:-.01em}
.login-sub{font-size:13px;color:var(--c5);margin:6px 0 22px;line-height:1.5}
.login-pe{text-align:center;font-size:12.5px;color:var(--c5);margin-top:18px}
.login-rodape{display:flex;justify-content:space-between;gap:10px;margin-top:24px;
  padding-top:14px;border-top:1px solid var(--linha2);
  font-family:var(--fonte-mono);font-size:10.5px;color:var(--c4)}

.campo{margin-bottom:14px}
.campo label{display:block;font-size:11.5px;font-weight:600;color:var(--c6);margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;padding:11px 13px;border:1px solid var(--linha);
  border-radius:9px;font-size:14px;background:#fff}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul2);
  box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.campo .dica{display:block;font-size:11px;color:var(--c4);margin-top:5px}

.alerta{border-radius:9px;padding:11px 13px;font-size:12.5px;line-height:1.5;margin-bottom:16px}
.alerta.erro{background:var(--vermelho-claro);border:1px solid var(--vermelho-linha);color:#7f1d1d}
.alerta.info{background:var(--azul-claro);border:1px solid var(--azul-linha);color:#1e3a8a}
.alerta.ok{background:var(--verde-claro);border:1px solid var(--verde-linha);color:#064e3b}
.alerta.atencao{background:var(--ambar-claro);border:1px solid var(--ambar-linha);color:#78350f}

/* --------------------------------------------------------------- BOTÕES */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;
  border-radius:9px;background:var(--azul2);color:#fff;font-size:13.5px;font-weight:600;
  transition:background .15s;text-decoration:none}
.botao:hover{background:var(--azul)}
.botao.cheio{width:100%}
.botao.pequeno{padding:6px 12px;font-size:12.5px}
.botao.claro{background:#fff;border:1px solid var(--linha);color:var(--c6)}
.botao.claro:hover{background:var(--linha2)}
.botao.verde{background:var(--verde)} .botao.verde:hover{background:#047857}
.botao.vermelho{background:var(--vermelho)} .botao.vermelho:hover{background:#b91c1c}
.botao.cinza{background:var(--linha2);color:var(--c6)} .botao.cinza:hover{background:var(--linha)}
.botao[disabled]{opacity:.45;pointer-events:none}
.botoes{display:flex;gap:8px;flex-wrap:wrap}

/* ------------------------------------------------------------ ESTRUTURA */
.tela-app{display:flex;height:100%;overflow:hidden}

.lateral{width:246px;background:var(--escuro);color:#fff;flex-shrink:0;
  display:flex;flex-direction:column;min-height:0}
.lateral .marca{padding:17px 16px;border-bottom:1px solid var(--escuro2);
  display:flex;align-items:center;gap:11px}
.lateral .marca .lg{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--azul2),var(--azul))}
.lateral .marca .lg i{width:9px;height:9px;border-radius:50%;background:#fff;display:block}
.lateral .marca b{display:block;font-family:var(--fonte-titulo);font-size:14px;font-weight:600;line-height:1.2}
.lateral .marca small{display:block;font-size:10px;color:var(--escuro-txt)}
.lateral nav{padding:10px;flex:1;overflow-y:auto;scrollbar-width:none}
.lateral nav::-webkit-scrollbar{display:none}
.grupo-menu{font-size:9.5px;letter-spacing:.1em;color:#64748b;font-weight:700;padding:13px 9px 6px}
.item-menu{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--escuro-txt);text-align:left;margin-bottom:2px;
  text-decoration:none}
.item-menu svg{width:17px;height:17px;flex-shrink:0}
.item-menu:hover{background:var(--escuro2);color:#fff}
.item-menu.ativo{background:var(--azul2);color:#fff;font-weight:600}
.item-menu .conta{margin-left:auto;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px;
  background:var(--escuro3);color:#e2e8f0}
.item-menu .conta.alerta{background:var(--vermelho);color:#fff}
.item-menu .conta.atencao{background:var(--ambar);color:#fff}
.item-menu.desativado{opacity:.45;cursor:default}
.item-menu.desativado:hover{background:none;color:var(--escuro-txt)}
.lateral .eu{padding:12px;border-top:1px solid var(--escuro2);display:flex;align-items:center;gap:10px}
.lateral .eu .av{width:32px;height:32px;border-radius:9px;background:var(--escuro3);display:grid;
  place-items:center;font-size:11px;font-weight:700;flex-shrink:0}
.lateral .eu b{display:block;font-size:12.5px;font-weight:600;line-height:1.25}
.lateral .eu small{font-size:10.5px;color:var(--escuro-txt)}
.lateral .eu a{color:var(--escuro-txt);display:grid;place-items:center;width:30px;height:30px;
  border-radius:7px}
.lateral .eu a:hover{background:var(--escuro2);color:#fff}

.corpo{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.topo{background:#fff;border-bottom:1px solid var(--linha);height:58px;flex-shrink:0;
  display:flex;align-items:center;gap:12px;padding:0 20px}
.topo h1{font-family:var(--fonte-titulo);font-size:16px;font-weight:600;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sanduiche{display:none;width:34px;height:34px;border-radius:8px;place-items:center;color:var(--c5);flex-shrink:0}
.busca{position:relative;width:230px}
.busca input{width:100%;padding:8px 12px 8px 33px;border-radius:9px;border:1px solid var(--linha);
  font-size:13px;background:var(--fundo)}
.busca input:focus{border-color:var(--azul2);outline:none;background:#fff}
.busca svg{position:absolute;left:10px;top:9px;color:var(--c4)}
main{flex:1;overflow-y:auto;padding:20px 26px;min-height:0;scrollbar-width:none}
main::-webkit-scrollbar{display:none}
/* A largura do conteúdo. Estava em 1180px, o que deixava as laterais
   vazias em tela grande. Agora acompanha a tela, com um teto para a
   linha de texto não ficar longa demais. */
.limite{max-width:var(--largura,1600px);margin:0 auto;width:100%}
@media(min-width:1900px){ :root{--largura:1750px} }

.escurece{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:50}
.escurece.on{display:block}

/* -------------------------------------------------------------- BLOCOS */
.cartao{background:#fff;border:1px solid var(--linha);border-radius:var(--r);
  box-shadow:var(--sombra);margin-bottom:16px;overflow:hidden}
.cartao-topo{padding:15px 17px;border-bottom:1px solid var(--linha2);display:flex;
  align-items:center;gap:11px;flex-wrap:wrap}
.cartao-topo h2{font-family:var(--fonte-titulo);font-size:15px;font-weight:600;flex:1;min-width:150px}
.cartao-topo p{font-size:12px;color:var(--c5);margin-top:2px;font-weight:400}
.cartao-corpo{padding:17px}

.indicadores{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px}
.indicador{background:#fff;border:1px solid var(--linha);border-left:5px solid var(--azul2);
  border-radius:var(--r);padding:16px;box-shadow:var(--sombra)}
.indicador.verde{border-left-color:var(--verde2)}
.indicador.ambar{border-left-color:var(--ambar)}
.indicador.vermelho{border-left-color:var(--vermelho)}
.indicador.roxo{border-left-color:var(--roxo)}
.indicador b{display:block;font-family:var(--fonte-titulo);font-size:26px;font-weight:700;
  letter-spacing:-.02em;line-height:1;color:var(--azul2)}
.indicador.verde b{color:var(--verde)}
.indicador.ambar b{color:var(--ambar)}
.indicador.vermelho b{color:var(--vermelho)}
.indicador.roxo b{color:var(--roxo)}
.indicador span{display:block;font-size:12px;color:var(--c5);font-weight:600;margin-top:5px}

.aviso{border-radius:10px;padding:13px;display:flex;gap:9px;margin-bottom:16px}
.aviso svg{flex-shrink:0;margin-top:1px}
.aviso p{font-size:12.5px;line-height:1.55}
.aviso.info{background:var(--azul-claro);border:1px solid var(--azul-linha)}
.aviso.info svg{color:var(--azul2)} .aviso.info p{color:#1e3a8a}
.aviso.atencao{background:var(--ambar-claro);border:1px solid var(--ambar-linha)}
.aviso.atencao svg{color:#997404} .aviso.atencao p{color:#664d03}
.aviso.ok{background:var(--verde-claro);border:1px solid var(--verde-linha)}
.aviso.ok svg{color:var(--verde)} .aviso.ok p{color:#064e3b}
.aviso.erro{background:var(--vermelho-claro);border:1px solid var(--vermelho-linha)}
.aviso.erro svg{color:var(--vermelho)} .aviso.erro p{color:#7f1d1d}

/* -------------------------------------------------------------- TABELAS */
.tabela{width:100%;border-collapse:collapse;font-size:13.5px}
.tabela th{text-align:left;padding:11px 15px;background:#f9fafb;border-bottom:1px solid var(--linha);
  font-size:11.5px;color:var(--c5);font-weight:700;letter-spacing:.04em;white-space:nowrap}
.tabela td{padding:11px 15px;border-bottom:1px solid var(--linha2);vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.tabela tbody tr:hover{background:#f9fafb}
.tabela .dir{text-align:right}
.tabela .vazio{text-align:center;color:var(--c4);padding:34px 15px;font-size:13px}

.pessoa{display:flex;align-items:center;gap:11px}
.av{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-size:12px;
  font-weight:700;background:var(--azul-claro);color:var(--azul);flex-shrink:0}
.av.verde{background:var(--verde-claro);color:var(--verde)}
.av.ambar{background:var(--ambar-claro);color:var(--ambar)}
.av.vermelho{background:var(--vermelho-claro);color:var(--vermelho)}
.pessoa b{display:block;font-size:13.5px;font-weight:600}
.pessoa small{font-size:11.5px;color:var(--c5)}

.acoes-linha{display:flex;gap:5px;justify-content:flex-end}
.acao{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;
  background:var(--linha2);color:var(--c5)}
.acao:hover{background:var(--azul2);color:#fff}
.acao.perigo:hover{background:var(--vermelho)}

.etiqueta{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:6px;
  background:var(--linha2);color:var(--c6);white-space:nowrap;display:inline-block}
.etiqueta.verde{background:var(--verde-claro);color:var(--verde)}
.etiqueta.vermelho{background:var(--vermelho-claro);color:var(--vermelho)}
.etiqueta.ambar{background:var(--ambar-claro);color:var(--ambar)}
.etiqueta.azul{background:var(--azul-claro);color:var(--azul2)}
.etiqueta.roxo{background:var(--roxo-claro);color:var(--roxo)}

.filtros{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.pilula{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:99px;
  border:1px solid var(--linha);background:#fff;color:var(--c6);text-decoration:none}
.pilula:hover{background:var(--linha2)}
.pilula.on{background:var(--azul-claro);border-color:var(--azul-linha);color:var(--azul2)}

.paginacao{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 17px;border-top:1px solid var(--linha2);font-size:12.5px;color:var(--c5)}

/* ------------------------------------------------------------ FORMULÁRIO */
.form{display:grid;gap:14px}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.quatro{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.secao{border:1px solid var(--linha);border-radius:10px;padding:16px;background:#fafafa}
.secao > h3{font-family:var(--fonte-titulo);font-size:12.5px;font-weight:600;color:var(--azul2);
  margin-bottom:13px;letter-spacing:.02em;text-transform:uppercase}
.painel{border-radius:10px;padding:15px;border-left:4px solid var(--azul2);background:var(--azul-claro)}
.painel.roxo{border-left-color:var(--roxo);background:var(--roxo-claro)}
.painel.neutro{border-left-color:var(--c4);background:#f9fafb}
.painel h4{font-size:12.5px;font-weight:700;color:var(--azul2);margin-bottom:9px}
.painel.roxo h4{color:var(--roxo)} .painel.neutro h4{color:var(--c6)}
.painel .linhas{font-size:12.5px;color:var(--c7);line-height:1.8}
.painel .linhas b{color:var(--tinta);font-weight:700}

.lista-dados{display:grid}
.lista-dados > div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--linha2)}
.lista-dados > div:last-child{border-bottom:0}
.lista-dados dt{font-size:12.5px;color:var(--c5);flex-shrink:0}
.lista-dados dd{font-size:13px;font-weight:600;text-align:right}

/* --------------------------------------------------------------- MODAIS */
.modal-fundo{position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:90;
  display:none;align-items:center;justify-content:center;padding:18px}
.modal-fundo.on{display:flex}
.modal{background:#fff;border-radius:14px;width:100%;max-width:560px;max-height:92%;
  overflow-y:auto;padding:22px;scrollbar-width:none;
  animation:sobe .25s cubic-bezier(.16,1,.3,1)}
.modal::-webkit-scrollbar{display:none}
.modal.largo{max-width:720px}
@keyframes sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.modal-cabeca{margin-bottom:17px}
.modal-cabeca h2{font-family:var(--fonte-titulo);font-size:18px;font-weight:600}
.modal-cabeca p{font-size:12.5px;color:var(--c5);margin-top:4px}
.modal-pe{display:flex;gap:9px;justify-content:flex-end;margin-top:19px;flex-wrap:wrap}

/* ---------------------------------------------------------- MENSAGENS JS */
.recado{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(120%);
  background:var(--escuro);color:#fff;padding:12px 20px;border-radius:10px;font-size:13px;
  font-weight:500;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .28s;
  max-width:90vw;text-align:center}
.recado.on{transform:translateX(-50%) translateY(0)}
.recado.erro{background:var(--vermelho)}
.recado.ok{background:var(--verde)}

.carregando{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

.em-construcao{text-align:center;padding:56px 20px;color:var(--c5)}
.em-construcao .ic{width:56px;height:56px;border-radius:16px;background:var(--azul-claro);
  color:var(--azul2);display:grid;place-items:center;margin:0 auto 16px}
.em-construcao h2{font-family:var(--fonte-titulo);font-size:18px;font-weight:600;color:var(--tinta)}
.em-construcao p{font-size:13px;margin-top:8px;line-height:1.6;max-width:440px;margin-left:auto;margin-right:auto}

/* ------------------------------------------------------------ RESPONSIVO */
@media(max-width:900px){
  .indicadores{grid-template-columns:1fr 1fr}
  .duas,.tres,.quatro{grid-template-columns:1fr}
  .busca{display:none}
}
@media(max-width:820px){
  .lateral{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-100%);
    transition:transform .25s;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .lateral.aberta{transform:none}
  .sanduiche{display:grid}
  .topo{padding:0 13px;height:54px}
  main{padding:14px 13px 34px}
  .tabela .some-no-celular{display:none}
  .tabela th,.tabela td{padding:10px 12px}
  .modal{max-height:88%;padding:18px}
  .indicadores{gap:10px}
  .indicador{padding:13px}
  .indicador b{font-size:22px}
}
@media(max-width:480px){
  .indicadores{grid-template-columns:1fr}
}

/* =====================================================================
   COMPONENTES DA PROSPECÇÃO
   Acrescentados na etapa 3. Usam o mesmo vocabulário visual do resto.
   ===================================================================== */

/* --- primitivos de formulário soltos (fora de .campo) --- */
.lb{display:block;font-size:11.5px;font-weight:600;color:var(--c6);margin-bottom:6px}
.inp{width:100%;padding:10px 12px;border:1px solid var(--linha);border-radius:9px;
  font-size:13.5px;background:#fff;font-family:inherit}
.inp:focus{outline:none;border-color:var(--azul2);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
textarea.inp{line-height:1.6;resize:vertical}
.hint{font-size:11px;color:var(--c4);margin-top:5px;line-height:1.5}

.fieldset{border:1px solid var(--linha);border-radius:10px;padding:15px;background:#fafafa;
  margin-bottom:14px}
.fieldset > legend{font-size:11.5px;font-weight:600;color:var(--azul2);padding:0 7px;
  background:#fff;border:1px solid var(--linha);border-radius:6px}

/* --- linha simples de item --- */
.item-linha{display:flex;align-items:center;gap:11px;padding:11px 14px;
  border-bottom:1px solid var(--linha2)}
.item-linha:last-child{border-bottom:0}
.item-linha .tx{flex:1;min-width:0}
.item-linha .tx b{display:block;font-size:13px;font-weight:600}
.item-linha .tx small{display:block;font-size:11.5px;color:var(--c5);margin-top:2px}
.item-linha .meta{flex-shrink:0}

/* --- fila de arquivos importados --- */
.fila{display:flex;align-items:center;gap:11px;padding:11px 14px;
  border-bottom:1px solid var(--linha2);width:100%;text-align:left}
.fila:last-child{border-bottom:0}
.fila .fn{flex:1;min-width:0}
.fila .fn b{display:block;font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .fn small{display:block;font-size:11.5px;color:var(--c5);margin-top:2px}
.bar{display:block;height:5px;border-radius:99px;background:var(--linha);
  overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--azul2);border-radius:99px;
  transition:width .4s}
.bar i.g{background:var(--verde2)}
.bar i.r{background:var(--vermelho)}

/* --- selo de confiança da leitura --- */
.conf{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:6px;white-space:nowrap;flex-shrink:0}
.conf.hi{background:var(--verde-claro);color:var(--verde)}
.conf.mid{background:var(--ambar-claro);color:var(--ambar)}
.conf.lo{background:var(--vermelho-claro);color:var(--vermelho)}

/* --- campo em conferência, colorido pela confiança --- */
.campo-conf{margin-bottom:12px}
.campo-conf .top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.campo-conf label{font-size:11.5px;font-weight:600;color:var(--c6);flex:1}
.campo-conf input{width:100%;padding:9px 11px;border:1.5px solid var(--linha);
  border-radius:8px;font-size:13.5px;background:#fff}
.campo-conf.hi input{border-color:var(--verde-linha);background:var(--verde-claro)}
.campo-conf.mid input{border-color:var(--ambar-linha);background:#fffdf5}
.campo-conf.lo input{border-color:var(--vermelho-linha);background:#fffafa}
.campo-conf input:focus{outline:none;border-color:var(--azul2);background:#fff;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* --- trecho literal do documento --- */
.trecho{font-family:var(--fonte-mono);font-size:10.5px;color:var(--c5);
  background:var(--linha2);border-radius:5px;padding:5px 8px;margin-top:5px;
  line-height:1.55;word-break:break-word}

/* --- atalhos de teclado --- */
.kbd{font-family:var(--fonte-mono);font-size:10.5px;font-weight:700;background:#fff;
  border:1px solid var(--linha);border-bottom-width:2px;border-radius:5px;
  padding:2px 6px;color:var(--c6)}
.atalhos{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--c5);
  align-items:center}

/* --- blocos de escolha --- */
.blocks{display:grid;gap:9px}
.block{display:flex;align-items:flex-start;gap:11px;padding:13px;border-radius:10px;
  border:1.5px solid var(--linha);background:#fff;text-align:left;width:100%}
.block:hover:not([disabled]){border-color:var(--azul-linha);background:var(--azul-claro)}
.block[aria-pressed="true"]{border-color:var(--azul2);background:var(--azul-claro)}
.block[disabled]{cursor:default;opacity:.85}
.block .mk{width:20px;height:20px;border-radius:6px;flex-shrink:0;display:grid;
  place-items:center;border:1.5px solid var(--linha);background:#fff;color:#fff;margin-top:1px}
.block[aria-pressed="true"] .mk{background:var(--azul2);border-color:var(--azul2)}
.block[aria-pressed="false"] .mk svg{visibility:hidden}
.block .bt{flex:1;min-width:0}
.block .bt b{display:block;font-size:13px;font-weight:600}
.block .bt small{display:block;font-size:11.5px;color:var(--c5);margin-top:3px;line-height:1.5}

/* --- prévia de mensagem --- */
.msgbox{background:var(--escuro);color:#e2e8f0;border-radius:10px;padding:14px;
  font-size:12.5px;line-height:1.7;white-space:pre-line;word-break:break-word;
  max-height:260px;overflow-y:auto}
.msgbox::-webkit-scrollbar{width:5px}
.msgbox::-webkit-scrollbar-thumb{background:var(--escuro3);border-radius:9px}

/* --- nota invertida, para explicar uma trava do sistema --- */
.inv{background:var(--escuro);color:#cbd5e1;border-radius:9px;padding:12px 14px;
  font-size:12px;line-height:1.6;margin-top:13px}
.inv b{color:#fff}

/* --- área para soltar arquivos --- */
.dropzone{border:2px dashed var(--linha);border-radius:var(--r);padding:28px 20px;
  text-align:center;background:#fafafa;position:relative;transition:border-color .2s,background .2s}
.dropzone .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  margin:0 auto 12px;background:var(--azul2);color:#fff}
.dropzone b{display:block;font-size:15px;font-weight:600}
.dropzone p{font-size:12.5px;color:var(--c5);margin:6px 0 14px}

@media(max-width:820px){
  .atalhos{gap:9px;font-size:11px}
  .fila{padding:10px 12px}
  .block{padding:11px}
}

/* =====================================================================
   CONFERÊNCIA LADO A LADO
   O modal tem altura fixa. O documento fica parado à esquerda e só a
   coluna dos campos rola — assim não se perde a referência visual.
   ===================================================================== */
.modal.conferencia{max-width:1240px;width:97vw;height:92vh;
  display:flex;flex-direction:column;padding:0;overflow:hidden}
.modal.conferencia .modal-cabeca{padding:16px 20px;margin:0;
  border-bottom:1px solid var(--linha);flex-shrink:0}
.modal.conferencia form{flex:1;display:flex;flex-direction:column;min-height:0}
.modal.conferencia .atalhos{margin:0;border-radius:0;border-left:0;border-right:0;
  border-top:0;flex-shrink:0}
.modal.conferencia .modal-pe{margin:0;padding:13px 20px;border-top:1px solid var(--linha);
  background:#fff;flex-shrink:0}

.lado-a-lado{flex:1;display:grid;grid-template-columns:minmax(300px,40%) 1fr;
  gap:0;min-height:0;overflow:hidden}
.lado-a-lado .doc-painel{border-right:1px solid var(--linha);background:#f8fafc;
  overflow-y:auto;padding:14px 16px}
.lado-a-lado .doc-painel:empty{display:none}
.lado-a-lado .doc-painel:empty + .campos-painel{grid-column:1/-1}
.lado-a-lado .campos-painel{overflow-y:auto;padding:16px 20px;min-width:0}

/* campos em duas colunas, mais apertados */
.lado-a-lado .campos-painel .duas{grid-template-columns:1fr 1fr;gap:12px}
.lado-a-lado .campo-conf{margin-bottom:10px}
.lado-a-lado .campo-conf input{padding:7px 10px;font-size:13px}
.lado-a-lado .campo-conf .trecho{font-size:10px;padding:4px 6px;margin-top:3px;
  max-height:32px;overflow:hidden}

/* blocos que podem ficar fechados */
.dobra{border:1px solid var(--linha);border-radius:9px;margin-top:12px;overflow:hidden}
.dobra > summary{padding:10px 13px;font-size:12.5px;font-weight:600;cursor:pointer;
  background:#f8fafc;list-style:none;display:flex;align-items:center;gap:8px}
.dobra > summary::-webkit-details-marker{display:none}
.dobra > summary::before{content:'▸';font-size:11px;color:var(--c5);transition:transform .15s}
.dobra[open] > summary::before{transform:rotate(90deg)}
.dobra > summary .qtd{margin-left:auto;font-size:11px;color:var(--c5);font-weight:500}
.dobra > div{padding:12px 13px;border-top:1px solid var(--linha)}

@media(max-width:980px){
  .modal.conferencia{max-width:none;width:100%;height:96vh}
  .lado-a-lado{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .lado-a-lado .doc-painel{border-right:0;border-bottom:1px solid var(--linha);
    max-height:34vh}
  .lado-a-lado .campos-painel .duas{grid-template-columns:1fr}
}

/* =====================================================================
   MENU: as quatro portas de entrada
   Painel, Calculadora, Prospecção e Demandas são por onde se começa.
   O resto é desdobramento, e fica um passo atrás — sem gritar.
   ===================================================================== */
.item-menu.principal{font-weight:600;color:#e2e8f0}
.item-menu.principal::before{content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:3px;height:17px;border-radius:0 3px 3px 0;
  background:rgba(148,163,184,.45)}
.item-menu.principal.ativo::before{background:#fff;height:21px}
.item-menu.principal svg{opacity:1}
.item-menu:not(.principal){padding-left:30px;font-size:12.5px}
.item-menu:not(.principal) svg{opacity:.62;width:16px;height:16px}
.item-menu{position:relative}

/* =====================================================================
   PERMISSÕES POR TELA
   Módulos lado a lado: o modal cresce para os lados, não para baixo.
   ===================================================================== */
.grade-perm{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.grade-perm > .modulo-perm:last-child:nth-child(odd){grid-column:1/-1}

.modulo-perm{border:1px solid var(--linha);border-radius:10px;overflow:hidden;
  background:#fff}
.modulo-perm:has(input:checked){border-color:var(--azul-linha)}

.linha-modulo{display:flex;align-items:center;gap:9px;padding:9px 11px;
  background:#f8fafc;cursor:pointer;border-bottom:1px solid var(--linha)}
.linha-modulo input{width:16px;height:16px;flex-shrink:0;accent-color:var(--azul2)}
.linha-modulo .tx{flex:1;min-width:0}
.linha-modulo .tx b{display:block;font-size:12.5px;font-weight:600;line-height:1.3}
.linha-modulo .tx small{display:block;font-size:10.5px;color:var(--c5);
  line-height:1.3;margin-top:1px}
.linha-modulo .qtd{font-size:10px;font-weight:700;color:var(--c4);flex-shrink:0;
  white-space:nowrap}

.telas-modulo{display:flex;flex-wrap:wrap;gap:5px;padding:9px 11px}
.chip-tela{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;
  border:1px solid var(--linha);border-radius:99px;font-size:11.5px;cursor:pointer;
  background:#fff;transition:.12s;line-height:1.4}
.chip-tela:hover{border-color:var(--azul-linha);background:var(--azul-claro)}
.chip-tela input{width:13px;height:13px;accent-color:var(--azul2);margin:0}
.chip-tela:has(input:checked){border-color:var(--azul2);background:var(--azul-claro);
  color:var(--azul2);font-weight:600}

@media(max-width:820px){
  .grade-perm{grid-template-columns:1fr}
}

/* =====================================================================
   INDICADORES DA PRÉVIA DE IMPORTAÇÃO
   ===================================================================== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px;
  margin-bottom:15px}
.kpi{background:#fff;border:1px solid var(--linha);border-left:3px solid var(--azul2);
  border-radius:10px;padding:13px 15px}
.kpi b{display:block;font-size:22px;font-weight:700;line-height:1.1}
.kpi span{display:block;font-size:11.5px;color:var(--c5);margin-top:2px}
.kpi.g{border-left-color:var(--verde)} .kpi.g b{color:var(--verde)}
.kpi.a{border-left-color:var(--ambar)} .kpi.a b{color:var(--ambar)}

/* =====================================================================
   BARRA DE FILTROS E SELEÇÃO EM LISTA
   ===================================================================== */
.barra-filtros{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.barra-filtros select{padding:9px 12px;border:1px solid var(--linha);border-radius:9px;
  font-size:13px;font-family:inherit;background:#fff;color:var(--tinta);cursor:pointer;
  max-width:220px}
.barra-filtros select:focus{outline:none;border-color:var(--azul2);
  box-shadow:0 0 0 3px rgba(37,99,235,.12)}

.campo-busca{flex:1;min-width:240px;position:relative;display:flex;align-items:center}
.campo-busca svg{position:absolute;left:12px;color:var(--c4);pointer-events:none}
.campo-busca input{width:100%;padding:10px 38px;border:1px solid var(--linha);
  border-radius:9px;font-size:13.5px;font-family:inherit}
.campo-busca input:focus{outline:none;border-color:var(--azul2);
  box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.campo-busca .carregando{position:absolute;right:13px}

.barra-selecao{display:flex;align-items:center;gap:9px;margin-bottom:13px;
  background:var(--azul-claro);border:1px solid var(--azul-linha);border-radius:10px;
  padding:9px 14px;position:sticky;top:0;z-index:4}
.barra-selecao b{font-size:13px;color:var(--azul2)}

input.marca{width:16px;height:16px;accent-color:var(--azul2);cursor:pointer}

/* =====================================================================
   PAINEL DO FINANCEIRO
   ===================================================================== */
.painel-fin{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:13px;margin-bottom:16px}
.cartao-num{background:#fff;border:1px solid var(--linha);border-radius:12px;
  padding:15px 17px;display:flex;align-items:center;gap:13px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)}
.cartao-num .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  flex-shrink:0}
.cartao-num .ic.azul{background:var(--azul-claro);color:var(--azul)}
.cartao-num .ic.verde{background:var(--verde-claro);color:var(--verde)}
.cartao-num .ic.ambar{background:var(--ambar-claro);color:var(--ambar)}
.cartao-num .ic.vermelho{background:var(--vermelho-claro);color:var(--vermelho)}
.cartao-num div{min-width:0}
.cartao-num b{display:block;font-size:19px;font-weight:700;line-height:1.15}
.cartao-num span{display:block;font-size:11.5px;color:var(--c5);margin-top:2px}

.fin-linha{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}

.trilho{height:13px;border-radius:99px;overflow:hidden;display:flex;background:var(--linha2)}
.trilho i{display:block;height:100%}
.trilho i.v{background:var(--verde)}
.trilho i.a{background:var(--ambar)}
.trilho i.r{background:var(--vermelho)}
.legenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;font-size:12px;color:var(--c5)}
.legenda span{display:flex;align-items:center;gap:6px}
.legenda i{width:10px;height:10px;border-radius:3px;display:inline-block}
.legenda i.v{background:var(--verde)}
.legenda i.a{background:var(--ambar)}
.legenda i.r{background:var(--vermelho)}
.legenda b{color:var(--tinta)}

.mini{background:#f8fafc;border-radius:10px;padding:12px 14px}
.mini span{display:block;font-size:11.5px;color:var(--c5)}
.mini b{display:block;font-size:17px;font-weight:700;margin-top:3px}

tr.apagada{opacity:.5}
tr.apagada:hover{opacity:.8}

.paginacao{display:flex;align-items:center;justify-content:center;gap:14px;
  margin:16px 0 8px;font-size:12.5px;color:var(--c5)}

.opcao-parcela{display:block;width:100%;text-align:left;padding:13px 15px;
  border:1px solid var(--linha);border-radius:10px;background:#fff;margin-bottom:9px;
  transition:.15s;font-family:inherit}
.opcao-parcela:hover{border-color:var(--azul2);background:var(--azul-claro)}
.opcao-parcela b{display:block;font-size:13.5px;font-weight:600}
.opcao-parcela small{display:block;font-size:11.5px;color:var(--c5);margin-top:3px;
  line-height:1.5}
.opcao-parcela.verde:hover{border-color:var(--verde);background:var(--verde-claro)}
.opcao-parcela.vermelho:hover{border-color:var(--vermelho);background:var(--vermelho-claro)}
.opcao-parcela[disabled]{opacity:.6;pointer-events:none}

@media(max-width:900px){
  .fin-linha{grid-template-columns:1fr}
}

/* =====================================================================
   PAINEL INICIAL
   ===================================================================== */
.atencao-hoje{background:#fff;border:1px solid var(--linha);border-left:3px solid var(--ambar);
  border-radius:12px;padding:14px 17px;margin-bottom:16px}
.atencao-hoje > b{display:block;font-size:12px;font-weight:700;color:var(--c5);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.atencao-hoje .chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:baseline;gap:7px;padding:8px 14px;border-radius:99px;
  background:var(--linha2);color:var(--c6);font-size:12.5px;text-decoration:none;
  transition:.15s;border:1px solid transparent}
.chip:hover{border-color:var(--c4)}
.chip b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.chip.vermelho{background:var(--vermelho-claro);color:#7f1d1d}
.chip.vermelho b{color:var(--vermelho)}
.chip.vermelho:hover{border-color:var(--vermelho-linha)}
.chip.ambar{background:var(--ambar-claro);color:#78350f}
.chip.ambar b{color:var(--ambar)}
.chip.ambar:hover{border-color:var(--ambar-linha)}
.chip.azul{background:var(--azul-claro);color:#1e3a8a}
.chip.azul b{color:var(--azul)}
.chip.azul:hover{border-color:var(--azul-linha)}

.colunas{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:8px}
.coluna{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;
  justify-content:flex-end;gap:6px;min-width:0}
.coluna b{font-size:13px;font-weight:700;color:var(--c6)}
.coluna i{display:block;width:100%;max-width:54px;background:var(--azul2);
  border-radius:6px 6px 0 0;transition:.2s;min-height:4px}
.coluna:hover i{background:var(--azul)}
.coluna span{font-size:11px;color:var(--c5);text-transform:capitalize}

/* =====================================================================
   ESTEIRA — um por vez
   Vale para a fila de envio e, depois, para a rotina de consultas.
   O desenho é o da Central de Demandas: barra escura no topo com o
   contador, e um cartão único abaixo.
   ===================================================================== */
.trilha-volta{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:12px}
.trilha-volta a{display:inline-flex;align-items:center;gap:5px;color:var(--azul2);
  text-decoration:none}
.trilha-volta a:hover{text-decoration:underline}

.esteira-barra{display:flex;align-items:center;gap:16px;background:var(--tinta);color:#fff;
  border-radius:12px 12px 0 0;padding:13px 20px;flex-wrap:wrap}
.esteira-barra .n{font-size:16px;font-weight:600}
.esteira-barra .rest{font-size:12.5px;color:#94a3b8}
.esteira-barra .pb{flex:1;min-width:120px;height:5px;background:#2b3341;border-radius:4px;
  overflow:hidden}
.esteira-barra .pb i{display:block;height:100%;background:#5b87e8;transition:width .25s}

.esteira-cartao{background:#fff;border:1px solid var(--linha);border-top:0;
  border-radius:0 0 12px 12px;box-shadow:0 1px 3px rgba(0,0,0,.07);padding:26px 28px 24px}
.esteira-cartao .lb{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--c5);
  text-transform:uppercase}
.esteira-cartao .grande{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-top:3px}
.esteira-cartao .grande-mono{font-family:var(--fonte-mono);font-size:clamp(20px,3.2vw,30px);
  font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:8px 0 4px;word-break:break-all}
.esteira-cartao .flex-etiquetas{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.esteira-cartao .caixa-msg{width:100%;padding:14px;border:1px solid var(--linha);
  border-radius:11px;font-family:inherit;font-size:13.5px;line-height:1.6;margin-top:6px}
.esteira-cartao .caixa-msg:focus{outline:none;border-color:var(--azul2);
  box-shadow:0 0 0 3px rgba(37,99,235,.12)}

.botao.grande{padding:13px 22px;font-size:15px;border-radius:10px}

.linha-fila{display:flex;align-items:center;gap:14px;padding:13px 18px;
  border-bottom:1px solid var(--linha2);text-decoration:none;color:inherit;transition:.12s}
.linha-fila:last-child{border-bottom:0}
.linha-fila:hover{background:#f8fafc}
.linha-fila .num{flex:0 0 26px;color:var(--c4);font-size:12.5px}
.linha-fila .tx{flex:1;min-width:0}
.linha-fila .tx b{display:block;font-size:13.5px;font-weight:600}
.linha-fila .tx small{display:block;font-size:12px;color:var(--c5);margin-top:1px}
.linha-fila .dir{text-align:right;flex-shrink:0}
.linha-fila .dir small{display:block;font-size:11.5px;color:var(--c5);margin-top:3px}

/* =====================================================================
   ESTAÇÃO DE CONSULTA
   O print vem colado, não vem de arquivo. Os atalhos de teclado são o
   que torna a rotina rápida quando são vinte processos seguidos.
   ===================================================================== */
.copiado{display:inline-flex;align-items:center;gap:6px;background:var(--verde-claro);
  color:var(--verde);border:1px solid var(--verde-linha);border-radius:20px;
  padding:3px 11px;font-size:12.5px;font-weight:600}

.tecla{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:5px;background:#eef1f6;border:1px solid var(--linha);border-bottom-width:2px;
  font-family:var(--fonte-mono);font-size:11px;font-weight:600;color:#41506b}
.botao .tecla{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3);color:#fff}
.botao.claro .tecla{background:#eef1f6;border-color:var(--linha);color:#41506b}

.grade-resultado{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.chip-resultado{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;
  border:1px solid var(--linha);border-radius:9px;background:#fff;cursor:pointer;
  font-size:13px;font-family:inherit;transition:.1s}
.chip-resultado:hover{border-color:var(--azul2)}
.chip-resultado.on{background:var(--azul2);border-color:var(--azul2);color:#fff;
  font-weight:600}
.chip-resultado.on .tecla{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3);
  color:#fff}

.colar{border:1.5px dashed var(--linha);border-radius:10px;padding:16px;text-align:center;
  color:var(--c5);font-size:13px;background:#fafbfc}
.colar small{display:block;font-size:11.5px;margin-top:5px;color:var(--c4)}
.colar.cheio{border-style:solid;border-color:var(--verde);background:var(--verde-claro);
  color:var(--verde);text-align:left;display:flex;align-items:center;gap:12px}
.colar.cheio img{max-height:54px;border-radius:6px;border:1px solid var(--linha)}
.colar.cheio b{display:block;font-size:13px}
.colar.cheio small{margin-top:2px}

.dicas-teclado{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--c5);
  margin-top:14px;padding-top:14px;border-top:1px solid var(--linha2)}
.dicas-teclado span{display:inline-flex;align-items:center;gap:6px}

/* =====================================================================
   ALERTA QUE PULSA
   Só o que exige ação hoje pulsa — atraso e coisa vencida. Contador
   informativo fica parado, senão o menu inteiro pisca e ninguém olha.
   ===================================================================== */
.item-menu .conta.atencao,
.item-menu .conta.alerta{position:relative}

.item-menu .conta.atencao::after,
.item-menu .conta.alerta::after{content:'';position:absolute;inset:-1px;
  border-radius:99px;pointer-events:none}

.item-menu .conta.atencao::after{animation:pulsa-ambar 2.2s ease-out infinite}
.item-menu .conta.alerta::after{animation:pulsa-vermelho 2.2s ease-out infinite}

@keyframes pulsa-ambar{
  0%  {box-shadow:0 0 0 0 rgba(245,158,11,.75)}
  70% {box-shadow:0 0 0 8px rgba(245,158,11,0)}
  100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}
}
@keyframes pulsa-vermelho{
  0%  {box-shadow:0 0 0 0 rgba(239,68,68,.8)}
  70% {box-shadow:0 0 0 8px rgba(239,68,68,0)}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
}

/* quem pediu menos animação no sistema não vê nada piscando */
@media(prefers-reduced-motion:reduce){
  .item-menu .conta.atencao::after,
  .item-menu .conta.alerta::after{animation:none}
}

/* =====================================================================
   HISTÓRICO DA DEMANDA EM FORMA DE CONVERSA
   Quem executa de um lado, quem supervisiona do outro. Sem isso, uma
   lista de "Situação alterada" não diz quem falou o quê.
   ===================================================================== */
.fala{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--linha2);
  align-items:flex-start}
.fala:last-child{border-bottom:0}
.fala .av{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:11px;font-weight:700;flex-shrink:0;background:var(--linha2);color:var(--c6)}
.fala .corpo{flex:1;min-width:0}
.fala .topo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fala .topo b{font-size:13px;font-weight:600}
.fala .topo .acao-txt{font-size:11.5px;color:var(--c5)}
.fala .topo small{font-size:11px;color:var(--c4);margin-left:auto;
  font-variant-numeric:tabular-nums}
.fala .texto{font-size:12.5px;color:var(--c7);margin-top:5px;white-space:pre-line;
  line-height:1.55;background:#f8fafc;border-radius:9px;padding:9px 11px}

/* quem executa: azul à esquerda */
.fala-executa{border-left:3px solid var(--azul2);background:#fbfcff}
.fala-executa .av{background:var(--azul-claro);color:var(--azul)}
.fala-executa .texto{background:var(--azul-claro)}

/* quem supervisiona: âmbar */
.fala-supervisiona{border-left:3px solid var(--ambar)}
.fala-supervisiona .av{background:var(--ambar-claro);color:var(--ambar)}

/* a própria fala fica marcada, para não se perder na leitura */
.fala.minha .topo b{color:var(--azul)}

/* =====================================================================
   SINO DE NOTIFICAÇÕES
   O sistema já gravava notificação; faltava onde vê-las.
   ===================================================================== */
.sino-area{position:relative;flex-shrink:0}
.sino-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--linha);color:var(--c6);position:relative;
  transition:.12s}
.sino-btn:hover{border-color:var(--azul-linha);color:var(--azul)}
.sino-btn .bolinha{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;
  padding:0 5px;border-radius:99px;background:var(--vermelho);color:#fff;font-size:10.5px;
  font-weight:700;display:grid;place-items:center;border:2px solid #fff;
  animation:pulsa-vermelho 2.2s ease-out infinite}

.sino-caixa{position:absolute;top:46px;right:0;width:340px;max-width:92vw;background:#fff;
  border:1px solid var(--linha);border-radius:13px;box-shadow:0 10px 32px rgba(15,23,42,.16);
  z-index:60;overflow:hidden}
.sino-topo{display:flex;align-items:center;gap:10px;padding:13px 15px;
  border-bottom:1px solid var(--linha2)}
.sino-topo b{font-size:13.5px;flex:1}
.sino-lista{max-height:400px;overflow-y:auto}
.sino-vazio{padding:28px 16px;text-align:center;font-size:12.5px;color:var(--c5)}
.sino-item{padding:12px 15px;border-bottom:1px solid var(--linha2)}
.sino-item:last-child{border-bottom:0}
.sino-item.nova{background:var(--azul-claro);border-left:3px solid var(--azul2)}
.sino-item b{display:block;font-size:12.5px;font-weight:600;line-height:1.4}
.sino-item small{display:block;font-size:11.5px;color:var(--c6);margin-top:3px;
  line-height:1.5}
.sino-item time{display:block;font-size:10.5px;color:var(--c4);margin-top:5px;
  font-variant-numeric:tabular-nums}

@media(max-width:520px){
  .sino-caixa{position:fixed;top:60px;right:8px;left:8px;width:auto}
}

/* =====================================================================
   CAIXA COM ROLAGEM PRÓPRIA
   Lista longa não deve empurrar a página inteira para baixo.
   ===================================================================== */
.caixa-rolagem{max-height:min(58vh,560px);overflow-y:auto;overflow-x:auto;
  border-top:1px solid var(--linha)}
.caixa-rolagem table{margin:0}
.caixa-rolagem thead th{position:sticky;top:0;z-index:2;background:#f8fafc;
  box-shadow:0 1px 0 var(--linha)}

/* a barra de rolagem fica visível, para se saber que há mais abaixo */
.caixa-rolagem{scrollbar-width:thin;scrollbar-color:var(--c4) transparent}
.caixa-rolagem::-webkit-scrollbar{width:10px;height:10px}
.caixa-rolagem::-webkit-scrollbar-track{background:var(--linha2);border-radius:99px}
.caixa-rolagem::-webkit-scrollbar-thumb{background:var(--c4);border-radius:99px;
  border:2px solid var(--linha2)}
.caixa-rolagem::-webkit-scrollbar-thumb:hover{background:var(--c5)}

/* =====================================================================
   RECADO NOVO NA LISTA
   Fala do outro lado pulsa. A própria fala fica quieta — quem escreveu
   já sabe que escreveu.
   ===================================================================== */
.recado{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  color:var(--c6);padding:3px 9px;border-radius:99px;background:var(--linha2)}
.recado b{font-weight:600}
.recado.novo{background:var(--azul-claro);color:var(--azul);position:relative}
.recado.novo::after{content:'';position:absolute;inset:-1px;border-radius:99px;
  pointer-events:none;animation:pulsa-azul 2.2s ease-out infinite}
@keyframes pulsa-azul{
  0%  {box-shadow:0 0 0 0 rgba(37,99,235,.55)}
  70% {box-shadow:0 0 0 7px rgba(37,99,235,0)}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}
}
@media(prefers-reduced-motion:reduce){ .recado.novo::after{animation:none} }

/* dados da demanda em duas colunas: o modal encolhe pela metade */
.lista-dados.compacta{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.lista-dados.compacta > div{padding:7px 0}
@media(max-width:600px){ .lista-dados.compacta{grid-template-columns:1fr} }

/* =====================================================================
   MODAL DA DEMANDA — mais enxuto
   ===================================================================== */
.barra-mensagem{display:flex;gap:8px;align-items:flex-end;margin-top:12px}
.barra-mensagem textarea{flex:1;resize:vertical;min-height:44px}
.barra-mensagem button{height:40px;width:44px;display:grid;place-items:center;
  flex-shrink:0;padding:0}

/* cada situação tem a sua cor: bloco de botões iguais não orienta ninguém */
.sit-neutro{background:#fff;border:1px solid var(--linha);color:var(--c6)}
.sit-neutro:hover{border-color:var(--c4)}
.sit-ambar{background:var(--ambar-claro);border:1px solid var(--ambar-linha);color:#78350f}
.sit-ambar:hover{background:#fef3c7}
.sit-roxo{background:var(--roxo-claro);border:1px solid #ddd6fe;color:#5b21b6}
.sit-roxo:hover{background:#ede9fe}
.sit-verde{background:var(--verde-claro);border:1px solid var(--verde-linha);color:#14532d}
.sit-verde:hover{background:#dcfce7}
.sit-vermelho{background:var(--vermelho-claro);border:1px solid var(--vermelho-linha);
  color:#7f1d1d}
.sit-vermelho:hover{background:#fee2e2}
.botao.atual{outline:2px solid var(--azul2);outline-offset:1px;opacity:.9}

/* a conversa dentro do modal: mais apertada que a da tela cheia */
.modal .fala{padding:9px 11px;gap:9px}
.modal .fala .av{width:26px;height:26px;border-radius:8px;font-size:10px}
.modal .fala .topo b{font-size:12.5px}
.modal .fala .texto{font-size:12px;padding:7px 9px;margin-top:4px}
.modal .lista-dados.compacta > div{padding:5px 0}
.modal .lista-dados dt{font-size:11.5px}
.modal .lista-dados dd{font-size:12.5px}

/* =====================================================================
   PAINEL DE QUEM EXECUTA
   Responde uma pergunta só: o que eu tenho que fazer agora?
   ===================================================================== */
.saudacao{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.saudacao h2{font-size:22px;font-weight:700;letter-spacing:-.02em}
.saudacao p{font-size:13px;color:var(--c5);margin-top:3px}
.saudacao .feito-hoje{margin-left:auto;background:var(--verde-claro);
  border:1px solid var(--verde-linha);border-radius:12px;padding:10px 18px;text-align:center}
.saudacao .feito-hoje b{display:block;font-size:22px;color:var(--verde);line-height:1}
.saudacao .feito-hoje span{font-size:11px;color:#14532d}

.tarefas-dia{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:13px;margin-bottom:16px}
.tarefa{background:#fff;border:1px solid var(--linha);border-radius:13px;padding:17px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:2px;
  transition:.15s;position:relative}
.tarefa:hover{border-color:var(--azul-linha);transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(15,23,42,.07)}
.tarefa .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--linha2);color:var(--c5);margin-bottom:8px}
.tarefa b{font-size:26px;font-weight:700;line-height:1;color:var(--c4)}
.tarefa .rot{font-size:12.5px;color:var(--c5);margin-top:3px}
.tarefa .ir{font-size:11.5px;font-weight:600;color:var(--azul);margin-top:8px}

/* com coisa a fazer, o cartão acende */
.tarefa.tem{border-color:var(--azul-linha);background:linear-gradient(180deg,#fff,#fbfcff)}
.tarefa.tem .ic{background:var(--azul-claro);color:var(--azul)}
.tarefa.tem b{color:var(--azul)}
.tarefa.tem .rot{color:var(--c6)}

/* =====================================================================
   CAIXA DE CONFIRMAÇÃO PRÓPRIA
   ===================================================================== */
.confirma-fundo{z-index:200}
.confirma-caixa{max-width:460px;padding:22px}
.confirma-topo{display:flex;gap:13px;align-items:flex-start;margin-bottom:12px}
.confirma-topo .ic{width:40px;height:40px;border-radius:11px;display:grid;
  place-items:center;flex-shrink:0}
.confirma-topo .ic.vermelho{background:var(--vermelho-claro);color:var(--vermelho)}
.confirma-topo .ic.azul{background:var(--azul-claro);color:var(--azul)}
.confirma-topo h2{font-size:16.5px;font-weight:600;line-height:1.35}
.confirma-texto{font-size:13.5px;color:var(--c6);line-height:1.6;white-space:pre-line}
.confirma-lista{margin-top:12px;background:#f8fafc;border:1px solid var(--linha);
  border-radius:10px;padding:10px 13px;max-height:170px;overflow-y:auto}
.confirma-lista div{font-size:12.5px;padding:3px 0;color:var(--tinta)}
.confirma-lista .mais{color:var(--c5);font-style:italic}
.confirma-caixa .modal-pe{margin-top:18px;padding-top:16px}

/* permissão que não se desliga: fica visível, mas sem ação */
.chip-tela.travada{background:var(--verde-claro);border-color:var(--verde-linha);
  color:var(--verde);font-weight:600;cursor:default}
.chip-tela.travada:hover{background:var(--verde-claro);border-color:var(--verde-linha)}

/* a barra de andamento vira botão: clicar abre a lista do que já foi feito */
.barra-clicavel{display:block;width:100%;text-align:left;background:none;border:0;
  padding:4px 0;cursor:pointer;font:inherit}
.barra-clicavel .trilho{display:flex;margin-bottom:0}
.barra-clicavel:hover .trilho{outline:2px solid var(--azul-linha);outline-offset:2px;
  border-radius:99px}
.barra-clicavel .dica-clique{color:var(--c5)}
.barra-clicavel:hover .dica-clique{color:var(--azul)}
.barra-clicavel[aria-expanded="true"] .dica-clique b::after{content:' ▴'}
.barra-clicavel[aria-expanded="false"] .dica-clique b::after{content:' ▾'}

/* o cartão sem pendência, mas com trabalho feito, fica verde discreto */
.tarefa.pronta{border-color:var(--verde-linha);background:linear-gradient(180deg,#fff,#f8fdfa)}
.tarefa.pronta .ic{background:var(--verde-claro);color:var(--verde)}
.tarefa .ja-feito{font-size:11px;color:var(--verde);font-weight:600;margin-top:4px}
.tarefa .bar{display:block;height:5px;background:var(--linha);border-radius:99px;
  overflow:hidden;width:100%}
.tarefa .bar i{display:block;height:100%;background:var(--azul2);border-radius:99px}
.tarefa .bar i.g{background:var(--verde)}

/* cartão de identificação no painel */
.cartao-pessoa{display:flex;align-items:center;gap:13px}
.cartao-pessoa .av.grande{width:48px;height:48px;border-radius:14px;font-size:16px}
.cartao-pessoa b{display:block;font-size:15px;font-weight:600}
.cartao-pessoa small{display:block;font-size:12px;color:var(--c5);margin:2px 0 5px}

/* =====================================================================
   FAIXA DE ESPIADA
   Impossível esquecer que se está vendo o painel de outra pessoa.
   ===================================================================== */
.faixa-espiando{background:#9a3412;color:#fff;padding:9px 20px;display:flex;
  align-items:center;gap:11px;font-size:13px;flex-wrap:wrap}
.faixa-espiando b{font-weight:700}
.faixa-espiando span{flex:1}
.faixa-espiando .botao{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);
  color:#fff}
.faixa-espiando .botao:hover{background:rgba(255,255,255,.26)}

/* =====================================================================
   PRÓXIMOS PASSOS DEPOIS DO CADASTRO
   Cadastrar cliente é quase sempre o primeiro passo de uma sequência.
   Largar a pessoa na lista obriga a procurar o caminho de novo.
   ===================================================================== */
.proximos{display:flex;flex-direction:column;gap:8px}
.passo{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 15px;border:1px solid var(--linha);border-radius:11px;background:#fff;
  transition:.14s;font-family:inherit}
.passo:hover{border-color:var(--azul2);background:var(--azul-claro);transform:translateX(2px)}
.passo b{display:block;font-size:13.5px;font-weight:600;flex:1}
.passo small{display:block;font-size:11.5px;color:var(--c5);margin-top:2px;
  font-weight:400}
.passo > b{flex:1}
.passo .seta{color:var(--c4);font-size:16px;flex-shrink:0}
.passo:hover .seta{color:var(--azul)}

/* 1.1.22 — mandado de busca na esteira */
.chip-resultado[data-resultado="mandado_localizado"]{border-color:#fecaca;color:#b91c1c}
.chip-resultado[data-resultado="mandado_localizado"].on{background:#dc2626;border-color:#dc2626;color:#fff}
.alerta-mandado{border:1px solid var(--vermelho-linha);box-shadow:0 0 0 3px rgba(220,38,38,.08)}
.alerta-mandado .cartao-topo{background:var(--vermelho-claro);border-radius:inherit}
.ic-urgente{width:36px;height:36px;border-radius:10px;background:var(--vermelho);color:#fff;display:grid;place-items:center;flex-shrink:0}

/* 1.1.23 — esteira mais baixa, para caber sem rolar */
#estacao{padding:18px 24px 16px}
#estacao .grande{font-size:19px}
#estacao .grande-mono{font-size:clamp(19px,2.6vw,26px);margin:4px 0 2px}
#estacao .flex-etiquetas{margin-top:6px}
#estacao .lb[style*="margin-top:14px"]{margin-top:10px!important}
#estacao .lb[style*="margin-top:22px"]{margin-top:12px!important}
#estacao .campo[style*="margin-top:22px"]{margin-top:12px!important}
#estacao .botoes[style*="margin-top:14px"]{margin-top:10px!important}
#estacao .aviso[style*="margin-top:14px"]{margin-top:10px!important;padding:8px 12px}
#estacao .grade-resultado{margin-top:6px}
#estacao .chip-resultado{padding:7px 12px}
#estacao > small.dica{display:none}
#estacao #campo-obs,#estacao #area-print,#estacao #campo-mandado{margin-top:10px!important}
#estacao .colar{padding:11px}
#estacao .colar small{display:inline;margin:0 0 0 6px}
#estacao .botoes[style*="padding-top:18px"]{margin-top:12px!important;padding-top:12px!important}
#estacao .dicas-teclado{margin-top:8px;padding-top:8px}
.trilha-volta{margin-bottom:6px}

/* 1.1.23 — caixa com link de acesso */
.caixa-link{border:1px solid var(--azul-linha,#bfdbfe);background:var(--azul-claro);border-radius:12px;padding:10px 12px}
.caixa-link .cl-rot{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--azul2);margin-bottom:6px}
.caixa-link .cl-linha{display:flex;gap:8px;align-items:center}
.caixa-link input{flex:1;min-width:0;border:1px solid var(--linha);border-radius:9px;padding:8px 10px;font-family:var(--fonte-mono);font-size:12.5px;background:#fff;color:var(--tinta)}