/* =====================================================================
   Smart Gestão Imobiliária — app da imobiliária.
   Layout: barra lateral fixa à esquerda + conteúdo + rodapé.
   Desktop-first: quem usa isso passa o dia numa tela grande.
   ===================================================================== */
:root{
  --cor-primaria:#0F766E; --cor-secundaria:#134E4A;
  --tinta:#0F172A; --tinta-media:#475569; --tinta-fraca:#94A3B8;
  --fundo:#F1F5F9; --superficie:#FFF; --borda:#E2E8F0; --hover:#F8FAFC;
  --verde:#059669; --verde-fraco:#D1FAE5;
  --ambar:#D97706; --ambar-fraco:#FEF3C7;
  --vermelho:#DC2626; --vermelho-fraco:#FEE2E2;
  --azul:#2563EB;   --azul-fraco:#DBEAFE;
  --sombra:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --raio:10px;
  --lateral:232px;
}
/* ── Modo escuro ──────────────────────────────────────────────────────
   Só variáveis. Nenhuma tela sabe que existe modo escuro — se soubesse, a
   próxima tela que alguém escrever nasceria só no claro.

   Os tons não são o claro invertido: fundo azul-ardósia (não preto puro,
   que cansa e faz o texto vibrar) e texto cinza-claro (não branco puro,
   que "queima" no escuro). As cores fracas de estado viram escuras o
   bastante para o texto continuar legível por cima. */
:root[data-tema="escuro"]{
  --tinta:#E2E8F0; --tinta-media:#94A3B8; --tinta-fraca:#64748B;
  --fundo:#0B1220; --superficie:#131C2E; --borda:#24324A; --hover:#1B2740;
  --verde:#34D399;   --verde-fraco:#064E3B;
  --ambar:#FBBF24;   --ambar-fraco:#78350F;
  --vermelho:#F87171; --vermelho-fraco:#7F1D1D;
  --azul:#60A5FA;    --azul-fraco:#1E3A8A;
  --sombra:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;              /* barras de rolagem e campos nativos */
}
:root[data-tema="escuro"] .aviso.erro{color:#FECACA}
:root[data-tema="escuro"] .aviso.info{color:#BFDBFE}
:root[data-tema="escuro"] .aviso.atencao{color:#FDE68A}
:root[data-tema="escuro"] .aviso.ok{color:#A7F3D0}
:root[data-tema="escuro"] .rodape .selo.ok{color:#A7F3D0}
:root[data-tema="escuro"] .rodape .selo.atencao{color:#FDE68A}
:root[data-tema="escuro"] table.conferencia tr.confirmado td:first-child{color:#A7F3D0}
:root[data-tema="escuro"] .splash{background:linear-gradient(160deg,#131C2E 0%,#0B1220 100%)}
:root[data-tema="escuro"] .splash img{filter:brightness(1.6)}

*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--tinta);
     font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
     transition:background-color .18s ease, color .18s ease}
.carregando,.vazio{padding:48px;text-align:center;color:var(--tinta-fraca)}

/* ── Splash: a marca antes de tudo ────────────────────────────────── */
.splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
        align-items:center;justify-content:center;gap:18px;
        background:linear-gradient(160deg,#fff 0%,#F1F5F9 100%);
        animation:some 0.5s ease 2.5s forwards}
.splash img{width:180px;height:auto;animation:sobe .8s cubic-bezier(.2,.8,.2,1)}
.splash .nome{font-size:17px;font-weight:700;letter-spacing:-.2px;color:var(--cor-secundaria);
              animation:sobe .8s cubic-bezier(.2,.8,.2,1) .1s both}
.splash .barra{width:180px;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.6s ease-out forwards}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes carrega{to{width:100%}}
@keyframes some{to{opacity:0;visibility:hidden}}

/* ── Autenticação ─────────────────────────────────────────────────── */
.auth-tela{min-height:100vh;display:flex;flex-direction:column;
           align-items:center;justify-content:center;padding:24px}
.auth{max-width:400px;width:100%;background:var(--superficie);
      border:1px solid var(--borda);border-radius:14px;padding:36px;box-shadow:var(--sombra)}
.auth .marca{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px}
.auth .marca img{height:64px;width:auto}
.auth h1{font-size:19px;margin:0;text-align:center}
.auth .sub{color:var(--tinta-fraca);margin:2px 0 22px;font-size:13px;text-align:center}
.auth form{display:flex;flex-direction:column;gap:14px}

/* ── Estrutura: lateral + conteúdo ────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--lateral) 1fr;min-height:100vh}

.lateral{background:var(--superficie);border-right:1px solid var(--borda);
         display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.lateral .marca{display:flex;align-items:center;gap:10px;padding:16px 18px;
                border-bottom:1px solid var(--borda)}
.lateral .marca img{height:34px;width:auto}
.lateral .marca .txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.lateral .marca .txt b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;
                       text-overflow:ellipsis}
.lateral .marca .txt span{font-size:10px;color:var(--tinta-fraca);letter-spacing:.03em}

.abas{display:flex;flex-direction:column;gap:2px;padding:12px 10px;flex:1;overflow-y:auto}
/* justify-content:flex-start é obrigatório aqui: a regra geral de 'button'
   centraliza o conteúdo, e 'text-align:left' não desfaz isso num flex —
   o alinhamento do texto e o alinhamento dos itens do flex são coisas
   diferentes, e era só o segundo que estava errado. */
.abas button{display:flex;align-items:center;justify-content:flex-start;gap:10px;
             width:100%;text-align:left;
             border:none;background:none;padding:9px 12px;border-radius:8px;
             color:var(--tinta-media);font:inherit;font-weight:500;cursor:pointer}
.abas button:hover{background:var(--hover);color:var(--tinta)}
.abas button.ativa{background:var(--cor-primaria);color:#fff;font-weight:600}
.abas button.ativa svg.ic{color:#fff}

.usuario-box{border-top:1px solid var(--borda);padding:12px 14px;
             display:flex;align-items:center;gap:10px}
.usuario-box .quem{flex:1;min-width:0}
.usuario-box .quem b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usuario-box .quem span{font-size:11px;color:var(--tinta-fraca)}

.conteudo{display:flex;flex-direction:column;min-width:0}
main{padding:24px;max-width:1400px;width:100%;margin:0 auto;flex:1}
.cabecalho{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.cabecalho h2{font-size:20px;margin:0;flex:1}
.cabecalho .busca{width:260px}

/* ── Rodapé ───────────────────────────────────────────────────────── */
.rodape{border-top:1px solid var(--borda);background:var(--superficie);
        padding:18px 24px;font-size:12px;color:var(--tinta-fraca)}

/* Selos à esquerda, assinatura à direita, tudo na MESMA linha de base.
   Antes havia um .espaco de flex:1 empurrando a assinatura para a borda:
   em tela larga virava um vão enorme; em tela estreita, a assinatura caía
   sozinha numa linha e ficava torta. Agora a assinatura tem margem
   automática — encosta à direita quando cabe, e vai para baixo, centrada,
   quando não cabe. */
.rodape .linhas{max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;
                align-items:center;justify-content:center;gap:10px 16px}
.rodape .assinatura{margin-left:auto;white-space:nowrap;line-height:34px}
.rodape .selos{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Na tela de login não existe "esquerda e direita": existe uma coluna só.
   Tudo centralizado, e a assinatura embaixo. */
.rodape.compacto{border-top:none;background:transparent;padding:20px 16px 8px}
.rodape.compacto .linhas{justify-content:center}
.rodape.compacto .selos{justify-content:center}
.rodape.compacto .assinatura{margin-left:0;width:100%;text-align:center;line-height:1.6}

@media (max-width:700px){
  .rodape .linhas{justify-content:center}
  .rodape .assinatura{margin-left:0;width:100%;text-align:center;line-height:1.6}
}
.rodape .selo{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;
              border:1px solid var(--borda);border-radius:10px;background:var(--hover);
              color:var(--tinta-media);font-weight:600;font-size:11px;cursor:default}
.rodape .selo.ok{border-color:var(--verde-fraco);background:var(--verde-fraco);color:#065F46}
.rodape button.selo{cursor:pointer}
.rodape button.selo:hover{filter:brightness(.97)}
.rodape .selo svg.ic{width:16px;height:16px}
.rodape .selo .stxt{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.rodape .selo .stxt b{font-size:11.5px;font-weight:700}
.rodape .selo .stxt i{font-style:normal;font-size:10px;opacity:.75;font-weight:500}
.rodape .espaco{flex:1}
.rodape a{color:var(--cor-primaria);text-decoration:none;font-weight:500}
.rodape a:hover{text-decoration:underline}
.rodape .legal{width:100%;max-width:1400px;margin:10px auto 0;
               color:var(--tinta-fraca);line-height:1.5}

/* ── Cartões e KPIs ───────────────────────────────────────────────── */
.grade{display:grid;gap:16px}
.grade.k4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grade.k3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grade.k2{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}

.cartao{background:var(--superficie);border:1px solid var(--borda);
        border-radius:var(--raio);padding:18px;box-shadow:var(--sombra)}
.cartao h3{margin:0 0 14px;font-size:14px;color:var(--tinta-media);
           display:flex;align-items:center;gap:8px;font-weight:600}
.kpi{display:flex;flex-direction:column;gap:3px}
.kpi .rotulo{color:var(--tinta-fraca);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
             display:flex;align-items:center;gap:6px}
.kpi .valor{font-size:25px;font-weight:700;letter-spacing:-.6px}
.kpi .nota{font-size:12px;color:var(--tinta-fraca)}
.kpi.alerta .valor{color:var(--vermelho)}
.kpi.bom .valor{color:var(--verde)}
.kpi.atencao .valor{color:var(--ambar)}

/* Barra de progresso dentro do KPI (recebimento do mês, ocupação…) */
.progresso{height:6px;border-radius:3px;background:var(--borda);overflow:hidden;margin-top:8px}
.progresso i{display:block;height:100%;background:var(--verde);transition:width .6s}
.progresso i.ambar{background:var(--ambar)}
.progresso i.vermelho{background:var(--vermelho)}

/* Mini-gráfico de barras, sem biblioteca */
.barras{display:flex;align-items:flex-end;gap:6px;height:110px;padding-top:8px}
.barras .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.barras .col .bar{width:100%;background:var(--cor-primaria);border-radius:4px 4px 0 0;
                  min-height:3px;opacity:.85}
.barras .col .bar.previsto{background:var(--borda)}
.barras .col small{font-size:10px;color:var(--tinta-fraca)}

/* ── Tabelas ──────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;background:var(--superficie);
      border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden}
th{text-align:left;padding:11px 14px;background:var(--hover);color:var(--tinta-media);
   font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;
   border-bottom:1px solid var(--borda);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--borda);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--hover)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.acoes{text-align:right;white-space:nowrap}

/* ── Formulários ──────────────────────────────────────────────────── */
label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:500;color:var(--tinta-media)}
input,select,textarea{padding:9px 11px;border:1px solid var(--borda);border-radius:8px;
      font:inherit;background:var(--superficie);color:var(--tinta);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cor-primaria);
      outline-offset:-1px;border-color:transparent}
fieldset{border:1px solid var(--borda);border-radius:var(--raio);padding:16px;margin:0 0 16px}
legend{padding:0 8px;font-size:12px;font-weight:600;color:var(--tinta-media);
       text-transform:uppercase;letter-spacing:.04em}
.linha-form{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
small.dica{color:var(--tinta-fraca);font-size:12px;font-weight:400}

/* ── Botões ───────────────────────────────────────────────────────── */
button,.botao{display:inline-flex;align-items:center;justify-content:center;gap:7px;
      font:inherit;font-weight:600;border-radius:8px;cursor:pointer;padding:9px 14px;
      border:1px solid var(--borda);background:var(--superficie);color:var(--tinta);
      text-decoration:none;white-space:nowrap}
button:hover,.botao:hover{background:var(--hover)}
.primaria{background:var(--cor-primaria);color:#fff;border-color:transparent}
.primaria:hover{background:var(--cor-secundaria)}
.perigo{color:var(--vermelho);border-color:var(--vermelho-fraco)}
.icone{padding:6px;border:none;background:none;color:var(--tinta-fraca)}
.icone:hover{color:var(--tinta);background:var(--hover)}
.link{border:none;background:none;color:var(--cor-primaria);padding:4px;font-weight:500}

/* ── Badges ───────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
       padding:3px 9px;border-radius:999px;background:#F1F5F9;color:var(--tinta-media);white-space:nowrap}
.badge.verde{background:var(--verde-fraco);color:#065F46}
.badge.ambar{background:var(--ambar-fraco);color:#92400E}
.badge.vermelho{background:var(--vermelho-fraco);color:#991B1B}
.badge.azul{background:var(--azul-fraco);color:#1E40AF}
.badge.cinza{background:#F1F5F9;color:var(--tinta-fraca)}

/* ── Modal ────────────────────────────────────────────────────────── */
.modal-fundo{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:50;
             display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto}
.modal{background:var(--superficie);border-radius:14px;width:100%;max-width:680px;
       box-shadow:0 20px 40px rgba(15,23,42,.2)}
.modal header{display:flex;align-items:center;gap:10px;padding:18px 20px;
              border-bottom:1px solid var(--borda)}
.modal header h3{margin:0;font-size:16px;flex:1}
.modal .corpo{padding:20px;display:flex;flex-direction:column;gap:14px}
.modal .corpo .texto-legal{white-space:pre-wrap;font-size:13px;line-height:1.6;
                           color:var(--tinta-media);max-height:60vh;overflow:auto}
.modal footer{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;
              border-top:1px solid var(--borda)}

/* ── Avisos ───────────────────────────────────────────────────────── */
.aviso{display:flex;gap:10px;padding:12px 14px;border-radius:var(--raio);
       font-size:13px;margin-bottom:16px;align-items:flex-start}
.aviso.erro{background:var(--vermelho-fraco);color:#991B1B}
.aviso.info{background:var(--azul-fraco);color:#1E40AF}
.aviso.atencao{background:var(--ambar-fraco);color:#92400E}
.aviso.ok{background:var(--verde-fraco);color:#065F46}

/* ── Selos na barra lateral ───────────────────────────────────────── */
.selos-lateral{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;
               border-top:1px solid var(--borda)}
.selo.mini{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;
           border:1px solid var(--borda);border-radius:7px;background:var(--hover);
           color:var(--tinta-media);font-size:10.5px;font-weight:600;line-height:1.4}
.selo.mini svg.ic{width:12px;height:12px}
.selo.mini.ok{border-color:var(--verde-fraco);background:var(--verde-fraco);color:#065F46}
.selo.mini.atencao{border-color:var(--ambar-fraco);background:var(--ambar-fraco);color:#92400E}
button.selo.mini{cursor:pointer}
:root[data-tema="escuro"] .selo.mini.ok{color:#A7F3D0}
:root[data-tema="escuro"] .selo.mini.atencao{color:#FDE68A}

/* ── Botão de tema: canto superior direito, só o ícone ────────────── */
.topo-direito{position:absolute;top:14px;right:20px;z-index:5}
.conteudo{position:relative}
.auth-tela{position:relative}
.topo-direito .btn-tema{width:36px;height:36px;padding:0;border-radius:9px;
                        background:var(--superficie);border:1px solid var(--borda);
                        color:var(--tinta-media)}
.topo-direito .btn-tema:hover{color:var(--cor-primaria);border-color:var(--cor-primaria)}
.topo-direito .btn-tema svg.ic{width:18px;height:18px}

/* ── Foto de perfil ───────────────────────────────────────────────── */
.foto-perfil{width:64px;height:64px;border-radius:50%;overflow:hidden;flex-shrink:0;
             background:var(--hover);border:1px solid var(--borda);
             display:flex;align-items:center;justify-content:center;color:var(--tinta-fraca)}
.foto-perfil img{width:100%;height:100%;object-fit:cover}
.foto-perfil.pequena{width:32px;height:32px}
.foto-perfil.pequena svg.ic{width:16px;height:16px}
.col-foto{width:44px}
.usuario-box .avatar{overflow:hidden}
.usuario-box .avatar img{width:100%;height:100%;object-fit:cover}

.conta-topo{display:flex;gap:16px;align-items:center}
.botao.pequeno{padding:6px 11px;font-size:12.5px;display:inline-flex}

/* ── 2FA ──────────────────────────────────────────────────────────── */
.bloco-2fa{border:1px solid var(--borda);border-radius:var(--raio);padding:14px;
           background:var(--hover)}
.linha-2fa{display:flex;align-items:center;justify-content:space-between;gap:12px}
.linha-2fa b{display:flex;align-items:center;gap:7px;font-size:13.5px}
.qr-2fa{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap;align-items:flex-start}
.qr-2fa img{border-radius:8px;background:#fff;padding:6px;flex-shrink:0}
.qr-2fa p{margin:0 0 8px;font-size:13px}
.qr-2fa code{background:var(--superficie);border:1px solid var(--borda);border-radius:6px;
             padding:3px 7px;font-size:12.5px;letter-spacing:.5px;word-break:break-all}
.conf-2fa{display:flex;gap:8px;margin:10px 0}
.conf-2fa input{width:120px;text-align:center;letter-spacing:5px;font-size:17px;font-weight:700}

/* ── Olho da senha ────────────────────────────────────────────────── */
.campo-senha{position:relative;display:block}
.campo-senha input{width:100%;padding-right:42px}
.campo-senha .olho{position:absolute;right:4px;top:50%;transform:translateY(-50%);
                   width:34px;height:34px;padding:0;border:none;background:none;
                   display:flex;align-items:center;justify-content:center;
                   color:var(--tinta-fraca);cursor:pointer;border-radius:7px}
.campo-senha .olho:hover{background:var(--hover);color:var(--tinta-media)}
.campo-senha .olho svg.ic{width:18px;height:18px}

/* ── Botão de tema ────────────────────────────────────────────────── */
.rodape .selo.btn-tema{cursor:pointer}
.rodape .selo.btn-tema:hover{border-color:var(--cor-primaria);color:var(--cor-primaria)}
.rotulo-tema{font-weight:600;font-size:11.5px}

/* ── Fluxo do contrato ────────────────────────────────────────────── */

/* Os dois caminhos da aba: criar ou pesquisar. Botões grandes porque são
   as duas únicas coisas que se faz aqui — esconder isso num menu seria
   economizar espaço que não falta. */
.acao-grande{display:flex;align-items:center;justify-content:flex-start;gap:16px;
             text-align:left;cursor:pointer;
             border:1px solid var(--borda);transition:border-color .15s, transform .1s}
.acao-grande:hover{border-color:var(--cor-primaria);transform:translateY(-1px)}
.acao-grande svg.ic{width:30px;height:30px;color:var(--cor-primaria);flex-shrink:0}
.acao-grande div{display:flex;flex-direction:column;gap:2px;min-width:0}
.acao-grande b{font-size:15px}
.acao-grande span{font-size:12.5px;color:var(--tinta-fraca);font-weight:400}

/* Lista de escolha: nome à esquerda, situação à direita, linha inteira clicável. */
.lista-sel{display:flex;flex-direction:column;gap:6px}
.item-sel{display:flex;align-items:center;justify-content:flex-start;gap:12px;
          width:100%;text-align:left;
          padding:11px 14px;border:1px solid var(--borda);border-radius:9px;
          background:var(--superficie);cursor:pointer}
.item-sel:hover{background:var(--hover);border-color:var(--cor-primaria)}
.item-sel .quem{flex:1;min-width:0;display:flex;flex-direction:column}
.item-sel .quem b{font-size:13.5px}
.item-sel .quem span{font-size:12px;color:var(--tinta-fraca)}
.item-sel svg.ic{color:var(--tinta-fraca);flex-shrink:0}

/* Trilha do assistente */
.trilha{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 18px;flex-wrap:wrap}
.trilha li{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:20px;
           background:var(--superficie);border:1px solid var(--borda);
           font-size:12.5px;color:var(--tinta-fraca)}
.trilha li span{width:19px;height:19px;border-radius:50%;background:var(--borda);color:var(--tinta-media);
                display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.trilha li.atual{border-color:var(--cor-primaria);color:var(--cor-primaria);font-weight:600}
.trilha li.atual span{background:var(--cor-primaria);color:#fff}
.trilha li.feito{color:var(--verde);border-color:var(--verde-fraco)}
.trilha li.feito span{background:var(--verde);color:#fff}

/* Conferência: o campo confirmado esverdeia. É o único retorno visual que
   importa — a pessoa precisa ver, de relance, o que ainda falta olhar. */
table.conferencia{width:100%;border-collapse:collapse}
table.conferencia td{padding:9px 10px;border-bottom:1px solid var(--borda);font-size:13px;vertical-align:middle}
table.conferencia tr:last-child td{border-bottom:none}
table.conferencia tr.confirmado{background:var(--verde-fraco)}
table.conferencia tr.confirmado td:first-child{color:#065F46;font-weight:600}
table.conferencia td.valor{color:var(--tinta-media)}
table.conferencia td.acoes{text-align:right;white-space:nowrap;display:flex;gap:6px;justify-content:flex-end}
table.conferencia td.acoes button{padding:5px 10px;font-size:12px}
table.conferencia td.acoes button.ok{background:var(--verde);color:#fff;border-color:var(--verde)}
table.conferencia td.acoes button:disabled{opacity:.4;cursor:not-allowed}
.vazio-td{color:var(--tinta-fraca);font-style:italic}
.req{color:var(--vermelho)}

.rodape-passo{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}

/* Achados da revisão. A cor é a gravidade — vermelho não é enfeite. */
.achados{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.achado{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
        padding:12px 14px;border-radius:9px;background:var(--superficie);
        border:1px solid var(--borda);border-left:3px solid var(--borda)}
.achado.g-alta{border-left-color:var(--vermelho)}
.achado.g-media{border-left-color:var(--ambar)}
.achado.g-baixa{border-left-color:var(--azul)}
.achado .corpo-achado{flex:1;min-width:0}
.achado .corpo-achado p{margin:5px 0 0;font-size:13px;color:var(--tinta-media)}
.achado .acoes-achado{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.achado .acoes-achado button{padding:5px 10px;font-size:12px}
.clausula-sug{margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--hover);
              border:1px dashed var(--borda)}
.clausula-sug b{font-size:12.5px}
.clausula-sug p{font-size:12.5px;line-height:1.5}

/* ── Miniaturas ───────────────────────────────────────────────────── */
.miniaturas{display:flex;gap:8px;flex-wrap:wrap}
.miniaturas img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--borda)}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--hover);
        display:flex;align-items:center;justify-content:center;color:var(--tinta-fraca)}

/* =====================================================================
   CELULAR
   =====================================================================
   Não é "o desktop encolhido". O que muda é o que a mão faz:

   · a lateral vira MENU DESLIZANTE (nove abas não cabem numa barra, e
     espremê-las viraria um alvo de 30px que ninguém acerta);
   · o polegar troca de aba DESLIZANDO — sem precisar mirar em nada;
   · as tabelas viram CARTÕES: tabela no celular é rolagem lateral, e
     rolagem lateral esconde justamente a coluna que interessa;
   · toda foto abre com PINÇA (o comprovante e a infiltração são o
     trabalho, não a ilustração);
   · alvo de toque mínimo de 44px — é a medida do dedo, não uma escolha
     estética.
   ===================================================================== */
.barra-mobile{display:none}
.cortina{display:none}

@media (max-width: 900px){
  .app{grid-template-columns:1fr;padding-top:56px}

  .barra-mobile{display:flex;align-items:center;gap:12px;
                position:fixed;top:0;left:0;right:0;z-index:30;height:56px;padding:0 12px;
                background:var(--superficie);border-bottom:1px solid var(--borda)}
  .barra-mobile b{flex:1;font-size:15px}
  .barra-mobile .icone{width:44px;height:44px}   /* o dedo, não o mouse */

  /* Menu que desliza. Fora da tela por padrão: sai do caminho até ser
     chamado. Transform (e não 'left') porque só ele anima sem repintar
     a tela inteira — no celular isso é a diferença entre deslizar e
     tremer. */
  .lateral{position:fixed;top:0;bottom:0;left:0;width:270px;z-index:40;height:100vh;
           transform:translateX(-100%);transition:transform .22s ease;
           border-right:1px solid var(--borda)}
  .app.menu-aberto .lateral{transform:none}

  .cortina{display:block;position:fixed;inset:0;z-index:35;
           background:rgba(2,6,23,.45);opacity:0;pointer-events:none;
           transition:opacity .22s ease}
  .app.menu-aberto .cortina{opacity:1;pointer-events:auto}

  .abas button{padding:12px;font-size:15px}      /* alvo de dedo */
  .topo-direito{display:none}                     /* o tema mora na barra de cima */

  main{padding:14px}
  .cabecalho{flex-wrap:wrap}
  .cabecalho h2{font-size:18px;width:100%}
  .cabecalho .busca{width:100%}

  .grade.k4,.grade.k3,.grade.k2{grid-template-columns:1fr 1fr;gap:10px}
  .cartao{padding:14px}
  .kpi .valor{font-size:21px}

  /* Tabela → cartão. Cada linha vira um bloco, e cada célula ganha o nome
     da coluna à esquerda. Sem isso, a pessoa rola para o lado procurando
     "quanto" e "quando" — e desiste. */
  table thead{display:none}
  table, table tbody, table tr, table td{display:block;width:100%}
  table tr{border:1px solid var(--borda);border-radius:10px;margin-bottom:10px;
           padding:10px 12px;background:var(--superficie)}
  table td{border:none;padding:5px 0;display:flex;justify-content:space-between;
           align-items:center;gap:12px;text-align:right}
  table td::before{content:attr(data-col);color:var(--tinta-fraca);font-size:11.5px;
                   text-transform:uppercase;letter-spacing:.04em;text-align:left;
                   flex-shrink:0;font-weight:600}
  table td.acoes{justify-content:flex-end;padding-top:10px;margin-top:6px;
                 border-top:1px solid var(--borda)}
  table td.acoes::before{content:''}
  table td.acoes button{min-width:44px;min-height:38px}

  /* Conferência do contrato: a coluna de ações desce, senão espreme tudo. */
  table.conferencia td.acoes{flex-wrap:wrap}

  .rodape-passo{position:sticky;bottom:0;background:var(--fundo);padding:10px 0;
                border-top:1px solid var(--borda);z-index:5}
  .rodape-passo button{flex:1;min-height:46px}

  .achado{flex-direction:column;align-items:stretch}
  .achado .acoes-achado{justify-content:flex-start}

  .trilha li{flex:1;justify-content:center;font-size:11px;padding:7px 6px}

  .modal{max-height:92vh}
  .modal .corpo{padding:16px}
  .linha-form{grid-template-columns:1fr}
  .qr-2fa{justify-content:center}

  .rodape .legal{text-align:center}
  .rodape .assinatura{width:100%;text-align:center;margin:6px 0 0}
}

/* Alvos de toque: vale para qualquer aparelho com dedo, não só para tela
   pequena — tablet e notebook com touch também têm dedo. */
@media (pointer: coarse){
  button,.botao{min-height:42px}
  .item-sel{min-height:56px}
  input,select,textarea{min-height:44px;font-size:16px}  /* 16px: o iOS não dá zoom */
}

/* =====================================================================
   VISUALIZADOR DE FOTO — pinça, arrasto, duplo toque
   ===================================================================== */
.visor-foto{position:fixed;inset:0;z-index:200;background:rgba(2,6,23,.92);
            display:flex;align-items:center;justify-content:center;
            touch-action:none;   /* o navegador não rouba o gesto da pinça */
            user-select:none}
.visor-palco{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
             overflow:hidden;touch-action:none;cursor:grab}
.visor-palco:active{cursor:grabbing}
.visor-palco img{max-width:94vw;max-height:88vh;transform-origin:center;
                 will-change:transform;border-radius:6px}
.visor-fechar{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;
              border-radius:50%;background:rgba(255,255,255,.14);border:none;color:#fff}
.visor-fechar:hover{background:rgba(255,255,255,.24)}
.visor-legenda{position:absolute;bottom:52px;left:0;right:0;text-align:center;
               color:#E2E8F0;font-size:13px;padding:0 20px}
.visor-dica{position:absolute;bottom:18px;left:0;right:0;text-align:center;
            color:#94A3B8;font-size:11.5px}
@media (hover: hover){ .visor-dica{display:none} }   /* no mouse, é ruído */