/********** General **********/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;1,500&display=swap');

body {
	
	font-family: 'Montserrat', Verdana, Arial, Sans-Serif;
	margin: 0;
}

a  {
	color: black;
}

a:visited  {
	color: black;
}

a:hover {
	color: red;
}

img {
    border: none;   
    margin: 0;
	padding: 0; 
}

li{
	list-style-type: none;
}

/********** Header **********/
div.header {
	margin: 0 auto;
	position: relative;
	z-index: 0;
	width: 100%;
	height: 5rem;
	overflow: hidden;
	margin-bottom: 1em;
}




/********** Navbar **********/
div.navbar {
display: flex; /* Usar flexbox para alinear los elementos */
  align-items: center; /* Alinea verticalmente los elementos en el centro */
  margin: 0;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  padding-left: 1em;
  position: relative;
  z-index: 0;
  width: 99%;
  overflow: hidden;
  background-color: white;
  font-size: x-small;
  color: #000000;
  vertical-align: middle;
}

div.navbar table{
	margin: 0;
	width: inherit;
	padding: 0;
	border: 0px;
	display: block;
}
div.navbar td{
	margin: 0;
	color: fuchsia;
	width: inherit;
	padding: 0;
	border: 0px;
	vertical-align: middle;
	display: block;
}

div.navbar p {
    margin: 0;
    padding: 0;
}

div.navbar a, div.navbar a:link, div.navbar a:visited, div.navbar a:hover {

}

div.navbar .navbarMenuIcon{
	float: left;
    margin: 0.25em 2em 0.25em 0.5em;
	width: 20px;
}

div.navbar .navbarMenuIcon img{
	width: 100%;
}

div.navbar .navbarMenuIconsDchaContainer {
	margin-left: auto;
	display: flex;
	gap: 2em;
	margin-right: 2em;
}

div.navbar .navbarMenuIconDcha {
  width: 20px; /* Mantiene el tamaño de los iconos */
}

div.navbar .navbarMenuIconDcha img {
  width: 100%; /* Ajusta las imágenes al 100% del ancho de su contenedor */
}

/********** Main Layout **********/
div.main-layout {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: Transparent;
  border: none !important;
  padding:0 !important;
  font-size: small;
}

div.main-layout-row {
  display: table-row; 
  background-color: Transparent;
  vertical-align: top;
  text-align: left;
  border: none !important;
  margin:0 !important;
  padding:0 !important;
}

div.main-layout div.layout-cell {
   display: table-cell;
   float: right;
}


div.main-layout div.layout-cell img{
	width: 0.75em;
    margin-right: 0.5em;
}


div.main-layout div.layout-cell a{
	text-decoration:none;
}

/********** V Menu **********/

/* Estilo general del menú vertical */
.vmenu {
    width: 20%;
    float: left;
	padding-top: 1em;
}


.logo-image {
    text-align: center;
    margin-bottom: 20px;
	margin-left:2%;
    width: 20%;
	float:left;
	margin-right: 3%;
}

.logoCabecera {
    max-width: 100%;
    height: auto; 
}

.logo {
	margin-right:2%;
	width: 70%;
}

.logo-name a{
	text-decoration: none;
}

/* Estilo para la lista de navegación */
.vmenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
	margin-top: 2em;
	clear: both;
}


/* Estilo para los enlaces */
.vmenu ul li a {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    transition: background-color 0.3s ease;
    border-radius: 5px;
}

/* Estilo para los íconos dentro de los enlaces */
.vmenu ul li a img {
    width: 24px; /* Ajusta el tamaño del ícono */
    height: 24px;
    margin-right: 10px; /* Espacio entre el ícono y el texto */
}


.layout_content {
    width: 80%;
    float: left;
    background-color: #F7F9FA;
}

.content{
	border-top: 1px solid #D9DEE4;
	padding-top :1em;
	min-height: 400px;
}


/* Estilos del menú colapsado */

.vmenu.collapsed {
    width: 5%; /* Ancho reducido cuando el menú está colapsado */
}

.vmenu.collapsed .logo {
    display: none; /* Ocultar la clase logo */
}

.vmenu.collapsed .logo-image {
    width: 100%; /* Hacer que la imagen ocupe todo el ancho del menú */
}

.vmenu.collapsed .logo-image img {
    width: 50%;
    height: auto;
    margin-bottom: 10px;
}

.vmenu.collapsed ul li a {
    flex-direction: column; /* Colocar el ícono encima del texto */
    text-align: center;
    font-size: 10px; /* Reducir el tamaño del texto */
    padding: 5px; /* Reducir el padding */
	margin-bottom: 1em;
}

.vmenu.collapsed ul li a img {
    margin-right: 0; /* Eliminar el margen derecho del ícono */
    margin-bottom: 5px; /* Añadir un margen inferior para separar el ícono del texto */
   
	width: 50%;
    height: auto;
}

.vmenu.collapsed + .layout_content {
    width: 95%; /* El contenido ocupa el resto del ancho disponible */
}


.vmenu.collapsed ul li.submenu > a::after {
    content: ''; /* No muestra nada cuando el menú está colapsado */
}




/* Estilo para la flecha en las opciones con submenú */
.vmenu ul li.submenu > a::after {
    content: '\276F'; /* Unicode para una flecha derecha (>) */
    font-size: 12px;
    margin-left: 10px;
    transition: transform 0.3s ease; /* Transición para girar la flecha */
}

/* Flecha que gira hacia abajo cuando el submenú está abierto */
.vmenu ul li.submenu.open > a::after {
    transform: rotate(90deg); /* Girar la flecha 90 grados */
}


/* Estilo para los submenús */
.vmenu ul li ul.dropdown {
    list-style: none;
    padding-left: 40px; /* Ajusta este valor para alinear el submenú */
    margin: 0;
    display: none; /* Inicialmente oculto */
}

/* Estilo para los enlaces dentro del submenú (sin íconos) */
.vmenu ul li ul.dropdown li a {
    padding: 10px 15px;
    display: flex; /* Usamos flex para alinear el símbolo decorativo */
    align-items: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border-radius: 5px;
    color: #333; /* Color de texto del submenú */
}

/* Añadir un círculo decorativo a las opciones del submenú */
.vmenu ul li ul.dropdown li a::before {
    content: '\25CF'; /* Unicode para un círculo sólido (•) */
    font-size: 10px;
    margin-right: 10px;
    color: #666; /* Color del símbolo decorativo */
}

/* Estilo para cambiar el fondo cuando se pase el ratón por los enlaces del submenú */
.vmenu ul li ul.dropdown li a:hover {
    background-color: #f0f0f0;
}

/* Para asegurar la alineación visual */
.vmenu ul li a, 
.vmenu ul li ul.dropdown li a {
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}


.vmenu-image-element{
	width: 16px;
}


/******* Menu con informacion usuario **********/
#menu_informacion{

    margin: 0 auto -15px;
    padding-bottom: 0.3em;
    padding-top: 0.3em;
    text-align: left;
    width: 100%;
	  
	background-color: #301d6f;
	
	margin-top: 2em;
	margin-bottom: 1em;
		
}

#menu_informacion form{
	margin: 0 0 0 1em;
	width:40%;
	background-color: #301d6f;
}

#menu_informacion label{
	font-size: x-small;
    margin-right: 1em;
	color:white;
}

#menu_informacion select{
	font-size: 0.6em;
	margin: 0;
	width:50%;
}


/******* Formulario login **********/

.formLogin  {    
    width: 35%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra suave al hacer hover */
    border-radius: 15px;
	margin-bottom: 2em;
	
	padding-bottom: 2em;
}

.formLogin h2{
	margin-top: 2em;
	margin-bottom:2em;
}

.formLogin .row{
	display: block;
	text-align: center;
}

.formLogin .row input{
	width: 86%;
    padding: 1em 2%;
}

.formLogin input.bluebutton{
    width: auto;
    padding: 1em 2em;
	margin-top:1em;
	margin-bottom:2em;
}



/********** Footer **********/
div.footer {
	margin: 20px auto auto auto;
	position: relative;
	z-index: 0;
	width: 96%;
	height: 50px;
	overflow: hidden;	
	font-size: small;
	color: #000;
	vertical-align: middle;
	border-top: 1px solid black;
    margin-bottom: 2em;
	padding: 1em 2% 1em 2%;
}

.footer .footerLegal{
	margin-top: 1em;
	width: 40%;
	float: left;
}

.footer .footerLegal a{
	font-size: 12px;
}

.footer .footerLegal span{

}


.footer .footerCopyright{
	margin-top: 1em;
	float: right;
}

.footer .footerCopyright label{
	font-size: 12px;
}

.footer .footerCopyright span{
	margin-left: 0.5em;
	margin-right: 0.5em;
}


/******* Filter  **********/
.filterDiv {
    background: white;
    width: 90%;
    margin: 0 auto;
}

.filterDivTitulo {
    font-size: 16px;
    color: #301d6f;
}

.filterDiv ul {
    border-bottom: 2px solid #E6E9ED;
    padding: 1em;
    margin-bottom: 10px;
}

.filterDiv ul li {
    display: flex;
    justify-content: space-between; /* Espacio entre el título y la flecha */
    align-items: center; /* Alinear verticalmente el contenido */
}

.rowFilter {
    display: flex; /* Usar flexbox para alinear los elementos en una línea */
    align-items: center; /* Alinear verticalmente el contenido */
    margin-bottom: 10px; /* Espacio entre filas */
}


.buttonFilter {
    display: flex;
    justify-content: center; /* Centra el contenido dentro de la fila */
    margin-top: 10px; /* Espacio superior para separar del resto del contenido */
}

.descripcionFilter {
    margin-right: 10px; /* Espacio entre la etiqueta y los campos de entrada */
}

.toggleArrow {
    font-size: 20px;
    color: #301d6f;
    cursor: pointer;
    margin-left: auto; /* Para que ocupe el espacio disponible y se alinee a la derecha */
    transition: transform 0.3s ease;
}

.toggleArrow:hover {
    transform: scale(1.1); /* Aumenta un poco el tamaño al pasar el mouse */
}