@charset "UTF-8";
@import url("../../css/Variables.css");
* {
  font-family: 'Times New Roman', Times, serif;
}
html {
  width: 100vw;
  overflow-x: hidden;
}
a:is(:link, :visited, :hover, :active) {
  color:var(--text-color-sataa);;
  text-decoration: none;
}
.link::after {	
	display: inline-block;
	height: .7rem;
	width: .7rem;  
	content: url(../../img/iconos/up-right-from-square.svg);
	margin-left: .5rem;
	vertical-align: -1px;
}
strong {  /* Bootstrap */
  font-weight: bold;
  font-style: italic;
  color: var(--text-color-sataa);
}
.header {
  margin-top: 24px;
  padding: .5rem .5rem .1rem .5rem;
	text-align: center;
	background-color: rgba(192, 192, 192, 0.3);
	h5 {
		color: var(--text-color-sataa);
		padding-top: .5rem;
		text-align: center;
		font-size: 1rem;
	}
}
img.img__left {
  float: left;
  clear: both;
  max-width: 35%;
  height: auto;
  margin: 0 1.5rem .7rem 0;
  -webkit-box-shadow: 8px 8px 10px #333;
          box-shadow: 8px 8px 10px #333;
          -webkit-box-shadow: 2px 2px 3px #333;
          box-shadow: 2px 2px 3px #333;
  border-radius: 5px;
}
/* ### AREAPRIVADA.PHP */
.miboton { 
	width:fit-content;
	color: white !important;
	text-align: center;
	margin: auto;
	display: block;
	background-color: var(--text-color-sataa);
	color: white;
	font-size: 1rem;
	border-radius: 1rem;
	border-bottom: 1px solid white;
	padding: 0.3rem 1rem;
}
.miboton:hover {
	background-color: var(--text-light-color-sataa);
	color: white;
	font-size: 1.1rem;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 3px 3px 2px rgb(0,0,0, 0.5), 5px 5px 3px rgba(99,99,99, 1);
}
/* ### FIN AREAPRIVADA.PHP ### */
.contenido__mobile:not(.profesores) {
  background-color: #fff;
  top: 170px;
  overflow: auto;
  padding: 10px 15px 0 15px;
  & p {
    font-size: 0.9em;
    text-align: justify;
    line-height: 1.1em;
    /* margin-bottom: 1ren ; Por defecto con Bootstrap */
    & span.titulo {
      display: inline-block;
      font-family: 'Merriweather', serif;
      font-size: 1.1em;
      font-weight: bold;
      font-style: italic;
      color:var(--text-color-sataa);;
      margin-top: .3rem;
      margin-bottom: 0;  
      /* text-decoration: underline; */
      line-height: 1em;
      &.global {
        border-bottom: 1px solid #00458F;
      }
    }  
  }
  & ol {
    font-size: 0.9em;
    text-align: justify;
    /* list-style-type: none; */
    list-style-position: inside;
    padding-left: 1rem;
  }
}
/* Texto en pequeño que aparece al lado de los títulos en cursos */
.contenido__mobile.cursos p span.titulo.cursos a {
  font-weight: normal;
  font-size: 0.8em;
}
.pdf, .contenido__mobile.cursos p span.titulo.cursos a::after, .contenido__mobile.profesores span a:first-child:after {
	display: inline-block;
	background-size: 1rem 1rem;
	height: 1rem;
	width: 1rem;  
	content: url(../../img/iconos/file-pdf.svg);
	margin-left: .2rem;
	vertical-align: -2px;
}
.subtitulo {
  font-family: 'Merriweather', serif;
  font-size: 1em;
  font-weight: bold;
  color:var(--text-color-sataa);;
  text-decoration: underline;
  line-height: 1.1em;
  /* padding: 0 0 10px .5rem; */
  list-style-type: none;
  background: none;
  &.experiencia__docente {
    font-size: .9rem;
  }
  &.experiencia__profesional {
    font-size: .9rem;
  }
}
.listado {
  padding: 0;
  /* Actualizar style-type en todos los listado */
  list-style-type: disc; 
  text-align: justify;
}
.contenido__mobile.estructura ol.listado li:nth-child(2n+1) {
  font-weight: bold;
}
.contenido__mobile.estructura ol.listado li:nth-child(2n+2) {
  list-style-type: circle;
  font-style: italic;
  padding-left: .5rem;
}
.listado.bibliografia li {
  margin-left: .4rem; /* Actualizar después de corregir ".listado li" */
  &:nth-child(2n+1){
    list-style-type: disc;
    font-weight: bold;
    color: var(--text-color-sataa);
  }
  &:nth-child(2n+2){
    list-style-type: circle;
    font-style: italic;
    margin-left: 1.2rem;
  }
}
.contenido__mobile.cursos ol.listado li {
    list-style-type: disc;
    font-weight: normal;
    /* usamos outside para evitar los problemas con la alineación del texto a la izquierda cuando usamos text-align justify */
    list-style-position: outside;
  }
 /* ### ENTIDADES COLABORADORAS ### */
.grid-container {
  text-align: center;
  display: -ms-grid;
  display: grid;
  padding: 5px 5px 5px 15px;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
  &.principal {
    -ms-grid-columns: 30% 30% 30%;
        grid-template-columns: 30% 30% 30%;
    grid-gap: 5%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    vertical-align: middle;
  }
  &.secundario {
    -ms-grid-columns: 30% 30% 30%;
        grid-template-columns: 30% 30% 30%;
    grid-gap: 5%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  & > div {
    text-align: center;
    width: auto;
    padding: 5px 0;
    font-size: 10px;
  }
}
/* ### Fin ENTIDADES COLABORADORAS ### */

/* ### COORDINADORES ### */
#coordinadores {
  font-size: 0.9em;
  /* tamaño de texto de referencia. Ver en otros ID CLASS tamaños "em" */
  position: relative;
  font-family: sans-serif;
  font-weight: normal;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-align: justify;
  color: #000;
  left: -9px;
  padding: 0 0 0 30px;
  /* margin-right: 20px; */
  /* padding right y left */
  overflow-x: hidden;
  & figure {
    display: inline-block;
    margin: 0;
    padding: 0 0 10px 0;
    max-width: 30%;
    height: auto;
    text-align: center;
    vertical-align: top;
    /* margin-right: 20px; */
    & img {
      width: 100%;
      border-radius: 5px;
    }
    & figcaption {
      font-size: 0.75em;
      text-align: center;
      max-width: 200px;
      height: auto;
      & span:first-child {
          font-weight: bold;
          color: var(--text-color-sataa);
      }
      & span:last-child {
          font-style: italic;
      }    
    }
  }
}
/* ### Fin COORDINADORES ### */

/* ### PROFESORES ### */
.contenido__mobile.profesores {
    background-color: #fff;
    top: 170px;
    overflow: auto;
    padding: 3px 15px 0 15px;
    font-size: 1rem;
    text-align: justify;
    line-height: 1.1em;
    span.titulo {
      display: inline-block;
      font-family: 'Merriweather', serif;
      font-size: 1em;
      font-weight: bold;
      font-style: italic;
      color:var(--text-color-sataa);;
      margin: 0 0 .3rem .3rem;  
      /* text-decoration: underline; */
      line-height: 1em;
      border-bottom: 1px solid #00458F;
    } 
  .datos__personales {
    /* font-family: Arial, Helvetica, sans-serif; */
    &::after {
      content: "";
      clear: both; 
      display: table;
      }
      figure {
      float:left; margin:0;padding:0 0 10px 0;max-width:26%;height:auto;vertical-align:top;margin-right:20px;
      img {
        width: 100%; max-width: 130px; height:auto ; border: 1px solid #666; border-radius:5px; box-shadow: 5px 5px 2px #bbb; margin:0 15px 5px 0 ;
      }
      figcaption {
        margin-top:-.5rem; padding-left: 1rem;
        font-size:0.75em;max-width:200px;height:auto; 
        a {
          text-decoration: none;
          &::before {
            display: inline-block;
            height: 0.6rem;
            width: 0.6rem;  
            content: url(../../img/iconos/angles-left.svg);
            vertical-align: -1px;
            margin-right: 3px;
          }
        }
      }
    }
    ol li:first-child	{
      font-weight: bold;
      color: var(--text-color-sataa);
    }
  }
  ol.listado li ol {
    list-style-type: circle;
    font-size: 0.9rem;
    & li:last-child {
      padding-bottom: .5rem;
    }
  }
  .curso {
    display: block;
    position: relative;
    background-color: #ccc;
    color: var(--text-color-sataa);
    border: black 2px groove;
    max-width: fit-content;
    margin: 0 auto;
    padding: 5px;
    margin-bottom: 1rem;
    -webkit-box-shadow: 10px 10px 5px #888888;
            box-shadow: 10px 10px 5px #888888;
    font-size: 0.9em;
    z-index: 999999;
    & a {
      text-decoration: none;
      font-weight: normal !important;
      &:hover {
        font-weight: normal !important;
      }
    }
    & ol {
      padding: 0 .5rem 0 0  !important;
      margin-bottom: 0.5rem !important;
    }
    & li {
      list-style-type: none;
      &:first-child {
        font-weight: bold;
      }
    }
  }
}
.contenido__mobile.profesores span a:nth-child(2n+2)::after {
  display: inline-block;
  height: 0.9rem;
  width: 0.9rem;  
  content: url(../../img/Iconos/linkedin-in.svg);
  margin-left: 2px;
  vertical-align: -3px; 
}

/* todos los enlaces href="#" no mostrarán el icono pdf o linkedin */
.contenido__mobile.profesores span a[href="#"]::after {
  display: none;
  content: none;
}
.contenido__mobile.profesores span a[href*="https://portalcientifico.upm.es"]::after {
  display: inline-block;
  background-size: 20px 20px;
  height: 20px;
  width: 20px; 
  content: url(../../img/iconos/cv3.png);
  margin-right: 0;
  vertical-align: -3px;
}
.contenido__mobile.profesores {
  /* margin-bottom: 1ren ; Por defecto con Bootstrap */
  ol {
    font-size: 0.9em;
    text-align: justify;
    list-style-type: circle;
    padding: .5rem 0 0 1rem;
    margin-left: .5rem;
    > li {
      margin-left: .6rem;
    }
    li ol li {
      margin-left: 0;
    } 
  } 
  .experiencia__docente::before {	
    display: inline-block;
    height: 1rem;
    width: 1rem;  
    content: url(../../img/iconos/chalkboard-user_blue.svg);
    margin: .2rem .3rem 0 0;
  }
  .experiencia__profesional::before {	
    display: inline-block;
    height: 1rem;
    width: 1rem;  
    content: url(../../img/iconos/address-card-regular.svg);
    margin: .2rem .3rem 0 0;
  }
}

/* ### Fin PROFESORES ### */

/* ####### PLAN DE ESTUDIOS - CURSOS ####### */
div.anterior__siguiente {
	margin: 0 auto;
	margin-left: 0;
	padding-top: 15px;
	position: relative;
	width: 100%;
}
.curso__anterior a {
	padding-right: 0;
  padding-left: 1rem;
	&:hover {
		font-style: normal;
		color: #345082;
	}
	&::before {
		display: inline-block;
		height: 10px;
		width: 10px;  
		content: url(../../img/iconos/caret-right_blue.svg);
		vertical-align: -15px;
		margin-right: 10px;
		transform: rotate(180deg);
	}
}
.curso__siguiente a {
	margin-left: 1rem;
	&:hover {
		font-style: normal;
		color: #345082;
	}
	&::after {
		display: inline-block;
		height: 10px;
		width: 10px;  
		content: url(../../img/iconos/caret-right_blue.svg);
		vertical-align: -5px;
		margin-left: 10px;
	}
}

/* ####### FIN PLAN DE ESTUDIOS - CURSOS ##### */