/* =====================================================================
   PAINEL DO CLIENTE — desenhado para o celular primeiro
   ===================================================================== */

:root{
  --azul:#1e40af; --azul2:#2563eb; --azul3:#3b82f6; --azul-claro:#eff6ff; --azul-linha:#bfdbfe;
  --roxo:#6d28d9; --roxo2:#7c3aed; --roxo-claro:#f5f3ff;
  --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;
  --sombra:0 1px 3px rgba(16,24,40,.07);
  --sombra2:0 8px 28px rgba(16,24,40,.12);
  --fonte:'Inter',system-ui,-apple-system,sans-serif;
  --titulo:'Instrument Sans','Inter',sans-serif;
  --mono:ui-monospace,'SF Mono',Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--fonte);background:var(--fundo);color:var(--tinta);font-size:15px;
  -webkit-font-smoothing:antialiased;min-height:100vh}
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:5px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.oculto{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* -------------------------------------------------------------- LOGIN */
.entrada{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px;
  background:linear-gradient(150deg,#0f172a 0%,var(--azul) 55%,var(--roxo) 100%)}
.entrada-caixa{background:#fff;border-radius:20px;padding:30px 26px;width:100%;max-width:400px;
  box-shadow:0 25px 60px -12px rgba(0,0,0,.4)}
.entrada-logo{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  margin:0 auto 18px;background:linear-gradient(135deg,var(--azul2),var(--roxo2))}
.entrada-logo i{width:12px;height:12px;border-radius:50%;background:#fff;display:block}
.entrada-caixa h1{font-family:var(--titulo);font-size:21px;font-weight:600;text-align:center}
.entrada-caixa .sub{font-size:13.5px;color:var(--c5);text-align:center;margin:7px 0 24px;line-height:1.55}
.entrada-pe{text-align:center;font-size:12.5px;color:var(--c5);margin-top:20px;line-height:1.6}

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

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

.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 20px;
  border-radius:12px;background:var(--azul2);color:#fff;font-size:15px;font-weight:600;
  text-decoration:none;transition:transform .12s,background .15s;width:100%;
  min-height:50px;text-align:center}
.bt:active{transform:scale(.98)}
.bt:hover{background:var(--azul)}
.bt.claro{background:#fff;border:1.5px solid var(--linha);color:var(--c7)}
.bt.claro:hover{background:var(--linha2)}
.bt.verde{background:var(--verde)} .bt.verde:hover{background:#047857}
.bt.roxo{background:var(--roxo2)} .bt.roxo:hover{background:var(--roxo)}
.bt.pequeno{padding:10px 15px;font-size:13.5px;min-height:auto;width:auto}
.bt[disabled]{opacity:.4;pointer-events:none}
.bts{display:flex;gap:10px;flex-wrap:wrap}

/* =====================================================================
   O PAINEL — protótipo aprovado: cabeçalho branco fixo, menu no topo,
   saudação em degradê com o medidor de tempo, radar do monitoramento,
   trilha de etapas e cartões com faixa colorida à esquerda.
   Primeiro o celular (padrão); no fim do arquivo, o que muda em tela
   grande.
   ===================================================================== */

.topo-cliente{background:#fff;border-bottom:1px solid var(--linha);
  padding:11px 16px;position:sticky;top:0;z-index:50}
.topo-dentro{display:flex;align-items:center;gap:12px;max-width:820px;margin:0 auto}
.topo-cliente .lg{width:36px;height:36px;border-radius:10px;display:grid;
  place-items:center;background:linear-gradient(135deg,var(--azul2),var(--azul));
  flex-shrink:0}
.topo-cliente .lg i{width:10px;height:10px;border-radius:50%;background:#fff;display:block}
.topo-cliente .tx{flex:1;min-width:0}
.topo-cliente b{display:block;font-family:var(--titulo);font-size:14.5px;font-weight:700;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo-cliente small{display:block;font-size:11.5px;color:var(--c5);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo-cliente .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  color:var(--c5);flex-shrink:0;transition:.14s}
.topo-cliente .ic:hover{background:var(--azul-claro);color:var(--azul2)}

/* ------------------------------------------------------------- MENU */
.abas{background:#fff;border-bottom:1px solid var(--linha);display:flex;
  position:sticky;top:59px;z-index:40;overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.abas a{flex:1;min-width:80px;padding:12px 8px 10px;display:flex;flex-direction:column;
  align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--c4);
  text-decoration:none;position:relative;white-space:nowrap;transition:color .14s}
.abas a svg{width:20px;height:20px}
.abas a.on{color:var(--azul2)}
.abas a.on::after{content:'';position:absolute;bottom:0;left:16%;right:16%;height:3px;
  background:var(--azul2);border-radius:3px 3px 0 0}

/* --------------------------------------------- CONTEÚDO, NO CELULAR
   De borda a borda. Sem cartão flutuando com margem dos dois lados. */
.conteudo{flex:1;padding:14px 14px 40px}

/* ----------------------------------------------------------- BLOCOS */
.bloco{background:#fff;border-radius:14px;padding:17px;margin-bottom:12px;
  border:1px solid var(--linha)}
.bloco h2{font-family:var(--titulo);font-size:16px;font-weight:600;letter-spacing:-.01em}
.bloco .sub{font-size:12.5px;color:var(--c5);margin-top:4px;line-height:1.55}

/* -------------------------------------------------------- SAUDAÇÃO */
.saudacao{background:linear-gradient(135deg,var(--azul) 0%,var(--azul3) 100%);
  border-radius:16px;padding:20px;color:#fff;margin-bottom:12px;
  position:relative;overflow:hidden}
.saudacao::after{content:'';position:absolute;right:-50px;top:-50px;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.saudacao h1{font-family:var(--titulo);font-size:21px;font-weight:700;
  letter-spacing:-.02em;position:relative}
.saudacao > p{font-size:13px;color:rgba(255,255,255,.82);margin-top:4px;
  position:relative;line-height:1.5}

/* ------------------------------------------------- CARTÕES DE NÚMERO */
.numeros{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.numero{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:14px;
  border-left:4px solid var(--azul)}
.numero.verde{border-left-color:var(--verde)}
.numero.ambar{border-left-color:var(--ambar)}
.numero.vermelho{border-left-color:var(--vermelho)}
.numero b{display:block;font-family:var(--titulo);font-size:21px;font-weight:700;
  letter-spacing:-.02em;line-height:1.1;color:var(--azul)}
.numero.verde b{color:var(--verde)}
.numero.ambar b{color:var(--ambar)}
.numero.vermelho b{color:var(--vermelho)}
.numero span{display:block;font-size:11.5px;color:var(--c5);margin-top:5px;line-height:1.4}

/* ------------------------------------------------- RADAR DE BUSCA */
.busca{border-radius:14px;padding:18px;margin-top:14px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#052e26 0%,#064e3b 55%,#065f46 100%)}
.busca.alerta{background:linear-gradient(160deg,#3f0a0a 0%,#7f1d1d 55%,#991b1b 100%)}
.busca-topo{display:flex;align-items:center;gap:15px;position:relative;z-index:2}

.tela-radar{width:88px;height:88px;flex-shrink:0;position:relative;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.18) 0%,transparent 72%);
  border:1.5px solid rgba(16,185,129,.42)}
.busca.alerta .tela-radar{border-color:rgba(248,113,113,.45);
  background:radial-gradient(circle,rgba(248,113,113,.18) 0%,transparent 72%)}
.tela-radar .anel{position:absolute;border-radius:50%;border:1px solid rgba(16,185,129,.26)}
.busca.alerta .tela-radar .anel{border-color:rgba(248,113,113,.3)}
.tela-radar .anel.a{inset:15px} .tela-radar .anel.b{inset:29px}
.tela-radar .cruz{position:absolute;inset:0}
.tela-radar .cruz::before,.tela-radar .cruz::after{content:'';position:absolute;
  background:rgba(16,185,129,.2)}
.busca.alerta .tela-radar .cruz::before,.busca.alerta .tela-radar .cruz::after{
  background:rgba(248,113,113,.22)}
.tela-radar .cruz::before{left:50%;top:6px;bottom:6px;width:1px}
.tela-radar .cruz::after{top:50%;left:6px;right:6px;height:1px}
.tela-radar .feixe{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(16,185,129,.55) 0deg,
    rgba(16,185,129,.18) 24deg,transparent 58deg,transparent 360deg);
  animation:gira 3.6s linear infinite}
.busca.alerta .tela-radar .feixe{background:conic-gradient(from 0deg,
  rgba(248,113,113,.55) 0deg,rgba(248,113,113,.18) 24deg,transparent 58deg,transparent 360deg)}
@keyframes gira{to{transform:rotate(360deg)}}
.tela-radar .pulso{position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(16,185,129,.5);animation:expande 3.6s ease-out infinite}
.busca.alerta .tela-radar .pulso{border-color:rgba(248,113,113,.5)}
@keyframes expande{0%{transform:scale(.18);opacity:.9}70%{opacity:0}
  100%{transform:scale(1);opacity:0}}
.tela-radar .ponto{position:absolute;width:6px;height:6px;border-radius:50%;
  background:#34d399;box-shadow:0 0 8px #34d399;opacity:0;animation:acha 3.6s ease-out infinite}
.busca.alerta .tela-radar .ponto{background:#fca5a5;box-shadow:0 0 9px #f87171}
.tela-radar .ponto.p1{top:26%;left:62%;animation-delay:.5s}
.tela-radar .ponto.p2{top:63%;left:33%;animation-delay:1.7s}
.tela-radar .ponto.p3{top:47%;left:73%;animation-delay:2.8s}
@keyframes acha{0%{opacity:0}8%{opacity:1}55%{opacity:1}100%{opacity:0}}
.tela-radar .centro{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;
  border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399}
.busca.alerta .tela-radar .centro{background:#f87171;box-shadow:0 0 10px #f87171}

.busca-tx{flex:1;min-width:0}
.busca-tx .estado{display:inline-flex;align-items:center;gap:6px;font-size:10px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6ee7b7;
  background:rgba(16,185,129,.16);border:1px solid rgba(16,185,129,.3);
  padding:4px 9px;border-radius:99px;margin-bottom:8px}
.busca.alerta .busca-tx .estado{color:#fca5a5;background:rgba(248,113,113,.16);
  border-color:rgba(248,113,113,.32)}
.busca-tx .estado i{width:6px;height:6px;border-radius:50%;background:#34d399;
  animation:pisca 1.6s ease-in-out infinite}
.busca.alerta .busca-tx .estado i{background:#f87171}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.3}}
.busca-tx b{display:block;font-family:var(--titulo);font-size:15px;font-weight:600;
  color:#fff;line-height:1.35;letter-spacing:-.01em}
.busca-tx small{display:block;font-size:12px;color:rgba(255,255,255,.72);margin-top:5px;
  line-height:1.55}
.busca-pe{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px;
  position:relative;z-index:2}
.busca-cel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:11px 13px}
.busca-cel .k{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-weight:600}
.busca-cel .v{font-family:var(--titulo);font-size:19px;font-weight:700;color:#fff;
  margin-top:4px;letter-spacing:-.02em}
.busca-nota{font-size:11px;color:rgba(255,255,255,.6);margin-top:12px;line-height:1.6;
  border-top:1px solid rgba(255,255,255,.12);padding-top:11px;position:relative;z-index:2}
.busca-nota b{color:rgba(255,255,255,.85);font-weight:600}

/* ------------------------------------------------- TRILHA DE ETAPAS */
.etapas{position:relative;padding-left:27px;margin-top:15px}
.etapas::before{content:'';position:absolute;left:8.5px;top:9px;bottom:12px;width:2px;
  background:var(--linha)}
.etapa{position:relative;padding-bottom:17px}
.etapa:last-child{padding-bottom:0}
.etapa .marca{position:absolute;left:-27px;top:1px;width:19px;height:19px;border-radius:50%;
  background:#fff;border:2px solid var(--linha);display:grid;place-items:center;z-index:1;
  font-size:9.5px;font-weight:700;color:var(--c4);font-family:var(--mono)}
.etapa.feita .marca{background:var(--verde);border-color:var(--verde);color:#fff}
.etapa.agora .marca{border-color:var(--azul2);box-shadow:0 0 0 4px var(--azul-claro)}
.etapa.agora .marca i{width:8px;height:8px;border-radius:50%;background:var(--azul2);
  display:block;animation:pisca 2s ease-in-out infinite}
.etapa .tx b{display:block;font-family:var(--titulo);font-size:13.5px;font-weight:600;
  color:var(--tinta);line-height:1.4}
.etapa.pendente .tx b{color:var(--c4);font-weight:500}
.etapa .tx small{display:block;font-size:11.5px;color:var(--c5);margin-top:3px;
  font-family:var(--mono)}

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

/* ---------------------------------------------------- BLOCO SEM DADO */
.vazio-explicado{display:flex;gap:12px;align-items:flex-start;padding:15px;
  background:var(--linha2);border:1px dashed var(--linha);border-radius:12px;margin-top:13px}
.vazio-explicado svg{flex-shrink:0;color:var(--c4);margin-top:1px}
.vazio-explicado > div{flex:1;min-width:0}
.vazio-explicado p{font-size:13px;color:var(--c6);line-height:1.6}
.vazio-explicado .so-voce{margin:11px -15px -15px;padding:11px 15px;
  background:var(--ambar-claro);border-top:1px dashed var(--ambar-linha);
  border-radius:0 0 11px 11px;font-size:12px;color:#78350f}
.vazio-explicado .so-voce b{color:var(--ambar);font-weight:700}

/* --------------------------------------------------- TELA DE ESPERA */
.espera{text-align:center;padding:12px 4px}
.espera .ic{width:66px;height:66px;border-radius:20px;margin:0 auto 18px;display:grid;
  place-items:center;background:var(--azul-claro);color:var(--azul2)}
.espera h1{font-family:var(--titulo);font-size:20px;font-weight:700;letter-spacing:-.02em}
.espera p{font-size:13.5px;color:var(--c6);margin-top:9px;line-height:1.65}
.espera .quando{font-size:12.5px;color:var(--c4);margin-top:15px}

/* ------------------------------------------------- ENVIO DE ARQUIVO */
.foto-area{border:2px dashed var(--linha);border-radius:13px;padding:24px 16px;
  text-align:center;position:relative;transition:.15s;margin-top:14px}
.foto-area:hover{border-color:var(--azul2);background:var(--azul-claro)}
.foto-area .ic{color:var(--c4);margin-bottom:9px}
.foto-area b{display:block;font-size:14px;font-weight:600}
.foto-area p{font-size:12px;color:var(--c5);margin-top:3px}
.foto-area input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}

/* --------------------------------------------------------- RECOLHE */
.recolhe{border:1px solid var(--linha);border-radius:11px;overflow:hidden}
.recolhe summary{padding:13px 15px;font-size:13.5px;font-weight:600;cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between}
.recolhe summary::-webkit-details-marker{display:none}
.recolhe summary::after{content:'▾';color:var(--c4);font-size:13px}
.recolhe[open] summary::after{content:'▴'}
.recolhe .dentro{padding:0 15px 15px;border-top:1px solid var(--linha2)}

/* ----------------------------------------------- MODAIS E FOLHA */
.ov{position:fixed;inset:0;background:rgba(8,12,28,.6);z-index:100;display:none;
  align-items:flex-end;justify-content:center;padding:12px}
.ov.on{display:flex}
.ov .modal{background:#fff;border-radius:18px;width:100%;max-width:440px;
  padding:20px 18px 18px;max-height:88vh;overflow-y:auto;animation:sobe .3s ease-out}
@keyframes sobe{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
.modal-cabeca{margin-bottom:13px}
.modal-cabeca h2{font-family:var(--titulo);font-size:17px;font-weight:600;line-height:1.35}
.modal-cabeca p{font-size:12px;color:var(--c5);margin-top:4px}
.modal-pe{margin-top:17px;padding-top:14px;border-top:1px solid var(--linha2);
  display:flex;gap:9px;justify-content:flex-end}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:11px;background:var(--azul2);color:#fff;
  font-size:14.5px;font-weight:600;transition:background .15s}
.botao:hover{background:var(--azul)}

.fundo-modal{position:fixed;inset:0;background:rgba(8,12,28,.6);z-index:90;display:none;
  align-items:flex-end;justify-content:center}
.fundo-modal.on{display:flex}
.folha{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:560px;
  padding:10px 20px 26px;max-height:86vh;overflow-y:auto;animation:sobe .3s ease-out}
.folha .puxa{width:38px;height:4px;border-radius:99px;background:var(--linha);
  margin:0 auto 15px}
.folha h2{font-family:var(--titulo);font-size:18px;font-weight:600;letter-spacing:-.01em}
.folha .sub{font-size:12.5px;color:var(--c5);margin-top:5px;line-height:1.55}

/* =====================================================================
   FLUXO DE ACEITE DO CONTRATO
   Estilos recuperados da versão anterior. O fluxo em si não mudou: é o
   passo a passo de ler o contrato, tirar as fotos e assinar.
   ===================================================================== */
.passos{display:flex;gap:6px;margin-bottom:20px}
.passos i{flex:1;height:4px;border-radius:99px;background:var(--linha);display:block}
.passos i.on{background:var(--azul2)}
.contrato-caixa{border:1.5px solid var(--linha);border-radius:14px;background:#fff;
  height:min(52vh,430px);overflow-y:auto;padding:18px;font-size:13.5px;line-height:1.75;
  color:var(--c7);-webkit-overflow-scrolling:touch}
.contrato-caixa p{margin-bottom:13px}
.contrato-caixa p:last-child{margin-bottom:0}
.contrato-caixa strong{color:var(--tinta)}
.contrato-fim{margin-top:18px;padding:13px;border-radius:11px;background:var(--verde-claro);
  border:1px solid var(--verde-linha);font-size:12.5px;color:#064e3b;text-align:center;
  font-weight:600}
.deslizar{margin-top:16px;height:58px;border-radius:14px;background:var(--linha2);
  border:1.5px solid var(--linha);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;user-select:none;
  transition:opacity .2s}
.deslizar.travada{opacity:.45;pointer-events:none}
.deslizar .aviso{font-size:13.5px;font-weight:600;color:var(--c5);pointer-events:none;
  padding-left:40px}
.deslizar .puxador{position:absolute;left:4px;top:4px;bottom:4px;width:64px;border-radius:11px;
  background:var(--verde);color:#fff;display:grid;place-items:center;cursor:grab;
  touch-action:none;box-shadow:0 2px 8px rgba(5,150,105,.4)}
.deslizar .puxador:active{cursor:grabbing}
.deslizar.pronta{background:var(--verde-claro);border-color:var(--verde-linha)}
.deslizar.pronta .aviso{color:var(--verde)}
.foto-previa{margin-top:15px;border-radius:13px;overflow:hidden;border:1px solid var(--linha);
  background:var(--linha2)}
.foto-previa img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}

/* =====================================================================
   MEDIDOR DE TEMPO RESTANTE — protótipo aprovado
   Doze segmentos. Os acesos são o prazo que RESTA: o medidor esvazia
   conforme o contrato corre. Abaixo de 25% fica âmbar. O número e os
   segmentos dizem a mesma coisa.
   ===================================================================== */
.medidor{margin-top:18px;position:relative}
.medidor-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.medidor-topo span{font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.78)}
.medidor-topo b{font-family:var(--titulo);font-size:30px;font-weight:700;
  letter-spacing:-.03em;line-height:1;color:#fff}
.medidor.reta .medidor-topo b{color:#fbbf24}
.segmentos{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;height:28px;margin-top:10px}
.segmentos i{display:block;border-radius:5px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.12)}
.segmentos i.cheio{background:#fff;border-color:#fff;animation:acende .5s ease-out both}
.medidor.reta .segmentos i.cheio{background:#fbbf24;border-color:#fbbf24}
.segmentos i:nth-child(2){animation-delay:.04s}.segmentos i:nth-child(3){animation-delay:.08s}
.segmentos i:nth-child(4){animation-delay:.12s}.segmentos i:nth-child(5){animation-delay:.16s}
.segmentos i:nth-child(6){animation-delay:.2s}.segmentos i:nth-child(7){animation-delay:.24s}
.segmentos i:nth-child(8){animation-delay:.28s}.segmentos i:nth-child(9){animation-delay:.32s}
.segmentos i:nth-child(10){animation-delay:.36s}.segmentos i:nth-child(11){animation-delay:.4s}
.segmentos i:nth-child(12){animation-delay:.44s}
@keyframes acende{from{opacity:0;transform:scaleY(.4)}to{opacity:1;transform:none}}
.medidor-nota{font-size:12px;color:rgba(255,255,255,.8);margin-top:12px;line-height:1.55}
.medidor-nota b{color:#fde68a}

/* ------------------------------------ RADAR ANTES DA PRIMEIRA CONSULTA
   Sem consulta registrada, o radar fica parado e cinza: animação de
   varredura seria afirmar um serviço que ainda não aconteceu. */
.busca.parado{background:linear-gradient(160deg,#1e293b 0%,#334155 100%)}
.busca.parado .tela-radar{border-color:rgba(148,163,184,.4);
  background:radial-gradient(circle,rgba(148,163,184,.14) 0%,transparent 72%)}
.busca.parado .tela-radar .anel{border-color:rgba(148,163,184,.25)}
.busca.parado .tela-radar .cruz::before,.busca.parado .tela-radar .cruz::after{
  background:rgba(148,163,184,.2)}
.busca.parado .tela-radar .feixe,.busca.parado .tela-radar .pulso,
.busca.parado .tela-radar .ponto{display:none}
.busca.parado .tela-radar .centro{background:#94a3b8;box-shadow:none}
.busca.parado .busca-tx .estado{color:#cbd5e1;background:rgba(148,163,184,.16);
  border-color:rgba(148,163,184,.3)}
.busca.parado .busca-tx .estado i{background:#94a3b8;animation:none}
.so-voce-escuro{color:#fde68a!important}

/* --------------------------------------------------------- DETALHES */
.etapa .tx small.agora-tx{color:var(--azul2);font-family:var(--fonte);font-weight:600}
.parcela.paga dd{color:var(--verde)}
.parcela.vencida dd,.parcela.vencida dt{color:var(--vermelho)}
.parcela.avencer dd{color:var(--c7)}
.selo{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px}
.selo.verde{background:var(--verde-claro);color:var(--verde)}
.selo.ambar{background:var(--ambar-claro);color:var(--ambar)}
.baixar{font-weight:600;text-decoration:none}
.baixar:hover{text-decoration:underline}
.bloco + .bt,.recado-fixo + .bt{margin-top:2px}
.modal-cabeca.aviso-urgente,.modal-cabeca.aviso-atencao,.modal-cabeca.aviso-info{
  padding-left:14px;border-left:4px solid var(--azul2)}
.modal-cabeca.aviso-urgente{border-left-color:var(--vermelho)}
.modal-cabeca.aviso-atencao{border-left-color:var(--ambar)}

/* ------------------------------------------------ RECADO FLUTUANTE
   Usado pelo cliente.js ("Documento enviado", erros). Antes não tinha
   estilo nenhum e aparecia como texto solto no pé da página. */
.recado{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:200;
  background:#111827;color:#fff;font-size:13.5px;font-weight:500;padding:12px 18px;
  border-radius:12px;box-shadow:var(--sombra2);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;max-width:calc(100% - 32px);text-align:center}
.recado.on{opacity:1;transform:translate(-50%,0)}
.recado.erro{background:var(--vermelho)}
.recado.ok{background:var(--verde)}

/* =====================================================================
   TELA GRANDE — o mesmo painel, menu no topo, conteúdo centralizado
   Não há barra lateral: o protótipo aprovado tem o menu no topo nas
   duas situações. Em tela larga os itens ficam lado a lado, com ícone
   e texto na mesma linha, e os cartões de número viram quatro colunas.
   ===================================================================== */
@media(min-width:760px){
  .topo-cliente{padding:14px 24px}
  .topo-cliente .lg{width:40px;height:40px}
  .topo-cliente b{font-size:16px}
  .topo-cliente small{font-size:12.5px}

  .abas{justify-content:center;top:69px}
  .abas a{flex:0 0 auto;min-width:0;flex-direction:row;gap:8px;font-size:14px;
    padding:15px 22px 14px}
  .abas a svg{width:18px;height:18px}
  .abas a:hover{color:var(--c7)}
  .abas a.on::after{left:12px;right:12px}

  .conteudo{max-width:820px;margin:0 auto;padding:26px 24px 60px}
  .numeros{grid-template-columns:repeat(4,1fr)}
  .bloco{padding:22px}
  .saudacao{padding:26px 28px}
  .saudacao h1{font-size:25px}
  .medidor-topo b{font-size:36px}
  .segmentos{height:34px;gap:5px}
  .tela-radar{width:104px;height:104px}
  .busca{padding:22px}
  .conteudo > .bt,.conteudo .bt.contato{width:max-content;min-width:300px;display:flex;margin-left:auto;margin-right:auto}
  .ov{align-items:center}
  .fundo-modal{align-items:center}
  .folha{border-radius:20px}
}

/* =====================================================================
   PEÇAS QUE SÓ EXISTEM NUM TAMANHO
   .so-pc: só no computador · .so-cel: só no celular/tablet
   ===================================================================== */
.so-pc,.lado-pc,.barra-pc{display:none!important}
.inicio{display:flex;flex-direction:column}
.inicio > *{order:5}
.inicio .saudacao{order:1}
.grade-inicio{display:contents}          /* no celular os filhos entram na ordem da coluna */
.inicio .bl-radar{order:2}
.inicio .bl-andamento{order:3}
.inicio .contato,.inicio .bl-semzap{order:4}

/* =====================================================================
   COMPUTADOR (a partir de 1100 px) — protótipo aprovado em 30/09/2026
   Mesma linguagem do painel da equipe: barra lateral escura com o menu
   e os dados do cliente, cabeçalho da página, faixa de indicadores e
   o conteúdo em painéis. Não é o celular esticado.
   ===================================================================== */
@media(min-width:1100px){
  .so-cel,.topo-cliente,.abas{display:none!important}
  .so-pc{display:revert!important}
  .lado-pc{display:flex!important}
  .barra-pc{display:flex!important}

  body{background:#f4f6fa}
  .casca{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh;
    background:linear-gradient(90deg,#0b1220 268px,transparent 268px)}
  .principal{min-width:0;display:flex;flex-direction:column}

  /* ------------------------------------------------ lateral */
  .lado-pc{flex-direction:column;background:#0b1220;color:#e2e8f0;padding:22px 16px;
    position:sticky;top:0;height:100vh;overflow-y:auto}
  .marca-pc{display:flex;align-items:center;gap:11px;padding:0 8px 22px;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .marca-pc .lg{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--azul3),var(--azul))}
  .marca-pc .lg i{width:10px;height:10px;border-radius:50%;background:#fff;display:block}
  .marca-pc b{display:block;font-family:var(--titulo);font-size:15px;letter-spacing:-.01em}
  .marca-pc small{font-size:11.5px;color:#94a3b8}
  .rot-nav{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#64748b;
    font-weight:700;padding:22px 10px 8px}
  .nav-pc a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;
    color:#cbd5e1;font-weight:500;font-size:14px;text-decoration:none;margin-bottom:2px;
    position:relative;transition:background .14s,color .14s}
  .nav-pc a svg{width:18px;height:18px;color:#64748b;flex-shrink:0}
  .nav-pc a:hover{background:rgba(255,255,255,.05);color:#fff}
  .nav-pc a.on{background:rgba(59,130,246,.14);color:#fff}
  .nav-pc a.on svg{color:#60a5fa}
  .nav-pc a.on::before{content:'';position:absolute;left:-16px;top:9px;bottom:9px;width:3px;
    border-radius:0 3px 3px 0;background:#60a5fa}
  .selo-nav{margin-left:auto;font-size:11px;font-weight:700;color:#fff;border-radius:99px;padding:1px 7px}
  .selo-nav.verm{background:var(--vermelho)} .selo-nav.amb{background:#b45309}
  .fale-pc{margin-top:auto;background:linear-gradient(160deg,#13213d,#0f1b33);
    border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:16px}
  .fale-pc b{font-size:13.5px;display:block}
  .fale-pc p{font-size:12px;color:#94a3b8;margin:5px 0 12px;line-height:1.5}
  .fale-pc a{display:flex;align-items:center;justify-content:center;gap:8px;background:#16a34a;
    color:#fff;text-decoration:none;border-radius:9px;padding:10px;font-weight:600;font-size:13px}
  .fale-pc a:hover{background:#15803d}
  .quem-pc{display:flex;align-items:center;gap:11px;padding:16px 8px 0;margin-top:16px;
    border-top:1px solid rgba(255,255,255,.07)}
  .lado-pc > .quem-pc:nth-child(2){margin-top:auto}   /* sem menu: o rodapé desce */
  .quem-pc .av{width:36px;height:36px;border-radius:50%;background:#1e293b;display:grid;
    place-items:center;font-weight:700;font-size:13px;color:#93c5fd;flex-shrink:0}
  .quem-pc > div{min-width:0}
  .quem-pc b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .quem-pc small{font-size:11.5px;color:#94a3b8;font-family:var(--mono)}
  .quem-pc .sair{margin-left:auto;color:#64748b;display:grid;place-items:center;
    width:32px;height:32px;border-radius:8px;flex-shrink:0}
  .quem-pc .sair:hover{background:rgba(255,255,255,.07);color:#fff}

  /* ------------------------------------------------ cabeçalho da página */
  .barra-pc{height:68px;background:#fff;border-bottom:1px solid var(--linha);align-items:center;
    padding:0 36px;gap:16px;position:sticky;top:0;z-index:40}
  .barra-pc h1{font-family:var(--titulo);font-size:19px;font-weight:700;letter-spacing:-.02em}
  .barra-pc .trilha{font-size:12.5px;color:var(--c5)}
  .barra-pc .dir{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--c5)}
  .pilula-pc{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linha);
    border-radius:99px;padding:6px 12px;font-weight:500;color:var(--c6)}
  .pilula-pc i{width:7px;height:7px;border-radius:50%;background:var(--verde);
    box-shadow:0 0 0 3px var(--verde-claro)}
  .pilula-pc.alerta i{background:var(--vermelho);box-shadow:0 0 0 3px var(--vermelho-claro)}

  /* ------------------------------------------------ área de conteúdo */
  .conteudo{max-width:1320px;width:100%;margin:0;padding:28px 36px 56px;
    display:flex;flex-direction:column;gap:20px}
  .conteudo > *,.inicio > *{margin-bottom:0!important}
  .inicio{display:flex;flex-direction:column;gap:20px}
  .inicio .saudacao{order:1} .inicio .kpis-pc{order:2} .inicio .bl-andamento{order:3}
  .inicio .grade-inicio{order:4} .inicio .bl-semzap{order:5}
  .grade-inicio .bl-radar{order:1} .grade-inicio .col-direita{order:2}
  .bloco{border-radius:16px;padding:22px 24px;margin-bottom:0;border-color:#e2e8f0;
    box-shadow:0 1px 2px rgba(15,23,42,.04)}
  .bloco h2{font-size:15.5px}
  .bloco-cab{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
  .bloco-cab .lnk{margin-left:auto;font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
  .bloco-cab .lnk:hover{text-decoration:underline}

  /* ------------------------------------------------ saudação com medidor */
  .saudacao.com-medidor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:48px;align-items:center;padding:30px 34px;border-radius:18px;margin:0;
    background:radial-gradient(1200px 400px at 90% -40%,rgba(96,165,250,.45),transparent 60%),
               linear-gradient(120deg,#172554 0%,#1e40af 45%,#2563eb 100%)}
  .saudacao.com-medidor::after{content:'';position:absolute;inset:0;width:auto;height:auto;
    border-radius:0;right:0;top:0;pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:28px 28px}
  .saudacao.com-medidor > *{position:relative;z-index:1}
  .boas-vindas{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#bfdbfe;font-weight:600}
  .saudacao.com-medidor h1{font-size:30px;letter-spacing:-.03em;margin-top:6px}
  .saudacao.com-medidor .saud-tx p{font-size:14px;color:#dbeafe;margin-top:6px}
  .chips-pc{display:flex!important;gap:8px;margin-top:18px;flex-wrap:wrap}
  .chips-pc span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
    border-radius:8px;padding:6px 10px;font-size:12px;color:#e0e7ff}
  .chips-pc b{color:#fff;font-weight:600}
  .saudacao.com-medidor .medidor{margin:0;background:rgba(8,15,40,.28);border:1px solid rgba(255,255,255,.14);
    border-radius:14px;padding:18px 20px}
  .medidor-topo{align-items:flex-end}
  .medidor-topo b{font-size:40px;letter-spacing:-.04em;line-height:.9}
  .medidor-topo b small{font-size:15px;color:#bfdbfe;margin-left:2px}
  .segmentos{height:30px;gap:5px;margin:14px 0 10px}
  .segmentos i{border-radius:6px}
  .segmentos i.cheio{box-shadow:0 0 12px rgba(255,255,255,.35)}
  .med-datas{display:flex!important;justify-content:space-between;font-size:12px;color:#c7d2fe;
    font-family:var(--mono)}
  .med-datas b{color:#fff;font-family:var(--fonte);font-weight:600}

  /* ------------------------------------------------ indicadores */
  .kpis-pc{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .kpi{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:18px 20px;
    display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;
    box-shadow:0 1px 2px rgba(15,23,42,.04)}
  a.kpi:hover{border-color:#cbd5e1}
  .kpi b{font-family:var(--titulo);font-size:22px;letter-spacing:-.03em;display:block;line-height:1.15}
  .kpi span{font-size:12.5px;color:var(--c5)}
  .ic.az,.ic.vd,.ic.am,.ic.vm{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
  .ic svg{width:20px;height:20px}
  .ic.az{background:var(--azul-claro);color:var(--azul2)} .ic.vd{background:var(--verde-claro);color:var(--verde)}
  .ic.am{background:var(--ambar-claro);color:var(--ambar)} .ic.vm{background:var(--vermelho-claro);color:var(--vermelho)}

  /* ------------------------------------------------ etapas na horizontal */
  .bl-andamento .etapas{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));
    padding:6px 0 0;margin-top:18px}
  .bl-andamento .etapas::before{display:none}
  .bl-andamento .etapa{padding:0 8px;text-align:center}
  .bl-andamento .etapa::before{content:'';position:absolute;top:16px;right:50%;width:100%;height:3px;
    background:var(--linha);border-radius:3px}
  .bl-andamento .etapa:first-child::before{display:none}
  .bl-andamento .etapa.feita::before,.bl-andamento .etapa.agora::before{background:var(--verde)}
  .bl-andamento .etapa .marca{position:relative;left:auto;top:auto;width:34px;height:34px;
    margin:0 auto 12px;font-size:12px;display:flex;align-items:center;justify-content:center;
    line-height:1}
  .bl-andamento .etapa .marca svg{width:14px;height:14px}
  .bl-andamento .etapa.agora .marca{box-shadow:0 0 0 6px var(--azul-claro)}
  .bl-andamento .etapa.agora .marca i{width:10px;height:10px}
  .bl-andamento .etapa .tx b{font-size:13px}
  .bl-andamento .etapa .tx small{margin-top:4px}

  /* ------------------------------------------------ radar | coluna direita */
  .grade-inicio{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
  .col-direita{display:flex!important;flex-direction:column;gap:20px}
  .busca{padding:24px;border-radius:14px}
  .tela-radar{width:140px;height:140px}
  .busca-tx b{font-size:18px}
  .busca-tx small{font-size:13px}
  .busca-pe{gap:12px}
  .busca-cel .v{font-size:21px}

  .fin-barra{height:10px;border-radius:99px;background:var(--linha2);overflow:hidden;
    display:flex;margin:4px 0 14px}
  .fin-barra i{display:block;height:100%}
  .leg{display:grid;gap:9px}
  .leg div{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--c6)}
  .leg div::before{content:'';width:9px;height:9px;border-radius:3px;background:var(--cor)}
  .leg b{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--tinta)}
  .docs-pend a{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--linha2);
    font-size:13.5px;color:var(--c7);text-decoration:none}
  .docs-pend a:last-child{border-bottom:0}
  .docs-pend .ic{width:30px;height:30px;border-radius:8px;background:var(--ambar-claro);color:var(--ambar);
    display:grid;place-items:center;font-weight:700;flex-shrink:0}
  .docs-pend b{margin-left:auto;color:var(--azul2);font-size:12.5px}
  .tudo-ok{font-size:13px;color:var(--c6);display:flex;align-items:center;gap:9px}
  .tudo-ok span{width:26px;height:26px;border-radius:50%;background:var(--verde-claro);color:var(--verde);
    display:grid;place-items:center;font-weight:700}

  /* ------------------------------------------------ financeiro */
  .numeros{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .numero{display:flex;gap:14px;align-items:center;border-left:1px solid var(--linha);border-radius:14px;
    padding:18px 20px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
  .numero > .ic{display:grid!important;margin:0}
  .numero.verde,.numero.ambar,.numero.vermelho{border-left-color:var(--linha)}
  .numero b{font-size:22px}
  .numero span{margin-top:3px}
  .grade-lado{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
  .grade-lado > .col{display:flex;flex-direction:column;gap:20px}
  .lateral{position:sticky;top:88px}
  .bloco-situacao{background:#fff;border:1px solid var(--linha);border-radius:16px;padding:22px 24px;
    box-shadow:0 1px 2px rgba(15,23,42,.04)}
  .bloco-situacao h2{font-family:var(--titulo);font-size:15.5px;font-weight:600}
  .bloco-situacao .sub{font-size:12.5px;color:var(--c5);margin:3px 0 14px}
  .bloco-situacao .recado-fixo{margin:14px 0 0}
  .bloco-situacao .bt.contato{margin-top:14px;background:var(--tinta);color:#fff;border:0;
    width:100%;min-width:0;min-height:44px;padding:11px;font-size:13.5px}
  .bloco-situacao .bt.contato:hover{background:#1e293b}
  .bl-parcelas{padding:0;overflow:hidden}
  .bl-parcelas > h2{padding:22px 24px 0}
  .bl-parcelas > .sub{padding:0 24px 16px}
  .tabela-pc{display:table!important;width:100%;border-collapse:collapse}
  .tabela-pc th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c5);
    font-weight:700;padding:12px 24px;background:#f8fafc;border-top:1px solid var(--linha);
    border-bottom:1px solid var(--linha)}
  .tabela-pc td{padding:14px 24px;border-bottom:1px solid var(--linha2);font-size:13.5px;color:var(--c7)}
  .tabela-pc tr:last-child td{border-bottom:0}
  .tabela-pc .num{text-align:right}
  .tabela-pc tr.vencida td.num{color:var(--vermelho)}
  .chip-sit{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
    padding:3px 10px;border-radius:99px}
  .chip-sit::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
  .chip-sit.pg{background:var(--verde-claro);color:var(--verde)}
  .chip-sit.at{background:var(--vermelho-claro);color:var(--vermelho)}
  .chip-sit.av{background:var(--linha2);color:var(--c6)}

  /* ------------------------------------------------ contrato e documentos */
  .grade-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
  .grade-2 > .col{display:flex;flex-direction:column;gap:20px}
  .grade-2 .bt.claro{margin-top:16px}
  .foto-area{padding:44px 20px}
  .recado-fixo{margin-bottom:0}

  /* estados sem painel completo (primeiro acesso, conferência): centralizado */
  .conteudo > .passos,.conteudo > section,.conteudo > .bloco:only-child{max-width:760px}

  /* modais centralizados */
  .ov,.fundo-modal{align-items:center}
  .folha{border-radius:20px}
}