/* public/css */ /* Para alternar o tema, basta adicionar/remover a classe tema-claro no ou via JavaScript: */ /* Tema Padrão (Escuro) */ :root { --cor-fundo: #0f172a; /* slate-900 */ --cor-texto: #f1f5f9; /* slate-100 */ --cor-texto-secundario: #94a3b8; /* slate-400 */ --cor-borda: #334155; /* slate-700 */ --cor-fundo-input: #1e293b; /* slate-800 */ --cor-fundo-card: #1e293b; --cor-botao: #60a5fa; /* blue-400 */ --cor-botao-hover: #3b82f6; /* blue-500 */ --cor-erro: #f87171; /* red-400 */ --cor-sucesso: #34d399; /* emerald-400 */ } /* Tema Claro (ativado com .tema-claro no ) */ .tema-claro { --cor-fundo: #ffffff; --cor-texto: #1e293b; /* slate-800 */ --cor-texto-secundario: #64748b; /* slate-500 */ --cor-borda: #e2e8f0; /* slate-200 */ --cor-fundo-input: #f8fafc; /* slate-50 */ --cor-fundo-card: #ffffff; --cor-botao: #3b82f6; /* blue-500 */ --cor-botao-hover: #2563eb; /* blue-600 */ --cor-erro: #ef4444; /* red-500 */ --cor-sucesso: #10b981; /* emerald-500 */ } /* Estilos base da página */ * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--cor-fundo); color: var(--cor-texto); font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; padding: 0rem; transition: background-color 0.3s, color 0.3s; } /* ======================================== CONTEINERS ======================================== */ /* Atualize o container-pagina */ .container-pagina { min-height: 100vh; display: flex; flex-direction: column; padding-top: calc(60px); /* Altura do header + seu padding */ } /* Container centralizado (para formulários, cards) */ .conteudo-centralizado { max-width: 480px; margin: 0 auto; padding: 1.5rem; } /* Layout em coluna (formulários verticais) */ .layout-coluna { display: flex; flex-direction: column; gap: 1.25rem; } /* Layout em grade (para dashboard ou múltiplos cards) */ .layout-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } /* ======================================== CLASSES UTILITÁRIAS ======================================== */ /* Centralização de conteúdo */ .centro-horizontal { text-align: center; } .centro-vertical { display: flex; flex-direction: column; justify-content: center; } .oculta { display: none !important; } .mostra { display: block !important; } .mostra-flex { display: flex !important; } /* ======================================== CABEÇALHO ======================================== */ /* Atualize a seção do cabeçalho para seguir o mesmo padrão de responsividade */ header { position: fixed; top: 0; left: 0; height: 60px; width: 100%; z-index: 1000; /* Reduzido para garantir que as notificações fiquem acima */ display: flex; justify-content: space-between; align-items: center; background: #2c3e50; color: white; padding: 0.5rem; /* Reduzido o padding para manter o cabeçalho com altura mais previsível */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } /* Remova a regra .header duplicada na seção de responsividade desktop e atualize para: */ .header-logo { display: flex; align-items: center; gap: 10px; } .logo-icon { font-size: 24px; color: #3498db; } .logo-text { font-size: 20px; font-weight: 500; } .header-actions { display: flex; align-items: center; gap: 15px; } .logout-btn { background: #e74c3c; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; font-weight: 500; transition: background 0.3s; } .logout-btn:hover { background: #c0392b; } .user-info { display: flex; align-items: center; gap: 10px; } .user-name { font-size: 14px; opacity: 0.9; } .profile-link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #3498db; border-radius: 50%; color: white; text-decoration: none; font-size: 16px; transition: background 0.3s; } .profile-link:hover { background: #2980b9; } .logo-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; cursor: pointer; } .logo-link:hover { color: #3498db; } /* Botão Voltar (mantém-se dentro do tema claro/escuro) */ .back-btn { background: transparent; border: none; color: var(--cor-texto); font-size: 1.05rem; cursor: pointer; padding: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.15s ease, color 0.15s ease; } .back-btn:hover { background: rgba(255, 255, 255, 0.04); } .tema-claro .back-btn:hover { background: rgba(0, 0, 0, 0.04); } /* ======================================== SECTIONS ======================================== */ /* Sections sempre após header */ section { padding: 1rem; } /* Layout vertical padrão (coluna) */ .section-layout-coluna { display: flex; flex-direction: column; gap: 1.25rem; padding: 1rem; } /* Layout horizontal com rolagem */ .section-layout-linha { display: flex; flex-direction: row; gap: 1rem; overflow-x: auto; padding: 1rem; scrollbar-width: thin; scrollbar-color: var(--cor-borda) var(--cor-fundo); } /* Personalização da barra de rolagem para navegadores Webkit */ .section-layout-linha::-webkit-scrollbar { height: 8px; } .section-layout-linha::-webkit-scrollbar-track { background: var(--cor-fundo); } .section-layout-linha::-webkit-scrollbar-thumb { background-color: var(--cor-borda); border-radius: 4px; } /* Centralização vertical dos elementos */ .alinha-vertical-centro { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 120px); /* Ajusta para ocupar altura disponível */ padding: 1rem; } /* ======================================== FOOTER ======================================== */ footer { width: 100%; margin-top: auto; padding: 1rem; background-color: var(--cor-fundo-card); text-align: center; font-size: 0.875rem; color: var(--cor-texto-secundario); } /* ======================================== FORMULÁRIOS ======================================== */ /* Desabilita transição em alguns elementos para evitar "flickering" */ input, textarea, select { transition: none; } /* Formulário */ .campoDeTexto, .campoDeEmail, .campoDeSenha, .campoDeCPF, .campoDeTelefone, .campoDeOpcoes { display: flex; flex-direction: column; gap: 0.5rem; } .campoDeTexto label, .campoDeEmail label, .campoDeSenha label, .campoDeCPF label, .campoDeTelefone label, .campoDeOpcoes label { font-weight: 500; color: var(--cor-texto); } .campoDeTexto input, .campoDeEmail input, .campoDeSenha input, .campoDeCPF input, .campoDeTelefone input, .campoDeOpcoes select, .campoDeOpcoes input { padding: 0.75rem; border: 1px solid var(--cor-borda); border-radius: 0.375rem; background-color: var(--cor-fundo-input); color: var(--cor-texto); font-size: 1rem; } .campoDeTexto input:focus, .campoDeEmail input:focus, .campoDeSenha input:focus, .campoDeCPF input:focus, .campoDeTelefone input:focus, .campoDeOpcoes select:focus, .campoDeOpcoes input:focus { outline: none; border-color: var(--cor-botao); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); } /* Botão primário */ .btn-primary { background-color: var(--cor-botao); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 0.375rem; cursor: pointer; font-weight: 500; transition: background-color 0.2s; width: 100%; } .btn-primary:hover { background-color: var(--cor-botao-hover); } /* Grade para botão */ .grade-botao { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 1rem; } /* Status */ .status { margin-top: 1rem; padding: 0.75rem; border-radius: 0.375rem; text-align: center; font-weight: 500; } .status.error { background-color: rgba(248, 113, 113, 0.2); color: var(--cor-erro); border: 1px solid var(--cor-erro); } .status.success { background-color: rgba(52, 211, 153, 0.2); color: var(--cor-sucesso); border: 1px solid var(--cor-sucesso); } /* Estilo para textarea */ .campoDeMensagem { display: flex; flex-direction: column; gap: 0.375rem; } .campoDeMensagem textarea { padding: 0.75rem; border: 1px solid var(--cor-borda); border-radius: 0.5rem; background-color: var(--cor-fundo-input); color: var(--cor-texto); font-size: 1rem; outline: none; resize: vertical; min-height: 100px; } /* ======================================== MENSAGENS DO SISTEMA (Compatibilidade) ======================================== */ /* Mensagens de sistema - Mantendo compatibilidade com código existente */ .mensagem-sistema { text-align: center; padding: 1rem; margin-bottom: 1rem; border-radius: 0.5rem; background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); } .mensagem-sistema.oculta { display: none; } /* Mensagens de feedback - Mantendo compatibilidade */ .mensagem-erro { color: var(--cor-erro); font-size: 0.875rem; margin-top: 0.25rem; } .mensagem-sucesso { color: var(--cor-sucesso); font-size: 0.875rem; margin-top: 0.25rem; } /* ======================================== LINKS DE NAVEGAÇÃO ======================================== */ /* Link primário - classe genérica para links importantes */ .link-primario { text-align: center; margin-top: 1rem; } .link-primario a { color: var(--cor-botao); text-decoration: none; font-weight: 400; /* Fonte mais fina - alterado de 500 para 400 */ padding: 0.5rem; border-radius: 0.25rem; transition: background-color 0.2s, color 0.2s; font-size: 0.875rem; /* Tamanho de fonte um pouco menor */ } .link-primario a:hover { text-decoration: underline; background-color: rgba(59, 130, 246, 0.1); } /* ======================================== BOTÕES ======================================== */ /* Botão primário (Salvar) */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 0.375rem; background-color: var(--cor-botao); color: white; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; transition-property: background-color, border-color, color, fill, stroke; transition-duration: 200ms; border: none; cursor: pointer; } .btn-primary:hover { background-color: var(--cor-botao-hover); } .btn-primary:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); } /* Botão secundário (Cancelar) */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 0.375rem; background-color: transparent; color: var(--cor-texto); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; transition-property: background-color, border-color, color, fill, stroke; transition-duration: 200ms; border: 1px solid var(--cor-borda); cursor: pointer; } .btn-secondary:hover { background-color: rgba(0, 0, 0, 0.03); } .tema-claro .btn-secondary:hover { background-color: rgba(0, 0, 0, 0.03); } .tema-escuro .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.05); } .btn-secondary:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.5); } /* Botão de ícone (Fechar) */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 0.375rem; background-color: var(--cor-erro); color: white; font-size: 1rem; font-weight: bold; transition-property: background-color, border-color, color, fill, stroke; transition-duration: 200ms; border: none; cursor: pointer; width: 2.5rem; height: 2.5rem; } .btn-icon:hover { background-color: #dc2626; /* red-600 - constante para ambos temas */ } .btn-icon:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5); } /* Estados desabilitados */ .btn-primary:disabled, .btn-secondary:disabled, .btn-icon:disabled { opacity: 0.5; cursor: not-allowed; } /* Versões com texto e ícone */ .btn-with-icon { display: inline-flex; align-items: center; gap: 0.5rem; } /* Ajuste específico para tema claro no botão de ícone */ .tema-claro .btn-icon { color: white; } /* ======================================== BOTÕES - GRADE ======================================== */ /* Grade para botões */ .grade-botao { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */ gap: 1rem; /* Espaçamento entre as células */ padding: 1rem; } /* Estilo para os botões dentro da grade */ .grade-botao .btn-primary, .grade-botao .btn-secondary { width: 100%; height: 40px; font-size: 0.875rem; } .col-acao { width: 15%; min-width: 120px; /* text-align: right; -> Removido a pedido do usuário */ } /* ======================================== MENSAGENS DE FEEDBACK TEMPORÁRIAS ======================================== */ /* Container para mensagens flutuantes */ .feedback-container { position: fixed; top: 70px; /* Ajustado para aparecer logo abaixo do cabeçalho que tem 60px de altura */ right: 20px; z-index: 9999; /* Garantir que as notificações fiquem acima de todos os elementos */ width: 320px; max-width: calc(100vw - 40px); } /* Mensagem de feedback base */ .feedback-mensagem { display: flex; align-items: flex-start; padding: 1rem; margin-bottom: 0.75rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transform: translateX(0); transition: all 0.3s ease-in-out; opacity: 1; position: relative; } /* Estado inicial oculto (entra da direita) */ .feedback-mensagem.oculta { transform: translateX(150%); opacity: 0; transition: all 0.3s ease-in-out; } /* Cabeçalho da mensagem */ .feedback-header { display: flex; justify-content: space-between; width: 100%; align-items: center; margin-bottom: 0.5rem; } .feedback-titulo { font-weight: 600; font-size: 0.875rem; } /* Botão fechar mensagem */ .feedback-fechar { background: none; border: none; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem; opacity: 0.7; transition: opacity 0.2s; } .feedback-fechar:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.1); } /* Ícone da mensagem */ .feedback-icone { margin-right: 0.75rem; font-size: 1.25rem; flex-shrink: 0; } /* Conteúdo da mensagem */ .feedback-conteudo { flex: 1; font-size: 0.875rem; line-height: 1.4; } /* Tipos de mensagens */ .feedback-sucesso { background-color: var(--cor-fundo-card); border-left: 4px solid var(--cor-sucesso); color: var(--cor-texto); } .feedback-erro { background-color: var(--cor-fundo-card); border-left: 4px solid var(--cor-erro); color: var(--cor-texto); } .feedback-alerta { background-color: var(--cor-fundo-card); border-left: 4px solid #fbbf24; /* amarelo-400 */ color: var(--cor-texto); } .feedback-info { background-color: var(--cor-fundo-card); border-left: 4px solid var(--cor-botao); color: var(--cor-texto); } /* Ícones específicos por tipo */ .feedback-sucesso .feedback-icone { color: var(--cor-sucesso); } .feedback-erro .feedback-icone { color: var(--cor-erro); } .feedback-alerta .feedback-icone { color: #fbbf24; /* amarelo-400 */ } .feedback-info .feedback-icone { color: var(--cor-botao); } /* Mensagens de validação de formulário */ .validacao-erro { color: var(--cor-erro); font-size: 0.875rem; margin-top: 0.25rem; display: flex; align-items: center; } .validacao-erro::before { content: "⚠"; margin-right: 0.25rem; font-size: 0.75rem; } /* Mensagens inline para campos de formulário */ .campo-mensagem { font-size: 0.875rem; margin-top: 0.25rem; padding: 0.5rem; border-radius: 0.25rem; } .campo-mensagem.sucesso { background-color: rgba(52, 211, 153, 0.1); color: var(--cor-sucesso); border: 1px solid var(--cor-sucesso); } .campo-mensagem.erro { background-color: rgba(248, 113, 113, 0.1); color: var(--cor-erro); border: 1px solid var(--cor-erro); } .campo-mensagem.info { background-color: rgba(96, 165, 250, 0.1); color: var(--cor-botao); border: 1px solid var(--cor-botao); } /* Barra de progresso para mensagens temporárias */ .feedback-progresso { height: 3px; background-color: rgba(255, 255, 255, 0.3); margin-top: 0.5rem; border-radius: 2px; overflow: hidden; } .feedback-progresso-barra { height: 100%; background-color: currentColor; width: 100%; animation: progresso linear forwards; } @keyframes progresso { from { width: 100%; } to { width: 0%; } } /* ======================================== RESPONSIVIDADE MOBILE ======================================== */ @media (max-width: 768px) { .botao { width: 100%; } .feedback-container { top: 70px; /* Ajuste para dispositivos móveis */ right: 10px; left: 10px; width: auto; } .feedback-mensagem { padding: 0.75rem; } } /* ======================================== RESPONSIVIDADE DESKTOP ======================================== */ /* Em telas maiores (desktop), mantém margem e bordas */ @media (min-width: 769px) { header { margin: 0px; border-radius: 0px; width: calc(100%); /* Compensa as margens laterais */ } .container-pagina { padding-top: calc(60px + 1rem); /* Considera a altura do header no desktop */ } } /* Iframes */ .frame { width: 100%; height: 600px; border: none; display: block; } /* ======================================== LISTAS DE CARTÕES PADRONIZADAS ======================================== */ .lista-container { display: flex; flex-direction: column; gap: 1rem; max-height: 600px; overflow-y: auto; padding-right: 0.5rem; /* Espaço para scrollbar */ scrollbar-width: thin; scrollbar-color: var(--cor-borda) var(--cor-fundo-input); } .lista-container::-webkit-scrollbar { width: 8px; } .lista-container::-webkit-scrollbar-track { background: var(--cor-fundo-input); border-radius: 4px; } .lista-container::-webkit-scrollbar-thumb { background-color: var(--cor-borda); border-radius: 4px; } .cartao-padrao { background-color: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 0.5rem; padding: 1rem; display: grid; grid-template-columns: 1fr auto; /* Conteúdo | Ações */ gap: 1rem; align-items: center; transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s; } .cartao-padrao:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border-color: var(--cor-botao); } .cartao-conteudo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; align-items: center; } .cartao-info-grupo { display: flex; flex-direction: column; } .cartao-label { font-size: 0.75rem; text-transform: uppercase; color: var(--cor-texto-secundario); font-weight: 600; margin-bottom: 0.25rem; } .cartao-valor { font-size: 0.95rem; color: var(--cor-texto); font-weight: 500; } .cartao-valor.destaque { font-size: 1.1rem; font-weight: 700; color: var(--cor-botao); } .cartao-acoes { display: flex; flex-direction: column; gap: 0.5rem; border-left: 1px solid var(--cor-borda); padding-left: 1rem; min-width: 120px; justify-content: center; } /* Responsividade para telas pequenas */ @media (max-width: 768px) { .cartao-padrao { grid-template-columns: 1fr; /* Stack vertical */ } .cartao-acoes { border-left: none; border-top: 1px solid var(--cor-borda); padding-left: 0; padding-top: 1rem; flex-direction: row; justify-content: flex-end; } } /* Coluna de Ações */ .coluna-acoes { display: flex; gap: 0.5rem; justify-content: flex-end; align-items: center; } /* Barra de Ferramentas (Filtros e Botões) */ .barra-ferramentas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; } .grupo-filtros { display: flex; gap: 1rem; flex: 1; max-width: 600px; }