/* Declaração da Inter Local */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/static/content/fonts/inter-v20-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('/static/content/fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('/static/content/fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('/static/content/fonts/inter-v20-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('/static/content/fonts/saira-semi-condensed-v15-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('/static/content/fonts/saira-semi-condensed-v15-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira Semi Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('/static/content/fonts/saira-semi-condensed-v15-latin-700.woff2') format('woff2');
}

* {
  margin: 0;
  box-sizing: border-box;
}

:root{
  /* Sua nova paleta de cores */
  --cor-fundo-suave: #F0F9F7;
  --cor-fundo-transicao: #D5ECDF; /* Nova */
  --cor-fundo: #BBDFC7;
  --cor-suporte-claro: #9BD4C0;    /* Nova */
  --cor-suporte: #7BC9B9;
  --cor-acao-secundaria: #4DA999;
  --cor-principal: #2A7C6C;
  --cor-texto-principal: #1E4C46;

  --cor-secundaria: #d96c06; /* Um laranja para detalhes e destaques */
  --cor-texto: #333;
  --cor-tag-fundo: #BBDFC7;

  --cor-carrinho-botao: #25D366;

  /* Cores neutras */
  --cor-branco: #FAFEFD; /* Verde-Gelo */
  --cor-cinza-claro: #f8f9fa; /* Para outros fundos neutros */  
  --sombra-suave: 0 4px 4px rgba(30, 76, 70, 0.08);  
  --sombra-card: 1px 1px 2px rgba(30, 76, 70, .1);
  --transparent: #00000000;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Saira Semi Condensed', sans-serif;
    font-weight: 500;
    color: var(--cor-texto);
}

.bold {
  font-weight: bold;
}
p.center,
h1.center,
h2.center,
h3.center,
h4.center,
h5.center {
  text-align: center;
}
table.center {
  margin: auto;
}
fieldset.center {
  max-width: 55%;
  padding: 10px;
  text-align: center;
  margin: auto;
}
fieldset {
  border-radius: 4px;
}
h3, .h3 {
  font-weight: 600;
  color: var(--cor-texto-principal);
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.border {
  border: 1px solid black;
}

h1 {
  padding: 0 1rem;
}

.header-div h1 {
    font-size: 2rem;
    font-weight: 600;
    text-wrap-style: balance;
}

/* Padding padrão da página */
.page-padding {
  padding-left: 1rem;
  padding-right: 0.5rem;
}

.pointer {
  cursor: pointer;
}
/* Garantimr que o body não tenha rolagem própria */
body {

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.01em; /* Deixa um pouco mais compacta */
  
  font-feature-settings: "cv05", "cv11"; /* Ativa o 'I' com serifa e o 'l' com curva na fonte Inter */

  color: var(--cor-texto);
  font-size: .9rem;
  background-color: var(--cor-fundo-suave);

  /* CHAVE: Impede a rolagem na página principal */
  overflow: hidden; 
  
  height: 100%;
  margin: 0;
  padding: 0;
}  

.credenciados {
  border-collapse: collapse;
  padding: 8px;
  border: 1px solid #e6e6e6;
}
table {
  line-height: 1em;
  /* font-family: FreeSans, sans-serif; */
  font-size: 11px;
}

div.topo {
  /* position: fixed;
	top: 0;
	z-index:10; */
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  width: 100%;
  line-height: 1.1em;
  /* font-family: FreeSans, sans-serif; */
  font-size: 12px;
  font-weight: bold;
  text-align: left;

  background-color: #00355d;
  color: #ffffff;
}
#header_elements {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  margin-right: 40px;
  /* font-family: FreeSans, sans-serif; */
  font-size: 11px;
}

#header_elements_small {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  margin-right: 40px;
  /* font-family: FreeSans, sans-serif; */
  font-size: 11px;
}

#header_logo {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  margin-left: 10px;
  padding: 0px, 5px, 0px, 0px;

}

#sistema {
   display: flex;
   align-content: center;
   font-size: 24px;
   color:#ffffff;
   padding-top: 31px;
   margin-left: 180px;
   font-family: arial;
	
}

div.center-100 {
  align-content: center;
  padding: 60px 40px 0 0;
  width: 100%;
}
div.center {
  align-content: center;
  padding: 60px;
  border-collapse: collapse;
  border: 1px solid #9e9a9a;
  border-radius: 5px;
  box-shadow: inset 0 0 3px grey;
  width: 50%;
}

div.logon-screen {
  display: block;
  margin-left: 20px;
  padding: 8px;
  justify-content: right;
}


font.topo {
  color: #ffffff;
}
#geral {
  position: relative;
  top: -10px;
}

div.barra {
  display: block;
  width: 100%;
  line-height: 1em;
  /* font-family: FreeSans, sans-serif; */
  font-size: 12px;
  font-weight: bold;

  color: white;
  text-align: left;
  background-color: #00355d;
  padding: 5px;
  border-spacing: 0px;

  border-right-width: 0px;
  border-right-color: white;
  border-left-width: 0px;
  border-left-color: white;
  border-top: 20px solid #00355d;
  border-bottom: 3px solid #00355d;
}
table.menutop {
  background-color: #c7c8c6;
  color: #5e515b;
  padding: 1px;
  border-spacing: 0px;
  border-top-width: 1px;
  border-top-color: white;
  border-right-width: 1px;
  border-right-color: white;
  border-bottom-width: 1px;
  border-bottom-color: white;
  border-left-width: 1px;
  border-left-color: white;
}
table.menu {
  background-color: #c7c8c6;
  border: 1px;
  border-collapse: collapse;
}
table.titulo {
  line-height: 1.2em;
  /* font-family: FreeSans, sans-serif; */
  font-size: 15px;
  font-weight: bold;
}
table.header_centro {
  border-bottom: solid #999999;
}
table.header {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border: 1px;
  border-spacing: 1;
  background-color: black;
  padding-top: 0px;
}
table.menu {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border: 0px;
  border-spacing: 0px;
  border-collapse: collapse;
  background-color: white;
}
table.corpo {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border: 0px;
  border-spacing: 1;
  padding-top: 10px;
}
table.corpo2 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border: 0px;
  border-spacing: 0px;
  border-collapse: collapse;
  padding-top: 10px;
}
table.estat60 {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border: 0px;
  border-spacing: 1;
  padding-top: 20px;
}
table.estat80 {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border: 0px;
  border-spacing: 1;
  padding-top: 10px;
}
td.barra {
  padding: 5px;
}
.td-barra {
  padding: 5px;
  color: white;
}
td.default {
  padding: 3px;
}
td.wide {
  padding: 8px;
}
td.barraMenu {
  border-right: thin solid #675e66;
}
td.marked {
  color: blue;
  background-color: #666666;
}
tr.menutop {
  background-color: #c7c8c6;
  color: #5e515b;
}
tr.header,
input.header {
  /* background-color: #6c757d;  */
  background-color: #48606b;

  /* font-weight:bold; color:#000000; */
  font-weight: bold;
  color: white;
}

.msg {
  font-weight: bold;
  color: #000000;
  padding: 5px;
  width: 100%;
  border-radius: 5px;

  background: rgba(179, 175, 179, 1);
  background: -moz-linear-gradient(
    -45deg,
    rgba(179, 175, 179, 1) 0%,
    rgba(204, 204, 204, 1) 100%
  );
  background: -webkit-gradient(
    left top,
    right bottom,
    color-stop(0%, rgba(179, 175, 179, 1)),
    color-stop(100%, rgba(204, 204, 204, 1))
  );
  background: -webkit-linear-gradient(
    -45deg,
    rgba(179, 175, 179, 1) 0%,
    rgba(204, 204, 204, 1) 100%
  );
  background: -o-linear-gradient(
    -45deg,
    rgba(179, 175, 179, 1) 0%,
    rgba(204, 204, 204, 1) 100%
  );
  background: -ms-linear-gradient(
    -45deg,
    rgba(179, 175, 179, 1) 0%,
    rgba(204, 204, 204, 1) 100%
  );
  background: linear-gradient(
    135deg,
    rgba(179, 175, 179, 1) 0%,
    rgba(204, 204, 204, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3afb3', endColorstr='#cccccc', GradientType=1 );
}
tr.padrao {
  background-color: #ececdb;
}
tr.lin_impar {
  background-color: #f6f6f6;
  padding: 5px;
}
tr.lin_par {
  background-color: #e3e1e1;
  padding: 5px;
}
linha_1 {
  background-color: #f6f6f6;
  padding: 5px;
}
linha_2 {
  background-color: #e3e1e1;
  padding: 5px;
}
tr.lin_alerta {
  background-color: #ff0000;
  color: yellow;
}
tr.lin_alerta_par {
  background-color: #e3e1e1;
  color: #ff0000;
  font-style: italic;
  padding: 5px;
}
tr.lin_alerta_impar {
  background-color: #f6f6f6;
  color: #ff0000;
  font-style: italic;
  padding: 5px;
}
td.cborda {
  height: 20px;
}
td.line {
  border-bottom: solid #f6f6f6;
  border-bottom-width: 2px;
  padding: 8px;
}
a:link {
  color: #5e515b;
  text-decoration: none;
  cursor: pointer;
}
a:visited {
  color: #5e515b;
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  color: #5e515b;
  cursor: pointer;
}
a:active {
  color: #8a4500;
  cursor: pointer;
}
.href {
  color: #5e515b;
  text-decoration: none;
  cursor: pointer;
}
.negrito:hover {
  color: #ffe4ca;
  background-color: #ffe4ca;
  font-weight: bold;
}
a.menu:link {
  color: #5e515b;
  text-decoration: none;
}
a.menu:visited {
  color: #5e515b;
  text-decoration: none;
}
a.menu:hover {
  color: #5e515b;
}
a.menu:active {
  color: #999999;
}
a.barra:link {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
a.barra:visited {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
a.barra:hover {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
a.barra:active {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
a.barra-selected {
  color: white;
  background: #6c757d;
  background: #3a4d56;

  /* border-top: 1px solid #6c757d;
	border-top: 1px solid #3a4d56; */
}
a.no:link {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
a.no:visited {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
a.no:hover {
  color: #5e515b;
  text-decoration: none;
  cursor: pointer;
}
a.no:active {
  color: #8a4500;
  text-decoration: none;
  cursor: pointer;
}
.select,
.text,
.select3,
.text2,
input.text {
  height: 25px;
  line-height: 1.2em;

  background-color: #f6f6f6;
  /* font-family: FreeSans, sans-serif; */
  font-size: 12px;
  width: 200px;
  color: black;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
  vertical-align: middle;
}
.select-multiple {
  border: 1px solid #a4a4a4;
  border-radius: 4px;
  padding: 0px 25px 5px 5px;
  max-width: 200px;
}
.js-example-basic-single {
  color: black;
  font-size: 16px;
}
.select-multiple-lin {
  border: 1px solid #a4a4a4;
  border-radius: 4px;
  line-height: 1.2em;
  width: 200px;
}
.textarea_desc {
  height: 60px;
  background-color: #f6f6f6;
  /* font-family: FreeSans, sans-serif; */
  font-size: 11px;
  width: 200px;
  color: black;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.select_sol {
  height: 25px;
  line-height: 1.2em;
  padding: 0px 10px 5px 5px;
  background-color: #f6f6f6;
  /* font-family: FreeSans, sans-serif; */
  font-size: 12px;
  width: 570px;
  color: black;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.select:focus,
.text:focus,
.select3:focus,
.text2:focus,
input.text:focus,
.text3:focus,
.textarea:focus,
.textarea-script:focus,
.textarea2:focus,
.mini:focus,
.mini2:focus,
.data:focus,
.logon:focus,
.help:focus,
.select_sol:focus,
.textarea_desc:focus {
  background-color: white;
}
.checkbox {
  background-color: white;
  /* font-family: FreeSans, sans-serif; */
  color: black;
  border: 1px solid #a4a4a4;
}
.text3 {
  height: 25px;
  background-color: #f7f7f7;
  /* font-family: FreeSans, sans-serif; */
  font-size: 12px;
  width: 300px;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.quadro {
  height: 13px;
  width: 13px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}
input.disable,
select.disable {
  height: 25px;
  background-color: #f3f3f3;
  /* font-family: FreeSans, sans-serif; */
  font-size: 12px;
  width: 200px;
  color: black;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.textareaDisable {
  height: 40px;
  background-color: #f3f3f3;
  /* font-family: FreeSans, sans-serif; */
  font-size: 11px;
  width: 570px;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
td.disable {
  height: 25px;
  background-color: #f3f3f3;
  /* font-family: FreeSans, sans-serif; */
  font-size: 11px;
  width: 200px;
  color: black;
  border: 1px solid #a4a4a4;
}
td.borda,
tr.borda {
  height: 25px;
  background-color: white;
  /* font-family: FreeSans, sans-serif; */
  font-size: 11px;
  width: 200px;
  color: black;
  border: 1px solid #a4a4a4;
}
td.bordaprint {
  height: 25px;
  background-color: white;
  /* font-family: FreeSans, sans-serif; */
  font-size: 11px;
  width: 200px;
  color: black;
  border-bottom: 1px solid #a4a4a4;
}
.textarea {
  height: 100px;
  background-color: #f6f6f6;
  /* font-family: FreeSans, sans-serif; */
  font-size: 12px;
  width: 570px;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.textarea-script {
  height: 400px;
  background-color: #f6f6f6;
  /* font-family: FreeSans, sans-serif; */
  font-size: 12px;
  width: 570px;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.textarea2 {
  height: 100px;
  background-color: #f6f6f6;
  /* font-family: FreeSans, sans-serif; */
  font-size: 12px;
  width: 400px;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.radio {
  width: 13px;
}
.mini {
  height: 25px;
  background-color: #f6f6f6;
  /* font-family: FreeSans, sans-serif; */
  font-size: 12px;
  width: 30px;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.mini2 {
  height: 25px;
  background-color: #f6f6f6;
  /* font-family: FreeSans, sans-serif; */
  font-size: 12px;
  width: 90px;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.data {
  height: 25px;
  background-color: #f6f6f6;
  /* font-family: FreeSans, sans-serif; */
  font-size: 12px;
  width: 90px;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.help {
  height: 15px;
  background-color: #f6f6f6;
  /* font-family: FreeSans, sans-serif; */
  font-size: 11px;
  width: 80px;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.logon {
  height: 18px;
  background-color: #f6f6f6;
  /* font-family: FreeSans, sans-serif; */
  font-size: 11px;
  width: 80px;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.logon:hover {
  color: black;
  border: 1px solid black;
}
.new-logon {
  height: 30px;
  background-color: #f6f6f6;
  /* font-family: FreeSans, sans-serif; */
  font-size: 16px;
  width: 150px;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.new-logon:hover {
  color: black;
  border: 1px solid black;
}


/* ==== Botões ==== */
.cta-button {
    text-decoration: none;
    color: var(--cor-branco)!important;
    background-color: var(--cor-principal);
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.cta-button:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4); 
}

.btn-disabled{
    background-color: #6c757d !important;
    color: #fff !important;
    cursor: not-allowed;
    opacity: 0.65;
}

.btn {
  background-color: #4caf50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.btn-square {
  border-radius: 4px;
  padding: 5px 5px;
  font-size: 10px;
}

.btn-blue {
  background-color: #008cba; /* Blue */
} 

.btn-square:hover {
  border: 0.5px solid black;
  padding: 4.5px 4.5px;
  cursor: pointer;
}

.button {
  height: 20px;
  color: #333333;
  font-size: 12px;
  padding-left: 8px;
  padding-right: 8px;
  background: url("./bg.gif") repeat-x #f0f0f0;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.button:hover {
  color: black;
  border: 1px solid black;
}

.botao {
  flex-shrink: 0; /* impede o botão de encolher */
  min-width: 140px;
  padding: .5rem 2rem;
  background-color: var(--cor-carrinho-botao); /* verde claro */
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1rem;
  white-space: nowrap; /* impede quebra de linha no texto */
  

  border: none;
  background-color: var(--cor-principal);
  color: var(--cor-fundo-suave) !important;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;            
}
.botao:hover {
  color: #5e515b;
}

.botao-red {
  background-color: var(--cor-secundaria); /* vermelho */
  color: var(--cor-fundo-suave) !important;
}

input.blogin {
  height: 34px;
  color: #333333;
  font-size: 13px;
  padding-left: 8px;
  padding-right: 8px;
  background: url("./bg.gif") repeat-x #f0f0f0;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
input.blogin:hover {
  color: black;
  border: 1px solid black;
}
input.new-blogin {
  height: 54px;
  width: 150px;
  color: #333333;
  font-size: 16px;
  padding: 15 20;
  border-radius: 4px;

  background: url("./bg.gif") repeat-x #f0f0f0;
  border: 1px solid #a4a4a4;
}
input.new-blogin:hover {
  color: black;
  border: 1px solid black;
}
.button-disabled {
  height: 20px;
  color: #d0d0d0;
  font-size: 12px;
  padding-left: 8px;
  padding-right: 8px;
  background: url("./bg.gif") repeat-x #f0f0f0;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.minibutton {
  height: 15px;
  color: #333333;
  font-size: 9px;
  padding-left: 8px;
  padding-right: 8px;
  background: url("./bg.gif") repeat-x #f0f0f0;
  border: 1px solid #a4a4a4;
  border-radius: 4px;
}
.minibutton:hover {
  color: black;
  border: 1px solid black;
}
.button_new {
  height: 25px;
  background-color: #bdbdbc;
  color: black;
  border-radius: 4px;
}
.btPadrao {
  height: 25px;
  background-color: #ececdb;
  color: black;
  border-radius: 4px;
}
table.likebutton {
  padding-top: 10px;
}
a.likebutton,
td.likebutton {
  border-top: 1px solid #d9d9d9;
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-radius: 4px;
  background: #efefec;
  text-align: center;
}
a.likebutton {
  padding: 3px;
  margin-left: 5px;
}
.divAlerta {
  background-color: #fad163;
  color: #000000;
}
.relatorio {
  /* font-family: FreeSans, sans-serif; */
  font-size: 13px;
  background-color: white;
}
.parag {
  margin-left: 10%;
  margin-right: 10%;
  text-indent: 1cm;
  text-align: justify;
}
.parag_header {
  margin-left: 10%;
  margin-right: 10%;
}
p.titulo {
  font-family: tahoma;
  font-size: 15px;
  text-align: center;
  font-weight: bold;
}
.HNT {
  position: absolute;
  background: #ffffff;
  width: 300px;
  padding: 8px;
  border: 1px solid #d9d9d9;
}
.centro {
  margin: auto;
}
#login {
  position: absolute;
  left: 40%;
  top: 176px;
  width: 15%;
  height: 10%;
  z-index: 2;
}
#topo {
  margin: 5px;
  height: 40px;
}
#menu {
  position: absolute;
  top: 80px;
  left: 10px;
  width: 150px;
}
#corpo {
  margin-left: 170px;
  margin-right: 0px;
}
.alerta {
  position: relative;
  top: 30px;
  left: 30%;
  width: 50%;
  z-index: 1;
}

.destaque {
  color: #fff !important;
  background-color: #d2322d !important;
}

@-webkit-keyframes spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
.square {
  width: 50px;
  height: 50px;
  border-width: 5px;
  border-style: solid;
  border-color: #008080 #ccc;
  border-radius: 50px;
  -webkit-animation: spinning 0.55s infinite linear;
  animation: spinning 0.55s infinite linear;
}


.loading,
loading_middle,
loading_bottom {
  position: fixed;

  width: 50px;
  height: 50px;
  
  top: 50%;
  left: 50%;
  z-index: 5000;

  border-width: 5px;
  border-style: solid;
  /* border-color: #999 #ccc; */
  border-color: #008080 #ccc;
  /* border-color: #0074D9 #ccc; */
  border-radius: 50px;
  /* -webkit-animation: spinning 0.75s infinite linear; */
  -webkit-animation: spinning 0.55s infinite linear;
  /* animation: spinning 0.75s infinite linear; */
  animation: spinning 0.55s infinite linear;
}

#loading {
  position: fixed;

  width: 50px;
  height: 50px;
  
  top: 50%;
  left: 50%;
  z-index: 5000;

  border-width: 5px;
  border-style: solid;
  border-color: #008080 #ccc;
  border-radius: 50px;
  -webkit-animation: spinning 0.75s infinite linear;
  animation: spinning 0.75s infinite linear;
}



#square {
  position: fixed;

  width: 50px;
  height: 50px;
  top: 200;
  left: 500;
  z-index: 5000;

  border-width: 5px;
  border-style: solid;
  border-color: #008080 #ccc;
  border-radius: 50px;
  -webkit-animation: spinning 0.55s infinite linear;
  animation: spinning 0.55s infinite linear;
}

[data-title]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}
[data-title]:after {
  content: attr(data-title);
  font-size: 0.9em;
  position: absolute;
  bottom: -1.6em;
  left: 100%;
  padding: 8px;
  color: #222;
  white-space: nowrap; 
  -moz-border-radius: 4px; 
  -webkit-border-radius: 4px;  
  border-radius: 4px;  
  -moz-box-shadow: 0px 0px 4px #222;  
  -webkit-box-shadow: 0px 0px 4px #222;  
  box-shadow: 0px 0px 4px #222;  
  background: white;
  opacity: 0;
  z-index: 99999;
  visibility: hidden;
}
[data-title] {
  position: relative;
}

.color-box {
  width: 60px;
  height: 20px;
  display: inline-block;
  margin-right: 8px;
  border: 1px solid #000;
  border-radius: 4px; /* Cantos arredondados */
}

.table-result {
  font-size: medium;
  line-height: 1.4;
}

/* --- estilos Guia - Map --- */
.guia-navbar {
  background-color: #BBDFC7; /* linear-gradient(90deg, #ff7e5f, #feb47b);*/
  border-bottom: #8DC8A6;
  display: flex; 
  align-items: center; 
  justify-content: space-between;    
  height: 4rem;                    
}

/* ==== Estilo para o container de rolagem das páginas ==== */
/*
::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: linear-gradient(100deg,#BBDFC7,#256628)
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 6px;
    background: linear-gradient(100deg,#F0F0F0,#256628,#F0F0F0);
    border: 2px solid #131313
}

::-webkit-scrollbar-thumb:hover {
    -webkit-border-radius: 6px;
    background: linear-gradient(100deg,#F0F0F0,#256628,#F0F0F0);
    border: 2px solid #131313
}
*/
.container-de-rolagem {
    /* Define a altura como 100% da tela MENOS a altura da navbar */
    /* Presumi 44px de altura para a navbar, ajuste se for diferente */
    height: calc(100vh - 42px);

    /* Empurra o container para começar ABAIXO da navbar fixa */
    margin-top: 42px;

    /* Adiciona a rolagem vertical APENAS a este elemento */
    overflow-y: auto;

    /* Opcional: um padding para o conteúdo não colar nas bordas */
    padding: .8rem 1px 2rem 0px; /* Usei 1px para evitar colapso de margem, ajuste conforme necessário */

    display: grid;
}

/* Suas regras da scrollbar customizada, aplicadas ao container */
.container-de-rolagem::-webkit-scrollbar {
    width: 4px;
}

.container-de-rolagem::-webkit-scrollbar-track {
    background: linear-gradient(180deg, var(--cor-fundo), var(--cor-fundo-suave));
}

.container-de-rolagem::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: linear-gradient(180deg, var(--cor-fundo), var(--cor-principal), var(--cor-fundo));
}

.container-de-rolagem::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d3f0dd, #318235),green;
}

/* ==== Estilo para o container de rolagem do menu lateral ==== */
.menu-scroll {
    /* Define a altura como 100% da tela MENOS a altura da navbar */
    /* Presumi 44px de altura para a navbar, ajuste se for diferente */
    height: calc(100vh - 80px);
    
    /* Empurra o container para começar ABAIXO da navbar fixa */
    margin-top: 10px;

    /* Adiciona a rolagem vertical APENAS a este elemento */
    overflow-y: auto;
    overflow-x: hidden;

    /* Opcional: um padding para o conteúdo não colar nas bordas */
    padding: 0rem 0.5rem 6rem 0.3rem;

    display: grid;
}

/* Suas regras da scrollbar customizada, aplicadas ao container */
.menu-scroll::-webkit-scrollbar {
    width: 4px;
}

.menu-scroll::-webkit-scrollbar-track {
    background: linear-gradient(180deg, var(--cor-fundo), var(--cor-fundo-suave));
}

.menu-scroll::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: linear-gradient(180deg, var(--cor-fundo), var(--cor-principal), var(--cor-fundo));
}

.menu-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d3f0dd, #318235),green;
}


/* --- Estilos barra cabeçalho --- */
.header-div {
    display: none;
    width: 100%; /* Adjust width as needed */
    height: 140px; /* Adjust height as needed */
    background-image: url('/static/images/guia_local/campo_grande.png'); /* Replace with your image path */
    background-repeat: no-repeat; /* Prevent tiling */
    background-size: 100% auto; /* Adjust width to 100% and height automatically */
    background-size: cover; /* cover - fill background with image | Center the image horizontally */
    background-position: center; /* Center the image horizontally */
    text-shadow: 1px 2px 2px rgba(255, 255, 255, .6); /* Add text shadow for better readability */
    font-weight: 600;

    color: var(--cor-texto-principal); 
    align-content: center;

    background-color: rgb(172 247 223 / 51%);
    background-blend-mode: screen; /* Ajusta cor da imagem */

}        

/* --- Estilos menu --- */
.menu-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2e7d32;
  color: white;
  padding: 0.8rem 1.2rem;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

.logo {
  font-size: 1.2rem;
  font-weight: bold;
}

.menu-toggle {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  margin-right: 0.5rem;
  justify-content: center;
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background: rgb(13, 39, 26);
  border-radius: 2px;
}

.menu-lateral {
  position: fixed;
  top: 0;
  right: -280px;
  width: 280px;
  height: 100%;
  background: #BBDFC7;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
  transition: right 0.3s ease;
  z-index: 1001;
  padding: 0.5rem;
}

.menu-lateral ul {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

.menu-lateral li {
  margin-bottom: 1rem;
}

.menu-lateral a {
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--cor-texto-principal);
}

.menu-lateral .fechar {
  background: none;
  border: none;
  font-size: 2rem;
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  color: rgba(13, 39, 26, 1);
}

/* ▼▼▼ ESTILOS PARA O MENU COLLAPSE ▼▼▼ */
.menu-lateral .btn-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.3rem 0;
}

.menu-lateral .btn-toggle::after {
    width: 1.25em;
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform .35s ease;
    transform-origin: .5em 50%;
    margin-left: auto;
}

.menu-lateral .btn-toggle[aria-expanded="true"]::after {
    transform: rotate(90deg);
}

.menu-lateral .btn-toggle-nav a {
    display: block;
    padding: .25rem 1rem .25rem 3rem; /* Indentação para sub-itens */
    text-decoration: none;
    color: inherit;
}

.fundo-escuro {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

/* Quando ativo */
.fundo-escuro.ativo {
  opacity: 1;
  visibility: visible;
}

/* ==== Customização para display no formato "pílula" ==== */
.pill-stat {
    background-color: var(--cor-branco);
    border: 2px solid var(--cor-fundo);
    border-radius: 50px;  /* Cantos arredondados do contêiner principal */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.13);
    overflow: hidden;   /* ESSENCIAL: esconde as partes da borda interna que sobram */
    padding: inherit;
}

.pill-stat-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.8rem 1.5rem; /* Espaçamento interno */
    width: 100%;
    height: 100%;
    
    /* A borda real, aplicada no elemento interno */
    border-left: 5px solid transparent; 
}

.pill-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.pill-stat-label {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Estilo para o container da navegação "pílula" */
.nav-pills-custom-container {
    background-color: #e9ecef;
    border-radius: 50rem;
    padding: 0.25rem;
    display: inline-flex;
    transition: all 0.3s ease-in-out; /* Adicionado para suavizar a transição para mobile */
}

/* Estilo para os links da navegação (agora com seu estilo .titulo-dash) */
.nav-pills-custom-container .nav-link {
    color: var(--cor-principal); /* <-- Usando sua variável de cor */
    font-size: 1.2rem; /* Ajustado para um bom equilíbrio (era 1.4rem) */
    font-weight: 600; /* <-- Usando o font-weight do seu estilo */
    line-height: 1.2; /* <-- Usando o line-height do seu estilo */
    border-radius: 50px;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease-in-out;
    white-space: nowrap; /* Evita que o texto quebre em duas linhas */
}

/* Estilo para o link ATIVO */
.nav-pills-custom-container .nav-link.active {
    background-color: var(--cor-principal); /* Usando sua variável para o fundo ativo */
    color: white; /* Cor do texto do item ativo */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* Remove o fundo ao passar o mouse em itens inativos */
.nav-pills-custom-container .nav-link:not(.active):hover {
    background-color: transparent;
    color: var(--cor-principal);
    opacity: 0.8; /* Leve efeito de feedback no hover */
}

/* Aplicando cores da borda ao elemento interno */
.pill-stat-blue .pill-stat-content {
    border-color: #0d6efd;
    margin-left: -16px;
    border-width: 24px;
}

.pill-stat-green .pill-stat-content {
    border-color: var(--cor-principal);
    margin-left: -16px;
    border-width: 24px;
}

.pill-stat-red .pill-stat-content {
    margin-left: -16px;
    border-width: 24px;
    border-color: var(--bs-danger);
}

.pill-stat-month-select {
    max-width: 30rem;
    width: -webkit-fill-available;
    justify-self: center;
    text-align: center;
    margin: 1rem;
    padding: inherit;
    color: var(--cor-texto-principal) !important;
}

.text-red{
    color: var(--bs-danger) !important;
}

/* ==== Botão WhatsApp ==== */
.float-wa{
    position:fixed;
    right:18px;
    bottom: 90px; /* Fica acima do botão verde do carrinho */
    background:#25D366;
    color: var(--cor-branco)!important;;
    border-radius:999px;
    box-shadow:var(--shadow);
    padding:.9rem 1rem;
    display:flex;
    gap:.5rem;
    align-items:center;
    text-decoration: none !important;
    transition: transform 0.3s;
    z-index:40;
}

.float-wa:hover {
    transform: scale(1.05);
}
/* --------------------------------------------------------- */
/* --- AJUSTES PARA CELULAR (RESPONSIVIDADE) --- */
/* Estas regras só aplicam em telas com 768px de largura ou menos */
@media (max-width: 768px) {
    
    /* O container vira um bloco para ocupar a largura toda */
    .nav-pills-custom-container {
        display: block;
        border-radius: 1rem; /* Menos arredondado no mobile */
    }
    
    /* A lista de navegação agora permite que os itens se empilhem */
    .nav-pills-custom-container .nav {
        flex-direction: column; /* Empilhamos os itens verticalmente */
        display: grid; /* Usamos grid para garantir que cada item ocupe uma linha inteira */  
        width: 100%;
    }

    /* Um pequeno espaço entre os botões quando empilhados */
    .nav-pills-custom-container .nav-item:not(:last-child) {
        margin-bottom: 0.25rem;
    }

    /* O texto dos links fica centralizado no mobile */
    .nav-pills-custom-container .nav-link {
        text-align: center;
        font-size: 1.1rem; 
    }
  
    /* Padding padrão da página */
    .page-padding {
      padding-left: 0.5rem;
      padding-right: 0.25rem;
    }
        
}
/* --------------------------------------------------------- */


/* ==== Customização para display no formato "pílula" <FIM> ==== */

/* ==== Botão de Filtro / compartilhar  ==== */

.btn-group-horizontal {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    min-width: 175px;
    margin-left: 5px;
    justify-content: right;
}

.btn-out {
    height: 1.9rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--cor-texto-principal) !important;
}

/* ==== Botão de Filtro / compartilhar  <FIM> ==== */

/* ==== Lista de Lojas ==== */
.listaLojas{
    padding: .5rem;
    overflow-x: hidden;
    justify-self: center;
}

.loja-card {
    display: flex;
    background: white;
    border-radius: 12px; /* Aumentamos o arredondamento */
    box-shadow: 0 4px 4px rgba(187,223,199,.1); /* Sombra mais suave */
    margin-bottom: 0.5rem; /* Um pouco mais de espaço entre os cards */
    margin-top: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Removemos o padding daqui para a imagem colar na borda */
}
.loja-card:hover {
    transform: translateY(-4px); /* Efeito de elevação mais sutil */
    box-shadow: 0 8px 8px rgba(187,223,199,.15);

}
.loja-info {
    padding: 1rem 1.2rem; /* Aumenta o espaçamento interno */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Isso empurra o título para o topo e o container de tags para o fundo */
    min-height: 200px;
}
.loja-info h2 {
    font-weight: 700;
    font-size: 1.25rem; /* Título um pouco maior */
    color: var(--cor-principal);
    margin: 0; /* Margin inferior não é mais necessária */
    text-align: left;
}

.loja-info p {
    margin: 0.2rem 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.1;
}

.titulo-dash {
    font-size: 1.4rem;
    font-weight: 600 !important;
    border-left: 5px;
    padding-left: 5px;
    line-height: 1rem;
    color: var(--cor-principal);
}

/* SOLUÇÃO PARA IMAGEM UNIFORME: O "MOLDE" */
.loja-card-img-wrapper {
    width: 160px;
    height: 200px; /* Altura inicial igual à do card */
    flex-shrink: 0; /* Impede que o container da imagem encolha */
    overflow: hidden; /* Esconde qualquer parte da imagem que transbordar */
}
.loja-card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o "molde" sem distorcer */
    transition: transform 0.3s ease; /* Efeito de zoom sutil no hover */
}
.loja-card:hover .loja-card-img-wrapper img {
    transform: scale(1.05); /* Efeito de zoom no hover */
}

/* --- NOVOS ESTILOS PARA AS TAGS --- */

.tags-container {
    display: block;
    flex-wrap: wrap;   /* Permite que as tags quebrem a linha */
    gap: 0.5rem;       /* Espaçamento entre as tags */
    line-height: 2rem;
    /* margin-top: auto; foi removido, pois o justify-content já faz o trabalho */
}

.tag {
    background-color: var(--cor-tag-fundo);
    color: var(--cor-texto-principal);
    padding: 0.3rem 0.7rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #e0f0eb;
    white-space: nowrap; /* Evita que uma tag longa quebre a linha no meio */
    /* margin: 0;  Margin inferior não é mais necessária */
}

.tag-endereco {
    background-color: #F0F9F7; /* Usando a cor da sua paleta */
    color: var(--cor-principal);
    padding: 0.3rem 0.7rem;
    border-radius: 15px;
    font-size: 0.6rem;
    font-weight: 600;
    border: 1px solid #e0f0eb;
    /* margin: 0;  Margin inferior não é mais necessária */
    text-wrap: pretty;
}


/* ==== Carrossel - Style Ini ==== */
.carousel {
    position: relative;
    margin: 1.2rem 0;
    padding: 0 48px 16px; /* espaço para botões */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;        
    justify-self: auto;    
}
.carousel .carousel-scroll {
    display: flex;
    gap: var(--gap);
    will-change: transform;
    overflow: hidden;
    padding-bottom: .2rem;
}
.card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 240px;
    max-width: 320px;
    border: none;
    border-radius: 12px;
    background: #00000000;
    cursor: pointer;
    transition: box-shadow .2s ease;
    user-select: none;
    overflow: hidden;
    margin-left: 8px;
    margin-right: 8px;  
    margin-bottom: 2px;
    box-shadow: var(--sombra-card);
    padding: 0;    
    text-align: left;
}

.card:hover, .card:focus-visible {
    box-shadow: 0 4px 4px  rgba(30, 76, 70, .3);
    outline: none;
    
    transform: scale(1.01); /* Alterar o tamanho impacta na rolagem */
    transition: transform 0.2s ease-in-out;
    
    opacity: 0.9;            
}
.card img {
    flex: 0 0 auto;
    width: 100%;
    height: 180px;     /* altura fixa */
    object-fit: cover; /* corta e preenche */
    object-position: center; /* centraliza o corte */
    border-radius: 12px 12px 0 0;
    box-shadow: 0 4px 4px rgba(187,223,199,.15);
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;            
    border-bottom: ridge;
    border-color: mintcream;
}
.card .nomeTitle {
    font-weight: 600;
    font-size: 1.3rem;
    text-align: left;
    color: var(--cor-principal);    

    margin-top: 8px;
    margin-bottom: 4px;
}
.card .addr {
    font-weight: 400;
    font-size: .9rem;
    color: #444;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .4rem;
}
.card-text{
    width: 100%;
    display: grid;
    padding: 0 1rem 0 1rem;
}
.card-header {
    color: var(--cor-texto-principal) !important;
    font-weight: 600;
}
.card-body{
    color: var(--cor-texto-principal) !important;
}

.nav_carrossel {
    position: absolute;
    top: 50%;
    transform: translateY(-75%);
    width: 30px;
    height: 36px;
    border: none;
    border-radius: 18px;
    background: #00000000;
    cursor: pointer;
    font-size: 32px;
    display: grid;
    place-items: center;
}
.nav_carrossel:focus-visible { outline: 2px solid #4CAF50; }
.nav_carrossel.prev { left: 4px; }
.nav_carrossel.next { right: 4px; }

/* Acessibilidade: esconder texto, mostrar ícones */
.nav_carrossel span { font-size: 20px; line-height: 1; }

/* ==== Carrossel - Style Fim ==== */


/* ==== Microsite Loja - Style Ini ==== */

.container-limit {
    max-width: 96vw;
    margin: 0.75rem 0.9rem 0.75rem 0.9rem;
}
.titulo-loja {
    font-size: 2.8rem; 
    font-weight: 700; 
    margin-bottom: 20px; 
    border-left: 5px solid var(--cor-principal); 
    padding-left: 15px; 
    line-height: 1.2;
    color: var(--cor-principal);
}

/* ==== Categorias ==== */
.categoria-loja {
    display: inline-block;
    background-color: var(--cor-principal); /* Fundo escuro */
    color: var(--cor-branco);              /* Texto claro */
    padding: 4px 18px 4px 18px; /* Ligeiramente maior para mais destaque */
    border-radius: 50px;
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 1rem;
    width: fit-content;
    height: fit-content;
}

.categoria {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    max-width: 100px;
    cursor: pointer;
    user-select: none;

    font-weight: 600;
    font-size: 0.95rem;
    color: var(--cor-principal);
  }

.categoria img {
    height: 72px;
    width: auto;
    margin-bottom: 2px;
}

.categoria:hover img {
    background: radial-gradient(circle, #fffb0240, #00000000);
}


.tags-produtos { 
    display: flex; 
    flex-wrap: wrap;
    gap: 8px; 
    margin-bottom: 30px; 
}

/* ALTERAÇÃO (feita por você): Nova cor de fundo para as tags de produto */
.tag-produto {
    background-color: var(--cor-tag-fundo);
    color: var(--cor-principal);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* ==== Microsite Loja - Style Fim ==== */


/* ==== Preview da imagem - Style Ini ==== */
.preview-area { 
    text-align: center; 
    justify-items: center;
    padding: 1rem;
}
#preview-area { 
    text-align: center; 
    justify-items: center;
    padding: 1rem;
}
#preview-image { 
    max-width: 100%; 
    height: auto; 
    max-height: 400px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
}
#exif-area { 
    background-color: #f9f9f9; 
    padding: 1rem; 
    border-radius: 4px; 
    border: 1px solid #eee; 
    height: -webkit-fill-available; 
    align-content: space-between;    
    overflow-x: hidden;
    padding: 2rem;
}
#exif-data { 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    font-family: 'Courier New', Courier, monospace; 
    font-size: 14px; 
    line-height: 0.4rem; 
    color: #555; 
}
.info-header { 
    font-size: 1.2em; 
    font-weight: bold; 
    margin-bottom: 10px; 
}
.info-item { 
    line-height: 1rem; 
    margin: 0; 
    padding: 0; 
}
/* ==== Preview da imagem - Style Fim ==== */

/* ==== Campos de sugestão (lista com imagem abaixo do campo) - Style Ini ==== */
#sugestoes-lojas {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 0 0 4px 4px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sugestao-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s;
}

.sugestao-item:hover, .sugestao-item.selecionado {
    background-color: #e8f5e8 !important;
}

.sugestao-foto {
    width: 36px;
    height: 28px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.sugestao-info h4 {
    margin: 0 0 2px 0;
    font-size: 14px;
    font-weight: 600;
    color: #2e7d32;
}

.sugestao-info p {
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.2;
}        

/* ==== Menu - Navbar ==== */
.menu-pill {
    background-color: var(--cor-branco);
    color: var(--cor-texto-principal);
    padding: 0.3rem 0.7rem;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    border: 1px solid var(--cor-suporte);
    white-space: nowrap;
}

.menu-pill.ativo {
    background-color: var(--cor-principal); /* Usando sua variável para o fundo ativo */
    color: var(--cor-branco)!important; /* Cor do texto do item ativo */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.menu-pill.ativo a {
    color: var(--cor-branco)!important; /* Cor do texto do item ativo */
    font-weight: 600;
}

.navbar-nav > li {
    margin: 10px;
    padding-left: 16px;
    padding-right: 16px;
}

.menu-slide-pill {
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    padding: 0.3rem 0.7rem;
    border-radius: 25px;
    font-size: 1.2rem;
    font-weight: 600;
    border: 1px solid var(--cor-suporte);
    white-space: nowrap;
}

.menu-slide-text {
    color: var(--cor-texto-principal);
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ==== Campos de sugestão (lista com imagem abaixo do campo) - Style Fim ==== */

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
}

.data-grid {
    display: grid;
    text-align: right;
}



/* ========================================================
    CSS - MENSAGENS RÁPIDAS NO FINAL DA TELA (TOAST)
    ======================================================== */

/* Mensagens de adicionar item - Container que segura as mensagens e fica fixo na tela */
  
.toast-container {
    position: fixed; 
    top: 2rem;                /* Distância do topo da tela  - Precisa aparecer acima da imagem do carrinho para não sujar o visual no celular */
    right: 2rem;              /* Distância da direita */
    z-index: 10100;            /* Fica por cima de tudo */
    display: flex; 
    flex-direction: column; 
    gap: 10px;                /* Espaço se tiver mais de uma mensagem ao mesmo tempo */
    pointer-events: none;     /* Para não atrapalhar os cliques na página */
}

/* Mensagens - O visual da mensagem em si */
.toast-mensagem {
    min-width: 250px; 
    padding: 8px 16px; 
    border-radius: 50px; 
    color: var(--cor-branco);
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0; 
    transform: translateX(100%); 
    transition: all 0.3s ease;
    background-color: var(--cor-carrinho-botao); /* cor default */

    /* Animação de entrada */
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Efeito de "pulo" suave */
}
.toast-mensagem.mostrar { opacity: 1; transform: translateX(0); }
.toast-sucesso { background-color: var(--cor-carrinho-botao); } /* Verde Padrão */
.toast-aviso { background-color: #ffc107; color: #333; } /* Amarelo */
.toast-erro { background-color: #5A1822; color: #fff; } /* Vermelho Vinho Escuro (Melhor Leitura) */




/* Mensagens de adicionar item - Classe que o JS vai adicionar para mostrar a mensagem */
.toast-mensagem.mostrar {
    transform: translateX(0);
    opacity: 1;
}

/* ========================================================
    CSS PARA E-COMMERCE (Cards, Modais, Carrinho Flutuante)
    Obs: Depois você pode mover para o seu style.css
    ======================================================== */

/* Grid de Produtos */
.produtos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; padding: 20px 0; }
.produto-card { background: #fff; border-radius: 12px; padding: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #eaeaea; transition: transform 0.2s; }
.produto-card:hover { transform: translateY(-3px); }
.produto-categoria { font-size: 0.75rem; color: #666; background: #f0f0f0; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; font-weight: bold; }
.produto-nome { font-size: 1.1rem; margin: 10px 0; color: #333; }
.produto-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.produto-preco .valor { font-size: 1.3rem; font-weight: bold; color: #2c3e50; }
.btn-adicionar { background-color: var(--cor-primaria, #25D366); color: white; padding: 8px 15px; border-radius: 8px; border: none; font-weight: bold; cursor: pointer; }

/* Modal do Produto (Bottom Sheet) */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 10000; align-items: flex-end; justify-content: center; }
.bottom-sheet { background: #fff; width: 100%; max-width: 600px; max-height: 90vh; border-radius: 20px 20px 0 0; padding: 20px; overflow-y: auto; position: relative; animation: slideUp 0.3s ease-out; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.fechar-modal { position: absolute; top: 15px; right: 20px; background: #f0f0f0; border: none; border-radius: 50%; width: 30px; height: 30px; font-weight: bold; cursor: pointer; }

/* Grupo de Opcionais */
.grupo-opcional { margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px; }
.cabecalho-grupo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.badge-obrigatorio { font-size: 0.75rem; background: #e74c3c; color: white; padding: 2px 6px; border-radius: 5px; }
.item-opcional { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f9f9f9; cursor: pointer; }

/* Rodapé do Modal de Produto */
.rodape-modal { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; position: sticky; bottom: 0; background: #fff; padding: 15px 0; border-top: 1px solid #eee; }
.seletor-quantidade { display: flex; align-items: center; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; }
.seletor-quantidade button { background: #fff; border: none; padding: 10px 15px; font-size: 1.2rem; cursor: pointer; }
.seletor-quantidade span { padding: 0 15px; font-weight: bold; }
.btn-destaque { background: var(--cor-primaria, #25D366); color: white; border: none; padding: 12px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; flex-grow: 1; margin-left: 15px; }

/* Botão Flutuante do Carrinho */
.carrinho-flutuante { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px; background: var(--cor-primaria, #25D366); color: white; padding: 12px 16px; border-radius: 50px; justify-content: space-between; align-items: center; cursor: pointer; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4); z-index: 9998; font-weight: bold; transition: 0.3s; }
.carrinho-flutuante:hover { transform: translateX(-50%) scale(1.02); }

/* Gaveta Lateral (Checkout) */
.drawer-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 10001; justify-content: flex-end; }
.side-drawer { background: #fff; width: 100%; max-width: 400px; height: 100%; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; animation: slideLeft 0.3s ease-out; }
@keyframes slideLeft { from { transform: translateX(100%); } to { transform: translateX(0); } }
.checkout-body { color: var(--cor-principal); }
.checkout-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; color: var(--cor-principal); }
.btn-voltar-drawer { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--cor-principal); font-weight: bolder; }
.form-checkout input, .form-checkout select { width: 100%; padding: 12px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 8px; }
.opcoes-entrega { display: flex; gap: 15px; margin-bottom: 15px; justify-content: space-evenly; font-size: 1.2rem; }
.checkout-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid #eee; align-self: center;}
.btn-enviar-pedido { width: 100%; background: var(--cor-primaria, #25D366); color: white; border: none; padding: 15px; border-radius: 8px; font-weight: bold; font-size: 1.1rem; cursor: pointer; }
.resumoPedido {
    margin-bottom: 20px;
    font-weight: bold;
    border: unset;
    border-color: var(--sombra-suave);
    color: var(--cor-principal);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* ==== Lista de Produtos ==== */
.produtos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Responsivo automático */
    gap: 15px;
    padding: 10px;
}

.produto-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Sombra suave dá profundidade */
    border: 1px solid #eaeaea;
    transition: transform 0.2s;
}

.produto-card:hover {
    transform: translateY(-3px); /* Efeitinho tátil ao passar o mouse */
}

.produto-categoria {
    font-size: 0.75rem;
    color: #666;
    background: #f0f0f0;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: bold;
}

.produto-nome {
    font-size: 1.1rem;
    margin: 10px 0;
    color: #333;
}

.produto-rodape {
    display: flex;
    justify-content: space-between; /* Preço de um lado, botão do outro */
    align-items: center;
    margin-top: 15px;
}

.produto-preco .valor {
    font-size: 1.2rem;
    font-weight: bold;
    color: #2c3e50;
}

.btn-pedir {
    background-color: var(--cor-primaria, #25D366); /* Usando a cor customizada! */
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
}

/* ==== Painel Configuração - Lojista  ==== */

.img-fluid {
    width:300px;
    height:300px; 
    object-fit:cover; 
    border-radius:8px;
    margin-bottom: 10px; 
    margin-top: 20px;
}

.tema-select {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 1rem;
}

/* ==== Tela do Painel de Pedidos - Lojista ==== */

.kanban-board {
    display: flex; gap: 20px; padding: 20px; overflow-x: auto;
    /*align-items: flex-start;*/ /* Impede que as colunas estiquem desnecessariamente */
    align-items: stretch; /* Garante que as colunas tenham a mesma altura, mesmo com pouco conteúdo */
}

.kanban-coluna {
    background: #e3e8ee; 
    border-radius: 10px; 
    min-width: 300px; 
    flex: 1;
    display: flex; 
    flex-direction: column; 
    max-height: 85vh;
}

.coluna-header { padding: 15px; border-bottom: 2px solid #d1d8e0; }
.coluna-header h2 { font-size: 1.1rem; color: #2c3e50; }

.coluna-novos .coluna-header { border-top: 5px solid #e74c3c; } /* Vermelho alerta */
.coluna-preparando .coluna-header { border-top: 5px solid #f39c12; } /* Amarelo/Laranja */
.coluna-prontos .coluna-header { border-top: 5px solid #3498db; } /* Azul */

.coluna-body { 
  padding: 15px 15px 20px 15px; 
  overflow-y: auto; 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  gap: 15px; 
  scrollbar-width: thin;
}

/* ==== Design do Cartão do Pedido ==== */
.pedido-card {
    background: white; border-radius: 8px; padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-left: 4px solid #bdc3c7;
}

.card-header { display: flex; justify-content: space-between; margin-bottom: 10px; color: #7f8c8d; font-size: 0.9rem;}
.pedido-id { font-weight: bold; color: #2c3e50; font-size: 1.1rem; }

.cliente-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.btn-whats { background: #25D366; color: white; padding: 3px 8px; border-radius: 15px; text-decoration: none; font-size: 0.8rem; font-weight: bold;}

.pedido-itens { background: #f9f9f9; padding: 10px; border-radius: 5px; font-size: 0.95rem; margin-bottom: 15px; color: #555; }

.pedido-footer { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 0.9rem;}
.badge-pagamento { background: #ecf0f1; padding: 3px 8px; border-radius: 5px; }
.badge-tipo.delivery { color: #e67e22; font-weight: bold; }
.badge-tipo.retirada { color: #8e44ad; font-weight: bold; }
.badge-suave {
    background: var(--cor-fundo-suave);
    color: var(--cor-texto-principal) !important;
    font-weight: 600;
    border-radius: 50px;
}

/* ==== Botões de Ação ==== */
.btn-acao {
    width: 100%; padding: 12px; border: none; border-radius: 6px;
    font-size: 1rem; font-weight: bold; color: white; cursor: pointer; transition: 0.2s;
}

.btn-aceitar { background: #27ae60; }
.btn-aceitar:hover { background: #2ecc71; }

.btn-pronto { background: #2980b9; }
.btn-concluir { background: #8e44ad; }

/* Responsividade para Celulares */
@media (max-width: 768px) {
    .kanban-board { flex-direction: column; }
    .kanban-coluna { min-width: 100%; }
}

/* ==== Texto do link para página de detalhes e botão voltar ====*/
.text-primary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
    font-size: 1.1rem;
}

.text-blue {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

/* ==== Cabaçalho da tabela ==== */
.table thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #dddddd;
    font-size: medium;
    font-weight: 700;
    color: var(--cor-texto-principal);
}

.img-display{
    margin-top: 8px;
    margin-bottom: 8px;
}

.invisivel {
  color: #00000000;
  /*opacity: 0;*/
}

/* ==== Footer ==== */
footer {
    background: var(--cor-texto-principal);
    color: var(--cor-fundo);
    text-align: center;
    border-radius: 8px;
    padding: 10px 20px;
    margin-top: 1rem;
    margin-bottom: -0.75rem;
    max-height: 160px;
    align-self: self-end;    
}


/* ====  O "Interruptor" (Toggle Switch) ==== */
.custom-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2f3640;
}

.custom-switch .switch-box {
    position: relative;
    width: 32px;
    height: 18px;
    background-color: #dcdde1;
    border-radius: 20px;
    transition: all 0.3s;
}

.custom-switch .switch-box::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: all 0.3s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Quando o checkbox invisível está marcado */
.custom-switch input {
    display: none; /* Escondemos o checkbox padrão */
}

.custom-switch input:checked + .switch-box {
    background-color: #2ed573; /* Fica verde! */
}

.custom-switch input:checked + .switch-box::after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
}

/* ================================================================ */
/* SOLUÇÃO PARA CELULAR: MUDANÇA PARA O LAYOUT VERTICAL             */
/* Este bloco só será aplicado em telas com largura máxima de 600px */
/* ================================================================ */

@media (max-width: 768px) {
    .loja-card {
        /* 1. Mantemos o layout horizontal e a altura automática */
        height: auto;
        
        /* 2. Alinhamos os itens ao topo. Isso permite que a imagem 
              seja mais alta que a caixa de texto ao lado. */
        align-items: flex-start;
    }

    .tag {
        padding: 0.2rem 0.7rem;
    }

    .loja-card-img-wrapper {
        /* 3. Definimos uma largura menor para dar espaço ao texto
              e uma altura maior para dar destaque à imagem. */
        width: 140px;
    }
    
    .loja-info {
        /* 4. Reduzimos um pouco o padding para otimizar o espaço */
        padding: 0.8rem;
    }

    .tags-container {
        margin: 0.75rem 0.75rem 0.75rem 0.75rem;
    }

    .header-div h1 {
        font-size: 2rem;
        font-weight: 600;
    }

    footer {
        max-height: 220px;
        height: 220px;
    }

}

@media (max-width:992px) {
    .navbar-nav > li {
        margin: 2px;
        padding: 4px;
    }
  }

@media (min-width: 1300px) {
    .container-limit {
        max-width: 1280px;
    }
}