* { box-sizing: border-box; margin: 0; padding: 0; font-family: Roboto,BlinkMacSystemFont,"Segoe UI",-apple-system,Helvetica,Arial,sans-serif; }

/* ==========================================================================
       DEFINIÇÃO DOS TEMAS (CSS VARIABLES)
========================================================================== */
body{
	background-color: var(--Bg);
}
   /* 1. TEMA CLARO (Default / Light) */
    :root, body[data-theme="light"] {
	background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(204, 204, 255, 0.5)), url('imagens/fundoClaro.jpg') !important; 
	background-size: contain !important; 
	background-size: cover !important; 
	background-position: center center !important; 
	background-attachment: fixed !important;
  --bg:#f8f9fa;
  --text:#212529;
  --muted:#495057;
  --borda: #000000FF;
  --card:#fcfcfc;
  --01Border: #0a9d40EE;
  --01Bg: #BACABA66;
  --02Border: #cfab00FF;
  --02Bg: #FFFF000A;
  --03Border: #0d46bbEE;
  --03Bg: #37c4f222;
  --04Border: #c908beEE;
  --04Bg: #FF99FF11;
  --05Border: #825b06FE;
  --05Bg: #99663322;
  --06Border: #FF0000EE;
  --06Bg: #FF000017;  
  --border:#dee2e6;
  --shadow:rgba(0,0,0,0.05);
  --inputBorder:#ced4da;
  --btn:#90B5B5;
  --btnActive:#1c7ed6;
  --danger:#fa5252; 
  --dangerActive:#e03131; 
  --dangerBg:#FFEEEE99; 
  --warnBorder:#ffc9c9;
  --atencao: #FFFFCC44;
  --liBg:#FFFFFFAA; 
  --liBorder:#ced4da;
  --liBgComprado:#d1d1d1; 
  --liBorderComprado:#999999;
  --catAccent:#4cb050; 
  --catAccentBg:#e8f5e9;
  --badge:#6c757d; 
  --badgeText:#fff;
  --qtdText:#2b8a3e; 
  --qtdBorder:#c3e6cb; 
  --qtdBg:#fff;
  --focus:rgba(77,171,247,0.2);
  --themeToggleBg:#f1FFf177; 
  --codeBg:rgba(0,0,0,0.05);
  --themeBtnBg: #f1f3f544; 
  --sup:#AECACA;
  --select:#C8DBDB;
  --bg_mdp:#C8DBDBEE;
  --card2:#ffffff;
  --fabBg:#99FFCC77;
  --fabBgActive:#61CD76;
  --inputBg: #EEEEEE;
  --input: #000000;
  --inputPlace: #777777;
  --shadow: 0 2px 8px rgba(26,140,91,.12);
  --forte: #006600;
  --fraco: #E7FFE7;
  --laranja: #FF660099;
}

    /* 2. TEMA ESCURO (Dark) */
    body[data-theme="dark"] {
	background-image: linear-gradient(rgba(55, 111, 55, 0.1), rgba(0, 0, 0, 0.7)), url('imagens/fundoEscuro.jpg') !important; 
	background-size: contain !important; 
	background-size: cover !important; 
	background-position: center center !important; 
	background-attachment: fixed !important;
  --bg:#001D00;
  --text:#e9ecef;
  --muted:#adb5bd;
  --borda: #FFFFFF;
  --01Border: #4CD64C99;
  --01Bg: #BBEEBB44;
  --02Border: #e9c603DD;
  --02Bg: #FFFF000A;
  --03Border: #00BEDA;
  --03Bg: #37c4f222;
  --04Border: #FF99FFFE;
  --04Bg: #FF99FF11;
  --05Border: #996633FF;
  --05Bg: #99663322;
  --06Border: #FF0000CC;
  --06Bg: #FF000017;  
  --sup:#013047;
  --select: #005279;
  --bg_mdp: #005279EE;
  --card:rgba(255,255,255,0.06);
  --card2:#141c2e;
  --border:rgba(255,255,255,0.12);
  --shadow:rgba(0,0,0,0.35);
  --inputBorder:rgba(255,255,255,0.18);
  --btn:#336699; 
  --btnActive:#3b8fd6;
  --liBgComprado:#666633; 
  --danger:#ff6b6b; 
  --dangerActive:#ff4d4d; 
  --dangerBg:rgba(255,107,107,0.12); 
  --warnBorder:rgba(255,107,107,0.45);
  --liBg:#0b122099; 
  --liBorder:rgba(255,255,255,0.14);
  --catAccent:#40c057; 
  --catAccentBg:rgba(64,192,87,0.12);
  --badge:rgba(255,255,255,0.22); 
  --badgeText:#f8f9fa;
  --qtdText:#40c057; 
  --qtdBorder:rgba(64,192,87,0.45); 
  --qtdBg:rgba(255,255,255,0.04);
  --focus:rgba(77,171,247,0.25);
  --themeToggleBg:#55667777; 
  --codeBg:rgba(0,0,0,0.05);
  --themeBtnBg: #f1f3f544; 
  --fabBg:#666633AA;
  --fabBgActive:#004F00;
  --inputBg: #CCFFFF;
  --input: #333333;
  --inputPlace: #999999;
  --shadow: 0 2px 8px rgba(255,255,255,.1);
  --forte: #041968;
  --fraco: #E7E7FF;
}
    /* 3. TEMA ROSA (Pink) */
    body[data-theme="rosa"] {	
	--bg: #fff0f6;
	--text: #44122b;
	--muted: #8a3b62;
	--card: #ffffff;
	--card2: #f783ac;
	--Border: #fcc2d7;
	--borda: #FFFFFF;
	--01Border: #bd03bfDD;
	--01Bg: #FFE6FFCC;
	--02Border: #7a03bfEE;
	--02Bg: #FFE6FFCC;
	--03Border: #bd03bfDD;
	--03Bg: #FFE6FFCC;
	--04Border: #7a03bfEE;
	--04Bg: #FFE6FFCC;
	--05Border: #bd03bfDD;
	--05Bg: #FFE6FFCC;
	--06Border: #FF0303EE;
	--06Bg: #FFE6E633;
	--liBgComprado:#EBD7FF; 
	--shadow: rgba(214, 51, 108, 0.33);
	--sup: #EE77BB;
	--select: #fcc2d7;
	--bg_mdp: #fcc2d7EE;
	--card:rgba(255,255,255,0.06);
	--btn: #CC0066;
	--btnActive: #d6336c;
	--inputBorder:rgba(255,255,255,0.18);
	--danger:#ff6b6b; 
	--dangerActive:#ff4d4d; 
	--dangerBg:rgba(255,107,107,0.12); 
	--warnBorder:rgba(255,107,107,0.45);
	--liBg: #fff5f8AA;	
	--catAccent:#40c057; 
	--catAccentBg:rgba(64,192,87,0.12);
	--badge:rgba(255,255,255,0.22); 
	--badgeText:#f8f9fa;
	--qtdText:#40c057; 
	--qtdBorder:rgba(64,192,87,0.45); 
	--qtdBg:rgba(255,255,255,0.04);
	--focus:rgba(77,171,247,0.25);
	--themeToggleBg:#55115533;
	--codeBg:rgba(255,255,255,0.08);
	--themeBtnBg: rgba(255,255,255,0.12);
	--fabBg: #f783ac77;
	--fabBgActive: #C61C57;
	--input: #FFFFFF;
	--inputPlace: #FFC6FF;
	--inputBg: #f783ac;
	--liBorder: #d6336c;
	--bg-image: linear-gradient(rgba(255, 222, 235, 0.5), rgba(252, 194, 215, 0.3));
	--forte: #770077;
	--fraco: #FFD7FF;
		background-image: url('imagens/fundoRosa.jpg')!important; 
		background-size: cover !important; 
		background-position: center center !important; 
		background-attachment: fixed !important;
    }
	
   /* 4. TEMA AZUL (Tons de Azul e Oceano) */
    body[data-theme="azul"] {
  --bg: #eef9ff;
  --text: #053b50;
  --muted: #176b87;
  --borda: #FEFEFE;
  --card: #ffffff;
  --card2: #f0f8ff;
  --sup: #3F7DBC;
  --select: #9FCFFF;
  --bg_mdp: #9FCFFFEE;
  --fabBg: #6CCFFF77;
  --fabBgActive: #002677;
  --inputBg: #f0f8ff;
  --input: #053b50;
  --inputPlace: #64ccc5;
  --shadow: 0 2px 8px rgba(0, 100, 150, 0.12);
  --01Border: #002677DD;
  --01Bg: #E6F7FFAA;
  --02Border: #0327daCC;
  --02Bg: #D7EBFF99;
  --03Border:#002677DD;
  --03Bg: #E6F7FFAA;
  --04Border: #0327daCC;
  --04Bg: #D7EBFF99;
  --05Border: #002677DD;
  --05Bg: #E6F7FFAA;
  --06Border: #FF2727CC;
  --06Bg: #FFEBFF22;
  --border: #b0e0e6;
  --inputBorder: #64ccc5;
  --btn: #176b87;
  --btnActive: #053b50;
  --danger: #e76f51; 
  --dangerActive: #d64a27; 
  --dangerBg: #fff2ef; 
  --warnBorder: #f4a261;
  --atencao: rgba(233, 196, 106, 0.2);
  --liBg: #f4fbffAA; 
  --liBorder: #b0e0e6;
  --liBgComprado: #d0e8f2; 
  --liBorderComprado: #89c4d6;
  --catAccent: #00a896; 
  --catAccentBg: #e0f7f5;
  --badge: #176b87; 
  --badgeText: #ffffff;
  --qtdText: #028090; 
  --qtdBorder: #64ccc5; 
  --qtdBg: #ffffff;
  --focus: rgba(100, 204, 197, 0.4);
  --themeToggleBg: #7777AA44;
  --codeBg: rgba(5, 59, 80, 0.06);
  --themeBtnBg: rgba(5, 59, 80, 0.08);
  --bg-image: linear-gradient(rgba(224, 247, 250, 0.6), rgba(178, 235, 242, 0.4));
  --forte: #004080;
  --fraco: #E7E7FF;
	background-image: url('imagens/fundoAzul.jpg')!important; 
	background-size: cover !important; 
	background-position: center center !important; 
	background-attachment: fixed !important;
	}
	
    /* 5. TEMA BLACK (Amoled OLED) */
    body[data-theme="black"] {
  --bg: #333333;
  --text: #ffffff;
  --muted: #a0a0a0;
  --Borda: #333333;
  --borda: #EEEEEE;
  --card: #121212;
  --card2: #1e1e1e;
  --sup: #555555;
  --select: #474747;
  --bg_mdp: #777777EE;
  --fabBg: #00000077;
  --fabBgActive: #002200;
  --inputBg: #181818;
  --input: #ffffff;
  --inputPlace: #666666;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  --01Border: #222222;
  --01Bg: #EFEFEF66;
  --02Border: #222222EE;
  --02Bg: #AAAAAA77;
  --03Border: #222222;
  --03Bg: #EFEFEF66;
  --04Border: #222222EE;
  --04Bg: #AAAAAA77;
  --05Border: #222222;
  --05Bg: #EFEFEF66;
  --06Border: #FF2222EE;
  --06Bg: #AA888844;  
  --border: #222222;
  --inputBorder: #333333;
  --btn: #333344;
  --btnActive: #555555;
  --danger: #ef4444; 
  --dangerActive: #dc2626; 
  --dangerBg: rgba(239, 68, 68, 0.15); 
  --warnBorder: rgba(234, 179, 8, 0.3);
  --atencao: rgba(255, 255, 0, 0.1);
  --liBg: #111111CC; 
  --liBorder: #2a2a2a;
  --liBgComprado: #222222; 
  --liBorderComprado: #444444;
  --catAccent: #22c55e; 
  --catAccentBg: rgba(34, 197, 94, 0.15);
  --badge: #333333; 
  --badgeText: #ffffff;
  --qtdText: #4ade80; 
  --qtdBorder: rgba(34, 197, 94, 0.3); 
  --qtdBg: #121212;
  --focus: rgba(59, 130, 246, 0.4);
  --themeToggleBg: #77777777;
  --codeBg: rgba(255, 255, 255, 0.08);
  --themeBtnBg: rgba(255, 255, 255, 0.1);
  --bg-image: none;
  --forte: #000000;
  --fraco: E7E7E7;
	background-image: url('imagens/fundoPreto.jpg')!important; 
	background-size: cover !important; 
	background-position: center center !important; 
	background-attachment: fixed !important;
    }



body{
  min-height: 100vh;
  background-color: var(--bg);
  color:var(--text);
  padding-top:16px;
  transition:background 180ms,color 180ms;
}
.tudo{
	background-color: var(--Bg);
	min-width: 100vh !important;
	min-height: 100vh !important;
}
h1{font-size:1.5rem;color:var(--text);margin-bottom:20px;text-align:center;font-weight:800;letter-spacing:.2px;}
h2{font-size:1.05rem;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px;font-weight:800;}

.superior{
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3.8rem;
	background: var(--sup);
	padding: 0 16px;
	box-shadow: 0 2px 8px var(--shadow);
	border-bottom: 1px solid var(--border);
	z-index: 1000;
	display: flex;
	flex-direction: row;       /* Deixa lado a lado (já é o padrão) */
	justify-content: space-between;
	align-items: center;  /* Centraliza na vertical (altura) */
	flex-wrap: nowrap; 
	gap: 4rem;                
}
.logoInicial{position:fixed; margin-left: 0.00rem !important;}
.header-foto {
      max-width: 250px;
      max-height: 52px;
      padding: 6px 22px 5px 16px;
      display: flex;
      align-items: center;
      color: var(--text);
      font-size: 1.2rem;
      background-color: var(--fabBgActive) !important;
	  border-bottom: 1.6px solid var(--forte);
      border-radius: 25px;
      text-decoration: none;
      z-index: 1002;
}
#installBtn{
margin-left: 16%;
margin-right: 0.5rem;
padding: 2px 10px;
border:2px solid: var(--forte);
max-width: 60px !important;
height: 34px;
border-radius:7px;
font-size:0.6rem;
font-weight:bold;
cursor:pointer;
display: none;
text-align: center;
box-shadow: 0 1px 4px rgba(160,200,160,0.5);
transition: background 0.3s;
background-color: var(--forte);
color: var(--fraco);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.itemDuo{
	display:flex; 
	gap:7px; 
	align-items:center;
}
.item-pai{
	display: flex;
	gap: 7px;
}
.item-filho{
	flex: 1; /* Faz os itens ocuparem tamanhos iguais lado a lado */
	text-align: center; 
}

.btn-menu-toggle, .btn-theme-top {
  width: 43px;
  padding: 6px 12px 6px 12px;
  background: transparent;
  color: var(--text);
  font-size: 1.6rem;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

	.theme-select{ 
	width: 160px;	
	font-size: 0.8rem;
}

.titulo01{
display: flex;
justify-content: center;
align-items: center;	
font-size: 18px; 
font-weight: bold; 
font-weight: 700;
gap: 16px;
}
.titulo02{
font-size: 14px; 
font-weight: bold; 
font-weight: 800;
display: flex; 
align-items: center; 
gap: 7px; 
margin-bottom: 4px;
}
.emojiTitulo{display: flex; align-items: center; text-align: right; font-weight:700;}
.emojiTitulo2{padding:  0px 10px 1px 16px; border-radius: 25px; border-bottom: 1px solid var(--02Border); border-right: 1px solid var(--02Border); color: var(--02Border);}
.emojiTitulo3{padding:  0px 10px 1px 16px; border-radius: 25px; border-bottom: 1px solid var(--03Border); border-right: 1px solid var(--03Border); color: var(--03Border);}
.emojiTitulo4{padding:  0px 10px 1px 16px; border-radius: 25px; border-bottom: 1px solid var(--04Border); border-right: 1px solid var(--04Border); color: var(--04Border);}
.emojiTitulo5{padding:  0px 10px 1px 16px; border-radius: 25px; border-bottom: 1px solid var(--05Border); border-right: 1px solid var(--05Border); color: var(--05Border);}
.emojiTitulo6{padding:  0px 10px 1px 16px; border-radius: 25px; border-bottom: 1px solid var(--06Border); border-right: 1px solid var(--06Border); color: var(--06Border);}

/* ==========================================================================
   DICAS DICAS DICAS
   ========================================================================== */
       .tiluloConteudo{
	display: none;
	justify-content: flex-end;
	align-items: center !important;
	flex-wrap: nowrap; 
	height: 100%;
	width: 100%;
  }
	.tilContCompleto{
	display: flex; 
	justify-content: flex-end;
	align-items: center !important;
	flex-wrap: nowrap; 
	height: 100%;
	width: 100%;
	margin-bottom: 1rem;
  }
  
     .dica-emoji {
    font-size: 20px;
    cursor: pointer;
    position: relative;

  }
  
  .balao {
    display: none;
    position: absolute;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #333;
    border-radius: 7px;
    padding: 5px 7px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
	justify-content: center;
	align-items: center; 
	text-align: center;
	gap:7px !important;
    z-index: 10;
  }

  .balao.mostrar {
    display: block;
  }
  
  #btnDesabilitar, #btnDesabilitarSons{
    padding: 4px 9px;
    font-size: 0.6rem;
    cursor: pointer;
  }

  
/* ==========================================================================
   MENUZINHO
   ========================================================================== */
/* 1. Define o botão como a âncora */
#botao-popover {
  anchor-name: --anchor-do-botao;
}
/* 1. POSICIONAMENTO E CAIXA DO POPOVER */
#meu-popover[popover] {
  /* 1. Fixa o popover na tela junto com a barra superior */
  position: fixed !important;
  position-anchor: --anchor-do-botao;
  /* Reset do posicionamento nativo do Popover */
  inset: auto;
 /* Ancoragem em relação ao botão fixo */
  top: anchor(top);
  margin-top: 1rem; 
  right: anchor(left);
  margin: 0;
  /* Dimensões e Estilo da Caixa */
  width: 180px;
  height: 304px;
  padding: 7px;
  background-color: var(--bg);
  border: 1px solid var(--text);
  border-radius: 7px;
  scrollbar-width: none;
}

  .modal-confirmacao-backup {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translate(-50%, 20px);
	color: #fff;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 999;
    max-width: 90vw;
    text-align: center;
    animation: apagarLampada 1.2s ease-out forwards;
  }
/* Define os passos da animação no tempo */
@keyframes apagarLampada {
  0% {
    background-color: #004731; /* Começa Verde Escuro */
    opacity: 1;                /* Totalmente visível */
  }
  50% {
    background-color: #22c55e; /* Passa para Verde Claro no meio do tempo */
    opacity: 0.6;              /* Começa a sumir */
  }
  100% {
    background-color: #22c55e; /* Mantém o tom claro */
    opacity: 0;                /* Desaparece completamente */
  }
}
.vgaSetaDir{
	width:2rem;
	height:3rem;
}
 
/* 2. Mantém o ajuste de fonte garantido */
#meu-popover[popover],
#meu-popover[popover] * {
  font-size: 0.85rem !important; /* Ajuste o tamanho desejado aqui */
}
.btn_zinho{
	position: relative;
	margin-right: 16px !important;
	max-width: 7px !important;
	color: var(--text);
	background: transparent;
	border: 0;
	cursor: pointer;
	font-weight: 900;
	z-index: 999;
}
.btn_zinho:active {
 background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}
    .btn-limpo {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 9px 7px;
      color: var(--text);
      background: transparent;
      border: 0;
      cursor: pointer;
      font-size: 1rem;
	  margin: 7px 0px;
      text-align: left;
    }


#menuDropdown a:nth-child(1):hover, #menuDropdown a:nth-child(1).active, #menuDropdown a:nth-child(1):active { background: var(--01Bg); }
#menuDropdown a:nth-child(2):hover, #menuDropdown a:nth-child(2).active, #menuDropdown a:nth-child(2):active { background: var(--02Bg); }
#menuDropdown a:nth-child(3):hover, #menuDropdown a:nth-child(3).active, #menuDropdown a:nth-child(3):active { background: var(--03Bg); }
#menuDropdown a:nth-child(4):hover, #menuDropdown a:nth-child(4).active, #menuDropdown a:nth-child(4):active { background: var(--04Bg); }
#menuDropdown a:nth-child(5):hover, #menuDropdown a:nth-child(5).active, #menuDropdown a:nth-child(5):active { background: var(--05Bg); }
#menuDropdown a:nth-child(6):hover, #menuDropdown a:nth-child(6).active, #menuDropdown a:nth-child(6):active { background: var(--06Bg); }
#menuDropdown a:nth-child(7):hover, #menuDropdown a:nth-child(7).active, #menuDropdown a:nth-child(7):active { background: var(--02Bg); }

#menuDropdown a:nth-child(1).active { border-color: var(--01Border) !important; }
#menuDropdown a:nth-child(2).active { border-color: var(--02Border) !important; }
#menuDropdown a:nth-child(3).active { border-color: var(--03Border) !important; }
#menuDropdown a:nth-child(4).active { border-color: var(--04Border) !important; }
#menuDropdown a:nth-child(5).active { border-color: var(--05Border) !important; }
#menuDropdown a:nth-child(6).active { border-color: var(--06Border) !important; }
#menuDropdown a:nth-child(7).active { border-color: var(--laranja) !important; }


/* ==========================================================================
   CORREÇÃO 1: CENTRALIZAÇÃO E LARGURA DO CONTAINER
   ========================================================================== */
.card {
  border-radius: 12px; 
  padding: 16px; 
  margin-bottom: 4rem !important;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 6px var(--shadow); 
  border: 1px solid var(--border);
  margin-top: 3.4rem;
  position: relative;
  /* Mantém centralizado em telas maiores */
  width: 100%;
  max-width: 800px;
  min-height: 100vh !important;
}

.card.tab-hidden { display: none !important; }
form{display:flex;flex-direction:column;gap:10px;}
.row{display:flex; gap:7px;}
.row> *{flex:1;}

input, textarea{
  width:100%; 
  padding:12px; 
  border:1px solid var(--forte); 
  border-radius:8px;
  font-size:1rem; 
  font-weight: 700;
  background-color: var(--select);
  color:var(--forte) !important;
  appearance:none; 
  -webkit-appearance:none; 
  outline:none;
}
#prodPreco{
		max-height: 52px;
}

textarea{
	resize:vertical; 
	min-height:70px;
	border:1px solid var(--forte);
	}
input, textarea{
	border:2px solid var(--forte) !important;	
	}

select{
  padding-right:43px;
  background-image: url('imagens/arrow-big-down-dash.svg');
  background-repeat: no-repeat;
  background-position: right 12px top 50%;
  background-size: 22px auto;
  background-color: var(--select) !important;
  padding:8px; 
  border:1px solid var(--forte); 
  border-radius:8px;
  font-size:1.1rem; 
  font-weight: 800;
  color:var(--text) !important;
  appearance:none; 
  -webkit-appearance:none; 
  outline:none;
}
#selListas{
	height:49px !important;
}
#filtroCategoriaProduto{
	width: 100%;
}
.novaLista{
margin-top: 1px; 
width: 43%; 
height:49px;
}
/*
body.dark select{
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23e9ecef%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
} */

select option{appearance: none; background-color: var(--bg) !important;  color: var(--text); }

input:focus,select:focus,textarea:focus{
  border-color:#4dabf7; box-shadow:0 0 0 3px var(--focus);
}

button{
  max-width:100%; 
  padding:12px; 
  background:var(--btn); 
  color: var(--borda); 
  border:2px solid var(--forte); 
  border-radius:8px;
  font-size:1rem; 
  font-weight:520; 
  cursor:pointer; 
  transition:background 0.2s; 
  -webkit-tap-highlight-color:transparent;
}
button:active{background:var(--btnActive);}

.nav-link{font-weight: bold; letter-spacing: 1.1px; min-width: 75px;}

.btn-danger{ background-color:var(--danger); }
.btn-danger:active{ background-color:var(--dangerActive); }
.btn-row{ display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }
.btn-row button{ flex:1; }

.miniBtn{
  width:auto; padding:8px 10px; font-size:.9rem; border-radius:8px; width:42px !important; height:42px !important; margin: 4px;
  background:transparent; border:1px solid var(--border);
  color:var(--text); font-weight:900; cursor:pointer;
}
.btnCancelar{
  width:auto; padding:8px 10px; font-size:.9rem; border-radius:8px; margin: 4px;
  background:transparent; border:1px solid var(--border);
 font-weight:900; cursor:pointer;
  font-size: 18px; 
  border-color:#F6F633;
  color:var(--danger);  
  background-color: #FFFF0011;
}
.btnAlterar{
  width:auto; padding:8px 10px; font-size:.9rem; border-radius:8px; margin: 4px;
  background:transparent; border:1px solid var(--border);
  font-weight:900; cursor:pointer;
  border-color:var(--forte); 
  color:var(--forte); 
  background:#D5FFFF;
}
.miniBtnListas{
  display: flex; justify-content: start; align-items: center;
  width:auto; padding:8px 10px; font-size:.9rem; border-radius:8px; min-width:42px !important; margin: 4px;
  background-color:var(--04Bg); border:1px solid var(--04Border);
  color:var(--text); font-weight:900; cursor:pointer;
}
.miniBtnX{
  width:43px !important; height:43px !important; padding:2px 10px; font-size:.8rem; border:1px solid #AAAAAA !important; border-radius:8px; margin: 0px 4px;
  background:transparent; border:2px solid var(--border);
  color:var(--text); font-weight:800; cursor:pointer;
}
.miniBtn:active{ background:rgba(255,255,255,0.08); }
.miniBtn.danger{
  border-color:rgba(255,107,107,0.6); 
  color:var(--danger); 
  background:rgba(255,107,107,0.10);
}
.miniBtn.seta{
  font-size: 18px; border-color: #777777; background-color: #00000033;
}
.miniBtn.atencao{
  font-size: 18px; border-color:#F6F633; background-color: #FFFFEE;
}
.miniBtn.danger:active{ background:var(--dangerBg); }

ul{list-style:none;margin-top:10px;}
li.item{
  background:var(--liBg); 
  padding:6px; 
  margin-bottom:7px; 
  border: 1px solid var(--liBorder);
  border-radius:8px;
  display:flex; justify-content:space-between; align-items:center; gap:7px;
  font-size:0.88rem;
  box-shadow: var(--shadow);
  transition: background 0.2s, opacity 0.2s;
  border-left:4px solid var(--liBorder);
}
li.itemPri{
  background:var(--liBg); 
  padding:6px; 
  margin-bottom:7px; 
  border-radius:8px;
  display:flex; justify-content:space-between; align-items:center; gap:7px;
  font-size:0.88rem;
  border: 0.5px solid var(--border);
  box-shadow: var(--shadow);
  transition: background 0.2s, opacity 0.2s;
  border-left:4px solid var(--liBorder);
}
li.itemEncarte{
  background:var(--fabBg); padding-left:16px; margin-bottom:7px; border-radius:8px;
  display:flex; justify-content:space-between; align-items:center; gap:7px; border: 1px solid var(--05Border);
  border-left:4px solid var(--05Border); font-size:0.88rem;
}

li.itemSetor{
  background:var(--fabBg); 
  padding:6px; 
  margin-bottom:7px; 
  border-radius:8px;
  display:flex; 
  justify-content:space-between; 
  align-items:center; gap:7px;
  border-left:4px solid var(--muted); 
  font-size:0.88rem;
}
.itemLogin{
  background:var(--fabBg); 
  padding:25px; 
  margin-bottom:7px; 
  border-radius:8px;
  border-left:4px solid var(--muted); 
  font-size:0.88rem;
}
.duplo {
  display: flex;
  flex-wrap: wrap; /* Permite quebrar linha no mobile de forma graciosa */
  width: 100%;
  gap: 10px; 
  justify-content: center; 
  align-items: center;
  margin-top: 15px;
}

.duplo-01 {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.duplo-02 {
  flex: 1 1 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.left{
	display:flex;
	flex-direction:column;
	gap: 4px;
	width:100%;
	}
.right{display:flex;flex-direction:raw;gap:2px;min-width:0;}
.titleLine{
	display:flex;
	gap:4px;
	align-items:center;
	flex-wrap:wrap;
	width:100% !important;
	}
.catInicial{
  margin-top: 5px;
  width: 100%; 
  font-weight: bold; 
  color:var(--text);
  padding: 0px 7px 0px 7px; 
  border-radius: 10px 10px 0px 0px; 
  border:1px solid var(--border);
  background:var(--themeToggleBg); 
  white-space:nowrap;
}	

.titleLineCat{
	display:flex;
	justify-content: space-between;
	 font-weight: bold; 
  color:var(--text);
  padding: 0px 7px 2px 7px; 
  border-radius: 10px 10px 0px 0px; 
  border:1px solid var(--border);
  background:var(--themeToggleBg); 
	gap:4px;
	align-items:center;
	width:100% !important;
	}
.catInicialCat{
  margin-top: 5px;
  width: 100%; 
  font-weight: bold; 
  white-space:nowrap;
}
.smallMuted{color:var(--muted);font-size:.86rem;}
.smallMutedOrdem{color:var(--muted);font-size:.6rem;}
.badge{
  background:var(--badge); color:var(--badgeText);
  padding:3px 8px; border-radius:12px; font-size:.75rem; font-weight:900; white-space:nowrap;
}
.qtd{
  font-weight:430; color:var(--qtdText);
  background:var(--qtdBg); padding:2px 8px; border-radius:6px;
  border:1px solid var(--qtdBorder); white-space:nowrap;
}

.dragHandle{
  display: block; cursor:grab; user-select:none; font-weight:900; color:var(--muted);
  padding:6px 8px; border-radius:10px; border:1px dashed var(--border);
  background:var(--themeToggleBg); white-space:nowrap;
}
.dragHandleCel{
  display: none; cursor:grab; user-select:none; font-weight:900; color:var(--muted);
  padding:6px 8px; border-radius:10px; border:1px dashed var(--border);
  background:var(--themeToggleBg); white-space:nowrap;
}

.catCat{
	padding: 3px 7px;
	border: 1px solid #CCCCCC;
	border-radius: 0px 8px 8px 8px;
	font-weight:900; 
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap; 
	margin-top: 4px;
}
.catLista{
	padding: 3px 7px;
	font-weight:900; 
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap; 
	margin-top: 4px;
}
.cardSub{ margin:7px 1px -7px 1px; color:var(--muted); font-size:.9rem; line-height:1.2rem; }
.divider{ height:1px; background:var(--border); margin:12px 0; }
.card01{ border-color:var(--01Border) !important; background:var(--01Bg) !important; }
.card02{ border-color:var(--02Border) !important; background:var(--02Bg) !important; }
.card03{ border-color:var(--03Border) !important; background:var(--03Bg) !important; }
.card04{ border-color:var(--04Border) !important; background:var(--04Bg) !important; }
.card05{ border-color:var(--05Border) !important; background:var(--05Bg) !important; }
.card06{ border-color:var(--06Border) !important; background:var(--06Bg) !important; }

.hidden{display:none !important;}
.codeBox{
  border-radius:10px; padding:10px; background:var(--codeBg); border:1px solid var(--border);
  color:var(--text); font-size:.88rem; white-space:pre-wrap; word-break:break-word; line-height:1.25rem;
  margin-top:10px; max-height:240px; overflow:auto;
}

.prodThumb{
  width:46px; height:46px; border-radius:10px;
  background:rgba(0,0,0,0.10); border:1px solid rgba(0,0,0,0.08);
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; flex: 0 0 auto;
}
body.dark .prodThumb{
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.12);
}
.prodThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.prodThumb .thumbText{
  font-weight:430; color:rgba(0,0,0,0.35); letter-spacing:0.5px; font-size:0.78rem;
}
body.dark .prodThumb .thumbText{ color:rgba(255,255,255,0.55); }
/******** CAPTCHA ***********/
	.captcha-container { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
	.captcha-box { background: var(--sup); color: var(--text); padding: 8px 15px; font-weight: bold; font-size: 20px; letter-spacing: 3px; font-style: italic; }
	.btn-refresh { cursor: pointer; font-size: 18px; background: none; border: none; }
/*******************/		
.btn-fab {
	display: block;
  position: relative;
  width: 70px;
  height: 70px;
  bottom: 34px;
  border: 1px solid var(--01Border);
  border-radius: 50%;
  background-color: var(--btn);
  color: var(--text);
  font-size: 32px; 
  padding-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;  
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 9999;
  transition: transform 0.2s, background-color 0.2s;
  overflow: visible; 
}
.btnIni {
  display: block;
  position: relative;
  width: 70px !important;
  height: 70px !important;
  bottom: 34px;
  border: 1px solid var(--forte);
  border-radius: 50%;
  background-color: var(--btn);
  color: var(--text);
  font-size: 32px; 
  padding-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;  
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 9999;
  transition: transform 0.2s, background-color 0.2s;
  overflow: visible; 
}
.btnIni:active {
  background-color: var(--fabBgActive);
  transform: scale(0.92);
}

.img-upload-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.img-upload-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.img-preview-box {
  width: 70px;
  height: 70px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--liBg);
  flex-shrink: 0;
}
.img-preview-box img {
  width: 70px;
  height: 70px;
  object-fit: cover;
}
.linkLogo {
	Color: var(--borda);
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}
/* ==========================================================================
   CORREÇÃO 3: MODAIS DE ENCARTES E TUTORIAIS (100% MOBILE / 80% DESKTOP)
   ========================================================================== */
.meu-modal-encarte, .meu-modal-galeria {
  display: none; 
  position: fixed; 
  z-index: 9999; 
  left: 0; 
  top: 0; 
  width: 100vw; 
  height: 100vh;
  color: var(--text);
  background-color: rgba(0, 0, 0, 0.6);
  align-items: center; 
  justify-content: center;
}

/* Regra Padrão: Mobile (100% da tela) */
.meu-modal-conteudo {
  color: var(--text);
  background-color: var(--bg);
  padding: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  border: 1px solid var(--border);
  overflow: hidden !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
}
/* ==========================================================================
   CENTRAL DE AVISOS
   ========================================================================== */
   
.aviso-produto {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: none;
    padding: 20px 28px;
    border-radius: 25px;
    color: #fff;
    font-size: 14px;
    animation: aparecerAviso 0.34s ease;
}

.aviso-produto.sucesso {
    background-color: #004731AA;
	      background: radial-gradient(
    circle at center, 
    rgba(0, 139, 0, 1) 0%,       /* Centro: Vermelho Escuro Sólido */
    rgba(0, 180, 0, 0.7) 61%,    /* Meio: Tom mais aberto, já ficando transparente */
    rgba(38, 220, 38, 0.3) 88%,  /* Transição: Vermelho bem translúcido */
    var(--bg) 100%    /* Bordas: 100% transparente (desaparece) */
  );
  	 background: radial-gradient(
    ellipse closest-side at center, 
    #006600 0%,                  /* Verde Escuro */
    rgba(0, 174, 0, 0.5) 61%,    /* Metade da opacidade */
    var(--bg) 100%   /* Desaparece completamente nas bordas */
  );
}

.aviso-produto.erro {
	 background: radial-gradient(
    ellipse closest-side at center, 
    #8b0000 0%,                  /* Vermelho Escuro */
    rgba(139, 0, 0, 0.5) 70%,    /* Metade da opacidade */
    var(--bg) 100%   /* Desaparece completamente nas bordas */
  );


}

/* ==========================================================================
   AUTO COMPLETE PRODUTOS
   ========================================================================== */
.autocomplete-items {
  position: absolute;
  border: 1px solid var(--border, #ccc);
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
  color: var(--text);
  background-color: var(--bg);
  max-height: 180px;
  overflow-y: auto;
  border-radius: 0 0 8px 8px;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, #ccc);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
}

.autocomplete-items div:hover {
  color: var(--text);
  background-color: var(--bg);
}
.autCom {
  color: var(--text);
  background-color: var(--bg);
}

@keyframes aparecerAviso {
    from {
        opacity: 0;
        /* Mantém o -50% do meio e começa um pouco mais abaixo (ou acima se preferir) */
        transform: translateX(-50%) translateY(10px); 
    }

    to {
        opacity: 1;
        /* Mantém o -50% do meio e zera o deslocamento vertical */
        transform: translateX(-50%) translateY(0);
    }
}

/* Comportamento Desktop: Exibe os links na barra superior horizontalmente */
/* Regra Desktop (80% da tela centralizado) */
@media (min-width: 768px) {
	 .btn-menu-toggle {
    display: none !important; /* Esconde o hambúrguer no desktop */
  }
  .menu-dropdown {
    position: static !important;
	margin-right: 1rem !important;
    width: auto !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-shrink: 0;   /* Não deixa encolher ou empurrar no flexbox */
    white-space: nowrap;
    align-items: center !important;
    gap: 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
  }

  .menu-dropdown a {
    padding: 5px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
  }
  .novaLista{
margin-top: 6px; 
}

  .meu-modal-conteudo {
    width: 80vw !important;
    height: 100vh !important;
    max-width: 80vw !important;
    min-height: 100vh !important;
    border-radius: 12px !important;
	overflow: hidden !important;
  }
}
@media (max-width: 1200px) {
  .superior{
  gap: 1rem !importnat; 
  }  
  
  .menu-dropdown {
    gap: 7px !important;
  }
  .menu-dropdown a {
    padding: 3px 4px !important;
	font-size: 0.9rem !important;
  }

}
.meu-modal-conteudo-entrada {
  color: var(--text);
  background-color: var(--bg) !important;
  padding: 16px;
  border: 3px solid var(--text);
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px var(--01border);
}

.galeria-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-height: 88vh;
  overflow-y: auto;
  padding: 10px 0;
}

.galeria-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75px;
  cursor: pointer;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--liBg);
  transition: transform 0.1s, border-color 0.1s;
}

.galeria-item:hover, .galeria-item:active {
  border-color: var(--btn);
  transform: scale(1.05);
}

.galeria-item img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 4px;
}

.galeria-item span {
  font-size: 0.7rem;
  color: var(--text);
  text-align: center;
  margin-top: 4px;
  word-break: break-word;
  line-height: 0.85rem;
}

.add-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quantity-input {
  width: 60px;
  padding: 6px;
  text-align: center;
  border: 1px solid var(--inputBorder);
  border-radius: 6px;
  font-size: 0.9rem;
}

.btn-add {
  background: var(--fabBg);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  width: auto;
}
.posicaoFechar{
	margin-top: 16px; 
	display: flex; 
	justify-content: flex-end;
}
.meu-modal-fechar {
  background: #e74c3c;
  color: white;
  padding: 10px;
  text-align: center;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 12px;
  font-size: 14px;
  text-transform: uppercase;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.meu-modal-container-midia {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
overflow: hidden !important;
}

.meu-modal-container-midia img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.meu-modal-container-midia iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
}

.overlay.aberto { display: block; }

.modal-duo {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10001;
}

.frames-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.frames-container-inner {
  flex: 1 1 50%;
  width: 100%;
  height: 50%;
  overflow: auto;
  border: none;
  margin: 0;
  padding: 0;
}

.divisoria {
  width: 100%;
  height: 14px;
  background: #ccc;
  flex: 0 0 14px;
  cursor: row-resize;
  touch-action: none;
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.divisoria::before {
  content: '';
  width: 44px;
  height: 4px;
  background: #888;
  border-radius: 3px;
}
.inferior{
  bottom: 0px !important;
  margin-top: 3rem;
  position: relative;
  bottom: 0; left: 0; right: 0;
  height: 2.5rem;
  background: var(--sup);
  padding: 0 16px;
  box-shadow: 0 2px 8px var(--shadow);
  border-bottom: 1px solid var(--border);
  z-index: 888;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
}
.botaoMais{
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	width: 70px !important;
	height: 70px !important;
	bottom: 1.6rem;
	border: 1px solid var(--forte);
	border-radius: 50%;
	background-color: var(--btn);
	color: var(--text);
	font-size: 32px; 
	padding-top: 4px;
	display: flex;
	align-items: center;
	justify-content: center;  
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	cursor: pointer;
	z-index: 9999;
	transition: transform 0.2s, background-color 0.2s;
	overflow: visible; 
}
.inferiorGP{	
display: flex;
justify-content: space-between;
align-items: center;
bottom: 0; left: 0px !important; right: 0;
height: 2rem;
background: var(--sup);
box-shadow: 0 2px 8px var(--shadow);
border-bottom: 1px solid var(--border);
width: 100%;
font-size: 10px; 
color: var(--text) !important; 
text-decoration: none !important; 
text-decoration-line: none !important; 
-webkit-text-decoration: none !important; 
border-bottom: none !important; 
box-shadow: none !important; 
outline: none !important;
-webkit-tap-highlight-color: transparent;
font-weight: bold;}

.btn-fechar {
  background-color:var(--bg);
  position: fixed;
  top: 1.1rem;
  right: 1.6rem;
  z-index: 10002;
  width: 55px;
  height: 55px;
  border-radius: 7px;
  border: 2px solid #dc2626;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
a.infLink{
	font-size: 13px; 
	color: var(--borda); 
	text-decoration: none !important; 
	font-weight: bold;"
}
.btnNavegador {
  background-color:var(--bg);
  position: fixed;
  bottom: 1.1rem;
  right: 1.6rem;
  z-index: 10003;
  width: 55px;
  height: 55px;
  border-radius: 7px;
  border: 2px solid blue;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.fechar-modal:hover { background-color:var(--dangerActive); }
/* ==========================================================================
   COOKIE MODAL COOKIE MODAL
   ========================================================================== */

#custom-cookie-banner {
    position: fixed;
    bottom: 70px;          /* Mantém os 52px acima da tela */
    left: 50%;             /* Ponto central da tela */
    transform: translateX(-50%); /* Centraliza perfeitamente o banner */
    width: 340px;
    min-height: 160px;
    background: var(--bg);
    color: var(--text);
    padding: 20px 25px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    z-index: 999999;
    display: none; /* Controlado pelo JS */
    flex-direction: column;
    justify-content: space-between;
    align-items: center;  /* Conteúdo interno centralizado */
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
	border-color: 2px solid var(--text) !important;
    border-radius: 12px;
    box-sizing: border-box;
}

#custom-cookie-banner a {
    color: #24b35b;
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
    margin-top: 15px;
}

.cookie-btn {
    padding: 10px 18px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    border: none;
    transition: background 0.2s;
}

.cookie-btn.accept {
    background: #24b35b;
    color: #ffffff;
}

.cookie-btn.accept:hover { 
    background: #1e964b; 
}

.cookie-btn.decline {
    background: #ff0000;
    color: #ffffff;
}

.cookie-btn.decline:hover { 
background: #ab120a;
    text-decoration: underline; 
}

.corpoDoTutorialMidia{ overflow: hidden !important; }

  /* Estilos específicos para o contador de produtos e busca da galeria */
  .contador-produtos-info {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--muted, #666);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .galeria-contadores {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--muted, #666);
    margin-bottom: 8px;
    background-color: var(--border);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border, #ccc);
  }
  .galeria-secao-letra {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: var(--border, #e2e8f0);
    border-left: 4px solid #008080;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .galeria-item-separador {
    grid-column: 1 / -1;
    width: 100%;
  }
  .input-busca-galeria {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border, #ccc);
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    box-sizing: border-box;
  }
.mostrarExplicacao{
display: none;
}
/* Estilo comum para todos os inputs e textarea */
input[type="text"],
input[type="number"],
textarea {
  background-color: var(--inputBg);
  color: var(--input) !important;
  font-family: inherit; /* Garante que o textarea use a mesma fonte */
}

/* Placeholder comum para todos eles */
input[type="text"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: var(--inputPlace);
}

	
input[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    border: 1px solid #000;;
    padding: 0;
    margin: 4px; /* ajuste o espaçamento se precisar */
    width: 20px;
    height: 20px;
	background-color: #eee;
	border-radius: 4px !important;
}
#prodNome {margin-bottom: 4px !important;}
#encartNome {margin-bottom: 6px !important;}

button[type="submit"]{
  width: 100%;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
  
  /* Degradê de cor para dar volume cilíndrico */
  background: linear-gradient(180deg, var(--btn)  0%,var(--forte)  100%);
  
  /* Borda interna clara para simular o reflexo da luz no topo */
  border-top: 1px solid var(--select);
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 10px;
  border-bottom: 3px solid var(--select);
  /* Sombra tripla: volume 3D abaixo + sombra projetada no chão + luz interna */
  box-shadow: 
    0px 6px 0px 0px var(--btActive), 
    0px 12px 16px 0px rgba(0, 0, 0, 0.2),
    inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
    
  transition: all 0.1s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* Remove o flash azul nativo do celular */
}

/* =====================================================================
   MODAL DE EDIÇÃO RÁPIDA DE PRODUTO  (prefixo .mer-)
   Cole no seu arquivo arquivos/00_app_geralista.css
   ===================================================================== */

/* Imagem e nome clicáveis na tela inicial */
.mer-clicavel { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mer-clicavel:active { opacity: .7; }

/* Fundo escuro. Acompanha a área visível (muda quando o teclado abre) */
.mer-overlay {
  position: fixed;
  left: 0; right: 0;
  top: var(--mer-top, 0px);
  height: var(--mer-vh, 100dvh);
  background: rgba(0, 0, 0, .5);
  z-index: 10000;              /* acima do modal de quantidade (9999) */
  display: none;               /* o JS troca para flex */
  align-items: flex-start;     /* popup encostado no alto da tela */
  justify-content: center;
  padding: 3vh 10px 0;
  box-sizing: border-box;
}

/* Caixa: ~70% da tela; com teclado aberto sobe para ~96% da área visível */
.mer-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  max-height: calc(var(--mer-vh, 100dvh) * .88);
  background: var(--bg, #fff);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  overflow: hidden;
  overscroll-behavior: contain;
}
.mer-overlay.mer-teclado .mer-box { max-height: calc(var(--mer-vh, 100dvh) * .96); }

.mer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mer-x {
  background: transparent !important;
  border: 0 !important;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px 8px;
  width: auto;
  cursor: pointer;
}

/* Miolo rolável */
.mer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mer-body input[type="text"],
.mer-body input[type="number"],
.mer-body select,
.mer-body textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;             /* 16px evita o zoom automático no iPhone */
}
.mer-body textarea { resize: vertical; min-height: 52px; }
.mer-label {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 4px;
}

/* Descrição e preço lado a lado */
.mer-linha { display: flex; gap: 8px; align-items: flex-end; }
.mer-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mer-col-nome { flex: 1 1 auto; }
.mer-col-categ { flex: 0 0 50%;}
.mer-col-desc { flex: 1 1 auto; }
.mer-col-unid { flex: 0 0 70px; }
.mer-col-preco { flex: 0 0 70px; }

/* Imagem atual + botão "Sem imagem" */
.mer-img-area {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mer-preview {
  width: 61px;
  height: 61px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(127, 127, 127, .08);
}
#merCategoria{height: 46px; margin-bottom:2px;}
#merUnidade{height: 46px; margin-bottom:2px;}
.mer-preview img { width: 84%; height: 84%; border-radius: 8px; object-fit: contain; }
.mer-remover-img {
  font-size: .7rem;
  padding: 8px 8px;
  width: auto;
  background: var(--dangerBg);
  border: 1px solid var(--danger);
  border-radius: 6px;
  color: var(--danger);
  cursor: pointer;
}

/* Sugestões da galeria (autocomplete) */
.mer-sugestoes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mer-sug {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 8px;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
}
.mer-sug:active { background: rgba(127, 127, 127, .18); }
.mer-sug-img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
}
.mer-sug-img img { width: 100%; height: 100%; object-fit: contain; }
.mer-sug-nome {
  flex: 1;
  min-width: 0;
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mer-vazio {
  font-size: .78rem;
  color: var(--muted);
  padding: 6px 4px;
  text-align: center;
}

/* Rodapé fixo com os botões */
.mer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ==========================================================================
   ÁREA ADMINISTRAÇÃO - LOGIN - BACKUP ONLINE
   ========================================================================== */
            .tela { display: none; }
            .tela.ativa { display: block; }
            .carta { max-width: 98%; margin: 7px auto; padding: 16px; background:  var(--bg); border-radius: 12px; box-shadow: 0 3px 14px #0002; }
            .menu { display: flex; gap: 7px; margin: 7px 0; flex-wrap:wrap;}
			 #menuPrincipal button{width: 160px !important; font-size: 0.9rem;}
            .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
            .area { padding: 20px; background: var(--bg); border-radius: 16px; box-shadow: 0 3px 10px #0001; }
			.areaIframe { padding: 0px; background: var(--bg); border-radius: 16px; box-shadow: 0 3px 10px #0001; }
			.iframeGal{ width: 100%;  height: 700px; border: none; }
			.iframeListas{ width: 100%;  height: 520px; border-radius: 16px; border: none;  overflow-x: hidden;}
            .sair { position: relative; float: right; height: 28px !important; padding: 1px 1px 3px 1px; right: -2px; top: -25px; background-color: var(--danger);  border-color:#FF0000; color:var(--text);}
            .gray { width: 100%; margin-top: 16px; text-align: center; background: var(--btn); }
			.btnAdmin {margin-top: 1rem; width: 24% !important;}
            .resultado {margin-top: 20px; max-height: 10rem; padding: 15px; background: #0f172a; color: #fff; border-radius: 8px; overflow-y: scroll; white-space: pre-wrap; font-family: monospace; }
			.calendario{border:solid 1px var(--bg); border-radius: 16px; width:100%; height:79vw;}
            .usuario { display: flex; justify-content: space-between; gap: 7px; align-items: center; padding: 7px; margin: 4px 0; border: 1px solid #cbd5e1; border-radius: 7px; }
            .small { font-size: 13px; color: #64748b; }
            .foto-container {  display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin: 10px 0; gap: 8px;}
            .foto-perfil { border-radius: 50%;  height: 70px; width: 70px; border: 2px solid var(--forte); box-shadow: var(--shadow);}
			.btnUser{ margn: 7px !important; width: 49px; height: 49px; }
			#campoBackup {margin-top: 1rem;}
/* =====================================================
   CSS DO SPINNER DE "CARREGANDO" NOS BOTÕES
   >>> MOVER ESTE BLOCO PARA 00_app_geralista.css <<<
   ===================================================== */
button.carregando {
    opacity: 0.85;
    cursor: not-allowed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
button.carregando::before {
    content: '';
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: girarSpinner 0.7s linear infinite;
}
@keyframes girarSpinner {
    to { transform: rotate(360deg); }
}


/* ========  BARRA INFERIOR BOTTON BOTTON================*/
.sidebar a, .quickCard a, .bottom a, .link-invisivel a {
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}
	.bottom {
	display:none;
	}

/* ==========================================================================
   CORREÇÃO 2: MENU RESPONSIVO (MOBILE DROPDOWN vs DESKTOP HORIZONTAL)
   ========================================================================== */
/* Comportamento Padrão: Mobile */
@media (max-width: 768px) {
	body{
	padding:7px 0px 2px 0px;
	}
	.superior{
	padding: 0 4px;
	gap: 7px; 
	}
	
	.logoInicial{position:relative; margin-left: 6rem !important;}
	.menu-dropdown {
	position: fixed; top: 3.8rem; left: 0; width: 100vw;
    background: var(--bg_mdp);  
	border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 12px var(--shadow);
    display: flex; flex-direction: column;
    z-index: 999;
    transform-origin: top center;
    transform: scaleY(0);
    opacity: 0;
    visibility: hidden;
    transition: transform .30s ease, opacity .30s ease, visibility 0s linear .30s;
    will-change: transform, opacity;
    overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 -2px 3px rgba(0, 0, 0, 0.5), 0 5px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;

  }

/* 1. Estado Padrão (Fechado) */
.menu-dropdown {
  transform: scaleY(0);
  opacity: 0;
  visibility: hidden;
  /* O transition deve ficar aqui para controlar o fechamento */
  transition: transform .52s ease, opacity .52s ease, visibility 0s linear .45s;
  transform-origin: top; /* Garante que o menu abra de cima para baixo */
}

/* 2. Estado Ativo (Aberto) */
.menu-dropdown.open {
	display: flex;
	justify-content: flex-start; /* Alinha o conteúdo à esquerda */
	transform: scaleY(1);
	opacity: 1;
	visibility: visible;
	/* Transição de abertura: visibility muda instantaneamente (sem delay) */
	transition: transform .45s ease, opacity .45s ease, visibility 0s linear 0s;
}


  .menu-dropdown a {
	height: 2.8rem;
	padding-top: 5px;
	color: var(--text); 
	text-decoration: none;
    font-weight: 700; 
	border-bottom: 1px solid var(--border);
    white-space: nowrap; 
	font-size: 1.6rem;
    -webkit-tap-highlight-color: transparent;
	}
.tiluloConteudo{
	display: flex;
	}
.tilContCompleto{
	display: none;
}
	.card{
	border-radius: 0px; 
	padding: 10px 0px 4px 0px; 
	}
.card01{ padding: 0px;}
.card02{ padding: 14px 16px 0px 16px;}
.card03{ padding: 14px 16px 0px 16px;}
.card04{ padding: 14px 16px 0px 16px;}
.card05{ padding: 14px 16px 0px 16px;}
.card06{ padding: 14px 16px 0px 16px;}
    #installBtn{
	padding: 1px 1px;
	margin: 0.4rem !important;
	width: 43px !important;
	height: 34px !important;
	font-size: 0.56rem;
	font-weight: bold;
	}

  li.itemSetor{
	min-height: 56px !important;
	padding: 10px 7px;
	border-radius:7px;
	gap:3px;
	font-size:0.7rem;
	font-weight: bold;
}
.espaco{ 
margin-bottom: 0px;
}
.left{
	gap:0px;
}
.inferior{
 font-size: 0.5rem;
}
.btn-fab {
	  width: 52px;
  height: 52px;
  bottom: 7px;

}
.miniBtn{
min-width:33px !important;
min-height:33px !important;
padding:3px 3px; 
font-size:1rem;
}
li.item{
	border: 0px solid transparent;
	border-bottom: 0.5px solid var(--liBorder);
	border-radius:0px;
	margin-bottom: 0px; 
	padding:2px;
}
li.itemPri{
  padding:2px; 
  margin-bottom:0px; 
}
li.itemCat{
	margin-bottom: 0px !important; 
}
button{
padding:10px; 
border-radius:7px;
font-size:0.8rem; 
font-weight:700;
}

input, textarea{
padding:8px; 
border-radius: 10px;
font-size:0.8rem;
}
#btnSalvarNuvemFlutuante {
display:none; 
position:fixed; 
right: 16px;
width:37px; 
height:37px; 
}
  #meu-popover[popover] {
  /* 1. Fixa o popover na tela junto com a barra superior */
  position: fixed !important;
  position-anchor: --anchor-do-botao;
  
  /* Reset do posicionamento nativo do Popover */
  inset: auto;
  
  /* Ancoragem em relação ao botão fixo
  top: anchor(top); */
  top: 2rem;
  right: anchor(left);
  margin: 0;
  margin-right: 3px;


  /* Dimensões e Estilo da Caixa */
  width: 150px;
  height: 286px;
  padding: 5px;
  background-color: var(--bg);
  border: 1px solid var(--text);
  border-radius: 7px;
  scrollbar-width: none;
}

/* 2. Mantém o ajuste de fonte garantido */
#meu-popover[popover],
#meu-popover[popover] * {
	top: 5rem !important;
    font-size: 0.7rem !important; /* Ajuste o tamanho desejado aqui */
}
.btn_zinho{
	margin-top: 10px;
	margin-right: 20px !important;
}
select{
	font-size:1.1rem;
}
select option{
	font-size:1rem !important;
}
#selListasHome{
	max-width: 98%;
	margin-top: 0.3rem !important;
}
#selListas{
	font-size: 0.7rem !important;
	font-weight: 700 !important;	
	background-size: 8px auto !important;
}
.novaLista{
margin-top: 16px; 
}

.mostrarExplicacao{
display: block;
}
.dragHandle{
  display: none;
}
.dragHandleCel{
	display: block;
}
.header-foto {
	margin-left: 0.1rem;
      max-width: 140px;
      max-height: 52px;
}
.btn-menu-toggle, .btn-theme-top {
	position: fixed;
	top: 5px;
	left: 16px;
}
  .contador-produtos-info {
	margin-top: 1rem;
    margin-bottom: 0px;
  }
    .duplo {
    width: 100%;
    flex-direction: column;
    gap: 5px;
  }
  
  .duplo-01 {
  flex: 1 1 160px;
}

.duplo-02 {
  flex: 1 1 160px;
}
.item-pai {
	display: grid;
    grid-template-columns: repeat(2, 1fr); /* Cria duas colunas de tamanhos iguais */
    gap: 3px; /* Espaço entre as linhas e colunas */
}

  .btnUser{ margn: 3px; width: 42px; height: 42px; }
  .miniBtnX{
min-width:36px !important;
padding:1px 8px; 
font-size:.7rem;
height:36px !important;
margin: 0px 1px;
}
/*  modal editar produto inicial */
.mer-header {padding: 5px 7px; font-size: 0.8rem;}
.mer-x {font-size: 0.9rem; padding: 2px 4px;}

/* Miolo rolável */
.mer-body {padding: 5px 7px 7px;gap: 3px;}
.mer-body input[type="text"],
.mer-body input[type="number"],
.mer-body select,
.mer-body textarea {font-size: 10px;}
.mer-body textarea { resize: vertical; min-height: 43px; }
.mer-label {font-size: .67rem;margin-top: 3px;}

/* Descrição e preço lado a lado */
.mer-linha {gap: 4px;}
.mer-col {gap: 3px;}
.mer-col-unid { flex: 0 0 70px; }
.mer-col-preco { flex: 0 0 55px; }

/* Imagem atual + botão "Sem imagem" */
.mer-img-area {gap: 4px;}
.mer-preview {width: 52px;height: 52px;}
.mer-preview img { width: 88%; height: 88%; border-radius: 8px; object-fit: contain; }

/* Sugestões da galeria (autocomplete) */
.mer-sugestoes {gap: 2px;}
.mer-sug {padding: 2px 4px;}
.mer-sug-nome {font-size: .8rem;}
.mer-vazio {font-size: .7rem;padding: 3px 2px;}

/* Rodapé fixo com os botões */
.mer-footer {gap: 7px;}
.mer-remover-img {padding: 2px 2px;width: auto;font-size: .5rem;
}
#merCategoria{height: 32px; margin-bottom:1px;}
#merUnidade{height: 32px; margin-bottom:1px;}

.area { padding: 16px;}
.menu{ display: grid; flex-wrap:nowrap; grid-template-columns: repeat(3, 1fr); gap: 3px;}
.btnAdmin {font-size: 0.8rem !important; min-width: 10rem !important;}
.areaIframe { padding: 0px;}
.areaIframe h2{ padding: 18px 18px 2px 18px;}
.calendario{height: 160vw;}
.iframeGal{ width: 100%;  height: 700px; border: none; }
.iframeListas{height: 430px;}
.itemLogin{padding:16px 7px;}
#menuPrincipal button{max-width: 79px !important; font-size: 0.6rem;}
/* =============================================================
           BARRA INFERIOR BOTTON BOTTON
===============================================================*/
.bottom{
	display: flex;
	justify-content:space-around;
	position: fixed;
	width: auto;
	height: 48px; 
	left:14px;
	right:14px;
	bottom:14px;
	padding:2px 0px 1px 0px;
	border-radius:25px;
	background: var(--01Bg);
	backdrop-filter: blur(5px);
	border-top: 2px solid var(--forte);
	border-bottom: 1px solid var(--forte);
	z-index: 1000;
		}
	.bottom a{
                display: flex;
				width: 54px !important;
				height: 39px !important;
                flex-direction: column;
                align-items: center;
                gap: 0px;
                text-decoration: none;
                color: var(--forte);
                font-size: 0.7rem;
                transition: color 0.3s ease;
		}
	.bottom .active {
				width: 54px !important;
				height: 39px !important;
				border-radius: 25px; 
				background-color: #00000070;
				font-size: 0.6rem;
                color: #FFFFFF;
                font-weight: 600;
				transform: scale(1.2);
		}
.botaoMais{
	display: none !important;
}
.inferiorGP{
display: none !important;
}	
.btnIni {
  width: 61px !important;
  height: 61px !important;
  bottom: 12px;
  font-size: 22px; 
  padding-top: 6px;
}
.nav-link{font-family: 'Roboto', sans-serif; font-weight: 400; letter-spacing: -0.7px; min-width: 10px; text-rendering: optimizeLegibility;}
}
/*/////////////////////////////////////////////////////////*/
/* Ajuste responsivo para celulares */
@media (max-width: 480px) {
    #custom-cookie-banner {
        width: calc(100% - 70px); /* Adapta à largura do celular mantendo margens */
        min-height: auto;          /* Altura flexível para não cortar texto em telas pequenas */
        bottom: 52px;              /* Mantém os 52px no mobile */
        padding: 15px 20px;
    }

    .cookie-buttons {
        flex-direction: row;       /* Botões lado a lado */
        justify-content: center;
    }
	.menu{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;}
	.calendario{height: 170vw;}
}