/* Verus · Portal do cliente (sobre comum/app.css). Mobile primeiro; barra de atalhos embaixo no celular, menu lateral no desktop. */
@font-face{font-family:"Red Hat Display";src:url(../../fonts/RedHatDisplay.ttf) format("truetype");font-weight:300 900;font-display:swap}
@font-face{font-family:"Red Hat Text";src:url(../../fonts/RedHatText.ttf) format("truetype");font-weight:300 700;font-display:swap}
#portal{min-height:60vh}
.p-app{max-width:1240px;margin:0 auto;padding:18px 16px 96px;display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.p-lateral{display:none}.p-conteudo{min-width:0;outline:none}
.p-centro{max-width:520px;margin:32px auto;padding:0 16px}.p-entrar h1{margin-bottom:10px}
.p-termo{margin:0 0 14px;padding-left:18px}.p-termo li{margin:6px 0}
.p-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:18px}.p-cab h1{margin-bottom:4px}
/* barra de atalhos (celular) */
.p-baixo{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--cafe);display:grid;grid-template-columns:repeat(5,1fr);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.p-baixo a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--sec-esc);text-decoration:none;font:500 .7rem "Red Hat Display",Arial;padding:6px 2px;min-height:52px;justify-content:center}
.p-baixo a.ativo{color:var(--linho)}.p-baixo a.ativo .ic{stroke-width:2}
.p-baixo .p-central{color:var(--cafe);background:var(--linho);border-radius:50%;width:58px;height:58px;margin:-20px auto 0;justify-self:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}.p-baixo .p-central span{display:none}.p-baixo .p-central .ic{width:26px;height:26px}
@media (min-width:1024px){
 .p-baixo{display:none}.p-app{grid-template-columns:250px minmax(0,1fr);gap:36px;padding:28px 22px 60px}
 .p-lateral{display:block;position:sticky;top:90px;align-self:start}
 .p-lateral ul{list-style:none;margin:0;padding:0}.p-lateral a{display:flex;gap:12px;align-items:center;padding:10px 12px;text-decoration:none;color:var(--sec);font:500 .95rem "Red Hat Display",Arial;border-left:2px solid transparent}
 .p-lateral a:hover{color:var(--cafe);background:var(--linho2)}.p-lateral a.ativo{color:var(--cafe);border-left-color:var(--cafe);background:#fff}
 .p-imovel{padding:0 12px 16px;border-bottom:1px solid var(--borda);margin-bottom:12px}.p-imovel-nome{font:500 1.05rem "Red Hat Display",Arial;margin:0}.p-imovel select{margin-top:8px}.p-sair{margin:16px 12px;display:flex;gap:8px;align-items:center}
}
/* atalho registrar defeito */
.p-defeito{display:flex;align-items:center;gap:16px;background:var(--cafe);color:var(--linho);padding:18px 20px;text-decoration:none;margin:0 0 26px}.p-defeito>span{flex:1;display:grid}.p-defeito b{font:500 1.15rem "Red Hat Display",Arial}.p-defeito span span{color:var(--sec-esc);font-size:.9rem}
/* semáforo por sistema */
.sem-resumo{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px;color:var(--sec);font-size:.92rem}.sem-resumo b{color:var(--cafe);font:500 1.25rem "Red Hat Display",Arial}
.semaforo{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}@media (min-width:720px){.semaforo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sem a{display:grid;grid-template-columns:14px 24px minmax(0,1fr) auto;grid-template-areas:"luz ic nome tag" "luz ic tempo tag";gap:0 10px;align-items:center;background:#fff;border:1px solid var(--borda);padding:12px 14px;text-decoration:none}
.sem a:hover{border-color:var(--cafe)}.sem .ic{grid-area:ic}.sem-nome{grid-area:nome;font:500 1rem "Red Hat Display",Arial}.sem-tempo{grid-area:tempo;font-size:.85rem;color:var(--sec)}.sem .tag{grid-area:tag}
.sem-luz{grid-area:luz;width:12px;height:12px;border-radius:50%;border:2px solid var(--cafe)}.sem-vencido .sem-luz{background:var(--cafe)}.sem-vence .sem-luz{background:linear-gradient(90deg,var(--cafe) 50%,transparent 50%)}.sem-sem_prazo .sem-luz{border-style:dotted;border-color:var(--claro)}
@media (max-width:420px){.sem a{grid-template-areas:"luz ic nome nome" "luz ic tempo tag"}}
/* linha do tempo (recebimento → hoje → vencimentos) */
.ldt{background:#fff;border:1px solid var(--borda);padding:16px}.ldt-eixo{position:relative;display:flex;justify-content:space-between;font-size:.78rem;color:var(--sec);margin:0 0 14px;padding-bottom:18px}.ldt-eixo b{color:var(--cafe);font-weight:500}
.ldt-hoje-r{position:absolute;bottom:0;transform:translateX(-50%);background:var(--cafe);color:var(--linho);padding:1px 8px;font:500 .72rem "Red Hat Display",Arial}
.ldt-l{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 10px;margin:10px 0}@media (min-width:720px){.ldt-l{grid-template-columns:150px minmax(0,1fr) 84px;align-items:center}}
.ldt-nome{font:500 .88rem "Red Hat Display",Arial}.ldt-fim{font-size:.8rem;color:var(--sec)}
.ldt-trilho{position:relative;height:14px;background:var(--linho)}.ldt-barra{position:absolute;top:0;bottom:0;background:var(--areia);overflow:hidden}.ldt-passado{height:100%;background:var(--claro)}
.ldt-vencido .ldt-passado{background:var(--cafe)}.ldt-hoje{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--cafe)}
/* manutenção */
.man-cartao{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic txt" "ic bt";gap:6px 14px;background:#fff;border:1px solid var(--borda);padding:16px}.man-ic{grid-area:ic}.man-txt{grid-area:txt}.man-cartao>.bt,.man-cartao>.tag{grid-area:bt;justify-self:start}
.man-txt h3{margin:0}.man-txt .nota{margin:2px 0 0}.man-atrasado{border-left:3px solid var(--cafe)}.man-feito{background:var(--linho2);border-color:transparent}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.cal-nav h2{margin:0;text-transform:capitalize}
.cal-ano{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}@media (min-width:720px){.cal-ano{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cal-mes{background:#fff;border:1px solid var(--borda);padding:12px;min-height:92px;text-decoration:none;display:grid;align-content:start;gap:6px}.cal-mes.atual{border:2px solid var(--cafe)}.cal-mes-n{font:500 .95rem "Red Hat Display",Arial;text-transform:capitalize}.cal-mes small{color:var(--sec)}
.cal-pontos{display:flex;flex-wrap:wrap;gap:4px}.cal-pontos i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--cafe)}.cal-pontos i.f{background:var(--cafe)}
.p-arq{display:flex;gap:10px;align-items:center;border:1px dashed var(--claro);padding:12px;cursor:pointer;background:#fff;min-height:56px}.p-arq input{position:absolute;opacity:0;width:1px;height:1px}.p-arq.ok{border-style:solid;border-color:var(--cafe);box-shadow:inset 3px 0 0 var(--cafe)}.p-arq small{color:var(--sec)}
.p-arq:focus-within{outline:2px solid var(--cafe)}
/* pendências em cartões com foto */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--cafe);text-decoration:none;font:500 .85rem "Red Hat Display",Arial;border-radius:20px;background:#fff;min-height:36px}.chip.ativo{background:var(--cafe);color:var(--linho)}
.pend-grade{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}@media (min-width:720px){.pend-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1200px){.pend-grade{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pend{background:#fff;border:1px solid var(--borda);display:flex;flex-direction:column}.pend-foto{position:relative}.pend-foto .foto-capa{border:0;aspect-ratio:4/3}.pend-tag{position:absolute;left:10px;top:10px}.pend-num{position:absolute;right:10px;top:10px;background:rgba(237,230,218,.94);padding:2px 8px;font:500 .78rem "Red Hat Display",Arial}
.pend-txt{padding:14px 16px 16px;display:grid;gap:4px}.pend-txt h3{margin:0}.pend-hist{list-style:none;margin:4px 0;padding:0;font-size:.8rem;color:var(--sec)}.pend-aviso{display:flex;gap:6px;align-items:center;font-size:.88rem;font-weight:500;margin:6px 0 0}.pend .bt{justify-self:start;margin-top:6px}
.p-resumo-pend{text-decoration:none;display:grid;gap:8px}.p-cont{display:flex;gap:16px;flex-wrap:wrap}.p-cont b{font:500 1.5rem "Red Hat Display",Arial;display:block}
/* ambientes (grade com ícones) */
.ambientes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}@media (min-width:720px){.ambientes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.amb{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;background:#fff;border:1px solid var(--borda);padding:18px 8px;text-decoration:none;cursor:pointer;font:500 .9rem "Red Hat Display",Arial;min-height:104px;align-content:center}
.amb:hover,.amb:focus-visible{border-color:var(--cafe)}.amb small{color:var(--sec);font:400 .78rem "Red Hat Text",Arial}.amb em{position:absolute;top:8px;right:8px;background:var(--cafe);color:var(--linho);font:500 .75rem "Red Hat Display";font-style:normal;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center}
/* defeito em 3 toques */
.passos3{list-style:none;display:flex;gap:2px;padding:0;margin:0 0 18px;background:var(--areia)}.passos3 li{flex:1;background:var(--linho);padding:8px;font:500 .82rem "Red Hat Display",Arial;color:var(--sec);text-align:center}.passos3 li.atual{background:var(--cafe);color:var(--linho)}.passos3 li.feito{background:var(--linho2);color:var(--cafe)}
.foto-grande{display:grid;justify-items:center;gap:8px;text-align:center;background:#fff;border:2px dashed var(--claro);padding:48px 20px;cursor:pointer}.foto-grande input{position:absolute;opacity:0;width:1px;height:1px}.foto-grande:focus-within{outline:2px solid var(--cafe)}.foto-grande b{font:500 1.15rem "Red Hat Display",Arial}.foto-grande .ic{width:44px;height:44px}
.df-resumo .fotos{max-width:360px}
/* ocorrências */
.oc{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;text-decoration:none;align-items:start}.oc-foto{width:96px;aspect-ratio:1;object-fit:cover}.oc h3{margin:0 0 2px}
/* garantia */
.gar-cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start}.gar-cab h2{margin:0}.gar.foco{border:2px solid var(--cafe)}
.gar-barra{height:8px;background:var(--linho);margin:14px 0 6px}.gar-barra span{display:block;height:100%;background:var(--cafe)}.gar-conta{margin:0 0 10px}
@media (max-width:480px){.gar-cab{grid-template-columns:auto minmax(0,1fr)}.gar-cab .tag{grid-column:2;justify-self:start}}
/* dossiê */
.dz-moldura{background:var(--areia);padding:12px;overflow:hidden}.dz-moldura iframe{width:100%;min-height:70vh;border:0;background:#fff;box-shadow:var(--sombra)}
/* planos e diversos */
.plano.atual{border:2px solid var(--cafe)}.plano-preco b{font:500 1.6rem "Red Hat Display",Arial}
.doc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.resumo-v{background:var(--linho2);padding:6px 12px;margin:0 0 12px}
.mais-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mais-grade a,.mais-grade button{display:grid;justify-items:center;gap:6px;background:#fff;border:1px solid var(--borda);padding:18px 8px;text-decoration:none;font:500 .9rem "Red Hat Display",Arial;cursor:pointer;min-height:96px;align-content:center}
/* tour da vitrine */
.tour-alvo{outline:3px solid var(--cafe);outline-offset:4px;position:relative;z-index:2}
.tour-balao{position:absolute;left:16px;right:16px;max-width:360px;margin:0 auto;z-index:40;background:var(--cafe);color:var(--linho);padding:14px 16px;box-shadow:var(--sombra)}.tour-balao p{margin:0 0 8px}.tour-balao .sob{color:var(--sec-esc)}.tour-balao .bt-texto{color:var(--linho)}
@media (prefers-reduced-motion:no-preference){.tour-balao{animation:entra .3s ease-out}}
/* vitrine (demo.html): sem cabeçalho do site, cabe numa moldura de 390 × 780 */
.vitrine body{background:var(--linho)}.vitrine .p-app{padding-top:12px}
#portal .secao{padding:0}#portal .secao+.secao{margin-top:8px}
@media (max-width:1023px){html{scroll-padding-bottom:110px}}

/* semáforo com cor (e forma) */
.sem-dentro .sem-luz{background:#4F7A43;border-color:#4F7A43}.sem-vence .sem-luz{background:#C29A2E;border-color:#B08A1E}.sem-vencido .sem-luz{background:#A33A27;border-color:#A33A27;border-radius:2px}
.sem-vencido a{border-left:3px solid #A33A27}.sem-vence a{border-left:3px solid #C29A2E}.sem-dentro a{border-left:3px solid #7E9C70}
.ldt-vencido .ldt-passado{background:#A33A27}.ldt-vence .ldt-passado{background:#B08A1E}.ldt-dentro .ldt-passado{background:#4F7A43}
/* resumo em números */
.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--areia);border:2px solid var(--areia)}
.numeros>div{background:#fff;padding:14px 12px;display:grid;gap:2px}.numeros b{font:500 1.9rem/1 "Red Hat Display",Arial}.numeros span{font-size:.85rem;color:var(--sec);line-height:1.3}.numeros small{font:500 .82rem "Red Hat Display",Arial}
/* próximo passo e atraso */
.passo-cartao{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-items:start;background:var(--cafe);color:var(--linho);padding:18px;margin:0 0 12px}.passo-cartao .sob{color:var(--sec-esc);margin:0 0 2px}.passo-cartao h3{margin:0 0 4px}.passo-cartao p{margin:0;color:var(--sec-esc);font-size:.92rem}.passo-cartao .bt{grid-column:2;justify-self:start;margin-top:6px}
@media (min-width:720px){.passo-cartao{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}.passo-cartao .bt{grid-column:auto;margin:0}}
.aviso-atraso{display:flex;gap:10px;align-items:center;background:#F8DFC8;color:#713808;border-left:4px solid #B85E14;padding:12px 14px;margin:0 0 14px;text-decoration:none}
.man-at{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.man-atrasado{border-left:3px solid #B85E14}
/* marcos: vertical no celular, horizontal no desktop; "hoje" em destaque */
.marcos-caixa{background:#fff;border:1px solid var(--borda);padding:14px 14px 6px}
.marcos{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px solid var(--areia);display:grid;gap:2px}
.marco a{display:grid;grid-template-columns:86px minmax(0,1fr);gap:0 10px;position:relative;padding:8px 0 8px 10px;text-decoration:none}
.marco-ponto{position:absolute;left:-36px;top:6px;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--cafe);display:grid;place-items:center}
.marco-data{font:500 .8rem "Red Hat Display",Arial;color:var(--sec);grid-row:1/3}.marco-tit{font:500 .95rem "Red Hat Display",Arial}.marco-det{font-size:.82rem;color:var(--sec);grid-column:2}
.marco.futuro .marco-ponto{border-style:dashed;border-color:var(--claro);color:var(--claro)}.marco.futuro .marco-tit{color:var(--sec)}
.marco.hoje a{background:var(--cafe);color:var(--linho);margin:4px 0}.marco.hoje .marco-ponto{background:var(--cafe);color:var(--linho);border-color:var(--cafe)}.marco.hoje .marco-data{color:var(--sec-esc)}
.marco a:hover .marco-tit{text-decoration:underline;text-underline-offset:3px}
@media (min-width:1024px){
 .marcos-caixa{overflow-x:auto;padding:18px 0 10px}
 .marcos{display:flex;gap:0;border-left:0;padding:0 18px;width:max-content;position:relative}
 .marcos::before{content:"";position:absolute;left:0;right:0;top:14px;height:2px;background:var(--areia)}
 .marco{width:150px;flex:none}.marco a{display:flex;flex-direction:column;gap:3px;padding:0 10px 8px 0;height:100%}
 .marco-ponto{position:relative;left:0;top:0;z-index:1;margin-bottom:6px}
 .marco.hoje a{padding:0 10px 8px 8px;margin:0 8px 0 0}
}
.man-cartao>.bt{align-self:start}.vitrine main{margin:0;padding:0}
html.vitrine{padding-top:0!important}

/* faixa do deslocamento da equipe (status do app de campo; sem localização) */
.p-desloc{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:10px;justify-content:center;padding:10px 16px;background:var(--cafe);color:var(--linho);font:500 .95rem/1.35 "Red Hat Display",Arial;text-align:center}
.p-desloc[hidden]{display:none}
.p-desloc-ponto{flex:none;width:10px;height:10px;border-radius:50%;background:var(--linho);box-shadow:0 0 0 3px rgba(237,230,218,.25)}
.p-desloc-a_caminho .p-desloc-ponto{animation:p-desloc-pulso 1.6s ease-in-out infinite}
.p-desloc-concluida{background:var(--linho2);color:var(--cafe);border-bottom:1px solid var(--borda)}.p-desloc-concluida .p-desloc-ponto{background:var(--cafe);box-shadow:none}
@keyframes p-desloc-pulso{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.p-desloc-a_caminho .p-desloc-ponto{animation:none}}.p-abas{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:6px 0 18px;border:1px solid var(--areia,#D9CFC0)}.p-abas button{all:unset;cursor:pointer;text-align:center;padding:12px 8px;font:500 1rem 'Red Hat Display',Arial;color:var(--sec,#66584D)}.p-abas button.on{background:var(--cafe,#3A2E26);color:var(--linho,#EDE6DA)}.p-abas button:focus-visible{outline:2px solid var(--cafe,#3A2E26);outline-offset:2px}
.p-entrar form{display:grid;gap:14px;margin:14px 0 6px}.p-entrar .aceite{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}.p-demo{margin-top:24px;padding-top:18px;border-top:1px solid var(--areia,#D9CFC0)}.p-demo .grade{display:grid;gap:8px;margin-top:10px}
.p-entrar .nota .bt-p{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--cafe,#3A2E26);font-weight:500}.p-entrar .nota .bt-p:focus-visible{outline:2px solid var(--cafe,#3A2E26)}