/* ===================================================================== SUA MELHOR VERSÃO · base.css — sistema de UI compartilhado Fonte única para os padrões que já causaram bugs visuais: - altura cheia (dvh, não vh) para não cortar/sobrar no mobile - modal robusto (centra nos 2 eixos, cresce com o conteúdo, rola se grande) - componentes reutilizáveis (person-head, access-opts, empty/error state) Carregue este arquivo por ÚLTIMO no para ser autoritativo: ===================================================================== */ /* ---- Tokens da marca (idempotente com o inline das páginas) ---- */ :root{ --verde:#1f4a3b; --verde-prof:#163328; --verde-claro:#2d6750; --salvia:#8a9a7e; --salvia-soft:#cfd8c4; --creme:#f3e7d4; --creme-claro:#faf4ea; --rose:#c98c7e; --rose-soft:#e8c5bd; --cobre:#b67d4f; --tinta:#2c2a24; --tinta-suave:#5b574c; --linha:rgba(31,74,59,.12); --serif:'Playfair Display', Georgia, serif; --sans:'Jost', sans-serif; --script:'Sacramento', cursive; --alert:#c97262; } /* ---- Base responsiva ---- */ *{box-sizing:border-box} img{max-width:100%} /* Altura cheia à prova de mobile: use .full-h em vez de height:100vh. 100dvh acompanha a barra do navegador (não corta nem deixa faixa vazia). */ .full-h{min-height:100dvh} /* Layout de app com sidebar (membro/admin) — garante altura correta no mobile */ .app{height:100dvh} @media(max-width:960px){ .app{height:auto;min-height:100dvh} } /* Split-screen (páginas de acesso): 2 colunas que preenchem a tela e empilham no mobile sem deixar faixa vazia. */ .split{display:grid;grid-template-columns:1fr 1.1fr;min-height:100dvh} .split > *{min-height:100dvh} @media(max-width:900px){ .split{grid-template-columns:1fr} .split > *{min-height:auto} } /* ===================================================================== MODAL — robusto (este é o componente que quebrava) Overlay em grid centraliza o card nos 2 eixos; o card cresce com o conteúdo e rola internamente se ultrapassar a tela. ===================================================================== */ .modal-bg{ position:fixed; inset:0; z-index:100; display:none; background:rgba(22,51,40,.78); backdrop-filter:blur(10px); padding:40px 20px; overflow-y:auto; } .modal-bg.show{ display:grid; place-items:center; } .modal{ display:block; box-sizing:border-box; position:relative; width:min(520px,100%); height:auto; max-height:calc(100dvh - 80px); overflow-y:auto; background:var(--creme-claro); border-radius:20px; padding:36px; animation:baseFade .3s; } .modal form{ display:block; width:100% } .modal h2{ font-family:var(--serif); color:var(--verde); font-size:1.4rem; margin-bottom:6px; overflow-wrap:anywhere } .modal .lead{ color:var(--tinta-suave); font-weight:300; font-size:.92rem; margin-bottom:22px } .modal .close{ position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; background:rgba(31,74,59,.08); color:var(--verde); display:grid; place-items:center; font-size:1.3rem; cursor:pointer; transition:.25s; border:none; } .modal .close:hover{ background:var(--verde); color:#fff; transform:rotate(90deg) } @keyframes baseFade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } /* ===================================================================== Header de identidade (pessoa) — reutilizável em modais de cliente/equipe ===================================================================== */ .person-head{display:flex;align-items:center;gap:14px;margin:16px 0 22px;padding:14px 16px;background:var(--creme);border-radius:14px} .person-head .pa{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--serif);font-weight:600;color:#fff;font-size:1.2rem;background:linear-gradient(135deg,var(--rose),var(--cobre))} .person-head .pi{min-width:0;flex:1} .person-head .pn{font-family:var(--serif);font-weight:600;color:var(--verde);font-size:1.12rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .person-head .pe{font-size:.84rem;color:var(--tinta-suave);overflow-wrap:anywhere;margin-top:2px} /* ---- Cartões de opção (radio-cards) ---- */ .access-opts{display:flex;flex-direction:column;gap:10px} .access-opt{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1.5px solid var(--linha);border-radius:12px;cursor:pointer;transition:.2s} .access-opt:hover{border-color:var(--salvia);background:rgba(138,154,126,.05)} .access-opt input{margin-top:2px;accent-color:var(--verde);flex:none;width:16px;height:16px} .access-opt:has(input:checked){border-color:var(--verde);background:rgba(31,74,59,.05)} .access-opt .ao-t{font-weight:600;color:var(--tinta);font-size:.92rem} .access-opt .ao-d{font-size:.82rem;color:var(--tinta-suave);margin-top:2px;line-height:1.4} /* ---- Estados vazio/erro reutilizáveis ---- */ .empty-state{padding:32px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--tinta-suave)} .empty-state h4{font-family:var(--serif);color:var(--verde);font-size:1.05rem;font-weight:600;margin:0} .empty-state p{font-weight:300;font-size:.9rem;max-width:340px;margin:0;line-height:1.45}