/* Contenedor Efecto Vidrio Esmerilado */
.glass-card {
    background: rgba(18, 22, 33, 0.82) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.65) !important;
    display: block !important;
}

/* Efecto brillo sutil en el título */
.custom-glow-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
}

/* Etiquetas de texto secundario */
.text-light-muted {
    color: #f1f5f9 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

/* Inputs de cristal */
.custom-glass-input {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 18px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    height: 45px !important;
    min-height: 42px !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out;
    left: 0;
}

    /* Marcador de posición (Placeholder) en los inputs */
    .custom-glass-input::placeholder {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    /* Animación al hacer clic o enfocarse en los campos */
    .custom-glass-input:focus {
        background-color: rgba(255, 255, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(20px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
        box-shadow: 0 0 0 3px transparent !important;
        right: 10px !important;
        height: 45px !important;
        border-color: #94a3b8 !important;
        box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2) !important;
        outline: none !important;
    }

/* Enlaces estilizados con paleta del espacio */
.custom-link {
    color: #c084fc !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

    .custom-link:hover {
        color: #ddd6fe !important; /* Más claro al pasar el cursor */
        text-shadow: 0 0 8px rgba(167, 139, 250, 0.6);
    }

.fw-bold {
    color: #c084fc !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

/* Botón de ingreso estilo Nebulosa/Galaxia */
.custom-btn-galaxy {
    background: linear-gradient(135deg, #9333ea 0%, #2563eb 100%) !important;
    border: none !important;
    color: #ffffff !important;
    height: 45px !important;
    min-height: 42px !important;
    font-weight: 600 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 15px rgba(147, 51, 234, 0.4) !important;
}

    .custom-btn-galaxy:hover {
        box-shadow: 0 6px 20px rgba(147, 51, 234, 0.6) !important;
        background: linear-gradient(135deg, #a855f7 0%, #3b82f6 100%) !important; /* Colores ligeramente más vivos en hover */
    }

    .custom-btn-galaxy:active {
        transform: translateY(0);
    }

.glass-card p.sign-up {
    color: rgba(255,255,255,0.6) !important;
}

/* ========================================================================================= */
/* CORRECCIÓN PARA MODO CLARO (body.light): Cristal Esmerilado Brillante Ultra Elegante     */
/* ========================================================================================= */

/* 1. La tarjeta ahora será un vidrio blanco translúcido que deja ver el universo */
body.light .glass-card {
    background: rgba(255, 255, 255, 0.12) !important; /* Bajamos la opacidad al 12% para que no sea un bloque sólido */
    backdrop-filter: blur(20px) saturate(160%) !important; /* Aumentamos el desenfoque y revivimos los colores morados de atrás */
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Un borde blanco más brillante para simular el reflejo del cristal */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important; /* Mantenemos una sombra profunda para despegarlo del fondo */
}

    /* 2. Forzamos los títulos y textos a mantenerse blancos con una sombra negra para legibilidad absoluta */
    body.light .glass-card .custom-glow-title {
        color: #ffffff !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
    }

    body.light .glass-card label {
        color: #f8fafc !important; /* Blanco tiza brillante */
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
    }

    /* 3. Inputs en Modo Claro: Vidrio semi-blanco muy limpio */
    body.light .glass-card .custom-glass-input {
        background: rgba(255, 255, 255, 0.25) !important;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        color: #ffffff !important; /* Texto blanco al escribir */
    }

        /* Color del marcador de posición (Placeholder) */
        body.light .glass-card .custom-glass-input::placeholder {
            color: rgba(255, 255, 255, 0.5) !important;
        }

        /* Enfoque del Input cuando se hace clic */
        body.light .glass-card .custom-glass-input:focus {
            background: rgba(255, 255, 255, 0.25) !important;
        }

    /* 4. Enlaces en Modo Claro: Un tono celeste/cian brillante para que resalte sobre el morado */
    body.light .glass-card .custom-link {
        color: #38bdf8 !important; /* Celeste neón (Sky 400) */
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    }

        body.light .glass-card .custom-link:hover {
            color: #7dd3fc !important;
            text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
        }

    /* Texto informativo inferior ("¿No tienes una cuenta?") */
    body.light .glass-card p.sign-up,
    body.light .glass-card p {
        color: rgba(255, 255, 255, 0.7) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    }

    /* 5. Botón de Ingreso en Modo Claro (Un degradado azul eléctrico muy moderno) */
    body.light .glass-card .custom-btn-galaxy {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
    }

        body.light .glass-card .custom-btn-galaxy:hover {
            background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%) !important;
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6) !important;
        }

    /* ========================================================================================= */
    /* AJUSTE FINO DE TEXTOS PARA MODO CLARO (body.light)                                        */
    /* ========================================================================================= */

    /* Enlaces en Modo Claro: Un morado/lila neón brillante para que resalte sobre el fondo claro */
    body.light .glass-card .custom-link {
        color: #e9d5ff !important; /* Lila claro ultra brillante */
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important; /* Sombra oscura pesada para despegarlo del cristal */
        font-weight: 600 !important;
    }

        body.light .glass-card .custom-link:hover {
            color: #000 !important;
            text-shadow: 0 0 10px rgba(168, 85, 247, 1) !important;
        }

    /* El texto de "¿No tienes una cuenta?" */
    body.light .glass-card p.sign-up,
    body.light .glass-card p {
        color: #ffffff !important; /* Forzado a blanco puro */
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8) !important; /* Sombra para legibilidad total */
        font-weight: 500 !important;
    }