/* Variables CSS para una gestión de colores más sencilla */
:root {
    --primary-color: #2c3e50; /* Azul oscuro - casi negro, para títulos y texto importante */
    --secondary-color: #e74c3c; /* Rojo para acentos, si es necesario, no usado directamente en formularios */
    --text-color: #34495e; /* Gris oscuro para texto principal */
    --background-color: #ecf0f1; /* Gris claro para el fondo general de la página */
    --input-border-color: #bdc3c7; /* Gris suave para los bordes de los campos de entrada */
    --input-focus-color: #3498db; /* Azul para el borde de los campos al enfocar */
    --button-bg-color: #3498db; /* Azul vibrante para el fondo de los botones */
    --button-hover-color: #2980b9; /* Azul más oscuro para el estado hover de los botones */
    --error-color: #c0392b; /* Rojo para los mensajes de error */
    --success-color: #2ecc71; /* Verde para mensajes de éxito (añadido para consistencia) */
}

/* Estilos generales del cuerpo de la página */
body {
    font-family: 'Roboto', sans-serif; /* Fuente principal para el texto */
    background-color: var(--background-color); /* Color de fondo general */
    margin: 0; /* Elimina el margen predeterminado del body */
    display: flex; /* Habilita Flexbox para centrar el contenido */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center;     /* Centra el contenido verticalmente */
    min-height: 100vh;       /* Asegura que el body ocupe al menos el 100% de la altura de la ventana */
    color: var(--text-color); /* Color de texto predeterminado */
    padding: 20px; /* Espaciado interno para evitar que el contenido toque los bordes en pantallas pequeñas */
    box-sizing: border-box; /* Incluye padding y borde en el tamaño total del elemento */
}

/* Estilo del contenedor principal de los formularios (Login, Registro, Token) */
.login-container {
    background-color: #ffffff; /* Fondo blanco para el contenedor */
    padding: 40px; /* Espaciado interno */
    border-radius: 10px; /* Esquinas redondeadas */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Sombra suave para darle profundidad */
    width: 100%; /* Ocupa el 100% del ancho disponible (hasta max-width) */
    max-width: 400px; /* Ancho máximo para el contenedor del formulario */
    text-align: center; /* Centra el texto dentro del contenedor (ej. títulos) */
}

/* Estilo para los títulos (h2) dentro de los formularios */
h2 {
    font-family: 'Oswald', sans-serif; /* Fuente específica para los títulos */
    color: var(--primary-color); /* Color oscuro para los títulos */
    margin-bottom: 30px; /* Espacio inferior */
    font-size: 2.2em; /* Tamaño de fuente */
    text-transform: uppercase; /* Texto en mayúsculas */
    letter-spacing: 1px; /* Espaciado entre letras */
}

/* Estilo para el formulario */
form {
    display: flex; /* Habilita Flexbox para los elementos del formulario */
    flex-direction: column; /* Coloca los elementos en una columna */
    gap: 20px; /* Espacio entre los elementos del formulario (labels, inputs, botón) */
}

/* Estilo para el grupo de formulario (label + input) */
.form-group {
    text-align: left; /* Alinea el label y el input a la izquierda */
}

/* Estilo para las etiquetas de los campos */
label {
    display: block; /* Hace que la etiqueta ocupe su propia línea */
    text-align: left; /* Asegura que el texto de la etiqueta esté a la izquierda */
    margin-bottom: 5px; /* Espacio entre la etiqueta y el campo de entrada */
    font-weight: bold; /* Texto en negrita */
    color: var(--primary-color); /* Color de la etiqueta */
}

/* Estilo para los campos de entrada de texto, email y contraseña */
input[type="text"],
input[type="email"],
input[type="password"] {
    width: calc(100% - 20px); /* Ocupa el 100% del ancho del padre menos el padding horizontal */
    padding: 12px 10px; /* Espaciado interno del campo */
    border: 1px solid var(--input-border-color); /* Borde suave */
    border-radius: 5px; /* Esquinas redondeadas */
    font-size: 1em; /* Tamaño de fuente */
    outline: none; /* Elimina el contorno azul al enfocar en algunos navegadores */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave al enfocar */
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
}

/* Estilo para los campos de entrada cuando están enfocados */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: var(--input-focus-color); /* Color del borde al enfocar */
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); /* Sombra suave al enfocar */
}

/* Estilo para el botón de envío */
input[type="submit"] {
    background-color: var(--button-bg-color); /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    padding: 12px 25px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Esquinas redondeadas */
    font-size: 1.1em; /* Tamaño de fuente */
    font-weight: bold; /* Texto en negrita */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves para hover/active */
    margin-top: 10px; /* Espacio superior */
    letter-spacing: 0.5px; /* Espaciado entre letras */
    text-transform: uppercase; /* Texto en mayúsculas */
}

/* Estilo para el botón de envío al pasar el mouse */
input[type="submit"]:hover {
    background-color: var(--button-hover-color); /* Color más oscuro al pasar el mouse */
    transform: translateY(-2px); /* Pequeño efecto de levantamiento */
}

/* Estilo para el botón de envío al hacer clic */
input[type="submit"]:active {
    transform: translateY(0); /* Vuelve a la posición normal al hacer clic */
}

/* Estilo para los mensajes de error */
.error-message {
    color: var(--error-color); /* Color del texto de error */
    background-color: rgba(192, 57, 43, 0.1); /* Fondo translúcido de error */
    border: 1px solid var(--error-color); /* Borde de error */
    padding: 10px; /* Espaciado interno */
    border-radius: 5px; /* Esquinas redondeadas */
    margin-bottom: 20px; /* Espacio inferior */
    font-size: 0.95em; /* Tamaño de fuente */
    text-align: center; /* Texto centrado */
}

/* Estilo para los mensajes de éxito (puedes usarlo en process_register.php) */
.success-message {
    color: var(--success-color); /* Color del texto de éxito */
    background-color: rgba(46, 204, 113, 0.1); /* Fondo translúcido de éxito */
    border: 1px solid var(--success-color); /* Borde de éxito */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 0.95em;
    text-align: center;
}


/* Estilos para enlaces secundarios (como "Regístrate aquí" o "Iniciar sesión") */
.register-link, /* Clase usada en login.php */
.return-link {  /* Clase usada en register.php y verify_token.php */
    display: block; /* Para que ocupe su propia línea */
    margin-top: 25px; /* Espacio superior */
    font-size: 0.95em; /* Tamaño de fuente ligeramente más pequeño */
    color: var(--text-color); /* Color de texto similar al general */
    text-decoration: none; /* Quitamos el subrayado por defecto del párrafo */
    transition: color 0.3s ease; /* Transición suave para el color del texto */
}

/* Estilo para el enlace (<a>) dentro de los párrafos secundarios */
.register-link a,
.return-link a {
    color: var(--button-bg-color); /* Color azul similar al botón principal */
    font-weight: bold; /* Texto en negrita */
    text-decoration: none; /* Sin subrayado */
    transition: color 0.3s ease; /* Transición suave para el color del enlace */
}

/* Estilo para el enlace al pasar el mouse */
.register-link a:hover,
.return-link a:hover {
    color: var(--button-hover-color); /* Color más oscuro al pasar el mouse */
    text-decoration: underline; /* Subrayado al pasar el mouse */
}


/* Ajustes responsivos para pantallas pequeñas (smartphones) */
@media (max-width: 500px) {
    .login-container {
        padding: 30px 20px; /* Reduce el padding en pantallas pequeñas */
        border-radius: 0; /* Bordes rectos para una apariencia de "pantalla completa" */
        box-shadow: none; /* Elimina la sombra en pantallas pequeñas */
    }

    h2 {
        font-size: 1.8em; /* Reduce el tamaño del título */
    }
}