/* Paleta de colores */
/*
  Negro: #000000
  Blanco: #FFFFFF
  Gris: #CCCCCC
  Gris Claro: #F0F0F0
  Gris Oscuro: #666666
  Negro Oscuro (hover): #333333
*/

body {
    background-color: #F0F0F0; /* Color de fondo del cuerpo de la página. (Gris Claro) */
    font-family: Arial, sans-serif; /* Tipo de fuente para todo el texto. */
    display: flex; /* Habilita el modelo de caja flexible para alinear elementos. */
    justify-content: center; /* Centra el contenido horizontalmente. */
    align-items: center; /* Centra el contenido verticalmente. */
    height: 100vh; /* Establece la altura al 100% de la ventana del navegador. */
    margin: 0; /* Elimina el margen por defecto del cuerpo. */
}

.login-container {
    background-color: #FFFFFF; /* Color de fondo del contenedor principal. (Blanco) */
    border: 1px solid #CCCCCC; /* Borde del contenedor. (Gris) */
    padding: 2rem; /* Espacio interno del contenedor. */
    border-radius: 8px; /* Borde redondeado del contenedor. */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para dar un efecto de profundidad. */
    text-align: center; /* Alinea el texto del contenedor al centro. */
    max-width: 400px; /* Ancho máximo del contenedor. */
    width: 90%; /* Ancho del contenedor, se adapta a la pantalla. */
}

h1 {
    color: #000000; /* Color del texto del título. (Negro) */
    margin-bottom: 0.5rem; /* Margen inferior del título. */
    font-size: 1.5rem; /* Tamaño de la fuente del título. */
}

p {
    color: #000000; /* Color del texto de los párrafos. (Negro) */
    margin-bottom: 1.5rem; /* Margen inferior de los párrafos. */
    font-size: 0.9rem; /* Tamaño de la fuente de los párrafos. */
}

.input-group {
    margin-bottom: 1rem; /* Margen inferior para agrupar el campo de entrada. */
}

#access-code {
    width: 100%; /* Ancho completo del campo de entrada. */
    padding: 0.75rem; /* Espacio interno del campo de entrada. */
    border: 1px solid #CCCCCC; /* Borde del campo de entrada. (Gris) */
    border-radius: 4px; /* Borde redondeado del campo de entrada. */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total. */
    font-size: 1rem; /* Tamaño de la fuente dentro del campo. */
    color: #000000; /* Color del texto dentro del campo. (Negro) */
}

.btn {
    width: 100%; /* Ancho completo de los botones. */
    padding: 0.75rem; /* Espacio interno de los botones. */
    border: none; /* Elimina el borde de los botones. */
    border-radius: 4px; /* Borde redondeado de los botones. */
    cursor: pointer; /* Cambia el cursor a una mano al pasar por encima. */
    font-size: 1rem; /* Tamaño de la fuente de los botones. */
    margin-bottom: 0.75rem; /* Margen inferior de los botones. */
    transition: background-color 0.3s ease; /* Transición suave al cambiar el color de fondo. */
}

#access-button {
    background-color: #ffb700; /* Color de fondo del botón "Acceder". (Negro) */
    color: #000000; /* Color del texto del botón "Acceder". (Blanco) */
}

#access-button:hover {
    background-color: #55ff00; /* Color de fondo al pasar el mouse por encima. (Negro Oscuro) */
}

#get-code-button {
    background-color: #ffffff; /* Color de fondo del botón "Obtener código". (Blanco) */
    color: #ff8000; /* Color del texto del botón "Obtener código". (Negro) */
    border: 1px solid #ff8000; /* Borde del botón "Obtener código". (Negro) */
}

#get-code-button:hover {
    background-color: #F0F0F0; /* Color de fondo al pasar el mouse por encima. (Gris Claro) */
}

.error-message {
    color: #000000; /* Color del texto del mensaje de error. (Negro) */
    margin-top: 1rem; /* Margen superior del mensaje de error. */
    font-size: 0.8rem; /* Tamaño de la fuente del mensaje de error. */
}

.hidden {
    display: none; /* Oculta el elemento por completo. */
}

/* Estilo para el texto entre los botones */
.separator-text {
    margin: 1.5rem 0 1rem 0; /* Margen para separar el texto de los botones (arriba, derecha, abajo, izquierda). */
    font-weight: bold; /* Hace el texto más grueso. */
    text-transform: uppercase; /* Convierte el texto a mayúsculas. */
    font-size: 0.8rem; /* Tamaño de la fuente del texto separador. */
    color: #666666; /* Color del texto. (Gris Oscuro) */
}

/* Ajustes para la responsividad */
@media (max-width: 480px) {
    .login-container {
        padding: 1.5rem; /* Reduce el espacio interno en pantallas pequeñas. */
    }
    h1 {
        font-size: 1.25rem; /* Reduce el tamaño del título en pantallas pequeñas. */
    }
}