body {
  font-family: Arial, sans-serif;
  background: rgb(162, 208, 118);
  background: linear-gradient(128deg, rgba(162, 208, 118, 1) 0%, rgba(224, 224, 202, 1) 50%, rgba(206, 177, 117, 1) 100%);
  min-height: 100vh; /* Asegura que el body ocupe al menos la altura de la ventana */
  margin: 0; /* Eliminar el margen predeterminado del body */
  display: flex; /* Usar flexbox para asegurarse de que los elementos secundarios se alineen correctamente */
  flex-direction: column; /* Organizar los elementos en columna */
}


.header {
  background-color: #1f4f3d; /* Color de la cabecera */
  color: white; /* Color del texto de la cabecera */
  padding: 30px;
  text-align: center;
  position: relative; /* Para asegurar que el sidebar se posicione correctamente */
  z-index: 1000; /* Para que la cabecera este por encima del contenido */
}

.sidebar {
  height: calc(100% - 60px); /* Restar la altura del navbar */
  width: 250px; /* Ancho del sidebar */
  position: fixed;
  top: 60px; /* Colocar el sidebar debajo del navbar */
  left: 0;
  background-color: #5c7916; /* Color de fondo del sidebar */
  padding: 20px;
  transition: transform 0.3s ease;
  transform: translateX(-100%); /* Oculto por defecto */
}

.sidebar.active {
  transform: translateX(0); /* Mostrar cuando tiene la clase 'active' */
}

.sidebar h2 {
  color: white; /* Color del título del sidebar */
}

.sidebar ul {
  list-style: none; /* Eliminar el estilo de lista */
  padding: 0; /* Eliminar padding */
}

.sidebar ul li {
  margin: 10px 0; /* Espacio entre los elementos de la lista */
  margin-left: 20px;
}

.sidebar ul li a {
  color: white; /* Color del texto de los enlaces */
  text-decoration: none; /* Sin subrayado */
  font-weight: bold; /* Negrita para resaltar */
  display: block;
  padding: 10px;
  text-align: left;
}

.sidebar ul li a:hover {
  background: #1f4f3d;
  width: 100%;
}
.submenu {
  display: none; /* Ocultar el submenú por defecto */
  padding-left: 20px; /* Indentacion para el submenú */
}

.submenu.show {
  display: block; /* Mostrar el submenú cuando se agrega la clase 'show' */
}


.main-content {
  margin-left: 0; /* Margen inicial del contenido principal */
  transition: margin-left 0.3s ease;
}

.main-content.active {
  margin-left: 250px; /* Desplazar hacia la derecha cuando el sidebar esta activo */
}

.menu-toggle {
  background-color: #1f4f3d; /* Color del boton del menú */
  color: white; /* Color del texto */
  font-size: large;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 20px; /* Ajusta según sea necesario */
  left: 20px; /* Ajusta según sea necesario */
}

h2 {
  color: #2a7b5d; /* Color del texto de los encabezados */
  text-align: center; /* Centrar el texto */
}


.button {
  background: rgb(207,184,102);
  background: linear-gradient(90deg, rgba(207,184,102,1) 11%, rgba(2,80,45,1) 100%);
  color: white; /* Color del texto del boton */
  font-size: large;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 20px; /* Bordes redondeados */
  display: inline-block;
  margin: 10px; /* Espacio entre botones */
  width: 200px;
  height: 50px;
  align-items: center;
}

.button:hover {
  transform: scale(1.1); /* Efecto de aumento al pasar el raton */
}
.titulo1{
  color: #1f4f3d;
  font-family: monospace;
  font-size: x-large;
  text-align: center;
}
.botonesInicio{
  text-align: center;
  position: relative; /* Posiciona el contenedor de botones */
  transition: transform 0.3s ease; /* Transicion suave para el movimiento */
}
/* Posicion de los botones cuando el sidebar esta activo */
.sidebar.active ~ .botonesInicio {
  transform: translateX(130px); /* Mueve los botones a la derecha */
}


.botonesfont {
  margin: 0 10px; /* Espacio entre íconos */
  color: white;
  padding: 20px;   /* Espaciado interno */
  border: 4px solid  #5c7916;; /* Borde blanco */
  border-radius: 30px; /* Bordes redondeados */
  font-size: 2rem; /* Tamanno mas grande para los íconos */
  transition: transform 0.3s; /* Animacion al pasar el raton */
  background-color: #1f4f3d;
}

.botonesfont:hover {
  transform: scale(1.1); /* Efecto de aumento al pasar el raton */
  outline: none;
}
.center-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
}

.user-profile {
  display: flex;
  align-items: center;
  color: white;
  font-size: 18px;
  justify-content: right;
}

.user-profile i {
  font-size: 24px;
  margin-right: 10px;
}

.user-profile span {
  margin-right: 5px;
}

.user-profile .fa-caret-down {
  margin-left: 5px;
}
.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1;
  width: 150px;
}

.dropdown-menu.show {
  display: block;
  background-color:#5c7916;;
 
}

.dropdown-item {
  padding: 10px;
  text-decoration: none;
  display: block;
  font-size: 16px;
  color: white;
  margin-top: -2px;
}

.dropdown-menu.show:hover {
  background-color: #1f4f3d  ;
}

/* ESTILOS DE LOGIN*/
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20px;
  text-align: center;
  margin-top: -100px;
}

.logo img {
  width: 100px; /* Ajustamos el tamanno del logo */
  margin: auto;
}

h1 {
  font-size: 26px;
  color: #006400;
  margin: 20px 0;
  text-align: center;
}

.input-container {
  display: flex;
  align-items: center;
  margin: 10px 0;
  border: 2px solid #006400;
  padding: 5px;
  border-radius: 5px;
}


.input-container label {
  font-size: 20px;
  color: #006400;
  margin-right: 10px;
}

.input-container input {
  border: none;
  outline: none;
  padding: 10px;
  font-size: 16px;
}

.buttonLogin {
  background: rgb(207,184,102);
  background: linear-gradient(90deg, rgba(207,184,102,1) 11%, rgba(2,80,45,1) 100%);
  color: white; /* Color del texto del boton */
  font-size: large;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 20px; /* Bordes redondeados */
  display: inline-block;
  margin: 10px; /* Espacio entre botones */
  width: 200px;
  height: 50px;
  align-items: center;
  text-align: center;
}

footer {
  position: absolute;
  bottom: 10px;
  font-size: 12px;
  color: #006400;
}
.input-group {
  display: flex;
  align-items: center;
  justify-content: center; /* Alinea los elementos horizontalmente */
  margin: 15px 0;
  width: 500px; /* Ajustamos el ancho del grupo */
  text-align: center;
}

.input-group i {
  font-size: 24px;  /* Aumentamos un poco el tamanno del ícono */
  color: #006400;
  margin-right: 10px;  /* Separacion entre el ícono y el input */
}

.input-group input {
  width: 100%; /* Hacemos que el input ocupe todo el espacio restante */
  border: 2px solid #006400;
  padding: 10px;
  border-radius: 20px;
  outline: none;
  font-size: 16px;
  box-sizing: border-box;

}
a {
  text-decoration: none;
  color: #0044cc;
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}
.tituloLogin{
  color: #1f4f3d;
  font-family: monospace;
  font-size: xx-large;
  text-align: center;
}
#Registrar{
  background: linear-gradient(90deg, rgba(207,184,102,1) 11%, rgba(2,80,45,1) 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* Estilo del boton "Entrada" */
.botonEntrada {
  background: linear-gradient(90deg, rgba(207,184,102,1) 11%, rgba(2,80,45,1) 100%);
  color: white;
  width: 100px;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
}
.BotonEntrada:hover {
  background: linear-gradient(90deg, #6a8f3f, #254d01);
}
/* Estilo del boton "Salida" */
.botonSalida {
  background: linear-gradient(90deg, rgba(207,184,102,1) 11%, rgba(2,80,45,1) 100%);
  color: white;
  width: 100px;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
}
.BotonSalida:hover {
  background: linear-gradient(90deg, #6a8f3f, #254d01);
}

/*BI*/
iframe {
  border: none;
  width: 100%;
  height: 600px;
  margin-bottom: 20px;
}
.qr-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.bi{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: auto;
  margin: 20px;
  height: auto;
}

.messages {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  color: rgb(4, 88, 109); /* Cambia este color según el disenno */
  font-weight: bold;
}
.messages li {
  margin: 5px 0;
}
.botonGuardar{
  background: linear-gradient(90deg, rgba(207,184,102,1) 11%, rgba(2,80,45,1) 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

button, a {
  outline: none;
}
i {
  outline: none; /* Elimina cualquier línea o borde */
  border: none; /* Por si hay un borde predeterminado */
  box-shadow: none; /* Elimina cualquier sombra aplicada */
}
i:focus, i:active {
  outline: none;
  box-shadow: none;
  border: none;
}