/*
  background-color: var(--cardbg);
  background:color-mix(in srgb, var(--cardbg) 30%, black);
  color: var(--cardcolor);
  border-color: var(--cardborder);
*/

.container-edutools-carousel .course-img{background-size:cover;background-position:center;border-radius:0.5rem}
.container-edutools-carousel .dashboard-card{border:1px solid var(--cardborder)!important;}

/* Imagem do cartão: centralizada e sem corte */
.container-edutools-carousel .course-img-img{
    width: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    background: #f8f9fa;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    height: 180px;
}

/* O body ocupa o restante do card, com layout previsível */
.container-edutools-carousel .card .card-body {
  flex: 1 1 auto;                     /* preenche a altura disponível */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 140px;                  /* altura mínima padrão — ajuste */
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  background:color-mix(in srgb, var(--cardbg) 98%, black)!important;
}

/* Título clamp em 2 linhas (altura garantida) */
.container-edutools-carousel .card .card-title {
  margin: 0 0 .25rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;              /* 2 linhas */
  overflow: hidden;
  min-height: calc(1.25em * 2);       /* reserva o espaço de 2 linhas */
  color: var(--cardcolor)!important;
}

/* As duas linhas pequenas abaixo do título: 1 linha cada, com reticências */
.container-edutools-carousel .card .card-body > .small.text-muted:nth-of-type(1),
.container-edutools-carousel .card .card-body > .small.text-muted:nth-of-type(2) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.1rem;                 /* altura fixa por linha */
  color: var(--cardcolor)!important;
}

/* “0% completo” + barra sempre no rodapé do body */
.container-edutools-carousel .card .card-body > .small.text-muted.mt-2 {
  margin-top: auto;                    /* empurra para baixo */
  color: var(--cardcolor)!important;
}
.container-edutools-carousel .card .progress { height: 10px; color: var(--cardcolor)!important;}

/* já que ajustou o item 3: manter seta única do accordion */
.container-edutools-carousel .accordion-button::before{
  display: none !important;
}

/* Espaço extra para os bullets da paginação do Swiper
   (evita ficar por cima dos cards e do próximo accordion) */
.container-edutools-carousel .swiper{
  padding-bottom: 32px;      /* aumenta a área útil do carrossel */
}

/* posiciona os bullets um pouco acima da borda inferior do swiper */
.container-edutools-carousel .swiper-pagination{
  bottom: 8px !important;    /* ajuste fino do posicionamento */
  left: 0; right: 0;         /* centraliza */
}

/* (opcional) tamanho/visibilidade dos bullets */
.container-edutools-carousel .swiper-pagination-bullet{ opacity: .35; }
.container-edutools-carousel .swiper-pagination-bullet-active{ opacity: 1; }

.container-edutools-carousel .nav-tabs .badge{
  font-size: .65rem;
  vertical-align: middle;
}

/* Badge e contador no cabeçalho do tópico */
.container-edutools-carousel .accordion-button .badge{
  font-size: .65rem;
  vertical-align: middle;
}
.container-edutools-carousel .accordion-button .topic-counter{
  font-size: .75rem;
  color: var(--cardcolor); /* text-muted */
}

/* ===========================
   NOVO: Estados "bloqueado"
   =========================== */

/* Card bloqueado: cinza + levemente translúcido */
.container-edutools-carousel .dashboard-card.tmr-locked{
  filter: grayscale(1);
  opacity: .6;
}

/* Desativa interação de links (quando usamos <span> no lugar do <a>, é só estilo) */
.container-edutools-carousel .tmr-link-disabled{
  pointer-events: none;
  cursor: not-allowed;
  color: inherit;
  text-decoration: none;
}

/* Garantia extra: se por algum motivo ainda houver <a> dentro de um card bloqueado */
.container-edutools-carousel .dashboard-card.tmr-locked a{
  pointer-events: none;
  cursor: not-allowed;
}

/* Badges auxiliares para status de inscrição */
.container-edutools-carousel .tmr-badge{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.2;
  margin-left: 6px;
}
.container-edutools-carousel .tmr-badge--suspended{ background:#f6c37a; color:var(--cardcolor); }
.container-edutools-carousel .tmr-badge--none{ background:#cccccc; color:var(--cardcolor); }

/* Ajuste fino do título do card em modo bloqueado */
.container-edutools-carousel .dashboard-card.tmr-locked .card-title .tmr-link-disabled{
  color: var(--cardcolor)!important; /* parecido com text-muted */
}

/* Evita que o filtro cinza prejudique a legibilidade de barras de progresso
   (opcional: remove o filtro apenas da barra) */
.container-edutools-carousel .dashboard-card.tmr-locked .progress,
.container-edutools-carousel .dashboard-card.tmr-locked .progress *{
  filter: none;
  opacity: 1;
}


/* ============================
   Tabs horizontais com scroll
   ============================ */

/* 1) Faça o UL ocupar a largura disponível e permitir encolher */
.container-edutools-carousel .d-flex > .nav-tabs{
  flex: 1 1 auto;    /* ocupa o espaço e pode encolher */
  min-width: 0;      /* PERMITE encolher de verdade (cria overflow quando necessário) */
  width: 100%;
  max-width: 100%;   /* garante que não ultrapasse o container */
}

/* 2) Ative a faixa rolável continuamente (desktop como mobile) */
.container-edutools-carousel .nav-tabs{
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;                 /* sempre rolável */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  gap: .25rem;
  scrollbar-width: none;            /* Firefox: oculta barra */
  overscroll-behavior-x: contain;   /* evita "puxar" o scroll do body */
  touch-action: pan-x;              /* indica gesto horizontal */
}
.container-edutools-carousel .nav-tabs::-webkit-scrollbar{
  display: none;                    /* Chrome/Safari: oculta barra */
}

/* 3) Cada item não quebra linha nem estica */
.container-edutools-carousel .nav-tabs .nav-item{ flex: 0 0 auto; color: var(--cardcolor); }
.container-edutools-carousel .nav-tabs .nav-link{ white-space: nowrap; color: var(--cardcolor); padding: 30px; }


.nav-tabs {
    border-color: var(--cardbg)  !important;
    
}

.nav-tabs .nav-link{
    margin-bottom: auto!important;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    background: color-mix(in srgb, var(--cardbg) 90%, black);
    border-radius: 10px;
    border: 1px solid var(--cardborder);
    font-weight: 500;
    box-shadow:none!important;
    color: var(--cardcolor)  !important;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus{
    font-weight: 700;
    border: 1px solid var(--cardborder);
    box-shadow:none!important;
    color: var(--cardcolor)  !important;
}
.nav-link:focus{
    box-shadow: none !important;
}


/* (Opcional) trate a label "Academias:" para não parecer desabilitada */
.container-edutools-carousel .nav-tabs .nav-link.disabled{
  opacity: 1;          /* mantém visual normal */
  cursor: default;     /* cursor padrão */
  pointer-events: none;/* sem ação */
}

/* (Opcional) dica visual de que há mais conteúdo (fade nas bordas) 
@supports (mask-image: linear-gradient(black, white)) or (-webkit-mask-image: linear-gradient(black, white)){
  .container-edutools-carousel .nav-tabs{
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  }
}
*/
/* (Opcional) cursor durante drag */
.container-edutools-carousel .nav-tabs{ cursor: grab; }
.container-edutools-carousel .nav-tabs.is-dragging{ cursor: grabbing; }



/* === Edutools simple carousel === */
.container-edutools-carousel .edcrl-wrapper{position:relative;padding-top:16px}
.container-edutools-carousel .edcrl-controls{position:absolute;top:-60px;right:12px;display:flex;gap:6px;z-index:2}
.container-edutools-carousel .edcrl-btn{background:var(--cardbg);font-size: 1.2rem;color:var(--cardcolor);border:1px solid var(--cardborder);border-radius:8px;padding:4px 12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.container-edutools-carousel .edcrl-btn:disabled{opacity:.5;cursor:default}
.container-edutools-carousel .edcrl-viewport{overflow:hidden}
.container-edutools-carousel .edcrl-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px)/3);gap:12px;transition:transform .25s ease}
/* Each JS-created slide already contains .card; the outer .edcrl-card ensures grid sizing */
.container-edutools-carousel .edcrl-card{display:block}

/* container/posicionamento */
.container-edutools-carousel{ position: relative; }
.container-edutools-carousel .edcrl-wrapper{ position: relative; padding-top: 16px; }
.container-edutools-carousel .edcrl-controls{
  position: absolute; top: -60px; right: 8px;
  display: flex; gap: 6px; z-index: 5;
}
.container-edutools-carousel .edcrl-viewport{ overflow: hidden; }

/* 3 por view, com gap de 12px */
.container-edutools-carousel .edcrl-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 3); /* 3 cards visíveis */
  gap: 12px;
  transition: transform .25s ease;
}

/* cada slide “encaixa” no grid */
.container-edutools-carousel .edcrl-card{ display: block; }

/* o .card do Bootstrap costuma ter min-width/margem – zera aqui */
.container-edutools-carousel .edcrl-card > .card{
  height: 100%;
  margin: 0;
  min-width: 0;         /* <- evita “estourar” a coluna do grid */
  border-radius: 12px;  /* opcional: deixa mais bonito */
  overflow: hidden;
}

/* imagem com proporção fixa como nos outros blocos */
.container-edutools-carousel .edcrl-card .card-img-top{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* mantém altura controlada */
  object-fit: cover;
  display: block;
}

.container-edutools-carousel .edcrl-btn{
    background:var(--cardbg);font-size: 1.2rem;color:var(--cardcolor);border:1px solid var(--cardborder);border-radius:8px;padding:4px 12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06)
}
.container-edutools-carousel .edcrl-btn:disabled{ opacity:.5; cursor:default; }

/* container e controles (setas no topo direito, fora dos cards) */
.container-edutools-carousel { position: relative; }
.container-edutools-carousel .edcrl-wrapper { position: relative; padding-top: 16px; }
.container-edutools-carousel .edcrl-controls {
  position: absolute; top: -60px; right: 8px;
  display: flex; gap: 6px; z-index: 5;
}
.container-edutools-carousel .edcrl-btn {
  background:var(--cardbg);font-size: 1.2rem;color:var(--cardcolor);border:1px solid var(--cardborder);border-radius:8px;padding:4px 12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06)
}
.container-edutools-carousel .edcrl-btn:disabled { opacity: .5; cursor: default; }

.container-edutools-carousel .edcrl-viewport { overflow: hidden; }

/* 3 cards visíveis por “página” */
.container-edutools-carousel .edcrl-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 4); /* 3 colunas com 12px de gap */
  gap: 12px;
  transition: transform .25s ease;
}

/* cada slide recebe .edcrl-card (envolve o seu .card Bootstrap) */
.container-edutools-carousel .edcrl-card { display: block; }

/* o .card do Bootstrap costuma “estourar” a coluna com min-width/margem -> neutraliza */
.container-edutools-carousel .edcrl-card > .card {
  height: 100%;
  margin: 0;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
}

/* imagem do card com proporção fixa (igual aos outros blocos) */
.container-edutools-carousel .edcrl-card .course-img-img,
.container-edutools-carousel .edcrl-card .card-img-top {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Desktop: 3 por vez (já existe), Mobile: 1 por vez */
@media (max-width: 780px) {
  .container-edutools-carousel .edcrl-wrapper { padding-top: 16px; }
  .container-edutools-carousel .edcrl-track {
    grid-auto-columns: 100%;   /* 1 card por “página” */
    gap: 10px;                 /* opcional: gap um pouquinho menor no mobile */
  }
}