/* style.css */

/* --- Variables y Reset Básico --- */
:root {
    --dark-bg: #101010; /* Fondo muy oscuro, casi negro */
    --primary-color: #007bff; /* Azul brillante para el resplandor/énfasis */
    --text-color: #ffffff;
    --button-bg: #4a4a4a; /* Gris oscuro para el botón por defecto */
    --button-hover-bg: #636363; /* Gris más claro al pasar el mouse */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif; /* Usamos Poppins para un toque moderno y profesional */
    background-color: var(--dark-bg);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Asegura que ocupe toda la altura de la vista */
    overflow: hidden; /* Previene barras de desplazamiento si los efectos de luz se salen un poco */

}

/* --- Contenedor Principal --- */
.welcome-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10; /* Asegura que el contenido esté por encima de los efectos de fondo */
    position: relative;

}

/* --- Área del Logo --- */
.logo-area {
    display: flex;
    align-items: baseline;
    margin-bottom: 20px;
    position: relative;
    top: -50px; /* Sube un poco el logo */
}

.logo-image {
    width: 200px; 
    height: auto;
    /* Aplicar un filtro para darle el efecto de color azul y degradado del ejemplo */
    filter: drop-shadow(0 0 5px rgba(0, 123, 255, 0.7)); 
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 300;
    margin-left: 5px;
    color: var(--text-color);
    opacity: 0.8;
}


/* --- Mensaje y Botón --- */
.welcome-message {
    font-size: 3rem;
    font-weight: 800; /* Extra-negrita para impacto */
    margin-bottom: 40px;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Pequeño resplandor de texto */
}

.login-button {
    text-decoration: none;
    background-color: var(--button-bg);
    color: var(--text-color);
    padding: 12px 30px;
    border-radius: 25px; /* Bordes redondeados para el estilo 'píldora' */
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 2px solid var(--button-bg); /* Borde sutil */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Sombra para profundidad */
}

.login-button:hover {
    background-color: var(--button-hover-bg);
    border-color: var(--primary-color); 
    box-shadow: 0 4px 20px rgba(0, 123, 255, 0.4); /* Resplandor azul al pasar el mouse */
    transform: translateY(-2px); /* Pequeño levantamiento al pasar el mouse */
}