body { 
                font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 
                line-height: 1.6; 
                color: #333; 
                margin: 0; 
                padding: 0; 
                background: #f5f7fa;
            }
            .container { 
                max-width: 600px; 
                margin: 20px auto; 
                background: white; 
                border-radius: 10px; 
                overflow: hidden; 
                box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            }
            .header { 
                background: linear-gradient(135deg, #2c3e50, #1a252f); 
                color: white; 
                padding: 30px 20px; 
                text-align: center;
            }
            .header h1 { 
                margin: 0; 
                font-size: 24px; 
                display: flex; 
                align-items: center; 
                justify-content: center; 
                gap: 10px;
            }
            .content { 
                padding: 40px;
            }
            .greeting { 
                font-size: 18px; 
                margin-bottom: 20px; 
                color: #2c3e50;
            }
            .message { 
                margin-bottom: 30px; 
                color: #555;
            }
            .button-container { 
                text-align: center; 
                margin: 40px 0;
            }
            .recovery-button { 
                display: inline-block; 
                background: linear-gradient(135deg, #4fc3f7, #29b6f6); 
                color: white; 
                padding: 15px 30px; 
                text-decoration: none; 
                border-radius: 8px; 
                font-weight: 600; 
                font-size: 16px; 
                transition: all 0.3s; 
                box-shadow: 0 4px 15px rgba(79, 195, 247, 0.3);
            }
            .recovery-button:hover { 
                background: linear-gradient(135deg, #29b6f6, #0288d1);
            }
            .warning-box { 
                background: #fff8e1; 
                border-left: 4px solid #ffb300; 
                padding: 20px; 
                margin: 30px 0; 
                border-radius: 4px;
            }
            .url-box { 
                background: #f8f9fa; 
                padding: 15px; 
                border-radius: 6px; 
                margin: 20px 0; 
                font-family: "Courier New", monospace; 
                word-break: break-all; 
                font-size: 14px; 
                color: #2c3e50;
            }
            .details { 
                background: #f8fafc; 
                padding: 20px; 
                border-radius: 6px; 
                margin-top: 30px;
            }
            .footer { 
                text-align: center; 
                padding: 20px; 
                color: #666; 
                font-size: 0.9rem; 
                border-top: 1px solid #eee;
            }
        body {
            background: 
                linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
                url('/imagenes/fondo.jpg') no-repeat center center fixed;
            background-size: cover;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .recovery-card {
            background: rgba(30, 30, 40, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 
                0 15px 35px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            padding: 40px;
            max-width: 500px;
            width: 100%;
            color: #fff;
            animation: fadeIn 0.5s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .email-icon {
            color: #4fc3f7;
            font-size: 3rem;
            text-align: center;
            margin-bottom: 20px;
            text-shadow: 0 0 10px rgba(79, 195, 247, 0.3);
        }
        
        h2 {
            color: #4fc3f7;
            text-align: center;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .subtitle {
            color: #b0bec5;
            text-align: center;
            margin-bottom: 30px;
            font-size: 0.9rem;
        }
        
        .alert {
            border-radius: 10px;
            border: none;
            backdrop-filter: blur(5px);
        }
        
        .alert-danger {
            background: rgba(244, 67, 54, 0.15);
            color: #ff8a80;
            border-left: 3px solid #ff5252;
        }
        
        .alert-success {
            background: rgba(76, 175, 80, 0.15);
            color: #a5d6a7;
            border-left: 3px solid #4caf50;
        }
        
        .form-control {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 10px;
            padding: 12px 15px;
            transition: all 0.3s;
        }
        
        .form-control:focus {
            background: rgba(255, 255, 255, 0.08);
            border-color: #4fc3f7;
            color: #fff;
            box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2);
        }
        
        .form-control::placeholder {
            color: #90a4ae;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #4fc3f7, #29b6f6);
            border: none;
            border-radius: 10px;
            padding: 13px;
            font-weight: 600;
            width: 100%;
            transition: all 0.3s;
            color: #1a237e;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #29b6f6, #0288d1);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(79, 195, 247, 0.4);
        }
        
        .btn-email {
            background: #4fc3f7;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 10px;
            text-decoration: none;
            display: inline-block;
            margin-top: 10px;
            transition: all 0.3s;
            font-weight: 600;
        }
        
        .btn-email:hover {
            background: #29b6f6;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(79, 195, 247, 0.3);
        }
        
        .email-action {
            text-align: center;
            margin-top: 20px;
        }
        
        .back-link {
            color: #4fc3f7;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-top: 20px;
        }
        
        .back-link:hover {
            color: #81d4fa;
            text-decoration: none;
        }
        
        .security-info {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 15px;
            margin: 20px 0;
            border-left: 3px solid #4fc3f7;
        }
        
        @media (max-width: 480px) {
            .recovery-card {
                padding: 25px 20px;
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
            
            .email-icon {
                font-size: 2.5rem;
            }
            
            h2 {
                font-size: 1.4rem;
            }
        }