/* ============================================================ TOKENS — LocarBem SaaS · verde + amarelo Tema claro (padrão) e escuro via [data-tema="escuro"] no . Todos os componentes usam APENAS os tokens semânticos abaixo — assim o tema escuro é automático, sem reescrever componente. ============================================================ */ :root{ /* marca */ --verde-900:#0C352A; --verde-700:#14523F; --verde-500:#1E7A5C; --verde-100:#E3F0EA; --amarelo:#F5C542; --amarelo-escuro:#D9A81F; /* semânticos — TEMA CLARO */ --fundo:#F1F3EC; --card:#FFFFFF; --tinta:#122B22; /* texto principal */ --tinta-2:#5A6E64; /* texto secundário */ --linha:#E2E7DD; /* bordas */ --pontilhado:#C9D2C4; /* leaders de recibo */ --campo-bg:#FBFCFA; /* fundo de inputs */ --num-positivo:#1E7A5C; /* números de receita */ --sombra:0 1px 2px rgba(12,53,42,.06), 0 10px 26px -14px rgba(12,53,42,.20); --ok-bg:#E4F3EC; --ok-tx:#14523F; --alerta-bg:#FDF3D7;--alerta-tx:#7A5E10; --erro-bg:#FBE4E1; --erro-tx:#C0392B; --neutro-bg:#EEF0EA;--neutro-tx:#5A6E64; --raio:16px; --f-display:'Sora',sans-serif; --f-corpo:'Inter',sans-serif; } /* ---- TEMA ESCURO: verde profundo (não é o cinza genérico) ---- */ body[data-tema="escuro"]{ color-scheme:dark; --fundo:#0A1F19; --card:#0F2A21; --tinta:#EAF2ED; --tinta-2:#8FA89C; --linha:#1C3A2F; --pontilhado:#2A4A3D; --campo-bg:#123126; --num-positivo:#7BD8B0; --sombra:0 1px 2px rgba(0,0,0,.35), 0 14px 30px -16px rgba(0,0,0,.55); --ok-bg:#153D2F; --ok-tx:#7BD8B0; --alerta-bg:#3D3313;--alerta-tx:#F5C542; --erro-bg:#3D1B17; --erro-tx:#F0938A; --neutro-bg:#163027;--neutro-tx:#8FA89C; } *{margin:0;padding:0;box-sizing:border-box} body{ font-family:var(--f-corpo);background:var(--fundo);color:var(--tinta); font-size:15px;line-height:1.6; transition:background .3s,color .3s; } button{font-family:inherit;cursor:pointer} input,select{font-family:inherit;font-size:.92rem} :focus-visible{outline:3px solid var(--amarelo);outline-offset:2px} .oculto{display:none!important} /* ============================================================ BOTÃO DE TEMA ============================================================ */ .btn-icone{ width:40px;height:40px;border-radius:50%; background:var(--card);border:1px solid var(--linha);color:var(--tinta); box-shadow:var(--sombra);font-size:1.05rem;line-height:1; display:grid;place-items:center;transition:transform .15s; flex-shrink:0; } .btn-icone:hover{transform:translateY(-2px)} .btn-tema-flutuante{position:fixed;top:1.1rem;right:1.1rem;z-index:50} /* ============================================================ TELA DE LOGIN ============================================================ */ .tela-login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr} .login-lado-marca{ background: radial-gradient(ellipse at 80% 15%,rgba(245,197,66,.18),transparent 50%), linear-gradient(155deg,var(--verde-900),var(--verde-700)); color:#EAF4EF;display:flex;flex-direction:column;justify-content:center; padding:4rem;gap:1.2rem; } .logo{font-family:var(--f-display);font-weight:700;font-size:2rem;color:#fff} .logo b{color:var(--amarelo)} .login-lado-marca h1{font-family:var(--f-display);font-size:1.9rem;font-weight:600;line-height:1.25;max-width:24rem} .login-lado-marca p{opacity:.85;max-width:26rem;font-size:.95rem} .login-pontos{list-style:none;margin-top:.8rem;display:grid;gap:.55rem;font-size:.9rem} .login-pontos li::before{content:"✓";color:var(--amarelo);font-weight:700;margin-right:.55rem} .login-lado-form{display:flex;align-items:center;justify-content:center;padding:2.5rem;background:var(--fundo);transition:background .3s} .card-login{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:2.4rem;width:min(26rem,100%)} .card-login h2{font-family:var(--f-display);font-size:1.3rem;margin-bottom:.3rem} .card-login>p{color:var(--tinta-2);font-size:.87rem;margin-bottom:1.4rem} .campo{margin-bottom:1rem} .campo label{display:block;font-size:.78rem;font-weight:600;margin-bottom:.35rem;color:var(--tinta)} .campo input,.campo select{ width:100%;padding:.7rem .85rem;border:1.5px solid var(--linha);border-radius:10px; background:var(--campo-bg);color:var(--tinta); } .campo input:focus,.campo select:focus{border-color:var(--verde-500);outline:none} .campo input::placeholder{color:var(--tinta-2);opacity:.75} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; border:none;border-radius:10px;font-weight:600;font-size:.9rem; padding:.75rem 1.4rem;transition:transform .15s,box-shadow .15s,background .15s;text-decoration:none; } .btn-verde{background:var(--verde-700);color:#fff;width:100%} .btn-verde:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,82,63,.3)} body[data-tema="escuro"] .btn-verde{background:var(--verde-500)} .btn-amarelo{background:var(--amarelo);color:var(--verde-900)} .btn-amarelo:hover{background:var(--amarelo-escuro)} .btn-fantasma{background:transparent;border:1.5px solid var(--linha);color:var(--tinta)} .btn-mini{padding:.4rem .8rem;font-size:.78rem;border-radius:8px} .aviso-demo{ margin-top:1.2rem;background:var(--alerta-bg);border:1px solid var(--alerta-tx); border-radius:10px;padding:.7rem .9rem;font-size:.78rem;color:var(--alerta-tx); } /* ============================================================ LAYOUT DO APP ============================================================ */ .app{min-height:100vh;display:grid;grid-template-columns:230px 1fr} .sidebar{ background:var(--verde-900);color:#DCEDE5;display:flex;flex-direction:column; padding:1.4rem 1rem;gap:.3rem; } .sidebar .logo{font-size:1.35rem;margin-bottom:1.6rem;padding-left:.5rem} .nav-item{ display:flex;align-items:center;gap:.7rem;border:none;background:none;color:inherit; padding:.65rem .8rem;border-radius:10px;font-size:.88rem;font-weight:500;text-align:left;width:100%; transition:background .15s; } .nav-item:hover{background:rgba(255,255,255,.07)} .nav-item.ativa{background:var(--verde-700);color:#fff} .nav-item .ic{width:1.2rem;text-align:center} .sidebar-rodape{margin-top:auto;font-size:.72rem;opacity:.65;padding:.5rem .8rem;line-height:1.5} /* Perfil do corretor na sidebar (v3.5) */ .sidebar-perfil{display:flex;align-items:center;gap:.6rem;padding:.2rem .5rem 1.1rem} .sidebar-perfil .nome-perfil{font-size:.8rem;font-weight:600;line-height:1.25;word-break:break-word} .avatar-foto{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--amarelo);flex:none} .avatar-grande{width:36px;height:36px;font-size:.85rem} .avatar-preview{width:72px;height:72px} .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block} .logo-preview{max-height:70px;max-width:220px;object-fit:contain;border-radius:6px;background:#fff;padding:.3rem} .principal{padding:1.8rem 2.2rem;max-width:1100px;width:100%} .topo-app{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap} .topo-app h2{font-family:var(--f-display);font-size:1.35rem} .topo-acoes{display:flex;gap:.6rem;align-items:center} .chip-usuario{ display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--linha); border-radius:999px;padding:.35rem .9rem .35rem .4rem;font-size:.82rem;font-weight:500; } .avatar{width:30px;height:30px;border-radius:50%;background:var(--amarelo);color:var(--verde-900);display:grid;place-items:center;font-weight:700;font-size:.8rem} /* ============================================================ RESUMO EM EXTRATO (Visão geral e Repasses) Uma faixa única dividida — no lugar dos quadradinhos soltos. ============================================================ */ .resumo{ background:var(--card);border:1px solid var(--linha);border-radius:var(--raio); box-shadow:var(--sombra);padding:6px 24px;margin-bottom:1.8rem; display:grid;grid-template-columns:repeat(4,1fr); } .resumo.tres{grid-template-columns:repeat(3,1fr)} .resumo.duas{grid-template-columns:repeat(2,1fr)} .resumo .item{padding:16px 0;display:flex;flex-direction:column;gap:6px;position:relative} .resumo .item + .item{padding-left:24px} .resumo .item + .item::before{ content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--linha); } .resumo .rotulo{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)} .resumo .valor{font-family:var(--f-display);font-weight:600;font-size:1.35rem;font-variant-numeric:tabular-nums;color:var(--tinta)} .resumo .valor small{font-size:.74rem;font-weight:500;color:var(--tinta-2);margin-left:4px} .resumo .valor.receita{color:var(--num-positivo)} /* Dashboard financeiro (PRO) */ .tendencia{display:block;font-size:.72rem;font-weight:600;margin-top:2px} .tendencia-cima{color:var(--num-positivo)} .tendencia-baixo{color:var(--erro-tx)} .grafico-barras{ display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:end; gap:.9rem;height:180px;padding:1rem .5rem 0; } .barra-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%} .barra-valor{font-size:.62rem;color:var(--tinta-2);margin-bottom:.3rem;white-space:nowrap;font-variant-numeric:tabular-nums} .barra{ width:100%;max-width:44px;border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--amarelo),var(--num-positivo)); transition:height .3s ease;min-height:4px; } .barra-label{font-size:.68rem;color:var(--tinta-2);margin-top:.5rem;text-transform:uppercase;letter-spacing:.04em} /* ============================================================ FICHA DO IMÓVEL — card estilo documento/recibo ============================================================ */ .cards-imoveis{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.2rem;margin-bottom:1.4rem} /* miniaturas quadradas — a galeria; a ficha completa abre no modal */ .grade-miniaturas{ display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1rem;margin-bottom:1.4rem; } .mini-imovel{ aspect-ratio:1/1;display:flex;flex-direction:column; background:var(--card);border:1px solid var(--linha);border-radius:var(--raio); box-shadow:var(--sombra);padding:.9rem;cursor:pointer;text-align:left; font:inherit;color:var(--tinta);position:relative;overflow:hidden; transition:transform .18s,border-color .18s; } .mini-imovel:hover{transform:translateY(-3px);border-color:var(--amarelo)} .mini-imovel .carimbo{position:static;transform:rotate(2deg);align-self:flex-start} .mini-ref{ font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--tinta-2);margin:.55rem 0 .3rem; } .mini-end{ font-family:var(--f-display);font-weight:600;font-size:.88rem;line-height:1.3; letter-spacing:-.01em;flex:1; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .mini-rodape{border-top:1px dashed var(--pontilhado);padding-top:.5rem;margin-top:.5rem} .mini-valor{font-family:var(--f-display);font-weight:700;font-size:.98rem} .mini-taxa{font-size:.7rem;color:var(--tinta-2)} .mini-abrir{ position:absolute;top:.7rem;right:.7rem;font-size:.75rem;color:var(--tinta-2); opacity:0;transition:opacity .15s; } .mini-imovel:hover .mini-abrir{opacity:1} /* Alerta de inadimplência (PRO) */ .mini-imovel--atraso{border-color:var(--erro-tx);box-shadow:0 0 0 1px var(--erro-tx),var(--sombra)} .badge-atraso{ position:absolute;top:.7rem;right:.7rem; background:var(--erro-bg);color:var(--erro-tx); font-size:.68rem;font-weight:700;padding:.2rem .45rem;border-radius:999px; line-height:1.2; } .mini-imovel--atraso:hover .mini-abrir{display:none} /* não some o badge no hover */ .linha-alerta .nome{color:var(--erro-tx);font-weight:600} .ficha-imovel{ background:var(--card);border:1px solid var(--linha);border-radius:var(--raio); box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column; transition:transform .18s; } .ficha-imovel:hover{transform:translateY(-3px)} .ficha-cab{padding:1.25rem 1.4rem .9rem;border-bottom:1px solid var(--linha);position:relative} .ficha-ref{ font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--tinta-2);display:flex;align-items:center;gap:8px;margin-bottom:.5rem; } .ficha-ref::before{content:"";width:18px;height:2px;background:var(--amarelo);border-radius:2px} .ficha-cab h4{ font-family:var(--f-display);font-weight:600;font-size:1.02rem; letter-spacing:-.01em;line-height:1.35;padding-right:5.6rem; } /* carimbo de status — o detalhe assinatura do LocarBem */ .carimbo{ position:absolute;top:1.1rem;right:1.1rem;transform:rotate(3deg); font-family:var(--f-display);font-weight:700;font-size:.62rem; letter-spacing:.14em;text-transform:uppercase; padding:5px 10px;border-radius:6px;border:1.5px solid currentColor; } .carimbo-alugado{color:var(--ok-tx);background:var(--ok-bg)} .carimbo-vago{color:var(--neutro-tx);background:var(--neutro-bg);transform:rotate(-2deg)} /* linhas de valores em estilo recibo, com pontilhado */ .ficha-extrato{padding:1rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1} .linha-recibo{display:flex;align-items:baseline;gap:10px;font-size:.86rem} .linha-recibo .nome{color:var(--tinta-2);white-space:nowrap} .linha-recibo .fio{flex:1;border-bottom:2px dotted var(--pontilhado);transform:translateY(-3px)} .linha-recibo .num{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--tinta)} .linha-recibo .num.destaque{font-family:var(--f-display);color:var(--num-positivo)} /* pessoas: dono e inquilino com avatar de iniciais */ .ficha-pessoas{ padding:.9rem 1.4rem;border-top:1px solid var(--linha); display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center; } .pessoa{display:flex;align-items:center;gap:10px;min-width:0} .avatar-q{ width:34px;height:34px;border-radius:10px;flex-shrink:0; display:grid;place-items:center; font-family:var(--f-display);font-weight:700;font-size:.72rem; } .avatar-dono{background:var(--verde-700);color:#fff} .avatar-inq{background:var(--amarelo);color:var(--verde-900)} .pessoa .info{min-width:0} .pessoa .papel{font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)} .pessoa .nome-p{font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pessoa .tel-p{font-size:.72rem;color:var(--tinta-2)} .pessoa-vazia{font-size:.82rem;color:var(--tinta-2);font-style:italic} .ficha-acoes{padding:0 1.4rem 1.1rem;display:flex;justify-content:flex-end} /* ============================================================ PAINÉIS E TABELAS ============================================================ */ .painel{background:var(--card);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);padding:1.4rem;margin-bottom:1.4rem} .painel-topo{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap} .painel-topo h3{font-family:var(--f-display);font-size:1.02rem} table{width:100%;border-collapse:collapse;font-size:.86rem} th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-2);padding:.55rem .6rem;border-bottom:1.5px solid var(--linha)} td{padding:.7rem .6rem;border-bottom:1px solid var(--linha);vertical-align:middle;font-variant-numeric:tabular-nums} tr:last-child td{border-bottom:none} .tag{display:inline-block;border-radius:999px;padding:.18rem .7rem;font-size:.72rem;font-weight:600} .tag-pago{background:var(--ok-bg);color:var(--ok-tx)} .tag-pendente{background:var(--alerta-bg);color:var(--alerta-tx)} .tag-atrasado{background:var(--erro-bg);color:var(--erro-tx)} .vazio{padding:2rem;text-align:center;color:var(--tinta-2);font-size:.88rem} .form-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;margin-bottom:1rem} .acoes-linha{display:flex;gap:.4rem} .relatorio-pre{background:var(--fundo);border:1px solid var(--linha);border-radius:10px;padding:1.1rem;font-family:'Consolas','Courier New',monospace;font-size:.82rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:var(--tinta)} .dica{font-size:.8rem;color:var(--tinta-2);margin-top:.6rem} .select-mini{padding:.45rem .7rem;border:1.5px solid var(--linha);border-radius:8px;background:var(--campo-bg);color:var(--tinta);font-size:.8rem;max-width:260px} /* ============================================================ RESPONSIVO ============================================================ */ @media(max-width:860px){ .tela-login{grid-template-columns:1fr} .login-lado-marca{padding:2.5rem 1.8rem} .app{grid-template-columns:1fr} .sidebar{flex-direction:row;overflow-x:auto;align-items:center;padding:.7rem} .sidebar .logo{margin:0 .8rem 0 0;font-size:1.05rem} .sidebar-rodape{display:none} .sidebar-perfil{padding:0 .5rem 0 0} .sidebar-perfil .nome-perfil{display:none} .nav-item{width:auto;white-space:nowrap} .principal{padding:1.2rem} .resumo{grid-template-columns:repeat(2,1fr);padding:2px 20px} .resumo.tres{grid-template-columns:repeat(2,1fr)} .resumo .item + .item::before{display:none} .resumo .item + .item{padding-left:0} .resumo .item:nth-child(even){padding-left:16px} } @media(max-width:480px){ .principal{padding:1rem .9rem} .painel{padding:1.1rem} .ficha-cab h4{padding-right:5rem;font-size:.95rem} .topo-app h2{font-size:1.15rem} } @media(prefers-reduced-motion:reduce){ *{transition:none!important} } /* ============================================================ V3.2 — Contratos com vencimento + impressão do contrato ============================================================ */ /* avisos de contrato na linha de recibo da ficha */ .linha-recibo .num.atencao{color:var(--alerta-tx)} .linha-recibo .num.vencido{color:var(--erro-tx)} /* painel de alerta na visão geral: borda amarela à esquerda */ .painel-alerta{border-left:4px solid var(--amarelo)} .painel-apoio{text-align:center} .painel-apoio .painel-topo{justify-content:center} /* ============================================================ LOCARBEM PRO — painel de apresentação, menu travado e modal ============================================================ */ .painel-pro{border:1.5px solid var(--amarelo);text-align:center} .painel-pro .painel-topo{justify-content:center} .selo-pro{ display:inline-block;font-family:var(--f-display);font-weight:700;font-size:.62rem; letter-spacing:.14em;text-transform:uppercase;color:var(--verde-900); background:var(--amarelo);padding:4px 10px;border-radius:6px;margin-left:.5rem; } body[data-tema="escuro"] .selo-pro{color:#0A1F19} /* selo do plano no perfil da sidebar */ .selo-plano{ display:inline-block;margin-top:.3rem;padding:2px 9px;border-radius:999px; font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; background:var(--neutro-bg);color:var(--neutro-tx); } .selo-plano-pro{background:var(--amarelo);color:var(--verde-900)} body[data-tema="escuro"] .selo-plano-pro{color:#0A1F19} /* itens PRO do menu: visíveis, porém apagados (classe própria, fora de .nav-item) */ .nav-pro{ display:flex;align-items:center;gap:.6rem;width:100%; padding:.68rem .9rem;border:0;border-radius:10px;cursor:pointer; background:transparent;color:var(--tinta-2);font:inherit;text-align:left; opacity:.55;transition:opacity .15s,background .15s; } .nav-pro:hover{opacity:.9;background:var(--neutro-bg)} .nav-pro .ic{width:1.4rem;text-align:center} .nav-pro .trava{margin-left:auto;font-size:.8rem} /* modal genérico (ficha do imóvel + aviso PRO) */ .modal-fundo{ position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center; background:rgba(7,35,27,.55);backdrop-filter:blur(2px);padding:1rem; } .modal-caixa{ width:100%;max-width:560px;max-height:92vh;overflow:auto; background:var(--fundo);border-radius:var(--raio);box-shadow:var(--sombra); padding:1rem; } .modal-caixa .ficha-imovel:hover{transform:none} .modal-fechar-linha{display:flex;justify-content:flex-end;margin-bottom:.6rem} .modal-pro{max-width:440px;background:var(--card);text-align:center;padding:1.6rem 1.5rem} .modal-pro h3{font-family:var(--f-display);margin-bottom:.4rem} .modal-pro .dica{margin-bottom:1rem} /* documento do contrato: invisível na tela, visível só na impressão */ .area-impressao{display:none} @media print{ body{background:#fff!important} .tela-login,.app,.btn-tema-flutuante{display:none!important} .area-impressao{display:block!important} } .contrato-doc{ font-family:Georgia,'Times New Roman',serif;color:#000; font-size:12pt;line-height:1.75;max-width:17cm;margin:0 auto;padding:1cm 0; } .logo-doc{text-align:center;margin-bottom:.8cm} .logo-doc img{max-height:70px;max-width:220px;object-fit:contain} .contrato-doc h1{ font-size:14pt;text-align:center;text-transform:uppercase; letter-spacing:.08em;margin-bottom:1.2cm; } .contrato-doc p{margin-bottom:.45cm;text-align:justify} .contrato-doc .clausula{text-indent:1cm} .contrato-doc .contrato-data{margin-top:1cm;text-align:center} .assinaturas{ display:grid;grid-template-columns:1fr 1fr;gap:1.4cm 1cm; margin-top:1.4cm;text-align:center;font-size:11pt; } .linha-ass{border-bottom:1px solid #000;margin-bottom:.15cm;height:1cm} .assinatura small{color:#333} .contrato-rodape{ margin-top:1.2cm;text-align:center;font-size:9pt;color:#555; border-top:1px solid #ccc;padding-top:.3cm; } /* ============================================================ V3.3 — Editor de contrato, fotos de manutenção e negócios ============================================================ */ /* editor de contrato: parece o documento final, mas é editável */ .contrato-editor{ background:#fff;color:#000;border:1px solid var(--linha);border-radius:10px; padding:2rem 2.2rem;font-family:Georgia,'Times New Roman',serif; font-size:.95rem;line-height:1.75;max-height:60vh;overflow-y:auto; cursor:text; } .contrato-editor:focus-visible{outline:3px solid var(--amarelo);outline-offset:0} .contrato-editor h1{font-size:1.1rem;text-align:center;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.2rem} .contrato-editor p{margin-bottom:.6rem;text-align:justify} .contrato-editor .clausula{text-indent:1.4rem} .contrato-editor .assinaturas{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1rem;margin-top:1.6rem;text-align:center;font-size:.85rem} .contrato-editor .linha-ass{border-bottom:1px solid #000;margin-bottom:.2rem;height:1.4rem} .contrato-editor .contrato-data{margin-top:1rem;text-align:center} .contrato-editor .contrato-rodape{margin-top:1rem;text-align:center;font-size:.7rem;color:#555;border-top:1px solid #ccc;padding-top:.4rem} body[data-tema="escuro"] .contrato-editor{border-color:var(--linha)} /* papel continua branco no escuro, como documento real */ /* fotos de manutenção */ .preview-fotos{display:flex;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap} .miniatura-foto{ width:52px;height:52px;object-fit:cover;border-radius:8px; border:1.5px solid var(--linha);cursor:zoom-in;transition:transform .15s; vertical-align:middle;margin-right:.3rem; } .miniatura-foto:hover{transform:scale(1.06)} .foto-ampliada{ width:min(320px,80vw);height:auto;max-height:320px;cursor:zoom-out; border-radius:12px;box-shadow:var(--sombra); } /* tabela e fotos dentro dos documentos impressos */ .tabela-doc{width:100%;border-collapse:collapse;font-size:11pt;margin:0.4cm 0} .tabela-doc th,.tabela-doc td{border:1px solid #999;padding:.25cm .3cm;text-align:left} .tabela-doc th{background:#eee} .subtitulo-doc{font-size:12pt;margin:.6cm 0 .3cm;text-transform:uppercase;letter-spacing:.05em} .fotos-doc{display:flex;gap:.4cm;flex-wrap:wrap;margin-bottom:.5cm} .fotos-doc img{width:7cm;max-width:45%;height:auto;border:1px solid #999;border-radius:4px} /* v3.4 — recibo de aluguel */ .recibo-valor{text-align:right;font-size:16pt;margin-bottom:.5cm}