body {
    font-family: sans-serif; /* Fonte genérica, Bootstrap já tem a sua */
}

.bg-1{
      background-image: url('../assets/images/backgrounds/bg-login-desktop.png');
    background-size: cover;
    /* background-position: center; */
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.bg-gradient {
    /* Fallback para navegadores que não suportam gradientes */
    background-color: rgba(100, 63, 200, .8); 

    /* Modern standard syntax with !important to override Bootstrap's bg-color */
        background-image: linear-gradient(-90deg, 
        rgba(38, 26, 241, 1) 0%, 
        rgba(100, 63, 200, 1) 33%, 
        rgba(155, 93, 160, 1) 66%, 
        rgba(237, 110, 57, 1) 100%
    ) !important; /* <--- ADICIONADO !important AQUI */

    /* Old Microsoft IE filter (for IE 6-9) */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#261AF1", endColorstr="#ED6E39", GradientType=1);
}
.bg-gradient-50 {
    /* Fallback para navegadores que não suportam gradientes */
    background-color: rgba(100, 63, 200, .5); 

    /* Modern standard syntax with !important to override Bootstrap's bg-color */
        background-image: linear-gradient(-90deg, 
        rgba(38, 26, 241, .7) 0%, 
        rgba(100, 63, 200, .7) 33%, 
        rgba(155, 93, 160, .7) 66%, 
        rgba(237, 110, 57, .7) 100%
    ) !important; /* <--- ADICIONADO !important AQUI */

    /* Old Microsoft IE filter (for IE 6-9) */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#261AF1", endColorstr="#ED6E39", GradientType=1);
}

.bg-gradient-20 {
    /* Fallback para navegadores que não suportam gradientes */
    background-color: rgba(100, 63, 200, .2); 

    /* Modern standard syntax with !important to override Bootstrap's bg-color */
        background-image: linear-gradient(-90deg, 
        rgba(38, 26, 241, .4) 0%, 
        rgba(100, 63, 200, .4) 33%, 
        rgba(155, 93, 160, .4) 66%, 
        rgba(237, 110, 57, .4) 100%
    ) !important; /* <--- ADICIONADO !important AQUI */

    /* Old Microsoft IE filter (for IE 6-9) */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#261AF1", endColorstr="#ED6E39", GradientType=1);
}

.bg-purple{
    background-color: rgba(67, 43, 134, 0.8); 
}
.bg-orange{
    background-color: rgba(237, 110, 57, .8); 
}


/* Centraliza os cards de login/cadastro verticalmente e horizontalmente */
.vh-100 {
    min-height: 100vh;
}

.card {
    border-radius: 0.75rem; /* Bordas mais arredondadas */
}
.main-content {
    padding-top: 50px;
    padding-bottom: 50px;
}
.user-info-card .card-body {
    display: flex;
    align-items: center;
}
.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
    /* border: 3px solid #0d6efd;  */
}

/* Estilo para as mensagens de feedback */
.alert {
    word-break: break-word; /* Garante que o texto não "transborde" em telas pequenas */
}

/* Estilos específicos para a trilha de aprendizado (adicionados ou atualizados) */
.learning-path-item {
    margin-bottom: 10px; /* Espaçamento entre os itens */
    border-radius: .5rem; /* Bordas arredondadas */
    overflow: hidden; /* Garante que o conteúdo não saia das bordas arredondadas */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Transição suave para cores */
}
.learning-path-item.disabled {
    opacity: 0.6; /* Deixa itens bloqueados mais opacos */
    cursor: not-allowed;
    background-color: #e9ecef; /* Um cinza mais escuro para bloqueados */
    border-color: #dee2e6;
}
.learning-path-item.completed {
    background-color: #d1e7dd; /* Fundo verde claro para concluídos */
    border-color: #badbcc;
}
.learning-path-item.active-pill {
     background-color: #cfe2ff; /* Fundo azul claro para a pílula ativa */
     border-color: #9ec5fe;
     animation: pulse 1.5s infinite alternate; /* Animação sutil para o item ativo */
}

/* Animação de "pulsação" para a pílula ativa */
@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.01); }
}

.learning-path-item .item-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    color: #0d6efd; /* Cor primária do Bootstrap */
}
.learning-path-item.completed .item-icon {
    color: #198754; /* Verde sucesso do Bootstrap */
}
.learning-path-item.disabled .item-icon {
    color: #6c757d; /* Cinza do Bootstrap */
}
.learning-path-item .item-title {
    font-weight: bold;
    color: #212529; /* Cor de texto padrão */
}
.learning-path-item.disabled .item-title {
    color: #6c757d;
}

  #crossword-board {
    
    user-select: none;
    width:800px;      /* ajuste para o tamanho desejado */
    height:800px;     /* ajuste para o tamanho desejado */
    overflow: auto;    /* ativa barras de rolagem quando necessário */
    border: none; /* opcional para visualização */
    display: flex;
    align-items: flex-start;
  }

  table {
    table-layout: auto;
    /* width: 100%; */
    border-collapse: collapse;
  }
  td {
    border: 1px solid #ccc;
  width: 30px;
  height: 30px;
  min-width: 30px;
  max-width: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0;
  text-align: center;
  vertical-align: top;
  position: relative;
}
  td span.position {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 10px;
    color: #555;
  }
  input {
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 18px;
    outline: none;
    font-family: monospace;
    padding: 0;
    margin: 0;
  }
  input.correct {
    background-color: #c8e6c9;
    font-weight: bold;
  }
  input.incorrect {
    background-color: #ffcdd2;
  }
  /* #clues {
     max-width: 350px; 
  } */
  #clues h2 {
    margin-top: 0;
  }
  #clues ul {
    list-style: none;
    padding-left: 0;
  }
  #clues li {
    font-size: 15px;
    margin-bottom: 0px;
  }
  #clues li strong {
    color: #333;
  }


  .btn-primary{
      --bs-btn-color: #fff;
    --bs-btn-bg: rgba(100, 63, 200, .8);
    --bs-btn-border-color: rgba(100, 63, 200, .8);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(74, 46, 151, 0.8);
    --bs-btn-hover-border-color: rgba(19, 9, 48, 0.8);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(19, 9, 48, 0.8);
    --bs-btn-active-border-color: rgba(48, 28, 107, 0.8);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgba(100, 63, 200, .8);
    --bs-btn-disabled-border-color: rgba(100, 63, 200, .8);
}