/*--------------------------------------*/
/*---ESTILO PARA EL ARCHIVO INDEX.PHP---*/
/*--------------------------------------*/

/* Estilo para el cuerpo del documento */
body {
    font-family: Arial, sans-serif; /* Fuente de texto Arial o sans-serif */
    background-color: #1d2327; /* Color de fondo gris claro */
    color: #333; /* Color del texto gris oscuro1D2327 */
    margin: 0; /* Margen exterior 0 */
    padding: 0; /* Relleno interior 0 */
    display: flex; /* Usar un diseño flexible */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

/* Estilo para el contenedor principal */
.container {
    width: 90%; /* Ancho del 90% del contenedor padre */
    max-width: 400px; /* Ancho máximo de 400 píxeles */
    background-color: #fff; /* Color de fondo blanco */
    padding: 30px; /* Relleno interior de 30 píxeles */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Sombra de cuadro con una ligera opacidad */
    border-radius: 10px; /* Bordes redondeados de 10 píxeles */
    text-align: center; /* Alinear el texto al centro */
}

/* Estilo para los encabezados h2 */
h2 {
    margin-bottom: 20px; /* Margen inferior de 20 píxeles */
    color: #444; /* Color del texto gris medio */
}

/* Estilo para las etiquetas de los campos de formulario */
label {
    display: block; /* Mostrar como un bloque */
    text-align: left; /* Alinear el texto a la izquierda */
    margin-bottom: 10px; /* Margen inferior de 10 píxeles */
    font-weight: bold; /* Texto en negrita */
    color: #555; /* Color del texto gris oscuro */
}

/* Estilo para los campos de texto y contraseña */
input[type="text"],
input[type="password"] {
    width: 100%; /* Ancho del 100% del contenedor padre */
    padding: 10px; /* Relleno interior de 10 píxeles */
    margin-bottom: 20px; /* Margen inferior de 20 píxeles */
    border: 1px solid #ccc; /* Borde de 1 píxel con color gris claro */
    border-radius: 5px; /* Bordes redondeados de 5 píxeles */
    box-sizing: border-box; /* Incluir el borde y el relleno en el ancho total del elemento */
}

/* Estilo para el botón de envío */
input[type="submit"] {
    background-color: #007bff; /* Color de fondo azul */
    color: #fff; /* Color del texto blanco */
    border: none; /* Sin borde */
    padding: 10px 20px; /* Relleno interior de 10 píxeles arriba y abajo, y 20 píxeles a los lados */
    text-align: center; /* Alinear el texto al centro */
    font-size: 16px; /* Tamaño de fuente de 16 píxeles */
    cursor: pointer; /* Cambiar el cursor a una mano al pasar sobre el botón */
    border-radius: 5px; /* Bordes redondeados de 5 píxeles */
    transition: background-color 0.3s; /* Transición suave de 0.3 segundos para el cambio de color de fondo */
    width: 100%; /* Ancho del 100% del contenedor padre */
}

/* Estilo para el botón de envío cuando se pasa el cursor por encima */
input[type="submit"]:hover {
    background-color: #0056b3; /* Color de fondo azul oscuro */
}

/* Estilo para los mensajes de error */
.error-message {
    color: red; /* Color del texto rojo */
    margin-bottom: 20px; /* Margen inferior de 20 píxeles */
}

/* estilo_index.css */
.register-link {
    display: block;
    margin-top: 10px;
    text-align: center;
    color: #007BFF;
    text-decoration: none;
}

.register-link:hover {
    text-decoration: underline;
}

/* Media Queries para pantallas pequeñas */
@media (max-width: 600px) {
    .container {
        width: 95%; /* Ancho del 95% del contenedor padre */
        padding: 20px; /* Relleno interior de 20 píxeles */
    }
}