/* CSS */
:root {
	--main-fondo1:#e3f3ff;
	--main-fondo2:#2F5277;
	--main-texto1:#2F5277;
	--main-texto2:#29a4db;
}	
/*-------------BASE---------------*/

#edicion{display:none;}
#inscripcion{display:none;}
#publicado{width:70px;}
@font-face {
font-family: raleway-regular;
src: url(../img/tipografias/raleway-regular.ttf) format("truetype");
}

@font-face {
font-family: raleway-italic;
src: url(../img/tipografias/raleway-italic.ttf) format("truetype");
}

@font-face {
font-family: raleway-bold;
src: url(../img/tipografias/raleway-bold.ttf) format("truetype");
}

@font-face {
font-family: raleway-bold;
src: url(../img/tipografias/raleway-bold.ttf) format("truetype");
}

.d-none {display: none}
.d-flex {display: flex}
img {margin: 0 auto}
p {font-family: raleway-regular}
h2 {font-family: raleway-regular}
/*.lista {list-style: circle; margin-left: 30px;}*/
h1 {font-family: raleway-regular}

.lista > li::before {    
	content: "•";
    color: grey;
    font-size: 39px;
    position: absolute;
    left: -18px;
    top: -17px;
}

/*------------------------------------------- ACCEDER (MENTOR,MENTEE,ADMINISTRADOR) ------------------------------------------------*/

.pantalla-inicio {height: 100vh}

.pantalla-inicio-fondo {
	width: 100%; 
	height: 100%; 
        background-image: url("../img/background.png");
         background-size: cover;
	display: flex;
	position: relative;
	justify-content: center;
}

.contenido {
	flex: 1;
	max-width: 700px; 
	margin: 0 auto; 
	display: flex; 
	flex-wrap: wrap;
	position: absolute;
	top: 175px;
	flex-direction: column;
	padding: 50px;
	background-color: white;
	border:1px solid rgba(0, 40, 100, 0.12);
background-color: rgba(255, 255, 255, 0.08);
  padding: 40px;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);

}

.contenido > * {flex: 1;}

.pantalla-inicio-logo {
	display: flex;
	flex: 1;
	justify-content: center;
}

.logo {
	max-width: 65%; 
	height: 51px;
	display: flex; 
	flex: 1;
}

.logo > img {max-width: 100%;}

.pantalla-inicio-login > h1 {
	font-family: raleway-regular;
    color: #C38F51;
    text-align:center;
    padding: 40px 0 10px 0;
    font-size: 24px;
    letter-spacing: 2px;
}

.campo-rellenable {
	padding: 7px 0;
	position: relative;
}

.input-item {
	position: absolute;
    padding: 5px;
    line-height: 0px;
    left: 5px;
    top: 8px;
    color: grey
}

input,
textarea,
select {
	font-family: raleway-regular;
  
    border: 0;
    padding: 5px;
    width: 100%;
    border: 1px solid grey;
    margin-top:10px;
    font-size:106%;
}
input{   height:36px;}
textarea {border-radius: 2px}
/*
input:active,
textarea:active,
input:focus,
textarea:active,
select:focus,
select:active {outline:none; border: 1; padding-left: 40px}

input::selection,
textarea::selection,
select::selection {border: 0; /*padding-left: 40px;}

.acceder-email,
.acceder-contrasena {padding-left: 40px}

.acceder-email:active,
.acceder-contrasena:active,
.acceder-email:focus,
.acceder-contrasena:focus,
.acceder-email::selection,
.acceder-contrasena::selection {padding-left: 40px}
*/
.boton {
	font-family: raleway-italic;
	font-weight: 600;
	border-radius: 25px;
    border: 0;
    padding: 5px;
    background: #0F2237;
    text-align: center;
    cursor: pointer;
    background: white;
	color: black;
	box-shadow: 0px 2px 0 #0F2237
}

.boton:hover {
	background: #333232;
    color: white;
	cursor: pointer;
	font-weight: 500
}

.login-acceder {margin-top: 40px; width: 100%}

.boton:active,
.boton:focus {outline:none; border: 0;}

.pantalla-inicio-crearusuario {
	padding: 30px 0 0 0
}

.pantalla-inicio-crearusuario > p {
	font-family: raleway-regular; 
	color: black;
	padding: 0 0 10px 0;
}

.recuperar-contrasena > a {
	color: black; 
	text-decoration: underline; 
	font-family: raleway-regular;
	font-size: 9px;
	text-align: right;
}
.recuperar-contrasena > a:hover {color: white}

.error-acceso {
	display: flex; 
	padding: 10px; 
	font-family: raleway-italic; 
	color: white;
	border-radius: 5px;
	margin-bottom: 15px;
	font-size: 14px;
	background: #19322F;
}

.pantalla-inicio-login > .error-acceso > p {font-family: raleway-italic}

.error-acceso > i {margin-right: 10px; color: #ffeb3b}

.crear-cuenta > p {font-family: raleway-italic; font-weight: 600}
.crear-cuenta > p:hover {font-weight: 500}

.cabecera > .nombre-usuario > a,
.cabecera > .log-out > a {display: flex; align-items: center;}
/*------------------------------------------- CREAR CUENTA (MENTOR,MENTEE) ------------------------------------------------*/

.pantalla-crearcuenta {height: 100vh}

.pantalla-crearcuenta-fondo {
	width: 100%; 
	height: 100%; 
	background: #ED1C24;
	display: flex;
	position: relative;
	justify-content: center;
}

.pantalla-crearcuenta-fondo .contenido {background: #ED1C24;}

.pantalla-crearcuenta-logo {
	display: flex;
	flex: 1;
	justify-content: center;
}

.pantalla-crearcuenta-formulario > h1 {
	font-family: raleway-regular;
    color: white;
    padding: 40px 0 10px 0;
    font-size: 24px;
    letter-spacing: 2px;
}

.pantalla-crearcuenta-formulario > form {display: flex; flex-wrap: wrap; justify-content: space-between;}

.pantalla-crearcuenta-formulario > form > div {flex: 45%}
.pantalla-crearcuenta-formulario > form > div:nth-child(even) {margin-left: 10px}

label {font-family: raleway-regular; color: white; margin-bottom: 10px}

.campo-rellenable > .usuario,
.campo-rellenable > .nombre,
.campo-rellenable > .ciudad,
.campo-rellenable > .apellidos,
.campo-rellenable > .formato,
.campo-rellenable > .tienda,
.campo-rellenable > .email,
.campo-rellenable > .contrasena,
.campo-rellenable > .area,
.campo-rellenable > .years,
.campo-rellenable > .alta,
.campo-rellenable > .institucion,
.campo-rellenable > .titulo,
.campo-rellenable > .numero
 {padding-left: 15px}



.crearcuenta-acceder {width: 200px; margin-top: 20px}

.pantalla-crearcuenta-formulario > form > div:last-of-type {flex: 0 49%}
.pantalla-crearcuenta-formulario > form > .crearcuenta-acceder {flex: 0 100%; margin: 20px 30% 0 30%;}






/*------------------------------------------- CREAR PERFIL (MENTOR,MENTEE) ------------------------------------------------*/

.pantalla-crearperfil {height: 100vh}

.pantalla-crearperfil-fondo {
	width: 100%; 
	height: 100%; 
	background: url(../img/imagenprueba.jpg) cover; 
	display: flex;
	position: relative;
	justify-content: center;
}

.pantalla-crearperfil-fondo > .contenido {max-width: 1200px; top: 50px}

.pantalla-crearperfil-logo {
	display: flex;
	flex: 1;
	justify-content: center;
}

.pantalla-crearperfil-formulario > h1 {
	font-family: raleway-bold;
    color: black;
    padding: 40px 0 10px 0;
    font-size: 24px;
    letter-spacing: 2px;
    text-align: center;
}

.pantalla-crearperfil-formulario > form > h2 {
	font-family: raleway-italic; 
	font-size: 18px; 
	color: #5E7775; 
	flex: 100%; 
	margin-bottom: 15px
}

.pantalla-crearperfil-formulario > form > h2 > p {display: inline-block; color: grey; font-size: 14px} 

.pantalla-crearperfil-formulario > form > div > .campo-rellenable > input,
.pantalla-crearperfil-formulario > form > div > .campo-rellenable > input::selection,
.pantalla-crearperfil-formulario > form > div > .campo-rellenable > input:active,
.pantalla-crearperfil-formulario > form > div > .campo-rellenable > input:focus,
.pantalla-crearperfil-formulario > form > div > .campo-rellenable > textarea,
.pantalla-crearperfil-formulario > form > div > .campo-rellenable > textarea::selection,
.pantalla-crearperfil-formulario > form > div > .campo-rellenable > textarea:active,
.pantalla-crearperfil-formulario > form > div > .campo-rellenable > textarea:focus,
.pantalla-crearperfil-formulario > form > div > .campo-rellenable > select,
.pantalla-crearperfil-formulario > form > div > .campo-rellenable > select::selection,
.pantalla-crearperfil-formulario > form > div > .campo-rellenable > select:active,
.pantalla-crearperfil-formulario > form > div > .campo-rellenable > select:focus,  
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > input,
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > input::selection,
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > input:active,
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > input:focus,
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > textarea,
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > textarea::selection,
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > textarea:active,
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > textarea:focus,
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > select,
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > select::selection,
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > select:active,
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > select:focus {border: 1px solid gray}

.pantalla-crearperfil-formulario > form > .campo-rellenable > label,
.pantalla-crearperfil-formulario > form > div > .campo-rellenable > label {color: #E52528}

.pantalla-crearperfil-formulario > form,
.pantalla-crearperfil-formulario > form > .contenedor-experienciapro,
.pantalla-crearperfil-formulario > form > .contenedor-formacion {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: space-between; 
	align-items: flex-end;
}

.pantalla-crearperfil-formulario > form > div {flex: 100%; display: flex; flex-wrap: wrap;}

.pantalla-crearperfil-formulario > form > .contenedor-experienciapro,
.pantalla-crearperfil-formulario > form > .contenedor-formacion > div {
	flex: 100%; 
	display: flex; 
	flex-wrap: wrap; 
	align-items: flex-end;
}

.pantalla-crearperfil-formulario > form > div > div {flex: 100%}
.pantalla-crearperfil-formulario > form > div:nth-child(even) {margin-left: 0}

.pantalla-crearperfil-formulario > form > div > .campo-rellenable > label,
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > label {
	font-family: raleway-regular; 
	color: black; 
	margin-bottom: 10px
}

.pantalla-crearperfil-formulario > form > div > div > div > .puesto,
.pantalla-crearperfil-formulario > form > div > div > div > .empresa,
.pantalla-crearperfil-formulario > form > div > div > div > .fecha-inicio,
.pantalla-crearperfil-formulario > form > div > div > .fecha-inicio,
.pantalla-crearperfil-formulario > form > div > div > div > .fecha-fin,
.pantalla-crearperfil-formulario > form > div > div > .fecha-fin,
.pantalla-crearperfil-formulario > form > div > div > div > .funciones,
.pantalla-crearperfil-formulario > form > div > div > .titulo,
.pantalla-crearperfil-formulario > form > div > div > .institucion,
.pantalla-crearperfil-formulario > form > div > div > .descripcion,
.pantalla-crearperfil-formulario > form > div > div > .idiomas,
.pantalla-crearperfil-formulario > form > div > div > .numero,
.pantalla-crearperfil-formulario > form > div > div > .subir-imagen {padding-left: 15px}

.pantalla-crearperfil-formulario > form > div > .campo-fecha-inicio,
.pantalla-crearperfil-formulario > form > div > div > .campo-fecha-inicio,
.pantalla-crearperfil-formulario > form > div > .campo-fecha-fin,
.pantalla-crearperfil-formulario > form > div > div > .campo-fecha-fin {max-width: 200px;}

.pantalla-crearperfil-formulario > form > div > .campo-fecha-inicio,
.pantalla-crearperfil-formulario > form > div > div > .campo-fecha-inicio {margin-right: 15px}

.pantalla-crearperfil-formulario > form > div > .campo-fecha-inicio > input,
.pantalla-crearperfil-formulario > form > div > div > .campo-fecha-inicio > input,
.pantalla-crearperfil-formulario > form > div > .campo-fecha-fin > input,
.pantalla-crearperfil-formulario > form > div > div > .campo-fecha-fin > input {padding: 2px 10px}

.pantalla-crearperfil-formulario > form > div > div > .campo-funciones {flex: 100%}

.pantalla-crearperfil-formulario > form > div > div > .campo-empresa,
.pantalla-crearperfil-formulario > form > div > div > .campo-institucion {margin: 0 15px 0 15px}



.pantalla-crearperfil-formulario > form > div > div > .campo-idiomas {flex: 10%;}
.pantalla-crearperfil-formulario > form > div > div > .campo-rellenable > select {padding: 4px 10px}

.contenedor-experienciapro,
.contenedor-formacion {display: flex; flex-wrap: wrap;}

.contenedor-experienciapro > div,
.contenedor-formacion > div {flex: 30%}

.crearperfil-acceder {width: 200px; margin-top: 20px}

.perfil-caja {margin-bottom: 30px; border: 1px solid #dadada; padding: 15px}

.pantalla-crearperfil-formulario .boton-mas {display: flex; justify-content: flex-end; margin: 10px 0 0 0; font-weight: 500}

.pantalla-crearperfil-formulario .boton {
	background: #C38F51;
	color: white; 
	font-family: raleway-italic; 
	letter-spacing: 1px; 
	width: 92px;
	font-weight: 500
}
.pantalla-crearperfil-formulario .boton:hover {background: #0F2237; color: white; box-shadow: 0px 2px 0 beige;}

.perfil-caja > .campo-rellenable > h3 {font-family: raleway-regular; font-size: 1em}

.perfil-competencias > .campo-rellenable,
.perfil-habilidades > .campo-rellenable {display: flex; align-items: center; flex: 0 33%}

.perfil-competencias > .campo-rellenable > h3,
.perfil-habilidades > .campo-rellenable > h3 {flex: 90%}

.perfil-competencias > .campo-rellenable > input,
.perfil-habilidades > .campo-rellenable > input {flex: 10%}

.boton-submit {display: flex; justify-content: center; margin-bottom: 40px}

.pantalla-crearperfil-formulario > form > .perfil-experienciapro,
.pantalla-crearperfil-formulario > form > .perfil-formacion {display: unset;}

.perfil-caja-editarperfil > .campo-rellenable {border: none}

.pantalla-crearperfil-formulario > form > .perfil-habilidades > .campo-rellenable {
	flex: 0 33%; 
	border: none; 
	padding: 0; 
	align-items: baseline; 
	padding: 7px 0 7px 0
}



/*---------------------------------------------------------- LAYOUT ------------------------------------------------------*/

.pantalla-layout {position: relative; height: 100vh}

.cabecera {
	height: 8vh; 
	width: 100%; 
	background: white; 
	display: flex; 
	align-items: center;
	font-family: raleway-regular;
	padding: 0 15px;
	position: absolute;
	box-shadow: 1px 0px 2px black;
	z-index: 50
}

.cabecera p,
.cabecera i {color:  #C38F51; padding: 0 7px}

.cabecera > .logo-cabecera {flex: 5}

.logo-cabecera > div {max-width: 130px}

.cabecera > .nombre-usuario,
.cabecera > .log-out {flex: 1; display: flex; cursor: pointer;}

.cabecera > .nombre-usuario:hover,
.cabecera > .log-out:hover {opacity: 0.8}

#desplegar-menu {display: none}

.contenedor-layout {display: flex; width: 100%; position: absolute; top: 8vh; height: 92vh}

.menu-principal {width: 300px;background:#0F2237;}

.boton-desplegar-menu-principal {padding: 15px; display: flex; justify-content: flex-end;}
.boton-desplegar-menu-principal i {font-size: 22px; color: white; cursor: pointer;}

.menu-principal > ul > li:nth-of-type(1):hover > a {position: relative;}

/*---- hover iconos ----*/

.icono-admin1:hover > a::after {
	content: 'Empresas';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin2:hover > a::after {
	content: 'Plantillas Horarios';
	position: absolute;
	left: 49px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin3:hover > a::after {
	content: 'Empleados';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin4:hover > a::after {
	content: 'Laboral';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin5:hover > a::after {
	content: 'Administradores';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin6:hover > a::after {
	content: 'Petición Candidatos';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin7:hover > a::after {
	content: 'Candidaturas';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}

.icono-admin8:hover > a::after {
	content: 'Anexos contratos';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin9:hover > a::after {
	content: 'Datos Identificativos';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin10:hover > a::after {
	content: 'Tutores';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin11:hover > a::after {
	content: 'Cuestionario Ley 10/2022';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin12:hover > a::after {
	content: 'Cuestionario Ley 15/2022';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin13:hover > a::after {
	content: 'Cambiar contraseña';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin14:hover > a::after {
	content: 'Medidas Ley 4/2023';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-admin15:hover > a::after {
	content: 'Cuestionario Ley 4/2023';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}

.icono-rrhh1:hover > a::after {
	content: 'Empleados';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-rrhh2:hover > a::after {
	content: 'Gestores';
	position: absolute;
	left: 50px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-rrhh3:hover > a::after {
	content: 'Centros';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-rrhh4:hover > a::after {
	content: 'Departamentos';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-rrhh5:hover > a::after {
	content: 'Mi perfil';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}

.icono-rrhh6:hover > a::after {
	content: 'Control Horario';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}

.icono-rrhh7:hover > a::after {
	content: 'Área de conocimiento';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}

.icono-mentor1:hover > a::after {
	content: 'Peticiones de mentees';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	display: inline-block;
	z-index: 50;

}
.icono-mentor2:hover > a::after {
	content: 'Mis mentees';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-mentor3:hover > a::after {
	content: 'Calendario';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-mentor4:hover > a::after {
	content: 'Aceptar/Rechazar citas';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-mentor5:hover > a::after {
	content: 'Repositorio';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-mentor6:hover > a::after {
	content: 'Chat';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.icono-mentor7:hover > a::after {
	content: 'Área de conocimiento';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;

}
.boton-desplegar-menu-principal i:hover {color: #C38F51}

.menu-principal li a {
	font-family: raleway-regular; 
	color: white; 
	display: flex; 
	padding: 5px; 
	align-items: center; 
	border-bottom: 1px solid white
}

.menu-principal li:hover {background: #0F2237}

.menu-principal li > i,
.menu-principal li > a > i,
.menu-principal li > a > p {padding: 10px}

.buscador-menu {
    height: 3vh;
    width: 90%;
    display: flex;
    align-items: center;
    margin-left: 10px
}

#icono-buscador {cursor: pointer; display: none}
#icono-buscador:hover {color: #0F2237}

.menu-principal .sin-borde {border: none}

.menu-principal li:last-child > i {color: white}
.menu-principal li:last-child > div > p {font-family: raleway-regular; color: white}
.menu-principal li:last-child {margin-top: 15px; display: flex; align-items: center; padding: 5px;}

.menu-principal li:last-child:hover {background: #0F2237}

.contenedor-principal {flex: 8; background: #bed2ee}





/*------------------------------------------------------ VISUALIZAR PERFIL (MENTOR,MENTEE) -----------------------------------------------*/

.editar-vperfil {display: flex; align-items: flex-end;}
.editar-vperfil > a {text-align: right; color: #ED1C24; width: 100%; font-size: 22px}
.editar-vperfil > a:hover {color: grey}

.contenedor-vperfil {display: flex; min-height: 100vh}

.contenedor-vperfil-ficha {flex: 0 25%; background: white; padding: 15px; }

.contenedor-vcompetencias {flex: 0 75%; overflow: auto;}

.vperfil-imagen {padding: 15px 0}
.vperfil-imagen > img {border-radius: 100%; width: 200px; height: 200px}

.vperfil-usuario a  {display: flex; justify-content: center;}
.vperfil-usuario > a > p {
	font-family: courgette; 
	color: #ED1C24; 
	font-size: 22px; 
	text-align: center; 
	padding: 0 5px
}

.vperfil-usuario > a > p:hover {color: black}

.vperfil-roll > p {text-align: center; font-family: raleway-regular; padding: 10px 0; font-size: 22px}

.vperfil-metadatos {
	display: flex;
    margin-top: 30px;
    padding: 15px;
}

.vperfil-metadatos > ul > li {display: flex; padding: 5px; align-items: center; color: #0F2237}

.vperfil-metadatos > ul > li > i {margin-right: 7px; flex: 0 10%; text-align: center; width: 35px}

.vperfil-descripcion {padding: 15px}

.contenedor-vcompetencias {
	display: flex;
    flex-wrap: wrap;
    padding: 7px;
    align-content: start;
    background: #e8caca;
}

.vcompetencias-ficha {
	flex:0 50%; 
	background: white; 
	padding: 20px; 
	box-shadow: inset 0 0 0 7px #E8CACA;
}

.vcompentenicas-ficha-datos {padding-top: 15px}
.vcompentenicas-ficha-datos > ul > li {font-family: raleway-regular; margin: 7px 0}

.vcompentencias-ficha-cabecera {display: flex; align-items: center;}
.vcompentencias-ficha-cabecera > div > i {font-size: 26px; color: #ED1C24}
.vcompetencias-ficha-titulo {color: #ED1C24; margin-left: 10px}
.vcompetencias-ficha-titulo > h2 {font-size: 18px; letter-spacing: 1px}

.boton-mostrarmas {display: flex;justify-content: flex-end;}
.boton-mostrarmas-exprofesional {
	max-width: 150px; 
	padding: 5px 15px;
	background: white;
    border: 1px solid teal;
    color: teal;
    box-shadow: none;
    font-family: raleway-regular;
}

.boton-mostrarmas-exprofesional:hover {background: teal}
.boton-mostrarmas-exprofesional:hover {color: white !important}
.boton-mostrarmas-exprofesional a:hover {color: white}

.vcompentenicas-ficha-datos > .lista > li {position: relative; margin-left: 25px;}

.fechas-exprofesional {display: flex; flex-wrap: wrap; flex-direction: flex-start}
.fechas-exprofesional > p:nth-of-type(1) {margin-right: 20px}

.vcompentenicas-ficha-exprofesional-datos{display:none;}

#e1{display:block;}
.vcompentenicas-ficha-habilidades {order: 6}


/*---------------------------------------------------- EDITAR PERFIL (MENTOR,MENTEE) ----------------------------------------------*/
.contenedor-vperfil-editar {background: #f8f8f8}
.contenedor-editarperfil-ficha {display: none}
.contenedor-editar-perfil {flex: 100%}

.editar-perfil {padding: 15px; max-width: 1200px; margin: 0 auto}
.editar-perfil > h1 {text-align: left; font-family: raleway-regular; font-size: 28px}

.perfil-caja-editarperfil {background: white; border: none; box-shadow:  1px 1px 2px grey;}

.perfil-caja-editarperfil > div > div {flex: 0 100%; margin-right: 10px}

.editar-perfil > form > h2 > p {font-size: 14px; display: inline-block; color: black}

.perfil-caja-editarperfil > .contenedor-experienciapro > .boton-mas {flex: 100%}

.contenedor-experienciaproeditar {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: start;
	flex: 100%; 
	display: flex; 
	flex-wrap: wrap;
	align-items: flex-end;
}

.contenedor-experienciaproeditar > div {flex: 30%}

.perfil-caja-editarperfil > .contenedor-formacion > div {flex: 0 38%}


.vperfil-metadatos-area > p:nth-of-type(2) {margin-left: 10px}

.perfil-caja > .campo-rellenable {
	border-left: 2px solid #f8f8f8; 
	padding: 15px 15px 15px 5px; 
	border-bottom: 2px solid #f8f8f8; 
	flex: 0 50%
}

.perfil-caja > .campo-rellenable:nth-child(odd) {padding:15px 15px 15px 0; border-left: none}
.perfil-caja > .campo-rellenable > input:nth-of-type(1) {flex: 5%}
.perfil-caja > .campo-rellenable > h3 {flex: 70%; padding: 10px 0 0 10px}
.perfil-habilidades > .campo-rellenable > h3 {padding: 0}
.perfil-caja > .campo-rellenable > input:nth-of-type(2) {flex: 0 70px}

.perfil-descripcion > .campo-rellenable,
.perfil-imagen > .campo-rellenable {flex: 100%;}

.pantalla-crearperfil-formulario > form > .perfil-contrasena > div {flex: 0 30%}

.pantalla-crearperfil-formulario > form > .perfil-descripcion > .campo-rellenable,
.pantalla-crearperfil-formulario > form > .perfil-imagen > .campo-rellenable,
.pantalla-crearperfil-formulario > form > .perfil-contrasena > .campo-rellenable {border: none; padding: 7px 0 7px 0}


/*---------------------------------------------------- ELEGIR TUTOR (MENTEE) -------------------------------------------------*/

/*------------------------ cambiar fondo ------------------------------*/

/**/

.contenedor-vperfil-editar,
.contenedor-principal {
	
	background-size: cover;}







/*------------------------ cambiar fondo ------------------------------*/

.cabecera-filtros {background: #f8f8f8;}
.cabecera-filtros > h1 {font-size: 24px}



.cajas-filtros-tutores {display: flex; flex-wrap: wrap; align-items: flex-end;}

.cajas-filtros-tutores > div > input {border: 1px solid gray}

.cajas-filtros-tutores > div {
	flex: 0 20%;
    padding: 6px 10px 6px 0;
}

.cajas-filtros-tutores > div > label {color: black}

.ms-choice {border: 1px solid gray; border-radius: 15px; height: 31px;}
.ms-choice > div {right: 3px; top: 2px}

.ms-drop ul > li label {width: 20px; color: black}

.ms-parent {width: 100%; min-width: 300px}

.cajas-filtros-tutores > .boton-filtrar {flex: 0 10%}
.boton-filtrar {
    justify-content: flex-start;
    margin: 0;
    position: relative;
}

.boton-filtrar > .boton-enviar {
	background: red; 
	box-shadow: 3px 0 0 #0F2237; 
	color: white; 
	font-family: raleway-italic;
	font-weight: 500; 
	padding: 7px 15px;
	max-height: 40px
}
.boton-filtrar > .boton-enviar:hover {background: #707070; box-shadow: 3px 0 0 black;}
.cajas-filtros-tutores > .mensaje-alerta {flex:0 40%; margin-top: 15px;}

.cajas-filtros-tutores > .mensaje-alerta > i {margin-left: 10px;}

.cajas-filtros-tutores > .mensaje-alerta > p {font-family: raleway-italic}

.borde-area {border: 1px solid grey;}

/* -------------------  data-tables ------------------------*/

.contenedor-layout {height: auto; min-height: 92vh}

div.datatables-elegirtutor {width: 95%; margin: 0 auto; max-width: 1500px; padding: 0 15px}

.fondo-blanco {background: white}

a:hover {text-decoration: none}

.pantalla-elegirtutor p {margin-bottom: 0}
.pantalla-elegirtutor input {line-height: initial;}

.pantalla-peticiones p {margin-bottom: 0}
.pantalla-peticiones input {line-height: initial;}

.dataTables_wrapper {margin: 30px 0}

div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {color: black}

table.dataTable thead .sorting:before, 
table.dataTable thead .sorting_asc:before, 
table.dataTable thead .sorting_desc:before, 
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting:after, 
table.dataTable thead .sorting_asc:after, 
table.dataTable thead .sorting_desc:after, 
table.dataTable thead .sorting_asc_disabled:after, 
table.dataTable thead .sorting_desc_disabled:after {display: none}

.dataTables_wrapper .dataTables_paginate .paginate_button {padding: 0;}
.dataTables_wrapper .dataTables_paginate .paginate_button > a:hover {background:#dadada; color: black}
.dataTables_wrapper .dataTables_paginate .paginate_button > a::selection,
.dataTables_wrapper .dataTables_paginate .paginate_button > a:active {outline: none}



.dataTables_wrapper .dataTables_paginate .paginate_button:active {background: white; border: 0}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {background: white; border: 0}

table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, 
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {background: #19322F;}

label {margin-bottom: 0}

table.dataTable thead>tr>th.sorting_asc, 
table.dataTable thead>tr>th.sorting_desc, 
table.dataTable thead>tr>th.sorting, 
table.dataTable thead>tr>td.sorting_asc, 
table.dataTable thead>tr>td.sorting_desc, 
table.dataTable thead>tr>td.sorting {
	color: black; 
	font-family: Ubuntu Regular,sans-serif; 
	font-weight: 400;
	border-bottom: 2px solid #0F2237;
    border-top: 2px solid white;
color:#0F2237;
}

table.dataTable.no-footer {border-bottom: 2px solid #0F2237;}

.table-striped tbody tr:nth-of-type(odd) {background:#d2e0f3;}

.page-item.active .page-link {background: #C38F51; border: #C38F51}

.page-link {color: #0F2237}

table.dataTable.nowrap td {white-space: normal;}

td > a  {font-family: raleway-italic; color: #0F2237; text-decoration: underline; font-size: 14px}
td > a:hover {color: black}


table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {font-family: raleway-regular; font-weight: 600; font-size: 14px}

.centrar {max-width: 1500px; margin: 0 auto; padding: 15px}

.boton-elegirtutor {background: #0F2237; cursor: pointer; border-radius: 5px; padding: 5px; box-shadow: 0px 2px 0 #0F2237}
.boton-elegirtutor > a {color: black}

.boton-elegirtutor:hover {box-shadow: 0px 2px 0 black}
.boton-elegirtutor:hover > a {color: white}

/*------------------------------------- PANTALLA CALENDARIO (MENTOR,MENTEE) ---------------------------------------*/

.fondo-gris {background: #f8f8f8}

.calendario {max-width: 1200px; margin: 0 auto; padding: 15px; margin-bottom: 30px}

.fc-toolbar h2 {font-family: courgette; color: #19322F; font-weight: 300}


.centrar-calendario {margin: 0 auto; max-width: 1200px; padding: 15px}

.calendario.fc-unthemed th,
.calendario.fc-unthemed td,
.calendario.fc-unthemed thead,
.calendario.fc-unthemed tbody,
.calendario.fc-unthemed .fc-divider,
.calendario.fc-unthemed .fc-content,
.calendario.fc-unthemed .fc-popover,
.calendario.fc-unthemed .fc-list-view,
.calendario.fc-unthemed .fc-list-heading td {border: 1px solid #E8CACA}


.calendario.fc-unthemed td {background: white}

.calendario.fc-unthemed td.fc-today {background: #E8CACA; opacity: 0.7; color: red}

.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number {font-family: raleway-bold}

.calendario.fc-unthemed th {
	font-family: raleway-italic;
    color: red;
    padding:10px 0;
}

.calendario.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number {float: left;}

.pantalla-crearperfil-formulario h1,
.editar-perfil h1,
.centrar h1,
.centrar-calendario h1,
.pantalla-entrevista-formulario h1 {
	font-size: 30px; 
	font-family: raleway-regular; 
	color: #0F2237; 
	text-transform: uppercase; 
	letter-spacing: 4px;
	text-align: left;
	font-weight: 500
}

.fc-view-container * {font-family: raleway-bold}

.fc-button-group > .fc-button:not(:last-child),
.fc-toolbar > * > :not(:first-child),
.fc-button-group > .fc-button:not(:first-child) {font-family: raleway-italic; background: white; color: black}

.calendario.fc-button-primary:disabled {background: #dadada}

.cabecera-calendario {display: flex; justify-content: space-between;}
.cabecera-calendario > * {flex: 0 70%}

.boton-anadircita {width: 100%; margin-bottom: 0; justify-content: flex-end;}
.boton-anadircita > .boton {padding: 0 30px; background: red; color: white; border-radius: 10px}
.boton-anadircita > .boton:hover {background: #19322F}

.contenedor-calendario {position: relative;} 
.anadir-evento {position: absolute; background: rgba(0,0,0,0.5); width: 100%; height: 100%; z-index: 500; top: 0; left: 0}

.calendario.fc-day-grid-container {overflow: hidden;}

.cabecera-ficha-anadirevento {display: flex; justify-content: space-between;}

.icono-cerrar-anadirevento {text-align: right; font-size: 25px}
.icono-cerrar-anadirevento:hover {color: red}

.anadir-evento {display: none}

.ficha-evento-contenido {
	max-width: 800px; 
	background: white; 
	border-radius: 5px; 
	margin: 0 auto; 
	margin-top: 200px;
	padding: 15px;
	box-shadow: 0px 0 9px 0px #424242
}

.ficha-evento-contenido > form > .campo-rellenable > .fechahora-inicio {margin-right: 15px}

h3 {font-family: raleway-italic; margin-bottom: 10px}

.ficha-evento-contenido > form > .campo-rellenable > .fechahora-inicio > input,
.ficha-evento-contenido > form > .campo-rellenable > .fechahora-fin > input,
.ficha-evento-contenido > form > .campo-rellenable > textarea {border: 1px solid grey}

.ficha-evento-contenido > form > .cabecera-ficha-anadirevento > h2 {
	color: red; 
	margin-bottom: 15px; 
	border-bottom: 1px solid red; 
	font-family: raleway-regular;
	letter-spacing: 4px;
	text-transform: uppercase;
	font-weight: 300
}

.ficha-evento-fechahora {display: flex;}
.ficha-evento-fechahora > * {flex: 0 50%}
.ficha-evento-fechahora > input:nth-of-type(1) {margin-right: 15px}

.boton-anadircita > .boton {padding: 7px 15px; font-family: raleway-italic; font-weight: 500}

#cerrar-ficha-evento {cursor: pointer;}

.calendario.fc-unthemed .fc-content {border: 0; background: #19322F;}
.calendario.fc-unthemed .fc-content > * {font-family: raleway-italic; font-weight: lighter;}

tr > td > .fc-day-grid-event {background: #19322F; border: 0; padding: 7px}

.fc-event {background: red}

.fc-time-grid .fc-event, .fc-time-grid .fc-bgevent {background: #19322F; border: 1px solid #19322F}

.calendario.fc-view-container * {font-family: raleway-italic; font-weight: lighter;}

.calendario.fc-event-dot {background: red}

.seleccionar-mismentees,
.seleccionar-mismentees:focus,
.seleccionar-mismentees:active,
.seleccionar-mismentees::selection {border: 1px solid grey}

h4 {font-family: raleway-italic; color: black; text-align: center; margin-bottom: 20px; background: #E8CACA; margin-top: 15px}


/*---------------------------------- PETICIONES DE MENTEES (MENTOR) --------------------------------*/

.boton-aceptarmentee {background: #0F2237; cursor: pointer; border-radius: 5px; padding: 5px; box-shadow: 0px 2px 0 #0F2237}
.boton-aceptarmentee > a {color: black}

.boton-rechazarmentee {background: #ee9090; cursor: pointer;border-radius: 5px}
.boton-rechazarmentee > a {color: black}

.boton-aceptarmentee:hover,
.boton-rechazarmentee:hover {box-shadow: 0px 2px 0 black}

.boton-aceptarmentee:hover > a,
.boton-rechazarmentee:hover > a {color: white}

/*--------------------------------- MIS MENTEES (MENTOR) ---------------------------------------------*/

.mini-imagen-mentee > img {border-radius: 100%; width: 75px; height: 75px}

table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, 
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
	font-family: raleway-regular;
	font-size: 20px;
	background: #19322F;
	color: white
}

.tabla-mismentees.table-striped tbody tr:nth-of-type(odd) {background: #0F223759}

.tabla-mismentees.dataTable.no-footer {border-bottom: 2px solid #19322F}

.tabla-mismentees.dataTable thead>tr>th.sorting_asc,
.tabla-mismentees.dataTable thead>tr>th.sorting_desc,
.tabla-mismentees.dataTable thead>tr>th.sorting,
.tabla-mismentees.dataTable thead>tr>td.sorting_asc,
.tabla-mismentees.dataTable thead>tr>td.sorting_desc,
.tabla-mismentees.dataTable thead>tr>td.sorting {border-bottom: 2px solid #19322F; color: #19322F}

.tabla-mismentees a {color: teal}

/*-------------------------------------------- ACEPTA / RECHAZAR CITAS (MENTOR,MENTEE) ---------------------------------*/

.boton-aceptar-cita {max-width:130px !important;background: #C38F51; cursor: pointer; border-radius: 5px; padding: 1px; box-shadow: 0px 2px 0  #C38F51;max-width:180px;line-height:2.5;height:37px;}
.boton-aceptar-cita > a {color: white;}

.boton-rechazar-cita {background: #ee9090; cursor: pointer;border-radius: 5px}
.boton-rechazar-cita > a {color: black}

.boton-aceptar-cita:hover,
.boton-rechazar-cita:hover {box-shadow: 0px 2px 0 black}

.boton-aceptar-cita:hover > a,
.boton-rechazar-cita:hover > a {color: white}

.pantalla-citas .table-bordered th,
.pantalla-citas .table-bordered td {border: 0;}

.tabla-citas.table-striped tbody tr:nth-of-type(odd) {background: #f8f8f8}

/*----------------------------------- CREAR USUARIO (ADMINISTRACIÓN)----------------------------------------*/

.contenedor-nuevousuario {display: flex;}
.contenedor-nuevousuario > div {flex: 0 50%}

/*------------------------------------ ACEPTAR/RECHAZAR MENTORES (ADMINISTRACIÓN)--------------------------------------*/
/*------------------------------------ VISUALIZAR PERFIL MENTEE --------------------------------------*/


.visualizar-mentee .vperfil-usuario > a > p,
.visualizar-mentee .contenedor-vcompetencias i,
.visualizar-mentee .contenedor-vcompetencias h2 {color: var(--main-texto1)}


.visualizar-mentee .vcompetencias-ficha {box-shadow: inset 0 0 0 7px var(--main-fondo2); min-height: 250px;}

.visualizar-mentee .contenedor-vcompetencias {background: var(--main-fondo2);}


/*---------------------------------------- LISTADO DE MENTORES Y MENTEES -----------------------------------------------*/

.boton-deshabilitar > a {color: black}

.modal-title {background: transparent;}




/*----- ordenar crear perfil (2/4/2020)------------*/

.pantalla-crearperfil .pantalla-crearperfil-formulario > form > h2 {display: flex;}

.pantalla-crearperfil .pantalla-crearperfil-formulario > form > h2:nth-of-type(1) {order: 1}
.pantalla-crearperfil .perfil-experienciapro {order: 2}

.pantalla-crearperfil .pantalla-crearperfil-formulario > form > h2:nth-of-type(2) {order: 3}
.pantalla-crearperfil .perfil-formacion {order: 4}

.pantalla-crearperfil .pantalla-crearperfil-formulario > form > h2:nth-of-type(3) {order: 9}
.pantalla-crearperfil .perfil-competencias {order: 6}

.pantalla-crearperfil .pantalla-crearperfil-formulario > form > h2:nth-of-type(4) {order: 5}
.pantalla-crearperfil .perfil-competencias-digitales {order: 8}

.pantalla-crearperfil .pantalla-crearperfil-formulario > form > h2:nth-of-type(5) {order: 6}
.pantalla-crearperfil .perfil-habilidades {order: 10}

.pantalla-crearperfil .pantalla-crearperfil-formulario > form > h2:nth-of-type(6) {order: 6}
.pantalla-crearperfil .perfil-descripcion {order: 12}

.pantalla-crearperfil .pantalla-crearperfil-formulario > form > h2:nth-of-type(7) {order: 13}
.pantalla-crearperfil .perfil-imagen {order: 14}

.pantalla-crearperfil .boton-submit {order: 15}


/*----- ordenar editar perfil (2/4/2020)------------*/

.editar-perfil > form > h2 {display: flex;}

.editar-perfil > form > h2:nth-of-type(1) {order: 1}
.editar-perfil .perfil-caja:nth-of-type(1) {order: 2}

.editar-perfil > form > h2:nth-of-type(2) {order: 3}
.editar-perfil .perfil-experienciapro {order: 4}

.editar-perfil > form > h2:nth-of-type(3) {order: 5}
.editar-perfil .perfil-formacion {order: 6}

.editar-perfil > form > h2:nth-of-type(4) {order: 13}
.editar-perfil .perfil-competencias {order: 8}

.editar-perfil > form > h2:nth-of-type(5) {order: 7}
.editar-perfil .perfil-competencias-digitales {order: 10} 

.editar-perfil > form > h2:nth-of-type(6) {order: 9}
.editar-perfil .perfil-habilidades {order: 14}

.editar-perfil > form > h2:nth-of-type(7) {order: 11}
.editar-perfil .perfil-competencias-tecnicas {order: 12}



.editar-perfil > form > h2:nth-of-type(8) {order: 15}
.editar-perfil .perfil-imagen {order: 16}

.editar-perfil > form > h2:nth-of-type(9) {order: 17}
.editar-perfil .perfil-contrasena {order: 18}

.editar-perfil .boton-submit {order: 19}

.anadeperfil > form > h2:nth-of-type(1) {order: 1}
.anadeperfil .perfil-caja:nth-of-type(1) {order: 2}

.anadeperfil > form > h2:nth-of-type(2) {order: 3}
.anadeperfil .perfil-caja:nth-of-type(2) {order: 4}

.anadeperfil > form > h2:nth-of-type(3) {order: 5}
.anadeperfil .perfil-caja:nth-of-type(3) {order: 6}

.anadeperfil > form > h2:nth-of-type(4) {order: 7}
.anadeperfil .perfil-caja:nth-of-type(4) {order: 8}

.anadeperfil > form > h2:nth-of-type(5) {order: 13}
.anadeperfil .perfil-caja:nth-of-type(5) {order: 14}

.anadeperfil > form > h2:nth-of-type(6) {order: 9}
.anadeperfil .perfil-caja:nth-of-type(6) {order: 10}

.anadeperfil > form > h2:nth-of-type(7) {order: 11}
.anadeperfil .perfil-caja:nth-of-type(7) {order: 12}

.anadeperfil > form > h2:nth-of-type(8) {order: 12}
.anadeperfil .perfil-caja:nth-of-type(8) {order: 12}

.anadeperfil > form > h2:nth-of-type(9) {order: 17}
.anadeperfil .perfil-caja:nth-of-type(9) {order: 18}


/*------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
--------------------------------- CORTE RESPONSIVE -----------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 1400px) {

#cerrar-menu {display: flex;}
#desplegar-menu {display: none}
.menu-principal {width: 300}
.li-menu {display: flex}

}

@media screen and (max-width: 1399px) {

#cerrar-menu {display: none}
#desplegar-menu {display: flex}
.menu-principal {width: 50px}
.li-menu {display: none}

}

@media screen and (max-width: 1024px) {

.contenedor-vperfil {flex-direction: column;}
.contenedor-vperfil-ficha {display: flex; flex-wrap: wrap; align-items: center;}

.contenedor-vperfil-ficha > .vperfil-usuario {flex: 0 50%; order: 2}
.contenedor-vperfil-ficha > .vperfil-roll {flex: 0 50%; order: 3}
.contenedor-vperfil-ficha > .vperfil-descripcion {flex: 0 100%; order: 6}
.contenedor-vperfil-ficha > .editar-vperfil {flex: 0 100%; order: 1}
.contenedor-vperfil-ficha > .vperfil-imagen {flex: 0 50%; order: 4}
.contenedor-vperfil-ficha > .vperfil-metadatos {margin-top: 0; flex: 0 50%; order: 5}

.contenedor-vperfil-editar > .contenedor-vperfil-ficha {display: none}

}


@media screen and (max-width: 770px) {

.cabecera p {display: none}

.menu-principal {width: 100%; display: flex; align-items: center;}
.boton-desplegar-menu-principal {display: none}
.contenedor-layout {flex-direction: column;}
.menu-principal > ul {display: flex; width: 100%; margin-bottom: 0; width: 100%}
.menu-principal > ul > li > a {border-bottom: 0}
.menu-principal > ul > .sinborde {display: none}
.menu-principal li:last-child {display: none}

.perfil-caja-editarperfil > div > div {flex: 100%}
.perfil-caja-editarperfil > .contenedor-formacion > div {flex: 100%}
.perfil-caja-editarperfil > div > div {margin-right: 0}
.pantalla-crearperfil-formulario > form > .perfil-contrasena > .campo-rellenable {flex: 100%}

.cajas-filtros-tutores > div {flex: 100%; padding-right: 0}

.ficha-evento-contenido {width: 400px; margin-top: 100px}
.ficha-evento-fechahora {flex-wrap: wrap;}
.ficha-evento-contenido > form > .campo-rellenable > .fechahora-inicio {margin-right: 0; margin-bottom: 10px}
.ficha-evento-fechahora > * {flex: 0 100%}

}

@media screen and (max-width: 650px) {

.contenedor-vperfil-ficha > .vperfil-usuario {flex: 0 100%; order: 2}
.contenedor-vperfil-ficha > .vperfil-roll {flex: 0 100%; order: 3}
.contenedor-vperfil-ficha > .vperfil-descripcion {flex: 0 100%; order: 6}
.contenedor-vperfil-ficha > .editar-vperfil {flex: 0 100%; order: 1}
.contenedor-vperfil-ficha > .vperfil-imagen {flex: 0 100%; order: 4}
.contenedor-vperfil-ficha > .vperfil-metadatos {margin-top: 0; flex: 0 100%; order: 5}
.contenedor-vperfil-ficha > .vperfil-metadatos > ul {margin: 0 auto}

.vcompetencias-ficha {flex: 100%}



}

@media screen and (max-width: 450px) {

.pantalla-crearcuenta-formulario > form > div {flex: 100%}
.pantalla-crearcuenta-formulario > form > div:nth-child(even) {margin-left: 0}
.pantalla-crearcuenta-formulario > form > div:last-of-type {flex: 100%}
.pantalla-crearcuenta-fondo .contenido {top: 20px}

.perfil-experienciapro .contenedor-experienciapro > div,
.perfil-experienciapro .contenedor-formacion > div {flex: 100%}

.pantalla-crearperfil-formulario > form > div > div > .campo-empresa,
.pantalla-crearperfil-formulario > form > div > div > .campo-institucion {margin: 0}

.perfil-formacion > div > .campo-rellenable {flex: 100%}

.pantalla-crearperfil-formulario > form > .perfil-habilidades > .campo-rellenable {flex: 100%}
.pantalla-crearperfil-formulario .perfil-competencias > .campo-rellenable {flex: 100%}

.perfil-caja > .campo-rellenable:nth-child(even) {border-left: 0; padding-left: 0}

.perfil-caja > .campo-rellenable > h3 {padding: 10px 0 0 10px}

.pantalla-crearperfil-formulario h1 {font-size: 22px; text-align: center;} 
.editar-perfil h1 {font-size: 22px; text-align: center;}
.centrar h1 {font-size: 22px; text-align: center;}
.centrar-calendario h1 {font-size: 22px; text-align: center;}

.fc-toolbar.fc-header-toolbar {display: flex; flex-wrap: wrap;}
.fc-toolbar.fc-header-toolbar > div {flex: 0 100%;}

.fc-left {order: 2; margin-bottom: 10px}
.fc-center {order: 1; margin-bottom: 20px}
.fc-right {order: 3}

.ficha-evento-contenido {width: 300px; margin-top: 100px}
.ficha-evento-fechahora > * {flex: 0 100%}

}

/* ------------------------- ENTREVISTA -----------------------------*/


.pantalla-entrevista {height: 100vh}

.pantalla-entrevista-fondo {
	width: 100%; 
	height: 100%; 
	background: url(../img/imagenprueba.jpg) cover; 
	display: flex;
	position: relative;
	justify-content: center;
}

.pantalla-entrevista h1 {padding:40px 0 10px 0}

.pantalla-entrevista-fondo > .contenido {max-width: 1200px; top: 50px}

.pantalla-entrevista-logo {
	display: flex;
	flex: 1;
	justify-content: center;
}

.pantalla-entrevista-formulario > form > h2 {
	font-family: raleway-italic;
    font-size: 18px;
    color: #E52528;
    flex: 100%;
    margin-bottom: 15px;
}

.contenedor-test > .campo-rellenable {display: flex; align-items: flex-end;}
.contenedor-test > .campo-rellenable > div > label {color: black}

.test-caracteristicas-respuesta {margin-left: 15px}

.test-preguntas > .contenedor-test > .campo-rellenable {flex-direction: column; align-items: flex-start; margin-bottom: 15px}
.test-preguntas > .contenedor-test > .campo-rellenable > p {margin-bottom: 15px}
.test-preguntas > .contenedor-test > .campo-rellenable > label {
	color: black;
}

.test-preguntas-respuesta {display: flex; align-items: center;}
.test-preguntas-respuesta > input {width: 50px}

.pantalla-inicio-fondo .boton,
.pantalla-entrevista-formulario .boton { background: red; color: white }

.pantalla-entrevista-formulario .boton {padding: 10px 30px}

/*------ visualizar entrevista ---------*/

.visualizar-entrevista {padding: 30px; background: #f8f8f8}

.test-caracteristicas-visualizar-respuesta,
.test-preguntas-visualizar-respuesta {color: red; font-family: raleway-italic}

.test-caracteristicas-visualizar-respuesta {margin-left: 15px}

.visualizar-entrevista .perfil-caja {background: white; border: 0}

.visualizar-entrevista h1 {margin-bottom: 15px}
.visualizar-entrevista h2 {font-family: raleway-italic; color: #333232; font-size: 18px; margin-bottom: 10px}

.test-visualizar-descripcion {color: red}

/*---------------------------- respuesta ok para el mentor -----------------------------*/

.pantalla-respuesta-ok {background: #333233; border-radius: 15px; padding: 15px; margin: 30px 0 15px 0}

.pantalla-respuesta-ok h1 {font-family: raleway-regular; margin: 15px 0; color: white; align-items: center;}

.pantalla-respuesta-ok p {font-family: raleway-italic; margin-bottom: 15px; color: white; align-items: center;}

.pantalla-empezar-respuesta .boton:hover {background: #333232; }

.contenedor-vperfil-editar > .contenedor-vcompetencias {background: transparent;}

.modal-title{display:none;}

table{width:100%}

.puestoactual{clear:both;flex:100%;margin-bottom:15px;font-family: raleway-italic;font-size: 18px;color: #E52528;flex: 100%;margin-bottom: 15px}

.flexi{flex:100% !important;}
.hide{visibility: hidden;}
.visible{visibility: visible;}
.centrar-repositorio {margin: 0 auto; max-width: 1500px; padding: 15px; width:89%;}
.mensaje {border: 1px solid gray;}
.mensaje::selection,.mensaje:active,mensaje:focus{border: 1px solid gray;border:1px !important;}
.noleidos{background-color:red;color:white;border-radius:100%;width:30px;text-align:center;}
.sinleer{clear:both;}
#nl{
text-align:center;
border-radius:100%;
     width:25px;
    background-color:grey;
    padding:2px;
    color:white;
    float: right;
    position: relative;
    top: -40px;
    right: 36px;

}
.capausu{cursor: pointer;padding:15px;min-height:100px;}
.der{width:30%;float:left;}
.fotousu{width:50px;height:50px;border-radius:100%; }
.nombrechat{width:65%;}
.contentusus{width:100%;padding-left:30px;}
.usus{width:22%; float:right;background-color:#f0f4f8;color:black;min-height:83vh;}
.chat{width:78%;}
#contentchat{height:77vh;padding-top:20px;overflow: auto;}
.msjj{margin-top:20px;}
#mensaje{display:none;border: 1px solid gray;}


/*------------------------------------------------------------------------------------------------------------
------------------------------------------------ ANÁLISIS DE DATOS (ADMINISTRACIÓN) -----------------------------------------------------------*/

p {margin-bottom: 0}

.selector-fechas > form {
	display: flex;
	align-items: flex-end;
}

.selector-fechas > form > div {
	margin-right: 10px
}

.selector-fechas > form > div > label {
	color: black
}

.filtrar-fechas .boton {
	border: 2px solid red;
	box-shadow: 4px 4px red;
	padding: 5px 15px
}

.filtrar-fechas .boton:hover {
	border: 2px solid #5E7775;
	box-shadow: none;
	background: #5E7775
}

.analisis-datos {
	padding: 30px 15px;
}

.lista-analisis-datos {
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
}

.grupo-datos {
    flex: 0 48%;
    padding: 15px;
    margin-right: 1%;
    margin-bottom: 1%;
    background: #19322F;
    border-radius: 15px;
    box-shadow: 20px 20px 0px 0px #ffc10742
}

.grupo-datos > h2 {
	color: white;
	border-bottom: 2px solid white;
	font-size: 1.7em;
	font-weight: 300;
    margin-bottom: 15px;
}

.grupo-datos:nth-child(odd) {
	margin-right: 0;
}

.grupo-datos > ul {
	display: flex;
	flex-direction: column;
}

.grupo-datos > ul > li {
	display: flex;
	align-items: center;
	flex: 1;
	padding: 15px;
	border: 1px solid #19322F;
	justify-content: space-between;
	border-bottom: none;
	background: white
}

.grupo-datos > ul > li:last-child {
	border-bottom: 1px solid black
}

.grupo-datos > ul h3 {
	font-size: 1em;
	margin-bottom: 0;
	flex: 0 80%
}

.grupo-datos > ul p {
	color: #19322F;
	font-family: raleway-bold;
	font-size: 1.3em;
	flex: 0 20%;
	text-align: right;
}

.grupo-datos strong {
    color: #ff0000;
    font-family: courgette;
}

.boton-descargar-analisis {
	flex: 100%;
	justify-content: flex-end;
	align-items: center;
}

.boton-descargar-analisis > input {
	flex: 0 30%;
    display: flex;
    justify-content: flex-end;
    padding: 0 40px 0 0
}

.boton-descargar-analisis > input {
	color: white;
	background: red;
	padding: 7px 15px;
	margin-bottom: 10px;
	font-weight: 500
}

@media screen and (max-width: 770px) {

	.grupo-datos {
		flex: 0 100%; 
		margin-right: 0
	} 

}

@media screen and (max-width: 650px) {

	.grupo-datos {
		padding: 10px
	}
	.selector-fechas > form {
		flex-direction: column;
	}
	.selector-fechas > form > div {
		margin-right: 0; 
		width: 100%; 
		padding: 7px 0
	}
	.grupo-datos > ul > li {
		padding: 10px
	}
	.grupo-datos > h2 {
		margin-bottom: 5px; 
		border-bottom: 1px solid white; 
		font-size: 1.3
	}
}

/*----------------------------------------------------------------------------------------------------------
-------------------------------------------- CUESTIONARIOS (MENTEE Y MENTOR) ------------------------------------
-----------------------------------------------------------------------------------------------------------------------*/
.centrar2 {
	max-width: 1200px; 
	margin: 0 auto; 
	padding: 15px
}

.centrar3 {
	max-width: 800px; 
	margin: 0 auto; 
	padding: 15px
}

.cuestionario-introduccion {
	display: flex;
}

.cuestionario-introduccion > div {
	padding: 15px;
	border-radius: 15px;
	margin-right: 10px;
	background: thistle
}

.cuestionario-introduccion > div:nth-of-type(2) {
	background: mistyrose
}

.cuestionario-anotaciones > p {
	padding: 15px 0;
}
.contenedor-cuestionario {
	padding: 0 15px 
}

.cuestionario-preguntas {
	background: #19322F;
	padding: 30px;
	border-radius: 15px;
	margin-bottom: 40px;
	margin-top: 15px
}

.cuestionario-preguntas ul {
	display: flex;
	flex-wrap: wrap;
}

.cuestionario-item {
	display: flex;
	padding: 0 20px;
	align-items: stretch;
	flex: 0 50%;
	border-right: 2px solid black;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	padding-bottom: 15px
}

.cuestionario-item:nth-child(even) {
	border-right: 0;
	padding-right: 0
}

.cuestionario-item:nth-child(odd) {
	padding-left: 0
}

.cuestionario-item > h2 {
	padding-right: 15px;
	color: #0F2237;
	font-family: raleway-italic;
	font-size: 2em;
	flex: 0 10%;
	text-align: center;
}

.cuestionario-item > h3 {
	font-size: 1.2em;
	margin-bottom: 0;
	font-family: raleway-regular;
	font-weight: 300;
	color: white;
	flex: 0 90%;
	padding-bottom: 10px;
}

.cuestionario-item > textarea {
	flex: 0 90%;
	border-radius: 5px
}

.boton-enviarcuestionario {
	display: flex;
	justify-content: flex-end;
}

.boton-enviarcuestionario > .boton {
	background: red;
	color: white;
	font-weight: 300;
	padding: 10px 20px;
}

@media screen and (max-width: 1024px) { 

.cuestionario-item {
	flex: 0 100%;
	padding: 0;
	padding-bottom: 15px;
	border-right: 0
}

.cuestionario-item > h2 {
	flex: 0 5%
}

.cuestionario-item > h3,
.cuestionario-item > textarea {
	flex: 0 95%;
}

.boton-enviarcuestionario {
	justify-content: center;
}



}

@media screen and (max-width: 770px) {

.cuestionario-preguntas {
	padding: 10px
}

.cuestionario-item {
	align-items: center;
}

.cuestionario-item > h2 {
	flex: 0 5%
}

.cuestionario-item > h3 {
	flex: 0 85%;
}

.cuestionario-item > textarea {
	flex: 100%;
	min-height: 90px
}

.cuestionario-introduccion {
	flex-direction: column;
} 

.cuestionario-introduccion > div:nth-of-type(1) {
	margin-bottom: 10px
} 

.boton-enviarcuestionario {
	padding: 10px
}

}

.adapta{
flex:30% !important;
margin-right:20px;
max-width: 260px;
}
.adapta2{
flex:30% !important;
margin-right:20px;
max-width: 360px;

}

.adapta3{
flex:40% !important;
margin-right:20px;
max-width: 560px;
margin-top:20px;

}
.adapta4{
flex:45% !important;

max-width: 800px;


}
.adapta5{
flex:45% !important;

max-width: 100px;


}
.adapta6{
flex:45% !important;

max-width: 200px;


}
.adapta7{
flex:45% !important;

max-width: 400px;


}
.adapta8{
flex:45% !important;

max-width: 500px;


}
.separa{height:130px;}
.alerta{color:red;}
table{width:100% !important}

/*--Añadido inv--*/
table.tabla_mover tbody th, table.tabla_mover tbody td {font-family: raleway-regular; font-weight: 600; font-size: 15px; padding: 2px 10px; text-align: center;}
table.tabla_mover td {white-space: normal;}

table.tabla_mover thead>tr>th{
	font-family: raleway-regular; font-weight: 600;
    color: #19322F;
    border-bottom: 2px solid #19322F;
    border-top: 2px solid white
}
table.tabla_mover input{width: 50%;}

.pantalla-inicio-login form input {
	width: 100%;
	height: 40px;
	
    padding: 0 10px;

    color: var(--main-inv-dackcolor);
}
.btn-submit > button {
	margin-top:15px;
	
	padding: 15px;
	font-family: gotham-bold;
	background: #C38F51;
	color:white;
	border: 1px solid var(--main-inv-dackcolor);
	border-radius: 15px;
	align-items: center;
	cursor: pointer;

	
}
.access-enter{width:100%;text-align:right;}
.btn-submit > button:hover {
	box-shadow: 5px 5px var(--main-inv-dackcolor)
}
.cabecera-calendario h1{color:#0F2237;}
.sin-borde {display: none !important}
#kit{height:15px;}
.contenedor-experienciaproeditar {
	display: flex;
	flex-wrap: wrap;
      padding:20px;

}
#p10{width:200px;}
#p11{width:200px;}
#p62{width:200px;}

.campo-rellenable2{flex:0 !important;}
input[type=radio]{height:15px;width:100px;}
input[type=number]{width:200px;margin-left:20px;}
.contienemedidas{width:100%;position:relative;display:block;}

.medidasiz{display:block;width:49%;float:left;}
.medidasde{display:block;width:49%;float:right;}
.medida{
font-size:1em;
font-family:raleway-regular;
color: black;
width:100%;
border: 1px solid #0F2237;
min-height:420px;
margin-bottom:20px;


}
.titulomedida{background: #0F2237;color:white;padding:15px;border-bottom: 1px solid #0F2237;font-weight: bold;}
.propuesta{padding:20px;}
.titulin{
font-size: 15px !important; 
	font-family: raleway-regular !important; 
	color: White; 
	text-transform: uppercase; 
	letter-spacing: 4px !important;
	
	font-weight: 500 !important;
}

/*adaptacion plugin JquerySelect */
.ms-options-wrap > button:focus, .ms-options-wrap > button{
	height: 36px;
}
/*
.ms-options-wrap > .ms-options > ul li.selected label{
	color: black!important;
}
	*/
.ms-options-wrap > .ms-options > ul label{
	color: black;
}
input[id^="ms-opt-"]{
    height: auto;
}
.ms-options-wrap > .ms-options > ul input[type="checkbox"]{
	width: auto;
}
.ms-options-wrap > button:focus, .ms-options-wrap > button {
	font-size: 16px;
}
.ms-options-wrap > button{
	font-family: raleway-regular;
  
    border: 0;
    padding: 5px;
    width: 100%;
    border: 1px solid grey;
    margin-top:10px;
    font-size:106%;	
}


.ms-options-wrap > button > span{
	font-family: raleway-regular;
	  
    border: 0;
    padding: 5px;
    width: 100%;
    margin-top:10px;
    font-size:106%;	

}

 .modal-dialog  .btaccion{width:80px;display:inline;margin-right:10px;font-size:14px !important;padding:5px;}
/*Modal*/
/* The Modal (background) */
.myModal {
	/* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 100; /* Sit on top */
   padding-top: 100px; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
 }

 

.myModal .modal-title{
	display: block !important;
 }
.myModal label{color: black; padding-bottom: 0.5rem;}

.myModal .boton {
	background: #0F2237;
	color: white; 
	font-family: raleway-italic; 
	letter-spacing: 1px; 
	width: 200px;
	font-weight: 500
}
.myModal .boton:hover {background: #0F2237; color: white; box-shadow: 0px 2px 0 beige;}

.myModal .modal-header {
    padding: 2rem 2rem 1rem 2rem;
}

.myModal .modal-body {
    margin: 0 1rem 0 1rem;
}

.myModal .campo-rellenable {
    margin: 2rem 0;
}


#creapeticion input[type=number], #modificapeticion input[type=number]{
	width: 100% !important;
    margin-left: 0px !important;
}

select{
	height:36px !important;
}
/*adaptacion plugin Select2 4.1.0 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
}

.select2-container .select2-selection--single {
    height: 36px !important;
}

span#select2-container--default, .select2-container--default .select2-selection--single .select2-selection__rendered{
		font-family: raleway-regular;
    font-size:106%;	
	color: black !important;
}

.select2-container--default .select2-selection--single{
	border: 1px solid grey !important;
	border-radius:0 !important ;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected,
.select2-results__option{
	font-family: raleway-regular !important;
}

/*unificando select y jqueryselect*/
.ms-search {
    display: block;
    padding: 4px;
}
.ms-options-wrap > .ms-options > .ms-search input{
	    border: 1px solid #aaa !important;
}

.ms-search input:focus, input.select2-search__field:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-width: 0 6px 6px 6px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-width: 6px 6px 0 6px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    top: 0px !important;
    right: 4px !important;
}

.ms-options-wrap > .ms-options > ul label {
    position: relative;

    padding: 4px 4px 4px 40px I !important;
}

/*
.ms-options-wrap > .ms-options > ul input[type="checkbox"]{
    margin: 0 10px 0 0;
    position: absolute;
    left: 10px !important;
    top: 2px;
    height: 1.5em !important;
    width: 1.5em !important;
}
	*/

.botones-enviar-cancelar{
    justify-content: space-around !important;
}
.botones-enviar-cancelar .boton{
width: 150px !important;
}


.editaformu .campo-rellenable2 label{
color: black;
}

.editaformu .campo-rellenable2 .icono{
    height: 36px !important;
    width: 100% !important;
    font-size: 1.5em;
    margin-top: 10px;
    text-align: center;
}
span.titulodato{
	font-weight: bold;
	color: var(--main-texto2);
}

.vfichahorizontal {
    padding: 0px !important;
    display: flex !important;
    flex-direction: column;
}

.vfichaacciones{
	display: flex !important;
    align-items: center;
    justify-content: center
}
.vfichaacciones > div  {
    padding: 20px;
    background: white;
    margin-top: 10px;
}

.vfichaacciones h3{
	color: var(--main-texto1);
	font-size: 1.3em;
}

.vfichaacciones > div  >a{
    font-family: raleway-italic;
    color: #0F2237;
    text-decoration: underline;
    font-size: 14px;
}


    .vfichaacciones {
        display: flex;

    }
	.vfichaacciones > div {
    margin-top: 0px;
    flex: 0 20%;
    margin-right: 10px;
    height: 200px;
	}


.contenedor-vcompetencias {
	flex: 100%;
}
 .vficha100{
	flex:100%;
	min-height: auto;
    padding: 10px;
	    background-color: var(--main-fondo1);
 }
  .vficha100 > div{
	padding: 0;
 }

   .vficha100 > div .btaccion{
	padding-left: 10px;
	padding-right: 10px;
	width: 120px;
	font-size:0.9em;line-height:1.2;padding-top:5px;background:#0F2237;margin-top:5px;height:27px;display:block;
   }

   @media (max-width: 997px) {
  
.vfichaacciones {
    flex-wrap: wrap;
}
 .vfichahorizontal > div:last-child {
	flex: none;
} 
}


.myModal .contenedor-nuevousuario .campo-rellenable {
    margin:0 0 2rem 0;
}

.modalestadocontrato .contenedor-nuevousuario> div:first-child {
	    margin-right: 10px;
}


.vbox {
    background: #eff9ff;
    box-shadow: 0 5px 17px -4px rgba(0, 0, 0, .39);
    border-radius: 3px;
    width: 100%;
    height: 100%;
    padding: 1em;
}

.vcompetencias-ficha{box-shadow: none;}

.vbox > .vfichaacciones > div{
	flex: 0 20%;
    height: 200px;
    margin: 0.5em;
    box-shadow: 2px 3px 9px 2px rgba(57, 56, 56, 0.12);
    border-radius: 8px;
}

.vbox > a > p, .vbox > .vcompentencias-ficha-cabecera > div > i, .vbox h2 {
    color: var(--main-texto1);
}



/*INICIO Alcazar REGISTRO HORARIO*/
/*Estilos de Samuel*/
/* Estilos Base de la Tabla */
.table {
	margin: 15px auto;
	width: 100%;
	border: 1px solid var(--main-fondo1);
	border-radius: 5px;
	font-family: 'raleway-regular', sans-serif;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilos de las Filas (Contenedores Flex) */
.row {
	/* Convierte cada fila en un contenedor flex */
	display: flex;
	/* Las celdas se alinean horizontalmente */
	align-items: stretch;
	border-bottom: 1px solid var(--main-fondo1);
}

.row:last-child {
	border-bottom: none;
}

/* Estilos de las Celdas */
.cell {
	/* Permite que las celdas crezcan para ocupar el espacio disponible por igual */
	flex: 1;
	padding: 10px;
	text-align: center;
	/* Opcional: para asegurar que los contenidos no desborden */
	word-wrap: break-word;
	align-content: center;
}

/* Estilos de la Fila de Encabezados */
.header {
	font-weight: bold;
	background-color: var(--main-fondo1);
	border-radius: 5px 5px 0 0;
}

/* Ocultar las etiquetas data-label por defecto */
.cell::before {
	content: attr(data-label);
	display: none;
}

.perfil-caja-editarperfil>.table>div {
	margin-right: 0;
}

.table input[type="checkbox"] {
	height: 18px;
}

.table input[type="time"] {
	margin-top: 25px;
}


/* Estilos Responsivos (Vista Móvil) */
@media (max-width: 600px) {

	/* Ocultar la fila de encabezados en vista móvil */
	.header {
		display: none;
	}

	/* En vista móvil, las filas se apilan verticalmente */
	.row {
		/* Cambia la dirección del flex a vertical */
		flex-direction: column;
		border: 1px solid #ccc;
		margin-bottom: 10px;
		border-radius: 5px;
	}

	/* Estilos de las Celdas en vista móvil */
	.cell {
		/* Cada celda ocupa todo el ancho */
		flex-basis: 100%;
		border-bottom: 1px dashed #ddd;
		padding: 8px 10px;
		text-align: right;
		/* Alinea el dato a la derecha */
		position: relative;
	}

	.cell:last-child {
		border-bottom: none;
	}

	/* Mostrar la etiqueta del encabezado (data-label) */
	.cell::before {
		display: block;
		font-weight: bold;
		text-align: left;
		/* Alinea la etiqueta a la izquierda */
		margin-bottom: 4px;
		color: #555;
		/* Estilo para que la etiqueta esté en la izquierda y el dato en la derecha */
		position: absolute;
		left: 10px;
	}

	.pantalla-crearperfil-formulario>form>div>div {
		flex-wrap: wrap;
	}
}

/*Finn Samuel*/

.fc-event {
	/*background: #3788d8;*/
	background: #A6A09B;
	color: white;
	cursor: pointer;
}

.cat-laboral {
	background: #3788d8 !important;
	color: white !important;
}


/*//cuando no pones datatables
#calendar a{
	color: black;
}
	*/

.fc-daygrid-event-dot {
	/*para que no se vea el punto delante del eveento de horas*/
	border: none;
	margin: 0 2px;
}

.fc .fc-list-event-dot{
	border-color: white;
}


/* Estilos Base para Días Inactivos (Fuera de tu Rango Activo) */
.fecha-inactiva {
	background-color: #e0e0e0 !important;
	cursor: not-allowed !important;
	opacity: 0.7;
}

/* Deshabilitar Interacción Visual en Números y Enlaces */
/* Esto se aplica a los números del día dentro de la celda inactiva */
.fecha-inactiva .fc-daygrid-day-number,
.fecha-inactiva a {
	color: #616161 !important;
	pointer-events: none;
}

/* Estilo para Días Activos (que están dentro de tu rango) */
.fecha-activa {
	cursor: pointer;
}



.myModal .boton {
	background: #C38F51 !important;
	color: white;
	font-family: raleway-italic;
	letter-spacing: 1px;
	width: 92px;
	font-weight: 500;
}

#modal-eliminar .boton {
	display: flex;
	background: #C38F51 !important;
	color: white;
	font-family: raleway-italic;
	letter-spacing: 1px;
	width: auto;
	font-weight: 500;
	justify-content: center;
}

.myModal .boton-cancelar {
	background: gray !important;
}

.modal-title {
	margin: 0;
}

.boton-submit {
	justify-content: space-evenly;
	margin: 2em;
	padding-top: 1em;
}


.myModal .campo-rellenable {
	margin: auto;
}

#modal-eliminar {
	padding-top: 2rem;
}

/*
input[type="datetime-local"]:invalid {
    border: 2px solid red; 
}
	*/
.fc .fc-list-event:hover td {
	background-color: #0f2237;
}

span.titulo {
	font-family: 'raleway-italic';
	font-size: 0.8em;
}

/*FIN Alcazar REGISTRO HORARIO*/
/*inicio Alcazar REGISTRO HORARIO 20-11*/

/*-----------------Añadidos Samuel Fichaje------------------------------*/

/* reloj.css */
.reloj {
    font-family: 'raleway', sans-serif; /* Ejemplo de fuente */
    font-size: 5em;
    text-align: center;
    color: var(--main-texto1);
    padding: 20px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
}

.pantalla-crearperfil-formulario > form > div.reloj {
	max-width: 250px;
}

.timeline {
	flex:50%;
	font-family: 'raleway', sans-serif;
	background-color: #f8f8f8;
	padding: 15px;
	border-radius: 0 0 15px 15px;
	box-shadow: -6px -6px 16px 0px #ffffff,  6px 6px 16px 0px #d1d9e6;
	position: relative;
	top: -160px;
	/*top: -60px;/*se cambia porque en la linea de tiempo solo vemos dos lineas*/
	z-index: 1;
	transition: 2s ease;
}

.timeline li {
	margin-bottom: 10px;
	color: var(--main-texto1);
}

.fichar{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20px;
}

.fichar button {
	flex: 1;
	width: 40vh;
	min-height: 40vh;
	padding: 15px;
	border-radius: 30px;
	border: none;
	font-family: 'raleway-bold', sans-serif;
	font-size: 1.5em;
	z-index: 2;
	color: white;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
}

.modalidad-trabajo {
	display: flex;
}
.modalidad-trabajo .boton-presencial, .modalidad-trabajo .boton-disposicion, .modalidad-trabajo .boton-computable {
	flex: 1;
	min-width: 20vh;
	color: white;
	padding: 5px 0;
	border-radius: 30px 0 0 30px;
	border: none;
	width: 100%;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
}

.modalidad-trabajo .boton-teletrabajo, .modalidad-trabajo .boton-espera, .modalidad-trabajo .boton-nocomputable {
	flex: 1;
	min-width: 20vh;
	color: white;
	padding: 5px 0;
	border-radius: 0 30px 30px 0;
	border: none;
	width: 100%;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
}

.fichar button i {
	font-size: 5em;
	margin-bottom: 30px;
	display: block;
}

.fichar button:hover {
	cursor: pointer;
	
}

.boton-fichar-entrada{
	color: var(--main-texto1);
	background-color: #29a4db; 
	transition: .5s ease;
}

.boton-fichar-entrada:hover, .boton-teletrabajo:hover{
	box-shadow: inset 20px 20px 60px #238bba, inset -20px -20px 60px #2fbdfc;
}


.boton-presencial{
	background-color: var(--main-texto1);
}

.boton-presencial:hover{
	box-shadow: inset 20px 20px 60px #004988, inset -20px -20px 60px #0063b8;
}

.boton-teletrabajo{
	background-color: var(--main-texto2); 
}

.boton-disposicion{
	background-color: #FFB300; 
}

.boton-disposicion:hover{
	box-shadow: inset 20px 20px 60px #d99800, inset -20px -20px 60px #ffce00;
}

.boton-computable{
	background-color: #8BC34A;
}
.boton-computable:hover{
	box-shadow: inset 20px 20px 60px #85ad56, inset -20px -20px 60px #b3eb74;
}

.boton-espera{
	background-color: #8BC34A;
}

.boton-espera:hover{
	box-shadow: inset 20px 20px 60px #85ad56, inset -20px -20px 60px #b3eb74;
}

.boton-nocomputable{
	background-color: #FFB300; 
}

.boton-nocomputable:hover{
	box-shadow: inset 20px 20px 60px #d99800, inset -20px -20px 60px #ffce00;
}

.boton-fichar-salida{
	background-color: #f44336; /* Rojo */
}

.boton-fichar-salida:hover{
	box-shadow: inset 20px 20px 60px #cf392e, inset -20px -20px 60px #ff4d3e;
}

.boton-fichar-ini-descanso{
	background-color: #4CAF50; /* Verde */
}

.boton-fichar-ini-descanso:hover{
	box-shadow: inset 20px 20px 60px #419544, inset -20px -20px 60px #57c95c;
}

.boton-fichar-fin-descanso{
	background-color: #ff9800; /* Naranja */
}

.boton-fichar-fin-descanso:hover{
	box-shadow: inset 20px 20px 60px #d98100, inset -20px -20px 60px #ffaf00;
}

#lt-salida{
	color: #f44336 !important;
}
#lt-fin-d{
	color: #ff9800 !important;
}
#lt-ini-d{
	color: #4CAF50 !important;
}
#lt-entrada{
	color: #29a4db !important;
}

/* Animación de 5 pasos para la línea de tiempo */

/* PASO 1: Primer Cambio */
.paso1 {
    transform: translateY(0px); 
	transition: 2s ease;
}
/* PASO 2: Primer Cambio */
.paso2 {
    transform: translateY(60px); 
	transition: 2s ease;
}

/* PASO 3: Segundo Cambio */
.paso3 {
    transform: translateY(90px);
	transition: 2s ease;
}

/* PASO 4: Tercer Cambio */
.paso4 {
    transform: translateY(125px);
	transition: 2s ease;
}

/* PASO 5: Cuarto Cambio */
.paso5 {
    transform: translateY(160px);
	transition: 2s ease; 
}

/*Iconos empleado*/
.icono-emp1:hover > a::after {
	content: 'Mi perfil';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;
}
.icono-emp2:hover > a::after {
	content: 'Registro Jornada';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;
}
.icono-emp3:hover > a::after {
	content: 'Registro Pausas';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;
}
.icono-emp4:hover > a::after {
	content: 'Registro Disponibilidad';
	position: absolute;
	left: 48px;
	background: #0F2237;
	color: white;
	padding: 7px;
	z-index: 50;
}
.icono-emp5:hover > a::after {
     content: 'Peticiones';
     position: absolute;
     left: 48px;
     background: #0F2237;
     color: white;
     padding: 7px;
     z-index: 50;
}
.icono-emp6:hover > a::after {
     content: 'Incidencias';
     position: absolute;
     left: 48px;
     background: #0F2237;
     color: white;
     padding: 7px;
     z-index: 50;
}
.icono-emp7:hover > a::after {
     content: 'Alertas';
     position: absolute;
     left: 48px;
     background: #0F2237;
     color: white;
     padding: 7px;
     z-index: 50;
}


.d-hidden{
	visibility: hidden;
}


#calendar .cat-festivos {
	background-color: #ef4444 !important;
	border: 1px solid #ef4444 !important;
	opacity: 1 !important;
}

#calendar .cat-festivos .fc-event-title {
	margin-top: 1.2rem !important;

}
#calendar_empleado .cat-festivos {
	background-color: #ef4444 !important;
	border: 1px solid #ef4444 !important;
	opacity: 1 !important;
}

#calendar_empleado .cat-te {
	background-color: #ff5b00 ;
	border: 1px solid #ff5b00;
}

#calendar_empleado .cat-td {
	background-color: #ff9000 ;
	border: 1px solid #ff9000;
}
#calendar_empleado .cat-vacaciones{
	background-color: #10b981;
	border: 1px solid #10b981;
}

#calendar_empleado .cat-pr{
	background-color: #253853;
	border: 1px solid #253853;
}

#calendar_empleado .cat-pnr{
	background-color: #282a30;
	border: 1px solid #282a30;
}

#calendar_empleado .cat-baja{
	background-color: #3f0b0b;
	border: 1px solid #3f0b0b;
}

a.fc-event.fc-event-start.fc-event-end.fc-daygrid-event.fc-daygrid-dot-event {
    color: white;
}


.myModal input, .myModal select{
	    margin: 5px 0 10px 0;
}

.myModal .info{
	font-size:0.8em;
}
.myModal .info ul{
	list-style: inside;
}

/* Estilos para el botón deshabilitado (general) */
button:disabled {
    /* Color de fondo más claro */
    background-color: #cccccc;
    /* Color del texto */
    color: #666666; 
    /* Borde más suave */
    border: 1px solid #999999;
    /* Evita que cambie la apariencia si se le intenta hacer clic */
    box-shadow: none !important; 
    /* El cursor 'not-allowed' es automático, pero lo forzamos para compatibilidad */
    cursor: not-allowed; 
}

/* ⚠️ Estilos al pasar el ratón (hover) sobre el botón deshabilitado */
/* Es crucial usar el selector [disabled]:hover para asegurar que el estilo
   se aplique solo cuando está deshabilitado */
button[disabled]:hover {
    /* Mantenemos el mismo color de fondo para que no haya cambio visual */
    background-color: #cccccc; 
    /* Mantenemos el cursor 'not-allowed' */
    cursor: not-allowed; 
}

#identificar {
  flex: 1;
  width: 40vh;
  min-height: 4vh;
  padding: 15px;
  font-family: 'raleway-bold', sans-serif;
  position: static;
}

.boton-doble {
	display: flex;
}

.boton-doble .boton-kiosco-entrada, .boton-doble .boton-kiosco-inicio-descanso{
	flex: 1;
	min-width: 20vh;
	color: white;
	padding: 5px 0;
	border-radius: 30px 0 0 30px;
	border: none;
	width: 100%;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
}


.boton-doble .boton-kiosco-salida, .boton-doble .boton-kiosco-fin-descanso  {
	flex: 1;
	min-width: 20vh;
	color: white;
	padding: 5px 0;
	border-radius: 0 30px 30px 0;
	border: none;
	width: 100%;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
}

.boton-kiosco-entrada{
	color: var(--main-texto1);
	background-color: #29a4db; 
}

.boton-kiosco-entrada:hover{
	box-shadow: inset 20px 20px 60px #238bba, inset -20px -20px 60px #2fbdfc;
}



.boton-kiosco-salida{
	background-color: #f44336; /* Rojo */
}

.boton-kiosco-salida:hover{
	box-shadow: inset 20px 20px 60px #cf392e, inset -20px -20px 60px #ff4d3e;
}

.boton-kiosco-inicio-descanso{
	background-color: #4CAF50; /* Verde */
}

.boton-kiosco-inicio-descanso:hover{
	box-shadow: inset 20px 20px 60px #419544, inset -20px -20px 60px #57c95c;
}

.boton-kiosco-fin-descanso{
	background-color: #ff9800; /* Naranja */
}

.boton-kiosco-fin-descanso:hover{
	box-shadow: inset 20px 20px 60px #d98100, inset -20px -20px 60px #ffaf00;
}

.reloj-kiosco {
    font-family: 'raleway', sans-serif; /* Ejemplo de fuente */
    font-size: 5em;
    text-align: center;
    color: var(--main-texto1);
    padding: 0px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
}
.fichar-kiosco{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0px;
}


/**/
/* --- CONTENEDOR PRINCIPAL --- */
#retro-fichar {
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    width: 100%;
    animation: fadeIn 0.4s ease;
    box-sizing: border-box;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- ICONO PRINCIPAL --- */
#retro-fichar .retro-icon {
    font-size: 4rem;
    margin-bottom: 15px;
    transition: color 0.3s;
}

/* --- COLORES DE ESTADO (Clases que activa el JS) --- */
.estado-exito { color: #28a745 !important; } /* Verde */
.estado-error { color: #dc3545 !important; } /* Rojo */

/* --- TEXTOS --- */
#retro-fichar h2 {
    color: #333;
    font-size: 1.8rem;
    margin: 10px 0;
    font-weight: 700;
}

#retro-fichar .retro-main-text {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* --- CAJAS DE INFORMACIÓN (Contexto) --- */
.retro-info-box {
    background-color: #f8f9fa;
    border-left: 5px solid #17a2b8;
    color: #444;
    padding: 15px;
    margin-bottom: 15px;
    text-align: left;
    border-radius: 4px;
}

/* Subtexto de incidencia */
.retro-subtexto-incidencia {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
    border-top: 1px solid #ddd;
    padding-top: 5px;
}

/* --- CAJA DE ALERTA / ERROR --- */
.retro-alert-box {
    padding: 15px;
    margin-bottom: 20px;
    text-align: left;
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.retro-alert-box i {
    margin-right: 10px;
    font-size: 1.2rem;
}

/* Estilos dinámicos para la caja de alerta */
.alerta-amarilla {
    background-color: #fff3cd;
    border-left: 5px solid #ffc107;
    color: #856404;
}

.alerta-roja {
    background-color: #f8d7da;
    border-left: 5px solid #dc3545;
    color: #721c24;
}

/* --- BOTÓN VOLVER (PERSONALIZADO) --- */
#retro-fichar button.boton-kiosco-volver {
    background-color: #C38F51 !important; /* Tu color corporativo */
    color: white !important;
    border: none !important;
    padding: 15px 30px !important;
    font-size: 1.2rem !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    width: 100% !important;
    max-width: 300px !important;
    margin-top: 15px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: auto !important; /* Tu ajuste */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
}

#retro-fichar button.boton-kiosco-volver:hover {
    opacity: 0.8 !important; /* Tu ajuste */
    transform: translateY(-2px) !important; /* Tu ajuste */
}

#retro-fichar button.boton-kiosco-volver i {
    margin: auto !important; /* Tu ajuste para centrar icono si el texto baila */
}

/* --- TEMPORIZADOR --- */
.retro-timer {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #999;
}


.pantalla-crearperfil-formulario.pantalla-fichar h1{text-align: center !important;}

.fichar-kiosco input{
	/*font-size: 1.2em !important;*/
}

/* --- COLORES DINÁMICOS PARA LA CAJA DE INFO (ÚLTIMO REGISTRO) --- */

/* Caso: Último fue ENTRADA (Azul) */
.retro-info-box.info-entrada {
    border-left-color: #29a4db !important;
}
/* Icono interior para Entrada */
.retro-info-box.info-entrada i {
    color: #29a4db !important;
}

/* Caso: Último fue SALIDA (Rojo) */
.retro-info-box.info-salida {
    border-left-color: #f44336 !important;
}
/* Icono interior para Salida */
.retro-info-box.info-salida i {
    color: #f44336 !important;
}

/* Caso: OTROS (Amarillo - Pausas, inicio año, desconocidos) */
.retro-info-box.info-otro {
    border-left-color: #ffc107 !important;
}
/* Icono interior para Otros */
.retro-info-box.info-otro i {
    color: #ffc107 !important;
}
/**/

/**/
#boton-identificar{
margin-top: 15px !important;
  padding: 15px !important;
  background: #C38F51 !important;
  color: white !important;
  border: 1px solid var(--main-inv-dackcolor) !important;
  border-radius: 15px !important;
  align-items: center !important;
  cursor: pointer !important;
}

.selector-fechas > form {
	display: flex;
	align-items: flex-end;
}

.selector-fechas > form > div {
	margin-right: 10px
}

.selector-fechas > form > div > label {
	color: black
}

.filtrar-fechas .boton {
	border: 2px solid #0F2237;
	box-shadow: 4px 4px #0F2237;
	padding: 5px 15px
}

.filtrar-fechas .boton:hover {
	border: 2px solid #0F2237;
	box-shadow: none;
	background: #0F2237
}



#calendar_empleado table .sumah {
    background: #3788d8 !important;
}

#calendar_empleado table .restah {
    background: #6daceb !important;
}

.d-none-i {display: none !important}

.botones-buzon button.btn:hover{
	background: #dadada;
	color: black ;
}
.botones-buzon button.btn.btn-activo{
background: #C38F51;
color: white;
}






.menu-principal li a { 
    position: relative; 
}

.badge-notificacion {
    position: absolute;
    top: 8px;                /* Ajustado para alinear con el icono */
    left: 28px;               /* Posición fija respecto al icono */
    background-color: #FFB300; /* Color Ámbar profesional */
    color: #0F2237;           /* Texto oscuro para contraste */
    font-size: 10px;
    font-weight: bold;
    border-radius: 10px;      /* Estilo pastilla */
    padding: 2px 6px;
    line-height: 1;
    min-width: 15px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 10;
    pointer-events: none;     /* Evita interferir con el clic del ratón */
}