/*Estilos*/
/*Estilos para el login*/

/*Estilo del header*/
.navbar-custom {
    background-color: #f87c24;
}
/*Estilo solo para el DIV que contiene la imagen del login para centrarla */
.encabezado-imagen{
    display: flex; /* Activa Flexbox en el contenedor */
    justify-content: center; /* Centra la imagen horizontalmente */
}
/*Estilo que utilizaremos para el encabezado del usuario logueado*/
.nav-principal{
    background-color: #f87c24; /* O el color que prefieras */
    padding: 10px;
    border: 1px solid black;
}
.nav-contenedor{
    display: flex; /* Activa Flexbox para el contenedor */
    align-items: center; /* Alinea los elementos verticalmente al centro */
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    border: 1px solid black; /*QUITAR DESPUÉS*/
}
/*Estilos para el menu*/
.menu-alternar {
    display: none; /* Oculta el botón en pantallas grandes */
    background-color: #333; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    padding: 10px 20px; /* Espacio interno del botón */
    border: none; /* Sin borde */
    cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el botón */
  }
  .menu-contenedor { /* Contenedor para el menú y la información del usuario */
    display: flex; /* Activa Flexbox para el contenedor */
    align-items: center; /* Alinea los elementos verticalmente al centro */
  }
  #menu {
    list-style: none; /* Elimina los bullets de la lista */
    margin: 0; /* Sin margen externo */
    padding: 0; /* Sin espacio interno */
    display: flex; /* Activa Flexbox para el menú */
  }  
  #menu li a {
    display: block; /* Convierte los enlaces en elementos de bloque */
    padding: 10px; /* Espacio interno de los enlaces */
    text-decoration: none; /* Elimina la decoración de los enlaces */
    color: #333; /* Color del texto de los enlaces */
  }
  .flex-contenedor{ /* Para el contenedor de los iconos del menú */
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en varias líneas */
    justify-content: center; /* Centra los elementos horizontalmente */
    gap: 20px; /* Espacio entre las imágenes */
    margin: 10%;   
}
  .imagen-contenedor { /* Contenedor para cada imagen */
    width: 140px; /* Ancho fijo para las imágenes */
  }
  .imagen-contenedor img {
    width: 100%; /* La imagen ocupa todo el ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Evita espacio en blanco debajo de la imagen */
  }

/*Estilo para ajustar el tamaño de la imagen del logo*/
/*Lo aplicar[a de forma general*/
.gitamudlap-logo{
    width: 60px;
    height: auto;
}
/*Estilo para la imagen de la información del usuario*/
  .user-informacion {
    display: flex; /* Activa Flexbox para el contenedor de la información del usuario */
    align-items: center; /* Alinea los elementos verticalmente al centro */
    margin-left: 20px; /* Espacio entre el menú y la información del usuario */
  }
  .user-informacion img {
    width: 30px; /* Ancho del icono de usuario */
    height: auto; /* Altura automática para mantener la proporción */
    margin-right: 10px; /* Espacio entre el icono y el texto */
  }
/*----------------------------------------------------------------*/
/*Estilo para el header que solo utilizaremos para el Login*/
.nav-login{
    background-color: #f87c24;
    padding: 10px; 
}

/*Estilo para el header de las ventanas emergentes */
.nav-emergente{
  background-color: #f87c24;
  padding: 10px; 
  z-index: 1;
  position: relative;
  height: 100px;
  border-bottom-left-radius: 40px; /* Borde redondeado inferior izquierdo */
  border-bottom-right-radius: 40px; /* Borde redondeado inferior derecho */
}

/*Formulario login*/
.caja-login {
    text-align: center;
    margin-top: 10%;   /*margen arriba para librar el header*/ 
    margin-left: auto; /*margen izquierdo*/
    margin-right: auto; /*margen derecho*/
    width: 400px; /*ancho */
    height: 382px; /*alto*/
    background-color: #bbb6b6; /* Fondo gris */
    border: 3px solid rgb(14, 51, 15); /*color del borde*/
    border-radius: 40px; /* Bordes redondeados */
    display: flex; /* Esto es para centrar el contenido verticalmente */
    flex-direction: column; /* Esto también es para centrar el contenido verticalmente */
    align-items: center; /*ajustar los elementos al centro*/
    justify-content: center; /* Centra el contenido verticalmente, para este caso, las celdas estarán en columna*/
}

/*Estilo de los botones -- Aplicado de forma general--*/
/*Estilos para los botones*/
.boton-naranja {
    background-color: #f87c24; /* Color naranja */
    color: white; /* Color de la letra blanco */
    padding: 10px 20px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar el cursor al pasar el ratón */
    font-size: 16px; /* Tamaño de la fuente */
    transition: background-color 0.3s ease; /* Transición suave al cambiar el color de fondo */
    
  }

  /*Estilo para ocultar el botón en las páginas específicas */
    #pagina-menu-a .menu-alternado,
    #pagina-menu-s .menu-alternado,
    #pagina-menu-u .menu-alternado {
    display: none;
    }

  /*Estilo para el botón cuando se posicione encima*/
  .boton-naranja:hover {
    border-collapse: collapse; /* Colapsar bordes para el doble borde */ 
    background-color: #838484; /* Cambiar color de fondo a gris */
  }

  /*Area del Footer*/
  /* Estilo personalizado para el footer */
.pie-pagina {
    background-color: #838484; /*Color de fondo*/
    padding: 20px 0; /*espacio entre el contenido y el borde*/
    position: fixed; /*Fijar su posición en relación a la ventana*/
    bottom:0; /*posicionarlo en la parte inferior de la ventana*/
    width: 100%; /*Extender el ancho por toda la ventana*/
    text-align: center; /*Centrar el contenido*/    
}
.pie-pagina img {
    width: 100px; /* Reducir el tamaño de la imagen */
    height: auto; /* Mantener la proporción de la imagen */
}
body { /*Ajustamos para que los elementos no se vayan atrás del footer */
    padding-bottom: 70px; /* Ajusta el valor según la altura de tu footer */
}
/* Estilo para el contenedor de los botones */
.contenedor-botones {
    border: 1px solid black;
    display: flex; /* Activar flexbox */
    justify-content: center; /* Centrar horizontalmente */
    padding: 4px; /* espacio arriba y abajo */
    align-items: center; /* Centrar verticalmente */
    gap: 10%; /*espacio entre los botones */  
}
/*Sección de estilos de PRUEBA*/
  /*Estilos para el contenedor de PRUEBA*/
  .contenedor-prueba {
    border: 1px solid black;
    padding: 20px;    
  }

  /*Estílo para el contenedor de las ventanas emergentes donde se ubicarán los formularios*/
  .caja {
    text-align: center;
    top: 98px;
    margin-left: 10%; /*margen izquierdo*/
    margin-right: auto; /*margen derecho*/
    width: 320px; /*ancho */
    height: 450px; /*alto*/
    background-color: #ebe3e3; /* Fondo gris */
    border: 3px solid rgb(14, 51, 15); /*color del borde*/
    border-radius: 40px; /* Bordes redondeados */
    display: flex; /* Esto es para centrar el contenido verticalmente */
    flex-direction: column; /* Esto también es para centrar el contenido verticalmente */
    align-items: center; /*ajustar los elementos al centro*/
    justify-content: center; /* Centra el contenido verticalmente, para este caso, las celdas estarán en columna*/
    z-index: 2;
    position: absolute;
    gap: 5px; /*Espacio entre los elementos */
  }
  .elementos-formulario{
    display: flex;
    flex-direction: column; /* Alinea los elementos en columna */
    align-items: flex-start; /* Alinea los elementos a la izquierda */
    margin-left: 5%;
    gap: 3px;
  }

  .contenedor-botones {
    border: 5px;
    padding: 20px;  
  }


  /* Estilos para modulo usuarios de sistema */
  /*Estilos aplicables para el contenedor arriba de la tabla inicial */
  .icono{
    width: 50px;
    height: auto;
    margin-right: 10px;
  }
  .contenedor {
    margin-left: 20%; /*espacio izquierdo*/
    margin-right: 20%; /*espacio derecho*/
    margin-top: 5%;
    margin-bottom: 5%;
    display: flex; /* Activar flexbox */
    flex-direction: row; /* Cambia la dirección a fila */
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    align-items: center; /* Alinea los elementos verticalmente al centro */
    gap: 10px; /* Espacio entre los elementos */
  }
  
  .elementos-izquierda, 
  .elementos-derecha {
    display: flex;
    flex-direction: row; /* Apila los elementos verticalmente */
    align-items: flex-start; /* Alinea los elementos a la izquierda */
  }
  
  /*Caja para elementos de hardware*/
    /*Estílo para el contenedor de las ventanas emergentes donde se ubicarán los formularios*/
  .caja-hardware {
    text-align: center;
    top: 98px;
    margin-left: 10%; /*margen izquierdo*/
    margin-right: auto; /*margen derecho*/
    width: 320px; /*ancho */
    height: 450px; /*alto*/
    background-color: #ebe3e3; /* Fondo gris */
    border: 3px solid rgb(14, 51, 15); /*color del borde*/
    border-radius: 40px; /* Bordes redondeados */
    display: flex; /* Esto es para centrar el contenido verticalmente */
    flex-direction: column; /* Esto también es para centrar el contenido verticalmente */
    align-items: center; /*ajustar los elementos al centro*/
    justify-content: center; /* Centra el contenido verticalmente, para este caso, las celdas estarán en columna*/
    z-index: 2;
    position: absolute;
    gap: 5px; /*Espacio entre los elementos */
  }
  

/*SECCIÓN DE LOS MEDIA QUERIES */
/*Media Queries tamaño grande - Navegador*/
@media (min-width: 1080px) and (max-width: 3000px){

}

/*Media Queries tamaño mediano - Tablet*/
@media (min-width: 768px) and (max-width: 1079px){

}


/*Media Queries tamaño pequeño - smartphone*/
@media (max-width: 767px){
    .caja-login{
        margin-top: 35%; /*Aumenta el margen superior para centrar la caja*/
        width: 300px; /*ancho */
        height: 300px; /*alto*/
    }
    .input-reducido{
        width: 150px; /*ancho*/
        height: 25px; /*alto*/
        font-size: 12px; /*tamaño de la fuente*/
        padding: 3px;
        /*border-radius: 30px;*/ /*revisarlo si se deja*/
    }
    .menu-alternado {
        display: block; /* Muestra el botón en pantallas pequeñas */
      }
    
      #menu {
        flex-direction: column; /* Apila los elementos del menú verticalmente */
        display: none; /* Oculta el menú inicialmente */
      }
    
      /* Mostrar el menú al hacer clic en el botón */
      #menu .menu-alternado:focus + .menu-contenedor ul, 
      #menu .menu-alternado:active + .menu-contenedor ul {
        display: block; /* Muestra el menú */
      }    
      .menu-contenedor {
        flex-direction: column; /* Apila el menú y la información del usuario */
        align-items: flex-start; /* Alinea los elementos a la izquierda */
      }    
      #menu li {
        margin-bottom: 5px; /* Espacio inferior entre los elementos del menú */
      }
      /*Estilo para el contenedor del menú y los elementos del menú*/
      .flex-contenedor{
        gap: 10px; /* Reduce el espacio entre imágenes en pantallas pequeñas */
    }
    /*Para elementos del modulo usuarios sistema*/
    .contenedor {
        margin-left: 5%;
        margin-right: 5%;
        flex-direction: row; /* Apila los elementos verticalmente */
        align-items: center; /* Centra los elementos horizontalmente */
      }
    
      .elementos-izquierda, .elementos-derecha {
        justify-content: center; /* Centra los elementos en pantallas pequeñas */
      }
      .caja {
             width: 80%; /* Ajustar el ancho al 90% del ancho de la pantalla */
            }
        }
             
}