css:root, [data-bs-theme=light] {
  /* 1. Define a cor base e suas variações de foco/clique */
  --bs-pink-custom: #d63384;
  --bs-pink-custom-hover: #b8236c;
  --bs-pink-custom-border: #c22975;
  
  /* 2. Cria as variáveis utilitárias de texto e fundo do Bootstrap */
  --bs-pink: var(--bs-pink-custom);
  --bs-pink-rgb: 214, 51, 132; /* Equivalente ao HEX em RGB (separado por vírgulas) */
}
.fundo-rosa{
    background-color: #d63384;
    color:#ffffff;
    border-color:#c22975;
    
}
.fundo-rosa:hover{
    background-color: #b8236c;
}

.fundo-roxo{
     background-color: #6610f2;
    color:#ffffff;
    border-color: #6610f2;
   
}

/* 3. Cria manualmente a classe de botão do Bootstrap */
.btn-pink {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-pink-custom);
  --bs-btn-border-color: var(--bs-pink-custom);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-pink-custom-hover);
  --bs-btn-hover-border-color: var(--bs-pink-custom-border);
  --bs-btn-focus-shadow-rgb: var(--bs-pink-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-pink-custom-border);
  --bs-btn-active-border-color: var(--bs-pink-custom-hover);
}
/* Cria o utilitário de fundo (bg-pink) com suporte a opacidade do Bootstrap 5 */
.bg-pink {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-pink-rgb), var(--bs-bg-opacity)) !important;
}

/* Cria o utilitário de texto (text-pink) */
.text-pink {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-pink-rgb), var(--bs-text-opacity)) !important;
}

/* Opcional: Cria a versão de fundo suave (bg-pink-subtle) */
.bg-pink-subtle {
  background-color: var(--bs-pink-bg-subtle) !important;
}

/* Adicione esta variável dentro do seu bloco :root atual */
:root, [data-bs-theme=light] {
  /* ... suas variáveis anteriores ... */
  --bs-pink-bg-subtle: #fcd3e3; /* Tom de rosa bem claro para o fundo suave */
}


  .cor-destaque { background-color: #fff9c4 !important; border-left: 4px solid #fbc02d; }
        .wga-status-container { min-height: 20px; }
        /* Impede que o menu colapse a partir de telas médias (Desktop) */
        @media (min-width: 768px) {
          .dont-collapse-sm.collapse {
            display: block !important;
            height: auto !important;
            visibility: visible !important;
          }
        }

/* Remove a transição suave do Bootstrap 5 APENAS enquanto o modal está sendo arrastado */
.modal.fade .modal-dialog.ui-draggable-dragging {
    transition: none !important;
}

/* Indica visualmente para o usuário que o topo do modal pode ser arrastado */
.modal-header {
    cursor: move !important;
}

.fundo-mercadopago{
    background-color: #4FC3F7 !important;
    color:#ffffff !important;
}
.texto-mercadopago{
    color:#4FC3F7 !important;
}

.nav-pills .nav-link.active {
  background-color: var(--bg-cor); /* Your custom color */
  color: var(--text-menu);            /* Text color */
}
.nav-pills .nav-link:hover {
  background-color: var(--bg-cor); /* Your custom color */
  color: var(--text-menu);            /* Text color */
}

.nav-tabs .nav-link.active {
  background-color: var(--bg-cor); /* Your custom color */
  color: var(--text-menu);            /* Text color */
}
.nav-tabs .nav-link:hover {
  background-color: var(--bg-cor); /* Your custom color */
  color: var(--text-menu);            /* Text color */
}

@media (max-width: 768px){
    
body[class*="cor_p"] nav.navbar .minha-tab  {
   

    padding:0;
    border-radius: 0;
   padding:0;
}

}
/* Zera o canto arredondado em telas menores que 768px (tablets e celulares) */
@media (max-width: 768px) {
    body[class*="cor_p"] nav.navbar .minha-tab{
        border-radius: 0;

    }
}
@media (max-width: 768px){
    body[class*="cor_p"] .card .card-header{  
    border:0px;
    border-radius: 0;
    padding: 0;
    padding-top: 0;
    padding-bottom:0;
    border-radius: 0;
    }
}
@media (max-width: 768px){
    .btn .btn-rounded-pill{
        border-radius: 0;
    }
}


/* BACKGROUNDS */
body[class*="cor_p"] .bg-padrao {
    background-color: var(--bg-cor) !important;
    color: var(--text-menu) !important; /* Já garante que o texto fique legível */
}

body[class*="cor_p"] .bg-padrao-hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-cor) !important;
}

/* CORES DE TEXTO */
body[class*="cor_p"] .texto-padrao {
    color: var(--text-cor) !important;
}
body[class*="cor_p"] .texto-primario {
    color: var(--bg-cor) !important;
}

.borda-padrao{
     border-color: var(--bg-cor) !important;
}
.borda-secundaria{
     border-color: var(--text-cor) !important;
}
.borda-mercadopago{
    border-color:#4FC3F7 !important;
}

body[class*="cor_p"] .fundo-padrao {
    background-color: var(--bg-cor) !important;
    color: var(--text-cor) !important;
}
.cor-padrao {
   
    color: var(--text-cor) !important;
}

body[class*="cor_p"] .list-group-item-action.active  {
   background-color: var(--bg-cor) !important;
    color: var(--text-menu) !important;
  border-color: var(--bg-cor);    
 
}


body[class*="cor_p"] .list-group-item-action:hover {
     background-color: var(--bg-cor) !important;
    color: var(--text-menu) !important;
  border-color: var(--bg-cor);    
 
}


.card{
    border:0px;
}
.card .card-header{
  
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
    #image {
        max-width: 100%;
    }
    
    /* Para telas menores que 768px (mobile/tablet) */
@media (max-width: 767px) {
  .input-group.stack-mobile > * {
    display: block !important;
    width: 100% !important;
    border-radius: 0.25rem !important; /* Reativa bordas arredondadas */
  }

  /* Opcional: Ajustar bordas dos elementos empilhados */
  .input-group.stack-mobile > :not(:last-child) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

/* Impede que o menu colapse a partir de telas médias (Desktop) */
@media (min-width: 768px) {
  .dont-collapse-sm.collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
}

@media (min-width: 768px) {
  /* Alvo apenas no accordion com a nossa classe customizada */
  .accordion-responsive .accordion-collapse.collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }

  /* Desativa o clique e remove estilos de botão apenas neste accordion */
  .accordion-responsive .accordion-button {
    pointer-events: none;
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }

  /* Remove a seta apenas neste accordion */
  .accordion-responsive .accordion-button::after {
    display: none !important;
  }
  

  
@media (max-width: 768px) {
  .texto-responsivo {
    display: none;
  }

  /* Remove a margem do ícone enquanto o texto estiver escondido */
  .meu-botao i {
    margin-right: 0 !important; 
  }

  .meu-botao:hover .texto-responsivo {
    display: inline-block;
  }

  /* Devolve a margem para o ícone apenas quando o texto aparecer */
  .meu-botao:hover i {
    margin-right: 0.5rem !important; /* Equivalente ao me-2 */
  }
}




/* Content Animation */
.tab-pane.fade {
    transition: all 0.2s ease-out;
}

.tab-pane.fade.show {
    animation: fadeIn 0.5s ease-out;
}
}

/* Classe base universal */
.borda-seta-dentro {
  position: relative;
}

.borda-seta-dentro::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  
  /* 1. Mude estes dois valores iguais para aumentar a ALTURA da seta */
  border-top: 20px solid transparent;   /* Era 10px */
  border-bottom: 20px solid transparent;/* Era 10px */
  
  /* 2. Mude este valor para aumentar a LARGURA (profundidade) da seta */
  border-right: 22px solid transparent; /* Era 15px */
  
  z-index: 10;
  transition: border-right-color 0.2s ease;
}

/* Ativa a cor da seta quando o elemento tiver a classe .active */
.borda-seta-dentro.active::after {
  border-right-color: var(--text-menu) !important; /* Cor da seta ativa (mude para a cor que desejar) */
}


/* Classe base: aplica em qualquer elemento que vá ter a seta */
.borda-seta {
  position: relative;
}

/* Cria a seta (escondida por padrão) */
.borda-seta::after {
  content: "";
  position: absolute;
  right: -15px; /* Ajuste para fora do elemento */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid transparent; /* Invisível */
  z-index: 10;
  transition: border-left-color 0.2s ease;
}

/* Gatilho universal: ativa a seta quando o elemento tiver a classe .active */
.borda-seta.active::after {
  border-left-color: #0d6efd; /* Cor da seta ativa (mude se necessário) */
}

/* Opcional: remove a borda direita original do elemento quando ativo */
.borda-seta.active {
  border-right-color: transparent !important;
}