/* ...................... geral ................................................................................................................................................. */


html						{ height:100%; width:100%; }

body						{ margin:0; padding:0; background:#EAEAEA; height:100%;  font-family: "Inter", sans-serif; font-style: normal; font-size:16px; font-weight:300; color:#2d2d2d; line-height:160%; }

input, textarea, select, option, button		{ font-family: "Inter", sans-serif; font-size:14px; font-weight:300; color:#514B40; outline:0; }

h1, h2, h3, h4, h5, h6				{ font-weight:normal; }

img						{ border:none; }

a						{ color:#2d2d2d; text-decoration:none; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition: all 0.3s ease; }

a:hover						{ color:#2d2d2d; text-decoration:underline; }

::selection					{ background:#2d2d2d; color:#ccc; }
::-moz-selection				{ background:#2d2d2d; 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; }

.container					{ background:#fff; width:100%; height:100%; }

.tudo						{ min-height:100%; position:relative; width:calc(100% - 184px); left:184px; z-index:1; box-sizing: border-box; }

.tudo.max					{ width:calc(100% - 64px); left:64px; }

* html .tudo					{ height:100%; }

small						{ font-size:12px; margin:0; padding:0; opacity:0.7; }




/* ...................... botões ................................................................................................................................................. */


.botaosalvar 					{ display:block; width:100%; height:40px; line-height:40px; font-size:16px; margin-top:20px; padding:0 20px 0 20px; color:#fff; background:#002533; text-decoration:none; border:none; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; cursor:pointer; box-sizing: border-box; }
.botaosalvar:hover				{ background:#FF9E36; }

.botao 						{ display:inline-block; height:40px; line-height:40px; font-size:16px; padding:0 20px 0 20px; color:#fff; background:#002533; text-decoration:none; border:none; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; cursor:pointer; box-sizing: border-box; }
.botao:hover					{ background:#FF9E36; }
  
.botao.avancado 				{ display:inline-block; height:30px; line-height:30px; font-size:14px; padding:0 15px 0 15px; margin-left:10px;}
.botao.avancado:hover				{ background:#FF9E36; }
  
.botao.senha					{ background:#FF9E36; text-decoration:none; }
.botao.senha:hover				{ background:#002533; color:#fff;}
  
.botao.adicionar				{ background:#FF9E36; text-decoration:none; }
.botao.adicionar:hover				{ background:#002533; color:#fff;}

.botao.whats					{ background:#002533; color:#fff; text-align:center; text-decoration:none; margin:20px 0; }
.botao.whats:hover				{ background:#FF9E36; color:#fff;}

.botaosalvar.cadastrar				{ background:#FF9E36; text-decoration:none; }
.botaosalvar.cadastrar:hover			{ background:#002533; color:#fff;}

.botao.sair					{ margin-left:20px; text-decoration:none; background:#FF9E36; }
.botao.sair:hover				{ background:#002533; color:#fff;}

.botao.excluir					{ margin-left:20px; text-decoration:none; background:#D90000; }
.botao.excluir:hover				{ background:#D90000; color:#fff;}

.botao.excluir.prod				{ margin-left:0; }

.botao.perfil_img_excluir			{ display:block; text-decoration:none; background:#D90000; text-align:center;}
.botao.perfil_img_excluir:hover			{ background:#D90000; color:#fff;}

.botao.arquivo 					{ border:1px solid #002533; background-color:#fff; color:#2d2d2d; text-decoration:none; }

/* Usado no envio de imagem do produto na adição e edição. */
.botao.enviar 					{ position: relative; overflow: hidden; cursor:pointer; user-select: none; /* impede seleção de texto */ }

/* Faz o input ocupar toda a área do botão e ficar invisível */
.botao.enviar input[type="file"] 		{ position: absolute; top: 0; right: 0; opacity: 0; height: 100%; width: 100%; font-size: 100px; }


@media only screen and (max-width : 900px) {

.botao.excluir					{ margin-left:0; }

}

.submenu					{ margin:0; padding:0; font-size:14px; }
.submenu a 					{ display:block; margin:0; padding:0; color:#002533; font-weight:700; background:#fff; text-decoration:none; border:none; cursor:pointer; box-sizing: border-box; }
.submenu a:hover				{ color:#FF9E36; background:#fff; }


@media only screen and (max-width : 900px) {

.submenu					{ margin:0; padding:0; }
.submenu a 					{ display:block; margin-bottom:2px; padding:10px; color:#fff; background:#002533; text-decoration:none; border:none; cursor:pointer; box-sizing: border-box; }
.submenu a:hover				{ color:#fff; background:#FF9E36; }

}

/* ...................... cabeçalho ............................................................................................................................................. */


.cab						{ width:100%; height:80px; display:flex; align-items:center; justify-content: space-between; background:#002533; top:0; left:0; position: fixed; z-index: 400; }

  .cab .cab_esquerda				{ display:flex; align-items:center; padding-left:15px; box-sizing:border-box; }
  
    .cab .cab_esquerda .menu-icon 		{ background: url(images/icone_menu.svg) no-repeat center center; width:30px; height:30px; margin-right:15px; cursor:pointer;  background-size: contain;}

/*
    .cab .cab_esquerda a.logo 			{ background: url(images/logo_pecplace_branco.svg) no-repeat center center; width:139px; height:25px; background-size: contain; }
*/
    
    .cab .cab_esquerda a.logo 			{ background: url(images/Logo_PecPlace_Branco_25.png) no-repeat center center; width:139px; height:25px; background-size: contain; }
  
  
  .cab .cab_direita				{ display:flex; align-items:center; padding-right:15px; box-sizing:border-box; gap: 40px; }

    .cab .cab_direita .entrar 			{ display:flex; align-items:center; text-decoration:none; height:38px; line-height:38px; padding:0 20px 0 20px;  border:1px solid transparent; color:#fff; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; box-sizing:border-box; cursor:pointer; }

    .cab .cab_direita .entrar:hover		{ border:1px solid transparent; color:#FFE287;  }

      .cab .cab_direita .entrar .icon		{ display: inline-block; width: 24px; height: 24px; background: url('images/icon_user_v2.svg') no-repeat center top; background-size: contain; /* Adiciona esta linha para garantir que a imagem seja dimensionada corretamente */ margin-right: 20px; }
    
    
    
    .cab .cab_direita .entrar.criar		{ border:1px solid #fff; }

    .cab .cab_direita .entrar.criar:hover	{ border:1px solid #FFE287; color:#FFE287;  }
    
    .cab .cab_direita .entrar.sair		{ border:1px solid #FF9E36; background-color:#FF9E36; }

    .cab .cab_direita .entrar.sair:hover	{ border:1px solid #FF9E36; color:#fff;  }



@media only screen and (max-width : 1200px) {

  .cab .cab_esquerda				{ padding-left:10px; }
  
    .cab .cab_esquerda .menu-icon 		{ margin-right:10px; }

  .cab .cab_direita				{ font-size:12px; padding-right:10px; gap: 10px; }

    .cab .cab_direita .entrar 			{ height:30px; line-height:30px; padding:0 5px 0 5px;  border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; }

      .cab .cab_direita .entrar .icon		{ margin-right: 10px; }

    .cab .cab_direita .entrar.criar		{ display:none; }
    
    .cab .cab_direita .entrar .texto		{ display:none; }
}


/* ...................... rodape ............................................................................................................................................. */

.rodape-tarja 					{ display: flex; background-color: #002533; max-height: 500px; overflow: hidden; }

.rodape-tarja .contato-imagem 			{ flex: 0 0 40%; max-height: 500px; display: flex; align-items: center; justify-content: center; }

.rodape-tarja .contato-imagem img 		{ width: 100%; height: auto; max-height: 500px; object-fit: cover; }

.rodape-tarja .contato-texto 			{ flex: 0 0 60%; padding: 0 60px; color: #ffffff; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }

.rodape-tarja .contato-texto h2 		{ font-size: 28px; font-weight:700; margin-bottom: 20px; }

.rodape-tarja .contato-texto h3 		{ font-size: 14px; font-weight:700; color:#FF9E36; margin:0; padding:0; line-height:120%; }

.rodape-tarja .contato-texto p 			{ font-size: 14px; margin:0 0 10px 0; padding:0; line-height:140%; }

.rodape-tarja .contato-texto a 			{ color:#fff; text-decoration: none;}
.rodape-tarja .contato-texto a:hover		{ color:#FFE287}

.rodape-tarja .contato-texto .whatsapp-link 	{ display: inline-block; background-image: url(images/icon_whatsapp_branco.svg); background-repeat: no-repeat; background-size: 20px 20px; background-position: left center; padding-left: 25px; line-height: 20px; height: 20px; color: #fff;  }


.rodape-tarja .contato-duplo 			{ display: flex; gap: 40px; flex-wrap: wrap; }

.rodape-tarja .contato-esquerda,
.rodape-tarja .contato-direita 			{ flex: 1; }



/* Responsivo */
@media (max-width: 1200px) 			{
	
  .rodape-tarja 				{ flex-direction: column; flex-wrap: wrap; max-height: none; }

  .rodape-tarja .contato-imagem			{ flex: 0 0 100%; padding:0; height:auto; max-height:none; }
  .rodape-tarja .contato-imagem img 		{ max-height: none; }
  
  .rodape-tarja .contato-texto 			{ flex: 0 0 100%; padding:20px; }
  
}


@media (max-width: 600px) 			{
	
.rodape-tarja .contato-texto h2 		{ font-size:20px; text-align:center; }
	
.rodape-tarja .contato-duplo 			{ flex-direction: column; gap: 0px; }

.rodape-tarja .contato-esquerda,
.rodape-tarja .contato-direita 			{ flex: 1; text-align:center; margin-bottom:10px; }
  
}



.rodape 					{ padding: 60px 10px; position: relative; color: #666; font-size:14px; z-index: 120; box-sizing: border-box; display: flex; justify-content: center; align-items: center; flex-direction: column; }

.rodape a.logorodape 				{ background: url(images/logo_pecplace.svg); background-size: 198px 36px; margin:40px 0; background-position: center; background-repeat: no-repeat; width: 198px; height: 36px; display: block; }
    
.rodape .rodape_empresa				{ color:#666; margin:0 auto; line-height:140%; padding:0; text-align:center; }
    
    
    
    
/* ...................... 1. cotações e banner  ............................................................................................................................................. */

.secao_cotacao_banner				{ position: relative; width: 100%; margin-top: 80px; z-index:300; /* Adiciona margem superior para compensar a altura da div cab */ }
    
/* ...................... 1.1 cotações ............................................................................................................................................. */

/* Estilo para o contêiner de cotações */
.secao-cotacao 					{ position:relative; bottom: 0; left: 0; width: 100%; height: 80px; background-color: rgb(255, 255, 255 ,1.0); display: flex; align-items: center; justify-content: flex-start; z-index: 2; overflow: hidden; transition: background-color 0.3s ease; /* Transição para mudanças visuais */ }

/* Container interno para a animação */
.ticker 					{ display: flex; width: max-content; /* Ajusta a largura para o conteúdo */ animation: scroll-left 70s linear infinite; /* Define a animação */ }

/* Estilo para as listas de cotações */
.cotacoes 					{ list-style-type: none; margin: 0; padding: 0; display: flex; white-space: nowrap; /* Impede que os itens quebrem a linha */ }

.secao-cotacao li 				{ flex-shrink: 0; margin: 0 30px; line-height:100%; text-align: center; color: #fff; }

.cotacao-titulo 				{ font-size: 14px; font-weight:500; display: block; color: #FF9E36; }

.cotacao-valor 					{ font-size: 14px; font-weight:500; display: block; color: #002533; padding:5px 0;}

.cotacao-data 					{ font-size:12px; display:block; color: #002533;  }

/* Estilo para variação do indicador na incial do site */

.cotacao-variacao 				{ display: inline-block; font-size: 10px; font-weight: 500; margin-left: 4px; position: relative; /* Necessário para posicionamento dos pseudo-elementos */ }
.cotacao-variacao.positivo 			{ color: #7BD94E; }
.cotacao-variacao.positivo::after 		{ content: ''; position: absolute; right: 100%; /* Posiciona a seta à direita do texto */ margin:0 2px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #7BD94E; /* Triângulo para cima */ }
.cotacao-variacao.negativo 			{ color: #FEA897; }
.cotacao-variacao.negativo::after 		{ content: ''; position: absolute; right: 100%; /* Posiciona a seta à direita do texto */ margin:0 2px; top: 50%; transform: translateY(-50%); width: 0;  height: 0;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #FEA897; /* Triângulo para baixo */ }


 @media only screen and (max-width: 1200px) 	{

.secao-cotacao 					{ height: 60px; line-height:100%; width: 100%; }
            
.cotacao-titulo					{ font-size: 12px; display: block; }

.cotacao-valor 					{ font-size: 12px; display: block; padding:0; }
            
.cotacao-data 					{ font-size:10px; display:block; }

}

/* Animação de rolagem para a esquerda */
@keyframes scroll-left {
    0% {
	transform: translateX(0);
    }
    100% {
	transform: translateX(-50%); /* Move a metade do conteúdo total */
    }
}

/* Pausar a animação ao passar o mouse sobre o banner */
.secao-cotacao:hover .ticker 			{ animation-play-state: paused;  }

/* Opcional: Alterar a aparência do banner ao hover */
.secao-cotacao:hover 				{ background-color: rgba(255, 255, 255, 0.9); /* Exemplo de mudança de cor */ }
.secao-cotacao:hover .cotacao-valor		{ /* color: #fff; */ }


/* ...................... 1.2. banner ............................................................................................................................................. */

.secao-banner 					{ position: relative; max-width:1400px; height: 430px; margin: 20px auto; border-radius: 20px; background: linear-gradient(to right, #FEE797, #FF9E36); display: flex; z-index:100; box-sizing:border-box; }


.coluna-esquerda 				{
						width: 300px;
						height: 430px;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 30px;
						border-radius: 20px;
						overflow: hidden;
						background-image: url('images/slides/banner_modelo_animais.png');
						background-position: right center; /* ou ajuste conforme o corte desejado */
						background-repeat: no-repeat;
						background-size: auto; /* mantém o tamanho original da imagem */
						}

.coluna-direita 				{
						width: 300px;
						height: 430px;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 30px;
						border-radius: 20px;
						overflow: hidden;
						background-image: url('images/slides/banner_modelo_cereais.png');
						background-position: left center; /* ou ajuste conforme o corte desejado */
						background-repeat: no-repeat;
						background-size: auto; /* mantém o tamanho original da imagem */
						}


.coluna-centro 					{ flex: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; }

/*Titulo do banner*/
	.coluna-centro h2			{ width:90%; display:block; font-size:32px; margin:0 auto; padding:0; line-height:120%; font-weight:700; color:#002533; align-self: flex-start; text-align:left; }

/*Icones*/
	.centro-menu 				{ width:90%; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; padding: 50px 0; list-style: none; box-sizing:border-box;  margin:0; }

	.centro-menu li 			{ text-align: center; }

	.centro-menu a 				{ display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #002533; }

	/* Caixa dos ícones */
	.centro-menu .icone 			{ width: 55px; height: 55px; background-color:#fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; background-position: center;  box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease; }

	/* Ícones com suas imagens e tamanhos estou usando igual dos usados em menus devido isso não foi necessário montar aqui eles. */

	.centro-menu span 			{ margin-top: 8px; font-size: 14px; }

	/* Hover e Ativo com cor específica por item */
	a:hover .icon-destaque,
	a.ativo .icon-destaque 			{ background-color: #FFB565; }

	a:hover .icon-energetico,
	a.ativo .icon-energetico 		{ background-color: #FEE797; }

	a:hover .icon-proteico,
	a.ativo .icon-proteico 			{ background-color: #FEA897; }

	a:hover .icon-volumosos,
	a.ativo .icon-volumosos 		{ background-color: #A6FF83; }

	a:hover .icon-minerais,
	a.ativo .icon-minerais 			{ background-color: #C1ECFF; }

	a:hover .icon-aditivos,
	a.ativo .icon-aditivos 			{ background-color: #83A6FF; }

	a:hover .icon-categorias,
	a.ativo .icon-categorias 		{ background-color: #C8C8C8; }


/* Busca do Produto e Busca da Cidade */
	.barra_busca_destino_novo 		{ width:90%; height: 80px; position: relative; font-size: 14px; display: flex; justify-content: center; align-items: center; padding:0; gap: 20px; box-sizing: border-box; }

	.busca-produto 				{ display: flex; align-items: center; width: 50%; height: 50px; }

	.busca-destino 				{ display: flex; align-items: center; width: 50%; height: 50px; background: #fff; border-radius: 7px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);padding:0; /* pra alinhar o input melhor */ }

	/* usado apenas para manter a formatação do wrap e não ser afetado pelo form. */
	.wrap-produto form 			{ display: flex; flex: 1; align-items: center;}

	.wrap-produto 				{ flex: 1; margin-right:5px; display: flex; align-items: center; height: 50px; background: #fff; border-radius: 7px; box-shadow: 0 0 7px rgba(0, 0, 0, 0.2); overflow: hidden; }

	.wrap-produto input,
	.busca-destino input,
 	.wrap-produto select			{ flex: 1; border: none; height:100%; padding: 0 10px; font-size: 14px; outline: none; border-radius: 7px; }

	.botao-buscar				{ width: 40px; height: 40px; background: #fff; border: none; margin-right: 5px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
	.botao-buscar::before 			{ content: ""; display: block; width: 17px; height: 17px; background-image: url('images/icones/icon_lupa_v2.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; }
	.botao-buscar:hover			{ background:#ccc;  }

	.botao-filtro 				{ width: 40px; height: 40px; background: #fff; border: none; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding:0; box-sizing: border-box;}
	.botao-filtro::before 			{ content: ""; display: block; width: 17px; height: 17px; background-image: url('images/icones/icon_filtrar_v2.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
	.botao-filtro:hover			{ background:#ccc;  }



		#filtro 			{ display:none; border: none; position: absolute; top:70px; left:0; background-color:#fff; border-radius: 7px; padding:10px; box-sizing: border-box; box-shadow: 0 0 5px #A4A4A4; }

		#filtro input, #filtro select 		{ display:block; border:none; height: 40px; width:100%; padding:0 10px; margin:0 0 5px 0; font-size: 14px; background:#EAEAEA; box-sizing: border-box; }
		#filtro input, #filtro select.caixa-alta { text-transform:uppercase; }

		#filtro input[type="submit"]	{ display:block; border:none; height: 40px; width:100%; padding:0 10px; margin-bottom:5px; font-size: 14px; background:#002836; color:#fff; cursor:pointer; box-sizing: border-box; }
		#filtro input[type="submit"]:hover	{ background:#000;  }

		#filtro.ativo 			{ display:block; }
		
		

		.clearCity 			{ width: 40px; height: 40px; background-color: #fff; color: #002836; font-weight: bold; font-size: 18px; line-height: 40px; /* mesma altura do botão */ border-radius: 6px; text-align: center; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor: pointer; transition: background-color 0.3s; }
		.clearCity:hover 		{ background-color: #ccc; }

		.autocomplete-suggestions 	{ border: none; max-height: 200px; overflow-y: auto; position: absolute; top:55px; right:0; background-color:#fff; width:80%; text-align:left; z-index: 1000; border-radius: 7px; box-shadow: 0 0 5px #A4A4A4; }
		  
		.suggestion-item 		{ padding:10px 20px; cursor: pointer; box-sizing: border-box;}

		.suggestion-item:hover 		{ background-color: #f0f0f0; }



/* Responsivo */
@media (max-width: 1600px) 			{

.secao-banner 					{ position: relative; max-width:1100px; height: 300px; margin: 20px auto; border-radius: 20px; background: linear-gradient(to right, #FEE797, #FF9E36); display: flex; z-index:100; box-sizing:border-box; }

.coluna-esquerda 				{
						width: 200px;
						height: 300px;
						background-image: url('images/slides/banner_modelo_animais_vmenor.png');
						}

.coluna-direita 				{
						width: 200px;
						height: 300px;
						background-image: url('images/slides/banner_modelo_cereais_vmenor.png');
						}

	.coluna-centro h2			{ font-size:28px; }

	.centro-menu 				{ padding: 25px 0;  }


}

@media (max-width: 1200px) 			{
	

.secao-banner 					{ height: auto; width: calc(100% - 20px); margin: 10px auto; background:#EAEAEA;}

.coluna-esquerda,
.coluna-direita 				{ display:none; }

.coluna-centro 					{ width: 100%; padding:20px; }

	.centro-menu				{ width:100%; }

	.coluna-centro h2			{ width:100%; font-size:28px; }

	.barra_busca_destino_novo 		{ width:100%; height:auto; padding:0; }

}


@media (max-width: 800px) 			{
	
.coluna-centro 					{ width: 100%; padding:10px; }
	
	.coluna-centro h2			{ font-size:20px; text-align:left; font-weight:700; }


	
	.centro-menu 				{ padding:10px 0; width:100%; display: grid; gap:0px; justify-items: center;
						grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /*significa: gere colunas responsivas de no mínimo 150 px e no máximo uma fração igual do container, criando tantas quantas couberem, e vá encaixando os itens automaticamente em novas linhas conforme necessário.*/ }
	
	.centro-menu li 			{ width: 100%; padding:10px 0; }
	
	.centro-menu span 			{ font-size: 12px; }

	.barra_busca_destino_novo 		{ padding: 0px 0px; flex-direction: column; }
	
	.busca-produto 				{ width: 100%; }

	.busca-destino 				{ width: 100%; }

		#filtro 			{ width: 100%; top:70px; z-index:110;}

		.autocomplete-suggestions 	{ width: 100%; top:55px; }

}


/* ...................... 1.3. Favoritar Lista ............................................................................................................................................. */

.secao-destino 					{ position: relative; width: calc(100% - 20px); height: auto;  margin:10px auto; border-radius: 20px; background:#EAEAEA; display: flex; z-index:100; box-sizing:border-box;}

.secao-destino-centro 				{ flex: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; padding:0; }

.secao-destino-centro-novo			{ width:100%; height: 80px; position: relative; font-size: 14px; display: flex; justify-content: center; align-items: center; padding:0; box-sizing: border-box; }


	
/* ...................... tarja ................................................................................................................................................. */

.tarja.min 					{ width: 0; padding-left: 0; overflow: hidden; }
.tarja.min .navbar > li a 			{ display: none; }

.tarja 						{ width: 250px; height: calc(100% - 80px); /* -100px é para subtrair o top. */ left: 0; top: 80px; position: fixed; z-index: 300; background: #fff; color: #002533; box-shadow: 3px 0 10px rgba(0, 0, 0, 0.2); transition: width 0.5s ease-in-out, padding-left 0.5s ease-in-out; /* Adicionados: */ overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; /* Firefox */ }

/* Scrollbar personalizado no Chrome */
.tarja::-webkit-scrollbar 			{ width: 6px; }
.tarja::-webkit-scrollbar-thumb 		{ background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; }


.navbar 					{ list-style: none; margin: 0; padding: 0; }
.navbar > li 					{ margin: 0; height: 50px; position: relative; }
.navbar > li a 					{ overflow: hidden; display: flex; align-items: center; height: 50px; line-height: 50px; font-size: 15px; font-weight: 300; color: #002533; text-decoration: none; transition: all 0.5s ease-in-out; }

.navbar > li span 				{ line-height: 110%; display: block; }
.navbar > li span.titulo 			{ font-weight:500; }

/* Hover e ativo padrão */
.navbar > li:hover,
.navbar > li.ativo 				{ background-color: #FFB565; }

/* Hover e ativo por categoria */
.navbar > li:hover.energetico,
.navbar > li.ativo.energetico 			{ background-color: #FEE797; }

.navbar > li:hover.proteicos,
.navbar > li.ativo.proteicos 			{ background-color: #FEA897; }

.navbar > li:hover.volumosos,
.navbar > li.ativo.volumosos 			{ background-color: #A6FF83; }

.navbar > li:hover.minerais,
.navbar > li.ativo.minerais 			{ background-color: #C1ECFF; }

.navbar > li:hover.aditivos,
.navbar > li.ativo.aditivos 			{ background-color: #83A6FF; }

.navbar > li:hover.categorias,
.navbar > li.ativo.categorias 			{ background-color: #C8C8C8; }

.navbar > li.linha 				{ height: 1px; background-color: rgba(164, 164, 164, 0.3); margin:15px 0; }


.icon-destaque,
.icon-energetico,
.icon-proteico,
.icon-volumosos,
.icon-minerais,
.icon-aditivos,
.icon-categorias,
.icon-comprador,
.icon-vendedor,
.icon-configuracoes,
.icon-sobrenos,
.icon-configuracao 				{ width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; margin-left: 15px; margin-right: 15px; }

/* Ícones que estão dentro do Tópico Principal Comprador ou Vendedor apenas possuem uma margem-left com 5px a mais, só isso muda neles. */
.icon-favoritos,
.icon-meusenderecos,
.icon-dashboard,
.icon-produtos,
.icon-pontos,
.icon-credito					{ width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; margin-left: 20px; margin-right: 15px; }


/* Ícones com imagens */
.icon-destaque 					{ background-image: url(images/menu/Estrela.svg); background-size: 20px 20px; }
.icon-energetico 				{ background-image: url(images/menu/Energetico.svg); background-size: 15.22px 25px; }
.icon-proteico 					{ background-image: url(images/menu/Proteico.svg); background-size: 18.08px 22px; }
.icon-volumosos 				{ background-image: url(images/menu/Volumosos.svg); background-size: 11.37px 25px; }
.icon-minerais 					{ background-image: url(images/menu/Minerais.svg); background-size: 20px 20px; }
.icon-aditivos 					{ background-image: url(images/menu/Aditivos.svg); background-size: 18.66px 20px; }
.icon-categorias 				{ background-image: url(images/menu/Categorias.svg); background-size: 20px 20px; }
.icon-comprador 				{ background-image: url(images/menu/icon_area_comprador.svg); background-size: 20px 20px; }
.icon-favoritos 				{ background-image: url(images/menu/icon_favoritos.svg); background-size: 20px 20px; }
.icon-credito 					{ background-image: url(images/menu/icon_credito.svg); background-size: 20px 20px; }
.icon-meusenderecos 				{ background-image: url(images/menu/icon_meusenderecos.svg); background-size: 20px 20px; }
.icon-vendedor 					{ background-image: url(images/menu/icon_area_vendedor.svg); background-size: 20px 20px; }
.icon-dashboard 				{ background-image: url(images/menu/icon_painel_leads.svg); background-size: 20px 20px; }
.icon-produtos 					{ background-image: url(images/menu/icon_seus_produtos.svg); background-size: 20px 20px; }
.icon-pontos 					{ background-image: url(images/menu/icon_pontos_distribuicao.svg); background-size: 20px 20px; }
.icon-sobrenos 					{ background-image: url(images/menu/icon_sobre_nos.svg); background-size: 20px 20px; }
.icon-configuracao				{ background-image: url(images/menu/icon_configuracoes_novo.svg); background-size: 20px 20px; }



/* ...................... conteudo ................................................................................................................................................. */

.conteudo 					{ margin:80px auto 0 auto ; max-width:1400px; padding:40px 40px 40px 40px; /* padding:40px 220px 40px 220px; */ position:relative; transition: margin-left 0.5s ease-in-out; z-index:120; }
.conteudo.principal				{ margin-top:0;}

.conteudo h1					{ padding:0; margin:0 0 30px 0; font-size:30px; color:#002533; line-height:120%; font-weight:700; text-align:left; position:relative;}
.conteudo h1.nomeproduto			{ padding:0; margin:0; font-size:30px; color:#FF9E36; line-height:120%; font-weight:700; text-align:left;}
.conteudo .nomeproduto_subtitulo		{ position:relative; font-size:15px; color:#002533; margin:0; padding:0; }

.conteudo h1.editor				{ margin:0; }
.conteudo .descricao_titulo			{ font-size:18px; color:#002533; margin:0 0 30px 0; line-height:120%; text-align:left; }

.conteudo h2					{ padding:0; margin:0 0 10px 0; font-size:24px; color:#002533; line-height:120%; font-weight:700; text-align:left; }
.conteudo h2.nome				{ margin:20px 0 20px 0; font-size:24px; color:#FF9E36;  }
.conteudo h2.nome.whats_regiao			{ margin:20px 0 0 0; font-size:24px; color:#FF9E36; }
.conteudo h2.whats_regiao			{ padding:0; margin:0 0 20px 0; font-size:18px; color:#FF9E36;  }

.conteudo h2.tituloproduto			{ text-align:center; }
.conteudo h2.tituloperfilnutricional		{ font-size:18px; font-weight:400; }

.conteudo h3					{ padding:0; margin:0 0 10px 0; font-size:20px; color:#002533; line-height:120%; font-weight:700; text-align:left; }

.conteudo h4					{ padding:0; margin:30px 0 10px 0; font-size:16px; color:#002533; line-height:120%; font-weight:700; text-align:left; }

/* Responsivo */
@media (max-width: 1600px) 			{

.conteudo 					{ max-width:1100px; }

}

@media only screen and (max-width : 1200px) {

.conteudo 					{ padding:15px 10px 40px 10px;  }
.conteudo.principal				{ margin-top:0;}

.conteudo h1					{ font-size:24px;  }

.conteudo h2					{ font-size:20px; }

.conteudo h3					{ font-size:18px; }

}

/* ...................... termos de uso texto simples apenas. ................................................................................................................................................. */


.termos_de_uso 					{  }

.termos_de_uso h1				{ font-size:16px; font-weight:700; margin:20px 0 10px 0; padding:0; }

.termos_de_uso p				{ padding:0 0 10px 0; margin:0; line-height:160%; font-size:14px; }

.termos_de_uso ul 				{ margin:0; }

.termos_de_uso ul li				{ padding-bottom:10px; }

/* ...................... cadastro - Login e Lembrar Senha e Cadastro ................................................................................................................................................. */

.cadastro_total 				{ 
						width: 60%; height: 60%; position: absolute;
						top: calc(50% + 50px); /* Ajusta para considerar o cabeçalho de 100px */
						left: calc(50% + 0px);
						transform: translate(-50%, -50%);
						display: flex; justify-content: center; align-items: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 21px; z-index:100;
						background-color:#fff;
						}


  .cadastro_total a				{ color:#FF9E35; text-decoration:none; }
  
  .cadastro_total a:hover			{ color:#002533; }


.cadastro_anuncio 				{ width:50%; height:100%; display: flex; justify-content: center; align-items: center; -webkit-border-top-left-radius: 21px; -webkit-border-bottom-left-radius: 21px; -moz-border-radius-topleft: 21px; -moz-border-radius-bottomleft: 21px; border-top-left-radius: 21px; border-bottom-left-radius: 21px;  overflow: hidden; /* Garante que a imagem não exceda os limites da div */ }

.cadastro_anuncio img 				{ width: 100%; height: 100%; object-fit: cover; /* Mantém a proporção da imagem e cobre todo o espaço disponível */ object-position: center; }

.cadastro_campos 				{ width:50%; height:100%; display:flex; justify-content: center; align-items: center; flex-direction: column; padding: 20px; box-sizing: border-box; -webkit-border-top-right-radius: 21px; -webkit-border-bottom-right-radius: 21px; -moz-border-radius-topright: 21px; -moz-border-radius-bottomright: 21px; border-top-right-radius: 21px; border-bottom-right-radius: 21px;  z-index:110; }

/* Adicionado para criar uma rolagem em textos grandes no espaço pequeno. */
.cadastro_campos .rolagem			{ width: 100%; max-height: 100%; overflow-y: auto; padding-right: 10px; box-sizing: border-box; }

  .cadastro-form-container 			{ /* usado no login e esqueci a senha */ position: relative; width: 100%; overflow: hidden; /* Esconde os elementos fora da área visível */ }
  
  .cadastro-form 				{ /* usado no login e esqueci a senha */ display: flex; width: 200%; /* 100% para cada formulário */ transition: transform 0.5s ease; /* Suaviza a transição */ }

  #logar, #lembrar 				{ /* usado no login e esqueci a senha */ width: 50%; /* Cada formulário ocupa metade da largura do contêiner */ }

  #logar.active, #lembrar.active 		{ /* usado no login e esqueci a senha */ display: block; }

    .cadastro_campos h2				{ padding:0; margin:0 0 10px 0; font-size:24px; color:#002533; line-height:120%; font-weight:700; text-align:center; }

    .cadastro_campos .descricao			{ margin-bottom:14px; font-weight:400; line-height:140%; }

    .cadastro_campos .observacao		{ font-size:12px; line-height:120%; margin-bottom:20px; }
    
    .cadastro_campos .observacao span		{ font-weight:700; color:#FF9E35; }
  
    .cadastro_campos input[type="text"], 
    .cadastro_campos input[type="email"], 
    .cadastro_campos input[type="password"], 
    .cadastro_campos input[type="tel"]		{ display:block; width:100%; padding: 8px; margin-bottom:15px; border: 1px solid #bbb; background-color:#F2F2F2; border-radius: 4px; box-sizing: border-box; }
  
    .cadastro_campos .cadastro-tipo-usuario 	{ display: flex; justify-content: center; gap: 20px; margin-bottom: 15px; }
    .cadastro_campos .cadastro-tipo-usuario label { display: flex; align-items: center; height:18px; padding:0; margin:0; }
    .cadastro_campos .cadastro-tipo-usuario input[type="radio"] { width: 18px; height: 18px; border: none; }

    
  
    .semcadastro				{ text-align:center; font-size:14px; color:#002533; font-weight:700; margin:20px 0 20px 0; }
  
    .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; box-sizing:border-box;}
    
    .msg.aviso					{ font-weight:300; margin:0; padding:0 0 10px 0; }
    
    .msg.confirma				{ background:#fff; border:1px dashed #FF9E35; color:#002533; }
    
    .msg.erro					{ background:#fff; border:1px dashed #D90000; color:#D90000; }
    
    .msg.obrigatorio				{ background:#fff; border:1px dashed #fff; font-weight:300;}


@media only screen and (max-width : 900px) 	{

.cadastro_total 				{
						position: relative; 
						height:auto;
						width:100%;
						top: 80px; /* Remove a posição top */
						left:0; /* Remove a posição left */
						transform: none; /* Remove a transformação */
						box-shadow: none; /* Remove a sombra */
						border-radius: 0; /* Remove o border-radius */
						background-color: #fff; /* Mantém o fundo branco */
						flex-direction: column; /* Configura o layout para coluna */
						justify-content: flex-start; /* Alinha o conteúdo ao início */
						box-sizing:border-box;
						}

  .cadastro_anuncio 				{ width:100%; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; }

  .cadastro_anuncio img 			{ object-fit: contain; }


  .cadastro_campos 				{ width:100%; display:flex; padding: 20px; box-sizing: border-box; z-index:110; }
  
    .cadastro_campos .descricao			{ line-height:120%; }

}

/* ...................... quem somos ............................................................................................................................................... */


/* ...................... contato. ............................................................................................................................................... */


.contato_texto							{ width:100%; padding:0; box-sizing:border-box; line-height:120%;}

.contato_texto a 						{ text-decoration:none; color:#FF9E36; font-weight:700; border:none;}
.contato_texto a:hover						{ color:#002533; }

.contato_texto h3 						{ font-size:16px; margin:0; padding:0; text-transform:uppercase; font-weight:700; }
.contato_texto span						{ font-size:14px; font-weight:300; display:block; margin:0 0 20px 0; }

.contato_texto span a 						{ text-decoration:none; color:#FF9E36; font-weight:700; border:none;}
.contato_texto span a:hover					{ color:#002533; }

.contato_texto span a.comochegar				{ display:block; text-transform:uppercase; font-size:14px; color:#FF9E36; font-weight:700; }
.contato_texto span a.comochegar:hover				{ color:#002533; }


/* ...................... cadastro - formatacao do telefone/celular e campos intl-tel-input onde atualizo algumas classes padrão vindas dele para se adaptar ao site. ............................................................................................................................................... */

.iti 								{ position: relative; display: inline-block; width:100% !important; margin-bottom:20px !important; }

  .iti__country-list 						{
								position: absolute;
								z-index: 2;
								list-style: none;
								text-align: left;
								padding: 0;
								margin: 0 0 0 -1px;
								box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
								background-color: white;
								border: none!important;
								white-space: nowrap;
								max-height: 200px;
								overflow-y: scroll;
								-webkit-overflow-scrolling: touch; 
								}
    
    .iti__country-list--dropup 					{ bottom: 100%; margin-bottom: -1px; background:#fff!important; }
    
  .iti__country 						{
								display:flex!important;
								align-items:center!important;
								padding:0!important;
								margin:0!important;
								width:100%!important;
								outline: none!important;
								}
    
  .iti__dial-code 						{ color: #999; }
    
  .iti__flag-box, .iti__country-name, .iti__dial-code 		{ padding:0!important; margin:0!important; vertical-align: baseline!important;  }
    
  .iti__flag-box, .iti__country-name				{ margin-right: 6px; padding:0!important; margin:0 5px 0 5px!important; }
    

/* ...................... cadastro acesso restrito do usuario adição e edição - tooltip ................................................................................................................................................. */


.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  z-index: 2; /* garante que fique acima de menus, etc */
}

.tooltip .duvida {
  width: 15px;
  height: 15px;
  background-color: #FF9E36;
  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;
  background-color: #555;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  line-height: 140%;
  border-radius: 5px;
  padding: 8px;
  position: absolute;
  z-index: 9999; /* sobrepõe tudo */
  bottom: calc(100% + 8px); /* sempre acima */
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  max-width: 80vw;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: normal;
}

.tooltip .tooltiptext.left {
  text-align: left;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Responsivo */
@media (max-width: 700px) {
	
  .tooltip .tooltiptext {
    position: fixed;
    top: 100px; /* garante que apareça abaixo do cabeçalho */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 90%;
    bottom: auto;
    z-index: 9999;
    text-align: left;
    font-size: 13px;
    line-height: 150%;
    padding: 10px;
    box-sizing: border-box;
  }
}



/* ...................... tela do produto - tooltip ................................................................................................................................................. */


.tooltip_produto 					{ position: relative; display: inline-block; cursor: pointer; }

.tooltip_produto .informacao   				{ width: 15px; height: 15px; border:1px solid #AEAEAE; background-color:#fff; color: #AEAEAE; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight:500; cursor: pointer; box-sizing: border-box;}

.tooltip_produto .informacao::after 			{ content: "!"; }


/* ...................... tela do produto/lista - tooltip - seria o título das listas ................................................................................................................................................. */


.tooltip_produto .informacao.lista  			{ background-color: transparent; border:1px solid #002533; color: #002533;}
.tooltip_produto .informacao.lista::after 		{ content: "!"; }


.tooltip_produto .tooltiptext 				{ visibility: hidden; width:250px; background-color: #555; color: #fff; text-align:left; font-size:11px; font-weight:300; line-height:140%; border-radius: 5px; padding: 5px; position: absolute; z-index: 1; bottom: 100%; /* Posiciona o tooltip acima do link */ left: 50%; margin-left: -80px; opacity: 0; transition: opacity 0.3s; box-sizing: border-box;}

.tooltip_produto:hover .tooltiptext 			{ visibility: visible; opacity: 1; }


@media (max-width: 700px) {

.tooltip_produto 					{ position: static; }

.tooltip_produto .tooltiptext 				{
							width: 90%; /* Torna o tooltip responsivo à largura da tela */
							left: 5%; /* Centraliza o tooltip horizontalmente */
							margin-left: 0; /* Remove o ajuste de margem negativa */
							}

.tooltip_produto .tooltiptext				{ text-align:left; width:100%; left:0; margin-left:0; }

}


/* ...................... Area do Vendedor (Produtos) ................................................................................................................................................. */

.produto-campos-avancados 				{ display:none; }
.produto-campos-avancados.aberto 			{ display:block; }


.produto_total 						{ width:100%; display:flex; align-items: flex-start;  }

.produto_principal 					{ flex: 0 0 70%; padding-right:20px; box-sizing: border-box;}

  .produto_principal input[type="text"] 		{ width:100%; border:1px solid #e8e8e8;  background-color:#fff; padding:10px; margin-bottom:30px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; box-sizing:border-box;}

  .produto_principal textarea 				{ width:100%; border:1px solid #e8e8e8;  background-color:#fff; padding:10px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; box-sizing:border-box;}
  .produto_principal .quill-editor 			{ width:100%; border:1px solid #e8e8e8;  background-color:#fff; padding:10px 0; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; box-sizing:border-box;}

  .produto_principal .info				{ font-style:italic; font-weight:300; line-height:14px; padding:5px 0 5px 0; }

  .produto_principal .espaco				{ margin-bottom:30px; /*criado só para dar espaço de um campo para outro */ }


  .produto_principal #files_pdf				{ margin:0; padding:0; }
  .produto_principal #files_pdf input[type="text"] 	{ width:100%; border:1px solid #e8e8e8;  background-color:#fff; padding:10px; margin-bottom:5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; box-sizing:border-box;}
  .produto_principal #files_pdf input[type="file"]	{ margin-bottom:30px; padding:0; }



.produto_lateral 					{ flex: 0 0 30%; padding-left:20px; box-sizing: border-box; }


.pro_bloco						{ width:100%; background-color:#fff; padding:10px; margin-bottom:30px; font-size:14px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; box-sizing:border-box; }

.pro_bloco .campo 					{ width:100%; display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }

.pro_bloco .campo.hidden				{ display: none; }

.pro_bloco .campo label 				{ text-align: left; margin-right: 10px; }
.pro_bloco .campo label input[type="text"]		{ width:90%; text-align: left; margin-right: 10px; }
  
.pro_bloco .campo input[type="text"],
.pro_bloco .campo input[type="number"]			{ background-color:#E8E8E8; border:none;  }
.pro_bloco .campo select 				{ width: 100%; max-width: 200px; /* deixa esticar no mobile */ background-color: #E8E8E8; border: none; white-space: nowrap;      /* não quebra linha */ overflow: hidden;         /* esconde o extra */ text-overflow: ellipsis;  /* adiciona "..." no fim */ }

.pro_bloco .campo input.readonly 			{ background-color: #f5f5f5; color: #999; border: none; cursor: not-allowed; }

.pro_bloco .video-preview 				{ width: 100%; height: 0; border: none; display: block; transition: height 0.3s ease; }
.pro_bloco .video-preview.ativo				{ height: 200px; }


.pro_bloco .campo .situacao_aviso			{ text-align:center; color:#fff; line-height:120%; width:100%; padding:10px; background-color:#E67817; box-sizing: border-box; }
  
.pro_bloco .campo * 					{ text-align: right; }
  
.pro_bloco .campo p					{ line-height:120%; }
.pro_bloco .campo a 					{ color:#FF9E36; font-weight:700; }
.pro_bloco .campo a:hover 				{ color:#002533;}


.pro_bloco .caixadep					{ max-height:300px; overflow:auto; overflow-y:auto; white-space:nowrap; }

.pro_bloco .caixadep span				{ display:block; margin:5px 0 5px 0; }


/* CSS para formatar as imagens assim que o usuário escolher a categoria mostrar as miniaturas de imagens. */
.grid-imagens						{ display:flex; gap:12px; flex-wrap:wrap; }
.img-opcao						{ position:relative; cursor:pointer; border:1px solid transparent; border-radius:10px; overflow:hidden; width:100px; height:100px; display:flex; align-items:center; justify-content:center }
.img-opcao img						{ width:100%; height:100%; object-fit:cover; object-position:center; display:block }
.img-opcao.selecionada					{ border-color:#002533;}
.img-opcao .badge					{ position:absolute; bottom:6px; right:6px; width:20px; height:20px; background:#fff; color:#002533; font-size:10px; font-weight:700; border-radius:50%; display:flex; align-items:center; justify-content:center; line-height:1; }


/* Situação do Produto Seus statatus até chegar no Aprovado */

.situacao_nao_submetido					{  }
.situacao_em_analise					{ color:#E67817; }
.situacao_aprovado					{ color:green; }
.situacao_reprovado					{ color:#D90000; }
.situacao_data						{ font-size:12px; font-weight:300; display:block;}




@media only screen and (max-width : 900px) 		{


.produto_total 						{ flex-direction: column; }

.produto_lateral 					{ order: 1; flex: 0 0 100%; width:100%; padding-left: 0;  }

.produto_principal 					{ order: 2; flex: 0 0 100%; width:100%; padding-right: 0; }

.pro_bloco .campo 					{ flex-direction: column; text-align: left; }

.pro_bloco .campo * 					{ text-align: left; margin-top: 5px; }

.pro_bloco .campo label 				{ width:100%; text-align: center; margin-right:0; }
.pro_bloco .campo label input[type="text"]		{ width:100%; margin-right:0; }
  
.pro_bloco .campo input[type="text"],
.pro_bloco .campo select 				{ height:40px; width:100%; max-width: 100%; padding-right:0; }


}



/* ...................... Area do Vendedor (Produtos) Editar - Lista de imagens  ................................................................................................................................................. */


.fotos_listagem						{ display:flex; align-items: center; justify-content: center; flex-wrap: wrap; }

.mini_conjunto 						{ width:100px; text-align: center; margin-right:10px; padding:10px; border-radius: 6px; background:#fff; border:1px solid #ddd; box-sizing:border-box; }
.mini_conjunto.principal				{ border-color:#002533; }

.mini_foto 						{ height:80px; width:80px; display: flex; align-items: center; justify-content: center; overflow: hidden;  }

.mini_foto img 						{ max-width:100%; max-height:100%; }

.mini_opcoes 						{ display: flex; flex-direction: column; margin-top: 5px;  }

.mini_b 						{ width:100%; font-size:12px; line-height:20px; height:20px; margin-bottom:5px; border-radius: 6px; background-color: #ccc; border:1px solid #ddd;  }

.mini_b.excluir 					{ text-decoration:none; background-color:#D90000; color:#fff;}
.mini_b.excluir:hover 					{ opacity:0.8; color:#fff;}

.mini_b.ini						{ text-decoration:none; background-color:#002533; color:#fff;}
.mini_b.ini:hover					{ opacity:0.8; color:#fff;}


/* ...................... Area do Vendedor (Produtos) OpenAI - Gerador de textos com IA - Adicionado em 06/08/2026  ................................................................................................................................................. */

.pecplace-ia 						{ margin:15px 0 25px; }

.pecplace-ia-acoes 					{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.pecplace-ia button 					{ cursor:pointer; }

.btn-gerar-ia 						{ padding:10px 16px; border:0; border-radius:6px; background:#002533; color:#fff; font-weight:700; }
.btn-gerar-ia:disabled 					{ cursor:wait; opacity:.65; }

.pecplace-ia-status 					{ font-size:13px; color:#555; }

.pecplace-ia-resultado 					{ display:none; margin-top:15px; padding:16px; border-radius:6px; background:#fff; }
.pecplace-ia-resultado strong 				{ font-weight:700; color: #002533; }
				
.pecplace-ia-resultado.aberto 				{ display:block; }

.pecplace-ia-campo 					{ margin:14px 0; padding:12px; border:1px solid #e8e8e8;; background:#fff; }
.pecplace-ia-campo label 				{ display:block; margin-bottom:8px; font-weight:700; color:#002533; }

.pecplace-ia-preview 					{ max-height:190px; overflow:auto; font-size:14px; line-height:1.5; white-space:pre-wrap;  }

.pecplace-ia-botoes 					{ display:flex; gap:10px; flex-wrap:wrap; margin-top:15px; }

.pecplace-ia-aplicar 					{ padding:9px 14px; border:0; border-radius:4px; background:#002533; color:#fff; }

.pecplace-ia-descartar 					{ padding:9px 14px; border:1px solid #e8e8e8; border-radius:4px; background:#fff; color:#333; }

.pecplace-ia-ajuda 					{ margin-top: 10px; padding: 10px 12px; background: #fff; border-left: 6px solid #FF9E36; font-size: 13px; line-height: 1.5; border-radius:6px; }
.pecplace-ia-ajuda strong 				{ display: block; margin-bottom: 3px; font-weight:700; color: #002533; }

/* ...................... Area do Vendedor (Produtos) OpenAI - Gerador de imagem com IA - Adicionado em 19/08/2026  ................................................................................................................................................. */


.pecplace-ia-imagem 					{ width:100%; background-color:#fff; margin-bottom:30px; padding:10px; font-size:14px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; box-sizing:border-box; }

.pecplace-ia-imagem-titulo 				{ display:flex; align-items:center; justify-content:space-between; font-weight:700; color:#002533; cursor:pointer; padding:5px 2px; }
.pecplace-ia-imagem-seta 				{ width:8px; height:8px; border-right:2px solid #002533; border-bottom:2px solid #002533; transform:rotate(45deg); transition:transform .2s ease; margin-right:5px; }
.pecplace-ia-imagem-conteudo 				{ display:none; }
.pecplace-ia-imagem.aberto .pecplace-ia-imagem-conteudo { display:block; }
.pecplace-ia-imagem.aberto .pecplace-ia-imagem-seta 	{ transform:rotate(225deg); }

.pecplace-ia-imagem-ajuda 				{ margin-top: 10px; padding: 10px 12px; background: #fff; border-left: 6px solid #FF9E36; font-size: 13px; line-height: 1.5; border-radius:6px; }
.pecplace-ia-imagem-ajuda strong 			{ display: block; margin-bottom: 3px; font-weight:700; color: #002533; }
					
.pecplace-ia-imagem textarea 				{ background-color:#E8E8E8; border:none; margin-top:10px; padding:5px; width:100%; min-height:105px; box-sizing:border-box; resize:vertical; }

.pecplace-ia-imagem-acoes				{ display:flex; justify-content:center; margin-top:10px; }

.pecplace-ia-imagem-preview 				{ display:none; margin-top:14px; text-align:center; }
.pecplace-ia-imagem-preview img 			{ display:block; max-width:360px; width:100%; height:auto; border:1px solid #e8e8e8; margin:0 auto 12px auto; }

.pecplace-ia-imagem-status 				{ display:block; margin-top:10px; font-size:13px; color:#555; text-align:center; }

.pecplace-ia-imagem button 				{ cursor: pointer; }
.pecplace-ia-imagem button:disabled 			{ cursor: not-allowed; }
									
									
/* ...................... 1.1 filtro ................................................................................................................................................. */

.filtro						{ display: flex; background-color:#fff; padding:10px; margin:20px 0 20px 0; border-radius: 6px; box-sizing:border-box; cursor:pointer;}	

  .filtro .bloco_pesquisa 			{ display: flex; }

    .bloco_pesquisa input[type=text],
    .bloco_pesquisa select    			{ height:40px; background:#fff; border:1px solid #ddd; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; box-sizing:border-box; }

    .flex-container 				{ display: flex; gap: 10px; /* Espaço entre os elementos */ align-items: center; }



/* ...................... 1.1 itens tabela - icones do títulos das categorias usados o svg dos menus. ................................................................................................................................................. */

.titulo_energetico::before 			{ content: ''; display: inline-block; width: 21.03px; height: 35px; background-image: url(images/menu/Energetico.svg); background-size: 21.03px 35px; margin-right: 15px; /* Espaço entre o ícone e o texto */ vertical-align: middle; /* Alinha o ícone verticalmente com o texto */ position: relative; top: -2px; /* Ajusta a posição vertical, se necessário */ }
.titulo_proteicos::before 			{ content: ''; display: inline-block; width: 26.03px; height: 32px; background-image: url(images/menu/Proteico.svg); background-size: 26.03px 32px; margin-right: 15px; /* Espaço entre o ícone e o texto */ vertical-align: middle; /* Alinha o ícone verticalmente com o texto */ position: relative; top: -2px; /* Ajusta a posição vertical, se necessário */ }
.titulo_volumosos::before 			{ content: ''; display: inline-block; width: 15.91px; height: 35px; background-image: url(images/menu/Volumosos.svg); background-size: 15.91px 35px; margin-right: 15px; /* Espaço entre o ícone e o texto */ vertical-align: middle; /* Alinha o ícone verticalmente com o texto */ position: relative; top: -2px; /* Ajusta a posição vertical, se necessário */ }
.titulo_minerais::before 			{ content: ''; display: inline-block; width: 40px; height: 40px; background-image: url(images/menu/Minerais.svg); background-size: 40px 40px; margin-right: 15px; /* Espaço entre o ícone e o texto */ vertical-align: middle; /* Alinha o ícone verticalmente com o texto */ position: relative; top: -2px; /* Ajusta a posição vertical, se necessário */ }
.titulo_aditivos::before 			{ content: ''; display: inline-block; width: 40px; height: 40px; background-image: url(images/menu/Aditivos.svg); background-size: 40px 40px; margin-right: 15px; /* Espaço entre o ícone e o texto */ vertical-align: middle; /* Alinha o ícone verticalmente com o texto */ position: relative; top: -2px; /* Ajusta a posição vertical, se necessário */ }
.titulo_todascategorias::before 		{ content: ''; display: inline-block; width: 40px; height: 40px; background-image: url(images/menu/Categorias.svg); background-size: 40px 40px; margin-right: 15px; /* Espaço entre o ícone e o texto */ vertical-align: middle; /* Alinha o ícone verticalmente com o texto */ position: relative; top: -2px; /* Ajusta a posição vertical, se necessário */ }

/* ...................... 1.2 itens tabela ................................................................................................................................................. */

.botaoadm 					{ display:inline-block; height:40px; line-height:40px; font-size:16px; padding:0 20px 0 20px; color:#fff; text-align:center; background:#002533; text-decoration:none; border:none; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; cursor:pointer; box-sizing: border-box; }
.botaoadm:hover					{ background:#FF9E36; color:#fff; text-decoration:none; }

.botaoponto 					{ display:inline-block; height:40px; line-height:40px; font-size:16px; padding:0 20px 0 20px; color:#fff; text-align:center; background:#002533; text-decoration:none; border:none; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; cursor:pointer; box-sizing: border-box; }
.botaoponto:hover				{ background:#FF9E36; color:#fff; text-decoration:none; }

.botaoexcluirprod 				{ display:block; height:40px; line-height:40px; font-size:16px; padding:0 20px 0 20px; color:#fff; text-align:center; background:#D90000; text-decoration:none; border:none; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; cursor:pointer; box-sizing: border-box; }
.botaoexcluirprod:hover				{ background:#D90000; color:#fff; text-decoration:none; }

.botaoaprovarprod 				{ display:block; height:40px; line-height:40px; font-size:16px; padding:0 20px 0 20px; color:#fff; text-align:center; background:#008200; text-decoration:none; border:none; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; cursor:pointer; box-sizing: border-box; }
.botaoaprovarprod:hover				{ background:#006200; color:#fff; text-decoration:none; }

.listagem 					{ list-style: none; padding:0; width:100%; }

  .listagem a					{ text-decoration:none; }

    .item-cabecalho 				{ display: flex; margin-bottom: 2px; width:100%; padding:0; box-sizing:border-box;  } 

    .item-cabecalho-back 			{ width: 100px; height: auto; }

    .item-cabecalho-conteudo			{ display:flex; width:100%; padding:10px 0 10px 0; background-color:#FFB565; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; box-sizing:border-box; transition: box-shadow 0.3s ease-in-out; }
    .item-cabecalho-conteudo.energetico 	{ /* background-image: url(images/listacat/energetico_img.png); */ background-color:#FEE797;}
    .item-cabecalho-conteudo.proteicos 		{ /* background-image: url(images/listacat/proteico_img.png); */ background-color:#FEA897;}
    .item-cabecalho-conteudo.volumosos 		{ /* background-image: url(images/listacat/volumosos_img.png); */ background-color:#A6FF83;}
    .item-cabecalho-conteudo.minerais 		{ /* background-image: url(images/listacat/minerais_img.png); */ background-color:#C1ECFF;}
    .item-cabecalho-conteudo.aditivos 		{ /* background-image: url(images/listacat/aditivos_img.png); */ background-color:#83A6FF;}
    .item-cabecalho-conteudo.todascategorias	{ /* background-image: url(images/listacat/aditivos_img.png); */ background-color:#C8C8C8;}

        .item_cab_titulo 			{ flex: 1;  margin-left:1px; display: flex; align-items: center; justify-content: center; padding:5px; color:#002533; font-weight:700; line-height:120%; box-sizing: border-box; }
	/* Classe adicional para a coluna maior */
	.item_cab_titulo-grande 		{ flex: 2; margin-left:20px; /* A coluna grande ocupará o dobro do espaço */ }
      
        .item_cab_titulo.esquerda 		{ justify-content: flex-start; padding:5px; }

/* ...................... 1.2.1 itens tabela itens ................................................................................................................................................. */
/* Atualizado em 17/09/2024 Diminuindo metade de sua altura na versão desktop */

  .item 					{ display: flex; width:100%; margin:0 0 10px 0; padding:0; box-sizing:border-box; position:relative; }


    .item-back 					{ width:100px; height:60px; margin:0; padding:0; background-size:cover; background-position:left center; background-repeat: no-repeat; position:relative; box-sizing: border-box; }
    .item-back a 				{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; text-decoration: none; }  
       
    .item-back.energetico 			{ background-image: url(images/listacat/energetico_img.png); }
    .item-back.proteico 			{ background-image: url(images/listacat/proteico_img.png); }
    .item-back.volumosos 			{ background-image: url(images/listacat/volumosos_img2.png); }
    .item-back.minerais 			{ background-image: url(images/listacat/minerais_img2.png); }
    .item-back.aditivos 			{ background-image: url(images/listacat/aditivos_img.png); }
  
  
      .circulo					{ width: 50px; height: 50px; border-radius: 50%;  background-size:cover; background-position:center; background-repeat: no-repeat; position: absolute; top: 50%; right: -25px; transform: translateY(-50%); background-color:green; z-index: 110; pointer-events: auto; /* Permite que o círculo seja clicável */}
      .circulo.energetico 			{ background-color:#FEE797; background-image: url(images/listacat/energetico_icon.svg); background-size: 20.09px 33px; }
      .circulo.proteico 			{ background-color:#FEA897; background-image: url(images/listacat/proteico_icon.svg); background-size: 30px 30px;}
      .circulo.volumosos 			{ background-color:#A6FF83; background-image: url(images/listacat/volumosos_icon.svg); background-size: 14.38px 31.62px;}
      .circulo.minerais 			{ background-color:#C1ECFF; background-image: url(images/listacat/minerais_icon.svg); background-size: 30px 30px;}
      .circulo.aditivos 			{ background-color:#83A6FF; background-image: url(images/listacat/aditivos_icon.svg); background-size: 26.13px 28px;}
  
    .item-conteudo				{ display:flex; width:100%; height:60px; padding:0; background:#fff; box-sizing:border-box; transition: box-shadow 0.3s ease-in-out; position:relative; }
  
    .item-conteudo:hover 			{ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); }

	  .coluna 				{ position:relative; flex: 1;  margin-left:1px; display: flex; align-items: center; justify-content: left; padding:10px; line-height:120%;  box-sizing: border-box; z-index:130; }
	   /* Classe adicional para a coluna maior */
	  .coluna-grande 			{ flex: 2; /* A coluna grande ocupará o dobro do espaço */ }
	  
	  .coluna.itempro			{ position:relative; padding:0; margin-left:60px; /* criado uma veriacao para produto devido conter icone e fotos na primeira coluna para distingui de outras listagens sem isso como pontos. */ }
	  
	  .coluna.centro 			{ justify-content: center; }
	  
	  .coluna.centro a 			{ display:block; width:100%; z-index: 200; position: relative; text-align:center; }
	  
	  .coluna a:hover 			{ }
	  
	  .coluna img				{ width:100%; max-height:50px; object-fit: contain; height:auto; }

	  .coluna.status .publicado		{ color:green; }
	  .coluna.status .destaque		{ color:#1176B3; }
	  .coluna.status .oculto		{ color:#E67817; }


    .espaco 					{ padding-left:25px; /*usado para ganhar o espaço do icone circulo de 50px, porém que tem 25px para fora apenas. */ }

    .favorito 					{ flex: 0 0 10px; background-color: #f0f0f0; }

    .info 					{ flex: 1; font-size:14px; font-weight:700; }
    

  
    .col_titulo					{ color:#002533; font-size:16px; font-weight:700; text-align:center; }
    
    .col_titulo.proteico			{ background:#FF957F; color:#002533; }
    .col_titulo.energetico			{ background:#FFE27E; color:#002533; }
    .col_titulo.volumoso			{ background:#97C877; color:#002533; }
    .col_titulo.minerais			{ background:#B1E7FF; color:#002533; }
    .col_titulo.aditivos			{ background:#7185A4; color:#002533; }
    
  
  
    .col_cidade					{ text-align:center; font-size:12px; }
  
    .col_whats 					{ flex: 0 0 40px; }
  
    .col_whats .mais_whats			{ height:40px; width:40px; display:inline-block; background:url(images/icon_whatsapp_lista.svg) no-repeat center center; background-size: 40px 40px; }

    .col_mais 					{ display: flex; align-items: center; justify-content: left; background-color:#fff; line-height:120%; box-sizing: border-box; color:#fff; background-color:#002533; font-size:14px; border-radius:6px; margin:0; padding:0; box-sizing: border-box; }
  
    .col_mais span 				{ height:27px; width:33px; margin-right:10px; display:inline-block; background: url('images/icon_mais.png')no-repeat center center; }






@media (max-width: 1200px) 			{
	
.botaoadm, .botaoponto 				{ display:block; margin-left:0; }
	
.listagem 					{ list-style: none; padding:0; width:100%; }
	
  .item-cabecalho 				{ display:none; } 

  .item 					{ display: flex; flex-direction: column; margin:0 0 20px 0; }

    .item-back 					{ width:100%; height: 60px; margin:0 auto; display:flex; background-position: center center; justify-content: center; align-items: center; }
    .item-back a 				{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative; text-decoration: none; }
    
    .item-back.energetico 			{ background-image: url(images/listacat/energetico_mobile.jpg); }
    .item-back.proteico 			{ background-image: url(images/listacat/proteico_mobile.jpg); }
    .item-back.volumosos 			{ background-image: url(images/listacat/volumosos_mobile2.jpg); }
    .item-back.minerais 			{ background-image: url(images/listacat/minerais_mobile2.jpg); }
    .item-back.aditivos 			{ background-image: url(images/listacat/aditivos_mobile.jpg); }
    
      .circulo 					{ position: static; /* Remove o posicionamento absoluto */ transform: none; /* Remove a transformação */ width: 40px; /* Ajuste a largura e altura do círculo para se adequar melhor à versão mobile */ height: 40px; }


    .item-conteudo				{ display:flex; flex-direction: column; align-items: center; height:auto; }

	  .coluna:first-child			{ margin-left:0; }

    .col_titulo					{ margin:10px 0 10px 0; }


}


/* ...................... 0 itens tabela - Tela Principal e categorias dos produtos ................................................................................................................................................. */

/* oculta na versão desktop */
.lista-mobile 					{ display: none !important; }


.lista table 					{ border-collapse: separate; border-spacing: 0 0px; /* Espaçamento entre linhas */ width: 100%; }

.lista thead th 				{ background-color:#FFB565; color:#002533; font-weight: 700; line-height:120%; padding: 15px 5px; border: none; }
.lista thead th.sem-bg				{ background-color: transparent !important; /*usado para inserir o icone de compartilhamento */ }

.lista thead th.energetico 			{ background-color:#FEE797;}
.lista thead th.proteicos 			{ background-color:#FEA897;}
.lista thead th.volumosos 			{ background-color:#A6FF83;}
.lista thead th.minerais 			{ background-color:#C1ECFF;}
.lista thead th.aditivos 			{ background-color:#83A6FF;}
.lista thead th.todascategorias			{ background-color:#C8C8C8;}

.lista thead th:last-child 			{ border-top-right-radius: 6px; }

.lista thead th:first-child 			{ border-top-left-radius: 6px; }
.lista thead th:nth-child(2) 			{ border-top-left-radius: 6px;   /* Aplica arredondamento ao segundo th */ padding-left:25px; /*colocado o padding-left de 25px pois o icone fica ao lado se deixar sem a o texto fica debaixo. */ }

.lista tbody tr:not(:first-child) td 		{ border-top: 15px solid #EAEAEA; /* inserido border para separar os tr e deixar apenas o primeiro junto, padding e margin não dão certo. se desejar usar border-collapse: separate; border-spacing: 0 10px; no table da certo também, porém todos terão o mesmo espaçamento. */ }

.lista tbody td 				{ background-color:#fff; line-height:120%; height:60px; padding:0 5px; border: none; font-size:16px; font-weight:500; color:#002533; text-align:center; border-bottom: 1px solid #d5d5d5; }
.lista tbody td:nth-child(2) 			{ padding-left:30px; /*colocado o padding-left de 30px pois o icone fica ao lado se deixar sem a o texto fica debaixo. */}


.lista tbody td a 				{ text-decoration: none;}


.lista .font-menor				{ font-size:12px; }
.lista .font-negrito				{ font-weight:700; }
.lista .font-left				{ text-align:left; }
.lista .caixa-alta				{ text-transform: uppercase; }
.lista .tamanhoflexivel-200			{ min-width:200px; }
.lista .tamanhofixo-150				{ width:150px; }
.lista .tamanhofixo-200				{ width:200px; }
.lista .tamanhofixo-100				{ width:100px; }
.lista .tamanhofixo-50				{ width:50px; }

/* usado apenas para deixar as setas centralizadas no fob */
.lista .th-flex 				{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }


.lista .dadoscif				{ display:flex; justify-content: center; flex-direction: column; }
.lista .dadoscif .distancia			{ font-size:12px; font-weight:300; }
.lista .dadoscif .precocif			{ font-weight:700; }

.lista .botaolocal				{ display:inline-block; color:#002533; background-color:#EAEAEA; font-size:16px; font-weight:500; border-radius:6px; margin:0; padding:5px 10px 5px 10px; border:none; box-sizing: border-box; cursor:pointer;}
.lista .botaolocal:hover			{ background-color:#FF9E36; }

.lista .botaolocal .texto-desktop		{ display: block; }
.lista .botaolocal .texto-mobile 		{ display: none; /* Adicionado para termos um texto diferente para consulte no botão para consulte o valor cif, isso foi feito devido não existir títulos para versão mobile  */}

.lista .botaoconsultefornecedor			{ display:inline-block; color:#002533; background-color:#EAEAEA; font-size:16px; font-weight:500; border-radius:6px; margin:0; padding:5px 10px 5px 10px; border:none; box-sizing: border-box; cursor:pointer;}
.lista .botaoconsultefornecedor:hover		{ background-color:#FF9E36; }

.lista .botaoconsultefornecedor .texto-desktop	{ display: block; }
.lista .botaoconsultefornecedor .texto-mobile 	{ display: none; /* Adicionado para termos um texto diferente para consulte no botão para consulte o valor cif, isso foi feito devido não existir títulos para versão mobile  */}



.lista .ordenador {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 21px; /* espaço total da coluna */
  height: 24px; /* altura total, ajustável */
}

.lista .ordenador .classAsc,
.lista .ordenador .classDesc {
  display: block;
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  opacity: 0.7;
  transition: opacity 0.2s;
  cursor: pointer;
}

.lista .ordenador .classAsc {
  background-image: url(images/seta_asc.svg);
}

.lista .ordenador .classDesc {
  background-image: url(images/seta_desc.svg);
}

.lista .ordenador .classAsc:hover,
.lista .ordenador .classDesc:hover {
  opacity: 1;
}

.lista .ordenador .ativo {
  opacity: 1;
}


.lista a.mais_whats				{ display:block; margin-right:25px; height:40px; width:40px; background:url(images/icon_whatsapp_lista.svg) no-repeat center center; background-size: 40px 40px; }
.lista a.mais_compartilhar			{ display:block; height:18px; width:18px; background:url(images/icon_compartilhar.svg) no-repeat center center; background-size: 18px 18px; }

.lista .col-imagem 				{
						/*Usamos para tanto no thead e tbody para limpar a formatação no inicio, no thead limpamos e no tbody formatamos essa coluna para receber imagem de background e ícone*/
						width: 100px; /* ajuste conforme seu layout */
						position: relative; /* para posicionamento do conteúdo */
						background: #EAEAEA; /* ou outra cor/imagem de fundo */
						overflow: visible;   /* permite que a imagem extrapole o td */
						padding:0; margin:0;
						border-bottom: 1px solid #EAEAEA;
						}


.lista .imagem-container 			{ position: relative; width:100%; }

.lista .imagem-fundo 				{ position:relative; width: 100%; height: 120px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; }

/* Desativado em 26/08/2025 fazemos a chamada direto no item da lista, pois tem variação de imagem */
/*
.lista .imagem-fundo.energetico 		{ background: url(images/listacat/energetico_mobile.jpg) no-repeat center center; background-size: cover; }
.lista .imagem-fundo.proteico 			{ background: url(images/listacat/proteico_mobile.jpg) no-repeat center center;  background-size: cover; }
.lista .imagem-fundo.volumosos 			{ background: url(images/listacat/volumosos_mobile2.jpg) no-repeat center center; background-size: cover; }
.lista .imagem-fundo.minerais 			{ background: url(images/listacat/minerais_mobile2.jpg) no-repeat center center; background-size: cover; }
.lista .imagem-fundo.aditivos 			{ background: url(images/listacat/aditivos_mobile.jpg) no-repeat center center; background-size: cover; }
*/

.lista .imagem-circulo				{ width: 60px; height: 60px; border-radius: 25%;  background-size:cover; background-position:center; background-repeat: no-repeat; position: absolute; top: 50%; right: -30px; transform: translateY(-50%); z-index: 110; pointer-events: auto; /* Permite que o círculo seja clicável */}
.lista .imagem-circulo.energetico 		{ background-color:#FEE797; background-image: url(images/listacat/energetico_icon.svg); background-size: 20.09px 33px; }
.lista .imagem-circulo.proteico 		{ background-color:#FEA897; background-image: url(images/listacat/proteico_icon.svg); background-size: 30px 30px;}
.lista .imagem-circulo.volumosos 		{ background-color:#A6FF83; background-image: url(images/listacat/volumosos_icon.svg); background-size: 14.38px 31.62px;}
.lista .imagem-circulo.minerais 		{ background-color:#C1ECFF; background-image: url(images/listacat/minerais_icon.svg); background-size: 30px 30px;}
.lista .imagem-circulo.aditivos 		{ background-color:#83A6FF; background-image: url(images/listacat/aditivos_icon.svg); background-size: 26.13px 28px;}


@media screen and (max-width: 1400px) 		{
	
	
	
.lista .font-menor				{ font-size:12px; }
.lista .font-negrito				{ font-size:12px; }
.lista .dadoscif				{ font-size:12px; }


}


@media screen and (max-width: 1200px) 		{
	
/* Limpando versão Desktop para Mobile */
	
.lista tbody tr:not(:first-child) td 		{ border-top:none; border-spacing:0; }

.lista tbody td 				{ background-color:transparent; height:auto; padding:0; border: none; color:#002533; text-align:left; border-bottom:none; }
.lista tbody td:nth-child(2) 			{ padding-left:0; }


/* versão apenas para mobile */
.lista-mobile 					{ display: table-row !important;  }
 
.lista thead, .lista tbody tr:not(.lista-mobile){ display: none; }

/* Estilo geral do card */
.card-produto 					{ display: flex; flex-direction: row; align-items: stretch; width: 100%; background-color: #fff; border-radius: 15px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2); overflow: hidden; margin-bottom: 15px; }

/* Parte da imagem - 30% */
.card-imagem 					{ flex: 0 0 30%; position: relative; display: flex; flex-direction: column; background-size: cover; background-position: center; background-repeat: no-repeat; }

.card-imagem .imagem-container 			{ position: relative; width:100%; height:100% !important; }

.card-imagem .imagem-fundo 			{ min-height:120px; height:100% !important; background-size: cover; background-position: center;}

/* Ícone círculo dentro da imagem */
.card-imagem .imagem-circulo 			{ position: absolute; top: 45px; right: -20px; width: 40px; height: 40px; border-radius: 25%; background-color: #fff; background-size: contain; background-repeat: no-repeat; background-position: center; }

/* Parte do conteúdo - 70% */
.card-conteudo 					{ flex: 1; background-color: #fff; padding: 25px 50px; display: flex; flex-direction: column; justify-content: center; font-size:14px; position:relative; }

.card-conteudo .font-maior				{ font-size:16px; }
.card-conteudo .font-menor				{ font-size:12px; }
.card-conteudo .font-menor-cif				{ font-size:12px; font-weight:300; }
.card-conteudo .font-negrito,				
.card-conteudo .font-negrito a				{ font-weight:700; color:#002533; }

.card-conteudo .font-laranja,
.card-conteudo .font-laranja a 				{ color:#FF9E36; }

.card-conteudo .risco					{ height:1px; background-color:#EAEAEA; margin:15px 0 15px 0; }

.card-conteudo .botoes					{ display:flex; gap:10px; margin-top:20px; }

.card-conteudo .botoes .botao-lista-whatsapp		{ display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; background-color:#7BD94E; font-size:14px; font-weight:300;  height:40px; color:#fff; margin:0; padding:0 15px; border-radius:6px; border:none; box-sizing: border-box; cursor:pointer; box-shadow: 3px 3px 4px rgba(0, 20, 0, 0.2);}
.card-conteudo .botoes .botao-lista-whatsapp:hover	{ text-decoration:none; background-color:#4A9D22; color:#fff; }
  
.card-conteudo .botoes .botaolocal			{ background-color:#002533; font-size:14px; font-weight:300; height:40px; color:#fff; margin:0; padding:0 15px; border-radius:6px; border:none; box-sizing: border-box; cursor:pointer;}
.card-conteudo .botoes .botaolocal:hover		{ background-color:#FF9E36; }

.card-conteudo .botoes .botaoconsultefornecedor		{ background-color:#002533; font-size:14px; font-weight:300; height:40px; color:#fff; margin:0; padding:0 15px; border-radius:6px; border:none; box-sizing: border-box; cursor:pointer;}
.card-conteudo .botoes .botaoconsultefornecedor:hover	{ background-color:#FF9E36; }

.card-conteudo a.botao-compartilhar			{ position:absolute; top:15px; right:15px; height:15px; width:15px; background:url(images/icon_compartilhar.svg) no-repeat center center; background-size: 15px 15px; }
.card-conteudo .botao-favoritar				{ position:absolute; top:35px; right:15px; height:15px; width:15px; }

}


@media screen and (max-width: 600px) 			{
	
/* Parte do conteúdo - 70% */
.card-conteudo 						{ padding: 25px 25px;}
.card-conteudo .botoes .botao-lista-whatsapp		{ font-size:12px; font-weight:500; padding:0 10px; }
.card-conteudo .botoes .botaolocal			{ font-size:12px; font-weight:500; padding:0 10px; }
.card-conteudo .botoes .botaoconsultefornecedor		{ font-size:12px; font-weight:500; padding:0 10px; }

}



@media screen and (max-width: 450px) 			{
	
/* Parte do conteúdo - 70% */
.card-conteudo 						{ padding: 25px 10px 25px 25px;}
.card-conteudo .botoes .botao-lista-whatsapp		{ font-size:12px; font-weight:400; padding:0 10px; }
.card-conteudo .botoes .botaolocal			{ font-size:12px; font-weight:400; padding:0 10px; }
.card-conteudo .botoes .botaoconsultefornecedor		{ font-size:12px; font-weight:400; padding:0 10px; }

}
						
/* ...................... 0 itens tabela no formato de tabela ................................................................................................................................................. */



.tabela table 					{ border-collapse: separate; border-spacing: 0 10px; /* Espaçamento entre linhas */ width: 100%; }

.tabela thead th 				{ background-color:#FFB565; color:#002533; font-weight: 700; line-height:120%; padding: 15px 5px; border: none; }
.tabela thead th .subtitulo 			{ display: block; font-size:12px; font-weight: normal; line-height: 1.2; margin-top: 2px; }

.tabela thead th.cursorpointer			{ cursor:pointer; }

.tabela thead th:first-child 			{ border-top-left-radius: 6px; }

.tabela thead th:last-child 			{ border-top-right-radius: 6px; }

.tabela tbody td 				{ background-color:#fff; line-height:120%; padding: 15px 5px; border: none; font-size:14px; text-align:center; vertical-align: middle; }

.tabela tbody td a 				{ text-decoration: none;}

.tabela .miniatura img				{ width:100%; max-height:30px; object-fit: contain; height:auto; }

.tabela .font-menor				{ font-size:12px;}
.tabela .font-negrito				{ font-weight:700;}
.tabela .font-left				{ text-align:left}

.tabela .icone-whatsapp				{ height:20px; width:20px; display:inline-block; background:url(images/icon_whatsapp_lista.svg) no-repeat center center; background-size:20px 20px; position:relative; }
.tabela .icone-whatsapp.whats-off::after	{ content:""; position:absolute; top:50%; left:50%; width:22px; /* ligeiramente maior que o ícone */ height:2px; background:#c0392b; transform:translate(-50%, -50%) rotate(-45deg); opacity:0.85; border-radius:1px; }


/* Classes de edição de valores na listagem */
.tabela .icon-editar-preco 			{ width: 15px; height: 15px; background-color: #EAEAEA; /* Cor do círculo */ background-image: url('images/icones/ico_editar.png'); background-size: 9px 9px; background-position: center; background-repeat: no-repeat; border-radius: 50%; display: inline-block; vertical-align: middle; cursor: pointer; box-sizing: border-box; }
.tabela .icon-editar-preco-negado 		{ width: 15px; height: 15px; background-color: #EAEAEA; /* Cor do círculo */ background-image: url('images/icones/ico_editar_negado.png'); background-size: 9px 9px; background-position: center; background-repeat: no-repeat; border-radius: 50%; display: inline-block; vertical-align: middle; cursor: pointer; box-sizing: border-box; }
.tabela .icon-save-preco 			{ width: 15px; height: 15px; background-color: #EAEAEA; /* Cor do círculo */ background-image: url('images/icones/ico_salvar.png'); background-size: 9px 9px; background-position: center; background-repeat: no-repeat; border-radius: 50%; display: inline-block; vertical-align: middle; cursor: pointer; box-sizing: border-box; }
.tabela .edit-price-container 			{ display: inline-block; vertical-align: middle; }
.tabela .input-edit-price 			{ width: 70px; background-color:#EAEAEA; border: 1px solid #DEDEDA; text-align:center; margin-right: 5px; }


.tabela .publicado, .tabela .ativo		{ color:green; }
.tabela .reprovado				{ color:#D90000; }
.tabela .oculto					{ color:#E67817; }
.tabela .situacao				{ font-size:12px; font-weight:300; display:block;}


.tabela .opcao,
.painel_lista .opcao				{ display:inline-block; height:30px; line-height:30px; font-size:12px; padding:0 10px 0 10px; color:#fff; background:#002533; text-decoration:none; border:none; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px; cursor:pointer; box-sizing: border-box; }
.tabela .opcao:hover,
.painel_lista .opcao:hover			{ background:#FF9E36; }


.tabela .opcao.editar,				
.painel_lista .opcao.editar			{ background:#002533; color:#fff; }
.tabela .opcao.editar:hover,				
.painel_lista .opcao.editar:hover		{ color:#fff; background:#02151E; }
		

.tabela .opcao.ocultar 				{ background:#C8C8C8;}
.tabela .opcao.ocultar:hover 			{ background:#AAAAAA }

.tabela .opcao.duplicar 			{ background:#FF9E36; }
.tabela .opcao.duplicar:hover 			{ background:#EF8003}

.tabela .opcao.excluir,			
.painel_lista .opcao.excluir			{ background:#D90000; color:#fff; }
.tabela .opcao.excluir:hover,
.painel_lista .opcao.excluir:hover		{ color:#fff; background:#AC0B0B}


@media screen and (max-width: 900px) 		{
	
.tabela thead 					{ display: none; }

.tabela tbody tr 				{ margin-bottom: 10px; }

.tabela tbody td 				{ display: block; width: 100%; text-align: center; padding: 10px; box-sizing: border-box; border-bottom: 1px solid #eee;  }

.tabela .opcao 					{ display: block; margin-top: 5px; margin-bottom: 5px; }


}


/* ...................... 1.3 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; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius: 6px; box-sizing:border-box;}

.msg.confirma							{ background:#fff; border:1px dashed #FF9E35; color:#002533; }

.msg.erro							{ background:#fff; border:1px dashed #D90000; color:#D90000; }

.formulario label						{ display:block; margin:0; padding:10px 0 5px 0; }

.formulario .perfilimg						{ background-color:#fff; width:200px; padding:20px; box-sizing:border-box; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius: 6px; }
.formulario .perfilimg img					{ width:100%; }

.formulario input[type=text], 
.formulario input[type=email],
.formulario input[type=tel], 
.formulario input[type=password],
.formulario select						{ display:block; width:100%; height:40px; font-size:16px; margin:0 0 10px 0; padding:5px; background:#fff; border:1px solid #fff;  box-sizing:border-box; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius: 6px; }

.formulario textarea						{ display:block; width:100%; height:100px; font-size:16px; margin:0 0 10px 0; padding:5px; background:#fff; border:1px solid #fff;  box-sizing: border-box; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius: 6px; }

.formulario input:focus						{ border-color:#EC7A17; } 


/* ...................... busca ................................................................................................................................................. */


  .resultado 					{ display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; width: 100%; margin-bottom: 40px; background: #fff; border: none; border-radius: 6px; z-index: 20; box-sizing:border-box;}

  .resultado .conteudo-esquerdo 		{ flex-grow: 1; }

  .resultado a.limparfiltro 			{ text-decoration:none; font-size:14px; padding:4px 6px; line-height:120%; background-color:#FF9E36; color: #fff; border: none; border-radius: 4px; cursor: pointer; text-align: center; }
  .resultado a.limparfiltro:hover		{ background-color: #002533; }


@media (max-width : 1200px) 			{

  .resultado 					{ font-size:14px; line-height:120%; }

  .resultado a.limparfiltro 			{ font-size:12px; }
	
	
}


/* ...................... produto ................................................................................................................................................. */

.produto					{ display: flex; align-items: stretch; justify-content: flex-end; background:#fff; border-radius:20px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); box-sizing: border-box; }

  .produto .pro_preco_titulo			{ display:block; padding:0; margin:0; font-size:20px; line-height:120%; }

  .produto .pro_preco				{ padding:0; margin:0; font-size:25px; line-height:120%; }
  
  .produto .pro_preco span			{ font-weight:700; }
  
  .produto .pro_preco .pro_massa		{ display:inline-block; font-size:15px; line-height:100%; font-weight:400; }
  
  .produto .pro_preco .pro_consultefornecedor	{ display:inline-block; font-size:15px; line-height:100%; font-weight:400; }
  
  .produto .pro_fornecedor			{ font-size:15px; padding:3px 0; font-weight:400;}
  
  .produto .pro_destino				{ font-size:15px; padding:3px 0; font-weight:400;}
    
  .produto p 					{ font-size:16px; line-height:160%; font-weight:300; color:#666; padding:5px 0 5px 0; }
  
  .produto_esquerda				{ flex:0 0 40%; padding-right:0; border-top-left-radius: 20px; border-bottom-left-radius: 20px;  box-sizing: border-box; }   
  
    .produto_esquerda img 			{ width: 100%; padding:20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; box-sizing: border-box; }
  
  /* Ocultamos no desktop */
  .produto_esquerda .mobile			{ display:none; }
  /* Ocultamos no desktop */
  
  .produto_esquerda .grafico			{ padding:20px; box-sizing: border-box; }
  
  .produto_direita				{ flex:0 0 60%; padding:20px; box-sizing: border-box; }
  
  .produto_direita .caixa_titulo		{  }
  
  
  
@media (max-width : 1200px) 			{

.produto 					{ flex-direction: column; align-items: center; justify-content: center;  }

  .produto .pro_preco_titulo			{ display:inline-block; font-size:15px; padding-right:10px; line-height:100%; font-weight:400; }

  .produto .pro_preco				{ display:inline-block; font-size:25px; }

    .produto_esquerda 				{ display:flex; width:100%; flex: 0 0 100%; border-radius: 20px; padding: 10px; }
    
    /* Ocultamos no mobile */
    .produto_esquerda img 			{ display:none; }
    /* Ocultamos no mobile */
    
    
      /* Só para mobile */
      .produto_esquerda .mobile			{ position:relative; padding:0; margin:0; display:flex; align-items: stretch; justify-content: flex-end; }

      .produto_esquerda .mobile .mobile_foto  	{ flex: 0 0 30%; display: flex; /* Novo */ align-items: center; justify-content: center; padding:0; margin:0; border-radius: 20px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); box-sizing: border-box; overflow: hidden; }

      .produto_esquerda .mobile .mobile_foto img { display: block; width: 100%; max-height: 100px; object-fit: cover; border-radius: 20px; padding:0; margin:0; box-sizing: border-box; }

      .produto_esquerda .mobile .mobile_titulo	{ flex:0 0 70%; padding:0 20px; box-sizing: border-box; }
      
      .produto_esquerda .mobile .mobile_titulo h1.nomeproduto	{ padding:0; margin:0; font-size:25px; color:#FF9E36; line-height:120%; font-weight:700; text-align:left; }
      /* Só para mobile */

    .produto_direita 				{ width:100%; flex: 0 0 100%; border-radius: 20px; padding: 10px; }

    .produto_direita .caixa_titulo		{ display:none; }
	
}
  
  
/* ...................... produto v3. 12/2024 ................................................................................................................................................. */
  
  
.secao 						{ display: flex; flex-wrap: wrap; color:#002533; /* Permite quebrar no responsivo */ width: 100%; gap: 10px; }

.coluna1,
.coluna2 					{ flex: 1 1 0; /* Cresce igualmente */ max-width: 38%; }

.coluna3 					{ flex: 1 1 0; max-width: 24%; }
  
.linha						{ width:100%; margin-top:20px; padding:0; line-height:120%; position:relative; display:flex; justify-content: center; flex-direction: column;  }

.pro_risco					{ height:1px; background-color:#EAEAEA; margin:30px 0 30px 0; }
.pro_risco_cif					{ display:none;}
  
@media (max-width : 1200px) 			{
	
.pro_risco_cif					{ display:block; height:1px; background-color:#EAEAEA; margin:15px 0;}
	
.secao						{ gap:0; flex-direction: column; width:100%; }

.coluna1,
.coluna2 					{ flex: 0 0 100%; max-width: 100%; }
  
.coluna3 					{ display:flex; flex: 0 0 100%; max-width: 100%; }

.coluna3 .linha 				{ flex-direction: row; /* agora lado a lado */ padding:0 5px; box-sizing: border-box; }

.colunas:not(:last-child) 			{ margin-right:0;  }


}

 
 
/* ...................... produto v2. 09/2024 ................................................................................................................................................. */

  
.nutrientes 					{ width: 100%; margin-bottom:10px; }

	.nutrientecabecalho			{ padding:5px; color:#002533; font-weight:500; }

	.nutriente 				{ display: flex; width: 100%; font-size:14px; }

	.nutriente:nth-child(odd) 		{ background-color: #fff; /* Cor para linhas ímpares */ }

	.nutriente:nth-child(even) 		{ background-color: #ddd; /* Cor para linhas pares */ }

	.titulo 				{ width: 70%; padding:5px; font-weight:500; }

	.valor 					{ width: 30%; padding:5px; text-align: right; }


@media (max-width : 1200px) 			{
	
.nutrientecabecalho				{ background-color:#FFB565; color:#002533; padding:5px; border-top-left-radius: 6px; border-top-right-radius: 6px; font-weight:500; }

}
  
/* ...................... produto v2. 09/2024 - botoes pdf, excel, youtube entre outros ................................................................................................................................................. */
  
  
  
  
.exportar					{ display:flex; flex-wrap: wrap; justify-content:flex-start; gap:20px; margin:20px 0; }
  
.exportar a 					{ display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; padding: 0 20px; height:40px; border: none; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); background-color:#fff; color:#002533; font-size:15px;  text-decoration: none; font-weight:500; border-radius: 7px;  }

.exportar a:hover				{ box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4); }

.pro_item_icon 					{ width: 24px; height: auto; }
  



/* ...................... produto complementar ................................................................................................................................................. */

.produto_complementar				{ margin:20px 0 20px 0; }

  .produto_complementar p 			{ font-size:16px; line-height:160%; font-weight:300; color:#666; padding:5px 0 5px 0; }
  
  
/* ...................... tabela de nutrientes ................................................................................................................................................. */

#nutrientes-div					{ padding:0; margin:0; }

#nutrientes-div table 				{ border-collapse: separate; border-spacing:0; /* Espaçamento entre linhas */ width: 100%; }

#nutrientes-div thead th 			{ color:#002533; font-weight: 500; line-height:120%; padding:2px; border: none; }

#nutrientes-div thead th span			{ font-weight:300; font-size:12px; }

#nutrientes-div tbody td 			{ background-color:#fff; line-height:120%; padding: 5px; border: none; font-size:14px; text-align:center; vertical-align: middle; }


/* ...................... tabela de nutrientes mobile ................................................................................................................................................. */

@media (max-width : 1200px) 			{
	
#nutrientes-div thead 				{ display: none; /* oculta só o cabeçalho */ }

#nutrientes-div table 				{ width: 100%; }

#nutrientes-div tbody,
#nutrientes-div tr,
#nutrientes-div td 				{ display: block; width: 100%; box-sizing: border-box; padding:0; margin:0; }

#nutrientes-div tbody td 			{ padding:0; position: relative; margin:0; }

#nutrientes-div tbody td::before 		{ content: attr(data-label); display: block; font-weight: bold; color: #002533; margin-bottom: 5px; padding:0; 	}

#nutrientes-div tbody td input 			{ width: 100%; padding:8px; font-size: 14px; box-sizing: border-box; margin-bottom:20px; }

}


/* ...................... empresa ................................................................................................................................................. */

.empresa					{ display: flex; align-items: flex-start; justify-content: flex-end; position:relative; z-index:500; }

  .empresa_esquerda				{ flex:0 0 60px; padding:20px; margin-top:15px; text-align:center; font-size:14px; box-sizing: border-box; background:#fff; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;  }
  
    .empresa_esquerda img			{ width:100%; }
  
  .empresa_direita				{ flex: 1; padding-left:20px; box-sizing: border-box; }
  
  
  
@media (max-width : 1200px) 			{

    .empresa					{ flex-direction: column; align-items: center; justify-content: center; }

    .empresa_esquerda, .empresa_direita 	{ flex: 0 0 auto; width: 100%; padding:0; }

    .empresa_esquerda 				{ margin:10px 0; border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px;}

    .empresa_esquerda img			{ padding:10px; box-sizing: border-box; }
}
  
  

/* ...................... Envio de imagens - cadastro .............................................................................................................................................. */

.cadastro_imagem				{ position:relative; padding:10px; margin:0; }

  .cadastro_grande				{ width:100%; }

    .cadastro_grande fieldset			{ text-align:center; }

  .cadastro_grande fieldset.envio_fotos		{ box-sizing:border-box; text-align:center; }

  #lixeira					{ border:1px dashed #DE2C0C; background:rgba(140,0,0,0.1); padding:0 10px 10px 0; height:92px; list-style:none; margin:10px 0 0 0; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; }


/* ...................... Painel / Dashboard / Painel Crédito ................................................................................................................................................. */

.painel 					{ width: 100%; margin: 20px auto; display: flex; flex-wrap: wrap; /* permite quebrar linha */ }

.coluna-total					{ flex: 0 0 100%; width:100%; padding:0; }

.coluna-left 					{ flex: 0 0 calc(60% - 20px); padding: 0; margin-right:20px; }

.coluna-right 					{ flex: 0 0 40%; padding: 0; margin:0; }


@media (max-width: 900px) 			{
	
.painel 					{ flex-direction: column; }
    
.coluna-left,
.coluna-right 					{ flex: 1 1 100%; /* Ocupa 100% da largura em telas menores */ margin:0; }


						}




/* Filtro */
.filtro-painel 					{ background-color: #fff; display: flex; justify-content: center; padding: 20px; margin-bottom: 20px; gap: 20px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 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 20px; background-color: #FF9E36; color:#fff; border: none; border-radius: 6px; box-sizing: border-box; cursor: pointer; }

.filtro-painel input[type=submit]:hover 	{ background-color: #002533; }


.filtro-painel button 				{ display:inline-block; height:40px; width:100%; padding:0 20px; background-color: #137E41; color:#fff; border: none; border-radius: 6px; box-sizing: border-box; cursor: pointer; }
.filtro-painel button:hover 			{ background-color: #666666; }


/* Resumo De Dados */


.resumo-dados 					{ display: flex; flex-wrap: wrap;  /* <-- ESSENCIAL */ padding: 0; margin-bottom:20px; gap:20px; }

.resumo-dados .grupo 				{ display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 10px; }
.resumo-dados .grupo.login 			{ flex: 0 0 100%; }       /* ocupa 100% da linha */

.resumo-dados .titulo-grupo 			{ margin: 0 0 5px; font-size: 14px; font-weight: 500; color: #002533; padding-left: 10px; }

.resumo-dados .grupo-placares 			{ display: flex; flex-wrap: wrap; gap: 20px; }
.resumo-dados .grupo.login .grupo-placares 	{ flex-wrap: nowrap; }  /* mantém os 4 lado a lado */

.resumo-dados .placar 				{ flex: 1; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding:10px; text-align: left; color:#fff; background:#002533; }
.resumo-dados .placar.filtroativo 		{ outline: 3px solid #ff9800; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(255,152,0,0.25); }
.resumo-dados .placar.cordiferente		{ background:#000; }
.resumo-dados .placar .detalhes			{ margin-top:10px; padding:0; opacity:0.5; font-size:12px; line-height:100%; }

.resumo-dados .placar.verde			{ background:#0b7a28; }
.resumo-dados .placar.vermelho			{ background:#b30000; }


.resumo-dados .placar.corgoogle			{ background:#4285F4; }
.resumo-dados .placar.corwhatsapp		{ background:#455A64; }

.resumo-dados .placar.corgooglepago		{ background:#34A853; }

.resumo-dados .placar h2 			{ color:#fff; margin: 0; padding:0;  font-size:12px; font-weight:300; }

.resumo-dados .placar p 			{ margin:10px 0 0 0; padding:0; line-height:100%; font-size:30px; font-weight:700;  }
.resumo-dados .placar p span.descricao		{ display:block; line-height:100%; margin:0; padding:0; font-size:12px; color:#fff; }


@media screen and (max-width: 900px) 		{
	
.resumo-dados					{ flex-direction: column; gap: 10px;  }

.grupo-placares 				{ flex-direction: column; }

.resumo-dados .placar 				{ text-align: center; padding: 15px; }

.resumo-dados .placar h2 			{ text-align:center; font-size:12px; }
}



/* Resumo De Crédito */

.resumo-credito 					{ background-color: #fff; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; /* permite quebrar linha no mobile */  padding:20px; margin-bottom: 20px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Espaçamento entre os fieldsets */}

.resumo-credito .resumo-left 				{ display: flex; align-items: center; gap: 20px; }

.resumo-credito .resumo-left .credito-info 		{ display: flex; align-items: baseline; gap: 8px; }

.resumo-credito .resumo-left .credito-info .label 	{ font-size: 16px; font-weight: 500; color: #002533; }

.resumo-credito .resumo-left .credito-info .valor 	{ font-size: 30px; font-weight: 700; color: #002533; }

.resumo-credito .btn-adquirir 				{
							  display: inline-block;
							  background-color: #002533;
							  color: #fff;
							  border: none;
							  border-radius: 6px;
							  padding: 10px 20px 10px 45px; /* espaço extra à esquerda */
							  margin: 0;
							  font-size: 14px;
							  font-weight: 500;
							  cursor: pointer;
							  text-decoration: none;

							  background-image: url('images/icon_whatsapp_branco.svg');
							  background-repeat: no-repeat;
							  background-size: 20px 20px;
							  background-position: 15px center;
							  transition: background 0.2s ease;
							}

.resumo-credito .btn-adquirir:hover 			{ background-color: #02151E; }

.resumo-credito .btn-detalhes 				{ text-decoration:none; background:#002533; color:#fff; border: none; border-radius: 6px; padding: 10px 20px; margin:0; font-size: 14px; font-weight: 500; cursor: pointer; }
.resumo-credito .btn-detalhes:hover 			{ background:#02151E; }

.resumo-credito .resumo-right 				{ text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.resumo-credito .resumo-right span			{ font-size:12px; }

@media screen and (max-width: 700px) 		{
	
.resumo-credito 				{ flex-direction: column; align-items: stretch; gap: 15px; }

.resumo-credito .resumo-left, 
.resumo-credito .resumo-right 			{ justify-content: space-between; align-items: center; }

.resumo-credito .resumo-right 					{ align-items: flex-start; text-align: left; }

}



/* Gráfico */

.evolucao					{ background-color: #fff; padding: 20px; margin-bottom:20px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-sizing: border-box;}


/* ...................... Área do Vendedor ................................................................................................................................................. */

.area-vendedor 					{ width: 100%; margin: 20px auto; display: flex; }

.area-vendedor .area-total 			{ flex: 0 0 100%; width: 100%; padding: 0; }

.area-vendedor .area-topicos 			{ display: flex; flex-wrap: wrap; /* permite quebrar linha no mobile */ justify-content: space-between; /* distribui igualmente */ margin-bottom: 20px; gap: 20px; }

/* cada link ocupa 100% no mobile, 1/3 no desktop */


.area-topicos a.topico {
						  display: flex;
						  align-items: center; /* alinha verticalmente ícone e texto */
						  justify-content: flex-start; /* mantém o texto à direita do ícone */
						  flex: 1 1 0;
						  min-width: calc(20% - 20px);
						  background: #fff;
						  color: #002533;
						  text-align: left;
						  padding: 15px 10px;
						  border-radius: 6px;
						  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
						  transition: background-color 0.3s ease;
						  text-decoration: none;
						  box-sizing: border-box;
}


.area-topicos a.topico:hover 			{ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); background-color: #FFB565; }

/* ativo */
.area-topicos a.topico.ativo 			{ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); background-color: #FFB565; }

/* garante que o ícone e o texto fiquem na mesma linha e bem centralizados */
.area-topicos .titulo-topico 			{
						  flex: 1; /* ocupa o espaço restante */
						  display: flex;
						  align-items: center;
						}

@media (max-width: 900px) 			{
	
.area-topicos a.topico 				{ min-width: 100%; }
  
}



/* =============================================================================
   CONFIGURAÇÕES E PLANOS DO VENDEDOR
   Utilizado em configuracoes.asp e configuracoes_menus.asp.

   ÍNDICE
   1. Menu de configurações
   2. Cabeçalho das telas
   3. Listagem dos planos
   4. Cards dos planos
   5. Painéis de configuração
   6. Formulários
   7. Responsividade
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. MENU DE CONFIGURAÇÕES
   ----------------------------------------------------------------------------- */

.configuracoes-menu .area-topicos {
	justify-content:flex-start;
}

.configuracoes-menu .area-topicos a.topico {
	flex:0 1 calc(33.333% - 14px);
	min-width:200px;
}


/* -----------------------------------------------------------------------------
   2. CABEÇALHO DAS TELAS
   ----------------------------------------------------------------------------- */

.configuracoes-cabecalho {
	margin:0 0 20px;
}

.configuracoes-cabecalho h2 {
	margin-bottom:6px;
}

.configuracoes-cabecalho p {
	margin:0;
	color:#666;
	line-height:140%;
}


/* -----------------------------------------------------------------------------
   3. LISTAGEM DOS PLANOS
   ----------------------------------------------------------------------------- */

.planos-lista {
	display:flex;
	align-items:stretch;
	gap:20px;
	width:100%;
}


/* -----------------------------------------------------------------------------
   4. CARDS DOS PLANOS
   ----------------------------------------------------------------------------- */

.plano-card {
	position:relative;
	flex:1 1 0;
	min-width:0;
	padding:25px;
	color:#002533;
	background:#fff;
	border:3px solid transparent;
	border-radius:18px;
	box-shadow:0 2px 5px rgba(0,0,0,.12);
	cursor:pointer;
	box-sizing:border-box;
	transition:
		transform .2s ease,
		box-shadow .2s ease,
		border-color .2s ease;
}

.plano-card:hover,
.plano-card:focus {
	transform:translateY(-5px);
	box-shadow:0 8px 18px rgba(0,37,51,.18);
	outline:none;
}

.plano-card.selecionado {
	border-color:#002533;
	box-shadow:0 8px 18px rgba(0,37,51,.22);
}

.plano-card.plano-prepago {
	background:#FFE795;
}

.plano-card.plano-ilimitado {
	background:#FFAD24;
}

.plano-card h3 {
	margin:12px 0 8px;
	font-size:24px;
	text-transform:uppercase;
}


/* Status do plano */

.plano-status {
	display:inline-block;
	padding:5px 9px;
	color:#fff;
	background:#002533;
	border-radius:20px;
	font-size:11px;
	font-weight:700;
	text-transform:uppercase;
}


/* Preço e resumo */

.plano-preco {
	min-height:65px;
	margin-bottom:15px;
}

.plano-preco strong {
	display:block;
	font-size:28px;
	line-height:120%;
}

.plano-preco span {
	display:block;
	font-size:13px;
	font-style:italic;
}

.plano-resumo {
	min-height:58px;
	line-height:140%;
}


/* Recursos disponíveis no plano */

.plano-card ul {
	min-height:125px;
	margin:18px 0;
	padding:0;
	list-style:none;
}

.plano-card li {
	position:relative;
	margin:8px 0;
	padding-left:20px;
	line-height:130%;
}

.plano-card li:before {
	position:absolute;
	left:0;
	content:"\2713";
	font-weight:700;
}

.plano-card li.plano-indisponivel {
	color:#666;
}

.plano-card li.plano-indisponivel:before {
	content:"\2715";
}


/* Botão de escolha do plano */

.plano-escolha {
	display:block;
	width:100%;
	padding:10px;
	color:#fff;
	background:#002533;
	border-radius:6px;
	font-weight:700;
	text-align:center;
	text-decoration:none;
	box-sizing:border-box;
}

.plano-alteracao-form {
	width:100%;
	margin:0;
	padding:0;
}

.plano-alteracao-form .plano-escolha {
	border:0;
	font-family:inherit;
	font-size:inherit;
	cursor:pointer;
}

.plano-card.selecionado .plano-escolha {
	background:#EC7A17;
}

.plano-acao {
	margin-top:18px;
	color:#666;
	font-size:13px;
	text-align:center;
}


/* -----------------------------------------------------------------------------
   5. PAINÉIS DE CONFIGURAÇÃO
   ----------------------------------------------------------------------------- */

.configuracao-painel {
	padding:25px;
	background:#fff;
	border-radius:6px;
	box-shadow:0 2px 4px rgba(0,0,0,.1);
	box-sizing:border-box;
}

.configuracao-painel h2 {
	margin-top:0;
}

.configuracao-painel > p {
	color:#666;
	line-height:140%;
}

.configuracao-dado {
	margin:20px 0;
	padding:15px;
	background:#f2f2f2;
	border-radius:6px;
}

.configuracao-dado span,
.configuracao-dado strong {
	display:block;
}

.configuracao-dado span {
	margin-bottom:5px;
	color:#666;
	font-size:12px;
}


/* Botões dos painéis */

.configuracao-botoes {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

.configuracao-botoes a.botao {
	display:inline-block;
	padding:10px 15px;
	color:#fff;
	background:#002533;
	border-radius:6px;
	text-decoration:none;
}

.configuracao-botoes a.botao:hover {
	background:#FF9E36;
}

.configuracao-botoes a.secundario {
	background:#777;
}


/* -----------------------------------------------------------------------------
   6. FORMULÁRIOS DE CONFIGURAÇÃO
   ----------------------------------------------------------------------------- */

.configuracao-acesso-form,
.configuracao-comunicacoes-form {
	max-width:600px;
}

.configuracao-acesso-form h3 {
	margin:25px 0 0;
}

.configuracao-acesso-form .configuracao-ajuda,
.configuracao-comunicacoes-form .configuracao-ajuda {
	margin:5px 0 10px;
	color:#666;
	font-size:13px;
	line-height:140%;
}

.configuracao-acesso-form input[type=email],
.configuracao-acesso-form input[type=password],
.configuracao-comunicacoes-form input[type=email] {
	background:#EAEAEA;
	border-color:#EAEAEA;
}


/* -----------------------------------------------------------------------------
   7. RESPONSIVIDADE
   ----------------------------------------------------------------------------- */

@media (max-width:900px) {

	.configuracoes-menu .area-topicos a.topico {
		flex:1 1 100%;
		min-width:100%;
	}

	.planos-lista {
		flex-direction:column;
	}

	.plano-card {
		width:100%;
	}

	.plano-resumo,
	.plano-card ul {
		min-height:0;
	}
}



/* =============================================================================
   PAGAMENTO ASAAS - PECPLACE
   Criado em 21/09/2026.
   Revisado e organizado em 21/09/2026.

   ÍNDICE
   1. Elementos compartilhados
   2. Tela 1 - dados de cobrança
   3. Resumo da contratação
   4. Tela 2 - escolha do pagamento
   5. Tela 3 - acompanhamento
      5.1 Pix
      5.2 Boleto
      5.3 Cartão e confirmação
   6. Responsividade

   Este arquivo substitui os estilos antigos de pagamento existentes no
   style.css e o bloco antigo "Pagamento PIX, boleto e cartão acompanhado".
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. ELEMENTOS COMPARTILHADOS
   ----------------------------------------------------------------------------- */

.pagamento-etapas {
	display:flex;
	align-items:flex-start;
	justify-content:center;
	max-width:760px;
	margin:20px auto 30px;
}

.pagamento-etapa {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:7px;
	min-width:120px;
	color:#999;
	text-align:center;
}

.pagamento-etapa span {
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	color:#777;
	background:#fff;
	border:2px solid #ccc;
	border-radius:50%;
	box-sizing:border-box;
}

.pagamento-etapa.ativo { color:#002533; }
.pagamento-etapa.ativo span { color:#fff; background:#ff9e36; border-color:#ff9e36; }
.pagamento-linha { flex:1; height:2px; margin-top:16px; background:#ccc; }

.pagamento-layout {
	display:flex;
	align-items:flex-start;
	gap:20px;
}

.pagamento-principal {
	flex:1;
	min-width:0;
	padding:25px;
	background:#fff;
	border-radius:6px;
	box-shadow:0 2px 4px rgba(0,0,0,.1);
	box-sizing:border-box;
}

.pagamento-principal>h2 { margin-top:0; }
.pagamento-principal>p { color:#666; line-height:140%; }

.pagamento-acoes {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
	margin-top:25px;
}

.pagamento-acoes .botao {
	width:auto;
	min-width:110px;
	margin:0;
	padding:0 15px;
	text-align:center;
	text-decoration:none;
	border:0;
}

.pagamento-acoes .secundario {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:40px;
	color:#fff;
	background:#777;
	border-radius:6px;
	box-sizing:border-box;
}

.pagamento-indisponivel { padding:25px; text-align:center; }
.pagamento-indisponivel h2 { margin-top:0; }
.pagamento-indisponivel p { line-height:150%; }

/* -----------------------------------------------------------------------------
   2. TELA 1 - DADOS DE COBRANÇA
   ----------------------------------------------------------------------------- */

.pagamento-form input[type=text],
.pagamento-form input[type=email],
.pagamento-form input[type=tel],
.pagamento-form input[type=number] {
	background:#eaeaea;
	border-color:#eaeaea;
}

.pagamento-form .iti { display:block; width:100%; }
.pagamento-form .iti input[type=tel] { width:100%; box-sizing:border-box; }
.pagamento-form input:invalid:focus { border-color:#c93434; }
.pagamento-form #ped_cep_status { min-height:15px; margin-top:5px; }
.pagamento-form small { display:block; margin-top:-5px; color:#777; font-size:12px; }

.pagamento-grade {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:0 20px;
}

.pagamento-grade fieldset { min-width:0; }
.pagamento-grade .pagamento-campo-largo { grid-column:span 2; }

.pagamento-destaque {
	margin:5px 0 28px!important;
	padding:24px!important;
	text-align:center;
	background:#fff7d6;
	border:2px solid #ffd21c!important;
	border-radius:12px;
	box-sizing:border-box;
}

.pagamento-destaque>label { display:block; margin:0; color:#002533; font-size:18px; font-weight:700; }
.pagamento-destaque>p { margin:7px 0 18px; color:#555; line-height:140%; }
.pagamento-destaque>small { margin:10px 0 0; color:#666; }

.pagamento-creditos-controle {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
}

.pagamento-creditos-controle input[type=number] {
	width:190px;
	height:64px;
	padding:6px 12px;
	color:#002533;
	background:#fff!important;
	border:2px solid #002533!important;
	border-radius:8px;
	font-size:30px;
	font-weight:700;
	text-align:center;
	box-sizing:border-box;
}

.pagamento-creditos-controle strong { color:#002533; font-size:18px; }

.pagamento-periodos { display:flex; flex-wrap:wrap; gap:12px; margin:0; }
.pagamento-periodos label { position:relative; flex:1; min-width:220px; margin:0; padding:0; cursor:pointer; box-sizing:border-box; }
.pagamento-periodos label>input { position:absolute; z-index:2; top:50%; left:18px; margin:0; transform:translateY(-50%); }
.pagamento-periodos label>span { display:block; min-height:76px; padding:16px 16px 16px 48px; text-align:left; background:#fff; border:2px solid transparent; border-radius:8px; box-sizing:border-box; transition:border-color .2s ease,background .2s ease; }
.pagamento-periodos label>input:checked+span { background:#ffe795; border-color:#ff9e36; }
.pagamento-periodos strong { display:block; color:#002533; font-size:17px; }
.pagamento-periodos small { display:block; margin:5px 0 0; color:#555; line-height:130%; }

/* -----------------------------------------------------------------------------
   3. RESUMO DA CONTRATAÇÃO
   ----------------------------------------------------------------------------- */

.pagamento-resumo {
	flex:0 0 280px;
	padding:25px;
	color:#002533;
	background:#ffe795;
	border-radius:12px;
	box-shadow:0 2px 4px rgba(0,0,0,.1);
	box-sizing:border-box;
}

.pagamento-resumo>span { font-size:12px; font-weight:700; text-transform:uppercase; }
.pagamento-resumo h2 { margin:8px 0 5px; }
.pagamento-resumo p { margin:0; }

.pagamento-saldo-atual { margin-top:20px; padding:16px; color:#fff; background:#002533; border-radius:8px; }
.pagamento-saldo-atual small,
.pagamento-saldo-atual strong,
.pagamento-saldo-atual span { display:block; }
.pagamento-saldo-atual small { color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; }
.pagamento-saldo-atual strong { margin-top:5px; font-size:22px; }
.pagamento-saldo-atual span { margin-top:8px; color:rgba(255,255,255,.78); font-size:11px; line-height:140%; }

.pagamento-resumo-detalhe { margin-top:20px; padding-top:16px; border-top:1px solid rgba(0,37,51,.2); }
.pagamento-resumo-detalhe small,
.pagamento-resumo-detalhe strong { display:block; }
.pagamento-resumo-detalhe small { color:#555; font-size:11px; font-weight:700; text-transform:uppercase; }
.pagamento-resumo-detalhe strong { margin-top:5px; font-size:18px; }

.pagamento-total { margin-top:25px; padding-top:18px; border-top:1px solid rgba(0,37,51,.2); }
.pagamento-total small,
.pagamento-total strong { display:block; }
.pagamento-total strong { margin-top:4px; font-size:28px; }

/* -----------------------------------------------------------------------------
   4. TELA 2 - ESCOLHA DA FORMA DE PAGAMENTO
   ----------------------------------------------------------------------------- */

.pagamento-layout-pagamento,
.pagamento-layout-aguardando {
	display:grid;
	grid-template-columns:minmax(270px,34%) minmax(0,66%);
	gap:28px;
	max-width:1180px;
	margin:0 auto;
}

.pagamento-layout-pagamento .pagamento-resumo,
.pagamento-layout-aguardando .pagamento-resumo {
	grid-column:1;
	grid-row:1;
	width:100%;
	padding:28px;
	background:#fff8df;
	border:1px solid #f1d98a;
	border-radius:16px;
	box-shadow:0 8px 24px rgba(0,37,51,.08);
}

.pagamento-layout-pagamento .pagamento-principal,
.pagamento-layout-aguardando .pagamento-principal {
	grid-column:2;
	grid-row:1;
	width:100%;
	padding:32px;
	border-radius:16px;
	box-shadow:0 8px 24px rgba(0,37,51,.08);
}

.pagamento-cabecalho-etiqueta {
	display:inline-block;
	margin-bottom:8px;
	color:#c86c0c;
	font-size:11px;
	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.pagamento-cabecalho h2 {
	margin:0 0 8px;
	color:#002533;
	font-size:28px;
}

.pagamento-cabecalho p {
	margin:0;
	color:#66747a;
	line-height:145%;
}

.pagamento-form-metodos .pagamento-metodos {
	display:flex;
	flex-direction:column;
	gap:12px;
	margin:26px 0 0;
}

.pagamento-form-metodos .pagamento-metodo {
	position:relative;
	display:grid!important;
	grid-template-columns:22px 48px minmax(0,1fr) auto;
	align-items:center;
	gap:13px;
	min-height:78px;
	margin:0;
	padding:14px 18px!important;
	background:#fff;
	border:2px solid #d9dee1;
	border-radius:12px;
	transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}

.pagamento-form-metodos .pagamento-metodo:hover {
	border-color:#ffb35f;
	box-shadow:0 4px 14px rgba(0,37,51,.07);
}

.pagamento-form-metodos .pagamento-metodo.selecionado {
	background:#fffaf1;
	border-color:#ff9e36;
	box-shadow:0 4px 16px rgba(255,158,54,.14);
}

.pagamento-form-metodos .pagamento-metodo input[type=radio] {
	width:19px;
	height:19px;
	margin:0;
	accent-color:#ff9e36;
}

.pagamento-metodo-icone {
	display:flex!important;
	align-items:center;
	justify-content:center;
	width:44px;
	height:36px;
	margin:0!important;
	color:#002533;
	background:#e9f0f2;
	border-radius:8px;
	font-size:10px;
	font-weight:900;
	letter-spacing:.04em;
}

.pagamento-metodo-texto {
	display:block!important;
	min-width:0;
}

.pagamento-metodo-texto strong {
	color:#002533;
	font-size:16px;
}

.pagamento-metodo-texto small {
	margin:4px 0 0!important;
	color:#68767c;
	font-size:12px;
}

.pagamento-metodo-valor {
	color:#002533;
	font-size:18px;
	white-space:nowrap;
}

.pagamento-metodo-parcelado {
	grid-template-columns:22px 48px minmax(0,1fr) 62px auto!important;
}

.pagamento-metodo-parcelado select {
	height:36px;
	padding:0 8px;
	background:#fff;
	border:1px solid #cfd6d9;
	border-radius:6px;
}

.pagamento-acoes-metodos {
	align-items:stretch;
}

.pagamento-acoes-metodos input.salvar {
	flex:1;
	height:46px;
	font-weight:700;
}

.pagamento-resumo-cliente {
	margin-top:22px;
	padding:18px;
	background:#fff;
	border-radius:10px;
}

.pagamento-resumo-cliente small,
.pagamento-resumo-cliente strong,
.pagamento-resumo-cliente span {
	display:block;
}

.pagamento-resumo-cliente small {
	margin-top:14px;
	color:#738087;
	font-size:10px;
	font-weight:800;
	letter-spacing:.05em;
	text-transform:uppercase;
}

.pagamento-resumo-cliente small:first-child {
	margin-top:0;
}

.pagamento-resumo-cliente strong,
.pagamento-resumo-cliente span {
	margin-top:4px;
	color:#002533;
	line-height:135%;
	word-break:break-word;
}

.pagamento-resumo-seguranca {
	margin-top:22px;
	padding-top:18px;
	border-top:1px solid rgba(0,37,51,.14);
}

.pagamento-resumo-seguranca strong,
.pagamento-resumo-seguranca span {
	display:block;
}

.pagamento-resumo-seguranca strong {
	font-size:12px;
}

.pagamento-resumo-seguranca span {
	margin-top:5px;
	color:#657278;
	font-size:11px;
	line-height:140%;
}

/* -----------------------------------------------------------------------------
   5. TELA 3 - ACOMPANHAMENTO DO PAGAMENTO
   ----------------------------------------------------------------------------- */

.pagamento-acompanhamento {
	padding:0;
	text-align:left;
}

.pagamento-status-topo {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	margin-bottom:18px;
	padding:15px 18px;
	color:#002533;
	background:#fff5cf;
	border:1px solid #f2d472;
	border-radius:12px;
	text-align:center;
}

.pagamento-status-topo small,
.pagamento-status-topo strong {
	display:block;
}

.pagamento-status-topo small {
	font-size:12px;
	font-weight:700;
}

.pagamento-status-topo strong {
	margin-top:3px;
	font-size:18px;
}

.pagamento-status-pulso {
	width:10px;
	height:10px;
	background:#ff9e36;
	border-radius:50%;
	box-shadow:0 0 0 6px rgba(255,158,54,.16);
}

.pagamento-pedido-referencia {
	margin-bottom:20px;
	color:#7a858a;
	font-size:11px;
	text-align:center;
}

.pagamento-interno {
	display:flex;
	gap:26px;
	align-items:center;
	padding:24px;
	background:#f7f9fa;
	border:1px solid #e0e5e7;
	border-radius:14px;
	box-sizing:border-box;
}

.pagamento-pix-imagem {
	flex:0 0 230px;
	padding:16px;
	background:#fff;
	border:1px solid #dfe5e7;
	border-radius:12px;
	text-align:center;
	box-sizing:border-box;
}

.pagamento-pix-imagem>span {
	display:block;
	margin-bottom:10px;
	color:#68767c;
	font-size:11px;
	font-weight:700;
	text-transform:uppercase;
}

.pagamento-pix-qrcode {
	display:block;
	width:100%;
	max-width:198px;
	height:auto;
	margin:0 auto;
}

.pagamento-pix-imagem small {
	display:block;
	padding:78px 5px;
	color:#7a858a;
}

.pagamento-interno-dados {
	flex:1;
	min-width:0;
}

.pagamento-interno h3 {
	margin:0 0 8px;
	color:#002533;
	font-size:22px;
}

.pagamento-interno p {
	margin:0 0 14px;
	color:#657278;
}

.pagamento-interno-dados>small,
.pagamento-cartao>small {
	display:block;
	margin-top:14px;
	color:#748087;
	line-height:140%;
}

.pagamento-link-alternativo {
	display:inline-block;
	margin-top:14px;
	color:#002533;
	font-size:12px;
	font-weight:700;
}

.pagamento-codigo {
	display:block;
	width:100%;
	min-height:82px;
	margin:0 0 12px;
	padding:12px;
	color:#20343c;
	background:#fff;
	border:1px solid #cfd7da;
	border-radius:8px;
	font-family:Consolas,Monaco,monospace;
	font-size:11px;
	line-height:145%;
	resize:none;
	box-sizing:border-box;
}

.pagamento-boleto {
	display:block;
}

.pagamento-boleto-cabecalho {
	margin-bottom:16px;
}

.pagamento-boleto-linha {
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	gap:10px;
	align-items:stretch;
	margin-bottom:18px;
}

.pagamento-boleto-linha .pagamento-codigo {
	min-height:52px;
	height:52px;
	margin:0;
}

.pagamento-boleto-linha .botao {
	height:52px;
	margin:0;
	white-space:nowrap;
}

.pagamento-boleto-visualizador {
	display:block;
	width:100%;
	height:470px;
	margin:0 0 12px;
	background:#e9edef;
	border:1px solid #d4dade;
	border-radius:10px;
	box-sizing:border-box;
}

.pagamento-boleto-abrir {
	display:flex!important;
	align-items:center;
	justify-content:center;
	width:100%!important;
	margin:0!important;
	text-decoration:none;
}

.pagamento-observacao {
	margin:14px 0 0!important;
	text-align:center;
}

.pagamento-cartao {
	display:block;
	padding:42px 28px;
	text-align:center;
}

.pagamento-cartao-icone,
.pagamento-confirmado-icone {
	display:flex;
	align-items:center;
	justify-content:center;
	width:58px;
	height:58px;
	margin:0 auto 16px;
	color:#fff;
	background:#002533;
	border-radius:50%;
	font-size:25px;
}

.pagamento-confirmado-icone {
	background:#11884a;
}

.pagamento-cartao .botao {
	margin-top:10px;
}

.pagamento-status-texto {
	margin:16px 0 0!important;
	color:#6e7b81;
	text-align:center;
}

.pagamento-acoes-acompanhamento {
	justify-content:flex-start;
	margin-top:18px;
}

/* -----------------------------------------------------------------------------
   6. RESPONSIVIDADE
   ----------------------------------------------------------------------------- */

@media (max-width:1000px) {
	.pagamento-layout-pagamento,
	.pagamento-layout-aguardando {
		grid-template-columns:minmax(240px,32%) minmax(0,68%);
		gap:18px;
	}
	.pagamento-layout-pagamento .pagamento-principal,
	.pagamento-layout-aguardando .pagamento-principal {
		padding:24px;
	}
	.pagamento-metodo-valor {
		font-size:15px;
	}
	.pagamento-pix-imagem {
		flex-basis:190px;
	}
}

@media (max-width:800px) {
	.pagamento-layout-pagamento,
	.pagamento-layout-aguardando {
		display:flex;
		flex-direction:column-reverse;
		gap:18px;
	}
	.pagamento-layout-pagamento .pagamento-principal,
	.pagamento-layout-pagamento .pagamento-resumo,
	.pagamento-layout-aguardando .pagamento-principal,
	.pagamento-layout-aguardando .pagamento-resumo {
		width:100%;
	}
	.pagamento-interno {
		flex-direction:column;
	}
	.pagamento-pix-imagem {
		flex:0 0 auto;
		width:100%;
		max-width:270px;
	}
}

@media (max-width:600px) {
	.pagamento-layout-pagamento .pagamento-principal,
	.pagamento-layout-aguardando .pagamento-principal,
	.pagamento-layout-pagamento .pagamento-resumo,
	.pagamento-layout-aguardando .pagamento-resumo {
		padding:20px;
	}
	.pagamento-cabecalho h2 {
		font-size:23px;
	}
	.pagamento-form-metodos .pagamento-metodo,
	.pagamento-metodo-parcelado {
		grid-template-columns:22px 42px minmax(0,1fr)!important;
	}
	.pagamento-metodo-valor {
		grid-column:3;
		margin-top:3px;
	}
	.pagamento-metodo-parcelado select {
		grid-column:3;
		width:75px;
	}
	.pagamento-acoes-metodos {
		flex-direction:column-reverse;
	}
	.pagamento-boleto-linha {
		grid-template-columns:1fr;
	}
	.pagamento-boleto-visualizador {
		height:390px;
	}
}


/* ...................... 1.8. Tabelas personalizadas (usadas em diário e painel) ................................................................................................................................................. */


.painel_lista 					{ background-color: #fff; padding: 20px; margin-bottom:20px; font-size: 12px; line-height: 120%; box-sizing: border-box; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

.painel_lista table 				{ width: 100%; border-collapse: collapse; border: none; }

.painel_lista thead 				{ background-color: #002533; color: #fff; cursor: pointer; }

.painel_lista tbody tr:nth-child(odd) 		{ background-color: #fff; }

.painel_lista tbody tr:nth-child(even) 		{ background-color: #ddd; }

.painel_lista tbody tr:hover 			{ background-color: #bbb; }

.painel_lista tbody tr:not(:last-child) 	{ border-bottom: 1px solid #ccc; }


/* Linhas de crédito (dashboard) */

.painel_lista tbody tr.linha-credito 		{ background-color: #e8f6ec !important; /* verde bem suave */ color: #137E41 !important; font-weight: 500; }

.painel_lista tbody tr.linha-debito 		{ background-color: #fdeaea !important; /* vermelho suave */ color: #B50000 !important; font-weight: 500; }

.painel_lista tbody tr.linha-credito:hover 	{ background-color: #d7f0de !important; }

.painel_lista tbody tr.linha-debito:hover 	{ background-color: #f9d6d6 !important; }



.painel_lista th, td 				{ padding: 10px; text-align: left; }

.painel_lista td .ico_local			{ display:inline-block; margin-left:5px; padding:0; height:23px; width:15px; background:url(images/ico_localizacao.png) center no-repeat; background-size: 15px 23px; cursor:pointer; vertical-align: middle;}

.painel_lista td.vermelho 			{ background: #B50000; color: #fff; }
.painel_lista td.cinza 				{ background: #F2F2F0; }

.painel_lista td.center 			{ text-align: center; }


/* Estilo para a linha de informações adicionais */
.painel_lista tr.additional-info td { 
    padding: 10px;
    font-size: 12px;
    color: #333;
}


/* Estilo para os links dentro da tabela */
.painel_lista a 				{ color: inherit; text-decoration: none; display: block; }

.painel_lista a:hover 				{ text-decoration: none; }

.painel_lista tbody tr:hover a 			{ color: inherit; }

.linha-vermelha 				{ background: #B50000 !important; color: #fff; }

.linha-vermelha td 				{ color: #fff; }

.linha-vermelha a 				{ color: #fff; }

.painel_lista td.capitalize			{ text-transform:capitalize; }

.painel_lista td .negrito			{ font-weight:500;}

.painel_lista td .acoes				{ display:flex; align-items: center; justify-content: flex-start; }

.painel_lista td .status			{ font-weight:700; }

.painel_lista td .status.verde			{ color:green; }

.painel_lista td .status.azul			{ color:#0D9AAB; }

.painel_lista td .status.amarelo		{ color:#E8E800; }

.painel_lista td .status.vermelho		{ color:#B50000; }

.painel_lista td .status.laranja		{ color:#E67817; }

.painel_lista td .origem			{ font-weight:500; }
.painel_lista td .origem.corgooglepago    	{ color:#34A853;  }
.painel_lista td .origem.corgoogle       	{ color:#4285F4; }
.painel_lista td .origem.corfacebook     	{ color:#3b5998; }
.painel_lista td .origem.corinstagram     	{ color:#e4405f; }
.painel_lista td .origem.cortiktok        	{ color:#000; }
.painel_lista td .origem.cortelegram      	{ color:#0088cc; }
.painel_lista td .origem.corwhatsapp      	{ color:#25d366; }
.painel_lista td .origem.cordireto        	{ color:#666; }

.painel_lista td .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; }

.painel_lista td .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; }

.painel_lista td .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; }

.painel_lista td .botaoexcluir:hover, 

.painel_lista td .botaoeditar:hover, 

.painel_lista td .botaosenha:hover, 

.painel_lista td .botaovisualizar:hover		{ opacity: 0.7; }



@media screen and (max-width: 900px)		 {
	
.painel_lista table, 
.painel_lista thead, 
.painel_lista tbody, 
.painel_lista th, 
.painel_lista td, 
.painel_lista tr 				{ display: block; /* Altera a tabela para formato de bloco */ }

.painel_lista thead 				{ display: none; }

.painel_lista tbody tr 				{ margin-bottom: 10px; border: 1px solid #ddd;  border-radius: 6px;  padding: 10px; }

.painel_lista td 				{ display: flex; justify-content: space-between; padding: 10px 5px; border: none; text-align:right; }

.painel_lista td:before 			{ content: attr(data-label); /* Usado para mostrar os rótulos das colunas */ flex-basis: 50%; font-weight: bold; padding-right: 10px; text-align:left; }

/* Ajusta o texto para telas pequenas */
.painel_lista 					{ font-size: 14px; }

.painel_lista a 				{ padding: 5px 0; }

.painel_lista td .acoes 			{ display: flex; justify-content: space-around; flex-direction: column; }

.painel_lista td .botaoexcluir 			{ width:100%; height:40px; margin:0; padding:0; display: block; }
.painel_lista td .botaoeditar			{ width:100%; height:40px; margin:0; padding:0; display: block; }
.painel_lista td .botaovisualizar		{ width:100%; height:40px; margin:0; padding:0; display: block; }

  
						}



/* ...................... Envio de imagens - de logotipo no cadastro ......................................................................................................................... */


#progress					{ display:none; }

progress					{ display:inline-block; vertical-align:baseline; }

@-webkit-keyframes progress-bar-stripes		{ from{background-position:40px 0}to{background-position:0 0} }

@-o-keyframes progress-bar-stripes		{ from{background-position:40px 0}to{background-position:0 0} }

@keyframes progress-bar-stripes			{ from{background-position:40px 0}to{background-position:0 0} }

.progress					{ height:30px; overflow:hidden; background-color:#f5f5f5; border-radius:4px; -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1); box-shadow:inset 0 1px 2px rgba(0,0,0,.1); }

.progress-bar					{ float:left; width:0; height:100%; font-size:12px; line-height:30px; color:#fff; text-align:center; background-color:#64AAD0; -webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15); box-shadow:inset 0 -1px 0 rgba(0,0,0,.15); -webkit-transition:width .6s ease; -o-transition:width .6s ease; transition:width .6s ease; }

.progress-striped .progress-bar, .progress-bar-striped	{ background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); -webkit-background-size:40px 40px; background-size:40px 40px; }

.progress.active .progress-bar,.progress-bar.active	{ -webkit-animation:progress-bar-stripes 2s linear infinite; -o-animation:progress-bar-stripes 2s linear infinite; animation:progress-bar-stripes 2s linear infinite; }

.progress-bar[aria-valuenow="1"], .progress-bar[aria-valuenow="2"]	{ min-width:30px; }

.progress-bar[aria-valuenow="0"]		{ min-width:30px; color:#777; background-color:transparent; background-image:none; -webkit-box-shadow:none;box-shadow:none; }

.progress-bar-success				{ background-color:#5cb85c; }

.progress-striped .progress-bar-success		{ background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); }

.progress-bar-info				{ background-color:#5bc0de; }

.progress-striped .progress-bar-info		{ background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); }

.progress-bar-warning				{ background-color:#f0ad4e; }

.progress-striped .progress-bar-warning		{ background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); }

.progress-bar-danger				{ background-color:#d9534f; }

.progress-striped .progress-bar-danger		{ background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); }

#files 						{ margin: 0; padding: 0; text-align: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

#files a 					{ display: flex; align-items: center; justify-content: center; border: 1px dashed #ccc; width: 80px; height: 80px; padding: 5px; border-radius: 3px; box-sizing: border-box; background-color: #fff; /* só pra destacar se colar */ }

#files a img 					{ max-width: 100%; max-height: 100%; display: block; object-fit: contain; }

/* ...................... compartilhar, produto voltar e whatsapp ................................................................................................................................................. */


.produto_voltar_e_compartilhar			{ display:flex; justify-content: space-between; padding:0 40px 30px 40px; box-sizing: border-box; }


  .botao_voltar 				{ display: inline-flex; align-items: center; text-decoration: none; font-size: 20px; color: #002533; height: 40px; line-height: 40px; padding:0; box-sizing: border-box; background-image: url(images/icon_seta_voltar.svg); background-repeat: no-repeat; background-position: left center; background-size: 14px 12px; padding-left: 40px; }
  .botao_voltar:hover				{ text-decoration:none; color:#000; }

  .botao_compartilhar 				{ display: inline-flex; align-items: center; text-decoration: none; font-size: 20px; color: #002533; height: 40px; line-height: 40px; padding:0; box-sizing: border-box; background-image: url(images/icon_compartilhar.svg); background-repeat: no-repeat; background-position: left center; background-size: 18px 18px; padding-left: 40px; }
  .botao_compartilhar:hover			{ text-decoration:none; color:#000; }

  .botao_whatsproduto 				{ display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; background-color: #7BD94E; font-size: 18px; height: 40px; width: 100%; color: #fff; border: none; box-shadow: 3px 3px 4px rgba(0, 20, 0, 0.2); padding: 0 15px; border-radius: 7px; box-sizing: border-box; }
  .botao_whatsproduto:hover			{ text-decoration:none; background-color:#4A9D22; color:#fff; }
  
  .botao_itensproduto 				{ display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; background-color: #002533; font-size: 18px; height: 40px; width: 100%; color: #fff; border: none; box-shadow: 3px 3px 4px rgba(0, 20, 0, 0.2); padding: 0 15px; border-radius: 7px; box-sizing: border-box; }
  .botao_itensproduto:hover			{ text-decoration:none; background-color:#000; color:#fff; }
   
  .botao_itensproduto .icone, .botao_whatsproduto .icone 	{ width: 20px; height: 20px; }



@media (max-width : 1200px) 			{

.produto_voltar_e_compartilhar			{ padding:0 0 10px 0; }

.botao_voltar, .botao_compartilhar		{ font-size:16px; }
	
}

/* ...................... modal da caixa de compartilhar e whatsapp ................................................................................................................................................. */

.modal 						{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; z-index: 5000; }

.modal-conteudo 				{ background: #fff; padding: 20px; border-radius: 7px; width: 90%; max-width: 500px; position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); text-align: left; }

.modal-conteudo h2 				{ margin-top: 0; font-size: 20px; color:#002533; font-weight:700; }

.modal-conteudo label				{ display:block; margin:10px 0 0 0; }

.modal-conteudo input[type=text],
.modal-conteudo input[type=email],
.modal-conteudo input[type=tel]			{ height: 40px; width:100%; margin:0; padding: 0 10px; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }

.modal-conteudo .checkbox-linha 		{ display: flex; align-items: center; padding:0; margin:0 0 10px 0; gap: 6px; /* distância entre a caixinha e o texto */ }
.modal-conteudo .checkbox-linha input[type=checkbox] { margin: 0; padding: 0; }
.modal-conteudo .checkbox-texto 		{ font-size: 12px; line-height:110%; }

.modal-conteudo .modal_whats_button 		{ height:40px; width:100%; padding:0 20px;  background-color: #7BD94E; color:#fff; border: none; border-radius: 6px; box-sizing: border-box; cursor: pointer; /*width:100%;background:#28a745;color:#fff;padding:10px;border:none;border-radius:6px;cursor:pointer;font-size:15px;font-weight:bold;*/ }
.modal-conteudo .modal_whats_button:hover 	{ text-decoration:none; background-color:#4A9D22; color:#fff;  }

/*Efeito ao clicar no botão no whatsapp para enviar ele desabilita*/
.modal-conteudo .modal_whats_button:disabled 	{ background-color: #ccc; color: #666; cursor: not-allowed; opacity: 0.8; }

.modal-conteudo .login-rapido			{ margin:0 auto; font-size:12px; text-align:center; }
.modal-conteudo .login-rapido a 		{ color:#002533; text-decoration:none; }
.modal-conteudo .login-rapido a:hover		{ color:#FF9E36; }

.modal-fechar 					{ position: absolute; top: 10px; right: 15px; font-size: 24px; font-weight:700; color:#002533; cursor: pointer; }

.produto-compartilhar 				{ display: flex; gap: 15px; align-items: flex-start; margin: 20px 0; }

.produto-compartilhar img 			{ width: 100px; height: 100px; object-fit: cover; border-radius: 8px; }

.produto-info 					{ flex: 1; }

.produto-titulo 				{ font-weight: 700; font-size: 16px; margin-bottom: 5px; color:#002533; }

.produto-descricao 				{ font-size: 14px; line-height:140%; }

.botoes-compartilhar 				{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }

.botoes-compartilhar a,
.botoes-compartilhar button 			{ display: flex; align-items: center; gap: 8px; padding: 10px 15px; background-color: #EAEAEA; border: none; border-radius: 50px; cursor: pointer; text-decoration: none; color: #002533; font-size: 14px; transition: background 0.2s; }

.botoes-compartilhar a:hover,
.botoes-compartilhar button:hover 		{ background-color: #e0e0e0; }

.botoes-compartilhar img			{ width: auto; height: 20px; }


/* ...................... favorito ................................................................................................................................................. */
  
/* Ícone do coração - estado padrão tamanho dele */
.coracao { 
	width:24px; 
	height:24px; 
	cursor:pointer; 
	/* estilo herdado pros filhos instanciados via <use> */
	fill: none;               /* começa vazado */
	stroke: #002533;          /* contorno */
	stroke-width: 2;          /* espessura */
	transition: fill .25s, stroke .25s;
	}
  
/* Hover e ativo */
.coracao:hover,
.coracao.ativo 
	{
	fill: #FF9E36;
	stroke: #FF9E36;
	}
  


@media (max-width : 1200px) 			{

.coracao 					{ width:15px; height:15px; }
	
}

/* ...................... impersonação tarja no topo quando estiver com login do adm ................................................................................................................................................. */
  
.impersonar-banner 			{
  position: fixed;
  top: 80px;       
  left: 0;
  width: 100%;
  background: #ffcc00;
  color: #000;
  text-align: center;
  padding: 6px;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.impersonar-banner-link {
  margin-left: 15px;
  color: #c00;
  text-decoration: none;
}

.impersonar-banner-link:hover {
  text-decoration: underline;
  color: #900;
}

/* ...................... sugestão de cidades dentro da inclusão de whatsapp dentro de ponto de distribuição. ................................................................................................................................................. */
  

.selected-tags { margin-top:5px; display:flex; flex-wrap:wrap; gap:5px; }
.selected-tag 			{ background:#fff; border:1px solid #ccc; border-radius:3px; padding:2px 6px; display:flex; align-items:center; }
.selected-tag span { margin-left:5px; cursor:pointer; color:red; font-weight:bold; }

/* Estamos usando a base dessas classe em outro lugar, aqui apenas aprimoramos para o local desejado ao escolher a cidade dentro whatsapp por região */
.autocomplete-suggestions.whats 	{ top:41px; right:0; width:100%; text-align:left; box-shadow: 0 0 5px #fff; }

/* ...................... MAPA EXPERIMENTO 23/07/2026. ................................................................................................................................................. */
  
/* ............................................................................
   EXPERIMENTO: MAPA 70% + PRODUTOS 30%
............................................................................ */

.mapa-experimento-layout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(340px, 3fr);
	align-items: start;
	gap: 20px;
	width: 100%;
	max-width: 1800px;
	margin: 0 auto;
	padding: 40px;
	box-sizing: border-box;
}

/* Neutraliza apenas dentro do experimento as medidas de .conteudo */

.mapa-experimento-layout > .conteudo {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* Mapa permanece visível enquanto a lista rola */

.mapa-experimento-layout > .conteudo.mapa {
	position: sticky;
	top: 90px;
}

.mapa-experimento-layout #mapa_produtos {
	height: calc(100vh - 110px);
	min-height: 560px;
	max-height: 820px;
}

/* Resultado do filtro dentro da coluna menor */

.mapa-experimento-layout .resultado {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 25px;
	padding: 15px;
}

.mapa-experimento-layout .resultado .conteudo-esquerdo {
	width: 100%;
	line-height: 160%;
}

.mapa-experimento-layout .resultado .limparfiltro {
	align-self: flex-end;
}

.mapa-experimento-layout .conteudo.principal h1 {
	margin-bottom: 20px;
}

/* Esconde a tabela desktop somente nesta página */

.mapa-experimento-layout .lista thead,
.mapa-experimento-layout .lista tbody tr.produto-mapa {
	display: none !important;
}

/* Mostra o card mobile na coluna lateral */

.mapa-experimento-layout .lista-mobile {
	display: table-row !important;
}

.mapa-experimento-layout .lista table {
	width: 100%;
	table-layout: fixed;
}

.mapa-experimento-layout .lista tbody tr.lista-mobile td,
.mapa-experimento-layout .lista tbody tr.lista-mobile:not(:first-child) td {
	height: auto;
	padding: 0;
	border: none;
	background: transparent;
	text-align: left;
}

/* Card lateral */

.mapa-experimento-layout .card-produto {
	display: flex;
	align-items: stretch;
	width: 100%;
	margin-bottom: 15px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}

.mapa-experimento-layout .card-imagem {
	flex: 0 0 34%;
	position: relative;
	min-width: 105px;
}

.mapa-experimento-layout .card-imagem .imagem-container {
	width: 100%;
	height: 100%;
}

.mapa-experimento-layout .card-imagem .imagem-fundo {
	width: 100%;
	height: 100%;
	min-height: 180px;
	border-radius: 0;
	background-size: cover !important;
	background-position: center !important;
}

.mapa-experimento-layout .card-imagem .imagem-circulo {
	top: 50%;
	right: -18px;
	width: 38px;
	height: 38px;
	border-radius: 25%;
	transform: translateY(-50%);
}

.mapa-experimento-layout .card-conteudo {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 22px 30px 22px 25px;
	background: #fff;
	font-size: 13px;
}

.mapa-experimento-layout .card-conteudo .font-maior {
	font-size: 15px;
}

.mapa-experimento-layout .card-conteudo .font-menor,
.mapa-experimento-layout .card-conteudo .font-menor-cif {
	font-size: 11px;
}

.mapa-experimento-layout .card-conteudo .font-negrito,
.mapa-experimento-layout .card-conteudo .font-negrito a {
	color: #002533;
	font-weight: 700;
}

.mapa-experimento-layout .card-conteudo .font-laranja,
.mapa-experimento-layout .card-conteudo .font-laranja a {
	color: #ff9e36;
}

.mapa-experimento-layout .card-conteudo .risco {
	height: 1px;
	margin: 12px 0;
	background: #eaeaea;
}

.mapa-experimento-layout .card-conteudo .botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 15px;
}

.mapa-experimento-layout .card-conteudo .botoes .botaolocal,
.mapa-experimento-layout .card-conteudo .botoes .botaoconsultefornecedor {
	height: 36px;
	padding: 0 10px;
	border: none;
	border-radius: 6px;
	background: #002533;
	color: #fff;
	font-size: 11px;
	cursor: pointer;
}

.mapa-experimento-layout .card-conteudo .botoes .botao-lista-whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	padding: 0 10px;
	border-radius: 6px;
	background: #7bd94e;
	color: #fff;
	font-size: 11px;
	text-decoration: none;
}

.mapa-experimento-layout .card-conteudo a.botao-compartilhar {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 15px;
	height: 15px;
	background: url(images/icon_compartilhar.svg) no-repeat center;
	background-size: 15px;
}

.mapa-experimento-layout .card-conteudo .botao-favoritar {
	position: absolute;
	top: 38px;
	right: 14px;
	width: 15px;
	height: 15px;
}

/* Em telas menores volta para mapa sobre a listagem */

@media screen and (max-width: 1200px) {

	.mapa-experimento-layout {
		display: block;
		padding: 15px 10px 40px;
	}

	.mapa-experimento-layout > .conteudo.mapa {
		position: relative;
		top: auto;
		margin-bottom: 30px;
	}

	.mapa-experimento-layout #mapa_produtos {
		height: 500px;
		min-height: 0;
		max-height: none;
	}

	.mapa-experimento-layout .card-conteudo {
		padding: 25px 50px;
	}
}

@media screen and (max-width: 600px) {

	.mapa-experimento-layout #mapa_produtos {
		height: 380px;
	}

	.mapa-experimento-layout .card-conteudo {
		padding: 25px 25px;
	}
}
  
  
/* ............................................................................
   MAPA DE PRODUTOS
............................................................................ */

#mapa_produtos {
	position: relative;
	width: 100%;
	height: 500px;
	border-radius: 8px;
	overflow: hidden;
}

/* Etiqueta sobre o mapa */

.mapa-marcador {
	position: absolute;
	display: block;
	min-width: 76px;
	padding: 8px 12px;
	border: 2px solid #fff;
	border-radius: 20px;
	background: #f58220;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	transform: translate(-50%, -100%);
	transition:
		background 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
	z-index: 1;
}

.mapa-marcador::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	width: 10px;
	height: 10px;
	background: #f58220;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateX(-50%) rotate(45deg);
}

.mapa-marcador:hover,
.mapa-marcador.ativo {
	background: #333;
	transform: translate(-50%, -100%) scale(1.08);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38);
	z-index: 10;
}

.mapa-marcador:hover::after,
.mapa-marcador.ativo::after {
	background: #333;
}

/* Popup */

.mapa-popup {
	width: 290px;
	padding: 4px 2px;
	font-family: Arial, sans-serif;
}

.mapa-popup-cabecalho {
	display: flex;
	flex-direction: column;
	padding: 0 0 10px;
	border-bottom: 1px solid #ddd;
}

.mapa-popup-cabecalho strong {
	color: #333;
	font-size: 16px;
	text-transform: uppercase;
}

.mapa-popup-cabecalho span {
	margin-top: 4px;
	color: #777;
	font-size: 12px;
}

.mapa-popup-produtos {
	max-height: 230px;
	overflow-y: auto;
}

.mapa-popup-produto {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 3px;
	border-bottom: 1px solid #eee;
	color: #333;
	text-decoration: none;
}

.mapa-popup-produto:hover {
	background: #f7f7f7;
	color: #f58220;
}

.mapa-popup-nome {
	flex: 1;
	font-size: 13px;
	line-height: 17px;
}

.mapa-popup-preco {
	flex-shrink: 0;
	color: #f58220;
	font-size: 12px;
	white-space: nowrap;
}

@media screen and (max-width: 768px) {

	#mapa_produtos {
		height: 380px;
		border-radius: 0;
	}

	.mapa-marcador {
		min-width: 66px;
		padding: 6px 9px;
		font-size: 11px;
	}

	.mapa-popup {
		width: 230px;
	}
}