.card-profesor {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: relative;
  width: 300px;
  height: 384px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  background: #fff
}

.card__img-profesor {
  height: 192px;
  width: 100%;
}

.card__img-profesor svg {
  height: 100%;
  border-radius: 20px 20px 0 0;
}

.card__avatar-profesor {
  position: absolute;
  width: 114px;
  height: 114px;
  background: #fff;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: calc(50% - 57px);
}

.card__avatar-profesor svg {
  width: 100px;
  height: 100px;
}

.card__title-profesor {
  margin-top: 60px;
  font-weight: 500;
  font-size: 18px;
  color: #000;
}

.card__subtitle-profesor {
  margin-top: 10px;
  font-weight: 400;
  font-size: 15px;
  color: #78858F;
}

.card__btn-profesor {
  margin-top: 15px;
  width: 76px;
  height: 31px;
  border: 2px solid #000;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  color: #000;
  background: #fff;
  text-transform: uppercase;
  transition: all 0.3s;
}

.card__btn-solid-profesor {
  background: var(--main-color);
  background: #fff;
}

.card__btn-profesor:hover {
  background: var(--main-color);
  background: #fff;
}

.card__btn-solid-profesor:hover {
  background: #fff;
  color: #000;
}



/*
 * Estos estilos son específicos para el contenedor de pestañas con la clase `tabs-tecnicos`.
 * Al usar esta clase como prefijo, nos aseguramos de que no afecten a otras pestañas
 * del tema de Moodle o de cualquier otro plugin.
 */

/* Estilo del contenedor principal de las pestañas (`.tabs-tecnicos`) */
.tabs-tecnicos {
  background-color: transparent; /* El fondo ahora es transparente */
  color: #c0c0c0; /* Color de texto claro para el contraste */
  padding: 0;
  border-radius: 5px; /* Bordes redondeados para el contenedor */
  overflow: hidden; /* Oculta cualquier contenido que se salga de los bordes redondeados */
}

/* Estilo de la barra de navegación (las pestañas superiores) */
.tabs-tecnicos .nav-tabs-tecnicos {
  background-color: transparent; /* Fondo transparente para la barra completa */
  border-bottom: none;
  padding: 10px 15px 0 15px;
  list-style: none; /* Elimina los puntos de la lista */
  margin-left: 0;
  padding-left: 0;
}

/* Estilo de cada enlace de pestaña */
.tabs-tecnicos .nav-link-tecnicos {
  background-color: #25282b; /* Fondo negro para las pestañas inactivas */
  color: #c0c0c0; /* Color del texto de las pestañas inactivas */
  border: none;
  border-radius: 5px 5px 0 0; /* Bordes redondeados en la parte superior */
  padding: 8px 15px;
  font-weight: bold;
  transition: all 0.3s ease;
  margin-right: 0; /* Se elimina el margen derecho para que las pestañas se junten */
}

/* Estilo de la pestaña que está activa */
.tabs-tecnicos .nav-link-tecnicos.active {
  background-color: #25282b; /* ¡Conserva el fondo negro! */
  color: #2B9AC5; /* ¡Color verde para el texto de la pestaña activa! */
  position: relative;
  z-index: 1;
  padding: 15px 22px; /* Aumenta el padding para hacerla más grande */
  outline: none; /* <--- ¡Añade esta línea para eliminar el contorno blanco! */
}

/* Pseudo-elemento para la línea verde debajo de la pestaña activa */
.tabs-tecnicos .nav-link-tecnicos.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #2B9AC5;
  z-index: 2;
}

/* Esto fuerza a que las pestañas inactivas se oculten completamente */
.tabs-tecnicos .tab-pane-tecnicos:not(.active) {
  display: none;
}

/* Estilo de los enlaces de las pestañas al pasar el cursor */
.tabs-tecnicos .nav-link-tecnicos:hover {
  background-color: #363a3e; /* Un tono más oscuro para el efecto de "hover" */
  color: #ffffff;
}

/* Estilo del contenido dentro de las pestañas */
.tabs-tecnicos .tab-content-tecnicos {
  background-color: #2e3034; /* Fondo del área de contenido */
  padding: 20px 15px;
  border: none;
}

/* Estilo para cada panel de contenido */
.tabs-tecnicos .tab-pane-tecnicos {
  padding: 0;
}

/* Estilo para el título dentro del contenido de la pestaña */
.tabs-tecnicos .tab-title-tecnicos {
  color: #2B9AC5;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Estilo para el párrafo de texto */
.tabs-tecnicos .tab-pane-tecnicos p {
  line-height: 1.6;
}

















/*** -------------------------------------------------------------------------- CONTENIDO DE CURSOS -------------------------------------------------------------------------- ***/
.card-tecnicos p {
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  color: #666;
}

.card-tecnicos p.small-tecnicos {
  font-size: 14px;
}

.go-corner1-tecnicos {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 32px;
  height: 32px;
  overflow: hidden;
  top: 0;
  right: 0;
  background-color: #00838d;
  border-radius: 0 4px 0 32px;
}

.go-arrow-tecnicos {
  margin-top: -4px;
  margin-right: -4px;
  color: white;
  font-family: courier, sans;
}

.card1-tecnicos {
  display: block;
  position: relative;
  max-width: 300px;
  background-color: #f2f8f9;
  border-radius: 4px;
  padding: 22px 14px;
  margin: 12px;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
}

.card1-tecnicos:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16px;
  right: -16px;
  background: #00838d;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.25s ease-out;
}

.card1-tecnicos:hover:before {
  transform: scale(30);
}

.card1-tecnicos:hover p {
  transition: all 0.3s ease-out;
  color: rgba(255, 255, 255, 0.8);
}

.card1-tecnicos:hover h3 {
  transition: all 0.3s ease-out;
  color: #fff;
}







.go-corner2-tecnicos {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 32px;
  height: 32px;
  overflow: hidden;
  top: 0;
  right: 0;
  background-color: #F5AC4F;
  border-radius: 0 4px 0 32px;
}

.card2-tecnicos {
  display: block;
  position: relative;
  max-width: 300px;
  background-color: #f2f8f9;
  border-radius: 4px;
  padding: 22px 14px;
  margin: 12px;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
}

.card2-tecnicos:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16px;
  right: -16px;
  background:  #F5AC4F;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.25s ease-out;
}

.card2-tecnicos:hover:before {
  transform: scale(30);
}

.card2-tecnicos:hover p {
  transition: all 0.3s ease-out;
  color: rgba(255, 255, 255, 0.8);
}

.card2-tecnicos:hover h3 {
  transition: all 0.3s ease-out;
  color: #fff;
}





.go-corner3-tecnicos {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 32px;
  height: 32px;
  overflow: hidden;
  top: 0;
  right: 0;
  background-color: #52944F;
  border-radius: 0 4px 0 32px;
}

.card3-tecnicos {
  display: block;
  position: relative;
  max-width: 300px;
  background-color: #f2f8f9;
  border-radius: 4px;
  padding: 22px 14px;
  margin: 12px;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
}

.card3-tecnicos:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -16px;
  right: -16px;
  background:  #52944F;
  height: 32px;
  width: 32px;
  border-radius: 32px;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.25s ease-out;
}

.card3-tecnicos:hover:before {
  transform: scale(30);
}

.card3-tecnicos:hover p {
  transition: all 0.3s ease-out;
  color: rgba(255, 255, 255, 0.8);
}

.card3-tecnicos:hover h3 {
  transition: all 0.3s ease-out;
  color: #fff;
}

/*** -------------------------------------------------------------------------- BOTONES CON ELEVACION -------------------------------------------------------------------------- ***/
.ov-btn-slide-close {
  background: #fff; /* Color de fondo */
  color: #171134; /* Color de fuente */
  border: 2px solid #171134; /* Tamaño y color de borde */
  padding: 16px 20px;
  border-radius: 3px; /* Redondear bordes */
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
  cursor: pointer; /* Indicar que es un botón */
  transition: background-color 0.3s ease; /* Animación de hover */
}

.ov-btn-slide-close:hover {
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 1); /* Shadow on hover */
  background-color: #171134; /* Color de fondo hover */
  color: #fff; /* Color de fuente hover */
  transform: translateY(-20px); /* Elevar el botón 5px en el eje Y */
  transition: background-color 0.3s ease, transform 0.3s ease; /* Animar tanto el color como la elevación */
}

.ov-btn-slide-close::after {
  content: "";
  background: #171134; /* Color de fondo hover */
  position: absolute;
  z-index: -1;
  padding: 16px 20px;
  display: block;
  left: 0;
  right: 0;
  top: 100%;
  bottom: -100%;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.ov-btn-slide-close:hover::after {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

/* Styles for button layout (.btn-group-ini) */
.btn-group-ini {
  display: flex; /* Use flexbox for button layout */
  width: 100%; /* Make the group occupy full width */
}

.btn-group-ini .ov-btn-slide-close {
  flex: 1; /* Make buttons share available space equally */
  border-radius: 0; /* Remove border radius for seamless joining */
  margin: 0px; /* Add small margin for separation (optional) */
}

.btn-group-ini .ov-btn-slide-close:first-child { /* Remove margin from first button */
  margin-left: 0;
}

.btn-group-ini .ov-btn-slide-close:last-child { /* Remove margin from last button */
  margin-right: 0;
}