/* Portal do inquilino — mobile-first. Ele abre isso no celular, em pé,
   no corredor do prédio, tirando foto de uma infiltração. Alvos de toque
   grandes, uma coluna, nada de menu escondido. */
:root{
  --cor-primaria:#0F766E; --cor-secundaria:#134E4A;
  --tinta:#0F172A; --tinta-fraca:#64748B;
  --fundo:#F8FAFC; --superficie:#FFF; --borda:#E2E8F0;
  --verde:#059669; --ambar:#D97706; --vermelho:#DC2626; --azul:#2563EB; --cinza:#94A3B8;
}

/* Modo escuro. No portal ele importa mais que no painel: o inquilino abre
   isso no celular, à noite, muitas vezes no corredor do prédio. */
:root[data-tema="escuro"]{
  --tinta:#E2E8F0; --tinta-fraca:#94A3B8;
  --fundo:#0B1220; --superficie:#131C2E; --borda:#24324A;
  --verde:#34D399; --ambar:#FBBF24; --vermelho:#F87171; --azul:#60A5FA; --cinza:#64748B;
  color-scheme:dark;
}
:root[data-tema="escuro"] .rodape .selo.ok{border-color:#064E3B;background:#064E3B;color:#A7F3D0}
:root[data-tema="escuro"] .rodape .selo.atencao{border-color:#78350F;background:#78350F;color:#FDE68A}
:root[data-tema="escuro"] .splash{background:linear-gradient(160deg,#131C2E 0%,#0B1220 100%)}
:root[data-tema="escuro"] .splash img,
:root[data-tema="escuro"] .auth .logo{filter:brightness(1.6)}

*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--tinta);
     font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
     padding-bottom:env(safe-area-inset-bottom)}
.carregando,.vazio{padding:32px;text-align:center;color:var(--tinta-fraca)}

/* Autenticação */
.auth{max-width:420px;margin:0 auto;padding:40px 20px;text-align:center}
.auth .logo{max-height:64px;margin-bottom:16px}
.auth h1{font-size:24px;margin:0 0 4px}
.auth .sub{color:var(--tinta-fraca);margin:0 0 24px}
.auth form{display:flex;flex-direction:column;gap:14px;text-align:left}
.auth small{color:var(--tinta-fraca);font-size:13px}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
input,select,textarea{padding:12px;border:1px solid var(--borda);border-radius:10px;
                      font-size:16px;background:var(--superficie);color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cor-primaria);border-color:transparent}

/* Botões */
button,.secundaria{display:inline-flex;align-items:center;justify-content:center;gap:8px;
                   font:inherit;font-weight:600;border-radius:10px;cursor:pointer;
                   min-height:48px;padding:12px 16px;border:1px solid var(--borda);
                   background:var(--superficie);color:var(--tinta);text-decoration:none}
.primaria{background:var(--cor-primaria);color:#fff;border:none;width:100%}
.primaria:active{background:var(--cor-secundaria)}
.bloco{width:100%;margin-bottom:16px}
.link{background:none;border:none;color:var(--cor-primaria);min-height:40px;font-weight:500}
.icone{border:none;background:none;padding:8px;min-height:auto}

/* Estrutura */
.topo{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;
      background:var(--cor-primaria);color:#fff;font-weight:600}
.topo .icone{color:#fff}
.abas{display:flex;background:var(--superficie);border-bottom:1px solid var(--borda);
      position:sticky;top:0;z-index:5}
.abas button{flex:1;border:none;border-radius:0;border-bottom:2px solid transparent;
             color:var(--tinta-fraca);font-size:14px;flex-direction:column;gap:4px;padding:10px 4px}
.abas button.ativa{color:var(--cor-primaria);border-bottom-color:var(--cor-primaria)}
main{padding:16px;max-width:640px;margin:0 auto}

/* Cartões */
.cartao{background:var(--superficie);border:1px solid var(--borda);border-radius:14px;
        padding:16px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}
.cartao .linha{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cartao .valor{font-size:28px;font-weight:700;letter-spacing:-.5px}
.cartao .meta{color:var(--tinta-fraca);font-size:14px}
dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px}
dt{color:var(--tinta-fraca)} dd{margin:0;text-align:right;font-weight:500}

/* Badges de status */
.badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;
       background:#F1F5F9;color:var(--tinta-fraca)}
.badge.verde{background:#D1FAE5;color:#065F46}
.badge.ambar{background:#FEF3C7;color:#92400E}
.badge.vermelho{background:#FEE2E2;color:#991B1B}
.badge.azul{background:#DBEAFE;color:#1E40AF}

/* Upload (o inquilino fotografa direto pela câmera) */
.upload{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
        border:1.5px dashed var(--borda);border-radius:10px;color:var(--cor-primaria);
        font-weight:600;cursor:pointer;flex-direction:row}
.previa{display:flex;gap:8px;flex-wrap:wrap}
.previa img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.erro{background:#FEE2E2;color:#991B1B;padding:12px;border-radius:10px;
      display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:14px}

/* ── Splash da marca (3s no primeiro acesso da sessão) ───────────── */
.splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
        align-items:center;justify-content:center;gap:16px;
        background:linear-gradient(160deg,#fff 0%,var(--fundo) 100%)}
.splash img{width:150px;height:auto}
.splash .nome{font-size:15px;font-weight:700;color:var(--cor-secundaria)}
.splash .barra{width:150px;height:3px;border-radius:2px;background:var(--borda);overflow:hidden}
.splash .barra i{display:block;height:100%;width:0;background:var(--cor-primaria);
                 animation:carrega 2.7s ease-out forwards}
@keyframes carrega{to{width:100%}}

/* ── Rodapé com os selos ─────────────────────────────────────────── */
.rodape{margin-top:auto;padding:18px 16px 26px;text-align:center;
        border-top:1px solid var(--borda);background:var(--superficie)}
.rodape .selos{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.rodape .selo{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;min-height:auto;
              border:1px solid var(--borda);border-radius:999px;background:var(--fundo);
              color:var(--tinta-fraca);font-weight:600;font-size:11px}
.rodape .selo.ok{border-color:#D1FAE5;background:#D1FAE5;color:#065F46}
.rodape .selo svg.ic{width:13px;height:13px}
.rodape small{color:var(--tinta-fraca);font-size:11px}

/* ── Modal (política de privacidade) ─────────────────────────────── */
.modal-fundo{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:60;
             display:flex;align-items:flex-end;justify-content:center}
.modal{background:var(--superficie);border-radius:16px 16px 0 0;width:100%;max-height:88vh;
       display:flex;flex-direction:column}
.modal header{display:flex;align-items:center;gap:8px;padding:16px;border-bottom:1px solid var(--borda)}
.modal header h3{margin:0;font-size:15px;flex:1}
.modal .corpo{padding:16px;overflow:auto}
.modal .texto-legal{white-space:pre-wrap;font-size:13px;line-height:1.6;color:var(--tinta-fraca);text-align:left}
.modal footer{padding:12px 16px;border-top:1px solid var(--borda)}
.modal footer button{width:100%}
.rodape .selo .stxt{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.rodape .selo .stxt b{font-size:11px;font-weight:700}
.rodape .selo .stxt i{font-style:normal;font-size:9.5px;opacity:.75;font-weight:500}
.rodape .selo{padding:7px 11px;border-radius:10px;gap:7px}
.rodape .selo.atencao{border-color:#FEF3C7;background:#FEF3C7;color:#92400E}
.rodape .selo.btn-tema{cursor:pointer;background:var(--superficie)}
.rotulo-tema{font-weight:600;font-size:11px}

/* Olho da senha — no celular, sem isso, senha forte vira senha errada. */
.campo-senha{position:relative;display:block}
.campo-senha input{width:100%;padding-right:46px}
.campo-senha .olho{position:absolute;right:6px;top:50%;transform:translateY(-50%);
                   width:38px;height:38px;padding:0;border:none;background:none;
                   display:flex;align-items:center;justify-content:center;
                   color:var(--tinta-fraca);cursor:pointer;border-radius:8px}
.campo-senha .olho svg.ic{width:20px;height:20px}