/* =========================================================
   OSCAMPUS: NAVEGAÇÃO DA AULA (BOTÕES) - 3 POR LINHA NO MOBILE
   ========================================================= */
#course-navigation{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#course-navigation .osc-btn{
  box-sizing: border-box;
}

/* Mobile: 3 por linha, só ícones (texto escondido) */
@media (max-width: 768px){
  #course-navigation .osc-hide-tablet{
    display: none !important;
  }

  #course-navigation .osc-btn{
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);

    font-size: 13px !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap;
  }

  #course-navigation .osc-btn .fas{
    font-size: 16px !important;
  }
}

/* Celulares muito estreitos: cai para 2 por linha */
@media (max-width: 380px){
  #course-navigation .osc-btn{
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}


/* =========================================================
   OSCAMPUS: LISTA DE AULAS (TABLE OF CONTENTS) COM CARA DE MENU
   ========================================================= */
#content-content.osc-course-tabs-content{
  font-size: 16px;
}

/* Título do módulo/seção */
#content-content .osc-row-heading{
  margin: 18px 0 10px;
}
#content-content .osc-row-heading .block12{
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;

  padding: 10px 12px;
  border-left: 6px solid #2563eb;
  background: #f8fafc;
  border-radius: 12px;
}

/* Cada linha vira card */
#content-content .osc-section.osc-row-one,
#content-content .osc-section.osc-row-two{
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.14),
    0 26px 70px rgba(15, 23, 42, 0.14);

  padding: 12px;
  margin: 10px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  box-sizing: border-box;
}

/* Link da aula */
#content-content .block8{
  flex: 1 1 auto;
  min-width: 0; /* permite ellipsis */
}
#content-content .block8 a{
  display: inline-block;
  max-width: 100%;

  font-size: 17px;
  font-weight: 800;
  line-height: 22px;

  text-decoration: none;
  color: #0f172a;

  padding: 10px 12px;
  border-radius: 12px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover/foco */
#content-content .block8 a:hover,
#content-content .block8 a:focus{
  background: #e2e8f0;
  outline: none;
}

/* Status (Viewed) */
#content-content .osc-check-viewed{
  flex: 0 0 auto;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
}

/* Flag “free” (se existir) */
#content-content .osc-lesson-free,
#content-content .osc-freeflag{
  margin-left: 8px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #065f46;
}

/* Mobile: ajustes */
@media (max-width: 768px){
  #content-content .block8 a{
    font-size: 16px;
    padding: 12px;
  }

  #content-content .osc-section.osc-row-one,
  #content-content .osc-section.osc-row-two{
    padding: 10px;
    border-radius: 14px;
  }
}


/* =========================================================
   OSCAMPUS: CENTRALIZAR CAPA + BLOCO DE INFO (CURSO)
   ========================================================= */
#oscampus.osc-container img{
  max-width: 100%;
  height: auto;
}

/* Centraliza bloco do topo (sem quebrar layout) */
#oscampus.osc-container .osc-course-details{
  text-align: center;
}

#oscampus.osc-container .osc-course-image img{
  display: block !important;
  margin: 0 auto !important;
}

#oscampus.osc-container .osc-course-description{
  text-align: center;
}

/* Mantém a listinha (Teacher/Released/...) alinhada e legível */
#oscampus.osc-container .osc-course-description .osc-course-info{
  display: inline-block;
  text-align: left;
}


/* =========================================================
   OSCAMPUS: TABS (TOC / DESCRIPTION / TEACHER) - SEM QUEBRAR ACCORDION
   IMPORTANTE: não mexer no display do container (.osc-course-tabs)!
   ========================================================= */
#oscampus.osc-container .osc-course-tabs{
  text-align: center;
}

/* Estiliza apenas os botões/abas */
#oscampus.osc-container .osc-course-tabs .block2,
#oscampus.osc-container .osc-course-tabs .nav-link{
  display: inline-block;
  min-width: 220px;
  margin: 6px 4px;

  font-size: 15px;
  font-weight: 800;
  text-align: center;

  padding: 10px 14px;
  border-radius: 10px;

  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  box-shadow: 0 6px 16px rgba(15,23,42,.10);
  cursor: pointer;
}

/* Estado ativo */
#oscampus.osc-container .osc-course-tabs .active,
#oscampus.osc-container .osc-course-tabs .block2.active{
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

/* Hover */
#oscampus.osc-container .osc-course-tabs .block2:hover,
#oscampus.osc-container .osc-course-tabs .nav-link:hover{
  background: #e2e8f0;
}

/* Mobile: tabs em coluna sem mexer no container */
@media (max-width: 768px){
  #oscampus.osc-container .osc-course-tabs .block2,
  #oscampus.osc-container .osc-course-tabs .nav-link{
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 6px auto;
  }
}


/* =========================================================
   RSVARIO TEMPLATE: ZERAR RESPIRO DO HEADER/MENU
   ========================================================= */
#rstpl-main-menu-position{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}