/* -- public/css/I-configPadrao.css /* =================================================== = DEFINE O ESCOPO PADRÃO DE CSS = =================================================== */ :root { /* 🔹 escopo das variáveis CSS: Tudo dentro de :root {} é acessível globalmente no CSS. Ideal para centralizar cores, tamanhos e temas. body { background-color: var(--bg); color: var(--text); } .button { background-color: var(--primary); } .button:hover { background-color: var(--primary-h); } */ --bg: #f6f8fa; /* Cor de fundo geral da página (cinza bem claro) */ --card-bg: #ffffff; /* Cor de fundo de cartões ou blocos (branco puro) */ --primary: #0066ff; /* Cor principal de destaque (azul intenso) */ --primary-h: #004bcc; /* Cor ao passar o mouse sobre itens primários (azul escuro) */ --text: #141414; /* Cor principal para textos (quase preto) */ --muted: #6a6a6a; /* Cor para textos secundários ou desabilitados (cinza médio) */ } /* =================================================== LIMPAR VARIÁVEIS =================================================== */ * { margin: 0; /* Remove todas as margens padrão de todos os elementos */ padding: 0; /* Remove todos os preenchimentos (espaços internos) padrão */ box-sizing: border-box; /* Faz com que a largura e altura de um elemento incluam também padding e borda */ } /* =================================================== ESTILOS GERAIS DAS PÁGINAS =================================================== */ html, body { /* Define o estilo base do corpo da página, garantindo aparência moderna, responsiva e com imagem de fundo fixa.*/ font-family:Roboto,system-ui,Segoe UI,Helvetica, Arial,sans-serif; /* Define a fonte principal do texto. Usa Roboto (se disponível), fontes do sistema ou comuns. Garante legibilidade e compatibilidade entre navegadores. */ background-image: url('../img/fundo8w1.jpg'); /* Define uma imagem de fundo, referenciando um caminho relativo */ background-size: cover; /* Faz com que a imagem de fundo cubra toda a tela, sem distorção */ background-position: center center; /* Centraliza a imagem de fundo tanto na horizontal quanto na vertical. */ background-repeat: no-repeat; /* Impede que a imagem de fundo se repita */ background-attachment: fixed; /* Faz com que a imagem de fundo permaneça fixa enquanto a página rola */ color: #333; /* Define a cor padrão do texto (cinza escuro) */ height: 100%; /* Define a altura mínima da página como 100% da altura da janela */ margin: 0; /* Remove margens padrão do navegador */ padding: 0; /* Remove preenchimentos padrão do navegador */ overflow-x: hidden; /* Esconde a rolagem horizontal, impedindo que a página deslize para os lados */ overflow-y: auto; /* Permite rolagem vertical quando o conteúdo ultrapassa a altura da tela */ position: relative; /* Define o posicionamento como relativo, permitindo o uso de posicionamento absoluto em elementos filhos */ min-height: 100vh; /* Garante que o conteúdo mínimo da página ocupe toda a altura da tela */ padding-bottom: 40px; /* Adiciona um espaço no final da página (por exemplo, para evitar que rodapés se sobreponham ao conteúdo) */ line-height: 1.45; /* Define a altura da linha (espaçamento entre linhas de texto). Um valor entre 1.4 e 1.6 é ideal para leitura confortável. */ } .topbar { /* Barra fixa no topo da tela (se ativada), sempre visível */ background-color: #add8e6; /* Cor de fundo da barra: azul claro */ padding: 10px 20px; /* Espaçamento interno: 10px vertical, 20px horizontal */ display: flex; /* Usa Flexbox para alinhar os elementos filhos na horizontal */ align-items: center; /* Alinha os itens verticalmente ao centro */ justify-content: space-between; /* Espaço distribuído entre os itens (esquerda/direita) */ z-index: 1000; /* Garante que a barra fique acima de outros elementos */ gap: 20px; /* Espaço entre os elementos dentro da barra */ box-sizing: border-box; /* Inclui padding e borda no cálculo de largura/altura total */ flex-wrap: wrap; /* Permite que os itens quebrem para a linha de baixo, se necessário */ border-bottom: 2px solid #87ceeb; /* Linha inferior azul mais escura para delimitar visualmente */ border-radius: 8px; /* Arredonda os cantos do bloco para suavizar o visual */ margin: 10px 10px 10px 10px; /* top/bottom = 10px, esquerda/direita = 10px */ } .titulo-0 { /* Primeiro título - topbar */ font-size: 24px ; /* Define o tamanho da fonte */ font-weight: bold; /* Fonte me negrito */ margin: 0; color: #0066cc; /* Azul (um tom forte e legível) */ text-align: left; /* Centraliza o texto horizontalmente */ flex: 1; /* Ocupa o espaço disponível entre os elementos */ display: flex; /* Habilita alinhamento interno com Flexbox */ } #titulo-0 h1, #titulo-0 h2, #titulo-0 span, #titulo-0 strong { /* Primeiro título - topbar */ font-size: 26px !important; /* Define o tamanho da fonte */ font-weight: bold; /* Fonte me negrito */ margin: 0; text-align: center; /* Centraliza o texto horizontalmente */ color: #0066cc; /* Azul (um tom forte e legível) */ //border: 1px solid red; /* Borda para visualizar área */ } #titulo-1 h1, #titulo-1 h2, #titulo-1 span, #titulo-1 strong { /* Segundo título - topbar */ font-size: 26px !important; /* Define o tamanho da fonte */ font-weight: bold; /* Fonte em negrito */ margin: 0; text-align: center; /* Centraliza o texto */ color: #0066cc; /* Azul forte */ //border: 1px solid red; /* Borda para visualizar área */ } .usuario-logado { /* Terceiro título usuário logado - topbar */ color: #2c3e50; /* Cor para destacar o usuário logado */ font-weight: bold; /* Negrito */ text-align: right; /* Alinha texto à direita */ white-space: nowrap; /* Impede quebra de linha */ overflow: hidden; /* Oculta conteúdo que ultrapassa a largura */ text-overflow: ellipsis; /* Adiciona reticências se o texto for muito longo */ flex: 1.5; /* Ocupa 1.5 partes da flexbox */ max-width: 100%; /* Garante que a largura não ultrapasse o container */ //border: 1px solid red; /* Borda para visualizar área */ } /* =================================================== BOTÕES NA BARRA SUPERIOR =================================================== */ .botoes-topbar button { /* Botões da barra superior */ background-color: #fff8cc; /* Cor de fundo: amarelo claro */ border: none; /* Remove a borda padrão */ border-radius: 8px; /* Cantos arredondados com raio de 8px */ padding: 8px 16px; /* Espaço interno: 8px vertical, 16px horizontal */ margin-left: 10px; /* Espaço entre os botões à esquerda */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidade */ font-size: 14px; /* Tamanho da fonte */ font-weight: bold; /* Texto em negrito */ cursor: pointer; /* Cursor em formato de mãozinha ao passar o mouse */ transition: all 0.3s ease; /* Transição suave para mudanças visuais */ border: 1px solid red; /* Borda para visualizar área */ } /* =================================================== EFEITO HOVER NOS BOTÕES =================================================== */ .botoes-topbar button:hover { /* Efeito ao passar o mouse nos botões */ background-color: #ffe873; /* Cor de fundo mais intensa no hover */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra mais intensa no hover */ transform: translateY(-2px); /* Efeito de "elevação" do botão */ } /* =================================================== CONTAINER PARA AS MENSAGENS PERSONALIZADAS =================================================== */ .botoes-topbar { display: flex; gap: 10px; /* espaço entre botões */ align-items: center; /* alinha verticalmente os conteúdos */ align-items: stretch; /* força todos à mesma altura */ } .botoes-topbar button { display: flex; flex-direction: column; /* para o texto e contador ficarem empilhados */ justify-content: center; /* centraliza verticalmente */ align-items: center; /* centraliza horizontalmente */ padding: 5px 10px; height: 50px; /* altura fixa para todos os botões */ box-sizing: border-box; font-size: 14px; } #contadorBtn { font-size: 0.75em; color: #666; line-height: 1em; /* evita aumentar a altura do botão */ } #msg-box { /* Estilo base para mostrar mensagens */ position: fixed; background: #333; color: #fff; padding: 14px 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); z-index: 1000; display: flex; align-items: center; gap: 10px; font-size: 16px; } #msg-box { position: fixed; background: #333; color: white; padding: 10px 40px 10px 15px; border-radius: 5px; min-width: 200px; font-family: Arial, sans-serif; } #msg-box.hidden { /* Esconde a mensagem */ display: none; } #msg-box.info { /* Mostra a mensagem */ background: #90EE90; /* Verde - LightGreen */ /* color: #000; /* Preto contrastando */ } #msg-box.sucesso { background: #00FF7F; /* Verde - SpringGreen */ color: #fff; } #msg-box.erro { background: #FF0000; color: #fff; } /* Posições */ .msgTop { top: 30px; left: 50%; transform: translateX (-50%); } .msgBottom { bottom: 30px; left: 50%; transform: translateX (-50%); } .msgCenter { top: 50%; left: 50%; transform: translate (-50%, -50%); } .msgTopLeft { top: 30px; left: 30px; transform: none; } .msgBottomRight { bottom: 30px; right: 30px; transform: none; } #msg-bottom { bottom: 20px; left: 50%; transform: translateX(-50%); } #msg-close { position: absolute; right: 10px; top: 5px; cursor: pointer; font-weight: bold; font-size: 18px; transition: color 0.2s ease; } #msg-close:hover { color: red; } .hidden { display: none; } /* /* =================================================== DESTACAR A MSGS AO PASSAR O CURSOR NO CAMPO =================================================== .destaque-placeholder { background-color: #fff6cc; /* Amarelo claro no fundo color: #cc0000; /* Texto vermelho escuro border: 2px dashed #ff9900; /* Borda laranja pontilhada } input.destaque-placeholder { position: relative; } input.destaque-placeholder::before { /* Mostra o texto do placeholder como dica visual content: attr(data-placeholder); position: absolute; top: -1.6em; left: 0; font-size: 12px; background: #ffffcc; color: #cc0000; padding: 2px 4px; border-radius: 4px; border: 1px solid #aaa; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); white-space: nowrap; } */ /* =================================================== RODAPÉ PARA OS DIREITOS AUTORAIS =================================================== */ footer { /* Direitos Autorais */ bottom: 10px; /* Posiciona o rodapé 10px acima da parte inferior da janela */ left: 50%; /* Posiciona o rodapé centralizado horizontalmente (em relação à largura total da janela) */ transform: translateX(-50%); /* Corrige o alinhamento horizontal central, movendo o elemento 50% de sua largura para a esquerda */ font-size: 12px; /* Define o tamanho da fonte do texto dentro do rodapé */ color: white; /* Define a cor do texto como branca */ background: rgba(0, 0, 0, 0.5); /* Define o fundo como preto com 50% de transparência */ padding: 5px 10px; /* Adiciona espaçamento interno: 5px acima/abaixo e 10px nas laterais */ border-radius: 5px; /* Arredonda os cantos do rodapé com raio de 5px */ position: fixed; /* Faz com que o rodapé fique fixo na tela mesmo com rolagem */ z-index: 1000; /* Garante que o rodapé fique acima de outros elementos, inclusive a modal se necessário */ } /* =================================================== RESPONSIVIDADE PARA MIDIAS PEQUENAS =================================================== */ @media (max-width: 768px) { nav ul { flex-direction: column; gap: 10px; } body { padding: 5px; } header, nav, main, footer { padding: 5px; } } /* =================================================== TOOLTIP PERSONALIZADO PARA AS MENSAGENS DO CAMPO =================================================== */ #tooltip { /* Seleciona o elemento com ID tooltip, que será a caixa de dica flutuante (tooltip) */ position: absolute; /* posicionamento absoluto do tooltip em relação ao primeiro ancestral posicionado. Isso permite que ele seja exibido exatamente onde quisermos na tela */ background-color: #4CAF50; /* Cor de fundo do tooltip como verde (#4CAF50), cor usada destacar.*/ color: #fff; padding: 8px 12px; /* Define o espaçamento interno da tooltip: 8px no topo e embaixo 12px à esquerda e direita Isso dá espaço interno para que o texto não fique colado nas bordas.*/ border-radius: 5px; /* Arredonda levemente os cantos da tooltip, deixando melhorando o visual.*/ font-size: 14px; /* Tamanho da fonte da tooltip como 14px — legível, porém discreto.*/ box-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* Aplica uma sombra ao redor da tooltip para dar profundidade. Essa sombra é: deslocada 2px à direita e 2px abaixo com desfoque de 8px cor preta com 50% de opacidade */ display: none; /* Inicialmente, a tooltip não é exibida. Ela só aparece quando adicionada dinamicamente (por exemplo, com JavaScript).*/ z-index: 9999; /* Garante que a tooltip fique acima da maioria dos outros elementos da página, evitando que seja sobreposta.*/ pointer-events: none; /* Impede que a tooltip capture eventos do mouse (como clique ou hover). Isso é importante para que o mouse interaja com os lementos abaixo dela, como se ela não estivesse lá.*/ max-width: 320px; /* Define uma largura máxima de 320px, evitando que tooltips muito grandes fiquem desproporcionais ou saiam da tela.*/ white-space: normal; /* Permite que o texto da tooltip quebre em várias linhas conforme necessário (caso contrário, ele poderia ficar todo em uma linha só).*/ } .tooltip-custom.show { /* Define um modificador de classe que pode ser usado junto com #tooltip para ativar o estilo de exibição, geralmente controlado por JavaScript. Por exemplo, ao adicionar a classe show, o tooltip pode se tornar visível.*/ opacity: 1; /* Define a opacidade como totalmente visível. Pode ser útil se estiver sendo usado em conjunto com uma transição (fade in/out).*/ }