/* Agendamento de Vistorias – Gastardeli (mesma família visual do app de campo) */
:root{
  --azul:#3446A8; --azul-2:#5565C8; --azul-claro:#E8EAF6; --azul-texto:#2A3890;
  --laranja:#F2A65A; --laranja-suave:#FDF1E4; --laranja-texto:#8A410A;
  --fundo:#F3F4F8; --cartao:#FFFFFF; --texto:#15172E; --suave:#4A4D68;
  --borda:#C9CCDA; --linha:#E3E5EE;
  --ok:#1E7A4C; --ok-suave:#E3F3EA; --erro:#B4441A; --erro-suave:#FBE9E2; --cinza-suave:#ECEDF2;
  --barra:#3446A8;
  color-scheme: light;
}
/* tema: automático segue o aparelho; data-tema="claro"/"escuro" força */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --azul:#6F80E8; --azul-2:#8B99F0; --azul-claro:#2A2E58; --azul-texto:#C9CEFF;
    --laranja-suave:#3A2A1C; --laranja-texto:#F5C08A;
    --fundo:#11132B; --cartao:#1B1E3D; --texto:#ECEDF6; --suave:#B5B8D0;
    --borda:#3A3E66; --linha:#2A2E52;
    --ok:#4FC28A; --ok-suave:#173A2A; --erro:#F08A63; --erro-suave:#3D2219; --cinza-suave:#262A4A;
    --barra:#262C6E;
    color-scheme: dark;
  }
}
:root[data-tema="escuro"]{
    --azul:#6F80E8; --azul-2:#8B99F0; --azul-claro:#2A2E58; --azul-texto:#C9CEFF;
    --laranja-suave:#3A2A1C; --laranja-texto:#F5C08A;
    --fundo:#11132B; --cartao:#1B1E3D; --texto:#ECEDF6; --suave:#B5B8D0;
    --borda:#3A3E66; --linha:#2A2E52;
    --ok:#4FC28A; --ok-suave:#173A2A; --erro:#F08A63; --erro-suave:#3D2219; --cinza-suave:#262A4A;
    --barra:#262C6E;
    color-scheme: dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--fundo);color:var(--texto);font:16px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--azul)}
h1,h2,h3{line-height:1.2;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--laranja);outline-offset:2px}
[hidden]{display:none!important}

/* ---- botões ---- */
button{cursor:pointer;border:0;border-radius:12px;padding:12px 18px;font-weight:600;background:var(--azul);color:#fff}
button:disabled{opacity:.5;cursor:default}
button.sec{background:var(--azul-claro);color:var(--azul-texto)}
button.fantasma{background:transparent;color:var(--azul);padding:8px 10px}
button.perigo{background:var(--erro-suave);color:var(--erro)}
button.laranja{background:var(--laranja);color:#3B1E03}
button.peq{padding:7px 12px;font-size:14px;border-radius:9px}
.largo{width:100%}

/* ---- formulários ---- */
label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--suave)}
input,select,textarea{background:var(--cartao);border:1.5px solid var(--borda);border-radius:10px;padding:11px 12px;font-weight:400;color:var(--texto);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--azul);outline:none}
textarea{min-height:110px;resize:vertical}
.dica{font-size:13px;font-weight:400;color:var(--suave)}
.erro-campo{color:var(--erro);font-size:14px;font-weight:600}
.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;color:var(--texto)}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--azul)}

/* ---- chips de escolha ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--cartao);border:1.5px solid var(--borda);color:var(--texto);border-radius:999px;padding:8px 14px;font-weight:500;font-size:15px}
.chip.on{background:var(--azul);border-color:var(--azul);color:#fff}

/* ---- avisos ---- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--texto);color:var(--fundo);padding:12px 18px;border-radius:12px;max-width:min(92vw,520px);z-index:50;transition:.2s;font-weight:500}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.erro{background:var(--erro);color:#fff}
.aviso{background:var(--laranja-suave);color:var(--laranja-texto);border-radius:12px;padding:12px 14px;font-size:15px}
.aviso.ok{background:var(--ok-suave);color:var(--ok)}
.aviso.ruim{background:var(--erro-suave);color:var(--erro)}

/* =========================================================
   PÁGINA DO CLIENTE
   ========================================================= */
.cliente .topo{background:var(--barra);color:#fff;padding:18px 20px 22px}
.cliente .topo-in{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:14px}
.cliente .topo img{width:52px;height:52px;border-radius:12px;background:#fff;object-fit:contain;padding:4px;flex:none}
.cliente .topo b{display:block;font-size:19px}
.cliente .topo span{font-size:14px;opacity:.85}
.cliente main{max-width:560px;margin:-10px auto 0;padding:0 16px 24px}
.passo{background:var(--cartao);border-radius:18px;padding:22px 18px;box-shadow:0 1px 2px rgba(20,24,70,.06)}
.passo h1{font-size:23px;margin-bottom:6px}
.passo > p.sub{color:var(--suave);margin:0 0 18px}
.progresso{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:13px;color:var(--suave);font-weight:600}
.progresso .barra{flex:1;height:6px;background:var(--azul-claro);border-radius:6px;overflow:hidden}
.progresso .barra i{display:block;height:100%;background:var(--laranja);border-radius:6px;transition:width .3s}
.pilha{display:flex;flex-direction:column;gap:14px}
.opcao{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;width:100%;background:var(--cartao);color:var(--texto);border:1.5px solid var(--borda);border-radius:14px;padding:14px 16px;font-weight:600;font-size:17px}
.opcao small{font-weight:400;font-size:14px;color:var(--suave)}
.opcao.on{border-color:var(--azul);background:var(--azul-claro);box-shadow:inset 0 0 0 1px var(--azul)}
.rodape-passo{display:flex;gap:10px;margin-top:22px}
.rodape-passo button{flex:1}
.rodape-passo .fantasma{flex:0 0 auto}

/* datas: o dia em destaque */
.dias{display:flex;flex-direction:column;gap:10px}
.dia{display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:center;border:1.5px solid var(--linha);border-radius:14px;padding:10px 12px}
.dia .num{text-align:center;line-height:1}
.dia .num b{display:block;font-size:30px;font-weight:700;color:var(--azul-texto);letter-spacing:-.02em}
.dia .num span{font-size:12px;font-weight:600;color:var(--suave);text-transform:lowercase}
.dia .pers{display:flex;gap:8px;flex-wrap:wrap}
.per{flex:1;min-width:120px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:var(--fundo);color:var(--texto);border:1.5px solid transparent;border-radius:11px;padding:9px 12px;font-weight:600}
.per small{font-weight:400;font-size:13px;color:var(--suave)}
.per.on{background:var(--azul);color:#fff;border-color:var(--azul)}
.per.on small{color:#E2E6FF}
.per.vazio{visibility:hidden}

.fotos{display:flex;gap:10px;flex-wrap:wrap}
.foto{position:relative;width:86px;height:86px;border-radius:12px;overflow:hidden;background:var(--fundo)}
.foto img{width:100%;height:100%;object-fit:cover}
.foto button{position:absolute;top:4px;right:4px;width:26px;height:26px;padding:0;border-radius:50%;background:rgba(0,0,0,.6);font-size:15px;line-height:26px}
.add-foto{width:86px;height:86px;border:1.5px dashed var(--borda);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:13px;color:var(--suave);cursor:pointer;text-align:center;font-weight:600}
.add-foto input{display:none}

.resumo{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:15px}
.resumo dt{color:var(--suave)}
.resumo dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.codigo{font-size:30px;font-weight:700;letter-spacing:.04em;color:var(--azul-texto);margin:6px 0 14px}
.rodape{text-align:center;padding:10px 0 30px;font-size:14px}
.rodape a{color:var(--suave)}
.carregando{padding:50px 0;text-align:center;color:var(--suave)}

/* =========================================================
   PAINEL
   ========================================================= */
.painel .barra-topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--barra);color:#fff}
body.painel::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--barra)}
.barra-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap}
.barra-in img{width:38px;height:38px;border-radius:9px;background:#fff;object-fit:contain;padding:3px}
.barra-in .marca{font-weight:700;font-size:17px;margin-right:auto}
.barra-in .marca small{display:block;font-weight:400;font-size:12px;opacity:.8}
.barra-in .quem{font-size:13px;opacity:.9;text-align:right}
.barra-in button{background:rgba(255,255,255,.16);color:#fff}
.abas{max-width:1280px;margin:0 auto;display:flex;gap:4px;padding:0 12px;overflow-x:auto}
.abas button{background:transparent;color:#DCE0FF;border-radius:10px 10px 0 0;padding:10px 16px;font-weight:600;white-space:nowrap}
.abas button.on{background:var(--fundo);color:var(--texto)}
.abas .n{display:inline-block;min-width:20px;padding:1px 6px;margin-left:6px;border-radius:999px;background:var(--laranja);color:#3B1E03;font-size:12px}
.conteudo{max-width:1280px;margin:0 auto;padding:18px}
.cartao{background:var(--cartao);border-radius:16px;padding:18px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,24,70,.06)}
.cartao h2{font-size:18px;margin-bottom:12px}
.cartao h3{font-size:15px;margin:18px 0 10px;color:var(--suave)}
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px}
.filtros label{min-width:170px;flex:0 1 220px}
.filtros .busca{flex:1 1 220px}
.grade2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.grade3{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}

.tabela-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:13px;color:var(--suave);font-weight:600;padding:8px 10px;border-bottom:1.5px solid var(--linha);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--linha);vertical-align:top}
tr.clicavel{cursor:pointer}
tr.clicavel:hover td{background:var(--fundo)}
tr.urgente td{background:var(--laranja-suave)}
tr.urgente:hover td{background:var(--laranja-suave)}
td .forte{font-weight:600}
td .fraco{color:var(--suave);font-size:13px}
.selo{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.selo.pendente{background:var(--laranja-suave);color:var(--laranja-texto)}
.selo.confirmado{background:var(--ok-suave);color:var(--ok)}
.selo.cancelado{background:var(--cinza-suave);color:var(--suave)}
.selo.alerta{background:var(--erro-suave);color:var(--erro)}
.selo.info{background:var(--azul-claro);color:var(--azul-texto)}
.vazio-msg{padding:30px 10px;text-align:center;color:var(--suave)}

/* condomínios: lista + detalhe */
.dividido{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
@media (max-width:860px){.dividido{grid-template-columns:1fr}}
.lista-condos{display:flex;flex-direction:column;gap:4px;max-height:75vh;overflow-y:auto}
.lista-condos button{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;background:transparent;color:var(--texto);font-weight:500;padding:10px 12px;border-radius:10px}
.lista-condos button.on{background:var(--azul-claro);color:var(--azul-texto);font-weight:700}
.linha-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15px}
.linha-item:last-child{border-bottom:0}
.link-box{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--fundo);padding:10px 12px;border-radius:10px;font-size:14px;overflow-wrap:anywhere}
.link-box code{flex:1;min-width:200px}
.ocup{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ocup div{background:var(--fundo);border-radius:10px;padding:8px 10px;font-size:13px}
.ocup b{display:block;font-size:14px}
.ocup .cheio{background:var(--laranja-suave)}
.ocup .zero{opacity:.55}

/* diálogo */
dialog{border:0;border-radius:18px;padding:0;width:min(860px,96vw);max-height:92vh;background:var(--cartao);color:var(--texto);box-shadow:0 20px 60px rgba(10,12,40,.35)}
dialog::backdrop{background:rgba(12,14,40,.5)}
.dlg-cab{position:sticky;top:0;background:var(--cartao);padding:18px 20px 12px;border-bottom:1px solid var(--linha);display:flex;gap:12px;align-items:flex-start;z-index:1}
.dlg-cab h2{font-size:20px}
.dlg-cab .x{margin-left:auto;background:var(--fundo);color:var(--texto);width:38px;height:38px;padding:0;border-radius:50%;font-size:20px;flex:none}
.dlg-corpo{padding:16px 20px;display:flex;flex-direction:column;gap:6px}
.dlg-corpo h3{font-size:14px;color:var(--suave);margin:14px 0 6px}
.dlg-rodape{position:sticky;bottom:0;background:var(--cartao);padding:12px 20px;border-top:1px solid var(--linha);display:flex;gap:10px;flex-wrap:wrap}
.dlg-rodape .esq{margin-right:auto}
.titulo-prev{background:var(--fundo);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.hist{font-size:13px;color:var(--suave);display:flex;flex-direction:column;gap:6px}
.hist b{color:var(--texto)}
.fotos-painel{display:flex;gap:10px;flex-wrap:wrap}
.fotos-painel a{display:block;width:110px;height:110px;border-radius:10px;overflow:hidden;background:var(--fundo)}
.fotos-painel img{width:100%;height:100%;object-fit:cover}

.login{max-width:380px;margin:9vh auto;padding:0 16px}
.login .cartao{padding:26px}
.login img{width:64px;height:64px;border-radius:14px;background:#fff;padding:4px;object-fit:contain;margin-bottom:12px}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* menu da engrenagem (painel) */
.btn-menu{width:40px;height:40px;padding:0;border-radius:12px;font-size:20px;line-height:40px}
.btn-menu[aria-expanded="true"]{background:#fff}
.menu{position:absolute;top:calc(100% - 6px);right:max(12px,calc((100vw - 1280px)/2 + 12px));width:min(320px,calc(100vw - 24px));background:var(--cartao);color:var(--texto);border-radius:16px;box-shadow:0 14px 40px rgba(10,12,40,.3);padding:8px;z-index:20}
.menu .item{display:flex;width:100%;text-align:left;background:transparent;color:var(--texto);font-weight:500;padding:11px 12px;border-radius:10px;gap:10px;align-items:center}
.menu .item:hover,.menu .item.on{background:var(--azul-claro);color:var(--azul-texto)}
.menu .item .ic{width:22px;text-align:center}
.menu hr{border:0;border-top:1px solid var(--linha);margin:6px 4px}
.menu .rot{font-size:13px;font-weight:600;color:var(--suave);padding:6px 12px 4px}
.segmentado{display:flex;background:var(--fundo);border-radius:11px;padding:3px;margin:2px 8px 6px;gap:2px}
.segmentado button{flex:1;background:transparent;color:var(--texto);padding:8px 4px;border-radius:9px;font-size:14px;font-weight:500}
.segmentado button.on{background:var(--cartao);color:var(--azul-texto);font-weight:700;box-shadow:0 1px 3px rgba(10,12,40,.15)}
.menu .rodape-menu{font-size:12px;color:var(--suave);padding:6px 12px 4px}
.voltar-tela{margin:-4px 0 12px}

/* v1.4 */
.invalido{border-color:var(--erro)!important;box-shadow:0 0 0 1px var(--erro)}
div.invalido{border-radius:12px;padding:6px;box-shadow:0 0 0 2px var(--erro)}
.add-foto{gap:2px}
.add-foto span{font-size:22px}
.contato-box{margin-top:12px;display:flex;flex-direction:column;gap:2px}
.contato-box .chip{text-decoration:none}
.giro{display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.sino{position:relative}
.sino .badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#E0352B;color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--barra)}
.painel-sino{width:min(380px,calc(100vw - 24px));max-height:75vh;overflow-y:auto}
.notif{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:12px;background:var(--fundo);margin:6px 4px}
.notif.ausente{background:var(--erro-suave);color:var(--texto);border-left:4px solid var(--erro)}
.notif.ausente b{color:var(--erro)}
.notif button.sec{align-self:flex-start;margin-top:4px}
details.notif summary{cursor:pointer;list-style-position:inside}
details.notif .item{padding:8px 6px;font-size:14px}
.link-cliente{display:flex;flex-direction:column;gap:3px;background:var(--azul-claro);border-radius:14px;padding:14px;margin:16px 0}
.link-cliente .chip{text-decoration:none}
.ocorr{display:inline-block;margin-top:4px}
.notif.remarcado{border-left:4px solid var(--azul)}
.notif.remarcado b{color:var(--azul-texto)}
.notif.cancelado{border-left:4px solid var(--suave)}
/* v1.7 – visor de PDF e folha de compartilhar */
.visor{position:fixed;inset:0;z-index:60;background:#15172E;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.visor-cab{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--cartao);color:var(--texto)}
.visor-cab b{flex:1;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-cab .x,.folha-cab .x{background:var(--fundo);color:var(--texto);width:40px;height:40px;padding:0;border-radius:50%;font-size:22px;flex:none}
.visor-corpo{flex:1;overflow:auto;padding:12px 8px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:10px;touch-action:pan-x pan-y pinch-zoom}
.visor-corpo canvas{background:#fff;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.4);max-width:100%;height:auto}
.visor-msg{color:#fff;text-align:center;margin-top:20vh;line-height:1.6}
.giro.escuro{border-color:rgba(255,255,255,.3);border-top-color:#fff}
.folha-fundo{position:fixed;inset:0;z-index:70;background:rgba(12,14,40,.5);display:flex;align-items:flex-end;justify-content:center}
.folha{background:var(--cartao);color:var(--texto);width:min(460px,100%);border-radius:18px 18px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.3)}
@media (min-width:700px){.folha-fundo{align-items:center}.folha{border-radius:18px}}
.folha-cab{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.folha-cab b{flex:1;font-size:17px}
.folha .pilha button{width:100%}
.link-geral{display:flex;flex-direction:column;gap:2px;background:var(--azul-claro);border-radius:12px;padding:12px;margin-bottom:14px}
.link-geral .chip{text-decoration:none}