/* CONFIGURACIONES GENERALES  */

html,
body {
  margin: 0; /* Que no tenga margenes */
  padding: 0; /* Que no tenga margenes */
  height: 100%; /* Que ocupe toda la altura de la página */
  font-family: Arial, sans-serif; /* Tipo de fuente */
  background-color: #fff; /* Color de fondo */
  display: flex; /* Que los elementos se mantengan centrados */
  flex-direction: column;
  align-items: center;
}

/* TITULOS PAGINA DE INICIO  */
/* "Registra tus datos" y "Escanear Código de barras"  */

h2 {
  margin: 10px 0;
  font-size: 3.5em;
}

/* Mensaje en la parte inferior que te dice cuales son las opciones que tienes seleccionadas */
#estadoActual {
  font-size: 3em; /* Tamaño del texto */
  color: green; /* Color del texto */
  margin-bottom: 10px; /* Separación de la parte inferior */
}

/* Configuración del mensaje que se muestra si el código fue correctamente escaneado o fue error  */
#mensaje {
  margin-top: 10px;
  font-size: 3.5em; /* Tamaño del mensaje */
  color: #333; /* Color del mensaje de codigo correcto, el color rojo de Codigo erroneo ocurre en JavaScript y se da si ocurre el evento del error  */
}

/* Son los titulos de la selección de usuario, del ingreso de la cantidad */
.titulos {
  font-size: 3em;
  color: #333;
  display: block; /* Esto los separa para que no se vean en la misma linea que el cuadro de seleccion */
  margin-bottom: 10px;
}

/* TAMAÑO DE PANTALLA DE ESCANEO   */
#reader {
  width: 100vw; /* Define el % del ancho a utilizar de la pantalla */
  max-width: 800px; /* el máximo en pixeles en el caso de una pantalla grande */
  margin: 0 auto;
  max-height: 40vh; /* El porcentaje de la altura del visor, (el cuadro blanco) cuanto de la pantalla ocupara el visor */
  overflow: hidden;
  border-radius: 10px;
}

#reader video {
  object-fit: cover; /* Mantiene el espacio del video de la cámara */
  width: 100%;
  height: 100%;
}

/* Para configurar el menú desplegable de usuario, bodega y zona */
.select-estilizado {
  font-size: 3.5em;
  padding: 12px 20px;
  border: 2px solid #007bff;
  border-radius: 8px;
  background-color: #f0f8ff;
  color: #333;
  appearance: none;
  width: 90vw;
  max-width: 600px;
}

/* El estilo, tamaño y color del botón confirmar al seleccionar tus datos */
.boton-confirmar {
  font-size: 3.5em;
  padding: 15px 30px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  margin-top: 80px;
}

/* El estilo, tamaño y color del botón enviar al ingresar una cantidad */
.boton-enviar {
  font-size: 3.5em;
  padding: 15px 30px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  margin-top: 20px;
}

/* El estilo y color del botón "Cambiar usuario, bodega o zona", (Le puedes agregar más opciones) */
.mttop-botoncambio {
  margin-top: 20px !important;
  background-color: #ff9100 !important;
}

/* Movimiento del botón al pasar por encima*/
.boton-confirmar:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

/* Mouse sobre el botón, el color se hace más oscuro*/
.boton-confirmar:active {
  background-color: #004080;
  transform: translateY(0);
}

/* Cuadro para ingresar la cantidad */
input[type="number"] {
  font-size: 3em;
  padding: 6px;
  width: 250px;
  text-align: center;
}

/* INICIO Boton de modo automático, configuraciones de colores, posiciones y fondo */
.switch-container {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 3em;
  margin-top: 20px;
  background-color: #eee;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.switch-label {
  color: #333;
  font-weight: bold;
}

.switch-container input {
  display: none;
}

.slider {
  position: relative;
  width: 90px;
  height: 46px;
  background-color: #ccc;
  border-radius: 34px;
  transition: 0.4s;
  cursor: pointer;
}

.slider::before {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:checked + .slider::before {
  transform: translateX(44px);
}

.slider.round {
  border-radius: 34px;
}

/* INICIO Menú de seleccion de nivel */
#escaner-container {
  /* Esta instrucción es para dejar el menú de seleccion al lado del visor de la camara */
  display: flex;
  align-items: flex-start;
  gap: 15px;
  width: 100vw;
  max-width: 850px;
  justify-content: center;
}

/* Para dejar las cajas de los niveles de forma vertical */
#nivel-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* El estilo de cada cajita */
.nivel-box {
  width: 80px;
  height: 80px;
  border: 3px solid #ccc;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em;
  font-weight: bold;
  color: #ccc;
  cursor: pointer;
  transition: all 0.2s;
}

/* La cajita cuando está seleccionada */
.nivel-box.selected {
  background-color: #007bff;
  color: white;
  border-color: #0056b3;
}

/* FIN Menú de seleccion de nivel */

/* Esto para mantener centrada la cantidad cuando digitas el número */
#seleccionDatos,
#formCantidad {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

/* Para cuando pasas por encima el mouse en el cuadro */
.select-estilizado:hover {
  border-color: #0056b3;
}

/* Colores de los cuadros */
.select-estilizado:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.4);
}