@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap");
@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*Este es el css del header de la parte de cursos*/
#header-cursos{

/*Inicio header desktop*/
/*Contenedor header*/
.header-main-cursos {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.88rem;
  z-index: 1000;
  background: #F6EADD;
  display: grid;
  grid-template-rows: 3.44rem 3.44rem;

  /*Este es la animacion de cuando se muestra el submenu*/
  transition: transform 0.6s ease-in-out;
}


/*Este es el diseño de la fila superior para desktop*/
.top-row-header-course {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 4.8rem;
  padding-top: .05rem;
  gap: 1.2rem;
}

@media screen and (min-width: 1800px) {
  .top-row-header-course {
    padding-right: 6.2rem;
  }
  .bottom-row-header-course {
    padding-left: 6.12rem!important;
    padding-right: 6.51rem!important;
    margin-top: .05rem;
  }
  .header-curso-contacto-btn {
    margin-left: 0rem;
    padding: 0.32rem 1.87rem!important;
  }
  .header-curso-nav-menu{
    gap:3.13rem!important;
  }
}
@media screen and (min-width: 1600px) and (max-width: 1799px) {
  .top-row-header-course {
    padding-right: 5.65rem;
  }
  .header-curso-contacto-btn {
    margin-left: 0rem;
    padding: 0.32rem 1.87rem!important;
  }

  .bottom-row-header-course {
    padding-left: 5.6rem!important;
    padding-right: 6rem!important;
    margin-top: .05rem;
  }
}
@media screen and (min-width: 1401px) and (max-width: 1599px) {
  .top-row-header-course {
    padding-right:  5.15rem;
  }
}
@media screen and (max-width: 1400px) {
  .top-row-header-course {
    padding-right: 4.65rem;
    margin-bottom: .04rem;
  }
}
@media screen and (max-width: 1280px) {
  .top-row-header-course {
    margin-bottom: .02rem;
    padding-right: 4.26rem;
  }
}
@media screen and (max-width: 1150px) {
  .top-row-header-course {
    padding-right: 1.88rem;
  }
}


/*Este es el diseño de la fila inferior para desktop*/
.bottom-row-header-course {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.88rem;
  padding-left: 5.2rem;
  padding-right: 5.6rem;
  padding-top: 0;
  gap: 2rem;
}

/* Pantallas grandes pero no muy anchas */
/*@media screen and (max-width: 1600px) {
  .bottom-row-header-course {
    padding-left: 4.5rem;
    padding-right: 5rem;
  }
}*/

@media screen and (max-width: 1400px) {
  .bottom-row-header-course {
    padding-left: 4.85rem;
    padding-right: 5.22rem;
  }
  .header-curso-logo img {
    height: 3.6rem;
    padding-top: .009rem;
    object-fit: contain;
  }
  .header-curso-contacto-btn {
    margin-left: 0rem;
    padding: 0.32rem 1.89rem!important;
  }
  .header-curso-nav-menu{
    gap:3.12rem!important;
  }
}


@media screen and (max-width: 1280px) {
  .bottom-row-header-course {
    padding-left: 3.05rem;
    padding-right: 4.58rem;
    margin-top: .05rem;
  }
  .header-curso-logo img {
    padding-top: .015rem;
  }
  .header-curso-contacto-btn {
    margin-left: 2.78rem!important;
    font-size: .95rem!important;
    padding: 0.32rem 1.87rem!important;
  }
  .header-curso-nav-menu{
    gap:2.8rem!important;
  }
  .header-curso-nav-menu li a{
    font-size: .95rem;
  }

}

/* 1150px*/
@media screen and (max-width: 1150px) {
  .bottom-row-header-course {
    padding-left: 1.51rem!important;
    padding-right: 2.3rem;
    padding-bottom: .82rem;
    gap: 1.78rem!important;
  }
  .header-curso-nav-menu {
    gap: 2.145rem!important;
    margin-bottom: .05rem!important;
  }
  .header-curso-logo img {
    height: 3.45rem;
    margin-bottom: .05rem;
  }
  .header-curso-contacto-btn {
    margin-left: 2.16rem!important;
    padding: 0.319rem 1.87rem!important;
    font-size: .8rem!important;
    margin-bottom: .05rem;
  }
  .header-curso-nav-menu li a{
    font-size: .8rem;
  }
}

/*Inicio css de la fila superior (Carrito y informacion del usuario)*/
/* login */
.header-curso-user__toggle{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #748274;
  padding: 0.3rem 0.6rem;
  border-radius: 0.75rem;
  font-size: 0.8rem;
  text-decoration: none;
  font: inherit;
}

/* Icono/Avatar redondo en ambos estados */
.header-curso-user__avatar,
.header-curso-user__login-icon {
  background-color: #dcd5c8;
  color: #748274;
  font-size: 0.9rem;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Texto al lado del icono en ambos estados */
.header-curso-user__name,
.header-curso-user__login-text {
  font-weight: 500;
  line-height: 1;
}

/* Hover: solo letras, sin "pintado" de fondo */
.header-curso-user__toggle:hover,
.header-curso-user__login:hover {
  color: #99a597;
}

/* Carrito */
.header-curso-store__link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  text-decoration: none;
  color: #748274;
}

.header-curso-store__icon {
  background-color: #dcd5c8;
  color: #748274;
  font-size: .8rem;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-curso-store__text {
  font-weight: 500;
  color: #748274;
}

/* Hover carrito: solo texto */
.header-curso-store__link:hover {
  color: #99a597;
}
.header-curso-store__link:hover .header-curso-store__text {
  color: inherit;
}
.header-curso-user__name{
  font-size: .8rem;
  font-weight: 500;
}
/*Inicio del menu dropdowns*/
.header-curso-user__menu {
  position: absolute;
  top: calc(100% - 0.2rem);
  right: -0.5rem;

  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 220px;
  padding: 0.8rem 1rem;

  transform-origin: top right;  /* punto de inicio de la animación */
  transform: scaleY(0) translateY(-10px); /* colapsado y subido */
  opacity: 0;
  pointer-events: none;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;

  z-index: 1000;
  font-size: 0.8rem;
}

.header-curso-user__menu.open {
  transform: scaleY(1) translateY(0); /* se expande verticalmente */
  opacity: 1;
  pointer-events: auto;
}
.header-curso-user__menu hr {
  width: 100%;
  margin: 0.4rem auto;
  border: none;
  border-top: 2px solid;
}
.header-curso-user__heading {
  font-weight: 600;
  color: #748274;
  margin-bottom: 0.4rem;
}
.header-curso-user__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.header-curso-user__list li {
  margin-bottom: 0rem;
}
.header-curso-user__list a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: .8rem;
  color: #333;
  text-decoration: none;
  padding: 0.1rem 0;
}
.header-curso-user__list a i {
  font-size: 1rem;
  color: #000;
  font-weight: 500;
  text-decoration: none;
}
.header-curso-user__list a:hover span {
  text-decoration: underline;
}
.header-curso-user__list .cerrar-sesion {
  color: #C0392B;
  font-weight: 500;
}
.header-curso-user__login {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 1.5rem;
  background-color: transparent;
  color: #748274;
  text-decoration: none;
  font-weight: 500;
  border: none;
  outline: none;
  transition: background-color 0.25s ease;
}
.header-curso-user__login:hover {
  background-color: #dcd5c8;
}
.header-curso-user__login-icon {
  background-color: #dcd5c8;
  color: #748274;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1rem;
  flex-shrink: 0;
}
.header-curso-user__login-icon i {
  color: inherit;
  stroke: none;
  outline: none;
}
.header-curso-user__login-text {
  font-size: .8rem;
  color: #748274;
}
/*Fin del css del login*/
/*Fin css de la fila superior (Carrito y informacion del usuario)*/
/*Inicio de los estilos de la segunda fila*/
/*Inicio estilos logo*/
@media (min-width: 992px) {
.header-curso-logo img {
  height: 3.85rem;
  padding-bottom: 0;
  object-fit: contain;
}
}
/*Fin estilos logo*/
/*Inicio estilos de la barra de navegacion de la pagina*/
.header-curso-nav-contenedor {
  display: flex;
  align-items: center;
}
.header-curso-nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 3.12rem;
}
.header-curso-nav-menu li {
  position: relative;
}
.header-curso-nav-menu a {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #333;
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait),
       screen and (min-width: 1366px) and (max-width: 1366px) and (orientation: landscape) {
  .header-curso-nav-menu a {
    font-size: 0.8rem;
  }
}

.header-curso-nav-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateX(-16%);
  min-width: 160px;
  padding: 0.5rem 0;
  background: #fff;
  border-top: 4px solid #748274;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.header-curso-nav-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.header-curso-nav-menu .sub-menu li {
  padding: 0;
}
.header-curso-nav-menu .sub-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  color: #333;
}
.header-curso-contacto-btn {
  background-color: #748274;
  color: white;
  padding: 0.35rem 1.88rem;
  border-radius: 2rem;
  text-decoration: none;
  font-size: 1rem;
  margin-left: 3.1rem;
  transition: background-color 0.3s ease;
}
.header-curso-contacto-btn:hover {
  background-color: #5d6c5e;
}
/*Fin estilos de la barra de navegacion de la pagina*/
/*Fin de los estilos de la segunda fila*/
/*Fin de desktop*/

/*Inicio del diseño responsivo para moviles*/
/*Inicio de como se comporta los diseños de slide del menu vertical y horizonal*/
/*HEADER*/
.header-main-cursos {
  transform: translateY(0);
  transition: transform 0.4s ease;
  will-change: transform;
}
.header-hidden {
  transform: translateY(-100%);
}
/* Estado inicial: oculto a la izquierda */
#mobileMenu {
  transform: translateX(-100%) translateY(0);
  transition: transform 0.4s ease;
  will-change: transform;
}
/* Cuando se abre (entra desde la izquierda) */
#mobileMenu.open {
  transform: translateX(0) translateY(0);
}
/* Cuando el header está oculto y el menú está abierto, se baja */
#mobileMenu.open.header-shifted {
  transform: translateX(0) translateY(4.5rem);
}
/*fin de como se comporta los diseños de slide del menu vertical y horizonal*/
/*Inicio overlay por detrás del menu desplegable */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* Cuando el menú está activo */
.mobile-menu-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/*Inicio del css del menu desplegable, esto solo tiene lo del menu con el togle, nada del header del nav*/
/* Boton toggle del menu (visible solo en movil) */
/* Menu lateral*/
.header-curso-mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  width: 70vw;
  max-width: 16rem;
  height: 100vh;
  background: #fff;
  z-index: 9999;
  overflow-y: auto;
  transition: transform 0.35s ease-in-out;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  padding-bottom: 3.5rem;
}
.header-curso-mobile-nav.open {
  transform: translateX(0);
}
/* Encabezado*/
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0.1rem 1rem;
  background-color: #fff;
  border-bottom: 1.5px solid #99a597;
  margin-bottom: .1rem;
}
.mobile-menu-logo {
  flex: 1;
  display: flex;
  justify-content: center;
}
.mobile-menu-logo img {
  padding-left: .5rem;
  height: 3.6rem;
  object-fit: contain;
}
.placeholder-icon {
  width: 2.5rem;
}
.header-toggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  padding: 0.6rem;
  color: #748274;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 3rem;
}
/*Boton cerrar*/
#menuClose {
  font-size: 1.2rem;
  background: none;
  border: none;
  color: #748274;
  cursor: pointer;
}
/* Lista principal */
.header-curso-mobile-menu {
  list-style: none;
  margin: 0;
  padding: 1rem 0;
}
.header-curso-mobile-menu > li {
  border-bottom: none;
}
.header-curso-mobile-menu > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.2rem;
  font-size: .9rem;
  font-weight: 600;
  color: #99a597;
  text-decoration: none;
}
/*Submens*/
.header-curso-mobile-menu li ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0;
  margin: 0;
  padding-left: 1.8rem;
  background-color: #fff;
}
.header-curso-mobile-menu li.open > ul {
  max-height: 500px;
  padding-top: 0.4rem;
  padding-bottom: 0.5rem;
}
.header-curso-mobile-menu li ul > li > a {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: #99a597;
  text-decoration: none;
}
.toggle-icon {
  margin-left: 0.5rem;
  font-weight: 400;
  font-size: 1rem;
  transition: transform 0.2s ease;
}
.header-curso-mobile-menu li.open > a .toggle-icon {
  transform: rotate(45deg);
}
/*Fin del css del menu desplegable*/

@media (max-width: 991px) {
  .header-main-cursos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4.5rem;
    padding: 0 0rem;
  }

  .top-row-header-course,
  .bottom-row-header-course,
  .header-curso-nav-contenedor {
    display: none !important;
  }

  .header-toggle {
    display: inline-flex !important;
    padding: 0.3rem;
    font-size: 1.5rem;
    background: none;
    border: none;
    color: #333;
  }

  .header-mobile-only {
    display: flex !important;
    width: 100%;
    height: 3.5rem;
    background: #F6EADD;
    /* top | right | bottom | left */
    padding: .2rem .5rem .2rem .5rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .header-mobile-only > * {
    display: flex;
    align-items: center;
  }

  .header-curso-logo img {
    height: 3.85rem;
    padding-left: 0;
    margin-left: 0.2rem;
  }

  .header-mobile-icons {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding-bottom: .1rem!important;
  }

  .header-icon {
    background: none;
    border: none;
    color: #333;
    font-size: 1.2rem;
    padding: 0.3rem;
  }

  .header-curso-store__text,
  .header-curso-user__name {
    display: none;
  }
}
}



/* Clases css de Mari */
.dropins1{
    display: flex;
    justify-content: center;
}
.botones{
    display: flex;
    margin-top: 60px;
}
.colum1{
 display: block;
 width: 50%;
 padding: 0px 60px;
 margin-top: 100px;

}
.cat1{
    font-size: 13px;
    color: #A690A4;
    line-height: 21px;
    font-weight: 700;
}
.tallerdiv1{
    display: flex;
    width: 100%;
}

.titletaller1{
    font-size: 48px;
    color: #90A692;
    line-height: 50px;
    font-weight: 700;
    font-family: 'PT Serif';
}
.titletaller2{
    line-height: 50px;
    font-size: 13px;
    color: #A690A4;
    font-weight: 700;
    margin-left: 230px;
}
.subtaller{
    font-weight: 700;
    font-size: 18px;
    font-family: 'Roboto';
    color: #9099A6;
    
}
.texttaller{
    text-align: justify;
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    font-family: 'Roboto';
    width: 459px;
    height: auto;
    color: #9099A6;
}
.tallerdiv2{
    display: flex;
}
.tallerdiv3{
    display: flex;
}
.itemtaller2{
    margin-right: 62px;
    font-size: 13px;
    line-height: 21px;
    font-weight: 700;
    color: #A690A4;
    font-family: 'Roboto';
}


.itemtaller{
    margin-right: 62px;
    font-size: 12px;
    line-height: 21px;
    font-weight: 700;
    color: #A690A4;
    font-family: 'Roboto';
}
.itemprecio{
    color: #A690A4;
    font-size: 20px;
    font-weight: 700;
    line-height: 21px;
    font-family: 'Roboto';
    margin-top: 5px;
    margin-block-end: 30px;
}
.btn3{
    top: 20px;
    border-radius: 26px;
    background-color: #A690A4;
    color: white;
    font-family: 'Roboto';
    letter-spacing: 2px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    padding: 15px 40px;
}
.seleccion-taller{
    margin-top: 6px;
    margin-left: 15px;
}
.texto-taller{
    font-weight: 600;
    font-size: 15px;
    color: #90A692;
    letter-spacing: 2px;
    margin-right: 365px;
}
.flechita{
    color: #A690A4;
}
.colum2{
    display: block;
    width: 50%;
    padding: 0px 60px;
    margin-top: 100px;
    margin-inline-end: 20px;
    margin-block-end: 128px;
}
.btn1{
    border-radius: 26px;
    border: 1px solid #9099A6;
    width: 273px;
    font-family: 'Roboto';
    letter-spacing: 2px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    padding: 5px;
    height: 40px;
}
.btn2{
    border-radius: 26px;
    border: 1px solid #9099A6;
    width: 273px;
    font-family: 'Roboto';
    letter-spacing: 2px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    padding: 5px;
    height: 40px;
    margin-left: 30px; 

}
.btnplay{
    padding: 130px 220px;
}



#seccion-clase-ffl {

  /* Quitar padding que causa el vue content en moviles */
  @media (max-width: 991px) {
    #vue-content {
      padding: 0 !important;
      margin: 0 !important;
    }
  }

/* ========== MD: 768–991.98px ========== */
@media (min-width:768px) and (max-width:991.98px){
  .row.gx-3.gx-lg-4{
    --bs-gutter-x:.75rem;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow-x:hidden;
  }
  /* 64% + 36% = 100% Se puede cambiar si es que se quiere dar preferencia al contenedor del menu o del contenido */
  .row.gx-3.gx-lg-4 > .col-12.col-lg-8.col-xl-9.pe-lg-4{
    flex:0 0 64% !important;
    max-width:64% !important;
  }
  .row.gx-3.gx-lg-4 > .col-12.col-lg-4.col-xl-3.col-xxl-3.ms-lg-auto.ps-lg-3.ps-xl-4{
    flex:0 0 36% !important;
    max-width:36% !important;
    margin-left:0 !important;
    padding-left:calc(var(--bs-gutter-x)/2) !important;
    padding-right:calc(var(--bs-gutter-x)/2) !important;
  }
}
/* ========== LG: 992–1199.98px ========== */
@media (min-width:992px) and (max-width:1199.98px){
  .row.gx-3.gx-lg-4{
    --bs-gutter-x:1rem;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* 68% + 32% = 100% */
  .row.gx-3.gx-lg-4 > .col-12.col-lg-8.col-xl-9.pe-lg-4{
    flex:0 0 68% !important;
    max-width:68% !important;
    padding-right:calc(var(--bs-gutter-x)/2) !important;
  }
  .row.gx-3.gx-lg-4 > .col-12.col-lg-4.col-xl-3.col-xxl-3.ms-lg-auto.ps-lg-3.ps-xl-4{
    flex:0 0 32% !important;
    max-width:32% !important;
    margin-left:0 !important;
    padding-left:calc(var(--bs-gutter-x)/2) !important;
  }
}

/* iPad / iOS: gutter mas chico y compatible */
@supports (-webkit-touch-callout:none){
  @media (hover:none) and (pointer:coarse) and (min-width:768px) and (max-width:1199.98px){
    .row.gx-3.gx-lg-4{ --bs-gutter-x:.5rem; }
  }
}

/* Base actual */
.curso-wrapper{
  padding-left: 1.2rem;
  padding-right: 0.5rem;
}

/* --- iPadOS (todos los iPad) --- */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) and (min-width: 744px) and (max-width: 1366px) {
    .curso-wrapper{ padding-left: .1rem; }
  }
}

/* --- Overrides por modelo/tamaño--- */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) and (width: 744px),
         (hover: none) and (pointer: coarse) and (width: 1133px) {
    .curso-wrapper{ padding-left: 0.1rem; }
  }
}

/* iPad 10.2" (810 / 1080) -> */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) and (width: 810px),
         (hover: none) and (pointer: coarse) and (width: 1080px) {
    .curso-wrapper{ padding-left: 0.1rem; }
  }
}

/* iPad 10.9" & iPad Air 10.9" (820 / 1180)*/
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) and (width: 820px),
         (hover: none) and (pointer: coarse) and (width: 1180px) {
    .curso-wrapper{ padding-left: 0.1rem; }
  }
}

/* iPad 10.5" (834 / 1112)*/
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) and (width: 834px),
         (hover: none) and (pointer: coarse) and (width: 1112px) {
    .curso-wrapper{ padding-left: 0.1rem; }
  }
}

/* iPad Pro 11" (834 / 1194)*/
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) and (width: 1194px) {
    .curso-wrapper{ padding-left: 0.1rem; }
  }
}


/* --- iPad Split View (app a media/tercio de pantalla) --- */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) and (min-width: 520px) and (max-width: 740px) {
    .curso-wrapper{ padding-left: 0.1rem; }
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .curso-wrapper{ padding-left: .1rem; }
}

@supports (-webkit-touch-callout: none) {
  /* Cubre 744–1366: iPad mini → Pro 12.9 */
  @media (min-width: 744px) and (max-width: 1366px) {
    .curso-wrapper { padding-left: .05rem; }
  }
  @media (min-width: 741px) and (max-width: 767.98px) {
    .curso-wrapper { padding-left: .05rem; }
  }
}

@supports (-webkit-touch-callout: none) {
  @media (orientation: portrait) and (min-width: 741px) and (max-width: 820px) {
    .curso-wrapper { padding-left: .1rem; }
  }
}

/*Css para evitar el doble vue-content que rompe mobile*/
@media (min-width: 1400px) {
  .vistapc .row-curso { min-height: 100vh; }
}

@media (max-width: 1399.98px) {
  .vistapc .row-curso { min-height: auto; }
}

    /* CSS de Felipe para la pagina ce clase.php*/

    /******************************************/
    /*1; Este es el apartado de las fonts*/
    /******************************************/
    @import url('https://fonts.googleapis.com/css2?family=GFS+Didot&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
    .font-bold{
        font-weight: 600;    
    }
    .gfs-didot-regular {
        font-family: "GFS Didot", serif!important;
        font-weight: 400;
        font-style: normal;
    }
    .montserrat-general {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
    }
    .color-letras {
        color: #748274;
    }
    .vista-clase-color-letras-regular {
        color: #748274;
        font-weight: 700;
    }
    .color-letras-active {
        color: #74816e;
    }
    .color-letras-yellow {
        color: #f3f2ea;
    }
    .color-letras-blanco {
        color: #fff;
    }

    /*Estilos que ya estaban en la vista*/
    .navbar-nav>li {
        visibility: hidden;
    }
    .q {
        display: none;
    }
    .regresar-sitio {
        display: block !important;
        visibility: visible !important;
    }
    #icon-cart {
        display: none;
    }
    .input-div {
        text-align: center !important;
        padding: 3% !important;
        border: thin solid black !important;
    }
    .cat-input {
        display: none !important;
    }
    .input-label {
        cursor: pointer !important;
    }
    .video-con {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%;
        border-bottom: none;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        box-sizing: border-box;
    }
    .video-con video,
    .video-con iframe {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        border-radius: inherit;
    }
    .espacio {
        margin-bottom: 35px;
    }


    /******************************************/
    /*CSS para el menu de contenido del curso*/
    /******************************************/
    .icono-con-tab {
    margin-left: 1rem;
    }
    .lista-clases {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .lista-clases li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    }
    .lista-clases li + li {
        margin-top: 0.35rem;
    }
    .lista-clases a {
        display: flex;
        align-items: center;
        width: 100%;
        text-decoration: none;
        color: inherit;
    }
    /* CONTENEDOR */
    .menu-container{
        background: #ffffff;
        border-radius: 6px;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;

        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;

        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;

        font-size: .82rem;
        color: #333;
    }
    /* LISTA RESET */
    .menu-container .acorh{
        margin:0;
        padding:0;
        list-style:none;
    }   
    /*Modulos*/
    .menu-container .back_menu{ margin-bottom:.1rem; }
    /* Links de módulo */
    .menu-container .back_menu > a{
        display:flex; align-items:center;
        text-decoration:none;
        color:inherit;
        padding-left: 0.2rem !important;
        border-radius:4px;
        transition:background .2s;
    }   
    .menu-container .back_menu > ul { /* la UL de las clases       */
        padding-left: 1.1rem;        /* sangría controlada         */
    }

    .modulo-container { /* la UL de las clases       */
        padding-left: .1rem;        /* sangría controlada         */
    }
    .menu-container .back_menu > a:hover{
        background:#f7f7f7;
    }

    /* Iconos de modul */
    .menu-container .icon-back{
        margin-right:.35rem;
        width:.9em; height:.9em;
    }

    .menu-container h2{
        font-size:.9rem;
        margin:.4rem 0 .3rem;
        padding-bottom:.1rem;
        border-bottom:1px solid #e5e5e5;
        font-weight: bold;
    }

    .menu-container .back_menu > a > .icon-back.fa-angle-down{
        visibility:hidden;
    }
    /* Clases */
    .menu-container li.back_menu li{ margin:.2rem 0; }
    /* Links de clase */
    .menu-container li.back_menu li a{
        display:flex; align-items:center;
        text-decoration:none;
        color:#555;
        font-size:.78rem;
        padding:.15rem 0;
        transition:color .2s;
    }
    .menu-container li.back_menu li a:hover{
        color:#333;
    }
    .menu-container li.back_menu li i{
        margin-right:.3rem;
        font-size:.82em;
    }
    /* ——— Clase selecciona en ese momento */
    .menu-container li.back_menu li a.is-active,
    .menu-container li.back_menu li a.is-active * {      /* span + i */
        background:#748274;
        color:#ffffff;
        border-radius:4px;
        font-weight:600;
        color: #ffffff !important;
    }


    /*****************************************/
    /*3; Seccion del codigo que crea los titulos*/
    /*****************************************/
    .titulo-curso{
        font-size: 1.5rem;
        font-weight: 700;
        color: #748274;
        margin: 1.2rem 0 .1rem 0;
    }
    /*Este es para el subtitulo de la clase */
    .titulo-clase{
        font-size:1rem;
        font-weight:300;
        color: #000!important;
            margin:0 0 .5rem;
    }
    /*Este es para los titulos de los 3 contendores */
    .titulo-container{
        margin-bottom: 3.5rem;
        font-family: "gfs-didot-regular";
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: .4rem;
        color: #748274;
    }

    /***************************************************/
    /*4; Estilos para los botonnes de siguiente y anterior*/
    /***************************************************/

    .contenedor-botones-siguiente-anterior {
        width: 100%;
        box-sizing: border-box;

        /* Bordes mas finos y gris claro */
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-top: none;

        /* Esquinas inferiores redondeadas */
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;

        padding: 20px;
        background-color: #fff;

        /* Sombra más suave y sutil */
        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);

        margin-top: -1px; /* Ajustado al nuevo grosor de borde */
        transition: box-shadow 0.3s ease;
    }
    .contenedor-botones-siguiente-anterior:hover {
        box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
    }
    .contenedor-botones-siguiente-anterior{
            width:100%;
            box-sizing:border-box;
            padding:18px 22px;

            background:#fff;
            border:1px solid #e7eae7;  /* gris clarito del borde */
            border-top:none;           /* sin borde arriba */
            border-radius:0 0 14px 14px;
            box-shadow:0 2px 5px rgba(0,0,0,.05);
    }
    .contenedor-botones-sig-ant{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
}
.btn-nav.anterior{ grid-column:1; justify-self:start; }
.btn-nav.siguiente{ grid-column:2; justify-self:end; }
    /***************************************************/
    /*4.5 Estilos para los botonnes de siguiente y anterior*/
    /***************************************************/
    .btn-nav{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:8px;

        padding:.3rem 2rem;
        min-width:6rem;

        font-size:.9rem;
        font-weight:400;

        text-decoration:none;
        border-radius:9999px;
        border:2px solid #748274;
        transition:background .2s,filter .2s,color .2s;
    }
    .btn-nav.anterior{
        color:#748274;
        background:#fff;
    }
    .btn-nav.anterior:hover{
        background:#f3f6f4;
    }

    .btn-nav.siguiente,
    .btn-nav.siguiente span{
        background:#677569;
        color:#fff;
    }
    .btn-nav.siguiente:hover{
        filter:brightness(1.1);
    }
    .btn-nav i{font-size:.85rem}
    /* Responsive */
    @media (max-width:576px){
    .btn-nav{
        padding:6px 26px;
        min-width:150px;
        font-size:.85rem;
    }
    }

    .espacio {
    height: 25px;
    margin: 0;
    padding: 0;
    }

    /*********************************************/
    /*5; Estilos general para los demas contenedores*/
    /*********************************************/

    .contenedor-general {
        width: 100%;
        box-sizing: border-box;

        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;

        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;

        border-top-left-radius: 12px;
        border-top-right-radius: 12px;

        padding: 20px;
        background-color: #fff;

        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);

        margin-top: -1px;
        transition: box-shadow 0.3s ease;
    }

    .contenedor-general:hover {
        box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
    }

    /**********************************************/
    /*6; alerta-exitoEstilos para el contenedor de los documentos*/
    /**********************************************/


   .documento-item {
    background-color: #fdfaf6;
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
  }

  .documento-item:hover {
      box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.08);
  }

  .documento-info {
      display: flex;
      align-items: center;
      gap: .6rem;
  }

  .documento-icono i {
      font-size: 1.25rem; 
      color: #748274;
  }

  .documento-texto p {
      margin: 0;
      line-height: 1.2;
  }

  /* nombre del documento */
  .documento-texto p:first-child {
      font-size: 1rem;
      font-weight: 500;
      color: #748274;
  }

  /* descripción */
  .documento-texto p:last-child {
      font-size: 0.9rem;
      color: #777;
      font-weight: 400;
  }
    .documento-botones a {
        border: 2px solid #748274;
        color: #748274;
        padding: 8px 24px;
        border-radius: 24px;
        font-weight: 500;
        font-size: 0.78rem;
        text-decoration: none;
        margin-left: 10px;
        transition: all 0.25s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .btn-ver{
    background: none;    
    }
    .documento-botones a.btn-descargar {
        background-color: #748274;
        color: #fff;
    }
    .documento-botones a:hover {
        opacity: 0.95;
        transform: scale(1.02);
    }
    /*Cuando no hay documentos*/
    .documento-vacio {
        padding: 16px;
        text-align: center;
        color: #999;
        font-size: 0.9rem;
        font-style: italic;
    }


    /**********************************************/
    /*7;Estilos para el apartado de tareas*/
    /**********************************************/
    .card-tarea{
        background:#fff;
        border-radius:12px;
        padding:24px 32px;
        box-shadow:0 4px 15px rgba(0,0,0,.06);
        font-family: 'Inter', sans-serif;
    }
    .tarea-actual{
        background:#fdfbf7;
        border-radius:8px;
        padding:14px 18px;
    }
    /*Input de evidencia*/
    .evidencia{ margin-top:6px; }
    .input-div-documentos{
        width:100%;
        min-height:17rem;
        border:3px dashed #c4cfc0;
        border-radius:8px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        background:none;
        text-align:center;
        gap:.3rem;
    }
    .upload-display {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
    }
    .texto-subir {
        font-size: 0.92rem;
        color: #4e5d50;
    }

    /* Botón "Seleccionar Archivo" */
    .btn-select-archivo {
        display: inline-block;
        padding: 6px 24px;
        margin: 0!important;
        font-size: 0.85rem;
        font-weight: 500;
        text-align: center;
        border: 2px solid #748274;
        color: #748274;
        border-radius: 9999px;
        background: transparent;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }

    .btn-select-archivo:hover,
    .btn-select-archivo:focus-visible {
        background: rgba(103, 117, 105, 0.08);
        outline: none;
    }
    .clase-nombre-archivo {
        font-size: 0.8rem;
        color: #7A7A73;
        margin-top: 0.1rem;
        word-break: break-word;
    }

    .icono-upload{ font-size:1.8rem; color:#6d7b6b; margin-bottom:6px; }
    .texto-subir{ font-weight:500; color:#6d7b6b; display:block; }
    .cat-input-documentos{ display:none; }
    /*Bton principal*/
    .btn-entregar{
        width:100%;
        background:#5e6b5e;
        border:none;
        border-radius:9999px;
        padding:11px 0;
        font-weight:600;
        color:#fff;
        transition:background .2s;
    }
    .btn-entregar:hover {
      background: #5e6b5e; /* un tono más oscuro */
      box-shadow: 0 0 0 3px rgba(116,130,116,.12);
    }
    /*Alertas*/
    .alerta{
        border-radius:8px;
        padding:12px 16px;
        font-size:.875rem;
    }
    .alerta i{ margin-right:6px; }
    .alerta-exito{
        background:#e8f7ea;
        color:#416041;
        border:1px solid #c5e6c8;
    }
    .alerta-aviso{
        background:#fff7e8;
        color:#8a6d3b;
        border:1px solid #ffe6b8;
    }
    .alerta-info{
        background:#e9f4ff;
        color:#3174ad;
        border:1px solid #b9dfff;
    }
    /*Lista de tareas entregadas*/
    .list-group-tareas{
        list-style:none;
        margin:0;
        padding:0;
        border-radius:8px;
        overflow:hidden;
    }
    .list-group-tareas .list-group-item{
        display:flex;
        align-items:center;
        justify-content:space-between;
        background:#f5f6f4;
        padding:14px 18px;
        border-bottom:1px solid #e1e1e1;
    }
    .list-group-tareas .list-group-item:last-child{ border-bottom:none; }
    .icono-archivo{ color:#6d7b6b; }
    .nombre-tarea{ max-width:260px; color:#364c37; text-decoration:none; }
    .badge-entregada{
        background:#a8b2a0;
        color:#fff;
        font-size:.75rem;
        font-weight:600;
        border-radius:9999px;
        padding:4px 10px;
    }
    .lista-tareas-entregadas {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #555;
    }

    .tarea-item {
    position: relative;
    background: #f5f6f6;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    }

    /* Encabezado con ícono check */
    .tarea-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: #748274;
    }
    .tarea-header i {
    margin-right: 0.4rem;
    font-size: 1.05rem;
    }
    .etiqueta-estatica {
    margin-right: 0.2rem;
    color: #748274;
    }
    .etiqueta-modulo {
    text-transform: capitalize;
    }

    /* Cuerpo: documento + nombre + boton */
    .tarea-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    }
    .archivo-info {
    display: flex;
    align-items: center;
    min-width: 0;
    }
    .archivo-info i {
    font-size: 0.95rem;
    margin-right: 0.4rem;
    }
    .nombre-archivo {
    text-decoration: none;
    color: #444;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
    }

    /* Botde descarga */
    .btn-descarga {
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    transition: background 0.2s, box-shadow 0.2s;
    }
    .btn-descarga i {
    font-size: 0.95rem;
    }
    .btn-descarga:hover {
    background: #eef0f0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
    }

    /* Etiqueta entregada */
    .badge-entregada {
    position: absolute;
    top: 0.6rem;
    right: 1rem;
    background: #647060;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 9999px;
    padding: 0.2rem 0.65rem;
    line-height: 1;
    }

    .check-icono i{
        stroke-width: .5;
        font-size: 20px;
        color: #4e5d50;
        /*color: #b7c3b1;*/
    }

/***************************************************/
 /*5 Estilos para mobile y adaptaciones de algunos estilos reutilizados de desktop*/
/***************************************************/

/* === Overrides SOLO para la vista móvil === */
.vistamv .contenedor-botones-siguiente-anterior {
  padding: 1rem .3rem;
}

/* fila de botones: espacio menor */
.vistamv .contenedor-botones-sig-ant {
  gap: .01rem;
}

/* botones: más compactos en móvil, sin romper estilos existentes */
.vistamv .btn-nav {
  padding: .3rem .85rem;
  min-width: 0;
  font-size: .85rem;
}

/* Estilo base */
.mobile-boton {
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 2px solid #748274;
  background-color: #fff;
  color: #748274;
  cursor: pointer;
  transition: all 0.3s ease;
}
/* Hover sin ser activo */
.mobile-boton:hover:not(.active) {
  background-color: rgba(46, 125, 50, 0.08);
}

/* Activo */
.mobile-boton.active {
  background-color: #748274; 
  color: #fff;
  border-color: #748274;
}

/* Suave cambio entre estados */
.mobile-boton,
.mobile-boton.active {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Ajustes para móviles */
@media screen and (max-width: 576px) {
    .tarea-header {
        font-size: 0.85rem; /* texto más pequeño */
    }

    .tarea-header i {
        margin-right: 0.3rem;
        font-size: 0.9rem; /* icono más pequeño */
    }

    .etiqueta-estatica {
        margin-right: 0.15rem;
    }
    .badge-entregada{
        font-size:.55rem;
        font-weight:600;
        border-radius:9999px;
        padding:.15rem .25rem;
    }
    .tarea-item {
      padding: 0.75rem .75rem;
      gap: 0.4rem;
    }


    /*Parte de los documentos adaptada a movil*/
    .documento-item {
        flex-direction: column;
        align-items: flex-start; /* todo alineado a la izquierda */
        gap: 0.5rem;
    }

    /* nombre del documento */
    .documento-texto p:first-child {
        font-size: .85rem;
        font-weight: 500;
        color: #748274;
    }

    /* descripción */
    .documento-texto p:last-child {
        font-size: 0.75rem;
        color: #777;
        font-weight: 400;
    }
    .documento-botones {
        margin-top: 0.4rem;
        width: 100%;
        justify-content: flex-start;
        gap: 0.4rem;
    }

    .documento-botones a {
        margin-left: 0;
        padding: 6px 16px;
        font-size: 0.75rem;
    }
}


/*Este es el diseño del desplegable reutilizando estilos que ya estaban*/
/********* Base existente *********/
.icono-con-tab{ margin-left:1rem; }
.lista-clases{ list-style:none; margin:0; padding:0; }
.lista-clases li{ display:flex; align-items:center; gap:.8rem; }
.lista-clases li+li{ margin-top:.35rem; }
.lista-clases a{ display:flex; align-items:center; width:100%; text-decoration:none; color:inherit; }

/* Estilo del contenedor */
    .menu-container {
      background: #ffffff !important;
      border: 1px solid #e0e0e0 !important;
      border-radius: 12px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      padding: 16px !important;
      max-width: 280px !important;
      width: 100% !important;
      font-size: 14px !important;
      color: #333 !important;
    }

    /* Reset de listas */
    .menu-container ul {
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
    }

    .menu-container .icon-back {
      display: none !important;
    }

/********* Nuevo estilo del desplegable *********/
.menu-desplegable{ --menu-max:320px; }

/* Trigger */
.menu-desplegable__trigger{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem;
  border:0; background:transparent; cursor:pointer;
  padding:.65rem .75rem;
  border-radius:10px;
  transition:background .2s ease, box-shadow .2s ease;
  font-weight:700;
}
.menu-desplegable__trigger:hover{
  background:#f7f7f7;
  box-shadow:0 1px 3px rgba(0,0,0,.06) inset;
}
.menu-desplegable__label{ display:inline-block; font-size: 1.1rem; color:#748274; font-weight: 700;}

/* Panel animado por altura */
.menu-desplegable__panel{
  display: grid;
  grid-template-rows: 0fr;

  opacity: 0;
  transform: translateY(-4px);
  margin-top: 0;
  pointer-events: none;
  transition:
    grid-template-rows .28s ease,
    opacity .28s ease,
    transform .28s ease,
    margin-top .28s ease;
  background:#fff;
  contain: layout;
}
/* Este wrapper recorta SIEMPRE el contenido interior */
.menu-desplegable__clip{
  overflow: hidden;
  min-height: 0;
}

/* Contenedor con scroll interno y padding*/
.menu-desplegable__scroll{
  max-height: 320px;
  overflow: auto;
  padding: .6rem .4rem .8rem .4rem;
  margin: 0;
}
.menu-desplegable.is-open .menu-desplegable__panel{
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  margin-top: .35rem;
  pointer-events: auto;
}
/* Chevron */
.menu-desplegable__chevron{ transition: transform .25s ease; }
.menu-desplegable.is-open .menu-desplegable__chevron{ transform: rotate(-180deg); }

/* Lista visualmente ordenada */
.menu-desplegable__lista{
  margin:0; padding:0; list-style:none;
}

/* Modulo (link que encabeza las clases) */
.menu-desplegable__modulo{
  display:flex; align-items:center; gap:.4rem;
  text-decoration:none; color:inherit;
  padding:.3rem .35rem;
  border-radius:6px;
  transition:background .2s ease;
}
.menu-desplegable__modulo:hover{ background:#f7f7f7; }

/* Iconos, títulos, y clases */
.menu-container .icon-back{ margin-right:.35rem; width:.9em; height:.9em; }
.menu-container .back_menu{ margin-bottom:.25rem; }
.menu-container .back_menu > ul{ padding-left:1.1rem; }
.menu-container li.back_menu li{ margin:.2rem 0; }
.menu-container li.back_menu li a{
  display:flex; align-items:center;
  text-decoration:none; color:#555; font-size:.78rem;
  padding:.15rem 0; transition:color .2s ease, background .2s ease;
}
.menu-container li.back_menu li a:hover{ color:#333; }

/* Activo */
.menu-container li.back_menu li a.is-active,
.menu-container li.back_menu li a.is-active *{
  background:#748274;
  color:#fff !important;
  border-radius:6px;
  font-weight:600;
}

/* Estados abiertos/cerrados */
.menu-desplegable.is-open .menu-desplegable__panel{
  opacity: 1;
  transform: translateY(0);
  margin-top: .35rem;
  pointer-events: auto;
}

/* Scrollbar sutil */
.menu-desplegable__scroll::-webkit-scrollbar{ width:8px; }
.menu-desplegable__scroll::-webkit-scrollbar-thumb{
  background:#d5d5d5; border-radius:8px;
}
.menu-desplegable__scroll{
  max-height: 320px;
  overflow: auto;
  padding: .6rem .4rem .8rem .4rem;
}


}
/* ESTILOS PARA LA VISTA ONLINE.PHP Ludwin Garcia*/

/* RESET Y CONFIGURACIÓN BASE */
* {
    box-sizing: border-box;
}

.body-online {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #f8fafc;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #334155;
}

.container-online {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* UTILIDADES Y CLASES DE APOYO */
[v-cloak] {
    display: none;
}

.vista-online-aula .navbar-nav > li {
    visibility: hidden;
}

.vista-online-aula .online-regresar-sitio {
    display: block !important;
    visibility: visible !important;
}

.vista-online-aula #icon-cart {
    display: none;
}

/* Ocultar elementos específicos según vista */
.vista-online-aula .vistamv section.edutim-course-single.edutim-course-content,
.vista-online-aula .vistapc-online-curso .course-sidebar,
.vista-online-aula .vistamv .course-sidebar {
    display: none;
}

.vista-online-aula .course-widget.course-details-info {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.online-course-main-title {
    font-family: 'GFS Didot', serif !important;
    /*font-weight: 600;*/
    font-size: 32px;
    line-height: 1.2;
    color: #758272;
    background: linear-gradient(135deg, rgb(66, 99, 83) 0%, rgb(79, 77, 82) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
}

/* LAYOUT PRINCIPAL */
.online-edutim-course-single {
    background: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
    min-height: 100vh;
    /* padding: 40px 0 60px; */ /*Eliminado para evitar espacio en blanco */
}

.online-main-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    align-items: flex-start;
    margin-top: -50px; /*Reducir espacio en blanco en aula/online */
}

/* HEADER DEL CURSO */
.online-course-header {
    margin-bottom: 0;
}

.online-course-info-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* CONTENIDO PRINCIPAL */
.btn-back-mobile {
  display: none;
}

.online-course-main-content {
    background: none;
    padding: 0;
}

.online-course-header h2 {
    color: #758272;
    font-family: 'GFS Didot', serif;
    font-weight: 700;
    margin-bottom: 24px;
    font-size: 32px;
    line-height: 1.2;
    background: linear-gradient(135deg, rgb(66, 99, 83) 0%, rgb(79, 77, 82) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.online-course-description {
    color: #758272;
    line-height: 1.7;
    font-size: 16px;
    margin-bottom: 32px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.online-course-image {
    border-radius: 10px;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.online-course-image:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 10px 10px -12px rgba(0, 0, 0, 0.3);
}

/* TARJETA DE PROGRESO Y ACCIONES */
.online-progress-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    margin-top: 24px;
}

/* COMPONENTES DE PROGRESO */
.online-progreso-curso {
  font-family: 'GFS Didot', serif !important;;
    text-align: left;
    color: #758272;
    font-size: 14px;
    /*font-weight: 600;*/
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
}

.online-main-progress {
    position: relative;
    margin-bottom: 24px;
}

.online-progress {
    background-color: #e2e8f0;
    border-radius: 9999px;
    height: 8px;
    width: 100%;
    overflow: hidden;
}

.online-progress-bar {
    background-color: #758272;
    height: 100%;
    transition: width 0.4s ease;
    border-radius: 9999px;
}

.online-progress-label {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 25px;
    font-weight: 600;
    color: #758272;
    font-family: 'Montserrat', sans-serif;
}

/* SISTEMA DE BOTONES UNIFICADO */
a.online-btn,
.online-btn-continuar-principal,
.online-btn-continuar-modulo,
.online-btn-revisar,
.online-btn-descargar-manual,
.online-btn-ver-cursos {
    display: inline-block;
    background-color: #758272;
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 15px;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif !important;
}

/* Estados hover para botones */
.online-btn:hover,
.online-btn-continuar-principal:hover,
.online-btn-continuar-modulo:hover,
.online-btn-revisar:hover,
.online-btn-descargar-manual:hover,
.online-btn-ver-cursos:hover {
    background-color: #5a6b5d;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

/* Botón principal de continuar */
.online-btn-continuar-principal {
    padding: 5px 25px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Botón para descargar manual */
.online-btn-descargar-manual {
    background: #f3f4f6;
    border: 1px solid #758272;
    color: #758272;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.online-btn-descargar-manual svg {
    width: 18px;
    height: 18px;
    stroke: #758272;
}

.online-btn-descargar-manual:hover {
    background: white;
    border-color: #94a3b8;
    color: #334155;
    transform: translateY(-1px);
}

.online-modules-section {
    margin-top: 0;
}

.online-modules-title {
    font-size: 22px;
    font-family: 'GFS Didot', serif !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: #334155;
    margin-bottom: 12px;
}

.online-modules-title .module-icon {
    width: 26px;
    height: 26px;
    stroke: #758272;
}

.online-modules-subtitle {
    color: #758272;
    font-size: 16px;
    margin-bottom: 32px;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400;
}

.online-modules-container {
    background: rgb(255, 255, 255);
    border-radius: 10px;
    padding: 32px;
    border: 1px solid #FDFBF8;
    box-shadow: 0 20px 20px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* MÓDULOS INDIVIDUALES */
.online-module-item {
    background-color: #FCFAF9;
    border: 1px solid #FCFDFD;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 24px;
    position: relative;
    transition: all 0.3s ease;
}

.online-module-item:hover {
    transform: translateY(-4px);
}

.online-module-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.online-module-image {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
}

.online-module-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.online-module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.online-module-info h4 {
    font-size: 18px;
    font-family: 'GFS Didot', serif !important;
    /*font-weight: 700;*/
    color: #1e293b;
    margin: 0;
}

.online-module-description {
    font-size: 14px;
    color: #475569;
    margin: 8px 0;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400;
}

.online-module-progress {
    margin-top: 8px;
}

.online-module-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

/* BADGES DE ESTADO */
.online-status-badge {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 9999px;
    font-weight: 600;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
}

/* Estados específicos */
.online-status-completed {
    background-color: #758272;
    color: rgb(255, 255, 255);
}

.online-status-progress {
    background-color: #eab308;
    color: rgb(255, 255, 255);
}

.online-status-pending {
    background-color: #F6EBDC;
    color: #52525b;
}

.online-mobile-course {
  display: none;
}
.btn-back{
 display: block;
}

.btn-back-mobile{
  display: none;
}
/* DISEÑO RESPONSIVE */
@media (max-width: 768px) {

  .btn-back{
    display:none;
  }
  .btn-back-mobile{
    display: block !important;
    margin-right: 250px;
  }

  .online-edutim-course-single {
        padding: 20px 0 20px;
  }

  .online-main-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -140px; /*Reducir espacio en blanco */
  }

    .online-course-header {
    order: 1;
    margin-bottom: 0;
    }

    .online-modules-section {
    order: 2;
    margin-top: 0;
    width: 90%;
    max-width: 340px;
    }

    .online-course-header {
    order: 1;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    }

    .online-course-info-grid > div:first-child {
    order: 1;
    margin-bottom: 24px;
    text-align: center;
    }

    .online-course-image {
    max-width: 280px;
    margin: 0 auto;
    display: block;
    }

    .online-course-main-title {
    order: 2;
    text-align: center;
    font-size: 28px;
    margin: 0 0 24px 0;
    }

    .online-progress-card {
    order: 3;
    padding: 10px 15px;
    margin: 15px;
    border-radius: 20px;
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    }

    .online-progreso-curso {
    font-family: 'GFS Didot', serif !important;;
    text-align: center;
    font-size: 16px;
    margin-bottom: 20px;
    }

    .online-progress-label {
    font-size: 20px;
    top: -30px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    }

    .online-main-progress {
    margin-bottom: 28px;
    }

    .online-progress {
    height: 10px;
    }

    .online-btn-continuar-principal,
    .online-btn-descargar-manual {
    font-family: 'Montserrat', sans-serif !important;
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 12px;
    min-width: 140px;
    justify-content: center;
    }

    .online-btn-continuar-principal svg {
    width: 20px;
    height: 20px;
    }

    .online-btn-descargar-manual svg {
    width: 20px;
    height: 20px;
    }

    .online-progress-card > div:last-child {
    justify-content: center;
    gap: 12px;
    }

    .online-course-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    }

    .online-course-main-content {
    order: 4;
    margin-bottom: 10px;
    }

    .online-course-description {
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 0;
    }

    .online-modules-title {
    font-family: 'GFS Didot', serif !important;;
    font-size: 24px;
    justify-content: center;
    text-align: center;
    margin-bottom: 16px;
    }

    .online-modules-subtitle {
    font-family: 'Montserrat', sans-serif !important;;
    text-align: center;
    font-size: 16px;
    margin-bottom: 28px;
    }

    .online-modules-container {
    max-width: 340px;
    margin: 0 auto;
    padding: 24px 20px;
    border-radius: 20px;
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    }

    .online-module-item {
    padding: 24px 20px;
    margin-bottom: 20px;
    border-radius: 20px;
    min-height: 180px;
    box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    }

    .online-module-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    align-items: center;
    }

    .online-module-image {
    width: 90px;
    height: 90px;
    border-radius: 16px;
    }

    .online-module-info {
    align-items: center;
    text-align: center;
    width: 100%;
    }

    .online-module-header {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    }

    .online-module-info h4 {
    font-family: 'GFS Didot', serif !important;;
    font-size: 20px;
    margin: 0;
    text-align: center;
    }

    .online-module-description {
    font-family: 'Montserrat', sans-serif !important;;
    font-size: 15px;
    text-align: center;
    margin: 12px 0;
    line-height: 1.6;
    }

    .online-module-progress {
    width: 100%;
    margin: 16px 0;
    }

    .online-progress {
    height: 8px;
    }

    .online-module-actions {
    margin-top: 20px;
    justify-content: center;
    }

    .online-btn-continuar-modulo,
    .online-btn-revisar {
    padding: 12px 24px;
    font-size: 15px;
    border-radius: 12px;
    min-width: 120px;
    }

    .online-status-badge {
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 12px;
    }

    .online-mobile-course {
    font-family: 'GFS Didot', serif !important;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.2;
    color: #758272;
    background: linear-gradient(135deg, rgb(66, 99, 83) 0%, rgb(79, 77, 82) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    margin: 10px 0 10px;
    display: none;
    }

    .online-mobile-course {
    display: block;
    }

  .online-modules-section .online-course-main-title {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    margin: 0;
    padding: 0;
    }

  .online-course-header {
    max-width: 340px;
    margin: 0 auto;
    width: 100%;
  }

    .online-modules-container {
    max-width: 360px;
    margin: 0 auto;
  }

}
/*Fin Vista Online Ludwin Garcia*/

/*Esta es la seccion de clase activa de food for life*/
#vue-clasesactivas {
@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

 .gfs-didot-regular {
        font-family: "GFS Didot", serif!important;
        font-style: normal;
    }
.row-full {
  display: flex;
  flex-wrap: wrap;
  margin-left: 0;
  margin-right: 0;
  max-width: 100% !important;
  width: 100%;
}
/*Espacios para separar los contenidos*/
.espacio-chico {
  height: 15px;
}
.espacio {
  height: 25px;
}
.espacio-grande {
  height: 50px;
}

@media (max-width: 900px) {
  .espacio-grande.espacio-mobile {
    height: 42px;
  }
  .espacio {
  height: 10px;
}
}

/*Establece paddings del body*/
.wrapper-contenido {
  padding-left: 2% !important;
  padding-right: 1.45% !important;
}

@media (max-width: 1024px) {
  .wrapper-contenido {
  padding-right: .3% !important;
  }
  @media (max-width: 600px) {
  .wrapper-contenido {
  padding-left: .35% !important;
  }
}
}
/*Inicio seccion del titulo*/
/*Etiqueta Dropin*/
.pill {
  background: #fff;
  border: 1px solid #748274;
  border-radius: 100px;
  font-weight: 600;
  color: #748274;
  padding-left: 8PX;
  padding-right: 8px;
  font-size: 0.7rem;
  display: inline-block;
}
.titulo-curso {
  font-size: 1.5rem;
  font-weight: 700;
  color: #748274;
  margin-bottom: 0rem;
}
.libro-titulo{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}
.libro-titulo .icono-book,
.libro-titulo .titulo-clase{
  font-size:1rem;
  color:#748274;
  line-height:1;
}
.titulo-clase{
  font-weight:500;
  margin:0;
}
.titulo-container{
  padding-left:4.2%;
  padding-right:3%;
}
@media (max-width:1025px){
.titulo-container{
  padding-left:1.6%;
}
}
/*--Fin seccion titulo*/
/*Inicio deel menu para mmoverse entre las 3 pestañas*/
/*ariables de color*/
/* Contenedor general */
.contenedor-general {
  width: 100%;
  height: 800px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 4% 4% 1% 4%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  margin-top: 0;
  transition: box-shadow 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Contenedor general vista movil*/
@media (max-width:744px){
  .contenedor-general{
    height: 100%;
}
}
/*Inicio parte superior*/
/* Título */
.titulo-clase-activa {
  font-size: 1rem;
  font-weight: 700;
  color: #748274;
  margin-bottom: .5rem;
}
.section-title--compact{
  margin-bottom: 0rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.2;
  text-align: left;
  font-weight: 500;
}
/*Inicio decoracion de las 3 opcioens Barra de pestañas */
.tabs-bar {
  margin: 0;
  padding: 0 !important;
  background: #fcf9f5;
  border-radius: 10px;
}
.tabs-bar .nav-link {
  font-size: 0.8rem;
  padding: 6px 12px;
  color: #748274;
  font-weight: 500;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.35rem;
}
.tabs-bar .nav-link i{
  font-size:.8rem;
  line-height:1;
  color:inherit;
  display:block;
}
.tabs-bar .nav-link.active {
  background: #748274;
  color: #fff;
  pointer-events: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
/*Fin decoracion de las 3 opcioens Barra de pestañas */
/*Fin parte superior*/


/*Inicio contenido de las tarjetas*/
/*Inicio tarjeta de las grabaciones*/
/*Tarjeta de grabación*/
.grabacion-card {
  display: flex;
  align-items: center;
  gap: 0.1rem;

  background: #fff;
  border: 1px solid #e2e8e2;
  border-radius: 10px;
  padding: 10px .7rem;
  cursor: pointer;

  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;

}
/*Tarjeta de grabación eleccion*/
label.grabacion-eleccion {
  width: 100%;
} 
/* Hover*/
.grabacion-card:hover {
  background: #eef1ee;
  border-color: #ccd1cc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}
/*Icono (sin cambios)*/
.grabacion-icono{
  width:3rem;
  height:2rem;
  border-radius:8px;
  background:#dce1dc;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.grabacion-icono i{
  font-size:1rem;
  color:#748274;
}
/*Contenedor texto*/
.grabacion-contenido{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:2rem;
}
/*Texto*/
.grabacion-titulo{
  font-size:0.8rem;
  font-weight:500;
  color:#748274;
  margin:0;
  line-height:1;
}
.grabacion-info{
  font-size:0.7rem;
  color:#6f766f;
  margin:0;
  line-height:1;
}
/*Radio oculto pero accesible*/
.grabacion-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/*Estado seleccionado*/
/* El input chequeado*/
.grabacion-eleccion input:checked + .grabacion-card {
  background: #eef1ee;
  border-color: #ccd1cc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}
.grabacion-eleccion input:checked + .grabacion-card .grabacion-icono {
  background: #ccd1cc;
}
.grabacion-eleccion:hover .grabacion-card {
  background: #eef1ee;
  border-color: #ccd1cc;
}
/* Contenedor tipo slider */
.grabacion-sliderr {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 670px;
  /*max-height: 12rem*/;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  padding-right: 0.2rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.grabacion-slider::-webkit-scrollbar {
  display: none;
}


.grabacion-slider-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 100%;
}


@media (min-width: 768px) {
  .grabacion-slider {
    /*max-height: 13rem;*/
  }
}
@media (min-width: 1200px) {
  .grabacion-slider {
    /*max-height: 22rem;*/
  }
}
/*Fin tarjeta de las grabaciones*/

/*Inicio de las tarjetas de documentos*/
/*Tarjeta base*/
.doc-card {
  display: flex;
  flex-wrap: nowrap;
  gap:3px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e2e8e2;
  border-radius: 10px;
  padding: .8rem .8rem .8rem .7rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  margin-bottom: 0.7rem;
}
/* Hover */
.doc-card:hover {
  background: #eef1ee;
  border-color: #ccd1cc;
  box-shadow: 0 2px 5px rgba(0,0,0,.04);
}
/*Icono*/
.doc-icono {
  font-size: .9rem;
  color: #748274;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
/*Bloque de textos*/
.doc-contenido {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
/* Texto principal */
.doc-titulo {
  font-size: .85rem;
  font-weight: 500;
  color: #748274;
  margin: 0;
  line-height: 1.25;
}
/* Descripción e info */
.doc-descripcion,
.doc-info {
  font-size: .7rem;
  color: #6f766f;
  margin: 0;
  line-height: 1.25;
}
/*Radio oculto*/
.doc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/*Estado seleccionado*/
.item-documento-seleccionador input:checked + .doc-card {
  background: #edf0ed;
  border-color: #c5cac5;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.item-documento-seleccionador:hover .doc-card {
  background: #eef1ee;
  border-color: #ccd1cc;
}

.doc-slider-wrapperr-container{
  padding-bottom: 10px;
  overflow: hidden;
  height: 90%;
}
@media (max-width: 700px) {
.doc-slider-wrapperr-container{
  height: 50vh;
  overflow: hidden;
  padding-bottom: 10px;
}}
@media (min-width: 768px) and (max-width: 1024px)  {
.doc-slider-wrapperr-container{
  height: 85%;
}
}

.doc-slider-wrapperr{
  height: 100% !important;
}
.grabacion-sliderr{
  height: 100% !important;
}
.tarea-slider-wrapperr{
  height: 100% !important;
}
}
/* Contenedor del slider */
.doc-slider-wrapperr {
  display: flex;
  flex-direction: column ;
  gap: 1px ;
  height: 670px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  padding-right: 0.25rem;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.doc-slider-wrapper::-webkit-scrollbar {
  display: none;
}

/* Cada item se alinea verticalmente para snap */
.doc-slider-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

/* Comportamiento normal en pantallas medianas o grandes */
@media (min-width: 768px) {
  .doc-slider-wrapper {
    display: block;
    overflow-y: unset;
    max-height: none;
  }

  .doc-slider-item {
    scroll-snap-align: unset;
    width: 100%;
    max-width: none;
  }
}

/*Fin de las tarjetas de documentos*/

/*Inicio del diseño de las tarjetas para las tareas*/
.tarea-card-menu {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 12px;
  padding-block-end: .0rem !important;

  border: 1px solid;
  border-radius: 12px;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
  margin-bottom: 0.7rem;
}
.tarea-card-menu + .tarea-card-menu {
  margin-top: .5rem;
  margin-bottom: .0;
}
/* Ícono */
.tarea-icono-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.tarea-icono-menu i {
  font-size: 20px;
  line-height: 1;
}
.tarea-info-menu > * {
  line-height: 1.5;
}
.tarea-titulo-menu {
  font-weight: 500;
  font-size: 0.85rem;
  margin-bottom: 0px;
  color: #748274;
}
.tarea-descripcion-menu {
  margin-top: 2px;
  margin-bottom: 0px;
  font-size: 0.75rem;
  color: #4b5563;
  height: 50px;
}
/*Tabletas*/
@media (max-width: 912px) {
  .tarea-descripcion-menu {
    height: 85px;
  }
}
/*Movíl*/
@media (max-width: 743px) {
  .tarea-descripcion-menu {
    height: 53px;
  }
}
.tarea-fecha-menu {
  margin-top: 2px;
  font-size: 0.75rem;
  color: #6b7280;
}
/* Hover */
.tarea-card-menu:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}
/* Entregada */
.tarea-card-menu.entregada {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.tarea-card-menu.entregada .tarea-icono-menu,
.tarea-card-menu.entregada .tarea-icono-menu i {
  color: #16a34a;
}
/* No entregada */
.tarea-card-menu.no-entregada {
  background: #f3f4f6;
  border-color: #d1d5db;
}
.tarea-card-menu.no-entregada .tarea-icono-menu,
.tarea-card-menu.no-entregada .tarea-icono-menu i {
  color: #dc2626;
}
/* Contenedor slider */
/* Slider de tareas - vertical */
.tarea-slider-wrapperr {
  display: flex;
  flex-direction: column;
  gap: 1px;

  height: 670px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-right: 0.25rem;
}
.tarea-slider-wrapper::-webkit-scrollbar {
  display: none;
}

/* Cada tarea deslizable */
.tarea-slider-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

/* Pantallas medianas o grandes: vista normal sin scroll */
@media (min-width: 768px) {
  .tarea-slider-wrapper {
    display: block;
    overflow-y: unset;
    max-height: none;
  }

  .tarea-slider-item {
    scroll-snap-align: unset;
    width: 100%;
    max-width: none;
  }
}




/*Fin del diseño de las tarjetas para las tareas*/
/*Fin contenido de las tarjetas*/
/*Fin del menu para mmoverse entre las 3 pestañas*/

.contenedor-general-contenido {
  width: 100%;
  height: 800px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: -1px;
  transition: box-shadow 0.3s ease;
  overflow-y: auto;
  padding: 4%;
  padding-top: 3.5%;
}

@media (min-width: 768px) {
  .contenedor-general-contenido {
    padding: 2.5%;
    padding-top: 1.5%;
  }
}




/*Inicio diseño contenido*/
/*Este es el css para los titulos del contenido de cada apartado*/
/*Se llaman video pero es para los 3 titulos del contenido*/
.video-contenido-clase{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:1rem;
  font-weight:600;
  color:#748274;
  margin-right:.1%;
}
.video-contenido-clase__icono{
  font-size:1rem;
  line-height:1;
  color:inherit;
}

/*Este es el css para el diseño de las advetencias que se seleccione un contenido antes*/
/*Esto es paralas 3 advertencias aunque diga que no */
.area-grabacion-vacia__mensaje {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.6rem 1rem;
  background-color: #f7f9f7;
  border: 1px dashed #ccd1cc;
  border-radius: 10px;

  color: #6f766f;
  font-size: 0.85rem; /* PC */
  font-weight: 700;
  line-height: 1.3;
  margin-inline: auto;
  text-align: center;
  height: 10rem;
}

/* Icono */
.area-grabacion-vacia__icono {
  font-size: 1.7rem;
  color: #748274;
  margin-bottom: 0.4rem;
}

/* Texto */
.area-grabacion-vacia__texto {
  font-size: 1.3rem; /* PC */
  font-weight: 400;
  white-space: nowrap;
}

/*RESPONSIVIDAD*/
@media (max-width: 576px) {
  .area-grabacion-vacia__mensaje {
    font-size: 0.75rem;
  }

  .area-grabacion-vacia__icono {
    font-size: 1.4rem;
  }

  .area-grabacion-vacia__texto {
    font-size: .95rem;
    align-items: center;
  }
}



/*Este para el apartado de contenido*/
/*Inicio Grabacion*/
/*Tarjeta contenedora*/
.sesion-card {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  height: 4rem;
  padding: 0rem 1rem;
  background: #fcf9f5;
  border: 0.0625rem solid #f3f1ee;
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow 0.2s;
  margin-bottom: 0.75rem;
}
/*Este es el contenedor del video del container*/
.contenedor-video {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1rem;
}
.sesion-card:hover{
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.sesion-card__fila-superior {
  display: flex;
  align-items: center;
  gap: .75rem;
}
/*Icono*/
.sesion-card__icon-wrapper{
  width:2.5rem;
  height:2.5rem;
  background:#e5e5df;
  border-radius:.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.sesion-card__icon{
  font-size:1.2rem;
  color:#748274;
}
.sesion-card__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.1rem;
  padding:0;
}
.sesion-card__title,
.sesion-card__meta{
  margin:0;
  line-height:1.1;
}
/*Título*/
.sesion-card__title{
  font-size:.9rem;
  font-weight:500;
  color:#748274;
}
/*Descripción/meta*/
.sesion-card__meta{
  font-size:.8rem;
  color:#888;
}
/*Fin Grabacion*/



/*Inicio Documentos*/
/*Contenedor principal*/
.cargadoc-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 1rem;
  background: #fcf9f5;
  border: 0.0625rem solid #f3f1ee;
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow 0.2s ease;
  margin-bottom: 0.75rem;
  height: auto;
}
.cargadoc-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
/* Fila superior  */
.cargadoc-card__fila-superior {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 0.75rem);
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
/* Icono*/
.cargadoc-card__icon-wrapper {
  width: clamp(2rem, 6vw, 2.5rem);
  height: clamp(2rem, 6vw, 2.5rem);
  background: #e5e5df;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cargadoc-card__icon {
  font-size: clamp(1rem, 3vw, 1.2rem);
  color: #748274;
}
/* Texto flexible */
.cargadoc-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}
.cargadoc-card__title,
.cargadoc-card__meta {
  margin: 0;
  line-height: 1.1;
}
/* Tamaños fluidos */
.cargadoc-card__title {
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  font-weight: 500;
  color: #748274;
}
.cargadoc-card__meta {
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  color: #888;
}
/* Boton altamente responsivo */
.btn-descargar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #677569;
  color: #fff;
  font-size: clamp(0.7rem, 1.6vw, 0.85rem);
  font-weight: 500;
  padding: clamp(0.35rem, 1.5vw, 0.45rem) clamp(0.8rem, 2.5vw, 1rem);
  border-radius: 1.5rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  margin-left: auto;
  flex-shrink: 0;
}
.btn-descargar:hover {
  background: #f8f8f8;
  border-color: #94a3b8;
  color: #334155;
  transform: translateY(-1px);
}
.btn-descargar i {
  font-size: 1rem;
  color: inherit;
}
.btn-descargar__label {
  line-height: 1;
}
/* Descripcion general */
.cargadoc-card__descripcion {
  margin: 0;
  font-size: clamp(0.75rem, 1.5vw, 0.85rem);
  color: #4d4d4d;
}
@media (max-width: 600px) {
  .cargadoc-card__fila-superior {
    flex-direction: row;  /* <-- mantenemos horizontal */
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .cargadoc-card__icon-wrapper {
    width: 2.2rem;
    height: 2.2rem;
  }

  .cargadoc-card__body {
    flex: 1;
    min-width: 0;
  }

  .btn-descargar {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }
}
/*Visor del documento*/
.cargadoc-contenido-vista{
  width:100%;
  height:600px;
  border:none;
  margin:1rem 0;
}
.cargadoc-contenido-vista--error{
  display:flex;
  align-items:center;
  justify-content:center;
  height:200px;
  background:#fff4f4;
  color:#c00;
  border-radius:.5rem;
  font-weight:500;
}
/*Fin Documentos*/

/*Inicio Tareas*/
/*Contenedor principal*/
.contenedor-tarea {
  width: 100%;
  background: #fcfaf8;
  border: 1px solid #f3f1ee;
  border-radius: 0.75rem;
  padding: 0.8rem;
  margin-bottom: 0.75rem;
}

/*Encabezado*/
.contenedor-tarea__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.contenedor-tarea__header-izq {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 0.75rem);
  flex-wrap: wrap;
}

.contenedor-tarea__icono {
  width: clamp(2.2rem, 6vw, 2.5rem);
  height: clamp(2.2rem, 6vw, 2.5rem);
  background: #e5e5df;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contenedor-tarea__icono i {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: #748274;
}

/*Titulo*/
.contenedor-tarea__titulo {
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  font-weight: 500;
  color: #748274;
  margin: 0;
}

/*subtitulo*/
.subititulo-entregatarea-ca {
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  font-weight: 500;
  color: #748274;
  margin: 0;
}
/*Estado*/
.contenedor-tarea__estado {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: clamp(0.55rem, 1.5vw, 0.65rem);
  font-weight: 500;
  border: 1px solid;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
  height: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}
.contenedor-tarea__estado.entregada {
  color: #16a34a;
  border-color: #16a34a;
}
.contenedor-tarea__estado.vencida {
  color: #de3232;
  border-color: #de3232;
}
.contenedor-tarea__estado i {
  font-size: 0.8rem;
}

/*Secciones*/
.section-heading-tarea {
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 500;
  color: #748274;
  margin: 0 0 0.3rem;
  line-height: 1.2;
}
.section-box-tarea {
  font-size: clamp(0.75rem, 1.6vw, 0.85rem);
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  padding: 0.5rem clamp(0.5rem, 3vw, 0.75rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

/*Material de referencia*/
.material-ref__heading {
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 500;
  color: #748274;
  margin: 0 0 0.5rem;
}
.material-ref__box {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0.75rem;
  padding: clamp(0.6rem, 2vw, 1rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.material-ref__description {
  font-size: clamp(0.75rem, 1.5vw, 0.85rem);
  color: #4a4a4a;
  margin: 0;
}
.material-ref__item {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
}
.material-ref__icon {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  color: #748274;
}
.material-ref__title {
  flex-grow: 1;
  font-size: clamp(0.75rem, 1.5vw, 0.8rem);
  color: #021b24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.material-ref__action {
  margin-left: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #748274;
}
.doc-ref-container a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.doc-ref-container a i {
  margin-left: .2rem;
  font-size: 1.1rem;
  color: #748274;
}
/*Lista de recursos*/
.resource-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  padding: 0.75rem clamp(1rem, 4vw, 1.25rem);
}
.resource-item + .resource-item {
  border-top: 1px solid #ececec;
}

/* Contenedor general */
.claseactiva-upload-tarea-contenedor {
  margin-top: 1.5rem;
}

/* Zona de carga (drop/select) */
.claseactiva-upload-tarea-zona {
  border: .13rem dashed #ccc;
  background-color: #f8f1ea;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  position: relative;
}

/* Estado visual al arrastrar archivo*/
.claseactiva-upload-tarea-zona.is-dragover {
  border-color: #748274;
  box-shadow: 0 0 0 3px rgba(116,130,116,.12);
}
/* Icono superior */
.claseactiva-upload-tarea-icono {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #748274;
  font-size: 2rem;
  height: 100%;
}
/* Texto guia */
.claseactiva-upload-tarea-texto {
  color: #5f6c6d;
  font-size: 0.95rem;
  margin-bottom: .5rem;
}
/* Input oculto */
.claseactiva-upload-tarea-input {
  display: none;
}
/* Boton para abrir selector */
.claseactiva-upload-tarea-boton {
  display: inline-block;
  background-color: #fff;
  text-transform: none;
  color: #748274;
  font-weight: 500;
  border: 1px solid #748274;
  padding: 0.5rem 1rem;
  margin-top: .5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  transition: background-color 0.2s ease, box-shadow .2s ease;
}

.claseactiva-upload-tarea-boton:hover {
  background-color: #f3f3f3;
}

.claseactiva-upload-tarea-boton:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(116,130,116,.2);
}

/* Nombre del archivo seleccionado */
.claseactiva-upload-tarea-nombre {
  display: block;
  margin-top: .75rem;
  font-size: 0.85rem;
  color: #4a4a4a;
}
.claseactiva-upload-tarea-cta {
  width: 100%;
  margin-top: 0.75rem;
  background: #748274;
  color: #fff;
  padding: 0.625rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 500;
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}
.claseactiva-upload-tarea-cta:hover { filter: brightness(0.96); }
.claseactiva-upload-tarea-cta:active { transform: translateY(1px); }

.claseactiva-upload-tarea-cta:focus-visible {
  outline: 2px solid #5f6c6d;
  outline-offset: 2px;
}

.claseactiva-upload-tarea-cta:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Mini responsividad */
@media (max-width: 575.98px) {
  .claseactiva-upload-tarea-zona { padding: 1.25rem; }
  .claseactiva-upload-tarea-boton,
  .claseactiva-upload-tarea-cta { width: 100%; }
  .claseactiva-upload-tarea-icono { font-size: 1.6rem; }
}

/*Fin Tareas*/

/*Responsividad de los contenedores de para que no se rompan*/
@media (min-width: 768px) {
  .row-full.gx-4 { display:flex; flex-wrap:nowrap; }
  .row-full.gx-4 > .col-md-5 {
    flex: 0 0 41.66667% !important;
    width: 41.66667% !important;
    max-width: none !important;
    min-width: 0;
  }
  .row-full.gx-4 > .col-md-7 {
    flex: 0 0 58.33333% !important;
    width: 58.33333% !important;
    max-width: none !important;
    min-width: 0;
  }
}

@media (min-width: 992px) {
  .row-full.gx-4 > .col-lg-4 {
    flex: 0 0 33.33333% !important;
    width: 33.33333% !important;
  }
  .row-full.gx-4 > .col-lg-8 {
    flex: 0 0 66.66667% !important;
    width: 66.66667% !important;
  }
}
@media (min-width: 744px) and (max-width: 899.98px) {
  .row-full.gx-4 { display:flex; flex-wrap:nowrap; }
  .row-full.gx-4 > .col-md-5 { flex:0 0 34% !important; width:34% !important; max-width:none !important; min-width:0; }
  .row-full.gx-4 > .col-md-7 { flex:0 0 66% !important; width:66% !important; max-width:none !important; min-width:0; }
}

@media (min-width: 900px) and (max-width: 1180px) {
  .row-full.gx-4 { display:flex; flex-wrap:nowrap; }
  .row-full.gx-4 > .col-md-5 { flex:0 0 32% !important; width:32% !important; max-width:none !important; min-width:0; }
  .row-full.gx-4 > .col-md-7 { flex:0 0 68% !important; width:68% !important; max-width:none !important; min-width:0; }
}
.row-full.gx-4 > [class*="col-"] > * { min-width: 0; }

.claseactiva-warning {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .2rem;
  padding: 1rem;
  margin: 0 auto;
  max-width: 100%;
  color: #5f6c70;
  background-color: #f7faf8;
  border: 1px dashed #d6dbd9;
  border-radius: 6px;
  font-size: 1rem;
  text-align: center;
}

.claseactiva-warning i {
  font-size: 1.4rem;
  color: #5f6c70;
}

@media (max-width: 768px) {
  .claseactiva-warning {
    font-size: .8rem;
  }
  .claseactiva-warning i {
  font-size: 1.2rem;
}
}
/*FIN DISEÑO contenido*/



/*INICIO Clases Activas Ludwin Garcia*/

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Didot', 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* TIPOGRAFÍAS*/

/* Títulos principales */
h1, h2, h3, h4, h5, h6,
.activo-course-title,
.activo-section-title,
.activo-sidebar-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
}

/* Textos generales */
p, span, div,
.activo-section-subtitle,
.activo-class-info,
.activo-document-desc,
.activo-date-description,
.activo-course-meta {
  font-family: 'Montserrat', sans-serif !important;
}

/* Botones y elementos interactivos */
.activo-tab-btn,
.activo-quick-btn,
.activo-certificate-btn,
.activo-doc-btn,
.activo-course-tag {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}
.btn-back-clase,
.btn-back-mobile img,
.btn-back img {
    filter: brightness(0) saturate(100%) invert(45%) sepia(9%) saturate(761%) hue-rotate(65deg) brightness(92%) contrast(82%);
}

.btn-back-clase{
  padding: 0 10px;
}
.activo-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 30px;
}

/*ENCABEZADO DEL CURSO*/

.activo-course-header {
  background: transparent;
  padding: 90px 30px 40px;
  margin-bottom: 20px;
  position: relative;
}

.activo-curso-title {
  display: inline-block;
  background-color: #FDF9F4;
  color: #181616ff;
  font-size: 20px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 12px;
  line-height: 1.2;
}

.activo-course-tag {
  display: inline-block;
  margin-top: 10px;
  color: #758275;
  background: #fff;
  padding: 1px 15px;
  border-radius: 999px;
  margin-bottom: 20px;
  box-shadow: #5A735D 0px 0px 0px 1px inset;
  font-size: 15px;
  font-weight: bold;
}

.activo-course-title {
  font-family: 'Didot', 'Times New Roman', serif !important;
  font-size: 2.4rem;
  font-weight: 500;
  color: #758275;
  margin: 0 0 10px;
  line-height: 1.2;
}

.activo-course-description {
  font-family: 'Didot', 'Times New Roman', serif;
  color: #758275;
  font-size: 1rem;
  margin-bottom: 16px;
  line-height: 1.5;
}

.activo-course-meta {
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 0;
  margin-top: 8px;
}

.activo-course-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
}

/* Botón de certificado */
.activo-certificate-btn {
  position: absolute;
  top: 90px;
  right: 30px;
  background: #758374;
  color: white;
  border: none;
  padding: 10px 45px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
  white-space: nowrap;
}

.activo-certificate-btn:hover {
  background: #758374;
}

.activo-certificate-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/*NAVEGACIÓN DE PESTAÑAS*/

.activo-tabs-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  width: 100%;
}

.activo-tabs-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 600px;
  border-radius: 15px;
  background: #f9fafb;
  padding: 1px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #d1d5db;
  overflow: hidden;
}

.activo-tab-btn {
  all: unset;
  box-sizing: border-box;
  padding: 10px 15px;
  font-weight: 500;
  font-size: 14px;
  color: #758374;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  width: 100%;
  border-radius: 10px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: left;
}

.activo-tab-btn.active {
  background: #758374;
  color: white;
  border-color: #758374;
}

.activo-tab-btn:hover:not(.active) {
  background: #e2e8f0;
  color: #445544;
}

/*CONTENIDO PRINCIPAL */

.activo-main-content {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
}

/*SECCIÓN DE CLASES*/

.activo-classes-section {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  min-height: 400px;
}

.activo-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #758275;
}

.activo-section-header svg {
  color: #758275;
  stroke: #758275;
  vertical-align: middle;
  flex-shrink: 0;
}

.activo-section-title {
  font-family: 'Didot', 'Times New Roman', serif !important;
  font-size: 1.5rem;
  font-weight: 500;
  color: #333;
  margin: 0;
  line-height: 1.2;
}

.activo-section-subtitle {
  font-family: 'Didot', 'Times New Roman', serif;
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 20px;
}

/*TARJETAS DE CLASE*/

.activo-class-card {
  background: #FDFBF9;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
}

.activo-class-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.activo-class-card h3 {
  font-family: 'Didot', serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #748274 !important;
  margin-bottom: 6px !important;
}

/* Estados de la clase */

.activo-class-status.nuevo {
  background-color: #10B981 !important;
  color: white !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Etiqueta "Próximamente" */

.activo-class-label {
  position: absolute;
  top: -12px;
  left: -12px;
  background-color: #758374;
  color: white;
  padding: 4px 14px;
  border-radius: 8px 8px 8px 0;
  font-size: 13px;
  font-weight: 600;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  font-family: 'Montserrat', sans-serif;
}

.activo-class-badge-left {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  z-index: 3;
  text-transform: uppercase;
}

.activo-class-badge-left.nuevo {
  background-color: #758374;
  color: white;
}

.activo-class-badge-left.proximamente {
  background-color: #758374;
  color: white;
}

.activo-class-status.completed,
.activo-class-status.disponible {
  background-color: #F7EADC;
  color: #758272;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  position: absolute;
  top: 12px;
  right: 12px;
}

.activo-class-status.available {
  background: #F7EADC !important;
  color: #758272 !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  padding: 1px 10px;
}

.activo-class-status.completado {
  background-color: #758374;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Encabezado de la clase */
.activo-class-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

/* Miniatura de la clase */
.activo-class-thumbnail {
  width: 100px;
  height: 70px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background-color: #f3f4f6;
  flex-shrink: 0;
}

.activo-class-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Botón de reproducción */
.activo-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  pointer-events: none;
}

/* Información de la clase */
.activo-class-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.activo-class-info h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.activo-class-date {
  font-size: 13px;
  color: #6f7a7f;
  display: flex;
  align-items: center;
  gap: 6px;
}

.activo-class-progress {
  font-size: 12px;
  color: #758374;
  margin-top: 8px;
  width: 100%;
}

/*BARRAS DE PROGRESO*/

.activo-progress-label-externa {
  position: relative;
  font-size: 13px;
  color: #758374;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activo-progress-label-externa span:first-child {
  display: inline-block;
}

.activo-entregas-count {
  font-weight: 500;
}

.activo-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-weight: 500;
}

.activo-progress-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 400;
  color: #6f7a7f;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.activo-progress-bar {
  background-color: #e2e8f0;
  height: 8px;
  border-radius: 9999px;
  overflow: hidden;
  width: 100%;
}

.activo-progress-fill {
  height: 100%;
  background-color: #758272;
  transition: width 0.3s ease;
  border-radius: 9999px;
}

/*SIDEBAR*/

.activo-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-top: -15px;
  margin-bottom: 20px;
  border-radius: 15px;
  overflow: hidden;
}

.activo-sidebar-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.activo-sidebar-image-floating {
  width: 100%;
  margin-top: -15px;
  margin-bottom: 20px;
  border-radius: 15px;
  overflow: hidden;
}

.activo-sidebar-image-floating img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 15px;
  display: block;
  max-height: 180px;
}

.activo-sidebar-title {
  font-family: 'Didot', 'Times New Roman', serif !important;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

/*ACCESO RÁPIDO*/

.activo-quick-access {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.activo-quick-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #758374;
  border-radius: 50px;
  background: white;
  color: #758374;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  padding: 10px 20px;
  text-transform: none;
}

.activo-quick-btn:hover {
  background: #758374;
  color: white;
  border-color: #6b7280;
  text-decoration: none;
}

.activo-quick-btn:disabled {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}

.activo-quick-btn:disabled:hover {
  background: #f9fafb;
  color: #9ca3af;
  border-color: #e5e7eb;
}

/*DOCUMENTOS*/

.activo-document-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FCF9F5;
  border-radius: 15px;
  padding: 10px 20px;
  margin-bottom: 16px;
  transition: box-shadow 0.3s ease;
}

.activo-document-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.activo-document-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #EEEDE8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: #748375;
}

.activo-document-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activo-document-title {
  font-weight: 600;
  font-size: 16px;
  color: #808C80;
  line-height: 1.3;
}

.activo-document-meta {
  font-size: 13px;
  color: #9ca3af;
  line-height: 1.2;
}

.activo-document-buttons {
  display: flex;
  gap: 10px;
  margin-left: 20px;
  flex-shrink: 0;
}

.activo-doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 32px;
  padding: 0 25px;
  border: 1px solid #758374;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  line-height: 1;
}

.activo-doc-btn svg {
  margin-right: 6px;
  stroke-width: 2;
}

.activo-doc-btn.ver {
  background: #FCF9F5;
  color: #758374;
  border-color: #758374;
}

.activo-doc-btn.ver:hover {
  background: #EEE9DF;
  color: #445544;
}

.activo-doc-btn.descargar {
  background: #758374;
  color: #ffffff;
  border-color: #758374;
}

.activo-doc-btn.descargar:hover {
  background: #758374;
  border-color: #758374;
  color: #ffffff;
}

/*FECHAS IMPORTANTES*/

.activo-date-item {
  background: #FCF9F5;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 20px;
  border-radius: 15px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.activo-date-item.urgente {
  background: #FDF9F4;
  border-color: #f2e8dd;
}

.activo-date-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #EEEDE8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7C8A7D;
  margin-top: 2px;
}

.activo-date-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.activo-date-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.activo-date-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #758374;
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 4px;
}

.activo-date-description {
  font-family: 'Didot', 'Times New Roman', serif;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  margin-top: 2px;
}

/*CONTENIDO VACÍO*/

.activo-no-content {
  width: 100%;
  height: 150px;
  background: #FCF9F5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 14px;
  border-radius: 15px;
  padding: 15px;
  font-family: 'Didot', 'Times New Roman', serif;
  text-align: center;
  font-style: italic;
}

/*RESPONSIVE DESKTOP*/

@media (min-width: 769px) {
  .activo-tabs-container {
    justify-content: center;
    margin-bottom: 25px;
    transform: translateX(-100px);
  }

  .activo-tabs-nav {
    max-width: 600px;
    width: 100%;
  }
}

/*RESPONSIVE MÓVIL*/

@media (max-width: 768px) {

  /* Contenedor principal */
  .activo-container {
    padding: 20px 15px;
  }

  /* Encabezado del curso */
.activo-course-header {
  position: relative;
  padding: 60px 15px 20px;
  margin-bottom: 15px;
}

  .activo-course-title {
    font-size: 1.8rem;
    line-height: 1.3;
  }

  .activo-curso-title {
    font-size: 18px;
    padding: 6px 12px;
  }

  .activo-course-description {
    font-size: 0.9rem;
    margin-bottom: 12px;
  }

  .activo-course-meta {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    font-size: 13px;
  }

  .activo-course-meta span {
    gap: 6px;
  }

  /* Botón de certificado móvil */
.activo-certificate-btn {
  position: absolute;
  top: 90px;
  right: 12px;
  background: #758374;
  color: white;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  z-index: 10;
  white-space: nowrap;
}

.activo-certificate-btn svg {
  width: 16px;
  height: 16px;
}

  /* Navegación de pestañas móvil */
  .activo-tabs-nav {
    max-width: 360px;
    height: 40px;
    border-radius: 999px;
    background: #f9fafb;
    border: 1px solid #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
  }

  .activo-tab-btn {
    flex: 1;
    font-size: 11px;
    padding: 6px 4px;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
  }

  .activo-tab-btn svg {
    display: none;
  }

  /* Contenido principal móvil */
  .activo-main-content {
    display: flex;
    flex-direction: column;
  }

  .activo-classes-section {
    order: 1;
  }

  .activo-section-title {
    font-family: 'Didot', 'Times New Roman', serif !important;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
  }

  .activo-section-subtitle {
    font-size: 13px;
    margin-bottom: 15px;
  }

  /* Tarjetas de clase móvil */
  .activo-class-card {
    padding: 15px !important;
    gap: 12px;
    min-height: 120px;
  }

  .activo-class-status {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
  }

  .activo-class-header {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .activo-class-thumbnail {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
    object-fit: cover;
  }

  .activo-play-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .activo-class-info {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .activo-class-info h3 {
    font-family: 'Didot', 'Times New Roman', serif !important;
    font-size: 1.05rem;
    font-weight: 600;
    color: #758374;
    margin-bottom: 6px;
  }

  .activo-class-date {
    font-family: 'Didot', 'Times New Roman', serif;
    font-size: 13px;
    color: #6f7a7f;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .activo-class-progress {
    width: 100% !important;
    font-family: 'Didot', 'Times New Roman', serif;
    font-size: 13px;
    color: #758374;
  }

  .activo-progress-bar {
    width: 100% !important;
    height: 6px;
    border-radius: 3px;
    margin-top: 8px;
  }

  /* Documentos móvil */
  .activo-document-item {
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .activo-document-icon {
    width: 32px;
    height: 32px;
    margin-right: 0;
    align-self: flex-start;
  }

  .activo-document-info {
    gap: 6px;
  }

  .activo-document-title {
    font-weight: 600;
    font-size: 16px;
    color: #808C80;
    line-height: 1.3;
  }

  .activo-document-desc {
    font-size: 14px;
    color: #808C80;
    line-height: 1.3;
  }

  .activo-document-meta {
    font-family: 'Didot', 'Times New Roman', serif;
    font-size: 13px;
    color: #9ca3af;
  }

  .activo-document-buttons {
    gap: 8px;
    margin-left: 0;
    justify-content: flex-end;
  }

  .activo-doc-btn {
    height: 28px;
    min-width: 28px;
    padding: 0 12px;
    font-size: 12px;
  }

  .activo-doc-btn svg {
    margin-right: 4px;
  }

  /* Fechas importantes móvil */
  .activo-date-item {
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    gap: 12px;
  }

  .activo-date-icon {
    width: 32px;
    height: 32px;
    margin-right: 0;
  }

  .activo-date-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    color: #333;
    font-size: 15px;
  }

  .activo-date-description {
    font-family: 'Didot', 'Times New Roman', serif;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
  }

  /* Sidebar móvil */
  .activo-sidebar {
    order: 1;
    margin-bottom: 0;
  }

  .activo-sidebar-card {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 0;
  }

  .activo-sidebar-title {
    font-family: 'Didot', 'Times New Roman', serif !important;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
  }

  .activo-quick-access {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .activo-quick-btn {
    justify-content: center;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 25px;
  }

  .activo-quick-btn svg {
    width: 14px;
    height: 14px;
  }

  /* Contenido vacío móvil */
  .activo-no-content {
    height: 100px;
    font-size: 13px;
    padding: 10px;
    border-radius: 10px;
  }

}
/*FIN Clases Activas Luwdin Garcia*/

/* ======================================== */
/* ESTILOS PARA FLUJO DE LOGIN DE AULA */
/* ======================================== */

.editar-usuario-container,
.login-aula-container,
.recuperar-pass-container {
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}

.editar-usuario-container::before,
.login-aula-container::before,
.recuperar-pass-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(106,120,103,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(106,120,103,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(106,120,103,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(106,120,103,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(106,120,103,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    animation: aula-form-float 20s ease-in-out infinite;
}

.editar-usuario-card,
.login-aula-card,
.recuperar-pass-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(106, 120, 103, 0.15);
    padding: 40px 0 0 0;
    width: 100%;
    max-width: 450px;
    position: relative;
    z-index: 1;
    animation: aula-form-slideUp 0.8s ease-out;
    border: 1px solid rgba(106, 120, 103, 0.1);
    overflow: hidden;
}

.editar-usuario-card {
    max-width: 650px;
}

.editar-usuario-header,
.login-aula-header,
.recuperar-pass-header {
    text-align: center;
    margin: 0 20px 40px 20px;
    background: linear-gradient(135deg, #6a7867 0%, #8a9a87 100%);
    border-radius: 15px;
    padding: 30px 20px;
    box-shadow: 0 10px 25px rgba(106, 120, 103, 0.2);
    position: relative;
    overflow: hidden;
}

.editar-usuario-header::before,
.login-aula-header::before,
.recuperar-pass-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: aula-form-shimmer 3s ease-in-out infinite;
}

.editar-usuario-logo,
.login-aula-logo,
.recuperar-pass-logo {
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    animation: aula-form-pulse 2s infinite;
    position: relative;
    z-index: 1;
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.editar-usuario-logo i,
.login-aula-logo i,
.recuperar-pass-logo i {
    font-size: 40px;
    color: #6a7867;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.editar-usuario-title,
.login-aula-title,
.recuperar-pass-title {
    font-size: 32px;
    font-weight: 800;
    color: white !important;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    letter-spacing: -0.5px;
}

.editar-usuario-subtitle,
.login-aula-subtitle,
.recuperar-pass-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 500;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.editar-usuario-row {
    display: flex;
    gap: 20px;
}

.editar-usuario-half {
    flex: 1;
}

.editar-usuario-form-group,
.login-aula-form-group,
.recuperar-pass-form-group {
    margin-bottom: 25px;
    position: relative;
}

.editar-usuario-form-control,
.login-aula-form-control,
.recuperar-pass-form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 2px;
    margin-bottom: 0;
    padding: 10px 25px !important;
    max-width: 100%;
    width: 100%;
    font-size: .9rem;
    line-height: 30px;
    font-weight: 400;
    border: 1px solid rgba(10, 77, 60, 0.2) !important;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    background-color: #fff !important;
    height: 55px;
    box-sizing: border-box;
}

.editar-usuario-form-control[type="date"] {
    padding-right: 25px !important;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.editar-usuario-form-control[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    color: #6a7867;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.editar-usuario-form-control[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.editar-usuario-form-control[type="date"]::-webkit-inner-spin-button,
.editar-usuario-form-control[type="date"]::-webkit-clear-button {
    display: none;
}

.editar-usuario-form-control:focus,
.login-aula-form-control:focus,
.recuperar-pass-form-control:focus {
    outline: none;
    border-color: #6a7867 !important;
    box-shadow: 0 0 0 3px rgba(106, 120, 103, 0.1);
    transform: translateY(-2px);
}

.editar-usuario-form-control::placeholder,
.login-aula-form-control::placeholder,
.recuperar-pass-form-control::placeholder {
    color: #a0aec0;
    font-weight: 400;
}


.editar-usuario-password-field,
.login-aula-password-field {
    position: relative;
}

.editar-usuario-toggle-password,
.login-aula-toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #a0aec0;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.editar-usuario-toggle-password:hover,
.login-aula-toggle-password:hover {
    background: rgba(106, 120, 103, 0.1);
    color: #6a7867;
}

.editar-usuario-note {
    background: rgba(106, 120, 103, 0.1);
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    color: #6a7867;
    font-size: 14px;
    font-weight: 500;
    border-left: 4px solid #6a7867;
}

.editar-usuario-note i {
    margin-right: 8px;
}

.editar-usuario-validation-messages {
    margin-top: 8px;
}

.editar-usuario-validation-error {
    color: #dc3545;
    font-size: 12px;
    margin: 5px 0;
    padding: 4px 8px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
    border-left: 3px solid #dc3545;
}

.editar-usuario-btn,
.login-aula-btn,
.recuperar-pass-btn {
    width: 100%;
    padding: 15px;
    background: #6a7867;
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

.editar-usuario-btn::before,
.login-aula-btn::before,
.recuperar-pass-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.editar-usuario-btn:hover::before,
.login-aula-btn:hover::before,
.recuperar-pass-btn:hover::before {
    left: 100%;
}

.editar-usuario-btn:hover,
.login-aula-btn:hover,
.recuperar-pass-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(106, 120, 103, 0.3);
    background: #6a7867 !important;
    border: none !important;
}

.editar-usuario-btn:disabled {
    background: #cccccc !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
}

.editar-usuario-btn:disabled:hover {
    transform: none;
    box-shadow: none;
    background: #cccccc !important;
}

.editar-usuario-links,
.login-aula-links,
.recuperar-pass-links {
    text-align: center;
    margin-top: 20px;
}

.editar-usuario-links a,
.login-aula-links a,
.recuperar-pass-links a {
    color: #6a7867;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: block;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 8px;
}

.editar-usuario-links a:hover,
.login-aula-links a:hover,
.recuperar-pass-links a:hover {
    background: rgba(106, 120, 103, 0.1);
    transform: translateX(5px);
    color: #6a7867 !important;
}

.editar-usuario-floating-shapes,
.login-aula-floating-shapes,
.recuperar-pass-floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.editar-usuario-shape,
.login-aula-shape,
.recuperar-pass-shape {
    position: absolute;
    background: rgba(106, 120, 103, 0.1);
    border-radius: 50%;
    animation: aula-form-float-shape 6s ease-in-out infinite;
}

.editar-usuario-shape:nth-child(1),
.login-aula-shape:nth-child(1),
.recuperar-pass-shape:nth-child(1) {
    width: 80px;
    height: 80px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.editar-usuario-shape:nth-child(2),
.login-aula-shape:nth-child(2),
.recuperar-pass-shape:nth-child(2) {
    width: 120px;
    height: 120px;
    top: 60%;
    right: 10%;
    animation-delay: 2s;
}

.editar-usuario-shape:nth-child(3),
.login-aula-shape:nth-child(3),
.recuperar-pass-shape:nth-child(3) {
    width: 60px;
    height: 60px;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

@media (max-width: 768px) {
    .editar-usuario-card {
        max-width: 100%;
        padding: 30px 20px;
        margin: 20px;
    }
    
    .editar-usuario-title {
        font-size: 24px;
    }
    
    .editar-usuario-row {
        flex-direction: column;
        gap: 0;
    }
    
    .editar-usuario-half {
        flex: none;
    }
}

@keyframes aula-form-float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(1deg); }
}

@keyframes aula-form-slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aula-form-shimmer {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
}

@keyframes aula-form-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes aula-form-float-shape {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(180deg); }
}


.password-strength {
    font-size: 12px;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    display: none;
}

.password-strength.weak {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.2);
    display: block;
}

.password-strength.medium {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.2);
    display: block;
}

.password-strength.strong {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.2);
    display: block;
}

.password-match {
    font-size: 12px;
    margin-top: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    display: none;
}

.password-match.match {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.2);
    display: block;
}

.password-match.no-match {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.2);
    display: block;
}

.editar-usuario-form-control.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.editar-usuario-form-control.success {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.password-strength {
    font-size: 12px;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    display: none;
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-left: 3px solid #dc3545;
}

.password-strength.weak {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-left: 3px solid #dc3545;
    display: block;
}

.password-strength.medium {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border-left: 3px solid #ffc107;
    display: block;
}

.password-strength.strong {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border-left: 3px solid #28a745;
    display: block;
}

.password-match {
    font-size: 12px;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    display: none;
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-left: 3px solid #dc3545;
}

.password-match.match {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border-left: 3px solid #28a745;
    display: block;
}

.password-match.no-match {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-left: 3px solid #dc3545;
    display: block;
}

.editar-usuario-validation-error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 8px;
    padding: 4px 8px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
    border-left: 3px solid #dc3545;
}

.editar-usuario-form-control.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.editar-usuario-form-control.success {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.recuperar-pass-password-field {
    position: relative;
}

.recuperar-pass-toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #a0aec0;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recuperar-pass-toggle-password:hover {
    background: rgba(106, 120, 103, 0.1);
    color: #6a7867;
}

.recuperar-pass-validation-messages {
    margin-top: 8px;
}

.recuperar-pass-validation-error {
    color: #dc3545;
    font-size: 12px;
    margin: 5px 0;
    padding: 4px 8px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
    border-left: 3px solid #dc3545;
    display: none;
}

.recuperar-pass-validation-error.show {
    display: block;
}