/* * base.css — regras globais de comportamento da interface. * * REGRA (evitar o "cursor de texto piscando" em locais que não são campos): * texto de INTERFACE (títulos, rótulos, botões, ícones, menus, pílulas, etc.) * NÃO é selecionável e não mostra cursor de texto (caret/I-beam), pois não são * campos digitáveis. Só campos de formulário e VALORES DE DADOS (para poder * copiar CPF, telefone, e-mail, etc.) permitem seleção. * * Como aplicar em telas novas: sempre linkar este arquivo ANTES do CSS da página. * Para permitir seleção/cópia de um texto de dado, use a classe .selecionavel * (ou a classe .dado-valor do parcial _dado.html, já liberada abaixo). */ /* Padrão: interface não-selecionável (sem caret nem cursor de texto). */ body { -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* Salvaguarda global: nenhuma imagem estoura a largura do container (evita scroll horizontal no mobile com imagens de conteúdo livre / coladas). */ img { max-width: 100%; } /* Exceções: campos realmente digitáveis e conteúdo marcado como selecionável. */ input, textarea, select, [contenteditable="true"], .dado-valor, .selecionavel { -webkit-user-select: text; -moz-user-select: text; user-select: text; cursor: auto; } /* ========================================================= Componente reutilizável: MODAL (janela suspensa) Usado em várias telas (ex.: Usuários, Eventos). Estilos específicos de cada conteúdo ficam no CSS da página. Requer as variáveis de cor do :root (definidas em inicio.css), presentes nas telas internas que usam modal. ========================================================= */ body.modal-aberto { overflow: hidden; } .modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 76, 129, 0.45); backdrop-filter: blur(2px); animation: modal-fade 0.25s ease; } .modal-overlay[hidden] { display: none; } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } .modal-caixa { background: var(--branco, #fff); border-radius: var(--raio, 18px); box-shadow: var(--sombra-card-hover, 0 18px 40px rgba(15, 76, 129, 0.18)); width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .modal-topo { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--borda, #e2e9f1); background: linear-gradient(90deg, var(--azul-escuro, #0f4c81), var(--azul, #1769aa)); } .modal-titulo { flex: 1; min-width: 0; color: #fff; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; } .modal-fechar { flex: none; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 1.1rem; cursor: pointer; transition: background 0.25s ease; } .modal-fechar:hover { background: rgba(255, 255, 255, 0.32); } .modal-corpo { padding: 20px; overflow-y: auto; } /* Modal em tela cheia no celular */ @media (max-width: 640px) { .modal-overlay { padding: 0; } .modal-caixa { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; } } @media (prefers-reduced-motion: reduce) { .modal-overlay, .modal-fechar { transition: none; animation: none; } } /* ========================================================= Componente reutilizável: NOTIFICAÇÕES (toasts flutuantes) Padrão ÚNICO de notificação do sistema. Balões no canto superior direito da TELA (o JS de inicio.js move o contêiner para o , auto-fecha e expõe window.mostrarToast). Fica no base.css para valer em QUALQUER página (inclusive as públicas do login/recuperação). Cores com fallback caso a página não defina o :root da paleta. ========================================================= */ .mensagens { position: fixed; top: 18px; right: 18px; left: auto; z-index: 1300; display: flex; flex-direction: column; gap: 12px; width: min(400px, calc(100vw - 36px)); margin: 0; pointer-events: none; } .mensagem { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 10px; pointer-events: auto; cursor: pointer; padding: 16px 18px; border-radius: 14px; font-size: 0.98rem; font-weight: 600; line-height: 1.35; color: var(--texto, #1c2733); background: var(--branco, #ffffff); border-left: 6px solid var(--azul, #1769aa); box-shadow: 0 16px 40px rgba(15, 76, 129, 0.28); animation: toast-entra 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .mensagem::before { font-size: 1.25rem; line-height: 1.15; } .mensagem::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: currentColor; opacity: 0.35; transform-origin: left; animation: toast-barra 4.5s linear forwards; } .mensagem.saindo { animation: toast-sai 0.35s ease forwards; } .mensagem-success { border-left-color: var(--verde, #3a9d3a); color: #1f6b1f; } .mensagem-success::before { content: "✅"; } .mensagem-error { border-left-color: #c0392b; color: #a5281b; } .mensagem-error::before { content: "⛔"; } .mensagem-info { border-left-color: var(--azul-claro, #4a90d9); color: var(--azul-escuro, #0f4c81); } .mensagem-info::before { content: "ℹ️"; } .mensagem-warning { border-left-color: #e0a800; color: #8a6d00; } .mensagem-warning::before { content: "⚠️"; } @keyframes toast-entra { from { opacity: 0; transform: translateX(40px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes toast-sai { to { opacity: 0; transform: translateX(40px) scale(0.96); } } @keyframes toast-barra { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (max-width: 560px) { .mensagens { top: 10px; right: 10px; left: 10px; width: auto; } }