* {
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Roboto', sans-serif;
}
body {
    height: 100vh; 
    width: 100%;
    background: radial-gradient(circle at center bottom, #1c2b45 0%, #05070a 100%);
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column;
    overflow-x: hidden; 
    overflow-y: auto;
    position: relative;
    padding: 20px;
}
.top-bar { 
    position: absolute; 
    top: 20px; 
    right: 30px; 
    color: #a0a0a0; 
    font-size: 0.9rem; 
}
.big-title { 
    font-size: 4rem; 
    color: #cfd4da; 
    margin-bottom: 30px; 
    text-shadow: 0px 5px 15px rgba(0,0,0,0.5);
    text-align: center; 
}

/* --- Estilos de la Tarjeta --- */
.glass-card {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Animación suave al aparecer */
    animation: fadeIn 0.5s ease-in-out;
}

/* --- Estilos del Logo en Login --- */

.brand-container {
    display: flex;             /* Los pone en fila */
    align-items: center;       /* Los centra verticalmente */
    justify-content: center;   /* Los centra en la pantalla */
    gap: 15px;                 /* Espacio entre la caja y el texto */
    margin-bottom: 20px;       /* Espacio debajo */
}

.logo-icon {
    font-size: 3rem;         /* Tamaño grande (ajústalo a tu gusto) */
    color: #6ea8fe;            /* El mismo azul del Dashboard */
    animation: flotarYBrillar 5s ease-in-out infinite;
}
/* Aseguramos que el texto sea blanco */
.brand-container h1 {
    margin: 0;
    color: white;
    font-size: 2.5rem;
}

/* Animación opcional de flotación */
@keyframes flotarYBrillar {
0%, 30% { 
        /* Posición original y brillo suave */
        transform: translateY(0);
        filter: drop-shadow(0 0 5px rgba(110, 168, 254, 0.3)); 
    }
    60% { 
        /* Sube 10px y el brillo se vuelve INTENSO */
        transform: translateY(-0.5px);
        filter: drop-shadow(0 0 20px rgba(110, 168, 254, 0.5)); 
    }
}



/* Animación opcional para que se vea moderno */
@keyframes floatLogo {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

/* Asegúrate que el h1 no tenga margenes extraños */
.brand-header h1 {
    margin: 0;
    font-size: 2.5rem;         /* Tamaño del texto */
    color: white;              /* O el color que uses */
}
/* Clase utilitaria para ocultar elementos */
.hidden {
    display: none;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.card-header h2 {
    color: #6ea8fe;
    font-size: 1.8rem;
    margin-bottom: 25px;
    font-weight: 400;
    text-align: center;
}

/* --- Inputs --- */
.input-group { 
    margin-bottom: 15px; 
}
.input-group label { 
    display: block; 
    color: #b0c4de; 
    font-size: 0.8rem; 
    margin-bottom: 5px; 
    letter-spacing: 1px; 
    user-select: none;         
}
.input-group input {
    width: 100%; padding: 10px 15px;
    background: rgba(0, 0, 0, 0.3); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px; 
    color: #fff; 
    font-size: 0.95rem;
    outline: none;
}
.input-group input:focus { 
    border-color: #4a90e2; 
    background: rgba(0, 0, 0, 0.5); 
}

/* Estilo especial para el input de fecha (para que el calendario se vea bien en oscuro) */
input[type="date"] {
    color-scheme: dark;
}
/* Agrupación de Nombre y Apellido en una fila */
.row-group { display: flex; gap: 10px; }
.half { width: 50%; }

.password-wrapper { position: relative; }
.icon-lock { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #6c757d; font-size: 0.8rem; }


/* --- BLOQUEO GLOBAL DE TEXTO --- */
h1, h2, h3, p, span, div, label, .top-bar {
    cursor: default;            /* Mantiene la flecha del mouse siempre */
    -webkit-user-select: none;  /* Chrome / Safari */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* Edge / IE */
    user-select: none;          /* Estándar */
}

/* --- Botón --- */
.btn-primary {
    width: 100%; padding: 12px; margin-top: 10px; border: none; border-radius: 6px;
    background: linear-gradient(to bottom, #3b7cbd 0%, #1a4a7c 100%);
    color: white; font-size: 1rem; font-weight: bold; cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: 0.3s;
}
.btn-primary:hover { transform: translateY(-2px); background: linear-gradient(to bottom, #4a8fd9 0%, #255a91 100%); }

/* --- Enlaces de cambio (Login <-> Registro) --- */
.switch-link {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #a0a0a0;
}
.switch-link a {
    color: #6ea8fe;
    text-decoration: none;
    font-weight: bold;
    margin-left: 5px;
    transition: color 0.3s;
}
.switch-link a:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- Estilo para el ícono de ver contraseña --- */
.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    cursor: pointer; /* Importante: indica que es clicable */
    transition: color 0.3s ease;
    z-index: 10;
}

.toggle-password:hover {
    color: #6ea8fe; /* Cambia a azul al pasar el mouse */
}

/* --- RESPONSIVE PARA 800x600 E INFERIORES --- */
@media (max-width: 800px), (max-height: 600px) {
    body {
        padding: 20px;
        justify-content: center; /* Mantener centrado vertical en móvil */
        height: auto; 
        min-height: 100vh;
    }

    .main-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .brand-container {
        flex-direction: column; /* Apila logo y texto */
        gap: 10px;
    }

    .top-bar {
        position: static; /* Quita posición absoluta en móvil */
        text-align: center;
        margin-bottom: 20px;
    }

    .big-title {
        font-size: 2.2rem;
        margin-bottom: 15px;
    }

    .glass-card {
        padding: 25px; 
        max-width: 100%; /* Ocupa el ancho disponible */
    }

    .card-header h2 {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .row-group {
        flex-direction: column; 
        gap: 0;
    }
    
    .half {
        width: 100%;
    }
}

/* Ajuste extremo para pantallas muy pequeñas */
@media (max-width: 360px) {
    .brand-container h1 { font-size: 2rem; }
    .glass-card { padding: 15px; }
}