/* ...................... geral ................................................................................................................................................. */
html { height:100%; width:100%; }
body { margin:0; padding:0; background-color:#E8E8E8; height:100%; font-family: "Roboto", sans-serif; font-size:14px; font-weight:500; color:#333; line-height:160%; z-index:1; }
input, textarea, select, option, button { font-family: "Roboto", sans-serif; color:#333; outline:0; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; }
img { border:none; }
a { color:#010710; text-decoration:none; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition: all 0.3s ease; }
a:hover { color:#B61431; text-decoration:underline; }
::selection { background:#01050C; color:#ccc; }
::-moz-selection { background:#01050C; color:#ccc; }
form { margin:0; padding:0; }
fieldset { margin:0; padding:0; border:none; }
.clear { clear:both; display:block; }
body li.clear { clear:both; height:0; padding:0; margin:0; width:100%; float:none; }
.tudo { min-height:100%; position:relative; z-index:1; }
* html .tudo { height:100%; }
* { box-sizing: border-box; }
/* ...................... login ................................................................................................................................................. */
.login_background { background:#E8E8E8; width:100%; height:100%; }
.login { background:#E8E8E8; width:320px; padding:0; box-sizing:border-box; transform:translate(-50%,-50%); top:50%; left:50%; position:absolute; }
.login_cont { width: 320px; overflow: hidden; }
.form { display:flex; width: 640px; /* Largura total dos dois formulários */ }
#logar, #lembrar { width: 320px; float: left; }
.login_cont .confirma { display: flex; align-items: center; justify-content: center; width:100%; height:50px; margin-bottom:20px; background:#1541B5; color:#fff; text-align:center; font-weight:500; }
.login_cont .erro { display: flex; align-items: center; justify-content: center; width:100%; height:50px; margin-bottom:20px; background:#B61431; color:#fff; text-align:center; font-weight:500; }
.login_cont .logotipo { display:block; text-align:center; }
.login_cont a { display:flex; justify-content: center; padding:10px 0 10px 0; width:100%; color:#010710; text-decoration:none; text-align:center; }
.login_cont a:hover { color:#01050C; }
.login_cont a#esqueci, .login_cont a#voltar { text-align:center; display:block; margin-top:10px; }
.login_cont #lembrar { color:#fff; }
.login form { width:320px; }
.login legend { color:#333; }
.login input[type=email],
.login input[type=password] { display:block; border:none; margin:20px 0 20px 0; padding:0 20px 0 20px; height:50px; width:100%; box-sizing:border-box; line-height:50px; }
.login input::-webkit-input-placeholder { font-weight:300; font-style:normal; }
.login input[type=submit].botaologin { display:block; border:none; width:100%; height:50px; line-height:50px; padding:0; background-color:#010710; color:#fff; cursor:pointer; }
.login input[type=submit].botaologin:hover { background:#01050C; color:#fff; }
/* ...................... menu principal ................................................................................................................................................. */
.menu { background-color:#010710; color:#333; width:260px; height:100%; position:fixed; z-index:10; transition: width 0.5s ease-in-out; border-top-right-radius: 6px; border-bottom-right-radius: 6px;}
.logotipo { display: flex; align-items: center; justify-content: center; width:100%; margin:20px 0; z-index:11; }
.logotipo a.logochamada {
display: block; /* Necessário para definir dimensões */
width: 100%; /* Ajusta para redimensionar conforme a tela */
max-width: 140px; /* Tamanho máximo desejado para o logo */
height: 70px; /* Altura fixa para visualizar a imagem */
background-image: url(images/logo_dp_branco.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain; /* Ajusta a imagem dentro da div, mantendo a proporção */
}
/* Estilos específicos quando o logotipo é ajustado */
.logotipo a.logochamada.ajustado {
max-width: 82px; /* Tamanho máximo desejado para o logo quando ajustado */
background-image: url(images/logo_dp_apenasanimais_branco.svg); }
.navbar { list-style:none; margin:0; padding:10px 0 0 0; }
.navbar>li { margin:0 0 10px 0; position:relative; }
.navbar>li a { overflow: hidden; display: block; height: 30px; line-height: 30px; padding-left: 70px; font-size: 15px; font-weight: 500; background: 20px center no-repeat; color: #fff; /* Cor padrão */ position: relative; /* Adicionado para garantir que o pseudo-elemento ::before seja posicionado corretamente */ transition: color 0.3s; /* Adicionado para suavizar a transição da cor */ }
.navbar>li a::before { content: ''; display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background-color: #fff; opacity: 0; transition: opacity 0.3s; }
.navbar>li a:hover,
.navbar>li.ativo a { color: #fff; }
.navbar>li a:hover::before,
.navbar>li.ativo a::before { opacity: 1; }
.navbar > li a.dashboard { background-image: url('data:image/svg+xml;charset=UTF-8,'); background-size: 20px 20px; }
.navbar > li a.usuario { background-image: url('data:image/svg+xml;charset=UTF-8,'); background-size: 20px 20px; }
.navbar > li a.fornecedor { background-image: url('data:image/svg+xml;charset=UTF-8,'); background-size: 20px 20px; }
.navbar > li a.despesa { background-image: url('data:image/svg+xml;charset=UTF-8,'); background-size: 20px 20px; }
.navbar > li a.cliente { background-image: url('data:image/svg+xml;charset=UTF-8,'); background-size: 20px 20px; }
.navbar > li a.receita { background-image: url('data:image/svg+xml;charset=UTF-8,'); background-size: 20px 20px; }
.navbar > li a.relatorio { background-image: url('data:image/svg+xml;charset=UTF-8,'); background-size: 20px 20px; }
.navbar > li a.perfil { background-image: url('data:image/svg+xml;charset=UTF-8,'); background-size: 20px 20px; }
.navbar > li a.sair { background-image: url('data:image/svg+xml;charset=UTF-8,'); background-size: 20px 20px; }
.navbar>li a:hover { text-decoration: none; }
/*submenu*/
.navbar ul { list-style: none; padding: 0; margin: 0; display: none; /* Inicia oculto */ left: 0; top: 100%; /* Exibe logo abaixo do item pai */ width: 200px; /* Largura do submenu */ z-index: 10; }
.navbar ul li { margin: 0 0 5px 0; padding: 0; }
.navbar ul li:last-child { margin:0; }
.navbar ul li a { overflow: hidden; display: block; height: 30px; line-height: 30px; margin-left:65px; padding:0 5px 0 5px; font-size:12px; font-weight: 300; background: 20px center no-repeat; color: #fff; border-radius:6px; /* Cor padrão */ position: relative; /* Adicionado para garantir que o pseudo-elemento ::before seja posicionado corretamente */ transition: color 0.3s; transition: background-color 0.3s ease; /* Adicionado para suavizar a transição da cor */ }
.navbar ul li a::before { display:none; }
.navbar ul li a:hover { background-color: rgba(255, 255, 255, 0.3); }
.navbar ul li.ativo a { background-color: rgba(255, 255, 255, 0.3); }
/* ...................... conteudo ................................................................................................................................................. */
.conteudo { flex:1; margin-left:260px; padding:60px; position:relative; transition: margin-left 0.5s ease-in-out; z-index:9; }
.menu-toggle { position:absolute; top: 100px; right: -15px; font-size:16px; background-color: rgba(255, 255, 255, 0.8); border-radius: 6px; width: 30px; height: 30px; text-align: center; line-height: 30px; cursor: pointer; z-index:10; }
.menu-toggle span { color:#010710; }
h1 { font-family: "Montserrat", sans-serif; font-size:40px; margin:0 0 40px 0; font-weight:400; line-height:120%; }
h2 { font-family: "Montserrat", sans-serif; font-size:24px; text-align:left; padding:10px 0 10px 0; margin:0 0 20px 0; font-weight:500; line-height:120%; }
h3 { font-family: "Montserrat", sans-serif; font-size:22px; text-align:left; padding:10px 0 10px 0; margin:0; font-weight:500; line-height:120%; }
h4 { font-family: "Montserrat", sans-serif; font-size:18px; text-align:left; padding:10px 0 10px 0; margin:0; font-weight:700; line-height:120%; }
@media (max-width: 900px) {
.conteudo { padding:20px; }
h1 { font-size:24px; font-weight:400; line-height:120%; }
h2 { font-size:18px; padding:10px 0 10px 0; margin:0 0 20px 0; font-weight:500; line-height:120%; }
}
/* ...................... 1.5 Ul LI Edição de campos ................................................................................................................................................. */
ul.lista_editar { width:100%; list-style-type: none; margin: 0; padding: 0; font-size: 14px; display: flex; flex-direction: column; }
ul.lista_editar li { display:flex; align-items: center; }
ul.lista_editar li .erro { display:flex; align-items: center; height:40px; margin: 0; padding:0 0 0 10px; font-weight:700; color:#010710; box-sizing: border-box; }
ul.lista_editar li .titulo { flex-basis: 150px; height: 40px; display: flex; align-items: center; /* Centraliza verticalmente */ }
ul.lista_editar li input[type=text],
ul.lista_editar li input[type=tel],
ul.lista_editar li input[type=password],
ul.lista_editar li input[type=email] { flex: 1; height:40px; padding: 0 10px; background: #fff; border: 1px solid #ddd; margin: 0 0 5px 0; }
/* Estilização do Select */
ul.lista_editar li select { flex: 1; height:40px; padding:0 10px 0 10px; background:#fff; border:1px solid #ddd; margin:0 0 5px 0; -webkit-appearance: none; /* Remove o estilo padrão no Chrome/Safari */ -moz-appearance: none; /* Remove o estilo padrão no Firefox */ appearance: none; /* Remove o estilo padrão no Edge */ /* Ícone da setinha */ background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; background-image: url('data:image/svg+xml;charset=US-ASCII,'); }
/* Estilização do Checkbox */
ul.lista_editar li input[type="checkbox"] { -webkit-appearance: none; /* Remover estilo padrão */
appearance: none;
background: url('images/bolinha.png') 5px center no-repeat #010710;
border-radius: 10px;
width: 56px; /* Largura do switch */
height: 20px; /* Altura do switch */
cursor: pointer;
position: relative;
transition: background-color 0.3s ease;
}
ul.lista_editar li input[type="checkbox"]:checked { background-position: right 5px center; background-color: #1541B5; }
/* Adicionando pseudo-elemento para o texto dentro do checkbox */
ul.lista_editar li input[type="checkbox"]:before {content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
background-position: center;
color: #fff;
font-weight: 700;
font-size: 12px;
line-height: 20px;
text-align: center;
}
ul.lista_editar li .botaointerna { display:inline-block; height:40px; line-height:40px; margin:0; padding:0 20px 0 20px; color:#fff; text-align:center; background:#010710; text-decoration:none; border:none; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; cursor:pointer; box-sizing: border-box; }
ul.lista_editar li .botaointerna:hover { background:#01050C; }
ul.lista_editar li .botaointerna.senha { background:#1541B5; text-decoration:none; }
ul.lista_editar li .botaointerna.senha:hover { background:#01050C; color:#fff;}
@media (max-width: 900px) {
ul.lista_editar li { flex-direction: column; align-items: flex-start; }
ul.lista_editar li .titulo { flex-basis: auto; margin-bottom:0; }
ul.lista_editar li input[type=text],
ul.lista_editar li input[type=tel],
ul.lista_editar li input[type=password],
ul.lista_editar li input[type=email] { flex:none; width: 100%; margin: 0 0 10px 0; }
ul.lista_editar li .botaointerna { display:block; width:100%; margin:0; padding:0; }
}
/* ...................... botão ................................................................................................................................................. */
.botao { display:inline-block; height:40px; line-height:40px; padding:0 20px 0 20px; font-size:12px; color:#fff; background:#010710; text-decoration:none; border:none; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); cursor:pointer; box-sizing: border-box; }
.botao:hover { background:#01050C; }
.botao.adicionar { background:#1541B5; text-decoration:none; }
.botao.adicionar:hover { opacity:0.7; color:#fff;}
.botao.baixar { background:#137E41; text-decoration:none; }
.botao.baixar:hover { opacity:0.7; color:#fff;}
.botao.salvar { background:#1541B5; text-decoration:none; }
.botao.salvar:hover { background:#01050C; color:#fff;}
.botao.excluir { background:#B61431; margin-bottom:10px; text-decoration:none; }
.botao.excluir:hover { background:#01050C; color:#fff;}
.botao.sair { background:#B61431; margin-left:20px; text-decoration:none; }
.botao.sair:hover { background:#01050C; color:#fff;}
.botao.vertodos { display:block; margin-top:10px; text-align:center; text-decoration:none;}
.botao.vertodos:hover { color:#fff;}
/* ...................... 1.0 Editar formulario ................................................................................................................................................. */
.msg { display:block; width:100%; margin:20px 0 20px 0; text-align:center; line-height:120%; font-size:14px; padding:10px 0 10px 0; font-weight:700; }
.msg.confirma { background:#1541B5; border:1px dashed #1541B5; color:#fff; }
.msg.erro { background:#B61431; border:1px dashed #B61431; color:#fff; }
.formulario { width:100%; }
.formulario fieldset { display: flex; margin-bottom:10px; }
.formulario label { flex-basis: 150px; margin:0; padding:10px 0 5px 0; }
.formulario input[type=text],
.formulario input[type=number],
.formulario input[type=file],
.formulario input[type=email],
.formulario input[type=tel],
.formulario input[type=password],
.formulario select { flex: 1; height:40px; padding:0 10px 0 10px; background:#fff; border:1px solid #ddd; }
.formulario textarea { flex: 1; width:100%; height:100px; padding:5px; background:#fff; border:1px solid #ddd; }
.formulario input:focus { border-color:#0D9AAB; }
/* ...................... 1.1 Segurança da Senha ................................................................................................................................................. */
#seguranca { font-weight: bold; margin:0 0 10px 0; }
.seguranca-baixa { color:#010710; }
.seguranca-media { color:#1541B5; }
.seguranca-alta { color:#14B618; }
/* ...................... Usuario - Inclusão e Adição ................................................................................................................................................. */
.cadastro {
display: flex;
padding: 0;
margin: 20px 0;
box-sizing: border-box;
cursor: pointer;
}
.cadastro .bloco_cadastro {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Cria colunas flexíveis que se ajustam conforme o espaço disponível */
gap: 10px;
width: 100%;
box-sizing: border-box;
}
.bloco_cadastro input[type=text],
.bloco_cadastro input[type=number],
.bloco_cadastro input[type=password],
.bloco_cadastro select,
.bloco_cadastro input[type=email] {
height: 40px;
padding: 0 10px;
background: #fff;
border: 1px solid #ddd;
box-sizing: border-box;
width: 100%; /* Garante que os elementos ocupem 100% da coluna disponível */
}
@media (max-width: 900px) {
.cadastro .bloco_cadastro {
grid-template-columns: 1fr; /* Em telas menores, cada campo ocupará toda a largura disponível */
}
.bloco_cadastro input[type=text],
.bloco_cadastro input[type=number],
.bloco_cadastro input[type=password],
.bloco_cadastro select,
.bloco_cadastro input[type=email] {
width: 100%;
margin-bottom: 10px;
}
}
/* ...................... 1.0. Botões - Operações ................................................................................................................................................. */
.operacoes { display:flex; justify-content: flex-end; align-items: center; gap:20px; padding:0; margin:20px 0 20px 0; box-sizing:border-box; cursor:pointer;}
@media (max-width: 900px) {
.operacoes { gap:10px; }
}
/* ...................... 1.0.1 Botões - Enviar Arquivo ................................................................................................................................................. */
.operacoes .custom-file-upload { width: 40px; height: 40px; background-color: #137E41; background-image: url(images/icones/icon_xls.png); background-size: 18px 20px; background-repeat: no-repeat; background-position: center; border: none; cursor: pointer; border-radius: 6px; display: inline-block; vertical-align: middle; /* Garantir alinhamento vertical */ }
.operacoes .custom-file-upload:hover { opacity: 0.7; }
.operacoes #file-upload { display: none; }
.operacoes button { height: 40px; padding: 0 20px; color: #fff; background: #137E41; text-decoration: none; border: none; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); cursor: pointer; box-sizing: border-box; vertical-align: middle; /* Garantir alinhamento vertical */ }
.operacoes button:hover { opacity: 0.7; }
@media (max-width: 900px) {
.operacoes button { padding: 0 10px; }
}
/* ...................... 1.1. Filtros ................................................................................................................................................. */
.filtro { position:relative; display: flex; justify-content: flex-end; margin: 20px 0; box-sizing: border-box; }
.formfiltro { display: flex; align-items: center; z-index: 120; }
.formfiltro fieldset { display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding: 0; margin: 0; border: none; }
.formfiltro input::placeholder { color: #333; }
.formfiltro input[type=date] { width: 200px; height: 38px; background: #fff; padding: 0 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }
.formfiltro input[type=text] { width: 200px; height: 38px; background: #fff; padding: 0 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }
.formfiltro select { flex: 1; height: 38px; padding: 0 10px; background: #fff; border: 1px solid #ccc; border-radius: 6px; appearance: none; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); background-position: right 10px center; background-size: 16px; background-repeat: no-repeat; background-image: url('data:image/svg+xml;charset=US-ASCII,'); }
.formfiltro input[type=submit] { height: 38px; width: 38px; background-color: #fff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); cursor: pointer; background-image: url(images/icones/Icon_lupa.png); background-position: right 10px center; background-size: 20px 20px; background-repeat: no-repeat; appearance: none; }
.formfiltro input[type=submit]:hover { opacity: 0.7; }
#sugestoes {
position: absolute; /* Fixa a div logo abaixo do campo de busca */
top:40px;
width: 100%; /* Largura igual ao campo de busca */
max-height: 150px; /* Altura máxima da lista */
background-color: #fff; /* Cor de fundo branco */
border: 1px solid #ccc; /* Borda para destacar a caixa */
border-radius: 6px; /* Borda arredondada */
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
overflow-y: auto; /* Barra de rolagem vertical se o conteúdo exceder a altura máxima */
z-index: 200; /* Garantir que a caixa fique sobre outros elementos */
display: none; /* Inicialmente escondido, será exibido via JavaScript */
}
/* Estilo para cada sugestão individual */
#sugestoes .sugestao {
padding: 5px 10px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
/* Efeito hover para as sugestões */
#sugestoes .sugestao:hover {
background-color: #f0f0f0;
}
/* Remove a borda do último item */
#sugestoes .sugestao:last-child {
border-bottom: none;
}
@media (max-width: 900px) {
.filtro { width: 100%; }
.formfiltro { width: 100%; }
.formfiltro fieldset { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
.formfiltro input[type=text], .formfiltro input[type=date], .formfiltro select, .formfiltro input[type=submit] { flex: none; width: 100%; height: 38px; margin: 5px 0 0 0; }
}
/* ...................... 1.2 itens tabela table ................................................................................................................................................. */
.tabela { width:100%; background-color:#fff; padding:0; margin:20px 0 20px 0; border:1px solid #fff; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); }
table { width: 100%; border-collapse: collapse; border: none; }
th, td { border: 1px solid #ddd; padding: 5px ; text-align: left; line-height:120%; font-size:12px; }
th { background-color: #f2f2f2; border-top: none; cursor:pointer; }
th.centro { text-align:center; }
/* Remove bordas laterais das extremidades do thead */
thead th:first-child { border-left: none; }
thead th:last-child { border-right: none; }
tbody tr:nth-child(odd) { background-color: #f9f9f9; /* Cor cinza fraca */ }
tbody tr:nth-child(even) { background-color: #ffffff; /* Cor branca */ }
tbody tr:first-child td { border-top: none; /* Remove a borda superior da primeira linha do corpo */ }
tbody tr:last-child td { border-bottom: none; /* Remove a borda inferior da última linha do corpo */ }
/* Remove bordas laterais das extremidades */
tbody tr td:first-child { border-left: none; }
tbody tr td:last-child { border-right: none; }
@media screen and (max-width: 900px) {
table, thead, tbody, th, td, tr { display: block; }
th { display: none; }
tr { border: none; margin-bottom: 10px; /* Adiciona espaçamento entre os blocos de linhas */ }
td { display: flex; justify-content: space-between; border: none; border-bottom: 1px solid #ddd; position: relative; padding-left: 50%; flex-wrap: wrap; word-break: break-all; white-space: normal; overflow-wrap: break-word; }
td::before { content: attr(data-label); position: absolute; left: 10px; white-space: nowrap; font-weight: bold; word-break: break-all; overflow-wrap: break-word; }
/* Alterna as cores das células individuais */
tbody tr:nth-child(odd) td { background-color: #f9f9f9; }
tbody tr:nth-child(even) td { background-color: #ffffff; }
/* Ajuste para a última célula da última linha */
tbody tr:last-child td { border-bottom: 1px solid #ddd; }
}
/* ...................... 1.3 Modal para Visualização dos dados ................................................................................................................................................. */
.modal {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
display: none; /* Escondido por padrão */
}
.modal-content {
width: 50%;
max-width: 600px;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-height: 80vh; /* Limita a altura a 80% da altura da tela (viewport) */
overflow-y: auto; /* Adiciona barra de rolagem vertical quando o conteúdo exceder a altura */
}
/* Formatação do dados do Modal */
.modal-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
}
.modal-label {
font-weight: 700;
width: 200px;
}
.modal-value {
flex: 1;
font-weight: 300;
text-align: left;
}
.modal-value .desativado {
background:#ddd;
}
.close {
color: #010710;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
@media (max-width: 900px) {
.modal-content {
width: 90%;
max-width: none;
font-size:12px;
max-height: 80vh; /* Mantém a altura máxima de 80% mesmo em dispositivos móveis */
overflow-y: auto;
right: 50%;
top: 50%;
margin-left: 35px;
}
.modal-label {
font-weight: 700;
width: 150px;
}
}
/* Cores para os Status e Nível administrador ou Usuário */
.acoes { display:flex; align-items: center; justify-content: center; }
.status { font-weight:700; }
.status.azul { color:#1541B5; }
.status.amarelo { color:#E8E800; }
.status.vermelho { color:#B61431; }
.botaoexcluir { width: 20px; height: 20px; background-color:#B61431; background-image: url(images/icones/icon_excluir.png); background-size: 14px 15px; background-repeat: no-repeat; background-position: center; border: none; cursor: pointer; border-radius:4px; display: inline-block; }
.botaoeditar { width: 20px; height: 20px; background-color:#1541B5; background-image: url(images/icones/icon_lapis.png); background-size: 15px 15px; background-repeat: no-repeat; background-position: center; border: none; cursor: pointer; border-radius:4px; display: inline-block; }
.botaosenha { width: 20px; height: 20px; background-color:#B18B18; background-image: url(images/icones/icon_senha.png); background-size: 10px 15px; background-repeat: no-repeat; background-position: center; border: none; cursor: pointer; border-radius:4px; display: inline-block; }
.botaovisualizar { width: 20px; height: 20px; background-color:#137E41; background-image: url(images/icones/icon_olho.png); background-size: 15px 10px; background-repeat: no-repeat; background-position: center; border: none; cursor: pointer; border-radius:4px; display: inline-block; }
.botaoduplicar { width: 20px; height: 20px; background-color:#010710; background-image: url(images/icones/icon_duplicar.png); background-size: 15px 15px; background-repeat: no-repeat; background-position: center; border: none; cursor: pointer; border-radius:4px; display: inline-block; }
.botaoexcluir:hover, .botaoeditar:hover, .botaosenha:hover, .botaovisualizar:hover, .botaoduplicar:hover { opacity: 0.7; }
.nivel { display:flex; align-items: center; justify-content: center; font-weight:700; padding:0 10px 0 10px; color:#fff; border-radius: 4px;}
.nivel.azul { background-color:#1541B5; }
.nivel.vermelho { background-color:#B61431; }
/* ...................... 1.2. Paginações ................................................................................................................................................. */
.tabela_rodape { display:flex; justify-content: flex-start; align-items: flex-start; gap:20px; padding:0; margin:10px 0 10px 0; box-sizing:border-box; cursor:pointer;}
.tabela_rodape select { flex: 1; height:40px; padding:0 40px 0 10px; background:#fff; border:1px solid #fff; margin:0; -webkit-appearance: none; /* Remove o estilo padrão no Chrome/Safari */ -moz-appearance: none; /* Remove o estilo padrão no Firefox */ appearance: none; /* Remove o estilo padrão no Edge */ /* Ícone da setinha */ background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); background-image: url('data:image/svg+xml;charset=US-ASCII,'); }
.tabela_rodape .paginacao { display: flex; list-style-type: none; padding: 0; margin: 0; justify-content: center; align-items: center; flex-wrap: wrap; }
.tabela_rodape .paginacao a { margin: 0 5px 5px 5px; width: 40px; height: 40px; text-decoration: none; color: #333; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: center; align-items: center; transition: background-color 0.3s; }
.tabela_rodape .paginacao a:hover { background-color: #f0f0f0; }
.tabela_rodape .paginacao .active { background-color: #1541B5; /* Cor de fundo para o item ativo */ color: #fff; border: 1px solid #1541B5; /* Mesma cor da borda */ }
.tabela_rodape .paginacao .prev,
.tabela_rodape .paginacao .next { font-size: 18px; width: 40px; height: 40px; }
@media (max-width: 900px) {
.tabela_rodape .paginacao a { width: 20px; }
.tabela_rodape .paginacao .prev,
.tabela_rodape .paginacao .next { width: 20px; }
}
/* ...................... 1.3. Dashboard e Relatórios ................................................................................................................................................. */
.painel { width: 100%; margin: 20px auto; display: flex; gap: 20px; }
.painel h3 { margin: 0 0 10px 0; padding:0; font-size: 20px; }
.coluna-esquerda { flex: 0 0 60%; padding: 0; }
.coluna-direita { flex: 0 0 40%; padding: 0; }
/* Resumo Financeiro */
.resumo-financeiro { display: flex; justify-content: space-between; padding: 0; margin-bottom:20px; gap:20px; }
.resumo-financeiro .item { flex: 1; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding:20px; text-align: left; color:#fff; }
.resumo-financeiro .item h2 { margin: 0; padding:0; font-size: 12px; }
.resumo-financeiro .item p { margin: 5px 0 0 0; font-size: 30px; }
.resumo-financeiro .res-receitas { background:#16B43E; }
.resumo-financeiro .res-despesas { background:#B61431; }
.resumo-financeiro .res-saldo { background:#1541B5; }
/* Estilo da lista de despesas a pagar */
.despesas-pagar { background-color: #fff; padding: 20px; margin-bottom:20px; border-radius: 6px; box-sizing:border-box; font-size:12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.despesas-pagar ul { list-style: none; padding: 0; margin: 0; }
.despesas-pagar li { padding: 5px 0; border-bottom: 1px solid #ddd; }
.despesas-pagar li:nth-child(odd) { background-color: #f9f9f9; /* Cor para linhas ímpares */ }
.despesas-pagar li:nth-child(even) { background-color: #ffffff; /* Cor para linhas pares */ }
.despesas-pagar li:last-child { border-bottom: none; }
.despesas-pagar li span { display: inline-block; padding: 0; vertical-align: middle; }
.despesas-pagar .fornecedor { width: 23%; /* Largura fixa para o nome do fornecedor */ }
.despesas-pagar .categoria { width: 23%; /* Largura fixa para a categoria */ }
.despesas-pagar .valor { width: 15%; /* Largura fixa para o valor */ text-align: left; }
.despesas-pagar .status { width: 15%; /* Largura fixa para o status */ border-radius:4px; text-align: center; font-weight: bold; color: #fff; }
.despesas-pagar .status.pago { background-color: #16B43E; /* Verde para Pago */ }
.despesas-pagar .status.pendente { background-color: #FF5733; /* Vermelho para Pendente */ }
.despesas-pagar .data { width: 20%; /* Largura fixa para a data */ text-align: right; }
/* Estilo da lista de receitas */
.receitas { background-color: #fff; padding: 20px; margin-bottom:20px; border-radius: 6px; box-sizing:border-box; font-size:12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.receitas ul { list-style: none; padding: 0; margin: 0; }
.receitas li { padding: 5px 0; border-bottom: 1px solid #ddd; }
.receitas li:nth-child(odd) { background-color: #f9f9f9; /* Cor para linhas ímpares */ }
.receitas li:nth-child(even) { background-color: #ffffff; /* Cor para linhas pares */ }
.receitas li:last-child { border-bottom: none; }
.receitas li span { display: inline-block; padding: 0; vertical-align: middle; }
.receitas .comprador { width: 18%; /* Largura fixa para o nome do comprador */ }
.receitas .atividade { width: 18%; /* Largura fixa para a atividade */ }
.receitas .produto { width: 20%; /* Largura fixa para o produto */ }
.receitas .valor { width: 13%; /* Largura fixa para o valor */ text-align: left; }
.receitas .status { width: 15%; /* Largura fixa para o status */ text-align: center; font-weight: bold; color: #fff; }
.receitas .status.recebido { background-color: #16B43E; /* Verde para Recebido */ }
.receitas .status.aberto { background-color: #FF5733; /* Vermelho para Aberto */ }
.receitas .data { width: 13%; /* Largura fixa para a data */ text-align: right; }
@media (max-width: 900px) {
.despesas-pagar li,
.receitas li { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 0; }
.despesas-pagar .fornecedor,
.despesas-pagar .categoria,
.despesas-pagar .valor,
.despesas-pagar .status,
.despesas-pagar .data,
.receitas .comprador,
.receitas .atividade,
.receitas .produto,
.receitas .valor,
.receitas .status,
.receitas .data { width: 100%; text-align: left; padding: 5px 0; }
}
/* Filtro */
.filtro-painel { background-color: #fff; display: flex; justify-content: center; padding: 20px; margin-bottom: 20px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); gap: 20px; /* Espaçamento entre os fieldsets */}
.filtro-painel fieldset { display: inline-block; vertical-align: top; border: none; padding: 0; margin: 0; min-width: 150px; }
.filtro-painel label { display: block; margin-bottom: 5px; font-weight: bold; }
.filtro-painel input[type=text],
.filtro-painel input[type=number],
.filtro-painel input[type=date],
.filtro-painel select { height: 40px; padding: 0 10px; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }
.filtro-painel input[type=date] { width: 48%; /* Para que os dois inputs ocupem juntos 100% do espaço */ margin-right: 2%; }
.filtro-painel input[type=date]:last-of-type { margin-right: 0; /* Remove a margem do último input */ }
.filtro-painel input[type=submit] { height:40px; width:100%; padding:0 10px; background-color: #010710; color:#fff; border: none; border-radius: 6px; box-sizing: border-box; cursor: pointer; }
.filtro-painel input[type=submit]:hover { background-color: #01050C; }
/* Evolução Despesas e Receitas */
.evolucao { background-color: #fff; padding: 20px; margin-bottom:20px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
/* Estilo Responsivo */
@media (max-width: 900px) {
.painel { flex-direction: column; }
.coluna-esquerda,
.coluna-direita { flex: 1 1 100%; /* Ocupa 100% da largura em telas menores */ }
/* Resumo Financeiro */
.resumo-financeiro { flex-direction: column; gap:0; }
.resumo-financeiro .item { flex: 1; margin-bottom:20px; }
}
/* Despesas */
.form_despesas_receitas { margin:0 0 40px 0; }
/* Contêiner externo do formulário, sem rolagem */
.form-wrapper {
width: 100%;
}
/* Contêiner com barra de rolagem apenas para os campos */
.scroll-wrapper {
max-width: 100%; /* Limita a largura do contêiner */
overflow-x: auto; /* Barra de rolagem horizontal apenas para os campos */
white-space: nowrap; /* Evita que os campos quebrem linha */
padding:10px 0;
margin:20px 0;
}
.form-container {
display: flex;
gap: 20px; /* Espaçamento entre os campos */
margin-bottom: 5px; /* Espaçamento entre os conjuntos duplicados */
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom:0;
min-width: 200px; /* Define uma largura mínima para os campos */
}
.form-group .desativado {
background:#ddd;
}
.form-group label {
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"], input[type="date"], input[type="number"], select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
}
/* Botão de duplicar */
.duplicate-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.duplicate-btn:hover {
background-color: #45a049;
}
/* Estilos para mobile */
@media (max-width: 900px) {
.form-container {
flex-wrap: wrap; /* Campos um abaixo do outro no mobile */
gap: 10px;
}
.form-group {
width: 100%; /* Campos ocupam 100% da largura */
}
}
/* ...................... receitas e despesas adição - tooltip ................................................................................................................................................. */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
margin-left: 5px; /* Espaço entre o label e o ícone de dúvida */
}
.tooltip .duvida {
width: 15px;
height: 15px;
background-color: #1541B5;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 500;
cursor: pointer;
box-sizing: border-box;
}
.tooltip .duvida::after {
content: "?";
}
.tooltip .tooltiptext {
visibility: hidden;
width: 300px;
background-color: #555;
color: #fff;
text-align: center;
font-size: 12px;
font-weight: 300;
line-height: 140%;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1000; /* Garante que o tooltip fique acima de outros elementos */
top: 25px; /* Posiciona o tooltip abaixo do ícone */
left: 20%;
transform: translateX(-20%); /* Centraliza o tooltip */
opacity: 0;
transition: opacity 0.3s;
box-sizing: border-box;
white-space: normal; /* Garante que o texto quebre corretamente */
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
@media (max-width: 700px) {
.tooltip .tooltiptext {
width: 180px; /* Reduz o tamanho do tooltip em telas menores */
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
white-space: normal; /* Quebra de linhas corretamente */
}
}